/* ROULETTE: .rl-* classes only. Premium table look: textured blue felt, cream-gold lines, striped casino chips,
   simple navy wheel (js) and a small drawn donut emblem for the zero pocket (never green). */
.rl-game{--red:#c62238;--blk:#161b29;--line:#bcd0f28c;--gold:#e9c46a;--gold-hi:#ffe08a;--cream:#e8f0fd;
  --felt-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- controls ---------- */
.rl-chips{display:flex;justify-content:space-between;gap:4px;padding:8px 6px;border-radius:var(--r-sm);
  background:var(--felt-noise),linear-gradient(180deg,#123a73,#0c2a57);border:1px solid #bcd0f240;box-shadow:inset 0 2px 6px #0007}
.rl-chips .rl-chip{width:36px;height:36px;font-size:11.5px;cursor:pointer;padding:0;border:0;transition:transform .14s,box-shadow .14s}
.rl-chips .rl-chip.on{transform:translateY(-4px);box-shadow:inset 0 0 0 1.5px var(--cd),0 0 0 2px #0c2a57,0 0 0 4px var(--gold-hi),0 6px 10px #000a}
@media (hover:hover){ .rl-chips .rl-chip:not(:disabled):not(.on):hover{transform:translateY(-2px)} }
.rl-chips .rl-chip:disabled{cursor:not-allowed;opacity:.5}
.rl-chips .rl-chip:focus-visible{box-shadow:0 0 0 2px #0c2a57,0 0 0 4px var(--accent)}
.rl-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rl-tools .btn{height:44px;font-size:15px;padding:0 8px;gap:6px}
.rl-tools .ic{width:16px;height:16px}
#rl-hint{margin-top:8px}
.rl-ctrl .stats b{font-variant-numeric:tabular-nums}

/* ---------- casino chips: face, edge stripes, inlay ring (selector + table) ---------- */
.rl-chip{--cc:#2f6ae6;--cd:#173f9c;--ce:#f4f6fb;--ct:#fff;position:relative;display:grid;place-items:center;border-radius:50%;color:var(--ct);border:0;
  background:radial-gradient(circle closest-side,var(--cc) 0 55%,var(--ce) 56% 60%,var(--cc) 61% 67%,transparent 68%),
    repeating-conic-gradient(from 8deg,var(--ce) 0 15deg,var(--cc) 15deg 45deg);
  box-shadow:inset 0 0 0 1.5px var(--cd),inset 0 -2px 3px #0006,0 2px 3px #000a;
  font-weight:800;font-variant-numeric:tabular-nums;line-height:1;box-sizing:border-box}
.rl-chip:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 24%,#ffffff59,#ffffff00 46%);pointer-events:none}
.rl-chip span{position:relative;z-index:1;pointer-events:none;letter-spacing:-.03em;text-shadow:0 1px 1px #0008}
.rl-chip.c1{--cc:#eef1f7;--cd:#8d9ab3;--ce:#3f63b8;--ct:#13234a}
.rl-chip.c1 span{text-shadow:none}
.rl-chip.c5{--cc:#cf2a40;--cd:#7d1323}
.rl-chip.c10{--cc:#2f6ae6;--cd:#173f9c}
.rl-chip.c25{--cc:#1b9a5e;--cd:#0d5a36}
.rl-chip.c100{--cc:#232a3c;--cd:#0b0e16;--ce:#e9c46a}
.rl-chip.c500{--cc:#7444d4;--cd:#432386}
.rl-chip.c1000{--cc:#e3ac34;--cd:#8d6512;--ce:#fff8e4;--ct:#3a2604}
.rl-chip.c1000 span{text-shadow:0 1px 0 #fff6}
/* high-roller bands: the K-band (5K..500K) wears gold edge spots, the M-band (5M..500M) cyan ones;
   1M is platinum and 1B black-gold so the three "round thousand" chips never look alike */
.rl-chip.k1{--ce:#ffd36b}
.rl-chip.k2{--ce:#7fe9ff}
.rl-chip.c1.k1,.rl-chip.c1.k2{--ct:#13234a}
.rl-chip.c1000.k1{--cc:#dfe4ee;--cd:#7a8398;--ce:#e3ac34;--ct:#1a2131}
.rl-chip.c1000.k2{--cc:#1b1f2b;--cd:#000;--ce:#e3ac34;--ct:#ffd36b}
.rl-chip.c1000.k2 span{text-shadow:0 1px 1px #000}
/* 1B-1T set (billions): rose edge spots, 1B emerald-ringed, 1T white-gold */
.rl-chip.k3{--ce:#ff8bbd}
.rl-chip.c1.k3{--ct:#13234a}
.rl-chip.c1000.k3{--cc:#10261c;--cd:#021009;--ce:#4ff0a4;--ct:#9dffcf}
.rl-chip.c1000.k3 span{text-shadow:0 1px 1px #000}
.rl-chip.k4{--ce:#fff0b8}
.rl-chip.c1000.k4{--cc:#f0ead8;--cd:#8d8468;--ce:#e3ac34;--ct:#3a2604}
.rl-scale{margin-bottom:8px}
.rl-scale button{height:32px;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- stage: textured felt ---------- */
.rl-stage{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;
  background:var(--felt-noise),radial-gradient(ellipse 90% 75% at 50% 32%,#1e5a9e 0,#15457f 42%,#0d2f5f 74%,#081d3e 100%)}
.rl-stage:before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #00000080;z-index:0}
.rl-stage > *{position:relative;z-index:1}
.rl-top{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,44px)}
.rl-wbox{height:100%;aspect-ratio:1;max-width:58%;display:flex;align-items:center;justify-content:center;min-width:0}
.rl-wheel{width:100%;height:100%;display:block;overflow:visible}
.rl-wheel text{fill:#fff;font:700 14.5px Inter,system-ui,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
#rl-ball,#rl-bsh,.rl-pdn,.rl-pdn *,.rl-sweep{pointer-events:none}
.rl-sweep{opacity:0;transform-box:view-box;transform-origin:200px 200px;transition:opacity .5s}
.rl-stage.spinning .rl-sweep{opacity:1;animation:rl-sweep 1.5s linear infinite}
@keyframes rl-sweep{to{transform:rotate(360deg)}}
#rl-wpk{animation:rl-wpk 1.1s ease-in-out infinite alternate}
@keyframes rl-wpk{from{opacity:.55}to{opacity:1}}

/* info column: dark glass with a gold hairline */
.rl-info{position:relative;width:clamp(220px,34%,330px);display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
.rl-res,.rl-recent{border-radius:14px;background:linear-gradient(180deg,#0b1f42e8,#06142de8);border:1px solid #bcd0f238;
  box-shadow:inset 0 1px 0 #ffffff12,0 12px 26px -16px #000}
.rl-res{display:flex;align-items:center;gap:14px;padding:12px 14px}
.rl-rnum{position:relative;flex:none;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;align-content:center;font-size:30px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--muted);background:radial-gradient(circle at 50% 35%,#1a2c4f,#0b1730);
  box-shadow:0 0 0 2px #bcd0f266,inset 0 -5px 10px #0007}
.rl-rnum b{position:relative;z-index:1;line-height:1}
.rl-res.red .rl-rnum,.rl-res.black .rl-rnum,.rl-res.donut .rl-rnum{color:#fff;text-shadow:0 2px 3px #0008;
  box-shadow:0 0 0 3px #e8f0fd,0 0 0 5px #0006,0 0 18px 2px #9fc0ff44,inset 0 -6px 10px #0006,inset 0 4px 8px #ffffff2e;animation:rl-reveal .55s cubic-bezier(.2,1.5,.4,1)}
.rl-res.red .rl-rnum{background:radial-gradient(circle at 50% 30%,#e8405a,#a3162c 70%)}
.rl-res.black .rl-rnum{background:radial-gradient(circle at 50% 30%,#3a4258,#11151f 70%)}
.rl-res.donut .rl-rnum{background:radial-gradient(circle at 50% 30%,#e3a95a,#9b6024 72%);gap:1px}
.rl-res.donut .rl-rdn{width:28px;height:28px;display:block}
.rl-res.donut .rl-rnum b{font-size:18px}
@keyframes rl-reveal{0%{transform:scale(.55);filter:brightness(1.8)}60%{transform:scale(1.08)}100%{transform:none;filter:none}}
.rl-res.spinning .rl-rnum:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color:var(--gold-hi);animation:rl-spin .8s linear infinite}
@keyframes rl-spin{to{transform:rotate(360deg)}}
.rl-rtxt{font-size:15px;font-weight:700;color:var(--cream);min-width:0}
.rl-recent{padding:10px 12px}
.rl-recent small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#bcd0f2;margin-bottom:8px}
.rl-rlist{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;min-height:70px;align-content:start}
.rl-rc{position:relative;aspect-ratio:1;max-width:32px;width:100%;justify-self:center;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 1px #0009;background:radial-gradient(circle at 50% 30%,#3a4258,#11151f 75%);
  box-shadow:inset 0 0 0 1.5px #bcd0f28c,inset 0 -3px 5px #0007,0 2px 3px #0009}
.rl-rc.red{background:radial-gradient(circle at 50% 30%,#e8405a,#a3162c 75%)}
.rl-rc.donut{background:radial-gradient(circle at 50% 30%,#e3a95a,#9b6024 75%)}
.rl-rc.donut .rl-dn{width:74%;height:74%}
.rl-rc.new{box-shadow:inset 0 0 0 1.5px #bcd0f28c,0 0 0 2px var(--gold-hi),0 0 12px #ffd36b88;animation:rl-reveal .5s cubic-bezier(.2,1.5,.4,1)}
.rl-rnone{grid-column:1/-1;color:#9fb0cf;font-size:14px;font-weight:600}
/* result pill lives in the info column, in normal flow (space reserved, no layout jump) */
.rl-info .outcome{position:relative;left:auto;bottom:auto;transform:translateY(6px);align-self:stretch;white-space:normal;flex-wrap:wrap;row-gap:4px;
  border-radius:14px;padding:10px 14px;min-height:46px}
.rl-info .outcome.on{transform:none}
.rl-info .outcome .det{flex-basis:100%;font-size:13.5px}

/* ---------- table: gold lines on felt ---------- */
.rl-twrap{flex:none;display:flex;justify-content:center}
.rl-table{--rh:clamp(40px,calc(var(--stage-h) * .082),58px);--rh2:calc(var(--rh) * .8);
  position:relative;width:100%;max-width:920px;display:grid;gap:2px;padding:1px;
  grid-template-columns:1.15fr repeat(12,minmax(0,1fr)) 1.05fr;grid-template-rows:repeat(3,var(--rh)) var(--rh2) var(--rh2)}
.rl-cell{grid-area:var(--h);position:relative;min-width:0;min-height:0;border:0;padding:0;margin:0;display:grid;place-items:center;cursor:pointer;
  color:#fff;background:transparent;font-size:15px;font-weight:700;-webkit-tap-highlight-color:transparent;transition:filter .12s,box-shadow .15s,background-color .15s;
  box-shadow:0 0 0 1px var(--line)}
.rl-cell:first-child{border-radius:10px 0 0 10px}
.rl-cell b{font-weight:800;font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 1px 2px #0009}
.rl-cell.num b{font-size:17px}
.rl-cell.red{background:linear-gradient(180deg,#d42a43,#a5162c)}
.rl-cell.black{background:linear-gradient(180deg,#262d40,#11151f)}
.rl-cell.num{box-shadow:0 0 0 1px var(--line),inset 0 1px 0 #ffffff1f,inset 0 -2px 4px #0005}
.rl-cell.zero{background:linear-gradient(180deg,#d69b4c,#9b6024);align-content:center;gap:4px;grid-auto-flow:row;
  box-shadow:0 0 0 1px var(--line),inset 0 1px 0 #ffffff33,inset 0 -3px 6px #0005}
.rl-zdn{width:32px;height:32px;pointer-events:none;filter:drop-shadow(0 1px 1px #0006)}
.rl-cell.zero b{font-size:18px;color:#fff8ea}
.rl-cell.out{color:var(--cream);font-size:13.5px;letter-spacing:.05em;text-transform:uppercase}
.rl-cell.col b{font-size:13.5px;letter-spacing:.02em}
.rl-dia{width:34px;height:22px;pointer-events:none;display:block;filter:drop-shadow(0 1px 1px #0008)}
.rl-cell.sw.red,.rl-cell.sw.black{background:transparent}
.rl-cell.sw .rl-dia path{stroke:#e8d6a4;stroke-width:1.2}
.rl-cell.sw.red .rl-dia path{fill:#cf2a40}
.rl-cell.sw.black .rl-dia path{fill:#0b0e16}
@media (hover:hover){
  .rl-table:not(.locked) .rl-cell:hover{filter:brightness(1.15);box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px #ffe7a3cc}
  .rl-table:not(.locked) .rl-cell.out:hover{background-color:#ffffff12}
}
.rl-cell.hl{filter:brightness(1.22);box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px #ffe7a3cc}
.rl-cell.out.hl{background-color:#ffffff12}
.rl-cell:focus-visible{box-shadow:inset 0 0 0 3px var(--accent),0 0 0 1px var(--line);z-index:1}
/* winning spots glow gold; the winning number pulses */
.rl-cell.wonspot{box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px var(--gold-hi),inset 0 0 18px #ffd36b66;background-color:#ffd36b1c}
.rl-cell.hit{z-index:1;filter:none;animation:rl-hit 1.1s ease-in-out infinite alternate}
@keyframes rl-hit{from{box-shadow:0 0 0 1px var(--line),inset 0 0 0 3px #fff3c4,0 0 10px 2px #ffd36b88}to{box-shadow:0 0 0 1px var(--line),inset 0 0 0 3px var(--gold-hi),0 0 22px 6px #ffd36bcc}}
.rl-table.locked .rl-cell,.rl-table.locked .rl-hs{cursor:default}
.rl-table.locked .rl-hs{pointer-events:none}
.rl-dolly{position:absolute;top:3px;right:3px;width:18px;height:18px;z-index:3;pointer-events:none;filter:drop-shadow(0 2px 2px #000b);animation:rl-drop .45s cubic-bezier(.3,1.5,.5,1)}
.rl-dolly .rl-dn{width:100%;height:100%;display:block}
@keyframes rl-drop{0%{transform:translateY(-14px) scale(.5);opacity:0}100%{transform:none;opacity:1}}

/* chips placed on spots: drop in from above */
.rl-cell .rl-chip,.rl-hs .rl-chip{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;font-size:10.5px;z-index:2;pointer-events:none;
  animation:rl-chipin .26s cubic-bezier(.25,1.3,.5,1)}
.rl-hs .rl-chip{width:26px;height:26px;margin:-13px 0 0 -13px;font-size:9.5px}
.rl-chip.stk{box-shadow:inset 0 0 0 1.5px var(--cd),inset 0 -2px 3px #0006,0 2px 0 0 var(--cd),0 4px 0 0 var(--cc),0 5px 0 0 var(--cd),0 7px 5px #000a}
.rl-chip.won{box-shadow:inset 0 0 0 1.5px var(--cd),0 0 0 2px var(--gold-hi),0 0 14px 4px #ffd36baa;animation:rl-wonchip .9s ease-in-out infinite alternate}
@keyframes rl-wonchip{to{box-shadow:inset 0 0 0 1.5px var(--cd),0 0 0 2px #fff6d0,0 0 20px 7px #ffd36bcc}}
.rl-chip.lost{opacity:.35;filter:saturate(.3)}
/* labels stay readable: zero and outside chips sit beside the label */
.rl-cell.zero > .rl-chip{top:82%}
.rl-cell.out:not(.col) > .rl-chip{left:auto;right:6px;margin-left:0}
.rl-cell.out:not(.col).has > b,.rl-cell.sw.has > .rl-dia{transform:translateX(-13px)}
.rl-chip.noanim:not(.won){animation:none!important}
@keyframes rl-chipin{0%{transform:translateY(-22px) scale(1.3);opacity:0}55%{transform:translateY(2px) scale(.96);opacity:1}100%{transform:none;opacity:1}}

/* inside combination spots (split / street / corner / six line / zero combos) sit on the lines */
.rl-hsl{grid-area:1/2/4/14;position:relative;pointer-events:none;z-index:2}
.rl-hs{position:absolute;left:var(--hx);top:var(--hy);width:18px;height:18px;margin:-9px 0 0 -9px;padding:0;border:0;border-radius:50%;background:transparent;
  pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover){ .rl-table:not(.locked) .rl-hs:hover{background:#ffe7a3e6;box-shadow:0 0 0 2px #0b1733,0 0 10px #ffd36b} }
.rl-hs:focus-visible{background:#ffe7a3e6;box-shadow:0 0 0 2px var(--accent)}
.rl-hs.has{z-index:3}

/* ---------- tablet (stacked, horizontal table) ---------- */
@media (max-width:900px){
  .rl-stage{height:auto;padding:12px 10px 14px}
  .rl-top{flex:none;height:260px}
  .rl-table{--rh:46px}
}

/* ---------- phone: the table turns vertical (0 on top, 12 rows of 3) ---------- */
@media (max-width:640px){
  .rl-top{height:auto;gap:10px;align-items:stretch}
  .rl-wbox{height:auto;width:50%;max-width:none;flex:none;align-self:center}
  .rl-info{width:auto;flex:1;gap:8px}
  .rl-res{padding:8px 10px;gap:10px}
  .rl-rnum{width:50px;height:50px;font-size:22px}
  .rl-res.donut .rl-rdn{width:20px;height:20px}
  .rl-res.donut .rl-rnum b{font-size:13px}
  .rl-rtxt{font-size:13px}
  .rl-recent{padding:8px}
  .rl-recent small{font-size:10.5px;margin-bottom:6px}
  .rl-rlist{gap:4px;min-height:52px}
  .rl-rc{font-size:11px}
  .rl-info .outcome{padding:8px 10px;font-size:15px;gap:8px;min-height:40px}
  .rl-info .outcome .det{font-size:12.5px}
  .rl-table{grid-template-columns:40px 40px repeat(3,minmax(0,1fr));grid-template-rows:46px repeat(12,36px) 38px;max-width:420px}
  .rl-cell{grid-area:var(--v)}
  .rl-cell:first-child{border-radius:10px 10px 0 0}
  .rl-cell.out:not(.col) b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12.5px}
  .rl-cell.sw .rl-dia{transform:rotate(90deg)}
  .rl-cell.out:not(.col) > .rl-chip{right:auto;left:50%;top:auto;bottom:3px;margin:0 0 0 -12px;width:24px;height:24px;font-size:9.5px}
  .rl-cell.zero > .rl-chip{top:50%;left:auto;right:12px;margin-left:0}
  .rl-cell.out:not(.col).has{place-items:start center;padding-top:4px}
  .rl-cell.out:not(.col).has > b{transform:rotate(180deg);font-size:11px}
  .rl-cell.sw.has > .rl-dia{transform:rotate(90deg)}
  .rl-cell.zero{display:flex;align-items:center;justify-content:center;gap:8px}
  .rl-zdn{width:28px;height:28px}
  .rl-dia{width:30px;height:18px}
  .rl-hsl{grid-area:2/3/14/6}
  .rl-hs{left:var(--vx);top:var(--vy);width:16px;height:16px;margin:-8px 0 0 -8px}
  .rl-cell .rl-chip{width:27px;height:27px;margin:-13.5px 0 0 -13.5px}
  .rl-hs .rl-chip{width:23px;height:23px;margin:-11.5px 0 0 -11.5px;font-size:9px}
  .rl-chips .rl-chip{width:38px;height:38px}
}

.table-amount input { min-width:0; width:100%; }
.table-amount input[aria-invalid=true] { color:var(--lose); }
.rl-amount { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; padding:4px 5px; min-width:26px; max-width:72px; border:1px solid #6fb8dd; border-radius:5px; background:#0a2039; color:#effaff; font-size:10px; font-weight:800; line-height:1.1; white-space:nowrap; pointer-events:none; font-variant-numeric:tabular-nums; box-shadow:0 2px 5px #0005; }
.rl-amount.won { border-color:var(--win); color:var(--win); }
.rl-amount.lost { opacity:.55; }
.rl-cell.zero>.rl-amount { top:82%; }
.rl-cell.out:not(.col)>.rl-amount { left:auto; right:4px; transform:translateY(-50%); }
.rl-hs .rl-amount { font-size:9px; padding:3px; }
@media(max-width:900px) { .rl-cell.out:not(.col)>.rl-amount { left:50%; right:auto; top:auto; bottom:3px; transform:translateX(-50%); } .rl-cell.zero>.rl-amount { left:auto; right:8px; top:50%; transform:translateY(-50%); } }