/* The game's own light palette, so the site and the app read as one thing. */
:root{
  --bg:#E4F2FA; --surface:#fff; --ink:#1D2A44; --muted:#56708A;
  --sea:#2C7DB4; --ice:#D3ECF7; --edge:#A6D3EA;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.wrap{max-width:720px; margin:0 auto; padding:48px 20px 96px}
h1,h2,h3{font-family:"Baloo 2",Nunito,system-ui,sans-serif; line-height:1.15; margin:0 0 .4em}
h1{font-size:clamp(34px,7vw,52px); font-weight:800}
h2{font-size:clamp(22px,4vw,28px); font-weight:700; margin-top:2em}
p{margin:0 0 1.1em}
a{color:var(--sea)}
.lede{font-size:clamp(18px,2.6vw,21px); color:var(--muted)}
.card{background:var(--surface); border:1px solid var(--edge); border-radius:20px; padding:24px 26px; margin:0 0 20px}
.meta{color:var(--muted); font-size:15px}
ul{padding-left:1.2em} li{margin:.35em 0}
header.top{display:flex; align-items:center; gap:14px; margin-bottom:34px}
header.top img{width:58px; height:58px; border-radius:14px; display:block}
header.top b{font-family:"Baloo 2",sans-serif; font-size:26px; font-weight:800}
footer{margin-top:72px; padding-top:22px; border-top:1px solid var(--edge); color:var(--muted); font-size:15px}
footer a{margin-right:16px}
@media (prefers-color-scheme:dark){
  :root{--bg:#0D1F31; --surface:#15304A; --ink:#EAF4FB; --muted:#9EB6CC;
        --sea:#5DB3E8; --ice:#1F4567; --edge:#2F6189}
}