:root {
    --night: #0a1428;
    --terrace: #13213a;
    --stand: #1b2d4d;
    --seat: #2b4270;
    --chalk: #eef2f5;
    --mist: #9fb0c9;
    --amber: #ffb000;
    --pitch: #1e7a46;
    --pitch-2: #22874e;
    --kit: #d7263d;
    --violet: #6b4bd8;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
  /* no double-tap zoom on fast taps, no grey flash on tapped buttons (each has its own pressed look) */
  html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
  body { background: var(--night); color: var(--chalk); font-family: 'Pixelify Sans', sans-serif; font-size: 17px; line-height: 1.4; font-variant-ligatures: none; }
  #bg { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; z-index: 0; }
  .veil { position: fixed; inset: 0; z-index: 0; background: radial-gradient(90% 70% at 50% 45%, rgba(10,20,40,.55), rgba(10,20,40,.88)); }
  main { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: 28px 16px 48px; }
  [hidden] { display: none !important; }
  html.loading body { opacity: 0; }
  body { transition: opacity .15s ease-out; }
  /* --vvh is the height above the phone keyboard (app.js fitViewport) */
  body.playing { height: var(--vvh, 100dvh); overflow: hidden; }
  /* main is not clipped: Safari on iPhone cut the fixed table at main's keyboard-sized height, so the
     strip above the keyboard showed crowd instead of rows (user, ?debug=1 readout); body keeps the clip */
  body.playing main { height: var(--vvh, 100dvh); }

  .panel { background: rgba(19,33,58,.86); backdrop-filter: blur(3px); border-radius: 8px; box-shadow: inset 0 0 0 2px var(--seat), 0 10px 30px rgba(0,0,0,.35); }

  /* hub */
  .sublogo { font-family: 'Jersey 10', sans-serif; font-size: clamp(24px, 6vw, 34px); letter-spacing: .04em; color: var(--amber); margin: 6px 0 0; }
  .logo { font-family: 'Jersey 10', sans-serif; font-size: clamp(56px, 16vw, 112px); line-height: .82; margin: 36px 0 0; color: var(--chalk); text-shadow: 4px 4px 0 var(--kit), 8px 8px 0 rgba(0,0,0,.35); }
  .lede { color: var(--mist); max-width: 34ch; margin: 18px 0 26px; }
  .kick { display: block; width: 100%; font-family: 'Jersey 10', sans-serif; font-size: 40px; letter-spacing: .02em; color: var(--night); background: var(--amber); border: 0; border-radius: 6px; padding: 10px 0 6px; cursor: pointer; box-shadow: 0 6px 0 #b37b00, 0 0 30px rgba(255,176,0,.35); transition: transform .08s, box-shadow .08s; }
  .kick:active { transform: translateY(4px); box-shadow: 0 2px 0 #b37b00; }
  .meta { display: flex; justify-content: space-between; color: var(--mist); font-size: 14px; margin-top: 14px; }
  .legend { margin-top: 30px; padding: 14px 16px; }
  /* past days read like a fixtures list: the date, then your score or a chip to play it */
  .past { margin-top: 30px; padding: 14px 0 6px; }
  .past h2 { font-family: 'Jersey 10', sans-serif; font-weight: 400; font-size: 28px; margin: 0 16px 6px; }
  .past ul { list-style: none; margin: 0; padding: 0; }
  .past button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 16px; border: 0;
    border-top: 1px solid rgba(159,176,201,.1); background: none; color: var(--chalk); font: inherit; text-align: left; cursor: pointer; }
  .past button:hover { background: rgba(43,66,112,.35); }
  .past button:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
  .past .d { flex: 1; }
  .foot { margin-top: 36px; color: var(--mist); font-size: 13px; text-align: center; }
  .foot p { margin: 4px 0; }
  .foot a { color: var(--mist); text-underline-offset: 3px; }
  .foot a:hover { color: var(--chalk); }
  .past .all { justify-content: center; min-height: 40px; color: var(--mist); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
  .past .late { color: var(--mist); font-size: 13px; }
  .past .p { font-family: Doto, monospace; font-weight: 700; color: var(--amber); }
  .past .go { font-family: 'Jersey 10', sans-serif; font-size: 22px; line-height: 1; color: var(--night); background: var(--amber);
    border-radius: 4px; padding: 4px 12px 1px; box-shadow: 0 3px 0 #b37b00; }
  .past .go.half { background: var(--chalk); box-shadow: 0 3px 0 #8f9bb0; }
  .legend h2 { font-family: 'Jersey 10', sans-serif; font-weight: 400; font-size: 28px; margin: 0 0 8px; }
  .legend ul { list-style: none; margin: 0; padding: 0; }
  .legend li { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
  .legend li canvas { width: 40px; height: 26px; image-rendering: pixelated; }
  #copyFlags { margin-top: 10px; }
  .legend li span:last-child { margin-left: auto; font-family: Doto, monospace; font-weight: 900; color: var(--amber); }

  /* play */
  .top { display: flex; align-items: center; justify-content: space-between; }
  .pips { display: flex; gap: 6px; }
  .pip { width: 12px; height: 12px; background: var(--seat); }
  .pip.done { background: var(--chalk); }
  .pip.miss { background: #55657f; }
  .pip.now { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
  .clock { font-family: Doto, monospace; font-weight: 900; font-size: 34px; color: var(--amber); text-shadow: 0 0 12px rgba(255,176,0,.45); }
  .clock.low { color: var(--kit); text-shadow: 0 0 12px rgba(215,38,61,.6); animation: blink .5s steps(2) infinite; }
  @keyframes blink { 50% { opacity: .45; } }
  .prompt { font-family: 'Jersey 10', sans-serif; font-size: clamp(44px, 11vw, 60px); line-height: .9; margin: 12px 0 16px; min-height: 2em; }
  .prompt.enter { animation: drop .32s steps(4) both; }
  @keyframes drop { from { transform: translateY(-14px); opacity: 0; } }
  form { display: flex; gap: 8px; }
  /* No answer box during the 3-2-1 or before the prompt's clock has started; visibility keeps the layout still */
  .qlayer.waiting form { visibility: hidden; }
  #guess { flex: 1; min-width: 0; font-family: 'Pixelify Sans', sans-serif; font-size: 22px; color: var(--chalk); background: rgba(10,20,40,.7); border: 0; border-radius: 6px; padding: 10px 12px; box-shadow: inset 0 0 0 2px var(--seat); }
  #guess:focus { outline: none; box-shadow: inset 0 0 0 2px var(--amber); }
  #guess:disabled { opacity: .6; }
  .shoot { font-family: 'Jersey 10', sans-serif; font-size: 28px; color: var(--night); background: var(--chalk); border: 0; border-radius: 6px; padding: 4px 16px 0; cursor: pointer; }
  .shoot:disabled { opacity: .4; cursor: default; }
  .shoot { transition: transform .08s ease-out; }
  .shoot:active:not(:disabled) { transform: translateY(2px) scale(.97); }

  .ask { margin-top: 12px; padding: 12px 14px; }
  .ask p { margin: 0 0 10px; }
  .ask.bad { box-shadow: inset 0 0 0 2px var(--kit); }
  .ask.bad p { color: #ff7a8a; font-weight: 600; }
  .ask .mean { display: block; margin-bottom: 4px; }
  .ask .fix { font-size: 1.1em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .ask .fix s { color: var(--mist); text-decoration-thickness: 2px; overflow-wrap: anywhere; }
  .ask .fix .arrow { color: var(--mist); }
  .ask .fix b { color: var(--amber); font-weight: 600; overflow-wrap: anywhere; }
  .ask small { display: block; margin-top: 6px; color: var(--mist); font-size: 0.85em; }
  #guess.nope { animation: nope .3s steps(4); box-shadow: inset 0 0 0 2px var(--kit); }
  @keyframes nope { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
  .choices { display: flex; flex-wrap: wrap; gap: 8px; }
  .choices button, .ghost { font-family: 'Pixelify Sans', sans-serif; font-size: 16px; color: var(--chalk); background: var(--stand); border: 0; border-radius: 4px; padding: 8px 12px; cursor: pointer; box-shadow: inset 0 0 0 2px var(--seat); }
  .choices button:hover, .ghost:hover { box-shadow: inset 0 0 0 2px var(--mist); }
  .choices button.yes { background: var(--chalk); color: var(--night); box-shadow: none; }

  .tier { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 6px; animation: pop .34s cubic-bezier(.2,1.6,.4,1) both; }
  @keyframes pop { from { transform: scale(.85); opacity: 0; } }
  .tier canvas { width: 60px; height: 39px; image-rendering: pixelated; flex: none; }
  .tier .txt { flex: 1; min-width: 0; }
  .tier .name { font-family: 'Jersey 10', sans-serif; font-size: 34px; line-height: .9; }
  .tier .why { font-size: 14px; opacity: .9; margin-top: 4px; }
  .tier .pts { font-family: Doto, monospace; font-weight: 900; font-size: 34px; }
  .standing { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 8px; min-height: 1.4em;
    font-size: 17px; color: var(--chalk); font-variant-numeric: tabular-nums; }
  .standing b { color: var(--amber); font-weight: 600; }
  .standing:empty { visibility: hidden; }
  .after { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
  .after .home { flex: none; width: 52px; }
  .next { transition: transform .08s ease-out, box-shadow .08s ease-out; }
  .next:active { transform: translateY(3px); box-shadow: 0 1px 0 #b37b00; }
  .next { width: 100%; font-family: 'Jersey 10', sans-serif; font-size: 30px; color: var(--night); background: var(--amber); border: 0; border-radius: 6px; padding: 6px 16px 2px; cursor: pointer; box-shadow: 0 4px 0 #b37b00; }

  /* the question fills the screen over a dimmed table; answering fades it away and the table takes over */
  .qlayer { position: relative; z-index: 2; min-height: calc(var(--vvh, 100dvh) - 76px); display: flex; flex-direction: column; justify-content: center; transition: opacity .3s ease, transform .3s ease; }
  .qlayer .top { position: absolute; top: 0; left: 0; right: 0; }
  /* centred while it fits; when the keyboard leaves too little room it starts under the clock row
     instead of spilling up behind it (auto margins shrink to nothing, plain centring would not) */
  .qlayer { justify-content: flex-start; padding-top: 52px; }
  .qlayer .prompt { margin-top: auto; }
  .tight .qlayer .prompt { font-size: 34px; }
  .qlayer .prompt.long { font-size: clamp(38px, 10.5vw, 60px); }
  .qlayer .prompt.longer { font-size: clamp(32px, 8.6vw, 48px); }
  .tight .qlayer .prompt.long, .tight .qlayer .prompt.longer { font-size: 28px; }
  .qlayer::after { content: ''; margin-top: auto; }
  .qlayer .prompt { font-size: clamp(44px, 13vw, 76px); text-shadow: 0 4px 24px rgba(10,20,40,.9); }
  .qlayer::before { content: ''; position: absolute; inset: -20vh -16px; z-index: -1; background: radial-gradient(60% 45% at 50% 50%, rgba(10,20,40,.82), rgba(10,20,40,0)); pointer-events: none; }
  #play.climbing .qlayer, #play.landed .qlayer { opacity: 0; transform: translateY(-28px); pointer-events: none; }
  .board { position: fixed; top: 0; bottom: 0; left: 50%; width: min(520px, calc(100vw - 32px)); transform: translateX(-50%); overflow: hidden; z-index: 1; border-radius: 0; opacity: .2; transition: opacity .35s ease; }
  #play.climbing .board, #play.landed .board { opacity: 1; }
  .ride { position: absolute; right: 10px; top: -15px; z-index: 3; display: none; align-items: center; gap: 6px; font-family: 'Pixelify Sans', sans-serif; font-size: 14px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
  .ride.show { display: flex; animation: pop .34s cubic-bezier(.2,1.6,.4,1) both; }
  .ride b, .pin b { font-family: Doto, monospace; font-weight: 900; }
  .pin { position: absolute; right: 10px; top: 0; z-index: 1; display: flex; gap: 4px; height: 20px; will-change: transform; pointer-events: none; }
  .pin span { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 0 7px; border-radius: 3px; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
  .pin::before { content: ''; position: absolute; right: 100%; top: 50%; width: 600px; border-top: 1px dashed rgba(238,242,245,.28); }
  .shaker { position: absolute; inset: 0; }
  .dock { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(520px, calc(100vw - 32px)); transform: translateX(-50%); z-index: 3; }
  .dock .tier { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  /* the GOAT moment: blackout with a spotlight, then the table steps aside for the crowd's tifo */
  /* a spotlight frame around your row; its huge shadow is the dark. it sits between the table and the card, so the card stays lit */
  /* GOAT spotlight (user): the stadium's two floodlight towers throw beams that cross on your row,
     over a soft round glow with no hard edge. The beams are positioned in trackSpot. */
  #spot { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .12s steps(2); --x: 50vw; --y: 50vh; --r: 200px;
    background: radial-gradient(circle var(--r) at var(--x) var(--y), rgba(255,244,214,.32) 0%, rgba(255,240,200,.18) 45%, rgba(2,4,10,.5) 78%, rgba(2,4,10,.94) 100%); }
  /* Both beams are painted on one canvas as solid light on black, each pixel keeping the brighter
     beam, so where they cross the light never adds up; the canvas is blurred once and screened over
     the scene, where black adds nothing */
  /* the light bars and their corner housings (user's sketch), drawn above the light */
  #fixtures { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; opacity: 0; }
  #beams { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; opacity: 0; filter: blur(8px); mix-blend-mode: screen; }
  #play.goatshow .board { opacity: .1 !important; }
  #play.goatshow .dock { opacity: 0; }
  .dock { transition: opacity .25s; }
  .you.goldrow { box-shadow: 0 0 0 2px #ffc93a, 0 0 28px rgba(255,201,58,.7); }
  .row { position: absolute; left: 0; right: 0; top: 0; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 16px; font-size: 18px; will-change: transform; border-top: 1px solid rgba(159,176,201,.1); }
  .row .rk, .you .rk { width: 22px; font-family: Doto, monospace; font-weight: 700; color: var(--mist); }
  .row img, .you img { width: 21px; height: 24px; image-rendering: pixelated; }
  .row .club, .you .club { flex: 1; }
  .row .p { font-family: Doto, monospace; font-weight: 700; color: var(--amber); }
  .row.div { justify-content: center; font-family: 'Jersey 10', sans-serif; font-size: 28px; color: var(--amber); background: rgba(255,176,0,.07); }
  .you { position: absolute; left: 0; right: 0; top: 0; height: 48px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: repeating-linear-gradient(90deg, var(--pitch) 0 36px, var(--pitch-2) 36px 72px); box-shadow: 0 0 0 2px var(--chalk), 0 8px 24px rgba(0,0,0,.35); font-family: 'Jersey 10', sans-serif; font-size: 28px; }
  .you .rk { color: var(--chalk); }
  .you .p { font-family: Doto, monospace; font-weight: 900; font-size: 20px; }
  .shade { position: absolute; left: 0; right: 0; height: 22vh; z-index: 2; pointer-events: none; }
  .shade.t { top: 0; background: linear-gradient(var(--night), transparent); }
  .shade.b { bottom: 0; background: linear-gradient(transparent, var(--night)); }
  .promo { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .promo span { font-family: 'Jersey 10', sans-serif; font-size: 40px; color: var(--night); background: var(--amber); padding: 4px 18px 0; border-radius: 4px; opacity: 0; transform: scale(.8); transition: opacity .15s, transform .3s cubic-bezier(.2,1.6,.4,1); }
  .promo.show span { opacity: 1; transform: none; }

  .count { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; font-family: 'Jersey 10', sans-serif; font-size: 200px; color: var(--amber); text-shadow: 6px 6px 0 var(--kit); pointer-events: none; }
  .count span { animation: zoom .6s steps(5) both; }
  @keyframes zoom { from { transform: scale(1.8); opacity: 0; } 40% { opacity: 1; } }

  /* full time */
  .ft { font-family: 'Jersey 10', sans-serif; font-size: 80px; line-height: .85; margin: 24px 0 6px; text-shadow: 4px 4px 0 var(--kit); }
  .finish { color: var(--mist); margin: 0 0 18px; }
  .finish b { color: var(--chalk); font-weight: 600; }
  .total { font-family: Doto, monospace; font-weight: 900; font-size: 56px; color: var(--amber); text-shadow: 0 0 16px rgba(255,176,0,.4); }
  .recap { list-style: none; margin: 18px 0 0; padding: 6px 14px; }
  .recap li { border-top: 1px solid rgba(159,176,201,.12); }
  .recap li:first-child { border-top: 0; }
  .recap summary { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; }
  .recap summary::-webkit-details-marker { display: none; }
  .recap summary::after { content: '+'; font-family: 'Jersey 10', sans-serif; font-size: 26px; color: var(--mist); width: 14px; text-align: center; }
  .recap details[open] summary::after { content: '-'; }
  .recap canvas { width: 40px; height: 26px; image-rendering: pixelated; flex: none; }
  .pool { padding: 0 0 14px; }
  .final { margin-top: 18px; padding: 6px 0 0; overflow: hidden; }
  .final h2 { font-family: 'Jersey 10', sans-serif; font-weight: 400; font-size: 32px; color: var(--amber); margin: 2px 16px 6px; }
  .frow { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 16px; border-top: 1px solid rgba(159,176,201,.1); }
  .frow .rk { width: 22px; font-family: Doto, monospace; font-weight: 700; color: var(--mist); }
  .frow img { width: 21px; height: 24px; image-rendering: pixelated; }
  .frow .club { flex: 1; }
  .frow .p { font-family: Doto, monospace; font-weight: 700; color: var(--amber); }
  .frow.me { background: repeating-linear-gradient(90deg, var(--pitch) 0 36px, var(--pitch-2) 36px 72px); box-shadow: inset 0 0 0 2px var(--chalk); font-family: 'Jersey 10', sans-serif; font-size: 26px; }
  .frow.me .rk, .frow.me .p { color: var(--chalk); }
  .frow.ghost { color: var(--mist); font-style: italic; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(159,176,201,.06) 8px 16px); }
  .frow.ghost i { width: 21px; height: 24px; border: 2px dashed rgba(159,176,201,.45); border-radius: 3px; box-sizing: border-box; }
  .frow.ghost .p { color: var(--mist); }
  .lookup { display: block; margin: 4px 0 6px; }
  .lookup input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--chalk); background: var(--stand); border: 1px solid rgba(159,176,201,.25); border-radius: 6px; padding: 9px 12px; }
  .lookup p { margin: 8px 0 0; font-size: 14px; min-height: 1.2em; color: var(--mist); }
  .lookup p[data-tier="goat"] { color: #ffc93a; font-weight: 600; }
  .lookup p[data-tier="elite"] { color: #a993ff; font-weight: 600; }
  .lookup p[data-tier="topbin"] { color: var(--amber); font-weight: 600; }
  .lookup p[data-tier="bottom"] { color: #4fd18b; font-weight: 600; }
  .lookup p[data-tier="tapin"] { color: var(--chalk); font-weight: 600; }
  .tierlist { margin-top: 10px; }
  .th { display: flex; align-items: center; gap: 8px; font-family: 'Jersey 10', sans-serif; font-size: 22px; }
  .th canvas { width: 30px; height: 20px; }
  .th .n { margin-left: auto; font-family: Doto, monospace; font-weight: 900; font-size: 14px; color: var(--amber); }
  .names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .names span { font-size: 14px; background: var(--stand); padding: 3px 8px; border-radius: 4px; }
  .names span.mine { background: var(--amber); color: var(--night); font-weight: 600; }
  .goatline { font-size: 14px; margin-top: 6px; color: var(--mist); }
  .goatline b { color: #ffc93a; font-weight: 600; }
  .goatline.mine b { background: var(--amber); color: var(--night); padding: 0 6px; border-radius: 4px; }
  .recap .q { color: var(--mist); font-size: 13px; }
  .recap .a { font-weight: 600; }
  .recap .p { margin-left: auto; font-family: Doto, monospace; font-weight: 900; color: var(--amber); }
  .end-btns { display: flex; gap: 8px; margin-top: 18px; }
  .end-btns .kick { font-size: 32px; }
  .copied { color: var(--mist); font-size: 14px; margin-top: 8px; min-height: 1.4em; }
  .back { display: block; width: 100%; margin-top: 10px; font-family: 'Jersey 10', sans-serif; font-size: 26px; color: var(--chalk);
    background: none; border: 0; border-radius: 6px; padding: 8px 0 4px; box-shadow: inset 0 0 0 2px var(--seat); cursor: pointer; }
  .back:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  button:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

  /* the goat that follows you around */
  #buddy { position: fixed; left: 0; top: 0; width: 80px; height: 55px; image-rendering: pixelated; z-index: 4; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
  /* on a phone the result card and Next fill the goat's strip of pitch: once the climb has landed it
     steps out, and it is back for the next prompt */
  #buddy { transition: opacity .3s ease-out; }
  @media (max-width: 600px) { body:has(#play.landed) #buddy { opacity: 0; } }
  #buddy.gold { filter: drop-shadow(0 0 10px rgba(255,201,58,.8)) drop-shadow(0 4px 0 rgba(0,0,0,.35)); }

  .you.bump { animation: bump .35s ease-out; }
  @keyframes bump { 12% { transform: translateY(-16px); } 45% { transform: translateY(3px); } }

  /* celebrations */
  #fx { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; z-index: 6; pointer-events: none; }
  .flash { position: fixed; inset: 0; z-index: 5; background: #fffbe0; pointer-events: none; opacity: 0; }
  .flash.go { animation: flash .5s steps(5) both; }
  @keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }
  .shake { animation: shake .45s steps(6) both; }
  @keyframes shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(3px, 4px); } }
  .big { position: fixed; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
  .big.show { animation: bigin 1.7s both; }
  @keyframes bigin { 0% { opacity: 0; transform: scale(1.6); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
  .big::before, .big::after { content: ''; position: absolute; top: -10vh; width: 40vw; height: 130vh; background: linear-gradient(rgba(255,251,224,.4), rgba(255,251,224,0) 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); animation: sweep 1.7s ease-in-out both; }
  .big::before { left: 0; transform-origin: 50% 0; --r: -18deg; }
  .big::after { right: 0; transform-origin: 50% 0; --r: 18deg; }
  @keyframes sweep { from { transform: rotate(var(--r)); } to { transform: rotate(calc(var(--r) * -1)); } }
  .big .t1 { position: relative; font-family: 'Jersey 10', sans-serif; font-size: clamp(90px, 24vw, 170px); line-height: .8; color: var(--amber); text-shadow: 6px 6px 0 var(--kit), 12px 12px 0 rgba(0,0,0,.4); }
  .big .t2 { position: relative; font-family: 'Jersey 10', sans-serif; font-size: clamp(34px, 8vw, 56px); color: var(--chalk); background: rgba(10,20,40,.85); padding: 2px 18px 0; margin-top: 10px; border-radius: 4px; }
  .big.goat .t1 { color: #ffc93a; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* Language: a small segmented toggle, top right, off while a prompt is on screen (the clock lives there) */
  .corner { position: fixed; top: 12px; right: 12px; z-index: 5; display: flex; gap: 8px; align-items: stretch; }
  .playing .corner { display: none; }
  .langs { display: flex; padding: 3px; gap: 2px; border-radius: 6px; background: rgba(10,20,40,.78); box-shadow: inset 0 0 0 2px var(--seat); }
  .langs button { display: flex; align-items: center; gap: 6px; font-family: 'Pixelify Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--mist); background: transparent; border: 0; border-radius: 4px; padding: 5px 8px; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .12s ease-out; }
  .langs button svg { width: 20px; height: 14px; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(0,0,0,.35); opacity: .6; transition: opacity .15s ease; }
  .langs button[aria-pressed="true"] { color: var(--night); background: var(--amber); }
  .langs button[aria-pressed="true"] svg { opacity: 1; }
  .langs button:active { transform: scale(.97); }
  @media (hover: hover) and (pointer: fine) { .langs button[aria-pressed="false"]:hover { color: var(--chalk); } }
  .langs button:focus-visible { outline: 2px solid var(--chalk); outline-offset: 1px; }

  /* Extra time: a red whistle by the clock, and the fourth official's board when it's used */
  .perk { display: flex; justify-content: flex-start; margin-top: 10px; }
  .qlayer.waiting .perk { visibility: hidden; }
  .whistle { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 0; border-radius: 6px; background: rgba(10,20,40,.7); box-shadow: inset 0 0 0 2px var(--seat); color: var(--chalk); font-family: Doto, monospace; font-weight: 900; font-size: 20px; cursor: pointer; transition: transform .12s ease-out, opacity .15s ease, box-shadow .15s ease; }
  .whistle canvas { width: 36px; height: 24px; image-rendering: pixelated; }
  @media (hover: hover) and (pointer: fine) { .whistle:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--kit); } }
  .whistle:active:not(:disabled) { transform: scale(.96); }
  .whistle:disabled { opacity: .3; cursor: default; }
  .whistle:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
  /* the whistle's one-time introduction: a notice in the middle of the screen (its header shows the
     whistle), then it all disappears and the whistle simply shows in its spot with the prompt (user) */
  .perk { position: relative; align-items: center; }
  .qlayer.intro-on .perk { visibility: visible; }
  .qlayer.intro-on .whistle { visibility: hidden; }
  .intro { position: fixed; left: 50%; top: 42%; z-index: 8; width: min(420px, calc(100vw - 32px)); visibility: visible;
    padding: 20px 22px; border-radius: 8px; background: var(--terrace); box-shadow: inset 0 0 0 2px var(--amber), 0 12px 30px rgba(0,0,0,.45);
    transform: translate(-50%, -50%); transform-origin: center; animation: introIn .22s cubic-bezier(.23, 1, .32, 1) both; }
  .intro-head { display: flex; align-items: center; gap: 8px; }
  .intro-head canvas { width: 42px; height: 28px; image-rendering: pixelated; }
  .intro-head span { font-family: 'Jersey 10', sans-serif; font-size: 36px; line-height: .9; letter-spacing: .04em; text-transform: uppercase; color: var(--amber); }
  .intro p { margin: 10px 0 14px; font-size: 18px; line-height: 1.4; color: var(--chalk); }
  .intro-ok { font-family: 'Jersey 10', sans-serif; font-size: 26px; color: var(--night); background: var(--amber); border: 0; border-radius: 5px; padding: 3px 16px 0; cursor: pointer; box-shadow: 0 3px 0 #b37b00; transition: transform .1s ease-out, box-shadow .1s ease-out; }
  .intro-ok:active { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 #b37b00; }
  .intro-ok:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
  @keyframes introIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.95); } }
  @media (prefers-reduced-motion: reduce) { .intro { animation: introFade .2s ease both; } }
  @keyframes introFade { from { opacity: 0; } }
  .board4 { position: fixed; top: 22%; left: 50%; z-index: 6; display: flex; gap: 14px; padding: 10px 18px; transform: translateX(-50%); background: #050608; border-radius: 6px; box-shadow: 0 0 0 3px #2a2f3a, 0 10px 30px rgba(0,0,0,.6); font-family: Doto, monospace; font-weight: 900; font-size: 56px; line-height: 1; animation: board-up .18s ease-out; }
  .board4 .min { color: #36e27a; text-shadow: 0 0 14px rgba(54,226,122,.6); }
  .board4 .add { color: #ff3b4e; text-shadow: 0 0 14px rgba(255,59,78,.6); }
  @keyframes board-up { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } }
  @media (prefers-reduced-motion: reduce) { .board4 { animation: none; } }

  /* Sound on/off, next to the language toggle */
  .mute { display: grid; place-items: center; width: 40px; padding: 0; border: 0; border-radius: 6px; background: rgba(10,20,40,.78); box-shadow: inset 0 0 0 2px var(--seat); cursor: pointer; transition: transform .12s ease-out; }
  .mute canvas { width: 22px; height: 18px; image-rendering: pixelated; }
  .home svg { width: 22px; height: 20px; }
  .mute:active { transform: scale(.94); }
  .mute:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

  /* GOAT opening (user): red velvet curtains sweep shut, then part on the spotlit row */
  .curtain { position: fixed; top: 0; bottom: 0; width: 51vw; z-index: 5; pointer-events: none;
    background: repeating-linear-gradient(90deg, #6e0b18 0 6px, #a3152a 6px 18px, #c41f35 18px 24px, #8a0f1f 24px 32px);
    transition: transform .38s cubic-bezier(.77, 0, .175, 1); }
  .curtain::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(90deg, #ffc93a 0 6px, #d99a1e 6px 10px); }
  .curtain.l { left: 0; transform: translateX(-102%); box-shadow: inset -6px 0 0 #ffc93a; }
  .curtain.r { right: 0; transform: translateX(102%); box-shadow: inset 6px 0 0 #ffc93a; }
  .curtain.shut { transform: none; }
  @media (prefers-reduced-motion: reduce) { .curtain { display: none; } }

/* The verdict card while it lands big: above the table and the dock's neighbours */
.tier.stamping { position: relative; z-index: 6; box-shadow: 0 18px 50px rgba(0,0,0,.55); will-change: transform; }
/* Elite: everything goes dark but a cool focused light on the card (z under the dock, which holds it) */
#deepcut { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .28s ease;
  --x: 50vw; --y: 70vh; --r: 180px;
  background: radial-gradient(circle var(--r) at var(--x) var(--y), rgba(180,160,255,.10) 0%, rgba(40,30,90,.35) 55%, rgba(3,4,12,.88) 100%); }
#deepcut.on { opacity: 1; }
#mags { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
#mags .mag { position: absolute; left: 0; top: 0; width: 36px; height: 33px; image-rendering: pixelated; opacity: 0; }
@media (prefers-reduced-motion: reduce) { #deepcut { transition: opacity .2s ease; } }

/* During the climb the card rests at the very bottom; the standing line takes no room until it has
   text, and then the card glides up to make room (settleDock in app.js) */
.dock .standing:empty { display: none; }

/* The Elite lens: a pixel-art sprite drawn in JS (drawLens), scaled up crisp */
#lens { position: fixed; z-index: 7; pointer-events: none; opacity: 0; image-rendering: pixelated; }

/* Top bins: the goal corner and the ball, pixel art scaled up crisp */
#mags .goalcorner, #mags .goalball { position: absolute; left: 0; top: 0; image-rendering: pixelated; opacity: 0; }
#mags .goalcorner { opacity: 1; }

/* while its card lands, the dock comes in front of the GOAT curtains (z 5) */
.dock.front { z-index: 6; }

/* the question steps down when the play area must fit above the keyboard (fitQuestion in app.js) */
.qlayer .prompt.fit1 { font-size: 34px !important; }
.qlayer .prompt.fit2 { font-size: 28px !important; }
.qlayer .prompt.fit3 { font-size: 23px !important; }

/* ---------- the sticker cards (user: sticker album) ----------
   A frame that gets rarer with the tier (matte, silver foil, gold foil, holo), an inner panel in the
   tier's colour, the icon in a dark photo window, and rarity pips under the points */
.tier.sticker { display: block; padding: 6px; border-radius: 9px; }
.tier.sticker .in { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 5px; overflow: hidden; }
.tier.sticker .win { flex: none; width: 76px; height: 52px; border-radius: 4px; background: #0a1428; display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px rgba(238,242,245,.32), 0 2px 0 rgba(0,0,0,.35); }
.tier.sticker .win canvas { width: 70px; height: 47.5px; image-rendering: pixelated; }
.tier.sticker .txt { position: relative; z-index: 1; }
.tier.sticker .name { font-size: 30px; }
.tier.sticker .side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
.tier.sticker .pts { font-size: 28px; line-height: 1; }
.tier.sticker .pips { display: flex; gap: 4px; }
.tier.sticker .pips i { width: 8px; height: 8px; background: currentColor; }
.tier.sticker .pips i.off { opacity: .22; }
/* Miss: a faded, plain sticker */
.s-miss { background: #5d6b80; }
.s-miss .in { background: #2a3446; color: #c9d3df; }
/* Tap-in: matte */
.s-tapin { background: #d9dee6; }
.s-tapin .in { background: var(--seat); color: var(--chalk); }
/* Bottom corner: silver foil */
.s-bottom { background: linear-gradient(135deg, #8c96a8, #f2f5f9 35%, #9aa5b8 55%, #e9eef4 80%, #7f8aa0); }
.s-bottom .in { background: var(--pitch); color: var(--chalk); }
/* Top bins: gold foil, a shine streak across it */
.s-topbin { background: linear-gradient(135deg, #a36a00, #ffe08a 30%, #c98a00 52%, #fff1bf 72%, #a36a00); box-shadow: 0 0 18px rgba(255,176,0,.35); }
.s-topbin .in { background: #1b2d4d; color: var(--amber); }
.s-topbin .in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,224,138,.22) 50%, transparent 60%); }
/* Elite: holo, a shimmering stripe pattern inside */
.s-elite { background: linear-gradient(115deg, #ff7ad9, #7ad7ff, #a6ff7a, #ffe17a, #ff7ad9, #b48cff, #7ad7ff); background-size: 300% 100%; box-shadow: 0 0 24px rgba(150,110,255,.55); }
.s-elite .in { background: linear-gradient(135deg, #2a1a66, #4a2fb0); color: #ffffff; }
.s-elite .in::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(120deg, transparent 0 10px, rgba(180,220,255,.12) 10px 14px); }
/* while the card lands big: the gold shine sweeps across once, the holo frame shimmers */
.tier.sticker.stamping.s-topbin .in::after { animation: shine 1s .25s cubic-bezier(.23, 1, .32, 1) both; }
.tier.sticker.stamping.s-elite { animation: holo 2.4s linear infinite; }
@keyframes shine { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes holo { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* the tier icons elsewhere (guide, recap) keep their own proportions */
.legend li canvas, .recap canvas, .th canvas { height: auto; }
@media (prefers-reduced-motion: reduce) { .tier.sticker.stamping.s-topbin .in::after, .tier.sticker.stamping.s-elite { animation: none; } }
@media (max-width: 460px) {
  .tier.sticker .win { width: 64px; height: 44px; } .tier.sticker .win canvas { width: 59px; height: 40px; }
  .tier.sticker .name { font-size: 26px; } .tier.sticker .pts { font-size: 24px; }
}
.tier.nopop { animation: none; }