:root{
  --navy:#0E2140;--navy-2:#152C4E;--edge:rgba(143,192,255,.2);--grid:rgba(143,192,255,.07);
  --text:#EAF2FF;--muted:#9AB0CF;--ink:#8FC0FF;--gold:#FFC928;--gold-edge:#D9A400;--gold-text:#3D2A00;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--text);font:17px/1.6 'Fredoka','Trebuchet MS','Avenir Next',system-ui,sans-serif;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}
a{color:var(--ink)}
.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
img{max-width:100%;display:block}

/* brick logo, same as the game's home screen */
.logo{display:flex;gap:clamp(4px,1.2vw,8px);justify-content:center;margin:0;padding-top:14px;font-size:inherit}
.logo span{--c:#E8473B;position:relative;width:clamp(38px,10vw,64px);height:clamp(44px,11.5vw,74px);background:var(--c);border-radius:9px;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:clamp(26px,7vw,46px);line-height:1;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.22);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.logo span::before{content:"";position:absolute;top:-10px;left:20%;width:60%;height:11px;border-radius:4px 4px 0 0;background:var(--c);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),inset 0 3px 0 rgba(255,255,255,.25)}
.logo span:nth-child(2){--c:#FFC928;color:#5A4100}.logo span:nth-child(3){--c:#2F80ED}.logo span:nth-child(4){--c:#27AE60}
.logo span:nth-child(5){--c:#FF8A1F}.logo span:nth-child(6){--c:#9B5DE5}.logo span:nth-child(7){--c:#14B8A6}
@media (prefers-reduced-motion:no-preference){.logo span{animation:drop .5s cubic-bezier(.3,1.5,.6,1) both}
  .logo span:nth-child(2){animation-delay:.07s}.logo span:nth-child(3){animation-delay:.14s}.logo span:nth-child(4){animation-delay:.21s}
  .logo span:nth-child(5){animation-delay:.28s}.logo span:nth-child(6){animation-delay:.35s}.logo span:nth-child(7){animation-delay:.42s}
  @keyframes drop{from{transform:translateY(-80px);opacity:0}to{transform:none;opacity:1}}}

/* hero */
.hero{text-align:center;padding-block:56px 36px}
.app-icon{width:96px;height:96px;border-radius:22px;margin:0 auto 26px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tagline{font-size:clamp(26px,5vw,40px);font-weight:600;line-height:1.2;margin:26px 0 10px}
.tagline em{font-style:normal;color:var(--gold)}
.sub{color:var(--muted);margin:0 auto 28px;max-width:34ch}
.cta{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--gold);color:var(--gold-text);text-decoration:none;
  font-weight:600;font-size:20px;padding:15px 30px;border-radius:12px;box-shadow:inset 0 -6px 0 var(--gold-edge);margin-top:8px}
.cta::before{content:"";position:absolute;top:-8px;left:22%;width:56%;height:9px;
  background:radial-gradient(ellipse 11px 9px at 50% 100%,var(--gold) 98%,transparent 100%) 0 0/25% 100% repeat-x}
.cta:active{transform:translateY(3px);box-shadow:inset 0 -3px 0 var(--gold-edge)}
.cta svg{width:22px;height:22px;flex:none}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;list-style:none;padding:0;margin:26px 0 0}
.facts li{border:2px solid var(--edge);background:var(--navy-2);border-radius:999px;padding:4px 14px;font-size:15px;color:var(--muted)}

/* screenshots */
.shots{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 20px 22px;margin:0 auto;max-width:1240px;
  scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
.shots img{flex:none;width:clamp(200px,58vw,250px);aspect-ratio:9/16;height:auto;border-radius:18px;scroll-snap-align:center;
  border:2px solid var(--edge);background:var(--navy-2)}
.hint{text-align:center;color:var(--muted);font-size:14px;margin:0 0 8px}

/* features */
section h2{font-size:clamp(24px,4vw,30px);font-weight:600;text-align:center;margin:56px 0 24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:14px}
.card{background:var(--navy-2);border:2px solid var(--edge);border-radius:16px;padding:20px 20px 16px}
.card h3{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:19px;font-weight:600}
.card p{margin:0;color:var(--muted);font-size:16px}
.chip{--c:#2F80ED;width:30px;height:24px;border-radius:6px;background:var(--c);flex:none;position:relative;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22)}
.chip::before,.chip::after{content:"";position:absolute;top:-5px;width:8px;height:6px;border-radius:2px 2px 0 0;background:var(--c)}
.chip::before{left:5px}.chip::after{right:5px}
.twists{columns:2 260px;column-gap:28px;margin:0;padding:0 0 0 20px;color:var(--muted)}
.twists li{margin-bottom:6px;break-inside:avoid}.twists b{color:var(--text);font-weight:500}

/* footer */
footer{margin-top:64px;border-top:2px dashed var(--edge);padding-block:26px 40px;text-align:center;color:var(--muted);font-size:15px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-bottom:8px}

/* privacy page */
.doc{max-width:720px;margin:0 auto;padding-block:28px 20px}
.doc header{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.doc header img{width:52px;height:52px;border-radius:12px}
.doc header a{text-decoration:none;color:var(--text);font-weight:600;font-size:20px}
.doc h1{font-size:clamp(28px,5vw,36px);font-weight:600;line-height:1.2;margin:0 0 4px}
.doc h2{font-size:21px;font-weight:600;margin:30px 0 6px;text-align:left}
.doc p{color:#C9D7EC;margin:0 0 12px}
.doc .date{color:var(--muted);margin-bottom:24px}