/* The site's parchment look, shared by every page (the game's own colours and fonts). */
@font-face { font-family: 'Fredoka'; font-weight: 400 700; font-display: swap; src: url(/fonts/Fredoka-400.woff2) format('woff2'); }
@font-face { font-family: 'Lilita One'; font-display: swap; src: url(/fonts/LilitaOne-400.woff2) format('woff2'); }
@font-face { font-family: 'Luckiest Guy'; font-display: swap; src: url(/fonts/LuckiestGuy-400.woff2) format('woff2'); }
:root {
  --parchment: #f1e2bf; --ink: #2b1d14; --ink-dim: #5a4127; --title: #c2451e; --title-shadow: #6b2a12;
  --btn: linear-gradient(180deg, #d9602f, #ad3c1c); --btn-edge: #4a1a0c; --btn-drop: #33110a; --btn-ink: #fff4dc;
  --edge: #b8925a; --sky: #03050b;
}
* { box-sizing: border-box; }
html { background: var(--sky); }
body {
  margin: 0; min-height: 100vh; padding: 28px 16px 40px; color: var(--ink);
  font: 17px/1.5 'Fredoka', system-ui, sans-serif;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8, transparent), radial-gradient(1px 1px at 72% 12%, #fff6, transparent),
    radial-gradient(1px 1px at 38% 64%, #fff5, transparent), radial-gradient(1px 1px at 86% 58%, #fff7, transparent),
    radial-gradient(1px 1px at 22% 86%, #fff5, transparent), radial-gradient(1px 1px at 56% 32%, #fff4, transparent),
    radial-gradient(ellipse at 50% -10%, #1a2a52 0%, var(--sky) 60%);
}
main {
  max-width: 980px; margin: 0 auto; padding: 30px 34px 26px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,250,235,0.9), rgba(241,226,191,0) 70%),
    radial-gradient(ellipse at 10% 90%, rgba(170,120,60,0.25), transparent 50%),
    radial-gradient(ellipse at 90% 10%, rgba(170,120,60,0.2), transparent 45%),
    var(--parchment);
  border: 2px solid var(--edge);
  border-radius: 18px 26px 16px 30px / 26px 16px 30px 18px;
  box-shadow: inset 0 0 40px rgba(140,90,40,0.35), 0 10px 40px rgba(0,0,0,0.55);
}
header { text-align: center; }
h1 { margin: 0; font: 400 clamp(38px, 7vw, 64px)/1.05 'Luckiest Guy', cursive; letter-spacing: 1.5px; color: var(--title); text-shadow: 0 3px 0 var(--title-shadow); }
.subtitle { margin: 6px 0 0; font: 400 clamp(18px, 3vw, 24px)/1.2 'Lilita One', sans-serif; color: var(--title-shadow); }
.lede { max-width: 640px; margin: 16px auto 0; color: var(--ink-dim); }
.play {
  display: inline-block; margin: 22px 0 6px; padding: 14px 34px;
  font: 400 clamp(22px, 3.4vw, 28px) 'Lilita One', sans-serif; letter-spacing: 0.5px; text-decoration: none;
  color: var(--btn-ink); background: var(--btn); border: 3px solid var(--btn-edge); border-radius: 9px 13px 10px 14px;
  box-shadow: inset 0 2px 0 rgba(255,210,170,0.35), 0 5px 0 var(--btn-drop);
}
.play:hover { filter: brightness(1.06); }
.play:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,210,170,0.35), 0 2px 0 var(--btn-drop); }
.note { margin: 6px 0 0; font-size: 14px; color: var(--ink-dim); }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 8px; }
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid var(--edge); border-radius: 6px; background: #111; }
figcaption { margin-top: 6px; font-size: 14px; color: var(--ink-dim); text-align: center; }
h2 { margin: 24px 0 6px; font: 400 21px 'Lilita One', sans-serif; color: var(--title-shadow); }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px; }
.how p { margin: 0; font-size: 15.5px; }
.how b { display: block; font: 400 17px 'Lilita One', sans-serif; color: var(--title-shadow); }
footer { margin-top: 26px; padding-top: 14px; border-top: 1px dashed var(--edge); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font-size: 15px; }
footer a { color: #8a3a18; }
footer .soon { color: var(--ink-dim); }
@media (max-width: 760px) {
  main { padding: 22px 18px; }
  .shots, .how { grid-template-columns: 1fr; }
}

/* "Keep me posted" */
.keep-posted { margin: 28px 0 8px; }
.signup .su-row { display: flex; gap: 8px; flex-wrap: wrap; }
.signup input[type=email] { flex: 1; min-width: 200px; font: 16px 'Fredoka', sans-serif; padding: 9px 12px; border: 2px solid #b8925a; border-radius: 8px; background: #fffaf0; color: #2b1d14; }
.signup button { font: 17px 'Lilita One', sans-serif; color: #fff4dc; background: linear-gradient(180deg, #d9602f, #ad3c1c); border: 2px solid #4a1a0c; border-radius: 8px; padding: 8px 18px; cursor: pointer; }
.signup .su-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup .su-consent { margin: 8px 0 0; font-size: 14px; opacity: 0.85; }
.signup .su-msg { margin: 6px 0 0; font-size: 15px; min-height: 1em; }
.signup.done .su-row, .signup.done .su-consent { display: none; }
.signup .su-ts:empty { display: none; }