:root { color-scheme: dark; --bg:#08110d; --panel:#102019; --gold:#e6c56a; --ink:#f6f1e4; --muted:#c9d5cc; --line:rgba(230,197,106,.4); --danger:#ffb4b4; }
* { box-sizing: border-box; }
body { margin:0; min-height:100dvh; background:radial-gradient(circle at 50% 0%, #163024, var(--bg) 42%); color:var(--ink); font-family:Outfit, "Segoe UI", sans-serif; }
button, a { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.room-top, .room-controls, .room-note, .msg { width:min(1100px, calc(100% - 28px)); margin-left:auto; margin-right:auto; }
.room-top { display:flex; align-items:end; justify-content:space-between; gap:16px; padding:18px 0; }
.room-top h1 { margin:0; font-family:Fraunces, Georgia, serif; font-size:clamp(32px, 4vw, 52px); line-height:1; }
.eyebrow, .who, .credit-pill span, .amount small { letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-size:12px; }
.back, .side-tools button, #clear { color:var(--ink); text-decoration:none; background:#13261d; border:1px solid var(--line); border-radius:999px; min-height:44px; padding:0 16px; }
.credit-pill { min-width:140px; padding:10px 14px; border-radius:16px; background:#07140f; border:1px solid var(--line); }
.credit-pill strong { display:block; font-size:28px; font-variant-numeric:tabular-nums; }
.reel-stage, .felt, .wheel-layout { width:min(1100px, calc(100% - 28px)); margin:0 auto; }
.reel-stage { padding:12px; border-radius:28px; background:linear-gradient(135deg,#f0d48a,#8a6428 40%,#f6e2a8 70%,#6d5420); }
#reels { width:100%; height:auto; display:block; border-radius:18px; background:#07110e; }
.room-controls { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
.amount, .side-tools { display:flex; align-items:center; gap:8px; }
.amount { padding:6px; border-radius:999px; background:#07140f; border:1px solid var(--line); }
.amount button, .side-tools button, #clear { min-width:44px; min-height:44px; }
.amount button { border:0; border-radius:50%; background:var(--gold); color:#241806; font-size:22px; }
.amount span { min-width:88px; text-align:center; }
.amount strong { display:block; font-size:22px; font-variant-numeric:tabular-nums; }
.play { min-width:148px; min-height:64px; border:0; border-radius:999px; background:radial-gradient(circle at 50% 30%, #fff1c4, var(--gold) 42%, #8a6428); color:#241806; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.play:disabled { opacity:.45; cursor:not-allowed; }
.msg { min-height:28px; text-align:center; color:var(--gold); }
.room-note { color:var(--muted); font-size:14px; line-height:1.5; text-align:center; padding-bottom:28px; }
.felt { display:grid; gap:18px; padding:28px 18px; border-radius:28px; background:radial-gradient(circle at 50% 40%, #1d5a3d, #0c2418 70%); border:1px solid var(--line); }
.cards { min-height:126px; display:flex; gap:10px; flex-wrap:wrap; }
.card { width:84px; height:120px; border-radius:12px; background:#f7f3ea; color:#1b1b1b; display:flex; flex-direction:column; justify-content:space-between; padding:8px; box-shadow:0 8px 18px #0006; }
.card b { font-size:24px; } .card i { font-style:normal; font-size:26px; align-self:end; }
.card.red { color:#9d2b35; } .card.back { background:repeating-linear-gradient(45deg,#12382a,#12382a 8px,#0c2418 8px,#0c2418 16px); border:4px solid var(--gold); }
.wheel-layout { display:grid; grid-template-columns:minmax(240px,.7fr) 1fr; gap:18px; align-items:center; }
#wheel { width:100%; height:auto; }
.number-grid, .outside { display:flex; flex-wrap:wrap; gap:6px; }
.n, .outside button { min-width:44px; min-height:44px; border-radius:10px; border:1px solid transparent; color:#f6f1e4; }
.n.red { background:#9d2b35; } .n.black { background:#17191d; } .n.green, .outside button { background:#12382a; border-color:var(--line); }
.picks { min-height:44px; margin-bottom:8px; color:var(--muted); }
dialog { max-width:560px; color:var(--ink); background:#102019; border:1px solid var(--line); border-radius:20px; }
dialog h2 { font-family:Fraunces, Georgia, serif; }
dialog li { margin:6px 0; }
.gate { max-width:560px; margin:15vh auto; padding:24px; text-align:center; }
@media (max-width:800px) { .wheel-layout, .room-top { grid-template-columns:1fr; display:grid; } .room-top { align-items:start; } .card { width:68px; height:98px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; } }

:root{--bg:#0a0716;--panel:#170f2e;--gold:#ff5fd2;--ink:#f7f2ff;--muted:#d2c9ea;--line:rgba(255,95,210,.38);}
h1,h2,h3,.brand,.room-top h1,dialog h2{font-family:Unbounded,"Segoe UI",sans-serif;font-weight:600;letter-spacing:-.01em}h1{text-shadow:0 0 28px rgba(255,95,210,.45)}.kicker,.eyebrow,.who,.credit-pill span,.amount small{color:#5ff4ff}.brand{font-size:19px}input,select,textarea,.credit-pill,.amount{background:#0d0920}.back,.side-tools button,#clear,dialog{background:#1b1236}.reel-stage{background:linear-gradient(135deg,#ff5fd2,#5a2a9c 40%,#5ff4ff 70%,#3a1a6e)}#reels{background:#0b0718}.play{background:radial-gradient(circle at 50% 30%,#ffe3f7,var(--gold) 42%,#7a1f73)}.modal,.gate{overflow-y:auto;overscroll-behavior:contain}.modal .card,.gate .card{margin:auto}.legal th,.legal td{overflow-wrap:anywhere}@media (max-width:640px){.legal th,.legal td{padding:6px;font-size:13px}}
body{background:radial-gradient(circle at 50% 0%,#2a1050,var(--bg) 42%)}.felt{background:radial-gradient(circle at 50% 40%,#3a1a6e,#140a2c 70%)}.card.back{background:repeating-linear-gradient(45deg,#2a1050,#2a1050 8px,#140a2c 8px,#140a2c 16px)}.outside button{background:#1f1240}