/* =========================================================================
   Times Tables — design system
   -------------------------------------------------------------------------
   1. Fonts
   2. Tokens (light + dark)
   3. Reset & base
   4. Layout primitives
   5. Typography
   6. Buttons & controls
   7. Cards & surfaces
   8. Header, drawer, footer
   9. Page furniture (hero, breadcrumbs, FAQ, prose)
  10. Times table components
  11. Games
  12. Chart
  13. Worksheets & generator
  14. Utilities
  15. Print
   ========================================================================= */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* Nunito covers Latin, Latin Extended, Cyrillic and Vietnamese. For the scripts
   it has no glyphs for, name a face built for that script instead of letting
   the generic stack fall through to Arial. */
:root:lang(ar) { --font: 'Nunito', 'SF Arabic', 'Geeza Pro', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }
:root:lang(he) { --font: 'Nunito', 'SF Hebrew', 'Arial Hebrew', 'Noto Sans Hebrew', 'Segoe UI', sans-serif; }
:root:lang(th) { --font: 'Nunito', 'SF Thai', Thonburi, 'Noto Sans Thai', 'Leelawadee UI', sans-serif; }
:root:lang(ja) { --font: 'Nunito', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', sans-serif; }
:root:lang(ko) { --font: 'Nunito', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; }

/* 2. Tokens --------------------------------------------------------------- */

:root {
  /* Brand hue drives the default accent; table pages override --accent-h. */
  --brand-h: 258;
  --accent-h: var(--brand-h);

  --accent: hsl(var(--accent-h) 72% 56%);
  --accent-strong: hsl(var(--accent-h) 68% 46%);
  --accent-soft: hsl(var(--accent-h) 85% 96%);
  --accent-line: hsl(var(--accent-h) 60% 88%);
  --accent-ink: hsl(var(--accent-h) 55% 32%);
  --on-accent: #fff;

  --bg: hsl(240 40% 99%);
  --bg-alt: hsl(240 33% 97%);
  --surface: #fff;
  --surface-2: hsl(240 33% 98%);
  --ink: hsl(232 30% 14%);
  --ink-2: hsl(232 14% 38%);
  --ink-3: hsl(232 12% 52%);
  --line: hsl(235 25% 90%);
  --line-strong: hsl(235 20% 82%);

  --success: hsl(152 62% 40%);
  --success-soft: hsl(152 65% 95%);
  --danger: hsl(354 70% 54%);
  --danger-soft: hsl(354 80% 96%);
  --warning: hsl(38 92% 50%);
  --warning-soft: hsl(38 92% 95%);

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px hsl(235 30% 20% / 0.06), 0 1px 3px hsl(235 30% 20% / 0.05);
  --shadow: 0 2px 4px hsl(235 30% 20% / 0.05), 0 8px 24px hsl(235 30% 20% / 0.08);
  --shadow-lg: 0 4px 8px hsl(235 30% 20% / 0.05), 0 20px 48px hsl(235 30% 20% / 0.12);
  --ring: 0 0 0 4px hsl(var(--accent-h) 80% 60% / 0.28);

  --w: 1140px;
  --w-narrow: 760px;
  --gap: clamp(1rem, 3vw, 1.75rem);
  --pad: clamp(1.1rem, 4vw, 2rem);

  --font: 'Nunito', ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

  --header-h: 64px;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --accent: hsl(var(--accent-h) 78% 68%);
  --accent-strong: hsl(var(--accent-h) 78% 74%);
  --accent-soft: hsl(var(--accent-h) 40% 18%);
  --accent-line: hsl(var(--accent-h) 35% 30%);
  --accent-ink: hsl(var(--accent-h) 80% 78%);
  --on-accent: hsl(232 40% 10%);

  --bg: hsl(233 26% 9%);
  --bg-alt: hsl(233 24% 11%);
  --surface: hsl(233 22% 13%);
  --surface-2: hsl(233 20% 16%);
  --ink: hsl(233 30% 95%);
  --ink-2: hsl(233 15% 74%);
  --ink-3: hsl(233 12% 62%);
  --line: hsl(233 18% 22%);
  --line-strong: hsl(233 16% 30%);

  --success: hsl(152 55% 55%);
  --success-soft: hsl(152 40% 16%);
  --danger: hsl(354 75% 68%);
  --danger-soft: hsl(354 40% 18%);
  --warning: hsl(38 88% 62%);
  --warning-soft: hsl(38 45% 17%);

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
  --shadow: 0 2px 6px hsl(0 0% 0% / 0.36), 0 10px 28px hsl(0 0% 0% / 0.34);
  --shadow-lg: 0 6px 12px hsl(0 0% 0% / 0.4), 0 24px 56px hsl(0 0% 0% / 0.46);
  color-scheme: dark;
}

/* Local accent scope ------------------------------------------------------
   Custom properties resolve where they are declared, so an element that sets
   its own --accent-h must re-derive the colours built from it. Add
   .accent-scope alongside the inline hue. */

.accent-scope {
  --accent: hsl(var(--accent-h) 72% 56%);
  --accent-strong: hsl(var(--accent-h) 68% 46%);
  --accent-soft: hsl(var(--accent-h) 85% 96%);
  --accent-line: hsl(var(--accent-h) 60% 88%);
  --accent-ink: hsl(var(--accent-h) 55% 32%);
}

:root[data-theme='dark'] .accent-scope {
  --accent: hsl(var(--accent-h) 78% 68%);
  --accent-strong: hsl(var(--accent-h) 78% 74%);
  --accent-soft: hsl(var(--accent-h) 40% 18%);
  --accent-line: hsl(var(--accent-h) 35% 30%);
  --accent-ink: hsl(var(--accent-h) 80% 78%);
}

/* 3. Reset & base --------------------------------------------------------- */

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

[hidden] { display: none !important; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--font);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-wrap: break-word;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent-strong); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.14em; }

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

::selection { background: hsl(var(--accent-h) 80% 60% / 0.28); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--r) var(--r);
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.16s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

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

/* 4. Layout --------------------------------------------------------------- */

.wrap {
  width: min(100% - 2rem, var(--w));
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - 2rem, var(--w-narrow)); margin-inline: auto; }

main { display: block; }

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }
.section--alt { background: var(--bg-alt); }

.stack > * + * { margin-top: var(--flow, 1rem); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.cluster--center { justify-content: center; }

/* 5. Typography ----------------------------------------------------------- */

h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem); }
h2, .h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }
h4, .h4 { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; }

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 62ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem;
}

.section-head { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-head > * + * { margin-top: 0.7rem; }
.section-head--center { margin-inline: auto; text-align: center; }

.muted { color: var(--ink-2); }
.small { font-size: 0.9rem; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* 6. Buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-ink: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.35rem;
  min-height: 48px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { box-shadow: var(--shadow); filter: brightness(1.05); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn--lg { padding: 0.95rem 1.9rem; font-size: 1.0625rem; min-height: 56px; }
.btn--sm { padding: 0.45rem 0.95rem; min-height: 40px; font-size: 0.9rem; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.btn--ghost:hover { --btn-bg: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }

.btn--soft {
  --btn-bg: var(--accent-soft);
  --btn-ink: var(--accent-ink);
  box-shadow: none;
}
.btn--soft:hover { box-shadow: var(--shadow-sm); }

.btn--quiet {
  --btn-bg: transparent;
  --btn-ink: var(--ink-2);
  box-shadow: none;
  padding-inline: 0.75rem;
}
.btn--quiet:hover { --btn-bg: var(--surface-2); --btn-ink: var(--ink); }

.btn--block { width: 100%; }
[dir='rtl'] .btn--back .icon { transform: scaleX(-1); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }

/* Form controls */
.field { display: grid; gap: 0.4rem; }
.field > label, .label { font-weight: 800; font-size: 0.92rem; color: var(--ink); }
.hint { font-size: 0.85rem; color: var(--ink-3); }

.input, select.input, textarea.input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  min-height: 46px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 2.25rem;
}
[dir='rtl'] select.input {
  background-position: 12px 50%, 18px 50%;
  padding-inline-end: 0.9rem;
  padding-inline-start: 2.25rem;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.94rem;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 46px; height: 27px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  position: relative;
  transition: background 0.18s ease;
  flex: none;
}
.switch .track::after {
  content: '';
  position: absolute;
  inset-inline-start: 3px;
  top: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(19px); }
[dir='rtl'] .switch input:checked + .track::after { transform: translateX(-19px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.15s ease, background 0.15s ease;
  font-weight: 700;
  font-size: 0.94rem;
}
.check:hover { border-color: var(--accent-line); }
.check input { accent-color: var(--accent); width: 20px; height: 20px; margin-top: 2px; flex: none; }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/* 7. Cards ---------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
  box-shadow: var(--shadow-sm);
}
.card--flush { padding: 0; overflow: hidden; }
.card--accent { border-color: var(--accent-line); background: var(--accent-soft); }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.15rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.tile:hover { box-shadow: var(--shadow); border-color: var(--accent); }

.tile-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  flex: none;
}
.tile--game h3 { font-size: 1.15rem; }
.tile--game::after {
  content: '';
  position: absolute;
  inset-inline-end: -34px;
  top: -34px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: 0.55;
  z-index: -1;
}
.tile--game { isolation: isolate; }
.tile h3, .tile .h3 { font-size: 1.1rem; }
.tile p { color: var(--ink-2); font-size: 0.94rem; line-height: 1.5; }
.tile .stretched::after { content: ''; position: absolute; inset: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge--warning { background: var(--warning-soft); color: hsl(38 85% 34%); }
:root[data-theme='dark'] .badge--warning { color: var(--warning); }

/* 8. Header / drawer / footer -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: hsl(from var(--surface) h s l / 0.86);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (background: hsl(from red h s l)) {
  .site-header { background: var(--surface); }
}

.site-header .bar {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  margin-inline-end: auto;
  padding: 0.25rem;
  border-radius: var(--r-sm);
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, hsl(var(--brand-h) 78% 62%), hsl(calc(var(--brand-h) + 45) 82% 58%));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
  flex: none;
  box-shadow: 0 2px 8px hsl(var(--brand-h) 60% 40% / 0.35);
}

.primary-nav { display: none; }
@media (min-width: 62rem) {
  .primary-nav { display: flex; align-items: center; gap: 0.15rem; }
}
.primary-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.primary-nav a:hover { background: var(--surface-2); color: var(--ink); }
.primary-nav a[aria-current='page'] { background: var(--accent-soft); color: var(--accent-ink); }

.header-tools { display: flex; align-items: center; gap: 0.15rem; }
.menu-toggle { display: inline-grid; }
@media (min-width: 62rem) { .menu-toggle { display: none; } }

/* Dropdown (language) */
.menu { position: relative; }
.menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 13rem;
  max-height: min(70vh, 26rem);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  display: none;
  z-index: 70;
}
.menu[data-open='true'] .menu-panel { display: block; }
.menu-panel a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--ink);
  text-decoration: none;
}
.menu-panel a:hover { background: var(--surface-2); }
.menu-panel a[aria-current='true'] { background: var(--accent-soft); color: var(--accent-ink); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
}
.drawer[data-open='true'] { visibility: visible; }
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: hsl(232 40% 8% / 0.5);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.drawer[data-open='true'] .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(88vw, 21rem);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: 1rem;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
[dir='rtl'] .drawer-panel { transform: translateX(100%); }
.drawer[data-open='true'] .drawer-panel { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.drawer nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.8rem;
  border-radius: var(--r);
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}
.drawer nav a:hover, .drawer nav button:hover { background: var(--surface-2); }
/* The reset control sits in the same list as the links and reads as one. */
.drawer nav button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.72rem 0.8rem;
  border: 0;
  border-radius: var(--r);
  background: none;
  font: inherit;
  font-weight: 800;
  color: var(--danger);
  text-align: start;
  cursor: pointer;
}
.drawer-note { padding: 0.35rem 0.8rem 0; font-size: 0.78rem; color: var(--ink-3); }
.drawer nav a[aria-current='page'] { background: var(--accent-soft); color: var(--accent-ink); }
.drawer-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 800;
  color: var(--ink-3);
  padding: 1rem 0.8rem 0.35rem;
}

/* Footer */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.footer-grid > div:first-child { grid-column: 1 / -1; }
@media (min-width: 56rem) {
  .footer-grid { grid-template-columns: 2fr repeat(4, 1fr); }
  .footer-grid > div:first-child { grid-column: auto; }
}
.site-footer h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  margin-bottom: 0.75rem;
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.94rem; }

/* A button that has to sit in a list of links without looking like an intruder. */
.link-button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink-2);
  cursor: pointer;
  text-align: start;
}
.link-button:hover { color: var(--danger); text-decoration: underline; }
.site-footer a:hover { color: var(--accent-strong); text-decoration: underline; }
.footer-base {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--ink-3);
}

/* 9. Page furniture ------------------------------------------------------- */

.breadcrumbs { padding-block: 1rem 0; }
.breadcrumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: var(--ink-3);
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.35rem; }
.breadcrumbs li + li::before { content: '/'; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; font-weight: 700; }
.breadcrumbs a:hover { color: var(--accent-strong); text-decoration: underline; }
.breadcrumbs [aria-current] { font-weight: 800; color: var(--ink); }

.hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.hero > * + * { margin-top: 1rem; }
.hero--compact { padding-block: 1.25rem 1rem; }
.hero--compact > * + * { margin-top: .5rem; }
.hero .actions { margin-top: 1.75rem; }

.hero--split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero--split { grid-template-columns: 1.05fr 0.95fr; }
}

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-inline-start: 1.35rem; display: grid; gap: 0.5rem; }
.prose li::marker { color: var(--accent); font-weight: 800; }
.prose strong { font-weight: 800; }

/* FAQ */
.faq { display: grid; gap: 0.6rem; max-width: 68ch; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.faq details[open] { border-color: var(--accent-line); }
.faq summary {
  cursor: pointer;
  padding: 1rem 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  width: 10px; height: 10px;
  border-right: 2.5px solid var(--ink-3);
  border-bottom: 2.5px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
  margin-top: -4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq summary:hover { background: var(--surface-2); }
.faq .answer { padding: 0 1.1rem 1.1rem; color: var(--ink-2); }

/* Share */
.share { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share button, .share a {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.15s ease, color 0.15s ease;
}
.share button:hover, .share a:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.share svg { width: 20px; height: 20px; }

/* Callout */
.callout {
  border-inline-start: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  color: var(--accent-ink);
}
.callout strong { color: inherit; }

/* 10. Times table components --------------------------------------------- */

/* Table picker chips */
.table-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.table-chip {
  --chip-h: var(--accent-h);
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 62px;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r);
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 900;
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-variant-numeric: tabular-nums;
}
.table-chip:hover { border-color: hsl(var(--chip-h) 60% 62%); background: hsl(var(--chip-h) 85% 96%); }
.table-chip[aria-pressed='true'], .table-chip.is-on {
  background: hsl(var(--chip-h) 72% 56%);
  border-color: hsl(var(--chip-h) 72% 56%);
  color: #fff;
}
.table-chip input { position: absolute; opacity: 0; pointer-events: none; }
.table-chip--all { min-width: auto; padding-inline: 1.1rem; letter-spacing: 0.01em; }

/* Big table-number cards on the home page */
.table-cards {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
}
.table-card {
  --card-h: var(--accent-h);
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: 1.1rem 1rem;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: #fff;
  background: linear-gradient(150deg, hsl(var(--card-h) 74% 58%), hsl(var(--card-h) 68% 46%));
  box-shadow: 0 2px 6px hsl(var(--card-h) 50% 35% / 0.22), 0 12px 24px hsl(var(--card-h) 50% 35% / 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  overflow: hidden;
  isolation: isolate;
}
.table-card::before {
  content: '';
  position: absolute;
  inset-inline-end: -18px;
  bottom: -26px;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.14);
  z-index: -1;
}
.table-card:hover { box-shadow: 0 4px 10px hsl(var(--card-h) 50% 35% / 0.3), 0 20px 36px hsl(var(--card-h) 50% 35% / 0.3); filter: brightness(1.06); }
.table-card .n { font-size: 2.1rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.table-card .label { font-size: 0.85rem; font-weight: 700; opacity: 0.92; }
.table-card .medal { position: absolute; top: 0.6rem; inset-inline-end: 0.7rem; font-size: 1rem; }

/* The table itself */
.facts {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  list-style: none;
  padding: 0;
}
.fact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.85rem 0.6rem;
  border-radius: var(--r);
  border: 2px solid var(--line);
  background: var(--surface);
  font-weight: 800;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  cursor: default;
}
.fact:hover { border-color: var(--accent); background: var(--accent-soft); }
.fact .eq { color: var(--ink-3); font-weight: 700; }
.fact .product { color: var(--accent-ink); }
.fact.is-speaking { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.04); }

/* Six-step plan */
.steps { display: grid; gap: 1rem; }
.step {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.step-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
  color: inherit;
}
.step-head:hover { background: var(--surface-2); }
.step-num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 900;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.step.is-done .step-num { background: var(--success-soft); color: var(--success); }
.step-title { font-weight: 800; font-size: 1.05rem; }
.step-sub { font-size: 0.88rem; color: var(--ink-3); font-weight: 600; }
.step-body { padding: 0 1.15rem 1.25rem; display: none; }
.step[data-open='true'] .step-body { display: block; }
.step-head .chev {
  margin-inline-start: auto;
  width: 10px; height: 10px;
  border-right: 2.5px solid var(--ink-3);
  border-bottom: 2.5px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
}
.step[data-open='true'] .step-head .chev { transform: rotate(-135deg); }

/* Answer rows (step 2 / 4) */
.answer-rows { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.answer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.answer-row .q { white-space: nowrap; }
.answer-row input {
  width: 100%;
  min-width: 3.5rem;
  padding: 0.35rem 0.5rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.answer-row input::-webkit-outer-spin-button,
.answer-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.answer-row input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.answer-row.is-correct { border-color: var(--success); background: var(--success-soft); }
.answer-row.is-correct input { border-color: var(--success); }
.answer-row.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.answer-row.is-wrong input { border-color: var(--danger); }
.answer-row .mark { font-weight: 900; flex: none; }

/* Drag & drop matching */
.match-board { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .match-board { grid-template-columns: 1fr 1fr; } }
.match-zones { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.match-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-height: 52px;
}
.match-zone.is-over { border-color: var(--accent); background: var(--accent-soft); border-style: solid; }
.match-zone.is-filled { border-style: solid; }
.match-zone.is-correct { border-color: var(--success); background: var(--success-soft); }
.match-zone.is-wrong { border-color: var(--danger); background: var(--danger-soft); animation: shake 0.3s; }
.match-slot { min-width: 3rem; min-height: 34px; display: grid; place-items: center; }

.match-pool { display: flex; flex-wrap: wrap; gap: 0.5rem; align-content: flex-start; }
.chip-answer {
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.chip-answer:hover { box-shadow: var(--shadow-sm); border-color: var(--accent); }
.chip-answer.is-picked { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip-answer.is-used { opacity: 0; pointer-events: none; }
.chip-answer:active { cursor: grabbing; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Progress */
.progress-track {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), hsl(calc(var(--accent-h) + 40) 78% 60%));
  transition: width 0.3s ease;
}

/* The counter with a bar under it, so "Question 9 of 10" is also something
   you can see filling up. Fixed height, so it never moves the stage. */
.question-progress {
  display: grid;
  gap: 0.4rem;
  width: min(100%, 22rem);
  /* Grid children must stretch: the track has no width of its own, so
     justify-items:center collapsed it to nothing. Centre the text instead. */
  text-align: center;
}
.progress-track--slim { height: 6px; }

.timer-bar { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.timer-fill { height: 100%; background: var(--accent); transition: width 0.1s linear; }
.timer-fill.is-low { background: var(--danger); }

/* Word problems */
.word-problems { display: grid; gap: 1rem; }
.word-problem {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1.25rem;
}
.word-problem h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.word-problem .working {
  margin-top: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: grid;
  gap: 0.25rem;
}

/* Tips */
.tip-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.tip {
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
  padding: 1.15rem;
}
.tip h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.tip p { color: var(--ink-2); font-size: 0.95rem; }

/* Diploma certificate */
.certificate {
  border: 3px double var(--accent);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  background: var(--surface);
  display: grid;
  gap: 0.75rem;
}
.certificate .seal {
  width: 72px; height: 72px;
  margin-inline: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, hsl(45 90% 60%), hsl(38 85% 48%));
  color: #fff;
  font-size: 2rem;
  box-shadow: var(--shadow);
}
.certificate .name {
  font-size: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  font-weight: 900;
  color: var(--accent-ink);
  border-bottom: 2px solid var(--line);
  padding-bottom: 0.35rem;
  display: inline-block;
  min-width: min(100%, 20rem);
}

/* Game mode cards (home page) --------------------------------------------
   A coloured header carries the icon, the name and a ring showing how close
   the visitor's personal best is to that game's target. */

.mode-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.mode-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.mode-card:hover { box-shadow: var(--shadow); border-color: var(--accent); }

.mode-card-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, hsl(var(--accent-h) 68% 48%), hsl(var(--accent-h) 78% 64%));
}

.mode-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: hsl(0 0% 100% / 0.22);
  flex: none;
}
.mode-icon svg { width: 24px; height: 24px; }

.mode-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-inline-end: auto;
}

.mode-ring { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.mode-ring svg { width: 48px; height: 48px; transform: rotate(-90deg); }
[dir='rtl'] .mode-ring svg { transform: rotate(-90deg) scaleY(-1); }
.mode-ring .ring-bg { fill: none; stroke: hsl(0 0% 100% / 0.28); stroke-width: 5; }
.mode-ring .ring-bar {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}
.mode-ring .ring-label {
  position: absolute;
  font-size: 0.72rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.mode-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem 1.15rem 1.25rem;
  flex: 1;
}
.mode-card-body p { color: var(--ink-2); font-size: 0.94rem; line-height: 1.5; flex: 1; margin: 0; }
.mode-card .btn { pointer-events: none; }

/* Setup card (game pages) ------------------------------------------------
   Every game asks the same three questions in the same order, in the stage
   itself, and then gets out of the way. Steps that do not apply are hidden
   and the numbering closes up behind them. */

.setup {
  counter-reset: setup;
  display: grid;
  gap: 1.4rem;
  width: min(100%, 34rem);
  text-align: start;
}

.setup-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}
.setup-step::before {
  counter-increment: setup;
  content: counter(setup);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 900;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.setup-label {
  font-weight: 800;
  font-size: 0.98rem;
  margin-bottom: 0.55rem;
}

.setup .btn--play {
  margin-top: 0.4rem;
  font-size: 1.15rem;
  min-height: 62px;
}

/* Segmented option control used for amount and difficulty. */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 2px solid var(--line);
  gap: 2px;
}
.segmented button {
  border: 0;
  background: transparent;
  padding: 0.5rem 1.05rem;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink-2);
  cursor: pointer;
  min-height: 42px;
  font-variant-numeric: tabular-nums;
}
.segmented button[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); }
.segmented button:hover:not([aria-pressed='true']) { color: var(--ink); background: var(--surface); }

/* 11. Games -------------------------------------------------------------- */

.game-shell {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.game-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.stat { display: grid; gap: 0; line-height: 1.2; }
.stat .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 800; color: var(--ink-3); }
.stat .v { font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.game-top .spacer { margin-inline-start: auto; }
.game-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.game-stage {
  position: relative;
  min-height: clamp(20rem, 52vh, 30rem);
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 2.25rem);
}
.game-stage.is-canvas { padding: 0; background: var(--bg-alt); min-height: 0; align-items: start; }

/* Fixed slots -------------------------------------------------------------
   The stage centres its content, so any height change while playing moves
   everything. These reserve the space up front: one line for the counter and
   the feedback line, and a constant box for the question however long the
   prompt or however small its type. */

.question-slot {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(2.6rem, 1.7rem + 5.5vw, 4.4rem);
}

.line-slot { min-height: 1.65em; }

.question-big {
  font-size: clamp(2.25rem, 1.5rem + 5vw, 4rem);
  line-height: 1.1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
}

/* Statements ("7 × 8 = 54") are longer, so they take a smaller size and stay
   on one line. The slot above keeps the height identical either way. */
.question-big.is-long { font-size: clamp(1.5rem, 0.95rem + 3.2vw, 2.6rem); }
.answer-big {
  width: min(100%, 12rem);
  font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
  font-weight: 900;
  text-align: center;
  padding: 0.5rem;
  border: 3px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-alt);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.answer-big::-webkit-outer-spin-button,
.answer-big::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.answer-big:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.answer-big.is-correct { border-color: var(--success); background: var(--success-soft); }
.answer-big.is-wrong { border-color: var(--danger); background: var(--danger-soft); animation: shake 0.3s; }

/* On-screen keypad */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: min(100%, 17rem);
  margin-inline: auto;
}
.keypad button {
  padding: 0.85rem 0;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 1.3rem;
  font-weight: 900;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: transform 0.1s ease, background 0.12s ease;
}
.keypad button:hover { background: var(--surface-2); }
.keypad button:active { transform: scale(0.95); }
.keypad button[data-key='enter'] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Multiple-choice options */
.options {
  --option-h: 4.6rem;
  --option-gap: 0.65rem;
  display: grid;
  gap: var(--option-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  width: min(100%, 34rem);
}

@media (max-width: 34rem) {
  /* Four answers become a 2×2 block; a True/False pair grows to fill the
     same footprint so switching question type never changes the height. */
  .options { grid-template-columns: 1fr 1fr; }
  .options--pair .option { min-height: calc(var(--option-h, 4.6rem) * 2 + var(--option-gap, 0.65rem)); }
}
.option {
  min-height: var(--option-h, 4.6rem);
  padding: 1rem 0.75rem;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}
.option:hover { border-color: var(--accent); background: var(--accent-soft); }
.option.is-correct { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.option.is-wrong { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

/* Memory board */
.memory-board { display: grid; gap: 0.6rem; width: 100%; }
.memory-card {
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: transparent;
  perspective: 700px;
  cursor: pointer;
}
.memory-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.memory-card[data-face='up'] .memory-inner { transform: rotateY(180deg); }
.memory-front, .memory-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  backface-visibility: hidden;
  font-weight: 900;
  font-size: clamp(0.9rem, 0.6rem + 1.6vw, 1.3rem);
  font-variant-numeric: tabular-nums;
}
.memory-front {
  background: linear-gradient(140deg, hsl(var(--accent-h) 72% 58%), hsl(var(--accent-h) 66% 46%));
  color: #fff;
  font-size: 1.4rem;
}
.memory-back {
  background: var(--surface);
  border: 2px solid var(--accent-line);
  color: var(--ink);
  transform: rotateY(180deg);
}
.memory-card[data-matched='true'] .memory-back { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.memory-card[data-matched='true'] { cursor: default; }

/* Balloons / race canvas */
.play-field {
  position: relative;
  width: 100%;
  height: clamp(15rem, 40vh, 21rem);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, hsl(200 85% 88%), hsl(200 70% 96%));
}
:root[data-theme='dark'] .play-field { background: linear-gradient(180deg, hsl(230 40% 18%), hsl(230 35% 12%)); }

.balloon {
  position: absolute;
  display: grid;
  place-items: center;
  width: 68px; height: 84px;
  border-radius: 50% 50% 46% 46%;
  color: #fff;
  font-weight: 900;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border: 0;
  box-shadow: inset -8px -8px 0 hsl(0 0% 0% / 0.08);
  transition: transform 0.1s ease;
}
.balloon::after {
  content: '';
  position: absolute;
  bottom: -8px;
  width: 2px; height: 10px;
  background: hsl(0 0% 100% / 0.6);
}
.balloon:hover { filter: brightness(1.12); }
.balloon.is-pop { animation: pop 0.28s forwards; }
@keyframes pop { to { transform: scale(1.6); opacity: 0; } }

.race-lane {
  position: relative;
  height: 62px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.racer {
  --pos: 0;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.9rem;
  line-height: 1;
  /* The track is the lane minus the ship and the flag, so --pos: 1 puts the
     ship against the chequered line rather than 6% short of it. */
  inset-inline-start: calc(var(--pos) * (100% - 3.4rem));
  transition: inset-inline-start 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* A wrong answer hands the rival ground; the flash says where it came from. */
.racer.is-boost { animation: racer-boost 0.45s ease; }
@keyframes racer-boost {
  0%, 100% { filter: none; }
  35% { filter: drop-shadow(0 0 6px var(--danger)) brightness(1.25); scale: 1.25; }
}

.race-lane .finish {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 12px;
  background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 10px 10px;
  opacity: 0.5;
}

/* Grid game */
.grid-game { overflow-x: auto; }
.grid-game table { border-collapse: separate; border-spacing: 4px; margin-inline: auto; }
.grid-game th {
  width: 3.1rem; height: 3.1rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.grid-game td { padding: 0; }
.grid-game input {
  width: 3.1rem; height: 3.1rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.grid-game input::-webkit-outer-spin-button,
.grid-game input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.grid-game input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); position: relative; z-index: 2; }
.grid-game input.is-correct { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.grid-game input.is-wrong { border-color: var(--danger); background: var(--danger-soft); }

/* Flash card */
.flashcard {
  width: min(100%, 22rem);
  aspect-ratio: 3 / 2;
  perspective: 1000px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.flashcard-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.flashcard[data-flipped='true'] .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  backface-visibility: hidden;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 1.2rem + 5vw, 3.5rem);
  box-shadow: var(--shadow);
}
.flashcard-front { background: var(--surface); border: 2px solid var(--accent-line); color: var(--ink); }
.flashcard-back {
  background: linear-gradient(140deg, hsl(var(--accent-h) 72% 58%), hsl(var(--accent-h) 66% 46%));
  color: #fff;
  transform: rotateY(180deg);
}

/* Result panel */
.result {
  display: grid;
  gap: 1.25rem;
  text-align: center;
  place-items: center;
  width: min(100%, 34rem);
}
.result .score-big {
  font-size: clamp(3rem, 2rem + 6vw, 5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.result-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
/* Every question of the round, green if you got it and red if you did not —
   the mistakes matter most, but seeing the whole set is what makes a score
   feel earned. */
.review-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  max-width: 40rem;
}
.review {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.review--right { background: var(--success-soft); color: var(--success); }
.review--wrong { background: var(--danger-soft); color: var(--danger); }
.review--skipped { background: var(--surface-2); color: var(--ink-3); }
.review .given { text-decoration: line-through; opacity: 0.7; }
.review .mark { font-size: 0.95em; }

.miss-list { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.miss {
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 800;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* 12. Chart --------------------------------------------------------------- */

.chart-scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.chart {
  border-collapse: separate;
  border-spacing: 3px;
  margin-inline: auto;
  font-variant-numeric: tabular-nums;
}
.chart th, .chart td {
  width: 2.9rem; height: 2.9rem;
  text-align: center;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.1s ease;
}
.chart th {
  background: var(--ink);
  color: var(--bg);
  font-weight: 900;
}
.chart th.corner { background: transparent; }
.chart td {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: default;
}
.chart[data-colour='full'] td { background: hsl(var(--cell-h, 258) 70% var(--cell-l, 94%)); border-color: transparent; color: hsl(var(--cell-h, 258) 55% 25%); }
:root[data-theme='dark'] .chart[data-colour='full'] td { background: hsl(var(--cell-h, 258) 35% var(--cell-l-dark, 20%)); color: hsl(var(--cell-h, 258) 70% 85%); }
.chart[data-colour='soft'] td { background: var(--surface-2); }
.chart td.is-highlight { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 900; }
.chart td.is-cross { background: var(--accent-soft); color: var(--accent-ink); }
.chart td.is-hit { background: var(--accent); color: var(--on-accent); font-weight: 900; }
.chart th.is-cross { outline: 2px solid var(--accent); outline-offset: -2px; }
.chart[data-size='100'] th, .chart[data-size='100'] td { width: 2.1rem; height: 2.1rem; font-size: 0.72rem; border-radius: 4px; }

.chart-readout {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 900;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  min-height: 48px;
}

/* The downloadable chart, and every table written out ---------------------- */

.chart-download { margin: 0; display: grid; gap: 0.6rem; justify-items: center; }
.chart-download img {
  width: 100%;
  height: auto;
  max-width: 26rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.chart-download figcaption { font-size: 0.9rem; font-weight: 800; color: var(--ink-3); }

.times-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.times-card {
  --card-h: var(--accent-h);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.times-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(150deg, hsl(var(--card-h) 74% 58%), hsl(var(--card-h) 68% 46%));
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}
.times-card-head:hover { filter: brightness(1.06); }
.times-card-body {
  padding: 0.8rem 1rem 1rem;
  display: grid;
  gap: 0.15rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.times-card-body span { color: var(--ink-2); }
.times-card-body b { color: hsl(var(--card-h) 55% 34%); }
:root[data-theme='dark'] .times-card-body b { color: hsl(var(--card-h) 70% 72%); }

/* 13. Worksheets & generator --------------------------------------------- */

.generator-layout { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 64rem) {
  .generator-layout { grid-template-columns: 20rem 1fr; }
  .generator-controls { position: sticky; top: calc(var(--header-h) + 1rem); }
}
.control-group { display: grid; gap: 0.75rem; }
.control-group + .control-group { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* A sheet preview is a picture of a piece of paper, so on a narrow screen it
   scrolls at its real width rather than reflowing into something that will not
   be what comes out of the printer. */
@media screen and (max-width: 48rem) {
  .sheet-scroll { overflow-x: auto; }
  .sheet-scroll .sheet { min-width: 40rem; }
}

/* The per-table sheet builder: two questions and a print button. */
.builder-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.builder .segmented { flex-wrap: wrap; }

.sheet {
  background: #fff;
  color: #16181d;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  font-variant-numeric: tabular-nums;
}
.sheet + .sheet { margin-top: 1.5rem; }
.sheet-head { border-bottom: 2px solid #16181d; padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
.sheet-head h3 { font-size: 1.35rem; color: inherit; }
.sheet-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 0.75rem; font-size: 0.9rem; }
.sheet-meta span { border-bottom: 1px solid #9aa0aa; min-width: 9rem; padding-bottom: 2px; }
.sheet-questions { display: grid; gap: 0.6rem 1.5rem; list-style: none; padding: 0; counter-reset: q; }
.sheet-questions li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 700;
  break-inside: avoid;
}
.sheet-questions li::before {
  counter-increment: q;
  content: counter(q) '.';
  color: #6b7280;
  font-weight: 700;
  min-width: 1.9rem;
  font-size: 0.85em;
}
/* Answer space. Sized in em so it grows with the sheet's font-size setting,
   and used both at the end of a question and inside one. */
.sheet-blank { display: inline-block; min-width: 2.6em; border-bottom: 2px solid #16181d; }

/* True or false is answered by ringing a letter, so it gets no rule at all. */
.tf { display: inline-flex; gap: 0.3em; margin-inline-start: 0.2em; }
.tf b {
  width: 1.6em;
  height: 1.6em;
  border: 2px solid #16181d;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.8em;
  font-weight: 800;
  line-height: 1;
}
.tf b.is-answer { background: #16181d; color: #fff; }
.sheet[data-size='small'] .sheet-questions { font-size: 0.95rem; }
.sheet[data-size='medium'] .sheet-questions { font-size: 1.15rem; }
.sheet[data-size='large'] .sheet-questions { font-size: 1.45rem; }
.sheet-footer { margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid #d3d7de; font-size: 0.75rem; color: #6b7280; display: flex; justify-content: space-between; }

/* Multiplication wheels: two across, big enough to write the answers in. */
.sheet-wheels { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 20rem)); justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.wheel { display: grid; place-items: center; break-inside: avoid; }
.wheel svg { width: 100%; max-width: 20rem; }

/* 14. Utilities ----------------------------------------------------------- */

.flow-lg { --flow: 1.5rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.hidden { display: none !important; }
.no-print { }
.scroll-x { overflow-x: auto; }

.pill-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--line);
  background: var(--surface);
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--ink-2);
  text-decoration: none;
}
.pill[aria-pressed='true'], .pill.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: 1.25rem;
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100% - 2rem);
  padding: 0.8rem 1.3rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-weight: 800;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translateY(0); }

/* 15. Print ---------------------------------------------------------------
   Nothing on screen is printed as it appears. A print button names what it
   wants, the page builds exactly that into #print-sheet, and that sheet is
   the only thing the printer is ever shown. Ctrl+P takes the same path, so a
   chart page prints a chart rather than three sheets of prose. */

#print-sheet { display: none; }

@media print {
  html.is-printing body > *:not(#print-sheet) { display: none !important; }
  html.is-printing #print-sheet { display: block; }

  /* Paper is white. color-scheme has to be reset too: left on dark it makes
     the browser paint the page canvas — the margins — black. */
  html, body { background: #fff !important; color-scheme: light !important; }

  /* Fallback: a page with nothing to build still loses its furniture. */
  .site-header, .site-footer, .drawer, .breadcrumbs, .share,
  .no-print, .skip-link, .toast, .game-top, .steps, .faq { display: none !important; }
  body { color: #000; font-size: 11pt; }
  main { padding: 0; }
  .section { padding-block: 0; }
  a[href]::after { content: ''; }
  @page { size: A4 portrait; margin: 12mm; }
}

/* ---- the printed sheet -------------------------------------------------
   Fixed colours, never tokens: a sheet printed from dark mode must come out
   of the printer looking exactly like one printed from light mode. */

#print-sheet {
  --p-ink: #16181d;
  --p-mute: #6c7280;
  --p-line: #c9ced8;
  --p-h: 258;
  /* The page tokens are redefined so cloned components (the chart, a
     worksheet) resolve against paper rather than the current theme. */
  --ink: #16181d;
  --ink-2: #3a3f4c;
  --ink-3: #6c7280;
  --bg: #fff;
  --surface: #fff;
  --surface-2: #f4f5f8;
  --line: #c9ced8;
  color: var(--p-ink);
  background: #fff;
  font-variant-numeric: tabular-nums;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.p-page { display: flex; flex-direction: column; break-after: page; }
.p-page:last-child { break-after: auto; }
.p-page--fill { min-height: 96vh; }
.p-body { flex: 1 1 auto; }
.p-body--centre { display: grid; align-content: center; }

.p-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8mm;
  border-bottom: 1mm solid var(--p-ink);
  padding-bottom: 2.5mm;
  margin-bottom: 5mm;
}
.p-head h1 { font-size: 19pt; line-height: 1.15; margin: 0; color: var(--p-ink); }
.p-head p { font-size: 9.5pt; color: var(--p-mute); margin: 1mm 0 0; }
.p-brand {
  font-size: 8.5pt;
  font-weight: 900;
  color: var(--p-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.p-foot {
  margin-top: 5mm;
  padding-top: 2mm;
  border-top: 0.3mm solid var(--p-line);
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  font-size: 8.5pt;
  color: var(--p-mute);
}

/* Name / date / score rules across the top of a practice sheet. */
.p-lines { display: flex; gap: 8mm; margin-bottom: 6mm; font-size: 10pt; font-weight: 700; color: var(--p-mute); }
.p-lines span { flex: 1; border-bottom: 0.4mm solid var(--p-line); padding-bottom: 1.5mm; }
.p-lines span:last-child { flex: 0 0 28mm; }

/* The chart, sized in millimetres so it fills the paper it is given. */
.p-chart { display: flex; justify-content: center; }
#print-sheet .chart { border-spacing: 0.7mm; margin: 0 auto; }
#print-sheet .chart th,
#print-sheet .chart td {
  width: var(--p-cell, 15mm);
  height: var(--p-cell-h, var(--p-cell, 15mm));
  font-size: var(--p-font, 12pt);
  border-radius: 1.5mm;
  transition: none;
}
#print-sheet .chart th { background: var(--p-ink); color: #fff; }
#print-sheet .chart th.corner { background: transparent; color: var(--p-ink); }
#print-sheet .chart td { background: #fff; border: 0.3mm solid var(--p-line); color: var(--p-ink); }
#print-sheet .chart[data-colour='full'] td {
  background: hsl(var(--cell-h, 258) 70% var(--cell-l, 94%));
  border-color: transparent;
  color: hsl(var(--cell-h, 258) 55% 25%);
}
#print-sheet .chart[data-colour='soft'] td { background: #f4f5f8; border-color: transparent; }
#print-sheet .chart td.is-highlight { outline: 0.6mm solid hsl(var(--p-h) 65% 45%); outline-offset: -0.6mm; font-weight: 900; }
#print-sheet .chart td.is-cross, #print-sheet .chart td.is-hit, #print-sheet .chart th.is-cross { outline: none; }

/* A single table as a poster: twelve facts, big enough to read from a sofa.
   Given the whole page the rows share it out between them. */
.p-poster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm 6mm; }
.p-page--fill .p-body { display: grid; }
.p-page--fill .p-poster { grid-auto-rows: 1fr; align-content: stretch; }
.p-page--fill .p-fact { font-size: 27pt; }
.p-fact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  padding: 4.5mm 3mm;
  border: 0.6mm solid hsl(var(--p-h) 60% 82%);
  border-radius: 3mm;
  background: hsl(var(--p-h) 70% 96%);
  font-size: 19pt;
  font-weight: 800;
  break-inside: avoid;
}
.p-fact .eq { color: var(--p-mute); font-weight: 700; }
.p-fact b { color: hsl(var(--p-h) 55% 30%); }
.p-fact .p-blank { display: inline-block; min-width: 2.6em; border-bottom: 0.6mm solid hsl(var(--p-h) 40% 60%); }

/* Diploma */
.p-page--fill .p-cert { align-content: center; }
.p-cert {
  position: relative;
  width: 100%;
  border: 1.6mm double hsl(42 75% 45%);
  border-radius: 4mm;
  padding: 16mm 14mm 14mm;
  text-align: center;
  display: grid;
  gap: 5mm;
  justify-items: center;
  background: #fffdf7;
}
.p-cert::before {
  content: '';
  position: absolute;
  inset: 3mm;
  border: 0.3mm solid hsl(42 70% 62%);
  border-radius: 2mm;
  pointer-events: none;
}
.p-cert-eyebrow {
  font-size: 10pt;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(38 60% 38%);
}
.p-cert-seal {
  width: 24mm;
  height: 24mm;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13mm;
  color: #fff;
  background: linear-gradient(135deg, hsl(45 90% 58%), hsl(36 85% 46%));
  border: 1mm solid hsl(42 75% 45%);
}
.p-cert h2 { font-size: 26pt; line-height: 1.1; margin: 0; color: var(--p-ink); }
.p-cert-label { font-size: 10pt; color: var(--p-mute); margin: 0; }
.p-cert-name {
  font-size: 30pt;
  font-weight: 900;
  color: hsl(var(--p-h) 55% 32%);
  border-bottom: 0.5mm solid var(--p-line);
  padding: 0 12mm 2mm;
  min-width: 60%;
  line-height: 1.2;
}
.p-cert-note { font-size: 12pt; color: var(--p-ink); margin: 0; max-width: 130mm; }
.p-cert-stats { display: flex; gap: 12mm; font-size: 11pt; font-weight: 800; color: var(--p-ink); }
.p-cert-stats span { display: grid; gap: 1mm; }
.p-cert-stats small { font-size: 8.5pt; font-weight: 700; color: var(--p-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.p-cert-sign { display: flex; gap: 14mm; width: 100%; margin-top: 4mm; font-size: 8.5pt; color: var(--p-mute); }
.p-cert-sign span { flex: 1; border-top: 0.4mm solid var(--p-line); padding-top: 1.5mm; }

/* Worksheets keep their own head and footer; on paper they lose the card. */
#print-sheet .sheet {
  background: #fff;
  color: var(--p-ink);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  break-after: page;
}
#print-sheet .sheet:last-child { break-after: auto; }
#print-sheet .sheet + .sheet { margin-top: 0; }
#print-sheet .sheet-head { border-bottom-width: 1mm; }
/* A short worksheet spreads out to fill the page: more room to write in,
   and no half-empty sheet. A long one simply keeps its natural height. */
#print-sheet .sheet { display: flex; flex-direction: column; min-height: 95vh; }
#print-sheet .sheet-questions { flex: 1 1 auto; gap: 5mm 8mm; align-content: space-between; }
#print-sheet .sheet-footer { margin-top: 4mm; }
/* An answer key is read, not written on, so it stays compact at the top. */
#print-sheet .sheet--key { min-height: 0; }
#print-sheet .sheet--key .sheet-questions { flex: 0 0 auto; gap: 3mm 8mm; align-content: start; }
#print-sheet .sheet-wheels { flex: 1 1 auto; grid-template-columns: repeat(auto-fit, 88mm); gap: 8mm; margin-top: 6mm; align-content: space-between; }
#print-sheet .wheel svg { max-width: 88mm; }