/* Shared roulette pieces: the SVG wheel (rw-) and the betting layout (rl-). Used by /demos/roulette/
   and /demos/live-roulette/. Load after table.css. */

/* ---------- wheel ---------- */
.rw { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); }
.rw .rw-n.red { fill: #b31e2c; } .rw .rw-n.black { fill: #15161a; } .rw .rw-n.green { fill: #12884d; }
.rw .rw-p.red { fill: #7c1520; } .rw .rw-p.black { fill: #0b0c0e; } .rw .rw-p.green { fill: #0c5c34; }
.rw .rw-t { fill: #fbf7ee; font-family: Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.rw .rw-frets line { stroke: #d9b467; stroke-width: 1.4; stroke-linecap: round; opacity: .95; }
.rw .rw-win { fill: rgba(255, 236, 170, 0); stroke: #ffd36a; stroke-width: 2.6; opacity: 0; pointer-events: none; }
.rw .rw-win.on { animation: rwwin 1.5s ease-in-out infinite; }
@keyframes rwwin { 0%, 100% { opacity: .6; fill: rgba(255, 236, 170, .08); } 50% { opacity: 1; fill: rgba(255, 236, 170, .3); } }

/* ---------- betting layout ---------- */
.rl-boardwrap { container-type: inline-size; position: relative; }
.rl-board { position: relative; width: 100%; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  --rl-line: rgba(255, 255, 255, .7); --rl-chip: clamp(17px, 2.85cqw, 30px); --rl-fs: clamp(12px, 1.95cqw, 20px); --rl-ofs: clamp(9px, 1.25cqw, 13px); }
.rl-board.vert { --rl-chip: clamp(18px, 7.2cqw, 30px); --rl-fs: clamp(13px, 4.6cqw, 19px); --rl-ofs: clamp(9.5px, 3.1cqw, 12.5px); }
.rl-z { position: absolute; display: grid; place-items: center; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.rl-z[hidden] { display: none; }

/* number cells: filled red, black and green, white numbers, printed white lines */
.rl-num { z-index: 1; box-shadow: inset 0 0 0 1px var(--rl-line); transition: background-color .2s; }
.rl-num.red { background: linear-gradient(180deg, rgba(196, 34, 47, .95), rgba(158, 22, 35, .95)); }
.rl-num.black { background: linear-gradient(180deg, rgba(30, 31, 36, .95), rgba(14, 15, 18, .95)); }
.rl-num.green { background: linear-gradient(180deg, rgba(22, 150, 86, .95), rgba(12, 110, 62, .95)); }
.rl-nl { position: relative; z-index: 1; font: 800 var(--rl-fs)/1 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); pointer-events: none; }
.rl-zero { border-radius: 46% 0 0 46% / 16% 0 0 16%; }
.rl-board.dz .rl-zero { border-radius: 40% 0 0 0 / 28% 0 0 0; }
.rl-board.dz .rl-zero[data-id="n-0"] { border-radius: 0 0 0 40% / 0 0 0 28%; }
.rl-board.vert .rl-zero { border-radius: 16% 16% 0 0 / 46% 46% 0 0; }
.rl-board.vert.dz .rl-zero[data-id="n-0"] { border-radius: 0 16% 0 0 / 0 46% 0 0; }
.rl-board.vert.dz .rl-zero[data-id="n-37"] { border-radius: 16% 0 0 0 / 46% 0 0 0; }
.rl-num::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .12s; background: rgba(255, 226, 140, .3); box-shadow: inset 0 0 0 2px rgba(255, 214, 110, .95); }
.rl-num.hl::before { opacity: 1; }

/* outside bets: printed on the felt */
.rl-out { z-index: 1; box-shadow: inset 0 0 0 1px var(--rl-line); transition: background-color .15s; }
.rl-out:hover, .rl-out.hlo { background: rgba(255, 226, 140, .14); }
.rl-ol { font: 800 var(--rl-ofs)/1.1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .92); white-space: nowrap; pointer-events: none; }
.rl-dia { width: 54%; max-width: 62px; height: auto; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.rl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rl-board.vert .rl-doz .rl-ol, .rl-board.vert .rl-em .rl-ol { transform: rotate(-90deg); }
.rl-board.vert .rl-dia { width: auto; height: 46%; max-height: 54px; transform: rotate(90deg); }
.rl-board.vert .rl-col .rl-ol { letter-spacing: .06em; }

/* inside spots: invisible until hovered */
.rl-in { z-index: 3; }
.rl-x { z-index: 4; }
.rl-in::after { content: ''; width: min(14px, 70%); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 214, 110, .6); box-shadow: 0 0 0 2px rgba(255, 214, 110, .95), 0 0 10px rgba(255, 214, 110, .6); opacity: 0; transition: opacity .12s; pointer-events: none; }
.rl-in.rl-l::after { width: min(12px, 80%); }
.rl-in:hover::after, .rl-in:focus-visible::after { opacity: 1; }
.rl-in.has-bet::after { display: none; }
.rl-num:focus-visible, .rl-out:focus-visible { box-shadow: inset 0 0 0 2px var(--you); }

/* chips on the layout (CHIPS.layout draws the piles) */
.rl-z > .tb-stack { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%); --chip: var(--rl-chip); --ct: 2.4px; z-index: 6; }
.rl-z > .tb-stack .tb-stack-amt { display: none; }
.rl-z > .tb-stack.lose { opacity: .7; }
.rl-z > .tb-stack.win .tb-pile { filter: drop-shadow(0 0 6px rgba(53, 227, 154, .95)); }

/* the result: marker on the number, winning spots lit */
.rl-z.win { z-index: 2; }
.rl-num.win { box-shadow: inset 0 0 0 2.5px #ffd36a, 0 0 22px 6px rgba(255, 211, 106, .55); animation: rlwin 1.4s ease-in-out infinite; }
@keyframes rlwin { 50% { box-shadow: inset 0 0 0 2.5px #ffd36a, 0 0 30px 10px rgba(255, 211, 106, .35); } }
.rl-out.rl-hit { background: rgba(53, 227, 154, .2); box-shadow: inset 0 0 0 2px rgba(53, 227, 154, .9); }
.rl-in.rl-hit::after { opacity: 1; background: rgba(53, 227, 154, .7); box-shadow: 0 0 0 2px rgba(53, 227, 154, 1), 0 0 12px rgba(53, 227, 154, .8); }
.rl-dolly { position: absolute; left: 50%; top: 50%; z-index: 9; width: calc(var(--rl-chip) * .82); height: calc(var(--rl-chip) * .82); border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -78%);
  background: radial-gradient(circle at 38% 32%, #ffffff, #e6e2d8 55%, #a8a397);
  box-shadow: 0 3px 0 #8f8a7e, 0 4px 0 #6d685e, 0 8px 12px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(201, 152, 52, .9); }
.rl-dolly::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe7a8, #c99834); }
.rl-dolly.drop { animation: rldrop .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rldrop { from { transform: translate(-50%, -260%); opacity: 0; } 60% { opacity: 1; } }

/* other players' chips (live table) */
.rl-oth { position: absolute; z-index: 7; right: 2px; top: 2px; display: inline-flex; align-items: center; gap: 2px; pointer-events: none; animation: rloth .3s ease-out; }
.rl-oth svg { width: 13px; height: 13px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.rl-oth b { font: 700 8.5px/1 'IBM Plex Mono', monospace; color: #fff; background: rgba(0,0,0,.55); padding: 1px 3px; border-radius: 4px; }
.rl-out .rl-oth { right: 4px; top: 4px; }
@keyframes rloth { from { opacity: 0; transform: translateY(-4px); } }

/* colored number pills used in history strips */
.rl-pill { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 7px; font: 800 12.5px/1 Inter, sans-serif; color: #fff; font-variant-numeric: tabular-nums; flex: none; }
.rl-pill.red { background: #b81f2d; } .rl-pill.black { background: #23252b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .rl-pill.green { background: #13874d; }

@media (prefers-reduced-motion: reduce) {
  .rl-num.win, .rw .rw-win.on, .rl-dolly.drop { animation: none; }
}