/* ==========================================================================
   MathCardo - global styles
   ========================================================================== */

:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --ink: #14162b;
  --ink-soft: #5b6079;
  --ink-faint: #8b90a8;
  --line: #e6e8f2;
  --brand: #4f46e5;
  --brand-dark: #3f37c9;
  --brand-soft: #eef0ff;
  --accent: #f59e0b;
  --good: #16a34a;
  --bad: #dc2626;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 22, 43, 0.04), 0 8px 24px rgba(20, 22, 43, 0.06);
  --shadow-lg: 0 2px 4px rgba(20, 22, 43, 0.05), 0 18px 48px rgba(20, 22, 43, 0.12);
  --maxw: 1120px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

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

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

/* A fixed height so the page never reflows as fonts load. */
.site-header {
  position: static;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav { display: flex; gap: 22px; align-items: center; font-size: 0.94rem; font-weight: 600; }
.nav a { color: var(--ink-soft); }
.nav a:hover { color: var(--brand); text-decoration: none; }

/* `inline-flex` and not `flex`, so the logo shrinks to fit its own contents and
   can therefore be centred by `text-align` where it sits alone in a block - the
   footer on a narrow screen. As a block-level flex container it filled the full
   width of its parent, so the mark and the wordmark sat hard against the left
   edge of a box whose middle it already was, and no ancestor could move it.

   The header is unaffected: its parent is a flex container, and a flex item's
   `inline-flex` is blockified back to `flex`, which is exactly what it had. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.logo:hover { text-decoration: none; }

.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), #7c6cf5);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

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

.hero {
  padding: 72px 0 56px;
  text-align: center;
  background:
    radial-gradient(900px 380px at 50% -120px, #e8e6ff 0%, transparent 70%),
    var(--bg);
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 28px;
}

.badge {
  display: inline-block;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.btn-ghost:hover { border-color: #cfd3e6; }

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Topic pages use the same hero, with a little less vertical padding. */
.hero-topic { padding: 72px 0 40px; }
.hero-topic .lead { margin-bottom: 24px; }

/* ---------- Sections ---------- */

section { padding: 56px 0; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.section-head p { color: var(--ink-soft); margin: 0; }

/* A tinted band, used to separate the For Teachers section. */
.section-alt {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------- Classroom bundle ---------- */

.bundle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.bundle-preview { text-align: center; }

/* A mock worksheet, so the Name/Class/Date heading is visible at a glance. */
.bundle-sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px 22px 26px;
  text-align: left;
}

.bundle-sheet-head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bundle-sheet-head span { border-bottom: 1px solid var(--line); padding-bottom: 4px; }

.bundle-sheet-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 22px;
  padding-top: 20px;
}

.bundle-sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.bundle-sum .rule {
  width: 100%;
  border-top: 1px solid #999;
  margin-top: 3px;
  height: 14px;
}

.bundle-caption {
  margin: 16px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.bundle-info h3 { font-size: 1.35rem; margin-bottom: 6px; }

.bundle-price { margin: 0 0 18px; }
.bundle-price .amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; }
.bundle-price .unit { font-size: 0.95rem; font-weight: 700; color: var(--ink-faint); }

.bundle-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 9px;
}

.bundle-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.bundle-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--good);
  border-bottom: 2px solid var(--good);
  transform: rotate(-45deg);
}

.bundle-buy { width: 100%; max-width: 280px; }

.bundle-note {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

@media (max-width: 720px) {
  .bundle { grid-template-columns: 1fr; gap: 28px; }

  /* The bundle copy centres. In one column the list is the only left-aligned
     text left on the page, and beside a centred heading and price it reads as
     misaligned rather than as a deliberate contrast. Each list item keeps its
     own text left-aligned, and the items are centred as blocks, so a tick stays
     beside the words it marks instead of drifting to the edge of the column. */
  .bundle-info { text-align: center; }
  .bundle-list { justify-items: center; }
  .bundle-list li { text-align: left; }
  .bundle-buy { margin-left: auto; margin-right: auto; }
}

/* ---------- Topic grid ---------- */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.topic-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: block;
  color: inherit;
}
.topic-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: #d6d9ee;
}

.topic-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.topic-card h3 { margin-bottom: 4px; }
.topic-card p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }

/* One card per row on a narrow screen, so the grid reads as a centred list and a
   card that keeps its icon and text hard against the left edge looks misaligned.
   The icon is a fixed-width grid box, so `text-align` cannot move it: it is
   centred with auto margins and the text is centred separately. */
@media (max-width: 720px) {
  .topic-card { text-align: center; }
  .topic-card .icon { margin: 0 auto 14px; }
}

/* ---------- Worksheet hierarchy (h2 / h3 / h4) ---------- */

.worksheet-section {
  margin-bottom: 56px;
  text-align: center;
}

/* Section headings reuse the homepage .section-head treatment. */
.worksheet-section > .section-head { margin-bottom: 32px; }

.worksheet-group {
  margin-bottom: 30px;
}

.worksheet-group > h3 {
  font-size: 1.08rem;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 700;
}

/* The h4 worksheets sit one per regrouping variant. `auto-fit` lets a group of
   two (the one-digit sets) spread across the full width instead of leaving a
   gap where the third column would be. */
.worksheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.worksheet-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.worksheet-card:hover {
  border-color: #d6d9ee;
  box-shadow: var(--shadow-lg);
}

/* The title sits directly above its example, so it keeps its own natural height
   and nothing is reserved under it. */
.worksheet-card h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.worksheet-card .hint {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--ink-faint);
  font-size: 0.84rem;
  margin: 0 0 18px;
}

/* The small headings above each button group. */
.worksheet-card h5 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.worksheet-actions + h5 {
  margin-top: 16px;
}

/* Buttons fill the row. */
.worksheet-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
}

.worksheet-actions.pdf-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The games lay themselves out to the width of the card rather than to the
   viewport, so the number per line is never guessed wrong.

   A game button needs about 120px for its label ("Concentration" and "Quick
   Fingers" are the long ones, and `white-space: nowrap` means a label that does
   not fit spills instead of wrapping). `auto-fit` gives the games as many
   tracks of at least that width as the card can hold, which lands on:

     - three-column grid (card ~350px): 2 per line
     - two-column grid (card 420px+):   3 per line
     - narrower cards:                  2 per line
     - one game per line below ~250px, rather than an overflowing label

   Sizing to the card this way is what keeps this correct at every viewport,
   including the awkward ones where a two-column grid still gives a narrow card. */
.worksheet-actions.game-actions {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.worksheet-actions .btn-sm {
  width: 100%;
  padding: 8px 6px;
  font-size: 0.78rem;
  gap: 5px;
}

/* Below 1120px the third card wraps to the next row rather than squeezing all
   three into a cramped line. The fractional bound avoids the off-by-a-fraction
   that a plain `max-width: 1119px` hits on fractional device pixel ratios. */
@media (max-width: 1119.98px) {
  .worksheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .worksheet-grid { grid-template-columns: 1fr; }
}

/* ---------- Level list ---------- */

.level-list { display: grid; gap: 14px; }

.level-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
}

.level-num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
}

.level-info h3 { margin: 0 0 2px; font-size: 1.02rem; }
.level-info p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.level-info .hint { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink-faint); font-size: 0.84rem; }

.level-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.btn-sm svg { flex: 0 0 auto; opacity: 0.85; }
.btn-sm:hover { text-decoration: none; border-color: var(--brand); color: var(--brand); }
.btn-sm.solid { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-sm.solid:hover { background: var(--brand-dark); color: #fff; }
.btn-sm.solid svg { opacity: 1; }

/* ---------- Level picker ---------- */

.level-picker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  font-weight: 700;
  font-size: 0.9rem;
}

.level-picker select {
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
  max-width: min(340px, 78vw);
}

/* ---------- Game shell ---------- */

.game-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.game-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: #fbfbfe;
  flex-wrap: wrap;
}

.game-title { font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.game-title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }

.stats { display: flex; gap: 22px; }
.stat { text-align: center; min-width: 62px; }
.stat .v { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); font-weight: 700; }

.game-body { padding: 26px; min-height: 380px; display: flex; flex-direction: column; justify-content: center; }

/* The game band gets more room above and below than the other sections carry.
   `section` sets 56px for everything, and that is right for a run of worksheet
   cards, but the game shell is a single heavy panel: at 56px it reads as wedged
   between the worksheets above it and the share row below. */
#games { padding: 76px 0; }

.game-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #fbfbfe;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Concentration ---------- */

.memory-grid {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 720px;
  margin: 34px auto;
}

.mcard {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  perspective: 900px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.mcard-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.42s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.mcard.flipped .mcard-inner,
.mcard.matched .mcard-inner { transform: rotateY(180deg); }

.mcard-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-weight: 800;
  padding: 6px;
  text-align: center;
  line-height: 1.15;
}

.mcard-back {
  background: linear-gradient(135deg, var(--brand), #7c6cf5);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
}

.mcard-front {
  background: #fff;
  border: 2px solid var(--line);
  transform: rotateY(180deg);
  color: var(--ink);
  font-size: clamp(0.85rem, 2.4vw, 1.25rem);
  font-variant-numeric: tabular-nums;
}

.mcard.matched .mcard-front { border-color: var(--good); background: #f2fdf6; color: var(--good); }
.mcard.matched { cursor: default; }

/* ---------- Speed ---------- */

.speed-stage { margin: 0 auto; text-align: center; width: 100%; max-width: 620px; }

.speed-question {
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 48px;
  font-variant-numeric: tabular-nums;
}

.speed-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.speed-option {
  padding: 18px 10px;
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 800;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: all 0.12s ease;
  font-variant-numeric: tabular-nums;
}
.speed-option:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }
.speed-option.correct { border-color: var(--good); background: #e7f8ee; color: var(--good); }
.speed-option.wrong { border-color: var(--bad); background: #fdecec; color: var(--bad); }
.speed-option:disabled { cursor: default; }

/* ---------- Quick fingers ---------- */

.fingers-stage { margin: 0 auto; text-align: center; width: 100%; max-width: 560px; }

.fingers-question {
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 40px;
  font-variant-numeric: tabular-nums;
}

.fingers-input {
  width: 100%;
  max-width: 260px;
  padding: 14px 18px;
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.fingers-input:focus { border-color: var(--brand); }
.fingers-input.correct { border-color: var(--good); background: #f2fdf6; color: var(--good); }
.fingers-input.wrong { border-color: var(--bad); background: #fdecec; color: var(--bad); }

.fingers-feedback { height: 26px; margin-top: 12px; font-weight: 700; font-size: 0.95rem; }
.fingers-feedback.ok { color: var(--good); }
.fingers-feedback.no { color: var(--bad); }

/* ---------- Overlay / results ---------- */

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px;
  z-index: 5;
}
.overlay[hidden] { display: none; }

.overlay h3 { font-size: 1.6rem; margin-bottom: 6px; }
.overlay p { color: var(--ink-soft); margin-bottom: 20px; }
.overlay .big { font-size: 3rem; font-weight: 800; color: var(--brand); line-height: 1; margin-bottom: 8px; }

.game-body { position: relative; }

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 6px;
  background: #f1f2f8;
  padding: 5px;
  border-radius: 999px;
  flex-wrap: wrap;
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.tab svg { flex: 0 0 auto; }
.tab:hover { color: var(--ink); }
.tab.active { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(20, 22, 43, 0.1); }

/* ---------- The two foot-of-page sections ---------- */

/* Share With Others and All Topics sit one above the other at the bottom of every
   page except the homepage, so they are styled as a pair: same band, same heading,
   same measure. Only the content inside them differs. */

.topic-links,
.share-section {
  padding: 36px 0;
  text-align: center;
}

/* Share With Others is generated FIRST and All Topics second, on every page, so
   the rule above the pair belongs on the first of the two. Putting it on the
   other one - which is what this did - draws it between them, and a line at the
   join cuts the block in two. */
.share-section {
  border-top: 1px solid var(--line);
  /* The pair sits between the worksheets and the footer, and the footer carries
     a 40px margin of its own, so the space below the All Topics links comes to
     76px in total. The space above Share With Others is matched to it, so the
     block is balanced rather than crowded at the top. The 36px between the two
     halves is the pair's own internal spacing and stays as it is. */
  padding-top: 76px;
}
.topic-links h2,
.share-section h2 {
  font-size: 1.25rem;
  margin: 0 0 6px;
}
.share-section p { color: var(--ink-soft); margin: 0 0 20px; }

/* A plain, centred list of every topic. It is here for search engines and for
   anyone who has reached the bottom of a page without finding what they wanted,
   so it is deliberately quiet: no cards, no icons, no hover animation beyond a
   colour change. */
.topic-link-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  max-width: 760px;
  margin: 14px auto 0;
}
.topic-link-list a {
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-decoration: none;
}
.topic-link-list a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- Share ---------- */

/* Wrapping rather than a grid, so the row stays centred whatever the count. */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* `a:hover` underlines every link on the site, which is right in prose and wrong
   on a pill-shaped button: the line runs under the icon, the label and the
   padding, and reads as a text link rather than a control. The border and shadow
   carry the hover state here instead. */
.share-btn:hover,
.share-btn:focus {
  text-decoration: none;
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(20, 22, 43, 0.08);
}

/* Holds the platform's glyph, sized by the button and coloured by the platform.
   The glyph is a block so the SVG's own baseline gap cannot nudge it off centre
   against the label. */
.share-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.share-mark svg { display: block; }

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 40px 0 30px;
  margin-top: 40px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.site-footer .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.site-footer .links { display: flex; gap: 20px; flex-wrap: wrap; }

/* The blurb under the footer logo. A measure, not the full width of the column,
   so the line is a comfortable length to read on a wide screen. */
.footer-about { margin-top: 12px; max-width: 320px; }

/* The copyright and the legal links share one row, one size and one colour, so
   they read as a single line of small print rather than as a link list with a
   caption underneath it. */
.site-footer .copy {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 28px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.site-footer .copy a { color: inherit; text-decoration: none; }
.site-footer .copy a:hover { color: var(--brand); text-decoration: underline; }
.site-footer .legal-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* The footer stacks and centres on a narrow screen.
   At this width the two columns of the top row wrap onto separate lines anyway,
   so `space-between` leaves each of them hard against the left edge. A
   left-aligned block under the centred share and topic sections above it reads
   as a mistake rather than as a layout, so everything is centred and the two
   rows become simple stacks. */
@media (max-width: 720px) {
  .site-footer .cols {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }
  .footer-about { margin: 12px auto 0; }
  .site-footer .links { justify-content: center; }
  .site-footer .copy {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .site-footer .legal-links { justify-content: center; }
}

/* ---------- Legal pages ---------- */

.legal { padding: 8px 0 20px; }
/* A measure, not the full width: these are long documents and line length is
   what decides whether they are readable. */
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: 1.15rem; margin: 32px 0 10px; }
.legal-body h3 { font-size: 1rem; margin: 24px 0 8px; }
.legal-body p { color: var(--ink-soft); margin: 0 0 14px; }
.legal-body ul { color: var(--ink-soft); margin: 0 0 14px; padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--brand); }
.legal-updated { font-size: 0.85rem; color: var(--ink-faint); }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .level-row { grid-template-columns: auto 1fr; }
  .level-actions { grid-column: 1 / -1; }
  .stats { gap: 14px; }
  .game-body { padding: 18px; }

  /* One choice per line, centred. */
  .speed-options { grid-template-columns: 1fr; gap: 10px; }
  .speed-question { margin-bottom: 28px; }
  .speed-option { padding: 16px 10px; }

  /* Centre the tabs and the hint under the game. */
  .game-foot { flex-direction: column; align-items: center; text-align: center; }
  .tabs { justify-content: center; }
  .level-picker select { max-width: 100%; }
}

/* ---------- Print ---------- */

@media print {
  .site-header, .site-footer, .game-shell, .hero-actions { display: none !important; }
}