:root{--bg:#0e0b14;--panel:#17121f;--line:#2e2540;--ink:#efe6d2;--muted:#9a8fae;--gold:#e8b44a;--red:#c8324a;--px:'Pixelify Sans',monospace}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.65 Inter,system-ui,sans-serif;overflow-x:hidden}
img{image-rendering:pixelated;max-width:100%;display:block}
a{color:var(--gold)}
h2,h3{font-family:'Jersey 15',var(--px);font-weight:400;letter-spacing:.04em}
h2{font-size:2.6rem;color:var(--gold);margin-bottom:.6rem}
h3{font-size:1.5rem}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.85rem;margin-top:1rem}
.ink{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(60vw 40vw at 80% 10%,#3a1a3a55,transparent),radial-gradient(50vw 40vw at 10% 90%,#1a2a4a55,transparent)}

.hero{position:relative;min-height:92vh;display:grid;place-items:center;overflow:hidden;text-align:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45) saturate(1.1);transform:scale(1.08);animation:drift 24s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,var(--bg))}
@keyframes drift{to{transform:scale(1.16) translate(-2%,-1%)}}
.hero-in{position:relative;z-index:1;padding:2rem 16px;max-width:900px}
.logo{width:min(640px,90vw);margin:0 auto;filter:drop-shadow(0 6px 0 #0008);animation:pop .9s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.tag{font-family:'Jersey 15';font-size:clamp(1.6rem,4vw,2.4rem);color:var(--gold);margin-top:1rem}
.sub{color:#d8cfe6;max-width:560px;margin:.4rem auto 0}
.btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.btn{font-family:var(--px);font-weight:600;text-decoration:none;color:var(--ink);padding:.75rem 1.3rem;border:2px solid var(--ink);background:#0008;box-shadow:4px 4px 0 #000;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.btn.gold{background:var(--gold);color:#1a1020;border-color:var(--gold)}

.nav{position:sticky;top:0;z-index:5;display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;padding:.8rem 16px;background:#0e0b14e6;backdrop-filter:blur(6px);border-bottom:1px solid var(--line);font-family:var(--px)}
.nav a{color:var(--muted);text-decoration:none}.nav a:hover,.nav a.on{color:var(--gold)}

main{max-width:1150px;margin:0 auto;padding:0 16px}
section{margin:5.5rem 0}
.card{background:var(--panel);border:2px solid var(--line);padding:1.8rem;box-shadow:6px 6px 0 #000}
.card p+p{margin-top:.9rem}
.grid2{display:grid;grid-template-columns:1fr 1.4fr;gap:1.6rem}
dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem}
dt{color:var(--muted);font-family:var(--px)}dd{word-break:break-word}

.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.4rem}
.feat{background:var(--panel);border:2px solid var(--line);padding:1.4rem;transition:transform .2s,border-color .2s}
.feat:hover{transform:translateY(-4px);border-color:var(--gold)}
.feat span{font-size:2rem;color:var(--gold);display:block}
.feat p{color:#cfc5df;font-size:.95rem}

.player{padding:1rem}
.player video{width:100%;background:#000;aspect-ratio:16/9}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;justify-content:center}
.chips button{font:600 .9rem var(--px);background:transparent;color:var(--ink);border:2px solid var(--line);padding:.4rem .9rem;cursor:pointer}
.chips button.on,.chips button:hover{border-color:var(--gold);color:var(--gold)}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;margin-top:1.4rem}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--line);cursor:zoom-in;transition:transform .2s,border-color .2s;image-rendering:auto}
.gallery img:hover{transform:scale(1.02);border-color:var(--gold)}

.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:1.4rem}
.cast figure{background:var(--panel);border:2px solid var(--line);padding:1.2rem;text-align:center}
.rig{position:relative;margin:0 auto 1rem;height:200px;display:flex;align-items:flex-end;justify-content:center}
.rig-root{position:relative;cursor:pointer}
.emote{position:absolute;top:0;left:50%;transform:translate(-50%,0) scale(0);font:400 1.6rem "Jersey 15";color:#1a1020;background:var(--ink);padding:0 .5rem;border:2px solid #000;box-shadow:3px 3px 0 #000;pointer-events:none;opacity:0}
.emote::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-4px;border:4px solid transparent;border-top-color:var(--ink)}
.emote.on{animation:emote 1.1s steps(6) forwards}
.emote.e-shock,.emote.e-angry{background:var(--gold)}.emote.e-shock::after,.emote.e-angry::after{border-top-color:var(--gold)}
.emote.e-hurt{background:var(--red);color:var(--ink)}.emote.e-hurt::after{border-top-color:var(--red)}
@keyframes emote{0%{opacity:1;transform:translate(-50%,10px) scale(.4)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}35%,80%{opacity:1;transform:translate(-50%,-4px) scale(1)}100%{opacity:0;transform:translate(-50%,-14px) scale(1)}}
.m-hop{animation:hop .55s steps(5) 2}
.m-jump{animation:jump .5s steps(5)}
.m-nod{animation:nod .35s steps(3) 4}
.m-shake{animation:shake .12s steps(2) 8}
.m-droop{animation:droop 1.4s steps(7) forwards}
.m-wobble{animation:wobble .4s steps(4) 2}
@keyframes hop{50%{transform:translateY(-14px)}}
@keyframes jump{30%{transform:translateY(-22px) scaleY(1.06)}70%{transform:translateY(0) scale(1.08,.92)}}
@keyframes nod{50%{transform:translateY(3px)}}
@keyframes shake{50%{transform:translateX(-4px)}100%{transform:translateX(4px)}}
@keyframes droop{30%,80%{transform:translateY(6px) scaleY(.96)}}
@keyframes wobble{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.rig-root div{position:absolute;width:0;height:0;transform-origin:0 0}
.rig-root img{position:absolute;max-width:none;image-rendering:pixelated}
.cast .boss{border-color:#5a1a2a}.cast .boss b{color:var(--red)}
@keyframes bob{50%{transform:translateY(-6px)}}
figcaption{color:var(--muted);font-size:.9rem}figcaption b{display:block;color:var(--gold);font:400 1.4rem 'Jersey 15'}

.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1.4rem}
.logos a{display:grid;place-items:center;gap:.6rem;padding:1rem;background:repeating-conic-gradient(#1c1626 0 25%,#141019 0 50%) 0 0/20px 20px;border:2px solid var(--line);color:var(--muted);text-decoration:none;font:.85rem var(--px)}
.logos a:hover{border-color:var(--gold);color:var(--gold)}
.logos img{max-height:140px;width:auto}

.lb{position:fixed;inset:0;z-index:20;background:#000e;display:grid;place-items:center;padding:16px}
.lb[hidden]{display:none}
.lb-box{display:grid;gap:1rem;justify-items:center;max-width:95vw}
.lb-box img{max-height:78vh;max-width:95vw;width:auto;image-rendering:auto;cursor:default}
.lb-box img.px{image-rendering:pixelated;min-height:240px;object-fit:contain}
.lb-bar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center;font-family:var(--px)}
.lb-bar .btn{margin:0}
.lb-x{position:absolute;top:12px;right:20px;font-size:2.4rem;background:none;border:0;color:var(--ink);cursor:pointer}
footer{text-align:center;color:var(--muted);padding:3rem 16px;border-top:1px solid var(--line);font-family:var(--px)}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media (max-width:860px){.grid2{grid-template-columns:1fr}.feats{grid-template-columns:1fr 1fr}.cast{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.feats,.cast{grid-template-columns:1fr}h2{font-size:2.1rem}.gallery{grid-template-columns:1fr}}

.discord{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.2rem;padding:.65rem 1.3rem;background:#5865f2;color:#fff;text-decoration:none;font:600 1rem var(--px);border:2px solid #000;box-shadow:4px 4px 0 #000;transition:transform .12s,box-shadow .12s,background .12s}
.discord:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000;background:#4752c4}
