/* Roulette's own look, on the game template (static/game.css styles the shell): the board colours (the Inlay red, navy
   black and green), the wheel's place on the flat stage (no rings behind it), the table's fields as Inlay cells (cut
   corners, the gold inlay line on hover and on a covered or hit field), the chips in a cut well with Undo and Clear as
   hairline buttons, and hot and cold. */

.gm, .gm-below { --rl-red: #b4283b; --rl-black: #16224a; --rl-green: #118a57; }
/* a number in its colour: the history chips, hot and cold */
.gm-pill.red, .gm-recent .gm-pill.red { background: var(--rl-red); color: #fff; }
.gm-pill.black, .gm-recent .gm-pill.black { background: var(--rl-black); color: #fff; }
.gm-pill.green, .gm-recent .gm-pill.green { background: var(--rl-green); color: #fff; }

/* the wheel on the flat stage */
.rl-table { position: relative; display: grid; place-items: center; padding: 26px 18px 0; overflow: hidden; }
.rl-wheel-wrap { position: relative; width: min(400px, 70%); }
.rl-wheel { display: block; width: 100%; aspect-ratio: 236 / 200; }  /* drawn by roulette.js, pocket by pocket */

/* ---------- the table: every field an Inlay cell ---------- */
.rl-felt { padding: 14px clamp(10px, 3vw, 28px) 14px; container-type: inline-size; }
.rl-board { position: relative; display: grid; grid-template-columns: 1.15fr repeat(12, 1fr) 1.15fr;
  grid-template-rows: repeat(3, minmax(30px, 6.2cqw)) repeat(2, minmax(30px, 5.4cqw)); gap: clamp(2px, .55cqw, 5px); max-width: 860px; margin: 0 auto; user-select: none; }
.rl-spot { --k: 7px; --fill: var(--cell); --lnc: transparent; position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border: 0;
  background: var(--fill); color: #fff; font: 700 clamp(11px, 2.3cqw, 17px)/1 var(--f-ui); cursor: pointer;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  transition: background-color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out), filter var(--t-hover); }
.rl-spot::before { content: ""; position: absolute; inset: 3px; background: var(--lnc); transition: background-color var(--t-hover) var(--e-out);
  clip-path: polygon(calc(var(--k) - 1.76px) 0, 100% 0, 100% calc(100% - var(--k) + 1.76px), calc(100% - var(--k) + 1.76px) 100%, 0 100%, 0 calc(var(--k) - 1.76px)); }
.rl-spot::after { content: ""; position: absolute; inset: 4.5px; background: var(--fill); transition: background-color var(--t-hover) var(--e-out);
  clip-path: polygon(calc(var(--k) - 2.64px) 0, 100% 0, 100% calc(100% - var(--k) + 2.64px), calc(100% - var(--k) + 2.64px) 100%, 0 100%, 0 calc(var(--k) - 2.64px)); }
.rl-spot-label, .rl-spot > .rl-gem { position: relative; z-index: 1; }
.rl-spot-label { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rl-spot > .rl-pile { z-index: 2; }
.rl-spot.r { --fill: var(--rl-red); } .rl-spot.b { --fill: var(--rl-black); }
.rl-spot.g { --fill: var(--rl-green); font-size: clamp(14px, 2.6cqw, 22px); }
.rl-spot.out { --fill: var(--cell); color: var(--ink-2); font-weight: 600; }
@container (max-width: 420px) { .rl-spot.out { font-size: 10.5px; } .rl-spot { --k: 5px; } }
.rl-spot:hover { --lnc: var(--gold-line); }
.rl-spot.out:hover { --fill: var(--cell-hi); color: var(--ink); }
.rl-spot:active { transform: scale(.97); }
.rl-spot.covered { --lnc: var(--gold-line); filter: brightness(1.12); }
.rl-spot.hit { animation: rl-hit 2.6s ease-out; z-index: 1; }
/* the inside bets' hotspots (roulette.js): small targets on the edges and corners between numbers */
.rl-hot { position: absolute; inset: 0; pointer-events: none; }
.rl-hs { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  pointer-events: auto; z-index: 2; cursor: pointer; }
.rl-hs.edge-h { width: 26px; height: 12px; margin: -6px 0 0 -13px; border-radius: 6px; }
.rl-hs.edge-v { width: 12px; height: 26px; margin: -13px 0 0 -6px; border-radius: 6px; }
.rl-hs:hover { background: rgb(242 185 74 / .5); box-shadow: 0 0 0 1.5px var(--gold); }
.rl-hs .rl-pile { width: clamp(18px, 2.9cqw, 26px); z-index: 3; }
@media (max-width: 640px) { .rl-hs { width: 14px; height: 14px; margin: -7px 0 0 -7px; } }
.rl-gem { display: block; width: 26px; height: 16px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rl-gem.r { background: var(--rl-red); } .rl-gem.b { background: #0a1227; }
.playing .rl-board { pointer-events: none; }
.playing .rl-spot:not(:has(.rl-pile)) { opacity: .55; }

/* ---------- chips ---------- */
.rl-chip, .rl-pile { --chip: #c9d2de; --cink: #172434; position: relative; display: grid; place-items: center; border-radius: 50%;
  background:
    radial-gradient(circle, var(--chip) 0 54%, rgb(255 255 255 / .9) 55% 58%, transparent 59%),
    repeating-conic-gradient(var(--chip) 0 22deg, #fff 22deg 30deg),
    var(--chip);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .18), inset 0 -3px 0 rgb(0 0 0 / .22), 0 3px 6px rgb(3 6 12 / .45);
  color: var(--cink); font: 700 13px/1 var(--f-num); letter-spacing: .02em; }
.c10 { --chip: #c9d2de; --cink: #172434; }
.c50 { --chip: #d63a4e; --cink: #fff; }
.c100 { --chip: #2f6fd6; --cink: #fff; }
.c500 { --chip: #13935a; --cink: #fff; }
.c1000 { --chip: #1c2633; --cink: #f2b94a; }
.c10000 { --chip: #f2b94a; --cink: #1b1305; }
.rl-pile { position: absolute; width: clamp(20px, 3.4cqw, 30px); aspect-ratio: 1; font-size: clamp(9px, 1.35cqw, 12px); pointer-events: none;
  animation: rl-drop .22s cubic-bezier(.3, 1.4, .5, 1); }
.rl-spot.won .rl-pile { box-shadow: 0 0 0 2px var(--win), 0 0 16px rgb(30 226 127 / .6); }
.rl-spot.lost .rl-pile { opacity: .35; transition: opacity .6s ease; }
.rl-tools { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 860px; margin: 14px auto 0; flex-wrap: nowrap; }
.rl-chips { --k: 10px; display: flex; gap: 8px; padding: 10px 16px; background: var(--well);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.rl-chip { width: 42px; aspect-ratio: 1; border: 0; padding: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.rl-chip span { font-size: 13px; }
.rl-chip:hover { transform: translateY(-2px); }
.rl-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 2px rgb(0 0 0 / .18), inset 0 -3px 0 rgb(0 0 0 / .22), 0 0 0 3px var(--well), 0 0 0 4.5px var(--gold-line); }
.gm-sec.rl-tool { --fill: var(--stage); flex: none; min-width: 0; height: 44px; padding: 0 18px; }
@media (max-width: 640px) {
  .rl-wheel-wrap { width: min(300px, 82%); }
  .rl-chip { width: 36px; } .rl-chips { order: -1; flex-basis: 100%; justify-content: center; gap: 5px; padding: 8px 10px; }
  .rl-tools { gap: 8px; flex-wrap: wrap; } .gm-sec.rl-tool { flex: 1; max-width: 160px; }
}

.autoplaying .rl-board, .autoplaying .rl-chips, .autoplaying .rl-tool { pointer-events: none; }
.autoplaying .rl-tools { opacity: .55; }
@media (max-width: 640px) { .rl-table { padding-top: 12px; } }
@media (max-width: 899px) { .gm[data-game="roulette"] .gm-play { min-height: 0; } }

@keyframes rl-drop { from { transform: translateY(-10px) scale(1.25); opacity: 0; } }
@keyframes rl-hit { 0%, 60% { --lnc: var(--gold-hi); filter: brightness(1.25); transform: scale(1.06); } 100% { filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rl-pile, .rl-spot.hit { animation: none !important; } }

/* hot and cold */
.rl-hc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.rl-balls { display: flex; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.rl-balls li { display: grid; justify-items: center; gap: 4px; }
.rl-balls .gm-pill { min-width: 34px; height: 30px; }
.rl-balls small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.rl-meter-row { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
.rl-meter-row span { color: var(--text-2); }
.rl-meter-row b { text-align: right; font-variant-numeric: tabular-nums; }
.rl-meter { position: relative; align-self: center; height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.rl-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.rl-meter .red { background: var(--rl-red); } .rl-meter .black { background: #4a5b77; } .rl-meter .green { background: var(--rl-green); }
.rl-split3 { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; color: var(--text-2); font-size: 13px; }
.rl-split3 b { color: var(--text); }