/* Netherword — one warm-dark world, matching the game. No light theme:
   the site commits to the netherworld the way the app does. */
:root {
  --ink: #0d0a08;          /* page ground, warm near-black */
  --panel: #181210;
  --parchment: #e9dcc9;    /* body text */
  --faded: #96876f;        /* secondary text */
  --ember: #ff8a3d;        /* the one accent */
  --ember-deep: #b8451f;
  --line: #2a201a;
  --serif: "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

html { background: var(--ink); overflow-x: hidden; }

body {
  font-family: var(--sans);
  color: var(--parchment);
  background:
    radial-gradient(120% 60% at 50% -10%, #241610 0%, transparent 60%),
    radial-gradient(90% 50% at 50% 115%, #1f0f06 0%, transparent 55%),
    var(--ink);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 9vh 24px 64px;
}

/* ---- wordmark: the title spelled in game tiles ---- */
.tiles {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.tiles span {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  color: var(--parchment);
  background: linear-gradient(180deg, #241b15, #16100c);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,190,120,.07);
}
.tiles span.lit {
  color: #ffd9b0;
  border-color: var(--ember-deep);
  box-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 18px rgba(255,120,50,.25),
              inset 0 1px 0 rgba(255,190,120,.15);
}

.epigraph {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--faded);
  text-align: center;
  margin-top: 22px;
  text-wrap: balance;
}

/* ---- prose ---- */
h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .01em;
  text-wrap: balance;
}
h1 { font-size: 30px; margin-bottom: 8px; }
h2 {
  font-size: 21px;
  margin: 40px 0 10px;
  color: #f4e8d4;
}
p { margin: 12px 0; }
p.muted, li.muted { color: var(--faded); }
a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 3px;
}
ul { padding-left: 22px; margin: 12px 0; }
li { margin: 6px 0; }

.pitch {
  text-align: center;
  font-size: 17px;
  max-width: 46ch;
  margin: 36px auto 0;
}

/* ---- screenshots / gameplay: a peekable row of phone frames ---- */
.shots {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 24px 16px;
  margin: 40px -24px 0;          /* bleed to the edges so shots can peek off-screen */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shots .shot {
  flex: 0 0 auto;
  width: clamp(148px, 44vw, 164px);   /* phones peek + scroll on mobile */
  aspect-ratio: 1206 / 2622;     /* portrait iPhone */
  border-radius: 22px;
  overflow: hidden;
  background: #0a0705;
  border: 1px solid var(--line);
  box-shadow: 0 10px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,190,120,.06);
  scroll-snap-align: center;
}
.shots .shot img,
.shots .shot video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* On desktop the whole set fits, so centre it and drop the scroll rather than
   letting the frames grow large. */
@media (min-width: 680px) {
  .shots {
    justify-content: center;
    overflow-x: visible;
    scroll-snap-type: none;
    margin-top: 44px;
  }
  .shots .shot { width: 142px; }
}

/* ---- the gate list on the landing page ---- */
.gates {
  list-style: none;
  padding: 0;
  margin: 44px 0 0;
  border-top: 1px solid var(--line);
}
.gates li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.gates .ordinal {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ember);
  min-width: 5.5em;
  font-size: 15px;
}
.gates .what { color: var(--parchment); }
.gates .why  { color: var(--faded); font-size: 15px; }

/* ---- call to action ---- */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 48px;
}
/* Apple's official "Download on the App Store" badge (white, for dark bg). */
.cta .appstore {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
}
.cta .appstore img { height: 52px; width: auto; display: block; }
.cta .appstore:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 4px;
}
.cta .price { color: var(--faded); font-size: 14px; }

/* ---- invite page score card ---- */
.scorecard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  margin: 36px 0;
}
.scorecard .score {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: #ffd9b0;
  line-height: 1.25;
  text-wrap: balance;
}
.scorecard .day { color: var(--faded); margin-top: 6px; }

footer {
  max-width: 620px;
  margin: 0 auto;
  padding: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: center;
  font-size: 14px;
  color: var(--faded);
}
footer a { color: var(--faded); }
footer a:hover { color: var(--ember); }

@media (max-width: 420px) {
  .tiles span { width: 32px; height: 32px; font-size: 17px; border-radius: 7px; }
  main { padding-top: 7vh; }
}

/* ---- language picker ---- */
.langpicker {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 10;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--parchment);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
}
.langpicker:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}
@media (max-width: 420px) {
  .langpicker { top: 8px; right: 8px; font-size: 12px; padding: 5px 7px; }
}