/* =============================================================================
   LetterConnect — site.css   ·   the landing page (index.html)
   -----------------------------------------------------------------------------
   Extends the game's "Arcade Purple" system rather than inventing a second look:
   same stage gradient, same gold letter token, same Fredoka/Nunito pairing.
   All colour and type comes from tokens.css, which must be linked first.

   One material rule runs through the whole page, and it is worth keeping:
       GOLD is only ever a letter.       CORAL is only ever an action.
   The moment gold starts decorating buttons, the letter tiles stop reading as
   the game's currency.

   The signature is the hero chain. Each word is indented so that it physically
   begins in the column where the previous word ended, and the shared letter is
   a gold tile in both rows — the layout performs the rule instead of describing
   it. Everything else on the page is deliberately quiet so that lands.
   ========================================================================== */

/* ---------- Page shell ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(124, 58, 237, .55), transparent 60%),
    radial-gradient(880px 520px at 102% -2%, rgba(247, 37, 133, .38), transparent 55%),
    radial-gradient(700px 700px at 90% 108%, rgba(247, 37, 133, .22), transparent 60%),
    linear-gradient(158deg, var(--stage-1) 0%, var(--stage-2) 46%, var(--stage-3) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

.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;
}

/* Keyboard users land here first; invisible until focused. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--card); color: var(--card-ink);
  padding: 10px 16px; border-radius: var(--pill);
  font-weight: 800; text-decoration: none;
  transition: top .16s;
}
.skip-link:focus { top: 12px; }

:where(a, button):focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---------- Top bar ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(13px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 13px max(18px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--stage-1) 62%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.wordmark-tile {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  color: var(--gold-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px rgba(247, 168, 27, .5);
}
.wordmark-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }

/* ---------- Buttons ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 800;
  text-decoration: none; cursor: pointer; border: 0;
  border-radius: var(--pill);
  transition: transform .08s, box-shadow .16s, background .16s;
}
.cta:active { transform: translateY(1px); }

.cta-primary {
  background: linear-gradient(135deg, var(--coral-1), var(--coral-2));
  color: #fff;
  padding: 16px 30px; font-size: 1.06rem;
  box-shadow: 0 12px 28px rgba(249, 78, 127, .42);
}
.cta-primary:hover { box-shadow: 0 16px 34px rgba(249, 78, 127, .55); }

.cta-ghost {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--ink);
  padding: 15px 26px; font-size: 1rem;
}
.cta-ghost:hover { background: rgba(255, 255, 255, .18); }

.cta-compact { padding: 9px 18px; font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.band { padding: clamp(56px, 9vw, 104px) 0; }
.band-tint { background: rgba(19, 6, 54, .26); }

.eyebrow {
  font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-soft); margin: 0 0 14px;
}

.band-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.75rem, 4.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.015em;
  margin: 0 0 14px;
}
.band-lede { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--ink-soft); max-width: 62ch; margin: 0 0 34px; }

/* ---------- Hero ---------- */
/* padding-block, NOT the padding shorthand: .hero also carries .wrap, and a
   shorthand here would zero out .wrap's 20px side padding — which reads fine on
   desktop, where max-width centres everything anyway, and jams the text against
   the screen edge on a phone. */
.hero { padding-block: clamp(44px, 7vw, 84px) clamp(52px, 8vw, 92px); }
.hero-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 4.15rem); line-height: 1.05; letter-spacing: -.025em;
  margin: 0 0 22px; max-width: 16ch;
}
.hero-title .accent { color: var(--gold-1); }
.hero-lede {
  font-size: clamp(1.02rem, 1.8vw, 1.2rem); color: var(--ink-soft);
  max-width: 56ch; margin: 0 0 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font-size: .88rem; color: var(--ink-mute); margin: 18px 0 0; }

/* ---------- Signature: the staircase chain ----------
   --off is how many tile-columns a word is pushed right, and it equals the
   column its first letter must land in — the same number the game's rule
   produces. Set it in the HTML; do not tune it by eye. */
.chain {
  --tile: clamp(1.55rem, 5.6vw, 2.6rem);
  --gap: clamp(3px, .8vw, 6px);
  list-style: none; margin: 0 0 clamp(26px, 3.4vw, 36px); padding: 0 0 4px;
  overflow-x: auto;          /* long chains stay reachable on narrow screens */
  overflow-y: hidden;
  scrollbar-width: thin;
}
.chain-word {
  display: flex; gap: var(--gap);
  margin-block-end: var(--gap);
  margin-inline-start: calc(var(--off) * (var(--tile) + var(--gap)));
  width: max-content;
}
.tile {
  width: var(--tile); height: var(--tile);
  border-radius: calc(var(--tile) * .24);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--tile) * .5);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .13);
  color: var(--ink);
}
/* The shared letter — the hand-off. Appears twice: once ending a word, once
   starting the next, in the same column. */
.tile-hinge {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  border-color: transparent; color: var(--gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 16px rgba(247, 168, 27, .38);
}
/* A letter that has been used up and may never end a word again. */
.tile-burned {
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .22);
  color: var(--ink-mute);
  position: relative;
}
.tile-burned::after {
  content: ""; position: absolute; inset: 22% 14%;
  border-top: 2px solid var(--heat);
  transform: rotate(-38deg); transform-origin: center;
  opacity: .85;
}

/* One orchestrated reveal: the chain plays itself in, word by word, the way a
   round actually unfolds. Nothing else on the page animates on load. */
@keyframes chain-in {
  from { opacity: 0; transform: translateY(-10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.chain-word { animation: chain-in .5s both cubic-bezier(.2, .7, .2, 1); animation-delay: calc(var(--i) * .13s); }
@media (prefers-reduced-motion: reduce) {
  .chain-word { animation: none; }
}

/* A four-word chain is 15 tile-columns wide and cannot fit a phone. Rather than
   leave the signature element half off-screen behind a scrollbar, drop the last
   word — three words still show two hand-offs, which is the whole idea. The
   overflow-x above stays as a backstop for very narrow or zoomed viewports. */
@media (max-width: 560px) {
  .chain-word:nth-child(4) { display: none; }
}

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.card {
  background: var(--card); color: var(--card-ink);
  border-radius: var(--r-lg); padding: 26px 24px;
  box-shadow: var(--shadow-card);
}
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; margin: 14px 0 8px; }
.card-body { font-size: .97rem; color: var(--card-ink-soft); margin: 0; }
/* Gold marks carry a real letter. Anything that is not a letter — a question
   mark, a plus — takes the lavender chip instead, so gold keeps meaning exactly
   one thing across the whole page. */
.card-mark {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.card-mark-quiet {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: none;
}

/* Turn steps are a genuine sequence, so they stay an ordered list — but the
   gold tile carries the letter, not a decorative "01". */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }

/* ---------- Scoring table ---------- */
.score-table {
  width: 100%; border-collapse: collapse;
  background: var(--card); color: var(--card-ink);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.score-table caption {
  caption-side: bottom; text-align: left;
  font-size: .86rem; color: var(--ink-mute); padding-top: 14px;
}
.score-table th, .score-table td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.score-table thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--card-ink-mute); font-weight: 800;
}
.score-table tbody tr:last-child th, .score-table tbody tr:last-child td { border-bottom: 0; }
.score-table tbody th { font-weight: 800; font-size: .97rem; }
.score-value { font-family: var(--font-display); font-weight: 700; color: var(--accent); white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* ---------- Letter bank (burn-out explainer) ---------- */
.bank { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.bank .tile { --tile: clamp(1.5rem, 4.6vw, 2rem); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq-item {
  background: var(--card); color: var(--card-ink);
  border-radius: var(--r); box-shadow: var(--shadow-soft);
  padding: 4px 22px;
}
.faq-item summary {
  cursor: pointer; padding: 18px 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.4rem; color: var(--accent); flex: none;
  transition: transform .18s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 20px; color: var(--card-ink-soft); font-size: .97rem; }

/* ---------- Closing call ---------- */
.closer { text-align: center; }
.closer .band-lede { margin-inline: auto; }

/* ---------- Footer ---------- */
.site-foot {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding: 30px 0 44px;
  font-size: .88rem; color: var(--ink-mute);
}
.site-foot a { color: var(--ink-soft); }
.foot-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }