:root{
  --bg:#07051a; --bg2:#0e0a2b; --panel:#150f3d; --panel2:#1d1652; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --text:#f6f3ff; --muted:#9d97cf; --accent:#a855f7; --accent2:#22d3ee; --gold:#ffcf3f; --gold2:#ff9d00; --hot:#ff3d81; --ok:#2ee59d;
  --radius:18px; --font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
::selection{background:var(--accent)}

/* ---------- ambient background ---------- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% -20%,#2a1470 0%,var(--bg) 60%)}
.aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-12vw;background:#7c3aed}
.aurora i:nth-child(2){width:40vw;height:40vw;right:-12vw;top:10vh;background:#0891b2;animation-duration:28s;animation-delay:-6s}
.aurora i:nth-child(3){width:36vw;height:36vw;left:30vw;bottom:-18vw;background:#db2777;opacity:.3;animation-duration:32s;animation-delay:-12s}
.aurora::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
@keyframes drift{to{transform:translate(8vw,6vh) scale(1.15)}}

/* ---------- glossy buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:14px;
  font-weight:800;letter-spacing:.02em;color:#fff;isolation:isolate;
  background:linear-gradient(180deg,#c084fc 0%,#9333ea 55%,#7e22ce 100%);
  box-shadow:0 5px 0 #4c1d95,0 10px 24px rgba(147,51,234,.45),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .12s,box-shadow .12s,filter .2s}
.btn::before{content:"";position:absolute;inset:0 0 50% 0;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));z-index:-1;border-radius:inherit}
.btn::after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;transform:rotate(25deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 3.2s ease-in-out infinite}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #4c1d95,0 4px 12px rgba(147,51,234,.4),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.gold{color:#3b1d00;background:linear-gradient(180deg,#fff2a8 0%,#ffd23f 45%,#ff9d00 100%);box-shadow:0 5px 0 #b45309,0 10px 26px rgba(255,170,0,.45),inset 0 1px 0 #fff}
.btn.gold:active{box-shadow:0 1px 0 #b45309,0 4px 12px rgba(255,170,0,.4),inset 0 1px 0 #fff}
.btn.cyan{color:#032430;background:linear-gradient(180deg,#a5f3fc 0%,#22d3ee 50%,#0891b2 100%);box-shadow:0 5px 0 #155e75,0 10px 24px rgba(34,211,238,.4),inset 0 1px 0 #fff}
.btn.cyan:active{box-shadow:0 1px 0 #155e75,0 4px 12px rgba(34,211,238,.35),inset 0 1px 0 #fff}
.btn.ghost{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line2);color:var(--text)}
.btn.ghost::after{display:none}
.btn.ghost:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px var(--line2)}
.btn:disabled{filter:grayscale(.8) brightness(.7);cursor:default;transform:none}
.btn:disabled::after{display:none}
.btn.big{padding:16px 30px;font-size:18px;border-radius:16px}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}

input.field{width:100%;padding:13px 15px;border-radius:13px;border:1px solid var(--line2);background:rgba(7,5,26,.6);color:var(--text);font:inherit;font-size:16px;transition:border-color .2s,box-shadow .2s}
input.field:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(168,85,247,.25)}

.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;flex:none;color:#fff;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);box-shadow:0 0 0 2px var(--frame,#ffffff33),0 0 14px -2px var(--frame,transparent)}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;letter-spacing:-.02em}
.logo b{background:linear-gradient(90deg,#e9d5ff,#c084fc 40%,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .mark{width:34px;height:34px;border-radius:10px;background:conic-gradient(from 200deg,#a855f7,#22d3ee,#ff3d81,#a855f7);display:grid;place-items:center;
  box-shadow:0 0 22px rgba(168,85,247,.7);animation:spinmark 8s linear infinite}
.logo .mark svg{animation:spinmark 8s linear infinite reverse}
@keyframes spinmark{to{transform:rotate(360deg)}}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--line)}
.chip.gold{color:var(--gold);background:rgba(255,207,63,.12);box-shadow:inset 0 0 0 1px rgba(255,207,63,.35)}
.chip.cyan{color:var(--accent2);background:rgba(34,211,238,.1);box-shadow:inset 0 0 0 1px rgba(34,211,238,.3)}
.chip.pink{color:#ff7eb0;background:rgba(255,61,129,.12);box-shadow:inset 0 0 0 1px rgba(255,61,129,.35)}

/* ---------- game pages ---------- */
body.game{overflow:hidden;height:100vh;height:100dvh;user-select:none;-webkit-user-select:none;touch-action:none}
.gbar{position:fixed;top:0;left:0;right:0;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:10;
  background:linear-gradient(180deg,rgba(7,5,26,.92),rgba(7,5,26,0))}
.gbar .back{font-weight:800;font-size:14px;padding:9px 14px;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--line2);transition:background .2s}
.gbar .back:hover{background:rgba(255,255,255,.14)}
.gbar .gtitle{font-weight:800;font-size:15px;opacity:.9;letter-spacing:.04em;text-transform:uppercase}
.gbar .gscore{min-width:84px;text-align:center;font-weight:900;font-size:24px;font-variant-numeric:tabular-nums;padding:4px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,207,63,.18),rgba(255,157,0,.08));box-shadow:inset 0 0 0 1px rgba(255,207,63,.4),0 0 20px -6px rgba(255,207,63,.6);color:#ffe9a3}
.gbar .gscore.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.25)}}
body.game canvas{display:block;position:fixed;inset:0}
.gstart{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:16px;z-index:5;
  background:radial-gradient(ellipse at center,rgba(42,20,112,.75),rgba(7,5,26,.9));backdrop-filter:blur(4px);animation:pnfade .4s}
.gstart h1{font-size:clamp(40px,11vw,72px);font-weight:900;letter-spacing:-.03em;line-height:.95;
  background:linear-gradient(180deg,#fff 20%,#e9d5ff 50%,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 24px rgba(168,85,247,.6));animation:floaty 3s ease-in-out infinite}
.gstart p{color:#c9c3ef;max-width:340px;font-size:16px;line-height:1.45}
.gstart .tap{margin-top:16px}
.gstart .tap::before{content:"▶  PLAY";position:relative;display:inline-flex;padding:16px 42px;border-radius:16px;font-weight:900;font-size:20px;letter-spacing:.08em;color:#3b1d00;
  background:linear-gradient(180deg,#fff2a8 0%,#ffd23f 45%,#ff9d00 100%);box-shadow:0 6px 0 #b45309,0 12px 34px rgba(255,170,0,.55),inset 0 1px 0 #fff;animation:pulseglow 1.6s ease-in-out infinite}
.gstart .tap{font-size:0}
.gstart.hidden{display:none}
@keyframes floaty{50%{transform:translateY(-8px)}}
@keyframes pulseglow{50%{transform:scale(1.06);box-shadow:0 6px 0 #b45309,0 16px 50px rgba(255,170,0,.8),inset 0 1px 0 #fff}}
@keyframes pnfade{from{opacity:0}}

/* ---------- result modal ---------- */
.pn-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(ellipse at center,rgba(42,20,112,.55),rgba(4,3,14,.85));backdrop-filter:blur(8px);animation:pnfade .3s}
.pn-card{position:relative;width:min(400px,100%);border-radius:26px;padding:3px;background:conic-gradient(from var(--a,0deg),#a855f7,#22d3ee,#ff3d81,#ffcf3f,#a855f7);
  animation:pop .5s cubic-bezier(.2,1.4,.4,1),rot 4s linear infinite;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px -10px rgba(168,85,247,.6)}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes rot{to{--a:360deg}}
@keyframes pop{from{transform:scale(.6) translateY(40px);opacity:0}}
.pn-in{border-radius:23px;padding:26px 24px 22px;text-align:center;background:radial-gradient(ellipse at top,#2a1a6e,#120c38 70%)}
.pn-ribbon{position:absolute;left:50%;top:-18px;transform:translateX(-50%);padding:8px 22px;border-radius:12px;font-weight:900;font-size:14px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#fff2a8,#ffd23f 50%,#ff9d00);color:#3b1d00;box-shadow:0 6px 18px rgba(255,170,0,.5)}
.pn-ribbon.plain{background:linear-gradient(180deg,#c084fc,#7e22ce);color:#fff;box-shadow:0 6px 18px rgba(147,51,234,.5)}
.pn-in .lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.pn-in .pn-score{font-size:84px;font-weight:900;line-height:1;margin:4px 0 2px;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 30%,#ffd23f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 20px rgba(255,207,63,.45))}
.pn-in .chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 6px}
.pn-in .chips .chip{animation:pop .4s backwards}
.xpbox{margin:12px 0 4px;text-align:left}
.xpbox .row1{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:6px}
.xpbar{height:12px;border-radius:6px;background:rgba(0,0,0,.4);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.xpbar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#a855f7,#22d3ee);box-shadow:0 0 12px #22d3ee;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.pn-in .row{display:flex;gap:10px;margin-top:18px}
.pn-in .row .btn{flex:1;white-space:nowrap;font-size:17px;padding:15px 12px}
.pn-in form{display:flex;gap:8px;margin-top:14px}
.pn-in form .btn{padding:12px 16px}
.pn-in .note{font-size:13px;color:var(--muted);margin-top:8px;min-height:18px}
.pn-in .note b{color:var(--accent2)}

/* ---------- toasts ---------- */
.toasts{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{white-space:nowrap;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#2a1a6e,#1a1250);box-shadow:inset 0 0 0 1px rgba(168,85,247,.5),0 12px 30px rgba(0,0,0,.5);
  padding:12px 18px;border-radius:14px;font-weight:800;animation:toastin .45s cubic-bezier(.2,1.4,.4,1),toastout .4s 2.4s forwards}
.toast .ti{font-size:22px}
@keyframes toastin{from{transform:translateY(-30px) scale(.8);opacity:0}}
@keyframes toastout{to{transform:translateY(-20px);opacity:0}}
#pnfx{position:fixed;inset:0;pointer-events:none;z-index:70}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}