/* ═══════════════════════════════════════════════════════════════════
   MP Roulette — «La Table Commune» · the MULTIPLAYER DELTAS only.

   THE STANDARD (owner): the MP roulette screen must render IDENTICALLY to
   single-player roulette. To that end #mp-roulette-table-screen now builds
   the prototype's DOM vocabulary and REUSES roulette-wheel.css, which is
   rescoped to :is(#roulette-screen, #mp-roulette-table-screen) — so the
   fixed full-bleed stage, the room + wheel, the felt, the chips, the
   control row, the racetrack, the stats and the result card all come from
   the prototype skin and measure the same at 375×812.

   This file therefore holds ONLY the genuinely-multiplayer additions the
   prototype has no equivalent for:
     · the betting-window countdown (server round)
     · the Lightning cards / bolts / strike
     · the winner ticker
     · the collapsible bet drawer (closed by default)
     · the staged-vs-confirmed chip distinction
   Everything else is deliberately absent here: it lives in the shared
   prototype stylesheet so the two screens cannot drift.

   Load order: after roulette-wheel.css, so these deltas layer on top of the
   prototype skin. The old flex-column stage, the vertical felt, the avatar
   rail and the below-the-fold bet lists were removed with the rebuild — the
   screen is the prototype's stage now, not a scrolling column.
   ═══════════════════════════════════════════════════════════════════ */

#mp-roulette-table-screen .mpr-root {
  /* The stage geometry (position:fixed, inset:0, overflow:hidden) is owned
     by the rescoped prototype rule. The root just fills it. */
  position: absolute;
  inset: 0;
  --mpr-gold:    #e8c15a;
  --mpr-gold-hi: #ffe9a8;
  --mpr-loss:    #d0576a;
}

/* ── betting-window countdown (server round) ─────────────────────────
   A slim pill under the history strip, always visible so the round reads
   even with the bet drawer shut. It displaces nothing of the prototype —
   absolutely positioned, pointer-transparent. */
/* Just text — no box (owner). The phase word over the seconds, centred, with
   a soft shadow so it reads over the wheel without a panel behind it. */
#mp-roulette-table-screen .mpr-window {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(var(--fym-safe-top, env(safe-area-inset-top, 0px)) + 118px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75));
}
/* The progress bar is gone — "bare tekst". renderClock's fill writes are guarded. */
#mp-roulette-table-screen .mpr-window-bar { display: none; }

/* The 3-2-1 before the spin — bigger, per-number colour (gold → orange → red)
   and a punchy pop that HOLDS until the next number replaces it (the shared
   prototype pop faded out mid-second, leaving a blank gap). MP-scoped so
   single-player keeps its own. Driven locally by runSpinCountdown. */
#mp-roulette-table-screen .r3d-countdown {
  font-size: 168px;
  top: 42%;
  font-weight: 800;
}
#mp-roulette-table-screen .r3d-countdown.on {
  animation: mpr-cd-pop 560ms cubic-bezier(0.18, 1.5, 0.4, 1) forwards;
}
#mp-roulette-table-screen .r3d-countdown[data-n="3"] {
  color: var(--mpr-gold-hi);
  text-shadow: 0 0 46px rgba(246, 201, 76, 0.7), 0 6px 22px rgba(0, 0, 0, 0.9);
}
#mp-roulette-table-screen .r3d-countdown[data-n="2"] {
  color: #ffb24a;
  text-shadow: 0 0 46px rgba(255, 150, 60, 0.7), 0 6px 22px rgba(0, 0, 0, 0.9);
}
#mp-roulette-table-screen .r3d-countdown[data-n="1"] {
  color: #ff5a6e;
  text-shadow: 0 0 52px rgba(255, 70, 100, 0.8), 0 6px 22px rgba(0, 0, 0, 0.9);
}
@keyframes mpr-cd-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.3) rotate(-7deg); }
  32%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
#mp-roulette-table-screen .mpr-window-phase {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--mpr-gold);
}
#mp-roulette-table-screen .mpr-window-digits {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--mpr-gold-hi);
  text-shadow: 0 0 14px rgba(240, 201, 76, 0.35);
}
#mp-roulette-table-screen .mpr-window-bar {
  width: 72px;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(216, 193, 134, 0.16);
}
#mp-roulette-table-screen .mpr-window-fill {
  height: 100%;
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg,
              color-mix(in oklab, var(--mpr-gold) 55%, transparent), var(--mpr-gold));
  transition: transform 250ms linear;
}
/* A round boundary refills the bar in one jump — no reverse drain. */
#mp-roulette-table-screen .mpr-window.is-refilling .mpr-window-fill { transition: none; }
#mp-roulette-table-screen .mpr-window.is-armed {
  box-shadow: 0 0 8px color-mix(in oklab, var(--mpr-gold) 26%, transparent);
}
/* From 10s down — red urgency (owner's ask): colour only, no pulse/beep. */
#mp-roulette-table-screen .mpr-root.is-urgent .mpr-window-fill { background: var(--mpr-loss); }
#mp-roulette-table-screen .mpr-root.is-urgent .mpr-window-digits { color: var(--mpr-loss); }
#mp-roulette-table-screen .mpr-root.is-urgent .mpr-window-phase { color: var(--mpr-loss); }
/* Last five seconds — the prototype's danger register, the digits also pulse. */
#mp-roulette-table-screen .mpr-root.is-last5 .mpr-window-fill { background: var(--mpr-loss); }
#mp-roulette-table-screen .mpr-root.is-last5 .mpr-window-digits {
  color: var(--mpr-loss);
  animation: mpr-pulse 1s ease-in-out infinite;
}
#mp-roulette-table-screen .mpr-root.is-last5 .mpr-window-phase { color: var(--mpr-loss); }
@keyframes mpr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Staged chips — the prototype's gold stake pill, dashed so "not yet sent"
   reads against the solid confirmed pill. */
#mp-roulette-table-screen .r-stake.mpr-staged {
  border-style: dashed;
  filter: saturate(0.85) brightness(0.95);
}

/* ── Lightning Roulette — cards, bolts, strike ───────────────────────
   The bolt canvas rides over the room; the cards hang IN FRONT of the wheel
   during the strike, then settle to a slim ribbon while the ball spins and
   the lucky pockets glow. Self-contained; reduced-motion aware. */
#mp-roulette-table-screen .mpr-lightning {
  position: absolute;
  inset: 0;
  z-index: 3;                 /* over the room/wheel, under the betov/HUD */
  pointer-events: none;
  overflow: hidden;
}
/* The bolt canvas rides inside .mpr-lightning (z3, over the wheel); a full-
   bleed flash over it. The storm canvas is a SEPARATE root child at z-index 0,
   BEHIND the wheel/table (z1) — so the rain falls behind the table, not over
   it (owner's ask). Both canvases are inert. */
#mp-roulette-table-screen .mpr-storm-canvas,
#mp-roulette-table-screen .mpr-bolt-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#mp-roulette-table-screen .mpr-storm-canvas { z-index: 0; }  /* behind the wheel */
#mp-roulette-table-screen .mpr-bolt-canvas { z-index: 1; }
#mp-roulette-table-screen .mpr-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(120% 90% at 50% 20%,
              rgba(220, 232, 255, 0.85), rgba(200, 214, 255, 0));
  opacity: 0;
  pointer-events: none;
}
#mp-roulette-table-screen .mpr-flash.on { animation: mpr-flash 240ms ease-out; }
@keyframes mpr-flash { 0% { opacity: var(--mpr-flash-a, 0.9); } 100% { opacity: 0; } }

/* While the lucky cards own the top of the screen, suppress the
   RIEN NE VA PLUS banner so its text can never sit over the numbers.
   Beats the banner's own .on animation (important author > animation). */
#mp-roulette-table-screen .mpr-root.is-lightning .r3d-banner,
#roulette-screen .mpr-root.is-lightning .r3d-banner {
  opacity: 0 !important;
  visibility: hidden;
}

#mp-roulette-table-screen .mpr-cards {
  position: absolute;
  z-index: 6;                 /* in front of the wheel, under the sheet */
  top: calc(var(--fym-safe-top, env(safe-area-inset-top, 0px)) + 132px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: 0 12px;
  pointer-events: none;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), opacity 520ms ease;
}
/* Big during the roll-down/lock; then MINIMIZED to a small strip lifted to the
   very top, out of the way of the wheel, countdown and result, but held on
   screen the whole spin + result so the lucky numbers stay readable (owner:
   minimise the symbols and place them so they don't block other info). */
/* All the move is in the transform (translate + scale) so the settle animates
   as one smooth slide-and-shrink to the top-right — putting the right-alignment
   in justify-content would snap (only `transform` transitions). */
/* MINIMIZED, BUT STILL READABLE. Scaling the ornate lantern down was the wrong
   tool: at 0.36 the numeral rendered ~12px and the multiplier ~5px, so the
   overview the owner wants during the spin read as "gone". Instead the settle
   COLLAPSES each lantern into a compact badge — colour chip + number + ×mult —
   stacked in the top-right gutter, which is clear of the centred header and
   countdown at every width, and stays up for the whole spin and result. */
#mp-roulette-table-screen .mpr-cards.is-settled {
  /* BELOW the header band, hard right. Sitting beside the centred LA TABLE pill
     worked at 375+ but collided at 320, where the pill is relatively wider;
     dropping under it is clear at every width and still clear of the centred
     countdown text, which never reaches the right gutter. */
  top: calc(var(--fym-safe-top, env(safe-area-inset-top, 0px)) + 86px);
  left: auto;
  right: 10px;
  transform: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 0;
}
/* the ornament goes — chain and pendant are for the big reveal only */
#mp-roulette-table-screen .mpr-cards.is-settled .mpr-card-chain,
#mp-roulette-table-screen .mpr-cards.is-settled .mpr-card-pendant { display: none; }
#mp-roulette-table-screen .mpr-cards.is-settled .mpr-card {
  width: auto;
  animation: none;
  opacity: 1;
  transform: none;
}
#mp-roulette-table-screen .mpr-cards.is-settled .mpr-card-frame {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: auto;
  padding: 2px 6px;
  border-radius: 7px;
  border-width: 1px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
/* the filigree corners are noise at badge size */
#mp-roulette-table-screen .mpr-cards.is-settled .mpr-card-frame::before,
#mp-roulette-table-screen .mpr-cards.is-settled .mpr-card-frame::after { display: none; }
#mp-roulette-table-screen .mpr-cards.is-settled .mpr-card-panel {
  padding: 1px 6px;
  min-width: 24px;
  text-align: center;
  border-radius: 5px;
}
#mp-roulette-table-screen .mpr-cards.is-settled .mpr-card-num {
  font-size: 15px;          /* legible — the whole point of keeping them up */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
#mp-roulette-table-screen .mpr-cards.is-settled .mpr-card-plate {
  margin-top: 0;
  width: auto;
  min-height: 0;
  padding: 1px 5px;
  border-radius: 4px;
}
#mp-roulette-table-screen .mpr-cards.is-settled .mpr-card-mult { font-size: 10px; }

/* THE ORNATE LANTERN — every card the SAME size (the boost shows in the
   multiplier and the lightning, not a bigger box), the pocket COLOUR carried
   on the panel background, the numeral light. Hung from a chain, a gold
   filigree frame, a multiplier plate, a diamond pendant below. */
#mp-roulette-table-screen .mpr-card {
  position: relative;
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(-14px) scale(0.9);
  animation: mpr-card-in 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--mpr-card-delay, 0ms);
}
@keyframes mpr-card-in {
  0%   { opacity: 0; transform: translateY(-14px) scale(0.9); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* the hanging chain */
#mp-roulette-table-screen .mpr-card-chain {
  width: 2px;
  height: 14px;
  background: repeating-linear-gradient(180deg,
              var(--mpr-gold-hi) 0 3px, transparent 3px 5px);
  opacity: 0.85;
}
/* the gold frame — double border + corner filigree via inset shadows */
#mp-roulette-table-screen .mpr-card-frame {
  position: relative;
  width: 100%;
  padding: 7px 6px 6px;
  border-radius: 8px;
  background: linear-gradient(160deg, #6a5220, #2c2008);
  border: 1.5px solid var(--mpr-gold);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.6),
    inset 0 0 0 2.5px rgba(20, 14, 4, 0.9),
    inset 0 0 0 3.5px rgba(246, 201, 76, 0.55);
}
#mp-roulette-table-screen .mpr-card-frame::before,
#mp-roulette-table-screen .mpr-card-frame::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border: 1.5px solid var(--mpr-gold-hi);
  opacity: 0.8;
}
#mp-roulette-table-screen .mpr-card-frame::before {
  top: 3px; left: 3px; border-right: 0; border-bottom: 0;
}
#mp-roulette-table-screen .mpr-card-frame::after {
  bottom: 30px; right: 3px; border-left: 0; border-top: 0;
}
/* THE COLOURED PANEL — red / black / green after the pocket, numeral light */
#mp-roulette-table-screen .mpr-card-panel {
  border-radius: 4px;
  padding: 12px 4px 14px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: background 120ms linear;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(180deg, #b02234, #7c1424);   /* red default */
}
#mp-roulette-table-screen .mpr-card.is-black .mpr-card-panel {
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(180deg, #2a2a2e, #121214);
}
#mp-roulette-table-screen .mpr-card.is-green .mpr-card-panel {
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(180deg, #187a46, #0d5330);
}
#mp-roulette-table-screen .mpr-card-num {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: #f6f1e6;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
}
/* while rolling, a faint gold shimmer says "searching" */
#mp-roulette-table-screen .mpr-card.is-rolling .mpr-card-frame {
  box-shadow:
    0 8px 22px rgba(246, 201, 76, 0.35),
    inset 0 0 0 2.5px rgba(20, 14, 4, 0.9),
    inset 0 0 0 3.5px rgba(255, 236, 170, 0.8);
}
/* the brutal stop — a shake at the lock */
#mp-roulette-table-screen .mpr-card.is-locked {
  animation: mpr-card-shake 360ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes mpr-card-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-3px, 1px) rotate(-1.4deg); }
  30% { transform: translate(3px, -1px) rotate(1.4deg); }
  45% { transform: translate(-2px, 1px) rotate(-0.9deg); }
  60% { transform: translate(2px, 0) rotate(0.7deg); }
  80% { transform: translate(-1px, 0) rotate(-0.3deg); }
}
#mp-roulette-table-screen .mpr-card-plate {
  margin-top: 6px;
  width: 78%;
  padding: 2px 0;
  border-radius: 4px;
  border: 1px solid rgba(20, 14, 4, 0.6);
  background: linear-gradient(180deg, var(--mpr-gold-hi), #a07830);
  min-height: 15px;
  text-align: center;
}
#mp-roulette-table-screen .mpr-card-mult {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1a1409;
}
/* the diamond pendant */
#mp-roulette-table-screen .mpr-card-pendant {
  width: 10px; height: 10px;
  margin-top: 4px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--mpr-gold-hi), #9a7228);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ── winner ticker ───────────────────────────────────────────────────
   Small English "<name> won X $FYM (200x)" lines at round end, floating
   above the collapsed bet drawer. */
#mp-roulette-table-screen .mpr-feed {
  position: absolute;
  z-index: 6;
  left: 10px;
  right: 10px;
  bottom: calc(var(--fym-safe-bottom, env(safe-area-inset-bottom, 0px)) + 58px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
#mp-roulette-table-screen .mpr-feed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(10, 14, 10, 0.86);
  border: 1px solid rgba(222, 188, 110, 0.38);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
#mp-roulette-table-screen .mpr-feed-row.is-in { opacity: 1; transform: none; }
#mp-roulette-table-screen .mpr-feed-row.is-me { border-color: var(--mpr-gold); }
#mp-roulette-table-screen .mpr-feed-row.is-summary { justify-content: center; font-size: 12px; color: #cbb78a; }
#mp-roulette-table-screen .mpr-feed-av {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(222, 188, 110, 0.5);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #efe3c2;
}
#mp-roulette-table-screen .mpr-feed-name { flex: 0 0 auto; font-size: 12px; color: #efe3c2; }
#mp-roulette-table-screen .mpr-feed-won  { font-size: 12px; color: #9c8c62; }
#mp-roulette-table-screen .mpr-feed-amt  { flex: 0 0 auto; color: var(--mpr-gold); font-size: 13px; font-weight: 700; }
#mp-roulette-table-screen .mpr-feed-mult {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mpr-gold-hi), #a07830);
  color: #1a1409;
  font-size: 11px;
  font-weight: 800;
}

/* ── collapsible bet drawer (CLOSED by default) ──────────────────────
   The prototype's bottom sheet (.r3d-betov) is a drawer here: closed by
   default so the wheel + lightning read first, opened by the one toggle.
   The prototype's own transform-transition slides it. */
#mp-roulette-table-screen .mpr-root:not(.is-bets-open) .r3d-betov {
  transform: translateY(112%);
  opacity: 0;
  pointer-events: none;
}
#mp-roulette-table-screen .mpr-bets-toggle {
  position: absolute;
  z-index: 8;
  left: 12px;
  right: 12px;
  bottom: calc(var(--fym-safe-bottom, env(safe-area-inset-bottom, 0px)) + 10px);
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(222, 188, 110, 0.55);
  background: rgba(10, 14, 10, 0.9);
  color: #efe3c2;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* OPEN, the bottom pill (which OPENS the drawer) hides — closing is handled by
   the .mpr-bet-close bar that rides the sheet's own top edge, so the close
   affordance can never be measured off-screen (the old floating-handle bug). */
#mp-roulette-table-screen .mpr-root.is-bets-open .mpr-bets-toggle { display: none; }

/* The sheet is capped to the viewport and scrolls internally, so on a short or
   landscape screen it can never grow taller than the stage and push its own top
   (and the close bar) up under the overflow:hidden clip. */
#mp-roulette-table-screen .r3d-betov {
  max-height: calc(100% - var(--fym-safe-top, env(safe-area-inset-top, 0px)) - 6px);
  overflow: hidden auto;
}
/* The in-sheet close bar — first child of .r3d-betov and STICKY at the sheet's
   top, so it always rides the visible top edge (even when the sheet scrolls)
   and can never be measured or clipped off-screen. Big, obvious, ≥44px. */
#mp-roulette-table-screen .mpr-bet-close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  margin: -2px 0 4px;
  padding: 6px 0 4px;
  min-height: 44px;
  border: 0;
  background: linear-gradient(180deg, rgba(24, 17, 8, 0.98), rgba(24, 17, 8, 0.82));
  color: var(--mpr-gold);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#mp-roulette-table-screen .mpr-bet-grab {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(232, 193, 90, 0.7);
}
#mp-roulette-table-screen .mpr-bet-close-label { opacity: 0.9; }
#mp-roulette-table-screen .mpr-bet-close:active .mpr-bet-grab { background: var(--mpr-gold-hi); }
#mp-roulette-table-screen .mpr-bets-toggle-chev {
  color: var(--mpr-gold);
  font-size: 11px;
}
#mp-roulette-table-screen .mpr-bets-toggle-label { flex: 0 0 auto; }
#mp-roulette-table-screen .mpr-bets-toggle-sum {
  flex: 1 1 auto;
  text-align: right;
  color: var(--mpr-gold);
  font-weight: 700;
}

/* REPEAT pulse when a previous set can be repeated at a new betting phase. */
#mp-roulette-table-screen .mpr-rebet.is-pulse { animation: mpr-rebet 400ms ease-out; }
@keyframes mpr-rebet { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Lucky NUMBER marker on the felt cell — a lightning VIOLET outline, distinct
   from the gold winner ring, plus a corner ×N badge. Persists through the spin,
   cleared next round. Only armed after betting closes (never leaks the set). */
#mp-roulette-table-screen .rt-classic .roulette-cell.rt-lucky,
#mp-roulette-table-screen .rt-spot.rt-lucky {
  position: relative;
  border-radius: 3px;
  z-index: 2;
  box-shadow: 0 0 0 2px #b98bff, 0 0 12px 2px rgba(140, 120, 255, 0.7),
              inset 0 0 10px rgba(180, 150, 255, 0.35);
  animation: mpr-lucky-pulse 1.1s ease-in-out infinite;
}
@keyframes mpr-lucky-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #b98bff, 0 0 10px 1px rgba(140,120,255,0.55), inset 0 0 8px rgba(180,150,255,0.3); }
  50%      { box-shadow: 0 0 0 2.5px #d9c2ff, 0 0 18px 4px rgba(160,140,255,0.85), inset 0 0 12px rgba(200,170,255,0.45); }
}
#mp-roulette-table-screen .rt-lucky-badge {
  position: absolute;
  top: -7px; right: -6px;
  z-index: 3;
  min-width: 16px; height: 15px;
  padding: 0 4px;
  line-height: 15px;
  text-align: center;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--mpr-gold-hi), #a07830);
  color: #1a1409;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Result card's own multiplier badge — a 100x hit reads as 100x on the card. */
#mp-roulette-table-screen .r3d-res-mult {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mpr-gold-hi), #a07830);
  color: #1a1409;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 800;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* "Bets placed" confirmation — a green pop on the CTA after a successful POST,
   before it reverts to the disabled PLACER (owner: want a confirmation). */
#mp-roulette-table-screen .mpr-cta.is-placed {
  background: linear-gradient(180deg, #2fae67, #16794a) !important;
  color: #f2fff4 !important;
  border-color: rgba(120, 240, 170, 0.7) !important;
  opacity: 1 !important;
  animation: mpr-placed-pop 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mpr-placed-pop { 0% { transform: scale(0.94); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  #mp-roulette-table-screen .mpr-window-fill { transition: none; }
  #mp-roulette-table-screen .mpr-root.is-last5 .mpr-window-digits { animation: none; }
  #mp-roulette-table-screen .mpr-card { animation: none; opacity: 1; transform: none; }
  #mp-roulette-table-screen .mpr-card.is-locked { animation: none; }
  #mp-roulette-table-screen .mpr-cards { transition: none; }
  #mp-roulette-table-screen .mpr-flash { display: none; }
  #mp-roulette-table-screen .roulette-cell.rt-lucky,
  #mp-roulette-table-screen .rt-spot.rt-lucky { animation: none; }
  #mp-roulette-table-screen .mpr-cta.is-placed { animation: none; }
  /* The MP countdown pop has the same specificity as the prototype's
     reduced-motion suppression and loads after it, so it must re-suppress
     here or reduced-motion users would still see the scale+rotate pop. */
  #mp-roulette-table-screen .r3d-countdown.on { animation: none; opacity: 1; }
}