/* ---------- Fonts ---------- */
/* WOFF2 subsets from Google Fonts; the full TTF stays as a fallback for glyph ranges
   beyond the latin subset (like the em dash or …). Licenses: fonts/OFL.txt (Press Start 2P),
   fonts/Nunito-OFL.txt (Nunito). Nunito is the variable font, so one file covers 400-800. */
@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/PressStart2P-Regular.woff2") format("woff2"),
       url("fonts/PressStart2P-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;
  --ink: #1b1b2f;
  --muted: #6b6b80;
  --line: #e7e7ef;
  --card: #ffffff;
  --accent: #6c4cff;
  --tile: #ffffff;
  --tile-ink: #1b1b2f;
  --tile-line: #1b1b2f;
  --tile-link: rgb(107, 220, 132);
  --shadow: 0 1px 2px rgba(27, 27, 47, .06), 0 8px 24px rgba(27, 27, 47, .08);
  --radius: 18px;
  --font-pixel: "Press Start 2P", ui-monospace, monospace;
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #0e0f1d;
  --ink: #f1f1fa;
  --muted: #9b9bb3;
  --line: #26283f;
  --card: #171930;
  --accent: #9a85ff;
  --tile: #0e0f1d;
  --tile-ink: #f1f1fa;
  --tile-line: #f1f1fa;
  --tile-link: rgb(107, 220, 132);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  transition: background .25s, color .25s;
}

a { color: inherit; }

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

/* ---------- Header ---------- */
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 24px;
}

.header-nav { margin-left: auto; }
.header-nav a {
  font-weight: 700;
  text-decoration: none;
  color: var(--muted);
}
.header-nav a:hover { color: var(--accent); }

.logo {
  font-family: var(--font-pixel);
  font-size: 1.15rem;
  text-decoration: none;
  letter-spacing: .5px;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.theme-toggle:hover { transform: rotate(-12deg) scale(1.05); border-color: var(--accent); }

/* Light mode shows the sun, dark mode shows the moon (same as parl.tv markup) */
#icon-moon { display: none; }
:root[data-theme="dark"] #icon-sun { display: none; }
:root[data-theme="dark"] #icon-moon { display: block; }

/* ---------- Hero ---------- */
.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  text-align: center;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.12;
  font-weight: 800;
}

.hero p {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 1.1rem;
  color: var(--muted);
}

/* ---------- Grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

/* ---------- Card ---------- */
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

/* The slot never moves, so the mouse stays "hovering" it while the card inside
   lifts. Without the slot, the card slid out from under the pointer at its
   bottom edge and flickered up and down forever. */
.card-slot {
  display: flex;
  border-radius: var(--radius); /* keeps the hover area matching the rounded corners */
}
.card-slot > .card { flex: 1; }

.card-slot:hover > .card:not(.placeholder),
.card-slot:focus-within > .card:not(.placeholder) {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

.card-art {
  container-type: inline-size;
  --art: #ffd9e2;
  --art-dark: #3a2230;
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 24px 12px;
  background: var(--art);
}
:root[data-theme="dark"] .card-art { background: var(--art-dark); }

.card-body { padding: 18px 20px 22px; }

.card-body h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 800;
}

.card-body p {
  margin: 0;
  color: var(--muted);
}

.badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}
:root[data-theme="dark"] .badge { color: #12122a; }

/* Placeholder card */
.card.placeholder {
  background: transparent;
  border-style: dashed;
}
.card.placeholder .card-art {
  background: transparent;
  font-family: var(--font-pixel);
  font-size: 2.4rem;
  color: var(--line);
}

/* ---------- Letter tiles ---------- */
.chain {
  /* tiles shrink so the whole two-word chain always fits the card */
  --size: min(34px, calc((100cqw - (var(--cols) * 4px)) / var(--cols)));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chain-row { display: flex; gap: 4px; }
.chain-row.second { margin-left: calc(var(--offset) * (var(--size) + 4px)); }

.tile {
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  background: var(--tile);
  color: var(--tile-ink);
  border: 2px solid var(--tile-line);
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--tile-line);
  font-family: var(--font-pixel);
  font-size: calc(var(--size) * .45);
}
.tile.link { background: var(--tile-link); color: #1b1b2f; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 28px 24px 48px;
  text-align: center;
  color: var(--muted);
}
.site-footer a { text-underline-offset: 3px; }
.site-footer a:hover { color: var(--accent); }

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
  .hero { padding-top: 36px; }
}

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