/* Lobby + game screens. Builds on the tokens defined in index.html. */
:root { --pink:#ff5fa2; --blue:#6aa8ff; --violet:#b18cff; --orange:#ff8a3d; --gold:#ffd34d; --magenta:#f06bff; --card:#0f1630; }

/* ---------- lobby ---------- */
.lobby-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:4px 2px 10px; }
.lobby-head h1 { margin:0; font-size:22px; letter-spacing:.02em; }
.ggrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width:600px) { .ggrid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.gcard { --c:var(--amber); position:relative; overflow:hidden; text-align:left; color:var(--ink); cursor:pointer;
  background:radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--c) 28%, transparent) 0%, transparent 60%), var(--card);
  border:1px solid color-mix(in srgb, var(--c) 35%, var(--line)); border-radius:16px; padding:12px; min-height:150px;
  display:flex; flex-direction:column; justify-content:space-between; gap:8px; font-family:var(--display);
  transition:transform .15s ease, border-color .15s ease; }
.gcard:hover, .gcard:focus-visible { transform:translateY(-2px); border-color:var(--c); outline:none; }
.gcard:active { transform:scale(.98); }
.gcard .gart { width:64px; height:64px; color:var(--c); }
.gcard .gart svg { width:100%; height:100%; display:block; }
.gcard b { display:block; font-size:17px; letter-spacing:.02em; }
.gcard .gdesc { display:block; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.35; }
.gcard .gbadge { position:absolute; top:10px; right:10px; font:700 11px var(--mono); padding:3px 7px; border-radius:999px;
  background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--c); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.gcard.feature { grid-column:1 / -1; min-height:132px; flex-direction:row; align-items:center; }
.gcard.feature .gart { width:104px; height:80px; flex:none; }
.gcard.feature b { font-size:22px; }
.gcard.feature .glive { font:700 30px var(--mono); color:var(--c); font-variant-numeric:tabular-nums; margin-top:4px; }
.gcard.feature .glive.crash { color:var(--loss); }
.gcard .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--win); margin-right:5px; box-shadow:0 0 0 3px color-mix(in srgb, var(--win) 25%, transparent); }

.econ { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-bottom:14px; }
@media (max-width:420px) { .econ { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.econ > div { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:9px 10px; min-width:0; }
.econ b { display:block; font:700 18px var(--mono); margin-top:3px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.econ b.d { color:var(--gem); } .econ b.c { color:var(--amber); }
.econ .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--win); margin-right:4px; vertical-align:1px; }

/* ---------- game frame ---------- */
.gbar { display:flex; align-items:center; gap:10px; }
.gbar h2 { margin:0; font-size:18px; flex:1; min-width:0; }
.gbar .gnote { font:11px var(--mono); color:var(--muted); }
.back { background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:8px 12px; font:600 14px var(--display); cursor:pointer; }
.gview { display:flex; flex-direction:column; gap:12px; }
.gstage { position:relative; border-radius:16px; border:1px solid var(--line); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gc, var(--blue)) 16%, transparent) 0%, transparent 65%), var(--card);
  padding:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:240px; }
.gpanel { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px) { .gpanel { grid-template-columns:1fr; } }
.gpanel .col { display:flex; flex-direction:column; gap:10px; min-width:0; }
.seg { display:flex; gap:6px; flex-wrap:wrap; }
.seg button { flex:1; min-width:44px; background:var(--sky); border:1px solid var(--line); color:var(--muted); font:600 13px var(--display); border-radius:8px; padding:8px 6px; cursor:pointer; }
.seg button.on { color:var(--ink); border-color:var(--gc, var(--amber)); background:color-mix(in srgb, var(--gc, var(--amber)) 14%, var(--sky)); }
.play { border:0; border-radius:12px; min-height:56px; font:700 17px var(--display); letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
  background:var(--win); color:#052012; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px; }
.play small { font:12px var(--mono); text-transform:none; letter-spacing:0; opacity:.85; }
.play.cash { background:var(--amber); color:#2a1a00; }
.play.alt { background:var(--sky); color:var(--ink); border:1px solid var(--line); }
.play:disabled { filter:grayscale(.7) brightness(.6); cursor:not-allowed; }
.kv { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.kv div { background:var(--sky); border:1px solid var(--line); border-radius:10px; padding:8px; min-width:0; }
.kv b { display:block; font:700 15px var(--mono); margin-top:2px; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; }
.big { font:700 clamp(44px, 13vw, 72px) var(--mono); font-variant-numeric:tabular-nums; line-height:1; }
.big.win { color:var(--win); } .big.lose { color:var(--loss); }
.ghist table td small { color:var(--muted); }
.fairbar { font:11px var(--mono); color:var(--muted); line-height:1.6; word-break:break-all; display:flex; flex-direction:column; gap:4px; }
.fairbar b { color:var(--ink); font-weight:400; }
.fairbar button { align-self:flex-start; background:none; border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:4px 10px; font:12px var(--display); cursor:pointer; }
.paytable { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.paytable span { font:12px var(--mono); padding:4px 8px; border-radius:999px; background:var(--sky); border:1px solid var(--line); }

/* ---------- mines ---------- */
.mgrid { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; width:100%; max-width:360px; }
.tile { aspect-ratio:1; border-radius:10px; border:1px solid #2c3a63; background:linear-gradient(180deg, #24325a, #1a2546); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; transition:transform .12s ease, background .2s; color:var(--ink); }
.tile:hover:not(:disabled) { transform:translateY(-2px); background:linear-gradient(180deg, #2c3d6b, #1f2c52); }
.tile:disabled { cursor:default; }
.tile svg { width:62%; height:62%; }
.tile.gem { background:color-mix(in srgb, var(--win) 14%, var(--sky)); border-color:color-mix(in srgb, var(--win) 50%, transparent); }
.tile.bomb { background:color-mix(in srgb, var(--loss) 18%, var(--sky)); border-color:var(--loss); }
.tile.ghost { opacity:.45; }
.tile.pop { animation:pop .25s ease; }
@keyframes pop { 40% { transform:scale(1.12); } }
.mhud { display:flex; gap:10px; width:100%; max-width:360px; }
.mhud div { flex:1; background:var(--sky); border:1px solid var(--line); border-radius:10px; padding:8px; text-align:center; }
.mhud b { display:block; font:700 18px var(--mono); }

/* ---------- plinko ---------- */
.plinko-wrap { width:100%; max-width:520px; }
.plinko-wrap canvas { width:100%; aspect-ratio:1 / .82; display:block; }
.pslots { display:grid; grid-template-columns:repeat(13, 1fr); gap:3px; width:92.86%; margin:4px auto 0; } /* 13 of 14 peg gaps, lined up under the board */
.pslots span { font:700 9px var(--mono); text-align:center; padding:6px 0; border-radius:6px; color:#0a0f1f; transition:transform .15s; }
.pslots span.hit { transform:translateY(4px) scale(1.08); box-shadow:0 0 0 2px #fff; }
@media (min-width:480px) { .pslots span { font-size:11px; } }

/* ---------- dice ---------- */
.dtrack { position:relative; width:100%; max-width:480px; height:14px; border-radius:999px; overflow:hidden; display:flex; }
.dtrack i { display:block; height:100%; }
.dmark { position:absolute; top:-30px; transform:translateX(-50%); font:700 13px var(--mono); padding:3px 6px; border-radius:6px; background:var(--ink); color:var(--sky); transition:left .5s cubic-bezier(.2,.8,.2,1); }
.dwrap { position:relative; width:100%; max-width:480px; padding-top:34px; }
.drange { width:100%; accent-color:var(--gc); }
.dscale { display:flex; justify-content:space-between; font:11px var(--mono); color:var(--muted); width:100%; max-width:480px; }

/* ---------- wheel ---------- */
.wheel-wrap { position:relative; width:min(300px, 80vw); aspect-ratio:1; }
.wheel-wrap canvas { width:100%; height:100%; }
.wheel-pin { position:absolute; left:50%; top:-6px; transform:translateX(-50%); width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-top:22px solid var(--ink); filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.wheel-center { position:absolute; inset:34%; border-radius:50%; background:var(--card); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font:700 20px var(--mono); }

/* ---------- coin ---------- */
.coin-scene { perspective:800px; width:150px; height:150px; }
.coin { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1.4s cubic-bezier(.2,.75,.2,1); }
.coin .face { position:absolute; inset:0; border-radius:50%; backface-visibility:hidden; display:flex; align-items:center; justify-content:center;
  font:700 52px var(--display); box-shadow:inset 0 0 0 8px rgba(0,0,0,.18), inset 0 0 0 12px rgba(255,255,255,.18); }
.coin .heads { background:radial-gradient(circle at 35% 30%, #ffe89a, #e0a419 70%); color:#7a4d00; }
.coin .tails { background:radial-gradient(circle at 35% 30%, #f1f5ff, #9aa6c4 70%); color:#3c4766; transform:rotateY(180deg); }

/* ---------- roulette ---------- */
.rstrip-wrap { position:relative; width:100%; overflow:hidden; border-radius:12px; border:1px solid var(--line); background:var(--sky); padding:10px 0; }
.rstrip { display:flex; gap:6px; will-change:transform; }
.rstrip span { flex:none; width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center; font:700 18px var(--mono); }
.rc-red { background:#e23b4e; color:#fff; } .rc-black { background:#222b45; color:#fff; } .rc-green { background:#20b26b; color:#04140c; }
.rmarker { position:absolute; left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%); background:var(--gold); box-shadow:0 0 12px var(--gold); z-index:1; }
.rbets { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.rbets button { border:0; border-radius:12px; min-height:60px; font:700 15px var(--display); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.rbets button small { font:12px var(--mono); opacity:.9; }
.rbets button:disabled { filter:grayscale(.6) brightness(.6); }

/* ---------- hi-lo ---------- */
.pcard { width:110px; height:156px; border-radius:12px; background:#f6f7fb; color:#1b2033; display:flex; flex-direction:column; justify-content:space-between; padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45); font-family:var(--display); }
.pcard.red { color:#d42a40; }
.pcard .r { font:700 30px var(--display); line-height:1; }
.pcard .s { font-size:46px; text-align:center; line-height:1; }
.pcard .r2 { transform:rotate(180deg); align-self:flex-end; }
.pcard.deal { animation:deal .35s ease; }
@keyframes deal { from { transform:translateY(-18px) rotate(-6deg); opacity:0; } }
.crow { display:flex; gap:6px; overflow-x:auto; max-width:100%; padding:2px; scrollbar-width:none; }
.crow span { flex:none; font:700 12px var(--mono); padding:5px 7px; border-radius:6px; background:#f6f7fb; color:#1b2033; }
.crow span.red { color:#d42a40; }
.crow em { flex:none; align-self:center; font-style:normal; font-size:11px; color:var(--muted); }
.hlbtns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* ---------- slots ---------- */
.reels { display:flex; gap:10px; padding:14px; border-radius:16px; background:linear-gradient(180deg, #1a1030, #120a24); border:2px solid color-mix(in srgb, var(--magenta) 45%, transparent); }
.reel { width:84px; height:96px; border-radius:12px; background:#f6f7fb; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:inset 0 8px 14px rgba(0,0,0,.25), inset 0 -8px 14px rgba(0,0,0,.25); }
.reel.spin .sym { filter:blur(1.5px); transform:translateY(4px); }
.reel.win { box-shadow:0 0 0 3px var(--gold), 0 0 18px var(--gold); }
.sym { width:60px; height:60px; display:flex; align-items:center; justify-content:center; font-family:var(--display); }
.sym svg { width:100%; height:100%; }
.sym.t7 { font:900 54px var(--display); color:#e0263c; text-shadow:2px 2px 0 #8a0f20; }
.sym.tbar { font:900 18px var(--display); color:#fff; background:#1b2033; border-radius:6px; height:30px; width:64px; letter-spacing:.06em; }
.sym.tstar { font-size:50px; color:#f2b400; }
.sym.tgem { font-size:46px; color:#18a6d6; }

@media (prefers-reduced-motion:reduce) {
  .gcard, .tile, .coin, .dmark { transition:none; }
  .tile.pop, .pcard.deal { animation:none; }
}

/* ---------- keno ---------- */
.kgrid { display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; width:100%; max-width:440px; }
.kn { aspect-ratio:1; border-radius:8px; border:1px solid var(--line); background:var(--sky); color:var(--ink); font:700 13px var(--mono); cursor:pointer; padding:0; transition:transform .1s; }
.kn.pick { background:color-mix(in srgb, var(--gc) 22%, var(--sky)); border-color:var(--gc); }
.kn.drawn { background:#2a3354; color:var(--muted); }
.kn.hit { background:var(--gc); color:#062320; border-color:var(--gc); transform:scale(1.08); }
.paytable span.neg { color:var(--muted); }

/* ---------- towers ---------- */
.tower { display:flex; flex-direction:column; gap:6px; width:100%; max-width:380px; }
.trow { display:grid; grid-template-columns:58px 1fr; gap:8px; align-items:center; opacity:.65; }
.trow.cur { opacity:1; }
.trow .tm { font:700 12px var(--mono); color:var(--muted); text-align:right; }
.trow.cur .tm { color:var(--gc); }
.tdoors { display:grid; gap:6px; }
.door { height:36px; border-radius:8px; border:1px solid #2c3a63; background:linear-gradient(180deg, #24325a, #1a2546); color:var(--ink); font:700 15px var(--mono); cursor:pointer; padding:0; }
.trow.cur .door:not(:disabled) { border-color:var(--gc); box-shadow:0 0 0 1px color-mix(in srgb, var(--gc) 40%, transparent) inset; }
.door:disabled { cursor:default; }
.door.safe { background:color-mix(in srgb, var(--win) 18%, var(--sky)); color:var(--win); border-color:color-mix(in srgb, var(--win) 50%, transparent); }
.door.bomb { background:color-mix(in srgb, var(--loss) 20%, var(--sky)); color:var(--loss); border-color:var(--loss); }
.door.ghost { opacity:.45; }

/* ---------- cards on felt (blackjack, baccarat) ---------- */
.gstage.felt { background:radial-gradient(110% 80% at 50% 30%, #1d5a3f 0%, #10301f 70%); border-color:#235a40; }
.bjside { display:flex; flex-direction:column; align-items:center; gap:8px; }
.bjside .tag { color:#cfe9da; } .bjside .tag b { color:#fff; font:700 14px var(--mono); margin-left:4px; }
.hand { display:flex; min-height:100px; }
.hand .pcard + .pcard { margin-left:-26px; }
.pcard.sm { width:70px; height:100px; padding:6px 8px; border-radius:9px; }
.pcard.sm .r { font-size:20px; } .pcard.sm .s { font-size:28px; }
.pcard.back { background:repeating-linear-gradient(45deg, #b8364a 0 6px, #9a2a3c 6px 12px); border:3px solid #f6f7fb; }
.bacc { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
.felt .sub { color:#e6f5ec; }
.bk-p { background:#3b6fd8; color:#fff; } .bk-t { background:#20b26b; color:#04140c; } .bk-b { background:#d8414f; color:#fff; }

/* ---------- double ---------- */
.dstrip span { width:40px; height:48px; font-size:13px; }
.dc-grey { background:#59617f; color:#fff; } .dc-blue { background:#3b82f6; color:#fff; } .dc-green { background:#20b26b; color:#04140c; } .dc-gold { background:linear-gradient(180deg, #ffe08a, #e0a419); color:#3a2500; }
.dbets { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.dbets button { border:0; border-radius:12px; min-height:60px; font:700 16px var(--display); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.dbets button small { font:11px var(--mono); opacity:.9; }
.dbets button:disabled { filter:grayscale(.6) brightness(.6); }

/* ---------- scratch ---------- */
.scard { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding:12px; border-radius:16px; background:linear-gradient(135deg, #2b3456, #1a2140); border:2px dashed #46507a; width:min(300px, 86vw); }
.sc { aspect-ratio:1; border-radius:10px; border:0; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, #c8cedd 0 4px, #aeb6c9 4px 8px); }
.sc.open { background:#f6f7fb; cursor:default; animation:pop .25s ease; }
.sc.win { box-shadow:0 0 0 3px var(--gold), 0 0 14px var(--gold); }
.sc .sym { width:70%; height:70%; }
.sc .sym.t7 { font-size:40px; } .sc .sym.tbar { font-size:13px; width:90%; height:26px; } .sc .sym.tstar, .sc .sym.tgem { font-size:36px; }

/* ---------- rock paper scissors ---------- */
.rps { display:flex; align-items:center; justify-content:center; gap:18px; }
.rpsh { width:110px; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--gc); }
.rpsh svg { width:96px; height:96px; }
.rpsh.house { color:#c9d2ee; }
.rpsh.shake svg { animation:shake .3s ease-in-out infinite; }
@keyframes shake { 50% { transform:translateY(-8px) rotate(-6deg); } }
.vs { font:700 18px var(--display); color:var(--muted); }
.rpsb { background:var(--sky) !important; color:var(--ink); border:1px solid var(--line) !important; }
.rpsb svg { width:36px; height:36px; color:var(--gc); }

/* ---------- lucky number ---------- */
.lgrid { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; width:100%; max-width:360px; }
.ln { aspect-ratio:1; border-radius:50%; border:2px solid var(--line); background:var(--sky); color:var(--ink); font:700 22px var(--mono); cursor:pointer; padding:0; transition:transform .1s; }
.ln.pick { border-color:var(--gc); color:var(--gc); }
.ln.lit { background:color-mix(in srgb, var(--gc) 30%, var(--sky)); transform:scale(1.06); }
.ln.res { background:#2a3354; color:var(--ink); border-color:var(--ink); }
.ln.win { background:var(--gc); color:#120a2a; border-color:var(--gc); transform:scale(1.1); }

@media (prefers-reduced-motion:reduce) { .rpsh.shake svg, .sc.open { animation:none; } }