/* Shared game shell. All menu edges have equal weight; color is in the surface. */
:root{--shell-ink:#192f40;--shell-muted:#5d707e;--shell-accent:#1e516e;--game-ink:#192f40;--game-muted:#5d707e;--menu-paper:#f6f8f7;--menu-edge:#ccd6da}
html,body,#game{background:#f2f5f4;color:#192f40}body{overscroll-behavior:none}
header{height:46px;z-index:20;padding:0 12px;background:#f7f9f7f5;box-shadow:0 1px 0 #d5dedc}
header::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:env(safe-area-inset-top);background:#f7f9f7}
.wordmark{font-size:12px;letter-spacing:1px;color:#203a49}.wordmark span{color:#607c83}.header-actions{gap:6px}.header-actions button,#pause{min-height:32px;padding:6px 10px;border:1px solid #ced9dc;border-radius:12px;background:#fff;color:#244451;font-size:10px;font-weight:750;letter-spacing:.25px}
#fullscreen{display:none}#sound{display:inline-flex}.menu-open #pause{visibility:visible}.menu-open:not(.started) #pause{display:none}
#field-wrap::after{background:linear-gradient(to bottom,#f7f9f7 0,#f7f9f7 calc(env(safe-area-inset-top) + 42px),transparent calc(env(safe-area-inset-top) + 155px),transparent 67%,#142635aa 100%)}
.menu-open #field-wrap::after{background:linear-gradient(#f7f9f7 0,transparent 34%,transparent 82%,#f2f5f488)}
.scoreboard{top:calc(env(safe-area-inset-top) + 53px);border-radius:16px;border:1px solid #d8e0e6;border-bottom-width:1px;background:#f8faf8f2;color:#213a49;box-shadow:0 4px 18px #132c3e22;height:46px}
.scoreboard .team strong,.scoreboard .situation b,.scoreboard .situation span,.scoreboard .drive strong,.scoreboard .team span,.scoreboard .team:has(img[hidden]) span,.scoreboard .opponent:has(img[hidden]) span{color:#213a49}.scoreboard .team.has-ball::after{background:#365f71}.match-strip{top:calc(env(safe-area-inset-top) + 103px);background:#f8faf8ed;color:#254153;border-radius:10px}.timeout-strip{top:calc(env(safe-area-inset-top) + 132px)}.field-info{top:calc(env(safe-area-inset-top) + 158px)}#banner{top:calc(env(safe-area-inset-top) + 182px)}
#overlay.active:not(.playbook-panel):not(.franchise-panel):not(.premium-panel){background:#edf2f1ec;backdrop-filter:blur(9px)}
#overlay.active{padding:calc(env(safe-area-inset-top) + 65px) 16px calc(env(safe-area-inset-bottom) + 18px);color:#192f40}
#overlay .panel{background:transparent;border:0;border-radius:0;box-shadow:none;padding:14px 8px;max-width:510px;overflow:auto;color:#192f40}
#overlay h1,#overlay h2,#overlay h3{color:#192f40;font-weight:750;letter-spacing:-1px}#overlay h2{font-size:30px;line-height:1.12;margin:9px 0 16px}#overlay p{color:#59707e;font-size:14px;line-height:1.45}#overlay .eyebrow{color:#637d83;letter-spacing:1.6px;font-size:10px}
#overlay button{color:#244351;background:#e5edef;border:1px solid #cad7dc;border-radius:16px;box-shadow:0 3px 0 #bdcccf45;letter-spacing:0;text-transform:none;cursor:pointer;touch-action:manipulation}
#overlay button:active{transform:translateY(2px);box-shadow:none}#overlay button:disabled{opacity:.4;cursor:default}#overlay button:focus-visible,header button:focus-visible{outline:3px solid #4e8cb5;outline-offset:3px}
#overlay button.primary,#overlay button.fr-primary,#overlay button.home-franchise,#overlay button[aria-pressed=true],#overlay button[aria-current=page]{background:#284e63;color:#fff;border:1px solid #284e63;box-shadow:0 3px 0 #142f4340}
#overlay .primary,#overlay .secondary{min-height:47px;font-size:14px;padding:14px;margin-top:10px}#overlay .secondary{background:#fff}
#overlay button::before,#overlay button::after{border:0}#overlay .fr-impact::before{display:none}
#overlay input,#overlay select{color:#203d4e;background:#fff;border-color:#b9cbd0;border-radius:12px;font-size:16px}#overlay label,#overlay small{color:#526d7b}
.pause-match{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:22px 16px;border-radius:22px;background:#fff;margin:20px 0;color:#2e5161;font-weight:750;font-size:23px}.pause-match small{flex-basis:100%;text-align:center;font-size:12px;letter-spacing:1px}
/* Live stadium title screen. Camera and crowd animate below the menu. */
#overlay.premium-panel{background:transparent;backdrop-filter:none;padding:calc(env(safe-area-inset-top) + 46px) 0 env(safe-area-inset-bottom)}
#overlay.premium-panel::before{background:linear-gradient(#f7f9f7f5 0%,#f7f9f78a 19%,#eef3f110 32%,#eef3f138 44%,#eef3f1e8 72%,#eef3f1 100%)}
#overlay.premium-panel .panel{height:100%;overflow:hidden;padding:0}.premium-home{padding:24px 23px 14px;gap:12px}.premium-home h1{font-size:clamp(42px,12vw,62px)!important;line-height:1;margin:0!important;letter-spacing:-2.5px!important;text-shadow:none;white-space:nowrap}.premium-home h1 span{color:#567b87}.premium-home .eyebrow{font-size:9px!important;color:#476771!important}.home-season-mark{min-height:55px;padding-top:0}.home-season-mark>span{color:#426571;font-size:9px}.home-season-mark i{display:none}
.home-actions{gap:9px}#overlay .home-franchise{position:relative;padding:16px 19px;gap:6px;background:#fdfefcf5;color:#1d3c4c;border-color:#fdfefc;backdrop-filter:blur(8px);border-radius:24px;box-shadow:0 6px 25px #19333f1a}.home-franchise small{color:#607e8b!important;font-size:9px}.home-franchise b{font-size:27px;font-weight:750;letter-spacing:-.7px}.home-franchise>span{font-size:11px;color:#637d86}.home-modes{gap:9px}.home-modes button{min-height:72px;padding:14px;background:#f9fbf9ed!important}.home-modes b{font-size:16px;font-weight:700}.home-modes span{color:#65808a;font-size:11px}.home-actions #practice-entry{min-height:58px}.premium-home .resume-save{background:#dee8eaf2!important;color:#335767;font-size:10px;padding:12px}.premium-home .resume-save span{color:#4e6f7f}.premium-home .home-dock{gap:8px}.premium-home .home-dock button{background:#f9fbf9d9;font-size:12px;padding:10px 15px}.premium-home .home-dock>span{color:#5a7680}
/* Play callers fit four diagram cards without replacing the field. */
#overlay.playbook-panel{background:linear-gradient(transparent 28%,#122d4420);backdrop-filter:none;align-items:flex-end;padding:calc(env(safe-area-inset-top) + 160px) 12px calc(env(safe-area-inset-bottom) + 12px)}
#overlay.playbook-panel .panel{background:#f5f8f5f5;border:1px solid #fff;border-radius:27px;padding:13px;box-shadow:0 9px 25px #09253e22;max-height:100%;overflow:auto}
.huddle-top{margin-bottom:9px}.huddle-top .eyebrow{display:none}.huddle-top h2,#overlay .coach-heading h2{font-size:24px;margin:0}.huddle-top .game-back{padding:9px 11px;font-size:11px}
.formation-carousel{grid-template-columns:43px 1fr 43px;margin-bottom:7px;gap:5px}.formation-carousel>button{font-size:10px;min-height:39px;border-radius:12px}.formation-carousel #formation-picker{padding:7px 10px;background:#e2e9e8;box-shadow:none}.formation-carousel #formation-picker b{font-size:15px;color:#294b5a}.formation-carousel #formation-picker span{font-size:10px;color:#607782}.formation-carousel small{display:none}
.huddle-tabs{padding:3px;background:#dae4e6;border:0;border-radius:14px}.huddle-tabs button{padding:7px 0;font-size:13px;border-radius:11px!important}.huddle-filters{margin:7px 0;gap:4px}.huddle-filters button{font-size:11px;min-height:30px;border-radius:10px!important}.run-families{gap:4px}.run-families button{font-size:10px;padding:6px 2px}
.play-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.play-grid .huddle-play{margin:0;border:1px solid #cbd8dd!important;border-radius:16px!important;background:#fff!important;box-shadow:0 3px 0 #203d4a13!important;min-width:0}
#overlay .play-grid .huddle-play>img,#overlay .play-grid .play-fallback{width:100%;height:clamp(43px,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 490px)/2),105px);max-height:none;min-height:0;object-fit:contain;background:#183549}
#overlay:has(.run-families) .play-grid .huddle-play>img{height:clamp(37px,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 551px)/2),83px)}
.play-grid .huddle-play-caption{display:block;padding:8px 10px;min-height:44px}.play-grid .huddle-play-caption small{font-size:9px;letter-spacing:.3px;line-height:1.2;color:#647f8c}.play-grid .huddle-play-caption strong{font-size:15px;line-height:1.12;margin-top:4px;letter-spacing:-.2px;min-height:17px;color:#254859}
.huddle-pager{margin-top:9px;gap:6px}.huddle-pager button{width:72px;font-size:11px;height:33px}.huddle-pager span{font-size:11px;color:#5d7988}.huddle-specials{margin-top:8px;padding-top:8px;border-color:#cad9dc}.huddle-specials button{font-size:12px;min-height:35px}.huddle-specials small{color:#52717f;font-size:10px}
.coach-heading{margin:4px 0 12px;gap:5px}.coach-heading>button{font-size:10px;padding:9px}.coach-plays{grid-template-columns:1fr 1fr;gap:8px}.coach-play img,.coach-play .play-fallback{height:clamp(50px,11dvh,92px)}.coach-play>div{gap:5px;padding:10px}.coach-play b{color:#294b5c;font-size:16px}.coach-play small{font-size:9px;color:#64808b}.coach-play span{font-size:11px;line-height:1.3;color:#536c7a}.coach-special button{color:#2e5261}.recommended-special span{color:#586f7c}
.formation-grid{gap:8px}.formation-grid b{color:#254959}.formation-grid button[aria-pressed=true] b{color:#fff}.all-formations span{color:inherit}.kick-choice-grid button{background:#fff;color:#294c5d;border-color:#c5d6dc}.kick-choice-grid button:first-child{background:#315b6f;color:white;border-color:#315b6f}.kick-choice-grid small{color:inherit!important}.defense-grid b,.defense-grid span{color:#294959}.control-setting>b,.control-lessons b{color:#315769}.control-setting p,.control-lessons p{color:#5c7480!important}.control-setting{border-color:#cbd9dd}.controls-pages{background:#dde7e8}.control-setting button{color:#395c6c}.difficulty-description{font-size:13px!important;min-height:0}.club-select-summary{background:#fff;border-color:#c7d8de}
/* Franchise pages share the same paper, ink and real currency presentation. */
#overlay.franchise-panel,#overlay.league-panel,#overlay.club-panel{background:#eff4f2f2!important;backdrop-filter:blur(9px);padding-top:calc(env(safe-area-inset-top) + 53px)}
#overlay.franchise-panel::before{display:none}.fr-shell,.league-shell,.club-shell{color:#244555;background:none;--fr-ink:#244555;--fr-muted:#617986;--fr-gold:#3f6b80}
#overlay .fr-card,#overlay .league-card,#overlay .club-card,#overlay .fr-row{background:#fff;border:1px solid #d1dfe0;color:#294b5b;box-shadow:none}#overlay .fr-card.feature{background:#fff}#overlay .fr-pill,#overlay .fr-position-tabs,#overlay .fr-nav,#overlay .league-nav{background:#dfe9e8;color:#486d7d;border-color:#c9d9da}#overlay .fr-head h1,#overlay .fr-heading h1{color:#27495b;font-size:38px;letter-spacing:-1.6px}#overlay .fr-cost,#overlay .fr-project-title,#overlay .fr-headline,#overlay .fr-club-name,#overlay .fr-overall,#overlay .fr-rating b,#overlay .fr-impact,#overlay .fr-club-title,#overlay .fr-score{color:#294e5e}#overlay .fr-note,#overlay .fr-impact,#overlay .fr-overline,#overlay .fr-label,#overlay .fr-empty,#overlay .fr-list-title,#overlay .fr-row small,#overlay .league-kicker,#overlay .league-status,#overlay .fr-pager,#overlay .fr-contract span{color:#5f7885}#overlay .fr-nav button,#overlay .league-nav button{color:#466575;background:transparent}#overlay .fr-nav button[aria-current=page],#overlay .league-nav button[aria-pressed=true]{color:white;background:#365f71}#overlay .fr-project-levels i{background:#dbe6e8}#overlay .fr-project-levels i.done{background:#456e81}#overlay .fr-impact:before{display:none}#overlay .fr-stage{background:none}.fr-champion p{color:#547280!important}.fr-club-crest{background:#456b7d;color:white}
/* Dedicated control lanes: shoulder actions, pad diamond, then center meters. */
.controller{height:176px;bottom:calc(env(safe-area-inset-bottom) + 13px);left:13px;right:13px}
.controller .middle{position:absolute;left:50%;bottom:39px;transform:translateX(-50%);width:67px;margin:0;display:flex;align-items:center}.middle #controller-start,.middle #controller-options{display:none}.middle #mode{font-size:8px;line-height:1.3;max-width:67px;letter-spacing:.4px;opacity:.8}
.status{bottom:calc(env(safe-area-inset-bottom) + 17px);left:50%;right:auto;transform:translateX(-50%);width:64px;padding:0;background:none;border:0}.status .meters{grid-template-columns:24px 32px;gap:5px}.meter-label{font-size:8px;color:#e0ebf2}#stamina,#balance{height:5px;width:32px}#hint{display:none}
#defense-tools{bottom:194px;left:0;right:0;height:43px;gap:6px;align-items:center}#defense-tools button{min-height:43px;min-width:68px;font-size:11px;font-weight:800;border:1px solid #d9e5eaa3;border-radius:14px;background:linear-gradient(#496578,#213c50);box-shadow:0 4px 0 #102738,0 5px 12px #0003;color:#f7fbff;padding:10px 12px}#defense-tools>div{gap:6px}#defense-current{font-size:9px;max-width:64px;text-align:center}#defense-swat{min-width:94px!important;margin-left:auto}#defense-tools:has(>div[hidden]){left:auto;min-width:94px}
#style-button{left:0;bottom:247px;min-height:43px;max-width:126px;border-radius:14px;padding:7px 10px 10px;background:#203d53ed;border-color:#c9dce477}#style-button b{font-size:12px}#style-button span{font-size:9px}#audible-button{bottom:196px;left:0;min-height:41px;padding:10px 12px;min-width:80px;background:#29485fea}#rb-motion{bottom:196px;left:90px;min-height:41px;background:#29485fea}#audible-choices{bottom:243px;left:0}#defense-hint{bottom:calc(env(safe-area-inset-bottom) + 315px);font-size:11px;padding:7px 10px}#practice-tools{top:calc(env(safe-area-inset-top) + 54px)}
#kick-controls{bottom:calc(env(safe-area-inset-bottom) + 214px);width:222px;background:#f7faf7f5;color:#264c5d;border:1px solid #fff;border-radius:21px;padding:13px;box-shadow:0 5px 20px #081f3c25}#kick-controls[hidden]{display:none}#kick-title,#kick-controls b,#kick-controls small{color:#315667}#kick-instruction{color:#456f80;font-size:11px}#kick-center{color:#355c6f;background:#dee9ed;border-color:#bcd1d7}#kick-aim{display:none}.kick-step-label{margin-top:9px}.kick-step-label span{color:#64808d}#kick-power{background:#d5e2e5}#kick-power i{background:#477e97}
.kick-contact-cue{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;margin-top:11px;border-radius:14px;background:#e3ecee;color:#527a8a;font-size:12px;font-weight:750}.kick-contact-cue::before{content:'';width:22px;height:22px;border:3px solid currentColor;border-radius:50%;transform:scale(var(--contact-scale,1));opacity:.85}#kick-controls[data-stage=contact] .kick-contact-cue{background:#dbeef0;color:#32677b}#kick-controls[data-grade=CLEAN] .kick-contact-cue{background:#c7e6d7;color:#286247}#kick-controls[data-grade=EARLY] .kick-contact-cue,#kick-controls[data-grade=LATE] .kick-contact-cue{background:#f5e6c8;color:#855d26}#kick-controls[data-grade=MISSED] .kick-contact-cue{background:#eed1c9;color:#814c40}.cross.kick-cue{box-shadow:0 0 0 3px #f3fcff,0 0 24px #99dfed;background:#438d99}
@media(max-width:370px){header{padding:0 10px}.wordmark{font-size:11px}.header-actions button,#pause{padding:6px 8px;font-size:9px}.controller{left:8px;right:8px}.controller .middle{left:47%}.status{left:47%}.face{transform:scale(.92);transform-origin:right bottom}.stick-area{width:130px}#joystick{width:126px;height:126px}#stick{left:27px;top:27px}.play-grid .huddle-play-caption{padding:7px 8px}.play-grid .huddle-play-caption strong{font-size:13px}.coach-heading>button{padding:9px 6px}.home-modes span{font-size:10px}}
@media(max-height:700px){#overlay.playbook-panel{padding-top:calc(env(safe-area-inset-top) + 123px)}#overlay.playbook-panel .panel{padding:11px}.premium-home{padding:16px 21px 10px;gap:8px}.home-season-mark{min-height:22px}.home-franchise{padding:13px 17px!important}.home-modes button{min-height:62px;padding:11px 14px;gap:5px}.home-actions #practice-entry{min-height:50px}.premium-home .home-dock button{padding:8px 12px}.premium-home h1{font-size:42px!important}.home-franchise b{font-size:24px}.coach-play>div{padding:8px}.coach-play span{font-size:10px}.coach-play b{font-size:14px}.coach-special button{padding:8px}.controller{height:176px}.field-info{top:calc(env(safe-area-inset-top) + 152px)}#defense-hint{bottom:calc(env(safe-area-inset-bottom) + 307px)}}
@media(orientation:landscape) and (max-height:550px){#overlay.playbook-panel{padding:90px 150px 10px}.play-grid{grid-template-columns:repeat(4,1fr)}.huddle-panel .formation-carousel,.huddle-panel .huddle-pager{position:static;width:auto}.huddle-panel .huddle-tabs,.huddle-panel .huddle-filters{width:auto;margin-top:6px}.huddle-panel .huddle-play{position:static;width:auto}.huddle-panel .huddle-specials{position:static;margin:7px 0 0;display:grid;grid-template-columns:repeat(3,1fr)}#overlay .play-grid .huddle-play>img{height:40px}.controller .middle,.status{display:none}#defense-tools{bottom:188px}#style-button{left:0;bottom:242px}#kick-controls{right:170px;bottom:15px}.coach-plays{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){.kick-contact-cue::before{transform:none}.premium-home{animation:none}}
#overlay.premium-panel .home-modes b{color:#294c5d}#overlay.premium-panel .home-modes span{color:#617e8a}#overlay.premium-panel button.home-franchise small,#overlay.premium-panel button.home-franchise>span{color:#d0e2ea!important}#overlay.premium-panel .home-franchise b{color:white}
#game.menu-open .controller,#game.menu-open .status,#game.menu-open .field-info{visibility:hidden}#game.menu-open:not(.calling-play) .scoreboard{visibility:hidden}#game.menu-open header{background:#f7f9f7f5}
.scoreboard .game-clock b,.scoreboard .game-clock span{color:#294858}.scoreboard .game-clock{border-color:#ccd8db}.match-strip>span{color:#547180}
#overlay .fr-row strong,#overlay .fr-row b,#overlay .fr-versus strong,#overlay .fr-next-opponent,#overlay .fr-player-name,#overlay .fr-draft-summary b{color:#274c5d}#overlay .fr-back{color:#456b7a!important}#overlay.franchise-panel{--fr-ink:#244555;--fr-mute:#617986;--fr-gold:#3f6b80}#overlay .fr-save,#overlay .fr-card-head>span,#overlay .fr-contract strong,#overlay .league-code,#overlay .club-venue-detail span{color:#527385}
#overlay .options-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0 8px}#overlay .options-grid .secondary{margin:0;min-height:61px;padding:12px 8px;font-size:12px}#overlay .options-grid .secondary:last-child{grid-column:1/-1;min-height:44px}
#overlay .panel{overflow:hidden}.huddle-panel .huddle-play-caption strong{overflow-wrap:anywhere}.menu-open:not(.calling-play) #banner{display:none}
/* Responsive arena sizing is defined in arena-presentation.css. */
/* Keep the contact foot visible below the kick panel. */
#kick-controls{top:calc(env(safe-area-inset-top) + 181px);bottom:auto;left:14px;right:14px;width:auto;transform:none;display:grid;grid-template-columns:1fr 108px;gap:7px 13px;padding:12px 14px;text-align:left}
#kick-title{grid-column:1/-1;font-size:12px}#kick-controls .kick-step-label{margin:0;grid-column:1;font-size:10px;align-items:center}#kick-controls .kick-step-label:nth-of-type(1){grid-row:2}#kick-center{grid-column:2;grid-row:2;justify-self:end;min-height:26px;font-size:10px;padding:4px 8px}#kick-controls .kick-step-label:nth-of-type(3){grid-row:3}#kick-power{grid-column:1;grid-row:4;margin:0;height:8px;align-self:center}#kick-controls .kick-contact-cue{grid-column:2;grid-row:3/5;min-height:42px;margin:0;font-size:10px;gap:7px}#kick-controls .kick-contact-cue::before{width:17px;height:17px;border-width:2px;flex-shrink:0}#kick-instruction{grid-column:1/-1;margin-top:2px;font-size:10px}
#overlay.huddle-panel{padding-top:calc(env(safe-area-inset-top) + 135px)}#overlay.huddle-panel .huddle-top{min-height:32px;margin-bottom:8px}#overlay.huddle-panel .huddle-top h2{margin:0;font-size:24px;line-height:1.1}
#overlay.huddle-panel .play-grid .huddle-play>img,#overlay.huddle-panel .play-grid .play-fallback{height:75px;max-height:75px}#overlay.huddle-panel .play-grid .huddle-play-caption{padding:8px 9px;min-height:44px}
@media(max-height:780px){#overlay.huddle-panel{padding-top:calc(env(safe-area-inset-top) + 119px)}#overlay.huddle-panel .panel{padding:11px}#overlay.huddle-panel .formation-carousel>button{min-height:36px}#overlay.huddle-panel .huddle-filters{margin:6px 0}#overlay.huddle-panel .huddle-filters button{min-height:28px}#overlay.huddle-panel .run-families button{padding:5px 2px}#overlay.huddle-panel .huddle-specials{margin-top:7px;padding-top:7px}#overlay.huddle-panel .play-grid .huddle-play>img{height:clamp(40px,calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 560px),100px);max-height:100px}}
#kick-controls #kick-aim-label{color:#466d7e}
#overlay.franchise-panel .fr-primary,#overlay.league-panel .fr-primary,#overlay.club-panel .fr-primary{color:#fff!important;background:#284e63!important}#overlay.franchise-panel .fr-secondary,#overlay.league-panel .fr-secondary,#overlay.club-panel .fr-secondary{color:#315568}
#overlay .fr-stat,#overlay .fr-stat b,#overlay .fr-rating strong{color:#335a6c}#overlay .fr-stat i{background:linear-gradient(90deg,#507d91 var(--n),#dbe5e8 0)}#overlay .fr-pager button{width:auto;min-width:79px;height:37px;border-radius:14px;font-size:12px;padding:8px 12px}#overlay .fr-pager i.active{background:#466c7e}#overlay .fr-role-picker{background:#dfe8e9;color:#4f6f7c;border-color:#c6d6da}#overlay .fr-role-picker label{color:#4f6f7c}#overlay .fr-dock{background:#dce7e7}#overlay .fr-note b{color:#31596b}
/* Kicker-eye timing: one small readout, with the field and foot as the focus. */
#kick-controls{top:auto;bottom:calc(env(safe-area-inset-bottom) + 206px);left:50%;right:auto;transform:translateX(-50%);width:236px;max-width:70%;padding:9px 12px;grid-template-columns:1fr auto;gap:5px 10px;border-radius:14px;background:#f7f9f4e8;box-shadow:0 3px 14px #06131d26;pointer-events:none;}
#kick-controls #kick-title{grid-area:auto;font-size:12px;line-height:16px;letter-spacing:.04em;}
#kick-controls #kick-power-value{font-size:12px;text-align:right;color:#284e63;font-weight:800;}
#kick-controls #kick-power{grid-column:1/-1;grid-row:auto;height:5px;margin:0;background:#25496324;border:0;border-radius:4px;}
#kick-controls #kick-power i{background:#346b89;border-radius:4px;}
#kick-controls #kick-instruction{grid-column:1/-1;grid-row:auto;font-size:13px;line-height:18px;text-align:center;color:#233f52;padding:0;margin:0;}
#kick-controls #kick-contact-text{display:none;}
#kick-controls[data-stage="contact"] #kick-power i{background:#ca9640;}
#kick-controls[data-grade="CLEAN"] #kick-instruction{color:#25674e;}
/* A six-call console board; filters share a row so diagrams get the space. */
#overlay.expanded-book .panel{display:flex;flex-direction:column;gap:8px;padding:14px 13px 12px;border-radius:24px 24px 0 0;}
.book-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;}
.book-heading h2{font-size:24px;line-height:30px;margin:0;letter-spacing:-.04em;}
.book-heading button,.book-formation button{border:0;background:#e3eaf0;color:#243f52;border-radius:11px;padding:8px 12px;font-size:14px;font-weight:800;min-height:36px;}
.book-formation{display:flex;align-items:center;gap:10px;min-height:40px;}
.book-formation button{flex:1;text-align:left;background:#294f68;color:white;}
.book-formation span,.book-total{font-size:12px;font-weight:700;color:#526777;white-space:nowrap;}
.book-filters{display:flex;gap:8px;align-items:center;min-height:36px;}
.book-types{display:flex;gap:3px;flex:1;background:#dde6ed;border-radius:11px;padding:3px;}
.book-types button,.book-sides button{flex:1;padding:6px 8px;border:0;border-radius:8px;color:#476174;background:transparent;font-size:14px;font-weight:800;}
.book-types button[aria-pressed="true"],.book-sides button[aria-pressed="true"]{background:#fff;color:#244c67;box-shadow:0 2px 4px #203d5212;}
.book-filters select,.hot-tuning select{max-width:48%;height:36px;border:1px solid #cbd6de;border-radius:10px;background:#fff;color:#274d67;padding:5px 7px;font:700 14px inherit;}
.book-sides{display:flex;gap:4px;background:#e5ebef;border-radius:10px;}
.book-sides button{font-size:12px;min-height:30px;padding:5px;}
#overlay.expanded-book .play-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;}
#overlay.expanded-book .huddle-play{margin:0;min-height:0;padding:0;overflow:hidden;border:1px solid #cad6df;background:#fff;border-radius:13px;box-shadow:0 2px 3px #1c344514;}
#overlay.expanded-book .huddle-play img,#overlay.expanded-book .huddle-play canvas{width:100%;height:68px;object-fit:cover;display:block;border-radius:0;}
#overlay.expanded-book .huddle-play-caption{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:6px 8px;min-height:49px;height:auto;}
#overlay.expanded-book .huddle-play-caption strong{font-size:14px;line-height:16px;letter-spacing:-.01em;white-space:normal;text-transform:none;}
#overlay.expanded-book .huddle-play-caption small{font-size:12px;line-height:14px;letter-spacing:0;color:#5d7280;text-transform:none;}
#overlay.expanded-book .huddle-pager{height:34px;min-height:34px;margin:0;padding:0;}
#overlay.expanded-book .huddle-pager button{min-height:34px;padding:5px 10px;font-size:14px;}
#overlay.expanded-book .huddle-specials{margin:0;padding:0;gap:7px;}
#overlay.expanded-book .huddle-specials button{min-height:38px;padding:5px 6px;font-size:14px;}
#overlay.expanded-book .huddle-specials small{font-size:12px;}
#overlay.expanded-book.compact-book .panel{gap:6px;padding:9px 12px;}
#overlay.expanded-book.compact-book .huddle-play img,#overlay.expanded-book.compact-book .huddle-play canvas{height:40px;}
#overlay.expanded-book.compact-book .huddle-play-caption{min-height:47px;padding:5px 7px;gap:2px;}
#overlay.expanded-book.compact-book .play-grid{gap:6px;}
.book-empty{grid-column:1/-1;min-height:170px;display:grid;place-content:center;gap:12px;color:#3a5568;}
.book-empty button{border:0;border-radius:10px;padding:12px;background:#294f68;color:#fff;font-size:14px;}
#overlay.expanded-formations .formation-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
#overlay.expanded-formations .formation-grid button{padding:0;overflow:hidden;border-radius:12px;}
#overlay.expanded-formations .formation-grid img{height:51px;object-fit:cover;}
#overlay.expanded-formations .formation-grid b{font-size:14px;line-height:17px;min-height:34px;padding:7px 3px;}
#hot-routes-button{position:absolute;left:183px;bottom:196px;height:38px;border:1px solid #a9bdcd99;border-radius:12px;background:#213b50ee;color:#fff;font-size:12px;font-weight:800;padding:0 10px;pointer-events:auto;}
#rb-pass,#te-pass{pointer-events:auto;position:absolute;left:0;bottom:196px;width:94px;height:43px;border-radius:14px;background:linear-gradient(#486b84,#203c53);border:1px solid #bdd4e680;box-shadow:0 3px 0 #0c1e2bc9;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;color:#fff;}
#rb-pass span,#te-pass span{font-size:17px;line-height:20px;}#rb-pass small,#te-pass small{font-size:12px;line-height:16px;}
#rb-pass[hidden],#te-pass[hidden],#hot-routes-button[hidden]{display:none;}
#overlay.hot-route-panel{padding-top:calc(env(safe-area-inset-top) + 265px);align-items:flex-end;background:transparent;}
#overlay.hot-route-panel .panel{padding:15px 14px 19px;border-radius:24px 24px 0 0;background:#f4f7f8f5;box-shadow:0 -8px 30px #102c3f26;display:flex;flex-direction:column;gap:12px;}
.hot-targets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.hot-targets button,.hot-route-grid button{border:1px solid #cbd7df;background:#fff;border-radius:11px;color:#294b63;font-size:14px;font-weight:800;min-height:42px;padding:6px;}
.hot-targets button[aria-pressed="true"],.hot-route-grid button[aria-pressed="true"]{background:#2e5874;border-color:#2e5874;color:#fff;}
.hot-tuning{display:flex;gap:8px;}.hot-tuning select{flex:1;max-width:none;font-size:14px;}
.hot-route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
#overlay.huddle-panel.expanded-book .panel{min-height:0;max-height:100%;}
#overlay.huddle-panel.expanded-book .play-grid{flex:1 1 auto;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play{display:flex;flex-direction:column;min-height:0;}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play>img,#overlay.huddle-panel.expanded-book .play-grid .play-fallback{height:68px;max-height:68px;min-height:0;flex:1 1 68px;object-fit:cover;}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play-caption{flex:0 0 auto;padding:6px 8px;min-height:45px;}
#overlay.huddle-panel.expanded-book.compact-book .play-grid .huddle-play>img,#overlay.huddle-panel.expanded-book.compact-book .play-grid .play-fallback{height:32px;max-height:32px;flex-basis:32px;}
#overlay.huddle-panel.expanded-book.compact-book .play-grid .huddle-play-caption{padding:4px 6px;min-height:42px;}
#overlay.huddle-panel.expanded-book.compact-book .book-heading,#overlay.huddle-panel.expanded-book.compact-book .book-formation{min-height:32px;}
#overlay.huddle-panel.expanded-book.compact-book .book-formation button{min-height:32px;padding:6px 10px;}
#overlay.hot-route-panel .panel{max-height:100%;}
@media(max-height:720px){#overlay.hot-route-panel{padding-top:170px}.hot-route-grid{gap:5px}.hot-route-grid button{min-height:35px}#overlay.hot-route-panel .panel{gap:8px;padding:10px 12px}.hot-targets button{min-height:36px}}


#kick-controls{top:calc(env(safe-area-inset-top) + 155px);bottom:auto;}

#overlay.huddle-panel.expanded-book .play-grid .huddle-play>img,#overlay.huddle-panel.expanded-book .play-grid .play-fallback{object-fit:contain;background:#142632;}

/* A brief sideline aside, clear of the joystick and face buttons. */
#coach-dialogue{position:absolute;z-index:7;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 174px);display:grid;grid-template-columns:76px 1fr 28px;align-items:center;gap:9px;min-height:90px;padding:8px 8px 8px 0;background:#f7faf7f5;border:1px solid #fff;border-radius:18px;box-shadow:0 6px 22px #10283d25;color:#183145;pointer-events:none;animation:coach-arrive .2s ease-out}
#coach-dialogue[hidden]{display:none}#coach-dialogue .coach-portrait{width:76px;height:82px;background-image:url('../../coach/portraits/balanced.svg');background-size:cover;background-position:center;align-self:end;animation:coach-breathe 3s ease-in-out infinite}
#coach-dialogue[data-mood="1"] .coach-portrait{background-position:center}#coach-dialogue[data-mood="2"] .coach-portrait{background-position:center}#coach-dialogue[data-mood="3"] .coach-portrait{background-position:center}
#coach-dialogue b{font-size:11px;letter-spacing:.12em}#coach-dialogue p{font-size:14px;line-height:1.35;margin:5px 0 0;font-weight:600}#coach-dialogue button{align-self:start;background:transparent;border:0;color:#466071;padding:0;width:28px;height:32px;font-size:22px;pointer-events:auto;border-radius:8px}
@keyframes coach-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes coach-breathe{50%{transform:translateY(-1px)}}
@media(max-height:700px){#coach-dialogue{top:calc(env(safe-area-inset-top) + 157px);min-height:78px;grid-template-columns:64px 1fr 28px}#coach-dialogue .coach-portrait{width:64px;height:70px}}
@media(prefers-reduced-motion:reduce){#coach-dialogue,#coach-dialogue .coach-portrait{animation:none}}

/* Compact, nonblocking on-field feedback. */
#game #coach-dialogue{grid-template-columns:76px 1fr;padding-right:14px}
#game #kick-controls{top:auto;bottom:calc(env(safe-area-inset-bottom) + 187px);width:180px;max-width:48%;padding:6px 9px;gap:4px;background:#142e3aca;border:1px solid #ffffff38;box-shadow:none;color:#fff;border-radius:11px}
#game #kick-title{display:none}#game #kick-power-value{color:#fff;font-size:12px;grid-column:2;grid-row:1}#game #kick-power{grid-column:1;grid-row:1;align-self:center;background:#ffffff30}#game #kick-power i{background:#e5f4fb}#game #kick-instruction{font-size:12px;line-height:16px;color:#fff}
#game #kick-controls[data-stage="kick_ready"]{display:none}
.header-actions{gap:5px}#game header .header-actions button{padding:8px 9px;font-size:11px;white-space:nowrap}
@media(max-width:380px){#game header .wordmark{font-size:13px}#game header .header-actions button{padding:7px 6px;font-size:10px}}
@media(max-height:700px){#game #coach-dialogue{grid-template-columns:64px 1fr}#game #kick-controls{bottom:165px}}

#game header #sound[aria-pressed=true]{color:#244451}#game header #sound[aria-pressed=false]{color:#667781}

/* Illustrated handheld menu, with live stadium visible behind the shell. */
.mode-art{display:block;width:76px;aspect-ratio:1;background-image:url('../../art/modes-v38.png');background-size:200% 200%;background-repeat:no-repeat;border-radius:12px;flex-shrink:0}
.mode-match{background-position:0 0}.mode-practice{background-position:100% 0}.mode-club{background-position:0 100%}.mode-online{background-position:100% 100%}
#overlay.premium-panel .premium-home{gap:12px;padding:18px 20px 12px}
#overlay.premium-panel .home-season-mark{min-height:30px}
#overlay.premium-panel .home-actions{display:flex;flex-direction:column;gap:10px}
#overlay.premium-panel .home-franchise{min-height:122px;padding:20px;overflow:hidden;background:#203d55;border:1px solid #fff9;border-radius:22px;text-align:left;isolation:isolate}
#overlay.premium-panel .home-franchise .mode-art{position:absolute;right:0;top:0;width:130px;height:130px;border-radius:0;z-index:-1;mask-image:linear-gradient(90deg,transparent,#000 24%)}
#overlay.premium-panel .home-franchise b{font-size:25px;max-width:65%}
#overlay.premium-panel .home-modes{display:grid;grid-template-columns:1fr;gap:9px}
#overlay.premium-panel .home-modes button{display:grid;grid-template-columns:65px 1fr;grid-template-rows:1fr 1fr;column-gap:14px;min-height:72px;padding:7px;text-align:left;border:1px solid #fff;background:#fdfefbf2;border-radius:18px;box-shadow:0 4px 0 #bacbd24a}
#overlay.premium-panel .home-modes .mode-art{grid-row:1/3;width:58px;border-radius:11px}
#overlay.premium-panel .home-modes b{align-self:end;font-size:19px;color:#203d55}
#overlay.premium-panel .home-modes span{align-self:start;font-size:11px;color:#597381;margin-top:3px}
#overlay button{transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}
#overlay button:active:not(:disabled){transform:scale(.97);box-shadow:none}
#overlay button:focus-visible{outline:3px solid #4b8aa7;outline-offset:2px}
#overlay .panel{animation:menu-enter .18s ease-out}
@keyframes menu-enter{from{opacity:.5;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
#overlay.huddle-panel.expanded-book .panel{gap:6px;padding:10px 12px;overflow:hidden}
#overlay.huddle-panel.expanded-book .play-grid{flex:0 1 auto;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play>img,#overlay.huddle-panel.expanded-book .play-grid .play-fallback{height:36px;max-height:36px;flex-basis:36px}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play-caption{min-height:35px;padding:4px 7px}
#overlay.huddle-panel.expanded-book .huddle-play-caption strong{font-size:12px;line-height:14px}
#overlay.huddle-panel.expanded-book .huddle-play-caption small{font-size:9px;line-height:11px}
#overlay.huddle-panel.expanded-book .huddle-play[aria-pressed=true]{background:#e1edf4;border:2px solid #46768d;box-shadow:0 2px 5px #183b4f20}
.book-preview{display:grid;grid-template-columns:48% 1fr;gap:9px;align-items:center;background:#edf3f6;border-radius:14px;padding:7px;flex-shrink:0;min-height:92px}
.book-preview>img,.book-preview>.play-fallback{width:100%;height:85px;object-fit:contain;border-radius:8px;background:#142632}
.book-preview>div{display:flex;flex-direction:column;gap:5px;min-width:0}.book-preview small{font-size:9px;color:#5e7380}.book-preview b{font-size:13px;line-height:15px}
#overlay .book-preview button{min-height:32px;padding:6px 10px;border-radius:10px;background:#284c63;color:#fff;font-size:12px;margin:0}
.clubhouse-scene{height:96px;min-height:64px;position:relative;overflow:hidden;border-radius:17px}
.clubhouse-scene .mode-art{position:absolute;width:100%;height:auto;aspect-ratio:1;top:50%;transform:translateY(-50%);border-radius:0}
@media(max-height:740px){#overlay.premium-panel .premium-home{gap:7px;padding-top:8px}#overlay.premium-panel .premium-home h1{font-size:38px!important}#overlay.premium-panel .home-franchise{min-height:90px;padding:12px 16px}#overlay.premium-panel .home-modes button{min-height:61px}#overlay.premium-panel .home-modes .mode-art{width:48px}#overlay.premium-panel .home-modes{gap:6px}.book-preview{min-height:68px;padding:5px}.book-preview>img,.book-preview>.play-fallback{height:65px}#overlay.huddle-panel.expanded-book .play-grid .huddle-play>img{height:25px;max-height:25px;flex-basis:25px}.clubhouse-scene{height:65px}}
@media(prefers-reduced-motion:reduce){#overlay .panel{animation:none}#overlay button{transition:none}}

/* Quiet white console surfaces and rounded, readable system typography. */
#game,#game button,#game select,#game input{font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0}
#game h1,#game h2,#game h3,#game button b,#game button strong{font-weight:650;letter-spacing:-.02em}
#game header,#overlay .panel{color:#30343b}
#overlay.active:not(.premium-panel):not(.playbook-panel){background:#f5f6f8ed}
#overlay button:not(.primary):not(.home-franchise):not(.huddle-play){border-color:#d6d9df}
#overlay button:focus-visible{outline:3px solid #27bed0;outline-offset:2px}
#overlay.huddle-panel.expanded-book .play-grid{flex:1 1 auto;grid-auto-rows:minmax(96px,1fr);gap:8px}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play{position:relative;display:block;min-height:96px;background:#142632;padding:0}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play>img,#overlay.huddle-panel.expanded-book .play-grid .play-fallback{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:fill;flex-basis:auto}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play-caption{position:absolute;bottom:0;left:0;right:0;min-height:36px;padding:5px 8px;background:#f9fafbef;color:#30343b}
#overlay.huddle-panel.expanded-book .huddle-play-caption strong{font-size:14px;line-height:16px;font-weight:600}
#overlay.huddle-panel.expanded-book .huddle-play-caption small{font-size:11px;line-height:13px}
@media(max-height:740px){#overlay.huddle-panel.expanded-book .play-grid{grid-auto-rows:minmax(82px,1fr)}}

#defense-hint{padding-bottom:12px;overflow:hidden}
#defense-hint:after{content:"";position:absolute;bottom:4px;left:8px;width:calc((100% - 16px)*var(--timing,0));height:3px;border-radius:3px;background:#25c4d4;transition:width .05s linear}
#defense-hint[data-timing=now]{box-shadow:0 0 0 2px #3bc9d699}
@media(prefers-reduced-motion:reduce){#defense-hint:after{transition:none}}

/* Keep the complete formation visible above its caption. */
#overlay.huddle-panel.expanded-book .play-grid{grid-auto-rows:minmax(124px,1fr)}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play>img,#overlay.huddle-panel.expanded-book .play-grid .play-fallback{height:calc(100% - 40px);bottom:40px}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play-caption{height:40px;box-sizing:border-box;background:#f9fafb}
@media(max-height:740px){#overlay.huddle-panel.expanded-book .play-grid{grid-auto-rows:minmax(92px,1fr)}}
#overlay.huddle-panel.expanded-book .play-grid{grid-template-rows:repeat(3,minmax(124px,1fr))}
#overlay.huddle-panel.expanded-book .play-grid .huddle-play{min-height:124px}
@media(max-height:740px){#overlay.huddle-panel.expanded-book .play-grid{grid-template-rows:repeat(3,minmax(92px,1fr))}#overlay.huddle-panel.expanded-book .play-grid .huddle-play{min-height:92px}}

/* Independent touch targets allow movement, L2 and actions simultaneously. */
.controller button,#joystick{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.controller button>*{pointer-events:none}
.face .pad .button-symbol{display:flex;align-items:center;justify-content:center;width:76%;height:76%;line-height:1}
.face .pad .button-symbol svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.controller button.pressed{filter:brightness(1.22)}

#practice-quick{display:flex;gap:6px;justify-content:center;margin-top:7px;pointer-events:auto}
#practice-quick select{min-width:0;max-width:210px;flex:1;color:#f4f8ff;background:#29485f;border:1px solid #9cb5c4;border-radius:12px;padding:8px;font-size:14px;touch-action:manipulation}
#practice-quick button{flex:0 0 auto;font-size:13px;min-height:38px}
#practice-state{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;padding-inline:6px}
.position-picker{display:grid;gap:9px;font-size:16px}.position-picker select{width:100%;padding:13px}

/* Keep timeout counts inside the existing score strip, clear of live action. */
#game .match-strip .timeout-strip{position:static;display:flex;align-items:center;gap:4px;transform:none;padding:0;margin:0;background:none;flex-shrink:0}
#game .match-strip .timeout-strip button{min-height:22px;padding:2px 5px;font-size:9px;line-height:16px;border-radius:5px;background:#e3ebea;color:#254153}
#game .match-strip #cpu-timeouts{font-size:8px;color:#4c626c;white-space:nowrap}
#game .match-strip{gap:6px}#game .match-strip #spot{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
#game header .header-actions{gap:4px}#game header .header-actions button{padding-inline:7px;font-size:10px}
#game #camera-button[hidden]{display:none}
/* Contextual technique cues sit over the control dock, not over the players. */
#game #defense-hint{bottom:calc(env(safe-area-inset-bottom) + 95px);max-width:104px;padding:4px 5px 8px;font-size:9px;line-height:1.3;background:#142f40b0;border:0;box-shadow:none}
@media(orientation:landscape) and (max-height:550px){#game #defense-hint{bottom:calc(env(safe-area-inset-bottom) + 80px)}}

.financial-help{margin:8px 0;padding:8px 12px;border:1px solid #ced9dc;border-radius:10px;font-size:12px;line-height:1.5}.financial-help summary{cursor:pointer;min-height:28px;display:list-item}.financial-help p{font-size:12px!important;margin:7px 0!important}
/* Load after the existing UI styles. */
#overlay .quick-call-shell .coach-plays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#overlay .quick-call-shell .coach-heading{flex-wrap:wrap}
#overlay .quick-call-shell .coach-heading h2{flex:1}
#overlay .quick-call-shell .coach-play{min-width:0}
#overlay .quick-call-shell .coach-play span{display:block;font-size:12px;line-height:1.35}
#overlay .quick-call-shell .concept-note{padding-top:6px;border-top:1px solid #8da2b644}
#overlay .book-concept-note{display:block;font-size:11px;line-height:1.35;font-weight:400;margin-top:5px}
@media(max-width:600px) and (orientation:portrait){
 #overlay .quick-call-shell .coach-plays{grid-template-columns:1fr}
 #overlay .quick-call-shell .coach-play{display:grid;grid-template-columns:30% minmax(0,1fr);text-align:left}
 #overlay .quick-call-shell .coach-play img,#overlay .quick-call-shell .coach-play .play-fallback{width:100%;height:100%;max-height:130px;object-fit:contain}
 #overlay .quick-call-shell .coach-play>div{padding:8px;gap:4px}
 #overlay .quick-call-shell .coach-play span{font-size:11px}
 #overlay .quick-call-shell .coach-play b{font-size:15px}
}
/* Load after console-ui.css. Keep gameplay canvas and native controls intact. */
.pd-display-settings{display:grid;gap:16px;margin:18px 0}.pd-display-settings label{display:flex;align-items:center;justify-content:space-between;gap:16px}.pd-display-settings label span{display:grid;gap:5px;min-width:0}.pd-display-settings small{line-height:1.4}.pd-display-settings input[type=checkbox]{width:26px;height:26px;flex:none;accent-color:#284e63}.pd-display-settings select{max-width:48%;min-height:44px;padding:8px}.pd-preview-status{min-height:2.8em;font-size:13px!important}#overlay .audio-channel input[type=range]{min-height:44px;touch-action:auto}#overlay :is(input,select):focus-visible{outline:3px solid #4e8cb5;outline-offset:3px}
.pd-large-hud .scoreboard .team strong{font-size:32px}.pd-large-hud .scoreboard .team span{font-size:12px}.pd-large-hud .game-clock b{font-size:22px}.pd-large-hud .match-strip>b{font-size:13px}.pd-large-hud #game .pad small{font-size:12px}.pd-large-hud #game .middle #mode{font-size:10px}.pd-large-hud #game :is(#defense-hint,#throw-feedback,#kick-instruction){font-size:14px}
.pd-reduced-motion #game *,.pd-reduced-motion #game *::before,.pd-reduced-motion #game *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(orientation:portrait) and (max-width:649px){
 #game.started header{height:44px;padding-inline:9px}#game.started .wordmark{font-size:10px;letter-spacing:.3px}#game.started .header-actions{gap:4px}#game.started .header-actions button{min-height:36px;padding:6px 8px;font-size:10px}
 #game.started .scoreboard{top:calc(env(safe-area-inset-top) + 49px);height:43px}
 #game.started .match-strip{top:calc(env(safe-area-inset-top) + 96px);min-height:36px;padding:2px 8px;gap:5px}
 #game.started .timeout-strip{position:static;display:flex;flex:0 0 auto;width:auto;transform:none;gap:4px}
 #game.started .timeout-strip button{min-height:32px;padding:5px 7px;font-size:9px;pointer-events:auto}
 #game.started #cpu-timeouts{display:none}#game.started #spot{font-size:9px;line-height:1.25}
 #game.started .field-info{top:calc(env(safe-area-inset-top) + 136px)}#game.started #banner{top:calc(env(safe-area-inset-top) + 158px)}
 #game.started #field-wrap::after{background:linear-gradient(to bottom,#f7f9f7 0,#f7f9f7 calc(env(safe-area-inset-top) + 40px),transparent calc(env(safe-area-inset-top) + 132px),transparent 67%,#142635aa 100%)}
 .pd-large-hud #game.started .match-strip>b{font-size:12px}.pd-large-hud #game.started #spot{font-size:10px}
}
@media(min-width:650px) and (max-height:760px){
 #overlay.active:not(.premium-panel){padding-top:calc(env(safe-area-inset-top) + 52px);padding-bottom:12px}
 #overlay .panel{overflow-y:auto;scrollbar-width:auto;scrollbar-color:#7695a4 #e0e8e9;scrollbar-gutter:stable;overscroll-behavior:contain;padding-right:15px}
 #overlay .panel::-webkit-scrollbar{width:11px}#overlay .panel::-webkit-scrollbar-track{background:#e0e8e9;border-radius:8px}#overlay .panel::-webkit-scrollbar-thumb{background:#7695a4;border:2px solid #e0e8e9;border-radius:8px}
 #overlay.premium-panel .panel{overflow-y:auto}#overlay.premium-panel .premium-home{min-height:500px}
}

.play-result-card{position:absolute;z-index:21;top:calc(env(safe-area-inset-top,0px) + 132px);left:50%;transform:translateX(-50%);width:min(350px,calc(100% - 28px));border:1px solid #718da7;border-radius:12px;background:#09182ee8;color:#f2f6fa;padding:9px 12px;box-shadow:0 7px 24px #0005;pointer-events:none;font:12px/1.4 system-ui,sans-serif}
.play-result-card[hidden]{display:none}.play-result-card strong,.play-result-card span{display:block}.play-result-card strong{font-size:15px}.play-result-card button{pointer-events:auto;display:block;min-height:32px;padding:4px 12px;margin:7px 0 0 auto;border:1px solid #708caf;border-radius:6px;background:#162a45;color:white;font:inherit}.menu-open .play-result-card{display:none}.rep-grade.success{color:#8ce4b0}.rep-grade.retry{color:#ffd293}.progress-picker{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:8px;margin:9px 0;text-align:left}.progress-picker select{width:100%;min-height:42px;background:#142740;color:#fff;border:1px solid #667f9d;border-radius:7px;padding:7px}.mastery-total{display:grid;gap:5px;margin:16px 0;padding:13px;background:#142740;border-radius:9px;text-align:left}.mastery-total strong{font-size:20px}.mastery-total span,.mastery-objectives span,.mastery-objectives small{font-size:12px;color:#c3d3e7}.mastery-total progress{width:100%;accent-color:#80dda5}.mastery-objectives{display:grid;gap:9px}.mastery-objectives article{display:grid;gap:5px;padding:12px;border:1px solid #58718c;border-radius:8px;text-align:left}.mastery-objectives article>div{display:flex;justify-content:space-between;gap:10px}.mastery-objectives b{color:#ffda98;font-size:12px;white-space:nowrap}.recent-reps{text-align:left;margin:16px 0}.recent-reps summary{cursor:pointer;min-height:36px;align-content:center}.recent-rep{padding:10px 0;border-top:1px solid #536780}.recent-rep strong,.recent-rep span{display:block;font-size:12px}.progress-storage{color:#ffd293;font-size:12px}@media(max-height:650px){.play-result-card{top:98px;padding:7px 10px;font-size:11px}.play-result-card strong{font-size:13px}}

/* One compact sideline message owns results and coach reactions. */
#game #coach-dialogue{z-index:21;top:calc(env(safe-area-inset-top,0px) + 136px);left:10px;right:10px;grid-template-columns:54px minmax(0,1fr) 50px;gap:8px;padding:6px 8px 6px 0;min-height:76px;border:2px solid #89a6b7;border-radius:5px;background:#10243cf5;color:#edf6ff;box-shadow:0 4px 0 #06121e;animation:none}
#game #coach-dialogue .coach-portrait{width:54px;height:72px;align-self:center;background-image:url('../../coach/portraits/balanced.svg');background-size:cover;background-position:center;image-rendering:auto;animation:none}
#game #coach-dialogue.speaking .coach-portrait{animation:coach-breathe 3s ease-in-out infinite}
#game #coach-dialogue b{display:block;font-size:10px;letter-spacing:.08em;color:#ffdc84}
#game #coach-dialogue p{font-size:12px;line-height:1.3;margin:3px 0 0;font-weight:500}
#game #coach-dialogue .coach-result{display:block;font-size:13px;font-weight:700;margin-bottom:3px}
#game #coach-dialogue .coach-result[hidden],#game #coach-dialogue button[hidden]{display:none}
#game #coach-dialogue button{width:50px;min-height:44px;align-self:center;font-size:11px;color:#bde9f5;background:#203d55;border:1px solid #608197;border-radius:4px;pointer-events:auto}
#game.has-coach-message .field-info,#game.has-coach-message #banner{visibility:hidden}
@keyframes pixel-coach-talk{0%,35%,75%,100%{background-position:0 0}12%,46%,85%{background-position:33.3333% 0}22%,58%{background-position:66.6667% 0}68%{background-position:100% 0}}
.pd-reduced-motion #game #coach-dialogue .coach-portrait{animation:none!important;background-position:center}
@media(prefers-reduced-motion:reduce){#game #coach-dialogue.speaking .coach-portrait{animation:none}}
@media(max-height:650px){#game #coach-dialogue{top:calc(env(safe-area-inset-top,0px) + 110px)}}

#overlay.active.field-choice-panel{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;align-items:flex-start;-webkit-overflow-scrolling:touch}
#overlay.active.field-choice-panel .panel{height:auto;max-height:none;overflow:visible;flex-shrink:0;touch-action:pan-y;margin-bottom:24px}
#overlay.active.field-choice-panel .panel *{touch-action:pan-y}
#ball-direction{position:absolute;z-index:9;width:22px;height:22px;border-radius:50%;background:#102b3d55;pointer-events:none;opacity:.65}
#ball-direction[hidden]{display:none}#ball-direction i{display:block;width:0;height:0;margin:5px auto;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid #b7e7f2}
#defense-tools #defense-lock{font-size:10px;min-height:44px;padding:5px 8px}#defense-lock[aria-pressed="true"]{border-color:#8ad4e8;color:#bceffc}

/* Live HUD: stadium first, with the same tactile finish as the controller. */
#game.started header{top:calc(env(safe-area-inset-top,0px) + 8px);left:auto;right:calc(env(safe-area-inset-right,0px) + 10px);width:auto;height:44px;padding:0;background:transparent;box-shadow:none;border:0}
#game.started header::before,#game.started header .wordmark,#game.started header :is(#sound,#fullscreen,#header-options){display:none}
#game.started header .header-actions{gap:6px}
#game.started header .header-actions button{height:44px;min-height:44px;padding:8px;font-size:10px;color:#e9f5fb;background:linear-gradient(145deg,#496578e8,#213c50ed);border:1px solid #b2cbd580;border-radius:14px;box-shadow:inset 0 1px 0 #ffffff20,0 3px 0 #102738,0 5px 12px #0003}
#game.started header #pause{width:44px;display:grid;place-items:center}
#game.started header #camera-button{max-width:78px;line-height:1.2}
#game.started #field-wrap::after{background:linear-gradient(to bottom,#10243844,transparent 22%,transparent 72%,#10243877)}
#game.started .scoreboard{top:calc(env(safe-area-inset-top,0px) + 8px);left:10px;right:142px;width:auto;max-width:none;transform:none;height:44px;padding:0 8px;border:1px solid #c2d9e34d;border-radius:14px;background:#173345d9;box-shadow:0 3px 12px #0002;color:#f3f8fb}
#game.started .scoreboard :is(.team strong,.team span,.game-clock b,.game-clock span){color:#f3f8fb}
#game.started .scoreboard .team img{width:28px;height:28px}
#game.started .scoreboard .team span{display:none}
#game.started .scoreboard .team strong{font-size:23px}
#game.started .scoreboard .game-clock{min-width:59px;padding:0 6px;border-color:#d1e6ef30}
#game.started .scoreboard .game-clock b{font-size:17px}
#game.started .match-strip{top:calc(env(safe-area-inset-top,0px) + 58px);left:10px;right:10px;max-width:none;width:auto;transform:none;min-height:36px;padding:0 8px;background:#173345b8;border:1px solid #c2d9e330;border-radius:12px;color:#e8f4f9}
#game.started .match-strip #spot{color:#c9dce7;font-size:10px}
#game.started .match-strip #cpu-timeouts{display:none}
#game.started .match-strip .timeout-strip{flex:0 0 auto;width:auto;max-width:none}
#game.started .match-strip .timeout-strip button{min-height:36px;color:#d4e8f0;background:transparent;border:0;font-size:11px;padding:0 8px;pointer-events:auto}
#game.started .field-info{top:calc(env(safe-area-inset-top,0px) + 101px)}
#game.started #banner{top:calc(env(safe-area-inset-top,0px) + 121px)}
#game.started #coach-dialogue{top:calc(env(safe-area-inset-top,0px) + 104px);left:50%;right:auto;transform:translateX(-50%);width:min(420px,calc(100% - 20px));border:1px solid #b2cbd570;border-radius:18px;background:linear-gradient(145deg,#304e63f5,#152f43f5);box-shadow:inset 0 1px 0 #ffffff18,0 4px 0 #102738,0 7px 20px #0003}
#game.started :is(#practice-tools button,#practice-tools select,#audible-button,#rb-motion,#hot-routes-button,#audible-choices button,#coach-dialogue button){min-height:44px;color:#eaf5fb;background:linear-gradient(145deg,#496578e8,#213c50ed);border:1px solid #b2cbd580;border-radius:14px;box-shadow:inset 0 1px 0 #ffffff20,0 3px 0 #102738,0 5px 12px #0003;font-size:12px;padding:7px 10px}
#game.started :is(header button,#practice-tools button,#audible-button,#rb-motion,#hot-routes-button,#coach-dialogue button):active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff18,0 1px 0 #102738}
#game.started :is(header button,#practice-tools button,#practice-tools select):focus-visible{outline:3px solid #9de7e8;outline-offset:3px}
#game.started .middle :is(#controller-start,#controller-options){display:none}
#game.practicing header #camera-button{display:none}
#game.practicing #practice-tools{top:calc(env(safe-area-inset-top,0px) + 8px);left:10px;right:64px}
#game.practicing #practice-tools>div{gap:5px;flex-wrap:wrap}
#game.practicing #practice-tools button{padding:6px 8px;font-size:11px}
#game.practicing #practice-tools :is(#practice-quick,#practice-athlete){margin-top:7px}
#game.practicing #practice-tools select{max-width:170px;min-width:0}
#game.practicing #practice-state{font-size:11px;margin-top:6px}
#game.practicing #coach-dialogue{top:calc(env(safe-area-inset-top,0px) + 150px)}
@media(orientation:landscape){
 #game.started .scoreboard{left:50%;right:auto;width:300px;transform:translateX(-50%)}
 #game.started .scoreboard .team span{display:block;font-size:10px}
 #game.started .match-strip{left:50%;right:auto;width:350px;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 56px)}
 #game.started .field-info{display:none}
 #game.started #coach-dialogue{width:min(400px,calc(100% - 340px));top:calc(env(safe-area-inset-top,0px) + 100px);min-height:72px;grid-template-columns:58px minmax(0,1fr) 50px;gap:7px}
 #game.started #coach-dialogue p{font-size:12px;line-height:1.35}
 #game.started .controller{left:calc(env(safe-area-inset-left,0px) + 14px);right:calc(env(safe-area-inset-right,0px) + 14px);bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
 #game.started #defense-tools{bottom:180px}
 #game.started #style-button{bottom:234px;max-width:132px}
 #game.started #defense-current{display:none}
 #game.started #defense-tools #defense-line{position:absolute;left:170px;bottom:-172px}
 #game.started #defense-tools #defense-lock{position:absolute;left:250px;bottom:-172px}
 #game.started #audible-button{left:170px;bottom:8px}
 #game.started #rb-motion{left:260px;bottom:8px}
 #game.started #hot-routes-button{left:170px;bottom:60px}
 #game.started #audible-choices{left:170px;bottom:60px}
 #game.started #audible-choices:not([hidden])~#hot-routes-button{visibility:hidden}
 #game.started #pass-controls{left:50%;right:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);width:auto;max-width:calc(100% - 380px);transform:translateX(-50%);font-size:11px}
 #game.started #defense-hint{bottom:calc(env(safe-area-inset-bottom,0px) + 69px);max-width:calc(100% - 360px);font-size:11px;background:#173345a8;border-radius:14px}
 #game.practicing #practice-tools{left:calc(env(safe-area-inset-left,0px) + 160px);right:calc(env(safe-area-inset-right,0px) + 160px);display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
 #game.practicing #practice-tools[hidden]{display:none}
 #game.practicing #practice-tools :is(#practice-quick,#practice-athlete){margin:0}
 #game.practicing #practice-state{width:100%;margin:0;font-size:10px}
 #game.practicing #coach-dialogue{top:calc(env(safe-area-inset-top,0px) + 125px)}
 #game.started #overlay.playbook-panel{padding-top:calc(env(safe-area-inset-top,0px) + 100px)}
}
@media(orientation:landscape) and (max-height:450px){
 #game.started #coach-dialogue{max-height:calc(100dvh - 130px);overflow-y:auto;pointer-events:auto;touch-action:pan-y}
 #game.started #coach-dialogue p{margin-top:2px}
 #game.practicing #practice-tools button{min-height:36px}
}
.pd-large-hud #game.started .scoreboard .team strong{font-size:28px}
.pd-large-hud #game.started .scoreboard .game-clock b{font-size:20px}
.pd-large-hud #game.started #coach-dialogue p{font-size:15px}

/* Human coach portraits share complete bust framing. */
#game #coach-dialogue .coach-portrait{width:58px;height:78px;background-image:url('../../coach/portraits/balanced.svg');background-size:cover;background-position:center;image-rendering:auto;border-radius:12px;animation:none}
#game #coach-dialogue.speaking .coach-portrait{animation:coach-breathe 3s ease-in-out infinite}
@keyframes anime-coach-talk{0%,35%,75%,100%{background-position:0 40%}12%,46%,85%{background-position:33.3333% 40%}22%,58%{background-position:66.6667% 40%}68%{background-position:100% 40%}}
.pd-reduced-motion #game #coach-dialogue .coach-portrait{animation:none!important;background-position:center}
@media(prefers-reduced-motion:reduce){#game #coach-dialogue.speaking .coach-portrait{animation:none}}
#game.started.menu-open:not(.calling-play) header #header-options{display:block}
#game.started #coach-dialogue{grid-template-columns:58px minmax(0,1fr) 50px}
#game.started.practicing #practice-tools #practice-athlete[hidden]{display:none}
@media(orientation:landscape) and (max-width:700px){
 #game.started .scoreboard{width:240px;left:12px;transform:none}
 #game.started .match-strip{width:300px;left:12px;transform:none}
 #game.started #coach-dialogue{width:min(380px,calc(100% - 180px))}
 #game.practicing #practice-tools{left:90px;right:70px}
}

/* Play selection spends its space on routes, with one name per card. */
#overlay .quick-call-shell .coach-play>div{padding:10px 12px}
#overlay .quick-call-shell .coach-play b{font-size:16px;line-height:1.25}
#overlay .quick-call-shell .coach-play :is(small,.concept-note){display:none}
#overlay.quick-call-panel .panel{width:100%;max-width:640px}
@media(orientation:landscape){
 #game.started #overlay.quick-call-panel{padding:calc(env(safe-area-inset-top,0px) + 100px) calc(env(safe-area-inset-right,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 12px);align-items:flex-end}
 #game.started #overlay.quick-call-panel .panel{max-width:1200px;padding:12px;max-height:100%;overflow-y:auto}
 #overlay .quick-call-shell>.eyebrow{display:none}
 #overlay .quick-call-shell .coach-heading{margin:0 0 10px;gap:8px}
 #overlay .quick-call-shell .coach-heading h2{font-size:21px}
 #overlay .quick-call-shell .coach-plays{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 #overlay .quick-call-shell .coach-play{display:flex;flex-direction:column;min-width:0}
 #overlay .quick-call-shell .coach-play img,#overlay .quick-call-shell .coach-play .play-fallback{width:100%;height:clamp(110px,38dvh,310px);max-height:none;min-height:0;object-fit:contain;background:#142c3b}
 #overlay .quick-call-shell .coach-play>div{padding:9px 10px}
 #overlay .quick-call-shell .coach-special{margin-top:8px}
 #game.started #overlay.huddle-panel .play-grid .huddle-play>img{height:clamp(90px,25dvh,220px);max-height:none;object-fit:contain}
 #game.started #coach-dialogue,#game.started.practicing #coach-dialogue{left:calc(env(safe-area-inset-left,0px) + 10px);right:auto;top:calc(env(safe-area-inset-top,0px) + 8px);transform:none;width:min(290px,calc((100% - 320px)/2 - 20px));min-width:210px;grid-template-columns:44px minmax(0,1fr) 44px;gap:5px;padding:6px;min-height:64px}
 #game.started #coach-dialogue .coach-portrait{width:44px;height:64px}
 #game.started #coach-dialogue p{font-size:11px;line-height:1.3}
 #game.started #coach-dialogue button{width:44px;padding:5px;font-size:10px}
 #game.started #coach-dialogue .coach-result{font-size:12px}
 #game.started.has-coach-message #style-button{visibility:hidden}
}
@media(orientation:landscape) and (max-width:850px){
 #game.started #coach-dialogue,#game.started.practicing #coach-dialogue{top:calc(env(safe-area-inset-top,0px) + 103px);width:230px}
 /* In a game the card rides the top-left corner, clear of L1 SWITCH and
    POSITION below it: at 103px it covered them for the pre-snap line. Its
    height stops at that row (252px = its top, the row and the deck), so on
    360-375px tall phones it spends width instead: up to 290px of the free
    top-left field, and a hidden Review button gives its column back. */
 #game.started:not(.practicing) #coach-dialogue{top:calc(env(safe-area-inset-top,0px) + 8px);width:min(290px,calc(100% - 330px));min-width:230px;grid-template-columns:44px minmax(0,1fr) auto;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 252px);overflow-y:auto}
}
/* 320px tall (iPhone SE): about 68px for the card. 340px (not the full top edge) leaves the deep
   field and the safeties readable pre-snap; tighter lines and a shorter portrait fit three lines. */
@media(orientation:landscape) and (max-width:850px) and (max-height:340px){#game.started:not(.practicing) #coach-dialogue{width:min(340px,calc(100% - 130px));min-height:0;padding-block:4px}#game.started:not(.practicing) #coach-dialogue .coach-portrait{height:50px}#game.started:not(.practicing) #coach-dialogue p{line-height:1.22;margin-top:2px}}

/* Film Room shares the field and tactile game controls. It never covers a
   live play: the underlying scene and menu are suspended until Done. */
#game.replaying>:not(#field-wrap):not(#film-room){visibility:hidden!important;pointer-events:none!important}
#game.replaying #field-wrap :is(#overlay,#banner,.field-tag),#game.replaying #field-wrap::after{visibility:hidden!important;pointer-events:none!important}
#film-room[hidden]{display:none}
#film-room{position:absolute;inset:0;z-index:100;color:#edf7fb;pointer-events:none}
#film-room .film-heading{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:calc(env(safe-area-inset-left,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:auto}
#film-room .film-heading>div{max-width:min(460px,calc(100% - 80px));padding:8px 12px;border-radius:14px;background:#122e40dd;border:1px solid #b2cbd550}
#film-room .film-heading span{display:block;font-size:9px;font-weight:800;letter-spacing:1.8px;color:#a8d8e7}
#film-room h2{margin:4px 0 0;font-size:17px;line-height:1.25;color:#f0f8fb;overflow-wrap:anywhere}
#film-room :is(button,select){min-height:44px;min-width:44px;border:1px solid #b2cbd580;border-radius:12px;padding:8px 12px;background:linear-gradient(145deg,#496578f5,#213c50fa);box-shadow:inset 0 1px 0 #ffffff20,0 3px 0 #102738;color:#eef7fb;touch-action:manipulation;cursor:pointer}
#film-room select{font:700 12px Arial;max-width:100%;color-scheme:dark}
#film-room button{font:750 12px Arial}
#film-room button:disabled{opacity:.42;cursor:default}
#film-room :is(button,select,input):focus-visible{outline:3px solid #9de7e8;outline-offset:3px}
#film-room button:active{transform:translateY(1px)}
#film-room .film-dock{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);transform:translateX(-50%);width:min(760px,calc(100% - 24px));padding:9px 12px;border-radius:18px;border:1px solid #b2cbd570;background:#142e40ed;box-shadow:0 5px 22px #0004;pointer-events:auto}
#film-room .film-moments{display:flex;gap:5px;overflow-x:auto;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#8ebac7 #173448}
#film-room .film-moments button{flex:0 0 auto;font-size:11px;min-height:44px;padding:6px 10px;border-radius:10px;background:#25465b;box-shadow:none;color:#c9e0e9}
#film-room .film-moments [aria-current=true]{border-color:#a8e6ee;color:#fff;background:#31596e}
#film-room .film-timeline{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:9px;align-items:center;min-height:44px}
#film-room output{font:600 11px ui-monospace,monospace;color:#d2e6ed;font-variant-numeric:tabular-nums}
#film-room .film-duration{text-align:right}
#film-room input[type=range]{width:100%;min-width:0;min-height:44px;margin:0;accent-color:#9ee5e6;cursor:ew-resize;touch-action:pan-y}
#film-room .film-controls{display:flex;justify-content:space-between;gap:10px}
#film-room :is(.film-transport,.film-views){display:flex;align-items:center;gap:6px;min-width:0}
#film-room [data-film=play]{min-width:64px;color:#b9f3ec}
#film-room :is([data-film=back],[data-film=forward]){font-size:28px;padding:0 10px}
#film-room .film-views select{min-width:0;width:140px}
#film-room .film-caption{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:10px;color:#a7c4d0}
#film-room .film-moment{font-weight:800;color:#d6ebf2}
#overlay .replay-call{min-height:44px;padding:6px 10px;white-space:nowrap;font-size:11px}
#overlay .replay-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pd-large-hud #film-room :is(button,select){font-size:14px;min-height:48px}
.pd-large-hud #film-room h2{font-size:19px}
@media(orientation:portrait){
 #film-room .film-controls{flex-wrap:wrap;gap:8px}
 #film-room .film-transport{flex:1;justify-content:space-between}
 #film-room .film-views{width:100%}
 #film-room .film-views>*{flex:1}
 #film-room .film-caption{font-size:10px}
}
@media(orientation:landscape) and (max-height:440px){
 #film-room .film-heading>div{padding:6px 10px}
 #film-room .film-heading h2{font-size:15px}
 #film-room .film-dock{width:min(720px,calc(100% - 24px));padding:6px 10px;bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}
 #film-room .film-caption{display:none}
 #film-room .film-timeline{min-height:44px}
 #film-room .film-moments{position:absolute;left:0;bottom:calc(100% + 5px);right:0;max-width:100%}
}

/* Landscape score dock: keep the downfield view clear, between the thumb controls. */
@media(orientation:landscape){
 #game.started{--score-dock-width:min(350px,calc(100% - 360px))}
 #game.started .scoreboard{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 48px);left:50%;right:auto;width:var(--score-dock-width);transform:translateX(-50%);height:40px;border-radius:12px 12px 0 0;border-bottom:0;box-shadow:none}
 #game.started .match-strip{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);left:50%;right:auto;width:var(--score-dock-width);transform:translateX(-50%);height:40px;min-height:40px;border-radius:0 0 12px 12px;background:#173345d9;gap:6px}
 #game.started .match-strip #spot{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #game.started .match-strip #down,#game.started .match-strip #play-clock{flex-shrink:0}
 #game.started .controller .middle{display:none}
 #game.started .status{left:90px;bottom:calc(env(safe-area-inset-bottom,0px) + 170px)}
 #game.started #pass-controls,#game.started #defense-hint{bottom:calc(env(safe-area-inset-bottom,0px) + 100px)}
 #game.started #audible-button,#game.started #rb-motion{bottom:90px}
 #game.started #hot-routes-button,#game.started #audible-choices{bottom:142px}
 #game.started #defense-tools #defense-line{bottom:-90px}
 /* SWITCH AUTO sits in the L1 row as in portrait, not on top of the pre-snap hint. */
 #game.started #defense-tools #defense-lock{position:static}
}
@media(orientation:landscape) and (max-height:500px){
 /* Phones: in the row, SWITCH AUTO pushed POSITION over the controlled
    defender, so it tucks under L1 SWITCH, in the 41px above the stick. At
    26px tall it keeps 12px clear of the stick's touch area: a thumb landing
    just above the stick steers instead of flipping the saved switch mode. */
 #game.started #defense-tools #defense-lock{position:absolute;left:0;top:calc(100% + 3px);bottom:auto;min-width:95px;min-height:0;height:26px;padding-block:1px}
}
@media(orientation:landscape) and (max-width:700px){
 #game.started{--score-dock-width:calc(100% - 330px)}
 #game.started .scoreboard .team span{display:none}
 #game.started .match-strip{padding:0 6px;gap:4px}
 #game.started .match-strip .timeout-strip button{padding:0 4px}
}

/* Compact mobile controls and a clear play picker. */
#game.started.calling-play :is(.scoreboard,.match-strip){visibility:hidden;pointer-events:none}
#game.started :is(#rb-pass,#te-pass){left:auto;right:0;bottom:196px;width:54px;height:44px;min-height:44px;border-radius:13px}
#defense-group{position:absolute;left:0;top:100%;margin-top:5px;min-height:44px;max-width:100px;background:#213c50ed;color:#fff;border:1px solid #b2cbd580;border-radius:12px;padding:5px;pointer-events:auto;font-weight:700}
#defense-group[hidden]{display:none}
#coach-tackle,#coach-db{min-height:44px;margin-left:10px;background:#213c50;color:#fff;border:1px solid #a9bdcd;border-radius:8px;padding:7px;font:inherit}
@media(orientation:landscape){
 #game.started{--score-dock-width:min(320px,calc(100% - 360px))}
 #game.started .scoreboard{height:34px;bottom:calc(env(safe-area-inset-bottom,0px) + 42px);font-size:12px}
 #game.started .match-strip{height:34px;min-height:34px;font-size:10px}
 #game.started :is(#audible-button,#rb-motion,#hot-routes-button){left:auto;bottom:82px;min-width:0;min-height:44px;height:44px;font-size:9px;padding:5px 7px;border-radius:10px}
 #game.started #audible-button{right:calc(50% + 45px)}
 #game.started #hot-routes-button{right:calc(50% - 33px)}
 #game.started #rb-motion{right:calc(50% - 110px)}
 #game.started #audible-choices{left:50%;transform:translateX(-50%);bottom:132px}
 #game.started :is(#rb-pass,#te-pass){right:0;bottom:166px}
 #game.started #defense-group{left:100px;top:0;margin-top:0}
 #game.started #pass-controls,#game.started #defense-hint{bottom:calc(env(safe-area-inset-bottom,0px) + 132px)}
}

#game.started #te-pass{right:62px;background:linear-gradient(#756493,#473459)}

#game.started :is(#rb-pass,#te-pass){flex-direction:column;gap:0;padding:3px 0}
#game.started :is(#rb-pass,#te-pass) span{font-size:16px;line-height:18px}
#game.started :is(#rb-pass,#te-pass) small{font-size:9px;line-height:11px;letter-spacing:.5px}

/* Pocket lanes (portrait). The shoulder row holds L1 · QB status · R1; back-pass
   targets ride above R1 beside the style button, and defense-only toggles
   never appear on offense. */
#defense-tools [hidden]{display:none!important}
#pass-controls[data-footwork]:not([data-footwork=""])::before{content:attr(data-footwork);display:block;font-size:10px;font-weight:900;letter-spacing:.08em;color:#e8f6ff}
@media(orientation:portrait){
 #game.started :is(#rb-pass,#te-pass){bottom:247px}
 /* Centered between the shoulders even while the style button is shown. */
 #game.started #pass-controls,#game.started:has(#style-button) #pass-controls{left:50%;right:auto;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 211px);max-width:calc(100% - 214px);white-space:normal;padding:4px 10px;line-height:1.25}
 #game.started #throw-feedback{font-size:8px;letter-spacing:.4px}
}
#defense-hint[data-timing=attempt]{padding-bottom:5px;box-shadow:none;color:#cfe0ea}
#defense-hint[data-timing=attempt]:after{display:none}
#defense-tools button{white-space:nowrap}
#defense-tools #defense-lock{line-height:1.05;padding:4px 8px}
#defense-tools #defense-lock small{display:block;font-size:7px;letter-spacing:.14em;opacity:.78}
#game #defense-tools .gm-choice{width:auto;flex:0 0 auto;min-height:40px;padding:5px 11px;border:1px solid #d9e5eaa3;border-radius:14px;background:linear-gradient(#496578,#213c50);box-shadow:0 4px 0 #102738;color:#f7fbff}
#game #defense-tools .gm-choice .gm-value{color:inherit;font-size:11px;font-weight:800}

/* Forgiving thumbs: invisible pseudo-areas widen hit testing without moving art. */
#joystick::before{content:'';position:absolute;inset:-20px;border-radius:50%}
.face .pad::before{content:'';position:absolute;inset:-7px;border-radius:50%}

/* Fixed move caption below the stick. Reserve its space so feedback never moves controls. */
.stick-area{position:relative}
.stick-area .control-caption{box-sizing:border-box;min-height:24px;display:flex;align-items:center;justify-content:center}
#move-tag{position:absolute;left:0;bottom:0;z-index:4;box-sizing:border-box;width:100%;height:24px;pointer-events:none;padding:3px 4px;border:1px solid var(--move-color,#ffd36b);border-radius:8px;background:#08192be0;color:var(--move-color,#ffd36b);font:900 12px/16px Arial,sans-serif;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 6px #0004}
#move-tag[hidden]{display:none}
#move-tag.rushing::after{content:'';position:absolute;left:4px;bottom:1px;width:calc((100% - 8px)*var(--rush-progress,0));height:2px;border-radius:2px;background:var(--move-color,#ffe080)}

/* Physical controller in use: glyph chips on the controls a pad button mirrors.
   Touching the screen returns to the touch layout. */
#game[data-input=pad] [data-pad-glyph]::after{content:attr(data-pad-glyph);position:absolute;top:-7px;left:-7px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:#f1f6ff;color:#12263a;font:800 10px/17px Arial,sans-serif;letter-spacing:0;text-align:center;box-shadow:0 1px 0 #0007;pointer-events:none;z-index:2}
#game[data-input=pad] .pad[data-pad-glyph]::after{top:2px;left:auto;right:2px;font-size:12px;min-width:20px;height:20px;line-height:20px;border-radius:10px}
#game[data-input=pad] :is(#pause,#camera-button)[data-pad-glyph]{position:relative}
#game[data-input=pad] :is(#pause,#camera-button)[data-pad-glyph]::after{top:auto;bottom:-8px;left:50%;transform:translateX(-50%);font-size:8px;height:14px;line-height:14px}
#game[data-input=pad] .stick-area .control-caption{font-size:0}
#game[data-input=pad] .stick-area .control-caption::after{content:"L STICK";font-size:11px}

/* Film Room: moment ticks under the scrubber. */
.film-track{position:relative;min-width:0}.film-track input{width:100%}.film-ticks{position:absolute;left:8px;right:8px;bottom:-3px;height:6px;pointer-events:none}.film-ticks i{position:absolute;top:0;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:#ffd36b}

/* Landscape pre-snap row: AUDIBLE, HOT ROUTES and RB MOTION sit side by side with room for their pad badges. */
@media(orientation:landscape){#game.started #audible-button{right:auto;left:calc(50% - 178px);width:100px}#game.started #hot-routes-button{right:auto;left:calc(50% - 64px);width:120px}#game.started #rb-motion{right:auto;left:calc(50% + 70px);width:108px}#game.started :is(#audible-button,#hot-routes-button,#rb-motion){box-sizing:border-box;justify-content:center;text-align:center;white-space:nowrap;overflow:visible}}
@media(orientation:landscape) and (max-width:720px){#game.started #audible-button{left:calc(50% - 150px);width:86px}#game.started #hot-routes-button{left:calc(50% - 56px);width:104px}#game.started #rb-motion{left:calc(50% + 56px);width:94px}#game.started :is(#audible-button,#hot-routes-button,#rb-motion){font-size:10px;padding-inline:4px}}