/* ═══════════════════════════════════════════════════════════════════
   FYM Roulette v2 — cinematic wheel overlay + casino table chips
   ───────────────────────────────────────────────────────────────────
   Companion to roulette-wheel.js v2. Key constraints from research:

   * 3D transforms live on HTML wrappers (Blink/WebKit ignore
     preserve-3d inside SVG)
   * No opacity/filter/clip on the tilt chain — they force 3D
     flattening and silently kill the perspective
   * The SVG layers rasterize at 760px and scale DOWN via transform,
     so pocket numbers stay crisp under the tilt
   * No animated drop-shadow filters on per-frame-mutated elements —
     the static shadow lives on a separate backdrop disc

   Loaded AFTER games-compact.css (overrides its action-grid rule).
   style.css:4951 `#roulette-screen > *` sets position:relative +
   z-index:1 with ID specificity — hence the !importants below.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Overlay shell ─────────────────────────────────────────────── */
#roulette-screen .r-wheel-overlay[hidden] { display: none !important; }
.r-wheel-overlay {
  position: fixed !important;
  inset: 0;
  z-index: 9000 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 240ms ease-out;
  pointer-events: none;
}
.r-wheel-overlay.visible {
  opacity: 1;
  pointer-events: auto;   /* enables tap-to-skip */
}

/* Cinematic vignette + spotlight backdrop (own layer — keeping
   filters OFF the 3D chain). */
.rw2-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 52% at 50% 44%,
      rgba(58, 44, 18, 0.32) 0%,
      rgba(8, 6, 3, 0.55) 55%,
      rgba(0, 0, 0, 0.88) 100%);
  pointer-events: none;
}

/* ── Bet manifest — what's riding on this spin ─────────────────── */
/* Brass pills along the top of the overlay. When the ball lands,
   winners light up gold with their payout; losers dim. */
.rw2-bets[hidden] { display: none !important; }
.rw2-bets {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px) + 6px);
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 5px;
  max-height: 86px;             /* ~3 rows, then clipped */
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.rw2-bet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #e8d9ae;
  background: rgba(10, 14, 10, 0.78);
  border: 1px solid rgba(222, 188, 110, 0.38);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: opacity 300ms ease-out, box-shadow 300ms ease-out;
  white-space: nowrap;
}
.rw2-bet b {
  font-weight: 700;
  color: #fdf6e3;
}
.rw2-bet em {
  font-style: normal;
  font-weight: 700;
  color: #ffe082;
}
.rw2-bet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.4);
}
.rw2-bet-dot.red   { background: radial-gradient(circle at 35% 30%, #d43340, #8c1019); }
.rw2-bet-dot.black { background: radial-gradient(circle at 35% 30%, #34343c, #0a0a0d); }
.rw2-bet-dot.green { background: radial-gradient(circle at 35% 30%, #1f9d5c, #0b5a31); }
.rw2-bet-win {
  border-color: rgba(255, 224, 130, 0.95);
  box-shadow: 0 0 12px rgba(246, 227, 160, 0.55),
              0 2px 6px rgba(0, 0, 0, 0.5);
}
.rw2-bet-lose { opacity: 0.38; }

/* ── "NO MORE BETS" banner ─────────────────────────────────────── */
.rw2-banner {
  position: absolute;
  top: 13%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: 17px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #f0d98c;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
}
.rw2-banner::before,
.rw2-banner::after {
  content: '✦';
  margin: 0 14px;
  font-size: 12px;
  vertical-align: 2px;
}
.r-wheel-overlay.visible .rw2-banner {
  animation: rw2BannerSweep 2.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes rw2BannerSweep {
  0%   { opacity: 0; transform: translateX(-40px); }
  18%  { opacity: 1; transform: translateX(0); }
  78%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(28px); }
}

/* ── 3D stage ──────────────────────────────────────────────────── */
.rw2-stage {
  position: relative;
  /* The wheel ellipse after a ~50° tilt: width full, height ~0.68 */
  width: min(94vw, 430px);
  height: calc(min(94vw, 430px) * 0.78);
  pointer-events: auto;
}
/* Static soft shadow UNDER the whole wheel (not on the 3D chain). */
.rw2-stage::before {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 2%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.65) 0%, transparent 70%);
}
.rw2-persp {
  position: absolute;
  inset: 0;
  /* 900px (was 1050): shorter camera = stronger foreshortening, and the
     v2.3 Z-strata need the deeper perspective to read their parallax. */
  perspective: 900px;
  perspective-origin: 50% 38%;
}
.rw2-tilt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* 760-space wrapper, centered on the tilt origin, scaled to stage. */
.rw2-scale {
  position: absolute;
  left: -380px;
  top: -380px;
  width: 760px;
  height: 760px;
  transform-origin: 380px 380px;
  /* scale set per-device below; zoom composes via JS transform */
  will-change: transform;
  /* v2.3: children are translateZ strata — preserve their depths */
  transform-style: preserve-3d;
}

/* Z-stratum: full-bleed plane lifted to its depth by inline JS style. */
.rw2-z {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Fixed-direction key light on the rotor plane: pockets rotate through
   a static light/shadow field — the strongest cheap depth cue. */
.rw2-fixedlight {
  position: absolute;
  left: 132px;
  top: 132px;
  width: 496px;
  height: 496px;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(155deg,
    rgba(255, 244, 214, 0.10) 0%,
    transparent 42%,
    rgba(0, 0, 0, 0.05) 60%,
    rgba(0, 0, 0, 0.30) 100%);
}

/* Rim inner side-wall: dark wood ring peeking between the raised rim
   (Z 30) and the bowl (Z 0) — fakes the torus' extruded thickness. */
.rw2-wall-ring {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 696px;
  height: 696px;
  border-radius: 50%;
  border: 18px solid #241608;
  box-sizing: border-box;
  pointer-events: none;
}
/* Device scaling (stage width / 760) is set from JS in _build() —
   CSS scale() requires a unitless number and calc(length/number)
   yields a length, so this can't live here. See _fitToStage(). */

.rw2-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rw2-rotor {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Wheel internals */
.rw2-num {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 30px;
  font-weight: 800;
  fill: #efe6cf;
  user-select: none;
}
.rw2-cap-text {
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: 22px;
  font-weight: 700;
  fill: rgba(58, 38, 14, 0.75);   /* engraved into the wood cone */
  letter-spacing: 0.10em;
}
.rw2-notch {
  filter: drop-shadow(0 0 8px rgba(246, 227, 160, 0.65));
}

/* Deflector hit flash */
.rw2-deflector-hit {
  fill: #fff3c4 !important;
  filter: drop-shadow(0 0 10px rgba(255, 240, 180, 0.9));
}

/* Winning pocket pulse */
.rw2-pocket.rw2-pocket-win {
  animation: rw2PocketWin 640ms ease-in-out 5;
}
@keyframes rw2PocketWin {
  0%, 100% { fill-opacity: 1; stroke: #c9a23f; stroke-width: 1.6; }
  50%      { fill-opacity: 0.5; stroke: #ffeeb0; stroke-width: 5; }
}

/* ── Ball + trail (HTML divs in 760-space) ─────────────────────── */
.rw2-ball {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%,
      #ffffff 0%, #f4f0e6 38%, #c9c2b2 72%, #8d8678 100%);
  box-shadow:
    inset -2px -3px 5px rgba(0, 0, 0, 0.35),
    0 0 6px rgba(255, 255, 255, 0.28);
  will-change: transform;
  pointer-events: none;
}
/* Croupier-flick entry: opacity-only (transform is JS-driven per frame) */
.rw2-ball-enter {
  animation: rw2BallEnter 0.26s ease-out both;
}
@keyframes rw2BallEnter {
  0%   { opacity: 0; filter: brightness(2.4); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: brightness(1); }
}
.rw2-ball-shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.55) 0%, transparent 68%);
  will-change: transform, opacity;
  pointer-events: none;
}
.rw2-ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 240, 0.85) 0%, transparent 70%);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Heartbeat tension vignette — pulses in the final beat before the
   ball releases the rim. Opacity-only on its own pseudo-layer. */
.rw2-stage::after {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    transparent 52%,
    rgba(140, 20, 28, 0.16) 78%,
    rgba(120, 10, 16, 0.30) 100%);
  opacity: 0;
}
.rw2-stage.rw2-tension::after {
  animation: rw2Heartbeat 350ms ease-in-out 2;
}
@keyframes rw2Heartbeat {
  0%, 100% { opacity: 0; }
  45%      { opacity: 1; }
}

/* Deflector-hit shake on the whole stage */
.rw2-stage.rw2-shake {
  animation: rw2Shake 180ms ease-out;
}
@keyframes rw2Shake {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(2px, -2px); }
  60%  { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); }
}

/* ── Result card (number + colour + payout) ────────────────────── */
.r-wheel-result[hidden] { display: none !important; }
.r-wheel-result {
  /* Absolute (review finding): unhiding the card in the centered flex
     column shifted the zoomed wheel up ~45px at the exact money moment.
     Anchored to the lower third instead — no layout shift. */
  position: absolute;
  bottom: 11%;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 30px;
  border: 1.5px solid rgba(220, 180, 80, 0.85);
  background:
    linear-gradient(180deg, rgba(24, 18, 8, 0.99) 0%, rgba(7, 5, 3, 0.99) 100%);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.85),
    0 0 30px rgba(201, 162, 63, 0.18),
    inset 0 1px 0 rgba(246, 227, 160, 0.22);
  animation: rw2ResultRise 420ms cubic-bezier(0.22, 1.5, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}
@keyframes rw2ResultRise {
  from { transform: translateY(26px) scale(0.85); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.rw2-res-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.r-wres-num {
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: 32px;
  font-weight: 700;
  min-width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f7f0dc;
  border: 2.5px solid rgba(246, 227, 160, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
.r-wres-num.red   { background: radial-gradient(circle at 35% 30%, #bb2734, #6d0f18); }
.r-wres-num.black { background: radial-gradient(circle at 35% 30%, #32323a, #0a0a0c); }
.r-wres-num.green { background: radial-gradient(circle at 35% 30%, #168051, #073d22); }
.r-wres-word {
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: 17px;
  letter-spacing: 0.30em;
  color: #e3c878;
}
/* The money line — the payoff lands ON the wheel, not in a toast. */
.rw2-res-win {
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffe9a8;
  text-shadow: 0 0 18px rgba(240, 201, 76, 0.55);
}
.rw2-res-lose {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(220, 205, 170, 0.55);
}

/* ── Casino chips on the table — clean, flat, readable ─────────── */
/* Solid body colour, 8 crisp white edge ticks (conic ring), thin
   inner circle, bold upright numeral. No noisy gradients. */
.r-cell-chip {
  /* Gold default — untiered chips (e.g. multiplayer roulette) stay
     on-brand; the denomination tiers below override it. */
  --cc: #b08d2e;                 /* body colour, set per tier */
  --ct: #fff;                    /* tick + text colour */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* style.css's legacy .r-cell-chip sets `border: 2px dashed #fff` —
     without this reset it paints over the conic tick ring */
  border: none;
  display: grid;
  place-items: center;
  z-index: 4;
  pointer-events: none;
  animation: rChipDrop 240ms cubic-bezier(0.22, 1.5, 0.36, 1);
  background:
    repeating-conic-gradient(from -10deg,
      var(--ct) 0deg 20deg, var(--cc) 20deg 60deg);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.6);
}
/* Body disc covers the conic except the outer tick ring.
   z-index:-1 keeps it BELOW in-flow text — mp-roulette.js and
   spectate-shim.js set the amount via bare textContent (no
   .r-chip-face span), and the chip's own z-index:4 stacking context
   still paints the disc above the conic background. */
.r-cell-chip::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  z-index: -1;
  background: var(--cc);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--ct) 80%, transparent),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.22),
    inset 0 -1.5px 2px rgba(0, 0, 0, 0.30);
}
/* Bare-text chips (multiplayer + spectate) get the face typography */
.r-cell-chip {
  font-size: 9px;
  font-weight: 800;
  color: var(--ct);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  line-height: 1;
}
/* Multiplayer "confirmed" chips: distinct tint (style.css's legacy
   background !important is hidden under the body disc — override the
   custom property instead) */
.r-cell-chip.r-cell-chip-confirmed { --cc: #2e7d4f; }
@keyframes rChipDrop {
  from { transform: translate(-50%, -90%) scale(1.25); opacity: 0.4; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.r-chip-face {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ct);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.r-cell-chip.chip-ivory   { --cc: #e9e4d6; --ct: #4a443a; }
.r-cell-chip.chip-ivory .r-chip-face { text-shadow: none; }
.r-cell-chip.chip-ruby    { --cc: #b01f2c; }
.r-cell-chip.chip-azure   { --cc: #1f5fb4; }
.r-cell-chip.chip-emerald { --cc: #157a47; }
.r-cell-chip.chip-bronze  { --cc: #b06f24; }
.r-cell-chip.chip-noir    { --cc: #17181d; --ct: #ecd382; }
.r-cell-chip.chip-plum    { --cc: #6b2fa3; }
/* Chips on line-bet spots are slightly smaller so the layout under
   them stays readable */
.rt-spot .r-cell-chip { width: 22px; height: 22px; }
.rt-spot .r-cell-chip .r-chip-face { font-size: 8px; }
/* Stack illusion: solid colour discs peeking out under the top chip
   (box-shadow layers — ::before is taken by the body disc) */
.r-cell-chip[data-stack="1"] {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 2.5px 0 -0.5px color-mix(in srgb, var(--cc) 55%, #000),
    0 4px 5px rgba(0, 0, 0, 0.6);
}
.r-cell-chip[data-stack="2"] {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 2.5px 0 -0.5px color-mix(in srgb, var(--cc) 55%, #000),
    0 5px 0 -1px color-mix(in srgb, var(--cc) 38%, #000),
    0 6px 6px rgba(0, 0, 0, 0.6);
}
.r-cell-chip[data-stack="3"] {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 2.5px 0 -0.5px color-mix(in srgb, var(--cc) 55%, #000),
    0 5px 0 -1px color-mix(in srgb, var(--cc) 38%, #000),
    0 7.5px 0 -1.5px color-mix(in srgb, var(--cc) 24%, #000),
    0 8px 7px rgba(0, 0, 0, 0.65);
}

/* ── Action rows v2 (Clear/Undo/Rebet + Set the Wheel) ─────────── */
#roulette-screen.lodge.active .r-action-btns--v2 {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  grid-template-columns: none !important;
}
.r-utility-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.r-utility-row .lodge-action {
  min-height: 38px !important;
  padding: 6px 8px !important;
}
.r-utility-row .lodge-action-label {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
}
.r-utility-row .lodge-action-icon {
  width: 14px !important;
  height: 14px !important;
}
#roulette-screen.lodge.active .r-action-btns--v2 .lodge-action--primary {
  min-height: 50px !important;
}

/* Winning cell pulse on the table after dismissal */
.roulette-cell.result-highlight {
  animation: rCellWin 700ms ease-in-out 3;
  z-index: 3;
}
@keyframes rCellWin {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(243, 220, 142, 0.9); }
  50%      { box-shadow: inset 0 0 0 3px #ffe9a8, 0 0 22px rgba(243, 220, 142, 0.8); }
}

/* ═══════════════════ v2.1 — Light show ═════════════════════════ */

/* Studio light sweep: conic highlight band rotating opposite the
   rotor while spinning. Transform-only on its own composited layer. */
.rw2-sheen {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 744px;
  height: 744px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 246, 215, 0.10) 14deg,
    rgba(255, 252, 240, 0.16) 22deg,
    rgba(255, 246, 215, 0.10) 30deg,
    transparent 46deg,
    transparent 178deg,
    rgba(255, 246, 215, 0.05) 196deg,
    transparent 214deg,
    transparent 360deg);
  will-change: transform;
}
.rw2-stage.rw2-spinning .rw2-sheen {
  opacity: 1;
  animation: rw2SheenSpin 2.7s linear infinite;
}
@keyframes rw2SheenSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Deflector impact flash — one-shot burst at the hit point. */
.rw2-impact-burst {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 250, 225, 0.95) 0%,
    rgba(246, 227, 160, 0.55) 30%,
    transparent 68%);
  animation: rw2ImpactBurst 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes rw2ImpactBurst {
  0%   { transform: scale(0.25); opacity: 1; }
  100% { transform: scale(1.7);  opacity: 0; }
}

/* God-rays from the hub at the result moment. */
.rw2-rays {
  position: absolute;
  left: -120px;
  top: -120px;
  width: 1000px;
  height: 1000px;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 8deg,
    transparent 0deg,
    rgba(246, 227, 160, 0.13) 7deg,
    transparent 14deg,
    transparent 30deg);
  -webkit-mask-image: radial-gradient(circle, black 0%, transparent 62%);
  mask-image: radial-gradient(circle, black 0%, transparent 62%);
  animation: rw2Rays 2s ease-out forwards;
}
@keyframes rw2Rays {
  0%   { transform: scale(0.5) rotate(0deg);  opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: scale(1.15) rotate(18deg); opacity: 0; }
}

/* Sparkles rising around the seated ball. */
.rw2-sparkle {
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
  background: radial-gradient(circle,
    #fffbe8 0%, rgba(246, 227, 160, 0.9) 45%, transparent 75%);
  border-radius: 50%;
  animation: rw2Sparkle var(--sd, 1s) ease-out forwards;
}
@keyframes rw2Sparkle {
  0%   { transform: translateY(0) scale(0.4);            opacity: 0; }
  25%  { transform: translateY(calc(var(--sy) * 0.3)) scale(1.15); opacity: 1; }
  100% { transform: translateY(var(--sy)) scale(0.2);   opacity: 0; }
}

/* ═══════════════════ v2.1 — Photoreal felt table ═══════════════
   Real casino layouts are PAINTED LINES on felt, not solid colored
   boxes. The board becomes: walnut rail → deep-green felt with cloth
   noise → hairline gold borders → serif numbers on red/black pills →
   a gold dolly marker on the winning number. */

/* Walnut rail around the playing field — grain stripes + an inlaid
   gold pinstripe ring (the classic croupier-table detail) */
#roulette-screen .r-table-wrap {
  position: relative;
  background:
    repeating-linear-gradient(100deg,
      rgba(255, 220, 160, 0.05) 0 2px, transparent 2px 5px,
      rgba(0, 0, 0, 0.07) 5px 7px),
    linear-gradient(135deg, #4a3520 0%, #2e1f10 45%, #3c2a16 70%, #1d1208 100%);
  border-radius: 12px;
  padding: 7px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 160, 0.22),
    inset 0 0 0 2.5px rgba(0, 0, 0, 0.35),
    inset 0 0 0 3.5px rgba(222, 188, 110, 0.30),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 226, 160, 0.08);
}
/* Inner shadow where the felt tucks under the rail — the felt reads
   as recessed cloth instead of a flat fill */
#roulette-screen .r-table-wrap::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35),
    inset 3px 0 6px rgba(0, 0, 0, 0.3),
    inset -3px 0 6px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════ v3 — Classic European layout ══════════════
   One grid, white painted lines on felt (lines come from 1px cell
   borders doubling up), red/black number OVALS, pointed zero on the
   left, 2-TO-1 column bets on the right, dozens + outside rows under
   the numbers. The .rt-spot-layer on top carries split / street /
   corner / six-line tap targets positioned by roulette.js. */

#roulette-screen .roulette-board.rt-classic {
  --rt-line: rgba(255, 255, 255, 0.88);
  --r-cell-h: 26px;
  position: relative;
  display: grid !important;
  grid-template-columns: 26px repeat(12, 1fr) 30px;
  grid-template-rows:
    repeat(3, calc(var(--r-cell-h) + 6px))
    calc(var(--r-cell-h) + 2px)
    var(--r-cell-h);
  gap: 0 !important;
  min-width: 0;
  padding: 5px !important;
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.055) 0%, transparent 30%,
      transparent 65%, rgba(0, 0, 0, 0.12) 100%),
    radial-gradient(ellipse 120% 90% at 50% 18%,
      #0f6a40 0%, #0c5634 45%, #084226 80%, #063019 100%);
}

/* Every cell paints its own 1px white line; neighbours double it to
   the classic 2px layout line. No fills — the felt shows through. */
#roulette-screen .rt-classic .roulette-cell {
  background: transparent !important;
  border: 1px solid var(--rt-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  display: grid;
  place-items: center;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0;
  font-style: normal;
  /* Chips overhang these small cells — never clip them */
  overflow: visible !important;
}
/* Kill the lodge enamel top-highlight — felt cells are matte */
#roulette-screen .rt-classic .roulette-cell::before {
  content: none;
}
#roulette-screen .rt-classic .roulette-cell:active {
  background: rgba(255, 255, 255, 0.14) !important;
}
#roulette-screen .rt-classic .roulette-cell .r-cell-label {
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-weight: 700;
  color: #f6f3ea;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  z-index: 1;
  letter-spacing: 0.04em;
}

/* Numbers: red/black ovals filling the cell — the reference look */
#roulette-screen .rt-classic .rt-num .r-cell-label {
  display: grid;
  place-items: center;
  width: 82%;
  height: 76%;
  border-radius: 50%;
  font-size: 13px;
}
#roulette-screen .rt-classic .num-red .r-cell-label {
  background: radial-gradient(ellipse at 38% 30%, #d43340, #9c1620 70%, #7e0f18);
  box-shadow: inset 0 -1.5px 2px rgba(0, 0, 0, 0.35),
              0 1px 2px rgba(0, 0, 0, 0.4);
}
#roulette-screen .rt-classic .num-black .r-cell-label {
  background: radial-gradient(ellipse at 38% 30%, #2e3038, #15161b 70%, #0b0c10);
  box-shadow: inset 0 -1.5px 2px rgba(0, 0, 0, 0.5),
              inset 0 1px 1px rgba(255, 255, 255, 0.10),
              0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Zero: pointed cell — outline drawn by an SVG that follows the clip */
#roulette-screen .rt-classic .rt-zero {
  border: none !important;
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 34% 100%, 0 50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 100' preserveAspectRatio='none'%3E%3Cpath d='M33.2 0.8 H 12 L 1 50 L 12 99.2 H 33.2 Z' fill='none' stroke='rgba(255,255,255,0.88)' stroke-width='1.8'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat !important;
}
#roulette-screen .rt-classic .rt-zero .r-cell-label {
  font-size: 16px;
  font-style: italic;
  color: #eafff3;
  padding-left: 22%;
}

/* "2 TO 1" column bets on the right edge */
#roulette-screen .rt-classic .rt-colbet .r-cell-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #f0ead6;
}

/* Dozens + outside: painted white text on felt */
#roulette-screen .rt-classic .rt-dozen .r-cell-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#roulette-screen .rt-classic .rt-out .r-cell-label {
  font-size: 10px;
  letter-spacing: 0.10em;
}
/* RED / BLACK as solid colour blocks, like the reference */
#roulette-screen .rt-classic .side-red {
  background: linear-gradient(180deg, #c92833, #93141d) !important;
}
#roulette-screen .rt-classic .side-black {
  background: linear-gradient(180deg, #23242b, #0d0e12) !important;
}

/* ── Line-bet spot layer (split / street / corner / six line) ──── */
#roulette-screen .rt-spot-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
/* Spots are pointer-INERT markers: chips render inside them, but tap
   routing is done geometrically by the board's capture handler in
   roulette.js (overlapping hit divs swallowed whole cells on small
   phones). */
#roulette-screen .rt-spot {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;      /* centre the marker on the point */
  border-radius: 50%;
  pointer-events: none;
}
/* Tap feedback flash when the snap handler picks this line */
#roulette-screen .rt-spot.rt-spot-hit::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  animation: rtSpotHit 350ms ease-out forwards;
}
@keyframes rtSpotHit {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Win pulse on every placed bet that covered the result */
#roulette-screen .rt-classic .roulette-cell.rt-won {
  animation: rtWonPulse 700ms ease-in-out 4 !important;
}
/* Zero's clip-path would clip the dolly + glow (clip beats overflow).
   The pointed look is the SVG outline, not the clip — drop the clip
   while the cell presents a result. */
#roulette-screen .rt-classic .rt-zero.result-highlight,
#roulette-screen .rt-classic .rt-zero.rt-won {
  clip-path: none;
}
/* lodge.css gives .result-highlight z-index:5, which would float the
   winning cell ABOVE the spot layer (4) until the next spin — taps on
   adjacent split/corner spots would land as straight bets. Keep the
   highlighted cell under the spots. */
#roulette-screen .rt-classic .roulette-cell.result-highlight {
  z-index: 3;
}
#roulette-screen .rt-spot.rt-won::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 2px solid rgba(255, 224, 130, 0.95);
  box-shadow: 0 0 12px rgba(246, 227, 160, 0.8),
              inset 0 0 6px rgba(246, 227, 160, 0.5);
  animation: rtWonPulse 700ms ease-in-out 4;
}
@keyframes rtWonPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 227, 160, 0); }
  50%      { box-shadow: 0 0 14px 3px rgba(246, 227, 160, 0.65); }
}

/* Winning number: the DOLLY — gold marker dropped on the cell */
#roulette-screen .roulette-cell.result-highlight {
  animation: rDollyGlow 900ms ease-in-out 3 !important;
}
#roulette-screen .roulette-cell.result-highlight::after {
  content: '';
  position: absolute;
  top: -7px;
  right: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%,
      #fdf2c0 0%, #d9b75a 45%, #8a6a1f 100%);
  border: 1.5px solid rgba(255, 244, 200, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7),
              0 0 12px rgba(246, 227, 160, 0.8);
  animation: rDollyDrop 420ms cubic-bezier(0.22, 1.6, 0.36, 1);
  z-index: 5;
}
@keyframes rDollyDrop {
  from { transform: translateY(-14px) scale(1.5); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}
@keyframes rDollyGlow {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(246, 227, 160, 0.85); }
  50%      { box-shadow: inset 0 0 0 2px #ffe9a8,
                         0 0 20px rgba(246, 227, 160, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .rw2-banner,
  .rw2-pocket.rw2-pocket-win,
  .rw2-stage.rw2-shake,
  .r-wheel-result,
  .r-cell-chip,
  .rw2-sheen,
  .rw2-impact-burst,
  .rw2-rays,
  .rw2-sparkle,
  .roulette-cell.result-highlight,
  .roulette-cell.result-highlight::after { animation: none; }
  .rw2-stage.rw2-spinning .rw2-sheen { opacity: 0; }
}