@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/font-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/font-7.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/font-8.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/font-9.ttf) format('truetype');
}

:root{color-scheme:dark;--ink:#09141c;--panel:#121e27;--muted:#96a6b0;--lime:#c5f45e;--home:#c91537;--away:#176bc8;font-family:Barlow,system-ui,sans-serif;color:#f3f6f8;background:var(--ink)}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #c5f45e;outline-offset:3px}button:disabled{opacity:.45;cursor:wait}a{color:inherit;text-decoration:none}canvas#field{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.hidden{display:none!important}.screen{position:fixed;inset:0}.brand-row{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:1px;line-height:1.1}.monogram{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-style:italic;background:var(--lime);color:var(--ink);width:70px;height:66px;display:grid;place-items:center;font-size:40px;transform:skew(-7deg);border-radius:3px}.monogram.small{width:42px;height:42px;font-size:27px}.quiet{background:none;color:#c1ccd3;font-size:10px;letter-spacing:1.4px;font-weight:700;padding:10px}.quiet span{margin-left:16px}.eyebrow{font-size:11px;letter-spacing:2.3px;font-weight:700;color:var(--lime);display:flex;align-items:center;gap:9px}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 13px #c5f45e66;display:inline-block}#menu{padding:28px 4.5vw 18px;background:linear-gradient(90deg,rgba(5,14,22,.97) 0%,rgba(5,14,22,.91) 29%,rgba(5,14,22,.3) 65%,rgba(5,14,22,.12)),linear-gradient(0deg,rgba(4,11,18,.84),transparent 30%);display:flex;flex-direction:column;overflow-y:auto}.menu-main{width:min(460px,48vw);margin:auto 0;padding:24px 0}h1,h2,h3,p{margin-top:0}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(50px,6.6vw,94px);line-height:.87;letter-spacing:-1px;margin:19px 0 20px;font-weight:800;font-style:italic}h1 em{color:var(--lime);font-style:inherit}.intro{color:#b1bec8;font-size:13px;margin-bottom:23px}.matchup{display:flex;align-items:center;margin:0 0 14px;gap:12px}.team-choice{background:#14202ac9;border:1px solid #58626c45;flex:1;text-align:left;position:relative;padding:11px 15px;min-width:0;border-left:3px solid var(--home);border-radius:3px}#away-team{border-left-color:var(--away)}.label{display:block;color:#aebbc4;font-size:9px;letter-spacing:1.6px}.team-code{font-family:'Barlow Condensed',Impact,sans-serif;display:block;font-size:35px;font-weight:800;line-height:1.2}.team-name{display:block;font-size:10px;color:#aebbc4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.change{position:absolute;right:8px;top:10px;font-size:7px;color:#acbec9}.versus{font-family:'Barlow Condensed';font-style:italic;color:#a7b3bb;font-size:21px}.menu-actions{display:flex;gap:10px}.primary,.secondary{display:flex;align-items:center;justify-content:space-between;text-align:left;position:relative;border-radius:3px;padding:18px 19px;font-weight:800;font-size:14px;letter-spacing:.6px;min-height:52px}.primary{background:var(--lime);color:#182217}.secondary{background:#1d2b36;border:1px solid #40515f;color:#e9f0f3}.menu-actions button{flex:1;padding:13px 15px 28px}.menu-actions button small{position:absolute;left:15px;bottom:11px;font-size:8px;letter-spacing:1.4px;opacity:.6}.details{display:flex;align-items:center;gap:13px;margin:16px 0 0;font-size:8px;letter-spacing:1.2px;color:#b0bbc3}.details i{width:3px;height:3px;background:#667b88;border-radius:50%}.details button{font-size:inherit;letter-spacing:inherit;background:transparent;padding:0;color:inherit}.field-caption{position:absolute;right:5%;bottom:15%;display:flex;align-items:center;gap:12px;font-size:11px;line-height:1.5;font-weight:700;letter-spacing:2px}.caption-line{width:25px;height:2px;background:var(--lime)}footer{display:flex;justify-content:space-between;font-size:8px;color:#8395a2;letter-spacing:1.1px}#loading{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:25px;background:#09141c;z-index:90}#loading p{color:#a2b3be;font-size:13px}#game{pointer-events:none;touch-action:none}#game button,#game .playbook,#joystick{pointer-events:auto}.game-top{display:flex;align-items:center;justify-content:center;gap:14px;position:absolute;top:max(10px,env(safe-area-inset-top));left:max(15px,env(safe-area-inset-left));right:max(15px,env(safe-area-inset-right));height:48px}.round{width:34px;height:34px;border-radius:50%;background:#0a182bd9;position:absolute;left:0;font-size:17px}.connection{position:absolute;right:0;font-size:9px;letter-spacing:.5px;background:#101d28c9;padding:8px;border-radius:4px;color:#c0d6d0}#scoreboard{height:45px;display:flex;align-items:stretch;filter:drop-shadow(0 3px 8px #0006)}.score-team{display:flex;align-items:center;gap:15px;padding:0 18px;min-width:122px;background:#142331e8;border-bottom:3px solid var(--home)}.score-team.home{border-radius:4px 0 0 4px}.score-team.away{border-color:var(--away);border-radius:0 4px 4px 0}.score-team b{font-size:15px;letter-spacing:1px}.score-team strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:29px}.game-clock{background:#0b1421ed;min-width:82px;text-align:center;padding:4px 17px}.game-clock span{display:block;font-size:8px;color:#96a7b4}.game-clock b{font-family:'Barlow Condensed';font-size:19px;font-weight:600}.situation{position:absolute;top:64px;left:50%;transform:translateX(-50%);display:flex;gap:13px;align-items:center;font-size:10px;background:#0c1d29d9;padding:8px 12px;border-radius:3px;white-space:nowrap}.situation strong{letter-spacing:.6px}#role-pill{font-size:8px;color:var(--lime);font-weight:800}#spot{color:#b0c3cf;font-size:9px}.playbook{position:absolute;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));width:min(640px,70vw);background:#091621f2;border:1px solid #49606c7a;border-radius:6px;padding:14px;box-shadow:0 15px 60px #0008}.playbook-head{display:flex;justify-content:space-between;margin-bottom:10px;font-size:10px;font-weight:700;letter-spacing:1px}.playbook-head span:last-child{font-size:9px;font-weight:400;letter-spacing:0;color:#b8c8d3}.plays{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}.play-card{flex:1;min-width:83px;background:#192b38;border:1px solid #4560716b;border-radius:4px;text-align:left;padding:8px;color:#c8d4dc;position:relative}.play-card.active{background:#c5f41a13;border-color:var(--lime);color:#e3fbc2}.play-card strong{font-size:10px;display:block;margin-bottom:3px;white-space:nowrap}.play-card span{font-size:7px;letter-spacing:1px;color:#839da9}.play-card svg{height:43px;width:100%;display:block;margin-bottom:4px}.playbook-bottom{display:flex;align-items:center;gap:3px;margin-top:9px}.playbook-bottom .quiet{font-size:8px;padding:8px 7px;letter-spacing:.6px}#selected-description{font-size:9px;color:#9badb8;padding:0 8px;flex:1}.compact{min-height:34px;padding:10px 16px;font-size:11px;white-space:nowrap}.controls{position:absolute;inset:0;pointer-events:none}.controls button{touch-action:none;user-select:none;-webkit-user-select:none}.actions{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:10px}.action{width:64px;height:64px;border:1px solid #ffffff57;border-radius:50%;font-size:9px;font-weight:700;letter-spacing:.5px;background:#12303ac2;backdrop-filter:blur(6px)}.action.sprint{width:83px;height:83px;background:#c5f45ee6;color:#203019;border:3px solid #e8ffbf77}.action.active,.action:active{transform:scale(.93);filter:brightness(1.3)}#joystick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(21px,env(safe-area-inset-bottom));width:125px;height:125px;border:1px solid #fff3;background:#0b1a2c4d;border-radius:50%;touch-action:none;user-select:none}.joystick-ring{position:absolute;inset:17px;border:1px solid #fff2;border-radius:50%}#stick{position:absolute;left:37px;top:37px;width:50px;height:50px;border:1px solid #fff8;border-radius:50%;background:#9badb669;box-shadow:0 3px 15px #0003}#joystick>span{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:1px;color:#ffffff6b}.player-name{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;letter-spacing:1px;text-shadow:0 1px 4px #000}.game-hint{position:absolute;bottom:39px;left:50%;transform:translateX(-50%);font-size:9px;color:#e1e9ed;text-shadow:0 1px 4px #000;white-space:nowrap}.receiver{position:absolute;transform:translate(-50%,-100%);min-width:50px;min-height:36px;background:#0b223ce6;border:1px solid #8bdfff;border-radius:5px;color:#e0f6ff;text-align:center;padding:4px 7px;box-shadow:0 2px 10px #0005;white-space:nowrap}.receiver b{display:block;font-size:11px;line-height:13px;color:var(--lime)}.receiver span{font-size:7px;letter-spacing:.3px}.play-result{position:absolute;top:29%;left:50%;transform:translate(-50%,-50%);text-align:center;text-shadow:0 4px 25px #000c;width:85%}.play-result small{display:block;color:var(--lime);font-size:10px;letter-spacing:3px;font-weight:800;margin-bottom:8px}.play-result strong{display:block;font-family:'Barlow Condensed',Impact;font-size:clamp(25px,4vw,50px);font-style:italic;font-weight:800;text-transform:uppercase}.blocking{position:absolute;inset:0;background:#07121ae0;display:grid;place-items:center;pointer-events:auto;z-index:15}.glass{padding:28px;text-align:center}.glass .secondary{margin:auto}.glass h2{margin:12px}.glass p{color:var(--muted)}dialog{color:#f0f5f8;background:#111e29;border:1px solid #45607280;border-radius:9px;box-shadow:0 30px 100px #0009;width:min(710px,92vw);max-height:87dvh;padding:26px}dialog::backdrop{background:#03101dbb;backdrop-filter:blur(7px)}dialog h2{font-family:'Barlow Condensed',Impact;font-size:38px;font-weight:700;margin:5px 0 18px;line-height:1.03}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.close{font-size:28px;background:#1e3040;border-radius:50%;width:33px;height:33px;line-height:1;padding:0;color:#b4c7d5}input{width:100%;padding:13px 15px;color:#edf3f8;border:1px solid #3d586b;background:#0b1620;border-radius:4px;font:inherit;outline-color:var(--lime)}.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:15px}.team-tile{background:#1b2c38;border:1px solid #3b505d;border-radius:4px;display:flex;flex-direction:column;text-align:left;padding:12px;border-top:3px solid var(--team)}.team-tile strong{font-size:26px;font-family:'Barlow Condensed';margin-bottom:3px}.team-tile span{color:#9eb2bf;font-size:10px}.team-tile.selected{outline:2px solid var(--lime)}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.help-grid article{background:#192b39;padding:16px;border-radius:4px}.help-grid b{color:var(--lime);font-size:12px}.help-grid h3{font-family:'Barlow Condensed';font-size:25px;margin:8px 0}.help-grid p,.muted,dialog>p{font-size:12px;color:#9eafbc;line-height:1.55}.help-grid p{margin:0}.muted{margin:16px 0 0}#roster-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}#roster-list h3{font-size:15px;margin:12px 0}.roster-row{display:flex;gap:8px;font-size:11px;padding:7px 0;border-bottom:1px solid #ffffff0d}.roster-row b{font-size:9px;width:26px;color:var(--lime)}#lobby-dialog,#pause-dialog,#final-dialog{width:min(440px,92vw)}#lobby-dialog>.primary,#lobby-dialog>.secondary,#pause-dialog>.primary,#pause-dialog>.secondary,#final-dialog>.primary{width:100%;margin-top:10px}.invite-box{display:flex;gap:5px}.invite-box input{min-width:0;font-size:10px}.invite-box button{font-size:9px}.lobby-teams{display:flex;gap:30px;justify-content:center;align-items:center;margin:25px 0}.lobby-teams>div{text-align:center}.lobby-teams span{display:block;font-size:8px;letter-spacing:2px;color:#91a4b1}.lobby-teams b{font-family:'Barlow Condensed';font-size:33px}.lobby-teams i{font-family:'Barlow Condensed';color:#738c9b}.final-score{font-family:'Barlow Condensed';font-size:50px;letter-spacing:4px;text-align:center;padding:20px;background:#1b2c38;border-radius:4px}.toast{position:fixed;z-index:110;left:50%;bottom:25px;transform:translateX(-50%);background:#e6f4d5;color:#182819;padding:12px 19px;border-radius:4px;font-size:12px;box-shadow:0 4px 30px #0007;max-width:90vw}#rotate{position:fixed;inset:0;z-index:80;background:#07131bee;backdrop-filter:blur(15px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}#rotate>div{font-size:65px;color:var(--lime);margin-bottom:20px}#rotate h2{font-family:'Barlow Condensed';font-size:40px;margin-bottom:12px}#rotate p{font-size:13px;color:#a7b8c2}
.game-hint[data-catch]{padding:6px 10px;border:1px solid #9ac7de40;border-radius:4px;background:#0a1926e8;color:#d7edfa;font-size:10px;font-weight:600;letter-spacing:.4px;text-align:center;pointer-events:none}.game-hint[data-catch="contested"]{color:#ffdb97;border-color:#d9aa4b55}.game-hint[data-catch="secured"]{color:var(--lime);border-color:#b6e95550}
html[data-landscape-size] #menu{padding:16px max(28px,env(safe-area-inset-left)) 10px}
html[data-landscape-size] .brand-row{height:30px}
html[data-landscape-size] .monogram.small{width:30px;height:30px;font-size:21px}
html[data-landscape-size] .brand{font-size:9px}
html[data-landscape-size] .menu-main{width:42vw;max-width:405px;padding:10px 0 8px}
html[data-landscape-size] h1{font-size:clamp(36px,6.7vw,65px);margin:10px 0 9px}
html[data-landscape-size] .eyebrow{font-size:8px;letter-spacing:1.7px}
html[data-landscape-size] .intro{font-size:10px;margin-bottom:11px}
html[data-landscape-size] .team-choice{padding:7px 10px}
html[data-landscape-size] .team-code{font-size:25px}
html[data-landscape-size] .label{font-size:7px}
html[data-landscape-size] .change{font-size:6px}
html[data-landscape-size] .team-name{font-size:8px}
html[data-landscape-size] .matchup{gap:8px;margin-bottom:9px}
html[data-landscape-size] .menu-actions button{font-size:10px;padding:9px 10px 23px;min-height:47px}
html[data-landscape-size] .menu-actions button small{font-size:6px;left:10px;bottom:8px}
html[data-landscape-size] .details{font-size:6px;gap:9px;margin-top:9px}
html[data-landscape-size] footer{font-size:6px}
html[data-landscape-size] .field-caption{font-size:8px}
html[data-landscape-size] .game-top{height:37px;top:8px}
html[data-landscape-size] #scoreboard{height:37px}
html[data-landscape-size] .score-team{min-width:105px;padding:0 13px;gap:12px}
html[data-landscape-size] .score-team strong{font-size:25px}
html[data-landscape-size] .score-team b{font-size:13px}
html[data-landscape-size] .game-clock{min-width:60px;padding:2px 10px}
html[data-landscape-size] .game-clock b{font-size:18px}
html[data-landscape-size] .situation{top:51px;padding:5px 10px;font-size:9px;gap:9px}
html[data-landscape-size] .playbook{bottom:10px;width:68vw;padding:10px}
html[data-landscape-size] .play-card{padding:6px;min-width:73px}
html[data-landscape-size] .play-card svg{height:33px}
html[data-landscape-size] .play-card strong{font-size:9px}
html[data-landscape-size] .playbook-head{font-size:8px;margin-bottom:6px}
html[data-landscape-size] .playbook-head span:last-child{font-size:8px}
html[data-landscape-size] .playbook-bottom{margin-top:4px}
html[data-landscape-size] .playbook-bottom .quiet{font-size:7px}
html[data-landscape-size] #selected-description{font-size:8px}
html[data-landscape-size] .compact{min-height:30px;padding:8px 12px;font-size:10px}
html[data-landscape-size] #joystick{width:108px;height:108px;bottom:16px;left:max(25px,env(safe-area-inset-left))}
html[data-landscape-size] #stick{left:30px;top:30px;width:48px;height:48px}
html[data-landscape-size] .actions{right:max(22px,env(safe-area-inset-right));bottom:20px;gap:9px}
html[data-landscape-size] .action{width:54px;height:54px;font-size:8px}
html[data-landscape-size] .action.sprint{width:70px;height:70px}
html[data-landscape-size] .game-hint{bottom:32px;font-size:8px}
html[data-landscape-size] .player-name{bottom:10px;font-size:8px}
html[data-landscape-size] .play-result{top:29%}
html[data-landscape-size] .play-result strong{font-size:32px}
html[data-landscape-size] .play-result small{font-size:8px;margin-bottom:5px}
html[data-landscape-size] dialog{padding:20px;max-height:91dvh}
html[data-landscape-size] dialog h2{font-size:29px;margin-bottom:12px}
html[data-landscape-size] .help-grid{gap:9px}
html[data-landscape-size] .help-grid article{padding:10px}
html[data-landscape-size] .help-grid h3{font-size:21px;margin:3px 0}
html[data-landscape-size] .help-grid p{font-size:10px}
html[data-landscape-size] .muted{font-size:10px}
html[data-landscape-size] .team-grid{grid-template-columns:repeat(6,1fr)}
html[data-landscape-size] .team-tile{padding:9px}
html[data-landscape-size] .team-tile strong{font-size:22px}
html[data-landscape-size] .team-tile span{font-size:8px}
html[data-landscape-size] .lobby-teams{margin:14px 0}
html[data-layout="portrait"] #menu{padding:25px 22px;background:linear-gradient(0deg,#07131bf7 0%,#07131be0 65%,#07131b70);}
html[data-layout="portrait"] .menu-main{width:100%;max-width:480px;margin:auto auto 20px;padding-top:42px}
html[data-layout="portrait"] h1{font-size:clamp(56px,15vw,85px)}
html[data-layout="portrait"] .field-caption{display:none}
html[data-layout="portrait"] .intro{font-size:12px}
html[data-layout="portrait"] footer{font-size:6px;gap:10px}
html[data-layout="portrait"] .team-grid{grid-template-columns:repeat(3,1fr)}
html[data-layout="portrait"] .help-grid{grid-template-columns:1fr}
html[data-layout="portrait"] .help-grid p{font-size:12px}
html[data-layout="portrait"] .menu-actions{gap:8px}
html[data-layout="portrait"] .menu-actions button{font-size:12px}
html[data-layout="portrait"] #roster-list{grid-template-columns:1fr}
html[data-layout="portrait"] .details{font-size:7px;gap:10px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* The visible viewport can be much shorter than Safari's layout viewport. */
html,body{width:100%;height:100%;overflow:hidden}
canvas#field,.screen,#loading,#rotate{inset:auto;top:var(--viewport-top,0px);left:var(--viewport-left,0px);width:var(--viewport-width,100vw);height:var(--viewport-height,100dvh)}
#menu{padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));padding-left:max(4.5vw,env(safe-area-inset-left));padding-right:max(4.5vw,env(safe-area-inset-right));min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#menu>.brand-row,#menu>.menu-main,#menu>footer{flex-shrink:0}
.header-actions{display:flex;align-items:center;gap:6px}
.header-actions .quiet{white-space:nowrap}
.header-actions .quiet [data-fullscreen-label]{margin:0}
.header-actions .quiet span[aria-hidden]{margin-left:8px;font-size:18px;vertical-align:middle}
.fullscreen-round{left:43px;font-size:23px}
dialog{top:calc(var(--viewport-top,0px) + var(--viewport-height,100dvh)/2);left:calc(var(--viewport-left,0px) + var(--viewport-width,100vw)/2);right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%);max-width:calc(var(--viewport-width,100vw) - 24px);max-height:calc(var(--viewport-height,100dvh) - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#fullscreen-dialog{width:min(460px,92vw)}
#fullscreen-install p{font-size:13px;line-height:1.55;color:#b6c6d1}
.toast{top:calc(var(--viewport-top,0px) + var(--viewport-height,100dvh) - max(20px,env(safe-area-inset-bottom)));bottom:auto;left:calc(var(--viewport-left,0px) + var(--viewport-width,100vw)/2);transform:translate(-50%,-100%)}
html[data-landscape-size] #menu{padding:12px max(28px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top))}
html[data-landscape-size] .menu-main{padding:8px 0;max-width:405px}
html[data-landscape-size] h1{font-size:clamp(36px,calc(var(--viewport-height,100dvh)*.115),58px);margin:8px 0}
html[data-landscape-size] .intro{margin-bottom:8px}
html[data-landscape-size] .header-actions .quiet{font-size:8px;letter-spacing:.8px;padding:6px}
html[data-landscape-size] .header-actions .quiet span{margin-left:6px}
html[data-landscape-size] .game-top{top:max(8px,env(safe-area-inset-top))}
html[data-landscape-size] .situation{top:calc(max(8px,env(safe-area-inset-top)) + 43px)}
html[data-landscape-size] .playbook{bottom:max(10px,env(safe-area-inset-bottom));max-height:calc(var(--viewport-height,100dvh) - max(8px,env(safe-area-inset-top)) - 86px - max(10px,env(safe-area-inset-bottom)));overflow-y:auto;overscroll-behavior:contain}
html[data-landscape-size] #joystick{bottom:max(16px,env(safe-area-inset-bottom))}
html[data-landscape-size] .actions{bottom:max(20px,env(safe-area-inset-bottom))}
html[data-landscape-size] .player-name{bottom:max(10px,env(safe-area-inset-bottom))}
html[data-landscape-size] .game-hint{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 22px)}
html[data-landscape-size] dialog{max-height:calc(var(--viewport-height,100dvh) - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))}
html[data-landscape-size="tiny"] .menu-main{width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(280px,1.1fr);align-items:center;column-gap:28px;padding:8px 0}
html[data-landscape-size="tiny"] .menu-pitch{max-width:330px}
html[data-landscape-size="tiny"] h1{font-size:clamp(32px,5.2vw,46px);margin:7px 0}
html[data-landscape-size="tiny"] .intro{font-size:9px;margin:0;max-width:240px}
html[data-landscape-size="tiny"] .menu-setup{max-width:470px}
html[data-landscape-size="tiny"] .field-caption{display:none}
html[data-landscape-size="tiny"] .details{flex-wrap:wrap;row-gap:4px}
html[data-layout="portrait"] #menu{padding-top:max(25px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
html[data-layout="portrait"] .header-actions{gap:0}
html[data-layout="portrait"] .header-actions .quiet{font-size:8px;padding:7px;letter-spacing:.5px}
html[data-layout="portrait"] .header-actions .quiet span{margin-left:5px}

.skill-cluster{display:flex;align-items:flex-end}
.skill-cluster.offense{display:grid;grid-template-columns:46px 56px 46px;grid-template-rows:42px 56px;gap:5px;align-items:center;justify-items:center}
.skill-cluster.offense #skill-action{grid-column:2;grid-row:2;width:56px;height:56px}
.skill-cluster.offense .direction{width:46px;height:46px;font-size:24px;line-height:1}
#juke-left{grid-column:1;grid-row:2}
#juke-right{grid-column:3;grid-row:2}
.skill-cluster.offense .spin{grid-column:2;grid-row:1;width:44px;height:40px;border-radius:16px;font-size:8px}
html[data-landscape-size] .skill-cluster.offense{grid-template-columns:40px 48px 40px;grid-template-rows:36px 48px;gap:4px}
html[data-landscape-size] .skill-cluster.offense #skill-action{width:48px;height:48px}
html[data-landscape-size] .skill-cluster.offense .direction{width:40px;height:40px;font-size:23px}
html[data-landscape-size] .skill-cluster.offense .spin{width:42px;height:36px}
html[data-landscape-size] .game-hint{max-width:calc(100% - 420px);white-space:normal;text-align:center}
html[data-layout="portrait"] .header-actions{min-width:0;flex:1;flex-wrap:wrap;justify-content:flex-end}
.header-actions .quiet span[data-fullscreen-label]{margin:0}
.fullscreen-entry{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 14px;margin:0 0 12px;border:1px solid #b8e85688;border-radius:5px;background:linear-gradient(110deg,#c5f45e22,#14251cdd);text-align:left;box-shadow:0 0 20px #c5f45e09}
.fullscreen-entry strong{display:block;color:var(--lime);font-size:13px;letter-spacing:1px}
.fullscreen-entry small{display:block;font-size:10px;color:#c8d7c1;margin-top:4px;line-height:1.3}
.fullscreen-entry .expand-icon{font-size:32px;color:var(--lime);line-height:1}
.fullscreen-entry .entry-arrow{margin-left:auto;font-size:24px;color:var(--lime)}
.fullscreen-entry:active{background:#355035}
#install-app,#fullscreen-continue{width:100%;margin-top:16px}
.install-steps{list-style:none;padding:0;margin:16px 0;display:grid;gap:15px}
.install-steps li{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.4}
.install-steps small{display:block;color:#9eafbc;margin-top:3px;font-size:11px}
.install-symbol{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:8px;background:#c5f45e18;color:var(--lime);font-size:22px}
html[data-landscape-size] .fullscreen-entry{min-height:46px;padding:6px 10px;margin-bottom:8px;gap:9px}
html[data-landscape-size] .fullscreen-entry strong{font-size:10px;letter-spacing:.7px}
html[data-landscape-size] .fullscreen-entry small{font-size:8px;margin-top:2px}
html[data-landscape-size] .fullscreen-entry .expand-icon{font-size:27px}
html[data-landscape-size="compact"] .menu-main{width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(280px,1.1fr);align-items:center;column-gap:28px}
html[data-landscape-size="compact"] .menu-pitch{max-width:330px}
html[data-landscape-size="compact"] .menu-setup{max-width:470px}
html[data-landscape-size="compact"] .field-caption{display:none}
html[data-layout="portrait"] .menu-main{padding-top:26px}
.skill-cluster.recovering #skill-action{border-color:#c5f45e66;box-shadow:inset 0 0 0 3px #c5f45e20}
html[data-landscape-size] .game-hint{left:calc(max(25px,env(safe-area-inset-left)) + 118px);right:calc(max(22px,env(safe-area-inset-right)) + 225px);max-width:none;transform:none}

/* The shared snap deadline stays readable without crowding the play cards. */
.playbook-head{align-items:center;gap:12px}
.playbook-heading{display:flex;min-width:0;flex-direction:column;gap:4px}
.playbook-head .playbook-heading #play-help{font-size:9px;font-weight:400;letter-spacing:0;color:#b8c8d3}
.play-clock{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:5px 8px;border:1px solid #c5f45e55;border-radius:4px;background:#c5f45e0a;color:var(--lime)}
.play-clock>span{font-size:8px;letter-spacing:1px;white-space:nowrap}
.play-clock strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:23px;line-height:1;font-variant-numeric:tabular-nums;min-width:36px;text-align:right;letter-spacing:.5px}
.play-clock.urgent{color:#ffca85;background:#a85e172e;border-color:#ffad61}
html[data-landscape-size] .playbook-heading{gap:3px}
html[data-landscape-size] .playbook-head .playbook-heading #play-help{font-size:8px}
html[data-landscape-size] .play-clock{padding:4px 6px;gap:6px}
html[data-landscape-size] .play-clock>span{font-size:7px;letter-spacing:.7px}
html[data-landscape-size] .play-clock strong{font-size:21px;min-width:33px}
html[data-landscape-size="tiny"] .play-card svg{height:28px}
.play-card.active:not(.chosen){background:#203747;border-color:#7a9eaf;color:#dce8ee}
.play-card.chosen>span,.playbook-head .playbook-heading #play-help.chosen{color:var(--lime)}
.playbook-bottom .quiet.chosen{background:#c5f45e22;color:var(--lime);border-radius:3px}
#snap{flex-shrink:0}

.join-entry{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:42px;padding:10px 12px;margin:0 0 16px;border:1px solid #6b9cb566;border-radius:4px;background:#102837d9;text-align:left}
.join-entry>span{font-size:8px;letter-spacing:1px;color:#a6bcc9}
.join-entry strong{font-size:11px;letter-spacing:.6px;white-space:nowrap;color:#cbe9f7}
.join-entry strong span{margin-left:8px}
#join-dialog{width:min(440px,92vw)}
.join-code-row{display:flex;align-items:stretch;gap:10px;margin-top:9px}
#join-code{min-width:0;font-family:'Barlow Condensed',Impact,sans-serif;font-size:30px;font-weight:600;letter-spacing:5px;text-transform:uppercase;padding:11px 14px}
#join-code::placeholder{color:#708999;opacity:1}
#join-code[aria-invalid="true"]{border-color:#ffad61}
#join-submit{flex-shrink:0;gap:15px;min-width:100px;justify-content:center}
.join-status{min-height:2.8em;margin:12px 0 0;font-size:12px;line-height:1.4;color:#aebfcb}
.join-status.error{color:#ffca85}
.room-code-box{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;margin:0 0 10px;background:#c5f45e0a;border:1px solid #c5f45e66;border-radius:5px}
.room-code-box>div{min-width:0;flex:1}
.room-code-box .label{color:#adc499;font-size:8px;letter-spacing:1.5px}
#room-code{display:block;width:100%;padding:3px 0 0;border:0;border-radius:0;background:transparent;color:var(--lime);font-family:'Barlow Condensed',Impact,sans-serif;font-size:31px;line-height:1;font-weight:700;letter-spacing:5px;cursor:text}
#copy-room-code{flex-shrink:0;font-size:9px;padding:9px 11px}
html[data-landscape-size] .join-entry{min-height:34px;padding:7px 10px;margin:10px 0 12px;gap:8px}
html[data-landscape-size] .join-entry>span{font-size:7px;letter-spacing:.6px}
html[data-landscape-size] .join-entry strong{font-size:9px}
html[data-landscape-size="tiny"] .join-entry,html[data-landscape-size="compact"] .join-entry{max-width:290px;margin-bottom:0}
html[data-landscape-size] .room-code-box{padding:8px 10px;margin-bottom:8px}
html[data-landscape-size] #room-code{font-size:27px}
html[data-landscape-size] #join-code{font-size:26px;padding:9px 12px}
html[data-landscape-size] #join-submit{min-height:44px;padding:10px 15px;font-size:12px}
html[data-landscape-size] .join-status{font-size:11px;margin-top:9px}

.sport-picker select{font:700 12px inherit;letter-spacing:.07em;color:#eaf0f3;background:#16242e;border:1px solid #40515c;border-radius:8px;min-height:44px;padding:0 28px 0 12px;max-width:160px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.header-actions{display:flex;align-items:center;gap:12px}
@media(max-height:420px){.sport-picker select{min-height:36px}}