/* ALL-22 HOOPS — SLUGGER's and PRO's retro broadcast look (slugger.css, pro.css): "Press Start 2P" at whole-pixel
   sizes, hard stepped frames (box-shadow steps, never border-radius), 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; --orange: #ff9b2e;
  --white: #f4f4ec; --gray: #9aa3c0; --dim: #5a6288; --green: #57e36a; --magenta: #ff4fd8;
  --px: 3px; --s: 8px; --m: 12px; --l: 20px;
  --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);
  --d50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%2305061a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%2305061a'/%3E%3C/svg%3E");
  --d75: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='1' fill='%2305061a'/%3E%3Crect y='1' width='1' height='1' fill='%2305061a'/%3E%3C/svg%3E");
}
* { 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: manipulation; 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; }
.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(--orange); text-shadow: 4px 4px 0 var(--red2); 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; }
body.loadingGame #ui::after { content: "LOADING..."; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 14px; background: var(--ink); color: var(--gold); box-shadow: var(--fr-gold); }
@keyframes blink { 50% { opacity: 0; } }
@keyframes nudge { 50% { transform: translateX(3px); } }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--m); line-height: 1; padding: 12px 16px;
  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 { display: inline-flex; align-items: center; gap: 4px; font-size: var(--s); padding: 7px 9px; background: var(--navy2); color: var(--gray); box-shadow: var(--fr); pointer-events: auto; }
.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); }
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 .chip.focus:not(.on) { background: var(--navy2); color: var(--gray); box-shadow: var(--fr); }
body.touchdev .chip.on.focus { background: var(--gold); color: var(--ink); box-shadow: var(--fr); }
.menu { display: flex; flex-direction: column; gap: 12px; width: min(380px, 92vw); align-items: stretch; }
.menu .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu .two .btn { font-size: var(--s); padding: 11px 8px; }
/* a menu's cursor: PRO's pixel ▶ (ui.js --cur) beside the focused button of a column, nudging (on a phone too: it
   marks the button Enter or A would press) */
.menu .btn.focus::before { content: ""; position: absolute; left: -24px; 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; }

/* ---------- 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: 12px;
  padding: calc(14px + var(--st)) calc(14px + var(--sr)) calc(14px + var(--sb)) calc(14px + var(--sl)); pointer-events: auto;
  background-image: var(--d75); background-size: 4px 4px; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; }
.screen > :first-child { margin-top: auto; } .screen > :last-child { margin-bottom: auto; }
.screen.title { background-image: var(--d50); }
.screen .fine { background: rgba(5, 6, 26, 0.88); padding: 6px 10px; }
.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.7; max-width: 860px; }
.pbox { background: var(--panel); box-shadow: var(--fr); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; width: min(860px, 100%); }
.spr { image-rendering: pixelated; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* ---------- the title (ui.js title): SLUGGER's — the big logo and its line, one column of buttons (the focused one's
   ▶), the fine print; nothing scrolls at any size, with the site's bar over it (shell.js shows it only where the title
   fits under it). A phone held sideways has the logo beside the column, PRO's (below) ---------- */
.screen.title { justify-content: center; gap: 16px; }
.screen.title > :first-child { margin-top: 0; } .screen.title > :last-child { margin-bottom: 0; }
.tmain { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.thead { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tlogo { display: block; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; -webkit-user-drag: none; }
.sub { padding: 6px 12px; font-size: var(--s); color: var(--cyan); background: var(--ink); box-shadow: var(--fr); letter-spacing: 1px; }
.tmenu { width: min(340px, 80vw); }
.tmenu .btn { padding: 14px 16px; }
/* the Gym Challenge's badges so far (PRO's pill) */
.btn .pill { padding: 3px 5px 2px; font-size: var(--s); color: var(--ink); background: var(--gold); box-shadow: 0 0 0 2px var(--ink); }
/* ---------- PLAY NOW (ui.js play): SLUGGER's PLAY BALL — YOUR TEAM's row (YOU, the eight gyms) and the OPPONENT's (the
   gyms in the same columns), then the matchup beside the game's options; BACK · START · WATCH CPU ---------- */
.selbox { gap: 10px; width: min(1000px, 100%); }
.selrow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
.selrow .sl { color: var(--gray); line-height: 1.4; }
.clubs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.clubs.opp > :first-child { grid-column-start: 2; }
.btn.club { flex-direction: column; gap: 3px; padding: 4px 2px 6px; font-size: var(--s); min-width: 0; }
.btn.club b { font-weight: normal; }
.btn.club.mine b { color: var(--gold); }
.btn.club.on { background: var(--navy3); box-shadow: inset 0 0 0 var(--px) var(--gold), var(--fr); color: var(--gold); }
/* (the keys' and a controller's focus: a white frame; the gold one is the pick) */
.btn.club.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.club.on, body.touchdev .btn.club.on.focus { background: var(--navy3); box-shadow: inset 0 0 0 var(--px) var(--gold), var(--fr); color: var(--gold); }
.selbot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 2px; }
.selopts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.selopts .selrow { grid-template-columns: 84px minmax(0, 1fr); }
.cu { color: var(--gray); padding-left: 2px; }
.match { display: flex; align-items: flex-start; justify-content: center; gap: 14px; min-width: 0; }
.match .vs { align-self: center; }
.mc { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; flex: 1; }
.mc .mw { color: var(--cyan); } .mc .mn { color: var(--white); } .mc .ml { color: var(--gray); line-height: 1.5; } .mc .mb { color: var(--dim); line-height: 1.5; }
.match .vs { font-size: var(--l); color: var(--gold); text-shadow: 3px 3px 0 var(--red); }
/* ---------- SETTINGS (ui.js settings): LEVEL, QUARTERS, SOUND, MUSIC ---------- */
.setbox { width: min(640px, 100%); }
.setbox .selrow { grid-template-columns: 110px minmax(0, 1fr); }
.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; }
/* the final */
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(1180px, 100%); }
.boxcol { background: var(--panel); box-shadow: var(--fr); padding: 8px; overflow-x: auto; touch-action: pan-x pan-y; }
.bx { width: 100%; }
.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); } .bx tr.tt td { color: var(--gold); border-top: 2px solid var(--dim); }
.hfoot { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- the Gym Challenge (gym.js): the road and its card, the badge case, the Hall of Fame, the final's moment
   (SLUGGER's, slugger.css) ---------- */
.gsub { 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: 16px; 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: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* (the Elite Four, the Champion and, after the Hall of Fame, the Legends: one row) */
.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; max-width: 100%; }
.btn.stage b.long { letter-spacing: -1px; }
.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); color: var(--white); 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) { 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; }
.spr.gray { filter: grayscale(1) brightness(0.8); }
.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; }

/* ---------- the HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
/* the scorebug: original — two team plates on a dark bar, the period, the clock and the shot clock in the middle */
.bug { position: absolute; left: 50%; top: calc(6px + var(--st)); transform: translateX(-50%); display: flex; align-items: stretch; background: var(--ink); box-shadow: var(--fr); }
.bug .tm { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; background: var(--navy); border-left: 6px solid var(--tc, var(--gray)); min-width: 92px; }
.bug .tm.home { border-left: 0; border-right: 6px solid var(--tc, var(--gray)); flex-direction: row-reverse; padding: 6px 8px 6px 10px; }
.bug .tm .ab { color: var(--white); } .bug .tm .r { color: var(--gold); font-size: var(--m); min-width: 30px; text-align: center; }
.bug .tm .poss { width: 6px; height: 6px; background: transparent; }
.bug .tm.up .poss { background: var(--orange); box-shadow: 0 0 0 1px var(--ink); }
.bug .tm .bonus { position: absolute; bottom: -12px; left: 8px; font-style: normal; font-size: 6px; color: var(--red); background: var(--ink); padding: 2px 3px; display: none; }
.bug .tm.home .bonus { left: auto; right: 8px; }
.bug .tm .bonus.on { display: block; }
.bug .mid { display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--white); }
.bug .mid .q { color: var(--cyan); } .bug .mid .sc { min-width: 20px; color: var(--gold); text-align: right; }
.bug .mid .sc.low { color: var(--red); }
.hudbtns { position: absolute; right: calc(8px + var(--sr)); top: calc(6px + var(--st)); display: flex; gap: 8px; pointer-events: auto; }
.hb { width: 36px; height: 32px; background: var(--navy2); box-shadow: var(--bevel), var(--fr); position: relative; }
.hb .bars::before, .hb .bars::after { content: ""; position: absolute; top: 9px; width: 5px; height: 14px; background: var(--white); }
.hb .bars::before { left: 11px; } .hb .bars::after { left: 20px; }
.hb .note { position: absolute; left: 11px; top: 7px; 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; }
.hb.mute.wait .note::before, .hb.mute.wait .note::after { background: var(--gold); box-shadow: 3px 0 0 0 var(--gold); }
.hb.mute.wait .note::before { box-shadow: none; }
.hb.mute.wait .note { animation: blink 1s steps(1) infinite; }
.toast { position: absolute; left: 50%; top: calc(52px + var(--st)); transform: translateX(-50%); padding: 7px 10px; background: var(--ink); color: var(--gold); box-shadow: var(--fr-gold); white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
.legend { position: absolute; left: calc(10px + var(--sl)); bottom: calc(8px + var(--sb)); color: var(--gray); background: rgba(5, 6, 26, 0.7); padding: 5px 7px; }
.legend:empty { display: none; }
body.replaying .hud .bug, body.replaying .touch .tbtns { visibility: hidden; }
/* timeouts left, a row along each plate's foot to its inner end (under the score): gold squares left to call, hollow
   ones used (or locked by the fourth quarter's limits) — the count and the fill read without the color. The plates'
   room for the row is set at the end of this file, after the phones' paddings */
.bug .tm .tos { position: absolute; bottom: 3px; left: 8px; right: 8px; display: flex; justify-content: flex-end; gap: 2px; }
.bug .tm.home .tos { justify-content: flex-start; }
.tos i { display: block; flex: none; width: 7px; height: 4px; box-shadow: inset 0 0 0 1px var(--gray); }
.tos i.on { background: var(--gold); box-shadow: 0 0 0 1px var(--ink); }
.tos.many { gap: 1px; } .tos.many i { width: 5px; }
/* a timeout's break (ui.js breakCard): a TV break card over the floor, above the touch controls (a tap on it skips; hidden
   whenever a menu shows); who called it in his team's color, the score, the period, both teams' timeouts, the seconds */
.tobreak { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%); z-index: 6; min-width: min(360px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 9px; background: var(--ink) var(--d50); background-size: 4px 4px; background-color: rgba(11, 13, 26, 0.94);
  box-shadow: var(--fr-gold); pointer-events: none; text-align: center; }
.tobreak.tap { pointer-events: auto; cursor: pointer; }
.tobreak .tbh { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding-left: 8px; border-left: 6px solid var(--tc, var(--gold)); }
.tobreak .tbw { font-size: var(--l); color: var(--gold); text-shadow: 3px 3px 0 var(--red2); }
.tobreak .tbn { font-size: var(--s); color: var(--white); }
.tobreak .tbs { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tobreak .tbt1 { display: grid; grid-template-columns: auto auto; align-items: center; justify-items: start; gap: 4px 8px; }
.tobreak .tbt1 b { font-weight: normal; color: var(--white); } .tobreak .tbt1 em { font-style: normal; font-size: var(--m); color: var(--gold); }
.tobreak .tbt1 .tos { display: flex; gap: 2px; } .tobreak .tbt1 small { font-size: 7px; color: var(--gray); }
.tobreak .tbq { color: var(--cyan); line-height: 1.6; }
.tobreak .tbt { color: var(--cyan); }
.tobreak.tap .tbt { animation: blink 1.2s steps(2) infinite; }
/* on a phone held sideways the card hangs under the scorer's table, not over it (bench.js: the table's LED front says
   TIMEOUT through the break; its foot is 40.4% down the floor's picture there, the far sideline 43%) */
@media (max-height: 520px) and (orientation: landscape) { .tobreak { top: 42%; transform: translate(-50%, 0); } }
/* the pause menu's TIMEOUT: how many, and when it'll be taken; disabled with none left */
.btn.tobtn { flex-direction: column; gap: 5px; }
.btn.tobtn small { font-size: 7px; color: var(--gray); line-height: 1; }
.btn[disabled], .btn[disabled]:hover { color: var(--dim); background: var(--navy); box-shadow: var(--fr); cursor: default; transform: none; }
/* the final: each team's timeouts and the rules' calls against it, under its box */
.bxnote { margin-top: 6px; font-size: var(--s); line-height: 1.6; color: var(--gray); white-space: normal; }
/* how to play's hint: a key in gold, as in the columns */
.hint b { color: var(--gold); font-weight: normal; }

/* ---------- touch: a floating stick on the left, three buttons on the right ---------- */
/* (every game surface: no double-tap zoom, no long-press callout, text selection or magnifier; touch.js says why — the
   page's own touch-action is manipulation, the menus' .screen pan-y so they scroll) */
#game, .hud, .hud *, .touch, .touch * { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.touch { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.touch .zone { position: absolute; left: 0; top: 56px; bottom: 0; width: 58%; pointer-events: auto; touch-action: none; }
.touch .base { position: absolute; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(11, 13, 26, 0.45); box-shadow: var(--fr); display: none; }
.touch .base.on { display: block; }
.touch .knob { position: absolute; left: 24px; top: 24px; width: 36px; height: 36px; background: var(--gold); box-shadow: var(--fr); }
/* the buttons: pixel art drawn as crisp SVG at 3 px a pixel (allhoops/touch.js): SHOOT the game's ball (a hand on
   defense, where it blocks), PASS a disc, the special a pill; pressed, a button squashes and darkens */
.touch .tbtns { position: absolute; right: calc(10px + var(--sr)); bottom: calc(10px + var(--sb)); width: 180px; height: 148px; pointer-events: none; }
.touch .tb { position: absolute; pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; padding: 0;
  background: none; box-shadow: none; color: var(--white); font-size: var(--s); }
.touch .tb svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 92%; }
.touch .tb .tl { position: relative; text-shadow: 2px 2px 0 var(--ink); }
.touch .tb.down svg { transform: scale(1.06, 0.88); filter: brightness(0.78); }
.touch .tb.down .tl { color: var(--gold); transform: translateY(3px); }
.touch .tb.b2 { right: 0; bottom: 0; width: 93px; height: 93px; }
.touch .tb.b2 .hand, .touch .tb.b2.def .ball { display: none; }
.touch .tb.b2.def .hand { display: block; }
.touch .tb.b2 .tl { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 3px 5px 2px; background: var(--ink); box-shadow: var(--fr); text-shadow: none; white-space: nowrap; }
.touch .tb.b2.down .tl { transform: translate(-50%, 2px); }
.touch .tb.b1 { right: 105px; bottom: 6px; width: 72px; height: 72px; }
.touch .tb.b3 { right: 0; bottom: 105px; width: 120px; height: 42px; font-size: 7px; }
.touch .tb.b3 .tl { padding: 0 10px; }
.touch .tb.b3.sp { color: var(--magenta); }
.touch .tb.b3.used { color: var(--dim); }
body:not(.touchdev) .touch .tbtns, body:not(.touchdev) .touch .zone { display: none; }

/* ---------- a phone held upright: the card over everything (hoops.html .turn; allhoops/orient.js holds the game under
   it). A phone: a coarse pointer and a short side of at most 600 px (orient.js's UPRIGHT says the same); a tablet held
   upright or a desktop window however narrow plays as it is ---------- */
.turn { position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center;
  padding: calc(60px + var(--st)) calc(20px + var(--sr)) calc(96px + var(--sb)) calc(20px + var(--sl)); background: #05061a var(--d50); background-size: 4px 4px; touch-action: none; }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) { .turn { display: flex; } }
.turn-back { position: absolute; left: calc(12px + var(--sl)); top: calc(12px + var(--st)); display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 4px;
  font-size: var(--s); color: var(--white); text-decoration: none; background: var(--navy2); box-shadow: var(--bevel), var(--fr); }
.turn-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; }
.turn-art { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
/* the phone: a pixel handset (stepped white frame, ink round it) with a ball on its screen, upright, then a quarter turn */
.turn-phone { position: relative; display: block; width: 42px; height: 72px; background: var(--navy); box-shadow: var(--fr-white); animation: hturn 2.4s steps(1) infinite; }
.turn-phone::before { content: ""; position: absolute; left: 15px; top: 3px; width: 12px; height: 3px; background: var(--dim); }
.turn-phone i { position: absolute; left: 15px; top: 30px; width: 12px; height: 12px; background: var(--orange); box-shadow: 0 -3px 0 0 var(--orange), 0 3px 0 0 var(--orange), -3px 0 0 0 var(--orange), 3px 0 0 0 var(--orange); }
.turn-phone i.px { left: 4px; top: 19px; width: 33px; height: 33px; background: none; box-shadow: none; } /* (the SHOOT button's ball, orient.js) */
.turn-phone i.px svg { display: block; width: 100%; height: 100%; }
.turn-arrow { position: absolute; right: 2px; top: 6px; width: 30px; height: 24px; animation: harrow 2.4s steps(1) infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' shape-rendering='crispEdges' fill='%23ffd23e'%3E%3Crect x='2' width='4' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='6' y='1' width='1' height='1'/%3E%3Crect y='2' width='1' height='2'/%3E%3Crect x='7' y='2' width='1' height='3'/%3E%3Crect x='5' y='5' width='5' height='1'/%3E%3Crect x='6' y='6' width='3' height='1'/%3E%3Crect x='7' y='7' width='1' height='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@keyframes hturn { 0%, 49% { transform: none; } 50%, 100% { transform: rotate(90deg); } }
@keyframes harrow { 0%, 49% { visibility: visible; } 50%, 100% { visibility: hidden; } }
:root { --fr-white: 0 -3px 0 0 var(--white), 0 3px 0 0 var(--white), -3px 0 0 0 var(--white), 3px 0 0 0 var(--white), 0 -6px 0 0 var(--ink), 0 6px 0 0 var(--ink), -6px 0 0 0 var(--ink), 6px 0 0 0 var(--ink), -3px -3px 0 0 var(--ink), 3px -3px 0 0 var(--ink), -3px 3px 0 0 var(--ink), 3px 3px 0 0 var(--ink); }
.turn-text { max-width: 300px; font-size: 12px; line-height: 1.8; color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.turn-full { font-size: var(--s); }
.turn .fine { position: absolute; left: calc(16px + var(--sl)); right: calc(16px + var(--sr)); bottom: calc(14px + var(--sb)); margin: 0 auto; }

/* ---------- ALL-22 HOOPS on TV (allhoops/tv.js; the owner's "Let's do it", 2026-11-10), one block: the stat cards in
   dead time, the final's Player of the Game and NEW RECORD, the box score a team at a time on a phone, YOUR RECORDS,
   how to play for the device in hand ---------- */
/* a stat card: a lower third in the HUD (hidden with it), in its room at the screen's foot — from the edge on the
   stick's side to the touch buttons, over the keys' legend (--lg: tv.js rise) — where tv.js put sets it (its left
   margin: the screen's middle where that's free); the timeout card's look; no pointer events (the stick's zone is
   under it). ghost: laid out unseen while its place is found. tight, slim: without its sprites, without the leaders'
   threes, where it wouldn't go otherwise (tv.js lay) */
.tvcard { position: absolute; left: calc(10px + var(--sl)); right: calc(10px + var(--sr)); bottom: calc(8px + var(--sb) + var(--lg, 0px)); display: flex; justify-content: flex-start; pointer-events: none; }
body.touchdev .tvcard:not(.wide) { right: calc(200px + var(--sr)); }
body.replaying .tvcard, .tvcard.ghost { visibility: hidden; }
.tvc { flex: none; display: flex; align-items: center; gap: 8px; padding: 1px 12px 1px 6px; border-left: 6px solid var(--tc, var(--gold)); white-space: nowrap;
  background: var(--ink) var(--d50); background-size: 4px 4px; background-color: rgba(11, 13, 26, 0.94); box-shadow: var(--fr-gold); }
/* (it wipes on from its left in four steps, inside its own box: never a pixel outside the place it was given) */
.tvcard.on .tvc { animation: tvin 0.16s steps(4) both; }
@keyframes tvin { from { clip-path: inset(-6px 100% -6px -6px); } to { clip-path: inset(-6px); } }
.tvc .spr { display: block; flex: none; }
.tvt { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 5px; }
.tvt b, .tvh.run { font-weight: normal; font-size: var(--m); color: var(--gold); text-shadow: 2px 2px 0 var(--red2); }
.tvt span { color: var(--white); }
/* the leaders: a headline over two rows (a table's: a column dropped is dropped in both) */
.tvc.lead { flex-direction: column; align-items: stretch; gap: 3px; padding: 5px 10px 4px 8px; border-left: 0; }
.tvh { color: var(--cyan); }
.tvg { display: table; border-collapse: collapse; }
.tvr { display: table-row; }
.tvr > * { display: table-cell; vertical-align: middle; padding: 1px 0 1px 8px; }
.tvr > i { width: 6px; padding: 0; background: var(--tc, var(--gray)); border-bottom: 2px solid var(--ink); }
.tvr em { font-style: normal; color: var(--white); }
.tvr b { font-weight: normal; color: var(--gold); }
.tvr u { text-decoration: none; }
.tvr span { color: var(--white); text-align: right; }
.tvr .tvf { color: var(--gray); }
.tvcard.tight .spr, .tvcard.tight .tvr u, .tvcard.slim .t3 { display: none; }
@media (max-width: 480px) { .tvr .t3 { display: none; } }
/* the final (ui.js over, gym.js challengeOver; tv.js finRow): the Player of the Game — his sprite as the players are
   drawn, his name and spot, his night in big numbers — beside the line score, NEW RECORD under it. The box score's
   tables stay on the final only where there's a laptop's room (BOX SCORE has them everywhere) */
.finbox { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(940px, 100%); }
.fin { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 100%; }
.potg { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 18px 10px 10px; background: var(--panel); box-shadow: var(--fr); border-left: 6px solid var(--tc, var(--gold)); }
.pgart { flex: none; display: flex; align-items: center; justify-content: center; background: var(--ink) var(--d50); background-size: 4px 4px; box-shadow: var(--fr); }
.pgart .spr { display: block; animation: badgein 0.9s steps(6) both; }
.pgtx, .pgw { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pgk { color: var(--cyan); letter-spacing: 1px; }
.pgn { font-size: var(--l); line-height: 1.1; color: var(--gold); text-shadow: 3px 3px 0 var(--red2); }
.pgs { color: var(--gray); line-height: 1.4; }
.pgl { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 2px; }
.pgl span { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--gray); }
.pgl b { font-weight: normal; font-size: var(--l); line-height: 1; color: var(--white); text-shadow: 3px 3px 0 var(--ink2); }
.recs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; max-width: 100%; }
.recnew { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px 3px 4px; background: var(--ink); box-shadow: var(--fr-gold); white-space: nowrap; }
.recnew b { font-weight: normal; padding: 3px 4px 2px; color: var(--ink); background: var(--gold); animation: recnew 0.5s steps(2) 6; }
@keyframes recnew { 50% { background: var(--white); } }
.recnew span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--white); } .recnew i { font-style: normal; color: var(--gray); }
.finbox.small .potg { gap: 10px; padding: 6px 14px 6px 8px; }
.finbox.small .pgtx, .finbox.small .pgw { gap: 6px; }
.screen.over .boxwrap { display: none; }
@media (min-width: 1000px) and (min-height: 860px) { .screen.over .boxwrap { display: grid; } }
body.portrait .fin { flex-direction: column; }
body.portrait .recnew { white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.5; }
/* BOX SCORE (ui.js boxScreen): where two tables won't fit (a phone), a team at a time, its chips beside the line score;
   a narrow window drops the columns it can spare (.x) */
.boxhead { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; }
.boxwrap.one { grid-template-columns: 1fr; width: min(760px, 100%); }
.boxwrap.one .boxcol { display: none; } .boxwrap.one .boxcol.on { display: block; }
@media (max-width: 480px) { .bx .x { display: none; } }
/* YOUR RECORDS (tv.js recordsPage): the length's chips, then the team's, a player's and showtime's bests side by side */
.screen.records .recq { grid-template-columns: auto auto; justify-content: center; }
/* (--sp: a holder's sprite as drawn, tv.js; --rh: his row, as tall as keeps one sprite off the next where the screen
   has the height for six of them, and what the screen has where it hasn't) */
.recbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.08fr); gap: 16px; width: min(980px, 100%); --rh: max(12px, min(calc(var(--sp, 22px) - 5px), calc((100vh - 180px - var(--sb, 0px)) / 6 - 5px))); }
.rcol { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rcol h3 { margin-bottom: 2px; }
.rr { display: flex; align-items: center; gap: 8px; min-height: 12px; white-space: nowrap; }
.who .rr { min-height: var(--rh); }
/* (a label and, for what the last game beat, NEW after it: where the two don't fit a row, NEW wraps out of sight and
   the label's white says it; a label too long by itself is cut short with its dots) */
.rr .rl { display: flex; flex-wrap: wrap; min-width: 0; max-height: 1.25em; margin-right: auto; overflow: hidden; line-height: 1.25; color: var(--gray); }
.rr .rt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rr b { font-weight: normal; color: var(--gold); }
.rr .rw { display: flex; align-items: center; gap: 4px; flex: 0 0 132px; min-width: 0; color: var(--white); }
.rr .rw .spr { display: block; flex: none; margin: calc((var(--rh) - var(--sp, 22px)) / 2) 0; }
.rr .rn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rr.new .rl { color: var(--white); }
.rr.new .rl::after { content: "· NEW"; margin-left: 8px; color: var(--gold); }
.rr.new b { animation: blink 0.5s steps(2) 6; }
/* (a screen of one device pixel to the CSS one, with room: the holders' sprites at their 64 px) */
.recbox.big { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.recbox.big .rr .rw { flex-basis: 204px; gap: 8px; }
.rnote { margin-top: auto; padding-top: 2px; color: var(--dim); line-height: 1.5; }
.rask { align-self: center; color: var(--gold); line-height: 1.4; }
body.portrait .recbox { grid-template-columns: 1fr; }
/* how to play for the device in hand (ui.js how): the touch buttons' own art, a controller's buttons or the keys beside
   what each does, WITH THE BALL and on DEFENSE */
.howdev { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.howdev .hon { grid-column: 1 / -1; color: var(--gold); }
.howdev .hcol { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.howdev h3 { margin-bottom: 0; }
.hrow { display: grid; grid-template-columns: var(--pw, 44px) minmax(0, 1fr); align-items: center; gap: 10px; }
.hpic { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px; }
.hpic svg, .hpic img { display: block; flex: none; }
.hpic .ball, .hpic .hand { width: 31px; height: 31px; } .hpic .disc { width: 24px; height: 24px; } .hpic .pill { width: 40px; height: 14px; } .hpic .stk { width: 28px; height: 28px; }
.pg { width: 30px; height: 22px; image-rendering: pixelated; image-rendering: crisp-edges; }
.hrow p { margin: 0; font-size: var(--s); line-height: 1.5; color: var(--white); }
.hrow p b, .howdev .hon b { color: var(--gold); font-weight: normal; }
.kc { display: inline-block; padding: 3px 4px 2px; line-height: 1; color: var(--white); background: var(--navy3); box-shadow: 0 2px 0 0 var(--ink2), 0 0 0 2px var(--ink); }
.hrow p .pg { display: inline-block; vertical-align: middle; margin: -9px 0 -7px; }
.hrow p .kc, .hint .kc { margin: 0 1px; }
.howdev[data-dev="keyboard"] { --pw: 78px; } .howdev[data-dev="gamepad"] { --pw: 64px; }
body.portrait .howdev { grid-template-columns: 1fr; }
/* a phone held sideways: tight */
@media (max-height: 520px) {
  .finbox { gap: 6px; }
  .fin { gap: 10px; }
  .potg { gap: 10px; padding: 6px 14px 6px 8px; }
  .pgtx, .pgw { gap: 6px; }
  /* (under a Gym Challenge's moment: his spot beside his name, each number's word beside it — still the big numbers,
     in a card no taller than his sprite) */
  .finbox.small .pgw { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .finbox.small .pgl { margin-top: 0; }
  .finbox.small .pgl span { flex-direction: row; align-items: baseline; gap: 4px; }
  .pgl { gap: 4px 14px; }
  /* (two NEW RECORDs stay on one row, so they never cost the final a second one: the smallest phones leave out what
     the mark was, and a name too long even then is cut short) */
  .recs { gap: 9px 18px; flex-wrap: nowrap; }
  .boxwrap.one .bx th, .boxwrap.one .bx td { padding: 2px 4px; }
  .boxwrap.one .boxcol { padding: 5px 8px; }
  .boxwrap.one .bxnote { margin-top: 3px; line-height: 1.4; }
  .screen.records { gap: 6px; padding-top: calc(8px + var(--st)); padding-bottom: calc(8px + var(--sb)); }
  .recbox { gap: 12px; }
  .rcol { gap: 5px; }
  .howdev { gap: 5px 16px; }
  .howdev .hcol { gap: 5px; }
  .hrow { gap: 8px; }
  .hrow p { line-height: 1.4; }
}
@media (max-height: 520px) and (max-width: 720px) { .recnew i { display: none; } }
/* a laptop or bigger: the cards and the Player of the Game a size up (tv.js roomy says the same) */
@media (min-width: 1000px) and (min-height: 700px) {
  .tvc { gap: 12px; padding: 2px 18px 2px 8px; }
  .tvt { gap: 8px; }
  .tvt b, .tvh.run { font-size: 16px; }
  .tvt span, .tvc.lead, .tvh { font-size: var(--m); }
  .tvc.lead { gap: 5px; padding: 8px 14px 6px 10px; }
  .tvr > * { padding-left: 12px; }
  .pgn { font-size: 24px; }
  .pgl b { font-size: 24px; }
  .finbox.small .pgn, .finbox.small .pgl b { font-size: var(--l); }
  .hpic .ball, .hpic .hand { width: 62px; height: 62px; } .hpic .disc { width: 48px; height: 48px; } .hpic .pill { width: 80px; height: 28px; } .hpic .stk { width: 56px; height: 56px; }
  .howdev, .howdev[data-dev="keyboard"], .howdev[data-dev="gamepad"] { --pw: 96px; }
  .hpic .pg { width: 45px; height: 33px; }
  .howdev { gap: 10px 28px; }
  .howdev .hcol { gap: 10px; }
  .hrow p { line-height: 1.7; }
}

/* ---------- phones ---------- */
@media (max-width: 900px), (max-height: 520px) {
  :root { --l: 16px; --m: 10px; }
  .howbox { grid-template-columns: 1fr; }
  .boxwrap { grid-template-columns: 1fr; }
}
@media (max-height: 520px) { /* a phone sideways */
  .screen { gap: 8px; }
  .pbox { padding: 8px 10px; gap: 7px; }
  .bug .tm { min-width: 72px; padding: 4px 8px 4px 6px; } .bug .tm.home { padding: 4px 6px 4px 8px; }
}
/* the menus on a phone held sideways (320–430 px tall; tools/qa/hoops/gyms-ui.mjs: nothing scrolls): the title's logo
   beside its column (the buttons big, the site's bar over it all), PLAY NOW's rows and SETTINGS' tight */
@media (max-height: 520px) {
  .screen.title, .screen.play, .screen.settings { gap: 7px; padding-top: calc(8px + var(--st)); padding-bottom: calc(8px + var(--sb)); }
  .screen.title { gap: 10px; }
  .thead { gap: 10px; }
  .tmenu { gap: 10px; }
  .tmenu .btn { padding: 11px 12px; }
  .chip { padding: 6px 8px; }
  .screen.title .fine, .screen.play .fine, .screen.settings .fine { padding: 4px 8px; line-height: 1.6; }
  .selbox { width: 100%; gap: 6px; }
  .selrow { grid-template-columns: 76px minmax(0, 1fr); gap: 6px; }
  .clubs { gap: 5px; }
  .btn.club { padding: 2px 2px 4px; gap: 2px; }
  .selbot { gap: 10px; margin-top: 0; }
  .selopts { gap: 6px; }
  .selopts .selrow { grid-template-columns: 70px minmax(0, 1fr); }
  .match { gap: 6px; }
  .mc { gap: 2px; } .mc .ml { line-height: 1.4; } .mc .mb { display: none; }
  .match .vs { font-size: var(--m); }
  .setbox { gap: 8px; }
  .setbox .selrow { grid-template-columns: 90px minmax(0, 1fr); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .tmain { flex-direction: row; gap: 40px; }
  .tmenu { width: min(290px, 42vw); }
}
@media (max-height: 340px) { .title .sub { display: none; } }
/* how to play on a phone held sideways: its three columns side by side again, tight */
@media (max-height: 520px) and (min-width: 600px) {
  .screen.how { gap: 6px; padding-top: calc(8px + var(--st)); padding-bottom: calc(8px + var(--sb)); }
  .screen.how .howbox { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .screen.how .howbox p { line-height: 1.5; margin-bottom: 5px; }
  .screen.how h3 { margin-bottom: 5px; }
  .screen.how .hint { line-height: 1.5; }
  .screen.how .menu .btn { padding: 9px 12px; font-size: var(--s); }
  .screen.how .fine { padding: 4px 8px; line-height: 1.6; }
}
/* a laptop or bigger: the title's buttons SLUGGER's size, the room's there */
@media (min-width: 1000px) and (min-height: 700px) {
  .screen.title { gap: 20px; }
  .tmenu { width: 380px; gap: 14px; }
  .tmenu .btn { font-size: 16px; padding: 14px 18px; }
  .selbox .chip, .setbox .chip { padding: 9px 12px; }
}
/* a window or a tablet held upright (a phone upright has the turn card): PLAY NOW's matchup over its options */
body.portrait .selbot { grid-template-columns: 1fr; }
/* the Gym Challenge on a phone held sideways: the road and its card side by side, tight */
@media (max-height: 520px) {
  .screen.gym, .screen.badges, .screen.hof, .screen.over, .screen.box { gap: 6px; padding-top: calc(8px + var(--st)); padding-bottom: calc(8px + var(--sb)); }
  .hfoot { gap: 8px; }
  .hfoot .btn { font-size: var(--s); padding: 9px 12px; }
  .gymbox { gap: 8px; }
  .groad { gap: 4px; }
  .stages { gap: 5px; }
  .btn.stage { padding: 4px 2px 3px; gap: 2px; }
  .btn.stage.next::after { right: 3px; top: 5px; }
  .ginfo { padding: 8px; gap: 6px; }
  .gcard { gap: 4px; }
  .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; }
  .linescore th, .linescore td { padding: 3px 6px; }
}
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 { 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 .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; }
body.portrait .touch .zone { top: 40%; width: 60%; }
body.portrait .touch .tbtns { bottom: calc(14px + var(--sb)); }
@media (max-width: 420px) {
  .bug .tm { min-width: 64px; gap: 5px; padding: 4px 6px; } .bug .tm.home { padding: 4px 6px; }
  .bug .mid { padding: 0 6px; gap: 5px; }
  .hudbtns { top: calc(46px + var(--st)); }
  .hb { width: 32px; height: 28px; }
  .selrow { grid-template-columns: 64px minmax(0, 1fr); gap: 6px; }
  .clubs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .clubs.opp > :first-child { grid-column-start: auto; }
}
/* the scorebug's plates: room under the score for the timeouts' dots, at every size (after the phones' paddings) */
.bug .tm, .bug .tm.home { padding-bottom: 10px; }

/* ---------- the THREE-POINT CONTEST (allhoops/contest-ui.js): its lobby, the round's HUD over the floor, the pause,
   the result, the leaderboard. Nothing scrolls but the leaderboard's list inside its box (tools/qa/hoops/contest.mjs).
   The HUD wears the game's own classes (.hud .bug, .hudbtns, .toast, .legend; .touch .tb): the same look, and the shot
   meter keeps off them as it does the game's (meter.js measure) ---------- */
.screen.c3play { background: none; pointer-events: none; overflow: hidden; }
.screen.c3board, .screen.c3, .screen.c3over, .screen.c3pause, .screen.c3pick, .screen.c3vs, .screen.c3vscard, .screen.c3vsover { overflow: hidden; }
.c3box { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; width: min(940px, 100%); flex-direction: row; }
.c3col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
/* the shooter's pick: YOUR TEAM's ten in a row, a tap each (the game's club buttons: .btn.club, its .on the pick) */
.c3quick { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.btn.club.c3man { padding: 3px 1px 4px; }
.btn.club.c3man img { display: block; max-width: 100%; height: auto !important; aspect-ratio: 1 / 1; } /* (as big as its cell allows, square whatever size the sprite asked for) */
.c3quick.more { grid-template-columns: repeat(11, minmax(0, 1fr)); } /* (with one picked from all the others at its end) */
.c3shooter { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--gray); line-height: 1.4; }
.c3shooter span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3shooter b { color: var(--gold); }
.chip.c3any { flex: none; padding: 5px 8px; }
/* the picker: the box at the top (above a phone's keyboard), the grid of matches under it, which alone scrolls. The
   box's text is 16 px: an iPhone zooms the page for a smaller one. Typing needs the selection the page turns off. */
.screen.c3pick { justify-content: flex-start; }
.c3phead { display: flex; align-items: center; gap: 8px; width: min(940px, 100%); flex: none; }
.c3find { flex: 1; min-width: 0; font: inherit; font-size: 16px; line-height: 1.2; padding: 8px 10px; color: var(--white); background: var(--ink); border: 0; border-radius: 0;
  box-shadow: var(--fr); outline: none; -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text; touch-action: manipulation; }
.c3find:focus { box-shadow: var(--fr-gold); }
.c3find::placeholder { color: var(--gray); }
.c3find::-webkit-search-cancel-button { -webkit-appearance: none; }
.c3pnote { flex: none; color: var(--gray); white-space: nowrap; }
.c3pbox { width: min(940px, 100%); flex: 1 1 0; min-height: 0; display: flex; padding: 6px; }
.c3grid { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 4px; align-content: start;
  touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--navy3) var(--ink); }
.btn.club.c3mon { padding: 3px 2px 4px; gap: 2px; min-width: 0; }
.btn.club.c3mon img { display: block; }
.btn.club.c3mon b { font-weight: normal; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3man b, .c3rack b, .c3bl b, .c3how b, .c3bests b, .c3pts b, .c3shooter b { font-weight: normal; }
.c3how { line-height: 1.7; color: var(--white); }
.c3how b { color: var(--gold); }
.c3label { display: flex; justify-content: space-between; gap: 8px; color: var(--cyan); }
.c3label .gc { color: var(--gray); }
.c3best { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 8px 10px; background: var(--ink); box-shadow: var(--fr); }
.c3bl { display: flex; gap: 8px; line-height: 1.4; }
.c3bl span { flex: none; width: 72px; color: var(--gray); }
.c3bl b { color: var(--gold); }
.c3side { padding: 8px 10px; background: var(--ink); box-shadow: var(--fr); gap: 6px; }
.c3top, .c3list { list-style: none; display: flex; flex-direction: column; }
.c3top { flex: 1; }
.c3row { display: grid; grid-template-columns: 26px 18px minmax(0, 1fr) minmax(0, auto) 26px; gap: 6px; align-items: center; padding: 3px 4px; line-height: 1.25; }
/* who a round was shot with: his sprite (small, the row no taller for it) and his name */
.c3sp { width: 18px; height: 14px; display: flex; align-items: center; justify-content: center; }
.c3sp img { display: block; margin: -3px 0; }
.c3pk { color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 84px; }
.c3row.me .c3pk { color: var(--goldL, var(--gold)); }
.c3row:nth-child(even) { background: rgba(27, 33, 80, 0.55); }
.c3rk { color: var(--gray); text-align: right; }
.c3nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--white); }
.c3sc { color: var(--gold); text-align: right; }
.c3pf, .c3ms { color: var(--gray); text-align: right; white-space: nowrap; }
.c3row.top1 .c3rk { color: var(--gold); } .c3row.top2 .c3rk { color: #dfe2ee; } .c3row.top3 .c3rk { color: var(--orange); }
.c3row.me { background: var(--navy3); box-shadow: inset 0 0 0 var(--px) var(--gold); }
.c3row.me .c3nm { color: var(--gold); }
.c3msg { color: var(--gray); line-height: 1.7; padding: 6px 2px; }
.c3who { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 10px; color: var(--gray); line-height: 1.5; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.c3who:empty { display: none; }
/* the leaderboard: its name and TODAY | ALL-TIME on one line, the list in its box (the one thing here that scrolls),
   BACK and who the scores post as */
.c3head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.c3tabs { justify-content: center; }
.c3foot { align-items: center; }
.c3foot .c3who { padding: 4px 8px; background: rgba(5, 6, 26, 0.88); }
.c3lbox { flex: 1 1 0; min-height: 0; width: min(760px, 100%); padding: 8px 10px; gap: 6px; }
.c3note { color: var(--gray); line-height: 1.5; text-align: center; }
.c3list { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--navy3) var(--ink); }
.c3list .c3row { grid-template-columns: 34px 20px minmax(0, 1fr) minmax(0, 104px) 28px 96px 96px; padding: 4px 8px 4px 4px; flex: none; }
.c3list .c3pk { max-width: 104px; }
.c3more { display: flex; justify-content: center; padding: 8px 0; color: var(--gray); flex: none; }
/* the round's HUD: the points, the clock, the five racks' balls (a money ball's a size bigger; in: gold, out: dark) */
.c3bug { align-items: stretch; }
.c3pts { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; background: var(--navy); border-left: 6px solid var(--gold); }
.c3pts span { color: var(--gray); }
.c3pts b { min-width: 24px; font-size: var(--m); color: var(--gold); text-align: center; }
.c3bug .mid .ck { min-width: 40px; text-align: center; }
.c3bug .mid .ck.low { color: var(--red); }
.c3racks { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; }
.c3dots { display: inline-flex; align-items: center; gap: 2px; }
.c3dots i { display: block; flex: none; width: 6px; height: 6px; box-shadow: inset 0 0 0 1px var(--dim); }
.c3dots i.mb { width: 8px; height: 8px; box-shadow: inset 0 0 0 1px var(--gold); }
.c3dots i.cur { box-shadow: inset 0 0 0 1px var(--white); animation: blink 0.5s steps(2) infinite; }
.c3dots i.on { background: var(--gold); box-shadow: 0 0 0 1px var(--ink); }
.c3dots i.mb.on { background: var(--goldL); box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 1px var(--ink); }
.c3dots i.off { background: var(--red2); box-shadow: inset 0 0 0 1px var(--ink2); }
/* SHOOT: the game's ball button; on a laptop too (a mouse can hold it); dimmer until the next ball's in his hands */
body:not(.touchdev) .c3touch .tbtns { display: block; }
.c3touch .c3keep { visibility: hidden; pointer-events: none; } /* (the rack in use: the shot meter keeps off it, contest-ui.js keepOff) */
.c3touch .tb.wait svg { filter: brightness(0.62); }
.c3touch .tb.wait .tl { color: var(--gray); }
.c3hud .legend { max-width: calc(100vw - 150px - var(--sl) - var(--sr)); line-height: 1.5; }
/* head to head (VS COMPUTER): the levels, the card between the two rounds, the result; SKIP where SHOOT is while
   the computer's round is shown */
.c3vsbox { width: min(760px, 100%); align-items: center; text-align: center; }
.c3vsman { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.c3vsman b { font-weight: normal; color: var(--gold); }
.c3vsman span, .c3vsman em { color: var(--gray); font-style: normal; }
.c3levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.btn.c3level { flex-direction: column; gap: 6px; padding: 12px 6px; }
.btn.c3level span { font-size: var(--s); color: var(--gray); }
.c3vsres { flex-direction: row; justify-content: center; align-items: center; gap: 20px; }
.c3vsres .c3vsman { flex: 1 1 0; }
.c3vsres .c3vsman.lose b, .c3vsres .c3vsman.lose .c3vspts { color: var(--gray); } /* (the winner keeps the gold) */
.c3vspts { font-weight: normal; font-size: 28px; line-height: 1.1; color: var(--gold); }
.c3vsmid { color: var(--cyan); }
.c3touch .c3skip { display: none; position: absolute; right: calc(16px + var(--sr)); bottom: calc(20px + var(--sb)); pointer-events: auto; }
.c3touch.auto .c3skip { display: inline-flex; }
.c3touch.auto .tb.b2 { display: none; }
.c3hud.auto .legend { display: none; }
/* the result */
.c3kick { padding: 5px 10px 4px; color: var(--cyan); background: var(--ink); box-shadow: var(--fr); letter-spacing: 1px; }
.c3kick.new { color: var(--gold); box-shadow: var(--fr-gold); animation: blink 0.5s steps(2) 5; }
.c3racks.big { gap: 16px; padding: 8px 14px; background: var(--panel); box-shadow: var(--fr); }
.c3rack { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.c3rack b { color: var(--gold); }
.c3racks.big { align-items: center; }
.c3rack.c3shot { margin-right: 4px; } .c3rack.c3shot b { color: var(--white); }
.c3racks.big .c3dots i { width: 8px; height: 8px; }
.c3racks.big .c3dots i.mb { width: 10px; height: 10px; }
.c3status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; min-height: 26px; max-width: min(860px, 100%); padding: 4px 10px; text-align: center; line-height: 1.6; color: var(--white); background: rgba(5, 6, 26, 0.88); }
.c3status:empty { visibility: hidden; }
.c3status.good { color: var(--green); } .c3status.bad { color: var(--redL); }
.c3status.wait { color: var(--gray); animation: blink 1s steps(2) infinite; }
.c3bests { padding: 4px 10px; color: var(--gray); background: rgba(5, 6, 26, 0.88); text-align: center; line-height: 1.5; }
.c3bests b { color: var(--gold); }
@media (max-height: 520px) { /* a phone held sideways */
  .screen.c3, .screen.c3board, .screen.c3over, .screen.c3pause { gap: 6px; padding-top: calc(8px + var(--st)); padding-bottom: calc(8px + var(--sb)); }
  .screen.c3 .fine, .screen.c3board .fine, .screen.c3over .fine, .screen.c3pause .fine { padding: 4px 8px; line-height: 1.6; }
  .c3box { gap: 8px; }
  .c3col { gap: 6px; }
  .c3how { line-height: 1.5; }
  .c3best { padding: 6px 8px; gap: 4px; }
  .c3side { padding: 6px 8px; gap: 4px; }
  .c3row { padding: 2px 4px; }
  .c3list .c3row { padding: 3px 8px 3px 4px; }
  .c3racks.big { gap: 12px; padding: 6px 12px; }
  .btn.c3level { padding: 8px 4px; gap: 4px; }
  .c3vspts { font-size: 22px; }
  .screen.c3vs, .screen.c3vscard, .screen.c3vsover { gap: 6px; padding-top: calc(8px + var(--st)); padding-bottom: calc(8px + var(--sb)); }
  .screen.c3vs .fine, .screen.c3vscard .fine, .screen.c3vsover .fine { padding: 4px 8px; line-height: 1.6; }
  .c3status { min-height: 22px; padding: 3px 8px; }
  .c3pts { padding: 4px 8px 4px 6px; }
}
/* a narrow screen: the lobby's two boxes one over the other, the board's rows without the PERFECT column, the HUD's
   racks under the points and the clock */
body.portrait .c3box { grid-template-columns: 1fr; }
@media (max-width: 600px) {
  .c3list .c3row { grid-template-columns: 30px 18px minmax(0, 1fr) 24px 84px; }
  .c3list .c3pf, .c3list .c3pk { display: none; }
  .c3quick { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .c3quick.more { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .c3pnote { display: none; }
  .c3bug { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 16px); }
  .c3racks { flex-basis: 100%; justify-content: center; padding: 4px 6px 6px; background: var(--ink); }
  .c3racks.big { flex-basis: auto; gap: 8px; padding: 6px 8px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
  /* (the result in a narrow window: who shot it on a line of his own over the five racks; in one row with them they
     were 12 px wider than the screen) */
  .c3racks.big .c3shot { flex-basis: 100%; margin-right: 0; }
}
/* (a window an upright phone wide: the game's pause and sound sit under its one-row scorebug there; the round's bug
   is two rows, the racks under the points, so they sit under that, and a toast under them) */
@media (max-width: 420px) {
  .c3hud .hudbtns { top: calc(56px + var(--st)); }
  .c3hud .toast { top: calc(90px + var(--st)); }
}