/* Roulette: the wheel over a felt table. Its own palette, like every game: casino green and gold. */

.rt-board {
  --felt: #0c4632;
  --felt-deep: #062a1d;
  --felt-line: rgb(255 255 255 / 0.2);
  --red: #c4172f;
  --black: #151b27;
  --green: #0f8a4f;
  --gold: #ffe08a;
  container: rtboard / inline-size;
  display: grid;
  gap: 20px;
  min-height: 560px;
  padding: 22px clamp(12px, 2.5vw, 28px) 24px;
  background:
    radial-gradient(620px 360px at 50% 18%, rgb(34 224 143 / 0.08), transparent 70%),
    var(--bg-0);
}

/* ---------- Wheel and last results ---------- */

.rt-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}
.rt-wheel {
  grid-column: 2;
  position: relative;
  width: clamp(220px, 42cqw, 340px);
  aspect-ratio: 1;
}
.rt-wheel::before {
  /* The table's light pooling under the wheel. */
  content: "";
  position: absolute;
  inset: 8% -6% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 197 61 / 0.12), transparent);
  filter: blur(8px);
}
.rt-wheel__canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 28px 60px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.04);
}
.rt-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 25%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  color: #fff;
  font: 900 clamp(20px, 5cqw, 30px) / 1 var(--font-display);
  text-shadow: 0 2px 6px rgb(0 0 0 / 0.45);
  box-shadow: 0 0 0 3px rgb(255 241 193 / 0.95), 0 0 0 6px rgb(0 0 0 / 0.35), 0 12px 30px rgb(0 0 0 / 0.55);
  pointer-events: none;
}
.rt-badge[hidden] { display: none; }
.rt-badge.is-red { background: radial-gradient(circle at 35% 30%, #ff6072, var(--red) 58%, #7a0b1c); }
.rt-badge.is-black { background: radial-gradient(circle at 35% 30%, #3b465c, var(--black) 58%, #07090e); }
.rt-badge.is-green { background: radial-gradient(circle at 35% 30%, #3fe39a, var(--green) 58%, #05472b); }
.rt-badge.is-in { animation: rt-badge-in 560ms var(--ease-spring); }
@keyframes rt-badge-in { from { opacity: 0; scale: 0.3; rotate: -40deg; } }

.rt-side { grid-column: 3; justify-self: start; display: grid; gap: 8px; }
.rt-side__label { color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rt-history {
  display: grid;
  grid-template-columns: repeat(2, 32px);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rt-history:empty::before { content: "—"; color: var(--text-3); }
.rt-history__item {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 8px;
  color: #fff;
  font: 800 12px / 1 var(--font-display);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.rt-history__item.is-red { background: var(--red); }
.rt-history__item.is-black { background: #222a39; }
.rt-history__item.is-green { background: var(--green); }
.rt-history__item:first-child { outline: 2px solid rgb(255 224 138 / 0.85); outline-offset: 1px; }
.rt-history__item.is-new { animation: rt-history-in 460ms var(--ease-spring); }
@keyframes rt-history-in { from { opacity: 0; scale: 0.4; } }

@container rtboard (max-width: 640px) {
  .rt-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
  .rt-wheel { grid-column: 1; width: min(78cqw, 300px); }
  .rt-side { grid-column: 1; justify-self: stretch; justify-items: center; }
  .rt-history { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 26px; }
  .rt-history__item { height: 26px; font-size: 11px; }
}

/* ---------- Round status ---------- */

.rt-status {
  display: grid;
  gap: 8px;
  width: min(100%, 560px);
  justify-self: center;
  padding: 10px 14px 12px;
  border-radius: 14px;
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 300ms, background-color 300ms;
}
.rt-status__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rt-status__text { font: 800 15px / 1.2 var(--font-display); letter-spacing: -0.01em; }
.rt-status__time { color: var(--text-2); font-size: 13px; font-weight: 700; }
.rt-status__bar { display: block; height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.rt-status__bar span {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, #22e08f, #ffe08a);
  transition: width 220ms linear;
}
.rt-status[data-phase="betting"] .rt-status__text { color: #3ff0a2; }
.rt-status[data-phase="spinning"] { box-shadow: inset 0 0 0 1px rgb(255 224 138 / 0.5), 0 0 24px rgb(255 197 61 / 0.12); }
.rt-status[data-phase="spinning"] .rt-status__text { color: var(--gold); }
.rt-status[data-phase="result"] .rt-status__text { color: var(--text); }

/* ---------- The table ---------- */

.rt-table-wrap { container: rt / inline-size; }
.rt-felt {
  position: relative;
  padding: 14px;
  border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 0%, #136045, var(--felt) 45%, var(--felt-deep));
  box-shadow:
    inset 0 0 0 2px rgb(255 214 120 / 0.38),
    inset 0 0 0 7px rgb(0 0 0 / 0.22),
    inset 0 0 60px rgb(0 0 0 / 0.45),
    0 20px 40px rgb(0 0 0 / 0.35);
}
.rt-felt::before {
  /* A woven texture so the felt is not a flat colour. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.018) 0 2px, transparent 2px 5px);
  pointer-events: none;
}
.rt-table {
  --cell-h: clamp(38px, 7.2cqw, 58px);
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr repeat(12, minmax(0, 1fr)) 1.15fr;
  grid-template-rows: repeat(3, var(--cell-h)) repeat(2, calc(var(--cell-h) * 0.82));
  gap: 3px;
}
.rt-cell {
  grid-column: var(--hc) / span var(--hcs, 1);
  grid-row: var(--hr) / span var(--hrs, 1);
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: #fff;
  font: 800 clamp(12px, 2.3cqw, 16px) / 1 var(--font-display);
  cursor: pointer;
  transition: filter 140ms, box-shadow 160ms, scale 160ms var(--ease-out);
}
.rt-cell--number { box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.12); }
.rt-cell--number.is-red { background: linear-gradient(180deg, #dc2a43, var(--red)); }
.rt-cell--number.is-black { background: linear-gradient(180deg, #273042, var(--black)); }
.rt-cell--number.is-green { background: linear-gradient(180deg, #19b86d, var(--green)); border-radius: 14px 7px 7px 14px; font-size: clamp(14px, 2.8cqw, 20px); }
.rt-cell--outside {
  background: rgb(255 255 255 / 0.035);
  box-shadow: inset 0 0 0 1px var(--felt-line);
  color: rgb(255 255 255 / 0.92);
  font: 750 clamp(11px, 1.9cqw, 13.5px) / 1 var(--font-ui);
  letter-spacing: 0.02em;
}
.rt-cell__diamond {
  width: clamp(20px, 4cqw, 30px);
  height: clamp(13px, 2.5cqw, 18px);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.rt-cell--color.is-red .rt-cell__diamond { background: linear-gradient(180deg, #ff4a60, var(--red)); }
.rt-cell--color.is-black .rt-cell__diamond { position: relative; background: rgb(255 255 255 / 0.55); }
.rt-cell--color.is-black .rt-cell__diamond::after {
  content: "";
  position: absolute;
  inset: 1.5px 2.5px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(180deg, #3a4458, #07090e);
}
.rt-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (hover: hover) {
  .rt-cell:hover { filter: brightness(1.15); }
}
.rt-cell.is-covered { filter: brightness(1.2); box-shadow: 0 0 0 2px rgb(255 224 138 / 0.85), inset 0 -3px 0 rgb(0 0 0 / 0.2); }
.rt-cell--outside.is-covered { background: rgb(255 224 138 / 0.12); }
.rt-cell.is-hit {
  z-index: 1;
  box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgb(255 214 120 / 0.85);
  animation: rt-hit 1.2s var(--ease-in-out) infinite alternate;
}
@keyframes rt-hit { to { box-shadow: 0 0 0 3px #fff6d8, 0 0 36px rgb(255 214 120 / 1); scale: 1.05; } }
.rt-board.is-locked .rt-cell, .rt-board.is-locked .rt-spot { cursor: default; }
.rt-board.is-locked .rt-cell:hover { filter: none; }

/* Down the screen on narrow boards: outside bets and dozens to the left, numbers in three columns. */
@container rt (max-width: 560px) {
  .rt-table {
    --row: clamp(30px, 9cqw, 42px);
    grid-template-columns: 0.85fr 0.85fr repeat(3, 1.25fr);
    grid-template-rows: calc(var(--row) * 1.15) repeat(12, var(--row)) var(--row);
  }
  .rt-cell {
    grid-column: var(--vc) / span var(--vcs, 1);
    grid-row: var(--vr) / span var(--vrs, 1);
  }
  .rt-cell--number.is-green { border-radius: 14px 14px 7px 7px; }
  .rt-cell--tall .rt-cell__text { writing-mode: vertical-rl; rotate: 180deg; }
  .rt-cell--tall .rt-cell__diamond { rotate: 90deg; }
}

/* ---------- Hit areas on lines and crossings ---------- */

.rt-spots, .rt-chips { position: absolute; inset: 14px; pointer-events: none; }
.rt-spot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 2;
  width: var(--spot, 18px);
  height: var(--spot, 18px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  translate: -50% -50%;
  pointer-events: auto;
  cursor: pointer;
}
.rt-spot::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: rgb(255 241 193 / 0);
  transition: background-color 120ms, box-shadow 120ms, scale 160ms var(--ease-spring);
}
@media (hover: hover) {
  .rt-board:not(.is-locked) .rt-spot:hover::after {
    background: rgb(255 241 193 / 0.95);
    box-shadow: 0 0 12px rgb(255 214 120 / 0.9);
    scale: 1.2;
  }
}

/* ---------- Chips ---------- */

.rt-chip, .rt-rack__chip {
  --chip-bg: #5b6b86;
  --chip-edge: #e6ecf6;
  --chip-ink: #fff;
  background:
    radial-gradient(circle, var(--chip-bg) 0 55%, transparent 56%),
    repeating-conic-gradient(var(--chip-edge) 0 18deg, var(--chip-bg) 18deg 45deg);
}
[data-tone="slate"] { --chip-bg: #56657f; --chip-edge: #e6ecf6; --chip-ink: #fff; }
[data-tone="ivory"] { --chip-bg: #efe6cf; --chip-edge: #b3222f; --chip-ink: #3b2a10; }
[data-tone="ruby"] { --chip-bg: #c4172f; --chip-edge: #fff4f0; --chip-ink: #fff; }
[data-tone="jade"] { --chip-bg: #0f8a55; --chip-edge: #f1fff7; --chip-ink: #fff; }
[data-tone="onyx"] { --chip-bg: #131925; --chip-edge: #f2c14e; --chip-ink: #f7d57a; }
[data-tone="violet"] { --chip-bg: #6a3fd0; --chip-edge: #f7f1ff; --chip-ink: #fff; }

.rt-chip {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--chip, 28px);
  height: var(--chip, 28px);
  border-radius: 50%;
  translate: -50% -50%;
  color: var(--chip-ink);
  box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.25), 0 3px 6px rgb(0 0 0 / 0.5);
  transition: opacity 260ms, scale 260ms var(--ease-out), box-shadow 260ms;
}
.rt-chip::before {
  content: "";
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--chip-ink) 55%, transparent);
}
.rt-chip.is-stack {
  box-shadow:
    inset 0 0 0 1.5px rgb(0 0 0 / 0.25),
    0 2px 0 -1px color-mix(in srgb, var(--chip-bg) 65%, black),
    0 4px 0 -2px color-mix(in srgb, var(--chip-edge) 60%, black),
    0 6px 0 -3px color-mix(in srgb, var(--chip-bg) 55%, black),
    0 8px 10px rgb(0 0 0 / 0.45);
}
.rt-chip__value {
  position: relative;
  font: 800 calc(var(--chip, 28px) * 0.33) / 1 var(--font-ui);
  letter-spacing: -0.02em;
}
.rt-chip.is-dropped { animation: rt-chip-drop 380ms var(--ease-spring); }
@keyframes rt-chip-drop {
  from { transform: translateY(-14px) scale(1.5); opacity: 0; }
  60% { transform: translateY(1px) scale(0.96); opacity: 1; }
}
.rt-chip.is-leaving { animation: rt-chip-out 280ms var(--ease-in-out) forwards; }
@keyframes rt-chip-out { to { transform: translateY(-10px) scale(0.5); opacity: 0; } }
.rt-chip.is-lost { opacity: 0.35; scale: 0.86; }
.rt-chip.is-win {
  z-index: 4;
  box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgb(255 214 120 / 0.9), 0 3px 6px rgb(0 0 0 / 0.5);
  animation: rt-chip-win 900ms var(--ease-spring);
}
@keyframes rt-chip-win { 30% { transform: translateY(-8px) scale(1.25); } }
.rt-chip__gain {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  translate: -50% 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgb(4 30 20 / 0.85);
  color: #3ff0a2;
  font: 900 12px / 1.2 var(--font-ui);
  white-space: nowrap;
  animation: rt-gain 2.4s var(--ease-out) forwards;
}
@keyframes rt-gain {
  from { opacity: 0; transform: translateY(8px) scale(0.8); }
  15% { opacity: 1; transform: translateY(0) scale(1.05); }
  25% { transform: scale(1); }
  80% { opacity: 1; }
  to { opacity: 0; transform: translateY(-10px); }
}

/* Chips of a bet already placed this round: set, with a gold rim. */
.rt-chips.is-confirmed .rt-chip { box-shadow: 0 0 0 2px rgb(255 224 138 / 0.9), 0 3px 6px rgb(0 0 0 / 0.5); }
.rt-chip.is-confirming { animation: rt-chip-confirm 520ms var(--ease-spring); }
@keyframes rt-chip-confirm { 40% { transform: scale(1.22); } }

/* ---------- This round's players ---------- */

.rt-players { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); }
.rt-players__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text-3); font-size: 12.5px; font-weight: 650; }
.rt-players__head strong { color: var(--text); font-size: 14px; }
.rt-players__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.rt-players__empty { color: var(--text-3); font-size: 13px; }
.rt-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
  background: var(--bg-2);
  font-size: 13px;
  animation: rise-in 260ms var(--ease-out);
  transition: background-color 300ms, box-shadow 300ms, opacity 300ms;
}
.rt-player__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.rt-player__amount { color: var(--text-2); font-weight: 700; }
.rt-player.is-me { box-shadow: inset 0 0 0 1px rgb(255 197 61 / 0.45); }
.rt-player.is-won { background: color-mix(in srgb, var(--win) 14%, var(--bg-2)); }
.rt-player.is-won .rt-player__amount { color: var(--win); }
.rt-player.is-lost { opacity: 0.55; }

/* ---------- Panel ---------- */

.rt-rack { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 6px 2px 2px; }
.rt-rack__chip {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 46px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--chip-ink);
  font: 800 12px / 1 var(--font-ui);
  box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.25), 0 3px 6px rgb(0 0 0 / 0.45);
  cursor: pointer;
  transition: transform 180ms var(--ease-spring), box-shadow 180ms;
}
.rt-rack__chip::before {
  content: "";
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--chip-ink) 55%, transparent);
}
.rt-rack__chip span { position: relative; }
@media (hover: hover) {
  .rt-rack__chip:hover:not(:disabled) { transform: translateY(-2px); }
}
.rt-rack__chip[aria-checked="true"] {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent), 0 10px 18px rgb(0 0 0 / 0.5);
}
.rt-rack__chip.is-picked { animation: rt-pick 320ms var(--ease-spring); }
@keyframes rt-pick { 40% { transform: translateY(-7px) scale(1.14); } }
.rt-rack__chip:disabled { opacity: 0.55; cursor: default; }
.rt-rack.is-nudged { animation: fx-shake 380ms var(--ease-out); --shake: 5px; }
.bet-button.is-placed:disabled { opacity: 1; background: color-mix(in srgb, var(--win) 18%, var(--bg-3)); color: var(--win); box-shadow: none; }
.rt-actions .btn span { display: grid; }
.rt-help { color: var(--text-3); font-size: 12px; line-height: 1.45; }

/* ---------- Verifier and bet detail ---------- */

.roulette-pocket { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff !important; }
.roulette-pocket.is-red { background: #c4172f; }
.roulette-pocket.is-black { background: #1c2331; }
.roulette-pocket.is-green { background: #0f8a4f; }

@media (max-width: 600px) {
  .rt-board { min-height: 0; padding: 16px 10px 18px; gap: 16px; }
  .rt-felt { padding: 10px; border-radius: 14px; }
  .rt-spots, .rt-chips { inset: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-badge.is-in, .rt-history__item.is-new, .rt-cell.is-hit, .rt-chip.is-dropped, .rt-chip.is-leaving,
  .rt-chip.is-win, .rt-chip__gain, .rt-rack__chip.is-picked, .rt-rack.is-nudged, .rt-chip.is-confirming, .rt-player { animation: none; }
  .rt-status__bar span { transition: none; }
}