/* ALL-22 PRO — premium retro broadcast UI. Pixel rules: "Press Start 2P" at crisp sizes (a font pixel = whole device
   pixels), hard stepped frames (box-shadow steps, never border-radius), Bayer-dithered or stepped overlays (never soft
   gradients/blur/vignettes), sprites and diagrams at integer scales with image-rendering: pixelated, palette colors.
   Dynamic art (logo, buttons, icons, dither tiles) is drawn by allpro/ui-art.js and set through CSSOM. */
:root {
  --ink: #0b0d1a; --ink2: #070918; --navy: #11163c; --navy2: #1b2150; --navy3: #2a3270; --navy4: #3a4590; --panel: #0e1230;
  --gold: #ffd23e; --gold2: #c79a12; --goldL: #fff3a0; --cyan: #5ef0ff; --red: #e8413b; --red2: #962020; --redL: #ff6a5a;
  --white: #f4f4ec; --gray: #9aa3c0; --dim: #5a6288; --green: #57e36a; --green2: #1d7a2c; --mag: #ff4fd8; --orange: #ff9b2e; --blue: #3b7dff;
  --px: 3px;
  /* type ladder: multiples of 8 px at 1x (Press Start 2P's grid) */
  --s: 8px; --m: 16px; --l: 24px; --xl: 32px; --xxl: 48px;
  /* sprites (64 px art): half / 1x / 2x on the device grid */
  --sp-s: 32px; --sp: 64px; --sp-l: 128px;
  /* diagram canvases (80x56 art) */
  --dg-w: 160px; --dg-h: 112px; --rt: 80px;
  --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),
    calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--ink), var(--px) calc(-1 * var(--px)) 0 0 var(--ink), calc(-1 * var(--px)) var(--px) 0 0 var(--ink), var(--px) var(--px) 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; }
/* the page itself never scrolls or rubber-bands (a fixed body can't be dragged on iOS, so no band opens under the game),
   and every layer is the VISIBLE viewport: never 100vh, which on an iPhone is the taller bars-hidden height. render.js
   then pins the canvas to exactly its backing size (innerWidth × innerHeight), so the integer blit stays 1:1. */
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; }
#ui .screens > *, #ui .callpanel, #ui .meter, #ui .hudbtns { pointer-events: auto; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-transform: none; }
button:focus, a:focus { outline: none; } /* focus is drawn by .focus (gold pixel frame + cursor) */
a { color: inherit; }
.hidden { display: none !important; }
.ico { display: inline-block; width: 0.875em; height: 0.875em; vertical-align: -0.0625em; image-rendering: pixelated; }
.gl { display: inline-block; width: 30px; height: 22px; vertical-align: middle; image-rendering: pixelated; margin: 0 1px; }
.eac { position: relative; display: inline-block; }
.eac::before { content: ""; position: absolute; left: 0.375em; top: -0.375em; width: 0.25em; height: 0.125em; background: currentColor; box-shadow: 0.125em -0.125em 0 0 currentColor; }
.spr { width: var(--sp); height: var(--sp); image-rendering: pixelated; }
.spr.big { width: var(--sp-l); height: var(--sp-l); }
.pill { display: inline-block; margin-left: 10px; padding: 4px 6px; background: var(--gold); color: var(--ink); font-size: var(--s); box-shadow: var(--fr); }
.boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: #05061a; z-index: 50; }
.boot .bl { font-size: var(--xl); color: var(--gold); text-shadow: 4px 4px 0 var(--red); }
.boot .bs { font-size: var(--s); color: var(--gray); animation: blink 1s steps(2) infinite; }
body.ready .boot { display: none; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes nudge { 50% { transform: translateX(3px); } }
@keyframes pop { 0% { transform: scale(1.5); } 60% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes slam { 0% { transform: scale(2.4); } 50% { transform: scale(0.9); } 100% { transform: 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; }
.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[disabled] { color: var(--dim); background: #161a3a; cursor: default; }
.btn.big { font-size: var(--m); padding: 16px 26px; 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.small { font-size: var(--s); padding: 10px 14px; }
.btn.quit { color: #ff8a80; }
.menu { display: flex; flex-direction: column; gap: 14px; min-width: 300px; align-items: stretch; }
.menu.row { flex-direction: row; flex-wrap: wrap; justify-content: center; min-width: 0; }
.menu .btn.focus::before { content: ""; position: absolute; left: -26px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; animation: nudge 0.6s steps(2) infinite; }
.chip { position: relative; 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); z-index: 1; }
.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); vertical-align: middle; }

/* ---------- screens (menus over the attract flyover) ---------- */
.screens { position: absolute; inset: 0; pointer-events: none; z-index: 6; } /* full screens (pause, halftime…) sit above the play-call panel, kick meter and HUD */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: calc(16px + var(--st)) calc(16px + var(--sr)) calc(16px + var(--sb)) calc(16px + var(--sl)); pointer-events: auto;
  background-image: var(--d75); background-size: 8px 8px; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior: none; }
/* safe centering: centred when it fits, top-aligned (and scrollable) when it overflows */
.screen:not(.title) { justify-content: flex-start; }
.screen:not(.title) > :first-child, .screen:not(.title) > .confetti:first-child + * { margin-top: auto; }
.screen:not(.title) > :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; }
.screen .hint { font-size: var(--s); color: var(--gray); }
.hfoot { display: flex; align-items: center; gap: 24px; justify-content: center; flex-wrap: wrap; }

/* title: stepped dither bands (25 / 50 / 75 %) behind the menu instead of a soft vignette */
.title { justify-content: flex-start; gap: 0; background: none; padding-top: calc(3vh + var(--st)); }
.tfade { position: absolute; inset: 0; pointer-events: none; }
.tfade i { position: absolute; left: 0; right: 0; background-size: 8px 8px; }
.tfade .b1 { top: 50%; height: 7%; background-image: var(--d25); }
.tfade .b2 { top: 57%; height: 7%; background-image: var(--d50); }
.tfade .b3 { top: 64%; bottom: 0; background-image: var(--d75); }
.title .logo { position: relative; display: block; image-rendering: pixelated; }
.title .sub { position: relative; margin-top: 6px; padding: 6px 12px; font-size: var(--s); color: var(--cyan); background: var(--ink); box-shadow: var(--fr); letter-spacing: 1px; }
.title .menu { position: relative; margin-top: auto; margin-bottom: 7vh; width: 360px; }
.title .back { position: absolute; left: calc(16px + var(--sl)); bottom: calc(14px + var(--sb)); font-size: var(--s); color: var(--gray); text-decoration: none; padding: 6px 0; }
.title .back:hover { color: var(--white); }
.title .press { position: absolute; right: calc(16px + var(--sr)); bottom: calc(14px + var(--sb)); font-size: var(--s); color: var(--gold); animation: blink 1.2s steps(2) infinite; display: flex; align-items: center; gap: 4px; }
.title .ver { position: absolute; left: calc(16px + var(--sl)); right: calc(16px + var(--sr)); bottom: calc(52px + var(--sb) + var(--s)); text-align: center; font-size: var(--s); line-height: 1.75; color: var(--dim); pointer-events: none; }
/* the region switch, the title menu's last button (ui.js paintRegion): {left} REGION KANTO {right}, as in ALL-22 BOWL;
   each arrow's hit area reaches past its icon. Browsing to another region blinks its name gold. */
.title .menu .rgsel { justify-content: space-between; gap: 8px; padding-left: 10px; padding-right: 10px; }
.rgsel .rgm { display: inline-flex; align-items: baseline; gap: 10px; }
.rgsel .rgl { font-size: var(--s); color: var(--cyan); }
.rgsel .rgn { color: var(--white); }
.rgsel.focus .rgn, .rgsel:hover .rgn { color: var(--gold); }
.rgsel.go .rgn { color: var(--gold); animation: blink 1s steps(2) infinite; }
.rgsel .rga { display: inline-flex; align-items: center; padding: 10px 6px; margin: -10px -6px; }
.rgsel .rga .gl { width: calc(var(--s) * 1.875); height: calc(var(--s) * 1.375); margin: -4px 0; } /* the pad's arrows at the label's size (1× art) */
/* laptops (501-799 px tall): five menu buttons (with the region switch) under a 3x logo, so the menu tightens a little */
@media (min-height: 501px) and (max-height: 799px) {
  .title .menu { gap: 10px; }
  .title .menu .btn { padding-top: 9px; padding-bottom: 9px; }
  .title .menu .btn.big { padding-top: 12px; padding-bottom: 12px; }
}
/* the legal line is 2 rows (3 on narrow screens): keep the menu above it */
.title .menu { margin-bottom: max(7vh, calc(64px + var(--sb) + var(--s) * 6.5)); }
.title .back, .title .press { bottom: calc(40px + var(--sb)); }
/* broadcast crawl: whole-pixel steps (2 CSS px per step), seamless because the track holds the items twice */
.crawl { position: absolute; left: 0; right: 0; bottom: 0; height: calc(26px + var(--sb)); padding-bottom: var(--sb); display: flex; align-items: stretch; background: var(--ink); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--gold); font-size: var(--s); pointer-events: none; }
.crawl .live { display: flex; align-items: center; gap: 6px; padding: 0 12px 0 calc(12px + var(--sl)); background: var(--red); color: var(--white); flex-shrink: 0; }
.crawl .live .dot { width: 6px; height: 6px; background: var(--white); animation: blink 0.8s steps(2) infinite; }
.cwin { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ctrack { display: flex; white-space: nowrap; animation: crawl 64s steps(1280) infinite; }
.citem { padding: 0 28px; color: var(--white); border-right: 2px solid var(--navy3); }
.citem b { font-weight: normal; color: var(--gold); margin-right: 8px; }
@keyframes crawl { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* the fine print rides the crawl only where the title has no room for its own line (short phones, below) */
.citem.legal { display: none; color: var(--gray); }

/* team select */
.cards { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.card { width: 300px; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 14px 14px 16px; white-space: normal; }
.card .ct { font-size: var(--m); color: var(--gold); }
.card.focus .ct, .card:hover .ct { color: var(--white); }
.card .cs { font-size: var(--s); color: var(--gray); line-height: 1.5; }
.card .cstar { font-size: var(--s); color: var(--cyan); line-height: 1.5; }
.ovr { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--s); color: var(--gray); }
.ovr b { font-size: var(--l); color: var(--white); text-shadow: 3px 3px 0 var(--ink); font-weight: normal; }
.ovr.q b { color: var(--gold); }
.ovr.big b { font-size: var(--xxl); color: var(--gold); }
.mini { position: relative; width: 100%; height: 176px; background: #1f6a34; box-shadow: var(--fr);
  background-image: repeating-linear-gradient(0deg, #1f6a34 0 11px, #24783b 11px 22px); overflow: hidden; }
.mini .los { position: absolute; left: 0; right: 0; top: 54%; height: 2px; background: #6aa8ff; }
.mini .mf { position: absolute; width: var(--sp-s); height: var(--sp-s); margin: calc(var(--sp-s) / -2) 0 0 calc(var(--sp-s) / -2); }
.mini.big { height: 340px; width: 600px; }
.mini.big .mf { width: var(--sp); height: var(--sp); margin: calc(var(--sp) / -2) 0 0 calc(var(--sp) / -2); }
.fan { position: relative; display: block; width: 100%; height: 176px; }
.fan i { position: absolute; top: 18px; left: 50%; width: 80px; height: 112px; margin-left: -40px; background-size: 100% 100%; image-rendering: pixelated; box-shadow: var(--fr); }
.fan i:nth-child(1) { transform: translateX(-62px) translateY(10px); }
.fan i:nth-child(3) { transform: translateX(62px) translateY(10px); }
.card.focus .fan i:nth-child(1), .card:hover .fan i:nth-child(1) { transform: translateX(-70px) translateY(4px); }
.card.focus .fan i:nth-child(3), .card:hover .fan i:nth-child(3) { transform: translateX(70px) translateY(4px); }
.card.focus .fan i:nth-child(2), .card:hover .fan i:nth-child(2) { transform: translateY(-6px); }

/* opponents */
.opgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; width: min(1060px, 100%); padding: 8px; }
.op { display: grid; grid-template-columns: var(--sp) 1fr; grid-template-rows: auto auto auto; gap: 6px 10px; align-items: center; text-align: left; justify-content: stretch;
  padding: 10px 12px 10px 18px; white-space: normal; }
.op .sw { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); box-shadow: inset -3px 0 0 0 var(--c2); }
.op .ace { grid-row: span 3; margin: -6px 0; }
.op .on { font-size: var(--s); color: var(--white); line-height: 1.4; }
.op.focus .on, .op:hover .on { color: var(--gold); }
.op .ol { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--s); color: var(--gray); white-space: nowrap; }
.orow { display: flex; align-items: center; gap: 10px; }
.oo { font-size: var(--s); color: var(--cyan); }
.stars { display: inline-flex; gap: 3px; }
.stars i { width: 7px; height: 7px; background: var(--star) center / 100% 100%; image-rendering: pixelated; }
.stars i.e { background-image: var(--star-e); }
/* BACK is the grid's last item: its own centred row, where it sat below the grid (the margins keep that spacing); on
   phones it takes the last row's empty end cell instead (below) */
.opgrid > .opback { grid-column: 1 / -1; justify-self: center; margin: 10px 0 -8px; }

/* league screens: pro-league.css (leaguemap.js, lg-* classes) */

/* how to play */
.htabs { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.htabs .chip { font-size: var(--s); padding: 10px 14px; }
.howbody { width: min(1220px, 100%); display: grid; grid-template-columns: 480px 1fr; gap: 16px; align-items: start; }
.hart { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 480px; padding: 10px 0; background: var(--panel); box-shadow: var(--fr); }
.hart canvas { display: block; box-shadow: var(--fr); }
.hkey { font-size: var(--s); color: var(--gray); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 0 10px; line-height: 1.6; text-align: center; }
.hkey .sw { display: inline-block; width: 10px; height: 10px; box-shadow: var(--fr); margin-left: 6px; }
.sw.g { background: #57e36a; } .sw.y { background: var(--gold); } .sw.c { background: var(--cyan); } .sw.p { background: #b49aff; } .sw.n { background: var(--gray); }
.hcols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
.hcols.rules { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
.how { justify-content: flex-start; padding-top: calc(20px + var(--st)); }
.hsec { background: var(--panel); box-shadow: var(--fr); padding: 10px 12px 12px; }
.hsec h3 { font-size: var(--s); color: var(--gold); margin-bottom: 10px; }
.hsec p { font-size: var(--s); line-height: 1.8; color: var(--white); }
.hrows { display: flex; flex-direction: column; gap: 7px; }
.hr { display: grid; grid-template-columns: minmax(64px, auto) 1fr; gap: 10px; align-items: center; font-size: var(--s); line-height: 1.5; }
.hk { display: inline-flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.hv { color: var(--white); }
.rules .hsec p { color: var(--white); }
.tbg { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; font-size: var(--s); color: var(--white); box-shadow: var(--fr); }
.tbg.bg-a { background: #3ec24f; } .tbg.bg-b { background: var(--red); } .tbg.bg-x { background: var(--blue); } .tbg.bg-y { background: var(--gold); color: var(--ink); }
.tbg.bg-p { background: var(--navy3); min-width: 34px; } .tbg.bg-r { background: var(--green2); }

/* settings */
.setbox { display: flex; flex-direction: column; gap: 10px; width: min(760px, 100%); background: var(--panel); padding: 14px 18px; box-shadow: var(--fr); }
.setrow { display: flex; gap: 12px; align-items: center; padding: 6px 8px; }
.setrow.cur { background: var(--navy2); box-shadow: inset 4px 0 0 0 var(--gold); }
.setrow .sl { width: 240px; flex-shrink: 0; font-size: var(--s); color: var(--gray); }
.setrow.cur .sl { color: var(--gold); }
/* in a match, the rows that apply from the next game on (ui.js showSettings): a tag after the label */
.setrow .nx { display: inline-block; padding: calc(var(--s) / 4) calc(var(--s) / 2); font-size: var(--s); line-height: 1; color: var(--ink); background: var(--cyan);
  box-shadow: var(--fr); vertical-align: middle; white-space: nowrap; }
.opts { display: flex; gap: 10px; flex-wrap: wrap; }
.vol { display: flex; align-items: center; gap: 10px; }
.vol .vb { padding: 6px 8px; }
.segs { display: flex; gap: 3px; }
.segs i { width: 14px; height: 18px; background: #23264a; box-shadow: var(--fr); cursor: pointer; }
.segs i.on { background: var(--green); box-shadow: inset 0 -4px 0 0 var(--green2), var(--fr); }
.segs i.on:nth-child(n+7) { background: var(--gold); box-shadow: inset 0 -4px 0 0 var(--gold2), var(--fr); }
.segs i.on:nth-child(n+9) { background: var(--red); box-shadow: inset 0 -4px 0 0 var(--red2), var(--fr); }
.vn { font-size: var(--s); color: var(--white); width: 24px; font-weight: normal; }

/* arena draft */
.draft { gap: 12px; }
.dhead { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }
.dhead .round, .dhead .dovr { font-size: var(--s); color: var(--gray); }
.dhead b { font-size: var(--m); color: var(--white); font-weight: normal; }
.dslot { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--s); color: var(--gray); }
.dslot b { font-size: var(--l); color: var(--cyan); font-weight: normal; text-shadow: 3px 3px 0 var(--ink); }
.dslot small { font-size: var(--s); color: var(--gray); }
.dpicks { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; perspective: none; }
.dcard { width: 236px; min-height: 336px; padding: 0; flex-direction: column; justify-content: center; white-space: normal; background: var(--navy2); }
.dcard .pk { position: absolute; left: 8px; top: 8px; font-size: var(--s); color: var(--ink); background: var(--gold); padding: 3px 5px; box-shadow: var(--fr); z-index: 2; }
.cface { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; padding: 10px 14px 12px; }
.cface .spr.big { margin: -4px 0 -10px; }
.dcard .pn { font-size: var(--s); color: var(--gold); }
.tys { display: flex; gap: 4px; }
.ty { font-size: var(--s); padding: 2px 4px; background: var(--tc); color: var(--ink); box-shadow: var(--fr); }
.ps { display: grid; grid-template-columns: 30px 1fr 22px; gap: 6px; align-items: center; width: 100%; font-size: var(--s); color: var(--gray); }
.ps b { color: var(--white); font-weight: normal; text-align: right; }
.bar { position: relative; height: 8px; background: #0b0d1a; box-shadow: var(--fr); }
.bf { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
.bf.md { background: var(--gold); } .bf.lo { background: var(--red); }
.fit { display: flex; align-items: center; gap: 8px; font-size: var(--s); color: var(--gray); margin-top: 2px; }
.fit b { font-size: var(--m); font-weight: normal; padding: 4px 6px; box-shadow: var(--fr); color: var(--ink); }
.fit.elite b { background: var(--cyan); } .fit.good b { background: var(--green); } .fit.ok b { background: var(--gold); } .fit.poor b { background: var(--red); color: var(--white); }
.bestat { font-size: var(--s); color: var(--gray); display: flex; align-items: center; gap: 4px; }
.cback { position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated; display: none; }
/* card reveal: face-down card squashes flat (stepped), flips to the face, staggered left to right */
.dcard.reveal { animation: flip 0.42s steps(6) both; animation-delay: calc(var(--n) * 0.15s); }
.dcard.reveal .cback { display: block; animation: hideback 0.42s steps(1) both; animation-delay: calc(var(--n) * 0.15s); }
@keyframes flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.04); } 100% { transform: scaleX(1); } }
@keyframes hideback { 0%, 49% { visibility: visible; } 50%, 100% { visibility: hidden; } }
.dcard.focus, .dcard:hover { transform: translateY(-6px); }
.board { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 1080px; }
.bt { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 40px; height: 52px; background: var(--panel); box-shadow: var(--fr); font-size: var(--s); color: var(--dim); overflow: hidden; }
.bt .spr { width: var(--sp-s); height: var(--sp-s); }
.bt b { font-weight: normal; padding-bottom: 3px; }
.bt.done { color: var(--gray); }
.bt.now { background: var(--navy3); color: var(--gold); box-shadow: var(--fr-gold); animation: blink 1s steps(2) infinite; }
.ddone { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; justify-content: center; }
.ddr { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ddr .kick { display: flex; align-items: center; gap: 8px; font-size: var(--s); color: var(--white); }
.ddr .kick small { display: block; color: var(--gray); margin-bottom: 6px; }

/* pause / confirm */
.pbox { display: flex; flex-direction: column; align-items: center; gap: 18px; background: var(--panel); padding: 22px 34px 26px; box-shadow: var(--fr-gold); }
.pbox.small { padding: 22px 28px; }
.pbox h2 { font-size: var(--l); }
.psit { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: var(--s); color: var(--gray); }
.pbox .menu { min-width: 320px; gap: 12px; }
.pbox .menu.row { min-width: 0; }

/* halftime / results */
.rbox { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(1140px, 100%); }
.banner { font-size: var(--xxl); line-height: 1; text-shadow: 4px 4px 0 var(--ink), -4px 0 0 var(--ink), 0 -4px 0 var(--ink); animation: slam 0.42s steps(5); }
.banner.win { color: var(--gold); } .banner.loss { color: var(--red); } .banner.tie, .banner.half { color: var(--white); }
.final { display: flex; justify-content: center; }
.sline { display: inline-flex; align-items: center; gap: 12px; font-size: var(--m); padding: 6px 14px; background: var(--ink); box-shadow: var(--fr); }
.sline.big { font-size: var(--l); }
.plate { display: inline-block; padding: 6px 10px; background: var(--tc, var(--navy3)); color: var(--tt, var(--white)); box-shadow: var(--fr); text-shadow: none; }
.sline .fsc { font-weight: normal; min-width: 1.5em; text-align: center; color: var(--white); text-shadow: 3px 3px 0 var(--ink); }
.sline .fd { font-size: var(--s); color: var(--gray); }
/* victory confetti: palette squares falling in whole-pixel steps */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 8px; background: var(--cc); animation: fall var(--d) steps(24) var(--dl) infinite; }
.confetti i:nth-child(3n) { width: 4px; height: 8px; }
.confetti i:nth-child(4n) { width: 6px; height: 6px; }
@keyframes fall { 0% { transform: translate(0, 0); } 50% { transform: translate(var(--sx), 55vh); } 100% { transform: translate(0, 112vh); } }
.results .rbox { position: relative; z-index: 1; }
.earned { display: flex; align-items: center; gap: 12px; font-size: var(--m); color: var(--gold); animation: pop 0.5s steps(4); }
.earned .bdg { width: 64px; height: 64px; image-rendering: pixelated; animation: blink 0.6s steps(2) 3; }
.rgrid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; width: 100%; align-items: start; }
/* the main buttons stay reachable when the stats overflow a short screen */
.rbox > .menu.row { position: sticky; bottom: 0; z-index: 3; padding: 8px 14px; background-image: var(--d75); background-size: 8px 8px; }
.mcol { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.lcol { display: flex; flex-direction: column; gap: 8px; background: var(--panel); padding: 10px; box-shadow: var(--fr); }
.lcol .lt { font-size: var(--s); color: var(--gray); margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
.lcol .lt .plate { padding: 3px 6px; }
.ldr { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.ldr .spr { width: var(--sp); height: var(--sp); margin: -6px -4px; flex-shrink: 0; }
.ldr.none .llab { color: var(--dim); }
.lw { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.llab { font-size: var(--s); color: var(--cyan); }
.lname { font-size: var(--s); color: var(--white); }
.lname small { font-size: var(--s); color: var(--gray); }
.lstat { font-size: var(--s); color: var(--gray); line-height: 1.4; }
.pog { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--panel); padding: 12px 16px; box-shadow: var(--fr-gold); width: 100%; text-align: center; }
.pog .pt { font-size: var(--s); color: var(--gold); }
.pog .pn { font-size: var(--m); }
.pog .pp { font-size: var(--s); color: var(--gray); }
.pog .pl { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--s); color: var(--cyan); line-height: 1.4; }
.box { border-collapse: collapse; font-size: var(--s); background: var(--panel); box-shadow: var(--fr); }
.box th, .box td { padding: 5px 12px; text-align: center; white-space: nowrap; }
.box th { color: var(--gray); font-weight: normal; }
.box tr:nth-child(odd) td, .box tr:nth-child(odd) th { background: #12173e; }
.box .tabbr .plate { padding: 3px 6px; }

/* ---------- play calling panel (bottom of the live field) ---------- */
.callpanel { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px calc(14px + var(--sr)) calc(12px + var(--sb)) calc(14px + var(--sl));
  background: var(--ink2); background-image: var(--dnavy); background-size: 8px 8px;
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--gold), 0 calc(-2 * var(--px)) 0 0 var(--ink); display: flex; flex-direction: column; gap: 10px; }
.callpanel.center { top: 0; justify-content: center; align-items: center; background-color: transparent; background-image: var(--d75); box-shadow: none; }
.callpanel .ph { display: flex; gap: 14px; align-items: center; font-size: var(--s); flex-wrap: wrap; min-height: 20px; }
.callpanel .sit { font-size: var(--m); color: var(--white); }
.callpanel .side { padding: 4px 8px; font-size: var(--s); box-shadow: var(--fr); }
.callpanel .side.o { background: #1d6a3a; } .callpanel .side.d { background: #7a1d2a; }
.callpanel .pclock { margin-left: auto; font-size: var(--m); color: var(--green); min-width: 3.5em; text-align: right; }
.callpanel .pclock.low { color: var(--red); animation: blink 0.5s steps(2) infinite; }
.callpanel .coach { margin-left: auto; font-size: var(--s); color: var(--gray); }
.callpanel .coach b { color: var(--gold); font-weight: normal; }
/* FIELD GOAL before 4th down (the last seconds of a half): right of the header, before the play clock; gold-tinted when
   the coach would kick it */
.callpanel .fgb { margin-left: auto; color: var(--gold); }
.callpanel .fgb + .pclock { margin-left: 0; }
.callpanel .fgb.pick { background: #2a2a10; }
@media (max-height: 500px) { .callpanel .fgb { min-height: 30px; } }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.tab { flex: 0 0 auto; font-size: var(--s); padding: 9px 12px; background: var(--navy); color: var(--gray); box-shadow: var(--fr); position: relative; }
.tab.on { background: var(--gold); color: var(--ink); }
.tab.cf::after { content: ""; position: absolute; right: -4px; top: -5px; width: 7px; height: 7px; background: var(--star) center / 100% 100%; image-rendering: pixelated; }
.tab:hover { color: var(--white); } .tab.on:hover { color: var(--ink); }
.cardrow { display: flex; gap: 14px; overflow-x: auto; padding: 8px 6px 6px; scrollbar-width: none; touch-action: pan-x; }
.cardrow.big { justify-content: center; }
/* the play row sits centred under the tabs (safe: an overflowing row still starts at its first card) */
.callpanel .cardrow { justify-content: safe center; }
/* keyboard keycaps on the cards (1-5, C, HEADS 1 / TAILS 2) hide while the last-used device is touch (ui.js) */
body.usetouch .pk { display: none; }
.pcard { flex: 0 0 auto; flex-direction: column; gap: 6px; padding: 8px 8px 10px; width: calc(var(--dg-w) + 16px); white-space: normal; justify-content: flex-start; }
.pcard canvas { width: var(--dg-w); height: var(--dg-h); box-shadow: var(--fr); display: block; }
.pcard .pk, .fcard .pk, .rcard .pk, .rtcard .pk { position: absolute; left: 4px; top: 4px; z-index: 2; font-size: var(--s); color: var(--ink); background: var(--gold); padding: 2px 4px; box-shadow: var(--fr); }
/* two fixed lines under the diagram: long names wrap inside their own box, never over the art */
.pcard .pname { display: flex; align-items: center; justify-content: center; height: calc(var(--s) * 2.5); font-size: var(--s); line-height: 1.25; text-align: center; color: inherit; overflow: hidden; }
.ptag { font-size: var(--s); padding: 2px 4px; color: var(--ink); box-shadow: var(--fr); }
.ptag.run { background: var(--orange); } .ptag.pass { background: var(--cyan); } .ptag.pa { background: #b49aff; }
.ptag.zone { background: var(--cyan); } .ptag.man { background: var(--orange); } .ptag.blitz { background: var(--red); color: var(--white); }
.cp { position: absolute; top: 4px; right: 4px; z-index: 3; font-size: var(--s); color: var(--ink); background: var(--gold); padding: 2px 4px; box-shadow: var(--fr); }
.pcard.pick .cp, .fcard.pick .cp { animation: cpb 1.2s steps(1) infinite; }
@keyframes cpb { 50% { background: var(--white); } }
.cp.now { background: var(--white); animation: none; }
.pcard.pick { background: #2a2a10; }
.pcard.cur { background: #10302a; }
.coachc { justify-content: center; gap: 10px; background: #3a2a08; }
.coachc .whistle { width: 28px; height: 28px; background: var(--whistle) center / 100% 100%; image-rendering: pixelated; }
.coachc .cct { font-size: var(--s); color: var(--gold); }
.coachc .ccn { font-size: var(--s); color: var(--white); line-height: 1.4; text-align: center; }
.coachc .ccf { font-size: var(--s); color: var(--gray); }
.fcard { flex: 0 0 auto; flex-direction: column; gap: 10px; min-width: 220px; padding: 22px 18px 18px; white-space: normal; }
.fcard .ft { font-size: var(--m); }
.fcard .fs { font-size: var(--s); color: var(--gray); }
.fcard.pick { background: #2a2a10; }
.fcard.on { background: var(--gold); color: var(--ink); }
.rcard { flex: 0 0 auto; flex-direction: column; gap: 8px; width: 150px; padding: 18px 8px 12px; white-space: normal; }
.rcard .rs { font-size: var(--m); color: var(--gold); }
.rcard .rn { font-size: var(--s); color: var(--white); }
.rcard .rr { font-size: var(--s); color: var(--cyan); }
.rcard .pk .gl { width: 22px; height: 16px; }
.rtcard { flex: 0 0 auto; flex-direction: column; gap: 6px; width: calc(var(--rt) + 28px); padding: 10px 6px; }
.rtcard canvas { width: var(--rt); height: var(--rt); box-shadow: var(--fr); }
.rtcard .pname { font-size: var(--s); }
.rtcard.cur { background: #10302a; }
.rcard.close, .rtcard.close { justify-content: center; color: var(--gray); }
.phint { font-size: var(--s); color: var(--gray); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.callpanel .keep { align-self: flex-start; }
.coinbox { display: flex; flex-direction: column; align-items: center; gap: 18px; background: var(--panel); padding: 24px 34px; box-shadow: var(--fr-gold); }
.coinbox .ct { font-size: var(--l); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.coinbox .cs { font-size: var(--s); color: var(--gray); }
.coin { width: 96px; height: 96px; background-size: 100% 100%; image-rendering: pixelated; }
.cres { font-size: var(--s); color: var(--white); min-height: 1.5em; visibility: hidden; text-align: center; line-height: 1.8; }
.cres.show { visibility: visible; animation: pop 0.4s steps(4); }
.cres b { font-weight: normal; font-size: var(--m); color: var(--gold); }
/* the result line wraps inside the gold frame on phones: HEADS! on its own line, then who won and what they chose.
   width 0 + min-width 100%: the line never widens the box (no jump when it appears); its height is reserved */
.cres { white-space: normal; width: 0; min-width: 100%; max-width: 100%; min-height: calc(var(--m) * 1.8 + 4px + var(--s) * 1.8); }
.cres b { display: block; margin-bottom: 4px; }
.cres.lost b { color: var(--red); }

/* ---------- HUD: broadcast score bug ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; }
.bug { position: absolute; top: calc(10px + var(--st)); left: 0; right: 0; margin: 0 auto; width: max-content; display: flex; align-items: stretch; height: 40px; background: var(--ink);
  box-shadow: var(--fr), 0 calc(2 * var(--px)) 0 0 var(--gold2); font-size: var(--m); }
.bug .tm { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; background: var(--tc, #333); color: var(--tt, var(--white)); }
.bug .tm .ab { line-height: 1; }
.bug .tm .sc { display: flex; align-items: center; justify-content: center; align-self: stretch; margin: 4px 0; padding: 0 8px; min-width: 44px; background: var(--ink); color: var(--white); }
.bug .tm .sc.bump { animation: bump 0.9s steps(6); }
@keyframes bump { 0%, 34%, 67% { background: var(--gold); color: var(--ink); } 17%, 50%, 100% { background: var(--ink); color: var(--white); } }
.bug .tos { position: absolute; left: 14px; bottom: 3px; display: flex; gap: 3px; }
.bug .tos i { width: 8px; height: 3px; background: var(--gold); }
.bug .tos i.used { background: var(--ink); }
.bug .pos { position: absolute; left: 3px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: var(--ball) center / 100% 100%; image-rendering: pixelated; visibility: hidden; }
.bug .tm.ball .pos { visibility: visible; }
.bug .qt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 12px; background: var(--navy); min-width: 96px; }
.bug .qt .q { color: var(--gray); font-size: var(--s); }
.bug .qt .clk { color: var(--white); }
.bug .dd { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 12px; background: var(--gold); color: var(--ink); min-width: 128px; }
.bug .dd .on { font-size: var(--s); }
.bug .dd.third { background: var(--orange); }
.bug .dd.fourth { background: var(--red); color: var(--white); }
.bug .pc { display: flex; align-items: center; justify-content: center; padding: 0 10px; background: var(--ink); color: var(--green); min-width: 64px; }
.bug .pc.off { display: none; }
.bug .pc.low { color: var(--red); animation: blink 0.5s steps(2) infinite; }
.plcard { position: absolute; left: calc(12px + var(--sl)); top: calc(12px + var(--st)); display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: var(--ink);
  box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--tc, var(--red)), var(--fr); }
.plcard.pop { animation: pop 0.3s steps(3); }
.plcard .pimg { display: block; width: var(--sp); height: var(--sp); margin: -8px -4px -8px -2px; overflow: hidden; }
.plcard .pimg img { width: var(--sp); height: var(--sp); display: block; }
.plcard .pinfo { display: flex; flex-direction: column; gap: 6px; }
.plcard .pnum { font-size: var(--s); color: var(--gold); }
.plcard .pname { font-size: var(--s); color: var(--white); }
.legend { position: absolute; left: 0; right: 0; bottom: calc(12px + var(--sb)); margin: 0 auto; width: max-content; max-width: calc(100% - 24px); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  padding: 7px 12px; background: var(--ink); box-shadow: var(--fr); font-size: var(--s); }
.legend .li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.legend .kc { padding: 2px 3px 3px; }
.legend .lt { color: var(--white); }
.hudbtns { position: absolute; top: calc(10px + var(--st)); right: calc(10px + var(--sr)); display: flex; gap: 8px; z-index: 5; } /* above the full-screen coin-toss panel (pause + mute stay tappable), under .screens */
.hb { width: 40px; height: 40px; background: var(--navy2); box-shadow: var(--bevel), var(--fr); font-size: var(--s); color: var(--white); display: flex; align-items: center; justify-content: center; }
.hb:hover { background: var(--navy3); }
.hb .bars { width: 12px; height: 14px; box-shadow: inset 4px 0 0 0 var(--white), inset -4px 0 0 0 var(--white); }
.hb .note { width: 14px; height: 14px; background: var(--note) center / 100% 100%; image-rendering: pixelated; }
.hb.off .note { background-image: var(--note-off); }
.hb .camico { width: 14px; height: 14px; background: var(--cam) center / 100% 100%; image-rendering: pixelated; }
.toast { position: absolute; z-index: 7; top: calc(66px + var(--st)); left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 90%; background: var(--ink); color: var(--gold); font-size: var(--s); padding: 9px 14px;
  box-shadow: var(--fr-gold); text-align: center; line-height: 1.5; pointer-events: none; }
.toast.pop { animation: pop 0.25s steps(3); }

/* ---------- broadcast graphics: matchup card + scoring lower thirds ---------- */
.bcast { position: absolute; pointer-events: none; z-index: 4; }
.bcast.off { visibility: hidden; }
.bcast.intro { top: calc(28vh + var(--st)); left: 0; right: 0; margin: 0 auto; width: max-content; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 16px 12px; background: var(--ink); box-shadow: var(--fr-gold); }
.bcast.in { animation: bin 0.32s steps(4) both; }
.bcast.out { animation: bin 0.32s steps(4) reverse both; }
@keyframes bin { 0% { transform: scaleY(0.1); } 100% { transform: scaleY(1); } }
.bc-tag { display: flex; align-items: center; gap: 6px; font-size: var(--s); color: var(--gray); }
.bc-tag .dot { width: 6px; height: 6px; background: var(--red); animation: blink 0.8s steps(2) infinite; }
.bc-row { display: flex; align-items: center; gap: 16px; }
.bc-side { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 120px; }
.bc-plate { padding: 6px 10px; font-size: var(--m); background: var(--tc); color: var(--tt); box-shadow: var(--fr); }
.bc-name { font-size: var(--s); color: var(--white); }
.bc-ovr { font-size: var(--s); color: var(--cyan); }
.bc-vs { font-size: var(--l); color: var(--gold); text-shadow: 3px 3px 0 var(--red); }
.bcast.lower { top: calc(84px + var(--st)); left: calc(12px + var(--sl)); display: flex; align-items: stretch; background: var(--ink); box-shadow: inset 0 -3px 0 0 var(--tc), var(--fr); }
.bcast.lower.in { animation: lin 0.3s steps(5) both; }
.bcast.lower.out { animation: lin 0.3s steps(5) reverse both; }
@keyframes lin { 0% { transform: translateX(-120%); } 100% { transform: translateX(0); } }
.bc-lplate { display: flex; align-items: center; padding: 0 10px; font-size: var(--m); background: var(--tc); color: var(--tt); }
.bc-ltxt { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 12px 10px; }
.bc-ltxt b { font-weight: normal; font-size: var(--m); color: var(--gold); }
.bc-ltxt small { font-size: var(--s); color: var(--white); }
.bc-lsc { display: flex; align-items: center; padding: 0 12px; font-size: var(--l); color: var(--white); background: var(--navy); }

/* ---------- kick meter ---------- */
.meter { position: absolute; right: calc(28px + var(--sr)); bottom: calc(90px + var(--sb)); width: min(420px, 40vw); background: var(--panel); box-shadow: var(--fr-gold); padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 10px; }
.meter .mtop { display: flex; justify-content: space-between; gap: 10px; font-size: var(--s); }
.mkind { color: var(--gold); }
.mwind { display: flex; align-items: center; gap: 6px; color: var(--cyan); }
.mwind b { font-weight: normal; }
.mrow { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; font-size: var(--s); color: var(--gray); }
.mbar { position: relative; height: 22px; background: #0b0d1a; box-shadow: var(--fr); }
.mfill { position: absolute; left: 0; top: 3px; bottom: 3px; width: 0; background: repeating-linear-gradient(90deg, var(--green) 0 6px, #3ec24f 6px 8px); }
.mmax { position: absolute; right: 8%; top: -4px; bottom: -4px; width: 3px; background: var(--red); }
.macc { position: relative; height: 22px; background: #0b0d1a; box-shadow: var(--fr); }
.msweet { position: absolute; left: 45.5%; width: 9%; top: 3px; bottom: 3px; background: var(--green2); box-shadow: inset 2px 0 0 0 var(--green), inset -2px 0 0 0 var(--green); }
.mneedle { position: absolute; left: 5%; top: -6px; bottom: -6px; 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; }
.maim { position: relative; height: 14px; background: #0b0d1a; box-shadow: var(--fr); }
.mpost { position: absolute; top: 2px; bottom: 2px; width: 3px; background: var(--gold); }
.mpost.l { left: 30%; } .mpost.r { right: 30%; }
.marrow { position: absolute; top: 3px; width: 8px; height: 8px; margin-left: -4px; background: var(--cyan); }
.meter:not(.p0) .aimrow .ml { color: var(--dim); }
.meter:not(.p0) .marrow { background: var(--dim); }
/* FG / PAT guide (world.kickGuide): power needed to clear the bar, the make window, the wind-cancelling aim */
.mneed, .mwin, .mwaim { display: none; position: absolute; }
.meter.guided .mneed, .meter.guided .mwin, .meter.guided .mwaim { display: block; }
.meter.guided .mmax { display: none; }
.mneed { top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 2px 0 0 0 var(--ink), -2px 0 0 0 var(--ink); }
.meter.far .mneed { background: var(--red); }
.mwin { top: 3px; bottom: 3px; background: #145a22; box-shadow: inset 0 2px 0 0 #2a8a3a, inset 0 -2px 0 0 #0a3a14; }
.mwaim { top: 2px; width: 6px; height: 6px; margin-left: -5px; box-shadow: inset 0 0 0 2px var(--gold); }
.meter:not(.p0) .mwaim { display: none; }
.mstage { text-align: center; font-size: var(--m); color: var(--white); min-height: 1em; }
.meter.p0 .mstage { animation: blink 0.9s steps(2) infinite; color: var(--gold); }
.meter.perfect .mstage { color: var(--cyan); animation: blink 0.2s steps(2) infinite; }
.kickbtn { align-self: center; font-size: var(--s); padding: 8px 14px; background: var(--red); box-shadow: var(--fr); }
body.touchdev .meter .kickbtn { display: none; }

/* ---------- touch controls ---------- */
.touch { position: absolute; inset: 0; pointer-events: none; }
.touch .tzone { position: absolute; left: 0; top: calc(60px + var(--st)); bottom: 0; width: 50%; pointer-events: auto; touch-action: none; }
.tstick { position: fixed; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--stick) center / 100% 100%; image-rendering: pixelated; display: none; pointer-events: none; }
.tstick.on { display: block; }
.tstick .tknob, .tghost .tknob { position: absolute; left: 27px; top: 27px; width: 42px; height: 42px; background: var(--knob) center / 100% 100%; image-rendering: pixelated; }
.tghost { position: absolute; left: calc(40px + var(--sl)); bottom: calc(40px + var(--sb)); width: 96px; height: 96px; pointer-events: none; }
.tghost .tknob { background-image: var(--knob-dim); }
.tghost .tbase { position: absolute; inset: 0; background: var(--stick) center / 100% 100%; image-rendering: pixelated; }
.tghost span { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font-size: var(--s); color: var(--white); text-shadow: 2px 2px 0 var(--ink); }
.tghost.hide, .touch.learned .tghost { display: none !important; }
.tpad { position: absolute; right: calc(10px + var(--sr)); bottom: calc(10px + var(--sb)); width: 228px; height: 228px; pointer-events: none; }
.tbtn { position: absolute; pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center; background: var(--up) center / 100% 100% no-repeat; image-rendering: pixelated; color: var(--white); }
.tbtn.down { background-image: var(--dn); }
.tbtn .tl { font-size: var(--s); line-height: 1.3; text-align: center; text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink); margin-top: -3px; }
.tbtn.down .tl { margin-top: 3px; }
.tbtn.tk-y .tl { color: var(--ink); text-shadow: none; }
.tbtn.off { background-image: var(--off); pointer-events: none; }
.tbtn.off .tl { visibility: hidden; }
.touch.idle .tpad, .touch.idle .tside, .touch.nopad .tpad { display: none; }
.touch .tghost { display: none; }
.touch[data-ctx="pocket"] .tghost, .touch[data-ctx="carrier"] .tghost, .touch[data-ctx="defense"] .tghost, .touch[data-ctx="coverage"] .tghost, .touch[data-ctx="returner"] .tghost, .touch[data-ctx="offNoBall"] .tghost { display: block; }
.tbtn.tk-a { right: 72px; bottom: 0; width: 84px; height: 84px; }
.tbtn.tk-b { right: 0; bottom: 74px; width: 72px; height: 72px; }
.tbtn.tk-x { right: 156px; bottom: 74px; width: 72px; height: 72px; }
.tbtn.tk-y { right: 78px; bottom: 150px; width: 72px; height: 72px; }
.tside { position: absolute; right: calc(250px + var(--sr)); bottom: calc(14px + var(--sb)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.tpill, .tsprint { pointer-events: auto; touch-action: none; width: 96px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--up) center / 100% 100% no-repeat; image-rendering: pixelated; }
.tpill.down, .tsprint.down { background-image: var(--dn); }
.tpill .tl, .tsprint .tl { font-size: var(--s); text-shadow: 2px 2px 0 var(--ink); margin-top: -2px; }
.tsprint.down .tl { color: var(--ink); text-shadow: none; }
.tpill.off { visibility: hidden; pointer-events: none; }
.tsprint.off { visibility: hidden; pointer-events: none; }
.trec { position: absolute; right: calc(10px + var(--sr)); bottom: calc(12px + var(--sb)); display: none; gap: 8px; pointer-events: none; }
.tr { pointer-events: auto; touch-action: none; position: relative; width: 58px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--navy2); box-shadow: inset 0 -4px 0 0 var(--navy), var(--fr); color: var(--ink); }
.tr b { font-size: var(--m); font-weight: normal; }
.tr span { font-size: var(--s); }
.tr.open { background: var(--green); box-shadow: inset 0 -4px 0 0 var(--green2), var(--fr); } .tr.mid { background: var(--gold); box-shadow: inset 0 -4px 0 0 var(--gold2), var(--fr); } .tr.cov { background: var(--redL); box-shadow: inset 0 -4px 0 0 var(--red2), var(--fr); }
.tr.off { visibility: hidden; }
.tr.down { transform: translateY(3px); box-shadow: var(--fr-gold); }
.tr.charge::after { content: "LOB"; position: absolute; left: 0; right: 0; top: -20px; text-align: center; font-size: var(--s); color: var(--white); text-shadow: 2px 2px 0 var(--ink); animation: lob 0.7s steps(1) both; }
@keyframes lob { 0%, 30% { visibility: hidden; } 31%, 100% { visibility: visible; } }
.touch.pocket .tpad { display: none; }
.touch.pocket .trec { display: flex; }
.touch.pocket .tside { right: calc(12px + var(--sr)); bottom: calc(84px + var(--sb)); flex-direction: row; }
.tskip { position: absolute; right: calc(16px + var(--sr)); bottom: calc(16px + var(--sb)); display: none; font-size: var(--s); padding: 10px 12px; background: var(--ink); color: var(--gold); box-shadow: var(--fr-gold); pointer-events: auto; }
.touch.replay .tskip { display: flex; align-items: center; gap: 6px; }
.touch.replay .tpad, .touch.replay .tside, .touch.replay .trec, .touch.replay .tghost { display: none; }

/* rotate overlay (portrait phones) */
.rotate { position: fixed; inset: 0; background: #05061a; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; z-index: 60; font-size: var(--s); color: var(--gold); text-align: center; pointer-events: auto; }
.rotate .phone { width: 48px; height: 84px; background: var(--navy2); box-shadow: var(--fr-gold); animation: rot 1.8s steps(1) infinite; position: relative; }
.rotate .phone i { position: absolute; left: 6px; right: 6px; top: 8px; bottom: 14px; background: #1f6a34; }
.rotate .rs { color: var(--gray); }
@keyframes rot { 0%, 45% { transform: rotate(0); } 50%, 95% { transform: rotate(-90deg); } }
body.portrait .rotate { display: flex; }

/* ---------- big screens (1600x900 CSS px and up): the type ladder doubles, on crisp 8 px multiples ---------- */
@media (min-width: 1600px) and (min-height: 900px) {
  :root { --px: 4px; --s: 16px; --m: 24px; --l: 32px; --xl: 48px; --xxl: 64px; --dg-w: 240px; --dg-h: 168px; --rt: 120px; }
  .gl { width: 45px; height: 33px; }
  .btn { padding: 16px 24px; } .btn.big { padding: 20px 32px; } .btn.small { padding: 12px 18px; }
  .menu { gap: 18px; min-width: 440px; }
  .title .menu { width: 520px; }
  .menu .btn.focus::before { left: -36px; width: 21px; height: 21px; margin-top: -10px; }
  .chip { padding: 10px 14px; }
  .pill { padding: 6px 8px; }
  .screen { gap: 22px; }
  .card { width: 440px; gap: 14px; padding: 18px 18px 20px; }
  .mini, .fan { height: 260px; }
  .fan i { width: 120px; height: 168px; margin-left: -60px; top: 30px; }
  .fan i:nth-child(1) { transform: translateX(-94px) translateY(14px); } .fan i:nth-child(3) { transform: translateX(94px) translateY(14px); }
  .card.focus .fan i:nth-child(1), .card:hover .fan i:nth-child(1) { transform: translateX(-104px) translateY(6px); }
  .card.focus .fan i:nth-child(3), .card:hover .fan i:nth-child(3) { transform: translateX(104px) translateY(6px); }
  .opgrid { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); width: min(1600px, 100%); gap: 16px; }
  .opgrid > .opback { margin-top: 14px; }
  .op { padding: 12px 16px 12px 22px; gap: 8px 14px; }
  .op .sw { width: 10px; }
  .stars i { width: 14px; height: 14px; }
  .howbody { width: min(1840px, 100%); grid-template-columns: 720px 1fr; }
  .hart { width: 720px; }
  .hcols { gap: 16px; }
  .hsec { padding: 14px 16px 16px; }
  .hr { grid-template-columns: minmax(96px, auto) 1fr; gap: 14px; }
  .tbg { min-width: 32px; height: 32px; padding: 0 6px; }
  .hkey .sw { width: 16px; height: 16px; }
  .setbox { width: min(1200px, 100%); gap: 12px; padding: 20px 26px; }
  .setrow .sl { width: 400px; }
  .segs i { width: 20px; height: 28px; }
  .vn { width: 40px; }
  .dcard { width: 340px; min-height: 480px; }
  .ps { grid-template-columns: 48px 1fr 36px; gap: 8px; }
  .bar { height: 12px; }
  .board { max-width: 1700px; }
  .bt { width: 64px; height: 80px; }
  .bt .spr { width: 64px; height: 64px; margin-bottom: -10px; }
  .mini.big { height: 420px; width: 760px; }
  .pbox { padding: 30px 46px 34px; gap: 24px; }
  .pbox .menu { min-width: 520px; }
  .rbox { width: min(1760px, 100%); gap: 18px; }
  .lcol { padding: 14px; gap: 10px; }
  .ldr .spr { width: 128px; height: 128px; margin: -24px -16px; }
  .ldr { min-height: 84px; gap: 14px; }
  .box th, .box td { padding: 7px 16px; }
  .pog { padding: 16px 20px; }
  .bug { height: 56px; }
  .bug .tm { padding: 0 12px 0 20px; gap: 14px; }
  .bug .tm .sc { min-width: 64px; margin: 6px 0; }
  .bug .tos { left: 20px; bottom: 4px; gap: 4px; } .bug .tos i { width: 12px; height: 4px; }
  .bug .pos { width: 14px; height: 14px; margin-top: -7px; left: 4px; }
  .bug .qt { min-width: 140px; gap: 6px; } .bug .dd { min-width: 200px; gap: 6px; } .bug .pc { min-width: 96px; }
  .hb { width: 56px; height: 56px; }
  .hb .bars { width: 16px; height: 20px; box-shadow: inset 6px 0 0 0 var(--white), inset -6px 0 0 0 var(--white); }
  .hb .note { width: 21px; height: 21px; }
  .hb .camico { width: 21px; height: 21px; }
  .plcard { gap: 12px; padding: 6px 16px 6px 6px; }
  .plcard .pinfo { gap: 10px; }
  .legend { gap: 8px 26px; padding: 10px 18px; }
  .toast { top: calc(96px + var(--st)); padding: 12px 18px; }
  .bcast.intro { padding: 14px 22px 16px; gap: 12px; } /* top: 28vh (base) clears the jumbotron */
  .bc-side { min-width: 200px; } .bc-tag .dot { width: 10px; height: 10px; }
  .bcast.lower { top: calc(112px + var(--st)); }
  .meter { width: 640px; padding: 16px 18px 18px; gap: 14px; }
  .mrow { grid-template-columns: 160px 1fr; }
  .mbar, .macc { height: 30px; } .maim { height: 20px; } .marrow { width: 12px; height: 12px; margin-left: -6px; top: 4px; }
  .callpanel { gap: 12px; padding: 14px calc(20px + var(--sr)) calc(16px + var(--sb)) calc(20px + var(--sl)); }
  .tab { padding: 12px 16px; }
  .cardrow { gap: 18px; }
  .fcard { min-width: 380px; padding: 30px 24px 24px; gap: 14px; }
  .rcard { width: 220px; padding: 24px 10px 16px; gap: 10px; }
  .rcard .pk .gl { width: 30px; height: 22px; }
  .coachc .whistle { width: 42px; height: 42px; }
  .coinbox { padding: 34px 48px; gap: 24px; } .coin { width: 144px; height: 144px; }
  .crawl { height: calc(36px + var(--sb)); }
  .crawl .live .dot { width: 10px; height: 10px; }
  .title .back, .title .press { bottom: calc(52px + var(--sb)); }
  .title .ver { bottom: calc(64px + var(--sb) + var(--s)); }
  .earned .bdg { width: 96px; height: 96px; }
  .confetti i { width: 12px; height: 12px; }
}
/* ---------- phones (landscape, short) ---------- */
@media (max-height: 500px) {
  :root { --px: 2px; --s: 8px; --m: 10.667px; --l: 13.333px; --xl: 16px; --xxl: 21.333px; --dg-w: 106.667px; --dg-h: 74.667px; --rt: 53.333px; --sp-s: 21.333px; --sp: 42.667px; --sp-l: 85.333px; }
  .screen { gap: 8px; padding: calc(8px + var(--st)) calc(10px + var(--sr)) calc(8px + var(--sb)) calc(10px + var(--sl)); background-size: 4px 4px; }
  .tfade i { background-size: 4px 4px; }
  .btn { padding: 8px 12px; }
  .btn.big { padding: 10px 18px; }
  .btn.small { padding: 7px 10px; }
  .menu { gap: 8px; min-width: 240px; }
  /* title, short landscape: logo + tagline LEFT of the menu. Stacked they need ~340 px and an iPhone shows ~320–340
     with Safari's bars up, so the title overflowed and scrolled (its crawl and links scrolled away and left a bare band
     at the bottom). Side by side it fits every phone height above the back-link / crawl band and never scrolls; ui.js
     fitLogo gives the logo the biggest integer scale that fits beside the menu. */
  .title { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-content: center; justify-content: center; column-gap: 32px;
    padding-top: calc(8px + var(--st)); padding-bottom: calc(54px + var(--sb)); overflow: hidden; }
  .title .logo { grid-area: 1 / 1; justify-self: center; align-self: end; }
  .title .sub { grid-area: 2 / 1; justify-self: center; align-self: start; margin-top: 6px; text-align: center; }
  .title .menu { grid-area: 1 / 2 / 3 / 3; align-self: center; width: 260px; margin: 0; gap: calc(2 * var(--px) + 4px); } /* each button's frame overhangs it by --px: leave a thin 4px line between frames */
  .title .ver { display: none; }
  .citem.legal { display: inline; }
  .ctrack { animation-duration: 96s; animation-timing-function: steps(1920); } /* same crawl speed with the longer text */
  .title .press, .title .back { bottom: calc(28px + var(--sb)); }
  .crawl { height: calc(20px + var(--sb)); }
  .menu .btn.focus::before { left: -20px; width: 14px; height: 14px; }
  .cards { gap: 12px; flex-wrap: nowrap; }
  .card { width: 228px; padding: 8px 8px 10px; gap: 6px; }
  .card .cs, .card .cstar { line-height: 1.3; }
  .mini, .fan { height: 116px; }
  .fan i { width: 53.333px; height: 74.667px; margin-left: -26.667px; top: 16px; }
  .fan i:nth-child(1) { transform: translateX(-42px) translateY(8px); } .fan i:nth-child(3) { transform: translateX(42px) translateY(8px); }
  .ovr b { font-size: var(--l); }
  .opgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
  .op { padding: 6px 8px 6px 14px; gap: 2px 8px; }
  /* BACK in the last row's empty end cell (13 teams leave it free), so it costs no row: it sat 3–34 px below the fold */
  .opgrid > .opback { grid-column: -2 / -1; align-self: center; margin: 0; }
  .htabs .chip { padding: 7px 10px; }
  .howbody { grid-template-columns: 1fr; gap: 8px; }
  .hart { width: 100%; padding: 6px 0; }
  .hcols, .hcols.rules { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .how { padding-top: calc(8px + var(--st)); }
  .hsec { padding: 8px; }
  .hr { grid-template-columns: minmax(52px, auto) 1fr; gap: 8px; }
  .gl { width: 22.5px; height: 16.5px; }
  .tbg { min-width: 18px; height: 18px; }
  .setbox { gap: 4px; padding: 8px 10px; }
  .setrow { padding: 4px 6px; }
  .setrow .sl { width: 150px; }
  .segs i { width: 10px; height: 14px; }
  .dhead { gap: 14px; }
  .dpicks { gap: 12px; }
  .dcard { width: 186px; min-height: 0; }
  .cface { gap: 4px; padding: 6px 8px 8px; }
  .cface .spr.big { width: var(--sp); height: var(--sp); margin: 0 0 -4px; }
  .ps { grid-template-columns: 26px 1fr 18px; gap: 4px; }
  .bar { height: 6px; }
  .board { display: none; }
  .mini.big { height: 200px; width: 260px; }
  .mini.big .mf { width: var(--sp-s); height: var(--sp-s); margin: calc(var(--sp-s) / -2) 0 0 calc(var(--sp-s) / -2); }
  .ddone { gap: 16px; }
  .pbox { padding: 12px 18px 14px; gap: 10px; }
  .pbox .menu { min-width: 240px; gap: 6px; }
  /* pause: two columns of buttons (the old `.pbox.pause` selector never matched, so 7 stacked buttons overflowed a
     phone); the gap leaves room for the focus cursor, and an odd last button (QUIT) spans the row */
  .screen.pause .pbox .menu { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .screen.pause .pbox .menu > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .banner { font-size: var(--xxl); }
  .rbox { gap: 8px; }
  .rgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rgrid .mcol { grid-column: 1 / -1; grid-row: 1; flex-direction: row; align-items: stretch; }
  .pog { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 6px 8px; width: auto; }
  .ldr { min-height: 36px; gap: 6px; }
  .ldr.none { display: none; }
  .half .rgrid .lcol { display: none; }
  .half .rgrid { grid-template-columns: 1fr; justify-items: center; }
  .rbox > .menu.row { padding: 6px 10px; background-size: 4px 4px; }
  .lcol { gap: 4px; padding: 6px 8px; }
  .pog .pl { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
  .pog .pli + .pli::before { content: "\00b7"; margin: 0 6px; color: var(--gray); }
  .box th, .box td { padding: 3px 6px; }
  .callpanel { padding: 6px calc(8px + var(--sr)) calc(6px + var(--sb)) calc(8px + var(--sl)); gap: 5px; }
  .callpanel .ph { gap: 8px; min-height: 14px; }
  .tabs { gap: 5px; padding: 3px; }
  .tab { padding: 6px 8px; }
  .cardrow { gap: 8px; padding: 6px 4px 4px; }
  .pcard { padding: 5px 5px 6px; gap: 4px; }
  .pcard .ptag { display: none; }
  .fcard { min-width: 160px; padding: 14px 10px 12px; gap: 6px; }
  .rcard { width: 112px; padding: 14px 6px 8px; gap: 5px; }
  .rtcard { padding: 6px 4px; }
  .phint { display: none; }
  .coinbox { padding: 12px 18px; gap: 10px; }
  .coin { width: 64px; height: 64px; }
  .bug { height: 28px; top: calc(4px + var(--st)); }
  .bug .tm { padding: 0 6px 0 11px; gap: 6px; }
  .bug .tm .sc { min-width: 28px; margin: 3px 0; padding: 0 5px; }
  .bug .tos { left: 11px; bottom: 2px; }
  .bug .tos i { width: 6px; height: 2px; }
  .bug .qt { min-width: 64px; padding: 0 8px; gap: 2px; }
  .bug .dd { min-width: 84px; padding: 0 8px; gap: 2px; }
  .bug .pc { min-width: 40px; padding: 0 6px; }
  .plcard { top: calc(6px + var(--st)); left: calc(8px + var(--sl)); padding: 2px 8px 2px 2px; gap: 4px; }
  .plcard .pimg { margin: -6px -4px -6px -2px; }
  .plcard .pinfo { gap: 4px; }
  .hudbtns { top: calc(4px + var(--st)); right: calc(6px + var(--sr)); gap: 6px; }
  .hb { width: 32px; height: 28px; }
  .toast { top: calc(40px + var(--st)); padding: 6px 10px; }
  .meter { right: auto; left: calc(10px + var(--sl)); bottom: calc(10px + var(--sb)); width: min(360px, 46vw); padding: 8px 10px 10px; gap: 6px; }
  .touch[data-ctx="meter"] .tghost { display: none; }
  .mrow { grid-template-columns: 64px 1fr; }
  .mbar, .macc { height: 16px; }
  .legend { display: none; }
  .bcast.intro { padding: 6px 10px 8px; gap: 5px; } /* top: 28vh (base) — under the jumbotron */
  .bc-side { min-width: 90px; }
  .bcast.lower { top: calc(54px + var(--st)); left: calc(8px + var(--sl)); }
  .bc-ltxt { padding: 5px 8px 7px; gap: 4px; }
  /* touch targets: menu buttons ≥ 36 px tall (no mis-taps after a layout shift), tabs and chips ≥ 30 px, arrows 32×32 */
  .menu .btn, .pbox .btn, .hfoot .btn { min-height: 36px; }
  .tab, .chip { min-height: 30px; }
  .vol { gap: 6px; }
  .vol .vb { min-width: 32px; min-height: 32px; padding: 0 6px; }
  /* settings: two columns of rows, so every row and BACK fit a landscape phone without scrolling */
  .setbox { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 6px 10px; width: 100%; }
  .setrow { padding: 3px 6px; gap: 8px; }
  .setrow .sl { width: 84px; }
  .setrow .opts { gap: 6px; }
  .setrow .chip { padding: 0 8px; }
  body.usetouch .hfoot .hint { display: none; } /* the keyboard-only hint */
  /* results: the sticky REMATCH / NEW OPPONENT / MAIN MENU row is a full-bleed opaque bar (nothing shows around it) */
  .rbox > .menu.row { align-self: stretch; justify-content: center; background: var(--ink); background-image: none; border-top: var(--px) solid var(--gold);
    margin: 0 calc(-10px - var(--sr)) calc(-8px - var(--sb)) calc(-10px - var(--sl)); padding: 6px calc(10px + var(--sr)) calc(6px + var(--sb)) calc(10px + var(--sl));
    bottom: calc(-8px - var(--sb)); } /* sticks flush to the screen's bottom edge (through the screen's bottom padding) */
  /* how to play runs a few screens tall on a phone: BACK rides in the same bar, reachable without scrolling */
  .screen.how > .hfoot { position: sticky; z-index: 3; align-self: stretch; background: var(--ink); border-top: var(--px) solid var(--gold);
    margin: 0 calc(-10px - var(--sr)) calc(-8px - var(--sb)) calc(-10px - var(--sl)); padding: 6px calc(10px + var(--sr)) calc(6px + var(--sb)) calc(10px + var(--sl));
    bottom: calc(-8px - var(--sb)); }
  /* a slimmer player-of-the-game row (the POG card stretches to the team-stats table beside it), so the first leader
     rows show above the fold */
  .pog { gap: 2px 8px; padding: 4px 8px; }
  .pog .pl { line-height: 1.25; }
  .rgrid .box th, .rgrid .box td { padding: 1px 6px; }
}
/* phones with Safari's bars up (~300–350 px tall): the opponent grid tightens so all 13 teams + BACK fit unscrolled */
@media (max-height: 350px) {
  .opgrid { gap: 4px 8px; padding: 4px 8px; }
  .op { padding-top: 4px; padding-bottom: 4px; }
}
/* narrow landscape phones (iPhone SE, 667 wide; small Androids): the three team cards and both settings columns fit
   the width instead of running off the sides (each setting's label goes above its options) */
@media (max-height: 500px) and (max-width: 740px) {
  .title .sub .sub-n { display: none; } /* the tagline stays on one line beside the menu */
  .cards { gap: 8px; }
  .card { width: 200px; }
  .rcard { width: 96px; } /* the hot-route picker: five receivers and CLOSE in one row */
  .setrow { flex-wrap: wrap; row-gap: 2px; }
  .setrow .sl { width: 100%; }
}
/* ... and with Safari's bars up (~300–350 px tall) the settings rows tighten, so all nine and BACK fit (they scrolled
   28 px at 568×320) */
@media (max-height: 350px) and (max-width: 740px) {
  .screen.settings { gap: 6px; }
  .setbox { padding-top: 4px; padding-bottom: 4px; }
  .setrow { padding-top: 1px; padding-bottom: 1px; }
  .vol .vb { min-height: 30px; }
}
/* narrow landscape phones (iPhone SE, 667 wide and less): the player card, the score bug and the HUD buttons don't fit
   one row (the bug ran under the buttons and hid the play clock, the player card covered the home team): the bug
   centres in the band left of the buttons, the player card drops below it and the scoring lower third below that */
@media (max-height: 500px) and (max-width: 700px) {
  .bug { left: calc(6px + var(--sl)); right: calc(126px + var(--sr)); }
  .plcard { top: calc(42px + var(--st)); }
  .bcast.lower { top: calc(78px + var(--st)); }
}
/* the smallest landscape phones (iPhone SE 1st gen, 568 wide): the three team cards and the three draft picks fit side by
   side (the cards ran off both edges, and the third pick wrapped below the fold) */
@media (max-height: 500px) and (max-width: 600px) {
  .card { width: 176px; }
  .dcard { width: 172px; }
  /* the opponents: three columns of name, ace, stars and OVR (two columns of full cards ran 112 px below the fold) */
  .opgrid { grid-template-columns: repeat(3, 1fr); }
  .op .ol { display: none; }
  /* play cards: the diagrams shrink to 1 device pixel per art pixel here (ui-playcall.js fitCards), but two lines under
     each still hold the longest names (OUTSIDE / STRETCH) */
  .pcard { min-width: calc(7 * var(--s) + 10px); }
  /* the hot-route picker: five receivers (10-letter names) and CLOSE, then five routes and BACK, in one row */
  .rcard { width: 86px; padding-left: 3px; padding-right: 3px; }
  .rtcard { width: calc(var(--rt) + 24px); }
  .rcard.close, .rtcard.close { width: 64px; }
}
/* phones at DPR 2 */
@media (max-height: 500px) and (max-resolution: 2.4dppx) {
  :root { --m: 12px; --l: 16px; --xxl: 24px; --dg-w: 120px; --dg-h: 84px; --rt: 60px; --sp-s: 16px; --sp: 32px; --sp-l: 64px; }
}