/* The landing page (/beta/) only. press/, android/ and privacy.html keep style.css. */
@font-face{font-family:Fredoka;src:url(assets/fonts/fredoka-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Nunito;src:url(assets/fonts/nunito-latin.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{color-scheme:dark;--ink:#fbf1dc;--muted:#c7c2b4;--sky:#15283a;--roof:#23283c;--plank:#1b2032;--edge:#2f3550;--gold:#ffd18a;--gold-hi:#ffe6b8;--plum:#6b2f45;--shadow:#0b0f1c}
*{box-sizing:border-box}
html{background:var(--roof)}
body{margin:0;background:var(--roof);color:var(--ink);font:400 16px/1.5 Nunito,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- The opening: the game's title painting, full screen ---------------------------------------- */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;height:100vh;height:100svh;min-height:540px;max-height:1200px;overflow:hidden;background:linear-gradient(#15283a,#51487a 45%,#e28a62 62%,#23283c 62%);text-align:center;isolation:isolate}
.poster,.poster img,#scene{position:absolute;image-rendering:pixelated;image-rendering:crisp-edges}
.poster{inset:0;z-index:-2}
.poster img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
#scene{z-index:-1;top:0;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .25s}
#scene.on{opacity:1}
/* night at the top of the sky, so the words stay readable over the dawn */
.hero::before{content:"";position:absolute;inset:0 0 auto;height:58%;z-index:-1;background:linear-gradient(rgba(10,16,30,.62),rgba(10,16,30,.28) 55%,transparent);pointer-events:none}
.badge{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px;font:600 11px/1 Fredoka,Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border:1px solid rgba(251,241,220,.28);background:rgba(11,15,28,.35)}
.hero-copy{padding:clamp(52px,9vh,104px) 16px 0;max-width:760px}
h1{margin:0;font:700 clamp(46px,8.4vw,96px)/.95 Fredoka,Nunito,sans-serif;letter-spacing:.01em;color:var(--gold);text-shadow:0 .05em 0 var(--plum),.03em .08em 0 var(--plum),0 .13em 0 rgba(11,15,28,.55)}
.headline{text-wrap:balance;margin:.55em 0 0;font:600 clamp(20px,3vw,30px)/1.2 Fredoka,Nunito,sans-serif;color:var(--ink);text-shadow:0 2px 0 var(--shadow)}
.sub{text-wrap:balance;margin:.5em auto 0;max-width:30em;font-size:clamp(15px,1.6vw,18px);color:#efe6d6;text-shadow:0 1px 0 var(--shadow),0 0 12px rgba(11,15,28,.7)}
.hero-actions{margin-top:auto;padding:0 16px max(26px,calc(env(safe-area-inset-bottom) + 18px));display:flex;flex-direction:column;align-items:center}

/* The Play button: a gold sign-board in the game's own button style */
.play{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:min(320px,100%);min-height:64px;padding:12px 30px 13px;background:var(--gold);color:#2a1c22;text-decoration:none;border:3px solid #2a1c22;box-shadow:inset 0 -4px 0 #e0a75f,inset 0 3px 0 var(--gold-hi),0 5px 0 #2a1c22,0 10px 24px rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s,background .12s}
.play-label{font:700 clamp(21px,2.3vw,25px)/1.1 Fredoka,Nunito,sans-serif;letter-spacing:.01em}
.play-kicker{font:600 13px/1.2 Nunito,sans-serif;color:#5a3a2c}
.play:hover{background:var(--gold-hi)}
.play:active{transform:translateY(3px);box-shadow:inset 0 -4px 0 #e0a75f,inset 0 3px 0 var(--gold-hi),0 2px 0 #2a1c22,0 6px 16px rgba(0,0,0,.35)}
.play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.also{margin:14px 0 0;font-size:14px;color:var(--muted)}
.also a{color:var(--ink);text-underline-offset:3px;padding:6px 2px}
.inapp{margin:10px 0 0;max-width:24em;font-size:13px;color:var(--ink);background:rgba(11,15,28,.7);padding:8px 10px}

/* ---- The roof: a few real moments from the game ---------------------------------------------------- */
main{background:var(--roof) repeating-linear-gradient(90deg,transparent 0 69px,var(--plank) 69px 72px);border-top:2px solid var(--edge)}
.roof{max-width:1200px;margin:0 auto;padding:clamp(40px,7vw,80px) 16px clamp(28px,4vw,44px)}
.scenes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.scenes figure{margin:0}
.scenes img{display:block;width:100%;height:auto;aspect-ratio:11/10;object-fit:cover;background:var(--plank);border:3px solid #10131f;box-shadow:0 0 0 2px #3c4360,6px 6px 0 rgba(8,10,18,.55)}
.scenes figcaption{text-wrap:balance;margin-top:12px;font:600 16px/1.3 Fredoka,Nunito,sans-serif;color:var(--ink)}
.warn{margin:clamp(28px,4vw,40px) 0 0;text-align:center;font-size:14px;color:var(--muted)}
.again{padding:clamp(36px,6vw,64px) 16px clamp(52px,8vw,88px);text-align:center;background:linear-gradient(transparent,rgba(11,15,28,.5))}
.again p{margin:0 0 18px;font:600 clamp(22px,3vw,30px)/1.2 Fredoka,Nunito,sans-serif}

/* ---- Footer: everything else, quietly ------------------------------------------------------------- */
.foot{background:#141826;color:var(--muted);padding:28px 16px max(28px,env(safe-area-inset-bottom));text-align:center;font-size:13px}
.foot a{color:var(--muted)}
.socials{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px}
.socials a{display:grid;place-items:center;width:42px;height:44px;color:var(--muted)}
.socials a:hover{color:var(--ink)}
.socials svg{width:20px;height:20px;fill:currentColor}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px;margin-bottom:10px}
.links a{display:inline-block;padding:8px 2px;color:var(--ink);text-underline-offset:3px}
.saves{max-width:36em;margin:0 auto 8px}
.saves summary{cursor:pointer;padding:8px;display:inline-block}
.saves p{margin:4px 0 8px;text-align:left}
.fine{max-width:44em;margin:6px auto;line-height:1.6}
.badge-row{margin:14px 0 0}
.badge-row img{opacity:.8}

@media (max-width:900px){.scenes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){
  .scenes{gap:14px 12px}
  .scenes figcaption{font-size:14px;margin-top:8px}
  .play{width:100%}
  .socials{gap:0}
}
/* Wide screens: the words and the button in the open sky on the left, the loft and its flock on the right */
@media (min-aspect-ratio:5/4) and (min-width:760px){
  .hero{--focus:.74;--roof:.7;align-items:flex-start;justify-content:flex-start;text-align:left;padding:clamp(64px,14vh,170px) 0 0 max(16px,7vw)}
  .hero::before{inset:0;height:auto;width:auto;background:radial-gradient(ellipse 48vw 46vh at 22vw 32vh,rgba(10,16,30,.62),rgba(10,16,30,.3) 60%,transparent 100%),linear-gradient(rgba(10,16,30,.35),transparent 55%)}
  .hero-copy{padding:0;max-width:min(600px,46vw)}
  .sub{margin-left:0}
  .hero-actions{margin-top:clamp(22px,4vh,40px);padding:0;align-items:flex-start}
  .hero .play{min-width:300px}
  .hero{height:88vh;height:88svh}
  .roof{padding-top:clamp(28px,4vw,48px)}
}
@media (max-height:520px) and (min-aspect-ratio:5/4){
  .hero{min-height:0;padding-top:40px}
  h1{font-size:clamp(38px,6.5vw,60px)}
  .headline{font-size:20px}
  .sub{display:none}
  .hero-actions{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){#scene{transition:none}.play{transition:none}}