:root{--bg:#14123a;--bg2:#1f1b52;--ink:#f3efff;--mut:#b5aee0;--pink:#ff4d8d;--cyan:#3de0ff;--sun:#ffd23f;--r:18px;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#f4f1ff;--bg2:#e4deff;--ink:#1b1745;--mut:#5b5490}}
:root[data-theme="light"]{--bg:#f4f1ff;--bg2:#e4deff;--ink:#1b1745;--mut:#5b5490}
:root[data-theme="dark"]{--bg:#14123a;--bg2:#1f1b52;--ink:#f3efff;--mut:#b5aee0}
html{height:100%;scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:500 1.05rem/1.55 Nunito,system-ui,sans-serif}
h1,h2,h3{font-family:Bungee,Impact,sans-serif;font-weight:400;margin:0;line-height:1.05}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
header.hero{position:relative;overflow:hidden;padding:56px 0 0;background:linear-gradient(#2a1660 0%,#8a2d8f 55%,#ff6a88 100%);color:#fff}
.hero h1{font-size:clamp(3rem,13vw,7.5rem);letter-spacing:.01em;text-shadow:5px 5px 0 #14123a}
.hero h1 span{display:inline-block;animation:bob 2.4s ease-in-out infinite}
.hero h1 span:nth-child(odd){animation-delay:.3s}
@keyframes bob{50%{transform:translateY(-8px)}}
.hero p{max-width:34ch;font-size:1.2rem;font-weight:700;margin:14px 0 24px}
.btn{display:inline-block;background:var(--sun);color:#14123a;border:0;border-radius:999px;padding:12px 24px;font:800 1rem Nunito,sans-serif;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 #b8901a}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b8901a}
.btn.alt{background:var(--cyan);box-shadow:0 4px 0 #1b93ad}
.sky{display:block;width:100%;height:auto;margin-top:-10px}
nav.town{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;padding:40px 0 10px}
.door{display:block;text-decoration:none;background:var(--bg2);border-radius:var(--r) var(--r) 8px 8px;padding:20px;border-bottom:8px solid var(--c);transition:transform .15s}
.door:hover{transform:translateY(-4px)}
.door b{font:400 1.5rem Bungee;display:block;color:var(--c)}
.door i{font-style:normal;font-size:2.4rem;display:block}
section{padding:46px 0}
h2{font-size:clamp(1.8rem,5vw,2.8rem);margin-bottom:6px}
.sub{color:var(--mut);margin:0 0 20px}
.stage{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;background:var(--bg2);border-radius:var(--r);padding:22px}
@media(max-width:700px){.stage{grid-template-columns:1fr}}
canvas{max-width:100%;height:auto;border-radius:12px;background:#0c0a26;touch-action:none;border:3px solid var(--c,var(--cyan))}
.panel p{margin:0 0 10px}.panel .big{font:400 2.4rem Bungee;color:var(--sun)}
.pad{display:grid;grid-template-columns:repeat(3,52px);gap:6px;margin-top:12px}
.pad button{height:52px;border:0;border-radius:12px;background:var(--bg);color:var(--ink);font-size:1.3rem;cursor:pointer}
.pad button:nth-child(1){grid-column:2}.pad button:nth-child(2){grid-column:1}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:360px}
.card{aspect-ratio:1;border:0;border-radius:14px;background:var(--pink);font-size:2rem;cursor:pointer;color:transparent;transition:transform .25s}
.card.up{background:var(--ink);color:inherit;transform:rotateY(360deg)}
.card.done{background:var(--cyan);color:inherit;opacity:.7}
#rx{width:100%;min-height:220px;border:0;border-radius:var(--r);background:var(--pink);color:#fff;font:400 1.6rem Bungee;cursor:pointer;padding:20px}
#rx.go{background:#2ed47a;color:#08331c}#rx.wait{background:#e23c3c}
table{width:100%;border-collapse:collapse;background:var(--bg2);border-radius:var(--r);overflow:hidden}
th,td{padding:12px 16px;text-align:left}th{font:400 .95rem Bungee;color:var(--sun)}
tr+tr td{border-top:1px solid rgba(160,150,230,.25)}
.ovf{overflow-x:auto}
input{font:700 1rem Nunito;padding:11px 16px;border-radius:999px;border:3px solid var(--cyan);background:var(--bg);color:var(--ink);width:min(260px,100%)}
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.pal{background:var(--bg2);border-radius:var(--r);padding:22px;border-left:8px solid var(--c)}
.pal h3{font-size:1.4rem;margin-bottom:8px}
.pal.new{border:3px dashed var(--mut);border-left-width:3px;text-align:center}
.pal button{margin-top:10px}
.tag{display:inline-block;background:var(--c);color:#14123a;border-radius:999px;padding:3px 12px;font-weight:800;font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 20px}
.chip{border:3px solid var(--c);background:transparent;color:var(--ink);font:400 1.1rem Bungee,sans-serif;border-radius:999px;padding:10px 22px;cursor:pointer}
.chip.on{background:var(--c);color:#14123a}
.mis{background:var(--bg2);border-left:8px solid var(--c);border-radius:var(--r);padding:20px}
.mis h3{font-size:1.5rem;margin:8px 0}.mis p{margin:6px 0}
.hide{display:none}
footer{padding:30px 0 50px;color:var(--mut);text-align:center}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
button.door{border:0;border-bottom:8px solid var(--c);text-align:left;color:var(--ink);font:500 1rem Nunito,sans-serif;cursor:pointer}
.door.quest{grid-column:1/-1;background:linear-gradient(120deg,#ff4d8d,#8a2d8f);color:#fff;border-bottom-color:var(--sun)}
.door.quest b{color:var(--sun)}
.back{background:none;border:0;color:var(--cyan);font:800 1rem Nunito;cursor:pointer;padding:0 0 14px}
.mis{background:var(--bg2);border-left:8px solid var(--c);border-radius:var(--r);padding:16px 20px;margin-bottom:18px}
.mis h3{font-size:1.3rem}.mis p{margin:6px 0}
.hide{display:none}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 20px}
.chip{border:3px solid var(--c);background:transparent;color:var(--ink);font:400 1.1rem Bungee,sans-serif;border-radius:999px;padding:10px 22px;cursor:pointer}
.chip.on{background:var(--c);color:#14123a}

/* ===== animations & shared ===== */
body::before{content:'GameTown';position:fixed;inset:0;z-index:99;display:grid;place-items:center;padding-bottom:50px;background:var(--bg);color:var(--ink);font:400 clamp(2.2rem,10vw,4.5rem) Bungee,sans-serif;animation:ldpulse 1s ease-in-out infinite,ldout .5s .95s forwards}
body::after{content:'';position:fixed;z-index:100;left:50%;top:calc(50% + 36px);width:min(240px,60vw);height:10px;transform:translateX(-50%);border-radius:9px;background:linear-gradient(90deg,var(--pink),var(--sun)) no-repeat,var(--bg2);background-size:0 100%,100% 100%;animation:ldfill .9s ease-out forwards,ldout .5s .95s forwards}
@keyframes ldpulse{50%{letter-spacing:.08em}}
@keyframes ldfill{to{background-size:100% 100%,100% 100%}}
@keyframes ldout{to{opacity:0;visibility:hidden}}
body.leaving{opacity:0;transition:opacity .25s}
.btn,.chip,.door,.key{position:relative;overflow:hidden}
.btn{transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px) scale(1.04)}
.btn::after{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);transition:left .55s}
.btn:hover::after{left:140%}
.chip{transition:transform .15s,background .2s,color .2s}.chip:hover{transform:translateY(-3px) rotate(-1.5deg)}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(3.5);opacity:0}}
.door{transform:perspective(700px) translateY(var(--ty,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s,box-shadow .25s}
.door:hover{--ty:-6px;box-shadow:0 16px 34px rgba(0,0,0,.35),0 0 0 2px var(--c)}
.door i{transform-origin:1.2rem 60%}.door:hover i{animation:wig .6s}
@keyframes wig{25%{transform:rotate(-14deg) scale(1.25)}75%{transform:rotate(14deg) scale(1.25)}}
.badge{display:inline-block;margin-top:12px;background:rgba(160,150,230,.2);border-radius:999px;padding:3px 14px;font-size:.85rem;font-weight:800}
.rv{opacity:0}.rv.in{animation:rvin .6s calc(var(--i,0)*90ms) both}
@keyframes rvin{from{opacity:0;transform:translateY(22px)}to{opacity:1}}
header .wrap{position:relative;z-index:1}
header.q{position:relative;overflow:hidden;padding:40px 0 34px;background:linear-gradient(#2a1660,#8a2d8f 70%,#ff6a88);color:#fff}
header.q h1{font-size:clamp(2rem,8vw,4rem);text-shadow:4px 4px 0 #14123a;margin:8px 0}
header.q a{color:var(--sun);font-weight:800}
.sp{position:absolute;width:6px;height:6px;background:var(--c,#ffd23f);animation:twk 3s ease-in-out infinite}
@keyframes twk{50%{opacity:.1;transform:translateY(-12px) rotate(45deg)}}
.mis{animation:slin .5s both}@keyframes slin{from{opacity:0;transform:translateX(-22px)}}
.slots{display:flex;flex-wrap:wrap;gap:8px 4px;align-items:center;margin:8px 0 22px;font:400 clamp(1rem,4.5vw,1.5rem) Bungee,sans-serif}
.slots b{color:var(--mut)}
.slot{padding:6px 12px;border-radius:10px;background:var(--bg2);color:var(--mut);transition:background .4s,color .4s,transform .4s}
.slot.on{background:var(--sun);color:#14123a;transform:rotate(-2deg)}
.fragcode{font:400 2.4rem Bungee,sans-serif;letter-spacing:.1em;color:var(--sun);animation:flip .8s both;transform-origin:center bottom}
@keyframes flip{from{transform:perspective(400px) rotateX(90deg);opacity:0}}
@media(prefers-reduced-motion:reduce){body::before,body::after{display:none}.rv{opacity:1!important}}