@font-face{font-family:"Lilita One";src:url(fonts/lilita-one-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin.woff2) format("woff2");font-weight:400 900;font-display:swap}

/* Same palette as the games: day sky, chunky ink outlines. Dark mode is the game's night sky. */
:root{
  --sky0:#62b8ec; --sky1:#fff0d2; --hill1:#a9cfc6; --hill2:#86c275;
  --page:#fff6e6; --panel:#fffaf0; --tile:#fde6bd; --ink:#2b1d14; --edge:#2b1d14; --shadow:#2b1d14; --muted:#6f5a49;
  --accent:#e8483b; --gold:#f5b82e; --grape:#8e5bd6; --sky-ink:#2b1d14;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito",ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --sky0:#0c1230; --sky1:#3b2f63; --hill1:#2c3560; --hill2:#23443f;
    --page:#141733; --panel:#1d2142; --tile:#2b3066; --ink:#f7eddc; --edge:#f7eddc; --shadow:#05060f; --muted:#b9b0c9;
    --accent:#ff6a58; --gold:#ffc94d; --grape:#b48cff; --sky-ink:#f7eddc;
  }
}
*{box-sizing:border-box}
html{background:var(--page);scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);font-weight:800}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:.01em;margin:0}

/* Header */
.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--sky-ink)}
.brand svg{width:40px;height:40px;flex:none;transform:rotate(-6deg)}
.brand b{font-family:var(--display);font-weight:400;font-size:28px;line-height:1}
.brand span{font-family:var(--body);font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  border:2px solid var(--edge);border-radius:999px;padding:1px 8px 2px;background:var(--panel);color:var(--ink)}
.top nav{display:flex;gap:18px;font-weight:900}
.top nav a{color:var(--sky-ink);text-decoration:none}
.top nav a:hover{text-decoration:underline}
@media (max-width:560px){ .top nav{gap:14px} .top nav a.opt{display:none} .brand b{font-size:24px} }
@media (max-width:430px){ .top .brand span{display:none} }

/* Hero: the game's sky, drifting clouds, rolling hills */
.sky{position:relative;overflow:hidden;background:linear-gradient(to bottom,var(--sky0),var(--sky1));padding-bottom:120px}
.hero{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px;padding:36px 0 10px}
.hero h1{font-size:clamp(42px,5.6vw,68px);color:var(--sky-ink);margin-bottom:16px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent);-webkit-text-stroke:2px var(--edge);paint-order:stroke fill;text-shadow:0 4px 0 var(--shadow)}
.hero p{font-size:20px;font-weight:700;color:var(--sky-ink);max-width:30ch;margin:0 0 26px}
.hero .cat{width:100%;max-width:400px;justify-self:center;animation:bob 3.4s ease-in-out infinite;filter:drop-shadow(0 10px 0 rgba(43,29,20,.12))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
.cloud{position:absolute;z-index:1;width:200px;opacity:.95;animation:drift 70s linear infinite}
.cloud.c1{top:120px;animation-delay:-10s}
.cloud.c2{top:400px;width:150px;animation-duration:95s;animation-delay:-50s}
.cloud.c3{top:260px;width:120px;animation-duration:120s;animation-delay:-85s}
@media (prefers-color-scheme: dark){ .cloud{opacity:.22} }
@keyframes drift{from{transform:translateX(-260px)}to{transform:translateX(calc(100vw + 60px))}}
.hills{position:absolute;left:0;right:0;bottom:0;z-index:1;width:100%;height:150px;display:block}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:10px}
  .hero .cat{order:-1;max-width:220px}
  .hero p{margin-left:auto;margin-right:auto}
  .actions{justify-content:center}
}
@media (prefers-reduced-motion: reduce){ .hero .cat,.cloud{animation:none} .cloud.c1{left:8%} .cloud.c2{left:60%} .cloud.c3{left:78%} }

/* Buttons and pills */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;font-family:var(--display);font-size:20px;letter-spacing:.02em;text-decoration:none;color:#fff;background:var(--accent);
  border:3px solid var(--edge);border-radius:16px;padding:9px 22px 11px;box-shadow:0 5px 0 var(--shadow);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--shadow)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--shadow)}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:900;font-size:15px;color:var(--ink);background:var(--panel);
  border:3px solid var(--edge);border-radius:999px;padding:8px 16px;box-shadow:0 5px 0 var(--shadow)}
.pill svg{width:18px;height:18px}

/* Sections */
section.block{padding:56px 0 8px}
.eyebrow{display:inline-block;font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.block > .wrap > h2{font-size:clamp(34px,4.6vw,48px);margin-bottom:24px}
.card{background:var(--panel);border:3px solid var(--edge);border-radius:26px;box-shadow:0 7px 0 var(--shadow)}

/* Game spotlight */
.game{padding:28px;display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.game-head{display:flex;gap:20px;align-items:center}
.game-head img{width:104px;height:104px;border-radius:24px;border:3px solid var(--edge);flex:none}
.game-head h3{font-size:42px}
.game-head p{margin:4px 0 0;font-weight:800;color:var(--muted);font-size:18px}
.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 18px}
.features li{display:flex;align-items:center;gap:12px;font-weight:800;line-height:1.3}
.features img{width:48px;height:48px;flex:none;background:var(--tile);border:2px solid var(--edge);border-radius:13px}
.shots{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 16px;margin:0 -4px}
.shots figure{flex:0 0 210px;margin:0;scroll-snap-align:start}
.phone{border:3px solid var(--edge);border-radius:28px;overflow:hidden;box-shadow:0 6px 0 var(--shadow);background:#000;aspect-ratio:1080/2265}
.phone img{display:block;width:100%;height:100%;object-fit:cover}
.shots figcaption{text-align:center;font-weight:900;font-size:15px;margin-top:12px;color:var(--muted)}
.game-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.game-foot .note{color:var(--muted);font-weight:700;font-size:15px}
@media (max-width:560px){ .game{padding:20px} .game-head img{width:80px;height:80px;border-radius:20px} .game-head h3{font-size:34px} }

/* How we make games */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.value{padding:24px}
.value .badge{width:56px;height:56px;border-radius:16px;border:3px solid var(--edge);display:grid;place-items:center;margin-bottom:14px;box-shadow:0 4px 0 var(--shadow)}
.value .badge svg{width:30px;height:30px}
.value h3{font-size:26px;margin-bottom:6px}
.value p{margin:0;color:var(--muted);font-weight:700}
.b-gold{background:var(--gold)} .b-grape{background:var(--grape)} .b-accent{background:var(--accent)}

/* Footer */
footer{margin-top:64px;border-top:3px solid var(--edge);background:var(--panel)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:22px 20px 30px}
footer .brand{color:var(--ink)}
footer .brand b{font-size:22px}
footer .brand svg{width:32px;height:32px}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer small{display:block;color:var(--muted);font-weight:700;width:100%}

/* Privacy policy and other documents */
.sky.slim{padding-bottom:70px}
.sky.slim .hills{height:90px}
.doc{padding:30px 34px;margin-top:-40px;position:relative;z-index:2}
.doc h1{font-size:clamp(38px,6vw,54px);margin-bottom:4px}
.doc .date{color:var(--muted);font-weight:900;margin:0 0 18px}
.doc h2{font-family:var(--body);font-weight:900;font-size:21px;margin:30px 0 6px;letter-spacing:0}
.doc ul{padding-left:22px}
.doc li{margin:4px 0}
@media (max-width:560px){ .doc{padding:22px 20px} }