@font-face{font-family:ClubTitle;src:url('brand/manrope-800.ttf');font-weight:800;font-display:swap}
#title-screen{box-sizing:border-box;position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:radial-gradient(ellipse at 48% 47%,#354a40 0,var(--club-green) 58%,var(--club-deep) 100%);color:#eeece5;overflow:auto;border-radius:0;box-shadow:none}
#title-screen::backdrop{background:var(--club-deep)}
#title-screen .title-layout{box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:24px;min-height:100%;height:100%;max-width:480px;margin:auto;padding:max(40px,8dvh,calc(env(safe-area-inset-top) + 20px)) 28px max(20px,calc(env(safe-area-inset-bottom) + 16px))}
#title-screen .title-brand{display:flex;flex-direction:column;align-items:center;gap:16px;height:auto;margin:0;padding:0;border:0}
#title-screen h1{margin:0;padding:0;width:100%;line-height:1}
#title-screen .title-logo{display:block;width:100%;height:auto}
#title-screen .title-tagline{margin:0;text-align:center;font:500 14px/1.4 system-ui,sans-serif;color:#d8d5c7}
#title-screen .title-art{display:flex;align-items:center;justify-content:center;min-height:0}
#title-screen .title-mascot{display:block;width:100%;max-width:380px;max-height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px #10191440)}
#title-screen .title-actions{display:grid;gap:10px}
#title-screen .title-play{box-sizing:border-box;width:100%;min-height:58px;border:0;border-radius:var(--club-button-radius);background:var(--club-cream);color:var(--club-green);display:flex;align-items:center;justify-content:center;gap:12px;font:800 20px/1.2 ClubTitle,system-ui,sans-serif;cursor:pointer;box-shadow:0 7px 22px #090d0a45}
#title-screen .title-play:hover{background:#f4efe5}
#title-screen .title-play:focus-visible{outline:3px solid #e5835e;outline-offset:4px}
#title-screen .title-footnote{margin:0;text-align:center;color:#eeece5b3;font:11px/1.4 system-ui,sans-serif}
@media(orientation:landscape) and (max-height:600px){#title-screen .title-layout{max-width:960px;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;column-gap:36px;padding:max(20px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left))}#title-screen .title-brand{justify-content:center;grid-column:1;grid-row:1}#title-screen .title-actions{grid-column:1;grid-row:2}#title-screen .title-art{grid-column:2;grid-row:1/3}}
#title-screen .title-layout{grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(12px,3.2dvh,24px)}
#title-screen .title-welcome{text-align:center;align-self:end;padding:0 0 4px;color:var(--club-cream,#e8e1d3)}
#title-screen .title-welcome p{margin:0 0 8px;color:#d3b98f;font:800 10px/1.4 ClubTitle,system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase}
#title-screen .title-welcome h2{margin:0;font:400 clamp(42px,11vw,58px)/.98 Georgia,'Times New Roman',serif;letter-spacing:-1.7px;color:var(--club-cream,#e8e1d3)}
#title-screen .title-welcome h2 em{font-weight:400;color:var(--club-rust)}
#title-screen .title-welcome>span{display:block;margin-top:10px;color:#d4d6c9;font:500 13px/1.5 ClubTitle,system-ui,sans-serif}
#title-screen .title-play{border-radius:var(--club-button-radius,16px);background:var(--club-cream,#e8e1d3);font-size:18px}
@media(orientation:landscape) and (max-height:600px){#title-screen .title-layout{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:10px 36px}#title-screen .title-brand{grid-column:1;grid-row:1}#title-screen .title-welcome{grid-column:1;grid-row:2;align-self:center}#title-screen .title-art{grid-column:2;grid-row:1/4}#title-screen .title-actions{grid-column:1;grid-row:3}#title-screen .title-brand{gap:8px}#title-screen .title-brand .title-logo{max-height:88px;object-fit:contain}#title-screen .title-tagline{font-size:12px}#title-screen .title-welcome h2{font-size:clamp(34px,8vh,48px)}#title-screen .title-welcome>span{margin-top:5px;font-size:11px}}
@media(max-height:560px) and (orientation:portrait){#title-screen .title-layout{padding-top:max(22px,calc(env(safe-area-inset-top) + 10px));padding-bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));gap:10px}#title-screen .title-brand{gap:8px}#title-screen .title-brand .title-logo{max-height:clamp(70px,17vh,110px);object-fit:contain}#title-screen .title-welcome h2{font-size:40px}#title-screen .title-welcome>span{font-size:11px;margin-top:4px}#title-screen .title-actions{gap:6px}#title-screen .title-play{min-height:50px}#title-screen .title-footnote{font-size:10px}}