:root{--bg:#FBF6EE;--bg-2:#FFFFFF;--bg-3:#F4EDE3;--line:#EADFD2;--ink:#171A26;--ink-2:#5B6075;--ink-3:#9AA0B2;--accent:#FF5C8A;--accent-ink:#ffffff;--live:#17B368;--review:#E39B00;--radius:22px;--max:1180px;--shadow:0 18px 50px -24px rgba(23,26,38,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}
h1,h2,h3,.display{font-family:"Fredoka","Nunito",sans-serif;font-weight:600;letter-spacing:-.01em;line-height:1.05;margin:0}
h1{font-size:clamp(42px,7vw,88px)}h2{font-size:clamp(30px,4vw,46px)}h3{font-size:23px}
p{margin:0 0 1em}.muted{color:var(--ink-2)}.small{font-size:14px}.mono{font-family:"Fredoka",sans-serif;font-variant-numeric:tabular-nums}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.bg-shapes{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 500px at 85% -10%,#fff 0%,transparent 60%),radial-gradient(700px 500px at -10% 110%,#fff 0%,transparent 60%),var(--bg)}
.bg-shapes i{display:none}
header.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:rgba(251,246,238,.75);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.brand{display:flex;align-items:center;gap:12px}.brand img{height:58px;width:auto}
.nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;font-family:"Fredoka",sans-serif;font-size:17px;font-weight:500}
.nav ul a{color:var(--ink-2);padding:8px 14px;border-radius:999px}.nav ul a:hover,.nav ul a[aria-current]{color:var(--ink);background:#fff;box-shadow:0 2px 10px -4px rgba(23,26,38,.25)}
.burger{display:none;background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit}
@media(max-width:820px){.nav ul{display:none;position:absolute;left:0;right:0;top:74px;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 16px}.nav ul.open{display:flex}.nav ul a{display:block;padding:12px 6px}.burger{display:block}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:999px;font-family:"Fredoka",sans-serif;font-weight:600;font-size:17px;border:1px solid var(--line);background:#fff;color:var(--ink);transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap;box-shadow:0 6px 18px -12px rgba(23,26,38,.35)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(23,26,38,.35)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;box-shadow:none}.btn.sm{padding:10px 16px;font-size:15px}.btns{display:flex;flex-wrap:wrap;gap:12px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-family:"Fredoka",sans-serif;font-weight:500;font-size:14px;letter-spacing:.02em;border:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(6px);color:var(--ink-2)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.pill.live{color:var(--live);border-color:rgba(23,179,104,.3)}.pill.live::before{background:var(--live);box-shadow:0 0 0 4px rgba(23,179,104,.15)}
.pill.review{color:var(--review)}.pill.review::before{background:var(--review)}.pill.soon{color:var(--ink)}.pill.soon::before{background:var(--accent)}.pill.dev::before{background:var(--ink-3)}
section{padding:76px 0}section.tight{padding:40px 0}
.eyebrow{font-family:"Fredoka",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:14px;display:block}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
/* hero with the PixiJS stage */
.hero{position:relative;padding:0;min-height:min(84vh,760px);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg)}
.hero .stage{position:absolute;inset:0;z-index:0}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;opacity:.92}
.hero::after{content:none}
.hero .wrap{position:relative;z-index:1;padding-top:110px;padding-bottom:110px;width:100%;pointer-events:none}.hero .wrap a,.hero .wrap button{pointer-events:auto}
.hero h1{max-width:12ch}.hero .lead{font-size:clamp(18px,2vw,22px);max-width:52ch;color:var(--ink-2);margin:18px 0 26px}
.hero .facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;justify-content:inherit}
.fact b{display:block;font-family:"Fredoka",sans-serif;font-size:30px;font-weight:600;line-height:1}.fact span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hero.with-art .wrap{text-shadow:0 2px 24px rgba(255,255,255,.9)}
.hero .brand-mark{animation:float 5s ease-in-out infinite;transition:transform .3s;will-change:transform}.hero .brand-mark:hover{transform:rotate(-4deg) scale(1.04)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media(prefers-reduced-motion:reduce){.hero .brand-mark{animation:none}}
@media(max-width:820px){.hero{min-height:min(78vh,680px)}.hero .wrap{padding-top:80px;padding-bottom:80px}}
/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px}
.card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);aspect-ratio:3/4;transition:transform .18s,box-shadow .18s;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 60px -28px rgba(23,26,38,.4)}.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.card:hover img{transform:scale(1.04)}
.card .pill{position:absolute;top:12px;left:12px}
.card .meta{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 16px;background:linear-gradient(180deg,transparent,rgba(23,26,38,.85) 75%);color:#fff}
.card .meta h3{font-size:24px}.card .meta .sub{font-size:13px;color:rgba(255,255,255,.8);letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
.card.placeholder{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 20% 10%,#fff,#f3ece2 60%)}
.card.placeholder .mark{font-family:"Fredoka",sans-serif;font-size:52px;font-weight:600;color:#d9cfc2;text-align:center;line-height:.95;padding:20px}
.card.placeholder .meta{color:var(--ink);background:none}.card.placeholder .meta .sub{color:var(--ink-3)}
/* game page */
.game-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.game-hero img.bg{width:100%;height:min(62vh,560px);object-fit:cover;object-position:center 25%}
.game-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--bg) 100%)}
.game-body{display:grid;grid-template-columns:1.4fr .9fr;gap:48px;align-items:start;margin-top:-90px;position:relative;z-index:1}
@media(max-width:860px){.game-body{grid-template-columns:1fr;margin-top:-60px}}
.spec{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.spec dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0}.spec dt{color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-size:12px;align-self:center}.spec dd{margin:0;font-family:"Fredoka",sans-serif;font-size:22px;font-weight:600;text-align:right}
.spec hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.feats{list-style:none;padding:0;margin:0;display:grid;gap:8px}.feats li{display:flex;justify-content:space-between;padding:10px 14px;background:var(--bg-3);border-radius:12px;font-size:15px}.feats li b{font-family:"Fredoka",sans-serif;color:var(--accent)}
.video{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000;aspect-ratio:16/9;box-shadow:var(--shadow)}.video video{width:100%;height:100%}
/* releases */
.timeline{position:relative;padding-left:28px;border-left:2px solid var(--line);display:grid;gap:34px}
.timeline li{list-style:none;position:relative}.timeline li::before{content:"";position:absolute;left:-34px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #fff}
.timeline time{font-family:"Fredoka",sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);font-size:13px}
/* wins */
.wins{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.win{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.win .amt{font-family:"Fredoka",sans-serif;font-size:38px;font-weight:600;color:var(--accent);line-height:1}.win .body{padding:18px}
.empty{border:2px dashed var(--line);border-radius:var(--radius);padding:44px 24px;text-align:center;color:var(--ink-2);background:rgba(255,255,255,.5)}
/* contact */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}.box h3{margin-bottom:10px}.box a.link{color:var(--accent);word-break:break-all;font-weight:700}
/* discord band */
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:48px;padding-bottom:48px}
footer{padding:44px 0 60px;color:var(--ink-3);font-size:14px}footer .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}footer nav a{margin-right:18px;color:var(--ink-2)}
footer .legal{margin-top:22px;max-width:80ch;line-height:1.6}.age{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--ink-2);font-family:"Fredoka",sans-serif;font-weight:600;color:var(--ink);margin-right:10px;vertical-align:middle}
.soon-btn{cursor:default;opacity:.85;gap:8px}.soon-btn small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:var(--accent);color:var(--accent-ink);margin-left:4px}.soon-btn:hover{transform:none}
.soon-nav{cursor:default;opacity:.7}.soon-nav small{font-size:10px;letter-spacing:.12em;padding:2px 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);margin-left:6px;vertical-align:middle}