/* The launch page: the game's title scene as a still, with two journal
   cards over it (waitlist, user testing). Same paper, ink and type as the
   game's own UI (style.css), without the game. */

:root {
  --paper: #f6ecd2;
  --paper-2: #fbf5e4;
  --ink: #2c3a1e;
  --ink-soft: #5a6440;
  --coral-dark: #c4502e;
  --go: #4f9a3a;
  --go-hover: #5cae45;
  --go-dark: #2f6420;
  --ink-line: 3px;
  --font-title: "Fredoka", "Trebuchet MS", sans-serif;
  --font-serif: "IM Fell English", Georgia, serif;
  --font-hand: "Gaegu", "Comic Sans MS", cursive;
  --font-type: "Courier Prime", ui-monospace, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: #2c4a2a; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 18px/1.35 var(--font-hand);
}
/* the scene sits behind the page on its own fixed layer, so it fills the
   screen however long the page gets (fixed backgrounds misbehave on phones) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 42% at 50% 14%, rgba(20, 34, 14, 0.55), rgba(20, 34, 14, 0) 100%),
    #2c4a2a url("scene-wide.png") center / cover no-repeat;
  image-rendering: pixelated;
}
@media (max-aspect-ratio: 3/4) {
  body::before {
    background:
      linear-gradient(rgba(20, 34, 14, 0.5), rgba(20, 34, 14, 0.15) 40%, rgba(20, 34, 14, 0) 60%),
      #2c4a2a url("scene-tall.png") center top / cover no-repeat;
  }
}

.launch {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}

/* ---------- title ---------- */

.title { text-align: center; margin-bottom: 26px; }
.logo {
  display: inline-block;
  margin: 0;
  font: 700 clamp(56px, 14vw, 112px)/0.95 var(--font-title);
  letter-spacing: 0.01em;
  color: var(--paper-2);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink);
  transform: rotate(-3deg);
}
.kicker {
  display: inline-block;
  margin: 12px auto 4px;
  padding: 2px 14px 4px;
  font: italic 400 clamp(17px, 3.4vw, 24px) var(--font-serif);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px 4px 14px 4px;
  transform: rotate(2deg);
}
.pitch {
  margin: 12px auto 0;
  max-width: 30em;
  font: 700 clamp(18px, 2.8vw, 22px)/1.25 var(--font-hand);
  color: var(--paper-2);
  text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink);
}
.soon {
  display: inline-block;
  margin: 14px 0 0;
  padding: 3px 12px;
  font: 700 14px var(--font-type);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-dark);
  background: var(--paper-2);
  border: 2px solid var(--coral-dark);
  border-radius: 4px;
  transform: rotate(-2deg);
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
}

.card {
  margin: 0;
  padding: 18px 20px 20px;
  background: var(--paper);
  border: var(--ink-line) solid var(--ink);
  border-radius: 18px 6px 16px 8px / 8px 16px 6px 18px;
  box-shadow: 0 6px 0 var(--ink);
}
.card h2 { margin: 0; font: 400 28px/1.1 var(--font-serif); }
.card .lede { margin: 6px 0 14px; font-size: 19px; color: var(--ink-soft); }

.field { display: block; margin: 0 0 12px; padding: 0; border: 0; }
.field > span, .field legend {
  display: block;
  margin-bottom: 4px;
  padding: 0;
  font: 700 13px var(--font-type);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.field em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.field input:not([type="radio"]) {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  font: 400 17px var(--font-type);
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 10px 4px 10px 4px;
}
.field input:focus-visible, .btn:focus-visible, .devices input:focus-visible + * {
  outline: 3px solid var(--coral-dark);
  outline-offset: 2px;
}
.devices { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.devices legend { width: 100%; }
.devices label { display: inline-flex; align-items: center; gap: 6px; font-size: 19px; cursor: pointer; }
.devices input { width: 18px; height: 18px; accent-color: var(--go); margin: 0; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  width: 100%;
  margin-top: 4px;
  font: 700 19px var(--font-title);
  color: var(--ink);
  background: var(--paper-2);
  border: var(--ink-line) solid var(--ink);
  border-radius: 20px 8px 20px 8px;
  padding: 10px 18px;
  min-height: 52px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform 0.06s, box-shadow 0.06s;
}
.btn:hover { background: #fffaf0; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.go { background: var(--go); color: #fffaf0; text-shadow: 0 2px 0 var(--go-dark); }
.btn.go:hover { background: var(--go-hover); }
.btn:disabled { opacity: 0.6; cursor: progress; }

.status { margin: 10px 0 0; font: 15px/1.3 var(--font-type); }
.status:empty { display: none; }
.status.error { color: var(--coral-dark); }

/* after signing up, the card says thanks instead */
.card.done .field, .card.done .btn, .card.done .lede { display: none; }
.card.done .status { margin: 10px 0 0; font: 400 21px/1.3 var(--font-hand); color: var(--ink); }

.fine {
  max-width: 34em;
  margin: 22px auto 0;
  text-align: center;
  font: 700 16px/1.3 var(--font-hand);
  color: var(--paper-2);
  text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}