/* Spellbeasts — the public site.

   Built from "Home Page.dc.html" in the home page design handoff, translated from
   its inline styles into classes. Every colour, size and radius here is a design
   system token (./tokens/), copied unchanged from design-system/ — so the site
   and the app read as one thing.

   NO INLINE STYLES ANYWHERE, deliberately: the site ships with a strict Content
   Security Policy (see /_headers) that forbids them, and that is the whole reason
   the map's cloud layer and the wheel's labels live in this file rather than in
   the markup. */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/surface.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The same rendering the app gets from Tailwind's `antialiased`. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

a {
  color: var(--teal-deep);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 3px;
}

img {
  max-width: 100%;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10;
  background: var(--surface-card);
  border: var(--outline);
  border-radius: var(--radius-control);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
}
.skip:focus {
  left: 16px;
}

.display {
  font-family: var(--font-display);
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.muted {
  color: var(--text-annotation);
}

/* ---- Buttons (the design system's Button, as links) ------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--size-200);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-decoration: none;
  border: var(--outline);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-drop);
  cursor: pointer;
  transition:
    transform var(--dur-tap) var(--ease-ink),
    background var(--dur-tap) var(--ease-ink),
    box-shadow var(--dur-tap) var(--ease-ink);
}
.btn:hover {
  text-decoration: none;
}
.btn:active:not(:disabled) {
  box-shadow: var(--press-shadow);
  transform: var(--press-shift);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.btn--lg {
  min-height: 56px;
  padding: 0 var(--space-7);
  font-size: var(--size-300);
}
.btn--primary {
  background: var(--action-primary);
  color: var(--text-on-bright);
}
.btn--primary:active:not(:disabled) {
  background: var(--action-primary-press);
}
.btn--secondary {
  background: var(--surface-card);
  color: var(--text-body);
}
.btn--secondary:active:not(:disabled) {
  background: var(--surface-sunk);
}
.btn--go {
  background: var(--state-correct);
  color: var(--text-on-bright);
}
.btn--go:active:not(:disabled) {
  background: var(--state-correct-press);
}

.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- The brand stamp -------------------------------------------------------- */

.stamp text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 62px;
  text-anchor: middle;
  fill: var(--ink);
}
.stamp circle {
  fill: none;
  stroke: var(--ink);
}

/* ---- Coins (CoinCount) ------------------------------------------------------ */

.coins {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 14px 5px 10px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-300);
  font-variant-numeric: tabular-nums;
  color: var(--text-on-bright);
  background: var(--earned);
  border: var(--outline-sm);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-drop-sm);
}
.coins::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--surface-card);
  border: var(--outline-sm);
}

/* ---- Header ----------------------------------------------------------------- */

.site-head {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-body);
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.site-nav {
  flex: 1;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.site-nav a {
  color: var(--text-body);
  text-decoration: none;
}
.site-nav a:hover {
  text-decoration: underline;
}

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

.h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(37px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.h2--big {
  font-size: clamp(37px, 5vw, 56px);
}
.h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-size: 30px;
}
.h3--sm {
  font-size: 24px;
}
.lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  text-wrap: pretty;
  max-width: none;
}
.intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
}
.intro--narrow {
  max-width: 640px;
}
/* A column with the design's own rhythm: 24px between the intro and each grid,
   28px in the modes section. */
.section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 72px;
}
.section--modes {
  gap: 28px;
  padding-bottom: 64px;
}

/* ---- Hero ------------------------------------------------------------------- */

.hero {
  padding-top: 24px;
  padding-bottom: 64px;
}
.hero__panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 32px;
  align-items: center;
  padding: 48px clamp(24px, 5vw, 64px);
  background: var(--plate-teal);
  border: 3px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--ink);
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.hero__lede {
  max-width: 30ch;
}
.hero__accent {
  color: var(--teal-deep);
}
.hero__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero__art {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: -24px 0 -12px;
}
.caption {
  font-size: 15px;
  font-style: italic;
  color: var(--text-annotation);
  padding: 8px 0;
}

/* ---- Cards ------------------------------------------------------------------ */

.cards {
  display: grid;
  gap: 20px;
}
.cards--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
}
.cards--three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(260px, calc(33.33% - 14px))), 1fr));
}
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 28px;
  color: var(--text-body);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 5px 0 var(--ink);
}
.card p {
  margin: 0;
  font-size: 15px;
}
.card--coral {
  background: var(--plate-coral);
}
.card--violet {
  background: var(--plate-violet);
}
.card--sun {
  background: var(--plate-sun);
}
.card--grass {
  background: var(--plate-grass);
}
.card--teal {
  background: var(--plate-teal);
}
.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.card__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card__title p {
  max-width: 32ch;
}
.card__title--wide p {
  max-width: 40ch;
}
/* The play card spans the page, so its line can too. */
.card--play .card__title {
  /* Takes the row where it fits; on a phone the coins wrap underneath rather
     than squeezing the heading into three lines. */
  flex: 1 1 320px;
}
.card--play .card__title p {
  max-width: none;
}
.card__foot {
  margin-top: auto;
}
.card .footnote {
  font-size: 12px;
  color: var(--text-annotation);
}

/* ---- The demo wheel --------------------------------------------------------- */

.wheel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.wheel {
  position: relative;
  width: 260px;
  height: 278px;
  flex: none;
}
.wheel__disc {
  position: absolute;
  left: 0;
  top: 18px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  background: conic-gradient(
    var(--sun) 0 60deg,
    var(--coral) 60deg 120deg,
    var(--teal) 120deg 180deg,
    var(--grass) 180deg 240deg,
    var(--violet-soft) 240deg 300deg,
    var(--plate-cream) 300deg 360deg
  );
  transition: transform 3.2s cubic-bezier(0.12, 0.8, 0.18, 1);
}
@media (prefers-reduced-motion: reduce) {
  .wheel__disc {
    transition: none;
  }
}
.wheel__label {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  white-space: nowrap;
  /* Every segment is a bright fill, so ink text — never cream on a bright. */
  color: var(--text-on-bright);
}
.wheel__label:nth-child(1) { transform: translate(-50%, -50%) rotate(30deg) translateY(-86px); }
.wheel__label:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg) translateY(-86px); }
.wheel__label:nth-child(3) { transform: translate(-50%, -50%) rotate(150deg) translateY(-86px); }
.wheel__label:nth-child(4) { transform: translate(-50%, -50%) rotate(210deg) translateY(-86px); }
.wheel__label:nth-child(5) { transform: translate(-50%, -50%) rotate(270deg) translateY(-86px); }
.wheel__label:nth-child(6) { transform: translate(-50%, -50%) rotate(330deg) translateY(-86px); }
.wheel__hub {
  position: absolute;
  left: 50%;
  top: 115px;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  border-radius: 999px;
  background: var(--plate-cream);
  border: 3px solid var(--ink);
}
.wheel__pointer {
  position: absolute;
  left: 50%;
  top: -4px;
  margin-left: -14px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 26px solid var(--ink);
}
.wheel-side {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.card .say {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
}
.say--tall {
  min-height: 50px;
}

/* ---- The demo games --------------------------------------------------------- */

.game {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
  padding: 20px 24px;
  background: var(--surface-card);
  color: var(--text-body);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 4px 0 var(--ink);
}
.game__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.game__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
}
.game__round {
  font-size: 15px;
  color: var(--text-annotation);
}
.game__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card .game__prompt {
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-spelling);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.25;
  font-size: 32px;
  text-wrap: balance;
}
.card .game__prompt--long {
  font-size: 24px;
}
.game__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.choice {
  min-width: 72px;
  min-height: 56px;
  padding: 8px 18px;
  border-radius: 16px;
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  background: var(--plate-cream);
  color: var(--text-body);
  font-family: var(--font-spelling);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    transform 120ms,
    box-shadow 120ms;
}
.choice:disabled {
  cursor: default;
  box-shadow: none;
}
.choice--right {
  background: var(--grass);
  color: var(--text-on-bright);
}
.choice--wrong {
  background: var(--plate-coral);
  transform: translateY(3px);
}
.choice--faded {
  opacity: 0.6;
  transform: translateY(3px);
}
.game__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 48px;
}
.card .game__done-line {
  font-size: 19px;
}

/* The play card spans the page, so the game inside it keeps a readable column
   rather than stretching a three-button puzzle across 1100px. */
.card--play .game {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  min-height: 0;
}

/* ---- Game 3: Spell it — the app's own surface, in miniature ---------------- */

.speller {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* The sentence on the left, the replay button on the right: two short lines
   beside the button rather than four stacked above the field. */
.speller__prompt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}
.speller__words {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.speller__words p {
  margin: 0;
}
.card .speller__sentence {
  font-size: 19px;
  line-height: 1.5;
  text-wrap: pretty;
}
.speller__blank {
  display: inline-block;
  min-width: 6ch;
  margin: 0 4px;
  border-bottom: 3px solid var(--border-ink-color);
  vertical-align: baseline;
}
/* The replay button: 72px, the control a child reaches for most. */
.replay {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.replay__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--replay-size);
  height: var(--replay-size);
  padding-left: 5px;
  font-size: 30px;
  line-height: 1;
  color: var(--text-on-dark);
  background: var(--surface-brand);
  border: var(--outline);
  border-radius: 999px;
  box-shadow: var(--shadow-drop);
  cursor: pointer;
  transition:
    transform var(--dur-tap) var(--ease-ink),
    box-shadow var(--dur-tap) var(--ease-ink);
}
.replay__button:active {
  transform: translateY(3px);
  box-shadow: var(--press-shadow);
}
.replay__label {
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: var(--text-annotation);
}
.speller__field {
  box-sizing: border-box;
  width: 100%;
  min-height: 68px;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-family: var(--font-spelling);
  font-size: var(--spelling-size);
  font-weight: var(--spelling-weight);
  letter-spacing: var(--track-spelling);
  color: var(--text-body);
  background: var(--surface-spelling);
  border: var(--outline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset-field);
  outline-offset: 3px;
}
/* Check and fix: the attempt above the correct spelling, lined up by their
   shared ends, the differing stretch marked by colour AND weight AND underline
   so it never relies on colour alone. */
.fix {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  gap: 2px;
  padding: var(--space-4);
  background: var(--surface-card);
  border: var(--outline-sm);
  border-radius: var(--radius-sm);
}
.fix__label {
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: var(--text-annotation);
}
.fix__label + .fix__row + .fix__label {
  margin-top: 8px;
}
.fix__row {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  font-family: var(--font-letter-grid);
  font-size: clamp(15px, 5vw, var(--size-400));
  line-height: 1.25;
  text-align: center;
}
.fix__cell {
  min-width: 0;
  border-radius: 5px;
  white-space: pre;
}
.fix__cell--diff,
.fix__cell--learn {
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
.fix__cell--diff {
  color: var(--state-attention);
  background: var(--plate-coral);
}
.fix__cell--learn {
  background: var(--highlight-phoneme);
}
/* The app's keyboard, not the device's: no predictive text, no autocorrect. */
.kbd {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
}
.kbd__row {
  display: flex;
  gap: 6px;
}
.key {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  height: var(--tap-min);
  padding: 0;
  font-family: var(--font-spelling);
  font-weight: var(--weight-semibold);
  font-size: var(--size-300);
  color: var(--text-body);
  background: var(--surface-card);
  border: var(--outline-sm);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 0 var(--border-ink-color);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-tap) var(--ease-ink);
}
.key:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: none;
}
.key:disabled {
  opacity: 0.4;
  cursor: default;
}
.key--wide {
  flex: 0 0 54px;
}
.key--go {
  color: var(--text-on-bright);
  background: var(--state-correct);
}
.key--del {
  background: var(--plate-coral);
}

/* ---- The reward: the spin at the end of the round ------------------------- */

.spin {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spin .muted {
  margin: 0;
}
.spin .wheel-row {
  margin-top: 8px;
}
[hidden] {
  display: none !important;
}

/* ---- Drops ------------------------------------------------------------------ */

.drops {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface-card);
  color: var(--text-body);
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.drop__part {
  font-weight: 600;
}
.rarity {
  padding: 6px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--text-body);
}
/* The app's own mapping (see RarityStamp): brass is the earned colour, so it is
   what a rare part wears; violet is kept for the seasonal ones. */
.rarity--common { background: var(--plate-cream); }
.rarity--uncommon { background: var(--teal-pale); }
.rarity--rare { background: var(--sun); color: var(--text-on-bright); }
.rarity--seasonal { background: var(--violet-soft); color: var(--text-on-bright); }

.build-art {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  align-self: center;
}

/* ---- Coins, trophies and the Sanctuary --------------------------------------- */

.perks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.perk {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
}
.perk__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  color: var(--text-on-bright);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
}
.perk__mark--sun { background: var(--sun); }
.perk__mark--coral { background: var(--coral); }
.perk__mark--grass { background: var(--grass); }
.perk__mark--teal { background: var(--teal); }
.perk__text {
  font-size: 15px;
  line-height: 1.5;
  padding-top: 6px;
}

/* ---- Modes (ModeCard) ------------------------------------------------------- */

.modes {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
}
.modes__pair {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.mode {
  padding: var(--space-5);
  color: var(--text-body);
  border: var(--outline);
  border-top: 8px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-drop);
}
.mode__title {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--size-300);
  letter-spacing: var(--track-display);
  line-height: 1.1;
}
.mode__meta {
  margin-top: var(--space-2);
  font-size: var(--size-200);
  font-weight: var(--weight-medium);
}
.mode__note {
  margin-top: var(--space-2);
  font-size: var(--size-100);
  color: var(--text-annotation);
}
.mode--specimen {
  background: var(--plate-grass);
  border-top-color: var(--state-correct);
}
.mode--specimen .mode__title {
  font-size: var(--size-400);
}
.mode--map {
  background: var(--plate-teal);
  border-top-color: var(--teal);
}
.mode--wanted {
  background: var(--plate-coral);
  border-top-color: var(--coral);
}
.mode--locked {
  background: transparent;
  border: 3px dashed var(--ink-20);
  box-shadow: none;
  opacity: 0.62;
}
.mode--locked .mode__note {
  margin-top: var(--space-3);
}

/* ---- Map and Bestiary ------------------------------------------------------- */

.pair {
  display: grid;
  gap: 32px;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  padding-top: 32px;
  padding-bottom: 80px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stack p {
  margin: 0;
  font-size: 15px;
  max-width: 52ch;
}
.stamp-note {
  display: inline-block;
  padding: 2px var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-100);
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-annotation);
  border: 2px solid var(--text-annotation);
  border-radius: var(--radius-sm);
  transform: rotate(-4deg);
}
/* On top of the map, so the heading and the map keep their places. The paper
   ground keeps the stamp legible over the painted art. */
.stamp-note--over {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  background: var(--surface-card);
  box-shadow: 0 2px 0 var(--text-annotation);
}
.map {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 4px 0 var(--ink);
}
.map__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map__badge {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 2px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  color: var(--text-on-bright);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
/* The cloud that hides the five zones nobody has visited. Copied exactly from the
   design; the stops are hand-placed over the painted map, so do not tidy them. */
.map__cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 13.3% 20.9% at 12% 16%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 9.5% 15.2% at 0.6% 21.7%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 10.4% 16.1% at 23.4% 19.8%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 8.5% 14.3% at 8.2% 6.5%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 7.6% 13.3% at 17.7% 8.4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 24.7% 15.2% at 12% 29.3%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 11.2% 17.6% at 4% 56%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 8% 12.8% at -5.6% 60.8%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 8.8% 13.6% at 13.6% 59.2%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 7.2% 12% at 0.8% 48%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 6.4% 11.2% at 8.8% 49.6%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 20.8% 12.8% at 4% 67.2%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 11.9% 18.7% at 20% 90%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 8.5% 13.6% at 9.8% 95.1%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 9.3% 14.4% at 30.2% 93.4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 7.6% 12.8% at 16.6% 81.5%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 6.8% 11.9% at 25.1% 83.2%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 22.1% 13.6% at 20% 101.9%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 13.3% 20.9% at 88% 12%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 9.5% 15.2% at 76.6% 17.7%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 10.4% 16.1% at 99.4% 15.8%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 8.5% 14.3% at 84.2% 2.5%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 7.6% 13.3% at 93.7% 4.4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 24.7% 15.2% at 88% 25.3%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 11.2% 17.6% at 97% 50%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 8% 12.8% at 87.4% 54.8%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 8.8% 13.6% at 106.6% 53.2%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 7.2% 12% at 93.8% 42%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 6.4% 11.2% at 101.8% 43.6%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 20.8% 12.8% at 97% 61.2%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 12.6% 19.8% at 82% 90%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 9% 14.4% at 71.2% 95.4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 9.9% 15.3% at 92.8% 93.6%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 8.1% 13.5% at 78.4% 81%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 7.2% 12.6% at 87.4% 82.8%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 23.4% 14.4% at 82% 102.6%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 7.7% 12.1% at 50% -4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 5.5% 8.8% at 43.4% -0.7%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 6.1% 9.4% at 56.6% -1.8%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 5% 8.3% at 47.8% -9.5%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 4.4% 7.7% at 53.3% -8.4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 14.3% 8.8% at 50% 3.7%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 5.6% 8.8% at 30% 46%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 4% 6.4% at 25.2% 48.4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 4.4% 6.8% at 34.8% 47.6%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.6% 6% at 28.4% 42%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.2% 5.6% at 32.4% 42.8%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 10.4% 6.4% at 30% 51.6%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 5.6% 8.8% at 72% 40%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 4% 6.4% at 67.2% 42.4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 4.4% 6.8% at 76.8% 41.6%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.6% 6% at 70.4% 36%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.2% 5.6% at 74.4% 36.8%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 10.4% 6.4% at 72% 45.6%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 5.6% 8.8% at 64% 90%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 4% 6.4% at 59.2% 92.4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 4.4% 6.8% at 68.8% 91.6%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.6% 6% at 62.4% 86%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.2% 5.6% at 66.4% 86.8%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 10.4% 6.4% at 64% 95.6%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 4.9% 7.7% at 36% 90%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.5% 5.6% at 31.8% 92.1%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.8% 5.9% at 40.2% 91.4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.1% 5.3% at 34.6% 86.5%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 2.8% 4.9% at 38.1% 87.2%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 9.1% 5.6% at 36% 94.9%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 5.6% 8.8% at 26% 26%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 4% 6.4% at 21.2% 28.4%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 4.4% 6.8% at 30.8% 27.6%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.6% 6% at 24.4% 22%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 3.2% 5.6% at 28.4% 22.8%, #FFF8EE 0 90%, rgba(255,248,238,0) 100%),
    radial-gradient(ellipse 10.4% 6.4% at 26% 31.6%, #EFE2CC 0 85%, rgba(239,226,204,0) 100%),
    radial-gradient(ellipse 24% 40% at 50% 52%, rgba(255,248,238,0) 75%, rgba(255,248,238,0.6) 100%);
}

/* SpecimenCard */
.bestiary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.specimen {
  padding: var(--space-3);
  color: var(--text-body);
  border-radius: var(--radius-card);
}
.specimen--found {
  background: var(--plate-violet);
  border: var(--outline);
  box-shadow: var(--shadow-drop);
}
.specimen--missing {
  background: transparent;
  border: 3px dashed var(--ink-20);
  opacity: 0.6;
}
.specimen__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-tile);
}
.specimen--found .specimen__plate {
  background: var(--surface-card);
  border: var(--outline-sm);
}
.specimen--missing .specimen__plate {
  border: 2px dashed var(--ink-20);
  font-size: var(--size-100);
  color: var(--text-annotation);
  text-align: center;
  padding: 6px;
}
.specimen__art {
  display: block;
  width: 100%;
  height: auto;
}
.specimen__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.specimen__name {
  font-family: var(--font-display);
  font-size: var(--size-200);
  font-weight: var(--weight-bold);
}
.specimen__no {
  font-size: var(--size-100);
  color: var(--text-annotation);
  font-variant-numeric: tabular-nums;
}
.specimen__note {
  margin-top: 2px;
  font-size: var(--size-100);
  color: var(--text-annotation);
}

/* ---- For parents ------------------------------------------------------------ */

.band {
  background: var(--surface-brand);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.band__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 72px;
  padding-bottom: 72px;
}
.band__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  /* --surface-brand is the one ground that carries light text. */
  color: var(--text-on-dark);
}
.kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
}
.reasons {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.reason {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--surface-card);
  color: var(--text-body);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 4px 0 var(--ink);
}
.reason__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
}
.reason p {
  margin: 0;
  font-size: 15px;
}

.how {
  display: grid;
  gap: 40px;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  padding-top: 72px;
  padding-bottom: 72px;
}
.how__steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}
.step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: var(--teal-pale);
  color: var(--text-body);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
}
.step__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.step__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
}
.step p {
  margin: 0;
  font-size: 15px;
  max-width: 48ch;
}

/* Plate, cream */
.plate {
  position: relative;
  padding: 28px;
  background: var(--surface-card);
  border: var(--outline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-drop);
}
.report {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.report__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.report__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
}
.report__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.report__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* WordChip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--size-200);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--text-body);
  border: var(--outline-sm);
  border-radius: var(--radius-control);
}
.chip__count {
  font-size: var(--size-100);
  font-variant-numeric: tabular-nums;
  color: var(--text-annotation);
}
.chip__mark {
  font-size: var(--size-100);
  font-weight: var(--weight-bold);
}
.chip--confident {
  background: var(--plate-grass);
  border-left: 6px solid var(--state-correct);
}
.chip--learning {
  background: var(--plate-sun);
  border-left: 6px solid var(--earned);
}
.chip--tricky {
  background: var(--plate-coral);
  border-left: 6px solid var(--coral);
}

/* ---- Questions -------------------------------------------------------------- */

.faq {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 72px;
}
.faq__grid {
  display: grid;
  gap: 16px 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.faq__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 3px solid var(--ink);
}
.faq__q {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
}
.faq__item p {
  margin: 0;
  font-size: 15px;
  max-width: 56ch;
}

/* ---- Closing call --------------------------------------------------------- */

.closer {
  padding-bottom: 72px;
}
.closer__panel {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 48px clamp(24px, 5vw, 64px);
  background: var(--plate-sun);
  border: 3px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--ink);
}
.closer__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Tagline, xl. The sentence shape never changes: "Beastly spellings," then one
   flat past participle, and "sorted" is the one for the site. */
.tagline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--size-600);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--text-body);
}
.tagline__verb {
  color: var(--teal-deep);
}

/* ---- Footer ----------------------------------------------------------------- */

.site-foot {
  border-top: 3px solid var(--ink);
  background: var(--surface-card);
}
.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
}
.site-foot__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-foot__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
}
.site-foot__nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 15px;
}

/* ---- Simple pages (privacy, 404) -------------------------------------------- */

.page {
  padding-top: 24px;
  padding-bottom: 96px;
}
.page__panel {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px clamp(24px, 5vw, 48px);
  background: var(--surface-card);
  border: 3px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--ink);
}
.page__panel p {
  margin: 0;
  font-size: 17px;
}

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

/* Phones. The header keeps the brand and "Sign in" on one row and moves the
   section links to a row of their own — squeezed beside the logo they stacked
   one per line, and "Sign in" fell onto a line by itself. */
@media (max-width: 719px) {
  .site-head {
    gap: 12px 16px;
  }
  .site-head > .btn {
    margin-left: auto;
  }
  .site-nav {
    order: 3;
    flex: 1 1 100%;
    gap: 18px;
  }
  /* Stacked under the copy, the full-width beast filled half a phone screen and
     pushed the buttons' purpose out of sight. Smaller, it is still the first
     thing you see after the headline. */
  .hero__panel {
    gap: 16px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .hero__art {
    max-width: 220px;
    margin: 0;
  }
}

/* Small phones. The design's 28px card and 24px game padding leave too little
   room at 390px for three 72px answer buttons, and the third one wrapped onto
   a line of its own. */
@media (max-width: 479px) {
  .card {
    padding: 20px;
  }
  .game {
    padding: 16px;
  }
  /* Ten keys have to fit across a phone, as they do in the app: the play card
     and its game give back their padding so each key gets another few pixels. */
  .card--play {
    padding: 16px 14px;
  }
  .card--play .game {
    padding: 14px 10px;
  }
  .kbd,
  .kbd__row {
    gap: 4px;
  }
  .key {
    font-size: 19px;
  }
  .key--wide {
    flex-basis: 40px;
  }
}