/* ============ Fonts ============ */
@font-face{font-family:"Pixelify Sans";font-weight:400;font-display:swap;src:url(../assets/fonts/pixelify-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Pixelify Sans";font-weight:700;font-display:swap;src:url(../assets/fonts/pixelify-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:200 1000;font-display:swap;src:url(../assets/fonts/nunito-latin-wght-normal.woff2) format("woff2")}

/* ============ Tokens ============ */
:root{
  --purple:#8b03fd; --purple-d:#5b00b8; --night:#1a0b2e; --ink:#1a0b2e;
  --cream:#fbf3d9; --cream-2:#f0e8c4; --yellow:#ffd666; --pink:#ff8fab; --mint:#7ee7c3; --sky:#7dc4ff; --orange:#ff9a5a;
  --ok:#2fbf71; --mid:#ffb13b; --low:#ff5e6c;
  --r:20px; --sh:0 6px 0 var(--ink);
  --pix:"Pixelify Sans","Press Start 2P",ui-monospace,monospace; --body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-weight:600;color:#fff;line-height:1.5;min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(rgba(255,255,255,.09) 2px,transparent 2.5px) 0 0/30px 30px,linear-gradient(180deg,#8b03fd 0%,#7000d6 55%,#4a0096 100%) fixed;background-color:var(--purple)}
#view{flex:1}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--pix);font-weight:700;line-height:1.1;margin:0 0 .5em;letter-spacing:.01em}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:8px 14px;border-radius:10px;z-index:999}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.muted{opacity:.78}.small{font-size:.85rem}.center{justify-content:center;text-align:center}.wide{width:100%}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ico{display:inline-grid;width:1.1em;height:1.1em;vertical-align:-.15em}.ico svg{width:100%;height:100%;fill:currentColor}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:2px 12px;font-weight:800;font-size:.85rem}
.chip.ok{background:#c8f5dc}.chip.bad{background:#ffd0d4}.chip.lv{background:var(--yellow)}.chip.copy{cursor:pointer;font-family:ui-monospace,monospace}
.err{color:#b3122a;font-weight:800;min-height:1.2em;margin:.3em 0 0;font-size:.9rem}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 1rem/1 var(--body);color:var(--ink);background:var(--cream);border:3px solid var(--ink);border-radius:14px;padding:12px 18px;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s,filter .15s;user-select:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink);filter:brightness(1.04)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:0 4px 0 var(--ink);filter:grayscale(.4)}
.btn-primary{background:var(--yellow)}.btn-ghost{background:var(--cream)}
.btn-lg{padding:15px 24px;font-size:1.1rem;border-radius:16px}.btn-sm{padding:8px 12px;font-size:.85rem;border-radius:11px;box-shadow:0 3px 0 var(--ink)}
.btn.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 4px 0 var(--ink),0 0 0 7px rgba(255,214,102,.45)}}

/* ============ Header ============ */
.header{position:sticky;top:0;z-index:60;background:rgba(26,11,46,.94);backdrop-filter:blur(10px);border-bottom:3px solid #0d0418}
.hwrap{max-width:1220px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:9px 20px}
.brand{display:flex;flex:none}.brand img{height:46px;width:auto;display:block;transition:transform .2s}.brand:hover img{transform:rotate(-3deg) scale(1.04)}
.nav{display:flex;gap:6px;margin-left:10px}
.nav-a{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:12px;text-decoration:none;font-weight:800;color:#e9dcff;transition:background .15s}
.nav-a:hover{background:rgba(255,255,255,.1)}.nav-a.on{background:var(--yellow);color:var(--ink)}
.hright{margin-left:auto;display:flex;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;background:#2d1659;border:2px solid #4a2a85;border-radius:999px;padding:6px 14px;text-decoration:none;font-weight:900;color:var(--yellow)}
.me{display:flex;align-items:center;gap:8px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:3px 12px 3px 3px;font:800 .95rem var(--body);cursor:pointer;box-shadow:0 3px 0 #000}
.me-n{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{border-radius:50%;object-fit:cover;border:3px solid var(--ink);background:#fff;display:block}
.avatar.big{border-radius:30px;border-width:4px;box-shadow:0 6px 0 var(--ink)}
.menu{position:fixed;z-index:200;min-width:220px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:6px;box-shadow:0 8px 0 rgba(0,0,0,.4);animation:pop .15s}
.mi{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 12px;border-radius:10px;font:800 .95rem var(--body);color:var(--ink);cursor:pointer}.mi:hover{background:var(--cream-2)}.mi.danger{color:#b3122a}
.banner{position:sticky;top:67px;z-index:55;background:var(--yellow);color:var(--ink);border-bottom:3px solid var(--ink);font-weight:800}
.banner.demo{background:var(--mint)}
.bwrap{max-width:1220px;margin:0 auto;padding:8px 20px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ============ Layout ============ */
.page{max-width:1220px;margin:0 auto;padding:28px 20px 60px}
.page.enter{animation:fadeup .35s ease-out}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}}
@keyframes pop{from{opacity:0;transform:scale(.94)}}
.card{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:22px;margin-bottom:22px}
.card h2{font-size:1.5rem}.card .muted{opacity:.7}
.page-head h1{font-size:clamp(2rem,5vw,3.2rem);color:var(--cream);text-shadow:0 4px 0 var(--ink)}
.lead{font-size:1.2rem;opacity:.95;max-width:62ch}
.gate{max-width:560px;margin:50px auto;text-align:center;padding:32px 26px}
.gate-i{width:190px;border-radius:26px;border:4px solid var(--ink);margin:0 auto 14px;display:block;background:var(--purple)}
.gate .row{margin-top:10px}

/* ============ Home ============ */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:30px 0 40px}
.kicker{display:inline-block;background:var(--ink);color:var(--yellow);font:700 .8rem var(--pix);letter-spacing:.12em;padding:6px 12px;border-radius:8px;margin-bottom:16px}
.hero h1{font-size:clamp(3rem,8vw,6.4rem);color:var(--cream);text-shadow:0 5px 0 var(--ink),0 8px 0 rgba(0,0,0,.25);margin-bottom:.25em}
.hl{color:var(--yellow)}
.hero .lead{margin-bottom:24px}.hero-n{margin-top:16px}
.hero-r{position:relative;display:grid;place-items:center}
.sticker{background:var(--purple);border:5px solid var(--ink);border-radius:40px;box-shadow:12px 12px 0 var(--ink);transform:rotate(3deg);padding:8px;max-width:440px;transition:transform .3s}.sticker:hover{transform:rotate(-1deg) scale(1.02)}
.mascot{width:100%;display:block;border-radius:30px}
.fl{position:absolute;font-size:2.4rem;animation:float 4s ease-in-out infinite;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.f1{top:2%;left:4%}.f2{top:8%;right:2%;animation-delay:-1s}.f3{bottom:6%;left:0;animation-delay:-2s}.f4{bottom:2%;right:6%;animation-delay:-3s}
@keyframes float{50%{transform:translateY(-14px) rotate(8deg)}}
.marquee{overflow:hidden;background:var(--yellow);color:var(--ink);border-block:4px solid var(--ink);margin:10px -20px 0;transform:rotate(-1deg)}
.mq{display:flex;width:max-content;animation:mq 28s linear infinite;font:700 1.35rem var(--pix);padding:10px 0;white-space:nowrap}
.mq span{padding-right:0}@keyframes mq{to{transform:translateX(-50%)}}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:46px 0 10px}
.ss{background:var(--ink);border:3px solid #000;border-radius:18px;padding:16px;text-align:center}.ss small{display:block;opacity:.7;margin-bottom:4px}.ss b{font:700 1.7rem var(--pix);color:var(--yellow)}
.sec{margin-top:60px}.sec-t{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--cream);text-shadow:0 4px 0 var(--ink);text-align:center;margin-bottom:.6em}.sec-s{text-align:center;opacity:.9;margin-top:-.4em;margin-bottom:22px}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{color:var(--ink);border:3px solid var(--ink);border-radius:22px;box-shadow:var(--sh);padding:22px;transition:transform .15s}.feat:hover{transform:translateY(-5px) rotate(-1deg)}
.feat.f0{background:var(--yellow)}.feat.f1{background:var(--mint)}.feat.f2{background:var(--pink)}.feat.f3{background:var(--sky)}
.feat-e{font-size:2.6rem;display:block;margin-bottom:6px}.feat h3{font-size:1.25rem}.feat p{margin:0;font-weight:700}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:20px;padding:20px;box-shadow:var(--sh)}
.step-n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--purple);color:#fff;font:700 1.5rem var(--pix);border:3px solid var(--ink);margin-bottom:10px}
.step h3{font-size:1.2rem}.step p{margin:0}
.mini-packs{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.mini{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:150px;background:var(--cream);color:var(--ink);text-decoration:none;border:3px solid var(--ink);border-radius:18px;padding:14px;box-shadow:var(--sh);transition:transform .15s}.mini:hover{transform:translateY(-4px) rotate(1deg)}
.mini-e{font-size:2.2rem}.mini-p{background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:1px 12px;font-weight:900;margin-top:4px}
.faq{max-width:820px;margin-inline:auto}
details{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:16px;margin-bottom:12px;box-shadow:0 4px 0 var(--ink);overflow:hidden}
summary{cursor:pointer;padding:16px 20px;font-weight:900;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"＋";font-weight:900}details[open] summary::after{content:"－"}summary::-webkit-details-marker{display:none}
details p{padding:0 20px 18px;margin:0;font-weight:600}
.final{margin-top:70px;text-align:center;background:var(--ink);border:4px solid #000;border-radius:32px;padding:36px 20px}.final img{width:150px;border-radius:24px;border:4px solid #000;margin-bottom:10px}.final h2{font-size:2rem;color:var(--cream)}

/* ============ Play ============ */
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.hud-c{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.hud-energy{background:var(--yellow)}.hud-level{background:var(--mint)}.hud-gp{background:var(--pink)}.hud-streak{background:var(--sky)}
.hud-l{font-weight:900;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;display:flex;gap:6px;align-items:center}
.hud-v{font:700 1.9rem/1 var(--pix)}.hud-v b{font-size:2.3rem}.hud-v small{font:800 .85rem var(--body);opacity:.7}.hud-v.big{font-size:2.2rem}
.hud-s,.hud-t{font-size:.8rem;font-weight:800;opacity:.75}.hud small{font-size:.78rem;font-weight:700;opacity:.75}
.hud-bar{height:14px;border:3px solid var(--ink);border-radius:9px;background:rgba(255,255,255,.55);overflow:hidden;margin-top:2px}.hud-bar i{display:block;height:100%;background:var(--purple);transition:width .5s}.hud-bar.wide{height:18px;max-width:420px;margin:12px 0 4px;background:#fff}
.hud .btn{align-self:flex-start;margin-top:auto}
.play-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start}
.scene-card{background:var(--ink);border:3px solid #000;border-radius:26px;padding:14px;box-shadow:0 7px 0 rgba(0,0,0,.5)}
.scene-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}.scene-head h2{margin:0;font-size:1.4rem;color:var(--cream)}.scene-head .btn{margin-left:auto}
.scene-host{position:relative}
.house{position:relative;width:100%;aspect-ratio:1200/760;border-radius:18px;overflow:hidden;border:3px solid #000;user-select:none;-webkit-user-select:none;container-type:inline-size}
.house-art,.house-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.house-ghosts{position:absolute;inset:0;pointer-events:none}
.tw{animation:tw 3s ease-in-out infinite}.tw.d2{animation-delay:-1s}.tw.d3{animation-delay:-2s}@keyframes tw{50%{opacity:.25}}
.bat{animation:bat 9s linear infinite}.bat.b2{animation-duration:12s;animation-delay:-4s}@keyframes bat{0%{transform:translate(-40px,0)}50%{transform:translate(120px,-30px)}100%{transform:translate(-40px,0)}}
.smoke{animation:smoke 4s ease-out infinite}@keyframes smoke{from{transform:translateY(14px);opacity:.9}to{transform:translateY(-16px);opacity:0}}
.gsprite{position:absolute;width:calc(var(--gs)*1%);aspect-ratio:1;transform:translate(-50%,-100%);transition-property:left,top;transition-timing-function:ease-in-out;pointer-events:auto;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gwrap{display:block;position:relative;width:100%;height:100%;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7%)}}
.gimg{width:100%;height:100%;object-fit:cover;border-radius:24%;border:clamp(2px,.3cqw,4px) solid #0d0418;background:#fff;box-shadow:0 .5cqw 0 rgba(0,0,0,.35);display:block;transition:transform .15s,filter .3s}
.gimg.ph{object-fit:contain;background:var(--purple)}
.gsprite:hover .gimg{transform:scale(1.08)}
.gsprite.sel{filter:drop-shadow(0 0 .7cqw rgba(255,214,102,.95))}.gsprite.sel .gimg{border-color:var(--yellow)}
.gtag{position:absolute;left:50%;bottom:-3cqw;transform:translateX(-50%);background:var(--ink);color:#fff;font:800 clamp(8px,1.1cqw,13px) var(--body);padding:1px 7px;border-radius:8px;opacity:0;transition:opacity .15s;white-space:nowrap;pointer-events:none}
.gsprite:hover .gtag,.gsprite.sel .gtag{opacity:1}
.gbubble{position:absolute;top:-16%;right:-12%;min-width:36%;aspect-ratio:1;background:#fff;border:2px solid var(--ink);border-radius:50%;display:none;place-items:center;font-size:clamp(9px,1.6cqw,18px);animation:bub 1.6s ease-in-out infinite}
.gbubble.on{display:grid}@keyframes bub{50%{transform:translateY(-4px) scale(1.06)}}
.gsprite.faint .gimg{filter:grayscale(.75) brightness(.78)}
.gsprite.glow .gimg{box-shadow:0 0 2.2cqw .7cqw rgba(255,214,102,.9)}
.gsprite.pet .gwrap{animation:petp .55s ease-out}@keyframes petp{30%{transform:scale(1.18) rotate(-5deg)}60%{transform:scale(.96) rotate(4deg)}}
.gsprite.acting .gwrap{animation:hop .45s ease-in-out infinite}@keyframes hop{50%{transform:translateY(-14%)}}
.station{position:absolute;transform:translate(-50%,0);display:flex;align-items:center;gap:6px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:13px;padding:3px 10px 3px 8px;font:900 clamp(10px,1.45cqw,15px) var(--body);box-shadow:0 3px 0 var(--ink);cursor:pointer;z-index:900;transition:transform .12s}
.station:hover{transform:translate(-50%,-3px)}.station:active{transform:translate(-50%,2px)}.st-e{font-size:1.2em}
.part{position:absolute;font-size:clamp(14px,2.2cqw,26px);pointer-events:none;z-index:1000;animation:rise 1.3s ease-out forwards;opacity:0}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-70px) translateX(12px) scale(1.2)}}
.floattext{position:absolute;transform:translateX(-50%);z-index:1001;pointer-events:none;font:700 clamp(14px,2.4cqw,26px) var(--pix);color:#fff;text-shadow:0 3px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink);animation:ft 1.7s ease-out forwards;white-space:nowrap}
@keyframes ft{0%{opacity:0;transform:translate(-50%,0) scale(.7)}15%{opacity:1;transform:translate(-50%,-8px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-70px)}}
.play-side{display:flex;flex-direction:column;gap:18px}
.panel{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:22px;box-shadow:var(--sh);padding:16px}
.panel-empty{text-align:center;padding:16px 6px}.panel-empty img{width:120px;border-radius:20px;border:3px solid var(--ink)}
.pn-top{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.pn-img{width:104px;flex:none}.pn-i{width:104px;height:104px;border-radius:22px;border:4px solid var(--ink);object-fit:cover;background:#fff;display:block}.pn-i.ph{object-fit:contain;background:var(--purple)}
.pn-t h3{font-size:1.3rem;margin-bottom:4px}.mood{font-weight:900}.bond{font-size:.85rem;font-weight:800;opacity:.75}
.bars{display:grid;gap:8px;margin-bottom:14px}
.bar-r{display:grid;grid-template-columns:96px 1fr 30px;gap:8px;align-items:center;font-weight:800;font-size:.9rem}.bar-r b{text-align:right}
.bar{height:16px;border:3px solid var(--ink);border-radius:9px;background:#e9dfc0;overflow:hidden}.bar i{display:block;height:100%;transition:width .5s}
.bar i.ok,.rm i.ok{background:var(--ok)}.bar i.mid,.rm i.mid{background:var(--mid)}.bar i.low,.rm i.low{background:var(--low)}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.act{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;border:3px solid var(--ink);border-radius:15px;font:900 .95rem var(--body);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .08s}
.act:hover:not(:disabled){transform:translateY(-3px)}.act:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.act:disabled{opacity:.5;cursor:wait}
.a-feed{background:var(--pink)}.a-clean{background:var(--sky)}.a-play{background:var(--mint)}.act-e{font-size:1.9rem;line-height:1}.act-c{font-size:.78rem;background:var(--ink);color:var(--yellow);border-radius:999px;padding:0 8px}
.tipline{margin:12px 0 0}
.rcard{padding:16px}.rcard h3{font-size:1.15rem}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;max-height:270px;overflow:auto;padding:4px}
.rost{position:relative;aspect-ratio:1;border:3px solid var(--ink);border-radius:14px;padding:0;overflow:hidden;background:#fff;cursor:pointer;transition:transform .12s}.rost:hover{transform:translateY(-2px)}
.rost.on{outline:4px solid var(--purple);outline-offset:1px}.ri{width:100%;height:100%;object-fit:cover;display:block}.ri.ph{object-fit:contain;background:var(--purple)}
.rm{position:absolute;left:0;right:0;bottom:0;height:7px;background:rgba(0,0,0,.5)}.rm i{display:block;height:100%}
.ra{position:absolute;top:0;right:2px;font-size:13px;filter:drop-shadow(0 1px 0 #fff)}
.oe{text-align:center}.oe img{width:130px;border-radius:22px;border:4px solid var(--ink)}.oe h2{margin-top:10px}

/* ============ Profile ============ */
.pcard{display:flex;gap:28px;align-items:center;flex-wrap:wrap;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:26px;box-shadow:var(--sh);padding:24px;margin-bottom:22px}
.pc-av{position:relative}.pc-av .edit{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);white-space:nowrap}
.pc-i{flex:1;min-width:260px}.pc-i h1{font-size:2.3rem;margin-bottom:8px;word-break:break-word}.chips{display:flex;gap:8px;flex-wrap:wrap}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.sbox{background:var(--ink);border:3px solid #000;border-radius:18px;padding:14px;text-align:center}.sb-e{font-size:1.6rem}.sbox b{display:block;font:700 1.7rem var(--pix);color:var(--yellow)}.sbox small{opacity:.7}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.badge{display:flex;flex-direction:column;gap:2px;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:12px;filter:grayscale(1);opacity:.5}.badge.on{filter:none;opacity:1;background:var(--yellow)}
.bd-e{font-size:1.8rem}.badge small{font-weight:700;opacity:.75;line-height:1.25}
.gal-h{display:flex;justify-content:space-between;align-items:center;gap:10px}.gal-h h2 small{font-size:.9rem}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px}
.gcard{position:relative;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:6px 6px 8px;cursor:pointer;color:var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .12s;text-align:center}.gcard:hover{transform:translateY(-4px) rotate(-1deg)}
.gc-i{width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover;display:block}.gc-i.ph{object-fit:contain;background:var(--purple)}.gc-n{font-weight:900;margin-top:6px}.gc-m{position:absolute;top:10px;right:10px;font-size:1.3rem;filter:drop-shadow(0 1px 0 #fff)}
.empty{text-align:center;padding:20px}.empty img{width:130px;border-radius:22px;border:3px solid var(--ink)}
.hist{display:grid;gap:8px}.hrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:#fff;border:2px solid var(--ink);border-radius:12px}.hrow a{margin-left:auto}

/* ============ Shop ============ */
.balance{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0}
.balance>div{flex:1;min-width:150px;background:var(--ink);border:3px solid #000;border-radius:16px;padding:12px 16px}.balance small{display:block;opacity:.7}.balance b{font:700 1.6rem var(--pix);color:var(--yellow)}
.notice{background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:12px 16px;font-weight:800;margin:16px 0}.notice a{color:var(--ink)}
.packs{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:10px 0 18px}
.pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:24px;box-shadow:var(--sh);padding:22px 14px 16px;transition:transform .15s}.pack:hover{transform:translateY(-6px) rotate(-.6deg)}
.pack h3{font-size:1.15rem;margin:6px 0 0}.pk-art{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;border:4px solid var(--ink);font-size:3rem;box-shadow:0 4px 0 var(--ink);transition:transform .2s}.pack:hover .pk-art{transform:scale(1.1) rotate(8deg)}
.pk0 .pk-art{background:var(--pink)}.pk1 .pk-art{background:var(--mint)}.pk2 .pk-art{background:var(--yellow)}.pk3 .pk-art{background:var(--sky)}.pk4 .pk-art{background:var(--orange)}
.pk-en b{font:700 1.5rem var(--pix)}.pk-usd{font:700 2rem var(--pix);color:var(--purple-d)}.pk-eth{font-weight:800;font-size:.9rem}.pack .btn{margin-top:10px}
.ribbon{position:absolute;top:-12px;right:-8px;background:var(--purple);color:#fff;border:3px solid var(--ink);border-radius:10px;padding:2px 10px;font:800 .75rem var(--body);transform:rotate(4deg);box-shadow:0 3px 0 var(--ink)}
.fine{text-align:center;max-width:70ch;margin:0 auto 24px}

/* ============ Modals / toasts ============ */
.modal-back{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(13,4,24,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s;overflow:auto}.modal-back.in{opacity:1}
.modal{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:26px;box-shadow:0 10px 0 rgba(0,0,0,.45);padding:26px;animation:pop .2s}
.modal-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:3px solid var(--ink);background:#fff;font-weight:900;cursor:pointer;color:var(--ink)}
.mt{font-size:1.7rem;margin-right:30px}
.wlist{display:grid;gap:10px;margin:16px 0}.wopt{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px 14px;font:800 1rem var(--body);cursor:pointer;color:var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .1s}
.wopt:hover{transform:translateY(-2px)}.wopt img,.w-i{width:38px;height:38px;border-radius:10px;font-size:1.6rem;display:grid;place-items:center}.w-n{flex:1;text-align:left}.w-s{font-size:.8rem;background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:1px 10px}.wopt.busy{opacity:.7}
.empty-w{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:stretch}.empty-w img{align-self:center}.empty-w img{width:100px;border-radius:18px;border:3px solid var(--ink)}
.m-profile{width:min(600px,100%)}.pe{display:flex;gap:18px;align-items:center;margin:14px 0 8px;flex-wrap:wrap}.pe-f{flex:1;min-width:200px}
.lbl{display:block;font-weight:900;margin:8px 0 6px}.input{width:100%;font:800 1.1rem var(--body);padding:12px 14px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink)}.input:focus{outline:3px solid var(--purple)}
.tabs{display:flex;gap:6px;margin-bottom:10px}.tab{background:#fff;border:3px solid var(--ink);border-radius:999px;padding:5px 14px;font:800 .85rem var(--body);cursor:pointer;color:var(--ink)}.tab.on{background:var(--yellow)}
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;max-height:210px;overflow:auto;padding:4px;margin-bottom:16px;border:3px dashed #cfc39b;border-radius:16px}
.avgrid .span{grid-column:1/-1;margin:8px}.avopt{aspect-ratio:1;padding:0;border:3px solid var(--ink);border-radius:14px;overflow:hidden;cursor:pointer;background:#fff}.avopt.on{outline:4px solid var(--purple)}.avopt img{width:100%;height:100%;object-fit:cover;display:block}
.upl{grid-column:1/-1;text-align:center;padding:14px}
.m-ghost{width:min(780px,100%)}.gd{display:grid;grid-template-columns:260px 1fr;gap:22px}.gd-i{width:100%;aspect-ratio:1;object-fit:cover;border-radius:20px;border:4px solid var(--ink);display:block}.gd-i.ph{object-fit:contain;background:var(--purple)}
.gd h2{margin-right:30px}.traits{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:12px 0 16px}.trait{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:6px 10px}.trait small{display:block;opacity:.6;font-weight:800;font-size:.7rem;text-transform:uppercase}.trait b{font-size:.9rem}
.how{list-style:none;padding:0;margin:18px 0;display:grid;gap:12px}.how li{display:flex;gap:14px;align-items:flex-start}.how-e{font-size:1.8rem;width:46px;height:46px;display:grid;place-items:center;background:var(--yellow);border:3px solid var(--ink);border-radius:14px;flex:none}.how b{display:block}.how p{margin:0;font-size:.92rem}
.pm{text-align:center}.pm-art{display:grid;place-items:center;width:100px;height:100px;margin:0 auto 10px;border-radius:50%;background:var(--yellow);border:4px solid var(--ink);font-size:3.2rem;box-shadow:0 5px 0 var(--ink)}.pm-art.pop{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.pm-s{font-weight:900;font-size:1.1rem}.pm-box{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.pm-box>div{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:8px}.pm-box small{display:block;opacity:.6}.pm-box b{font-size:1rem}
.spin{width:38px;height:38px;border-radius:50%;border:5px solid #d8cdf5;border-top-color:var(--purple);margin:14px auto;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
#toasts{position:fixed;z-index:400;left:50%;bottom:90px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,520px)}
.toast{background:var(--ink);color:#fff;border:3px solid #000;border-radius:14px;padding:10px 16px;font-weight:800;box-shadow:0 5px 0 rgba(0,0,0,.4);opacity:0;transform:translateY(10px);transition:all .25s;text-align:center}.toast.in{opacity:1;transform:none}.toast.ok{background:#1b6b45;border-color:#0e3d27}.toast.bad{background:#8e1b2c;border-color:#4d0b16}
.confetti{position:fixed;width:9px;height:14px;border-radius:2px;z-index:500;pointer-events:none;animation:conf 1.1s ease-out forwards}
@keyframes conf{to{transform:translate(var(--dx),calc(var(--dy) + 140px)) rotate(var(--r));opacity:0}}

/* ============ Footer ============ */
.footer{background:var(--ink);border-top:4px solid #000;margin-top:30px}.fwrap{max-width:1220px;margin:0 auto;padding:28px 20px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.flogo{height:42px}.flinks{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-weight:800}.flinks a{text-decoration:none;color:var(--yellow)}.flinks a:hover{text-decoration:underline}

/* ============ Responsive ============ */
@media (max-width:1080px){.play-grid{grid-template-columns:1fr}.packs{grid-template-columns:repeat(3,1fr)}.feats,.steps{grid-template-columns:repeat(2,1fr)}.hud{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center}.hero .row{justify-content:center}.hero .lead{margin-inline:auto}.hero-r{order:-1}.sticker{max-width:300px}
  .stats-strip,.sgrid{grid-template-columns:repeat(2,1fr)}.gd{grid-template-columns:1fr}.pcard{justify-content:center;text-align:center}.chips{justify-content:center}.hud-bar.wide{margin-inline:auto}
}
@media (max-width:720px){
  body{padding-bottom:84px}.banner{top:58px}.hwrap{padding:8px 14px}.brand img{height:38px}.me-n{display:none}.me{padding-right:8px}
  .nav{position:fixed;left:0;right:0;bottom:0;margin:0;justify-content:space-around;background:var(--ink);border-top:3px solid #000;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:70;gap:0}
  .nav-a{flex-direction:column;gap:0;padding:6px 14px;font-size:.78rem}.nav-e{font-size:1.4rem}
  .packs{grid-template-columns:repeat(2,1fr)}.feats,.steps{grid-template-columns:1fr}.page{padding:20px 14px 50px}#toasts{bottom:96px}
  .bar-r{grid-template-columns:84px 1fr 28px}.hud-v b{font-size:2rem}.hud-v.big{font-size:1.8rem}.hero h1{font-size:3rem}
}
@media (max-width:420px){.packs{grid-template-columns:1fr}.hud{gap:10px}.pn-img,.pn-i{width:84px;height:84px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.mq{animation:none}}

/* ============ Leaderboard ============ */
.lb .page-head{text-align:center}.lb .page-head .lead{margin-inline:auto}
.lb-tabs{justify-content:center;margin:6px 0 22px}.lb-tabs .tab{font-size:1rem;padding:8px 22px}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end;max-width:760px;margin:10px auto 26px}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:22px 22px 8px 8px;box-shadow:var(--sh);padding:26px 10px 0;overflow:hidden}
.pod.p1{background:var(--yellow);padding-top:34px}.pod.p2{background:#e6eaf5}.pod.p3{background:#f6d3b0}
.pod-m{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:1.7rem}.pod-av{border-radius:50%;margin:6px 0 4px}
.pod-n{font:700 1.15rem var(--pix);word-break:break-all}.pod small{opacity:.7;font-weight:800}.pod-gp{font:700 1.25rem var(--pix);margin-top:4px}
.pod-step{margin-top:10px;width:calc(100% + 20px);background:var(--ink);color:var(--yellow);font:700 1.1rem var(--pix);padding:6px 0}.pod.p1 .pod-step{padding:16px 0}.pod.p2 .pod-step{padding:10px 0}
.lb-list,.top5{display:grid;gap:10px;max-width:760px;margin:0 auto}
.lbrow{display:flex;align-items:center;gap:14px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:8px 16px 8px 12px;box-shadow:0 4px 0 var(--ink);transition:transform .12s}.lbrow:hover{transform:translateX(4px)}
.lbrow.me{background:var(--yellow);outline:4px solid var(--purple);outline-offset:2px}.lbrow.t1,.lbrow.t2,.lbrow.t3{background:#fff6cf}
.lb-rank{min-width:46px;text-align:center;font:700 1.25rem var(--pix)}.lb-n{flex:1;min-width:0}.lb-n b{display:block;font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-n small{opacity:.65;font-weight:800}
.lb-gp{font:700 1.3rem var(--pix);color:var(--purple-d);white-space:nowrap}.lb-gp span{color:#e5a100}
.lb-me{position:sticky;top:76px;z-index:20;max-width:760px;margin:0 auto 14px}.lb-me:empty{display:none}
.lb-me-in{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border:3px solid #000;border-radius:16px;padding:10px 16px;font-weight:800;box-shadow:0 5px 0 rgba(0,0,0,.4);flex-wrap:wrap}.lb-me-in .grow{flex:1}.lb-me-in .lb-gp{color:var(--yellow)}
.gate .spin{margin:10px auto}
@media (max-width:720px){.podium{gap:8px}.pod{padding-inline:4px}.pod-n{font-size:.95rem}.pod-gp{font-size:1rem}.lbrow{gap:10px;padding-right:10px}.lb-me{top:66px}.nav-a{padding:6px 8px}}