/* =============================================================================
   bust.fun — SIC BO styles  (games/sicbo/sicbo.css)
   -----------------------------------------------------------------------------
   Game-SPECIFIC styles for the Sic Bo module. Synthwave tokens ONLY (tokens.css) —
   no hard-coded palette. The shared chrome (.panel / .preview / .preview .stat /
   .muted) is owned centrally in styles.css; this file only adds the sicbo-specific
   selectors (the dice stage, bet tabs, the bet board panes, win highlights).

   a11y: 44px touch targets on every control, 0 horizontal overflow @360/390px
   (fluid grids + min-width:0), reduced-motion-safe (all tumble/pulse motion gated
   off — the dice resolve instantly + legibly). The shared stake + Bet button drive
   the action; this panel adds the bet selector + dice reveal.
   ========================================================================== */

/* ---- The dice stage: 3 dice in a row (the centrepiece). -------------------- */
.sicbo-stage {
  position: relative; /* anchor the idle placeholder hint */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4, 16px);
  /* Sized so the 3 dice read as a deliberate DICE TRAY (not an empty band). The stage self-centers and
     is capped to hug its three dice with comfortable padding, instead of stretching the whole display
     column and leaving large dead gutters on either side of the dice (desktop board under-fill, T3). */
  width: min(100%, 560px);
  max-width: 100%;
  margin: var(--sp-3) auto;
  padding: var(--sp-4) var(--sp-3);
  background: linear-gradient(180deg, var(--surface-2), var(--bg-1));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg, 16px);
  box-shadow: inset 0 0 32px rgba(0, 0, 0, .5), 0 0 24px var(--brand-glow);
}
/* T3 — DESKTOP DEAD-SPACE FIX. The shared 12-gameview.css forces
   `.gameview-display .sicbo-stage { width: 100% }`, which OVERRIDES the cap above and stretches the dice
   tray across the full ~790px display column — leaving the three 140px dice marooned in a wide empty band.
   Re-assert the cap at the SAME specificity (own file, loads after) so the tray hugs its dice and the dice
   grow to a generous size on a roomy column. The board (tabs + total grid) below still spans full width.
   This is a game-OWNED override of a shared rule; the shared rule itself is reported to the lead. */
.gameview-display .sicbo-stage {
  width: min(100%, 600px);
  align-self: center;
  margin-inline: auto;
}
.gameview-display .sicbo-die { flex-basis: 168px; max-width: 180px; }
.sicbo-die {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 140px;            /* dice that read as dice (3 across), capped so they never balloon */
  max-width: 150px;
  aspect-ratio: 1 / 1;
  min-width: 0;
  background: radial-gradient(circle at 38% 32%, var(--surface-3), var(--surface) 78%);
  border: 1px solid var(--line-3);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line-2);
  transition: box-shadow var(--dur-2), border-color var(--dur-2), transform var(--dur-2);
}
/* Pip face = a 3×3 grid of cells; only the cells in PIP_CELLS carry a lit dot. Real filled
   dots (NOT a font glyph) so the dice never fall back to a hairline Unicode die and the pips
   fill the tile. The grid is square + capped so it reads as a die at any tile size. */
.sicbo-pip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 14%;
  width: clamp(56px, 17vw, 104px);
  aspect-ratio: 1 / 1;
  padding: 9%;
}
.sicbo-dot {
  border-radius: 50%;
  /* an UNLIT cell is an empty placeholder (keeps the 3×3 geometry); a LIT cell is a glowing pip. */
  background: transparent;
}
.sicbo-dot.on {
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--fg) 96%, var(--cyan)) , var(--fg-dim) 92%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cyan, #34d0f5) 55%, transparent),
              inset 0 1px 1px rgba(255, 255, 255, .35);
}

/* ---- Tumbling: a quick shake/roll illusion while a die is in motion. -------- */
.sicbo-die.tumbling {
  animation: sicbo-tumble .32s linear infinite;
  border-color: var(--violet);
}
.sicbo-die.tumbling .sicbo-pip { filter: blur(.6px); }
@keyframes sicbo-tumble {
  0%   { transform: rotate(-12deg) translateY(-8%); }
  25%  { transform: rotate(10deg) translateY(4%); }
  50%  { transform: rotate(-6deg) translateY(-4%); }
  75%  { transform: rotate(12deg) translateY(6%); }
  100% { transform: rotate(-12deg) translateY(-8%); }
}
/* the moment a die lands, give it a brief settle pop. */
.sicbo-die.landed { animation: sicbo-die-land var(--dur-3, .36s) var(--ease-spring, cubic-bezier(.2,1.3,.3,1)) both; }
@keyframes sicbo-die-land {
  0%   { transform: scale(1.12) rotate(-4deg); }
  60%  { transform: scale(.97); }
  100% { transform: scale(1) rotate(0); }
}

/* ---- Win highlight: a winning die glows; a triple glows gold. -------------- */
.sicbo-die.win {
  border-color: var(--win);
  box-shadow: 0 0 0 1px var(--win), 0 0 20px var(--win-glow);
  z-index: 2;
  animation: sicbo-die-pulse 1s var(--ease-out, cubic-bezier(.2,.8,.2,1)) both;
}
.sicbo-die.win .sicbo-dot.on {
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--win) 70%, #fff), var(--win) 92%);
  box-shadow: 0 0 12px var(--win-glow), inset 0 1px 1px rgba(255, 255, 255, .4);
}
.sicbo-die.triple {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 22px var(--gold-glow, rgba(255,207,92,.5));
}
.sicbo-die.triple .sicbo-dot.on {
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--gold) 70%, #fff), var(--gold) 92%);
  box-shadow: 0 0 14px var(--gold-glow, rgba(255,207,92,.5)), inset 0 1px 1px rgba(255, 255, 255, .4);
}
@keyframes sicbo-die-pulse {
  0%   { transform: scale(1.08); }
  60%  { transform: scale(.99); }
  100% { transform: scale(1); }
}

/* ---- Visible sum / result readout under the dice. -------------------------- */
.sicbo-result {
  /* CLS: reserve the 2-LINE worst case up front. The longest win string
     ("6-6-6 · sum 18 · TRIPLE · WIN 180:1") wraps to 2 lines on a narrow
     viewport, and this readout sits ABOVE the tabs+board in the centered
     .panel stack — so a 1-line reserve let the wrap push the whole lower
     stage down on the result frame. 3.2em (2 × 1.6em) holds both lines, so
     the bottom edge is invariant whether idle, 1-line ("No win"), or 2-line. */
  min-height: 3.2em;
  margin: 0 auto var(--sp-2);
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-md, 16px), 4.5vw, var(--fs-xl, 28px));
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--dur-2);
}
.sicbo-result.show { opacity: 1; }
.sicbo-result.win {
  color: var(--win);
  text-shadow: 0 0 18px var(--win-glow);
  animation: sicbo-result-pop var(--dur-3, .4s) var(--ease-spring, cubic-bezier(.2,1.3,.3,1)) both;
}
@keyframes sicbo-result-pop {
  0%   { transform: scale(.82); }
  100% { transform: scale(1); }
}
/* The payout figure (counts up via fx.numberRamp on a win). tabular-nums so the ramp doesn't jitter
   the readout width frame-to-frame. Inherits the .sicbo-result.win color/glow. Tokens only. */
.sicbo-result-pay { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }

/* ---- Visually-hidden live region (announces dice/sum/winner/payout to SRs). */
.sicbo-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;
}

/* ---- Single-bet constraint note (states the one-bet-per-roll rule up front). ----------
   Sic Bo tables normally take MANY simultaneous bets; this surface settles ONE per roll, so we say so in
   copy right above the selector. Reserves its own line height so it never pops in / shifts the board. */
.sicbo-onebet {
  min-height: 1.4em;            /* reserve the line so an empty→filled paint never shifts the tabs below */
  margin: var(--sp-3) auto 0;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}

/* ---- Bet-type tabs (segmented group, mirrors roulette). -------------------- */
/* Section heading for the bet-type tab row (signals the tabs swap the board pane below). */
.sicbo-tabs-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: var(--fw-semi); margin: var(--sp-2) 0 4px;
}
.sicbo-tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3);
}
.sicbo-tab {
  appearance: none; cursor: pointer; flex: 1 1 auto;
  min-height: var(--touch, 44px); padding: 10px 12px; border-radius: var(--r-md, 12px);
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--fg-dim); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-sm);
  transition: color var(--dur-1), background var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2);
}
.sicbo-tab:hover { color: var(--fg); background: var(--surface-3); border-color: var(--line-3); }
.sicbo-tab.active { color: var(--brand-ink); background: var(--brand); border-color: transparent; box-shadow: var(--glow-brand); }
.sicbo-tab:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; box-shadow: var(--ring); }

/* ---- Bet board: panes (only the active one shown). ------------------------- */
.sicbo-board { margin: var(--sp-2) 0; }
.sicbo-pane { display: none; }
.sicbo-pane.show { display: block; }

/* small/big + any-triple chips */
.sicbo-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.sicbo-chip-btn {
  appearance: none; cursor: pointer; flex: 1 1 140px;
  min-height: var(--touch, 44px); padding: 10px 14px;
  border-radius: var(--r-md, 12px); border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--fg-dim);
  font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-sm);
  transition: color var(--dur-1), background var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-1);
}
.sicbo-chip-btn:hover { color: var(--fg); background: var(--surface-3); border-color: var(--line-3); }
.sicbo-chip-btn:active { transform: scale(.97); }
.sicbo-chip-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; box-shadow: var(--ring); }
.sicbo-chip-btn.sel { color: var(--brand-ink); background: var(--brand); border-color: transparent; box-shadow: var(--glow-brand); }

/* total grid: 4..17, two fluid rows of 7 */
.sicbo-total-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1, 4px);
  margin-top: var(--sp-1);
}
.sicbo-total-btn {
  appearance: none; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--touch, 44px); padding: 4px 2px;
  border-radius: var(--r-sm, 8px); border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--fg);
  font-family: var(--font-display);
  transition: color var(--dur-1), background var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-1);
}
.sicbo-total-n { font-weight: var(--fw-bold); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.sicbo-total-o { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.sicbo-total-btn:hover { background: var(--surface-3); border-color: var(--line-3); }
.sicbo-total-btn:active { transform: scale(.95); }
.sicbo-total-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; box-shadow: var(--ring); }
.sicbo-total-btn.sel { border-color: transparent; background: var(--brand); color: var(--brand-ink); box-shadow: var(--glow-brand); }
.sicbo-total-btn.sel .sicbo-total-o { color: var(--brand-ink); }

/* face pickers (triple / double / single): 1..6 dice glyphs */
.sicbo-face-wrap { margin-top: var(--sp-2); }
.sicbo-faces {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-1, 4px);
}
.sicbo-face-btn {
  appearance: none; cursor: pointer; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--touch, 44px); padding: 4px;
  border-radius: var(--r-sm, 8px); border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--fg);
  transition: color var(--dur-1), background var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-1);
}
.sicbo-face-btn .sicbo-pip {
  width: clamp(26px, 7vw, 38px);
  gap: 11%;
  padding: 6%;
}
/* picker pips are solid + high-contrast (no glow) so 1 vs 3 vs 5 read at a glance on the dark surface. */
.sicbo-face-btn .sicbo-dot.on {
  background: var(--fg);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35);
}
.sicbo-face-btn:hover { background: var(--surface-3); border-color: var(--line-3); }
.sicbo-face-btn:hover .sicbo-dot.on { background: #fff; }
.sicbo-face-btn:active { transform: scale(.95); }
.sicbo-face-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; box-shadow: var(--ring); }
.sicbo-face-btn.sel { border-color: transparent; background: var(--brand); box-shadow: var(--glow-brand); }
.sicbo-face-btn.sel .sicbo-dot.on { background: var(--brand-ink); box-shadow: none; }
.sicbo-hint { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); }

/* ---- Combo swap flash: the just-DROPPED face button pulses so the swap is VISIBLE (not silent). -------
   A short border/glow pulse on the dropped tile; the .dropped class is added on swap + removed after the
   pulse (or instantly under reduced motion). Tokens only; warns in amber so it reads as "this left the pair"
   distinct from the green selected state. */
.sicbo-face-btn.dropped {
  animation: sicbo-face-drop .48s var(--ease-out, cubic-bezier(.2,.8,.2,1)) both;
}
@keyframes sicbo-face-drop {
  0%   { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn), 0 0 16px var(--warn-glow); transform: scale(1.06); }
  60%  { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn), 0 0 8px var(--warn-glow); transform: scale(.98); }
  100% { border-color: var(--line-2); box-shadow: none; transform: scale(1); }
}

/* ---- Co-located bet summary (placement fix): mirrors the rail "Your bet · Pays · Win pays" directly under
   the active pane, so selection + odds read together in the board column. Three fixed cells; reserves its
   height so an idle→play→result frame never shifts. Built from the shared stat vocabulary (tokens only). */
.sicbo-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  min-height: 3.4em;            /* reserve the 2-line worst case (label + value) so no pop-in shift */
}
.sicbo-sum-cell {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md, 10px);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
}
.sicbo-sum-cell.accent { border-color: color-mix(in srgb, var(--win) 45%, var(--line-2)); background: var(--win-soft); }
.sicbo-sum-k {
  font-size: var(--fs-xs); color: var(--muted-2, var(--muted));
  font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase;
}
.sicbo-sum-v {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  color: var(--fg); font-variant-numeric: tabular-nums;
  /* keep a long label ("Small (4–10)" / "Combo 2 & 5") on one line, ellipsized, so the grid never reflows. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sicbo-sum-cell.accent .sicbo-sum-v { color: var(--win); }

/* ---- Reduced motion: no tumble/pop/pulse — dice resolve instantly + legibly. */
@media (prefers-reduced-motion: reduce) {
  .sicbo-die.tumbling,
  .sicbo-die.landed,
  .sicbo-die.win,
  .sicbo-face-btn.dropped,
  .sicbo-result.win { animation: none !important; }
  .sicbo-die.tumbling { transform: none; }
  .sicbo-die.tumbling .sicbo-pip { filter: none; }
  .sicbo-tab, .sicbo-chip-btn, .sicbo-total-btn, .sicbo-face-btn { transition: none; }
  .sicbo-chip-btn:active, .sicbo-total-btn:active, .sicbo-face-btn:active { transform: none; }
}

/* ---- Narrow viewport: keep the dice + board edge-to-edge @360px. ----------- */
@media (max-width: 400px) {
  .sicbo-stage { padding: var(--sp-3) var(--sp-2); gap: var(--sp-2); }
  .sicbo-die { flex-basis: 72px; }
  .sicbo-total-grid { gap: 3px; }
  .sicbo-faces { gap: 3px; }
  /* keep the 3-cell summary tight (not stacked) so it still reads as one compact line of bet · pays · win. */
  .sicbo-summary { gap: var(--sp-1); min-height: 3.6em; }
  .sicbo-sum-cell { padding: var(--sp-2) var(--sp-2); }
}

/* IDLE STATE: pre-roll, the 3 dice show a static "art" face that can read like a SETTLED outcome on a
   money game. While idle, dim the dice + overlay a "Place a bet to roll" hint so a new player can tell the
   dice haven't rolled yet (removed the instant a roll starts; re-applied on reset). */
.sicbo-stage.is-idle .sicbo-die { opacity: .4; filter: saturate(.6); }
.sicbo-stage.is-idle::after {
  content: "Place a bet to roll";
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  letter-spacing: .02em; color: var(--fg-dim); pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.5);
}