/* FAUDA — fit-to-viewport layout.
   Body fills 100dvh as a flex column; topbar + actions are fixed-height
   chrome; .board-wrap flex-grows to fill the remaining vertical space.
   The board itself is a 2×2 grid of 4 large squares (the four FAUDA
   targets: 1 even / 2 even / 3 even / 3 of a kind).

   Visual identity vs 3DICE:
   - Real maple-grain wood frame (background image) around the board.
   - Same chip styling + same celebration FX as 3DICE (shared
     chip-on-board + win-fx-layer rules), enlarged + centered.
   - Top results panel renders each round as a colored status capsule
     ("1 Even" / "2 Even" / "3 Even" / "3 OF A KIND" / "💀 FAUDA"),
     larger for the live round, smaller for history — see .result-cap.
*/

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }

:root {
  --bg:           #0a1530;
  --bg-elev-1:   #0f1d3f;
  --bg-elev-2:   #14264f;
  --bg-row:       #122142;
  --border:       #1d3260;
  --border-hot:   #f0c252;
  --border-warm:  #5b8db8;
  --text:         #e4ecff;
  --text-muted:   #8aa2c8;
  --gold-lt:      #ffd882;
  --gold:         #f0c252;
  --teal:         #5ed4d4;
  --cyan:         #5fb7ff;
  --cyan-soft:    #8fcdff;
  --gold-glow:    #ffe39a;
  --cream:        #fff5d8;
  --txt-dim:      rgba(234, 242, 255, 0.62);
  /* Light wood palette — warmer + lighter than the dark cobalt the
     3DICE board sits on. Honey to caramel gradient with a faint
     near-white highlight for the inner rim. */
  --wood-light:   #d8a96b;
  --wood-mid:     #b07d3a;
  --wood-dark:    #7a4f1d;
  --wood-shine:   #f4d9a8;
  --wood-grain:   rgba(80, 45, 12, 0.18);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Decorative diamond pattern on desktop (mirrors 3DICE Stab 136). */
@media (min-width: 768px) {
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 13L19 16L16 19L13 16Z' fill='%235fb7ff' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-repeat: repeat;
  }
}

/* ───────────────────────────────────────────────────────────────────
   .board-wrap — real-wood frame around the betting board.
   The wrap is the visible "table"; the inner .board is the felt.
   .board-frame is the wood rail itself, faced with an Unsplash
   maple-grain photo (Ted Balmer, Unsplash License — free commercial).
   Texture lives at /assets/img/wood-frame.webp (600x450 WebP q=80,
   ~62 KB). Gold inset edges + outer bevel turn the bare texture into
   a framed rail rather than a slab of board. The .results-panel sits
   INSIDE the rim, above the 2×2 board.
*/
.board-wrap {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;                  /* breathing room around the wood rim */
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;             /* anchor for .dice-overlay + .win-fx-layer */
}
.board-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 14px;                  /* wood rim thickness */
  border-radius: 22px;
  /* Maple-grain texture (Unsplash, free commercial). Cover-sized so
     the rim shows continuous grain rather than a tiled seam at the
     usual mobile widths. Browsers serve the WebP directly; ?v=
     cache-bust set on the URL. */
  background:
    url("/assets/img/wood-frame.webp?v=fauda3") center / cover no-repeat;
  /* Inner gold rims + outer bevel + drop shadow turn the texture into
     a framed rail. Outer bevel: light highlight on top, deep shadow
     underneath, gold hairline echoes the cobalt+gold language. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 227, 154, 0.55),         /* gold hairline rim */
    inset 0 2px 0 rgba(255, 245, 216, 0.45),           /* top highlight */
    inset 0 -3px 6px rgba(0, 0, 0, 0.50),              /* bottom shadow */
    0 8px 18px rgba(0, 0, 0, 0.60);                    /* drop shadow */
  /* Stack the panel + board vertically with a small gap; the panel
     takes its natural height, the board flexes to fill the rest. */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Recessed felt — the inner board sits inside the frame and reads
   as a dropped panel. */
.board {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(20, 42, 100, 0.85) 0%, rgba(5, 13, 36, 0.95) 100%);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.70),
    inset 0 -1px 0 rgba(255, 245, 216, 0.06);
  /* Slightly compressed from the pre-panel 1:1 aspect — the panel
     takes ~62-78 px above the grid, so a 9:10 board keeps the four
     cells nearly square without forcing a taller frame. min-height/
     max-height let the flex parent shrink the grid cleanly when the
     viewport is short. */
  min-height: 0;
  aspect-ratio: 9 / 10;
  max-height: 100%;
  flex: 1 1 auto;
}

/* ───────────────────────────────────────────────────────────────────
   .results-panel — top strip inside the wood rim, above the board.
   Replaces the pre-FAUDA bottom #roundResult pill that overlapped
   the bet-total badge on phone widths. Two-row stacked layout:
   current round on top (large), history strip on bottom (small,
   horizontally scrollable when overflowing). Dark cobalt panel with
   gold hairline — visually distinct from the wood it sits on so it
   reads as a display, not a decal.
*/
/* Top panel layout: single horizontal row. Current-round capsule on
   the LEFT (larger), history capsules to its RIGHT (newest closest
   to current, older drifting further out and silently dropping off
   the right edge when the strip runs out of room — no scrollbar). */
.results-panel {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse 100% 100% at 50% 0%, rgba(95, 183, 255, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, rgba(5, 13, 36, 0.95) 0%, rgba(2, 6, 15, 0.92) 100%);
  border: 1px solid rgba(240, 194, 82, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 216, 0.10),
    inset 0 -1px 2px rgba(0, 0, 0, 0.45);
  min-height: 50px;             /* fits the larger capsule + padding */
}
.results-current {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}
.results-current:empty::before {
  content: '\2014';                /* em-dash placeholder before first round */
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 400;
  opacity: 0.5;
  padding: 0 8px;
}
.results-history {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;             /* clip overflowing capsules (no scrollbar) */
  /* Soft fade-out on the right so the truncation reads as a fade
     rather than a hard cut. Pure cosmetic; doesn't change which
     capsules render. */
  -webkit-mask-image: linear-gradient(to right, black 0%, black 86%, transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black 86%, transparent 100%);
}
.results-history:empty::before {
  content: 'no past rounds yet';
  color: var(--text-muted);
  font-size: 10px;
  opacity: 0.45;
  padding: 0 4px;
}

/* ─── Result capsule — single design family used for both the current
   round (LG modifier) and history (base size). All five result types
   share the same shape + glyph rules; only color and (for triples)
   shine differ. Constant height per size; width flexes with label
   length per spec. ──────────────────────────────────────────────── */
.result-cap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;                 /* history size — constant across labels */
  padding: 0 10px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.50);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 2px rgba(0, 0, 0, 0.30);
}
.result-cap--lg {
  height: 38px;                 /* live-round size */
  padding: 0 18px;
  border-radius: 19px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -2px 3px rgba(0, 0, 0, 0.40),
    0 2px 6px rgba(0, 0, 0, 0.55);
}

/* Cobalt blue — "1 Even" / "2 Even". Routine result types. */
.result-cap.evens-1,
.result-cap.evens-2 {
  color: var(--cream);
  background: linear-gradient(180deg, #2f6ddf 0%, #1f4ea8 60%, #0e1f4a 100%);
  border-color: rgba(95, 183, 255, 0.60);
}

/* Gold — "3 Even". Jackpot tier (all dice even, no triple). */
.result-cap.evens-3 {
  color: #2a1a06;
  background: linear-gradient(180deg, var(--cream) 0%, var(--gold-lt) 55%, var(--gold) 100%);
  border-color: rgba(138, 90, 19, 0.90);
  text-shadow: 0 1px 0 rgba(255, 245, 216, 0.45);
}

/* Gold + shine — "3 OF A KIND". Same gold base as evens-3 plus a
   diagonal specular sweep via ::before and a warm outer glow. Static
   (no animation) — the sheen alone marks the highest-payout result. */
.result-cap.triple {
  position: relative;
  overflow: hidden;
  color: #2a1a06;
  background: linear-gradient(180deg, var(--cream) 0%, var(--gold-lt) 55%, var(--gold) 100%);
  border-color: rgba(138, 90, 19, 1);
  text-shadow: 0 1px 0 rgba(255, 245, 216, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -2px 3px rgba(138, 90, 19, 0.35),
    0 0 8px rgba(255, 227, 154, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.50);
}
.result-cap.triple::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.50) 50%,
    transparent 62%
  );
  pointer-events: none;
}
.result-cap.triple > * { position: relative; z-index: 1; }

/* Red — "💀 FAUDA". Board-clear result; sharp contrast vs every other
   capsule so it reads as the bad outcome at a glance. */
.result-cap.fauda {
  color: #fff5d8;
  background: linear-gradient(180deg, #e93545 0%, #c62032 60%, #7a0e1a 100%);
  border-color: rgba(239, 68, 68, 0.90);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* ───────────────────────────────────────────────────────────────────
   FAUDA cells — large, four total. Side-by-side label + multiplier,
   labels read horizontally (so "3 of a kind" doesn't wrap).
*/
.cell {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(95, 183, 255, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-elev-2) 0%, var(--bg-elev-1) 100%);
  color: var(--text);
  font-family: inherit;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 80ms ease, border-color 120ms ease;
  touch-action: manipulation;
  outline: none;
  position: relative;
  min-width: 0;
  min-height: 0;
}
.cell:active { transform: translateY(1px); }
.cell-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 6px;
}
.cell-label {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-align: center;
}
.cell-mult {
  font-size: 16px;
  font-weight: 800;
  color: var(--gold-lt);
  letter-spacing: 0.06em;
  line-height: 1;
  background: linear-gradient(180deg, var(--cream) 0%, var(--gold-lt) 60%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 4px rgba(240, 194, 82, 0.30));
}

/* Triple cell — the headline jackpot square gets a warmer rim. */
.cell-triple {
  border-color: var(--border-hot);
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 227, 154, 0.22) 0%, transparent 70%),
    linear-gradient(180deg, #1a2b5a 0%, var(--bg-elev-1) 100%);
}
.cell-triple .cell-label { color: var(--gold-lt); }

/* Rejected-bet flash (per-cell, 400ms). */
.cell.rejected { animation: rejected-flash 400ms ease-out; }
@keyframes rejected-flash {
  0%   { box-shadow: 0 0 0 0  rgba(239, 68, 68, 0.65); }
  100% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

@media (min-width: 480px) {
  .cell-label { font-size: 24px; }
  .cell-mult  { font-size: 18px; }
}

/* ───────────────────────────────────────────────────────────────────
   Footer actions — identical chassis to 3DICE.
*/
.actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 12px 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}
.actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.actions-top {
  justify-content: flex-start;
  gap: 4px;
}
.actions-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 16px;
}
.actions-bottom {
  justify-content: center;
  position: relative;
}

.bet-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.bet-total-amount {
  color: var(--gold-lt);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.clear-btn {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 80ms ease, color 120ms ease, border-color 120ms ease;
}
.clear-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.clear-btn:active { transform: translateY(1px); }

.sound-toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 80ms ease, border-color 120ms ease;
}
.sound-toggle[aria-pressed="true"] { color: var(--text-muted); border-color: rgba(255, 255, 255, 0.10); }
.sound-toggle:active { transform: translateY(1px); }

/* ───────────────────────────────────────────────────────────────────
   Help button + PF badge — same layout as 3DICE.
*/
.help-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(95, 183, 255, 0.45) 0%, transparent 60%),
    linear-gradient(180deg, rgba(20, 42, 100, 0.85) 0%, rgba(5, 13, 36, 0.95) 100%);
  color: var(--gold-glow);
  border: 1px solid rgba(240, 194, 82, 0.65);
  font-family: inherit;
  font-size: 14px; font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 6px rgba(255, 227, 154, 0.45);
  -webkit-tap-highlight-color: transparent;
}
.help-btn:active { transform: translateY(1px); }

.pf-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 0;
  margin-right: -2px;
  padding: 0;
  border-radius: 50%;
  background: rgba(2, 7, 15, 0.40);
  border: 1px solid rgba(255, 227, 154, 0.55);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.pf-badge:hover  { border-color: #ffd882; }
.pf-badge:active { transform: translateY(1px); }
.pf-badge-icon {
  width: 22px;
  height: 22px;
  display: block;
  filter: drop-shadow(0 0 3px rgba(255, 227, 154, 0.45));
}

/* ───────────────────────────────────────────────────────────────────
   Chip cycler — identical to 3DICE except the chip palette length
   (6 denoms vs 5; logic is in chrome.js).
*/
.chip-selector {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
}
.chip-arrow {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(20, 42, 100, 0.65) 0%, rgba(10, 24, 56, 0.85) 100%);
  border: 1px solid rgba(240, 194, 82, 0.40);
  border-radius: 11px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  transition: transform 80ms ease;
}
.chip-arrow:active { transform: translateY(1px); }
.chip-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
}
.chip {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.5);
  position: relative;
  background-clip: padding-box;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(240, 194, 82, 0.65),
    0 0 8px rgba(255, 227, 154, 0.20);
}
.chip::before {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(
    var(--gold-glow) 0deg     22deg,
    transparent      22deg     60deg,
    var(--gold-glow) 60deg     82deg,
    transparent      82deg    120deg,
    var(--gold-glow) 120deg   142deg,
    transparent     142deg    180deg,
    var(--gold-glow) 180deg   202deg,
    transparent     202deg    240deg,
    var(--gold-glow) 240deg   262deg,
    transparent     262deg    300deg,
    var(--gold-glow) 300deg   322deg,
    transparent     322deg    360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 60%, #000 90%, transparent 91%);
          mask: radial-gradient(circle, transparent 60%, #000 60%, #000 90%, transparent 91%);
  pointer-events: none;
}
.chip::after {
  content: '';
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: inherit;
  border: 1px dashed rgba(255, 245, 216, 0.40);
  box-shadow:
    inset 0 2px 3px rgba(255, 245, 216, 0.30),
    inset 0 -3px 4px rgba(0, 0, 0, 0.35),
    inset 0 0 8px rgba(95, 183, 255, 0.15);
  pointer-events: none;
}
.chip > .chip-val { position: relative; z-index: 2; pointer-events: none; }

.chip-sel {
  width: 56px; height: 56px;
  font-size: 18px;
  border: 1.5px solid rgba(0, 0, 0, 0.45);
  margin: 0 4px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(240, 194, 82, 0.85),
    0 0 14px rgba(255, 227, 154, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.65);
}
.chip-sel:active { transform: scale(0.93); }

/* Chip-on-board: centered horizontally AND vertically in the cell,
   visually dominant (owner explicitly accepted that the chip stack
   may partially cover the cell title + multiplier). The stack offset
   is applied as a Y-component of `transform` in bet.js per chip;
   base transform sits dead-center of the cell. z-index above the
   .cell-content so the stack reads in front of label/multiplier. */
.chip-on-board {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  font-size: 18px;
  position: absolute;
  left: 50%;
  top: 50%;
  /* transform set inline per chip in bet.js — see chip stack loop.
     Base is translate(-50%, -50%); per-chip Y offset stacks them. */
  border: 1.5px solid rgba(0, 0, 0, 0.40);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 2;
}

@media (min-width: 480px) {
  .chip-arrow { width: 40px; height: 40px; font-size: 16px; }
  .chip-sel    { width: 64px; height: 64px; font-size: 20px; }
  .chip-on-board { width: 64px; height: 64px; font-size: 20px; }
}

/* ───────────────────────────────────────────────────────────────────
   ROLL button — same gold-rim cobalt as 3DICE.
*/
.roll-btn {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 110px;
  max-width: 200px;
  height: 52px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--text);
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(95, 183, 255, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 100% 50% at 50% 0%, rgba(255, 227, 154, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, #1f4ea8 0%, #0e1f4a 60%, #050d24 100%);
  border: 1px solid rgba(255, 227, 154, 0.85);
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(255, 227, 154, 0.35),
    inset 0 1px 0 rgba(255, 245, 216, 0.40),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.55);
  transition: transform 80ms ease;
}
.roll-btn:active { transform: translateY(1px); }
.roll-btn:disabled,
.roll-btn.rolling {
  opacity: 0.55;
  cursor: default;
}
.roll-btn.rolling:active { transform: none; }
@media (min-width: 480px) {
  .roll-btn   { height: 56px; font-size: 18px; }
}

/* ───────────────────────────────────────────────────────────────────
   Start overlay — same chassis as 3DICE, headline "FAUDA" + the
   "3 of a kind pays x15" payout hook.
*/
.start-ov {
  position: absolute; inset: 0; z-index: 50;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(31, 78, 168, 0.30) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 80%, rgba(95, 183, 255, 0.15) 0%, transparent 70%),
    rgba(2, 6, 15, 0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 0 20px;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 2500ms ease-out, transform 2500ms ease-out;
}
.start-ov.hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
.start-ov .site-logo {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; opacity: 0.9;
  -webkit-tap-highlight-color: transparent;
}
.start-ov .site-logo img {
  height: 28px; width: auto; display: block;
  filter: drop-shadow(0 0 4px rgba(255, 227, 154, 0.30));
}
.start-ov .site-logo span {
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em; line-height: 1;
  background: linear-gradient(180deg, var(--cream) 0%, var(--gold-lt) 60%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.start-ov .site-logo:hover { opacity: 1; }
.start-ov .title {
  font-size: 36px; font-weight: 900; letter-spacing: 0.18em;
  background: linear-gradient(180deg, var(--cream) 0%, var(--gold-lt) 50%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(240, 194, 82, 0.45));
}
.start-ov .icon { font-size: 48px; filter: drop-shadow(0 0 18px rgba(255, 227, 154, 0.55)); }
.start-ov .payout-hook {
  font-size: 18px; font-weight: 800;
  color: var(--gold-glow);
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 227, 154, 0.45);
}
.start-ov .tip {
  font-size: 15px; color: #ffb24a;
  text-align: center; max-width: 280px; padding: 0 16px;
  line-height: 1.45;
  text-shadow: 0 0 8px rgba(255, 178, 74, 0.30);
}
.start-ov-footer {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; align-items: center;
}
.start-ov-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--gold-lt);
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; cursor: pointer; text-decoration: none;
  filter: drop-shadow(0 0 4px rgba(255, 227, 154, 0.30));
  -webkit-tap-highlight-color: transparent;
}
.start-ov-icon:hover {
  color: var(--cream);
  filter: drop-shadow(0 0 6px rgba(255, 227, 154, 0.55));
}
.start-ov-icon svg { display: block; }
@media (min-width: 480px) {
  .start-ov .payout-hook { font-size: 20px; }
}

/* ───────────────────────────────────────────────────────────────────
   Dice overlay + win-amount display + win-fx layer — all positioned
   over the .board-wrap container.
*/
.dice-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  display: none;
}
.dice-overlay.active {
  display: block;
}

.cell.cell-win-gold {
  background-image: radial-gradient(
    circle at center,
    rgba(255, 193, 7, 0.22) 0%,
    rgba(255, 193, 7, 0.10) 40%,
    rgba(255, 193, 7, 0)    70%
  );
  border-color: #d4a017 !important;
  box-shadow:
    0 0 0 1px rgba(255, 193, 7, 0.15) inset,
    0 0 10px rgba(255, 193, 7, 0.25);
}

@keyframes cellWinPulse {
  0% {
    border-color: #d4a017;
    box-shadow:
      0 0 0 1px rgba(255, 193, 7, 0.15) inset,
      0 0 10px rgba(255, 193, 7, 0.25);
  }
  50% {
    border-color: #ffd54f;
    box-shadow:
      0 0 0 1px rgba(255, 215, 100, 0.40) inset,
      0 0 22px rgba(255, 215, 100, 0.55);
  }
  100% {
    border-color: #d4a017;
    box-shadow:
      0 0 0 1px rgba(255, 193, 7, 0.15) inset,
      0 0 10px rgba(255, 193, 7, 0.25);
  }
}
.cell.cell-win-pulse {
  animation: cellWinPulse 0.8s ease-in-out 2;
}

@keyframes chipWinningSpin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.chip-winning-spin {
  animation: chipWinningSpin 1.0s ease-in-out 1;
  transform-style: preserve-3d;
}

.win-amount-display {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #ffd54f;
  text-shadow: 0 0 12px rgba(255, 193, 7, 0.6), 0 1px 2px rgba(0, 0, 0, 0.7);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  white-space: nowrap;
}
.win-amount-display.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.0);
}
@media (min-width: 720px) {
  .win-amount-display { font-size: 3.2rem; }
}

.win-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  overflow: visible;
}
.fx-money-particle {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff3c4 0%, #ffd54f 50%, #d4a017 100%);
  border: 1px solid #c79100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 6px rgba(255, 213, 79, 0.55);
  opacity: 0;
  --tx: 0px;
  --rot: 0deg;
  animation: fxRise 1.8s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes fxRise {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.6); }
  10%  { opacity: 1; transform: translate(calc(var(--tx) * 0.1), -20px) rotate(calc(var(--rot) * 0.1)) scale(1); }
  70%  { opacity: 1; transform: translate(calc(var(--tx) * 0.7), -210px) rotate(calc(var(--rot) * 0.7)) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), -300px) rotate(var(--rot)) scale(0.85); }
}
.fx-firework-burst {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
}
.fx-firework-spoke {
  position: absolute;
  left: -1px;
  top: -70px;
  width: 2px;
  height: 70px;
  background: linear-gradient(to top, rgba(255, 213, 79, 1) 0%, rgba(255, 215, 100, 0.9) 50%, rgba(255, 213, 79, 0) 100%);
  border-radius: 1px;
  transform-origin: 50% 100%;
  transform: rotate(var(--angle, 0deg)) scaleY(0);
  opacity: 0;
  animation: fxFireworkSpoke 0.6s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes fxFireworkSpoke {
  0%   { transform: rotate(var(--angle, 0deg)) scaleY(0);    opacity: 1; }
  40%  { transform: rotate(var(--angle, 0deg)) scaleY(1);    opacity: 1; }
  100% { transform: rotate(var(--angle, 0deg)) scaleY(1);    opacity: 0; }
}
.fx-zigzag-token {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff3c4 0%, #ffd54f 50%, #d4a017 100%);
  border: 1px solid #c79100;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 213, 79, 0.85);
  opacity: 0;
  --dx1: 0px; --dy1: 0px;
  --dx2: 0px; --dy2: 0px;
  --dx3: 0px; --dy3: 0px;
  --dxF: 0px; --dyF: 0px;
  animation: fxZigzag 1.15s ease-in-out forwards;
  will-change: transform, opacity;
}
@keyframes fxZigzag {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  10%  { opacity: 1; transform: translate(0, 0) scale(1.05); }
  35%  { opacity: 1; transform: translate(var(--dx1), var(--dy1)) scale(1.05); }
  60%  { opacity: 1; transform: translate(var(--dx2), var(--dy2)) scale(1.05); }
  82%  { opacity: 1; transform: translate(var(--dx3), var(--dy3)) scale(1.05); }
  95%  { opacity: 1; transform: translate(var(--dxF), var(--dyF)) scale(0.55); }
  100% { opacity: 0; transform: translate(var(--dxF), var(--dyF)) scale(0.2); }
}
.wallet-received-money {
  animation: walletReceivedMoney 0.25s ease-out 1;
}
@keyframes walletReceivedMoney {
  0%   { filter: brightness(1)    drop-shadow(0 0 0   rgba(255, 215, 100, 0)); }
  50%  { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 215, 100, 0.85)); }
  100% { filter: brightness(1)    drop-shadow(0 0 0   rgba(255, 215, 100, 0)); }
}

/* Old .round-result pill rules removed in this polish pass — the
   round outcome now renders in the top .results-panel inside the
   wood frame. See the .results-current / .results-history rules
   higher in this file. */

.bet-error-msg {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--cyan-soft);
  background: rgba(20, 42, 100, 0.85);
  border: 1px solid rgba(95, 183, 255, 0.45);
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
}
.bet-error-msg.show { opacity: 1; }
.bet-error-msg.err {
  color: #ffb89f;
  border-color: rgba(255, 184, 159, 0.55);
}

.config-loading-hint {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--gold-lt);
  background: rgba(40, 30, 6, 0.88);
  border: 1px solid rgba(240, 194, 82, 0.45);
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
  z-index: 5;
}
.config-loading-hint.show { opacity: 1; }

/* ───────────────────────────────────────────────────────────────────
   Help overlay — identical to 3DICE.
*/
.help-ov {
  position: fixed; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 100;
  padding: 24px 14px;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.20s ease-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.help-ov.open {
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.30s ease-in;
}
@media (min-width: 540px) {
  .help-ov { align-items: center; padding: 24px; }
}
.help-ov-bd {
  position: fixed; inset: 0;
  background: rgba(2, 7, 15, 0.70);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.help-ov-card {
  position: relative;
  width: 100%; max-width: 460px;
  padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px;
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(95, 183, 255, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, rgba(20, 42, 100, 0.96) 0%, rgba(5, 13, 36, 0.96) 100%);
  border: 1px solid rgba(240, 194, 82, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 216, 0.22),
    inset 0 0 0 1px rgba(255, 227, 154, 0.10),
    0 16px 36px rgba(0, 0, 0, 0.70);
  transform: translateY(8px);
  transition: transform 0.20s ease-out;
}
.help-ov.open .help-ov-card {
  transform: translateY(0);
  transition: transform 0.30s ease-in;
}
.help-ov-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(240, 194, 82, 0.55);
  color: var(--cream);
  font-size: 20px; line-height: 1;
  cursor: pointer; outline: none;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.help-ov-close:hover { border-color: var(--gold-lt); color: var(--gold-glow); }
.help-ov-title {
  font-size: 18px; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  padding-right: 36px;
  margin-bottom: 12px;
}
.help-ov-section { margin-top: 12px; }
.help-ov-section:first-of-type { margin-top: 0; }
.help-ov-section-title {
  margin: 0 0 4px 0;
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-lt);
}
.help-ov-section-title a,
.help-ov-section-title a:link,
.help-ov-section-title a:visited,
.help-ov-section-title a:hover,
.help-ov-section-title a:active {
  color: var(--gold-lt);
  text-decoration: underline;
}
.help-ov-section-body {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--text);
}
.help-ov-section-body b { color: var(--gold-glow); font-weight: 800; }