:root{
  --cabinet:#0a0e19; --panel:#0f1426; --ink:#e9f0ff; --muted:#99a7c1;
  --gold1:#ffe39a; --gold2:#ffca55; --gold3:#b37a19;
  --neonR:#ff3b4e; --neonB:#54d8ff; --line:#ff4b58;
  --radius:18px; --shadow:0 10px 28px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{margin:0; font-family: ui-sans-serif, system-ui,-apple-system, Segoe UI, Roboto, Helvetica, Arial; background:radial-gradient(1400px 900px at 80% -20%, #24335c 0%, #0b0f1a 60%); color:var(--ink);}    
.game{ width:min(1100px,98vw); margin:24px auto; border-radius:var(--radius); overflow:hidden; border:1px solid #25345e; box-shadow:var(--shadow); background:linear-gradient(180deg,#11182b,#0b0f1a); }
.topper{ position:relative; padding:18px 20px; background:linear-gradient(180deg,#132046,#0e152e); border-bottom:1px solid #24345f; display:flex; align-items:center; justify-content:center; }
.topper .shield{ padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 0 0 2px rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.4); background:linear-gradient(180deg, #1b2648, #0e162f); }
.logo{ font-weight:900; letter-spacing:1.2px; font-size:28px; position:relative; display:inline-block; }
.logo span{ background:linear-gradient(180deg,var(--gold1),var(--gold2) 60%, var(--gold3)); -webkit-background-clip:text; color:transparent; text-shadow:0 2px 0 #5d3c00, 0 0 24px rgba(255,218,120,.35); }
.logo .variant{ font-size:16px; margin-left:6px; color:#bcd0ff; }
.sub{ font-size:12px; color:var(--muted); text-align:center; }

.wrap{ display:grid; grid-template-columns: 1fr 320px; gap:18px; padding:18px; }
@media (max-width: 900px){ .wrap{ grid-template-columns: 1fr; } }

.cabinet{ border:1px solid #26365f; border-radius:16px; background:linear-gradient(180deg,#121a36,#0b0f1a); padding:18px; position:relative; overflow:hidden; }
.chrome{ position:absolute; inset:auto 10px 10px 10px; height:10px; background:linear-gradient(90deg,#24324f,#a9b6d2,#24324f); border-radius:999px; opacity:.35; filter:blur(0.3px); }

.window{ background:linear-gradient(180deg,#0a0f22,#121a34); border:1px solid #223357; border-radius:14px; padding:16px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.03); position:relative; }
.reels{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.reel{ background:linear-gradient(180deg,#f7f7f7,#e8edf6); border:1px solid #c7d0e5; border-radius:10px; height:220px; overflow:hidden; position:relative; box-shadow:inset 0 0 40px rgba(0,0,0,.25); }
.strip{ position:absolute; left:0; right:0; top:0; will-change:transform; transition: transform .18s ease-out; }
.cell{ height:72px; display:grid; place-items:center; }
.cell img{ width:64px; height:64px; display:block; }
.sep{ position:absolute; left:0; right:0; top:calc(50% - 1px); height:2px; background:rgba(0,0,0,.06); }

.linesSVG{ position:absolute; inset:14px; pointer-events:none; }
.linesSVG path{ fill:none; stroke:rgba(255,75,88,.7); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter: drop-shadow(0 0 4px rgba(255,80,100,.4)); }

.controls{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.group{ background:#0e1529; border:1px solid #203055; padding:10px; border-radius:12px; display:flex; gap:8px; align-items:center; }
.chip{ padding:6px 10px; font-weight:800; border-radius:10px; border:1px solid #2a3863; background:#121a34; color:#bcd0ff; cursor:pointer; user-select:none; }
.chip.active{ outline:2px solid var(--neonB); color:#06121a; background:linear-gradient(180deg, #c9f2ff, #84e6ff); border-color:#54d8ff; }
button.btn{ padding:12px 16px; border-radius:12px; font-weight:900; letter-spacing:.4px; border:1px solid #25345f; background:#121a34; color:#d7e3ff; cursor:pointer; box-shadow:var(--shadow); }
button.btn.primary{ background:linear-gradient(90deg,#00e0ff,#ff2f6e); color:#06121a; border:0; }
button.btn:disabled{ opacity:.5; cursor:not-allowed; }

.sidebar{ border:1px solid #203055; background:#0f1529; border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:14px; }
.meters{ display:flex; gap:14px; flex-wrap:wrap; }
.meter{ background:#0e1529; border:1px solid #203055; padding:10px 14px; border-radius:12px; min-width:120px; }
.meter .k{ font-size:11px; color:var(--muted); }
.meter .v{ font-size:18px; font-weight:800; color:#ffca55; text-shadow:0 0 16px rgba(255,204,68,.25); }
.paytable{ background:#0b1224; border:1px solid #203055; border-radius:12px; padding:10px; }
.paytable h3{ margin:0 0 8px 0; font-size:14px; color:#bcd0ff; letter-spacing:.6px; text-transform:uppercase; }
.paytable table{ width:100%; border-collapse:collapse; font-size:14px; }
.paytable td{ padding:6px 4px; color:#cfe2ff; border-bottom:1px dashed rgba(255,255,255,.06); }
.paytable tr:last-child td{ border-bottom:0; }

.note{ font-size:12px; color:#93a4c8; }

footer{ padding:10px 14px; font-size:12px; color:#8ea0c7; border-top:1px solid #203055; display:flex; justify-content:space-between; align-items:center; }
.toast{ position:fixed; left:16px; bottom:16px; padding:10px 12px; background:#0c1327; border:1px solid #223055; border-radius:10px; color:#bcd0ff; box-shadow:var(--shadow); opacity:.95; z-index:30; }