:root{--p:#9945ff;--g:#14f195;--pk:#ff4fd8;--y:#ffd23f;--deep:#1d0b52;--ink:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:#1d0b52;overflow-x:hidden}
a{color:inherit}
#xp{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
h1,h2,h3,.logo,.btn,.kick,.tag,.rar{font-family:'Lilita One',sans-serif;font-weight:400}

/* ---------- loader */
#veil{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:18px;background:radial-gradient(circle at 50% 40%,#7b2cff,#2a0b7a 60%,#12053a);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);clip-path:circle(150% at 50% 50%)}
#veil.gone{clip-path:circle(0% at 50% 60%);pointer-events:none}
.v-logo{font:400 clamp(56px,10vw,120px) 'Lilita One';letter-spacing:2px;text-shadow:0 8px 0 #2a0f6b}
.v-logo span:last-child{color:var(--g)}
.v-logo span{display:inline-block;animation:vbob 1.2s ease-in-out infinite}.v-logo span:last-child{animation-delay:.2s}
@keyframes vbob{50%{transform:translateY(-10px) rotate(-2deg)}}
.v-beans{display:flex;gap:6px;height:74px}.v-beans img{height:74px;animation:vrun .5s ease-in-out infinite alternate}
@keyframes vrun{to{transform:translateY(-12px) rotate(6deg)}}
.v-bar{width:min(360px,70vw);height:14px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden;box-shadow:inset 0 2px 0 rgba(0,0,0,.2)}
.v-bar i{display:block;height:100%;width:3%;background:linear-gradient(90deg,var(--g),#00c2ff,var(--pk));border-radius:99px;transition:width .3s}
#vTxt{font-weight:800;opacity:.8}

/* ---------- wipe on arena change */
#wipe{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle,#fff 0 30%,#ffd6f5 60%,transparent 70%);opacity:0}
body.wipe #wipe{animation:wipe .7s ease-out}
@keyframes wipe{0%{opacity:.85;transform:scale(.2)}100%{opacity:0;transform:scale(2.4)}}

/* ---------- nav */
.nav{position:fixed;top:14px;left:14px;right:14px;z-index:20;display:flex;align-items:center;gap:18px;padding:10px 12px 10px 20px;border-radius:22px;background:rgba(29,11,82,.45);backdrop-filter:blur(14px) saturate(1.4);border:1.5px solid rgba(255,255,255,.18)}
.logo{font-size:30px;text-decoration:none;text-shadow:0 3px 0 #2a0f6b}.logo span{color:var(--g)}
.links{display:flex;gap:18px;margin:auto;font-weight:800}.links a{text-decoration:none;opacity:.85}.links a:hover{opacity:1;color:var(--g)}
.nav-r{display:flex;gap:8px;margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;text-decoration:none;color:#2a0f6b;background:#fff;padding:12px 22px;border-radius:16px;font-size:18px;box-shadow:0 5px 0 rgba(0,0,0,.25);transition:transform .15s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn.small{padding:8px 14px;font-size:15px;border-radius:13px}
.btn.xl{padding:18px 30px;font-size:24px;border-radius:20px}
.btn.play{background:linear-gradient(180deg,#ffe36b,#ffb800);box-shadow:0 6px 0 #b86f00}
.btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.35);box-shadow:none}

/* ---------- rail */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:10;list-style:none;display:grid;gap:12px}
.rail a{display:block;width:12px;height:12px;border-radius:99px;background:rgba(255,255,255,.4);transition:.3s;position:relative}
.rail a.on{background:var(--g);height:34px;box-shadow:0 0 14px var(--g)}
.rail a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);font:900 12px Nunito;white-space:nowrap;opacity:0;transition:.2s;background:rgba(29,11,82,.7);padding:4px 8px;border-radius:8px}
.rail a:hover span,.rail a.on span{opacity:1}

/* ---------- chapters */
#story{position:relative;z-index:5}
.ch{height:var(--len,200vh);position:relative}
.pin{position:sticky;top:0;height:100vh;padding:110px clamp(20px,5vw,80px) 50px;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.pin *{pointer-events:auto}.pin p,.pin h1,.pin h2{pointer-events:none}
.pin.left{align-items:flex-start;max-width:720px}
.pin.right{align-items:flex-end;margin-left:auto;max-width:640px;text-align:right}
.pin>*{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .9s cubic-bezier(.2,1.4,.4,1)}
.ch.on .pin>*{opacity:1;transform:none}
.ch.on .pin>*:nth-child(2){transition-delay:.12s}.ch.on .pin>*:nth-child(3){transition-delay:.22s}.ch.on .pin>*:nth-child(4){transition-delay:.32s}.ch.on .pin>*:nth-child(5){transition-delay:.42s}
.ch.leaving .pin>*{opacity:0;transform:translateY(-40px) scale(.97);transition-duration:.4s}
.kick{font-size:clamp(14px,1.4vw,18px);letter-spacing:3px;color:var(--y);text-shadow:0 2px 0 rgba(0,0,0,.35);margin-bottom:10px}
.big{font-size:clamp(46px,8.5vw,128px);line-height:.9;letter-spacing:1px;text-shadow:0 6px 0 #2a0f6b,0 14px 40px rgba(29,11,82,.45)}
.big em{font-style:normal;color:var(--y)}
.big .count{color:var(--g);font-variant-numeric:tabular-nums}
.grad{background:linear-gradient(90deg,var(--g),#00c2ff,var(--p),var(--pk));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 6px 0 #2a0f6b)}
.lede{font-size:clamp(17px,1.5vw,21px);font-weight:800;max-width:560px;margin-top:16px;line-height:1.45;text-shadow:0 2px 12px rgba(29,11,82,.7)}
.split .ch-l{display:inline-block;opacity:0;transform:translateY(.6em) rotate(8deg) scale(.6);transition:opacity .3s,transform .7s cubic-bezier(.2,1.8,.4,1);transition-delay:calc(var(--i)*28ms)}
.ch.on .split .ch-l{opacity:1;transform:none}

/* hero */
.pin.hero{justify-content:flex-end;padding-bottom:70px}
.h-bottom{max-width:760px}
.hero .big{font-size:clamp(40px,6.5vw,92px)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:6px;font:900 11px Nunito;letter-spacing:3px;opacity:.8}
.scrollcue i{width:24px;height:38px;border:2px solid #fff;border-radius:14px;position:relative}.scrollcue i::after{content:'';position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;background:#fff;border-radius:4px;animation:cue 1.4s infinite}
@keyframes cue{to{transform:translateY(12px);opacity:0}}
.poke{position:absolute;right:clamp(20px,5vw,80px);bottom:30px;font-weight:800;opacity:.75;font-size:14px}
.moves{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.moves span{font:400 20px 'Lilita One';padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.3);animation:mv 2.4s ease-in-out infinite}
.moves span:nth-child(2){animation-delay:.3s}.moves span:nth-child(3){animation-delay:.6s}.moves span:nth-child(4){animation-delay:.9s}
@keyframes mv{50%{transform:translateY(-6px) rotate(-2deg)}}

/* glass cards */
.skincard,.arenacard,.glass,.earnbox{background:rgba(29,11,82,.5);backdrop-filter:blur(16px) saturate(1.5);border:1.5px solid rgba(255,255,255,.22);border-radius:28px;padding:26px 28px;box-shadow:0 20px 60px rgba(20,5,60,.35)}
.skincard{width:min(420px,100%);text-align:left;margin-top:8px}
.skincard.pop{animation:pop .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes pop{0%{transform:scale(.92) rotate(-1.5deg)}100%{transform:none}}
.sk-top{display:flex;justify-content:space-between;align-items:center}
.sk-n{font:900 14px Nunito;opacity:.7;letter-spacing:2px}
.rar{font-size:14px;letter-spacing:2px;padding:5px 12px;border-radius:10px;color:#2a0f6b;background:#d8dde8}
.rar.Legendary{background:linear-gradient(90deg,#ffe36b,#ffb800)}.rar.Epic{background:#d9a6ff}.rar.Rare{background:#8fd0ff}
.skincard h2{font-size:clamp(40px,4.5vw,60px);margin:10px 0 6px;text-shadow:0 4px 0 #2a0f6b}
.skincard p{font-weight:700;opacity:.9;line-height:1.45;min-height:3em}
.sk-price{margin:14px 0;font:400 22px 'Lilita One';color:var(--g)}
.sk-btns{display:flex;gap:8px}
.arenacard{min-width:min(460px,100%);margin-top:8px}
.arenacard.pop{animation:pop .5s cubic-bezier(.2,1.8,.4,1)}
.tag{font-size:14px;letter-spacing:2px;padding:5px 12px;border-radius:10px;background:var(--y);color:#2a0f6b}
.tag.survival{background:var(--g)}.tag.final{background:var(--pk);color:#fff}
.arenacard h2{font-size:clamp(40px,5vw,72px);margin:12px 0 6px;text-shadow:0 4px 0 #2a0f6b;line-height:1}
.arenacard p{font-weight:800;opacity:.9;font-size:18px}
.pips{display:flex;gap:6px;margin-top:18px}.pips i{width:26px;height:8px;border-radius:9px;background:rgba(255,255,255,.25);transition:.3s}.pips i.on{background:var(--g);width:44px}
.note{margin-top:14px;font-weight:800;opacity:.7;font-size:14px}
.ptab{display:grid;grid-template-columns:repeat(3,auto);gap:10px;margin:20px 0 14px;justify-content:end}
.ptab div{padding:14px 18px;border-radius:20px;text-align:center;box-shadow:0 6px 0 rgba(0,0,0,.2);color:#2a0f6b}
.ptab small{display:block;font:900 12px Nunito;letter-spacing:2px}.ptab b{font:400 clamp(24px,2.6vw,36px) 'Lilita One';white-space:nowrap}
.ptab .p1{background:linear-gradient(180deg,#ffe36b,#ffb800);transform:translateY(-10px) scale(1.06)}.ptab .p2{background:linear-gradient(180deg,#f3f5fa,#c9cedb)}.ptab .p3{background:linear-gradient(180deg,#ffc79c,#d77b3f)}
.earnbox{display:grid;gap:4px;text-align:right;font-weight:800;padding:18px 22px}.earnbox b{font:400 22px 'Lilita One';color:var(--g)}.earnbox span{opacity:.85}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 12px}.pills span{font-weight:900;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.3)}
.muted{opacity:.75;font-weight:700}.muted code{background:rgba(0,0,0,.3);padding:2px 6px;border-radius:6px}

/* finale */
.pin.finale{flex-direction:row;align-items:center;justify-content:space-between;gap:30px}
.board{width:min(560px,100%);color:#fff}
.board-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:8px}.board-head h3{font-size:28px}
.lbt{display:flex;gap:6px}.lbt button{border:0;cursor:pointer;font:900 13px Nunito;padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.14);color:#fff}.lbt button.on{background:var(--g);color:#1d0b52}
.board table{width:100%;border-collapse:collapse;font-weight:800}
.board td{padding:8px 5px;border-bottom:1px solid rgba(255,255,255,.12)}.board td:first-child{font:400 20px 'Lilita One';color:var(--y);width:34px}
.board td img{width:30px;height:30px;vertical-align:middle;margin-right:8px;border-radius:9px;background:rgba(255,255,255,.2)}
.board td.who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.board td.ern{text-align:right;color:var(--g);white-space:nowrap}
.board .xh{color:#6cc4ff;font-size:12px;margin-left:5px}
.board-note{font-size:12px;opacity:.6;margin-top:8px;font-weight:700}
.fin-cta{text-align:right;display:grid;justify-items:end;gap:20px}.fin-cta .big{font-size:clamp(40px,6vw,90px)}

/* footer */
.foot{position:relative;z-index:6;background:linear-gradient(180deg,rgba(29,11,82,0),#1d0b52 120px);padding:140px clamp(20px,5vw,80px) 40px}
.faq{max-width:820px;margin:auto;display:grid;gap:10px}
.faq details{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.16);border-radius:18px;padding:16px 20px}
.faq summary{cursor:pointer;font:400 22px 'Lilita One'}.faq p{margin-top:8px;font-weight:700;opacity:.85;line-height:1.5}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center;margin-top:50px;font-weight:800;opacity:.85;font-size:14px}.foot-row .logo{font-size:26px}

@media(max-width:1000px){.links{display:none}.rail{display:none}.pin.finale{flex-direction:column;justify-content:center}.fin-cta{justify-items:start;text-align:left}}
@media(max-width:700px){.hide-m{display:none}.nav{padding:8px 8px 8px 14px}.logo{font-size:24px}
  .pin{padding:90px 16px 34px;justify-content:flex-end}.pin.right{text-align:left;align-items:flex-start}
  .ptab{justify-content:start}.earnbox{text-align:left}.skincard{padding:18px}.skincard p{min-height:0;font-size:14px}.arenacard{padding:18px}
  .poke{display:none}.board td.pods{display:none}.board td{font-size:13px}.board td.who{max-width:120px}.pin.finale .board{padding:16px}.fin-cta .big{font-size:40px}}
.split .wd{display:inline-block;white-space:nowrap}
.logo{display:inline-flex;align-items:baseline}.logo .by{margin-left:8px;font:900 10px Nunito;letter-spacing:1.5px;color:#fff;opacity:.7;text-shadow:none;white-space:nowrap}@media(max-width:700px){.logo .by{display:none}}