/* Fonts are hosted on spraoilearning.ie itself (no Google Fonts), so visitors' details aren't shared with anyone. */
@font-face { font-family: "Lexend"; src: url("../fonts/Lexend.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/Bricolage.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
/* Spraoi — one bright, single-theme world. Layout idea: big tappable tiles on a calm sky ground, one task per screen. */
:root {
  --ink: #1d2242;          /* text, outlines */
  --sky: #eef3ff;          /* page ground */
  --paper: #ffffff;        /* cards */
  --maths: #ff6b4a;        /* coral: Maths */
  --english: #0fa99b;      /* teal: English */
  --sun: #ffc533;          /* stars, highlights */
  --violet: #6b5be6;       /* links, focus, primary action */
  --muted: #5b6185;
  --line: #d5dcf2;
  --good: #1f9d55;
  --good-bg: #e3f6ea;
  --try: #b45309;
  --try-bg: #fff3dc;
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Lexend", "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --radius: 18px;
  --shadow: 0 4px 0 rgba(29, 34, 66, 0.12);
  --text-scale: 1;
  color-scheme: light;
}
html.big-text { --text-scale: 1.18; }
html.calm { --maths: #d9826e; --english: #4f9e96; --sun: #e9c46a; --violet: #5a5fa8; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: calc(18px * var(--text-scale));
  line-height: 1.55;
  letter-spacing: 0.01em;
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; margin: 0 0 0.4em; }
h1 { font-size: calc(2.4rem * var(--text-scale)); letter-spacing: -0.02em; }
h2 { font-size: calc(1.6rem * var(--text-scale)); }
h3 { font-size: calc(1.2rem * var(--text-scale)); }
p { margin: 0 0 0.8em; max-width: 62ch; }
a { color: var(--violet); }
:focus-visible { outline: 4px solid var(--violet); outline-offset: 3px; border-radius: 10px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.site-header { background: var(--paper); border-bottom: 3px solid var(--line); position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 72px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; }
.logo svg { width: 44px; height: 44px; }
.logo small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; }
.nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.nav a, .nav button {
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink); text-decoration: none;
  padding: 10px 14px; border-radius: 12px; border: 0; background: transparent; cursor: pointer;
}
.nav a:hover, .nav button:hover { background: var(--sky); }
.nav a[aria-current="page"] { background: var(--sky); color: var(--violet); }

/* Settings panel */
.settings { background: var(--paper); border-bottom: 3px solid var(--line); }
.settings[hidden] { display: none; }
.settings .wrap { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 14px; padding-bottom: 14px; align-items: center; }
.toggle { display: flex; align-items: center; gap: 10px; background: var(--sky); padding: 10px 14px; border-radius: 12px; cursor: pointer; font-size: 0.95rem; }
.toggle input { width: 22px; height: 22px; accent-color: var(--violet); }

/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 24px 0 8px; font-size: 0.9rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
.crumbs a { color: var(--muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 1.05rem; text-decoration: none;
  padding: 14px 24px; min-height: 56px; border-radius: 16px; border: 3px solid var(--ink);
  background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: var(--shadow);
  transition: transform 0.12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.primary { background: var(--violet); color: #fff; border-color: var(--violet); }
.btn.small { min-height: 44px; padding: 8px 14px; font-size: 0.95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.speak { border-radius: 999px; min-width: 56px; padding: 10px 16px; }
.speak svg { width: 22px; height: 22px; }

/* Hero */
.hero { padding: 40px 0 24px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.hero .lead { font-size: 1.15rem; color: var(--muted); }
.hero .badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.hero .badges li { background: var(--paper); border: 2px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 0.9rem; font-weight: 600; }
.mascot { width: 100%; max-width: 340px; justify-self: center; }

section { margin: 36px 0; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Class picker */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.class-btn {
  font: inherit; font-weight: 700; padding: 18px 12px; border-radius: var(--radius);
  border: 3px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; text-align: center;
  text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.class-btn.active { border-color: var(--ink); box-shadow: var(--shadow); }
.class-btn.active:hover { transform: translateY(-2px); }
.class-btn[aria-disabled="true"] { color: var(--muted); cursor: default; background: transparent; border-style: dashed; }
.class-btn .num { font-family: var(--font-display); font-size: 1.5rem; }
.class-btn .tag { font-size: 0.75rem; font-weight: 600; }

/* Subject buttons */
.subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.subject {
  display: flex; align-items: center; gap: 20px; padding: 28px; border-radius: 24px; text-decoration: none;
  color: #fff; border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); min-height: 150px;
  transition: transform 0.12s ease;
}
.subject:hover { transform: translateY(-3px); }
.subject.maths { background: var(--maths); }
.subject.english { background: var(--english); }
.subject .big { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; line-height: 1; }
.subject .sub { font-size: 1rem; opacity: 0.95; margin-top: 6px; }
.subject svg { width: 84px; height: 84px; flex: none; }

/* Game cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card {
  background: var(--paper); border: 3px solid var(--line); border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); position: relative;
}
.card.ready { border-color: var(--ink); box-shadow: var(--shadow); }
.card.ready:hover { transform: translateY(-2px); }
.card .stripe { height: 8px; border-radius: 6px; background: var(--maths); }
.card.english .stripe { background: var(--english); }
.card h3 { margin: 4px 0 0; }
.card .meta { font-size: 0.85rem; color: var(--muted); }
.card .pill { align-self: flex-start; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--sky); }
.card.ready .pill { background: var(--good-bg); color: var(--good); }
.card.soon { opacity: 0.8; border-style: dashed; }
.card .stars-mini { color: var(--sun); font-size: 1.1rem; letter-spacing: 2px; }

/* Strand / topic lists */
.strand { background: var(--paper); border-radius: 24px; border: 3px solid var(--line); padding: 22px; }
.strand + .strand { margin-top: 16px; }
.strand h2 { display: flex; align-items: center; gap: 12px; }
.strand h2 .dot { width: 18px; height: 18px; border-radius: 6px; background: var(--maths); }
.english-page .strand h2 .dot { background: var(--english); }
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.topic {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px;
  border-radius: 14px; background: var(--sky); text-decoration: none; color: var(--ink); font-weight: 600; min-height: 60px;
}
.topic:hover { outline: 3px solid var(--ink); }
.topic .count { font-size: 0.8rem; font-weight: 700; background: var(--paper); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.topic .count.has { background: var(--good-bg); color: var(--good); }
.curric { font-size: 0.85rem; color: var(--muted); }

/* Parent info */
.parent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.info { background: var(--paper); border-radius: var(--radius); padding: 20px; border: 3px solid var(--line); }
.info svg { width: 40px; height: 40px; }
table.progress { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius); overflow: hidden; font-variant-numeric: tabular-nums; }
table.progress th, table.progress td { text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--sky); }
table.progress th { background: var(--ink); color: #fff; font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* Footer */
.site-footer { margin-top: 60px; padding: 28px 0 40px; border-top: 3px solid var(--line); background: var(--paper); font-size: 0.9rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }

/* ===== Game shell ===== */
.game { background: var(--paper); border: 3px solid var(--ink); border-radius: 28px; padding: 24px; margin-top: 12px; box-shadow: 0 6px 0 var(--ink); }
.game-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.game-top h1 { font-size: calc(2rem * var(--text-scale)); margin: 0; }
.level-tag { font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--sun); }
.learn-box { display: flex; gap: 16px; align-items: flex-start; background: var(--sky); border-radius: 18px; padding: 16px 18px; margin: 16px 0; }
.learn-box .label { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.teach { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.teach .t { border: 3px solid var(--line); border-radius: 16px; padding: 14px; }
.teach .t strong { font-family: var(--font-display); font-size: 1.2rem; display: block; }
.teach .t em { display: block; color: var(--muted); font-style: normal; font-size: 0.9rem; margin-top: 4px; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.level-btn {
  font: inherit; text-align: left; padding: 18px; border-radius: 18px; border: 3px solid var(--ink); background: var(--paper);
  cursor: pointer; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px;
}
.level-btn:hover { transform: translateY(-2px); }
.level-btn .n { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; }
.level-btn .d { font-size: 0.85rem; color: var(--muted); }
.level-btn .s { color: var(--sun); font-size: 1.3rem; letter-spacing: 3px; }
.level-btn .s .off { color: var(--line); }

/* Example demo */
.demo { border: 3px dashed var(--line); border-radius: 18px; padding: 16px; margin: 8px 0 20px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.demo .arrow { font-size: 2rem; color: var(--muted); }
.demo .why { grid-column: 1 / -1; margin: 0; color: var(--muted); }

/* Sort It */
.progress-bar { height: 14px; background: var(--sky); border-radius: 999px; overflow: hidden; margin: 14px 0; }
.progress-bar span { display: block; height: 100%; background: var(--good); width: 0; transition: width 0.3s ease; }
.tray { display: flex; flex-wrap: wrap; gap: 12px; min-height: 84px; padding: 14px; border-radius: 18px; background: var(--sky); margin-bottom: 16px; justify-content: center; }
.tile {
  font: inherit; font-weight: 600; font-size: 1.05rem; padding: 14px 18px; border-radius: 14px; border: 3px solid var(--ink);
  background: var(--paper); color: var(--ink); cursor: grab; box-shadow: var(--shadow); touch-action: none; user-select: none;
  max-width: 320px; text-align: left; line-height: 1.35;
}
.tile b { background: var(--sun); padding: 0 4px; border-radius: 4px; }
.tile.selected { outline: 4px solid var(--violet); outline-offset: 2px; transform: translateY(-3px); }
.tile.dragging { opacity: 0.35; }
.tile.ghost { position: fixed; pointer-events: none; z-index: 100; opacity: 0.95; transform: rotate(-2deg) scale(1.04); cursor: grabbing; }
.tile.placed { cursor: default; box-shadow: none; border-color: var(--good); background: var(--good-bg); font-size: 0.9rem; padding: 8px 12px; }
.tile.shake { animation: shake 0.4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.bin {
  font: inherit; display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-height: 160px; padding: 12px;
  border-radius: 18px; border: 3px solid var(--ink); background: var(--paper); cursor: pointer; text-align: left;
}
.bin .bin-name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; text-align: center; padding: 8px; border-radius: 12px; background: var(--sky); }
.bin.hover, .bin.ready-target { background: #f4f1ff; border-color: var(--violet); }
.bin .placed-list { display: flex; flex-wrap: wrap; gap: 6px; }
.feedback { min-height: 64px; margin: 16px 0 0; padding: 14px 18px; border-radius: 16px; font-weight: 600; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.feedback:empty { padding: 0; min-height: 64px; }
.feedback.good { background: var(--good-bg); color: var(--good); }
.feedback.try { background: var(--try-bg); color: var(--try); }
.feedback.explain { background: var(--sky); color: var(--ink); }

/* Results */
.results { text-align: center; padding: 20px 0; }
.big-stars { font-size: 4rem; letter-spacing: 8px; color: var(--sun); line-height: 1; margin: 10px 0; }
.big-stars .off { color: var(--line); }
.results .score { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; }
.results .btn-row { justify-content: center; margin-top: 18px; }

@media (max-width: 760px) {
  h1 { font-size: calc(1.9rem * var(--text-scale)); }
  .hero { grid-template-columns: 1fr; padding-top: 24px; }
  .mascot { max-width: 220px; order: -1; }
  .subjects, .parent-grid, .levels { grid-template-columns: 1fr; }
  .subject { min-height: 110px; padding: 20px; }
  .subject .big { font-size: 2rem; }
  .subject svg { width: 60px; height: 60px; }
  .demo { grid-template-columns: 1fr; }
  .demo .arrow { transform: rotate(90deg); justify-self: center; }
  .game { padding: 16px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition: none !important; }

/* ===== Place-value colours (same everywhere on the site) ===== */
:root { --pv-th: #6b5be6; --pv-h: #2f7fd8; --pv-t: #0fa99b; --pv-u: #e8590c; }

/* ===== Maths helpers ===== */
.helpers { border: 3px solid var(--violet); border-radius: 20px; padding: 16px; margin: 16px 0; background: #f7f5ff; }
.helpers[hidden] { display: none; }
.helpers-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; }
.helper-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.helper-tabs button { font: inherit; font-size: 0.9rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.helper-tabs button[aria-selected="true"] { background: var(--violet); color: #fff; border-color: var(--violet); }
.helper-btn { border-color: var(--violet); color: var(--violet); }
.helper-label { font-weight: 600; margin: 0 0 8px; }
#pv-input { font: inherit; font-size: 1.4rem; font-weight: 700; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 12px; width: 9ch; margin-bottom: 12px; letter-spacing: 0.08em; }
.pv-chart { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pv-col { display: flex; flex-direction: column; align-items: center; min-width: 64px; border-radius: 12px; overflow: hidden; border: 3px solid var(--ink); background: var(--paper); }
.pv-head { width: 100%; text-align: center; color: #fff; font-weight: 700; padding: 4px; background: var(--muted); }
.pv-digit { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.pv-th .pv-head { background: var(--pv-th); } .pv-th .pv-digit { color: var(--pv-th); }
.pv-h .pv-head { background: var(--pv-h); } .pv-h .pv-digit { color: var(--pv-h); }
.pv-t .pv-head { background: var(--pv-t); } .pv-t .pv-digit { color: var(--pv-t); }
.pv-u .pv-head { background: var(--pv-u); } .pv-u .pv-digit { color: var(--pv-u); }
.pv-dot { min-width: 24px; border: 0; background: transparent; } .pv-dot .pv-head { background: transparent; color: transparent; }
.pv-words { font-weight: 600; font-size: 1.1rem; }
.hundred { display: grid; grid-template-columns: repeat(10, minmax(28px, 1fr)); gap: 3px; max-width: 520px; margin-bottom: 10px; }
.hs { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 6px 0; border: 2px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.hs[aria-pressed="true"] { background: var(--sun); border-color: var(--ink); }
.tgrid { display: grid; grid-template-columns: repeat(11, minmax(26px, 1fr)); gap: 3px; max-width: 560px; }
.tg { font: inherit; font-size: 0.8rem; text-align: center; padding: 6px 0; border-radius: 6px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.tg.head { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; cursor: default; }
.tg.lit { background: #e7e3ff; } .tg.hit { background: var(--sun); border-color: var(--ink); font-weight: 800; }
.fwall { display: flex; flex-direction: column; gap: 4px; max-width: 620px; }
.frow { display: flex; gap: 4px; }
.fcell { flex: 1; font: inherit; font-size: 0.75rem; font-weight: 700; padding: 8px 0; border-radius: 6px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; min-width: 0; overflow: hidden; }
.fcell.on { background: var(--maths); color: #fff; }
.fcell.d1 { background: var(--ink); color: #fff; }
.mini-line { display: flex; gap: 4px; min-width: 640px; }
.ml { flex: 1; font: inherit; font-weight: 700; padding: 10px 0; border: 0; border-bottom: 4px solid var(--ink); background: transparent; cursor: pointer; color: var(--ink); }
.ml.on { background: var(--sun); border-radius: 8px 8px 0 0; }

/* ===== Number Line template ===== */
.nl-prompt { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 4px; font-weight: 600; }
.nl-target { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; padding: 8px 26px; border-radius: 18px; border: 3px solid var(--ink); background: var(--sun); color: var(--ink); cursor: pointer; line-height: 1.1; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; }
.frac span:first-child { border-bottom: 4px solid currentColor; padding: 0 6px 4px; }
.frac span:last-child { padding-top: 4px; }
.nl-wrap { touch-action: none; cursor: pointer; border-radius: 16px; background: var(--sky); padding: 4px 0; margin: 10px 0; }
.nl-svg { width: 100%; height: auto; display: block; }
.nl-axis { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.nl-tick { stroke: var(--ink); stroke-width: 3; }
.nl-tick.major { stroke-width: 5; }
.nl-lab { font-family: var(--font-body); font-size: 26px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.nl-lab.soft { fill: var(--muted); font-weight: 400; font-size: 20px; }
.nl-pointer path { fill: var(--violet); }
.nl-pointer line { stroke: var(--violet); stroke-width: 5; }
.nl-flag line { stroke-width: 3; stroke-dasharray: 4 4; }
.nl-flag text { font-family: var(--font-body); font-size: 22px; font-weight: 700; text-anchor: middle; }
.nl-flag.ok line { stroke: var(--good); } .nl-flag.ok text { fill: var(--good); }
.nl-flag.help line { stroke: var(--try); } .nl-flag.help text { fill: var(--try); }
.nl-controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.nl-controls .btn.small { min-width: 64px; font-size: 1.1rem; }
.nl-ex { min-width: 0; }
html.maths-friendly .nl-lab { font-size: 30px; }
html.maths-friendly .pv-digit { letter-spacing: 0.06em; }
@media (max-width: 760px) {
  .nl-axis { stroke-width: 12; }
  .nl-tick { stroke-width: 6; } .nl-tick.major { stroke-width: 9; }
  .nl-lab { font-size: 58px; transform: translateY(20px); } .nl-lab.soft { font-size: 44px; }
  .nl-svg { overflow: visible; } .nl-wrap { padding: 22px 0 18px; }
  .nl-flag text { font-size: 48px; }
  .nl-pointer path, .nl-pointer line { transform: scaleX(2.2); }
  .nl-pointer line { stroke-width: 5; }
  .nl-target { font-size: 2.1rem; }
}
@media (max-width: 760px) {
  .site-header { position: static; }
  .site-header .wrap { min-height: 60px; gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .nav { margin-left: 0; gap: 2px; }
  .nav a, .nav button { padding: 8px 10px; font-size: 0.9rem; }
}

/* ===== Match Pairs ===== */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 10px 0; }
.mcard { font: inherit; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; min-height: 96px; padding: 10px; border-radius: 16px; border: 3px solid var(--ink); background: var(--violet); color: #fff; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mcard.up { background: var(--paper); color: var(--ink); }
.mcard .back { font-size: 2rem; opacity: 0.9; }
.mcard.selected { outline: 4px solid var(--sun); outline-offset: 2px; transform: translateY(-3px); }
.mcard.matched { background: var(--good-bg); border-color: var(--good); color: var(--good); box-shadow: none; cursor: default; }
.mcard.shake { animation: shake 0.4s; }
.mcard .fbar { width: 100%; max-width: 150px; height: auto; }
.mcard .frac span:first-child { border-bottom-width: 3px; }
.demo .mcard { min-height: 70px; cursor: default; }

/* ===== Fill the Gap ===== */
.gap-line { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; text-align: center; padding: 18px 12px; margin: 10px 0 14px; background: var(--sky); border-radius: 18px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.gap-line.small { font-size: 1.15rem; padding: 10px; margin: 0; }
.gap { display: inline-block; min-width: 3.2em; padding: 0 10px; border-bottom: 5px solid var(--violet); color: var(--violet); text-align: center; line-height: 1.3; }
.gap.ok { color: #157a41; border-color: var(--good); }
.gap.no { color: var(--try); border-color: var(--try); text-decoration: line-through; }
.gap.help { color: var(--try); border-color: var(--try); }
.gap-tiles .tile { font-size: 1.35rem; min-width: 84px; text-align: center; }
.gap-tiles .tile:disabled { opacity: 0.4; cursor: default; }
.gap-pic { display: flex; justify-content: center; }
.gap-pic:empty { display: none; }
.balance { width: 100%; max-width: 440px; height: auto; }
.bal-t { font-family: var(--font-display); font-size: 22px; font-weight: 800; fill: var(--ink); }
.balance .beam { transition: transform 0.6s ease; }

/* ===== Build It ===== */
.bb-rule { text-align: center; font-weight: 700; color: var(--try); min-height: 1.4em; margin: 4px 0; }
.bb-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 10px 0; }
.bb-col { border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.bb-head { color: #fff; font-weight: 700; text-align: center; padding: 6px; }
.pv-th.bb-col .bb-head, .bb-mini-col.pv-th { background: var(--pv-th); } .pv-h.bb-col .bb-head { background: var(--pv-h); } .pv-t.bb-col .bb-head { background: var(--pv-t); } .pv-u.bb-col .bb-head { background: var(--pv-u); }
.bb-pile { flex: 1; min-height: 120px; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 3px; padding: 8px; }
.pv-th .bb-pile, .pv-th.bb-mini-col { color: var(--pv-th); } .pv-h .bb-pile, .pv-h.bb-mini-col { color: var(--pv-h); } .pv-t .bb-pile, .pv-t.bb-mini-col { color: var(--pv-t); } .pv-u .bb-pile, .pv-u.bb-mini-col { color: var(--pv-u); }
.bb-i { display: inline-flex; } .bb-i svg { display: block; }
.bb-Th svg { width: 34px; height: 34px; } .bb-H svg { width: 30px; height: 30px; } .bb-T svg { width: 9px; height: 34px; } .bb-U svg { width: 11px; height: 11px; }
.bb-count { text-align: center; font-family: var(--font-display); font-size: 2rem; font-weight: 800; }
.bb-btns { display: flex; gap: 8px; justify-content: center; padding: 0 8px 10px; }
.bb-btns .btn { min-width: 56px; font-size: 1.4rem; }
.bb-total { text-align: center; font-weight: 700; font-size: 1.2rem; min-height: 1.4em; }
.bb-mini { display: flex; gap: 12px; align-items: flex-end; justify-content: center; }
.bb-mini-col { display: flex; gap: 3px; align-items: flex-end; background: transparent !important; }
.bb-pile .bb-i:nth-child(10n) { margin-right: 10px; }
.bb-pile .bb-i:nth-child(5n):not(:nth-child(10n)) { margin-right: 4px; }

/* ===== WhatsApp sharing ===== */
.btn.wa { background: #e7f8ee; border-color: #128c4a; color: #0d6b38; }
.btn.wa svg { width: 22px; height: 22px; flex: none; }
.share-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 2px dashed var(--line); }
.share-row.center { justify-content: center; }

/* ===== Clock Lab ===== */
.clk-prompt { text-align: center; font-size: 1.3rem; font-weight: 600; margin: 8px auto 4px; max-width: 46ch; }
.clk-time { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; background: var(--sun); border: 3px solid var(--ink); border-radius: 14px; padding: 2px 14px; margin: 4px; }
.clk-face { display: flex; justify-content: center; margin: 8px 0; }
.clock { max-width: 80vw; height: auto; }
.clk-n { font-family: var(--font-body); font-size: 17px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.clk-controls { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.clk-group { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 16px; border: 3px solid var(--line); }
.clk-group span { font-weight: 700; font-size: 0.95rem; }
.clk-group.hour span { color: #e8590c; } .clk-group.minute span { color: #2f7fd8; }
.clk-group .btn { min-width: 64px; font-size: 1.15rem; }

/* ===== Shop (euro coins and notes) ===== */
.money-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.money-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; min-height: 92px; padding: 12px; border-radius: 18px; border: 3px dashed var(--ink); background: var(--sky); margin-bottom: 6px; }
.purse { padding: 12px; border-radius: 18px; background: #fbf7ee; margin: 8px 0 14px; }
.cash { font: inherit; font-weight: 800; cursor: pointer; border: 3px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); color: var(--ink); }
.cash.static { cursor: default; }
.coin { border-radius: 50%; width: 62px; height: 62px; font-size: 0.95rem; background: radial-gradient(circle at 35% 30%, #fff3c4, #e0b44c); }
.coin.c5, .coin.c10, .coin.c20, .coin.c50 { width: 54px; height: 54px; }
.coin.c5 { background: radial-gradient(circle at 35% 30%, #ffd9c2, #c9784a); width: 46px; height: 46px; font-size: 0.85rem; }
.coin.c100, .coin.c200 { background: radial-gradient(circle at 50% 50%, #f5d76e 0 45%, #cfd4dc 46%); }
.coin.c200 { background: radial-gradient(circle at 50% 50%, #cfd4dc 0 45%, #f5d76e 46%); width: 68px; height: 68px; }
.note { border-radius: 8px; width: 104px; height: 58px; font-size: 1.1rem; }
.note.n500 { background: #dfe3e8; } .note.n1000 { background: #f6c9c2; } .note.n2000 { background: #c9d8f5; }
.cash:active { transform: translateY(2px); box-shadow: none; }

/* ===================== COLOUR BOOST (30 Oct) ===================== */
:root { --c-number: #ff6b4a; --c-algebra: #6b5be6; --c-shape: #0fa99b; --c-measures: #f4a300; --c-data: #2f7fd8;
        --c-reading: #0fa99b; --c-writing: #e0457b; --c-oral: #6b5be6; --pink: #e0457b; }
html.calm { --c-number: #d9826e; --c-algebra: #7d78b8; --c-shape: #4f9e96; --c-measures: #d2a24c; --c-data: #6b8fc0; --c-reading: #4f9e96; --c-writing: #c07a92; --c-oral: #7d78b8; }
body { background: radial-gradient(circle at 8% 4%, #fff1c9 0 180px, transparent 181px), radial-gradient(circle at 96% 30%, #ffe0d6 0 140px, transparent 141px), radial-gradient(circle at 4% 70%, #dff6f2 0 160px, transparent 161px), radial-gradient(circle at 94% 92%, #ece8ff 0 170px, transparent 171px), var(--sky); background-attachment: fixed; }
html.calm body { background: var(--sky); }
.site-header { border-bottom: 0; box-shadow: 0 4px 0 var(--sun); }

/* hero banner */
.hero { background: linear-gradient(120deg, #fff4cc 0%, #ffe3d9 55%, #e4f7f3 100%); border: 3px solid var(--ink); border-radius: 32px; padding: 36px 36px; margin-top: 24px; box-shadow: 0 6px 0 var(--ink); position: relative; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 120px; height: 120px; background: var(--sun); opacity: .35; right: 34%; top: -40px; }
.hero::after { width: 70px; height: 70px; background: var(--english); opacity: .25; left: 46%; bottom: -24px; }
.hero h1 { color: var(--ink); }
.hero .badges li { background: #fff; border-color: var(--ink); }
.hero .badges li:nth-child(1) { background: #ffe1d8; } .hero .badges li:nth-child(2) { background: #e0f5f1; } .hero .badges li:nth-child(3) { background: #ece8ff; } .hero .badges li:nth-child(4) { background: #fff1c9; }

/* section headings with a colour underline */
section > h2, .section-title h2 { display: inline-block; background: linear-gradient(transparent 62%, #ffd96a 62%); padding: 0 4px; }

/* class picker: each class its own colour */
.class-btn { --k: #c9cfe6; }
.class-btn.k0 { --k: #ff8fa3; } .class-btn.k1 { --k: #ffb15c; } .class-btn.k2 { --k: #ffd84d; } .class-btn.k3 { --k: #8fd96b; }
.class-btn.k4 { --k: #4fd1c5; } .class-btn.k5 { --k: #6b5be6; } .class-btn.k6 { --k: #4f9cf0; } .class-btn.k7 { --k: #c77dff; }
.class-btn[aria-disabled="true"] { background: color-mix(in srgb, var(--k) 14%, white); border-color: var(--k); border-style: dashed; color: var(--ink); opacity: .85; }
.class-btn.active { background: var(--k); color: #fff; border-color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.class-btn.active .num, .class-btn.active .tag { color: #fff; }

/* game cards tinted by area */
.card { --a: var(--maths); background: color-mix(in srgb, var(--a) 9%, white); border-color: color-mix(in srgb, var(--a) 45%, white); }
.card.ready { border-color: var(--ink); background: color-mix(in srgb, var(--a) 14%, white); }
.card .stripe { background: var(--a) !important; height: 12px; }
.card.ready .pill { background: var(--a); color: #fff; }
.card.st-number { --a: var(--c-number); } .card.st-algebra { --a: var(--c-algebra); } .card.st-shape { --a: var(--c-shape); }
.card.st-measures { --a: var(--c-measures); } .card.st-data { --a: var(--c-data); }
.card.st-reading { --a: var(--c-reading); } .card.st-writing { --a: var(--c-writing); } .card.st-oral { --a: var(--c-oral); }
.card.ready:hover { box-shadow: 0 7px 0 var(--ink); }

/* strand panels: each area its own colour */
.strand { --a: var(--maths); border-color: var(--a); background: color-mix(in srgb, var(--a) 7%, white); }
.strand h2 .dot { background: var(--a) !important; }
.strand .topic { background: #fff; border: 2px solid color-mix(in srgb, var(--a) 40%, white); }
.strand .topic:hover { outline: 3px solid var(--a); }
.strand .topic .count.has { background: var(--a); color: #fff; }
.strand.st-number { --a: var(--c-number); } .strand.st-algebra { --a: var(--c-algebra); } .strand.st-shape { --a: var(--c-shape); }
.strand.st-measures { --a: var(--c-measures); } .strand.st-data { --a: var(--c-data); }
.strand.st-reading { --a: var(--c-reading); } .strand.st-writing { --a: var(--c-writing); } .strand.st-oral { --a: var(--c-oral); }

/* parent info boxes */
.parent-grid .info:nth-child(1) { background: #fff6d6; border-color: #f4c430; }
.parent-grid .info:nth-child(2) { background: #e2f6f2; border-color: var(--english); }
.parent-grid .info:nth-child(3) { background: #ffe7df; border-color: var(--maths); }

/* inside the games */
.game { background: linear-gradient(180deg, color-mix(in srgb, var(--maths) 12%, white) 0, #fff 150px); }
.game.english { background: linear-gradient(180deg, color-mix(in srgb, var(--english) 14%, white) 0, #fff 150px); }
.level-btn:nth-child(1) { background: #e6f7e0; } .level-btn:nth-child(2) { background: #fff1c9; } .level-btn:nth-child(3) { background: #ffe1d8; }
.teach .t:nth-child(4n+1) { border-color: var(--maths); background: #fff4f0; } .teach .t:nth-child(4n+2) { border-color: var(--english); background: #eefaf7; }
.teach .t:nth-child(4n+3) { border-color: var(--violet); background: #f3f1ff; } .teach .t:nth-child(4n+4) { border-color: #f4a300; background: #fff8e6; }
.tile { background: #fff; }
.tray { background: color-mix(in srgb, var(--sun) 18%, white); }
.bin:nth-child(4n+1) .bin-name { background: #ffe1d8; } .bin:nth-child(4n+2) .bin-name { background: #e0f5f1; }
.bin:nth-child(4n+3) .bin-name { background: #ece8ff; } .bin:nth-child(4n+4) .bin-name { background: #fff1c9; }
.site-footer { background: var(--ink); color: #c9cfe6; border-top: 0; }
.site-footer strong { color: #fff; }
h1[tabindex="-1"]:focus { outline: none; }
/* readable labels: dark text on light tint (high contrast) */
.card.ready .pill { background: #fff; color: var(--ink); border: 2px solid var(--a); }
.strand .topic .count.has { background: color-mix(in srgb, var(--a) 22%, white); color: var(--ink); border: 2px solid var(--a); }
.class-btn.active { background: #5a4bd6; }
/* contrast fixes: dark text on bright colours, darker small text */
.subject { color: var(--ink); }
.subject svg rect { fill: rgba(255,255,255,.45); } .subject svg path, .subject svg circle { stroke: var(--ink); }
.card .meta { color: #3a4064; }
a, .nav a[aria-current="page"] { color: #4637c4; }
.section-title a { color: #4637c4; }

/* ===== Shape Studio ===== */
.ss-stage { display: flex; flex-direction: column; align-items: center; margin: 10px 0; }
.angle-svg { width: 100%; max-width: 420px; height: auto; background: #fff; border: 3px solid var(--line); border-radius: 18px; }
.ss-mini svg { width: 100%; max-width: 200px; height: auto; }
.sgrid { display: grid; gap: 3px; width: 100%; max-width: 440px; background: var(--ink); padding: 3px; border-radius: 12px; }
.sgrid.mini { max-width: 150px; }
.scell { aspect-ratio: 1; border: 0; border-radius: 4px; background: #fff; cursor: pointer; padding: 0; min-width: 0; }
.scell:hover { background: #f1eeff; }
.scell.on { background: var(--c-shape); }
.scell.locked { background: var(--violet); cursor: default; }
.scell.mv { box-shadow: -4px 0 0 0 var(--maths); }
.scell.mh { box-shadow: 0 -4px 0 0 var(--maths); }
.sgrid.mini .scell { cursor: default; }

/* ===== Graph It ===== */
.gtitle { text-align: center; margin: 6px 0; }
.gdata { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin: 6px 0 10px; font-size: 1.05rem; }
.gdata table.progress { width: auto; }
.gdata .tally, .gdata .tally5 { font-family: var(--font-display); font-weight: 800; letter-spacing: 3px; }
.tally5 { text-decoration: line-through; text-decoration-thickness: 3px; }
.gchart { display: flex; justify-content: center; }
.chart { width: 100%; max-width: 560px; height: auto; background: #fff; border: 3px solid var(--line); border-radius: 18px; }
.chart .gx { font-family: var(--font-body); font-size: 15px; fill: var(--ink); text-anchor: end; font-variant-numeric: tabular-nums; }
.chart .gl { font-family: var(--font-body); font-size: 15px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.gcontrols { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0; }
.gctl { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border: 3px solid var(--line); border-radius: 14px; background: #fff; font-weight: 700; }
.gctl .btn { min-width: 48px; }
.gap-tiles:empty, .clk-prompt:empty { display: none; }

/* ---------- GRID QUEST (Treasure Map) ---------- */
.gq-wrap { display: flex; justify-content: center; margin: 14px 0; }
.gq { display: grid; gap: 4px; width: min(100%, 440px); background: #e6f7f4; border: 3px solid var(--ink); border-radius: 18px; padding: 10px 12px 6px 6px; }
.gq-lab { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; justify-content: center; min-width: 26px; }
.gq-cell { aspect-ratio: 1; min-height: 40px; border: 2px solid #8ab8b2; border-radius: 8px; background: #ffffff; padding: 3px; cursor: pointer; display: grid; place-items: center; position: relative; }
.gq-cell svg { width: 88%; height: 88%; grid-area: 1/1; }
.gq-cell:hover:not([disabled]) { background: #fff3c4; }
.gq-cell:focus-visible { outline: 4px solid var(--focus, #4637c4); outline-offset: 2px; }
.gq-cell[disabled] { cursor: default; }
.gq-cell.picked { background: var(--sun); border-color: var(--ink); border-width: 3px; }
.gq-cell.start { background: repeating-linear-gradient(45deg, #ffffff 0 6px, #ffe1d6 6px 12px); }
.gq-wrap.mini .gq { width: 200px; padding: 6px; }
.gq-wrap.mini .gq-cell { min-height: 26px; }
.gq-wrap.mini .gq-lab { font-size: .9rem; min-width: 18px; }
.gq-compass { display: grid; grid-template-columns: repeat(3, auto); grid-template-areas: ". n ." "w r e" ". s ."; gap: 6px; justify-content: center; align-items: center; margin: 6px 0 10px; }
.gq-compass:empty { display: none; }
.gq-compass .n { grid-area: n; } .gq-compass .w { grid-area: w; } .gq-compass .e { grid-area: e; } .gq-compass .s { grid-area: s; }
.gq-compass .btn { min-width: 76px; }
.gq-rose { grid-area: r; font-size: 1.8rem; color: var(--c-shape); text-align: center; }
@media (max-width: 480px) { .gq-cell { min-height: 0; } .gq-lab { font-size: 1rem; min-width: 20px; } }

/* ---------- STORY QUEST (reading comprehension) ---------- */
.sq-layout { display: grid; gap: 18px; margin-top: 14px; }
@media (min-width: 900px) { .sq-layout { grid-template-columns: 1.15fr 1fr; align-items: start; } .sq-side { position: sticky; top: 96px; } }
.sq-story { background: #ffffff; border: 3px solid var(--ink); border-radius: 18px; padding: 18px 22px; box-shadow: var(--shadow); max-width: 68ch; }
.sq-story p { font-size: 1.12rem; line-height: 1.75; margin: 0 0 12px; letter-spacing: .01em; word-spacing: .06em; }
.sq-story mark, .feedback mark, .sq-mini mark { background: #ffe27a; color: var(--ink); padding: 1px 3px; border-radius: 4px; box-shadow: 0 0 0 2px #f4a300 inset; }
.sq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sq-head h2 { margin: 2px 0 0; font-size: 1.45rem; }
.sq-kind { display: inline-block; font-size: .85rem; font-weight: 700; background: #e3f6f2; color: #0b5d55; border-radius: 999px; padding: 3px 12px; }
.sq-q { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 16px 18px; }
.sq-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sq-skill { font-weight: 800; font-size: .9rem; border-radius: 999px; padding: 4px 12px; border: 2px solid var(--ink); color: var(--ink); }
.sk-find { background: #cfe6ff; } .sk-think { background: #ffd9cc; } .sk-word { background: #ffd6e6; } .sk-big { background: #d9f3c9; } .sk-next { background: #e5dcff; }
.sq-qline { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; margin: 12px 0; }
.sq-question { font-size: 1.25rem; font-weight: 700; margin: 0; line-height: 1.45; }
.sq-opts { display: grid; gap: 10px; }
.sq-opt { display: flex; gap: 12px; align-items: center; text-align: left; font: inherit; font-size: 1.05rem; line-height: 1.4; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 14px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.sq-opt:hover:not(:disabled) { background: #fff3c4; }
.sq-opt:focus-visible { outline: 4px solid #4637c4; outline-offset: 2px; }
.sq-opt:disabled { opacity: .45; cursor: default; box-shadow: none; }
.sq-opt.ok, .sq-opt.help { background: var(--good-bg); border-color: var(--good); opacity: 1; }
.sq-opt.no { background: #fde8e4; }
.sq-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 800; }
.sq-side .feedback { margin-top: 12px; }
.sq-demo .sq-mini { max-width: 260px; margin: 0; line-height: 1.6; }
@media (max-width: 480px) { .sq-story { padding: 14px; } .sq-story p { font-size: 1.05rem; } .sq-question { font-size: 1.12rem; } }

/* ---------- PUT IN ORDER (Sentence Builder, Story Order, Writer's Toolkit) ---------- */
.po-prompt { font-size: 1.3rem; }
.po-answer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-height: 80px; padding: 14px; margin: 12px 0; border: 3px dashed #8ab8b2; border-radius: 18px; background: #ffffff; }
.po-answer.lines, .po-tray.lines { flex-direction: column; align-items: stretch; }
.po-tray.lines { justify-content: flex-start; }
.po-tile { font: inherit; font-size: 1.2rem; display: inline-flex; gap: 10px; align-items: center; cursor: pointer; }
.lines .po-tile { font-size: 1.05rem; text-align: left; line-height: 1.4; width: 100%; justify-content: flex-start; }
.po-answer .po-tile { background: #fff; }
.po-answer .po-tile.ok, .po-answer .po-tile.help { background: var(--good-bg); border-color: var(--good); opacity: 1; cursor: default; }
.po-answer .po-tile:disabled { opacity: 1; }
.po-empty { color: #3a4064; font-style: italic; padding: 6px; }
.po-demo { display: flex; flex-wrap: wrap; gap: 6px; max-width: 300px; }
.po-demo.lines { flex-direction: column; }
.po-demo .tile { font-size: .95rem; padding: 6px 10px; }
@media (max-width: 480px) { .po-tile { font-size: 1.08rem; } .lines .po-tile { font-size: 1rem; } }
/* Proofreader: mistake sentence above, corrected sentence below */
.pf-bad { display: block; width: fit-content; margin: 0 auto 10px; font-size: .8em; color: #8a2a1a; background: #fde8e4; border: 2px dashed #d9826f; border-radius: 12px; padding: 4px 14px; }
.pf-good { display: block; }

/* ---------- WORD BUILDER (Spell Builder, Word Factory) ---------- */
.wb-prompt { font-size: 1.35rem; }
.wb-word { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; min-height: 84px; margin: 12px auto; padding: 12px 16px; max-width: 520px; border: 3px dashed #8ab8b2; border-radius: 18px; background: #ffffff; font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--ink); letter-spacing: .02em; }
.wb-chunk { font: inherit; color: inherit; background: #e9e4ff; border: 2px solid #6b5be6; border-radius: 10px; padding: 0 8px; cursor: pointer; }
.wb-chunk:disabled { cursor: default; }
.wb-word.ok, .wb-word.help { border-style: solid; border-color: var(--good); background: var(--good-bg); }
.wb-word.ok .wb-chunk, .wb-word.help .wb-chunk { background: #fff; border-color: var(--good); color: #157a41; }
.wb-word.no { border-color: #d9826f; background: #fde8e4; }
.demo .wb-word { font-size: 1.6rem; min-height: 0; padding: 6px 14px; margin: 0; }
.wb-tile { font-size: 1.4rem; min-width: 64px; text-align: center; font-weight: 700; }
.wb-tile.used { opacity: .35; }
@media (max-width: 480px) { .wb-word { font-size: 1.8rem; } .wb-tile { font-size: 1.25rem; min-width: 56px; } }

/* ---------- GAEILGE (preview) ---------- */
:root { --gaeilge: #138a5c; }
.card.gaeilge .stripe { background: var(--gaeilge); }
.gaeilge-page .strand h2 .dot { background: var(--gaeilge); }
.game.gaeilge { background: linear-gradient(180deg, color-mix(in srgb, var(--gaeilge) 14%, white) 0, #fff 150px); }
.preview-note { background: #fff3c4; border: 2px dashed #f4a300; border-radius: 14px; padding: 10px 14px; color: var(--ink); }

/* ---------- PROBLEM SOLVER ---------- */
.ps-layout { display: grid; gap: 18px; margin-top: 14px; }
@media (min-width: 900px) { .ps-layout { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.ps-story { background: #ffffff; border: 3px solid var(--ink); border-radius: 18px; padding: 16px 20px; box-shadow: var(--shadow); }
.ps-story h2 { margin: 0; font-size: 1.2rem; }
.ps-text { font-size: 1.2rem; line-height: 1.75; margin: 8px 0 0; }
.ps-num { background: #ffe27a; border-radius: 6px; padding: 0 5px; box-shadow: 0 0 0 2px #f4a300 inset; font-variant-numeric: tabular-nums; }
.ps-work { margin-top: 14px; background: #f1f4ff; border: 2px dashed #8d97d6; border-radius: 16px; padding: 12px 18px; }
.ps-work h3 { margin: 0 0 4px; font-size: 1rem; color: #3a4064; }
.ps-work-list { margin: 0; padding-left: 1.4em; font-size: 1.1rem; line-height: 1.7; font-variant-numeric: tabular-nums; }
.ps-work-list:empty::before { content: "Your steps will appear here."; color: #3a4064; font-style: italic; margin-left: -1.4em; }
.ps-demo .ps-work-list { font-size: .95rem; }

/* ---------- MONEY SMART ---------- */
:root { --money: #f4b400; }
html.calm { --money: #e0b75a; }
.subjects:has(.subject.money) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .subjects:has(.subject.money) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .subjects:has(.subject.money) { grid-template-columns: 1fr; } }
.subject.money { background: var(--money); }
.card.money .stripe { background: var(--money); }
.money-page .strand h2 .dot { background: var(--money); }
.game.money { background: linear-gradient(180deg, color-mix(in srgb, var(--money) 18%, white) 0, #fff 150px); }

/* Money Jars */
.mj-income { text-align: center; font-size: 1.15rem; margin: 6px 0 2px; }
.mj-left { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; background: var(--sun); border: 3px solid var(--ink); border-radius: 14px; padding: 2px 14px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.mj-left.zero { background: var(--good-bg); border-color: var(--good); }
.mj-left.over { background: #fde8e4; border-color: #d9826f; }
.mj-jars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0; }
.mj-jar { border: 3px solid var(--ink); border-radius: 18px 18px 28px 28px; padding: 10px 8px 12px; text-align: center; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mj-jar.spend { background: #ffe7df; } .mj-jar.save { background: #dff1ff; } .mj-jar.share { background: #e7f8e9; }
.mj-jar h3 { margin: 0; font-size: 1.15rem; }
.mj-jar .mj-sub { font-size: .85rem; color: #3a4064; margin-top: -6px; }
.mj-amt { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.mj-coins { display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 3px; min-height: 64px; max-width: 150px; align-content: flex-start; }
.mj-coin { width: 18px; height: 18px; border-radius: 50%; background: #f4c542; border: 2px solid #8a6a00; }
.mj-coin.half { width: 13px; height: 13px; background: #e0a96d; border-color: #7a4a1a; }
.mj-btns { display: flex; gap: 8px; }
.mj-btns .btn { min-width: 52px; font-size: 1.3rem; padding: 4px 10px; }
.mj-rules { margin: 4px auto 0; max-width: 640px; padding-left: 1.3em; font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 600px) { .mj-jars { gap: 6px; } .mj-jar { padding: 8px 4px; } .mj-amt { font-size: 1.4rem; } .mj-btns .btn { min-width: 40px; padding: 4px 6px; } .mj-jar h3 { font-size: 1rem; } }

/* ---------- LISTEN & DO ---------- */
.ld-play { font-size: 1.15rem; }
.ld-words { text-align: center; font-size: 1.35rem; font-weight: 700; margin: 10px auto; max-width: 640px; background: #f1f4ff; border-radius: 14px; padding: 10px 16px; }
.ld-say { font-weight: 700; max-width: 220px; }
.ld-scene { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin: 14px 0; }
.ld-scene.fixed { grid-template-columns: repeat(5, 1fr); }
.ld-shape { position: relative; background: #fff; border: 3px solid #c9cfe6; border-radius: 16px; padding: 8px 4px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; color: var(--ink); }
.ld-shape svg { width: 60px; height: 60px; }
.ld-shape:hover { border-color: var(--ink); background: #ffffff; }
.ld-shape:focus-visible { outline: 4px solid #4637c4; outline-offset: 2px; }
.ld-shape.picked { border-color: var(--good); background: var(--good-bg); }
.ld-shape.help { border-color: var(--good); background: var(--good-bg); box-shadow: 0 0 0 4px #9fdcb7; }
.ld-lab { font-size: .82rem; color: #3a4064; line-height: 1.2; text-align: center; }
.ld-num { position: absolute; top: 4px; right: 6px; background: var(--good); color: #fff; font-weight: 800; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font-size: .85rem; }
@media (max-width: 600px) { .ld-scene { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; } .ld-scene.fixed { gap: 5px; } .ld-shape svg { width: 44px; height: 44px; } .ld-lab { font-size: .72rem; } .ld-shape { padding: 6px 2px 4px; } }

/* ---------- WORD GRID (Word Hunt) ---------- */
.wg-layout { display: grid; gap: 18px; margin-top: 12px; align-items: start; }
@media (min-width: 800px) { .wg-layout { grid-template-columns: auto 1fr; } }
.wg-grid { display: grid; gap: 4px; width: min(100%, 470px); margin: 0 auto; background: #e6f7f4; border: 3px solid var(--ink); border-radius: 16px; padding: 8px; }
.wg-cell { aspect-ratio: 1; font: inherit; font-family: var(--font-display); font-size: clamp(1.1rem, 4.5vw, 1.7rem); font-weight: 700; text-transform: lowercase; background: #ffffff; border: 2px solid #8ab8b2; border-radius: 8px; color: var(--ink); cursor: pointer; padding: 0; display: grid; place-items: center; }
.wg-cell:hover { background: #fff3c4; }
.wg-cell:focus-visible { outline: 4px solid #4637c4; outline-offset: 1px; }
.wg-cell.start { background: var(--sun); border-color: var(--ink); border-width: 3px; }
.wg-cell.found { background: #c9f0d7; border-color: var(--good); }
.wg-cell.hint { animation: wgflash 1s infinite; }
html.no-motion .wg-cell.hint, html.calm .wg-cell.hint { animation: none; background: #ffd9cc; border-color: #d9826f; border-width: 3px; }
@keyframes wgflash { 50% { background: #ffd9cc; border-color: #d9826f; } }
.wg-h { margin: 0 0 8px; }
.wg-list { display: flex; flex-wrap: wrap; gap: 10px; }
.wg-word { font: inherit; font-size: 1.2rem; font-weight: 700; padding: 8px 14px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.wg-word.found { background: var(--good-bg); border-color: var(--good); color: #157a41; }
.wg-mini { display: flex; gap: 3px; }
.wg-mini .wg-cell { width: 30px; font-size: 1.1rem; cursor: default; }

/* ---------- PARENT GUIDE: What children learn ---------- */
.lg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.lg-tabs .class-btn { min-height: 0; padding: 8px 14px; }
.lg-tabs .class-btn .num { font-size: 1rem; }
.lg-tabs .class-btn.current { outline: 4px solid var(--ink); outline-offset: 2px; transform: translateY(-2px); }
.lg-stage { margin: 0 0 16px; }
.lg-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .lg-grid { grid-template-columns: 1fr; } }
.lg-col { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 14px 18px; border-top-width: 10px; }
.lg-col.maths { border-top-color: var(--maths); } .lg-col.english { border-top-color: var(--english); } .lg-col.irish { border-top-color: var(--gaeilge, #138a5c); }
.lg-col h2 { margin: 0; }
.lg-sub { margin: 2px 0 8px; font-size: .85rem; color: #3a4064; }
.lg-col ul, .lg-tips ul, .lg-notes { padding-left: 1.2em; margin: 0; line-height: 1.55; }
.lg-col li { margin-bottom: 6px; }
.lg-tips { margin-top: 18px; background: #fff3c4; border-radius: 18px; padding: 14px 20px; }
.lg-tips h2 { margin-top: 0; }
.lg-notes li { margin-bottom: 8px; }
.lg-promo { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); background: #e9e4ff; border: 3px solid var(--ink); border-radius: 18px; padding: 14px 18px; margin: 14px 0; box-shadow: 0 4px 0 var(--ink); }
.lg-promo strong { font-family: var(--font-display); font-size: 1.25rem; }
.lg-promo:hover { transform: translateY(-2px); }
.lg-grid > .lg-col { margin: 0; } .lg-tips { margin-bottom: 0; }

/* ---------- MORE SUBJECTS (Science, Geography, History, Spanish) ---------- */
:root { --science: #6bb8f5; --geography: #5cc98a; --history: #c3a6f7; --spanish: #ff9f80; }
html.calm { --science: #8fbfe3; --geography: #86c4a0; --history: #c4b3e6; --spanish: #e8ab97; }
.subjects { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
.subject.science { background: var(--science); } .subject.geography { background: var(--geography); } .subject.history { background: var(--history); } .subject.spanish { background: var(--spanish); }
.card.science .stripe { background: var(--science); } .card.geography .stripe { background: var(--geography); } .card.history .stripe { background: var(--history); } .card.spanish .stripe { background: var(--spanish); }
.science-page .strand h2 .dot { background: var(--science); } .geography-page .strand h2 .dot { background: var(--geography); } .history-page .strand h2 .dot { background: var(--history); } .spanish-page .strand h2 .dot { background: var(--spanish); }
.game.science { background: linear-gradient(180deg, color-mix(in srgb, var(--science) 18%, white) 0, #fff 150px); }
.game.geography { background: linear-gradient(180deg, color-mix(in srgb, var(--geography) 18%, white) 0, #fff 150px); }
.game.history { background: linear-gradient(180deg, color-mix(in srgb, var(--history) 18%, white) 0, #fff 150px); }
.game.spanish { background: linear-gradient(180deg, color-mix(in srgb, var(--spanish) 18%, white) 0, #fff 150px); }
@media (max-width: 700px) { .subjects { grid-template-columns: 1fr !important; } }

/* ---------- FUN LAYER: Lion buddy + stickers ---------- */
.game.has-buddy { position: relative; padding-bottom: 96px; }
.buddy { position: absolute; right: 14px; bottom: 10px; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; z-index: 5; }
.buddy-lion { width: 78px; height: 74px; }
.buddy-lion svg { width: 100%; height: 100%; }
.buddy-bubble { background: #fff; border: 3px solid var(--ink); border-radius: 16px 16px 4px 16px; padding: 6px 12px; font-weight: 700; font-size: 1rem; max-width: 220px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; margin-bottom: 40px; }
.buddy-bubble.show { opacity: 1; transform: none; }
.buddy.happy .buddy-lion { animation: buddyHop .6s ease; }
.buddy.think .buddy-lion { animation: buddyTilt .8s ease; }
.buddy.party .buddy-lion { animation: buddyParty 1.2s ease 2; }
@keyframes buddyHop { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-18px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
@keyframes buddyTilt { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 70% { transform: rotate(8deg); } }
@keyframes buddyParty { 0%,100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.15) rotate(-10deg); } 50% { transform: scale(1) rotate(10deg); } 75% { transform: scale(1.1) rotate(-5deg); } }
html.no-motion .buddy-lion { animation: none !important; }
html.no-motion .buddy-bubble { transition: none; }
@media (max-width: 600px) { .game.has-buddy { padding-bottom: 84px; } .buddy-lion { width: 60px; height: 58px; } .buddy-bubble { font-size: .9rem; margin-bottom: 30px; max-width: 180px; } }
.sticker-win { display: flex; align-items: center; gap: 16px; justify-content: center; text-align: left; background: #fff3c4; border: 3px solid var(--ink); border-radius: 18px; padding: 12px 18px; margin: 16px auto 4px; max-width: 460px; }
.sticker-big { font-size: 3.4rem; line-height: 1; animation: stickerPop .7s cubic-bezier(.2,1.6,.4,1); }
html.no-motion .sticker-big { animation: none; }
@keyframes stickerPop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
.sticker-hint { margin: 12px auto 0; font-weight: 600; color: #3a4064; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.sticker { border: 3px solid var(--ink); border-radius: 18px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; align-items: center; background: #fff; }
.sticker.got { background: #ffffff; box-shadow: 0 4px 0 var(--ink); }
.sticker.locked { border-style: dashed; border-color: #b8bfd9; color: #5a6185; background: #f4f6fc; }
.sticker-emoji { font-size: 2.6rem; line-height: 1.2; }
.sticker.locked .sticker-emoji { font-family: var(--font-display); font-weight: 800; color: #5a6185; }

/* ---------- SPRAOI MAP + BEAT YOUR BEST ---------- */
.map-wrap { margin: 16px 0 28px; }
.spraoi-map { width: 100%; height: auto; display: block; }
.map-sea { fill: #cfeaf8; stroke: var(--ink); stroke-width: 3; }
html.calm .map-sea { fill: #dcebf2; }
.map-wave { fill: none; stroke: #8fc7e6; stroke-width: 3; stroke-linecap: round; }
.map-island path:first-child { stroke: var(--ink); stroke-width: 3; transition: transform .2s; }
.map-island:hover path:first-child, .map-island:focus path:first-child { stroke-width: 5; }
.map-island:focus { outline: none; }
.map-island:focus-visible path:first-child { stroke: #4637c4; stroke-width: 6; }
.map-name { font-family: var(--font-display); font-weight: 800; font-size: 26px; fill: var(--ink); }
.map-stat { font-size: 17px; fill: #2a3058; font-weight: 600; }
.map-new { font-size: 17px; font-weight: 700; fill: #2a3058; }
.map-flag line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.map-flag path { stroke: var(--ink); stroke-width: 1.5; }
@media (max-width: 600px) { .map-name { font-size: 34px; } .map-stat { font-size: 22px; } .map-new { font-size: 22px; } }
.challenge-toggle { display: flex; gap: 10px; align-items: center; margin: 14px 0 4px; font-weight: 700; cursor: pointer; flex-wrap: wrap; }
.challenge-toggle input { width: 22px; height: 22px; accent-color: #6b5be6; }
.stopwatch { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-variant-numeric: tabular-nums; }
.time-line { font-weight: 700; font-size: 1.1rem; margin: 12px auto 0; background: #e9e4ff; border-radius: 12px; padding: 8px 14px; display: inline-block; }
@media (max-width: 600px) { .map-name { font-size: 30px; } .map-stat { font-size: 20px; } .map-new { font-size: 20px; }
  .sticker-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .sticker { padding: 8px 4px; font-size: .9rem; } .sticker-emoji { font-size: 2rem; } }

/* ---------- ORAL LANGUAGE: listen-first stories + Talk Time ---------- */
.sq-listen { background: #f1f4ff; border-radius: 14px; padding: 14px 16px; }
.sq-listen p { margin: 0 0 10px; font-size: 1.05rem; }
.tc-card { background: #ffffff; border: 3px solid var(--ink); border-radius: 20px; padding: 16px 20px; box-shadow: var(--shadow); max-width: 720px; margin: 10px auto; }
.tc-card.mini { max-width: 240px; padding: 10px 12px; margin: 0; }
.tc-card.mini p { margin: 6px 0 0; font-weight: 700; }
.tc-type { font-weight: 800; font-size: .9rem; border-radius: 999px; padding: 4px 12px; border: 2px solid var(--ink); background: #ffd9cc; color: var(--ink); }
.tc-text { font-size: 1.35rem; font-weight: 700; line-height: 1.45; margin: 12px 0; }
.tc-help { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; max-width: 720px; margin: 10px auto; }
@media (max-width: 640px) { .tc-help { grid-template-columns: 1fr; } }
.tc-help > div { background: #fff; border: 2px solid #c9cfe6; border-radius: 14px; padding: 10px 14px; }
.tc-help h3 { margin: 0 0 6px; font-size: 1.05rem; }
.tc-help ul { margin: 0; padding-left: 1.2em; line-height: 1.6; }
.tc-words { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-words .tile { font-size: .95rem; padding: 6px 10px; }
.tc-tip { max-width: 720px; margin: 8px auto; font-weight: 600; }
.tc-say { font-weight: 700; max-width: 260px; margin: 0; }
.tc-clock { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; color: #3a4064; }
.tc-clock.on { color: var(--ink); background: #fff3c4; border-radius: 999px; padding: 2px 10px; }

/* ---------- Picture cards for games ---------- */
.card.money { --a: var(--money); } .card.science { --a: var(--science); } .card.geography { --a: var(--geography); } .card.history { --a: var(--history); } .card.spanish { --a: var(--spanish); } .card.gaeilge { --a: var(--gaeilge); }
.card .thumb { position: relative; height: 104px; margin: -2px -2px 4px; border-radius: 14px; border: 2px solid var(--ink); display: grid; place-items: center; overflow: hidden;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--a) 70%, white) 0 18px, color-mix(in srgb, var(--a) 55%, white) 18px 36px); }
.card.soon .thumb { border-style: dashed; border-color: color-mix(in srgb, var(--a) 60%, #1d2242); filter: saturate(.6); }
.card .thumb::before { content: ""; position: absolute; width: 84px; height: 84px; border-radius: 50%; background: #ffffff; border: 2px solid var(--ink); }
.card .thumb-icon { position: relative; font-size: 3rem; line-height: 1; }
.card .thumb-tag { position: absolute; left: 8px; bottom: 6px; font-size: .72rem; font-weight: 700; background: #fff; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 1px 8px; }
.card.ready:hover .thumb-icon { animation: buddyHop .6s ease; }
html.no-motion .card.ready:hover .thumb-icon { animation: none; }
html.calm .card .thumb { background: color-mix(in srgb, var(--a) 35%, white); }

/* ---------- Bolder, gender-neutral card colours (no pastel tints) ---------- */
:root { --c-writing: #2f7fd8; }
.card, .card.ready { background: #ffffff; }
.card .thumb { background: repeating-linear-gradient(135deg, var(--a) 0 18px, color-mix(in srgb, var(--a) 82%, #1d2242) 18px 36px); }
html.calm .card .thumb { background: color-mix(in srgb, var(--a) 70%, white); }
.card.ready .pill { background: #fff; color: #1d2242; border: 2.5px solid var(--a); }
html.calm { --c-writing: #6b8fc0; }
.card.soon { background: #fbfbf8; }

/* ---------- BRAIN GAMES ---------- */
:root { --brain: #a3d65c; } html.calm { --brain: #b6d38f; }
.subject.brain { background: var(--brain); } .card.brain { --a: var(--brain); } .brain-page .strand h2 .dot { background: var(--brain); }
.game.brain { background: linear-gradient(180deg, color-mix(in srgb, var(--brain) 20%, white) 0, #fff 150px); }
.ls-board { display: grid; grid-template-columns: repeat(2, minmax(110px, 170px)); gap: 16px; justify-content: center; margin: 16px 0; }
.ls-pad { position: relative; aspect-ratio: 1; border: 4px solid #1d2242; border-radius: 24px; background: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .12s, background .12s; }
.ls-pad svg { width: 62%; height: 62%; }
.ls-num { position: absolute; top: 8px; left: 12px; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; }
.ls-pad.lit { background: #fff3c4; transform: scale(1.06); box-shadow: 0 0 0 6px #ffc533; }
html.no-motion .ls-pad.lit { transform: none; }
.ls-board.watching .ls-pad { cursor: default; }
.ls-mini { display: flex; gap: 6px; } .ls-mini-pad { position: relative; width: 52px; height: 52px; border: 2px solid #1d2242; border-radius: 10px; display: grid; place-items: center; background: #fff; } .ls-mini-pad svg { width: 70%; } .ls-mini-pad b { position: absolute; top: 0; left: 4px; font-size: .8rem; }
.wm-timer { height: 10px; background: #e3e8f2; border-radius: 999px; overflow: hidden; max-width: 420px; margin: 0 auto 10px; } .wm-timer span { display: block; height: 100%; background: #6b5be6; width: 100%; }
.wm-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 460px; margin: 10px auto; background: #f4eadb; border: 3px solid #1d2242; border-radius: 20px; padding: 14px; }
.wm-tray.mini { max-width: 200px; gap: 4px; padding: 6px; }
.wm-item { aspect-ratio: 1; display: grid; place-items: center; font-size: 2.6rem; background: #fff; border-radius: 14px; border: 2px solid #c9cfe6; }
.wm-tray.mini .wm-item { font-size: 1.3rem; border-radius: 8px; }
.wm-item.gone { background: #fff3c4; border: 3px dashed #1d2242; font-family: var(--font-display); font-weight: 800; color: #1d2242; }
.wm-item.covered { background: #6b5be6; border-color: #1d2242; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px); }
.wm-item.found { background: var(--good-bg); border-color: var(--good); }
.wm-tray.blink { opacity: .2; transition: opacity .2s; } html.no-motion .wm-tray.blink { transition: none; }
.wm-opts .tile { font-size: 2.4rem; min-width: 84px; }
.ff-grid { display: grid; gap: 6px; max-width: 460px; margin: 12px auto; }
.ff-grid.mini { max-width: 180px; gap: 3px; }
.ff-cell { aspect-ratio: 1; font-size: clamp(1.4rem, 6vw, 2.2rem); background: #fff; border: 2px solid #c9cfe6; border-radius: 12px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.ff-grid.mini .ff-cell { font-size: 1.1rem; border-radius: 6px; }
@media (hover: hover) { .ff-cell:hover:not(:disabled) { border-color: #6b5be6; } }
.ff-cell.found { background: var(--good-bg); border-color: var(--good); border-width: 3px; }
.ff-left { font-size: 1rem; color: #3a4064; font-weight: 600; }
.qw-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.qw-badge { display: inline-flex; gap: 6px; align-items: center; border: 2px dashed #b8bfd9; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .9rem; color: #5a6185; background: #fff; }
.qw-badge.got { border: 2.5px solid #1d2242; background: color-mix(in srgb, var(--b) 35%, white); color: #1d2242; }
.qw-layout { display: grid; gap: 18px; margin-top: 10px; }
@media (min-width: 860px) { .qw-layout { grid-template-columns: 300px 1fr; align-items: start; } }
.qw-left { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qw-wheel { width: 260px; max-width: 80vw; } .qw-wheel.mini { width: 140px; }
.qw-svg { width: 100%; height: auto; display: block; }
.qw-pointer { font-size: 2rem; line-height: 1; color: #1d2242; margin-bottom: -10px; z-index: 2; }
.qw-spin { font-size: 1.15rem; }
.qw-cat { font-weight: 800; font-size: .9rem; border-radius: 999px; padding: 4px 12px; border: 2px solid #1d2242; background: color-mix(in srgb, var(--b) 40%, white); color: #1d2242; }
.qw-hint { font-weight: 700; font-size: 1.1rem; margin: 0; }
.ff-cell:disabled { opacity: 1; color: inherit; cursor: default; }

/* ---------- HEALTH & WELLBEING ---------- */
:root { --wellbeing: #4fc1b0; } html.calm { --wellbeing: #8cc5bc; }
.subject.wellbeing { background: var(--wellbeing); } .card.wellbeing { --a: var(--wellbeing); } .wellbeing-page .strand h2 .dot { background: var(--wellbeing); }
.game.wellbeing { background: linear-gradient(180deg, color-mix(in srgb, var(--wellbeing) 20%, white) 0, #fff 150px); }
.cb-stage { text-align: center; }
.cb-wrap { position: relative; width: 280px; height: 280px; margin: 20px auto; display: grid; place-items: center; }
.cb-circle { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c8f1e8, #4fc1b0); border: 4px solid #1d2242; transform: scale(1); }
.cb-circle.mini { position: static; width: 70px; height: 70px; }
.cb-label { position: relative; z-index: 1; text-align: center; }
.cb-word { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: #1d2242; }
.cb-count { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: #1d2242; }
.cb-step { max-width: 560px; margin: 16px auto; background: #ffffff; border: 3px solid #1d2242; border-radius: 22px; padding: 20px; }
.cb-step p { font-size: 1.2rem; line-height: 1.6; }
.cb-big { font-size: 3.4rem; }
.cb-moods { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.cb-mood { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 1.05rem; min-width: 110px; }
.cb-mood-e { font-size: 2.4rem; }

/* ---------- DOODLE STYLE (original illustrations: bold outlines, bright flat colours, cream paper) ---------- */
body { background: #ffffff; }
html.calm body { background: var(--sky); }
.doodle-margins { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.doodle-margins .dm { position: absolute; width: 56px; height: 56px; opacity: .95; }
@media (max-width: 1320px) { .doodle-margins { display: none; } }
html.calm .doodle-margins { display: none; }
header, main, footer, .settings { position: relative; z-index: 1; }
.hero { background: #ffffff; background-image: radial-gradient(#ffe7b8 1.5px, transparent 1.6px); background-size: 22px 22px; }
.hero::before, .hero::after { display: none; }
.hero-art { display: flex; justify-content: center; }
.hero-scene { width: 100%; max-width: 520px; height: auto; }
@media (max-width: 760px) { .hero-scene { max-width: 400px; } }
@media (min-width: 761px) { .hero { grid-template-columns: 1.15fr 1fr; } }
.mascot.hero-art { max-width: 520px; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .mascot.hero-art { max-width: 360px; order: 0; } }

/* ===== Word Wizard (daily spelling puzzle) ===== */
.ww-head { text-align: center; margin-bottom: .6rem; }
.ww-tag { display: inline-block; background: var(--sun); color: var(--ink); font-weight: 700; border-radius: 999px; padding: .2rem .8rem; font-size: .9rem; }
.ww-clue { font-size: 1.15rem; margin: .5rem 0 0; }
.ww-board { display: grid; gap: .35rem; justify-content: center; margin: .6rem 0 1rem; }
.ww-row { display: flex; gap: .35rem; justify-content: center; }
.ww-tile { position: relative; width: 3rem; height: 3rem; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 10px; background: #fff;
  font: 700 1.5rem var(--font-display); text-transform: uppercase; color: var(--ink); }
.ww-row.current .ww-tile { border-color: #9aa3c9; }
.ww-tile.typed { border-color: var(--ink); }
.ww-tile i { position: absolute; top: 1px; right: 4px; font-style: normal; font-size: .7rem; line-height: 1; }
.ww-tile.ok { background: #2fb36a; border-color: #2fb36a; }
.ww-tile.near { background: var(--sun); border-color: #e0a800; }
.ww-tile.no { background: #c9cede; border-color: #c9cede; }
.ww-kb { display: grid; gap: .35rem; margin: 0 auto .8rem; max-width: 34rem; }
.ww-kb-row { display: flex; gap: .3rem; justify-content: center; }
.ww-key { flex: 1 1 0; min-width: 0; max-width: 2.8rem; height: 3rem; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  font: 700 1.1rem var(--font-body); text-transform: uppercase; cursor: pointer; padding: 0; }
.ww-key.wide { max-width: 4.6rem; flex-grow: 1.6; font-size: .95rem; text-transform: none; }
.ww-key.enter { background: var(--violet); color: #fff; border-color: var(--violet); }
.ww-key.ok { background: #2fb36a; border-color: #2fb36a; }
.ww-key.near { background: var(--sun); border-color: #e0a800; }
.ww-key.no { background: #c9cede; border-color: #c9cede; color: #3d4466; }
.ww-key:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
@media (max-width: 420px) { .ww-tile { width: 2.6rem; height: 2.6rem; font-size: 1.25rem; } .ww-key { height: 2.7rem; font-size: 1rem; } .ww-kb-row { gap: .2rem; } }

/* ===== Map Hunt (hot and cold) ===== */
.mh-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 760px) { .mh-layout { grid-template-columns: 1fr; } }
.mh-map { background: #eaf6ff; border: 2px solid var(--line); border-radius: 14px; padding: .5rem; min-height: 8rem; }
.mh-svg { width: 100%; height: auto; display: block; }
.mh-c { fill: #ffffff; stroke: #8a93b8; stroke-width: .5; cursor: pointer; }
@media (hover: hover) { .mh-c:hover { fill: #ffe8a3; } }
.mh-c.blank { fill: #e3e6ef; cursor: default; }
.mh-c.guessed { stroke: var(--ink); stroke-width: 1; }
.mh-layout > * { min-width: 0; }
.mh-ie-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: .3rem; max-width: 30rem; margin: 0 auto; }
.mh-tile { aspect-ratio: 1.25; border: 2px solid #8a93b8; border-radius: 8px; background: #ffffff; color: var(--ink); font: 600 .72rem var(--font-body);
  cursor: pointer; padding: 2px; overflow-wrap: normal; line-height: 1.1; }
.mh-tile.long { font-size: .62rem; letter-spacing: -.02em; }
@media (hover: hover) { .mh-tile:hover { background: #ffe8a3; } }
.mh-tile.guessed { background: var(--h); border-color: var(--ink); }
.mh-tile.found { outline: 3px solid var(--ink); outline-offset: 1px; font-weight: 800; }
.mh-tile:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
@media (max-width: 420px) { .mh-tile { font-size: .56rem; } .mh-tile.long { font-size: .5rem; } }
.mh-form { display: flex; gap: .4rem; margin-bottom: .6rem; }
.mh-input { flex: 1; min-width: 0; font: 1rem var(--font-body); padding: .55rem .7rem; border: 2px solid var(--line); border-radius: 10px; }
.mh-log { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; max-height: 22rem; overflow: auto; }
.mh-entry { display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; padding: .45rem .6rem; border-radius: 10px; background: #fff; border-left: 10px solid var(--h); border: 2px solid var(--line); border-left-width: 10px; border-left-color: var(--h); }
.mh-entry span:last-child { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; }
.mh-heat { font-weight: 700; }
.mh-hint { display: inline-block; margin-top: .3rem; background: var(--try-bg); color: var(--try); border-radius: 8px; padding: .15rem .5rem; font-weight: 600; }
.mh-legend { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.mh-chip { background: var(--h); color: var(--ink); border-radius: 999px; padding: .25rem .7rem; font-weight: 700; }
.mh-credit { font-size: .8rem; text-align: right; }

/* County Hunt on phones: a bigger map you can swipe */
.mh-swipe { display: none; }
@media (max-width: 560px) {
  .mh-map.ie { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .mh-map.ie .mh-ie-grid { width: 540px; max-width: none; gap: .35rem; }
  .mh-map.ie .mh-tile { font-size: .8rem; }
  .mh-map.ie .mh-tile.long { font-size: .72rem; }
  .mh-swipe { display: block; position: sticky; left: 0; margin: .4rem 0 0; font-size: .85rem; color: var(--muted); text-align: center; width: calc(100vw - 6rem); }
}

/* ===== Home page doorways (Twinkl-style picture doors, our own doodle art) ===== */
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .doors { gap: 10px; } }
.door { position: relative; display: flex; flex-direction: column; border: 4px solid var(--d); border-radius: 18px; background: #fff; overflow: hidden;
  text-decoration: none; color: var(--ink); box-shadow: 0 5px 0 color-mix(in srgb, var(--d) 55%, #1d2242); transition: transform .15s; }
a.door:hover { transform: translateY(-3px); }
a.door:focus-visible { outline: 4px solid var(--violet); outline-offset: 3px; }
.door-pic { display: block; background: color-mix(in srgb, var(--d) 22%, #fff); }
.door-art { display: block; width: 100%; height: auto; }
.door-label { display: block; background: var(--d); font: 800 1.15rem/1.15 var(--font-display); padding: 10px 12px 4px; }
.door-tag { display: block; background: var(--d); font-size: .78rem; font-weight: 600; padding: 0 12px 10px; }
.door.soon { box-shadow: none; border-style: dashed; }
.door.soon .door-pic { filter: grayscale(.55); opacity: .75; }
.door.soon .door-label, .door.soon .door-tag { background: #fff; color: #4a5070; }
html.calm .door { box-shadow: none; }
@media (max-width: 560px) { .door-label { font-size: 1rem; } .door-tag { font-size: .72rem; } }

/* Gaelscoileanna and Extra support pages */
.page-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: center; }
.page-hero-art svg { width: 100%; max-width: 280px; display: block; margin: 0 auto; }
@media (max-width: 700px) { .page-hero { grid-template-columns: 1fr; } .page-hero-art svg { max-width: 200px; } }
.feature-list { padding-left: 1.2rem; display: grid; gap: .6rem; max-width: 46rem; }
.support-opts { display: grid; gap: 10px; max-width: 46rem; margin: 12px 0 20px; }
.support-opt { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 3px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; }
.support-opt input { width: 26px; height: 26px; flex: none; margin-top: 2px; accent-color: var(--violet); }
.support-opt strong { display: block; font-size: 1.05rem; }
.support-opt .curric { display: block; margin-top: 2px; }

/* "Béarla" English help for parents in Irish games */
.en-help { background: #fff; border: 3px solid var(--gaeilge, #138a5c); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; }
.en-help h2 { font-size: 1.05rem; margin: 0 0 6px; }
.en-help p { margin: 4px 0; }
.en-glossary { columns: 2 16rem; margin: 6px 0 0; padding-left: 1.1rem; }
.en-glossary span[lang="ga"] { font-weight: 700; }

/* Seasonal games (Christmas and winter) */
:root { --seasonal: #3fb6c9; } html.calm { --seasonal: #85bfc8; }
.card.seasonal { --a: var(--seasonal); } .seasonal-page .strand h2 .dot { background: var(--seasonal); }
.game.seasonal { background: linear-gradient(180deg, color-mix(in srgb, var(--seasonal) 20%, white) 0, #fff 150px); }

/* Gaeilge subject button */
:root { --gaeilge-btn: #34b77d; } html.calm { --gaeilge-btn: #7fbf9f; }
.subject.gaeilge { background: var(--gaeilge-btn); }

/* Email sign-up box */
.signup { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px 28px; align-items: center; background: #fff; border: 4px solid var(--sun); border-radius: 22px; padding: 24px 26px; box-shadow: 0 5px 0 #e0a800; }
.signup h2 { margin: 0 0 6px; font-size: 1.35rem; }
.signup .su-text p { margin: 0; color: var(--muted); }
.su-form { display: flex; gap: 8px; flex-wrap: wrap; }
.su-input { flex: 1 1 200px; min-width: 0; font: 1rem var(--font-body); padding: .7rem .8rem; border: 2px solid var(--line); border-radius: 12px; }
.su-input:focus-visible { outline: 3px solid var(--violet); outline-offset: 1px; }
.su-msg { margin: 6px 0 0; font-weight: 600; } .su-msg.err { color: #b42318; } .su-msg:empty { display: none; }
.su-small { margin: 8px 0 0; font-size: .82rem; color: var(--muted); }
.su-done { background: var(--good-bg); color: #145c33; border-radius: 12px; padding: 12px 14px; }
.signup.compact { margin: 18px 0; }
@media (max-width: 760px) { .signup { grid-template-columns: 1fr; padding: 20px; } }
html.calm .signup { box-shadow: none; }
.site-footer a { color: #fff; }
.privacy section { max-width: 46rem; } .privacy ul { padding-left: 1.2rem; display: grid; gap: .4rem; }
/* Simpler home page */
.hero-simple { padding-bottom: 8px; }
.hero-simple h1 { margin-bottom: 8px; }
@media (min-width: 761px) { .hero-simple .hero-art svg { max-height: 300px; } }
.door-tag { flex: 1 1 auto; }
@media (max-width: 760px) { .hero-simple .hero-art svg { max-width: 210px; margin: 0 auto; display: block; } .hero-simple { padding-top: 16px; } }
/* Home: class buttons in the same style as the subject buttons */
.home-title { margin: 28px 0 18px; }
.door-btn.soon { cursor: default; box-shadow: none; border-style: dashed; }
.door-btn.soon:hover { transform: none; }
.door-btn .sub { font-weight: 600; }
.page-hero { grid-template-columns: 1fr; }
.class-buttons .big { font-size: 1.85rem; overflow-wrap: anywhere; hyphens: auto; }
.class-buttons .subject > div { min-width: 0; }
@media (max-width: 700px) { .class-buttons .big { font-size: 1.6rem; } }
.class-buttons .big { overflow-wrap: normal; hyphens: manual; font-size: 1.75rem; }
.class-buttons .subject svg { width: 64px; height: 64px; }
.class-buttons .subject { gap: 16px; padding-left: 22px; padding-right: 18px; }
.subjects.class-buttons { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important; }
@media (max-width: 700px) { .subjects.class-buttons { grid-template-columns: 1fr !important; } }
/* Strand buttons and strand pages */
.strand-buttons .sub { font-size: .92rem; }
.strand-buttons .sub.count { margin-top: 8px; font-weight: 700; font-size: .95rem; }
.topic-group { margin-top: 26px; } .topic-group h2 { margin-bottom: 4px; }

/* Crossword */
.cw-cluebar { background: #eef1ff; border: 2px solid #c9cfe6; border-radius: 14px; padding: .6rem .9rem; margin: .4rem auto .7rem; max-width: 40rem; font-weight: 700; min-height: 2.8rem; text-align: center; }
.cw-layout { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; align-items: flex-start; margin-bottom: .8rem; }
.cw-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 2.6rem)); grid-template-rows: repeat(var(--rows), auto); gap: 3px; max-width: 100%; }
.cw-cell { position: relative; aspect-ratio: 1; border: 2px solid #1d2242; border-radius: 6px; background: #fff; color: var(--ink); font: 800 clamp(.9rem, 4vw, 1.35rem) var(--font-display); text-transform: uppercase; display: grid; place-items: center; padding: 0; cursor: pointer; }
.cw-cell i { position: absolute; top: 1px; left: 3px; font: 700 .62rem var(--font-body); font-style: normal; color: #3a4060; }
.cw-cell b { font-weight: 800; }
.cw-block { aspect-ratio: 1; }
.cw-cell.cur { background: #fff3c4; }
.cw-cell.sel { background: #ffd84d; outline: 3px solid #1d2242; outline-offset: -1px; }
.cw-cell.ok { background: var(--good-bg); border-color: var(--good); }
.cw-cell:focus-visible { outline: 3px solid #6b5be6; }
.cw-lists { display: grid; gap: .8rem; min-width: 15rem; max-width: 24rem; flex: 1 1 15rem; }
.cw-list h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.cw-clue { display: block; width: 100%; text-align: left; background: #fff; border: 2px solid #e3e8f2; border-radius: 10px; padding: .4rem .6rem; margin-bottom: .3rem; font: 600 .98rem var(--font-body); color: var(--ink); cursor: pointer; }
.cw-clue.on { border-color: #1d2242; background: #fff3c4; }
.cw-clue.done { background: var(--good-bg); border-color: var(--good); text-decoration: line-through; text-decoration-thickness: 2px; }
.cw-mini { display: flex; gap: 3px; justify-content: center; margin: .5rem 0; }
.cw-mini .cw-cell { width: 2.2rem; cursor: default; }
@media (max-width: 600px) { .cw-lists { max-width: 100%; } }
.cw-list ol { list-style: none; padding: 0; margin: 0; }
.ww-key.cw-check { max-width: 16rem; flex: 0 1 16rem; font-size: 1.05rem; }
/* Chance Lab */
.cl-top { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: center; margin: .4rem 0 .8rem; }
.cl-top > div:last-child { flex: 1 1 260px; max-width: 30rem; }
.cl-device { display: grid; place-items: center; min-width: 200px; }
.cl-wheel { transform-origin: 100px 100px; transform-box: view-box; }
.cl-face { width: 130px; height: 130px; display: grid; place-items: center; font: 800 4rem var(--font-display); background: #fff; color: #1d2242; border: 4px solid #1d2242; border-radius: 22px; box-shadow: 0 6px 0 #1d2242; }
.cl-face.coin { border-radius: 50%; background: #ffd84d; }
.cl-face.pop { animation: clpop .25s ease-out; } html.no-motion .cl-face.pop { animation: none; }
@keyframes clpop { 0% { transform: scale(.8) rotate(-12deg); } 100% { transform: none; } }
.cl-desc { color: #3a4064; margin: 0 0 .4rem; }
.cl-q { font-size: 1.15rem; margin: .3rem 0 .6rem; }
.tile.ok { background: var(--good-bg); border-color: var(--good); }
.cl-lab { background: #f6f8ff; border: 2px solid #c9cfe6; border-radius: 18px; padding: .9rem 1rem; margin: .4rem auto .8rem; max-width: 40rem; }
.cl-lab h3 { margin: 0 0 .5rem; text-align: center; }
.cl-btns { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: .4rem 0; }
.cl-count { text-align: center; font-weight: 700; margin: .3rem 0 .6rem; }
.cl-chart { display: grid; gap: .45rem; }
.cl-row { display: grid; grid-template-columns: 6.5rem 1fr 2.2rem; gap: .5rem; align-items: center; }
.cl-lbl { font-weight: 700; text-align: right; }
.cl-track { height: 1.6rem; background: #fff; border: 2px solid #1d2242; border-radius: 8px; overflow: hidden; }
.cl-fill { display: block; height: 100%; width: 0; transition: width .2s; border-right: 2px solid #1d2242; }
html.no-motion .cl-fill { transition: none; }
.cl-row b { font-size: 1.15rem; }
.cl-after { margin-top: .8rem; text-align: center; }
.cl-demo svg { margin: 0 auto; display: block; }
/* Bubble Pop */
.qp-field { position: relative; height: 360px; max-width: 640px; margin: .4rem auto .8rem; background: linear-gradient(#eaf6ff, #ffffff); border: 3px solid #1d2242; border-radius: 22px; overflow: hidden; }
.qp-b { position: absolute; bottom: -90px; width: 78px; height: 78px; border-radius: 50%; border: 3px solid #1d2242; background: radial-gradient(circle at 24% 18%, #fff 0 7%, var(--tint, #8fd3ff) 8%); color: #1d2242; font: 800 1.25rem var(--font-display); display: grid; place-items: center; padding: 0 4px; cursor: pointer; animation: qprise 12s linear infinite; line-height: 1.05; }
.qp-b:hover { filter: brightness(1.05); outline: 3px solid #6b5be6; }
@keyframes qprise { 0% { transform: translateY(0); } 100% { transform: translateY(-470px); } }
.qp-b.popped { animation-play-state: paused; background: var(--good-bg); border-color: var(--good); transform-origin: center; }
.qp-b.popped::after { content: "✓"; position: absolute; top: -6px; right: -4px; background: var(--good); color: #fff; border-radius: 50%; width: 24px; height: 24px; font-size: .9rem; display: grid; place-items: center; }
.qp-b.fade { opacity: .35; animation-play-state: paused; }
.qp-field.still { height: auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 16px; }
.qp-field.still .qp-b { position: static; animation: none; }
.qp-rule { text-align: center; }
.qp-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qp-demo .qp-b { position: static; animation: none; width: 54px; height: 54px; font-size: 1rem; cursor: default; }
.qp-demo .qp-b.qp-good { background: var(--good-bg); border-color: var(--good); }
@media (max-width: 600px) { .qp-b { width: 62px; height: 62px; font-size: 1.05rem; } .qp-field { height: 380px; } }
/* Measure Reader */
.mr-pic { display: flex; justify-content: center; margin: .4rem auto .8rem; max-width: 100%; overflow-x: auto; }
.mr-svg { width: 100%; max-width: 680px; height: auto; }
.mr-svg.mr-round, .mr-svg.mr-jug { max-width: 280px; }
.mr-demo .mr-svg { max-width: 320px; }
/* Dot Shape Maker */
.ds-board { display: flex; justify-content: center; margin: .4rem auto .6rem; }
.ds-svg { width: min(92vw, 360px); height: auto; background: #fff7d6; border: 3px solid #1d2242; border-radius: 18px; touch-action: manipulation; }
.ds-dot { cursor: pointer; outline: none; }
.ds-pin { fill: #1d2242; transition: r .1s; }
.ds-dot:hover .ds-pin, .ds-dot:focus-visible .ds-pin { fill: #6b5be6; r: 10; }
.ds-dot.on .ds-pin { fill: #e8504a; r: 9; }
.ds-dot.first .ds-pin { fill: #6b5be6; r: 11; }
.ds-line { fill: none; stroke: #1d2242; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.ds-shape { fill: #ffd84d; fill-opacity: .8; stroke: #1d2242; stroke-width: 5; stroke-linejoin: round; }
.ds-shape.ok { fill: #b9f0c8; }
/* Highlighter */
.hl-mode { font-size: .95rem; color: #3a4064; }
.hl-box { background: #fff; border: 2px solid #c9cfe6; border-radius: 18px; padding: 1rem 1.2rem; max-width: 44rem; margin: .4rem auto .8rem; }
.hl-title { margin: 0 0 .5rem; }
.hl-text { font-size: 1.12rem; line-height: 2; margin: 0 0 .6rem; }
.hl-u { font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 2px dotted #b9c1dd; padding: 0 2px; margin: 0; border-radius: 4px; cursor: pointer; text-align: left; display: inline; line-height: inherit; }
.hl-u:hover { background: #fff3c4; }
.hl-u:focus-visible { outline: 3px solid #6b5be6; }
.hl-u.on { background: #ffd84d; border-bottom-color: #1d2242; }
.hl-u.ok { background: #b9f0c8; border-bottom-color: var(--good); }
.hl-u.no { background: #ffd6d2; text-decoration: line-through; }
.hl-demo .hl-text { line-height: 1.6; }
/* Story Dice */
.sd-h { text-align: center; margin: .2rem 0 .6rem; }
.sd-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.sd-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sd-die { width: 150px; min-height: 150px; background: #fff; border: 4px solid #1d2242; border-radius: 22px; box-shadow: 0 6px 0 #1d2242; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; text-align: center; }
.sd-die.blank { background: #f6f8ff; }
.sd-die.pop { animation: clpop .3s ease-out; }
.sd-n { font-size: .85rem; font-weight: 700; color: #3a4064; text-transform: uppercase; letter-spacing: .04em; }
.sd-e { font-size: 3rem; line-height: 1.2; }
.sd-w { font-weight: 700; font-size: 1.02rem; }
.sd-demo .sd-die { width: 110px; min-height: 110px; } .sd-demo .sd-e { font-size: 2rem; }
.sd-plan { background: #f6f8ff; border: 2px solid #c9cfe6; border-radius: 18px; padding: .9rem 1rem; max-width: 42rem; margin: .8rem auto; }
.sd-sum { text-align: center; font-size: 1.1rem; }
.sd-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.sd-help h4 { margin: .2rem 0 .3rem; } .sd-help ul { margin: 0; padding-left: 1.2rem; }
.sd-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.sd-words .chip { background: #fff; border: 2px solid #c9cfe6; border-radius: 999px; padding: 2px 10px; font-weight: 600; }
.sd-tip { margin: .6rem 0 .2rem; }
@media (max-width: 600px) { .sd-die { width: 104px; min-height: 120px; } .sd-e { font-size: 2.3rem; } .sd-w { font-size: .9rem; } }
.qp-b.sm { font-size: .92rem; } .qp-b.xs { font-size: .84rem; padding: 0 6px; line-height: 1; }
@media (min-width: 601px) { .qp-b.sm, .qp-b.xs { width: 92px; height: 92px; } }
/* County Picker */
.mh-tile.cp-on { background: #ffd84d; border-color: #1d2242; font-weight: 800; }
.mh-tile.cp-ok { background: #b9f0c8; border-color: var(--good); }
.mh-tile.cp-no { background: #ffd6d2; text-decoration: line-through; }
.mh-tile.cp-no::after { content: " ✗"; }
.cp-mini { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cp-mini .mh-tile { width: 80px; display: grid; place-items: center; }
/* Remember the List */
.rl-box { max-width: 40rem; margin: .4rem auto .8rem; }
.rl-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; background: #fff7d6; border: 3px solid #1d2242; border-radius: 18px; padding: 16px; }
.rl-item { background: #fff; border: 2px solid #c9cfe6; border-radius: 12px; padding: 8px 14px; font-size: 1.25rem; font-weight: 700; }
.rl-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rl-pick { font-size: 1.15rem; }
.tile.rl-no { background: #ffd6d2; text-decoration: line-through; }
/* Listen & Pick */
.lp-word { text-align: center; font: 800 1.6rem var(--font-display); margin: .4rem 0 .6rem; color: #1d2242; }
.lp-play { font-size: 1.2rem; }
.lp-opts .tile { font-size: 1.15rem; min-width: 9rem; }

/* Search */
.search-form { display: flex; gap: 8px; max-width: 640px; margin: 8px 0 20px; }
.search-form.big { margin: 4px 0 24px; }
.search-input { flex: 1; min-width: 0; font: 600 1.1rem var(--font-body); padding: 12px 16px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); }
.search-form.big .search-input { font-size: 1.25rem; padding: 14px 18px; }
.search-input:focus { outline: 3px solid var(--violet); outline-offset: 2px; }
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link { background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 700; color: var(--ink); text-decoration: none; }
.chip-link:hover { background: var(--sky); }
.nav a.nav-search { border: 2px solid var(--line); }
@media (max-width: 480px) { .search-form { flex-direction: column; } }

/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.shop-card { display: flex; flex-direction: column; background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 4px 0 var(--ink); transition: transform .15s; }
.shop-card:hover, .shop-card:focus-visible { transform: translateY(-3px); }
.shop-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-bottom: 3px solid var(--ink); display: block; }
.shop-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.shop-body h3 { margin: 0; font-size: 1.2rem; }
.shop-body p { margin: 0; color: var(--muted); font-size: .95rem; }
.shop-tag { font-size: .8rem; font-weight: 700; color: var(--violet); }
.shop-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 6px; }
.shop-price strong { font-family: var(--font-display); font-size: 1.5rem; }
.shop-price s { color: var(--muted); }
.shop-note { white-space: nowrap; font-size: .8rem; font-weight: 700; background: var(--sun); border-radius: 99px; padding: 2px 10px; }
.shop-btn { align-self: stretch; margin-top: 8px; white-space: nowrap; text-align: center; justify-content: center; }
.shop-more { text-align: center; }
.shop-banner { display: flex; align-items: center; gap: 16px; margin: 26px 0 8px; padding: 12px 18px 12px 12px; background: #fff7dc; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink); text-decoration: none; color: var(--ink); }
.shop-banner:hover { transform: translateY(-2px); }
.shop-banner img { width: 84px; height: 84px; border-radius: 12px; border: 2px solid var(--line); flex: none; background: #fff; }
.shop-banner strong { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.shop-banner span span { display: block; color: var(--muted); font-size: .95rem; }
@media (max-width: 520px) { .shop-banner img { width: 64px; height: 64px; } .shop-banner strong { font-size: 1.05rem; } }

/* =====================================================================
   Card style (Nov 2026): white, bold outlines, one coloured band –
   matches the Spraoi printables and shop covers. Overrides older looks.
   ===================================================================== */
body { background: #fff !important; }
.site-header { box-shadow: none !important; border-bottom: 1px solid #eceef5 !important; }
.nav-search { border: 2px solid #e3e6f0 !important; }
h1 { letter-spacing: -0.02em; }
h1 .acc { color: var(--english); }
h2 { letter-spacing: -0.01em; }
.home-title { font-size: clamp(2rem, 5vw, 2.6rem); }

/* Big buttons (classes, subjects, strands) = white cards with a colour band */
.subjects .subject { background: #fff !important; color: var(--ink) !important; border: 4px solid var(--ink) !important; border-radius: 22px !important;
  box-shadow: none !important; position: relative; overflow: hidden; padding-top: 34px !important; }
.subjects .subject::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: var(--k, var(--english)); border-bottom: 4px solid var(--ink); }
.subjects .subject svg > rect:first-child { fill: var(--k, var(--english)) !important; }
.subjects .subject .big { color: var(--ink) !important; }
.subjects .subject .sub { color: var(--muted) !important; opacity: 1 !important; }
.subjects .subject .sub.count { color: var(--ink) !important; font-weight: 700; }
.subjects .subject:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(29,34,66,.14) !important; }
.subjects .subject.soon { border: 3px dashed #c9cfe2 !important; opacity: .75; cursor: default; }
.subjects .subject.soon::before { background: #e9ecf5; border-bottom: 3px dashed #c9cfe2; }
.subjects .subject.soon:hover { transform: none; box-shadow: none !important; }

/* Game cards in topic lists */
.card { background: #fff !important; box-shadow: none !important; }
.card.ready { border: 3px solid var(--ink) !important; }
.card.ready:hover { box-shadow: 0 10px 24px rgba(29,34,66,.12) !important; }
.card.soon { border: 3px dashed #d5dcf2 !important; }

/* Boxes */
.signup, .shop-banner, .lg-promo, .shop-card { background: #fff !important; border: 3px solid var(--ink) !important; box-shadow: none !important; }
.shop-card img { border-bottom: 3px solid var(--ink) !important; }
.shop-card:hover, .shop-banner:hover, .lg-promo:hover { box-shadow: 0 10px 24px rgba(29,34,66,.12) !important; }
.info { background: #fff !important; border: 3px solid #e3e6f0 !important; box-shadow: none !important; }
.btn { box-shadow: none !important; }
.class-btn { box-shadow: none !important; }

/* The game frame: white with a clean outline (inside the game, outlines stay as they are) */
.game { box-shadow: none !important; }

/* Footer: light and simple */
.site-footer { background: #fff !important; color: var(--ink) !important; border-top: 1px solid #eceef5; }
.site-footer strong, .site-footer b, .site-footer a { color: var(--ink) !important; }

/* Four colour stripes at the end of each page, as on the covers */
.bars4 { display: flex; gap: 10px; margin: 36px 0 8px; }
.bars4 span { flex: 1; height: 12px; border-radius: 8px; }
.bars4 span:nth-child(1) { background: #ff6b4a; } .bars4 span:nth-child(2) { background: #0fa99b; }
.bars4 span:nth-child(3) { background: #ffc533; } .bars4 span:nth-child(4) { background: #6b5be6; }

/* Focus timer (optional, in Easy-read settings) */
.focus-timer { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 168px; background: #fff; border: 4px solid var(--ink); border-radius: 20px; overflow: hidden; font-size: .9rem; box-shadow: 0 10px 28px rgba(29,34,66,.16); }
.focus-timer[hidden] { display: none; }
.ft-band { background: var(--maths); border-bottom: 4px solid var(--ink); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 4px 12px; font-family: var(--font-display); font-weight: 800; }
.ft-x { background: transparent; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.ft-x:focus-visible { outline: 3px solid var(--ink); }
.ft-body { padding: 10px 12px 12px; text-align: center; }
.ft-body[hidden], .ft-done[hidden] { display: none; }
.ft-dial { width: 96px; height: 96px; display: block; margin: 0 auto; }
.ft-face { fill: #fff; stroke: var(--ink); stroke-width: 5; }
.ft-pie { fill: var(--maths); transition: d 1s linear; }
.no-motion .ft-pie { transition: none; }
.ft-pin { fill: var(--ink); }
.ft-left { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin: 6px 0 8px; }
.ft-mins { display: flex; gap: 4px; justify-content: center; margin-bottom: 8px; }
.ft-mins button { font: inherit; font-size: .95rem; font-weight: 800; border: 2px solid #d5dcf2; background: #fff; border-radius: 99px; width: 38px; height: 38px; padding: 0; cursor: pointer; color: var(--ink); }
.ft-mins button[aria-pressed="true"] { border-color: var(--ink); background: var(--sun); }
.ft-go { width: 100%; padding: 8px 10px !important; font-size: .95rem !important; }
.ft-done { padding: 14px 12px; text-align: center; line-height: 1.4; }
.ft-yay { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin-bottom: 4px; }
.ft-row { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 520px) { .focus-timer { right: 8px; bottom: 8px; width: 140px; } .ft-dial { width: 72px; height: 72px; } }
@media print { .focus-timer { display: none !important; } }
.ft-cap { font-size: .75rem; color: var(--muted); margin-bottom: 4px; }

.support-opt .helps { display:block; font-size:.85rem; font-weight:700; color:var(--teal,#0fa99b); margin:2px 0 4px; }
.diff-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin:12px 0 26px; }
.diff { background:#fff; border:4px solid #1d2242; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; }
.diff strong { background:var(--k); color:#fff; padding:8px 14px; border-bottom:4px solid #1d2242; font-size:1.1rem; }
.diff[style*="ffc533"] strong { color:#1d2242; }
.diff span { padding:10px 14px 14px; line-height:1.5; }

.shop-banners { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0 8px; }
.shop-banners .shop-banner { margin:0; }
@media (max-width: 760px) { .shop-banners { grid-template-columns:1fr; } }
.shop-banners + .info { margin-top: 22px; }

.bb-badge { display:inline-block; background:#6b5be6; color:#fff; font-weight:700; font-size:.8rem; padding:4px 10px; border-radius:99px; margin-bottom:6px; }
.shop-bb-note { display:flex; align-items:center; gap:14px; margin:18px 0 6px; padding:14px 18px; border:3px solid var(--ink); border-radius:18px; text-decoration:none; color:var(--ink); background:#fff; max-width:52rem; }
.shop-bb-note .bb-badge { margin:0; flex:none; font-size:.95rem; padding:6px 14px; }
.shop-body .bb-badge { align-self:flex-start; width:auto; }

.diff .diff-plus { padding:0 14px 8px; }
.diff .diff-plus b { color:#1f9d55; }
.diff .diff-who { padding:8px 14px 14px; margin-top:auto; border-top:2px dashed #e3e6f0; font-size:.95rem; }
.diff span:nth-of-type(1) { padding-bottom:8px; }

.teach-tips { margin:0; padding:10px 14px 14px 34px; line-height:1.5; }
.teach-tips li { margin-bottom:6px; }

.ra-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin:10px 0 24px; }
.ra-card { display:flex; flex-direction:column; gap:6px; padding:16px; border:4px solid var(--ink); border-radius:18px; text-decoration:none; color:var(--ink); background:#fff; border-top:12px solid var(--k); }
.ra-card strong { font-family:var(--font-display); font-size:1.25rem; }
.ra-card:hover { transform:translateY(-2px); }
.ra-lvl { display:inline-block; background:var(--k,#6b5be6); color:#fff; font-weight:700; font-size:.8rem; padding:3px 10px; border-radius:99px; align-self:flex-start; }
.ra-snd { color:var(--muted); font-size:.92rem; }
.ra-controls { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:14px 0; }
.ra-opt { display:flex; gap:6px; align-items:center; font-weight:600; }
.chip { border:2px solid var(--ink); background:#fff; border-radius:99px; padding:6px 12px; font:inherit; font-weight:600; cursor:pointer; }
.chip.on { background:var(--ink); color:#fff; }
.ra-swatch { width:30px; height:30px; border-radius:50%; border:3px solid var(--ink); cursor:pointer; padding:0; }
.ra-page { border:4px solid var(--ink); border-radius:22px; padding:28px 32px; max-width:46rem; font-size:1.45rem; line-height:2.1; word-spacing:.18em; letter-spacing:.02em; }
.ra-page.ra-big { font-size:1.9rem; }
.ra-page p { margin:0 0 1.1em; }
.ra-w { cursor:pointer; border-radius:8px; padding:1px 3px; transition:background .15s; }
.ra-w.on { background:#ffc533; box-shadow:0 0 0 3px #ffc533; }
.ra-extra { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; max-width:46rem; margin:22px 0; }
.ra-pr { display:flex; flex-wrap:wrap; gap:8px; padding:12px 14px !important; }
@media (max-width:600px){ .ra-page { padding:18px; font-size:1.25rem; } }

.soon-row { margin-top:30px; }
.soon-title { font-size:1.15rem; color:var(--muted); margin:0 0 10px; }
.soon-buttons .door-btn { opacity:.75; transform:scale(.92); transform-origin:left top; }
.soon-buttons { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important; }

.diff .diff-jobs { padding:0 14px 14px; font-size:.95rem; }
.diff .diff-jobs b { color:#6b5be6; }
.diff .diff-who { margin-top:auto; }

:root { --french: #8fb8ff; --stem: #b8a6ff; } html.calm { --french: #a9c3e6; --stem: #c4b9e6; }
.subject.french { background: var(--french); } .subject.stem { background: var(--stem); }

.nav .share-btn { background: var(--teal, #0fa99b); color: #fff; border-radius: 12px; }
.nav .share-btn:hover { background: #0c8e82; }
.share-pop { position: absolute; right: 16px; top: 64px; z-index: 50; background: #fff; border: 3px solid #1d2242; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 200px; box-shadow: 0 12px 30px rgba(29,34,66,.18); }
.share-pop strong { font-family: "Bricolage Grotesque", Lexend, sans-serif; margin-bottom: 4px; }
.share-pop a, .share-pop button { display: block; text-align: left; padding: 8px 10px; border-radius: 10px; background: #f3f5fb; color: #1d2242; text-decoration: none; font: inherit; border: 0; cursor: pointer; }
.share-pop a:hover, .share-pop button:hover { background: #e3e8f6; }
.site-header .wrap { position: relative; }

/* ---------- Homework Timer ---------- */
.ht { background: var(--paper); border: 3px solid var(--ink); border-radius: 24px; padding: 24px 16px; margin: 18px 0 26px; text-align: center; }
.ht:fullscreen { display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; }
.ht-dial { width: min(78vw, 360px); margin: 0 auto; }
.ht:fullscreen .ht-dial { width: min(70vh, 80vw); }
.ht-dial svg { width: 100%; height: auto; display: block; }
.ht-face { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.ht-tick { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ht-pie { fill: var(--maths); transition: fill .4s; }
.ht-pin { fill: var(--ink); }
.ht-time { font-size: clamp(2.6rem, 9vw, 4.2rem); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 8px; }
.ht-phase { color: var(--muted); font-weight: 700; min-height: 1.5em; }
.ht-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 16px 0; }
.ht-controls .ht-go { min-width: 160px; font-size: 1.15rem; }
.ht-label { font-weight: 800; margin-bottom: 8px; }
.ht-mins { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ht-mins .btn { min-width: 52px; }
.ht-mins [aria-pressed="true"] { background: var(--violet); color: #fff; border-color: var(--violet); }
.ht-break { justify-content: center; margin-top: 14px; }
.ht-done { padding: 30px 10px; }
.ht-yay { font-size: 2rem; font-weight: 800; color: var(--good); }
html.no-motion .ht-pie { transition: none; }

/* ---------- Kids Trivia: question of the day ---------- */
.qotd { background: var(--paper); border: 3px solid var(--ink); border-radius: 24px; padding: 22px 20px; margin: 18px 0 8px; text-align: center; }
.qotd-tag { display: inline-block; background: var(--violet); color: #fff; font-weight: 800; border-radius: 999px; padding: 4px 14px; font-size: .9rem; }
.qotd-q { font-size: clamp(1.25rem, 3.6vw, 1.6rem); font-weight: 800; color: var(--ink); margin: 14px 0; }
.qotd-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 10px; }
.qotd-opts .btn { min-width: 140px; }
.qotd-opts .btn.good { background: var(--good); border-color: var(--good); color: #fff; }
.qotd-opts .btn.try { opacity: .55; }
.qotd-fb { font-weight: 700; min-height: 1.4em; }
.qotd-fb.good { color: var(--good); } .qotd-fb.try { color: var(--try); }

/* Map games: names hidden – shown on hover or tap only, so children type from memory */
.mh-tile.hidename { cursor: default; position: relative; display: grid; place-items: center; }
.mh-tile.hidename:empty:hover::before, .mh-tile.hidename:empty:focus::before { content: attr(data-name); color: var(--muted); font-weight: 700; }
.mh-tile.cp-no::after { content: ""; }
.mh-tile.cp-no { text-decoration: line-through; }
.mh-c { cursor: default; }
.mh-map { position: relative; }
.mh-tip { position: absolute; transform: translate(-50%, -140%); background: var(--ink); color: #fff; font-weight: 700; font-size: .85rem; padding: 3px 9px; border-radius: 8px; pointer-events: none; white-space: nowrap; z-index: 3; }

/* All games: find a game by subject → category */
.gf-panel { background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 16px 20px 18px; margin: 8px 0 18px; box-shadow: var(--shadow); }
.gf-title { font-weight: 800; font-size: 1.2rem; margin: 0 0 10px; }
.gf-row { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: 14px; }
.gf-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.gf-field select { font: inherit; font-weight: 700; font-size: 1.05rem; padding: 12px 40px 12px 14px; border: 3px solid var(--line); border-radius: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%231d2242' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; min-height: 52px; width: 100%; box-sizing: border-box; }
.gf-field select:focus { outline: 4px solid var(--sun); outline-offset: 2px; border-color: var(--ink); }
.gf-field select:disabled { opacity: .55; cursor: not-allowed; }
#gf-subject { border-color: #ff6b4a; }
#gf-cat:not(:disabled) { border-color: #0fa99b; }
.gf-count { font-size: 1.1rem; margin: 6px 0 12px; }
.gf-chips { margin-bottom: 8px; }
.gf-chips button { font: inherit; font-weight: 700; cursor: pointer; }
.gf-topic { margin: 18px 0 10px; font-size: 1.1rem; }
@media (max-width: 720px) { .gf-row { grid-template-columns: 1fr; } }