/* FUTPIXEL TV: the match chrome as a sports-broadcast graphics package. The pitch is the picture;
   the scorebug, the event caption (#matchCommentary), the channel bug, the control deck and the ticker
   are docked to its edges and follow its width, so nothing covers play, the canvas minimap, the replay
   bars or the ball-edge cue. Charcoal glass, broadcast red, gold for goals; condensed local fonts only.
   .game-shell is a size container: --canvas-w repeats the canvas sizing game.js writes (100cqw by the
   free height times the camera ratio). Grid rows, breakpoints, safe-area padding and touch target sizes
   are checked by tests/control-layout-browser.cjs, tests/platform-browser.cjs and tests/match-gui-css.test.cjs. */
:root{color-scheme:dark;--tv-font:"Bahnschrift SemiCondensed","Bahnschrift","DIN Condensed","Avenir Next Condensed","Roboto Condensed","sans-serif-condensed","Arial Narrow",system-ui,sans-serif;--ui-font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;--bg:#07080b;--panel:#15181f;--panel2:#1d212a;--ink:#f5f6f8;--muted:#aab0bc;--line:#343a46;--red:#e5173a;--red-hi:#ff3f59;--red-deep:#8f0b22;--gold:#ffc42e;--blue:#6cc1ff;--orange:#ffa262;--blue-kit:var(--blue);--orange-kit:var(--orange);--blue-kit-2:#fff;--orange-kit-2:#fff;--accent:#ffc42e;--focus:#ffd65c;--edge:#ffffff1f;--edge-strong:#ffffff3d;--glass:linear-gradient(180deg,#1c2029f2,#101218f5);--btn:linear-gradient(180deg,#252a35,#171a22);--btn-hover:linear-gradient(180deg,#303643,#1e222b);--primary:linear-gradient(180deg,#f22f4d,#b80f2d);--primary-hover:linear-gradient(180deg,#ff4a64,#cc163a);--special:#ffc42e;--paper:linear-gradient(180deg,#ffffff,#e4e7ec)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--ui-font)}
body{background:repeating-linear-gradient(0deg,#ffffff04 0 1px,#0000 1px 3px),radial-gradient(ellipse 55% 45% at 0 0,#e5173a1c,#0000 70%),radial-gradient(ellipse 50% 40% at 100% 100%,#ffc42e10,#0000 70%),linear-gradient(160deg,#11131a,#08090c 55%,#050608)}

/* Buttons: charcoal glass with a light top edge; hover, active, focus-visible and disabled states. */
button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);border-radius:6px;background:var(--btn);box-shadow:inset 0 1px 0 #ffffff14,0 1px 2px #0006;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s,color .15s,filter .15s}
button:hover{border-color:#646c7d;background:var(--btn-hover)}
button:active{transform:translateY(1px);box-shadow:inset 0 2px 5px #0007}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px #ffd65c2e}
select{font:inherit;color:var(--ink)}
#restartReceiver,.club-side select,.settings-field select,.cv-assignment select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ffc42e' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px!important}

/* Shell. Rows: rail (scorebug, caption, channel bug), picture, control deck, ticker. The picture row grows up to
   the canvas height at full width and the column is centred, so the graphics stay attached to the picture. */
.game-shell{position:relative;height:100svh;min-height:420px;width:100%;max-width:1900px;margin:auto;--shell-pad:12px;padding:max(var(--shell-pad),env(safe-area-inset-top)) max(var(--shell-pad),env(safe-area-inset-right)) max(var(--shell-pad),env(safe-area-inset-bottom)) max(var(--shell-pad),env(safe-area-inset-left));--gap:8px;--rail-h:56px;--flap-h:0px;--dock-h:56px;--ticker-h:30px;--view-ratio:calc(16 / 9);--rows-fixed:calc(var(--rail-h) + var(--flap-h) + var(--dock-h) + var(--ticker-h) + 3 * var(--gap));--pitch-max:calc((min(100vw,1900px) - max(var(--shell-pad),env(safe-area-inset-left)) - max(var(--shell-pad),env(safe-area-inset-right))) / var(--view-ratio));--canvas-w:min(100cqw,(100cqh - var(--rows-fixed)) * var(--view-ratio));--rail-w:min(100cqw,max(var(--canvas-w),900px));--brand-w:48px;--score-w:310px;--chan-w:236px;--rail-gap:10px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--rail-h) minmax(0,var(--pitch-max)) var(--dock-h) var(--ticker-h);align-content:center;gap:var(--gap);container-type:size}
/* The camera ratio mirrors game.js: 1280, 900 (fine pointer under 900 px) or 640 (touch portrait) by 720. */
@media(any-pointer:fine) and (max-width:899px){.game-shell{--view-ratio:1.25}}
@media(any-pointer:coarse) and (orientation:portrait){.game-shell{--view-ratio:calc(8 / 9)}}

/* Rail. The topbar spans the rail; its third column is left free for the caption flap, which sits in the
   same grid cell. Both end on the picture's top edge (the negative margin eats the row gap). */
.topbar{grid-row:1;grid-column:1;justify-self:center;align-self:end;width:var(--rail-w);height:var(--rail-h);margin-bottom:calc(-1 * var(--gap));display:grid;grid-template-columns:var(--brand-w) var(--score-w) minmax(0,1fr) var(--chan-w);align-items:end;min-width:0;pointer-events:none}
.topbar>*{pointer-events:auto}

/* Channel strip at the left edge of the scorebug: the F mark opens Escolher times. */
.brand{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:0;border:0;border-radius:4px 0 0 0;background:linear-gradient(180deg,var(--red-hi),var(--red) 55%,var(--red-deep));box-shadow:inset 0 1px 0 #ffffff59,inset -1px 0 0 #0006,0 10px 24px #0009;color:#fff;line-height:1}
.brand:hover{border:0;background:linear-gradient(180deg,#ff5a70,#ee2446 55%,#a3102a);box-shadow:inset 0 1px 0 #ffffff66,inset -1px 0 0 #0006,0 10px 24px #0009}
.brand:active{transform:translateY(1px)}
.brand-mark{font:italic 900 28px/.9 var(--tv-font);letter-spacing:-1px;text-shadow:0 2px 0 #0000004d}
.brand>span:last-child{display:block;font-size:0;line-height:0}
.brand small{font-size:0}
.brand small::after{content:"TIMES";font:700 8px/1 var(--tv-font);letter-spacing:1.4px;color:#ffe3e8}

/* Scorebug: kit bars, crests, 3-letter codes, boxed scores, the clock, and a lower tier with AO VIVO and the mode line. */
.match-center{position:relative;width:var(--score-w);height:var(--rail-h);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) 18px;grid-template-areas:"score score clock" "live status status";min-width:0;background:linear-gradient(180deg,#262a33,#14171d 55%,#0c0e12);box-shadow:inset 0 1px 0 #ffffff29,0 10px 24px #0009}
.match-info{display:contents}
.scoreboard{grid-area:score;display:flex;align-items:center;justify-content:center;min-width:0;padding:0;box-shadow:inset 1px 0 0 #ffffff5c,inset -1px 0 0 #ffffff5c,inset 6px 0 0 var(--blue-kit),inset -6px 0 0 var(--orange-kit),inset 7px 0 0 #ffffff5c,inset -7px 0 0 #ffffff5c,inset 9px 0 0 var(--blue-kit-2),inset -9px 0 0 var(--orange-kit-2)}
.score-crest{flex:none;width:26px;height:28px;margin:0 7px 0 14px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 2px 2px #000a)}
#orangeCrest{margin:0 14px 0 7px}
.team-name{flex:none;width:38px;overflow:hidden;font:700 18px/1 var(--tv-font);letter-spacing:.5px;text-transform:uppercase;color:var(--ink);white-space:nowrap;text-shadow:0 1px 2px #000}
.team-name.orange{text-align:right}
#blueScore,#orangeScore{flex:none;display:grid;place-items:center;min-width:30px;height:30px;padding:0 5px;border-radius:3px;background:var(--paper);color:#0b0d11;font:700 23px/1 var(--tv-font);font-variant-numeric:tabular-nums;box-shadow:inset 0 -2px 0 #0000002e,0 1px 3px #000a}
#blueScore{margin-left:7px}#orangeScore{margin-right:7px}
.score-separator{flex:none;width:3px;font-size:0;color:transparent}
#matchClock{grid-area:clock;display:flex;align-items:center;justify-content:center;min-width:72px;padding:0 12px;border-left:1px solid #ffffff1c;background:linear-gradient(180deg,#30353f,#1a1d24);color:#fff;font:700 20px/1 var(--tv-font);font-variant-numeric:tabular-nums;letter-spacing:.6px}
.match-center::before{content:"AO VIVO";grid-area:live;display:flex;align-items:center;padding:0 9px 0 19px;background:linear-gradient(180deg,#e5173a,#b00d2a);color:#fff;font:700 10px/1 var(--tv-font);letter-spacing:1.5px;white-space:nowrap}
.match-center::after{content:"";position:absolute;left:8px;bottom:6px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:live-dot 1.4s ease-in-out infinite}
@keyframes live-dot{50%{opacity:.25;box-shadow:none}}
.match-center #matchPhase,.match-center #modeStatus{grid-area:status;display:block;align-self:stretch;max-width:none;min-width:0;padding:0 10px;background:#08090cf0;color:#d3d7df;font:600 10px/18px var(--tv-font);letter-spacing:1.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Goal and pause relabel the live chip. */
.game-shell:has(#matchCommentary[data-kind=goal]) .match-center::before{content:"GOL";background:linear-gradient(180deg,#ffd45c,#f0a800);color:#1c1300}
.game-shell:has(#matchCommentary[data-kind=goal]) .match-center{animation:bug-goal .9s ease-in-out 3}
@keyframes bug-goal{50%{box-shadow:inset 0 1px 0 #ffffff29,0 0 0 2px var(--gold),0 0 28px #ffc42e99}}
.game-shell:has(#pauseButton[aria-pressed=true]:not(:disabled)) .match-center::before{content:"PAUSA";background:linear-gradient(180deg,#5b6170,#3b404b)}
.game-shell:has(#pauseButton[aria-pressed=true]:not(:disabled)) .match-center::after{animation:none;opacity:.6}

/* Channel bug: FUTPIXEL TV watermark and round broadcast controls (Som, Pausar, Reiniciar). */
.match-actions{grid-column:-2;align-self:stretch;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;padding-left:8px}
.match-actions::before{content:"FUTPIXEL";order:-2;font:italic 800 14px/1 var(--tv-font);letter-spacing:1.2px;color:#ffffffa6;text-shadow:0 1px 2px #000}
.match-actions::after{content:"TV";order:-1;margin:0 6px 0 -3px;padding:3px 5px 2px;border-radius:2px;background:var(--red);color:#fff;font:italic 800 11px/1 var(--tv-font);letter-spacing:1px}
.match-actions button{position:relative;display:grid;place-items:center;flex:none;width:38px;height:38px;min-width:38px;padding:0;border:1px solid #ffffff33;border-radius:50%;background:radial-gradient(circle at 50% 28%,#3d4350,#1b1e26 72%);color:#f3f4f6;font-size:0;box-shadow:inset 0 1px 0 #ffffff2e,0 4px 12px #0009}
.match-actions button:hover{border-color:#ffffff73;background:radial-gradient(circle at 50% 28%,#4a5161,#23262f 72%)}
.match-actions button::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.sound-button{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1.5 5.5h3l4-3.2v11.4l-4-3.2h-3z'/><path d='M10.7 5.4a3.6 3.6 0 0 1 0 5.2M12.6 3.4a6.4 6.4 0 0 1 0 9.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/></svg>")}
.sound-button[aria-pressed=true]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1.5 5.5h3l4-3.2v11.4l-4-3.2h-3z'/><path d='M10.6 5.8l4 4.4M14.6 5.8l-4 4.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/></svg>");color:#ff9aa8;border-color:#ff5c7299}
.pause-button{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 2.5h3.2v11H3.5zM9.3 2.5h3.2v11H9.3z'/></svg>")}
.pause-button[aria-pressed=true]{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 2.2l10 5.8-10 5.8z'/></svg>");background:var(--primary);border-color:#ff8a9c;color:#fff;box-shadow:inset 0 1px 0 #ffffff59,0 0 0 3px #e5173a47,0 4px 14px #e5173a66}
.pause-button[aria-pressed=true]:hover{background:var(--primary-hover);border-color:#ffc0ca}
/* A restart receiver on show folds the channel bug to its buttons so the caption keeps its room. */
.game-shell:has(#restartReceiver:not([hidden])){--chan-w:136px}
.game-shell:has(#restartReceiver:not([hidden])) .match-actions::before,.game-shell:has(#restartReceiver:not([hidden])) .match-actions::after{display:none}
.icon-button{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.2 8.6A5.3 5.3 0 1 1 11.6 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/><path d='M14 1.4v4.4H9.6z'/></svg>")}

/* Picture. The canvas keeps its camera aspect (game.js writes width and aspect-ratio) and sits on the top edge. */
.pitch-wrap{grid-row:2;position:relative;min-width:0;min-height:0;display:grid;place-items:start center;overflow:hidden;container-type:size}
canvas{display:block;width:min(100cqw,calc(100cqh * 16 / 9));height:auto;aspect-ratio:16/9;image-rendering:pixelated;image-rendering:crisp-edges}
#gameCanvas{outline:0;touch-action:manipulation}
.pitch-wrap>#gameCanvas{box-shadow:0 0 0 1px #ffffff26,0 18px 48px #000c}
.pitch-wrap>#gameCanvas:focus-visible{box-shadow:0 0 0 2px #ffd65c99,0 18px 48px #000c}
/* display-scale.js: smooth sampling when the canvas is shown below 1:1 (nearest drops whole rows and columns). */
#gameCanvas[data-scale=down]{image-rendering:auto}
#loadStatus{position:absolute;top:50%;left:50%;translate:-50% -50%;width:min(420px,calc(100% - 32px));padding:14px 18px 14px 58px;border-radius:4px;background:linear-gradient(90deg,var(--red) 0 44px,#0f1116f2 44px);box-shadow:0 12px 30px #000b,inset 0 0 0 1px #ffffff1f;font:700 15px/1.3 var(--tv-font);letter-spacing:1px;text-transform:uppercase}#loadStatus[hidden]{display:none}
/* Pause slate over the picture (:has; without it the caption still reads PARTIDA PAUSADA). Never takes input. */
.pitch-wrap::before,.pitch-wrap::after{position:absolute;pointer-events:none}
.game-shell:has(#pauseButton[aria-pressed=true]:not(:disabled)) .pitch-wrap::before{content:"FUTPIXEL TV  ·  \25B6  CONTINUAR  ·  TECLA P";top:0;left:50%;translate:-50% 0;width:min(100cqw,100cqh * var(--view-ratio));height:min(100cqw / var(--view-ratio),100cqh);display:flex;align-items:center;justify-content:center;padding:96px 12px 0;background:radial-gradient(ellipse at center,#07080b8c,#07080bd9);backdrop-filter:blur(3px) saturate(.55);color:#e6e8ec;font:700 11px/1.5 var(--tv-font);letter-spacing:2.2px;text-align:center}
.game-shell:has(#pauseButton[aria-pressed=true]:not(:disabled)) .pitch-wrap::after{content:"PARTIDA PAUSADA";top:calc(min(100cqw / var(--view-ratio),100cqh) / 2);left:50%;translate:-50% -50%;padding:.53em .93em .47em 2.53em;border-radius:3px;background:linear-gradient(#fff,#fff) .77em 50%/.2em .73em no-repeat,linear-gradient(#fff,#fff) 1.17em 50%/.2em .73em no-repeat,linear-gradient(90deg,var(--red) 0 2em,#101217f5 2em);box-shadow:0 16px 40px #000c,inset 0 1px 0 #ffffff26,inset 0 -3px 0 var(--gold);color:#fff;font:700 clamp(15px,min(100cqw,100cqh * var(--view-ratio)) / 15,30px)/1 var(--tv-font);letter-spacing:.067em;white-space:nowrap;animation:slate-in .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes slate-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Caption flap (#matchCommentary): referee avatar box, a skewed tag in the event colour and a white info panel.
   Each kind restarts the wipe because it names its own keyframes. */
.match-commentary{grid-row:1;grid-column:1;justify-self:center;align-self:end;position:relative;width:calc(var(--rail-w) - var(--brand-w) - var(--score-w) - var(--chan-w) - 2 * var(--rail-gap));height:var(--rail-h);margin-bottom:calc(-1 * var(--gap));margin-left:calc(var(--brand-w) + var(--score-w) - var(--chan-w));display:grid;grid-template-columns:auto minmax(0,max-content) auto;grid-template-rows:100%;justify-content:start;align-items:end;min-width:0;--kind:#2b303b;--kind-ink:#fff;--wipe:lt-quiet}
.match-commentary canvas{display:block;flex:none;width:46px;height:46px;aspect-ratio:1;image-rendering:pixelated;border:2px solid #f2f3f5;border-bottom:0;background:linear-gradient(180deg,#2a2f3a,#101217);box-shadow:0 6px 16px #0009}
.match-commentary>div{display:grid;justify-items:start;min-width:0;animation:var(--wipe) .45s cubic-bezier(.2,.8,.2,1) both}
.match-commentary strong{display:block;max-width:100%;margin-bottom:-1px;padding:4px 20px 3px 10px;background:var(--kind);color:var(--kind-ink);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);font:700 13px/1.1 var(--tv-font);letter-spacing:1.1px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 1px 0 #ffffff40}
.match-commentary span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;justify-self:start;max-width:100%;min-width:0;padding:2px 12px 0;border-bottom:3px solid transparent;background:linear-gradient(var(--kind),var(--kind)) 0 0/3px 100% no-repeat,var(--paper);color:#101217;font:600 13px/1.1 var(--ui-font);white-space:normal;overflow:hidden;overflow-wrap:anywhere;box-shadow:0 6px 16px #0009}
.match-commentary[data-kind=quiet]{--kind:#2b303b;--kind-ink:#d7dbe3}
.match-commentary[data-kind=quiet] span{background:linear-gradient(#3d4350,#3d4350) 0 0/3px 100% no-repeat,#101217e6;color:#c9ced8;box-shadow:0 6px 16px #0007}
.match-commentary[data-kind=restart]{--kind:var(--red);--kind-ink:#fff;--wipe:lt-restart}
.match-commentary[data-kind=kickoff]{--kind:var(--red);--kind-ink:#fff;--wipe:lt-kickoff}
.match-commentary[data-kind=play-on]{--kind:#0f7a43;--kind-ink:#fff;--wipe:lt-play-on}
.match-commentary[data-kind=foul]{--kind:#ff7a1a;--kind-ink:#1a0d00;--wipe:lt-foul}
.match-commentary[data-kind=foul][title^="CART\C3O AMARELO"]{--kind:#ffd400;--kind-ink:#171300;--wipe:lt-yellow}
.match-commentary[data-kind=foul][title^="CART\C3O VERMELHO"]{--kind:#d90429;--kind-ink:#fff;--wipe:lt-red}
.match-commentary[title^="CART\C3O"] strong::before{content:"";display:inline-block;width:8px;height:11px;margin-right:7px;border-radius:1px;background:currentColor;vertical-align:-1px;transform:rotate(8deg)}
.match-commentary[data-kind=goal]{--kind:var(--gold);--kind-ink:#1c1300;--wipe:lt-goal}
.match-commentary[data-kind=goal] strong{font-size:15px;letter-spacing:1.6px}
.match-commentary[data-kind=paused]{--kind:#f2f3f5;--kind-ink:#0b0d11;--wipe:lt-paused}
.match-commentary[data-kind=injury]{--kind:#c2185b;--kind-ink:#fff;--wipe:lt-injury}
.match-commentary[data-kind=referee]{--kind:#3a404c;--kind-ink:#fff;--wipe:lt-referee}
@keyframes lt-quiet{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lt-restart{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lt-kickoff{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lt-play-on{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lt-foul{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lt-yellow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lt-red{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lt-goal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lt-paused{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lt-injury{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lt-referee{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
#restartReceiver{flex:none;align-self:end;width:132px;min-height:34px;margin:0 0 4px 8px;border:1px solid var(--gold);border-radius:3px;background-color:#101217;color:#fff;font:700 12px var(--tv-font);letter-spacing:.4px;padding:3px 10px;box-shadow:0 6px 16px #0009}#restartReceiver[hidden]{display:none}

/* Control deck: translucent charcoal dock under the picture. Desktop: one slim row with keycaps. */
.touch-controls{grid-row:3;justify-self:center;position:relative;width:var(--rail-w);display:flex;justify-content:center;align-items:center;gap:12px;min-width:0;padding:4px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#15181fe6,#0c0e12f2);box-shadow:inset 0 0 0 1px #ffffff12,inset 0 1px 0 #ffffff14,0 10px 26px #0008}
.touch-controls button{touch-action:none;user-select:none;-webkit-user-select:none;transition:background .12s,border-color .12s,transform .1s,box-shadow .12s,filter .12s}
.dpad{display:none;position:relative;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);width:132px;height:132px;flex:none}
.dpad::before{content:"";grid-column:1/-1;grid-row:1/-1;border-radius:50%;background:radial-gradient(circle,#0c0e12 50%,#1e222b 51%,#0a0b0f 100%);box-shadow:inset 0 0 0 1px #ffffff1a,inset 0 2px 0 #ffffff12,0 6px 16px #000a;pointer-events:none}
.dpad button{width:44px;height:44px;padding:0;font-size:14px;line-height:1;border-radius:9px;background:linear-gradient(180deg,#2c313c,#1a1d25);border-color:#ffffff2b;color:#e8eaee;box-shadow:0 3px 0 #050608,inset 0 1px 0 #ffffff1f}
.dpad [data-control=up]{grid-column:2;grid-row:1;border-radius:14px 14px 5px 5px}
.dpad [data-control=left]{grid-column:1;grid-row:2;border-radius:14px 5px 5px 14px}
.dpad [data-control=down]{grid-column:2;grid-row:3;border-radius:5px 5px 14px 14px}
.dpad [data-control=right]{grid-column:3;grid-row:2;border-radius:5px 14px 14px 5px}
.touch-actions{display:grid;grid-template-columns:repeat(10,minmax(64px,94px));gap:6px}
.touch-actions button{position:relative;overflow:hidden;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;grid-template-areas:"label label" "icon key";justify-content:center;align-content:center;align-items:center;gap:4px 5px;min-height:48px;padding:4px 3px;border-radius:5px;--btn-bg:linear-gradient(180deg,#262b36,#15181f);background-image:var(--btn-bg);background-color:#15181f;border-color:#ffffff1f;color:#f1f3f6;font:700 13px/1 var(--tv-font);letter-spacing:.6px;text-transform:uppercase;box-shadow:inset 0 1px 0 #ffffff1c,0 2px 0 #040506}
.touch-actions button:hover{--btn-bg:linear-gradient(180deg,#313744,#1b1e26);border-color:#ffffff47}
.touch-actions button::before{grid-area:icon;content:"";font:400 12px/1 "Segoe UI Symbol","Segoe UI",sans-serif;color:#c3c8d2}
.touch-actions [data-control=kick]::before{content:"\25CF"}
.touch-actions [data-control=pass]::before{content:"\2192"}
.touch-actions [data-control=cross]::before{content:"\2197\FE0E"}
.touch-actions [data-control=tackle]::before{content:"\2716\FE0E"}
.touch-actions [data-control=skill]::before{content:"\2726\FE0E"}
.touch-actions [data-control=special]::before{content:"\2605\FE0E"}
.touch-actions [data-control=push]::before{content:"\21D2"}
.touch-actions [data-control=switch]::before{content:"\21C4"}
.touch-actions [data-control=sprint]::before{content:"\00BB"}
.touch-actions [data-control=curve]::before{content:"\21B7"}
.touch-actions kbd{grid-area:key;display:inline-block;max-width:100%;padding:2px 4px 1px;border:1px solid #ffffff2e;border-bottom-width:2px;border-radius:3px;background:#0a0b0f;color:#b8bdc8;font:700 8px/1.1 var(--ui-font);letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.touch-actions span{grid-area:label;justify-self:center;max-width:100%;white-space:nowrap}
.touch-actions .kick-button{--btn-bg:var(--primary);background-color:#c4122f;border-color:#ff8a9c;color:#fff;box-shadow:inset 0 1px 0 #ffffff4d,0 2px 0 #5c0515,0 0 18px #e5173a4d}
.touch-actions .kick-button::before{color:#fff}
.touch-actions .kick-button kbd{background:#6d0a1c;border-color:#ff9aab;color:#ffe6ea}
.touch-actions .kick-button:hover{--btn-bg:var(--primary-hover);border-color:#ffc0ca}
.touch-actions .special-button{--btn-bg:linear-gradient(180deg,#2e2a1c,#17150f);background-color:#1c1a12;border-color:#ffc42e8c;color:#ffe3a1;box-shadow:inset 0 1px 0 #ffffff1c,0 2px 0 #040506}
.touch-actions .special-button::before{color:var(--gold)}
.touch-actions .special-button kbd{background:#16130a;border-color:#b98f2a;color:#ffe3a1}
.touch-actions .special-button:hover{--btn-bg:linear-gradient(180deg,#3a3421,#1d1a12);border-color:var(--gold)}
.touch-actions .special-button.special-ready{--btn-bg:linear-gradient(180deg,#ffd45c,#e39c00);color:#1c1300;border-color:#fff1c2;box-shadow:inset 0 1px 0 #ffffff80,0 2px 0 #5a3d00,0 0 18px #ffc42e80;animation:special-pulse 1.6s ease-in-out infinite}
.touch-actions .special-button.special-ready::before{color:#1c1300}
.touch-actions .special-button.special-ready kbd{background:#5a3d00;border-color:#fff1c2;color:#fff4d6}
@keyframes special-pulse{50%{box-shadow:inset 0 1px 0 #ffffff80,0 2px 0 #5a3d00,0 0 28px #ffc42ecc}}
.touch-actions .curve-button{--btn-bg:linear-gradient(180deg,#20242d,#121419);color:#dde1e8}
.touch-actions .curve-selected{border-color:var(--gold);color:#fff;box-shadow:inset 0 0 0 1px #ffc42e66,0 2px 0 #040506,0 0 14px #ffc42e40}
.touch-actions .curve-selected::before{color:var(--gold)}
.touch-controls button.pressed,.touch-controls button:active{transform:translateY(2px);box-shadow:0 0 0 #000,inset 0 2px 6px #000000a0;border-color:#fff;filter:brightness(1.18)}
.touch-controls button:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 2px 0 #040506,0 0 0 5px #ffd65c2e}
/* Cooldown: a gold ring runs down the button edge (game.js sets --cooldown-progress and data-cooldown) and the icon slot counts down. */
.touch-actions button::after{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;background:conic-gradient(var(--gold) var(--cooldown-progress,0%),#ffffff14 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none}
.touch-actions button.recharging{background-image:linear-gradient(0deg,#ffc42e24 var(--cooldown-progress,0%),#0000 0),var(--btn-bg)}
.touch-actions button.recharging::after{opacity:1}
.touch-actions button.recharging::before{content:attr(data-cooldown);font:700 10px/1 var(--tv-font);color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.2px}

/* Ticker: black strip under the deck with the red home tag, the player chip, the live hint and the tools. */
.game-footer{grid-row:4;justify-self:center;position:relative;width:var(--rail-w);display:flex;align-items:stretch;justify-content:flex-start;gap:0;min-width:0;padding:0;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#0f1116f5,#07080bf5);box-shadow:0 8px 20px #0008;color:var(--muted);font:600 12px/1 var(--tv-font);letter-spacing:.6px}
.game-footer::before{content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:2px;background:var(--red);pointer-events:none}
.player-label{flex:none;display:block;min-width:0;padding:0 12px;line-height:var(--ticker-h);background:var(--paper);color:#101217;font-weight:700;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-label::before{content:"";display:inline-block;width:9px;height:14px;margin-right:7px;vertical-align:-2px;border-radius:1px;background:linear-gradient(90deg,var(--blue-kit) 0 6px,var(--blue-kit-2) 6px);box-shadow:0 0 0 1px #0000004d}
.game-footer #actionStatus{flex:1;display:block;align-self:center;min-width:0;padding:0 14px;color:#d9dde4;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-footer #actionStatus::before{content:"\25B8";margin-right:8px;color:var(--red-hi)}
.game-footer>button,.game-footer #homeButton,.game-footer #trainingAgainButton{flex:none;min-height:26px;padding:0 12px;border:0;border-left:1px solid #ffffff17;border-radius:0;background:#0000;color:#e8eaee;box-shadow:none;font:700 12px/1 var(--tv-font);letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
.game-footer>button:hover,.game-footer #homeButton:hover,.game-footer #trainingAgainButton:hover{background:#ffffff14;border-color:#ffffff17}
.game-footer #homeButton{border-left:0;background:linear-gradient(180deg,#f02a48,#b80f2d);color:#fff}
.game-footer #homeButton:hover{background:linear-gradient(180deg,#ff4862,#cc163a)}
.game-footer #trainingAgainButton{color:var(--gold)}
.squad-open{margin-left:auto;font-weight:700}
.game-footer .settings-open{width:36px;min-width:36px;padding:0;font:400 16px/1 "Segoe UI Symbol","Segoe UI",sans-serif}
.fullscreen-toggle{display:grid;place-items:center;width:34px;min-width:34px;padding:0!important}.fullscreen-toggle[hidden]{display:none}
.fullscreen-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square}
.fullscreen-toggle[aria-pressed=true] .fullscreen-enter,.fullscreen-toggle[aria-pressed=false] .fullscreen-exit{display:none}
.controls-help{flex:none;position:relative;display:flex}
.controls-help summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;min-height:26px;padding:0 8px 0 12px;border-left:1px solid #ffffff17;color:#fff;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;transition:background .15s}
.controls-help summary:hover,.controls-help[open] summary{background:#ffffff14}
.controls-help summary::-webkit-details-marker{display:none}
.controls-help summary span{width:17px;height:17px;border-radius:50%;background:var(--gold);color:#1c1300;text-align:center;font:800 11px/17px var(--ui-font)}
.help-panel{position:absolute;z-index:4;right:0;bottom:calc(100% + 10px);width:min(420px,calc(100vw - 32px));max-height:calc(100svh - 90px);overflow:auto;overscroll-behavior:contain;padding:20px 24px;border:1px solid #ffffff24;border-top:4px solid var(--red);border-radius:4px;background:linear-gradient(170deg,#1a1d25fa,#0d0f13fb);box-shadow:0 20px 70px #000c,inset 0 1px 0 #ffffff12;line-height:1.6;color:#d3d7df;font:400 12px/1.6 var(--ui-font);letter-spacing:0;text-transform:none}
.help-panel strong{display:block;color:#fff;font:700 20px/1.15 var(--tv-font);letter-spacing:.6px;text-transform:uppercase;margin-bottom:4px}
.help-panel strong::before{content:"F";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:9px;border-radius:2px;background:var(--red);font:italic 900 15px/1 var(--tv-font);vertical-align:2px}
.help-panel p{margin:9px 0}
.help-panel b{display:inline-block;padding:0 5px;border:1px solid #ffffff33;border-bottom-width:2px;border-radius:3px;background:#0a0b0f;color:#fff;font-size:.9em;line-height:1.5;font-weight:700}
.help-panel small{display:block;color:var(--muted);margin-top:10px}
.sound-volume{display:grid;gap:8px;margin:14px 0;color:var(--ink);font-weight:700}
.audio-credit a{color:var(--gold)}

/* Range inputs (help panel volume, settings sliders). */
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:24px;margin:0;background:transparent;accent-color:var(--red);cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#0a0b0f;box-shadow:inset 0 0 0 1px #ffffff29}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;border:4px solid var(--red);box-shadow:0 0 0 3px #e5173a33,0 2px 6px #0008}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#0a0b0f;box-shadow:inset 0 0 0 1px #ffffff29}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--red)}

/* Dialogs: Configurações, Meu time and Escolher times share the broadcast frame (red top rule, channel mark, condensed titles). */
.settings-dialog,.squad-dialog,.clubs-dialog{padding:0;max-width:none;max-height:none;margin:auto;border:1px solid #ffffff24;border-top:4px solid var(--red);border-radius:6px;color:var(--ink);background:linear-gradient(170deg,#1b1e26,#111318 55%,#0b0c10);box-shadow:0 30px 100px #000c,inset 0 1px 0 #ffffff12;overflow:hidden}
.settings-dialog::backdrop,.squad-dialog::backdrop,.clubs-dialog::backdrop{background:#040507cc;backdrop-filter:blur(6px)}
.settings-header,.squad-header,.clubs-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 26px 16px;border-bottom:1px solid var(--edge);background:linear-gradient(90deg,#e5173a1f,#0000 55%)}
.settings-header h2,.squad-header h2,.clubs-header h2{margin:6px 0 6px;font:700 30px/1.05 var(--tv-font);letter-spacing:.6px;text-transform:uppercase}
.settings-header p,.squad-header p,.clubs-header p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.squad-eyebrow{display:inline-flex;align-items:center;font:700 11px/1 var(--tv-font);letter-spacing:2.2px;color:var(--gold)}
.squad-eyebrow::before{content:"F";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:9px;border-radius:2px;background:var(--red);color:#fff;font:italic 900 13px/1 var(--tv-font);letter-spacing:0}
.squad-close{width:44px;height:44px;flex:none;padding:0;border-radius:50%;font-size:24px;line-height:1;background:#0a0b0f;border-color:#ffffff33;color:#e8eaee}
.squad-close:hover{background:var(--red);border-color:#ff8a9c}
.squad-confirm{min-height:44px;min-width:148px;padding:10px 18px;border-radius:4px;background:var(--primary);border-color:#ff8a9c;color:#fff;font:700 14px/1 var(--tv-font);letter-spacing:1.2px;text-transform:uppercase;box-shadow:inset 0 1px 0 #ffffff40,0 4px 14px #e5173a4d}
.squad-confirm:hover{background:var(--primary-hover);border-color:#ffc0ca}
.squad-confirm:disabled{background:#1d2028;border-color:#343a46;color:#8a909c;box-shadow:none}

/* Escolher times. */
.clubs-dialog{width:min(820px,calc(100vw - 20px));height:min(690px,calc(100svh - 20px))}
.clubs-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.clubs-body{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px;overflow:auto;overscroll-behavior:contain}
.club-side{position:relative;min-width:0;border:1px solid #ffffff1f;border-top:3px solid var(--gold);background:linear-gradient(160deg,#20242d,#12141a);border-radius:4px;padding:18px;box-shadow:inset 0 1px 0 #ffffff0d}
.club-side::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,#0000 64%,#ffffff 64.3%);opacity:.04;pointer-events:none}
.club-side[data-club-side=orange]{border-top-color:#8a909c}
.club-side-label{position:relative;font:700 10px/1 var(--tv-font);letter-spacing:1.8px;color:var(--gold)}
.club-side[data-club-side=orange] .club-side-label{color:#c9ced8}
.club-art{position:relative;display:flex;justify-content:center;align-items:center;gap:24px;height:112px}
.club-art img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 6px 10px #0007)}
.club-art canvas{width:96px;height:96px;aspect-ratio:1/1}
.club-side h3{position:relative;font:700 22px/1.1 var(--tv-font);letter-spacing:.5px;text-transform:uppercase;margin:8px 0 18px;min-height:24px}
.club-side label{position:relative;display:block;font:700 10px/1 var(--tv-font);letter-spacing:1.4px;text-transform:uppercase;color:#b9bfca;margin:12px 0 6px}
.club-side select{position:relative;width:100%;min-height:44px;border:1px solid #ffffff2e;background-color:#0a0b0f;color:var(--ink);border-radius:4px;padding:0 12px;font-size:13px;font-family:inherit}
.club-side select:hover{border-color:#ffffff66}
.clubs-note{grid-column:1/-1;margin:0;color:#a9afbb;font-size:11px;line-height:1.6}
.clubs-footer,.squad-footer,.settings-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--edge);padding:16px 24px;background:#08090c}
.clubs-footer p,.squad-footer p,.settings-footer p{font-size:11px;color:#b9bfca;line-height:1.5;margin:0}
.clubs-footer button{flex:none}
@media(max-width:600px){.clubs-header{padding:16px}.clubs-header h2{font-size:24px}.clubs-header p{font-size:10px}.clubs-body{grid-template-columns:1fr;padding:14px;gap:14px}.club-side{padding:14px}.club-art{height:88px}.club-art img{height:65px;width:65px}.club-art canvas{width:80px;height:80px}.club-side h3{font-size:19px;margin:6px 0 12px}.clubs-footer{padding:12px;gap:10px}.clubs-footer button{min-width:120px;max-width:154px;font-size:12px}.clubs-footer p{font-size:10px}}

/* Meu time. */
.squad-dialog{width:min(1020px,calc(100vw - 24px));height:min(740px,calc(100svh - 24px))}
.squad-dialog[open]{display:grid;grid-template-areas:"header" "tabs" "body" "footer";grid-template-rows:auto auto minmax(0,1fr) auto}
.squad-header{grid-area:header}
.squad-tabs{grid-area:tabs;display:none;gap:2px;margin:10px 12px 0;padding:3px;border-radius:4px;background:#0a0b0f;box-shadow:inset 0 0 0 1px var(--edge)}
.squad-tabs button{min-height:44px;flex:1;border:0;border-radius:3px;background:transparent;box-shadow:none;font:700 14px/1 var(--tv-font);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.squad-tabs button:hover{background:#ffffff0d;color:var(--ink)}
.squad-tabs button[aria-pressed=true]{background:linear-gradient(180deg,#2c313c,#1c1f27);color:#fff;box-shadow:inset 0 -3px 0 var(--red),inset 0 1px 0 #ffffff1f}
.squad-tabs span{margin-left:8px;color:var(--gold);font-size:12px}.squad-tabs button[aria-pressed=true] span{color:var(--gold)}
.squad-body{grid-area:body;display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:18px;padding:18px 24px;overflow:auto;align-items:start;overscroll-behavior:contain}
.squad-body h3{font:700 17px/1.1 var(--tv-font);letter-spacing:.8px;text-transform:uppercase;margin:0 0 13px}.squad-body h3 small{display:block;font:400 11px/1.3 var(--ui-font);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:5px}
.squad-player-list{display:grid;gap:6px}
.squad-player{display:block;width:100%;min-width:0;padding:10px;text-align:left;border-radius:4px;background:linear-gradient(180deg,#1f232c,#15181e);border-color:#ffffff1a;box-shadow:inset 0 1px 0 #ffffff0d}
.squad-player:hover{border-color:#ffffff4d;background:linear-gradient(180deg,#262b35,#191c23)}
.squad-player.selected{background:linear-gradient(180deg,#2b2718,#1a1812);border-color:var(--gold);box-shadow:inset 4px 0 0 var(--gold),0 0 0 1px #ffc42e44,0 0 18px #ffc42e26}
.squad-player:disabled{opacity:.4;cursor:not-allowed}
.squad-player-top{display:flex;align-items:center;gap:7px;min-width:0}
.squad-number{color:#9aa0ac;min-width:16px;font:700 12px/1 var(--tv-font)}
.squad-player-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.squad-card{flex:none;width:9px;height:12px;border-radius:2px;background:#ffd400;border:1px solid #17272d}.squad-card[data-card=red]{background:#d90429}
.squad-rating{margin-left:auto;min-width:32px;padding:4px 7px;border-radius:3px;background:var(--paper);font:700 16px/1 var(--tv-font);color:#0b0d11;text-align:center}
.squad-player-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;color:#adb3be;margin-top:6px}
.squad-condition{font-weight:700;white-space:nowrap;color:#8fe3b4}.squad-player[data-condition=good] .squad-condition{color:#e9d98a}.squad-player[data-condition=bad] .squad-condition{color:#f5b27d}.squad-player[data-condition=poor] .squad-condition{color:#ff9aa0}
.squad-energy{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:9px;color:#9aa0ac}
.squad-energy-track{display:block;flex:1;height:5px;background:#0a0b0f;border-radius:2px;box-shadow:inset 0 0 0 1px #ffffff1f;overflow:hidden}.squad-energy-track>span{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#1f9d5c,#8ff0b8)}
.squad-special{display:block;margin-top:7px;font-size:9px;line-height:1.4;color:#ffe3a1}
.squad-comparison{padding:16px;border:1px solid var(--edge);border-top:3px solid var(--red);border-radius:4px;background:#0a0b0fb8;min-width:0}.squad-comparison h3{margin-bottom:17px}
.squad-compare-heads{display:grid;grid-template-columns:1fr 1fr;gap:12px}.squad-compare-person{display:flex;flex-direction:column;gap:8px;min-width:0}.squad-compare-person:nth-child(2){text-align:right}.squad-compare-person strong{font:700 19px/1.15 var(--tv-font);letter-spacing:.4px;text-transform:uppercase}.squad-compare-person small{font-size:10px;color:#adb3be;line-height:1.4}.squad-compare-power{font-size:12px;color:var(--gold)}
.squad-empty{font-size:12px;line-height:1.6;color:var(--muted);margin:24px 0 8px}
.squad-stats{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:22px}.squad-stats caption{font-size:10px;color:var(--muted);text-align:center;margin-bottom:9px}.squad-stats th{width:52%;font:600 12px/1.2 var(--tv-font);letter-spacing:.8px;text-transform:uppercase;color:#c3c8d2}.squad-stats td{width:24%;font:700 16px/1 var(--tv-font);font-variant-numeric:tabular-nums}.squad-stats td:last-child{text-align:right}.squad-stats th,.squad-stats td{padding:10px 0;border-bottom:1px solid #ffffff14}.squad-stats .better{color:var(--gold)}.squad-stats .lower{color:#ff9aa0}.squad-energy-row th,.squad-energy-row td{padding-top:16px;border-bottom:0}.squad-stats-note{font-size:10px;color:var(--muted);line-height:1.55;margin:15px 0 0}
.squad-footer{grid-area:footer;gap:16px;padding:15px 24px}.squad-footer p{margin:0 0 5px;font-size:12px;line-height:1.45;color:var(--ink)}.squad-footer small{font-size:10px;color:var(--muted)}
/* Injury status stays visible beside each player identity and comparison. */
.squad-player[data-injury=strong]{border-color:#bb6a63}.squad-injury-badge{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding:7px 8px;border:1px solid #9a6a3e;border-radius:3px;background:#35271a;color:#ffd9a0;font-size:9px;line-height:1.4;white-space:normal}.squad-injury-badge strong{font-size:10px!important;line-height:1.35}.squad-injury-badge[data-injury=strong]{border-color:#a8545a;background:#3d2226;color:#ffb8b0}.squad-compare-person .squad-injury-badge{margin-top:0}.squad-compare-person .squad-injury-badge span{font-size:9px;font-weight:400}
@media(max-width:700px){.squad-dialog{width:calc(100vw - 16px);height:calc(100svh - 16px);border-radius:6px}.squad-header{padding:16px 14px 13px}.squad-header h2{font-size:25px}.squad-header p{font-size:11px}.squad-tabs{display:flex}.squad-body{display:block;padding:14px}.squad-body[data-view=starters] #squadBenchSection,.squad-body[data-view=bench] #squadStartersSection{display:none}.squad-player-list{grid-template-columns:1fr 1fr;gap:8px}.squad-player{padding:10px 8px}.squad-player-name{font-size:13px}.squad-player-meta{display:block;line-height:1.4}.squad-condition{display:block;margin-top:2px}.squad-comparison{margin-top:18px}.squad-footer{padding:12px 14px;gap:10px}.squad-footer p{font-size:11px}.squad-confirm{min-width:112px;padding:10px;font-size:12px}.squad-energy{gap:5px;font-size:8px}}

/* Short wide windows (height under 697 px leaves a picture under 900 px wide): the channel bug folds to its buttons
   and the rails follow the picture down to 800 px; the deck type and the caption tighten to fit. */
@media(min-width:1024px) and (max-height:696px){.game-shell{--chan-w:136px;--rail-w:min(100cqw,max(var(--canvas-w),800px))}.match-actions::before,.match-actions::after{display:none}.match-commentary strong{letter-spacing:.4px}.game-shell:has(#restartReceiver:not([hidden])) #commentaryAvatar{display:none}.touch-actions button{font-size:11px;letter-spacing:.3px}}
/* Breakpoints. Under 1024 px the caption flap drops to its own row under the scorebug. */
@media(max-width:1023px){.game-shell{--rail-h:50px;--flap-h:50px;--dock-h:54px;--ticker-h:28px;--rows-fixed:calc(var(--rail-h) + var(--flap-h) + var(--dock-h) + var(--ticker-h) + 4 * var(--gap));--rail-w:min(100cqw,max(var(--canvas-w),720px));grid-template-rows:var(--rail-h) var(--flap-h) minmax(0,var(--pitch-max)) var(--dock-h) var(--ticker-h)}
.topbar{grid-template-columns:auto auto minmax(0,1fr) auto;margin-bottom:calc(4px - 2 * var(--gap))}.brand{width:44px;border-radius:4px 0 0 4px}.match-center{width:auto}.scoreboard{min-width:236px}
.match-commentary{grid-row:2;width:var(--rail-w);margin-left:0;height:var(--flap-h)}.match-commentary canvas{width:40px;height:40px}.match-commentary strong{padding:3px 18px 2px 9px;font-size:12px;line-height:1}.match-commentary span{padding:2px 11px 0;font-size:12px;line-height:1.1}
.pitch-wrap{grid-row:3}.touch-controls{grid-row:4}.game-footer{grid-row:5}
.touch-actions{grid-template-columns:repeat(10,minmax(0,94px));width:100%;justify-content:center}.touch-actions button{min-height:46px;font-size:11px;letter-spacing:.3px}.match-actions::before{font-size:13px}}
/* Narrow keyboard docks: the two long keycaps ("J · ESPECIAL", "B · EFEITO") shrink to the key itself. */
@media(any-pointer:fine) and (max-width:1023px),(any-pointer:fine) and (max-height:696px){.touch-actions .special-button kbd,.touch-actions .curve-button kbd{font-size:0}.touch-actions .special-button kbd::after{content:"J";font-size:8px}.touch-actions .curve-button kbd::after{content:"B";font-size:8px}}
@media(max-width:760px){.game-shell{--shell-pad:8px;--gap:6px;--flap-h:48px;--rail-w:100cqw}.match-actions::before,.match-actions::after{display:none}.match-actions{gap:5px}.match-actions button{width:34px;height:34px;min-width:34px}
.touch-actions{grid-template-columns:repeat(10,minmax(44px,1fr));gap:5px}.touch-actions button{min-height:46px;padding:3px 2px;font-size:10px;letter-spacing:0;text-transform:none;gap:3px 3px}.touch-actions kbd{font-size:7px;letter-spacing:.3px;padding:1px 3px}
.game-footer #actionStatus{display:none}.game-footer{font-size:11px}.player-label{padding:0 10px}.game-footer>button,.game-footer #homeButton,.game-footer #trainingAgainButton,.controls-help summary{padding:0 9px;font-size:11px}}
@media(max-width:560px){.team-name{display:none}.scoreboard{min-width:0}.match-center::before{padding:0 6px 0 17px;letter-spacing:.8px}}
/* Touch: two-row rail, the picture flush under the caption, and a gamepad deck that takes the spare height. */
@media(any-pointer:coarse){.game-shell{--shell-pad:8px;--gap:6px;--rail-h:50px;--flap-h:48px;--dock-h:144px;--ticker-h:44px;--rows-fixed:calc(var(--rail-h) + var(--flap-h) + var(--dock-h) + var(--ticker-h) + 4 * var(--gap));--rail-w:min(100cqw,max(var(--canvas-w),360px));grid-template-rows:var(--rail-h) var(--flap-h) minmax(0,var(--pitch-max)) minmax(var(--dock-h),1fr) var(--ticker-h)}
.game-shell,.touch-controls{position:relative}
.topbar{grid-template-columns:auto minmax(0,1fr) minmax(0,0) auto;margin-bottom:calc(4px - 2 * var(--gap))}.brand{width:44px;min-height:44px;border-radius:4px 0 0 4px}.brand-mark{font-size:24px}
.match-center{justify-self:start;width:auto;height:auto;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) 16px;grid-template-areas:"score score" "clock status"}.match-center::before{display:none}.match-center::after{left:7px;bottom:5px;width:5px;height:5px;background:var(--red-hi);box-shadow:0 0 5px var(--red)}
.scoreboard{justify-content:flex-start;min-width:0}.team-name{display:none}.score-crest{width:22px;height:25px;margin:0 6px 0 11px}#orangeCrest{margin:0 11px 0 6px}#blueScore,#orangeScore{min-width:27px;height:27px;font-size:20px}#blueScore{margin-left:0}#orangeScore{margin-right:0}
#matchClock{grid-area:clock;min-width:0;padding:0 7px 0 16px;border-left:0;background:#08090cf0;font-size:12px;letter-spacing:.4px}
.match-center #matchPhase,.match-center #modeStatus{padding:0 7px 0 2px;font-size:9px;line-height:16px;letter-spacing:.6px}
.match-center #modeStatus[data-compact]{display:flex;font-size:0;letter-spacing:0}.match-center #modeStatus[data-compact]::after{content:attr(data-compact);min-width:0;font-size:9px;letter-spacing:.6px;overflow:hidden;text-overflow:ellipsis}
.match-actions{gap:4px;padding-left:4px}.match-actions::before,.match-actions::after{display:none}.match-actions button{width:44px;height:44px;min-width:44px}.match-actions button::before{width:18px;height:18px}
.match-commentary{grid-row:2;width:var(--rail-w);margin-left:0;height:var(--flap-h)}.match-commentary canvas{width:42px;height:42px}.match-commentary strong{padding:3px 17px 2px 8px;font-size:11px}.match-commentary span{padding:2px 10px 0;font-size:12px;line-height:1.1}#restartReceiver{min-height:44px;width:118px;margin-bottom:2px;font-size:11px}
.pitch-wrap{grid-row:3}.touch-controls{grid-row:4;align-self:stretch;justify-content:space-between;gap:8px;padding:0 10px;border-radius:20px;background:radial-gradient(ellipse 60% 90% at 50% 120%,#e5173a1a,#0000 70%),linear-gradient(180deg,#171a21e6,#0c0e12f2)}.game-footer{grid-row:5}
.dpad{display:grid}.touch-actions{grid-template-columns:repeat(3,48px);gap:6px;width:auto}.touch-actions button{display:flex;flex-direction:column;min-width:48px;min-height:44px;height:44px;padding:0 2px;gap:2px;border-radius:14px;font-size:10px;letter-spacing:0;text-transform:none}.touch-actions button::before{font-size:14px}.touch-actions kbd{display:none}.touch-actions [data-control=sprint]{grid-column:auto;height:44px;min-height:44px}.touch-actions .kick-button{border-radius:50%}
/* The tenth action uses the vacant d-pad centre on touch, preserving pitch height (deck padding 10 + one 44 px cell). */
.touch-actions .curve-button{position:absolute;left:54px;top:calc(50% - 22px);width:44px;min-width:44px;height:44px;padding:0 1px;grid-column:auto;border-radius:50%;font-size:9px}.touch-actions .curve-button::before{display:none}.curve-button span{max-width:40px;line-height:1.1;text-align:center;white-space:normal}
.game-footer{gap:6px;border-radius:4px;font-size:10px}.game-footer>button,.game-footer #homeButton,.game-footer #trainingAgainButton{min-height:44px;min-width:44px;border-radius:0}.squad-open{padding:0 8px;font-size:10px}.game-footer #homeButton,.game-footer #trainingAgainButton{padding:0 8px;font-size:10px}.fullscreen-toggle{width:44px;min-width:44px;height:44px}.fullscreen-toggle svg{width:18px;height:18px}.game-footer .settings-open{width:44px;min-width:44px;font-size:20px}.controls-help summary{min-height:44px;padding:0 10px;border-radius:0;letter-spacing:0}.controls-help summary span{width:22px;height:22px;font-size:12px;line-height:22px}.player-label{padding:0 8px}
.squad-dialog button,.clubs-dialog button{touch-action:manipulation}
.game-shell:has(#matchCommentary[data-kind=goal]) #matchClock{background:linear-gradient(180deg,#ffd45c,#f0a800);color:#1c1300}.game-shell:has(#matchCommentary[data-kind=goal]) .match-center::after{background:#1c1300;box-shadow:none}
.game-shell:has(#pauseButton[aria-pressed=true]:not(:disabled)) .pitch-wrap::before{content:"FUTPIXEL TV  ·  TOQUE EM \25B6  PARA CONTINUAR"}}
@media(any-pointer:coarse) and (orientation:portrait) and (min-width:600px){.team-name{display:block;width:40px}.score-crest{margin:0 7px 0 13px}#orangeCrest{margin:0 13px 0 7px}#blueScore{margin-left:7px}#orangeScore{margin-right:7px}}
@media(any-pointer:coarse) and (max-width:360px){.player-label{padding:0 6px}.player-label::before{display:none}.game-footer>button,.game-footer #homeButton,.game-footer #trainingAgainButton{padding:0 6px;letter-spacing:.3px}.brand{width:44px}.brand small::after{letter-spacing:.6px}.score-crest{width:20px;height:23px;margin:0 4px 0 9px}#orangeCrest{margin:0 9px 0 4px}#blueScore,#orangeScore{min-width:25px;padding:0 3px}}
@media(any-pointer:coarse) and (orientation:portrait) and (max-height:650px){.game-shell{--shell-pad:6px;--gap:4px;--rail-h:44px;--flap-h:44px}.match-center{grid-template-rows:minmax(0,1fr) 15px}.match-center #matchPhase,.match-center #modeStatus{line-height:15px}.match-commentary canvas{width:36px;height:36px}.match-commentary strong{padding:2px 15px 1px 8px;font-size:10px}.match-commentary span{padding:1px 9px 0;border-bottom-width:2px}#restartReceiver{margin-bottom:0}}
/* Touch landscape: one full-width rail with the caption flap in the middle, d-pad and actions beside the picture.
   The picture row is the canvas height (--pitch-max: the middle column at 16:9), so rail and ticker dock on it. */
@media(any-pointer:coarse) and (orientation:landscape){.game-shell{min-height:310px;--shell-pad:6px;--gap:6px;--rail-h:48px;--rail-w:100cqw;--brand-w:44px;--score-w:300px;--chan-w:140px;--rail-gap:8px;--pitch-max:calc((min(100vw,1900px) - max(var(--shell-pad),env(safe-area-inset-left)) - max(var(--shell-pad),env(safe-area-inset-right)) - 288px - 2 * var(--gap)) * 9 / 16);grid-template-columns:132px minmax(0,1fr) 156px;grid-template-rows:var(--rail-h) minmax(0,var(--pitch-max)) var(--ticker-h)}
.topbar{grid-column:1/-1;grid-row:1;grid-template-columns:var(--brand-w) var(--score-w) minmax(0,1fr) var(--chan-w);align-self:end;margin-bottom:calc(-1 * var(--gap))}.match-center{width:var(--score-w);height:var(--rail-h);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) 15px;grid-template-areas:"score score clock" "live status status"}.match-center::before{display:flex;padding:0 7px 0 16px;font-size:9px;letter-spacing:1px}.match-center::after{left:6px;bottom:5px;background:#fff;box-shadow:0 0 5px #fff}
.team-name{display:block;width:34px;font-size:15px}.score-crest{margin:0 5px 0 11px}#orangeCrest{margin:0 11px 0 5px}#blueScore{margin-left:5px}#orangeScore{margin-right:5px}#matchClock{min-width:58px;padding:0 8px;border-left:1px solid #ffffff1c;background:linear-gradient(180deg,#30353f,#1a1d24);font-size:16px}.match-center #matchPhase,.match-center #modeStatus{padding:0 8px;font-size:9px;line-height:15px}
.match-commentary{grid-column:1/-1;grid-row:1;height:var(--rail-h);width:calc(var(--rail-w) - var(--brand-w) - var(--score-w) - var(--chan-w) - 2 * var(--rail-gap));margin-left:calc(var(--brand-w) + var(--score-w) - var(--chan-w));margin-bottom:calc(-1 * var(--gap))}.match-commentary canvas{width:36px;height:36px}.match-commentary span{display:-webkit-box;-webkit-line-clamp:2;white-space:normal;padding:2px 9px 0;line-height:1.1}.match-commentary strong{padding:3px 16px 2px 8px;font-size:11px;line-height:1}
.pitch-wrap{grid-column:2;grid-row:2}.touch-controls{display:contents}.dpad,.touch-actions{grid-row:2}.dpad{grid-column:1;align-self:end;margin-bottom:8px}.touch-actions{position:relative;grid-column:3;align-self:end;margin-bottom:8px}.game-footer{grid-column:1/-1;grid-row:3;width:100%}.help-panel{bottom:calc(100% + 6px)}.touch-actions .curve-button{left:calc(200px - min(100vw,1900px) + max(var(--shell-pad),env(safe-area-inset-left)) + max(var(--shell-pad),env(safe-area-inset-right)));top:auto;bottom:44px}}
/* Tablet landscape (3:2 and squarer): side columns would leave a small picture, so the gamepad deck goes under a 16:9 picture. */
@media(any-pointer:coarse) and (orientation:landscape) and (max-aspect-ratio:3/2){.game-shell{--rows-fixed:calc(var(--rail-h) + var(--dock-h) + var(--ticker-h) + 3 * var(--gap));--pitch-max:calc((min(100vw,1900px) - max(var(--shell-pad),env(safe-area-inset-left)) - max(var(--shell-pad),env(safe-area-inset-right))) * 9 / 16);--rail-w:min(100cqw,max(var(--canvas-w),640px));grid-template-columns:minmax(0,1fr);grid-template-rows:var(--rail-h) minmax(0,var(--pitch-max)) var(--dock-h) var(--ticker-h)}
.pitch-wrap{grid-column:1}.touch-controls{display:flex;grid-column:1;grid-row:3}.dpad,.touch-actions{position:static;grid-column:auto;grid-row:auto;align-self:center;margin-bottom:0}.touch-actions .curve-button{left:54px;top:calc(50% - 22px);bottom:auto}.game-footer{grid-column:1;grid-row:4;width:var(--rail-w)}}
@media(max-width:359px){.game-footer:has(#trainingAgainButton:not([hidden])) .fullscreen-toggle{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* The in-game Reduzir movimento setting also stills the broadcast graphics (settings-ui.js syncs the checkbox on load). */
html:has(#settingsReducedMotion:checked) .match-center,html:has(#settingsReducedMotion:checked) .match-center::after,html:has(#settingsReducedMotion:checked) .match-commentary>div,html:has(#settingsReducedMotion:checked) .pitch-wrap::after,html:has(#settingsReducedMotion:checked) .touch-actions .special-button{animation:none!important}

/* Front menu: Online marked unavailable offline, and the release update notice (pwa.js). */
.fm-mode[data-offline=true] .fm-mode-copy{opacity:.62}.fm-message.fm-update{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1380px;margin:14px auto 0;padding:7px 7px 7px 16px}.fm-update .fm-button{min-height:40px;padding:8px 16px}