:root{
  --bg1:#16162a;
  --bg2:#07070b;
  --gold:#ffd54d;
  --gold-strong:#ffc107;
  --text:#eaf0ff;
  --muted:#9aa4ba;
  --card:rgba(10,12,20,0.6);
  --ring:rgba(255,213,77,.35);
  --success-box-bg: rgba(255,215,64,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--text);
  background: radial-gradient(1000px 900px at 50% 45%, #22253a 0%, var(--bg1) 45%, var(--bg2) 100%);
  overflow-x:hidden;
}
canvas#networkCanvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

.topbar{ position:fixed; top:0; left:0; right:0; height:64px; display:flex; align-items:center; padding:0 16px; z-index:4; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0)); backdrop-filter: blur(6px); }
.hamburger{ width:44px; height:44px; background:transparent; border:0; padding:10px; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; }
.hamburger span{ display:block; height:2px; background:var(--gold); border-radius:2px; transition:transform .25s,opacity .25s; }
.hamburger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.drawer{ position:fixed; top:72px; left:12px; background:var(--card); border:1px solid var(--ring); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; z-index:5; box-shadow:0 10px 30px rgba(0,0,0,.35); opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .25s, transform .25s; }
.drawer.open{ opacity:1; transform:none; pointer-events:auto; }
.drawer a{ color:var(--gold); text-decoration:none; padding:8px 10px; border-radius:8px; }
.drawer a:hover{ background:rgba(255,204,0,.06); }

.center{ min-height:100svh; display:grid; place-items:center; padding:100px 18px 80px; position:relative; z-index:2; }
.wheel-wrap{ display:grid; place-items:center; gap:18px; margin-bottom:18px; }
.wheel{ width:360px; height:360px; border-radius:50%; border:8px solid var(--gold); box-shadow:0 12px 40px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(255,235,0,0.03), rgba(255,235,0,0.01)); transform-origin:center; }
.btn-primary, .btn-outline, .btn-ghost{ padding:12px 18px; border-radius:12px; font-weight:700; cursor:pointer; border:0; }
.btn-primary{ background:var(--gold-strong); color:#2b1f00; box-shadow:0 8px 24px rgba(255,193,7,.15); }
.btn-outline{ background:transparent; color:var(--gold); border:1px solid rgba(255,215,64,.14); }
.btn-ghost{ background:transparent; color:var(--text); border:0; }
.btn-wide{ width:min(520px,92vw); }

.email-inline{ display:grid; gap:10px; width:100%; place-items:center; }
.email-inline input{ width:min(520px,92vw); padding:12px 14px; border-radius:12px; border:2px solid rgba(255,215,64,.12); background: rgba(255,255,255,0.02); color:var(--text); outline:none; }
.error{ color:#ffb4b4; font-size:14px; margin:6px 0 0; }
.info{ color:var(--muted); font-size:14px; margin-top:10px; }

.verify-card{ width:min(720px,92vw); background:var(--card); border:1px solid var(--ring); border-radius:16px; padding:18px; box-shadow:0 20px 80px rgba(0,0,0,.45); }
.dropdown{ position:relative; display:grid; gap:8px; justify-items:center; }
.dropdown-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; width:min(360px,90vw); background:#090918; border:1px solid var(--ring); border-radius:12px; list-style:none; padding:6px; z-index:6; box-shadow:0 16px 60px rgba(0,0,0,.5); }
.dropdown-menu li a{ display:flex; align-items:center; gap:10px; padding:12px; color:var(--text); text-decoration:none; border-radius:8px; }
.dropdown-menu li a:hover{ background:rgba(255,204,0,.06); }
.dropdown-menu[hidden]{ display:none; }
.dropdown .dot{ width:8px; height:8px; background:var(--gold); border-radius:50%; }

.payment-notice{ text-align:center; margin-top:12px; }
.hidden{ display:none; }

.modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.45); z-index:10; }
.modal.hidden{ display:none; }
.modal-card{ width:min(540px,92vw); background:rgba(8,9,18,0.98); padding:16px; border-radius:12px; border:1px solid rgba(255,215,64,.06); box-shadow:0 30px 80px rgba(0,0,0,.6); color:var(--text); }
.pay-box{ background:rgba(255,215,64,0.02); border:1px dashed rgba(255,215,64,0.06); padding:12px; border-radius:8px; margin-top:8px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break:break-all; color:var(--muted); }

.success-card.big-box{ width:min(720px,92vw); background:var(--success-box-bg); border:1px solid rgba(255,215,64,.08); border-radius:14px; padding:24px; text-align:center; }

.tiny-footer{ position:fixed; bottom:10px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--muted); z-index:3; }

@media (max-width:480px){ .wheel{ width:300px; height:300px; } .hamburger{ padding:6px } }