/* =============================================================================
   bust.fun — WHEEL styles  (games/wheel/wheel.css)
   -----------------------------------------------------------------------------
   Game-SPECIFIC styles for the Wheel module. Synthwave tokens ONLY (tokens.css) —
   no hard-coded palette. The shared chrome (.panel / .row / .seg / .preview /
   .preview .stat) is owned centrally in styles.css; this file only adds the
   wheel-specific selectors (the wheel stage, segmented selectors, legend).

   a11y: 44px touch targets, 0 horizontal overflow @360px, reduced-motion-safe
   (the spin transition is gated off under prefers-reduced-motion — the canvas
   lands instantly there; this file only governs the chrome around it).
   ========================================================================== */

/* ---- Segments + Risk selectors: the .wheel-controls wrapper lays the two gv-controls segmented
   fields side-by-side. The segmented control itself uses the shared .seg button.active chrome
   from styles.css — no bespoke .wheel-fieldset/.wheel-seg styling forked here any more. -------- */
.wheel-controls { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-3) 0; }

/* ---- Segments selector grid (audit #1): the SEGMENTS group has 5 options (10/20/30/40/50). The shared
   .gv-seg lays them flex (flex:1 1 0), and in the narrow left rail 5 min-touch chips don't all fit, so the
   5th orphaned onto a 2nd row reading as a broken 4+1. Scope ONLY the Segments group (via the .wheel-seg-field
   marker the JS adds) to an explicit 5-up CSS grid: equal tracks that COMPRESS together and never orphan a
   single chip. Grid stays a SINGLE row (one track row), so the field height — and thus the #gameControlsSlot
   height — is unchanged vs. the flex layout (no controls-slot CLS). The Risk group (3 options) is untouched,
   keeping the shared flex chrome. minmax(0,1fr) lets the tracks shrink below content width without overflow. */
.wheel-seg-field .gv-seg {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
/* override the shared flex sizing on the gridded buttons (flex props are inert under grid, but keep the
   button itself centered + clipping cleanly at the narrowest rail widths). */
.wheel-seg-field .gv-seg .gv-seg-btn { min-width: 0; padding-inline: 4px; }

/* ---- "Max win pays" contrast (WCAG AA): the shared `.preview .stat.accent b` paints --violet
   (#5b9bf5) at --fs-lg (17px). On --surface-2 that's 4.40:1 — just under the 4.5:1 needed for
   text < 18.66px. This is the MONEY figure (max payout preview), so we bump ONLY the wheel's
   #wheelPays value to --fs-xl (22px): ≥18.66px qualifies as "large text", where 3:1 suffices and
   4.40:1 passes comfortably (and a money number reading bigger is a bonus). Scoped to the wheel id
   — no shared chrome touched (audit MEDIUM #3). */
#wheelPays { font-size: var(--fs-xl); line-height: 1.05; }

/* ---- The wheel stage: a square canvas + a fixed top pointer + a center hub. -- */
.wheel-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  margin: var(--sp-3) auto; display: block;
}
/* SIZE-TO-FILL (inside the tall display column): the wheel is the hero, so it grows
   to the BIGGEST centred circle that fits. The square side = min(available width, the
   viewport height left after the controls/legend/preview chrome) via
   `width: min(100%, <height budget>)` + aspect-ratio 1/1 — driven by BOTH axes, so it
   stays a true circle and never forces page scroll. The canvas backing store
   re-measures this live box (ResizeObserver, DPR-aware) and redraws crisply at any
   size. This selector matches the shared styles.css `.gameview-display .wheel-stage`
   specificity and loads AFTER it (index.html links game CSS after styles.css), so it
   wins on source order — overriding the shared width:100% / max-width:520px caps WITHOUT
   editing styles.css. The height budget (~360px) ≈ topbar + game head + grid gaps + the
   wheel's own controls/legend/preview rows; tuned so the whole panel fits with no scroll. */
.gameview-display .wheel-stage {
  width: min(100%, calc(100vh - 360px));
  max-width: 720px; margin-inline: auto;
}
/* Narrow / portrait: free the height budget — width is the binding constraint, so the
   square tracks the column width (still a circle, still 0 overflow @360px). */
@media (max-width: 760px) {
  .gameview-display .wheel-stage { width: 100%; }
}
.wheel-canvas {
  display: block; width: 100%; height: 100%;
  /* the spin is applied via the transform; smooth eased deceleration. */
  transform: rotate(0deg);
  filter: drop-shadow(0 0 24px var(--brand-glow));
}
.wheel-canvas.spinning {
  transition: transform var(--wheel-spin-ms, 4200ms) cubic-bezier(.12, .67, .12, .99);
}
/* The fixed pointer (a downward neon arrow) anchored at top-center, OVER the canvas. */
.wheel-pointer {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 3;
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 22px solid var(--gold);
  filter: drop-shadow(0 0 10px var(--gold));
  pointer-events: none;
}
/* Center hub: shows the landed multiplier after a spin (or the spread label before). */
.wheel-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42%; height: 42%; border-radius: 50%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 50% 38%, var(--surface-3), var(--bg-1));
  border: 1px solid var(--line-2); box-shadow: inset 0 0 24px rgba(0, 0, 0, .55), 0 0 12px var(--brand-glow);
  text-align: center; padding: 6px;
}
.wheel-hub .wheel-hub-mult {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-lg), 7vw, var(--fs-xl)); font-variant-numeric: tabular-nums;
  color: var(--fg); line-height: 1.05;
  /* keep the pre-spin range ("up to 49.5×") on ONE line inside the round hub — a wrap to a
     second line would change the hub's text block height (cosmetic jitter). The hub is an
     absolutely-positioned overlay (no .panel re-center), so this is purely cosmetic. */
  white-space: nowrap;
}
.wheel-hub .wheel-hub-cap {
  /* The ONLY pre-spin signal that the big "up to 49.5×" is an outlier — bumped from --muted/semi
     to --fg-dim/bold so it actually registers next to the headline number (audit LOW #6). The
     companion "Win chance" stat in the rail carries the hard number; this keeps "best case" loud
     enough to read as a qualifier rather than vanishing under the multiplier. */
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-dim); font-weight: var(--fw-bold);
}
/* EXTREME (rare-win) config (audit #2): on a near-uniform loser donut the hub caption flips from "best case"
   to "rare · 2% to hit", surfacing the brutal win-% right next to the big "up to N×". Paint it in the LOSE
   tone with a soft glow so it reads as a warning qualifier, not a neutral label. Static color/shadow only —
   no animation, so it's reduced-motion safe by construction. */
.wheel-hub.is-rare .wheel-hub-cap {
  color: var(--lose); text-shadow: 0 0 8px var(--lose-glow);
}
.wheel-hub.win  .wheel-hub-mult { color: var(--win);  text-shadow: 0 0 16px var(--win-glow); }
.wheel-hub.lose .wheel-hub-mult { color: var(--lose); }
.wheel-hub.pulse { animation: wheel-hub-pop var(--dur-3, .4s) var(--ease-spring, cubic-bezier(.2,1.3,.3,1)) both; }
@keyframes wheel-hub-pop { 0% { transform: translate(-50%,-50%) scale(.82); } 100% { transform: translate(-50%,-50%) scale(1); } }

/* ---- Visually-hidden live region: announces the landed segment/multiplier to screen
   readers without occupying layout (the canvas + hub are visual-only). Standard sr-only
   clip pattern; not display:none so assistive tech still reads it. ------------------- */
.wheel-sr-status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Multiplier legend: the distinct table multipliers, colored by tier. -----
   CLS: the legend is REBUILT per config (renderLegend) and the distinct-multiplier
   count varies (10-high = 2 chips … 50-medium = 6 chips), so with flex-wrap it would
   wrap 1→2→3 rows and — because the .panel stack is justify-content:center — re-center
   the WHEEL on every segment/risk change. Reserve the densest worst case (≈3 chip rows:
   ~3 × 24px chip + 2 × sp-2 gap ≈ 88px) up front so the legend's box height is invariant
   across configs, and align wrapped rows to the TOP of that box (align-content:flex-start)
   so they don't re-center within it. Sized proportional to worst case → no empty void on
   the common 1–2 row configs (the box just isn't fully filled). */
.wheel-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center;
  align-content: flex-start;
  min-height: 88px;
  margin: var(--sp-2) 0 var(--sp-1);
}
.wheel-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--fg-dim);
}
.wheel-chip .wheel-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
/* Legend symbol glyph: the traditional casino symbol for this multiplier tier, so the
   legend reads as a KEY (symbol = this multiplier). Tinted to the tier color via the
   inline SVG's --sym-1 var (set by symbol({color})). Decorative — the multiplier text
   in the chip is the accessible name. */
.wheel-chip .wheel-chip-sym { display: inline-flex; flex: none; line-height: 0; }
.wheel-chip .wheel-chip-sym svg { display: block; filter: drop-shadow(0 0 4px currentColor); }

/* ---- Recent-results HISTORY strip (audit #3): the last ~10 landed multipliers as colored chips, parity
   with roulette/baccarat. A LABELLED, DISPLAY-ONLY history — never a predictor (each spin is independent +
   provably fair); the label + aria say so.
   CLS: the strip is built EMPTY and its space is RESERVED up front, so the first landing fills it WITHOUT
   shifting the wheel. Like roulette's strip it's a SINGLE FIXED-HEIGHT row with flex-wrap:nowrap +
   overflow:hidden — newest-first chips clip off the right end (a clean horizontal clip), so it can NEVER
   grow a 2nd row and re-center the .panel stack. The whole block's height (label row + strip row + margins)
   is invariant across 0..10 chips. ------------------------------------------------------------------- */
.wheel-history { margin: var(--sp-1) 0 var(--sp-2); }
.wheel-history-label {
  display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: var(--fw-semi); margin-bottom: 4px;
}
.wheel-history-strip {
  display: flex; flex-wrap: nowrap; gap: 5px; height: 24px; overflow: hidden;
  justify-content: flex-start;
}
.wheel-hist-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 30px; height: 24px; padding: 0 8px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  background: var(--surface-2); border: 1px solid currentColor; line-height: 1;
}
/* Tier color is applied inline (chip.style.color) so the border + text track the multiplier tier
   (0× → --lose red, winners → their tier color) for fast win-vs-loss scanning. The win/lose CLASS only
   adds a glow on winners (and none on losers) — it must NOT set `color`, since the inline tier color is
   the single source of truth and would override a class color anyway. */
.wheel-hist-chip.is-win  { box-shadow: 0 0 6px var(--win-glow); }
.wheel-hist-chip.is-lose { box-shadow: none; }

/* ---- Reduced motion: no spin transition, no hub pop (canvas lands instantly). - */
@media (prefers-reduced-motion: reduce) {
  .wheel-canvas, .wheel-canvas.spinning { transition: none !important; }
  .wheel-hub.pulse { animation: none !important; }
}