:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#666666;
  --accent:#ffeb00;
  --accent-ink:#000;
  --card:rgba(255,255,255,.75);
  --ring:rgba(0,0,0,.08);
}
*{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(--ink);
  background:radial-gradient(circle, #0d0d24, #000);
  overflow-x:hidden;
}
canvas#networkCanvas{
  position:fixed; inset:0;
  width:100%; height:100%; z-index:-1;
}
.topbar{
  position:fixed; top:14px; left:14px; right:14px; height:44px;
  display:flex; align-items:center; justify-content:flex-start;
  z-index:30;
}
.hamburger{
  width:44px; height:44px; border:0; background:transparent; padding:10px; cursor:pointer;
  position:relative;
}
.hamburger span{
  display:block; height:2px; background:#000; margin:6px 0; transition:transform .3s,opacity .3s;
}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.drawer{
  position:fixed; top:64px; left:14px; background:var(--card); backdrop-filter:saturate(150%) blur(6px);
  border:1px solid var(--ring); border-radius:16px; padding:12px; display:none; flex-direction:column; gap:8px; z-index:40;
}
.drawer a{
  text-decoration:none; color:var(--ink); padding:8px 10px; border-radius:10px;
}
.drawer a:hover{background:rgba(0,0,0,.05)}

.center{
  min-height:100svh; display:grid; place-items:center; padding:80px 14px 60px;
}
.wheel-wrap{
  display:grid; place-items:center; gap:16px; margin-bottom:20px;
}
.wheel{
  width:360px; height:360px; border-radius:50%;
  border:8px solid var(--accent);
  position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.07), inset 0 0 0 6px #fff;
  background: linear-gradient(180deg, rgba(255,235,0,0.08) 0%, rgba(255,235,0,0.02) 100%);
  display:flex; align-items:center; justify-content:center;
}
.btn-primary, .btn-outline, .btn-ghost{
  padding:10px 16px; border-radius:12px; font-weight:700; letter-spacing:.3px; cursor:pointer;
  border:0; transition:transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 18px rgba(255,235,0,.35)}
.btn-primary:active{transform:translateY(1px)}
.btn-outline{background:#fff; color:var(--ink); border:2px solid #2ecc71}
.btn-outline:active{transform:translateY(1px)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-wide{width:min(520px,90vw)}

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

.verify-block{display:grid; gap:16px; place-items:center}
.captcha{display:grid; place-items:center}
.fake-captcha{
  display:flex; align-items:center; gap:10px; border:2px solid #4c6ef5; padding:14px 18px; border-radius:12px; background:#fff; user-select:none;
}

.sheet{
  position:fixed; left:0; right:0; bottom:-60vh; height:60vh; background:var(--card); border-top-left-radius:18px; border-top-right-radius:18px;
  border:1px solid var(--ring); box-shadow:0 -10px 30px rgba(0,0,0,.12); padding:14px 14px 20px; transition:transform .35s ease;
  transform:translateY(100%); z-index:45; backdrop-filter:saturate(150%) blur(8px);
}
.sheet.open{transform:translateY(0)}
.sheet-handle{width:60px; height:5px; background:#ccc; border-radius:50px; margin:6px auto 10px}
.sheet h3{margin:4px 0 10px; text-align:center}
.wallets{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.wallet{
  display:flex; align-items:center; gap:10px; border:2px solid var(--accent); background:#fff; border-radius:14px; padding:12px; cursor:pointer; justify-content:center;
}
.wallet svg{width:24px; height:24px; fill:var(--accent); stroke:#000; stroke-width:.5}
.payment-notice{margin-top:16px; text-align:center; display:grid; gap:10px}
.payment-notice.hidden{display:none}

.success-card{
  background:var(--card); border:1px solid var(--ring); border-radius:18px; padding:22px; text-align:center; width:min(520px,90vw);
}

.tiny-footer{
  position:fixed; bottom:10px; left:50%; transform:translateX(-50%);
  font-size:12px; color:#999;
}

.howto-body{
  min-height:100%;
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -20%, #fffbe6, transparent 60%),
    radial-gradient(1000px 600px at 110% 0%, #f4f8ff, transparent 50%),
    #ffffff;
}
.howto-wrap{min-height:100svh; display:grid; place-items:center; padding:80px 14px}
.howto{
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:22px;
  width:min(720px,92vw);
}
.howto h1{margin-top:0}
.howto ol{line-height:1.8}

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