/* ROBOTFOOTBALL — mech-league interface. Every control keeps a 64px switch/touch target. */
:root{
  --ink:#04070d;--panel:#0a1220;--panel-2:#0e1a2b;--panel-3:#14243a;
  --white:#eaf6ff;--muted:#9fb4c6;--steel:#7f98ae;--steel-dim:#3d5268;
  --line:#8fd3ff21;--line-2:#8fd3ff4a;
  --arc:#3de7ff;--arc-2:#a6f5ff;--arc-deep:#0b8fb0;--arc-glow:#3de7ff5c;
  --volt:#ffd23f;--alert:#ff5a67;--ok:#62ffa3;--focus-ink:#021219;
  --display:'Bahnschrift','DIN Alternate','Arial Narrow','Segoe UI',Arial,sans-serif;
  --mono:'Cascadia Mono','Consolas','Courier New',monospace;
  --cut:12px;
  --chamfer:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  --circuit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%233de7ff' stroke-opacity='.15' stroke-width='1.4'%3E%3Cpath d='M0 60H120l30 30h110l30-30h130'/%3E%3Cpath d='M0 200h60l30 30h110l30-30h190'/%3E%3Cpath d='M40 420v-90l30-30v-50'/%3E%3Cpath d='M300 420v-80l30-30h90'/%3E%3Cpath d='M180 0v40l30 30v50'/%3E%3Cpath d='M360 120v50l-30 30'/%3E%3C/g%3E%3Cg fill='%233de7ff' fill-opacity='.32'%3E%3Ccircle cx='150' cy='90' r='3'/%3E%3Ccircle cx='290' cy='60' r='3'/%3E%3Ccircle cx='90' cy='230' r='3'/%3E%3Ccircle cx='70' cy='300' r='3'/%3E%3Ccircle cx='330' cy='310' r='3'/%3E%3Ccircle cx='210' cy='120' r='3'/%3E%3Ccircle cx='330' cy='200' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --lime:var(--arc);--orange:var(--alert)
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--white);font-family:var(--display)}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible{outline:4px solid white;outline-offset:4px}
button:disabled{cursor:default}
button,kbd{touch-action:manipulation}
button{user-select:none;-webkit-user-select:none}
#app,#stadium,#vignette{position:absolute;inset:0}
#stadium canvas{display:block;width:100%;height:100%}
#vignette{pointer-events:none;background:linear-gradient(180deg,#02050ab0,transparent 24%,transparent 62%,#02050ad0),radial-gradient(ellipse at center,transparent 58%,#02050a8c)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Boot screen */
#loading{position:absolute;inset:0;z-index:100;background:radial-gradient(ellipse at center,#0f2236 0%,#04070d 66%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px}
#loading b{font-size:clamp(30px,5vw,66px);font-weight:700;letter-spacing:.04em}
#loading em{color:var(--arc);font-style:normal;text-shadow:0 0 24px var(--arc-glow)}
#loading span{color:var(--muted);font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.boot-visor{width:170px;height:36px;border-radius:9px;background:#061520;box-shadow:inset 0 0 0 2px #3de7ff55,0 0 40px #3de7ff22;position:relative;overflow:hidden}
.boot-visor i{position:absolute;top:13px;left:12%;width:30%;height:9px;border-radius:5px;background:var(--arc);box-shadow:0 0 18px var(--arc);animation:visorScan 1.5s ease-in-out infinite alternate}
.boot-bar{width:min(320px,70vw);height:6px;background:#0c1a28;box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden}
.boot-bar i{display:block;height:100%;width:38%;background:linear-gradient(90deg,transparent,var(--arc));animation:bootBar 1.3s linear infinite}
@keyframes visorScan{from{left:10%}to{left:60%}}
@keyframes bootBar{from{transform:translateX(-100%)}to{transform:translateX(270%)}}

/* Menus */
#overlay{position:absolute;inset:0 0 62px;display:flex;align-items:center;z-index:20;background:linear-gradient(90deg,#04070df8 0%,#04070de8 30%,#04070d80 62%,#04070d10)}
#overlay:not(.compact)::before{content:'';position:absolute;inset:0;pointer-events:none;background:var(--circuit);background-size:420px;opacity:.9;mask-image:linear-gradient(90deg,transparent 30%,#000 70%);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 70%)}
#overlay::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 3px)}
#menu-shell{position:relative;z-index:1;margin:28px 0 28px 5vw;width:min(540px,44vw);max-height:calc(100% - 40px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--arc) transparent;padding:8px 14px 12px 22px;border-left:2px solid var(--line-2)}
#menu-shell::before{content:'';position:absolute;left:-2px;top:0;width:2px;height:92px;background:var(--arc);box-shadow:0 0 14px var(--arc)}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.22em;font-weight:600;color:var(--arc);margin-bottom:16px;text-transform:uppercase}
.eyebrow::after{content:'';display:inline-block;width:8px;height:12px;margin-left:8px;vertical-align:-1px;background:var(--arc);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
h1{font-family:var(--display);font-weight:700;font-size:clamp(44px,5.4vw,86px);line-height:.88;letter-spacing:.015em;text-transform:uppercase;margin:0 0 22px;background:linear-gradient(180deg,#ffffff 0%,#d8e9f5 44%,#7d97ad 52%,#e4f2fb 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 14px #000a)}
h1 em{font-style:normal;-webkit-text-fill-color:var(--arc);color:var(--arc);text-shadow:0 0 26px var(--arc-glow)}
#menu-description{max-width:470px;font-size:18px;color:#cfdde7;line-height:1.45;margin:0 0 22px}
#menu-items{display:flex;flex-direction:column;gap:8px}
#menu-note{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted);margin-top:20px;text-transform:uppercase;line-height:1.7}

.menu-button{position:relative;display:flex;gap:14px;align-items:center;width:100%;min-height:64px;padding:14px 20px 14px 16px;text-align:left;border:0;color:var(--white);background:linear-gradient(100deg,#0f1c2fe8,#09121fe8);clip-path:var(--chamfer);box-shadow:inset 0 0 0 1px var(--line-2),inset 3px 0 0 var(--steel-dim);transition:background .12s,box-shadow .12s}
.menu-button::before{content:'';position:absolute;top:0;right:0;width:var(--cut);height:var(--cut);background:linear-gradient(225deg,transparent calc(50% - 1px),var(--line-2) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.menu-button .number{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--steel);min-width:30px;padding:3px 5px;text-align:center;box-shadow:inset 0 0 0 1px var(--line-2)}
.menu-button .button-copy{flex:1;min-width:0}
.menu-button .name{display:block;font-size:20px;font-weight:600;line-height:1.15;letter-spacing:.01em}
.menu-button .desc{display:block;color:var(--muted);font-size:14px;line-height:1.4;margin-top:4px}
/* A play's own name sits above its purpose; passes are cyan, runs amber. */
.menu-button .tag{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kind,var(--muted));margin-bottom:3px}
.menu-button[data-kind="pass"]{--kind:var(--arc)}
.menu-button[data-kind="run"]{--kind:var(--volt)}
.menu-button.focused .tag{color:inherit;opacity:.75}
.menu-button .value{font-family:var(--mono);font-size:14px;color:var(--arc);text-align:right;max-width:48%}
.menu-button:hover:not(.focused){background:linear-gradient(100deg,#16293f,#0d1a2c)}
.menu-button.focused{background:linear-gradient(100deg,var(--arc) 0%,var(--arc-2) 100%);color:var(--focus-ink);box-shadow:inset 0 0 0 2px #fff,inset 8px 0 0 #fff;animation:focusPulse 1.8s ease-in-out infinite}
.menu-button.focused::before{background:linear-gradient(225deg,transparent calc(50% - 1.5px),#fff calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.menu-button.focused .desc,.menu-button.focused .value{color:#073443}
.menu-button.focused .number{color:var(--focus-ink);box-shadow:inset 0 0 0 1px #0736}
.menu-button.focused::after{content:'▶';font-size:18px;line-height:1}
@keyframes focusPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}
.route-icon{width:55px;height:40px;flex-shrink:0}
.route-icon path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.route-icon circle{fill:currentColor}

#hero-copy{position:absolute;right:5vw;bottom:7vh;z-index:1;text-align:right}
#unit-status{display:inline-grid;grid-template-columns:auto auto;gap:5px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--arc-2);background:#040f19d9;box-shadow:inset 0 0 0 1px var(--line-2);clip-path:var(--chamfer);padding:13px 18px;margin-bottom:20px;text-align:left}
#unit-status:empty{display:none}
#unit-status b{color:var(--ok);font-weight:600;text-align:right}
#unit-status .team-dot{display:inline-block;width:9px;height:9px;margin-right:7px;background:var(--team-color,var(--arc));box-shadow:0 0 8px var(--team-color,var(--arc))}
#hero-copy strong{display:block;font-family:var(--display);font-weight:700;font-size:clamp(48px,7vw,112px);line-height:.88;letter-spacing:.01em;text-shadow:0 6px 30px #000}
#hero-copy strong em{font-style:normal;color:var(--arc);text-shadow:0 0 30px var(--arc-glow)}
#hero-copy p{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--arc-2);margin:16px 0 0}

#overlay.compact{top:146px;background:linear-gradient(90deg,#04070deb,#04070d99 40%,transparent 78%);align-items:flex-end}
#overlay.compact #menu-shell{width:min(430px,34vw);max-height:calc(100% - 20px);margin-top:0;margin-bottom:12px}
#overlay.compact h1{font-size:38px;line-height:1;letter-spacing:.02em}
#overlay.compact #menu-description{font-size:15px;margin-bottom:14px}
#overlay.compact .menu-button{padding:10px 14px;min-height:64px}
#overlay.compact .name{font-size:17px}
#overlay.compact .eyebrow{margin-bottom:10px}
#overlay.centered{background:#02060cc4;justify-content:center}
#overlay.centered #menu-shell{margin:24px;width:min(640px,94vw);background:linear-gradient(180deg,#0c1728f5,#070e19f5);border:0;box-shadow:inset 0 0 0 1px var(--line-2),inset 0 3px 0 var(--arc);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));padding:30px;max-height:calc(100% - 36px)}
#overlay.centered #menu-shell::before{left:30px;top:0;width:120px;height:3px}
#overlay.centered h1{font-size:40px;line-height:1.02}
#overlay.centered #menu-description{max-width:none}
#overlay.centered .menu-button .name{font-size:18px}
#menu-content{line-height:1.6;color:#cfdde7}
#menu-content p{margin:0 0 16px}
#menu-content strong{color:var(--arc)}
.help-step{padding:12px 0 12px 16px;border-top:1px solid var(--line);position:relative}
.help-step::before{content:'';position:absolute;left:0;top:18px;width:6px;height:6px;background:var(--arc);box-shadow:0 0 8px var(--arc)}
.help-step b{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--arc-2)}
.help-step p{margin:6px 0 0!important}
.last-play{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:9px 12px;margin:-6px 0 14px;background:#ffffff08;box-shadow:inset 3px 0 0 var(--cue,var(--arc))}
.last-play span{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--muted)}
.last-play b{font-size:16px;color:var(--cue,var(--arc))}
.last-play small{font-size:13px;color:#cfdde7}
.last-play.tone-score{--cue:var(--volt)}.last-play.tone-alert{--cue:var(--alert)}.last-play.tone-good{--cue:var(--ok)}

/* Broadcast HUD */
#hud-frame{position:absolute;inset:10px 10px 70px;pointer-events:none;z-index:5;opacity:0;transition:opacity .4s}
body.in-game #hud-frame{opacity:1}
#hud-frame i{position:absolute;width:30px;height:30px;border:2px solid #3de7ff4d}
#hud-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
#hud-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
#hud-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
#hud-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
#scoreboard{position:absolute;top:20px;left:24px;display:flex;align-items:stretch;height:70px;z-index:10;background:linear-gradient(180deg,#0f1c2e,#060b14);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -2px 0 var(--arc);clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);font-variant-numeric:tabular-nums}
.broadcast-mark{position:relative;padding:15px 16px 8px 30px;font-weight:700;font-size:23px;line-height:1.1;letter-spacing:.04em;border-right:1px solid var(--line-2);background:linear-gradient(135deg,#132840,#070e19)}
.broadcast-mark span{color:var(--arc)}
.broadcast-mark .mark-core{position:absolute;left:12px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--arc);box-shadow:0 0 10px var(--arc);animation:corePulse 2s ease-in-out infinite}
.broadcast-mark small{display:block;font-family:var(--mono);font-size:7px;letter-spacing:.2em;color:var(--muted)}
@keyframes corePulse{50%{opacity:.35}}
.team{--team:#21455a;display:flex;gap:14px;align-items:center;padding:0 16px;font-size:12px;font-weight:700;letter-spacing:.06em;color:white;background:linear-gradient(160deg,var(--team),color-mix(in srgb,var(--team) 45%,#000));text-shadow:0 1px 3px #000}
.team strong{font-family:var(--mono);font-size:34px;line-height:1;font-weight:700;min-width:54px;padding:4px 6px;text-align:center;background:#000a;box-shadow:inset 0 0 0 1px #ffffff30;text-shadow:0 0 12px #ffffffaa}
.score-meta,.down-meta{display:flex;flex-direction:column;justify-content:center;gap:6px;align-items:center;padding:0 16px;font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.score-meta b{font-weight:600}
.score-meta span{color:var(--arc);font-size:11px;letter-spacing:.1em}
.down-meta b{font-size:15px;color:var(--volt);font-weight:600}
.down-meta span{color:var(--muted)}
#situation{position:absolute;left:28px;top:112px;display:flex;flex-direction:column;gap:5px;text-shadow:0 2px 9px #000;z-index:8}
#camera-label{font-family:var(--mono);font-size:12px;color:var(--arc);letter-spacing:.22em;font-weight:600}
#camera-label::before{content:'◉ ';animation:blink 1.4s steps(1) infinite}
#phase-label{font-size:23px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
body.menu-open #situation{display:none}
#gain-readout{position:absolute;left:28px;top:172px;z-index:8;display:flex;align-items:baseline;gap:8px;padding:6px 14px 7px 12px;background:#040f19cc;box-shadow:inset 3px 0 0 var(--gain,var(--arc)),inset 0 0 0 1px var(--line);font-family:var(--mono);pointer-events:none}
#gain-readout span,#gain-readout small{font-size:12px;letter-spacing:.18em;color:var(--muted)}
#gain-readout b{font-size:26px;color:var(--gain,var(--arc));text-shadow:0 0 12px color-mix(in srgb,var(--gain,var(--arc)) 50%,transparent)}
#gain-readout.loss{--gain:var(--alert)}#gain-readout.first{--gain:var(--ok)}
.utility{position:absolute;right:24px;top:20px;z-index:25;min-height:64px;min-width:86px;border:0;background:linear-gradient(180deg,#0f1c2e,#070d17);box-shadow:inset 0 0 0 1px var(--line-2);clip-path:var(--chamfer);font-size:20px}
.utility span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em}
.utility.focused{background:var(--arc);color:var(--focus-ink);box-shadow:inset 0 0 0 3px white}

/* Play panels */
#action-panel{position:absolute;bottom:78px;left:50%;transform:translateX(-50%);z-index:12;width:min(980px,92vw);background:linear-gradient(180deg,#0c1728f0,#060d17f0);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 3px 0 var(--arc);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));padding:16px 20px}
.action-heading{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:13px}
#action-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--arc);font-weight:600}
#action-title{font-size:23px;margin:0;font-weight:700;letter-spacing:.02em}
#action-detail{font-size:14px;color:var(--muted);margin:0}
#action-items{display:flex;gap:10px}
#action-items .menu-button{flex:1;min-width:0;padding:12px;min-height:72px}
#action-items .name{font-size:18px}
#action-items .desc{font-size:12px}
#action-items .number{display:none}
#target-labels{position:absolute;inset:0;pointer-events:none;z-index:7}
.target-tag{position:absolute;transform:translate(-50%,-100%);background:#040f19e8;box-shadow:inset 0 0 0 2px #ffffff9c;padding:7px 12px;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.target-tag:after{content:'';position:absolute;top:100%;left:calc(50% - 6px);border:6px solid transparent;border-top-color:var(--tag,#ffffff9c)}
.you-tag{--tag:var(--arc);transform:translate(-50%,12px);box-shadow:inset 0 0 0 2px var(--arc),0 0 16px #3de7ff55;color:var(--focus-ink);background:var(--arc)}
.you-tag:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--arc)}
.you-tag.auto{--tag:#9fb4c6;background:#040f19e8;color:var(--arc-2);box-shadow:inset 0 0 0 2px #9fb4c6}
.you-tag.auto:after{border-bottom-color:#9fb4c6}
.ball-carrier{--tag:var(--alert);box-shadow:inset 0 0 0 2px var(--alert),0 0 18px #ff5a6755;color:#fff;background:#3a0d14e8}
.field-choice.menu-button{position:absolute;transform:translate(-50%,-100%);width:auto;min-width:96px;min-height:64px;padding:8px 14px 8px 12px;pointer-events:auto;text-align:center;justify-content:center;gap:9px;background:#040f19e3;box-shadow:inset 0 0 0 2px #cfe9ff99,0 4px 18px #000a;clip-path:none;transition:none;animation:none}
.field-choice.menu-button::before{content:'';position:static;flex:none;width:11px;height:11px;border-radius:50%;background:var(--open,var(--steel));box-shadow:0 0 9px var(--open,var(--steel))}
.field-choice[data-open="open"]{--open:var(--ok)}
.field-choice[data-open="covered"]{--open:var(--volt)}
.field-choice[data-open="tight"]{--open:var(--alert)}
.field-choice .number,.field-choice .value{display:none}
.field-choice .button-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.field-choice .name{font-family:var(--mono);font-size:19px;font-weight:700;line-height:1}
.field-choice .desc{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;margin:0;color:var(--open,var(--muted))}
.field-choice.menu-button.focused{background:var(--arc);color:var(--focus-ink);box-shadow:inset 0 0 0 3px white,0 0 0 4px #3de7ff40,0 6px 26px #000b;z-index:3}
.field-choice.menu-button.focused::before{box-shadow:0 0 0 2px #fff,0 0 10px var(--open,var(--steel))}
.field-choice.focused .desc{display:block;font-size:13px;color:#073443}
/* While the charge line grows, only the chosen receiver's tag stays bright. */
body.charging .field-choice.menu-button:not(.focused){opacity:.28}
.field-choice.menu-button.focused::after{content:'▼';position:absolute;top:100%;left:calc(50% - 8px);font-size:16px;line-height:1.1;color:var(--arc);text-shadow:0 0 8px var(--arc)}

#steer-panel{position:absolute;bottom:85px;left:4vw;right:4vw;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:13}
.steer{height:78px;min-width:176px;border:0;background:linear-gradient(180deg,#0e1b2dea,#060c16ea);box-shadow:inset 0 0 0 2px #3de7ff66;clip-path:var(--chamfer);color:var(--arc);font-size:30px;padding:0 20px;display:flex;align-items:center;gap:14px;touch-action:none}
.steer span{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em}
.steer.active{background:var(--arc);color:var(--focus-ink);box-shadow:inset 0 0 0 3px #fff}
.steer.armed{box-shadow:inset 0 0 0 3px var(--arc),inset 0 0 22px #3de7ff55}
#run-cue{text-align:center;text-shadow:0 3px 12px #000;display:flex;flex-direction:column;gap:8px}
#run-title{font-size:27px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--arc);text-shadow:0 0 18px var(--arc-glow),0 3px 12px #000}
#run-detail{font-size:16px;background:#040f19cc;padding:7px 12px}
#toast{position:absolute;top:25%;left:50%;transform:translateX(-50%);background:#040f19ea;box-shadow:inset 5px 0 0 var(--arc),inset 0 0 0 1px var(--line-2);z-index:18;padding:14px 24px;font-size:24px;font-weight:700;letter-spacing:.03em;text-align:center;max-width:80vw;pointer-events:none;opacity:0;transition:opacity .2s}
#toast.on{opacity:1}
#toast.tone-alert{box-shadow:inset 5px 0 0 var(--alert),inset 0 0 0 1px #ff5a6755}
#toast.tone-good{box-shadow:inset 5px 0 0 var(--ok),inset 0 0 0 1px #62ffa355}

#controls-hint{position:absolute;bottom:0;left:0;right:0;min-height:58px;z-index:40;background:linear-gradient(180deg,#081220,#04080f);box-shadow:inset 0 1px 0 var(--line-2);display:flex;align-items:center;gap:25px;padding:12px 4vw;font-size:13px;color:#cad7dc}
kbd{font-family:var(--mono);font-size:12px;font-weight:600;border:1px solid #5d7a90;padding:4px 7px;margin-right:6px;color:var(--white);background:#0e1a2b}
#access-mode{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--arc)}
#kick-readout.on-target{color:#62ffa3;box-shadow:inset 0 0 0 2px #62ffa3,0 0 18px #62ffa355}
#kick-readout{position:absolute;bottom:84px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:12;color:var(--volt);text-shadow:0 2px 8px #000;background:#040f19cc;box-shadow:inset 0 0 0 1px #ffd23f55;padding:8px 20px;pointer-events:none}
#kick-arrow{font-size:28px;line-height:1}
#kick-status{font-family:var(--mono);font-size:14px;letter-spacing:.16em}
#kick-controls{position:absolute;left:4vw;right:4vw;bottom:78px;display:flex;justify-content:space-between;pointer-events:none;z-index:14}
#kick-controls button{pointer-events:auto;min-height:64px;min-width:104px;background:linear-gradient(180deg,#0e1b2dea,#060c16ea);border:0;box-shadow:inset 0 0 0 1px #ffd23f75;clip-path:var(--chamfer);color:var(--volt);font-size:24px;padding:10px 16px;touch-action:none}
#kick-controls span{font-family:var(--mono);font-size:12px;font-weight:600}

/* Big result and status banner */
#ready-cue{--cue:var(--arc);position:absolute;top:22%;left:50%;transform:translateX(-50%);z-index:16;text-align:center;pointer-events:none;min-width:min(560px,86vw);padding:14px 40px 16px;background:linear-gradient(90deg,transparent,#040f19db 16%,#040f19db 84%,transparent)}
#ready-cue::before,#ready-cue::after{content:'';position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--cue),transparent)}
#ready-cue::before{top:0}#ready-cue::after{bottom:0}
#ready-label{display:block;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(30px,4.4vw,58px);line-height:1.05;color:var(--cue);text-shadow:0 0 26px color-mix(in srgb,var(--cue) 55%,transparent),0 3px 14px #000}
#ready-detail{font-size:17px;display:block;margin-top:6px;color:var(--white)}
#ready-cue.tone-score{--cue:var(--volt)}#ready-cue.tone-alert{--cue:var(--alert)}#ready-cue.tone-good{--cue:var(--ok)}
#ready-cue.pop #ready-label{animation:cuePop .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes cuePop{from{transform:scale(.6);opacity:0;letter-spacing:.3em}to{transform:none;opacity:1}}

/* Teams, season, results */
#menu-items.team-grid{display:grid;grid-template-columns:1fr 1fr}
.team-grid .menu-button{min-height:76px;padding:10px 12px 10px 18px;gap:6px;box-shadow:inset 7px 0 0 var(--team-color),inset 0 0 0 1px var(--line-2)}
.team-grid .number{display:none}
.team-grid .name{font-size:17px;letter-spacing:.02em}
.team-grid .desc{font-size:12px}
.team-grid .menu-button.focused{box-shadow:inset 9px 0 0 var(--team-color),inset 0 0 0 2px #fff}
#overlay.teams #menu-shell{width:min(580px,48vw)}
.season-record{display:flex;gap:24px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:12px 0;margin:12px 0 20px}
.season-record b{font-family:var(--mono);font-size:32px;color:var(--arc);display:block;line-height:1.1;text-shadow:0 0 12px var(--arc-glow)}
.season-record span{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--muted)}
.season-matchup{display:flex;align-items:center;gap:20px;margin:16px 0;font-size:20px;font-weight:700}
.season-matchup .team-chip{box-shadow:inset 7px 0 0 var(--team-color),inset 0 0 0 1px var(--line);padding:9px 12px 9px 18px;flex:1;background:#ffffff0b;clip-path:var(--chamfer)}
.season-matchup small{font-family:var(--mono);font-size:12px;color:var(--muted)}
.schedule-list{list-style:none;padding:0;margin:0 0 18px}
.schedule-list li{display:flex;gap:16px;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.schedule-list .schedule-score{font-family:var(--mono);color:var(--arc);font-weight:600}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 18px}
.result-stats div{box-shadow:inset 0 0 0 1px var(--line-2);padding:14px 8px;text-align:center;clip-path:var(--chamfer);background:#ffffff06}
.result-stats b{font-family:var(--mono);font-size:28px;display:block;color:var(--arc);text-shadow:0 0 12px var(--arc-glow)}
.result-stats span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.stat-table{width:100%;border-collapse:collapse;margin:0 0 18px;font-family:var(--mono);font-size:13px}
.stat-table th{font-size:10px;letter-spacing:.14em;color:var(--muted);font-weight:600;text-align:right;padding:0 6px 6px}
.stat-table th:first-child,.stat-table td:first-child{text-align:left}
.stat-table td{padding:7px 6px;border-top:1px solid var(--line);text-align:right;color:var(--white)}
.stat-table td:first-child{color:var(--muted);letter-spacing:.08em}

body.large-text #menu-shell,body.large-text #scoreboard,body.large-text #situation,body.large-text #gain-readout,body.large-text #controls-hint,body.large-text #toast,body.large-text #ready-cue,body.large-text #run-cue,body.large-text #kick-readout{zoom:1.2}
body.large-text #action-panel{zoom:1.1}
body.large-text .field-choice .name{font-size:24px}
body.large-text .field-choice .desc{font-size:15px}
body.large-text .target-tag{font-size:19px;padding:9px 14px}
@media(max-width:1050px){
  .team{padding:0 12px}
  .team span{font-size:10px}
  .score-meta,.down-meta{padding:0 12px}
  #menu-shell{width:46vw}
  #overlay.compact #menu-shell{width:38vw}
  .steer{min-width:140px}
  .steer span{font-size:10px}
}
@media(max-width:760px){
  #hero-copy{display:none}
  #menu-shell{width:min(470px,88vw);margin-left:5vw}
  #overlay{background:linear-gradient(90deg,#04070df0,#04070db0,transparent)}
  h1{font-size:58px}
  #scoreboard{top:10px;left:10px;height:62px;right:84px}
  .broadcast-mark{display:none}
  .team{flex:1;padding:0 8px;gap:7px}
  .team span{font-size:8px;max-width:48px}
  .team strong{font-size:24px;min-width:38px}
  .score-meta{padding:0 8px;font-size:8px}
  .score-meta span{font-size:7px}
  .down-meta{padding:0 8px}
  .down-meta b{font-size:11px}
  .down-meta span{font-size:8px}
  .utility{top:10px;right:10px;min-width:64px;height:64px}
  #situation{top:88px;left:15px}
  #phase-label{font-size:18px}
  #gain-readout{top:142px;left:15px}
  #gain-readout b{font-size:20px}
  #overlay.compact{top:126px;background:linear-gradient(90deg,#04070dd0,transparent)}
  #overlay.compact #menu-shell{width:min(380px,82vw);margin-left:12px;max-height:calc(100% - 12px);margin-bottom:12px}
  #overlay.compact h1{font-size:26px}
  #overlay.compact #menu-description{font-size:12px}
  #overlay.compact .menu-button{min-height:64px;padding:9px 12px}
  #overlay.compact .desc{font-size:11px}
  #overlay.compact .name{font-size:15px}
  #overlay.compact #menu-note{display:none}
  #overlay.compact .eyebrow{font-size:9px}
  #action-panel{padding:12px;bottom:72px}
  #action-items{flex-wrap:wrap}
  #action-items .menu-button{flex-basis:40%;min-height:64px}
  #action-title{font-size:18px}
  #action-kicker{display:none}
  .action-heading{gap:5px}
  #action-detail{font-size:11px}
  #controls-hint{gap:10px;padding:10px 14px;font-size:10px;min-height:58px}
  #access-mode{font-size:8px;max-width:72px;text-align:right}
  #steer-panel{left:12px;right:12px;gap:10px;bottom:74px}
  .steer{min-width:76px;padding:0 10px;height:72px}
  .steer span{font-size:9px;max-width:58px}
  #run-title{font-size:19px}
  #run-detail{font-size:11px;max-width:260px}
  #overlay.centered #menu-shell{padding:20px}
  .target-tag{font-size:10px}
  #overlay.teams #menu-shell{width:88vw}
  #overlay.teams .team-grid .name{font-size:14px}
  .field-choice.menu-button{min-width:74px;padding:5px 8px;gap:6px}
  .field-choice .name{font-size:11px}
  .field-choice.focused .desc{font-size:10px}
  .season-matchup{font-size:15px;gap:10px}
  .eyebrow{letter-spacing:.14em}
  #ready-cue{padding:10px 20px 12px}
}
@media(max-height:650px){
  #menu-shell{margin-top:12px;margin-bottom:12px}
  h1{font-size:52px}
  #menu-description{font-size:14px;margin-bottom:14px}
  .eyebrow{margin-bottom:10px}
  #menu-items{gap:6px}
  #menu-note{margin-top:12px}
  #overlay.compact{top:128px}
  #overlay.compact #menu-shell{margin-bottom:10px;max-height:calc(100% - 20px)}
  #overlay.compact h1{font-size:27px}
  #overlay.compact .eyebrow,#overlay.compact #menu-note{display:none}
  #situation{top:98px}
  #action-panel{bottom:69px;padding:10px 15px}
  #steer-panel{bottom:72px}
  #hero-copy strong{font-size:64px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body.reduced-motion *{transition:none!important;animation:none!important}

/* Keep the shared paused dash inside the native clipped menu button. */
.menu-button[data-narbe-scan-paused] { outline-offset: -6px !important; }