/* ============================================================
   ROLLHOUSE — late-night high-limit room
   Everything self-contained: no images, no web fonts, no CDNs.

   THEMING CONTRACT (v3): every gold/felt/leather colour in this file is
   expressed through the custom properties declared in the :root block below.
   A theme is nothing but a re-declaration of those properties under
   html[data-theme="..."] — no rule below the palette block may hard-code a
   palette colour, or that rule will not follow the felt.
   ============================================================ */

:root {
  /* ---- palette (DESIGN.md) ---- */
  --felt-900: #0b2818;
  --felt-700: #14402a;
  --felt-500: #1d5738;
  --rail-900: #1a1210;
  --rail-700: #2b1f1a;
  --gold-500: #d4af37;
  --gold-300: #f0d878;
  --ivory:    #f5f0e1;
  --pip:      #1a1210;
  --red-500:  #a8322d;
  --teal-500: #2e6f6a;

  /* channel forms of the two golds, so every rgba() below can be themed */
  --gold-rgb:  212, 175, 55;
  --gold3-rgb: 240, 216, 120;

  /* ---- leather / brass shades ---- */
  --leather-hi:  #3a2b23;
  --leather-lo:  #221812;
  --leather-hi2: #4a382c;
  --leather-lo2: #2a1e18;
  --brass-900:   #241a12;
  --brass-950:   #120c0a;
  --gold-deep:   #a8842a;
  --gold-shadow: #6d541a;

  /* ---- derived ---- */
  --win-glow:   rgba(var(--gold3-rgb), .55);
  --gold-dim:   rgba(var(--gold-rgb), .34);
  --gold-faint: rgba(var(--gold-rgb), .13);
  --gold-line:  rgba(var(--gold-rgb), .2);
  --gold-wash:  rgba(var(--gold-rgb), .1);
  --ink:        rgba(0, 0, 0, .55);
  --ivory-dim:  rgba(245, 240, 225, .62);
  --ivory-faint:rgba(245, 240, 225, .34);
  --warn:       #d8a09b;

  /* ---- type ---- */
  --serif: Georgia, 'Times New Roman', 'Nimbus Roman', serif;
  --mono:  Consolas, 'SF Mono', 'DejaVu Sans Mono', 'Courier New', monospace;

  /* ---- metrics ---- */
  --die-size: clamp(58px, min(9vw, 15.5vh), 112px);
  --rail-top-h: 78px;
  --rail-bot-h: 152px;
  --pt-w: clamp(232px, 23vw, 300px);
  --radius: 6px;
}

/* ============================================================
   FELT THEMES — palette custom properties only.
   Contrast note: paytable copy is --ivory-dim (.62 ivory) and --gold-500 over
   the leather panel in every theme; both clear 4.5:1 in all four (measured
   ~6.0-6.5:1 for the ivory, ~6.2-8.8:1 for the gold).
   ============================================================ */

html[data-theme="bordeaux"] {
  --felt-900: #2a0d14;
  --felt-700: #3f1420;
  --felt-500: #55202d;
  --rail-900: #1c110f;
  --rail-700: #33201b;
  --gold-500: #e0b551;
  --gold-300: #f6dd94;
  --gold-rgb:  224, 181, 81;
  --gold3-rgb: 246, 221, 148;
  --red-500:  #b03a34;
  --teal-500: #2f6a72;
  --leather-hi:  #462f26;
  --leather-lo:  #291a16;
  --leather-hi2: #573a2e;
  --leather-lo2: #33211b;
  --brass-900:   #2c1c14;
  --brass-950:   #150d0b;
  --gold-deep:   #b28b31;
  --gold-shadow: #74571c;
}

html[data-theme="midnight"] {
  --felt-900: #070f22;
  --felt-700: #0f1c3a;
  --felt-500: #1a2a52;
  --rail-900: #10131c;
  --rail-700: #1e2432;
  --gold-500: #b9c4d6;
  --gold-300: #e2e9f4;
  --gold-rgb:  185, 196, 214;
  --gold3-rgb: 226, 233, 244;
  --red-500:  #a8443f;
  --teal-500: #2f7d86;
  --leather-hi:  #2b3244;
  --leather-lo:  #171c28;
  --leather-hi2: #38415a;
  --leather-lo2: #1e2431;
  --brass-900:   #171b26;
  --brass-950:   #0c0f16;
  --gold-deep:   #8d97a8;
  --gold-shadow: #5b6474;
}

html[data-theme="slate"] {
  --felt-900: #14181a;
  --felt-700: #22282b;
  --felt-500: #313a3e;
  --rail-900: #16161a;
  --rail-700: #262629;
  --gold-500: #c9a227;
  --gold-300: #e6c964;
  --gold-rgb:  201, 162, 39;
  --gold3-rgb: 230, 201, 100;
  --red-500:  #97403c;
  --teal-500: #3f6f6d;
  --leather-hi:  #33333a;
  --leather-lo:  #1d1d21;
  --leather-hi2: #42424a;
  --leather-lo2: #26262b;
  --brass-900:   #22221f;
  --brass-950:   #101010;
  --gold-deep:   #9c7c1f;
  --gold-shadow: #6a5416;
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  background: var(--felt-900);
  color: var(--ivory);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; }
h2, h3 { margin: 0; }
p  { margin: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

.fleuron {
  width: 48px; height: 12px; color: var(--gold-500); flex: none;
}
.fleuron--wide { width: 72px; height: 14px; }

/* ============================================================
   ROOM SHELL
   ============================================================ */
.room {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--rail-top-h) minmax(0, 1fr) var(--rail-bot-h);
  background:
    radial-gradient(120% 90% at 50% 34%, var(--felt-700) 0%, var(--felt-900) 72%);
  isolation: isolate;
}

/* ---------- leather rails ---------- */
.rail {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.3)),
    radial-gradient(90% 180% at 50% -40%, var(--rail-700), var(--rail-900) 70%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset;
  z-index: 3;
}
.rail::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--gold-dim) 12%, var(--gold-500) 50%, var(--gold-dim) 88%, transparent);
  opacity: .75;
}
.rail--top::after   { bottom: 0; }
.rail--bottom::after{ top: 0; }

.rail--top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 22px;
  gap: 16px;
}
.rail__seg { display: flex; align-items: center; min-width: 0; }
.rail__seg--right { justify-content: flex-end; gap: 14px; }

/* ---------- wordmark ---------- */
.wordmark { line-height: 1; }
.wordmark__text {
  display: block;
  font-size: 25px;
  letter-spacing: .34em;
  color: var(--gold-500);
  text-transform: uppercase;
  padding: 5px 0 6px;
  border-top: 3px double var(--gold-dim);
  border-bottom: 3px double var(--gold-dim);
  text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 18px rgba(var(--gold-rgb), .22);
}
.wordmark__sub {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  font-variant: small-caps;
}

/* ---------- jackpot ticker ---------- */
.jackpot { text-align: center; }
.jackpot__label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  /* full opacity: at .85 this 10px label falls to 4.38:1 in the slate felt */
  color: var(--gold-500); margin-bottom: 5px;
}
.jackpot__label .fleuron { width: 34px; }

.odo { display: flex; gap: 3px; justify-content: center; }
.odo__digit {
  display: inline-block;
  min-width: 20px;
  padding: 3px 0 4px;
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  color: var(--gold-300);
  background: linear-gradient(180deg, var(--brass-900), var(--brass-950) 55%, var(--brass-900));
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 0 10px rgba(var(--gold-rgb), .14);
  overflow: hidden;
}
.odo__digit.is-roll { animation: odoRoll .22s ease-out; }
@keyframes odoRoll {
  0%   { transform: translateY(-72%); opacity: .2; }
  60%  { transform: translateY(6%);   opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}
.jackpot.is-hot .odo__digit {
  animation: odoHot .9s ease-in-out infinite alternate;
  border-color: var(--gold-500);
}
@keyframes odoHot { to { box-shadow: 0 0 16px var(--win-glow), 0 1px 0 rgba(255,255,255,.08) inset; } }

/* ---------- bankroll ---------- */
.bankroll { text-align: right; line-height: 1.05; }
.bankroll__label {
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ivory-dim);
}
.bankroll__value {
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 700;
  color: var(--ivory);
  letter-spacing: .02em;
  margin-top: 3px;
  transition: color .2s ease, text-shadow .2s ease;
}
.bankroll__value.is-up   { color: var(--gold-300); text-shadow: 0 0 16px var(--win-glow); }
.bankroll__value.is-down { color: #c9a6a3; }
.bankroll__meta {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivory-faint); min-height: 12px; margin-top: 2px;
}

/* ============================================================
   SETTINGS CLUSTER (top rail) — brass icon buttons
   ============================================================ */
.settings-wrap { display: flex; align-items: center; }
.settings__head { display: none; }
.settings { display: flex; align-items: center; gap: 7px; }

.iconbtn {
  position: relative;
  width: 34px; height: 34px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  color: var(--gold-500);
  cursor: pointer;
  flex: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.iconbtn:hover:not(:disabled) { border-color: var(--gold-500); background: var(--gold-wash); }
.iconbtn:focus-visible { outline: 2px dashed var(--gold-300); outline-offset: 3px; }
.iconbtn:disabled { opacity: .34; cursor: not-allowed; }
.iconbtn__icon { width: 18px; height: 18px; }
/* Off/pressed states: mute is "pressed = muted" (dimmed), the feature toggles
   are "pressed = on" (lit), so they get opposite treatments. */
.iconbtn--toggle[aria-pressed="true"] {
  color: var(--rail-900);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 60%, var(--gold-deep));
  border-color: var(--gold-shadow);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), .4);
}
.iconbtn--mute[aria-pressed="true"] { color: var(--ivory-faint); border-color: rgba(245,240,225,.16); }
.iconbtn--more { display: none; }

/* label is the accessible name; only visible inside the mobile sheet */
.iconbtn__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   TABLE
   ============================================================ */
.table {
  display: grid;
  grid-template-columns: var(--pt-w) minmax(0, 1fr);
  min-height: 0;
  position: relative;
  z-index: 2;
}

/* ---------- paytable ---------- */
.paytable {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 14px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.28)),
    radial-gradient(120% 100% at 20% 0%, var(--rail-700), var(--rail-900) 78%);
  border-right: 1px solid rgba(0,0,0,.7);
  box-shadow: 3px 0 18px rgba(0,0,0,.45);
  transition: opacity .3s ease, filter .3s ease;
}
.paytable::after {
  content: '';
  position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-dim) 20%, var(--gold-dim) 80%, transparent);
}
.paytable.is-bust { opacity: .42; filter: grayscale(.5); }

.paytable__head { text-align: center; margin-bottom: 8px; position: relative; }
.paytable__close {
  display: none;
  position: absolute; top: -2px; right: -2px;
  width: 40px; height: 40px;
  background: none; border: 0;
  color: var(--gold-500);
  font-size: 26px; line-height: 1;
  cursor: pointer;
}
.paytable__title {
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-500); font-weight: 400; margin: 4px 0 6px;
}
.paytable__legend {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-300);
  opacity: .9;
  margin: 0 0 7px;
  font-variant: small-caps;
}
.paytable__cols {
  display: grid;
  grid-template-columns: 1fr 44px 56px;
  gap: 6px;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivory-dim);
  padding: 0 8px 5px;
  border-bottom: 1px solid var(--gold-line);
}
.paytable__cols span:nth-child(2),
.paytable__cols span:nth-child(3) { text-align: right; }

.paytable__body { overflow-y: auto; flex: 1 1 auto; min-height: 0; scrollbar-width: thin; }
.paytable__body.is-swap { animation: ptSwap .42s cubic-bezier(.2,.9,.3,1); }
@keyframes ptSwap {
  0%   { opacity: 0; transform: translateY(9px); background: rgba(var(--gold-rgb), .18); }
  100% { opacity: 1; transform: none; background: transparent; }
}
.paytable__body::-webkit-scrollbar { width: 6px; }
.paytable__body::-webkit-scrollbar-thumb { background: var(--gold-faint); border-radius: 3px; }

.pt-row {
  display: grid;
  grid-template-columns: 1fr 44px 56px;
  gap: 6px;
  align-items: center;
  padding: 7px 6px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,.045);
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.pt-row__hand {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.2;
  color: var(--ivory-dim);
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px;
  min-width: 0;
}
.pt-row__mult, .pt-row__pay {
  font-family: var(--mono); font-size: 12px; text-align: right;
}
/* --ivory-faint would land near 2.9:1 here; the paytable is required copy. */
.pt-row__mult { color: var(--ivory-dim); }
.pt-row__pay  { color: var(--gold-500); font-weight: 700; }

.pt-row__tag {
  font-family: var(--mono);
  font-size: 8px; font-weight: 700; letter-spacing: .12em;
  padding: 1px 4px;
  border: 1px solid var(--gold-500);
  border-radius: 2px;
  color: var(--gold-300);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .2s ease, transform .2s ease;
}
.pt-row.is-maxed .pt-row__tag { opacity: 1; transform: scale(1); }
.pt-row.is-flash { animation: ptFlash .5s ease-out; }
@keyframes ptFlash {
  0%   { background: rgba(var(--gold3-rgb), .45); }
  100% { background: transparent; }
}

/* Highlight tints use the --gold-500 channel, never --gold-300: a 30% wash of
   the bright gold lifts the row so far that gold text on it lands near 2.7:1
   in the slate felt. With this pairing the worst case across all four themes
   is 5.17:1 (slate, winning-row hand). */
.pt-row.is-current {
  background: linear-gradient(90deg, rgba(var(--gold-rgb), .16), rgba(var(--gold-rgb), .02));
  border-left-color: var(--gold-500);
}
.pt-row.is-current .pt-row__hand { color: var(--ivory); }
.pt-row.is-current .pt-row__mult { color: var(--ivory); }
.pt-row.is-current .pt-row__pay  { color: var(--gold-300); }
.pt-row.is-win {
  background: linear-gradient(90deg, rgba(var(--gold-rgb), .26), rgba(var(--gold-rgb), .05));
  border-left-color: var(--gold-300);
  animation: ptPulse 1.6s ease-out 2;
}
.pt-row.is-win .pt-row__hand { color: var(--gold-300); }
.pt-row.is-win .pt-row__mult { color: var(--ivory); }
.pt-row.is-win .pt-row__pay  { color: var(--gold-300); }
@keyframes ptPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gold3-rgb), 0); }
  40%      { box-shadow: 0 0 18px 0 var(--win-glow) inset; }
}

.paytable__foot {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--gold-line);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ivory-dim); text-align: center;
}
.paytable__foot b { color: var(--gold-500); font-family: var(--mono); }

/* ---------- mobile drawer furniture (desktop: inert) ---------- */
.pays-tab { display: none; }
.scrim { display: none; }
.pt-peek { display: none; }

/* ---------- the felt ---------- */
.felt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vh, 22px);
  min-height: 0;
  padding: 10px 24px 6px;
  overflow: hidden;
}
.felt__arc {
  position: absolute;
  left: 50%; top: 50%;
  width: min(820px, 82%);
  height: min(430px, 78%);
  transform: translate(-50%, -52%);
  border: 1px solid rgba(var(--gold-rgb), .14);
  border-radius: 50% / 42%;
  box-shadow: 0 0 90px rgba(0,0,0,.5) inset;
  pointer-events: none;
}

/* ---------- dice ---------- */
.dice-tray {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 1.9vw, 24px);
  padding-top: 6px;
  position: relative;
}
.dice-tray.is-tense { animation: trayTense .34s ease-in-out 3; }
@keyframes trayTense {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.die {
  position: relative;
  width: var(--die-size);
  height: var(--die-size);
  padding: 0;
  background: none;
  border: 0;
  cursor: default;
  overflow: visible;
  touch-action: manipulation;
  transform: translateY(calc(var(--arc, 0px) + var(--hold, 0px))) rotate(var(--rot, 0deg));
  transition: transform .24s cubic-bezier(.34,1.4,.5,1), filter .3s ease;
  outline: none;
}
.dice-tray.is-live .die { cursor: pointer; }
.die__body {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 13%;
  border-radius: 18%;
  background:
    linear-gradient(155deg, #ffffff 0%, var(--ivory) 42%, #e2dac6 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -3px 6px rgba(120,105,70,.32) inset,
    0 10px 18px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.4);
  transition: box-shadow .2s ease;
}
.die__body::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 18%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
  pointer-events: none;
}
.die__pip {
  width: 76%; height: 76%;
  align-self: center; justify-self: center;
  border-radius: 50%;
  background: radial-gradient(70% 70% at 34% 30%, #3a2c26, var(--pip) 70%);
  box-shadow: 0 1px 1px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.4) inset;
  opacity: 0;
  transition: opacity .09s linear;
}
.die__body[data-face="1"] .die__pip[data-cell="5"],
.die__body[data-face="2"] .die__pip[data-cell="1"],
.die__body[data-face="2"] .die__pip[data-cell="9"],
.die__body[data-face="3"] .die__pip[data-cell="1"],
.die__body[data-face="3"] .die__pip[data-cell="5"],
.die__body[data-face="3"] .die__pip[data-cell="9"],
.die__body[data-face="4"] .die__pip[data-cell="1"],
.die__body[data-face="4"] .die__pip[data-cell="3"],
.die__body[data-face="4"] .die__pip[data-cell="7"],
.die__body[data-face="4"] .die__pip[data-cell="9"],
.die__body[data-face="5"] .die__pip[data-cell="1"],
.die__body[data-face="5"] .die__pip[data-cell="3"],
.die__body[data-face="5"] .die__pip[data-cell="5"],
.die__body[data-face="5"] .die__pip[data-cell="7"],
.die__body[data-face="5"] .die__pip[data-cell="9"],
.die__body[data-face="6"] .die__pip[data-cell="1"],
.die__body[data-face="6"] .die__pip[data-cell="3"],
.die__body[data-face="6"] .die__pip[data-cell="4"],
.die__body[data-face="6"] .die__pip[data-cell="6"],
.die__body[data-face="6"] .die__pip[data-cell="7"],
.die__body[data-face="6"] .die__pip[data-cell="9"] { opacity: 1; }

.die__ring {
  position: absolute;
  inset: -7px;
  border-radius: 22%;
  border: 2px solid var(--gold-500);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  pointer-events: none;
}
/* Trainer's suggestion ring: deliberately NOT the held ring — thinner, dashed,
   sitting further out, and never accompanied by the HELD plaque. */
.die__ring--opt {
  inset: -14px;
  border: 1.5px dashed var(--gold-300);
  border-radius: 26%;
  box-shadow: none;
}
.die.is-opt .die__ring--opt {
  opacity: .92;
  transform: scale(1);
  animation: optBreathe 2s ease-in-out infinite;
}
@keyframes optBreathe {
  0%, 100% { opacity: .5; }
  50%      { opacity: .95; }
}

.die__plaque {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translate(-50%, 6px);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  font-family: var(--mono); font-weight: 700;
  color: var(--rail-900);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  padding: 2px 8px 2px 9px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
.die.is-held { --hold: 8px; }
.die.is-held .die__ring {
  opacity: 1; transform: scale(1);
  box-shadow: 0 0 14px var(--win-glow), 0 0 0 1px rgba(0,0,0,.4) inset;
}
.die.is-held .die__ring--opt { box-shadow: none; }
.die.is-held .die__plaque { opacity: 1; transform: translate(-50%, 0); }
.die.is-held .die__body { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -3px 6px rgba(120,105,70,.32) inset, 0 5px 10px rgba(0,0,0,.55); }

.dice-tray.is-live .die:hover .die__ring { opacity: .5; transform: scale(1); }
.dice-tray.is-live .die:hover .die__ring--opt { opacity: .92; }
.die:focus-visible .die__ring { opacity: .85; transform: scale(1); border-style: dashed; }

.die__body.is-tumbling { animation: tumble .34s linear infinite; }
@keyframes tumble {
  0%   { transform: translate(0,0) rotate(0deg)   scale(1); }
  25%  { transform: translate(2px,-7px) rotate(9deg)  scale(1.03); }
  50%  { transform: translate(-2px,2px) rotate(-6deg) scale(.98); }
  75%  { transform: translate(3px,-4px) rotate(5deg)  scale(1.02); }
  100% { transform: translate(0,0) rotate(0deg)   scale(1); }
}
.die__body.is-settling { animation: settle .3s cubic-bezier(.2,1.5,.4,1); }
@keyframes settle {
  0%   { transform: scale(1) rotate(3deg); }
  45%  { transform: scale(1.08) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.die__body.is-flash { animation: dieFlash .18s ease-out; }
@keyframes dieFlash { from { opacity: .3; } to { opacity: 1; } }

.dice-tray.is-dead .die { filter: saturate(.35) brightness(.78); }

/* ---------- status + advice + banner ---------- */
.status {
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  text-align: center;
  min-height: 18px;
  font-variant: small-caps;
}
.status.is-warn { color: var(--warn); }

.advice {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px;
  border: 1px dashed var(--gold-dim);
  border-radius: 3px;
  background: rgba(var(--gold-rgb), .07);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-align: center;
  animation: adviceIn .3s ease-out;
}
@keyframes adviceIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.banner {
  position: relative;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 34px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.9,.3,1);
  pointer-events: none;
  text-align: center;
}
.banner.is-show { opacity: 1; transform: translateY(0); }
/* Wipe the previous result with no fade, so a stale banner can never be
   on screen while the next hand tumbles. Also used by turbo. */
.banner.is-instant { transition: none !important; }
.banner__text {
  font-size: clamp(18px, 2.5vw, 30px);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.banner__sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ivory-dim);
}
.banner--win {
  color: var(--gold-300);
  border-color: var(--gold-dim);
  text-shadow: 0 0 22px var(--win-glow);
}
.banner--win .banner__sub { color: var(--gold-500); }
.banner--loss { color: rgba(245,240,225,.5); }
.banner--big  { animation: bannerBig .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes bannerBig {
  0%   { transform: translateY(26px) scale(.8); }
  60%  { transform: translateY(0) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

/* ============================================================
   CONSOLE (bottom rail)
   ============================================================ */
.console { display: block; }
.console__bet {
  height: 100%;
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.6vw, 30px);
  padding: 10px clamp(12px, 1.8vw, 24px);
}
.cgroup { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cgroup__label {
  font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ivory-dim);
}
.cgroup--total { align-items: flex-start; min-width: 0; }
.cgroup--actions { flex-direction: row; align-items: stretch; justify-content: flex-end; gap: 10px; }

/* ---------- mode toggle (brass two-position switch) ---------- */
.mode-toggle {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.24)),
    radial-gradient(120% 140% at 30% 0%, var(--rail-700), var(--rail-900));
  border: 1px solid rgba(0,0,0,.6);
  box-shadow:
    0 0 0 1px var(--gold-faint),
    0 2px 6px rgba(0,0,0,.5) inset;
}
.mode-toggle__opt {
  padding: 0;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--leather-hi), var(--leather-lo));
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.mode-toggle__plaque {
  display: block;
  padding: 5px 10px;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ivory-dim);
  text-align: center;
  transition: color .18s ease, text-shadow .18s ease;
}
.mode-toggle__short { display: none; }
.mode-toggle__opt:hover:not(:disabled):not(.is-active) {
  border-color: var(--gold-dim);
  background: linear-gradient(180deg, var(--leather-hi2), var(--leather-lo2));
}
.mode-toggle__opt.is-active {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 55%, var(--gold-deep));
  border-color: var(--gold-shadow);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), .34), 0 1px 0 rgba(255,255,255,.35) inset;
}
.mode-toggle__opt.is-active .mode-toggle__plaque {
  color: var(--rail-900);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}
.mode-toggle__opt:disabled { cursor: not-allowed; }
.mode-toggle__opt:disabled:not(.is-active) { opacity: .38; }
.mode-toggle__opt:focus-visible { outline: 2px dashed var(--gold-300); outline-offset: 2px; }
.mode-toggle.is-locked { opacity: .42; filter: grayscale(.35); }

/* ---------- chips ---------- */
.chip-row { display: flex; gap: 9px; }
.chip {
  position: relative;
  width: clamp(38px, 4vw, 50px);
  height: clamp(38px, 4vw, 50px);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  background: var(--chip-face, #cfc7b2);
  border: 6px dashed var(--chip-edge, #ffffff);
  box-shadow:
    0 3px 6px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.25) inset;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  display: grid;
  place-items: center;
  filter: saturate(.72) brightness(.82);
}
.chip::before {
  content: '';
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: var(--chip-face, #cfc7b2);
  border: 1px solid rgba(0,0,0,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.16) inset;
}
.chip__value {
  position: relative;
  font-family: var(--mono);
  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 700;
  color: var(--chip-ink, #1a1210);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  letter-spacing: -.02em;
}
.chip:hover { transform: translateY(-3px); filter: saturate(.95) brightness(.95); }
.chip.is-active {
  filter: none;
  transform: translateY(-4px);
  box-shadow:
    0 0 0 2px var(--gold-500),
    0 6px 14px rgba(0,0,0,.6),
    0 0 20px rgba(var(--gold-rgb), .35),
    0 1px 0 rgba(255,255,255,.3) inset;
}
.chip:focus-visible { outline: 2px dashed var(--gold-300); outline-offset: 3px; }
.chip[data-denom="1"]   { --chip-face: #e9e3d2; --chip-edge: #b9b1a0; --chip-ink: #22190f; }
.chip[data-denom="5"]   { --chip-face: #a8322d; --chip-edge: #f0e6d8; --chip-ink: #ffeee9; }
.chip[data-denom="25"]  { --chip-face: #2e6f6a; --chip-edge: #d8e6e3; --chip-ink: #eafbf8; }
.chip[data-denom="100"] { --chip-face: #241a12; --chip-edge: #d4af37; --chip-ink: #f0d878; }

/* ---------- stepper ---------- */
.stepper { display: flex; align-items: center; gap: 7px; }
.stepper__btn {
  width: 31px; height: 31px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--leather-hi), var(--leather-lo));
  border: 1px solid var(--gold-dim);
  color: var(--gold-500);
  font-size: 19px; line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.stepper__btn:hover:not(:disabled) { border-color: var(--gold-500); background: linear-gradient(180deg, var(--leather-hi2), var(--leather-lo2)); }
.stepper__btn:focus-visible { outline: 2px dashed var(--gold-300); outline-offset: 2px; }
.stepper__value {
  font-family: var(--mono);
  font-size: 22px; font-weight: 700;
  color: var(--ivory);
  min-width: 30px; text-align: center;
}
.btn--max { margin-left: 2px; }

/* ---------- total / staked ---------- */
.total {
  font-family: var(--mono);
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 700;
  color: var(--gold-300);
  line-height: 1;
  text-shadow: 0 0 16px rgba(var(--gold-rgb), .28);
  transition: transform .16s ease;
}
.total.is-bump { animation: bump .22s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 45% { transform: scale(1.13); } 100% { transform: scale(1); } }
.hint {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--warn); min-height: 13px;
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 11px 24px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.5);
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(180deg, var(--leather-hi), var(--leather-lo));
  color: var(--ivory);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.4);
  -webkit-user-select: none; user-select: none;
}
.btn__main {
  font-size: 15px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.1;
}
/* keyboard shortcut badge — mono, dim, no frame */
.btn__key {
  font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .55;
}
/* outcome plaque — engraved, framed, serif; must NOT read as a shortcut */
.btn__odds {
  font-family: var(--serif);
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  padding: 1px 7px 2px;
  border: 1px solid rgba(0,0,0,.4);
  border-radius: 2px;
  background: rgba(0,0,0,.26);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset;
  color: rgba(255,255,255,.9);
  margin-bottom: 1px;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.btn:disabled { opacity: .34; cursor: not-allowed; filter: grayscale(.5); }
.btn:focus-visible { outline: 2px dashed var(--gold-300); outline-offset: 3px; }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 52%, var(--gold-deep) 100%);
  color: var(--rail-900);
  border-color: rgba(0,0,0,.55);
  box-shadow: 0 3px 0 var(--gold-shadow), 0 8px 22px rgba(var(--gold-rgb), .28);
}
.btn--gold .btn__key { opacity: .62; }
.btn--gold:hover:not(:disabled) { box-shadow: 0 3px 0 var(--gold-shadow), 0 8px 30px rgba(var(--gold-rgb), .5); }
.btn--roll { min-width: clamp(146px, 14.5vw, 200px); padding: 13px 22px; }
.btn--roll .btn__main { font-size: 20px; letter-spacing: .24em; }
/* Mississippi raise labels ("RAISE 100 & REROLL (2)") need a smaller face
   so the console still fits one row at 1100px. */
.btn--roll.is-long { padding: 13px 16px; }
.btn--roll.is-long .btn__main { font-size: 14px; letter-spacing: .1em; }
.btn--stand { min-width: 106px; border-color: var(--gold-dim); }
.btn--ghost {
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--gold-dim);
  box-shadow: none;
  color: var(--gold-500);
}
.btn--ghost .btn__main { font-size: 11px; letter-spacing: .16em; }
.btn--ghost:hover:not(:disabled) { border-color: var(--gold-500); background: var(--gold-wash); }
.btn--ghost.is-on { background: rgba(var(--gold-rgb), .2); border-color: var(--gold-500); color: var(--gold-300); }

/* ---------- double-up zone ---------- */
.console__du {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px clamp(16px, 3vw, 44px) 10px;
  animation: duIn .4s cubic-bezier(.2,.9,.3,1);
}
@keyframes duIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.du__head {
  display: flex; align-items: baseline; justify-content: center; gap: 16px;
}
.du__title {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-500);
}
.du__streak {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ivory-dim);
}
.du__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2.4vw, 40px);
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.du__center { display: flex; align-items: center; gap: 14px; }
.du__actions { display: flex; flex-direction: column; gap: 6px; }
.du__amount { text-align: center; line-height: 1.15; }
.du__amount-label {
  display: block;
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--ivory-dim);
}
.du__amount-value {
  display: block;
  font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--gold-300);
}
.du__banked {
  display: block;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-500);
  min-height: 12px;
}
.btn--low  { background: linear-gradient(180deg, #3d8b84, var(--teal-500) 55%, #1f4f4b); box-shadow: 0 3px 0 #163a37, 0 6px 16px rgba(46,111,106,.35); }
.btn--high { background: linear-gradient(180deg, #c5443e, var(--red-500) 55%, #71211d); box-shadow: 0 3px 0 #521815, 0 6px 16px rgba(168,50,45,.35); }
.btn--low, .btn--high { padding: 11px 20px; }
.btn--low .btn__main, .btn--high .btn__main { font-size: 18px; }
.btn--low .btn__key, .btn--high .btn__key { opacity: .78; }
.btn--collect,
.btn--half {
  border: 1px solid var(--gold-500);
  background: transparent;
  color: var(--gold-500);
  box-shadow: none;
  padding: 8px 14px;
}
.btn--collect .btn__main, .btn--half .btn__main { font-size: 12px; letter-spacing: .16em; }
.btn--collect:hover:not(:disabled),
.btn--half:hover:not(:disabled) { background: rgba(var(--gold-rgb), .14); }
.btn--half[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 60%, var(--gold-deep));
  color: var(--rail-900);
  border-color: var(--gold-shadow);
  box-shadow: 0 0 14px rgba(var(--gold-rgb), .4);
}

.du-die {
  width: 74px; height: 74px;
  perspective: 500px;
  flex: none;
}
.du-die__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.du-die.is-flipping .du-die__inner { animation: duSpin .16s linear infinite; }
@keyframes duSpin { to { transform: rotateX(360deg); } }
.du-die.is-landing .du-die__inner { animation: settle .34s cubic-bezier(.2,1.5,.4,1); }
.du-die__mark {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 18%;
  background: linear-gradient(155deg, var(--leather-hi), var(--rail-900));
  border: 1px solid var(--gold-dim);
  color: var(--gold-500);
  font-size: 34px;
  box-shadow: 0 8px 16px rgba(0,0,0,.5);
  opacity: 1;
  transition: opacity .12s linear;
}
.du-die__face {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .12s linear;
}
.du-die.is-revealed .du-die__mark { opacity: 0; }
.du-die.is-revealed .du-die__face { opacity: 1; }
.du-die.is-win  .du-die__face { box-shadow: 0 0 0 2px var(--gold-500), 0 0 22px var(--win-glow), 0 8px 16px rgba(0,0,0,.5); }
.du-die.is-lose .du-die__face { box-shadow: 0 0 0 2px var(--red-500), 0 8px 16px rgba(0,0,0,.5); filter: saturate(.5); }

/* ============================================================
   OVERLAYS & FX
   ============================================================ */
.vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 40;
  background: radial-gradient(70% 60% at 50% 46%, rgba(var(--gold3-rgb), .16) 0%, rgba(var(--gold3-rgb), 0) 55%),
              radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 40%, rgba(var(--gold-rgb), .22) 100%);
  transition: opacity .5s ease;
}
.vignette.is-on { opacity: 1; }

.fx {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
}
.fx-chip {
  position: absolute; top: 0; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 36% 32%, var(--gold-300), var(--gold-500) 68%, var(--gold-shadow));
  border: 2px dashed rgba(255,248,220,.8);
  box-shadow: 0 0 10px var(--win-glow);
  will-change: transform, opacity;
}
.fx-chip--loss {
  background: radial-gradient(60% 60% at 36% 32%, #6d6355, #443c33 70%);
  border-color: rgba(245,240,225,.28);
  box-shadow: none;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 18%;
  transform: translate(-50%, 12px);
  z-index: 95;
  padding: 9px 20px;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--rail-700), var(--rail-900));
  color: var(--gold-300);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- jackpot takeover ---------- */
.takeover {
  position: absolute; inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.takeover.is-on { opacity: 1; }
.takeover__spot {
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(720px, 68%);
  height: 210px;
  transform: translate(-50%, -50%);
  border-radius: 50% / 46%;
  box-shadow: 0 0 0 9999px rgba(4, 10, 6, .88), 0 0 90px 30px rgba(var(--gold3-rgb), .16) inset;
}
.takeover__copy {
  position: absolute;
  left: 50%; top: 58%;
  transform: translateX(-50%);
  text-align: center;
  animation: takeoverRise .8s cubic-bezier(.2,1,.3,1);
}
@keyframes takeoverRise { from { opacity: 0; transform: translate(-50%, 26px); } to { opacity: 1; transform: translate(-50%, 0); } }
.takeover__kicker {
  font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: var(--ivory-dim);
}
.takeover__title {
  font-size: clamp(20px, 3vw, 34px);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-500);
  margin: 6px 0 4px;
}
.takeover__amount {
  font-family: var(--mono);
  font-size: clamp(36px, 6vw, 76px);
  font-weight: 700;
  color: var(--gold-300);
  text-shadow: 0 0 40px var(--win-glow);
  letter-spacing: .04em;
}

/* ---------- overlays: rebuy marker + modals ---------- */
.overlay {
  position: absolute; inset: 0;
  z-index: 70;
  display: grid; place-items: center;
  background: rgba(4, 10, 6, .82);
  backdrop-filter: blur(2px);
  animation: fadeIn .35s ease;
}
.overlay--modal { position: fixed; padding: 16px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.marker {
  position: relative;
  width: min(430px, 88vw);
  padding: 26px 30px 30px;
  background: linear-gradient(172deg, #f7f2e2, #ded5bd);
  color: #241a12;
  border-radius: 3px;
  box-shadow: 0 26px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
  text-align: center;
  animation: markerIn .45s cubic-bezier(.2,1.2,.35,1);
}
@keyframes markerIn { from { opacity: 0; transform: translateY(24px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
.marker::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(36,26,18,.28);
  border-radius: 2px;
  pointer-events: none;
}
.marker__punch {
  position: absolute; top: 14px; right: 16px;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(168,50,45,.4);
  color: rgba(168,50,45,.55);
  transform: rotate(-14deg);
}
.marker__punch::after {
  content: 'VOID';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 12px; letter-spacing: .16em; font-weight: 700;
}
.marker__head .fleuron { color: #a8842a; }
.marker__title {
  font-size: 21px; letter-spacing: .16em; text-transform: uppercase;
  margin: 8px 0 12px; font-weight: 400;
}
.marker__body { font-size: 14px; line-height: 1.55; color: #443728; }
.marker__body b { font-family: var(--mono); }
.marker__line {
  display: flex; justify-content: center; gap: 10px;
  margin: 16px 0 18px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #6a5842;
}
.marker__line dt, .marker__line dd { margin: 0; }
.marker__line dd { font-family: var(--mono); font-weight: 700; color: #241a12; }
.btn--rebuy { width: 100%; }
.marker__sig {
  margin-top: 18px;
  border-top: 1px solid rgba(36,26,18,.3);
  padding-top: 5px;
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: #8a765c;
}

/* ============================================================
   MODALS — art-deco brass plaques (ledger, house rules)
   ============================================================ */
.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  border-radius: 5px;
  border: 1px solid var(--gold-dim);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.3)),
    radial-gradient(120% 80% at 30% 0%, var(--rail-700), var(--rail-900) 76%);
  box-shadow: 0 26px 70px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.6);
  animation: markerIn .4s cubic-bezier(.2,1.2,.35,1);
}
.modal--wide { width: min(860px, 100%); }
.modal__head {
  position: relative;
  flex: none;
  text-align: center;
  padding: 16px 52px 12px;
  border-bottom: 1px solid var(--gold-line);
}
.modal__title {
  font-size: 15px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-500); font-weight: 400; margin-top: 6px;
}
.modal__close {
  position: absolute; top: 6px; right: 6px;
  width: 44px; height: 44px;
  background: none; border: 0;
  color: var(--gold-500);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  border-radius: 3px;
}
.modal__close:hover { background: var(--gold-wash); }
.modal__close:focus-visible { outline: 2px dashed var(--gold-300); outline-offset: -3px; }
.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 20px;
  scrollbar-width: thin;
}
.modal__body::-webkit-scrollbar { width: 7px; }
.modal__body::-webkit-scrollbar-thumb { background: var(--gold-faint); border-radius: 3px; }
.modal__foot {
  flex: none;
  padding: 10px 20px 14px;
  border-top: 1px solid var(--gold-line);
  text-align: center;
}
.linkbtn {
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--gold-dim);
  color: var(--ivory-dim);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  padding: 6px 4px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--gold-300); border-bottom-color: var(--gold-500); }
.linkbtn:focus-visible { outline: 2px dashed var(--gold-300); outline-offset: 2px; }
.linkbtn.is-arming { color: var(--warn); border-bottom-color: var(--warn); }

/* ---------- ledger ---------- */
.ledger__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ledger__mode { min-width: 0; }
.ledger__h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-500); font-weight: 400;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gold-line);
  margin-bottom: 8px;
}
.ledger__theo {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: none; color: var(--ivory-dim);
}
.ledger__stats { margin: 0 0 10px; }
.ledger__stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dotted rgba(255,255,255,.07);
}
.ledger__stat dt {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ivory-dim);
}
.ledger__stat dd {
  margin: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--ivory);
  text-align: right;
}
.ledger__stat--hero dd { color: var(--gold-300); font-size: 14px; }
.ledger__freq { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ledger__freq caption {
  text-align: left;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivory-dim);
  padding: 6px 0 4px;
}
/* Four columns (hand / count / share / expect) in a 560px modal split two ways,
   so the numeric cells are kept on one line and the type is a notch smaller
   than the surrounding stat rows. */
.ledger__freq th, .ledger__freq td {
  padding: 2px 0;
  font-size: 10px;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ledger__freq th + th, .ledger__freq td + td { padding-left: 6px; white-space: nowrap; }
.ledger__freq th { font-weight: 400; color: var(--ivory-dim); letter-spacing: .08em; }
.ledger__freq th:first-child, .ledger__freq td:first-child {
  text-align: left; text-transform: uppercase; letter-spacing: .04em;
}
.ledger__freq td { font-family: var(--mono); color: var(--ivory); }
/* Theory, not takings — dimmed so the realized columns stay the loud ones. */
.ledger__freq td.ledger__expect { color: var(--ivory-dim); }
.ledger__note {
  margin-top: 12px;
  font-size: 10px; line-height: 1.6; letter-spacing: .06em;
  color: var(--ivory-dim);
}

/* ---------- house rules ---------- */
.rules__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 6px;
}
.rules__mode { min-width: 0; }
.rules__h {
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-500); font-weight: 400;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gold-line);
  margin-bottom: 8px;
}
.rules__h--full { margin-top: 18px; }
.rules__list { margin: 0; padding-left: 17px; }
.rules__list li {
  font-size: 12px; line-height: 1.6; color: var(--ivory-dim);
  margin-bottom: 5px;
}
.rules__list b { color: var(--gold-300); font-weight: 400; }
.rules__rankings { display: flex; flex-direction: column; gap: 2px; }
.rules__rank {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.rules__rank-name {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.rules__rank-label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivory-dim);
}
.rules__rank-dice { display: flex; gap: 4px; }
.rules__rank-mult {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--gold-500);
  min-width: 74px; text-align: right;
}
.rules__rank-mult small {
  display: block;
  font-family: var(--serif); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ivory-dim); font-weight: 400;
}
.mini-die { width: 22px; height: 22px; flex: none; }
.mini-die .die__body {
  padding: 15%;
  border-radius: 20%;
  box-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.3) inset;
}
.mini-die .die__pip { box-shadow: none; }
.rules__foot {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--gold-line);
  font-size: 10px; line-height: 1.6; letter-spacing: .06em;
  color: var(--ivory-dim);
}
.rules__credit { margin-top: 8px; padding-top: 8px; text-align: center; }
.rules__credit a { color: var(--gold-500); text-decoration: none; }
.rules__credit a:hover, .rules__credit a:focus-visible { color: var(--gold-300); text-decoration: underline; }

/* ============================================================
   RESPONSIVE — desktop degrading toward tablet
   ============================================================ */
@media (max-width: 1040px) {
  :root { --rail-top-h: 70px; --rail-bot-h: 146px; }
  .wordmark__text { font-size: 20px; letter-spacing: .26em; }
  .wordmark__sub { display: none; }
  .odo__digit { font-size: 17px; min-width: 17px; }
  .bankroll__value { font-size: 22px; }
  .btn--roll { min-width: 138px; }
  .btn--roll .btn__main { font-size: 17px; }
  .btn--roll.is-long .btn__main { font-size: 13px; }
  .mode-toggle__plaque { padding: 4px 8px; font-size: 9px; letter-spacing: .1em; }
  .settings { gap: 5px; }
  .iconbtn { width: 30px; height: 30px; }
  .iconbtn__icon { width: 16px; height: 16px; }
}
@media (max-width: 900px) {
  .console__bet { gap: 10px; padding: 8px 12px; }
  .chip { width: 36px; height: 36px; border-width: 5px; }
  .chip-row { gap: 7px; }
  .btn__key { display: none; }
  .cgroup__label { font-size: 8.5px; letter-spacing: .2em; }
  .du__grid { gap: 12px; }
  .du-die { width: 60px; height: 60px; }
  .paytable__foot { display: none; }
}
/* The console carries five groups now; below this the TOTAL BET / STAKED
   readout is the first to go, so the mode toggle, chip rack, stepper and
   action buttons all stay on one row. */
@media (max-width: 1000px) {
  .cgroup--total { display: none; }
  /* one fewer grid item, so re-declare the track list */
  .console__bet { grid-template-columns: auto auto auto 1fr; }
}
@media (max-height: 660px) {
  :root { --rail-top-h: 66px; --rail-bot-h: 136px; }
  .banner { min-height: 52px; }
}

/* ============================================================
   MOBILE (<768px) — target 375x812. Vertical scroll allowed,
   horizontal NEVER.
   ============================================================ */
@media (max-width: 767px) {
  html, body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body { overscroll-behavior-y: contain; }

  .room {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /* ---- top rail: wordmark + bankroll; the jackpot drops into the felt ---- */
  /* The settings sheet lives inside this rail, and .rail's own z-index makes a
     stacking context — so the rail has to outrank the scrim or the sheet would
     be painted underneath it. Nothing here overlaps the drawer's own band. */
  .rail--top {
    grid-template-columns: 1fr auto;
    padding: 7px 10px 8px;
    gap: 8px;
    overflow: visible;
    z-index: 67;
  }
  .takeover { z-index: 68; }
  .rail__seg--right { gap: 8px; }
  .wordmark__text { font-size: 15px; letter-spacing: .2em; padding: 3px 0 4px; border-width: 2px; }
  .bankroll__label { font-size: 8px; letter-spacing: .18em; }
  .bankroll__value { font-size: 19px; margin-top: 1px; }
  .bankroll__meta { display: none; }

  /* jackpot ticker rides just under the rail, over the top of the felt */
  .rail__seg--center {
    position: absolute;
    left: 0; right: 0; top: 100%;
    justify-content: center;
    padding-top: 5px;
    pointer-events: none;
    z-index: 4;
  }
  .jackpot__label { font-size: 8px; letter-spacing: .18em; margin-bottom: 3px; }
  .jackpot__label .fleuron { width: 20px; }
  .odo { gap: 2px; }
  .odo__digit { font-size: 13px; min-width: 13px; padding: 1px 0 2px; }

  /* ---- settings collapse to a sheet behind the ... button ---- */
  .iconbtn--more { display: inline-flex; width: 38px; height: 38px; }
  .settings-wrap {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 66;
    display: block;
    padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 2px solid var(--gold-dim);
    border-radius: 12px 12px 0 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.3)),
      radial-gradient(120% 100% at 30% 0%, var(--rail-700), var(--rail-900) 78%);
    box-shadow: 0 -18px 44px rgba(0,0,0,.65);
    transform: translateY(104%);
    /* visibility is delayed off so the slide-out is still seen */
    transition: transform .3s cubic-bezier(.2,.9,.3,1), visibility 0s linear .3s;
    visibility: hidden;
  }
  .settings-wrap.is-open {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(.2,.9,.3,1), visibility 0s linear 0s;
  }
  .settings__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 2px 8px;
    border-bottom: 1px solid var(--gold-line);
    margin-bottom: 8px;
  }
  .settings__title {
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-500);
  }
  .settings__close {
    width: 40px; height: 40px;
    background: none; border: 0;
    color: var(--gold-500); font-size: 24px; line-height: 1; cursor: pointer;
  }
  .settings { flex-direction: column; align-items: stretch; gap: 5px; }
  .iconbtn {
    width: auto; height: auto;
    min-height: 46px;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 4px;
  }
  .iconbtn__label {
    position: static; width: auto; height: auto;
    margin: 0; overflow: visible; clip: auto;
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  }

  /* ---- felt ---- */
  .table { grid-template-columns: 1fr; position: static; z-index: auto; }
  .felt {
    padding: 44px 10px 8px;
    gap: 10px;
    overflow: visible;
  }
  .felt__arc { display: none; }

  /* five across at 375px with 44px+ targets and the plaque moved above */
  .die { --arc: 0px !important; --rot: 0deg !important; }
  :root { --die-size: 56px; }
  .dice-tray { gap: 6px; padding-top: 20px; }
  .die__plaque {
    bottom: auto;
    top: -20px;
    font-size: 7.5px; letter-spacing: .14em; padding: 1px 5px;
    transform: translate(-50%, -6px);
  }
  .die.is-held .die__plaque { transform: translate(-50%, 0); }
  .die__ring { inset: -5px; }
  .die__ring--opt { inset: -10px; }

  .status { font-size: 11px; letter-spacing: .16em; }
  .advice { font-size: 10px; padding: 3px 10px; letter-spacing: .08em; }
  .banner { min-height: 46px; padding: 4px 12px; }
  .banner__text { font-size: 19px; }
  .banner__sub { font-size: 10.5px; }

  /* ---- paytable becomes a bottom-sheet drawer ---- */
  .paytable {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    z-index: 62;
    max-height: 68vh;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-right: 0;
    border-top: 2px solid var(--gold-dim);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -18px 44px rgba(0,0,0,.65);
    transform: translateY(104%);
    transition: transform .32s cubic-bezier(.2,.9,.3,1), visibility 0s linear .32s;
    visibility: hidden;
  }
  .paytable.is-open {
    transform: none;
    visibility: visible;
    transition: transform .32s cubic-bezier(.2,.9,.3,1), visibility 0s linear 0s;
  }
  .paytable::after { display: none; }
  .paytable__close { display: block; }
  .paytable__foot { display: block; }
  .pt-row { padding: 9px 6px; }
  .pt-row__hand { font-size: 12px; }
  .pt-row__mult, .pt-row__pay { font-size: 13px; }

  .pays-tab {
    display: block;
    position: fixed;
    left: 0; top: 44%;
    transform: translateY(-50%);
    z-index: 61;
    writing-mode: vertical-rl;
    min-height: 62px;
    padding: 14px 8px;
    border: 1px solid var(--gold-dim);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(90deg, var(--rail-900), var(--rail-700));
    color: var(--gold-500);
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 3px 0 12px rgba(0,0,0,.5);
  }
  .pays-tab:focus-visible { outline: 2px dashed var(--gold-300); outline-offset: 2px; }

  .scrim {
    display: block;
    position: fixed; inset: 0;
    z-index: 60;
    background: rgba(4, 10, 6, .66);
    animation: fadeIn .25s ease;
  }

  /* win auto-peek: the winning row alone, sliding up over the console */
  .pt-peek {
    display: grid;
    grid-template-columns: 1fr 44px 56px;
    gap: 6px;
    align-items: center;
    position: fixed;
    left: 10px; right: 10px;
    bottom: 120px;
    z-index: 58;
    padding: 8px 10px;
    border: 1px solid var(--gold-500);
    border-left: 3px solid var(--gold-300);
    border-radius: 3px;
    /* mirrors .pt-row.is-win over an opaque rail base — the peek floats over
       the felt, so it cannot borrow the panel's own background */
    background:
      linear-gradient(90deg, rgba(var(--gold-rgb), .26), rgba(var(--gold-rgb), .04)),
      linear-gradient(180deg, var(--rail-700), var(--rail-900));
    box-shadow: 0 10px 26px rgba(0,0,0,.6);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1);
    pointer-events: none;
  }
  .pt-peek.is-show { opacity: 1; transform: none; }
  .pt-peek__hand {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300);
  }
  .pt-peek__mult, .pt-peek__pay {
    font-family: var(--mono); font-size: 12px; text-align: right; color: var(--gold-300);
  }
  .pt-peek__pay { font-weight: 700; }

  /* ---- console: two tiers ---- */
  .console__bet {
    height: auto;
    /* minmax(0,...) everywhere: at 375px the three tier-1 groups must be able
       to shrink rather than push the page into a horizontal scroll. */
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    grid-template-areas:
      "mode chips units"
      "act  act   act";
    gap: 6px;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
    align-items: center;
  }
  .cgroup__label { display: none; }
  .cgroup--mode    { grid-area: mode; }
  .cgroup--chips   { grid-area: chips; align-items: center; }
  .cgroup--units   { grid-area: units; }
  .cgroup--actions { grid-area: act; display: flex; gap: 8px; }
  .cgroup--actions .btn--roll  { flex: 1 1 60%; min-width: 0; }
  .cgroup--actions .btn--stand { flex: 0 1 40%; min-width: 0; }
  .btn--roll { padding: 12px 8px; }
  .btn--roll .btn__main { font-size: 15px; letter-spacing: .14em; }
  .btn--roll.is-long .btn__main { font-size: 11.5px; letter-spacing: .04em; }
  .btn--stand { padding: 12px 8px; }
  .btn--stand .btn__main { font-size: 13px; letter-spacing: .12em; }

  .mode-toggle { flex-direction: row; gap: 2px; padding: 3px; }
  .mode-toggle__opt { min-width: 28px; min-height: 44px; }
  .mode-toggle__plaque { padding: 4px 5px; font-size: 10px; letter-spacing: .06em; }
  .mode-toggle__opt:not(.is-active) .mode-toggle__full { display: none; }
  .mode-toggle__opt:not(.is-active) .mode-toggle__short { display: inline; }
  .mode-toggle__opt.is-active .mode-toggle__short { display: none; }

  /* Chips and steppers stay visually small so tier 1 fits 375px, but each
     carries an invisible ::after that lifts the tap target to 44px+. */
  .cgroup--chips { align-items: center; }
  .chip-row { gap: 5px; justify-content: center; }
  .chip { width: 38px; height: 38px; border-width: 5px; }
  .chip::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
  }
  .stepper { gap: 4px; }
  .stepper__btn { position: relative; width: 34px; height: 34px; }
  .stepper__btn::after {
    content: '';
    position: absolute;
    inset: -5px;
  }
  .stepper__value { font-size: 18px; min-width: 18px; }
  .btn--max { display: none; }

  /* ---- double-up stacks ---- */
  .console__du { height: auto; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .du__head { gap: 10px; }
  .du__title { font-size: 9.5px; letter-spacing: .2em; }
  .du__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "low  high"
      "mid  mid";
    gap: 8px;
  }
  .btn--low  { grid-area: low; }
  .btn--high { grid-area: high; }
  .du__center {
    grid-area: mid;
    justify-content: space-between;
    gap: 10px;
  }
  .du__actions { flex-direction: row; gap: 8px; }
  .btn--low, .btn--high { padding: 12px 8px; min-height: 56px; }
  .btn--low .btn__main, .btn--high .btn__main { font-size: 16px; }
  .btn__odds { font-size: 9px; letter-spacing: .16em; }
  .du-die { width: 46px; height: 46px; }
  .du-die__mark { font-size: 22px; }
  .du__amount { min-width: 0; }
  .du__amount-value { font-size: 18px; }
  .du__amount-label, .du__banked { font-size: 8.5px; letter-spacing: .12em; }
  .btn--collect, .btn--half { padding: 10px 8px; min-height: 44px; }
  .btn--collect .btn__main, .btn--half .btn__main { font-size: 11px; letter-spacing: .1em; }

  /* ---- modals fill more of the screen ---- */
  .overlay--modal { padding: 10px; align-items: end; }
  .modal, .modal--wide { width: 100%; max-height: 88vh; }
  .modal__head { padding: 12px 48px 10px; }
  .ledger__grid, .rules__modes { grid-template-columns: 1fr; gap: 14px; }
  .modal__body { padding: 12px 14px 16px; }
}

/* Landscape phones: letterbox the felt and keep the console on one row. */
@media (max-width: 767px) and (orientation: landscape) {
  :root { --die-size: 44px; }
  .felt { padding: 6px 8px 4px; gap: 6px; }
  .rail__seg--center { position: static; padding-top: 0; }
  .jackpot__label { display: none; }
  .rail--top { grid-template-columns: auto 1fr auto; padding: 4px 10px; }
  .dice-tray { padding-top: 16px; }
  .banner { min-height: 34px; }
  .banner__text { font-size: 15px; }
  .advice { display: none; }
  .console__bet {
    grid-template-columns: auto auto auto 1fr;
    grid-template-areas: "mode chips units act";
    gap: 8px;
  }
  .cgroup--actions { justify-content: flex-end; }
  .cgroup--actions .btn--roll { flex: 0 1 auto; min-width: 116px; }
  .cgroup--actions .btn--stand { flex: 0 1 auto; min-width: 78px; }
  .du__grid {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "low mid high";
  }
  .du__center { justify-content: center; }
  .paytable { max-height: 84vh; }
}

/* Short landscape on larger phones/tablets (e.g. 812x375) keeps the desktop
   console but has to give the felt its height back. */
@media (min-width: 768px) and (max-height: 460px) {
  :root { --rail-top-h: 54px; --rail-bot-h: 112px; --die-size: 52px; }
  .wordmark__sub { display: none; }
  .wordmark__text { font-size: 16px; }
  .jackpot__label { display: none; }
  .banner { min-height: 34px; }
  .banner__text { font-size: 16px; }
  .felt { gap: 6px; padding: 6px 12px 4px; }
  .felt__arc { display: none; }
  .du-die { width: 46px; height: 46px; }
  .console__du { gap: 4px; padding-top: 4px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .08s !important;
  }
  .die__body.is-tumbling { animation: none !important; }
  .du-die.is-flipping .du-die__inner { animation: none !important; }
  .die.is-opt .die__ring--opt { animation: none !important; opacity: .92; }
  .banner { transform: none; }
  .banner.is-show { transform: none; }
}