/* =============================================================================
   bust.fun — BACCARAT styles  (games/baccarat/baccarat.css)
   -----------------------------------------------------------------------------
   Game-SPECIFIC styles for the Baccarat 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 baccarat-specific
   selectors (the felt table, hand rows, cards, flip-in, bet spots, winner banner).

   a11y: 0 horizontal overflow @360px (the card rows wrap + min-width:0), reduced-motion-
   safe (the flip animation is gated off — cards resolve face-up instantly). Bet spots are
   44px touch targets. The stake + Bet button are the shared chrome (owned centrally).
   ========================================================================== */

/* ---- The felt table: two hand rows stacked, with a result banner. ----------
   FILL: the felt is the hero — it grows to fill the tall display column (flex:1) and
   centres its two hands vertically, so the cards sit LARGE in the middle of the panel.
   The max-width grows with viewport height (vh) so a tall monitor gets a wider felt; the
   floor keeps it tidy on a phone. (`min-height:0` lets the flex child shrink at 360px.) */
.bacc-table {
  /* card geometry lives on the table so BOTH the row (min-height) and the card inherit it
     (custom props inherit DOWN — defining on the card alone wouldn't reach .bacc-cards). */
  --bacc-card-w: clamp(46px, 12vh, 150px);
  --bacc-card-h: calc(var(--bacc-card-w) * 60 / 44);
  width: 100%;
  max-width: min(880px, 100%);
  margin: 0 auto;          /* the panel's flex gap handles vertical spacing */
  padding: clamp(var(--sp-3), 2.4vh, var(--sp-5));
  /* Size the felt to its CONTENT (hands + up to 3 cards) instead of growing to fill the tall column —
     baccarat tops out at 3 cards/side, so flex:1 left a big empty band below the cards. Not-growing frees
     that vertical space for the (now stacked) roadmaps below. */
  flex: 0 1 auto;
  min-height: 0;
  position: relative;            /* anchor for the centered verdict banner + the idle empty-state overlay */
  display: flex;
  flex-direction: row;           /* Player | Banker SIDE BY SIDE (was stacked vertically) */
  align-items: center;           /* centre the hands vertically in the tall felt */
  justify-content: center;
  gap: clamp(var(--sp-3), 3vw, var(--sp-6));
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 70%),
    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);
}

/* ---- Idle-felt affordance: face-down card backs + a "Place a bet to deal" hint. -----------
   Audit #5 — before a coup the felt is otherwise two empty bordered boxes that read as broken.
   This centered overlay gives the resting table a face. Absolutely centred over the felt so it
   doesn't push the hand boxes; hidden the instant a card lands (.bacc-table.has-cards). It also
   gives the empty felt a CONTENT floor on mobile so it doesn't balloon to full-screen (audit #2:
   the felt is flex:1 and grew unbounded with no content — the controls fell below the fold).
   ANCHOR (report #1): the overlay is `inset:0` ABSOLUTE, so it positions against the felt's
   PADDING box — but ONLY if the felt (.bacc-table) is the positioned offset-parent. .bacc-table
   sets `position:relative` (above) precisely for this; if that ever regresses the overlay would
   anchor to the nearest positioned ancestor (the display column) and render OFF the felt. The
   overlay does its OWN flex centring (it's out of flow), so the felt's row layout / align-items
   never shifts it. It is purely presentational + pointer-events:none, so it never moves the hands. */
.bacc-empty {
  position: absolute;
  inset: 0;
  margin: auto;            /* belt-and-braces centring within the inset box (independent of felt flow) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-2), 2vh, var(--sp-4));
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--dur-2);
}
/* hide cleanly once a card lands: fully transparent + inert + removed from the hit tree. */
.bacc-table.has-cards .bacc-empty { opacity: 0; visibility: hidden; pointer-events: none; }
/* Decorative face-down card backs removed — on an empty felt they read as real DEALT cards (confusing,
   and they sat dead-centre over the hand boxes). The idle state is just the "Place a bet to deal" hint. */
.bacc-empty-backs { display: none; }
/* a face-down card back, sized off the same card geometry as a dealt card (var inherits from .bacc-table). */
.bacc-empty-back {
  width: var(--bacc-card-w);
  height: var(--bacc-card-h);
  border-radius: clamp(var(--r-sm, 8px), 1.4vh, 14px);
  border: 1px solid var(--line-2);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--violet) 22%, transparent) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, var(--surface-2), var(--bg-1));
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--bg-1) 70%, transparent), 0 2px 8px rgba(0, 0, 0, .35);
  opacity: .7;
}
.bacc-empty-hint {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- A hand block (Player / Banker): a header (name + total) + a card row. -- */
.bacc-table > .bacc-hand { flex: 1 1 0; min-width: 0; }
/* Narrow screens: stack the two hands again so the cards don't get tiny side-by-side. */
@media (max-width: 560px) {
  .bacc-table { flex-direction: column; }
  /* Audit #2 — on a phone the felt is flex:1 and, with no dealt cards, ballooned to fill the whole
     viewport (the empty hand boxes stacked vertically), pushing the mode toggle / bet spots / Bet button
     below the fold so a first-time player saw only empty boxes and thought the game was broken. CAP the
     EMPTY felt's height so the controls stay reachable without scrolling; once a coup deals (.has-cards)
     the cap lifts so a real hand is never clipped. The empty hint is absolutely centred, so capping the
     felt doesn't crop it — it just stops the felt from growing unbounded when there's nothing on it. */
  .bacc-table:not(.has-cards) {
    flex: 0 1 auto;
    max-height: 46vh;
    min-height: calc(var(--bacc-card-h) + 2 * var(--sp-5));
  }
}
.bacc-hand {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md, 12px);
  background: var(--bg-1);
  transition: box-shadow var(--dur-2), border-color var(--dur-2);
}
/* CLS FIX 2 — the hand TOTAL renders 0→up to 44px when the coup deals. With no reserved
   height the head grew the hand block on deal (re-centring the felt). Reserve a slot sized
   for the worst-case total (the clamp tops out at 44px, line-height 1) so the number swaps
   into an already-sized head. Width is already handled (.bacc-hand-total min-width:1.2em). */
.bacc-hand-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  min-height: clamp(var(--fs-lg, 20px), 5vh, 44px);
}
.bacc-hand-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.bacc-hand-player .bacc-hand-name { color: var(--cyan); }
/* Banker = RED, Player = blue — the universal baccarat convention (the "big road" scoreboard marks Banker
   red, Player blue). Uses --lose (the theme's AA-safe red, 5.0:1 on the felt) rather than the deeper card
   crimson (#c01f3c) which fails contrast as a label on the dark felt. Within baccarat --lose is not used for
   any loss state, so there's no semantic collision — the win indication is the separate green .winner glow. */
.bacc-hand-banker .bacc-hand-name { color: var(--lose); }
.bacc-hand-total {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-lg, 20px), 5vh, 44px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--fg);
  min-width: 1.2em;
  text-align: right;
}

/* the winning hand gets a glowing ring that pulses IN as a distinct beat after the cards land. */
.bacc-hand.winner {
  border-color: var(--win);
  box-shadow: 0 0 0 1px var(--win), 0 0 20px var(--win-glow);
  animation: bacc-winner-in var(--dur-4, .6s) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) both;
}
.bacc-hand.winner .bacc-hand-total {
  color: var(--win);
  text-shadow: 0 0 16px var(--win-glow);
}
@keyframes bacc-winner-in {
  0%   { box-shadow: 0 0 0 1px var(--win), 0 0 0 var(--win-glow); }
  55%  { box-shadow: 0 0 0 2px var(--win), 0 0 34px var(--win-glow); }
  100% { box-shadow: 0 0 0 1px var(--win), 0 0 20px var(--win-glow); }
}

/* ---- The card row: cards wrap so 3 cards never overflow @360px. ------------
   CLS FIX 1 — baccarat caps at 3 cards/side, and a 3rd card can WRAP to a 2nd row at
   narrow widths (the hand is flex:1 side-by-side). The wrap grew the hand block + the
   felt re-centred. Reserve the WORST-CASE TWO rows up front (2 card heights + the row
   gap) so the 3rd card drops into already-reserved space — zero wrap shift. The cards
   still START top-aligned so a 2-card hand sits where it always did, the 3rd just lands
   on the reserved second line. */
.bacc-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: clamp(var(--sp-2, 8px), 1.4vh, var(--sp-3));
  /* Reserve ONE card row — all 3 baccarat cards fit on a single row, so the old 2-row reserve left an
     empty row of dead space under the cards. (flex-wrap still lets a rare tall-narrow layout wrap.) */
  min-height: var(--bacc-card-h);
  min-width: 0;
}

/* ---- A single card: a rounded tile with a rank + suit glyph. ---------------
   FILL: the card scales with viewport HEIGHT (clamp floor→vh→cap) so it grows on a tall
   screen and caps on a phone; the height keeps the ~44:60 (0.733) card aspect. The glyphs
   are em-based off the card width so the ink scales WITH the card. */
.bacc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--bacc-card-w);
  height: var(--bacc-card-h);
  flex: 0 0 auto;
  border-radius: clamp(var(--r-sm, 8px), 1.4vh, 14px);
  background: linear-gradient(180deg, #f5f7fb, #d9dee8);
  border: 1px solid var(--line-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  color: #1c2230; /* card faces are light; ink reads on white (not a theme color, it's "ink") */
  font-family: var(--font-display);
  line-height: 1;
}
.bacc-card.red { color: #c01f3c; }
.bacc-card-rank { font-weight: var(--fw-bold); font-size: calc(var(--bacc-card-w) * 0.4); }
.bacc-card-suit { font-size: calc(var(--bacc-card-w) * 0.5); margin-top: .12em; }

/* flip-in: a 3D flip as a card lands. Duration is baccarat-specific (.51s = 50% slower than the shared
   --dur-3 .34s token) so the card reveal doesn't feel rushed — matches the ×1.5 stagger in baccarat.js. */
.bacc-card.flip-in { animation: bacc-flip .51s var(--ease-out, cubic-bezier(.2,.8,.2,1)) both; transform-origin: center; }
@keyframes bacc-flip {
  0%   { transform: rotateY(90deg) scale(.9); opacity: 0; }
  60%  { transform: rotateY(-8deg) scale(1.02); opacity: 1; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}

/* ---- Result banner: which side won + the verdict. --------------------------
   Audit #6 — the banner used to be an in-flow flex sibling of the two hands (row direction),
   so it floated off to the RIGHT of the felt, detached from the action with the verdict (the
   most important readout) the least prominent thing on screen. It is now ABSOLUTELY positioned,
   anchored to the felt's CENTER (transform-centred), so the verdict lands ON the table over the
   hands as a chip/ribbon. It only appears at result time (opacity 0 until .show) and the cards
   are already stable by then, so leaving the flow causes no CLS. Single non-wrapping line (the
   font scales with viewport width so it shrinks rather than overflows on a narrow felt). */
.bacc-banner {
  position: absolute;
  left: 50%;
  bottom: clamp(var(--sp-2), 3vh, var(--sp-5));
  transform: translateX(-50%) translateY(6px);
  z-index: 2;
  max-width: calc(100% - 2 * var(--sp-3));
  text-align: center;
  white-space: nowrap;
  padding: clamp(6px, 1.2vh, 12px) clamp(var(--sp-3), 3vw, var(--sp-5));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-1) 86%, transparent);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-md, 16px), 4.5vw, var(--fs-xl, 28px));
  letter-spacing: .05em;
  color: var(--fg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2), transform var(--dur-2);
}
.bacc-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.bacc-banner.is-win {
  color: var(--win);
  border-color: color-mix(in srgb, var(--win) 60%, var(--line-2));
  text-shadow: 0 0 18px var(--win-glow);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 0 22px var(--win-glow);
  animation: bacc-banner-pop var(--dur-3, .4s) var(--ease-spring, cubic-bezier(.2,1.3,.3,1)) both;
}
.bacc-banner.is-push { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--line-2)); }
.bacc-banner.is-loss { color: var(--fg-dim); border-color: var(--line-2); }
/* The realized-multiplier figure (counts up via fx.numberRamp on a win). tabular-nums so the ramp
   doesn't jitter the banner width frame-to-frame. Inherits the banner color/weight. */
.bacc-banner-mult { font-variant-numeric: tabular-nums; }
/* PAIR side-bet chip (audit #10): a small pill after the verdict stating which side paired (or not), so
   the Pair win condition is visible, not just announced to SR. Tinted win-green / muted on no-pair. */
.bacc-banner-pair {
  display: inline-block;
  margin-left: .5em;
  padding: .12em .55em;
  border-radius: 999px;
  font-size: .62em;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  vertical-align: middle;
  border: 1px solid var(--line-2);
}
.bacc-banner-pair.is-paired { color: var(--win); border-color: color-mix(in srgb, var(--win) 55%, var(--line-2)); background: color-mix(in srgb, var(--win) 14%, transparent); }
.bacc-banner-pair.no-pair { color: var(--fg-dim); }
/* The banner is translateX(-50%)-centred on the felt, so the pop must KEEP that centring offset while it
   scales (a bare scale() would drop the translateX and snap the chip left). */
@keyframes bacc-banner-pop {
  0%   { transform: translateX(-50%) scale(.82); }
  100% { transform: translateX(-50%) scale(1); }
}

/* ---- Bet spots: Player / Banker / Tie (row 1) + Player Pair / Banker Pair (row 2). --- */
/* 6-col track: the 3 main spots span 2 each (a full row); the 2 pair side bets span 3 each. */
.bacc-spots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-2, 8px);
  width: 100%;
  max-width: 480px;
  margin: 0 auto var(--sp-3);
}
.bacc-spot-player, .bacc-spot-banker, .bacc-spot-tie { grid-column: span 2; }
.bacc-spot-pair { grid-column: span 3; }
.bacc-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--touch, 44px);
  padding: var(--sp-2);
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md, 12px);
  background: var(--surface-2);
  color: var(--fg-dim);
  font-family: var(--font-display);
  cursor: pointer;
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background var(--dur-2), color var(--dur-2);
}
.bacc-spot-name { font-weight: var(--fw-bold); font-size: var(--fs-md, 16px); letter-spacing: .04em; }
.bacc-spot-pays { font-size: var(--fs-xs); color: var(--muted); }
.bacc-spot:hover { border-color: var(--line-1); }
.bacc-spot:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* per-spot accent so the three spots read distinctly (synthwave tokens only). */
.bacc-spot-player.sel { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 16px color-mix(in srgb, var(--cyan) 45%, transparent); color: var(--fg); background: color-mix(in srgb, var(--cyan) 10%, var(--surface-2)); }
.bacc-spot-banker.sel { border-color: var(--lose); box-shadow: 0 0 0 1px var(--lose), 0 0 16px var(--lose-glow); color: var(--fg); background: color-mix(in srgb, var(--lose) 10%, var(--surface-2)); }
.bacc-spot-tie.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px color-mix(in srgb, var(--gold) 45%, transparent); color: var(--fg); background: color-mix(in srgb, var(--gold) 10%, var(--surface-2)); }
/* the two Stake-parity pair side bets read as a distinct (violet) tier from the main spots. */
.bacc-spot-pair.sel { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet), 0 0 16px color-mix(in srgb, var(--violet) 45%, transparent); color: var(--fg); background: color-mix(in srgb, var(--violet) 10%, var(--surface-2)); }

/* ---- Visually-hidden live region (announces totals/winner/payout to SR). --- */
.bacc-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;
}

/* ---- Reduced motion: no flip/pop — cards + banner resolve instantly. -------- */
@media (prefers-reduced-motion: reduce) {
  .bacc-card.flip-in,
  .bacc-hand.winner,
  .bacc-banner,
  .bacc-banner.is-win { animation: none !important; }
  .bacc-card.flip-in { transform: none; opacity: 1; }
  /* the banner still appears instantly (opacity transition is harmless, but cut it for zero motion). */
  .bacc-banner { transition: none; }
}

/* ---- Narrow viewport: tighten the table + spots so nothing overflows @360px.
   Shrink the card-WIDTH var (the height + glyphs follow it via calc) so 3 cards per hand
   still fit in a row at 360px without overflow. */
@media (max-width: 400px) {
  .bacc-table { --bacc-card-w: clamp(40px, 8.5vh, 56px); padding: var(--sp-2); }
  .bacc-spot-pays { font-size: 10px; }
}

/* =============================================================================
   LIVE (shared-draw) mode — the mode toggle, the live bar (connection + countdown),
   and the live panel (my-result banner + the shared-coup history strip). Mirrors the
   roulette live surface; synthwave tokens only. Hidden in SOLO mode.
   ========================================================================== */

/* ---- mode toggle: Solo | Live — now a gv-controls segmented({variant:'tab', twoLine}) tagged
   .bacc-modebar. It uses the shared .gv-seg / .seg button.active chrome; this just constrains the width
   and keeps the distinctive GOLD Live tab (keyed off the active live option). ---- */
.bacc-modebar { width: 100%; max-width: 480px; margin: 0 auto var(--sp-3); }
.bacc-modebar .gv-seg-btn[data-value="live"].active {
  color: var(--win-ink, #07130c);
  background: linear-gradient(180deg, var(--gold), var(--gold-grad-end));
  box-shadow: 0 0 18px var(--gold-glow);
}

/* ---- live bar: connection + phase + countdown ----
   CLS FIX (report #3): the phase label is the live STATUS line ("Place your bets - 10.3s" →
   "No more bets - dealing…" → "Bet placed - $1,000.00 on Banker Pair · waiting…"). It sits in
   the NARROW left controls rail, so the longest message WRAPPED to 2–3 lines and grew the bar
   from ~57px to ~116px every time the status changed — bouncing the bet-spots board below it up
   and down the rail. Reserve a FIXED single-line height (the bar never changes height as the text
   changes) and force the phase onto ONE line with an ellipsis so a long message truncates instead
   of wrapping. `flex-wrap:nowrap` keeps the conn dot + phase + count on one row. */
.bacc-livebar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  flex-wrap: nowrap; box-sizing: border-box; min-height: 44px;
  width: 100%; max-width: 480px; margin: 0 auto var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md, 12px);
}
.bacc-livebar.hidden, .bacc-live.hidden, .bacc-live-cancel.hidden { display: none; }
/* LIVE-bet cancel / change controls (shown only with a bet in + the window open). */
.bacc-live-cancel { display: inline-flex; align-items: center; gap: 6px; }
.bacc-live-cancelbtn, .bacc-live-changebtn {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 4px 10px; cursor: pointer;
  border-radius: var(--r-sm, 8px); border: 1px solid var(--line-2); background: var(--surface-3, var(--surface-2)); color: var(--fg);
}
.bacc-live-cancelbtn { color: var(--lose, #ff6b6b); border-color: var(--lose, #ff6b6b); }
.bacc-live-cancelbtn:hover:not(:disabled), .bacc-live-changebtn:hover:not(:disabled) { filter: brightness(1.15); }
.bacc-live-cancelbtn:disabled, .bacc-live-changebtn:disabled { opacity: .5; cursor: not-allowed; }
.bacc-conn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--fg-dim); }
.bacc-conn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-dim); }
.bacc-conn.online .bacc-conn-dot { background: var(--win); box-shadow: 0 0 8px var(--win-glow); }
.bacc-conn.connecting .bacc-conn-dot { background: var(--gold); animation: bacc-conn-pulse 1s var(--ease-out) infinite; }
.bacc-conn.offline .bacc-conn-dot { background: var(--lose, #ff6b6b); }
@keyframes bacc-conn-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* SINGLE-LINE status (report #3): never wrap — truncate with an ellipsis so a long "Bet placed - …"
   message can't grow the bar. min-width:0 lets the flex item shrink below its content so ellipsis
   actually engages (a flex child defaults to min-width:auto and would otherwise refuse to shrink). */
.bacc-live-phase {
  flex: 1 1 auto; min-width: 0; text-align: center; font-size: var(--fs-sm); color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* DOUBLE-SECONDS FIX (report #4): the countdown seconds appear in the PHASE label already
   ("Place your bets - 10.3s"); this separate gold figure showed the SAME "10.3" a second time in
   the same bar. The JS no longer writes the seconds here (it's emptied), and we hide the element so
   it reserves no width and the bar reads with the seconds exactly ONCE (in the labelled phase). */
.bacc-live-count { display: none; }

/* ---- live panel: my-result banner + shared-coup history strip ---- */
.bacc-live { width: 100%; max-width: 480px; margin: var(--sp-3) auto 0; }
/* CLS FIX (report #5): the my-result banner ("BANKER WINS · P 6 / B 8. You sat this coup out." /
   "WIN · 1.95× · …") used to be `display:none` when hidden and a flow block when shown, so every
   settle it APPEARED and shoved the roadmaps below it DOWN ~50px (then the next coup hid it and they
   jumped back UP). The banner sits ABOVE the roadmaps in the live panel, so its appearance was the
   roadmap shift. Now we PRE-ALLOCATE a fixed slot: the banner box is ALWAYS in flow with a reserved
   min-height (one line of text), and `.hidden` only makes its CONTENT invisible + inert — the box
   (and therefore the roadmaps below it) never moves across idle → betting → dealing → result → idle. */
.bacc-live-banner {
  display: flex; align-items: center;
  box-sizing: border-box; min-height: calc(1.6em + 2 * var(--sp-2) + 2px); /* 1 line + padding + border (reserve matches the shown 1-line height exactly so show/hide never shifts the roadmaps) */
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  border: 1px solid var(--line-2); border-radius: var(--r-md, 12px);
  font-size: var(--fs-sm); color: var(--fg); background: var(--surface-2);
}
/* hidden = reserved-but-invisible: keep the box (and its reserved min-height) IN FLOW so the roadmaps
   below never shift, but make it fully invisible + inert. The global `.hidden { display:none !important }`
   utility (03-layout-forms.css) would otherwise pull the box out of flow — we override it with our own
   `!important` (same trick as .roul-livebar.hidden) so the slot stays reserved; `visibility:hidden`
   hides the content/tint/border while keeping the box's geometry. */
.bacc-live-banner.hidden {
  display: flex !important; visibility: hidden; pointer-events: none;
}
.bacc-live-banner.is-win { border-color: var(--win); background: linear-gradient(180deg, rgba(46,213,115,.18), rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px var(--win), 0 0 16px var(--win-glow); }
.bacc-live-banner.is-loss { border-color: var(--lose, #ff6b6b); background: linear-gradient(180deg, rgba(255,107,107,.14), rgba(0,0,0,.2)); }
.bacc-live-banner.is-flat { color: var(--fg-dim); }
.bacc-live-histhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-2); }
.bacc-live-histlabel { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--fg-dim); }
.bacc-live-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--gold); }
.bacc-live-empty { font-size: var(--fs-xs); color: var(--fg-dim); }
.bacc-live-disc { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--fg-dim); }

/* ============================================================================
   STANDARD BACCARAT ROADMAPS — Bead Plate + Big Road. CSS-only (no images): each
   road is a CSS grid whose cells the JS places by (gridColumn, gridRow). The JS
   sets --bacc-cols / --bacc-rows per chart. Display-only; reduced-motion-safe
   (a static chart — no essential motion).
   ---- shared roadmap colours: RED = Banker, BLUE = Player, GREEN = Tie ----
   (Player uses an explicit baccarat-standard BLUE — NOT the rose --accent — so it
    is unmistakable against the RED banker; the three sides must read at a glance.)
   ============================================================================ */
.bacc-roads {
  --bacc-banker: #ef4360;  /* RED  — Banker */
  --bacc-player: #3b88f0;  /* BLUE — Player (standard; deliberately not --accent rose) */
  --bacc-tie:    #29c46b;  /* GREEN — Tie */
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.bacc-road { display: flex; flex-direction: column; gap: 4px; }
.bacc-road-cap { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-dim); }

/* ROADMAPS stay STACKED (Bead Plate above Big Road) at every width, at the full base cell size. The felt no
   longer grows to fill the column (flex:0 1 auto above), so the reclaimed vertical space holds the two
   stacked roads without pushing the disclaimer below the fold — no need to squeeze them side-by-side. */

/* shared cell geometry — small, dense, scrollable horizontally on a narrow rail. */
.bacc-bead-grid,
.bacc-big-grid {
  --bacc-cell: 20px;
  --bacc-rows: 6;
  --bacc-cols: 1;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--bacc-rows), var(--bacc-cell));
  grid-template-columns: repeat(var(--bacc-cols), var(--bacc-cell));
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm, 8px);
  background:
    repeating-linear-gradient(0deg,   transparent 0, transparent calc(var(--bacc-cell) + 1px), rgba(255,255,255,.04) calc(var(--bacc-cell) + 1px), rgba(255,255,255,.04) calc(var(--bacc-cell) + 2px)),
    repeating-linear-gradient(90deg,  transparent 0, transparent calc(var(--bacc-cell) + 1px), rgba(255,255,255,.04) calc(var(--bacc-cell) + 1px), rgba(255,255,255,.04) calc(var(--bacc-cell) + 2px)),
    var(--surface-2);
  overflow-x: auto;
  min-height: calc(var(--bacc-cell) * 6 + 14px);
}
/* CLS FIX 4 — the empty roadmap dropped to 40px then jumped to ~134px on the first coup
   (growing the live rail). Hold the SAME min-height as the populated grid so the first coup
   paints into already-reserved space. (Lower priority — it's the side rail, not the felt
   hot-path — but cheap and removes the jump.) */
.bacc-bead-grid.is-empty,
.bacc-big-grid.is-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(var(--bacc-cell) * 6 + 14px); background: var(--surface-2);
}

/* ---- BEAD PLATE: a solid colour dot per coup (one cell each, chronological) ---- */
.bacc-bead { position: relative; width: var(--bacc-cell); height: var(--bacc-cell); }
.bacc-bead-dot {
  position: absolute; inset: 2px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.3);
}
.bacc-bead-player .bacc-bead-dot { background: radial-gradient(circle at 35% 30%, #7db4ff, var(--bacc-player) 70%); }
.bacc-bead-banker .bacc-bead-dot { background: radial-gradient(circle at 35% 30%, #ff8a8a, var(--bacc-banker) 70%); }
.bacc-bead-tie    .bacc-bead-dot { background: radial-gradient(circle at 35% 30%, #5ff09a, var(--bacc-tie) 70%); }

/* optional standard pair corner dots — red top-left = banker pair, blue bottom-right = player pair. */
.bacc-pair { position: absolute; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.bacc-pair-b { top: 1px;    left: 1px;    background: var(--bacc-banker); }
.bacc-pair-p { bottom: 1px; right: 1px;   background: var(--bacc-player); }

/* ---- BIG ROAD: hollow RING per coup (RED = Banker, BLUE = Player), tie = green slash ---- */
.bacc-big { position: relative; width: var(--bacc-cell); height: var(--bacc-cell); }
.bacc-big-ring {
  position: absolute; inset: 2px; border-radius: 50%;
  border: 2.5px solid transparent; background: transparent;
}
.bacc-big-banker .bacc-big-ring { border-color: var(--bacc-banker); box-shadow: inset 0 0 3px rgba(210,60,60,.5); }
.bacc-big-player .bacc-big-ring { border-color: var(--bacc-player); box-shadow: inset 0 0 3px rgba(47,127,224,.5); }
/* a tie on this cell: a small green diagonal slash through the ring (count when >1 tie). */
.bacc-big-tie {
  position: absolute; inset: 2px; pointer-events: none;
  background: linear-gradient(45deg, transparent 44%, var(--bacc-tie) 44%, var(--bacc-tie) 56%, transparent 56%);
}
.bacc-big-tiecount {
  position: absolute; right: -1px; bottom: -2px;
  font-size: 8px; font-weight: var(--fw-bold); line-height: 1;
  color: var(--bacc-tie); text-shadow: 0 0 2px rgba(0,0,0,.8);
}

@media (prefers-reduced-motion: reduce) {
  .bacc-conn.connecting .bacc-conn-dot { transition: none; animation: none; }
}
@media (max-width: 400px) {
  .bacc-modebar .gv-seg-sub { font-size: 9px; }
  .bacc-live-phase { font-size: var(--fs-xs); }
}