:root{
  --bg1:#12002b; --bg2:#2a0650; --pink:#ff4fd8; --pink2:#ff8ae6; --purple:#a855f7;
  --cyan:#3ee8ff; --yellow:#ffe14d; --green:#4dff9a; --red:#ff5a6e; --text:#fff6ff; --muted:#d9c2f2;
  --card:rgba(255,255,255,.08); --line:rgba(255,255,255,.18);
  --radius:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
html{background:#12002b}
body{
  font-family:"Trebuchet MS","Nunito","Segoe UI",system-ui,sans-serif; color:var(--text);
  background:radial-gradient(ellipse at 50% -10%,#5b1199 0%,var(--bg2) 35%,var(--bg1) 75%) fixed;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; overflow-x:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
a{color:var(--pink2)}
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sky i{position:absolute;color:#fff;opacity:.0;animation:twinkle 3.2s infinite ease-in-out;font-style:normal}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.85;transform:scale(1)}}
.beams{position:fixed;left:0;right:0;top:0;height:60vh;pointer-events:none;z-index:0;opacity:.35;
  background:conic-gradient(from 200deg at 15% 0%,transparent 0 8deg,rgba(255,79,216,.35) 10deg,transparent 14deg 360deg),
             conic-gradient(from 150deg at 85% 0%,transparent 0 8deg,rgba(62,232,255,.3) 10deg,transparent 14deg 360deg);
  animation:sway 6s ease-in-out infinite alternate}
@keyframes sway{from{filter:hue-rotate(0)}to{filter:hue-rotate(40deg)}}
header.top{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 14px}
header.top h1{font-size:clamp(20px,5.4vw,30px);margin:0;flex:1;text-align:center;letter-spacing:.5px;
  text-shadow:0 0 12px var(--pink),0 0 2px #fff}
.btn-back,.btn-icon{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:16px;text-decoration:none;color:var(--text);white-space:nowrap}
.btn-icon{width:44px;height:44px;padding:0;display:grid;place-items:center;font-size:20px}
main{position:relative;z-index:1;flex:1;width:100%;max-width:900px;margin:0 auto;padding:6px 14px 18px}
footer.fan{position:relative;z-index:1;text-align:center;font-size:12px;color:var(--muted);padding:10px 10px 16px;opacity:.85}
.btn{background:linear-gradient(135deg,var(--pink),var(--purple));border:0;border-radius:999px;padding:14px 26px;font-size:20px;font-weight:700;
  box-shadow:0 6px 0 #6b1a8f,0 0 22px rgba(255,79,216,.5);color:#fff;transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #6b1a8f}
.btn.alt{background:linear-gradient(135deg,#2be0ff,#7a5cff);box-shadow:0 6px 0 #26307a,0 0 18px rgba(62,232,255,.45)}
.btn.small{font-size:16px;padding:10px 18px}
.chip{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:10px 16px;font-size:17px;font-weight:700}
.chip.on{border-color:var(--pink);background:rgba(255,79,216,.25);box-shadow:0 0 14px rgba(255,79,216,.5)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;backdrop-filter:blur(6px)}
.center{text-align:center}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hidden{display:none!important}
.big{font-size:clamp(28px,8vw,48px);font-weight:800}
.glow{text-shadow:0 0 14px var(--pink),0 0 3px #fff}
.muted{color:var(--muted)}
.stat{display:inline-flex;gap:6px;align-items:center;background:rgba(0,0,0,.25);border-radius:999px;padding:6px 12px;font-weight:700}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.pop{animation:pop .35s}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.confetti{position:fixed;top:-30px;z-index:50;pointer-events:none;font-size:22px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.9}}
.overlay{position:fixed;inset:0;z-index:40;background:rgba(10,0,25,.72);display:grid;place-items:center;padding:16px}
.overlay .panel{max-width:440px;width:100%;text-align:center;background:linear-gradient(160deg,#3a0b6b,#1c0438);border:2px solid var(--pink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}