/* SIMCOIN GAMES: the boards. Crash (Moonshot), Mines (The Back Room), Wheel (Grand Salon),
 * Plinko (The Drop) and Roulette (Red, Black, Green). cg- is the namespace the game scripts use;
 * rw- is the room around them (rewards.css).
 *
 * Every game root carries data-game and data-state (idle, betting, running, settled): style a
 * phase with [data-state="running"]. The rarity ramp (sf-tier--*) is shared with case.css.
 *
 * TIMING LIVES HERE. The scripts read the JS-driven durations below with getComputedStyle, so the
 * whole feel of a game is retimed from this block without touching game code.
 */
:root {
  --cg-dur-fast: 140ms;
  --cg-dur: 260ms;
  --cg-dur-slow: 600ms;
  --cg-ease-out: cubic-bezier(.2, .8, .2, 1);
  --cg-ease-spin: cubic-bezier(.12, .7, .14, 1);
  --cg-wheel-spin: 4200ms;      /* read by wheel.js */
  --cg-plinko-row: 130ms;       /* read by plinko.js, per row */
  --cg-roulette-spin: 5200ms;   /* read by roulette.js */
  --cg-mines-reveal: 220ms;
  --cg-bump: 420ms;

  /* The tables and the strip. */
  --felt: #0f3b2b;
  --felt-lit: #1b5a41;
  --felt-deep: #082418;
  --rr-red: #8f1a20;
  --rr-red-lit: #c2323a;
  --rr-black: #141310;
  --rr-black-lit: #2b2822;
  --rr-green: #0f6b45;
  --rr-green-lit: #20a06a;
  --wheel-ivory: #e9e0c8;
  --wheel-oxblood: #6c1520;
  --wheel-onyx: #121110;
  --wheel-gold: #c9a961;
  --wheel-gold-lit: #f0d693;
  --wheel-coin: url("/assets/rewards/simcoin-256.webp");
  --bomb: #b3242a;
  --bomb-lit: #ff6a4d;
  --hist-low: rgba(227, 144, 112, 0.14);
  --hist-low-line: rgba(227, 144, 112, 0.55);
  --hist-high: rgba(127, 203, 152, 0.14);
  --hist-high-line: rgba(127, 203, 152, 0.55);

  /* Shades and tints the components use, named for what they are. */
  --cg-black-20: rgba(0, 0, 0, 0.2);
  --cg-black-35: rgba(0, 0, 0, 0.35);
  --cg-black-40: rgba(0, 0, 0, 0.4);
  --cg-black-45: rgba(0, 0, 0, 0.45);
  --cg-black-50: rgba(0, 0, 0, 0.5);
  --cg-black-55: rgba(0, 0, 0, 0.55);
  --cg-black-60: rgba(0, 0, 0, 0.6);
  --cg-black-70: rgba(0, 0, 0, 0.7);
  --cg-black-80: rgba(0, 0, 0, 0.8);
  --cg-black-95: rgba(0, 0, 0, 0.95);
  --cg-bomb-55: rgba(255, 106, 77, 0.55);
  --cg-bomb-deep: #3a0a0c;
  --cg-bronze-85: rgba(20, 16, 10, 0.85);
  --cg-c0c0b09-96: rgba(12, 11, 9, 0.96);
  --cg-ember-92: rgba(40, 8, 8, 0.92);
  --cg-felt-90: rgba(8, 20, 14, 0.9);
  --cg-flame-85: rgba(255, 214, 140, 0.85);
  --cg-fuse: #fff6d6;
  --cg-glow-80: rgba(255, 226, 150, 0.8);
  --cg-glow-90: rgba(255, 226, 150, 0.9);
  --cg-gold-20: rgba(201, 169, 97, 0.2);
  --cg-gold-24: rgba(201, 169, 97, 0.24);
  --cg-gold-35: rgba(201, 169, 97, 0.35);
  --cg-gold-45: rgba(201, 169, 97, 0.45);
  --cg-gold-50: rgba(201, 169, 97, 0.5);
  --cg-gold-55: rgba(201, 169, 97, 0.55);
  --cg-gold-60: rgba(201, 169, 97, 0.6);
  --cg-gold-70: rgba(201, 169, 97, 0.7);
  --cg-gold-dark-95: rgba(60, 48, 26, 0.95);
  --cg-gold-shadow: #8d6f36;
  --cg-ink-10: rgba(241, 236, 224, 0.1);
  --cg-ink-14: rgba(241, 236, 224, 0.14);
  --cg-ink-28: rgba(241, 236, 224, 0.28);
  --cg-ink-30: rgba(241, 236, 224, 0.3);
  --cg-ink-35: rgba(241, 236, 224, 0.35);
  --cg-ink-6: rgba(241, 236, 224, 0.06);
  --cg-lit-25: rgba(230, 201, 124, 0.25);
  --cg-lit-35: rgba(230, 201, 124, 0.35);
  --cg-lit-55: rgba(230, 201, 124, 0.55);
  --cg-lit-60: rgba(230, 201, 124, 0.6);
  --cg-lit-65: rgba(230, 201, 124, 0.65);
  --cg-lit-70: rgba(230, 201, 124, 0.7);
  --cg-lit-8: rgba(230, 201, 124, 0.08);
  --cg-lit-80: rgba(230, 201, 124, 0.8);
  --cg-lit-85: rgba(230, 201, 124, 0.85);
  --cg-loss-70: rgba(227, 144, 112, 0.7);
  --cg-loss-8: rgba(227, 144, 112, 0.08);
  --cg-night-deep-94: rgba(6, 6, 5, 0.94);
  --cg-night-deep-95: rgba(6, 6, 5, 0.95);
  --cg-night-deep-96: rgba(6, 6, 5, 0.96);
  --cg-onyx-deep: #16140f;
  --cg-onyx-lit: #2a2620;
  --cg-onyx-mid: #2c2922;
  --cg-panel-deep-92: rgba(14, 13, 11, 0.92);
  --cg-panel-dusk-94: rgba(18, 16, 13, 0.94);
  --cg-panel-warm-95: rgba(20, 18, 14, 0.95);
  --cg-peg-lit: #fff2c9;
  --cg-plaque: #1c1a15;
  --cg-plaque-deep: #0d0c0a;
  --cg-pointer-lit: #fff5d6;
  --cg-white-12: rgba(255, 255, 255, 0.12);
  --cg-white-18: rgba(255, 255, 255, 0.18);
  --cg-white-20: rgba(255, 255, 255, 0.2);
  --cg-white-5: rgba(255, 255, 255, 0.05);
  --cg-white-7: rgba(255, 255, 255, 0.07);
}

/* ---------- balance ---------- */
.cg-balance__n { transition: color var(--cg-dur) ease; }
.cg-balance__n.is-bumped[data-delta="up"] { color: var(--rw-gold-lit); animation: cg-bump var(--cg-bump) var(--cg-ease-out); }
.cg-balance__n.is-bumped[data-delta="down"] { animation: cg-dip var(--cg-bump) var(--cg-ease-out); }
@keyframes cg-bump { 40% { transform: translateY(-3px) scale(1.08); } }
@keyframes cg-dip { 40% { transform: translateY(2px); opacity: .6; } }

.cg-game .cg-stage { position: relative; min-height: 280px; }

/* ================================================================== CRASH: MOONSHOT */
.rw-crash { display: grid; }
.rw-crash__plot {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 260px;
  border-left: 1px solid var(--cg-ink-28);
  border-bottom: 1px solid var(--cg-ink-28);
}
.cg-crash__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.cg-crash__grid line { stroke: var(--cg-ink-10); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cg-crash__line {
  fill: none;
  stroke: var(--rw-gold-lit);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--cg-dur) ease;
}
.cg-crash__glow {
  fill: none;
  stroke: var(--cg-lit-80);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.28;
  transition: stroke var(--cg-dur) ease;
}
.cg-crash__area { fill: var(--cg-lit-8); stroke: none; transition: fill var(--cg-dur) ease; }
.cg-crash__dot { fill: transparent; }
.cg-crash__mult {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  margin: 0;
  text-align: center;
  pointer-events: none;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(56px, 11vw, 132px);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--rw-ink);
  text-shadow: 0 0 40px var(--cg-lit-25);
  transition: color var(--cg-dur) ease, transform var(--cg-dur) var(--cg-ease-out);
}
[data-state="running"] .cg-crash__mult { color: var(--rw-gold-lit); text-shadow: 0 0 36px var(--cg-lit-55); }
.cg-stage.is-bust .cg-crash__line { stroke: var(--rw-loss); }
.cg-stage.is-bust .cg-crash__glow { stroke: var(--cg-loss-70); }
.cg-stage.is-bust .cg-crash__area { fill: var(--cg-loss-8); }
.cg-stage.is-bust .cg-crash__mult { color: var(--rw-loss); transform: scale(1.04); text-shadow: none; }
.cg-stage.is-cashed .cg-crash__mult { color: var(--rw-gold-lit); transform: scale(1.04); }
.rw-rocket {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  pointer-events: none;
  filter: drop-shadow(0 0 10px var(--cg-lit-55));
  transition: opacity var(--cg-dur) ease;
}
.rw-rocket__body { fill: var(--rw-gold-lit); stroke: var(--rw-gold-deep); stroke-width: 1; }
.rw-rocket__fin { fill: var(--rw-gold); }
.rw-rocket__port { fill: var(--rw-ground); stroke: var(--rw-gold-deep); stroke-width: 1; }
.rw-rocket__flame { fill: var(--cg-flame-85); opacity: 0; }
[data-state="running"] .rw-rocket__flame { opacity: 1; }
.rw-rocket.is-bust { opacity: 0; }
[data-state="idle"] .rw-rocket { opacity: 0.85; }

.cg-history { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; overflow-x: auto; min-height: 40px; flex: 1; }
.cg-history__chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 88px;
  padding: 9px 16px;
  border: 1px solid var(--hist-low-line);
  border-radius: 10px;
  background: var(--hist-low);
  font: 600 17px/1 var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--rw-ink);
}
.cg-history__chip.is-high { border-color: var(--hist-high-line); background: var(--hist-high); }

/* ================================================================== MINES: THE BACK ROOM */
.rw-mines { display: grid; justify-items: center; align-content: center; gap: 14px; }
.rw-felt {
  width: min(100%, 560px);
  padding: clamp(12px, 2.4vw, 22px);
  border-radius: 22px;
  border: 2px solid var(--cg-gold-60);
  background:
    radial-gradient(90% 80% at 50% 30%, var(--felt-lit), var(--felt) 55%, var(--felt-deep)),
    var(--felt);
  box-shadow: 0 0 0 6px var(--cg-bronze-85), 0 0 0 7px var(--cg-gold-35), 0 40px 90px -30px var(--cg-black-95), inset 0 0 60px var(--cg-black-45);
}
.cg-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 12px); }
.cg-tile {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--cg-gold-55);
  background: linear-gradient(160deg, var(--cg-white-5), var(--cg-black-20)), var(--felt);
  box-shadow: inset 0 1px 0 var(--cg-white-7), inset 0 -3px 0 var(--cg-black-40), 0 6px 14px -8px var(--cg-black-80);
  cursor: pointer;
  transition: transform var(--cg-mines-reveal) var(--cg-ease-out), background var(--cg-mines-reveal) ease, border-color var(--cg-mines-reveal) ease, opacity var(--cg-mines-reveal) ease;
}
.cg-tile[disabled] { cursor: default; }
.cg-tile:focus-visible { outline: 2px solid var(--rw-gold-lit); outline-offset: 2px; }
[data-state="running"] .cg-tile[data-tile-state="hidden"]:hover { transform: translateY(-2px); border-color: var(--rw-gold-lit); }
.cg-tile[data-tile-state="pending"] { transform: scale(.94); opacity: .7; }
.cg-tile__face { position: absolute; inset: 10%; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity var(--cg-mines-reveal) ease, transform var(--cg-mines-reveal) var(--cg-ease-out); }
.cg-tile[data-tile-state="safe"],
.cg-tile[data-tile-state="safe-dim"] { background: var(--cg-felt-90); border-color: var(--rw-gold); }
.cg-tile[data-tile-state="safe"] .cg-tile__face,
.cg-tile[data-tile-state="safe-dim"] .cg-tile__face {
  opacity: 1;
  transform: scale(1);
  background: url("/assets/rewards/simcoin-128.webp") center / contain no-repeat;
  filter: drop-shadow(0 4px 8px var(--cg-black-60));
}
.cg-tile[data-tile-state="mine"],
.cg-tile[data-tile-state="mine-dim"] { background: var(--cg-ember-92); border-color: var(--bomb-lit); }
.cg-tile[data-tile-state="mine"] .cg-tile__face,
.cg-tile[data-tile-state="mine-dim"] .cg-tile__face {
  inset: 18%;
  opacity: 1;
  transform: scale(1);
  background: radial-gradient(circle at 36% 32%, var(--bomb-lit), var(--bomb) 45%, var(--cg-bomb-deep) 80%);
  box-shadow: 0 0 18px var(--cg-bomb-55);
}
.cg-tile[data-tile-state="mine"] .cg-tile__face::after,
.cg-tile[data-tile-state="mine-dim"] .cg-tile__face::after {
  content: "";
  position: absolute;
  right: 4%;
  top: -12%;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cg-fuse), var(--rw-gold-lit) 40%, transparent 70%);
}
.cg-tile[data-tile-state="safe-dim"],
.cg-tile[data-tile-state="mine-dim"] { opacity: .5; }
.cg-ladder { display: flex; gap: 6px; width: min(100%, 560px); overflow-x: auto; margin: 0; padding: 2px 0 6px; list-style: none; scroll-behavior: smooth; position: relative; }
.cg-ladder__step {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--cg-ink-14);
  background: var(--cg-black-55);
  font: 600 12px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--rw-muted);
}
.cg-ladder__step.is-passed { color: var(--rw-gold-lit); border-color: var(--rw-line); }
.cg-ladder__step.is-next { color: var(--rw-gilt-ink); background: var(--rw-gilt); border-color: var(--rw-gold-deep); }
.page-rewards .cg-go.cg-go--cash { background: var(--cg-black-40); color: var(--rw-muted); border-color: var(--rw-line); box-shadow: none; }
.page-rewards .cg-go.cg-go--cash:not([disabled]) { background: var(--rw-gilt); color: var(--rw-gilt-ink); border-color: var(--rw-gold-deep); box-shadow: 0 16px 34px -16px var(--cg-lit-65); }

/* ================================================================== WHEEL: GRAND SALON */
.rw-wheel { display: grid; place-items: center; padding: 8px 0 20px; }
.cg-wheel { position: relative; width: min(100%, 540px); aspect-ratio: 1; }
.cg-wheel::before {
  content: "";
  position: absolute;
  inset: -3.5%;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 66%, var(--cg-black-50) 67%, transparent 69%),
    conic-gradient(from 0deg, var(--wheel-gold-lit), var(--wheel-gold) 12%, var(--cg-gold-shadow) 25%, var(--wheel-gold-lit) 37%, var(--wheel-gold) 50%, var(--cg-gold-shadow) 62%, var(--wheel-gold-lit) 75%, var(--wheel-gold) 87%, var(--wheel-gold-lit));
  box-shadow: 0 40px 90px -30px var(--cg-black-95), 0 0 60px -10px var(--cg-lit-35);
}
.cg-wheel__disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wheel-onyx);
  transition-property: transform;
  transition-duration: var(--cg-wheel-spin);
  transition-timing-function: var(--cg-ease-spin);
  box-shadow: inset 0 0 0 2px var(--cg-black-70);
}
.cg-wheel__disc svg { display: block; width: 100%; height: 100%; }
.cg-seg__fill { stroke: var(--cg-black-55); stroke-width: 1; transition: fill var(--cg-dur) ease, filter var(--cg-dur) ease; }
.cg-seg.sf-tier--none .cg-seg__fill { fill: var(--wheel-onyx); }
.cg-seg.sf-tier--common .cg-seg__fill { fill: var(--wheel-ivory); }
.cg-seg.sf-tier--rare .cg-seg__fill { fill: var(--wheel-oxblood); }
.cg-seg.sf-tier--epic .cg-seg__fill { fill: var(--wheel-gold); }
.cg-seg.sf-tier--legendary .cg-seg__fill { fill: var(--wheel-gold-lit); }
.cg-seg__label { font: 600 15px var(--font-display); fill: var(--rw-ink); }
.cg-seg.sf-tier--common .cg-seg__label,
.cg-seg.sf-tier--epic .cg-seg__label,
.cg-seg.sf-tier--legendary .cg-seg__label { fill: var(--wheel-onyx); }
.cg-seg.sf-tier--none .cg-seg__label { fill: var(--rw-faint); }
.cg-wheel.is-dense .cg-seg__label { display: none; }
.cg-seg.is-win .cg-seg__fill { filter: brightness(1.35) saturate(1.1); }
.cg-wheel__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  aspect-ratio: 1;
  margin: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--cg-onyx-lit), var(--wheel-onyx) 70%);
  box-shadow: 0 0 0 4px var(--wheel-gold), 0 0 0 7px var(--cg-black-70), 0 0 0 9px var(--wheel-gold-lit), 0 12px 30px var(--cg-black-70);
  font: 600 clamp(22px, 4vw, 40px)/1 var(--font-display);
  font-variant-numeric: lining-nums;
  color: var(--rw-gold-lit);
}
.cg-wheel__hub:empty {
  background: var(--wheel-coin) center / 78% no-repeat, radial-gradient(circle at 50% 35%, var(--cg-onyx-lit), var(--wheel-onyx) 70%);
}
.cg-wheel__pointer {
  position: absolute;
  left: 50%;
  top: -7%;
  z-index: 2;
  width: 44px;
  height: 56px;
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 0 30%, 18% 0, 82% 0, 100% 30%);
  background: linear-gradient(180deg, var(--cg-pointer-lit), var(--wheel-gold-lit) 35%, var(--wheel-gold) 70%, var(--cg-gold-shadow));
  filter: drop-shadow(0 6px 8px var(--cg-black-70));
}
.rw-legend .sf-odds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rw-legend .sf-odds__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.rw-legend .sf-odds__item::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--cg-ink-30);
  background: var(--wheel-onyx);
}
.rw-legend .sf-tier--common::before { background: var(--wheel-ivory); }
.rw-legend .sf-tier--rare::before { background: var(--wheel-oxblood); }
.rw-legend .sf-tier--epic::before { background: var(--wheel-gold); }
.rw-legend .sf-tier--legendary::before { background: var(--wheel-gold-lit); }
.rw-legend .sf-odds__amt { font: 600 18px/1 var(--font-display); color: var(--rw-ink); font-variant-numeric: lining-nums; }
.rw-legend .sf-odds__label { font: 500 12px/1 var(--ui); color: var(--rw-muted); }

/* ================================================================== PLINKO: THE DROP */
.rw-plinko { display: grid; justify-items: center; align-content: start; gap: 10px; }
.rw-plaque {
  display: flex;
  justify-content: center;
  width: min(100%, 520px);
  margin: 0;
  padding: 12px 20px;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--cg-plaque), var(--cg-plaque-deep));
  border-top: 2px solid var(--rw-gold);
  font: 600 clamp(18px, 2.6vw, 26px)/1 var(--font-display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rw-gold-lit);
}
.rw-plaque span::before,
.rw-plaque span::after { content: ""; display: inline-block; width: 40px; height: 1px; margin: 0 14px; vertical-align: middle; background: var(--rw-gold); }
.cg-plinko {
  width: min(100%, 620px);
  padding: 18px 16px 16px;
  border: 1px solid var(--cg-gold-45);
  border-radius: 6px 6px 14px 14px;
  background: linear-gradient(180deg, var(--cg-panel-deep-92), var(--cg-night-deep-96));
  box-shadow: inset 0 0 0 1px var(--cg-black-70), 0 40px 90px -30px var(--cg-black-95);
}
.cg-plinko__svg { display: block; width: 100%; height: auto; }
.cg-peg { fill: var(--rw-gold); stroke: var(--cg-gold-shadow); stroke-width: 0.6; transition: fill var(--cg-dur-fast) ease; }
.cg-peg.is-hit { fill: var(--cg-peg-lit); animation: cg-peg var(--cg-dur) ease; }
@keyframes cg-peg { 30% { fill: var(--cg-peg-lit); } }
.cg-ball { fill: var(--rw-gold-lit); opacity: 0; filter: drop-shadow(0 0 8px var(--cg-glow-90)); }
.cg-ball.is-live { opacity: 1; }
.cg-slots { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; width: 90%; margin: 6px auto 0; padding: 0; list-style: none; }
.cg-slot {
  --slot-top: var(--cg-gold-20);
  --slot-bottom: var(--cg-panel-warm-95);
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 1px;
  border-radius: 4px 4px 7px 7px;
  border: 1px solid var(--cg-gold-35);
  background: linear-gradient(180deg, var(--slot-top), var(--slot-bottom));
  font: 600 clamp(8px, 1.6vw, 12px)/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--rw-ink);
  overflow: hidden;
  transition: transform var(--cg-dur) var(--cg-ease-out), background var(--cg-dur) ease;
}
.cg-slot.sf-tier--none { --slot-top: var(--cg-ink-6); color: var(--rw-muted); }
.cg-slot.sf-tier--common { --slot-top: var(--cg-gold-24); }
.cg-slot.sf-tier--rare { --slot-top: var(--cg-gold-50); --slot-bottom: var(--cg-gold-dark-95); }
.cg-slot.sf-tier--epic { --slot-top: var(--rw-gold); --slot-bottom: var(--rw-gold-deep); }
.cg-slot.sf-tier--legendary { --slot-top: var(--rw-gold-lit); --slot-bottom: var(--rw-gold); color: var(--rw-gilt-ink); }
.cg-slot.is-hit { transform: translateY(4px); box-shadow: 0 0 22px var(--cg-glow-80); }
.page-rewards .cg-risk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 4px; border: 1px solid var(--rw-line-soft); border-radius: 12px; background: var(--cg-black-40); }
.page-rewards .cg-risk__opt {
  height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--rw-muted);
  font: 600 16px/1 var(--font-display);
  cursor: pointer;
}
.page-rewards .cg-risk__opt[aria-pressed="true"] { background: var(--rw-gilt); color: var(--rw-gilt-ink); }
.page-rewards .cg-risk__opt:focus-visible { outline: 2px solid var(--rw-gold-lit); outline-offset: 2px; }
.page-rewards .cg-risk__opt[disabled] { opacity: .55; cursor: default; }

/* ================================================================== ROULETTE: RED, BLACK, GREEN */
.rw-rr { display: grid; gap: 18px; }
.rw-rr__last { display: grid; justify-items: center; gap: 10px; }
.rw-rr__label { margin: 0; font: 500 17px/1.2 var(--font-display); color: var(--rw-ink); }
.rr-dots { display: flex; gap: 8px; min-height: 26px; margin: 0; padding: 0; list-style: none; }
.rr-dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--cg-ink-35); box-shadow: inset 0 -2px 4px var(--cg-black-45); }
.rr-dot--red { background: var(--rr-red-lit); }
.rr-dot--black { background: var(--rr-black-lit); }
.rr-dot--green { background: var(--rr-green-lit); }

.rw-rr__window {
  position: relative;
  overflow: hidden;
  margin: 0 calc(-1 * var(--gutter));
  padding: 16px 0;
  border-top: 2px solid var(--cg-gold-55);
  border-bottom: 2px solid var(--cg-gold-55);
  background: linear-gradient(180deg, var(--cg-night-deep-94), var(--cg-panel-dusk-94));
  box-shadow: 0 30px 70px -30px var(--cg-black-95);
}
.rw-rr__window::before,
.rw-rr__window::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 2; pointer-events: none; }
.rw-rr__window::before { left: 0; background: linear-gradient(90deg, var(--cg-night-deep-95), transparent); }
.rw-rr__window::after { right: 0; background: linear-gradient(270deg, var(--cg-night-deep-95), transparent); }
.rw-rr__track {
  display: flex;
  gap: 6px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transition-property: transform;
  transition-duration: 0ms;
  transition-timing-function: var(--cg-ease-spin);
}
.rr-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(64px, 8vw, 112px);
  height: clamp(72px, 9vw, 124px);
  border-radius: 6px;
  border: 1px solid var(--cg-black-60);
  box-shadow: inset 0 1px 0 var(--cg-white-12), inset 0 -8px 18px var(--cg-black-35);
  font: 600 clamp(22px, 3vw, 40px)/1 var(--font-display);
  font-variant-numeric: lining-nums;
  color: var(--rw-ink);
}
.rr-tile--red { background: linear-gradient(180deg, var(--rr-red-lit), var(--rr-red)); }
.rr-tile--black { background: linear-gradient(180deg, var(--rr-black-lit), var(--rr-black)); }
.rr-tile--green { background: linear-gradient(180deg, var(--rr-green-lit), var(--rr-green)); }
.rr-tile.is-win { outline: 3px solid var(--rw-gold-lit); outline-offset: -3px; box-shadow: 0 0 36px var(--cg-lit-70), inset 0 1px 0 var(--cg-white-20); }
.rw-rr__marker {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 2px;
  transform: translateX(-50%);
  background: var(--rw-gold-lit);
  box-shadow: 0 0 12px var(--cg-lit-85);
}
.rw-rr__marker::before,
.rw-rr__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}
.rw-rr__marker::before { top: 0; border-top: 16px solid var(--rw-gold-lit); }
.rw-rr__marker::after { bottom: 0; border-bottom: 16px solid var(--rw-gold-lit); }
.rw-rr__stake {
  width: min(100%, 520px);
  justify-self: center;
  padding: 18px 20px;
  border: 1px solid var(--rw-line);
  border-radius: 14px;
  background: var(--rw-panel);
}
.rw-rr__bets { display: grid; gap: 14px; }
@media (min-width: 760px) { .rw-rr__bets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.rr-bet {
  --bet: var(--rr-black);
  --bet-lit: var(--rr-black-lit);
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--cg-gold-50);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bet-lit) 0%, var(--bet) 38%, var(--cg-c0c0b09-96) 70%);
  box-shadow: 0 30px 70px -30px var(--cg-black-95);
}
.rr-bet--red { --bet: var(--rr-red); --bet-lit: var(--rr-red-lit); }
.rr-bet--green { --bet: var(--rr-green); --bet-lit: var(--rr-green-lit); }
.rr-bet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rr-bet__head h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1; }
.rr-bet__x { margin: 0; font: 600 clamp(30px, 3.4vw, 44px)/1 var(--font-display); color: var(--rw-gold-lit); font-variant-numeric: lining-nums; }
.rr-bet__odds { margin: 0; font: 500 13px/1.3 var(--ui); color: var(--rw-muted); min-height: 1.3em; }
.rr-bet__go {
  min-height: 52px;
  border-radius: 10px;
  border: 1px solid var(--cg-gold-70);
  background: linear-gradient(180deg, var(--bet-lit), var(--bet));
  color: var(--rw-ink);
  font: 600 20px/1 var(--font-display);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--cg-white-18);
}
.rr-bet--black .rr-bet__go { background: linear-gradient(180deg, var(--cg-onyx-mid), var(--cg-onyx-deep)); }
.rr-bet__go:hover:not([disabled]) { filter: brightness(1.12); border-color: var(--rw-gold-lit); }
.rr-bet__go:focus-visible { outline: 2px solid var(--rw-gold-lit); outline-offset: 3px; }
.rr-bet__go[disabled] { opacity: .55; cursor: default; }
.rr-bet.is-won { border-color: var(--rw-gold-lit); box-shadow: 0 0 0 1px var(--rw-gold-lit), 0 0 44px -8px var(--cg-lit-60); }
.rw-rr__status { text-align: center; }

/* ================================================================== SHARED ROUNDS (Crash, Roulette)
 * One round for the whole table, on the room's clock (rewards/room.js). The game root carries
 * data-phase with the room's own phase: betting, spinning (Roulette), running (Crash), settling,
 * result (Roulette), crashed (Crash) or idle. data-state keeps the four page states. */
.rw-countdown { display: grid; justify-items: center; gap: 8px; width: 100%; }
.rw-countdown__label {
  margin: 0;
  min-height: 1.2em;
  font: 500 17px/1.2 var(--font-display);
  color: var(--rw-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.rw-countdown__bar { width: min(100%, 540px); height: 6px; border-radius: 999px; background: var(--cg-ink-10); overflow: hidden; }
.rw-countdown__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rw-gold-deep), var(--rw-gold-lit));
  transform: scaleX(0);
  transform-origin: left center;
}
[data-phase="betting"] .rw-countdown__fill { box-shadow: 0 0 12px var(--cg-lit-55); }
.rw-countdown--panel { justify-items: stretch; }
.rw-countdown--panel .rw-countdown__label { text-align: center; }
.rw-countdown--panel .rw-countdown__bar { width: 100%; }

/* Roulette: everyone's bets under each colour, largest first. */
.rr-crowd { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rw-line-soft); }
.rr-crowd__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; font: 500 14px/1.2 var(--ui); color: var(--rw-muted); }
.rr-crowd__total,
.rr-crowd__amt,
.rw-crowd__total,
.rw-crowd__amt { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums lining-nums; }
.rr-crowd__list,
.rw-crowd__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; max-height: 264px; overflow-y: auto; }
.rr-crowd__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; font: 500 15px/1.2 var(--ui); color: var(--rw-ink); }
.rr-crowd__name,
.rw-crowd__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-crowd__row.is-mine,
.rw-crowd__row.is-mine { color: var(--rw-gold-lit); }
.rr-crowd__row.is-won .rr-crowd__amt { color: var(--rw-win); }
.rr-crowd__row.is-lost { opacity: .5; }
.rr-bet.is-lost { border-color: var(--cg-ink-10); }
[data-phase="spinning"] .rr-bet__go,
[data-phase="result"] .rr-bet__go { opacity: .55; }

/* Crash: everyone in the flight and where they got out. */
.rw-crowd {
  margin-top: 18px;
  padding: 16px 20px;
  border: 1px solid var(--rw-line-soft);
  border-radius: 14px;
  background: var(--rw-panel);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.rw-crowd__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 14px; margin-bottom: 10px; }
.rw-crowd__title { margin: 0; font-size: 22px; line-height: 1.1; }
.rw-crowd__sum { display: inline-flex; align-items: center; gap: 14px; margin: 0; font: 500 14px/1.2 var(--ui); color: var(--rw-muted); }
.rw-crowd__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--rw-line-soft);
  font: 500 15px/1.2 var(--ui);
  color: var(--rw-ink);
}
.rw-crowd__x { min-width: 60px; text-align: right; color: var(--rw-muted); font-variant-numeric: tabular-nums lining-nums; }
.rw-crowd__row.is-cashed .rw-crowd__x { color: var(--rw-gold-lit); }
.rw-crowd__row.is-cashed .rw-crowd__amt { color: var(--rw-win); }
.rw-crowd__row.is-bust { opacity: .6; }
.rw-crowd__row.is-bust .rw-crowd__x { color: var(--rw-loss); }

@media (max-width: 559px) {
  .cg-slots.is-dense .cg-slot { writing-mode: vertical-rl; min-height: 54px; padding: 4px 0; font-size: 10px; }
  .cg-crash__mult { top: 24%; }
  .rw-crash__plot { min-height: 220px; }
  .cg-history__chip { min-width: 72px; font-size: 15px; }
  .rw-strip { flex-wrap: wrap; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --cg-wheel-spin: 0ms; --cg-plinko-row: 0ms; --cg-roulette-spin: 0ms; --cg-mines-reveal: 0ms; --cg-bump: 0ms; }
  .cg-wheel__disc, .cg-tile, .cg-tile__face, .cg-crash__mult, .cg-slot, .cg-peg, .rw-rr__track, .rw-rocket { transition: none; }
  .cg-balance__n.is-bumped, .cg-peg.is-hit { animation: none; }
  .cg-ladder { scroll-behavior: auto; }
}