/* Edge-to-edge match presentation. Menus retain their own layouts. */
.game-shell .topbar,.game-shell .touch-controls{justify-self:stretch;align-self:stretch}
.game-shell .game-footer,.game-shell .match-commentary{justify-self:start;align-self:start}
.game-shell .controls-help>summary span{color:var(--ink)}
.game-shell .game-footer #actionStatus{align-self:start;flex:none}
.game-shell .game-footer:has(#gameMusic){padding-bottom:0}
.game-shell{display:block;position:relative;width:100%;max-width:none;height:100svh;min-height:0;margin:0;padding:0;overflow:hidden;container-type:size;background:var(--bg)}
.game-shell .pitch-wrap{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;border:0;border-radius:0;overflow:hidden;container-type:size}
.game-shell .pitch-wrap>#gameCanvas{display:block;width:100%;height:100%;max-width:none;max-height:none;box-shadow:none;border:0;border-radius:0;outline:0}
.game-shell .pitch-wrap::before,.game-shell .pitch-wrap::after{display:none}
.game-shell .topbar{position:absolute;z-index:4;top:max(14px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));width:auto;height:48px;margin:0;display:grid;grid-template-columns:36px 310px minmax(0,1fr) auto;grid-template-rows:48px;align-items:stretch;gap:0;pointer-events:none}
.game-shell .brand{grid-column:1;grid-row:1;width:100%;min-height:0}
.game-shell .brand-mark{font-size:24px}
.game-shell .match-center{width:310px;height:48px;grid-template-columns:minmax(0,1fr) 58px;grid-template-rows:32px 16px;grid-template-areas:'score clock' 'status status';border-radius:0 3px 3px 0;overflow:hidden;background:#0a0b0fde;box-shadow:0 2px 10px #0005;pointer-events:none}
.game-shell .match-center::before,.game-shell .match-center::after{display:none}
.game-shell .scoreboard{justify-content:center;min-width:0;box-shadow:inset 3px 0 var(--blue-kit),inset -3px 0 var(--orange-kit)}
.game-shell .score-crest{width:20px;height:24px;margin:0 6px}
.game-shell .team-name{display:block;width:36px;font-size:15px}
.game-shell #blueScore,.game-shell #orangeScore{height:24px;min-width:24px;font-size:19px;box-shadow:none;border-radius:2px}
.game-shell #matchClock{font-size:16px;min-width:0;padding:0 8px;background:#15181fd9}
.game-shell .match-center #matchPhase,.game-shell .match-center #modeStatus{display:block;font-size:9px;line-height:16px;letter-spacing:.7px;text-align:center;padding:0 7px;background:#07080bbd}
.game-shell .match-center #modeStatus[data-compact]::after{display:none}
.game-shell .match-actions{grid-column:4;grid-row:1;display:flex;align-items:center;gap:6px;align-self:center;padding:0;pointer-events:auto}
.game-shell #soundButton,.game-shell #resetButton{display:none}
.game-shell .match-actions::before,.game-shell .match-actions::after{display:block}
.game-shell .match-actions>button,.game-shell .controls-help>summary{width:38px;height:38px;min-width:38px;min-height:38px;border-radius:50%;border:1px solid #ffffff38;background:#0a0b0fbd;box-shadow:none;color:var(--ink)}
.game-shell .match-actions>button:hover,.game-shell .controls-help>summary:hover{background:#15181feb;border-color:#ffffff9a}
.game-shell .match-actions>.settings-open{font-size:20px}
.game-shell .match-actions>.settings-open::before,.game-shell .match-actions>.fullscreen-toggle::before{display:none}
.game-shell .fullscreen-toggle svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none}
.game-shell .controls-help{position:relative;align-self:start}
.game-shell .topbar:has(.controls-help[open]){z-index:6}
.game-shell .controls-help>summary{display:grid;place-items:center;padding:0;font-size:0;list-style:none}
.game-shell .controls-help>summary span{display:block;width:auto;height:auto;border:0;margin:0;background:none;font:700 17px var(--ui-font)}
.game-shell .help-panel{position:fixed;z-index:25;top:72px;right:max(16px,env(safe-area-inset-right));bottom:auto;left:auto;width:min(500px,calc(100vw - 32px));max-height:calc(100svh - 96px);overflow:auto;box-shadow:var(--shadow-3)}
.game-shell #trainingAgainButton{width:44px;min-width:44px;padding:0;font-size:0;border-radius:50%}
.game-shell #trainingAgainButton::before{content:"↻";display:block;background:none;mask:none;-webkit-mask:none;width:auto;height:auto;font-size:24px}
.game-shell .match-commentary{position:absolute;z-index:3;top:max(76px,calc(env(safe-area-inset-top) + 62px));left:max(16px,env(safe-area-inset-left));width:min(430px,calc(100% - 170px));height:auto;min-height:0;margin:0;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto;gap:0;align-items:start;pointer-events:none}
.game-shell .match-commentary[data-kind=quiet]{visibility:hidden}
.game-shell .match-commentary canvas{width:32px;height:38px;border:1px solid #ffffff60;border-right:0;box-shadow:none;background:#0a0b0fa8}
.game-shell .match-commentary strong{padding:3px 14px 3px 8px;font-size:10px;letter-spacing:.7px;line-height:1}
.game-shell .match-commentary span{padding:4px 8px;border:0;border-left:2px solid var(--red);font-size:11px;line-height:1.2;color:var(--ink);background:#0a0b0fc7;box-shadow:none;-webkit-line-clamp:2}
.game-shell #restartReceiver{grid-column:1/-1;pointer-events:auto;max-width:100%;width:190px;min-height:38px;margin:5px 0 0;padding:4px 8px;font-size:12px}
.game-shell .game-footer{position:absolute;z-index:3;bottom:max(16px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:start;gap:0;width:min(340px,calc(100% - 32px));height:auto;min-height:0;padding:0;margin:0;border:0;background:none;box-shadow:none;pointer-events:none}
.game-shell .game-footer::before,.game-shell .game-footer>button,.game-shell .game-footer>.mode-toolbar{display:none}
.game-shell .player-label{max-width:100%;padding:8px 12px;line-height:1.1;border-left:3px solid var(--blue-kit);border-radius:2px 2px 0 0;background:#0a0b0fd1;color:var(--ink);font:600 13px/1.1 var(--tv-font);letter-spacing:.4px}
.game-shell .player-label::before{display:none}
.game-shell #actionStatus{max-width:100%;padding:5px 12px;background:#0a0b0f98;color:var(--muted);font:500 10px/1.25 var(--ui-font);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-shell #actionStatus::before{display:none}
.game-shell .touch-controls{display:none}
.game-shell .game-footer>#gameMusic{display:none}
@media(max-width:580px),(any-pointer:coarse) and (max-width:650px){
 .game-shell .topbar{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));height:100px;grid-template-columns:36px minmax(0,1fr);grid-template-rows:48px 44px;row-gap:6px}
 .game-shell .match-center{width:100%;max-width:310px;height:48px;grid-column:2;grid-row:1;justify-self:start}
 .game-shell .match-actions{grid-column:1/-1;grid-row:2;justify-self:end;align-self:center;gap:4px}
 .game-shell .match-actions>button,.game-shell .controls-help>summary{width:38px;min-width:38px;height:38px;min-height:38px}
 .game-shell .match-commentary{top:120px;left:8px;width:calc(100% - 150px);grid-template-columns:24px minmax(0,1fr)}
 .game-shell .match-commentary canvas{width:24px;height:32px}.game-shell .match-commentary strong{font-size:9px;padding:3px 10px 3px 5px}.game-shell .match-commentary span{font-size:10px;padding:3px 5px}
 .game-shell .game-footer{left:8px;bottom:8px}.game-shell .player-label{font-size:11px;padding:6px 9px}.game-shell #actionStatus{font-size:9px;padding:4px 9px}
 .game-shell .help-panel{top:116px;max-height:calc(100svh - 132px)}
}
@media(max-width:500px){.game-shell .topbar:has(#trainingAgainButton:not([hidden])) .match-actions::before,.game-shell .topbar:has(#trainingAgainButton:not([hidden])) .match-actions::after{display:none}}
/* A floating touch pad, only when the device needs it. Nothing reserves pitch space. */
@media(any-pointer:coarse){
 .game-shell .touch-controls{display:block;position:absolute;z-index:4;inset:0;width:auto;height:auto;padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;pointer-events:none}
 .game-shell .dpad{position:absolute;display:grid;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));width:132px;height:132px;margin:0;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);pointer-events:none}
 .game-shell .dpad::before{background:#0a0b0f25;box-shadow:none;border:1px solid #ffffff26}
 .game-shell .dpad button{width:44px;height:44px;min-width:44px;min-height:44px;background:#0a0b0f75;border:1px solid #ffffff70;border-radius:50%;box-shadow:none;font-size:15px;pointer-events:auto}
 .game-shell .touch-actions{position:absolute;display:grid;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));left:auto;top:auto;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:6px;width:144px;height:144px;margin:0;pointer-events:none}
 .game-shell .touch-actions button{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0 1px;grid-column:auto;border:1px solid #ffffff70;border-radius:50%;background:#0a0b0f80;box-shadow:none;font:600 9px/1 var(--ui-font);letter-spacing:0;text-transform:none;pointer-events:auto}
 .game-shell .touch-actions button::before{font-size:12px}.game-shell .touch-actions kbd{display:none}
 .game-shell .touch-actions .kick-button{background:#c81437c9;border-color:#ff8a9c}.game-shell .touch-actions .special-button{border-color:var(--gold)}
 .game-shell .touch-actions .curve-button{position:fixed;left:calc(max(12px,env(safe-area-inset-left)) + 44px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 44px);top:auto;right:auto;width:44px;height:44px;min-width:44px;min-height:44px}
 .game-shell .touch-actions .curve-button span{font-size:8px;white-space:normal}.game-shell .touch-actions .curve-button::before{display:none}
 .game-shell .touch-controls button.pressed{background:#f5f6f8b8;color:#101217}
 .game-shell .game-footer{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 154px);left:max(12px,env(safe-area-inset-left));max-width:calc(100% - 24px)}
 .game-shell #actionStatus{display:none}
 .game-shell .match-actions>button,.game-shell .controls-help>summary{width:44px;height:44px;min-width:44px;min-height:44px}
 html[data-input=gamepad] .game-shell .touch-controls{display:none}
 html[data-input=gamepad] .game-shell .game-footer{bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.game-shell .match-center{animation:none}}

@media(any-pointer:coarse){.game-shell #restartReceiver{min-height:44px}}

@media(min-width:581px) and (max-width:850px){.game-shell .match-actions::before,.game-shell .match-actions::after{display:none}}