: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:#08110d;--panel:#12241b;--gold:#e6c56a;--ink:#f6f1e4;--muted:#c9d5cc;--line:rgba(230,197,106,.38);}