/* ALL-22 SLUGGER — ALL-22 PRO's retro broadcast look (pro.css): "Press Start 2P" at whole-pixel sizes, hard stepped
   frames (box-shadow steps, never border-radius), Bayer-dithered overlays (never blur), sprites at integer scales with
   image-rendering: pixelated, the same palette. */
:root {
  --ink: #0b0d1a; --ink2: #070918; --navy: #11163c; --navy2: #1b2150; --navy3: #2a3270; --panel: #0e1230;
  --gold: #ffd23e; --goldL: #fff3a0; --cyan: #5ef0ff; --red: #e8413b; --red2: #962020; --redL: #ff6a5a;
  --white: #f4f4ec; --gray: #9aa3c0; --dim: #5a6288; --green: #57e36a; --green2: #1d7a2c; --orange: #ff9b2e;
  --px: 3px; --s: 8px; --m: 16px; --l: 24px;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px);
  --fr: 0 calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink);
  --fr-gold: 0 calc(-1 * var(--px)) 0 0 var(--gold), 0 var(--px) 0 0 var(--gold), calc(-1 * var(--px)) 0 0 0 var(--gold), var(--px) 0 0 0 var(--gold),
    0 calc(-2 * var(--px)) 0 0 var(--ink), 0 calc(2 * var(--px)) 0 0 var(--ink), calc(-2 * var(--px)) 0 0 0 var(--ink), calc(2 * var(--px)) 0 0 0 var(--ink);
  --bevel: inset 0 calc(-1 * var(--px)) 0 0 var(--ink2), inset var(--px) var(--px) 0 0 var(--navy3);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05061a; color: var(--white); font-family: "Press Start 2P", monospace; font-size: var(--s); line-height: 1.25;
  -webkit-user-select: none; user-select: none; touch-action: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-font-smoothing: none; }
body { position: fixed; inset: 0; }
#game { position: fixed; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus { outline: none; }
a { color: inherit; }
.hidden { display: none !important; }
.fine { font-size: var(--s); line-height: 1.75; color: var(--dim); text-align: center; max-width: 760px; }
.boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 16px; background: #05061a; z-index: 50; }
.boot .bl { font-size: var(--l); color: var(--gold); text-shadow: 4px 4px 0 var(--red); text-align: center; }
.boot .bs { font-size: var(--s); color: var(--gray); animation: blink 1s steps(2) infinite; }
.boot .fine { position: absolute; left: 16px; right: 16px; bottom: calc(16px + var(--sb)); margin: 0 auto; }
body.ready .boot { display: none; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes nudge { 50% { transform: translateX(3px); } }
@keyframes pop { 0% { transform: translate(-50%, 0) scale(1.6); } 60% { transform: translate(-50%, 0) scale(0.92); } 100% { transform: translate(-50%, 0) scale(1); } }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--m); line-height: 1; padding: 12px 18px;
  color: var(--white); background: var(--navy2); box-shadow: var(--bevel), var(--fr); text-align: center; white-space: nowrap; pointer-events: auto; }
.btn.focus, .btn:hover { background: var(--navy3); color: var(--gold); box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--ink2), var(--fr-gold); z-index: 1; }
.btn:active { transform: translateY(2px); }
.btn.big { background: var(--red); box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--red2), inset var(--px) var(--px) 0 0 var(--redL), var(--fr); }
.btn.big.focus, .btn.big:hover { background: #ff5a4a; color: var(--white); box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--red2), inset var(--px) var(--px) 0 0 #ffa090, var(--fr-gold); }
.btn.quit { color: #ff8a80; }
.chip { font-size: var(--s); padding: 8px 10px; background: var(--navy2); color: var(--gray); box-shadow: var(--fr); }
.chip.on { background: var(--gold); color: var(--ink); }
.chip.focus, .chip:hover { box-shadow: var(--fr-gold); color: var(--white); }
.chip.on.focus, .chip.on:hover { color: var(--ink); }
.kc { display: inline-block; min-width: 1.75em; padding: 3px 4px 4px; margin: 0 2px; background: var(--white); color: var(--ink); text-align: center; line-height: 1; box-shadow: inset 0 -2px 0 0 var(--gray), var(--fr); }
.menu { display: flex; flex-direction: column; gap: 14px; width: min(340px, 86vw); align-items: stretch; }
.menu .btn.focus::before { content: ""; position: absolute; left: -22px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); animation: nudge 0.6s steps(2) infinite; }

/* ---------- screens ---------- */
.screens { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px;
  padding: calc(16px + var(--st)) calc(14px + var(--sr)) calc(16px + var(--sb)) calc(14px + var(--sl)); pointer-events: auto;
  background-image: var(--d75); background-size: 8px 8px; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; }
.screen > :first-child { margin-top: auto; } .screen > :last-child { margin-bottom: auto; }
.screen h2 { font-size: var(--l); color: var(--gold); text-shadow: 4px 4px 0 var(--ink); text-align: center; line-height: 1.1; }
.screen h3 { font-size: var(--s); color: var(--cyan); margin-bottom: 8px; }
.hint { font-size: var(--s); color: var(--gray); text-align: center; line-height: 1.6; }
.hfoot { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.pbox { background: var(--panel); box-shadow: var(--fr); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; width: min(860px, 100%); }
/* the title: the park's flyover behind a 50% dither, the logo, the menu, the fine print */
.screen.title { background-image: var(--d50); justify-content: center; gap: 18px; }
.screen.title > :first-child { margin-top: 0; } .screen.title > :last-child { margin-bottom: 0; }
.title .logo { display: block; }
.title .sub { padding: 6px 12px; font-size: var(--s); color: var(--cyan); background: var(--ink); box-shadow: var(--fr); letter-spacing: 1px; }
.title .back { position: absolute; left: calc(14px + var(--sl)); top: calc(12px + var(--st)); font-size: var(--s); color: var(--gray); text-decoration: none; padding: 6px 0; }
.title .back:hover { color: var(--white); }
/* the matchup */
.selrow { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; }
.selrow .sl { font-size: var(--s); color: var(--gray); line-height: 1.4; }
.clubs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.clubs.nine { grid-template-columns: repeat(9, 1fr); }
.btn.club.mine b { color: var(--gold); }
.mc .mb { color: var(--dim); }
.btn.club { flex-direction: column; gap: 2px; padding: 4px 2px 6px; font-size: var(--s); background: var(--navy2); }
.btn.club.on { background: var(--navy3); box-shadow: inset 0 0 0 var(--px) var(--gold), var(--fr); color: var(--gold); }
/* keyboard / controller focus: a white frame (the gold one means chosen) */
.btn.club.focus, .chip.focus { box-shadow: inset 0 0 0 var(--px) var(--white), var(--fr); color: var(--white); }
.btn.club.on.focus { box-shadow: inset 0 0 0 var(--px) var(--gold), 0 0 0 var(--px) var(--white); }
body.touchdev .btn.focus:not(:hover) { background: var(--navy2); color: var(--white); box-shadow: var(--bevel), var(--fr); }
body.touchdev .btn.big.focus:not(:hover) { background: var(--red); }
body.touchdev .btn.club.on.focus, body.touchdev .btn.club.on { background: var(--navy3); box-shadow: inset 0 0 0 var(--px) var(--gold), var(--fr); color: var(--gold); }
body.touchdev .chip.on.focus { background: var(--gold); color: var(--ink); box-shadow: var(--fr); }
body.touchdev .chip.focus:not(.on) { background: var(--navy2); color: var(--gray); box-shadow: var(--fr); }
body.touchdev .menu .btn.focus::before { display: none; }
.selbox { display: flex; flex-direction: column; gap: 10px; }
.selclubs, .selright { display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.match { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 0; }
.mc { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 200px; }
.mc .mw { color: var(--cyan); } .mc .mn { font-size: var(--s); color: var(--white); } .mc .ml, .mc .mr, .mc .mp { color: var(--gray); }

.match .vs { font-size: var(--l); color: var(--gold); text-shadow: 3px 3px 0 var(--red); }
/* how to play */
.howbox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.howbox p { font-size: var(--s); line-height: 1.9; color: var(--white); margin-bottom: 8px; }
.howbox b { color: var(--gold); font-weight: normal; }
/* line score and box score */
table { border-collapse: collapse; font-size: var(--s); }
.linescore { background: var(--panel); box-shadow: var(--fr); }
.linescore th, .linescore td { padding: 6px 8px; text-align: center; min-width: 22px; }
.linescore th { color: var(--gray); font-weight: normal; }
.linescore .tn { color: var(--white); text-align: left; } .linescore .tot { color: var(--gold); }
.boxwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(980px, 100%); }
.boxcol { background: var(--panel); box-shadow: var(--fr); padding: 10px; overflow-x: auto; }
.bx { width: 100%; margin-bottom: 10px; }
.bx th, .bx td { padding: 3px 4px; text-align: right; white-space: nowrap; }
.bx th { color: var(--gray); font-weight: normal; } .bx .pn { text-align: left; color: var(--white); }
.bx th.pn { color: var(--cyan); }

/* ---------- the HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; }
.bug { position: absolute; left: calc(10px + var(--sl)); top: calc(8px + var(--st)); display: flex; align-items: stretch; background: var(--ink); box-shadow: var(--fr); }
.bug .tm { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-left: 6px solid var(--tc, var(--gray)); background: var(--navy); }
.bug .tm .ab { font-weight: normal; color: var(--white); } .bug .tm .r { color: var(--gold); font-size: var(--m); min-width: 18px; text-align: right; }
.bug .tm.up .ab { color: var(--gold); }
.bug .inn { display: flex; align-items: center; gap: 4px; padding: 0 8px; color: var(--white); }
.bug .arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.bug .arrow.top { border-bottom: 5px solid var(--gold); } .bug .arrow.bot { border-top: 5px solid var(--gold); }
.bug .cnt { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px; background: var(--navy); }
.bug .outs { display: flex; gap: 4px; } .bug .outs i { width: 6px; height: 6px; background: var(--dim); } .bug .outs i.on { background: var(--red); }
.bug .dia { position: relative; width: 34px; }
.bug .dia i { position: absolute; width: 8px; height: 8px; background: var(--dim); transform: rotate(45deg); }
.bug .dia i.on { background: var(--gold); }
.bug .dia .b2 { left: 13px; top: 6px; } .bug .dia .b3 { left: 5px; top: 14px; } .bug .dia .b1 { left: 21px; top: 14px; }
.cards { position: absolute; left: calc(10px + var(--sl)); top: calc(44px + var(--st)); display: flex; flex-direction: column; gap: 4px; }
.pc { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; background: var(--ink); box-shadow: var(--fr); width: max-content; }
.pc .l { color: var(--cyan); } .pc .n { color: var(--white); } .pc .st { color: var(--gray); }
.hudbtns { position: absolute; right: calc(10px + var(--sr)); top: calc(8px + var(--st)); display: flex; gap: 8px; pointer-events: auto; }
.hb { width: 40px; height: 34px; background: var(--navy2); box-shadow: var(--bevel), var(--fr); position: relative; }
.hb .bars::before, .hb .bars::after { content: ""; position: absolute; top: 10px; width: 5px; height: 14px; background: var(--white); }
.hb .bars::before { left: 13px; } .hb .bars::after { left: 22px; }
.hb .note { position: absolute; left: 13px; top: 8px; width: 14px; height: 18px; }
.hb .note::before { content: ""; position: absolute; left: 0; bottom: 0; width: 8px; height: 6px; background: var(--white); }
.hb .note::after { content: ""; position: absolute; left: 6px; top: 0; width: 3px; height: 15px; background: var(--white); box-shadow: 3px 0 0 0 var(--white); }
.hb.mute.off .note::before, .hb.mute.off .note::after { background: var(--dim); box-shadow: none; }
.call { position: absolute; transform: translate(-50%, -100%); font-size: var(--m); padding: 5px 8px; background: var(--ink); box-shadow: var(--fr); animation: pop 0.25s steps(4); white-space: nowrap; }
.call.red { color: var(--redL); } .call.green { color: var(--green); } .call.gold { color: var(--gold); }
.call small { display: block; margin-top: 5px; font-size: var(--s); color: var(--gray); text-align: center; }
.note2 { position: absolute; transform: translate(-50%, 0); font-size: var(--s); padding: 4px 6px; background: var(--ink); color: var(--gray); box-shadow: var(--fr); white-space: nowrap; }
.note2.good { color: var(--cyan); }
.call.off, .note2.off { visibility: hidden; }
.toast { position: absolute; left: 50%; top: calc(56px + var(--st)); transform: translateX(-50%); padding: 8px 12px; background: var(--ink); color: var(--gold); box-shadow: var(--fr-gold); white-space: nowrap; }
/* the pitch cards and the meter (on the mound) */
.pitches { position: absolute; right: calc(10px + var(--sr)); bottom: calc(10px + var(--sb)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; pointer-events: auto; width: min(420px, 46vw); }
.pcard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px 10px; background: var(--navy2); box-shadow: var(--bevel), var(--fr); text-align: left; font-size: var(--s); touch-action: none; }
.pcard .k { color: var(--ink); background: var(--white); padding: 3px 5px; box-shadow: inset 0 -2px 0 0 var(--gray); }
.pcard .mph { color: var(--gray); } .pcard.sp .pn { color: var(--cyan); }
.pcard.on { background: var(--navy3); box-shadow: inset 0 0 0 var(--px) var(--gold), var(--fr); } .pcard.on .pn { color: var(--gold); }
/* the swing cards (at the plate): CONTACT, POWER, BUNT, the type special; a note on the one picked over them */
.scards { position: absolute; right: calc(10px + var(--sr)); bottom: calc(10px + var(--sb)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; pointer-events: auto; width: min(360px, 34vw); }
.scard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px; background: var(--navy2); box-shadow: var(--bevel), var(--fr); text-align: left; font-size: var(--s); line-height: 1.4; touch-action: none; color: var(--white); }
.scards.touchkeys .scard { grid-template-columns: 1fr auto; }
.scard .k { color: var(--ink); background: var(--white); padding: 3px 5px; box-shadow: inset 0 -2px 0 0 var(--gray); }
.scard.sp .pn { color: var(--cyan); }
.scard.on { background: var(--navy3); box-shadow: inset 0 0 0 var(--px) var(--gold), var(--fr); } .scard.on .pn { color: var(--gold); }
.scard.dim { background: var(--panel); box-shadow: var(--fr); color: var(--dim); } .scard.dim .pn { color: var(--dim); } .scard.dim .k { background: var(--dim); box-shadow: none; }
.scard.used { background: var(--panel); box-shadow: var(--fr); } .scard.used .pn { color: var(--dim); text-decoration: line-through; } .scard .tg { color: var(--dim); }
.scnote { grid-column: 1 / -1; order: -1; padding: 5px 6px; background: var(--ink); box-shadow: var(--fr); color: var(--gray); font-size: var(--s); line-height: 1.4; text-align: center; }
/* hold to step in (blinking, in the words of the device in hand); once in: what letting go does */
.stepin { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(16px + var(--sb)); padding: 9px 12px; background: var(--ink); color: var(--gold); box-shadow: var(--fr-gold); white-space: nowrap; animation: blink 0.9s steps(2) infinite; }
.stepin b { color: var(--white); font-weight: normal; }
.stepin .kc { padding: 2px 4px 3px; }
.stepin.in { animation: none; color: var(--white); box-shadow: var(--fr); }
@keyframes beckon { 50% { box-shadow: inset 0 -4px 0 0 var(--red2), inset 3px 3px 0 0 var(--redL), 0 calc(-1 * var(--px)) 0 0 var(--gold), 0 var(--px) 0 0 var(--gold), calc(-1 * var(--px)) 0 0 0 var(--gold), var(--px) 0 0 0 var(--gold); } }
.meter { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(10px + var(--sb)); width: min(380px, 44vw); background: var(--panel); box-shadow: var(--fr-gold); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.mrow { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: center; color: var(--gray); }
.mbar, .macc { position: relative; height: 18px; background: var(--ink); box-shadow: var(--fr); }
/* SPEED: green → yellow → orange → red in hard steps, dim under the fill, bright where it's filled */
.mbar { background: linear-gradient(90deg, #12381a 0 40%, #4a3e10 40% 65%, #4a2a0c 65% 85%, #4a1410 85% 100%) 0 3px / 100% 12px no-repeat, var(--ink); }
.mfill { position: absolute; left: 0; right: 0; top: 3px; bottom: 3px; clip-path: inset(0 100% 0 0); background: linear-gradient(90deg, var(--green) 0 40%, var(--gold) 40% 65%, var(--orange) 65% 85%, var(--red) 85% 100%); }
.mtick { position: absolute; left: 0; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: var(--white); box-shadow: 2px 0 0 0 var(--ink), -2px 0 0 0 var(--ink); }
.meter.p0 .mtick { visibility: hidden; }
/* ACCURACY: the lines (a green band), the center stripe that paints it, the needle */
.mlines { position: absolute; left: 41%; width: 18%; top: 3px; bottom: 3px; background: var(--green2); box-shadow: inset 2px 0 0 0 var(--green), inset -2px 0 0 0 var(--green); }
.mpaint { position: absolute; left: 47.5%; width: 5%; top: 3px; bottom: 3px; background: var(--cyan); }
.mneedle { position: absolute; left: 0; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; background: var(--white); box-shadow: 2px 0 0 0 var(--ink), -2px 0 0 0 var(--ink); }
.meter.p0 .mneedle, .meter.p1 .mneedle { visibility: hidden; }
.mstage { text-align: center; color: var(--white); font-size: var(--s); }
.meter.p0 .mstage { color: var(--gold); animation: blink 0.9s steps(2) infinite; }
.loadmsg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 14px; background: var(--ink); color: var(--gold); box-shadow: var(--fr); z-index: 9; }

/* ---------- touch ---------- */
.touch { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
/* the aim pad: just its corners and a label (it sits over the batter: no fill) */
.touch .tpad { position: absolute; left: calc(8px + var(--sl)); bottom: calc(8px + var(--sb)); width: 42%; height: 46%; pointer-events: auto; touch-action: none; opacity: 0.7;
  background: linear-gradient(var(--white), var(--white)) left top / 14px 3px no-repeat, linear-gradient(var(--white), var(--white)) left top / 3px 14px no-repeat,
    linear-gradient(var(--white), var(--white)) right top / 14px 3px no-repeat, linear-gradient(var(--white), var(--white)) right top / 3px 14px no-repeat,
    linear-gradient(var(--white), var(--white)) left bottom / 14px 3px no-repeat, linear-gradient(var(--white), var(--white)) left bottom / 3px 14px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 14px 3px no-repeat, linear-gradient(var(--white), var(--white)) right bottom / 3px 14px no-repeat; }
.touch .tpad span { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: var(--white); text-shadow: 2px 2px 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink); }
.touch .tpad.on { opacity: 1; }
/* the field's in play: nothing to press */
body.inplay .touch { display: none; }
.tbtn { position: absolute; pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center; color: var(--white);
  background: var(--red); box-shadow: inset 0 -4px 0 0 var(--red2), inset 3px 3px 0 0 var(--redL), var(--fr); }
.tbtn.down { transform: translateY(3px); box-shadow: inset 0 -1px 0 0 var(--red2), var(--fr); }
.tbtn .tl { font-size: var(--s); text-shadow: 2px 2px 0 var(--ink); }
.tswing { right: calc(14px + var(--sr)); bottom: calc(18px + var(--sb)); width: 112px; height: 112px; border-radius: 0; font-size: var(--m); }
.tswing .tl { font-size: var(--m); }
.tswing.beckon:not(.down) { animation: beckon 0.9s steps(2) infinite; }
/* touch: the cards bottom left (the other thumb), the prompt over the SWING button */
body.touchui .scards { right: auto; left: calc(8px + var(--sl)); width: min(320px, 40vw); gap: 6px; }
body.touchui .stepin { left: auto; right: calc(10px + var(--sr)); transform: none; bottom: calc(142px + var(--sb)); }
.tthrow { right: calc(14px + var(--sr)); bottom: calc(18px + var(--sb)); width: 112px; height: 92px; background: var(--green2); box-shadow: inset 0 -4px 0 0 #0e4a1a, inset 3px 3px 0 0 var(--green), var(--fr); }
.touch.pitching .tpad { width: 34%; }

body.trot .cards { visibility: hidden; } /* (the home-run trot: the score bug stays, the batter and pitcher cards step aside) */
/* ---------- the Gym Challenge (gym.js): the road and its card, the badge case, the Hall of Fame, the final's moment ---------- */
.gsub { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--s); color: var(--gray); text-align: center; line-height: 1.5; }
.gymbox { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; width: min(1060px, 100%); }
.groad { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.glabel { display: flex; justify-content: space-between; gap: 8px; font-size: var(--s); color: var(--cyan); }
.glabel .gc { color: var(--gray); }
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stages.plat { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
.btn.stage { flex-direction: column; gap: 4px; padding: 8px 2px 6px; font-size: var(--s); background: var(--navy); box-shadow: inset 0 var(--px) 0 0 var(--tc, var(--gray)), var(--fr); min-width: 0; }
.btn.stage b { font-weight: normal; color: var(--white); overflow: hidden; text-overflow: clip; max-width: 100%; }
.btn.stage .sart { display: flex; align-items: center; justify-content: center; }
.btn.stage.won b { color: var(--gold); }
.btn.stage.lock { background: var(--ink2); }
.btn.stage.lock b { color: var(--dim); }
.btn.stage.next::after { content: ""; position: absolute; right: 5px; top: 7px; width: 6px; height: 6px; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); animation: blink 0.8s steps(2) infinite; }
.btn.stage.on { background: var(--navy3); box-shadow: inset 0 var(--px) 0 0 var(--tc, var(--gray)), inset 0 0 0 var(--px) var(--gold), var(--fr); }
.btn.stage.focus { box-shadow: inset 0 var(--px) 0 0 var(--tc, var(--gray)), inset 0 0 0 var(--px) var(--white), var(--fr); }
.btn.stage.on.focus { box-shadow: inset 0 var(--px) 0 0 var(--tc, var(--gray)), inset 0 0 0 var(--px) var(--gold), 0 0 0 var(--px) var(--white); }
body.touchdev .btn.stage.focus:not(.on), body.touchdev .btn.stage.focus.lock:not(.on) { background: var(--navy); box-shadow: inset 0 var(--px) 0 0 var(--tc, var(--gray)), var(--fr); }
body.touchdev .btn.stage.lock.focus:not(.on) { background: var(--ink2); }
body.touchdev .btn.stage.on.focus { box-shadow: inset 0 var(--px) 0 0 var(--tc, var(--gray)), inset 0 0 0 var(--px) var(--gold), var(--fr); }
.spr.sil { filter: brightness(0); opacity: 0.55; }
.ginfo { display: flex; flex-direction: column; gap: 10px; min-width: 0; background: var(--ink); box-shadow: var(--fr); padding: 12px; }
.gcard { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gk { font-size: var(--s); color: var(--cyan); line-height: 1.4; }
.gl { font-size: var(--m); color: var(--gold); text-shadow: 3px 3px 0 var(--ink2); }
.gn { font-size: var(--s); }
.gchips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tchip { font-size: var(--s); padding: 4px 6px; box-shadow: var(--fr); }
.gstars { display: inline-flex; gap: 3px; }
.gstars canvas { display: block; }
.gaces { display: flex; gap: 6px; flex-wrap: wrap; }
.gace { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--s); color: var(--gray); }
.gace b { font-weight: normal; }
.gq { font-size: var(--s); line-height: 1.75; color: var(--white); }
.gs { font-size: var(--s); color: var(--cyan); line-height: 1.5; }
.gs.won { color: var(--green); } .gs.lock { color: var(--redL); }
.gs.shake { animation: shake 0.36s steps(6) 1; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.btn.big.ggo { width: 100%; font-size: var(--s); padding: 12px 8px; }
.btn.big.ggo.lock { background: var(--navy2); color: var(--dim); box-shadow: var(--bevel), var(--fr); }
/* the badge case */
.casebox { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; width: min(980px, 100%); }
.case { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-self: start; }
.cslot, .crow { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; background: var(--ink); box-shadow: var(--fr); font-size: var(--s); text-align: center; }
.cslot b, .crow b { font-weight: normal; color: var(--dim); }
.cslot.on b, .crow.on b { color: var(--gold); }
.cslot .cl, .crow .cl { color: var(--gray); }
.cslot .cr, .crow .cr { color: var(--dim); } .cslot.on .cr, .crow.on .cr { color: var(--green); }
.cart { display: flex; align-items: center; justify-content: center; min-height: 32px; }
.cplat { display: flex; flex-direction: column; gap: 8px; }
.crow { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 6px 10px; text-align: left; }
.crow .cart { flex: none; min-width: 64px; }
.crow .cr { margin-left: auto; }
.tcv.dim { filter: brightness(0.3); }
.crec { grid-column: 1 / -1; font-size: var(--s); color: var(--gray); text-align: center; }
/* the Hall of Fame */
.hofbox { align-items: center; width: min(900px, 100%); }
.hhead { display: flex; align-items: center; gap: 14px; }
.htx { display: flex; flex-direction: column; gap: 6px; font-size: var(--s); }
.hk { font-size: var(--m); color: var(--gold); text-shadow: 3px 3px 0 var(--ink2); } .hn { color: var(--white); } .hd { color: var(--gray); }
.hteam { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hp { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--s); color: var(--cyan); }
.hp b { font-weight: normal; }
.hpast { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--s); color: var(--gray); }
.hpast b { color: var(--cyan); font-weight: normal; }
/* a challenge game's final: the moment */
.moment { flex-direction: row; align-items: center; gap: 18px; width: min(860px, 100%); }
.mstage { position: relative; flex: none; display: flex; align-items: center; justify-content: center; }
.mrays { position: absolute; left: 0; top: 0; }
.mprize, .mface { position: relative; animation: badgein 0.9s steps(6) both; }
@keyframes badgein { 0% { transform: scale(0.2); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.mtxt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mline { font-size: var(--m); color: var(--gold); line-height: 1.4; text-shadow: 3px 3px 0 var(--ink2); }
.moment.lost .mline { color: var(--white); }
.mquote { font-size: var(--s); line-height: 1.75; color: var(--white); }
.mcase { display: flex; gap: 6px; flex-wrap: wrap; }
.mcase .bcv.new { animation: blink 0.5s steps(2) 6; }

/* ---------- phones held sideways (short) ---------- */
@media (max-height: 500px) {
  .screen { gap: 8px; padding-top: calc(8px + var(--st)); padding-bottom: calc(8px + var(--sb)); }
  .screen h2 { font-size: var(--m); }
  .menu { gap: 8px; }
  .btn { padding: 9px 14px; font-size: var(--s); }
  .pbox { padding: 8px 10px; gap: 6px; }
  /* the matchup in two columns: the clubs left, the matchup and the options right */
  .selbox { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; width: 100%; }
  .selbox .selrow { grid-template-columns: 1fr; gap: 4px; }
  .selbox .clubs { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .selbox .clubs.nine { grid-template-columns: repeat(5, 1fr); }
  .btn.club { padding: 2px 2px 4px; }
  .mc { min-width: 0; flex: 1; } .mc .mr, .mc .mp { display: none; }
  .match { gap: 6px; padding: 0; }
  .match .vs { font-size: var(--m); }
  .selright .selrow { grid-template-columns: 64px 1fr; }
  .chip { padding: 6px 8px; }
  .howbox p { line-height: 1.6; margin-bottom: 4px; }
  .pc { padding: 3px 6px; }
  .cards { top: calc(40px + var(--st)); }
  .pitches { width: min(360px, 44vw); gap: 6px; bottom: calc(118px + var(--sb)); }
  .pcard { padding: 8px; }
  .meter { width: min(300px, 40vw); padding: 6px 8px 8px; gap: 5px; }
  .tswing { width: 96px; height: 96px; }
  .tthrow { width: 96px; height: 80px; }
  .scard { padding: 7px 8px; }
  .scnote { padding: 4px 6px; }
  body.touchui .stepin { bottom: calc(124px + var(--sb)); }
  .gymbox { gap: 10px; }
  .groad { gap: 5px; }
  .stages { gap: 5px; }
  .btn.stage { padding: 5px 2px 4px; gap: 3px; }
  .btn.stage.next::after { right: 3px; top: 5px; }
  .ginfo { padding: 8px; gap: 6px; }
  .gcard { gap: 5px; }
  .gl { font-size: var(--s); }
  .gq { line-height: 1.5; }
  .btn.big.ggo { padding: 8px; }
  .case { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
  .casebox { grid-template-columns: 1fr; gap: 8px; }
  .cslot { padding: 6px 2px 5px; gap: 3px; }
  .cplat { flex-direction: row; flex-wrap: wrap; gap: 5px; }
  .crow { flex: 1 1 120px; padding: 4px 6px; gap: 6px; }
  .crow .cart { min-width: 0; min-height: 0; }
  .crow .cl { display: none; }
  .hofbox { gap: 6px; }
  .hk { font-size: var(--s); }
  .moment { gap: 10px; }
  .mline { font-size: var(--s); }
  .mquote { line-height: 1.5; }
}
/* ---------- phones held upright ---------- */
body.portrait .clubs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
body.portrait .clubs.nine { grid-template-columns: repeat(5, 1fr); }
body.portrait .selclubs .selrow { grid-template-columns: 1fr; gap: 4px; }
body.portrait .selright .selrow { grid-template-columns: 70px 1fr; gap: 6px; }
body.portrait .btn.club { padding: 2px 2px 4px; }
body.portrait .mc .mr { display: none; }
body.portrait .selbox { gap: 8px; padding: 10px; }
body.portrait .screen.select { gap: 10px; }
body.portrait .chip { padding: 7px 8px; }
body.portrait .match { gap: 6px; } body.portrait .mc { min-width: 0; flex: 1; }
body.portrait .howbox { grid-template-columns: 1fr; }
body.portrait .boxwrap { grid-template-columns: 1fr; }
body.portrait .pitches { left: calc(8px + var(--sl)); right: calc(8px + var(--sr)); width: auto; bottom: calc(118px + var(--sb)); }
body.portrait .meter { width: auto; left: calc(8px + var(--sl)); right: calc(130px + var(--sr)); transform: none; bottom: calc(14px + var(--sb)); }
body.portrait .touch .tpad { width: 52%; height: 30%; }
body.portrait .scards { left: calc(8px + var(--sl)); right: calc(138px + var(--sr)); width: auto; gap: 6px; }
body.portrait .scard { padding: 8px; }
body.portrait .touch.pitching .tpad { display: none; }
body.portrait .gymbox { grid-template-columns: 1fr; gap: 10px; }
body.portrait .btn.stage { padding: 6px 2px 5px; }
@media (max-width: 600px) {
  /* a phone upright: the road in two rows, a badge or a face each (the card below names them) */
  body.portrait .stages.gyms { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  body.portrait .stages.plat { grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 4px; }
  body.portrait .btn.stage { padding: 7px 0 4px; }
  body.portrait .btn.stage b { display: none; }
  body.portrait .btn.stage.next::after { right: 2px; top: 5px; width: 4px; height: 4px; }
  body.portrait .screen.gym .hfoot { gap: 10px; }
  body.portrait .screen.gym .hfoot .btn { font-size: var(--s); padding: 10px 12px; }
}
body.portrait .casebox { grid-template-columns: 1fr; }
body.portrait .crow { padding: 4px 8px; }
body.portrait .moment { flex-direction: column; text-align: center; }
body.portrait .mcase { justify-content: center; }

@media (max-width: 420px) { .bug .tm { padding: 5px 5px 5px 7px; gap: 5px; } .bug .inn, .bug .cnt { padding: 0 5px; } .hb { width: 34px; height: 30px; } }