/* Word Night — wordnight.com
   Single stylesheet. No external requests (no web fonts, no CDNs): keeps the
   page fast on mobile and safe under strict CSP. Mobile-first. */

:root {
  --bg: #12121c;
  --bg-soft: #1b1b2a;
  --bg-card: #21213328;
  --line: #33334d;
  --text: #f2f2f7;
  --muted: #a9a9c2;
  --accent: #ffb020;
  --accent-ink: #2a1b00;
  --good: #4ade80;
  --bad: #f87171;
  --radius: 14px;
  --wrap: 44rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.1rem;
}

/* ---------- accessibility ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: 0 0 8px 0;
}

.skip-link:focus { left: 0; }

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

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

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 18, 28, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 0.95rem;
}

.store-links { display: flex; gap: 0.4rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  /* Height floor keeps every button a comfortable touch target on a phone. */
  min-height: 44px;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn:hover { filter: brightness(1.08); }

/* ---------- game area ---------- */

/* The game sits as high as possible: a searcher who typed "boggle online"
   wants a board, not a paragraph. The descriptive copy follows it and is
   still fully indexed. */
.game-stage {
  padding: 0.7rem 0 0.4rem;
}

.game-stage h1 {
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}

.game-stage .kicker {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.97rem;
}

#word-night-game {
  /* Height is reserved up-front so the real game does not shove the page
     around when it mounts (layout shift is a ranking signal). */
  min-height: 24rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 1rem;
  display: grid;
  place-items: center;
}

.board-demo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  width: min(100%, 17rem);
  margin-inline: auto;
}

.board-demo span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #2b2b40;
  color: var(--text);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.game-fallback { text-align: center; }
.game-fallback p { color: var(--muted); font-size: 0.95rem; margin: 0.9rem 0 0; }
.game-fallback .cta-row { margin-top: 0.7rem; }

/* ---------- content ---------- */

main { padding-bottom: 3rem; }

section { margin-top: 2.2rem; }

h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
}

h3 {
  font-size: 1.02rem;
  margin: 1.2rem 0 0.35rem;
}

p, ul, ol { margin: 0 0 0.9rem; }

ul, ol { padding-left: 1.2rem; }
li { margin-bottom: 0.35rem; }

a { color: var(--accent); }

.answer-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 1rem 1.1rem;
}

.answer-card p:last-child { margin-bottom: 0; }

.updated {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
}

.cards {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1rem;
  background: var(--bg-soft);
}

.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.steps { counter-reset: step; list-style: none; padding-left: 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.7rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.8rem;
  font-weight: 800;
}

/* ---------- tables ---------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 33rem;
  font-size: 0.92rem;
}

th, td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

thead th {
  background: var(--bg-soft);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

tbody tr:last-child td { border-bottom: 0; }

td.yes { color: var(--good); }
td.no { color: var(--bad); }

caption {
  caption-side: bottom;
  padding: 0.6rem 0.7rem;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: left;
}

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

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 650;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0.6rem 0 0; color: var(--text); }

/* ---------- cta ---------- */

.cta {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #23233a, #1b1b2a);
  padding: 1.2rem;
  text-align: center;
}

.cta h2 { margin-bottom: 0.4rem; }
.cta h3 { margin-bottom: 0.3rem; }
.cta p { color: var(--muted); }

.btn-ghost {
  cursor: default;
  opacity: 0.72;
  background: transparent;
}

.btn-ghost em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: 0.15rem;
}

.store-soon { margin-top: 0.8rem; }

.cta-split {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.4rem 0 1.1rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.9rem;
}

.signup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.signup input {
  flex: 1 1 14rem;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}

.signup input::placeholder { color: var(--muted); }

.fineprint {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
}

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0 2.4rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
}

.site-footer a { color: var(--muted); }

.legal { font-size: 0.82rem; line-height: 1.5; }

.breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
  padding-top: 1rem;
}

.breadcrumb a { color: var(--muted); }

/* ---------- desktop ---------- */

@media (min-width: 44rem) {
  body { font-size: 18px; }
  .game-stage h1 { font-size: 1.9rem; }
  .board-demo { width: 20rem; }
  h2 { font-size: 1.5rem; }
  .cards { grid-template-columns: 1fr 1fr; }
}

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

/* ---------- the placeholder board is not the game ----------
   It looks convincing enough that a visitor on a slow connection will try to
   swipe it. Dim it so it reads as a placeholder, and let the loading note say
   "board" so the word sets the expectation. */

.game-fallback .board-demo { opacity: 0.5; }

/* ---------- defensive typography: survives the game's CSS ----------
   The game is an Expo/React Native Web bundle whose stylesheet ships a Tailwind
   preflight:

       h1,h2,h3,h4,h5,h6 { font-size:inherit; font-weight:inherit }
       ol,ul,menu        { margin:0; padding:0; list-style:none }
       blockquote,dl,dd,h1..h6,hr,figure,p,pre { margin:0 }

   Expo injects that stylesheet at runtime, so it lands AFTER this file and wins
   every tie against the bare element selectors above. Left alone it flattens
   every heading, strips every list marker and removes every paragraph gap in
   the ~1,400 indexable words below the game.

   These rules re-assert the same values one specificity class higher, so load
   order stops mattering. <main> carries class="wn-doc" on every page. Do not
   remove it, and do not "simplify" these rules back to bare selectors.

   The app's own document template also sets `body{overflow:hidden}` and
   `html,body{height:100%}`. Never copy that template's <head> into these
   pages: the content stays in the HTML and becomes unreachable to a human. */

.wn-doc h1 { font-size: 1.55rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.9rem; }
/* The home H1 is deliberately smaller than the article H1: it has to stay on one
   line at 375px so the board keeps its measured position above the fold. The
   two-class selector wins over both `.wn-doc h1` above and the game's preflight. */
.wn-doc .game-stage h1 { font-size: 1.22rem; margin: 0 0 0.6rem; }
.wn-doc h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.6rem; }
.wn-doc h3 { font-size: 1.02rem; line-height: 1.35; font-weight: 700; margin: 1.2rem 0 0.35rem; }
.wn-doc p  { margin: 0 0 0.9rem; }
.wn-doc ul { margin: 0 0 0.9rem; padding-left: 1.2rem; list-style: disc; }
.wn-doc ol { margin: 0 0 0.9rem; padding-left: 1.2rem; list-style: decimal; }
.wn-doc li { margin-bottom: 0.35rem; }
.wn-doc .steps { list-style: decimal; }
.wn-doc table { border-collapse: collapse; }
.wn-doc section { margin-top: 2.2rem; }

/* The mount slot must fill the reserved box rather than collapse inside it. */
#wn-game-slot {
  position: relative;
  width: 100%;
  min-height: 22rem;
}

@media (min-width: 44rem) {
  .wn-doc h1 { font-size: 1.9rem; }
  .wn-doc .game-stage h1 { font-size: 1.9rem; }
  .wn-doc h2 { font-size: 1.5rem; }
}

/* ---------- the invite preview ---------- */

.invite-preview {
  margin: 0 0 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-size: 0.95rem;
  word-break: break-word;
}

.invite-preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: var(--accent);
}

.mirror-list li { margin-bottom: 0.7rem; }