/* Matchday shell: content stays in flow, including saved matches and short screens. */
.hub-content {
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(230px,.65fr);
 grid-template-rows:minmax(280px,1fr) auto;
 gap:28px;
 min-height:calc(100dvh - 94px);
}
.hub-content>div:last-child {grid-column:1/-1;min-width:0}
.feature-tag {position:static;align-self:center;justify-self:end;max-width:100%;padding:20px 0}
.hero-copy {min-width:0}
.hero-copy h1 {font-size:clamp(66px,7.1vw,108px)}
.hub-lower {position:static;max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}
.mode-card {min-width:0;min-height:155px}
.mode-card p {max-width:94%;line-height:1.7}
.online-entry {flex-wrap:wrap;gap:12px}
.online-entry .secondary {flex:1 1 260px;min-height:48px;text-align:left}
.online-entry>span {flex:1 1 160px;text-align:right}
.resume-ribbon {position:relative;margin:0 0 16px;min-width:0;gap:18px;border-left:3px solid var(--lime);background:#12271ff5}
.resume-ribbon>div {min-width:0}
.resume-ribbon strong {overflow-wrap:anywhere;line-height:1.5}
.resume-ribbon .primary {flex:none;white-space:normal;justify-content:center}
.device-chip {display:flex;align-items:center;gap:9px;min-height:44px;padding:9px 13px;border:1px solid #ffffff30;background:#10251de8;border-radius:5px;font-size:11px;font-weight:700}
.device-chip>span:first-child {font-size:21px;color:var(--lime)}
.topbar {padding-top:max(18px,env(safe-area-inset-top));padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.hub,.setup {overscroll-behavior:contain;scroll-padding-block:24px}
.setup-inner {flex:none;margin:auto;width:min(1100px,100%);min-width:0}
.setup .match-options {grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
.section-title,.setup-bottom {flex-wrap:wrap}
.club-display>div:last-child {min-width:0}
.club-display h3 {overflow-wrap:anywhere}
.overlay {z-index:10;align-items:safe center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));overflow:auto;overscroll-behavior:contain}
.dialog,.dialog.dialog-wide {position:relative;min-width:0;max-width:100%;max-height:calc(100dvh - 36px);overflow:auto;overscroll-behavior:contain;scroll-padding:25px;border-radius:10px}
.dialog-close {position:absolute;right:12px;top:12px;width:44px;height:44px;display:grid;place-items:center;background:#ffffff0b;border:1px solid var(--line);border-radius:50%;font-size:25px;line-height:1;z-index:1}
.dialog h2 {padding-right:35px;line-height:1.05;overflow-wrap:anywhere}
.dialog p {max-width:76ch}
.dialog-actions {gap:10px;align-items:stretch}
.dialog-actions button,.dialog-actions a {min-height:46px;white-space:normal}
.dialog-actions .primary {min-width:min(210px,100%)}
.dialog [data-menu-editing] {outline:3px solid var(--lime);outline-offset:4px}
.pause-score {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;margin:24px 0;padding:18px 0;border-block:1px solid var(--line)}
.pause-score>span {font-size:13px;line-height:1.5}
.pause-score>span:last-child {text-align:right}
.pause-score strong {font-family:'Barlow Condensed',sans-serif;font-size:52px;white-space:nowrap}
.pause-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pause-actions>.primary,.pause-actions>.leave-match {grid-column:1/-1}
.pause-actions>.primary {min-height:56px;font-size:14px}
.pause-actions>.secondary {font-size:12px;text-align:left}
.pause-actions>.leave-match {text-align:center;margin-top:4px;background:#ffffff05}
.settings-row {flex-wrap:wrap;gap:12px}
.settings-row input[type=range] {max-width:100%;min-height:32px}
.stats-score {min-width:0}
.stats-score span {overflow-wrap:anywhere}
.toast {z-index:12;max-width:min(560px,calc(100vw - 36px));width:max-content;line-height:1.6;text-align:center;pointer-events:none}
.hud-actions .icon-button {width:44px;height:44px;flex:none;font-size:10px}
.hud-actions {right:max(20px,env(safe-area-inset-right));gap:7px}
.scorebug {left:max(20px,env(safe-area-inset-left));top:max(20px,env(safe-area-inset-top))}
.touch-technique {grid-template-columns:repeat(3,58px);gap:6px}
.touch-technique [data-touch=loft] {grid-column:auto}
.touch-technique button {pointer-events:auto}
.touch-defence {bottom:172px}
.set-piece-help {position:absolute;top:94px;left:50%;transform:translateX(-50%);max-width:min(520px,calc(100vw - 28px));padding:10px 16px;background:#10271ee8;border:1px solid #d6ff6860;color:#e6efd9;font-size:11px;line-height:1.6;text-align:center}
.match-notices {position:absolute;top:94px;left:50%;transform:translateX(-50%);display:grid;gap:8px;width:min(500px,calc(100vw - 32px));z-index:12;pointer-events:none}
.match-notices .goalkeeper-help,.match-notices .set-piece-help,.match-notices .toast {position:static;transform:none;width:auto;max-width:100%;margin:0}
.match-notices .goalkeeper-help button {min-width:0;flex:1}
#match-app:not([data-screen="hud"]) .goalkeeper-help,#match-app:not([data-screen="hud"]) .set-piece-help,#match-app.modal-open .goalkeeper-help,#match-app.modal-open .set-piece-help {display:none!important}
.using-controller .touch-controls,.using-controller .rotate-hint {display:none}
.using-controller .control-hint {display:flex}
.using-controller .player-panel {bottom:32px}
.using-controller .radar-wrap {bottom:22px;left:50%;right:auto;transform:translateX(-50%)}
.controller-screen h2 {font-size:clamp(30px,4.2vw,47px)}
.connection-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0;margin:25px 0;list-style:none;counter-reset:connection}
.connection-steps li {min-width:0;counter-increment:connection;border-top:2px solid #d6ff6870;padding-top:12px}
.connection-steps strong {display:block;font-size:13px;margin-bottom:8px}
.connection-steps strong::before {content:counter(connection) '. ';color:var(--lime)}
.connection-steps span {display:block;color:var(--muted);font-size:11px;line-height:1.75}
.controller-connection {display:flex;align-items:center;gap:14px;background:#0d1b15;border:1px solid var(--line);padding:16px;border-radius:6px;min-width:0}
.controller-connection>div {min-width:0}
.controller-connection strong {display:block;font-size:13px;overflow-wrap:anywhere}
#controller-dot {width:10px;height:10px;flex:none;background:#83928b;border-radius:50%}
#controller-dot.connected {background:var(--lime);box-shadow:0 0 12px #d6ff6850}
.controller-screen .control-preferences {align-items:start}
.controller-screen label {line-height:1.6;font-weight:700}
.controller-screen input[type=range] {display:block;width:100%;accent-color:var(--lime);min-height:44px}
.controller-screen output {float:right;color:var(--lime)}
.controller-test {padding:20px;background:#0c1b15;border:1px solid var(--line);border-radius:7px}
.controller-test.testing {border-color:var(--lime)}
.stick-tests {display:flex;gap:40px;justify-content:center;margin-bottom:18px}
.stick-tests>div {display:grid;justify-items:center;gap:10px;text-align:center;font-size:9px;color:var(--muted)}
.stick-well {width:84px;height:84px;display:grid;place-items:center;background:radial-gradient(circle,#314e3b 1px,#152a21 2px);border:1px solid #587365;border-radius:50%;position:relative}
.stick-well::before,.stick-well::after {content:'';position:absolute;width:1px;height:100%;background:#ffffff16}
.stick-well::after {transform:rotate(90deg)}
.stick-well i {display:block;width:27px;height:27px;border-radius:50%;background:#b6d19b;border:2px solid #e0f5b8;z-index:1}
.pad-buttons {display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:12px 0 16px}
.pad-buttons span {min-width:35px;min-height:34px;display:grid;place-items:center;padding:4px 7px;border:1px solid #ffffff2a;border-radius:5px;background:#ffffff07;font-size:10px}
.pad-buttons span.pressed {color:#18251b;background:var(--lime);border-color:var(--lime)}
.controller-test .secondary {min-height:44px;font-size:11px;margin-top:12px}
.controller-reference {display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:25px}
.controller-reference h3 {font-size:24px}
.controller-reference dl {margin:12px 0}
.controller-reference dl>div {display:flex;gap:12px;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #ffffff12}
.controller-reference dt {flex:none}
.controller-reference dd {margin:0;font-size:11px;color:var(--muted);text-align:right}
.controller-combinations {padding-top:15px;border-top:1px solid var(--line)}
.controller-screen>.dialog-actions {position:sticky;bottom:-1px;padding:16px 0 0;background:#12211af7}
@media(max-width:1100px) {
 .hub-lower {grid-template-columns:repeat(2,minmax(0,1fr))}
 .feature-tag strong {font-size:27px}
 .control-hint {max-width:280px;font-size:9px}
}
@media(max-width:700px) {
 .top-nav {display:none}
 .hub-content {grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:calc(100dvh - 80px);padding:28px 20px 24px}
 .feature-tag {display:none}
 .topbar {gap:12px}
 .brand small {letter-spacing:.08em}
 .device-chip {font-size:10px;max-width:150px}
 .device-chip>span:first-child {display:none}
 .top-right {gap:8px}
 .hero-meta {flex-wrap:wrap;gap:10px;line-height:1.5}
 .hero-meta span+span {padding-left:10px}
 .mode-card.featured {grid-column:auto;min-height:150px}
 .mode-card {padding:18px;min-height:150px}
 .mode-card h2 {font-size:27px}
 .mode-card p {font-size:11px;max-width:96%}
 .online-entry .secondary {flex-basis:100%;font-size:11px}
 .online-entry>span {text-align:left}
 .resume-ribbon {padding:15px;align-items:stretch;flex-direction:column}
 .resume-ribbon .primary {min-height:46px}
 .overlay {padding:12px}
 .dialog,.dialog.dialog-wide {padding:24px 20px;max-height:calc(100dvh - 24px);max-width:100%}
 .dialog h2 {font-size:36px;line-height:1.1}
 .dialog-close {right:8px;top:8px;width:40px;height:40px}
 .connection-steps {grid-template-columns:1fr;gap:15px}
 .connection-steps li {padding-top:10px}
 .connection-steps strong {margin-bottom:4px}
 .controller-reference {gap:16px}
 .pause-score {gap:10px;margin:15px 0}
 .pause-score strong {font-size:43px}
 .pause-score>span {font-size:11px}
 .pause-actions .secondary {font-size:11px;padding:12px}
 .scorebug {left:max(12px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));font-size:11px}
 .score-club {min-width:48px;padding:11px 12px}
 .score-digits {min-width:62px;padding:11px 12px}
 .score-clock {padding:11px 10px}
 .hud-actions {top:max(78px,calc(env(safe-area-inset-top) + 66px));right:max(12px,env(safe-area-inset-right));gap:7px}
 .hud-actions .icon-button {width:44px;height:44px}
 .broadcast-mark {display:none}
 .toast {top:134px;font-size:11px;padding:10px 15px}
 .goalkeeper-help {top:145px}
 .touch-technique {right:13px;bottom:max(153px,calc(env(safe-area-inset-bottom) + 140px));grid-template-columns:repeat(3,52px);gap:5px}
 .touch-technique button {font-size:8px}
 .with-technique .player-panel,.player-panel {bottom:177px;left:17px;width:170px}
 .left-handed .player-panel,.left-handed .with-technique .player-panel {left:auto;right:17px}
 .left-handed .radar-wrap,.left-handed .with-technique .radar-wrap {right:auto;left:15px;transform:none}
 .with-technique .radar-wrap,.radar-wrap {top:143px;bottom:auto;left:auto;right:15px;transform:none;padding:6px}
 .radar-wrap canvas {width:102px;height:64px}
 .hud.manual-goalkeeper .radar-wrap {top:78px;left:12px;right:auto;bottom:auto;padding:4px;transform:none}
 .hud.manual-goalkeeper .radar-wrap canvas {width:88px;height:55px}
 .set-piece-help {top:232px;width:calc(100vw - 32px);max-width:430px;font-size:10px}
 .match-notices {top:232px;width:min(430px,calc(100vw - 32px))}
 .match-notices.keeper-notices {top:145px}
 .using-controller .control-hint {left:16px;right:16px;bottom:13px;max-width:none;justify-content:center;gap:8px}
 .using-controller .player-panel {bottom:84px}
 .using-controller .radar-wrap {top:auto;bottom:84px;left:auto;right:15px;transform:none}
}
@media(max-width:360px) {
 .brand strong {font-size:11px}
 .brand-symbol {width:29px;height:34px;font-size:19px}
 .brand small {display:none}
 .device-chip {max-width:100px;font-size:9px;padding:8px}
 .top-right .icon-button {width:36px;height:36px}
 .topbar {padding-left:15px;padding-right:15px}
 .hub-content {padding-inline:15px}
 .hero-copy h1 {font-size:65px}
 .hub-lower {grid-template-columns:1fr}
 .mode-card {min-height:132px}
 .controller-reference {grid-template-columns:1fr;gap:8px}
 .hud-actions {gap:5px}
 .hud-actions .icon-button {width:40px;height:40px}
 .touch-technique {grid-template-columns:repeat(3,46px)}
 .player-panel,.with-technique .player-panel {width:142px;font-size:10px}
}
@media(max-height:600px) and (orientation:landscape) {
 .hub-content {grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:calc(100dvh - 68px);padding:24px;gap:24px}
 .hero-copy {max-width:670px}
 .hero-copy h1 {font-size:60px}
 .hero-copy p {max-width:none;font-size:12px}
 .hero-meta {margin-top:12px}
 .hub-lower {position:static;grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
 .mode-card.featured {grid-column:auto}
 .mode-card {min-height:140px;padding:15px}
 .mode-card h2 {font-size:25px}
 .mode-card p {font-size:10px}
 .feature-tag {display:none}
 .hub-footer {margin-top:0}
 .overlay {padding:12px}
 .dialog,.dialog.dialog-wide {max-height:calc(100dvh - 24px);padding:22px}
 .dialog h2 {font-size:34px;margin-top:7px}
 .pause-score {padding:10px 0;margin:12px 0}
 .pause-score strong {font-size:38px}
 .pause-actions {margin-top:16px}
 .hud-actions {top:18px;right:18px}
 .scorebug {top:18px;left:18px}
 .toast {top:85px}
 .radar-wrap,.with-technique .radar-wrap {top:auto;bottom:12px;left:50%;right:auto;transform:translateX(-50%)}
 .touch-technique {bottom:147px;grid-template-columns:repeat(3,52px)}
 .player-panel,.with-technique .player-panel {bottom:145px;left:22px}
 .left-handed .player-panel,.left-handed .with-technique .player-panel {left:auto;right:22px}
 .goalkeeper-help {top:92px;font-size:9px;width:min(470px,65vw)}
 .set-piece-help {top:85px;width:max-content;max-width:450px}
 .match-notices,.match-notices.keeper-notices {top:84px;width:min(470px,calc(100vw - 420px))}
 .match-notices .goalkeeper-help span {display:none}
 .match-notices .goalkeeper-help,.match-notices .toast,.match-notices .set-piece-help {padding:6px 8px;font-size:9px}
 .using-controller .player-panel {bottom:18px}
 .using-controller .radar-wrap {bottom:12px}
 .using-controller .control-hint {bottom:20px;left:auto;right:18px;max-width:260px;justify-content:flex-end}
}
@media(max-height:360px) and (orientation:landscape) {
 .touch-technique {grid-template-columns:repeat(5,44px)}
 .player-panel,.with-technique .player-panel {bottom:123px}
 .match-notices {top:78px;left:22px;transform:none;width:176px;gap:6px}
 .left-handed .match-notices {left:auto;right:22px}
 .match-notices.keeper-notices {top:78px;left:50%;right:auto;transform:translateX(-50%);width:calc(100vw - 420px)}
}
@media(prefers-reduced-motion:reduce) {.device-chip,.pad-buttons span {transition:none}}

/* Watching keeps camera/pause available while removing human-play controls. */
.watch-setup{display:flex;gap:24px;align-items:center;margin:20px 0;padding:20px;border:1px solid #d6ff6833;background:#0e241de6}.watch-setup[hidden],.watch-controls[hidden]{display:none}.watch-setup label{display:grid;gap:8px;min-width:160px}.watch-controls{position:absolute;left:24px;bottom:26px;display:flex;gap:18px;align-items:center;padding:14px 18px;border:1px solid #d6ff6866;border-radius:8px;background:#0b211bef;font-size:12px;letter-spacing:.08em}.watch-controls select{padding:6px 10px;background:#183c30;color:#eaf5ee;border:1px solid #d6ff6855}.is-autopilot .player-panel,.is-autopilot .touch-controls,.is-autopilot .touch-defence,.is-autopilot .control-hint,.is-autopilot .goalkeeper-help,.is-autopilot [data-action="keeper"]{display:none!important}.hud-actions [data-action="autopilot"][aria-pressed="true"]{color:#10271d;background:var(--lime)}@media(max-width:600px){.watch-setup{flex-direction:column;gap:10px;align-items:stretch}.watch-controls{left:12px;bottom:16px;padding:10px;font-size:10px;gap:12px}}