:root{--surface-100:#FFF8EE;--surface-200:#FFEFD9;--ink:#1B1530;--ink-muted:#5E5470;--burst:#FF5A1F;--burst-text:#C2410C;--pop:#FFC93C;--mint:#2EC4A6;--on-burst:#FFFFFF;--line:#E9DCC8;--radius-sm:8px;--radius-md:16px;--radius-lg:28px;--radius-pill:999px;--display:"Fredoka","Baloo 2",system-ui,sans-serif;--sans:"Nunito",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--surface-100:#16121F;--surface-200:#221B30;--ink:#FFF4E6;--ink-muted:#B9AFC8;--burst:#FF6A33;--burst-text:#FF8A5C;--mint:#3FD6B8;--on-burst:#1B1530;--line:#3A3048}}
:root[data-theme="dark"]{--surface-100:#16121F;--surface-200:#221B30;--ink:#FFF4E6;--ink-muted:#B9AFC8;--burst:#FF6A33;--burst-text:#FF8A5C;--mint:#3FD6B8;--on-burst:#1B1530;--line:#3A3048}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-100);color:var(--ink);font:400 15px/22px var(--sans)}
a{color:var(--burst-text)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px 48px}
header.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;flex-wrap:wrap}
.brandline{display:flex;align-items:center;gap:8px;font:600 22px/1 var(--display);color:var(--ink);text-decoration:none}
.brandline span{font-weight:500;color:var(--ink-muted)}
nav{display:flex;align-items:center;gap:16px}
nav a{color:var(--ink);text-decoration:none;font:800 14px/1 var(--sans)}
nav a:hover{color:var(--burst-text)}
button.theme{font:800 13px/1 var(--sans);background:var(--surface-200);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 16px;cursor:pointer}
.cover{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-200);min-height:360px;margin:8px 0 48px}
.cover svg.art{position:absolute;inset:0;width:100%;height:100%}
.cover .text{position:relative;padding:48px 5%;max-width:560px}
.cover h1{margin:0;font:600 clamp(44px,8vw,80px)/.95 var(--display)}
.cover .lead{color:var(--ink-muted);margin:16px 0 24px}
.fill-burst{fill:var(--burst)}.fill-pop{fill:var(--pop)}.fill-mint{fill:var(--mint)}.fill-ink{fill:var(--ink)}
.rays{animation:pulse 2.8s ease-in-out infinite;transform-origin:0 0}
.spark{animation:bob 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}@keyframes bob{50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){.rays,.spark{animation:none}}
@media (max-width:640px){.cover svg.art{opacity:.35}.cover{min-height:420px}}
h2{font:600 32px/1.05 var(--display);margin:48px 0 16px}
h3{font:600 20px/1.2 var(--display);margin:0 0 8px}
p{max-width:68ch}
.lead{font:600 18px/28px var(--sans)}
.btn{display:inline-block;font:800 16px/20px var(--sans);background:var(--burst);color:var(--on-burst);border-radius:var(--radius-md);padding:12px 24px;border:0;text-decoration:none;cursor:pointer;transition:transform .1s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.games{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.game{color:var(--ink);text-decoration:none;display:block}
.thumb{position:relative;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-200);transition:transform .15s}
.thumb img{width:100%;height:100%;display:block}
a.game:hover .thumb{transform:translateY(-4px) rotate(-1deg)}
.thumb.ghost{box-shadow:inset 0 0 0 6px var(--line);display:grid;place-items:center;font:700 22px/1 var(--display);color:var(--ink-muted)}
.sticker{position:absolute;top:16px;right:16px;font:700 14px/1 var(--display);background:var(--pop);color:#1B1530;border-radius:var(--radius-pill);padding:8px 14px}
.meta{padding:12px 4px}
.meta b{display:block;font:600 22px/1.2 var(--display)}
.meta span{font:600 13px/18px var(--sans);color:var(--ink-muted)}
.meta p{margin:6px 0 0}
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px}
.contact{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink-muted);font-size:13px}
