/* Snowball Squad — palette sampled from the game's own UI (squad cards, battle HUD, PLAY button). */
:root{
  --ink:#13254a;        /* in-game headline navy */
  --night:#0d1c35;      /* HUD panel navy */
  --teal:#0d5b66;       /* character-name teal */
  --mint:#46d3bf;       /* DODGE / CONTINUE mint */
  --kofi:#76cbcf;       /* Kofi card */
  --rudy:#97abe4;       /* Rudy card */
  --zola:#af86d5;       /* Zola card */
  --grape:#7a44d6;      /* EMOTE purple */
  --ember:#ff7a1a;      /* PLAY button orange */
  --ember-deep:#e2560a;
  --ice:#e6eefc;        /* menu frost */
  --frost:#cddbf5;
  --paper:#fbfdff;
  --muted:#46587c;
  --radius:22px;
  --display:"Baloo 2",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ice);color:var(--ink);font:17px/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
a:focus-visible,button:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:9;background:#fff;padding:8px 12px}

/* top bar */
.bar{position:absolute;inset:0 0 auto;z-index:5;padding:14px 0}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bar .mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--night);font:800 1.05rem/1 var(--display);letter-spacing:.02em}
.bar .mark img{width:38px;height:38px;border-radius:10px;box-shadow:0 3px 0 rgba(13,28,53,.25)}
.bar nav{display:flex;gap:6px}
.bar nav a{font:700 .9rem/1 var(--display);color:var(--night);text-decoration:none;background:rgba(255,255,255,.72);padding:9px 13px;border-radius:999px;backdrop-filter:blur(6px)}
.bar nav a:hover{background:#fff}

/* hero */
.hero{position:relative;min-height:min(86svh,800px);display:flex;isolation:isolate;overflow:hidden;background:#bcd3f2}
.hero .art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(230,238,252,0) 52%,rgba(230,238,252,.7) 72%,var(--ice) 97%)}
.hero .wrap{min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:64px 0 30px}
.hero .logo{width:clamp(200px,19vw,260px);filter:drop-shadow(0 6px 0 rgba(13,28,53,.18))}
@media (max-width:719px){
  .hero{display:block;min-height:0;background:var(--ice)}
  .hero::after{display:none}
  .hero .art{position:relative;inset:auto;height:auto;aspect-ratio:1/1;object-position:54% 30%;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .hero .wrap{display:block;position:relative;margin-top:-96px;padding:0 0 12px}
  .hero .logo{width:min(250px,66vw)}
  .bar nav a.hide-sm{display:none}
}
.pitch{font:800 clamp(1.35rem,4.6vw,2.1rem)/1.15 var(--display);margin:8px 0 16px;max-width:24ch;color:var(--night)}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.play{display:inline-flex;align-items:center;gap:12px;background:var(--night);color:#fff;text-decoration:none;border-radius:14px;padding:10px 20px 10px 14px;box-shadow:0 5px 0 #06101f;transition:transform .12s}
.play:hover{transform:translateY(-2px)}
.play svg{width:26px;height:28px;flex:none}
.play span{display:flex;flex-direction:column;font:600 .72rem/1.1 var(--body);letter-spacing:.06em;text-transform:uppercase}
.play b{font:800 1.3rem/1.05 var(--display);letter-spacing:0;text-transform:none}
.btn{display:inline-block;font:800 1.02rem/1 var(--display);text-decoration:none;padding:14px 20px;border-radius:14px;background:var(--ember);color:#fff;box-shadow:0 5px 0 var(--ember-deep)}
.btn.ghost{background:#fff;color:var(--night);box-shadow:0 5px 0 var(--frost)}
.facts{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.facts li{font:700 .8rem/1 var(--display);background:rgba(255,255,255,.8);padding:8px 11px;border-radius:999px;color:var(--night)}
.facts .pegi{background:var(--night);color:#fff}

/* sections */
section{padding:56px 0}
.kicker{font:800 .8rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
h2{font:800 clamp(1.9rem,6vw,2.9rem)/1.05 var(--display);margin:0 0 14px;letter-spacing:-.01em}
.lede{max-width:60ch;color:var(--muted);margin:0 0 28px}

/* squad */
.squad{display:grid;gap:16px;grid-template-columns:1fr}
.card{background:var(--paper);border-radius:var(--radius);padding:10px 10px 20px;box-shadow:0 6px 0 var(--frost)}
.card .portrait{border-radius:16px;aspect-ratio:365/394;overflow:hidden}
.card .portrait img{width:100%;height:100%;object-fit:cover}
.card h3{font:800 1.9rem/1 var(--display);color:var(--teal);margin:16px 10px 4px;letter-spacing:.02em}
.role{display:inline-block;font:800 .76rem/1 var(--display);letter-spacing:.12em;padding:6px 10px;border-radius:8px;margin:0 10px;color:#fff}
.card p{margin:10px 10px 0;color:var(--muted)}
.card .ability{font:800 .9rem/1.2 var(--display);color:var(--night);margin-top:8px}
.kofi .role{background:var(--teal)}.rudy .role{background:#3f5fb8}.zola .role{background:var(--grape)}
@media (max-width:719px){
  .squad{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .squad .card{scroll-snap-align:start}
}
@media (min-width:720px){.squad{grid-template-columns:repeat(3,1fr)}}

/* features */
.feats{display:grid;gap:14px;grid-template-columns:1fr;margin-top:8px}
@media (min-width:720px){.feats{grid-template-columns:repeat(2,1fr)}}
.feat{background:var(--paper);border-radius:18px;padding:20px 22px;border-left:8px solid var(--mint)}
.feat:nth-child(2){border-color:var(--rudy)}.feat:nth-child(3){border-color:var(--zola)}.feat:nth-child(4){border-color:var(--ember)}
.feat h3{font:800 1.25rem/1.15 var(--display);margin:0 0 6px}
.feat p{margin:0;color:var(--muted)}

/* screenshots */
.shots{background:var(--night);color:#fff}
.shots .kicker{color:var(--mint)}
.shots .lede{color:#b9c8e6}
.reel{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 16px;margin-inline:-16px;scroll-padding-inline:16px}
@media (min-width:720px){.reel{grid-auto-columns:62%}}
.reel figure{margin:0;scroll-snap-align:start}
.reel img{border-radius:16px;width:100%;aspect-ratio:1400/620;object-fit:cover;box-shadow:0 6px 0 #06101f}
.reel figcaption{font:700 .92rem/1.3 var(--display);color:#dbe5f8;margin-top:10px}

/* join */
.join{background:linear-gradient(135deg,var(--kofi),var(--rudy) 55%,var(--zola));}
.join .panel{background:var(--paper);border-radius:28px;padding:28px 22px;box-shadow:0 8px 0 rgba(13,28,53,.18)}
@media (min-width:720px){.join .panel{padding:40px 44px}}
.join ol{padding-left:1.3em;margin:0 0 20px}.join li{margin:.5em 0}
.note{font-size:.92rem;color:var(--muted)}

/* footer */
footer.site{background:var(--night);color:#c9d5ee;padding:40px 0 48px;font-size:.95rem}
footer.site .cols{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-start}
footer.site nav{display:flex;flex-wrap:wrap;gap:8px 18px}
footer.site a{color:#fff}
footer.site .brand{display:flex;gap:12px;align-items:center;font:800 1.1rem/1.1 var(--display);color:#fff}
footer.site .brand img{width:44px;height:44px;border-radius:12px}
footer.site small{display:block;margin-top:18px;color:#8fa3c8}

/* document pages (legal, FAQ) */
.doc-head{background:linear-gradient(160deg,var(--night),#1d3a6e);color:#fff;padding:22px 0 40px}
.doc-head .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:26px}
.doc-head .top a.mark{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 1.05rem/1 var(--display)}
.doc-head .top a.mark img{width:36px;height:36px;border-radius:10px}
.doc-head h1{font:800 clamp(2rem,7vw,3.1rem)/1.08 var(--display);margin:0;letter-spacing:-.01em}
.doc-head .kicker{color:var(--mint)}
.doc-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.doc-nav a{font:700 .88rem/1 var(--display);color:#fff;text-decoration:none;border:1.5px solid rgba(255,255,255,.35);padding:8px 12px;border-radius:999px}
.doc-nav a[aria-current]{background:var(--mint);border-color:var(--mint);color:var(--night)}
.doc{background:var(--paper);border-radius:24px;margin:-22px auto 48px;padding:26px 20px 34px;max-width:800px;box-shadow:0 6px 0 var(--frost)}
@media (min-width:720px){.doc{padding:40px 52px 48px}}
.doc h2{font:800 1.45rem/1.25 var(--display);margin:34px 0 8px;color:var(--teal)}
.doc h2:first-of-type{margin-top:22px}
.doc p,.doc li{overflow-wrap:anywhere}
.doc li{margin:.55em 0}
.doc .ai{background:#eef2ff;border-left:6px solid var(--grape);padding:14px 16px;border-radius:12px}
.faq details{border-bottom:1.5px solid var(--frost);padding:14px 0}
.faq summary{font:800 1.15rem/1.3 var(--display);cursor:pointer;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--teal);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:10px 0 0;color:var(--muted)}
@media print{.doc-head,.doc-nav,footer.site{background:none;color:#000}.doc{box-shadow:none;margin:0;max-width:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.play{transition:none}}
@media (min-width:720px){
  .hero-copy{align-self:flex-start;background:rgba(246,249,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:24px;padding:20px 24px 22px;box-shadow:0 6px 0 rgba(13,28,53,.12)}
  .hero-copy .pitch{margin-top:0}
}
@media (min-width:900px){
  .reel{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);overflow:visible;margin-inline:0;padding:4px 0 0;gap:22px}
  .reel figure:first-child{grid-column:1/-1}
  .swipe{display:none}
}