/* ============================================================
   SLOTFORGE — design system (neon arcade casino)
   ============================================================ */
:root{
  --neon-cyan:#00e5ff; --neon-pink:#ff2bd6; --violet:#7b2ff7; --violet-2:#a96bff;
  --bg0:#0a0418; --bg1:#120730; --bg2:#1b0c44; --bg3:#241055;
  --panel:#170a38; --panel-2:#1f0f4a; --panel-line:rgba(123,47,247,.4);
  --gold:#ffce3a; --gold-light:#fff1b0; --gold-deep:#c8881a;
  --win:#3dff9a; --danger:#ff4d6d;
  --txt:#ece6ff; --txt-dim:#a394d4; --txt-faint:#6b5c9c;
  --radius:14px; --radius-sm:10px;
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --ui:'Space Grotesk',system-ui,sans-serif;
  --display:'Orbitron',sans-serif;
}
*{box-sizing:border-box;}
html,body,#root{height:100%;}
body{
  margin:0; font-family:var(--ui); color:var(--txt);
  background:
    radial-gradient(110% 80% at 80% -10%, rgba(123,47,247,.35), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(0,229,255,.12), transparent 50%),
    var(--bg0);
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#2c1a55; border-radius:8px; border:2px solid var(--bg0);}
::-webkit-scrollbar-thumb:hover{background:#3c2570;}

.font-display{font-family:var(--display);}
.neon-text{color:#fff; text-shadow:0 0 12px currentColor;}
.gold-text{
  background:linear-gradient(180deg,#fff7d6,var(--gold) 50%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.btn{font-family:var(--ui); font-weight:600; font-size:14px; cursor:pointer;
  border-radius:var(--radius-sm); padding:11px 18px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px; transition:.16s; white-space:nowrap;}
.btn svg{width:18px;height:18px;}
.btn-primary{color:#10052a;
  background:linear-gradient(180deg,#7cf0ff,var(--neon-cyan) 60%,#00a9c0);
  box-shadow:0 6px 18px rgba(0,229,255,.35), inset 0 1px 0 rgba(255,255,255,.5);}
.btn-primary:hover{filter:brightness(1.08); box-shadow:0 8px 24px rgba(0,229,255,.55);}
.btn-gold{color:#3a1a00; font-weight:700;
  background:radial-gradient(circle at 38% 25%,#fff7d6,var(--gold) 48%,var(--gold-deep));
  box-shadow:0 6px 18px rgba(255,206,58,.4), inset 0 1px 0 rgba(255,255,255,.55);}
.btn-gold:hover{filter:brightness(1.06);}
.btn-ghost{background:rgba(123,47,247,.12); border-color:var(--panel-line); color:var(--txt);}
.btn-ghost:hover{background:rgba(123,47,247,.24); border-color:var(--violet-2);}
.btn-danger{background:rgba(255,77,109,.14); border-color:rgba(255,77,109,.5); color:#ff9cb0;}
.btn-danger:hover{background:rgba(255,77,109,.26);}
.btn:active{transform:translateY(1px);}
.btn-lg{padding:14px 26px; font-size:15px;}
.btn-sm{padding:7px 12px; font-size:12.5px;}

/* ---------- cards / panels ---------- */
.card{background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--panel-line); border-radius:var(--radius);
  box-shadow:var(--shadow);}
.glass{background:rgba(23,10,56,.7); backdrop-filter:blur(10px);
  border:1px solid var(--panel-line);}

/* ---------- form controls ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:12px; font-weight:600; letter-spacing:.4px; color:var(--txt-dim);
  text-transform:uppercase;}
.input{font-family:var(--ui); font-size:14px; color:var(--txt);
  background:rgba(10,4,24,.7); border:1px solid var(--panel-line); border-radius:var(--radius-sm);
  padding:11px 14px; outline:none; transition:.15s; width:100%;}
.input:focus{border-color:var(--neon-cyan); box-shadow:0 0 0 3px rgba(0,229,255,.18);}
.input::placeholder{color:var(--txt-faint);}
.range{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--violet),var(--neon-cyan)); outline:none;}
.range::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--neon-cyan)); cursor:pointer;
  box-shadow:0 0 10px rgba(0,229,255,.6); border:2px solid #0a0418;}

/* segmented */
.seg{display:inline-flex; background:rgba(10,4,24,.7); border:1px solid var(--panel-line);
  border-radius:var(--radius-sm); padding:3px; gap:3px;}
.seg button{font-family:var(--ui); font-size:13px; font-weight:600; cursor:pointer;
  background:transparent; border:none; color:var(--txt-dim); padding:7px 14px; border-radius:7px; transition:.14s;}
.seg button.active{background:linear-gradient(180deg,var(--violet),#5a1fc0); color:#fff;
  box-shadow:0 2px 8px rgba(123,47,247,.5);}

/* swatch */
.swatches{display:flex; gap:8px; flex-wrap:wrap;}
.swatch{width:34px; height:34px; border-radius:9px; cursor:pointer; border:2px solid transparent;
  transition:.12s; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);}
.swatch:hover{transform:scale(1.08);}
.swatch.active{border-color:#fff; box-shadow:0 0 0 2px var(--neon-cyan), 0 0 14px var(--neon-cyan);}

/* badge / pill */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:30px;
  border:1px solid var(--panel-line); color:var(--txt-dim);}
.pill.live{color:var(--win); border-color:rgba(61,255,154,.5); background:rgba(61,255,154,.1);}
.pill.draft{color:var(--gold-light); border-color:rgba(255,206,58,.5); background:rgba(255,206,58,.1);}

/* coin chip */
.coin-chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--display);
  font-weight:700; font-size:14px; color:var(--gold-light);
  background:rgba(255,206,58,.1); border:1px solid rgba(255,206,58,.4); border-radius:30px;
  padding:6px 14px;}
.coin-chip .dot{width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7d6,var(--gold) 55%,var(--gold-deep));
  box-shadow:0 0 8px rgba(255,206,58,.6); flex:none;}

/* section header */
.sec-h{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:2px;
  text-transform:uppercase; color:var(--txt-dim); margin:0 0 12px;}

/* tooltip-ish helper text */
.hint{font-size:12.5px; color:var(--txt-faint); line-height:1.5;}

/* scrolly fade-in */
@keyframes fadeUp{from{transform:translateY(10px);} to{transform:none;}}
.fade-up{animation:fadeUp .35s ease both;}

/* divider */
.hr{height:1px; background:linear-gradient(90deg,transparent,var(--panel-line),transparent); margin:18px 0; border:0;}