/* PENGUIN ALERT · penguinalert.com
   Flat light law: no box-shadows on scenery or cards.
   Allowed glows: wordmark, primary CTA, focus rings. */

:root {
  --night: #0A1430;
  --night-hi: #17295E;
  --scene: #0D1730;
  --ice: #EDF7FF;
  --ice-dim: rgba(237, 247, 255, .7);
  --gold: #FFCC4D;
  --red: #FF453B;
  --green: #40D98C;
  --emperor: #3B8CFF;
  --rock: #EB4261;
  --violet: #A36BFF;
  --panel: #F4F9FE;
  --ink: #172130;
  --ink-dim: rgba(23, 33, 48, .72);
  --panel-gold: #B88010;
  --panel-warn: #B03312;
  --water: #123B5F;
  --shallow: #2E6E9E;
  --snow: #E7F2FC;
  --ice-blue: #B8DEFF;
  --beak: #FF9E1C;
  --hairline: rgba(237, 247, 255, .12);
  --card: rgba(255, 255, 255, .06);
  --stroke-ink: rgba(23, 33, 48, .8);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
  background: var(--night);
  color: var(--ice);
  line-height: 1.55;
  overflow-x: hidden;
}

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

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.container {
  width: min(1100px, 100% - 2 * clamp(18px, 5vw, 40px));
  margin-inline: auto;
}

/* ---------- type ---------- */

h1, h2, h3 { text-transform: uppercase; line-height: 1.08; }
h1 { font-weight: 900; font-size: clamp(2.6rem, 8vw, 4.6rem); letter-spacing: .035em; }
h2 { font-weight: 900; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: .06em; }
h3 { font-weight: 800; font-size: 1.02rem; letter-spacing: .07em; }

.kicker {
  display: block;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.section-sub {
  color: var(--ice-dim);
  max-width: 58ch;
  margin-top: 10px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.btn:active { transform: scale(.97); }
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  text-shadow: none;
  box-shadow: 0 0 22px rgba(255, 204, 77, .28);
}
.btn-gold:hover { background: #FFD772; }
.btn-ghost {
  background: transparent;
  color: var(--ice);
  border-color: rgba(237, 247, 255, .45);
}
.btn-ghost:hover { border-color: var(--ice); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible { outline-offset: 3px; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 20, 48, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  padding-top: env(safe-area-inset-top);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 64px;
  padding-block: 8px;
}
.header-inner .btn { min-height: 44px; padding: 9px 20px; font-size: .88rem; margin-left: auto; }

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .42ch;
  font-weight: 900;
  font-size: 1.22rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .alert {
  color: var(--red);
  text-shadow: 0 0 18px rgba(255, 69, 59, .55);
}
.beacon {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px rgba(255, 69, 59, .9);
  align-self: center;
}
@media (prefers-reduced-motion: no-preference) {
  .beacon { animation: beacon-pulse 2s ease-in-out infinite; }
  @keyframes beacon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
  }
}

.site-nav { display: flex; gap: 20px; }
.site-nav a {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ice-dim);
  padding: 10px 2px;
}
.site-nav a:hover { color: var(--ice); }
@media (max-width: 720px) {
  .site-nav { display: none; }
}

/* ---------- hero night scene ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, #101E47 55%, var(--night-hi) 100%);
  padding-top: clamp(64px, 12vh, 130px);
}
.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: clamp(120px, 18vh, 190px);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.hero-icon {
  width: 92px;
  height: 92px;
  border-radius: 22px;
  border: 2px solid rgba(237, 247, 255, .25);
  margin-bottom: 26px;
}
.hero h1 { max-width: 12ch; }
.hero-sub {
  margin-top: 18px;
  max-width: 56ch;
  font-size: 1.08rem;
  color: var(--ice-dim);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* aurora ribbons */
.aurora {
  position: absolute;
  inset: -40px -10% auto -10%;
  height: 46%;
  z-index: 1;
  pointer-events: none;
}
.ribbon {
  position: absolute;
  left: 0;
  right: 0;
  height: 42%;
  border-radius: 999px;
  filter: blur(38px);
  opacity: .8;
}
.ribbon-1 {
  top: 4%;
  background: linear-gradient(90deg, rgba(64, 217, 140, .34), rgba(59, 140, 255, .26), rgba(163, 107, 255, .24));
  transform: rotate(-4deg);
}
.ribbon-2 {
  top: 38%;
  background: linear-gradient(90deg, rgba(163, 107, 255, .20), rgba(64, 217, 140, .24), rgba(59, 140, 255, .20));
  transform: rotate(3deg);
}
@media (prefers-reduced-motion: no-preference) {
  .ribbon-1 { animation: drift-a 70s ease-in-out infinite alternate; }
  .ribbon-2 { animation: drift-b 90s ease-in-out infinite alternate; }
  @keyframes drift-a {
    from { transform: rotate(-4deg) translateX(-3%); }
    to { transform: rotate(-2deg) translateX(3%); }
  }
  @keyframes drift-b {
    from { transform: rotate(3deg) translateX(2%); }
    to { transform: rotate(1deg) translateX(-2%); }
  }
}

/* stars: two drifting dot layers via radial gradients */
.stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(237,247,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 44%, rgba(237,247,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 12%, rgba(237,247,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 36%, rgba(237,247,255,.45) 50%, transparent 51%),
    radial-gradient(2px 2px at 67% 15%, rgba(237,247,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 41%, rgba(237,247,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 22%, rgba(237,247,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 58%, rgba(237,247,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 55%, rgba(237,247,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 60%, rgba(237,247,255,.4) 50%, transparent 51%);
}

/* snowfall: three translucent dot sheets falling at different speeds */
@media (prefers-reduced-motion: no-preference) {
  .snowfall {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  .snowfall::before,
  .snowfall::after {
    content: "";
    position: absolute;
    inset: -100% 0 0 0;
    background-image:
      radial-gradient(2px 2px at 10% 10%, rgba(237,247,255,.55) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 30% 40%, rgba(237,247,255,.4) 50%, transparent 51%),
      radial-gradient(2px 2px at 52% 22%, rgba(237,247,255,.5) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 72% 55%, rgba(237,247,255,.38) 50%, transparent 51%),
      radial-gradient(2px 2px at 90% 32%, rgba(237,247,255,.5) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 18% 78%, rgba(237,247,255,.4) 50%, transparent 51%),
      radial-gradient(2px 2px at 64% 84%, rgba(237,247,255,.45) 50%, transparent 51%);
    background-size: 640px 640px;
    animation: snow-fall 26s linear infinite;
  }
  .snowfall::after {
    background-size: 420px 420px;
    opacity: .6;
    animation-duration: 17s;
    animation-delay: -8s;
  }
  @keyframes snow-fall {
    from { transform: translateY(0); }
    to { transform: translateY(50%); }
  }
}

/* snow shelf silhouette */
.shelf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  pointer-events: none;
}
.shelf svg { display: block; width: 100%; height: clamp(56px, 9vw, 110px); }

/* field-report ticker */
.ticker {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding: 10px 18px;
  background: var(--panel);
  border: 2px solid var(--stroke-ink);
  border-radius: 14px;
  color: var(--ink);
  font-weight: 700;
  font-size: .92rem;
  min-height: 44px;
}
.ticker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ticker-dot { animation: beacon-pulse 1.6s ease-in-out infinite; }
}

/* ---------- sections ---------- */

.section { padding-block: clamp(60px, 10vw, 104px); }
.section-head { margin-bottom: clamp(28px, 5vw, 44px); }

.section-night { background: var(--night); }
.section-deep {
  background: linear-gradient(180deg, var(--night) 0%, #0C1838 100%);
}

/* placards: the game's HUD card, verbatim */
.placard {
  background: var(--panel);
  border: 2px solid var(--stroke-ink);
  border-radius: 14px;
  color: var(--ink);
  padding: 22px 24px;
}
.placard h3 { color: var(--ink); }
.placard .command {
  color: var(--panel-gold);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 8px;
}
.placard p { color: var(--ink-dim); margin-top: 8px; font-size: .95rem; }

/* dark cards */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 24px;
}

.grid {
  display: grid;
  gap: 16px;
}
.grid-modes { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-features { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- screens ---------- */

.screen-figure { margin: 0 0 40px; }
.screen-figure:last-child { margin-bottom: 0; }
.device {
  border: 2px solid var(--stroke-ink);
  background: var(--snow);
  border-radius: 28px;
  padding: 10px;
}
.device img { border-radius: 18px; }
.screen-figure figcaption {
  margin-top: 14px;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ice-dim);
}
.screen-figure figcaption strong { color: var(--gold); font-weight: 800; }

/* ---------- android band ---------- */

.android-band {
  border-block: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(64, 217, 140, .05), rgba(59, 140, 255, .05));
}
.android-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}
.android-inner .section-sub { margin-top: 8px; }

/* ---------- waitlist ---------- */

.waitlist-placard {
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 40px);
}
.waitlist-placard h2 { color: var(--ink); }
.waitlist-placard .section-sub { color: var(--ink-dim); }

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.seg input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 2px solid var(--stroke-ink);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .12s ease;
}
.seg input[type="radio"]:checked + label {
  background: var(--ink);
  color: var(--panel);
}
.seg input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--panel-gold);
  outline-offset: 2px;
}

.waitlist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.field-label {
  display: block;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.text-input {
  flex: 1 1 260px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid var(--stroke-ink);
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.text-input::placeholder { color: rgba(23, 33, 48, .45); }
textarea.text-input {
  border-radius: 14px;
  min-height: 120px;
  resize: vertical;
}
.waitlist-row .btn-gold { border-color: var(--stroke-ink); }

.form-note {
  margin-top: 14px;
  font-size: .85rem;
  color: var(--ink-dim);
}
.form-status {
  margin-top: 16px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--ink);
  min-height: 1.4em;
}
.form-status.is-error { color: var(--panel-warn); }
.form-status.is-success { color: var(--panel-gold); }
.roster-note { margin-top: 8px; font-size: .82rem; color: var(--ink-dim); }

.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- faq ---------- */

.faq-item {
  margin-bottom: 12px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--panel-gold);
  flex: none;
}
.faq-item[open] summary::after { content: "·"; }
.faq-item p { margin-top: 10px; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: 44px calc(44px + env(safe-area-inset-bottom));
  background: var(--night);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav a {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ice-dim);
  padding-block: 10px;
}
.footer-nav a:hover { color: var(--ice); }
.footer-lines {
  width: 100%;
  font-size: .8rem;
  letter-spacing: .06em;
  color: rgba(237, 247, 255, .45);
  display: grid;
  gap: 6px;
}
.footer-lines .quiet { text-transform: uppercase; font-weight: 700; }

/* ---------- subpages ---------- */

.page-main { padding-block: clamp(40px, 8vw, 72px); }
.prose-placard {
  padding: clamp(24px, 5vw, 44px);
}
.prose-placard h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin-bottom: 6px;
}
.prose-placard .effective {
  color: var(--ink-dim);
  font-size: .9rem;
  margin-bottom: 26px;
}
.prose-placard h2 {
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--ink);
  margin: 28px 0 10px;
}
.prose-placard p, .prose-placard li {
  color: var(--ink-dim);
  font-size: .97rem;
  margin-bottom: 10px;
}
.prose-placard ul { padding-left: 22px; }
.prose-placard a { color: var(--panel-gold); }
.prose-placard strong { color: var(--ink); }

.back-link {
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ice-dim);
  margin-left: auto;
  padding: 10px 0;
}
.back-link:hover { color: var(--ice); }

/* ---------- 404 ---------- */

.lost-main {
  position: relative;
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-hi) 100%);
}
.lost-inner { position: relative; z-index: 3; padding: 40px 20px calc(120px + env(safe-area-inset-bottom)); }
.lost-inner h1 { font-size: clamp(3rem, 12vw, 5.5rem); color: var(--ice); }
.lost-inner p { color: var(--ice-dim); margin: 14px auto 30px; max-width: 40ch; }

/* ---------- utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}