/* Shared studio base. The blackjack studio also links this sheet, so these rules stay as they were;
   the live roulette table below is scoped to body.rl and overrides them only on its own page. */
:root{font-family:Arial,Helvetica,sans-serif;color:#eee8dc;background:#101512;font-synthesis:none;--gold:#d1b37b;--muted:#a0aa9f;--line:#35433b;--felt:#183d32}
*{box-sizing:border-box}body{margin:0}main{max-width:1200px;margin:auto;padding:0 36px}header{height:94px;display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.brand{letter-spacing:5px;font-family:Georgia,serif;font-size:25px}.brand span{display:block;font:8px Arial,sans-serif;letter-spacing:5px;margin-top:7px}.title{border-left:1px solid var(--line);padding-left:30px}h1{font:25px Georgia,serif;margin:0 0 5px}.title>span,.local{font-size:11px;color:var(--muted);letter-spacing:.5px}.local{margin-left:auto}.stage{position:relative;background:#101b15;margin-top:24px;overflow:hidden;border:1px solid #344137}canvas{display:block;width:100%;height:auto;aspect-ratio:1200/650}.stage-caption{position:absolute;top:22px;left:24px;font-size:9px;letter-spacing:2px;color:#ddd4bf}.stage-caption span{display:block;font-size:8px;margin-top:7px;color:#93a18e;letter-spacing:1.5px}#status{position:absolute;bottom:19px;left:0;right:0;text-align:center;font:14px Georgia,serif;letter-spacing:.5px;color:#ded5c3}.console{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:110px}.controls{display:flex;align-items:center;gap:18px}label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:10px}select{height:34px;background:#1b2821;color:#eee8dc;border:1px solid #475447;border-radius:2px;padding:0 9px;min-width:118px;font:13px Arial,sans-serif}.stake{font:23px Georgia,serif;text-align:center;margin:0 10px}.stake span{display:block;font:8px Arial,sans-serif;letter-spacing:1.2px;color:var(--muted);margin-top:6px}button{font:12px Arial,sans-serif;padding:14px 24px;background:#d1b37b;border:1px solid #d1b37b;color:#152018;border-radius:2px;cursor:pointer;min-height:44px;letter-spacing:.2px}button.secondary{background:transparent;color:#d6c6a5;border-color:#59604e;padding:14px 18px}button:disabled{opacity:.42;cursor:default}button:hover:not(:disabled){filter:brightness(1.12)}button:focus-visible,select:focus-visible{outline:2px solid #faf2d9;outline-offset:4px}.result{display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 18px;text-align:right}.result>span{font-size:9px;letter-spacing:1.7px;color:var(--muted)}output{font:34px Georgia,serif;min-width:42px}output.red{color:#eea18d}output.green{color:#8bcea8}.result p{grid-column:1/3;font-size:11px;color:var(--muted);margin:0}.felt{padding:19px 23px;background:var(--felt);border:1px solid #59715c;box-shadow:inset 0 0 40px #0b241850}.layout{display:grid;grid-template-columns:.85fr repeat(12,1fr);grid-template-rows:repeat(3,40px);border-top:1px solid #82917b;border-left:1px solid #82917b}.number{display:grid;place-items:center;border-right:1px solid #82917b;border-bottom:1px solid #82917b;font:17px Georgia,serif;position:relative;color:#f0e8d6;background:#163a30}.number.red{background:#87382e}.number.black{background:#162b24}.number.green{grid-row:1/4;background:#245b3d}.number.winner{outline:3px solid #edd29a;outline-offset:-4px;color:#fff8db;z-index:1}.number.winner:after{content:"";width:8px;height:8px;border-radius:50%;position:absolute;bottom:3px;right:4px;background:#e8d3a1;box-shadow:0 1px 3px #000}.outside{display:grid;grid-template-columns:repeat(6,1fr);margin-left:6.61%;border-left:1px solid #82917b}.outside span{border-right:1px solid #82917b;border-bottom:1px solid #82917b;text-align:center;padding:12px 0;font-size:10px;letter-spacing:1px;color:#e3d9bd}.outside .red-symbol{color:#ffb4a0}.history{display:flex;align-items:center;gap:20px;min-height:73px;border-bottom:1px solid var(--line)}.history>span{font-size:9px;letter-spacing:1px;color:var(--muted)}#empty-history{letter-spacing:0}.history ol{display:flex;list-style:none;gap:8px;padding:0;margin:0}.history li{width:28px;height:28px;display:grid;place-items:center;background:#203027;font:14px Georgia,serif;border-bottom:2px solid #777f6c}.history li.red{border-color:#b9634d}.history li.green{border-color:#6ab483}footer{font-size:10px;line-height:1.8;color:#8c998d;padding:20px 0 26px}
.views{position:absolute;top:12px;right:14px;display:flex;gap:4px}.views button{min-height:44px;padding:8px 12px;background:#101c18c9;border-color:#62715b;color:#c0c8b7;font-size:10px;backdrop-filter:blur(8px)}.views button[aria-pressed=true]{background:#d1b37b;color:#172019;border-color:#d1b37b}
.camera-controls{display:flex;align-items:center;gap:6px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.camera-controls>span{font-size:8px;letter-spacing:1.4px;color:var(--muted);margin-right:8px}.camera-controls button{padding:8px 13px;font-size:10px;background:transparent;border-color:#455447;color:#c0c8b7}.camera-controls button[aria-pressed=true]{background:#263a2e;color:#efd9b0;border-color:#af966b}@media(max-width:450px){.camera-controls{gap:4px}.camera-controls>span{margin-right:2px;font-size:7px}.camera-controls button{padding:8px;font-size:9px}}
@media(max-width:700px){main{padding:0 14px}header{height:78px;gap:18px}.brand{font-size:20px;letter-spacing:3px}.brand span{font-size:7px;letter-spacing:3px}.title{padding-left:17px}h1{font-size:22px}.title>span{font-size:9px}.local{font-size:9px;max-width:60px;text-align:right;line-height:1.5}.stage{margin-top:14px}.stage-caption{top:12px;left:12px;font-size:7px;letter-spacing:1px}.stage-caption span{font-size:6px}.views{top:5px;right:7px}.views button{font-size:9px;padding:8px}#status{font-size:11px;bottom:9px}.console{gap:12px;padding:18px 0;align-items:flex-start;flex-wrap:wrap}.controls{gap:10px;width:100%;justify-content:space-between}button{padding:12px 15px;font-size:11px}button.secondary{padding:12px 14px}.stake{margin:0;font-size:20px}.stake span{font-size:7px;letter-spacing:0}.result{display:flex;width:100%;justify-content:flex-end;gap:14px;padding-top:3px}.result>span{margin-right:auto}output{font-size:25px;min-width:0}.result p{font-size:10px}.felt{padding:10px 7px}.layout{grid-template-rows:repeat(3,32px)}.number{font-size:12px}.outside span{font-size:8px;padding:10px 0;letter-spacing:0}.history{gap:12px;min-height:62px}.history>span{font-size:8px;letter-spacing:.5px}.history ol{gap:5px}.history li{width:23px;height:25px;font-size:12px}footer{font-size:9px}select{min-width:82px;font-size:12px}label{font-size:9px}}
.sound-controls{display:flex;align-items:center;gap:14px;padding:8px 0}.sound-controls button{padding:8px 14px;font-size:10px}.sound-controls span{font-size:10px;color:var(--muted)}
.replay-badge{position:absolute;right:16px;top:66px;border:1px solid #d1b37b;background:#101512e8;color:#eedabb;padding:7px 10px;font-size:9px;letter-spacing:1.1px}

/* ===== Live roulette table (body.rl) ===== */
.rl{font-family:Arial,Helvetica,sans-serif;color:#eee8dc;background:#0b0f0d;font-synthesis:none;--gold:#e0bd73;--gold-soft:#d1b37b;--muted:#9aa597;--line:#2d3a32;--panel:#0d1411e0;--felt:#0c4a31;--felt-dark:#083524;--red:#b3141d;--black:#151515;--green:#0f7a43}
html:has(>body.rl),body.rl{margin:0;background:#0b0f0d}body.rl{min-height:100vh}
.rl button{font:600 12px Arial,sans-serif;color:#efe6cf;background:#1a2520;border:1px solid #4d5a4c;border-radius:22px;min-height:40px;padding:8px 16px;cursor:pointer;letter-spacing:.3px}
.rl button:disabled{opacity:.38;cursor:default}.rl button:hover:not(:disabled){filter:brightness(1.18)}
.rl button:focus-visible,.rl [tabindex]:focus-visible{outline:2px solid #faf2d9;outline-offset:3px}
.rl a{color:inherit;text-decoration:none}.rl .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rl .app{max-width:1280px;margin:auto;padding:0 20px}

/* --- top bar --- */
.rl .topbar{height:56px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line)}
.rl .brand{letter-spacing:5px;font:20px Georgia,serif}.rl .brand span{display:block;font:7px Arial,sans-serif;letter-spacing:5px;margin-top:5px;color:var(--muted)}
.rl .title{border-left:1px solid var(--line);padding-left:20px}.rl h1{font:20px Georgia,serif;margin:0 0 3px}.rl .title span{font-size:10px;color:var(--muted);letter-spacing:.4px}
.rl .round-id{margin-left:auto;font-size:10px;letter-spacing:1.4px;color:var(--muted)}
.rl .icon-button{min-height:34px;padding:6px 14px;font-size:11px;background:transparent}
.rl .icon-button[aria-pressed=true]{background:#263a2e;border-color:#af966b;color:#f5ddb0}

/* --- stage: the wheel with broadcast overlays --- */
.rl .stage{display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#12211a,#070b09 75%);margin-top:12px;border:1px solid #1f2b24}
.rl .screen{position:relative;width:min(100%,calc((100vh - 440px)*1.846));min-width:min(100%,560px);overflow:hidden}
.rl canvas{display:block;width:100%;height:auto;aspect-ratio:1200/650}
.rl .stage-caption{position:absolute;bottom:62px;left:16px;font-size:8px;letter-spacing:2px;color:#ddd4bf}.rl .stage-caption span{display:block;margin-top:5px;color:#93a18e}
.rl .banner{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:7px 20px 7px 8px;border-radius:30px;background:#07100ccc;border:1px solid #d1b37b88;backdrop-filter:blur(6px);font:600 14px Georgia,serif;letter-spacing:2px;white-space:nowrap;color:#f4e7c6;transition:background .3s,border-color .3s}
.rl .banner:not(.timed){padding-left:20px}.rl .banner:not(.timed) .timer{display:none}
.rl .banner[data-tone=closing]{border-color:#f0a43a;color:#ffd79a;animation:rl-pulse 1s ease-in-out infinite}
.rl .banner[data-tone=closed]{border-color:#c75a4a;background:#1a0b09d9;color:#ffd2c4}
.rl .banner[data-tone=result]{opacity:0}
@keyframes rl-pulse{50%{box-shadow:0 0 0 5px #f0a43a33}}
.rl .timer{width:34px;height:34px;transform:rotate(-90deg)}.rl .timer circle{fill:none;stroke-width:4}.rl .timer-track{stroke:#ffffff22}
.rl .timer-ring{stroke:var(--gold);stroke-dasharray:100;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.rl .banner[data-tone=closing] .timer-ring{stroke:#f0a43a}
.rl .timer text{transform:rotate(90deg);transform-origin:22px 22px;fill:#fff;font:700 15px Arial,sans-serif;text-anchor:middle;dominant-baseline:central}
.rl .result-disc{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:92px;height:92px;border-radius:50%;display:grid;place-content:center;text-align:center;border:3px solid #f1d58d;box-shadow:0 6px 30px #000c,inset 0 0 18px #0006;animation:rl-pop .45s cubic-bezier(.2,1.6,.4,1)}
.rl .result-disc b{font:700 40px Georgia,serif;line-height:1}.rl .result-disc span{font-size:9px;letter-spacing:2px;margin-top:2px}
.rl .result-disc.red{background:radial-gradient(circle at 35% 30%,#e0343c,#8e0d15)}.rl .result-disc.black{background:radial-gradient(circle at 35% 30%,#4a4a4a,#0d0d0d)}.rl .result-disc.green{background:radial-gradient(circle at 35% 30%,#23b565,#0a5a30)}
@keyframes rl-pop{from{transform:translateX(-50%) scale(.3);opacity:0}}
.rl .win{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:16px 34px;border-radius:8px;background:#060a08d9;border:1px solid var(--gold);text-align:center;box-shadow:0 10px 50px #000;animation:rl-pop-center .5s cubic-bezier(.2,1.5,.4,1)}
.rl .win span{display:block;font-size:11px;letter-spacing:3px;color:#d8caa6}.rl .win b{display:block;font:700 38px Georgia,serif;color:#ffd978;margin-top:4px}
@keyframes rl-pop-center{from{transform:translate(-50%,-50%) scale(.4);opacity:0}}
.rl .recent{position:absolute;left:10px;top:10px;bottom:10px;display:flex}
.rl .recent ol{list-style:none;margin:0;padding:6px 5px;display:flex;flex-direction:column;gap:5px;background:var(--panel);border-radius:6px;border:1px solid #ffffff14;overflow:hidden}
.rl .recent li{width:28px;height:24px;display:grid;place-items:center;font:600 13px Georgia,serif;border-radius:3px;background:#1d1d1d}
.rl .recent li.red{color:#ff8f86}.rl .recent li.black{color:#e9e9e9}.rl .recent li.green{color:#6fe3a0}
.rl .recent li.latest{height:30px;font-size:16px;color:#fff}.rl .recent li.latest.red{background:var(--red)}.rl .recent li.latest.black{background:#000;border:1px solid #666}.rl .recent li.latest.green{background:var(--green)}
.rl .stats{position:absolute;right:10px;top:10px;width:172px;padding:9px 10px;background:var(--panel);border:1px solid #ffffff14;border-radius:6px;font-size:9px}
.rl .stats-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.rl .stats-title{width:30px;letter-spacing:1.2px;color:var(--muted)}
.rl .stats ol{list-style:none;display:flex;gap:3px;margin:0;padding:0}
.rl .stats li{width:28px;height:28px;border-radius:50%;display:grid;place-content:center;text-align:center;line-height:1;background:#1d1d1d;border:1px solid #ffffff22}
.rl .stats li.red{background:#8e1219}.rl .stats li.green{background:#0b6537}.rl .stats li b{font:600 11px Georgia,serif}.rl .stats li small{font-size:7px;color:#ffffffaa}
.rl .split-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:#333;margin-top:2px}.rl .split-bar i{flex:1 1 0}
.rl .split-bar .red{background:#c21b24}.rl .split-bar .green{background:#16924f}.rl .split-bar .black{background:#0c0c0c}
.rl .split-legend{display:flex;justify-content:space-between;margin-top:3px;color:#cfc6b0}

/* --- betting table --- */
.rl .table-area{margin-top:10px;padding:8px 14px 12px;border-radius:10px;background:radial-gradient(ellipse at 50% 0,#136045,var(--felt) 45%,var(--felt-dark));border:1px solid #2f6b50;box-shadow:inset 0 0 60px #00000070}
.rl .table-tabs{display:flex;align-items:center;gap:6px;margin-bottom:6px;min-height:32px}
.rl .table-tabs [role=tab]{min-height:30px;padding:5px 14px;font-size:11px;background:#00000040;border-color:#ffffff30}
.rl .table-tabs [aria-selected=true]{background:#f3e3b5;color:#10261b;border-color:#f3e3b5}
.rl .neighbours{display:flex;align-items:center;gap:6px;margin-left:10px;font-size:9px;letter-spacing:1.2px;color:#d7e3d5}
.rl .neighbours button{min-height:28px;width:30px;padding:0;background:#00000040}.rl .neighbours output{min-width:14px;text-align:center;font:700 14px Georgia,serif}
.rl .locked-note{margin-left:auto;font-size:10px;letter-spacing:1.4px;color:#ffd2c4;opacity:0;transition:opacity .3s}
body.rl.locked .locked-note{opacity:1}
.rl .layout-host,.rl .racetrack-host{display:flex;justify-content:center}
.rl .felt-svg{width:100%;max-width:1120px;height:auto;display:block;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:opacity .35s,filter .35s}
.rl .felt-svg.portrait{width:auto;max-width:100%;max-height:64vh}
.rl .felt-svg.locked,.rl .racetrack.locked{opacity:.62;filter:saturate(.7)}
.rl .felt-svg .hit{fill:transparent}
.rl .felt-svg .cell{stroke:#f4efe0c4;stroke-width:1.6px;vector-effect:non-scaling-stroke;transition:fill .12s}
.rl .felt-svg .n-red{fill:var(--red)}.rl .felt-svg .n-black{fill:var(--black)}.rl .felt-svg .n-green{fill:var(--green)}.rl .felt-svg .outside{fill:#ffffff05}
.rl .felt-svg .n-red.lit{fill:#e3353d}.rl .felt-svg .n-black.lit{fill:#4b4b4b}.rl .felt-svg .n-green.lit{fill:#22b866}.rl .felt-svg .outside.lit{fill:#ffffff26}
.rl .felt-svg .win-frame{fill:none;stroke:#ffd76a;stroke-width:3px;vector-effect:non-scaling-stroke;pointer-events:none}
.rl .felt-svg text{fill:#fbf6e8;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.rl .felt-svg .num{font:600 28px Georgia,serif}.rl .felt-svg .lbl{font:600 21px Arial,sans-serif;letter-spacing:1.5px}.rl .felt-svg .lbl.small{font-size:17px}
.rl .felt-svg .diamond{stroke:#f4efe0c4;stroke-width:1.4px;vector-effect:non-scaling-stroke}.rl .felt-svg .d-red{fill:#d01e28}.rl .felt-svg .d-black{fill:#0b0b0b}
.rl .chip{pointer-events:none;filter:drop-shadow(0 2px 2px #000a)}
.rl .chip-base{stroke:#0006;stroke-width:1px}.rl .chip-edge{fill:none;stroke:#fff}.rl .chip-face{stroke:#ffffff80;stroke-width:1px}
.rl .chip text,.rl .chip-value{fill:#fff;font-family:Arial,sans-serif;font-weight:700;text-anchor:middle;dominant-baseline:central}
.rl .chip-1 .chip-base{fill:#c9ced2}.rl .chip-1 .chip-face{fill:#eef0f2}.rl .chip-1 .chip-edge{stroke:#5d6a73}.rl .chip-1 text{fill:#1d2328}
.rl .chip-5 .chip-base{fill:#b71c1c}.rl .chip-5 .chip-face{fill:#e53935}
.rl .chip-25 .chip-base{fill:#1b6e36}.rl .chip-25 .chip-face{fill:#2f9a54}
.rl .chip-100 .chip-base{fill:#161616}.rl .chip-100 .chip-face{fill:#383838}
.rl .chip-500 .chip-base{fill:#5b1788}.rl .chip-500 .chip-face{fill:#8a2cb8}
.rl .chip-glow{fill:#ffd76a33;stroke:#ffd76a;stroke-width:3px;animation:rl-win-chip 1s ease-in-out 3}
.rl .chip.chip-lost{opacity:.3;transition:opacity .6s}
@keyframes rl-win-chip{50%{stroke-opacity:.25;fill-opacity:.4}}
.rl .dolly{pointer-events:none;animation:rl-drop .5s cubic-bezier(.3,1.4,.5,1)}
.rl .dolly-shadow{fill:#0009}.rl .dolly-body{stroke:#6f6450;stroke-width:1px}.rl .dolly-band{fill:none;stroke:#d9b45a;stroke-width:3px}.rl .dolly-top{fill:#fffdf5;stroke:#b8a77c;stroke-width:1.2px}
@keyframes rl-drop{from{opacity:0}}

/* racetrack */
.rl .racetrack{width:100%;max-width:900px;height:auto;display:block;user-select:none;-webkit-user-select:none;transition:opacity .35s,filter .35s}
.rl .rt-section{fill:#00000026;stroke:#f4efe0b0;stroke-width:1.5px;cursor:pointer;transition:fill .12s}.rl .rt-section:hover,.rl .rt-section:focus{fill:#ffffff1f}
.rl .rt-label{fill:#f0e6c8;font:600 18px Arial,sans-serif;letter-spacing:2px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.rl .rt-cell{cursor:pointer}.rl .rt-cell path{stroke:#f4efe0b0;stroke-width:1.5px;transition:fill .12s}
.rl .rt-red path{fill:var(--red)}.rl .rt-black path{fill:var(--black)}.rl .rt-green path{fill:var(--green)}
.rl .rt-cell text{fill:#fff;font:600 21px Georgia,serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.rl .rt-cell.lit path{stroke:#ffe7a0;stroke-width:3px}.rl .rt-red.lit path{fill:#e3353d}.rl .rt-black.lit path{fill:#4b4b4b}.rl .rt-green.lit path{fill:#22b866}
.rl .rt-cell.covered text{fill:#ffd978}.rl .rt-cell.winner path{stroke:#ffd76a;stroke-width:5px}
.rl .racetrack.locked .rt-section,.rl .racetrack.locked .rt-cell{cursor:default}

/* --- chips and actions --- */
.rl .console{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line)}
.rl .money span{display:block;font-size:9px;letter-spacing:1.6px;color:var(--muted)}.rl .money b{font:600 22px Georgia,serif;color:#f6ecd2}.rl .money.right{text-align:right}
.rl .actions{display:flex;gap:8px}.rl .action{min-width:78px}
.rl .chip-tray{display:flex;gap:8px;padding:4px 10px;border-radius:40px;background:#00000055;border:1px solid #ffffff12}
.rl .chip-button{width:54px;height:54px;min-height:0;padding:0;border-radius:50%;border:0;background:none;transition:transform .15s}
.rl .chip-button svg{width:100%;height:100%;display:block}
.rl .chip-button[aria-checked=true]{transform:translateY(-6px) scale(1.08);filter:drop-shadow(0 0 8px #ffd978aa)}
.rl .chip-button[aria-checked=true] svg{outline:2px solid #ffd978;outline-offset:1px;border-radius:50%}
.rl .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;padding:11px 20px;border-radius:6px;background:#1c0e0bf2;border:1px solid #c75a4a;color:#ffe2d8;font-size:13px;box-shadow:0 8px 30px #000a}

/* --- studio tools and footer --- */
.rl .dev{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}
.rl .dev .views,.rl .dev .camera-controls{display:flex;gap:4px;align-items:center}.rl .dev button{min-height:32px;padding:5px 11px;font-size:10px;border-radius:3px}
.rl .dev button[aria-pressed=true]{background:#263a2e;color:#efd9b0;border-color:#af966b}.rl .camera-controls>span{font-size:8px;letter-spacing:1.4px;margin-right:4px}
.rl footer{font-size:10px;line-height:1.8;color:#7f8b80;padding:14px 0 24px;word-break:break-word}

@media(max-width:700px){
.rl .app{padding:0 8px}.rl .topbar{height:48px;gap:12px}.rl .brand{font-size:16px;letter-spacing:3px}.rl .brand span{font-size:6px;letter-spacing:3px}
.rl .title{padding-left:12px}.rl h1{font-size:17px}.rl .title span{display:none}.rl .round-id{font-size:9px}
.rl .stage{margin-top:8px}.rl .screen{width:100%;min-width:0}
.rl .stats{display:none}
.rl .recent{left:6px;right:6px;top:6px;bottom:auto}.rl .recent ol{flex-direction:row;padding:4px}.rl .recent li{width:24px;height:22px;font-size:11px}.rl .recent li.latest{height:22px;font-size:13px}
.rl .recent li:nth-child(n+10){display:none}
/* The dealer stands left of centre at the top of the picture: results and the winning number sit
   over the table on the right instead of across his head. */
.rl .recent{left:auto;right:6px}.rl .recent li:nth-child(n+6){display:none}
.rl .banner{bottom:8px;font-size:11px;padding:4px 14px 4px 5px;letter-spacing:1px}.rl .timer{width:28px;height:28px}
.rl .result-disc{top:38px;left:auto;right:8px;transform:none;width:64px;height:64px;animation-name:rl-pop-corner}.rl .result-disc b{font-size:28px}.rl .result-disc span{font-size:7px}
.rl .win{padding:10px 20px}.rl .win b{font-size:28px}
.rl .table-area{padding:6px 6px 8px}.rl .neighbours{margin-left:4px;gap:4px}.rl .locked-note{font-size:9px}
.rl .console{grid-template-columns:1fr 1fr;grid-template-areas:"balance total" "chips chips" "left right";gap:10px 8px}
.rl .console .money:first-child{grid-area:balance}.rl .console .money.right{grid-area:total}.rl .chip-tray{grid-area:chips;justify-content:center}
.rl .actions-left{grid-area:left}.rl .actions-right{grid-area:right;justify-content:flex-end}
.rl .chip-button{width:48px;height:48px}.rl .action{min-width:0;flex:1}.rl .money b{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.rl *{animation:none!important;transition:none!important}}

/* Shared-base rules that also match live-table elements: neutralized on this page only. */
.rl .stage-caption{top:auto}.rl .console{min-height:0;justify-content:normal}.rl .sound-controls{padding:0}
.rl .dev .views{position:static}.rl .dev .camera-controls{padding:0;border-bottom:0}.rl .dev .views button{backdrop-filter:none}
.rl .dev output{font:10px Arial,sans-serif;min-width:0;color:var(--muted)}
.rl [hidden]{display:none!important}

/* --- one camera look over the rendered wheel and the dealer footage ---
   The wheel renders at display resolution with no noise, which reads as computer graphics next to
   the soft, grainy dealer camera: soften it a little, and put the same grain and lens falloff over
   both pictures. */
.rl canvas{filter:blur(.45px) contrast(.95) saturate(.9)}
.rl .lens{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(ellipse 80% 75% at 50% 45%,#0000 58%,#00000066)}
.rl .lens::after{content:"";position:absolute;inset:-60px;opacity:.09;mix-blend-mode:overlay;
  background: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:rl-grain .5s steps(5) infinite}
@media(prefers-reduced-motion:reduce){.rl .lens::after{animation:none}}
@keyframes rl-grain{20%{transform:translate(-23px,17px)}40%{transform:translate(31px,-9px)}60%{transform:translate(-13px,-29px)}80%{transform:translate(19px,27px)}}

/* --- immersive desktop: the studio feed fills the window and the table floats over it ---
   As on a live broadcast table: the betting layout sits over the lower half of the picture while
   bets are open, sinks away for the spin so the wheel and ball are in full view, and returns with
   the result. Portrait and narrow screens keep the stacked layout above. */
@media (min-width:900px) and (min-aspect-ratio:4/3) and (min-height:560px){
  html:has(>body.rl),body.rl{height:100%;overflow:hidden}
  .rl .app{max-width:none;padding:0}
  .rl .stage{position:fixed;inset:0;margin:0;border:0;background:#000}
  .rl .screen{width:100%;height:100%;min-width:0}
  .rl canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .rl .topbar{position:fixed;top:0;left:0;right:0;z-index:4;height:52px;padding:0 20px;border:0;
    background:linear-gradient(#000000b0,#0000)}
  .rl .recent{top:64px;bottom:auto;left:14px;max-height:calc(100vh - 200px)}
  .rl .stats{top:64px;right:14px}
  .rl .banner{top:64px;bottom:auto}
  /* Beside the results column, clear of the dealer, who stands at the centre of the picture. */
  .rl .result-disc{top:64px;left:64px;transform:none;width:104px;height:104px;animation-name:rl-pop-corner}
  .rl .result-disc b{font-size:46px}
  .rl .table-area{position:fixed;z-index:3;left:50%;bottom:92px;width:min(1080px,66vw);margin:0;
    padding:6px 12px 10px;background:#06301fcc;border-color:#ffffff26;backdrop-filter:blur(4px);
    transform:translateX(-50%) perspective(1600px) rotateX(16deg);transform-origin:50% 100%;
    transition:transform .5s cubic-bezier(.3,.7,.3,1),opacity .4s}
  body.rl[data-phase=closed] .table-area,body.rl[data-phase=spinning] .table-area,body.rl.landing .table-area{
    transform:translateX(-50%) perspective(1600px) rotateX(16deg) translateY(calc(100% + 110px));opacity:0;pointer-events:none}
  .rl .console{position:fixed;z-index:4;left:0;right:0;bottom:18px;padding:8px 24px;border:0;
    background:linear-gradient(#0000,#000000c0 45%)}
  /* Above the table, under the banner: never over a betting cell it would swallow clicks from. */
  .rl .toast{top:118px;bottom:auto;pointer-events:none}
  /* The table is back up for the result, and it paints over the stage: the win sits above it. */
  .rl .win{top:30%}
  .rl footer{position:fixed;z-index:4;left:0;right:0;bottom:0;padding:0 24px 4px;font-size:9px;line-height:14px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#000000c0;color:#8f9a90}
  /* One line: the simulation and AI-footage disclosures first, then the fairness commitment. */
  .rl footer br,.rl #renderer-note,.rl #exposure-note{display:none}
  .rl #fairness::before{content:" · "}
  .rl .dev{position:fixed;z-index:5;top:52px;left:50%;transform:translateX(-50%);border:0;background:#000a;padding:6px 10px;border-radius:6px}
}
@keyframes rl-pop-corner{from{transform:scale(.3);opacity:0}}
@media (min-width:900px) and (min-aspect-ratio:4/3) and (min-height:560px) and (prefers-reduced-motion:reduce){
  body.rl[data-phase=closed] .table-area,body.rl[data-phase=spinning] .table-area,body.rl.landing .table-area{transform:translateX(-50%);opacity:0}
}

/* --- statistics panel and the long results column (Evolution keeps dozens of results on screen) --- */
.rl .stats-grid{display:grid;grid-template-columns:repeat(2,auto 1fr);gap:3px 8px;margin:8px 0 0;font-size:9px}
.rl .stats-grid dt{color:var(--muted);letter-spacing:.4px;white-space:nowrap}.rl .stats-grid dd{margin:0;color:#f1e7cc;text-align:right;font-weight:600}
.rl .stats-foot{margin-top:6px;font-size:8px;letter-spacing:1px;color:var(--muted);text-align:right}
.rl .recent ol{overflow:hidden;flex-wrap:nowrap}
@media (min-width:900px) and (min-aspect-ratio:4/3) and (min-height:560px){
  .rl .stats{width:212px}
  /* The timer sits low over the table edge, clear of the dealer's face (Evolution keeps it off the presenter). */
  .rl .banner{top:auto;bottom:calc(92px + min(1080px,66vw)*.30 + 18px)}
  body.rl[data-phase=closed] .banner,body.rl[data-phase=spinning] .banner{bottom:110px}
  .rl .recent ol{max-height:calc(100vh - 220px)}
}
@media(max-width:700px){.rl .stats-grid{display:none}}

/* --- phones in portrait: the full-screen picture, as Evolution's mobile roulette ---
   The dealer camera (cropped to him) and the wheel camera fill the screen. Everything floats over it: the bar and
   results across the top, the timer under them, and while bets are open the board as a bottom sheet over the lower
   part of the picture, with the chips and actions on the bottom edge. For the spin the sheet sinks away and the wheel
   has the whole screen; it comes back after the landing shot. */
@media (max-width:640px) and (orientation:portrait){
  html:has(>body.rl),body.rl{height:100%;overflow:hidden;overscroll-behavior:none}
  .rl .app{max-width:none;padding:0}
  .rl .stage{position:fixed;inset:0;margin:0;border:0;background:#000}
  .rl .screen{width:100%;height:100%;min-width:0}
  .rl canvas{width:100%;height:100%;aspect-ratio:auto}
  .rl .dealer-camera video{object-position:50% 30%}
  .rl .topbar{position:fixed;top:0;left:0;right:0;z-index:4;height:44px;padding:0 10px;border:0;gap:10px;
    background:linear-gradient(#000000c0,#0000)}
  .rl .topbar .brand{font-size:14px}.rl .topbar h1{font-size:15px}.rl .round-id{display:none}
  .rl .icon-button{min-height:30px;padding:4px 10px;font-size:10px}
  .rl .recent{top:46px;left:8px;right:8px;bottom:auto}
  .rl .recent ol{flex-direction:row;padding:3px;gap:3px;background:#000000a0}
  .rl .recent li{width:24px;height:22px;font-size:11px;flex:none}.rl .recent li.latest{height:22px;font-size:13px}
  .rl .recent li:nth-child(n+6){display:grid}.rl .recent li:nth-child(n+14){display:none}
  .rl .stats{display:none}
  /* over his chest, just above the sheet: never across his face */
  .rl .banner{top:auto;bottom:calc(50vh + 150px);bottom:calc(50dvh + 150px);font-size:11px;padding:4px 14px 4px 5px;letter-spacing:1px}
  body.rl[data-phase=closed] .banner,body.rl[data-phase=spinning] .banner{bottom:130px}
  .rl .timer{width:28px;height:28px}
  .rl .result-disc{top:78px;right:10px;left:auto;transform:none;width:68px;height:68px;animation-name:rl-pop-corner}
  .rl .result-disc b{font-size:30px}.rl .result-disc span{font-size:7px}
  .rl .win{top:34%}
  /* the bottom sheet: the vertical board, as tall as fits above the chips */
  .rl .table-area{position:fixed;z-index:3;left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));bottom:calc(118px + env(safe-area-inset-bottom));margin:0;padding:4px 6px 6px;
    background:#05281acc;border:1px solid #ffffff26;border-radius:12px 12px 8px 8px;backdrop-filter:blur(3px);
    transition:transform .45s cubic-bezier(.3,.7,.3,1),opacity .35s}
  .rl .table-tabs{min-height:28px;margin-bottom:2px}.rl .table-tabs [role=tab]{min-height:26px;padding:3px 10px;font-size:10px}
  /* about half the screen: the dealer stays in view above the sheet, as on Evolution's phone table */
  .rl .felt-svg.portrait{max-height:calc(50vh - 40px);max-height:calc(50dvh - 40px);width:auto;margin:0 auto}
  .rl canvas[data-renderer=classic]{object-fit:contain}
  .rl .racetrack{max-height:calc(50dvh - 40px)}
  body.rl[data-phase=closed] .table-area,body.rl[data-phase=spinning] .table-area,body.rl.landing .table-area,
  body.rl[data-phase=connecting] .table-area{transform:translateY(calc(100% + 130px));opacity:0;pointer-events:none}
  /* everything inside the screen and its safe area from 360 px up: the chips shrink before anything is cut */
  .rl .console{position:fixed;z-index:4;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));
    padding:6px max(6px,env(safe-area-inset-right)) 2px max(6px,env(safe-area-inset-left));border:0;gap:2px 6px;
    background:linear-gradient(#0000,#000000d0 35%);box-sizing:border-box;width:100%;max-width:100vw;
    grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"left chips right" "balance balance total";align-items:center}
  .rl .console .money:first-child{grid-area:balance;min-width:0}.rl .console .money.right{grid-area:total;justify-content:flex-end;min-width:0}
  .rl .money{display:flex;gap:5px;align-items:baseline;white-space:nowrap}.rl .money span{font-size:8px;letter-spacing:1px}.rl .money b{font-size:14px}
  .rl .chip-tray{grid-area:chips;justify-content:center;gap:3px;padding:3px 4px;min-width:0}
  .rl .chip-button{width:clamp(30px,calc((100vw - 150px) / 5 - 4px),40px);height:clamp(30px,calc((100vw - 150px) / 5 - 4px),40px);flex:none}
  .rl .chip-button[aria-checked=true]{transform:translateY(-4px) scale(1.05)}
  .rl .actions{flex-direction:column;gap:4px}.rl .actions-left{grid-area:left}.rl .actions-right{grid-area:right}
  .rl .action{min-height:28px;min-width:0;width:56px;padding:3px 4px;font-size:10px;flex:none}
  .rl .toast{top:110px;bottom:auto;pointer-events:none}
  .rl footer{position:fixed;z-index:4;left:0;right:0;bottom:0;padding:0 10px 2px;font-size:8px;line-height:14px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#000000d0;color:#8f9a90}
  .rl footer br,.rl #renderer-note,.rl #exposure-note,.rl #fairness{display:none}
  .rl .dev{position:fixed;z-index:5;top:44px;left:6px;right:6px;border:0;background:#000a;padding:4px;border-radius:6px}
}
@media (max-width:640px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
  body.rl[data-phase=closed] .table-area,body.rl[data-phase=spinning] .table-area,body.rl.landing .table-area{transform:none;opacity:0}
}