@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/press-start-2p-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #02205A;
  --hoodie-blue: #0553CA;
  --hoodie-green: #387507;
  --green: #6FB819;
  --potion: #7E28D1;
  --blonde: #D89324;
  --skin: #F8B874;
  --banner: #43230A;
  --mid-brown: #6A3B11;
  --gold: #FBCF1A;
  --text: #E4E2E2;
  --gray: #727074;
  --steel: #9FA8B4;
  --shadow: #090D18;
  --button: #3f7d0b;
  --font-ui: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --ground: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: var(--font-ui);
  background:
    radial-gradient(ellipse 130% 70% at 50% 108%, #0c4a9e 0%, transparent 46%),
    linear-gradient(180deg, #010e2c 0%, var(--navy) 42%, #03306f 100%);
  overflow-x: hidden;
}

::selection {
  background: var(--gold);
  color: var(--shadow);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.scenery {
  position: absolute;
  inset: 0 0 var(--ground) 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.stars,
.stars-lg {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  border-radius: 50%;
}

.stars {
  box-shadow:
    12.9vw 46.9vh 0 #ffffff,
    2.9vw 15.3vh 0 #ffffff,
    7.0vw 13.7vh 0 #ffffff,
    62.2vw 35.2vh 0 #ffffff,
    66.3vw 26.8vh 0 #FBCF1A,
    78.8vw 62.3vh 0 #ffffff,
    81.7vw 51.4vh 0 #ffffff,
    20.5vw 51.8vh 0 #ffffff,
    35.3vw 55.2vh 0 #ffffff,
    80.2vw 80.1vh 0 #FBCF1A,
    46.7vw 26.9vh 0 #FBCF1A,
    89.6vw 40.7vh 0 #FBCF1A,
    67.3vw 20.2vh 0 #ffffff,
    21.7vw 5.0vh 0 #ffffff,
    34.6vw 44.2vh 0 #ffffff,
    69.7vw 32.5vh 0 #FBCF1A,
    16.0vw 91.7vh 0 #ffffff,
    69.1vw 6.9vh 0 #FBCF1A,
    84.6vw 54.9vh 0 #ffffff,
    31.7vw 10.0vh 0 #ffffff,
    2.5vw 77.5vh 0 #ffffff,
    12.7vw 68.5vh 0 #ffffff,
    6.2vw 55.9vh 0 #ffffff,
    2.7vw 74.5vh 0 #ffffff,
    9.3vw 3.6vh 0 #ffffff,
    72.7vw 46.4vh 0 #ffffff,
    21.7vw 30.4vh 0 #ffffff,
    97.8vw 86.7vh 0 #ffffff,
    43.6vw 30.3vh 0 #ffffff,
    4.0vw 8.1vh 0 #ffffff,
    24.5vw 78.1vh 0 #ffffff,
    54.6vw 61.5vh 0 #ffffff,
    78.1vw 85.5vh 0 #FBCF1A,
    62.6vw 14.9vh 0 #ffffff,
    78.6vw 82.5vh 0 #ffffff,
    3.5vw 34.3vh 0 #ffffff,
    99.9vw 15.0vh 0 #ffffff,
    35.7vw 7.5vh 0 #ffffff,
    63.6vw 16.4vh 0 #ffffff,
    7.9vw 57.0vh 0 #ffffff,
    3.9vw 12.4vh 0 #ffffff,
    63.7vw 31.2vh 0 #ffffff,
    35.2vw 13.8vh 0 #ffffff,
    39.5vw 84.1vh 0 #FBCF1A,
    8.6vw 52.5vh 0 #ffffff,
    90.7vw 65.0vh 0 #FBCF1A,
    80.6vw 63.5vh 0 #FBCF1A,
    46.5vw 6.4vh 0 #ffffff,
    71.9vw 74.4vh 0 #ffffff,
    26.7vw 73.1vh 0 #ffffff,
    13.8vw 37.1vh 0 #ffffff,
    28.6vw 56.5vh 0 #ffffff,
    24.0vw 58.0vh 0 #ffffff,
    73.5vw 28.1vh 0 #ffffff,
    41.5vw 51.8vh 0 #ffffff,
    51.8vw 25.2vh 0 #ffffff,
    9.6vw 31.2vh 0 #ffffff,
    2.9vw 15.9vh 0 #ffffff,
    78.4vw 59.3vh 0 #ffffff,
    75.6vw 28.9vh 0 #ffffff,
    34.0vw 69.5vh 0 #ffffff,
    15.3vw 80.9vh 0 #ffffff,
    74.5vw 52.4vh 0 #ffffff,
    44.8vw 52.9vh 0 #FBCF1A;
  animation: twinkle 3.6s ease-in-out infinite;
}

.stars-lg {
  width: 3px;
  height: 3px;
  box-shadow:
    55.5vw 72.4vh 0 #ffffff,
    80.3vw 45.7vh 0 #ffffff,
    10.8vw 77.6vh 0 #ffffff,
    9.1vw 56.0vh 0 #ffffff,
    42.8vw 75.6vh 0 #FBCF1A,
    61.7vw 38.8vh 0 #ffffff,
    49.9vw 15.3vh 0 #ffffff,
    86.2vw 18.4vh 0 #FBCF1A,
    6.8vw 42.6vh 0 #ffffff,
    4.4vw 87.2vh 0 #ffffff,
    12.0vw 39.2vh 0 #FBCF1A,
    71.4vw 49.5vh 0 #ffffff,
    25.5vw 76.8vh 0 #ffffff,
    43.6vw 38.1vh 0 #ffffff,
    97.1vw 10.7vh 0 #FBCF1A,
    36.2vw 46.6vh 0 #FBCF1A,
    5.3vw 22.4vh 0 #ffffff,
    73.9vw 55.2vh 0 #FBCF1A,
    4.5vw 42.0vh 0 #ffffff,
    91.5vw 34.7vh 0 #ffffff,
    92.9vw 38.2vh 0 #ffffff,
    36.5vw 16.9vh 0 #ffffff;
  animation: twinkle 5.2s ease-in-out infinite reverse;
}

.spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  box-shadow:
    0 -7px 0 #fff,
    0 7px 0 #fff,
    -7px 0 0 #fff,
    7px 0 0 #fff;
  animation: twinkle 2.8s ease-in-out infinite;
}

.spark.gold {
  background: var(--gold);
  box-shadow:
    0 -7px 0 var(--gold),
    0 7px 0 var(--gold),
    -7px 0 0 var(--gold),
    7px 0 0 var(--gold);
}

.s1 { left: 8%; top: 14%; }
.s2 { left: 22%; top: 32%; animation-delay: -0.8s; }
.s3 { left: 31%; top: 11%; }
.s4 { left: 68%; top: 18%; animation-delay: -1.4s; }
.s5 { left: 84%; top: 12%; }
.s6 { left: 91%; top: 36%; animation-delay: -2s; }
.s7 { left: 14%; top: 58%; }
.s8 { left: 76%; top: 64%; animation-delay: -1.1s; }

.cloud,
.tree,
.rock {
  position: absolute;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
}

.cloud { opacity: 0.95; }

.k1 { top: 7%; left: -2%; width: min(240px, 34vw); animation: drift-a 46s ease-in-out infinite alternate; }
.k2 { top: 18%; left: 28%; width: min(170px, 26vw); animation: drift-b 58s ease-in-out infinite alternate; }
.k3 { top: 8%; right: 4%; width: min(260px, 36vw); animation: drift-c 52s ease-in-out infinite alternate; }
.k4 { top: 30%; right: 18%; width: min(150px, 24vw); animation: drift-a 64s ease-in-out infinite alternate-reverse; }
.k5 { top: 22%; left: 58%; width: min(130px, 20vw); animation: drift-b 70s ease-in-out infinite alternate; }

.tree { bottom: -10px; }
.ta { left: -3vw; width: min(280px, 38vw); z-index: 1; }
.tb { left: 14vw; width: min(170px, 22vw); z-index: 0; }
.tc { right: -4vw; width: min(300px, 40vw); z-index: 1; }
.td { right: 16vw; width: min(150px, 20vw); z-index: 0; }
.ra { left: 10vw; bottom: 6px; width: 72px; z-index: 2; }
.rb { right: 11vw; bottom: 2px; width: 84px; z-index: 2; }

main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: clamp(8px, 2vh, 24px) 16px 12px;
  text-align: center;
}

.hero {
  width: min(940px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arch {
  width: min(680px, 96vw);
  height: auto;
  display: block;
  overflow: visible;
  margin-bottom: -10px;
}

.logo {
  width: clamp(200px, min(74vw, 34vh), 320px);
  height: auto;
  display: block;
  margin-top: -4px;
  filter: drop-shadow(0 8px 0 rgb(9 13 24 / 0.45));
}

.tagline {
  margin: 0.45rem 0 0.75rem;
  max-width: 38rem;
  color: var(--text);
  font-size: clamp(1.02rem, 2.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.45;
  text-shadow: 0 2px 0 var(--shadow);
}

.notify {
  width: min(640px, 100%);
  position: relative;
}

.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
}

.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.button,
button[type="submit"] {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 8px;
  background: var(--button);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 1px 0 #173006;
  box-shadow:
    inset 0 3px 0 #8fd24a,
    inset 0 -4px 0 #234a06,
    0 4px 0 #142006;
}

button[type="submit"]:hover,
.button:hover {
  filter: brightness(1.08);
}

button[type="submit"]:active,
.button:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 3px 0 #8fd24a,
    inset 0 -2px 0 #234a06,
    0 2px 0 #142006;
}

button[type="submit"]:disabled {
  cursor: progress;
  filter: saturate(0.75);
}

.email {
  flex: 1 1 240px;
  width: auto;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  padding: 0 16px;
  border: 3px solid #c5ced6;
  border-radius: 8px;
  background: #fff;
  color: var(--shadow);
  color-scheme: light;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #d5dbe3, 0 4px 0 rgb(9 13 24 / 0.35);
}

.email::placeholder {
  color: var(--gray);
  font-weight: 600;
}

.status {
  min-height: 0;
  margin: 0.75rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.status.is-success { color: #d6ff9a; }
.status.is-error { color: #ffd0c8; }

.fineprint {
  margin: 0.55rem 0 0;
  color: #d5deea;
  font-size: 0.92rem;
  line-height: 1.4;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0.95rem 0 0;
  padding: 0;
}

.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.4),
    inset 0 -3px 0 rgb(0 0 0 / 0.28),
    0 3px 0 var(--shadow);
}

.social a:hover { transform: translateY(-2px); }
.social svg { width: 22px; height: 22px; display: block; }

.ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.tw { background: #1d9bf0; }
.li { background: #0a66c2; }
.yt { background: #ff0033; }
.tt { background: #111218; }

.ground {
  position: relative;
  z-index: 3;
  height: calc(var(--ground) + env(safe-area-inset-bottom));
  background-color: var(--banner);
  background-image: url("/assets/ground.png");
  background-repeat: repeat-x;
  background-position: top left;
  background-size: 192px 80px;
  background-position: left top;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}

.missing .eyebrow,
.pixel-title {
  margin: 0;
  font-family: var(--font-pixel);
  color: var(--gold);
  text-shadow:
    2px 2px 0 #e0a010,
    4px 4px 0 #a56b12,
    6px 6px 0 var(--mid-brown),
    8px 8px 0 var(--banner),
    10px 10px 0 var(--shadow);
}

.missing .eyebrow { font-size: clamp(18px, 3vw, 22px); margin-bottom: 12px; }
.pixel-title { font-size: clamp(28px, 6vw, 52px); line-height: 1.35; }

.fallback {
  min-height: calc(100dvh - var(--ground));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
}

.fallback h1 {
  margin: 0 0 8px;
  max-width: 22rem;
  font-family: var(--font-ui);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@media (min-width: 480px) {
  button[type="submit"],
  .button {
    font-size: 1.12rem;
  }
}

@media (max-width: 640px) {
  .signup-row { flex-direction: column; align-items: stretch; }
  .signup-row .email { order: -1; flex: 0 0 auto; width: 100%; height: 52px; }
  .signup-row button { width: 100%; }
  .tb, .td, .k2, .k4 { display: none; }
  .ta, .tc { width: 118px; bottom: -4px; }
  .ta { left: -28px; }
  .tc { right: -28px; }
  .ra, .rb { width: 46px; }
  .arch { margin-bottom: 0; }
}

@media (max-width: 420px) {
  .tagline { font-size: 0.98rem; }
  .spark { display: none; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(36px, 8px, 0); }
}

@keyframes drift-b {
  from { transform: translate3d(0, 4px, 0); }
  to { transform: translate3d(-42px, -6px, 0); }
}

@keyframes drift-c {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(28px, 12px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .stars, .stars-lg, .spark { opacity: 0.9; }
  button[type="submit"]:active,
  .button:active,
  .social a:hover { transform: none; }
}

@media (forced-colors: active) {
  .button,
  button[type="submit"],
  .email,
  .social a {
    border: 2px solid ButtonText;
  }
}