/* =====================================================================
   BOARD — game shell, wheel, hand, movement cards, trivia board,
           scoring HUD and the end-of-run overlay
   ===================================================================== */
#screen-game{display:none}
#screen-game.enter{animation:riseIn var(--t-slow) var(--ease-out)}

/* ---------- topbar ---------- */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-3) var(--sp-5);margin-bottom:var(--sp-4)}
.brand-block{display:flex;align-items:baseline;gap:10px;flex:1 1 auto;min-width:190px}
.brand-block .brand{font-weight:700;font-size:18px;letter-spacing:-.01em;white-space:nowrap;color:var(--text)}
.brand-block .modeline{font-family:var(--font-mono);font-weight:700;color:var(--muted);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase}
.status-group{display:flex;gap:7px;flex-wrap:wrap;align-items:center;flex:0 1 auto}
.action-group{display:flex;gap:7px;flex-wrap:wrap;align-items:center;flex:0 0 auto}

/* ---------- board layout ---------- */
.board{display:grid;grid-template-columns:1fr;gap:var(--sp-4);padding:var(--sp-4);align-items:start}
.board-sidebar{display:grid;gap:var(--sp-3);align-content:start}
.sidebar-hint{color:var(--muted);font-size:.8rem;line-height:1.4}
.sidebar-hint strong{color:var(--text)}
.draw-info{color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.02em}
.hand{display:flex;justify-content:center;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap}
.board-wheel{position:relative;display:grid;gap:var(--sp-2);justify-items:center}
.wheel-status{text-align:center;color:var(--muted);font-size:.84rem;min-height:1.3em;font-weight:700}
.wheel-status.hit{color:var(--accent)}
.wheel-status.miss{color:var(--bad)}
.wheel-frame{position:relative;width:min(100%,72vh,640px);aspect-ratio:1/1;margin:0 auto}
#wheelSvg{width:100%;height:100%;display:block;overflow:visible}
.route-controls{display:flex;justify-content:center;gap:var(--sp-2);flex-wrap:wrap;width:100%}
.route-controls .btn{min-height:46px;padding:11px 20px;font-size:.86rem}

/* ---------- wheel wedges ----------
   Legal destinations breathe so the eye finds them without reading the labels.
   The transform origin is the wheel centre in viewBox units. */
.legal-wedge{cursor:pointer;transform-origin:360px 360px;
  transition:filter var(--t-mid) ease,transform var(--t-mid) var(--ease-out)}
.legal-wedge{animation:wedgeBreathe 2.4s ease-in-out infinite}
@keyframes wedgeBreathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}}
.legal-wedge:hover{filter:brightness(1.22) saturate(1.15);transform:scale(1.022)}
.current-wedge{transform-origin:360px 360px;animation:currentGlow 2.8s ease-in-out infinite}
@keyframes currentGlow{0%,100%{filter:none}
  50%{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--gold) 55%,transparent))}}
/* One-shot ring fired when a wedge is claimed (added by the flow controller). */
.claim-ping{transform-origin:360px 360px;animation:claimPing .75s var(--ease-out) forwards;pointer-events:none}
@keyframes claimPing{from{opacity:.85;stroke-width:14;transform:scale(.97)}
  to{opacity:0;stroke-width:2;transform:scale(1.13)}}

@media(min-width:1024px){
  .app{padding:var(--sp-5) var(--sp-5) var(--sp-6)}
  /* A firm minimum, not a percentage: three 112px cards plus their gaps need 360px, and
     a percentage column falls just short of that at common widths, wrapping the hand
     onto two rows. minmax lets it grow on wide screens and never shrink below the hand. */
  .board{grid-template-columns:minmax(376px,30%) 1fr;gap:var(--sp-6);padding:var(--sp-5) var(--sp-6)}
  .board-sidebar .hand{gap:var(--sp-2)}
  .board-sidebar{position:sticky;top:var(--sp-5);padding-top:var(--sp-2)}
  .hand{justify-content:flex-start}
}

/* ---------- movement cards ---------- */
.move-card{position:relative;width:112px;min-height:124px;border-radius:16px;overflow:hidden;
  border:1px solid var(--cardOutline);
  background:linear-gradient(145deg,var(--cardTop),var(--cardBottom));
  box-shadow:var(--shadow);cursor:pointer;flex:0 0 auto;
  transition:transform var(--t-mid) var(--ease-out),outline var(--t-fast) ease,
             filter var(--t-fast) ease,box-shadow var(--t-mid) ease;
  animation:dealIn .34s var(--ease-out) backwards}
@keyframes dealIn{from{opacity:0;transform:translateY(22px) rotate(-8deg) scale(.9)}}
.move-card:nth-child(1){transform:rotate(-3deg) translateY(5px);animation-delay:.02s}
.move-card:nth-child(2){transform:translateY(-2px);animation-delay:.08s}
.move-card:nth-child(3){transform:rotate(3deg) translateY(5px);animation-delay:.14s}
.move-card:nth-child(4){animation-delay:.2s}
.move-card:nth-child(5){animation-delay:.26s}
.move-card:nth-child(6){animation-delay:.32s}
.move-card:hover:not(.dead){transform:translateY(-7px) rotate(0deg) scale(1.02);
  box-shadow:var(--shadowLg)}
.move-card.selected{outline:3px solid var(--accent);outline-offset:1px;
  transform:translateY(-12px) rotate(0deg) scale(1.04);
  box-shadow:var(--shadowLg)}
.move-card.dead{opacity:.4;filter:saturate(.3);cursor:not-allowed}
.move-card.recommend{outline:3px solid color-mix(in srgb,var(--gold) 62%,transparent);
  animation:dealIn .34s var(--ease-out) backwards,recommendPulse 1.9s ease-in-out infinite}
@keyframes recommendPulse{0%,100%{box-shadow:var(--shadow)}
  50%{box-shadow:var(--shadow),0 0 0 5px color-mix(in srgb,var(--gold) 20%,transparent)}}
.card-visual{height:74px;display:grid;grid-template-columns:42px 1fr;gap:4px;align-items:center;padding:8px 9px 7px;
  background:linear-gradient(145deg,var(--cardSurfTop),var(--cardSurfBottom))}
.card-visual .distance{font-size:2.7rem;line-height:.86;font-weight:950;letter-spacing:-.07em;
  text-align:center;color:var(--cardFooterText)}
.mini-wheel{width:52px;height:52px;display:block}
.card-footer{min-height:48px;border-top:1px solid var(--cardOutline);background:var(--cardFooter);
  display:grid;place-content:center;gap:3px;padding:6px 5px;text-align:center}
.card-footer .rel{color:var(--cardFooterText);font-size:.6rem;font-weight:950;line-height:1.2;text-transform:uppercase}
.card-footer .rel.directional{display:flex;justify-content:center;align-items:center;gap:3px;font-size:.53rem;
  white-space:nowrap;line-height:1.2}
.card-footer .cap{color:var(--cardFooterMuted);font-size:.48rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.25}

/* ---------- trivia board ---------- */
.trivia-board{padding:var(--sp-5) var(--sp-4) var(--sp-4);display:grid;gap:var(--sp-3);
  justify-items:center;text-align:center;position:relative;overflow:hidden}
.tv-progress{position:absolute;top:0;left:0;right:0;height:5px;background:var(--border)}
.tv-bar{height:100%;width:0;background:var(--accentGrad);transition:width var(--t-slow) var(--ease-out);
}
.tv-head{display:grid;gap:4px}
.tv-count{font-size:clamp(1.35rem,3.6vw,2rem);font-weight:700;letter-spacing:-.01em;color:var(--text)}
.tv-key{font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tv-stats{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center}
.tv-hint{margin:0;color:var(--muted);font-size:.82rem;max-width:46ch}
.tv-stat{border:1px solid var(--border);border-radius:99px;padding:6px 14px;background:var(--panel2);
  font-size:.78rem;font-weight:850;display:flex;gap:6px;align-items:center}
.tv-stat b{font-variant-numeric:tabular-nums}
.tv-stat.good{border-color:var(--good);color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--panel2))}
.tv-stat.bad{border-color:var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--panel2))}

/* ---------- scoring ---------- */
.pill.score{font-variant-numeric:tabular-nums;background:var(--text);color:var(--panel);border-color:var(--text)}
.pill.score b{font-weight:950;letter-spacing:-.01em}
.pill.streak{background:color-mix(in srgb,var(--gold) 22%,var(--panel2));border-color:var(--gold);color:var(--text)}
.pill.streak.hot{background:linear-gradient(135deg,var(--goldBright),var(--gold));color:#2a1f05;
  animation:softPulse 1.1s ease-in-out infinite}
.score-pop{position:absolute;top:4%;transform:translateX(-50%);pointer-events:none;z-index:5;
  font-weight:950;font-size:1.15rem;color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.35);
  animation:scorePop 1.2s cubic-bezier(.2,.7,.3,1) forwards;font-variant-numeric:tabular-nums}
.score-pop::after{content:attr(data-mult);font-size:.7em;margin-left:4px;color:var(--accent)}
@keyframes scorePop{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}
  18%{opacity:1;transform:translate(-50%,-2px) scale(1.08)}
  100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}

.scorecard{margin:var(--sp-3) 0 var(--sp-2);text-align:left;display:grid;gap:6px}
.sc-total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  padding-bottom:6px;border-bottom:1px solid var(--border)}
.sc-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:900}
.sc-points{font-family:var(--font-mono);font-size:1.7rem;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums}
.sc-best{font-size:.76rem;font-weight:850;color:var(--muted)}
.sc-best.new{color:var(--gold);animation:softPulse 1.2s ease-in-out infinite}
.sc-rows{display:grid;gap:3px}
.sc-row{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:.78rem;color:var(--muted)}
.sc-row b{color:var(--text);font-variant-numeric:tabular-nums}
.sc-streak{padding-top:5px;border-top:1px solid var(--border)}
.sc-note{font-size:.7rem;color:var(--muted);opacity:.85;margin-top:2px}

/* ---------- end-of-run overlay ---------- */
.end-overlay{position:fixed;inset:0;display:none;place-items:center;z-index:40;padding:var(--sp-4);
  background:rgba(26,25,22,.5);backdrop-filter:blur(4px)}
.end-overlay.show{display:grid;animation:riseIn var(--t-mid) ease}
.end-card{position:relative;z-index:1;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-5);max-width:420px;text-align:center;
  box-shadow:var(--shadowLg);animation:endCardIn .4s var(--ease-pop)}
@keyframes endCardIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
.end-card h3{margin:0 0 8px;font-size:24px;font-weight:700;color:var(--text)}
.end-card p{margin:0 0 16px;color:var(--muted);line-height:1.45}
.end-card .btnrow{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}
/* Won runs get a gold rim; lost runs stay neutral. */
.end-overlay.won .end-card{border-color:var(--gold);
  box-shadow:var(--shadowLg),0 0 0 1px var(--gold),0 0 40px color-mix(in srgb,var(--gold) 30%,transparent)}

/* Confetti burst on a completed run. Pieces are positioned by the flow controller.
   It lives inside the overlay and under the card, so it falls past the scorecard
   rather than across the numbers you are trying to read. */
.confetti{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:0;
  animation:confettiFall linear forwards}
@keyframes confettiFall{
  0%{opacity:1;transform:translateY(-20px) rotate(0deg)}
  100%{opacity:0;transform:translateY(105vh) rotate(720deg)}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}}

@media(max-width:600px){
  .app{padding:var(--sp-3) var(--sp-2) var(--sp-5)}
  .scope-row{grid-template-columns:1fr}
  .board{padding:var(--sp-3);gap:var(--sp-3)}
  .move-card{width:31%;min-width:88px;max-width:112px}
  .hand{gap:var(--sp-2)}
}