/* ============================================================
   How Robots Learn to Talk

   Made for 8 to 12 year olds, mostly on phones and tablets.
   Chunky sticker cards, thick friendly outlines, buttons that
   press down like real ones, and a colour for every idea.

   Rules kept throughout: nothing important behind a hover,
   every tappable thing at least 48px, and the certificate
   prints clean.
   ============================================================ */

:root {
  --paper: #fff6ea;
  --card: #ffffff;
  --sunk: #fff0da;

  --ink: #2b2140;
  --ink-2: #574d70;
  --ink-3: #716884;

  --line: #e9dcc9;
  --line-2: #d9c9b1;

  --grape: #6d3fe0;
  --grape-dk: #5225c4;
  --grape-soft: #f0e9ff;

  --mint: #008567;
  --mint-dk: #00674a;
  --mint-soft: #d7f6ee;

  --sun: #f59300;
  --sun-dk: #a15c00;
  --sun-soft: #fff0d4;

  --berry: #e93f77;
  --berry-dk: #c22656;
  --berry-soft: #ffe3ec;

  --sky: #1f8fd6;
  --sky-dk: #146ba5;
  --sky-soft: #ddf1fd;

  --display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --r: 20px;
  --tap: 48px;
}

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

html {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(109, 63, 224, 0.06), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(0, 163, 126, 0.07), transparent 38%);
  background-attachment: fixed;
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.16;
  color: var(--ink);
}

b,
strong {
  font-weight: 700;
  color: var(--ink);
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

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

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

.grow {
  flex: 1;
}

.skip {
  position: absolute;
  left: 14px;
  top: -70px;
  z-index: 60;
  padding: 12px 20px;
  background: var(--grape);
  color: #fff;
  border-radius: 14px;
  text-decoration: none;
  font-family: var(--display);
  transition: top 180ms var(--ease);
}

.skip:focus {
  top: 12px;
}

/* --- top bar ------------------------------------------------ */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 246, 234, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--line);
}

.bar-in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.home {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: var(--tap);
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}

.bot {
  font-size: 26px;
  line-height: 1;
}

.pips {
  display: flex;
  gap: 6px;
}

.pip {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line-2);
  transition:
    background 200ms var(--pop),
    transform 200ms var(--pop);
}

.pip.on {
  background: var(--mint);
  border-color: var(--mint);
  transform: scale(1.15);
}

.mini {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
  color: var(--ink-3);
  background: var(--card);
  border: 3px solid var(--line);
  transition: transform 140ms var(--pop);
}

.mini:hover {
  color: var(--grape);
  border-color: var(--grape);
  transform: rotate(-25deg);
}

/* --- shared ------------------------------------------------- */

.stage {
  padding-block: 26px 64px;
}

/* Sticker card: thick outline plus a solid drop, no soft blur. */
.card {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 5px 0 var(--line);
  padding: clamp(20px, 3.4vw, 30px);
}

.card + .card {
  margin-top: 22px;
}

.big {
  font-size: clamp(30px, 5.8vw, 46px);
  letter-spacing: -0.01em;
}

.lede {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--ink-2);
  margin-top: 12px;
}

.tiny {
  font-size: 16px;
  color: var(--ink-3);
}

.mt {
  margin-top: 18px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grape);
  background: var(--grape-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* --- buttons ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--tap);
  padding: 12px 24px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  background: var(--grape);
  border-radius: 15px;
  box-shadow: 0 5px 0 var(--grape-dk);
  transition:
    transform 90ms var(--ease),
    box-shadow 90ms var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--grape-dk);
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--grape-dk);
}

.btn.mintish {
  background: var(--mint);
  box-shadow: 0 5px 0 var(--mint-dk);
}

.btn.mintish:hover {
  box-shadow: 0 7px 0 var(--mint-dk);
}

.btn.mintish:active {
  box-shadow: 0 1px 0 var(--mint-dk);
}

.btn.ghost {
  color: var(--ink-2);
  background: var(--card);
  box-shadow: 0 5px 0 var(--line);
  border: 3px solid var(--line);
}

.btn.ghost:hover {
  color: var(--grape);
  border-color: var(--grape-soft);
  box-shadow: 0 7px 0 var(--line);
}

.btn.ghost:active {
  box-shadow: 0 1px 0 var(--line);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* --- the robot's voice -------------------------------------- */

.say {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--grape-soft);
  border-radius: 18px;
  margin-top: 18px;
}

.say .who {
  font-size: 28px;
  line-height: 1.05;
  flex: none;
}

.say p {
  font-size: 18px;
  color: var(--ink);
}

/* --- the maths panel ---------------------------------------- */

.maths {
  background: var(--sun-soft);
  border: 3px dashed #f3c982;
  border-radius: 18px;
  padding: 16px 18px;
  margin-top: 22px;
}

.maths h4 {
  font-size: 14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sun-dk);
}

.maths .sum {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 8px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 2px;
}

.maths .tiny {
  margin-top: 10px;
  color: var(--ink-2);
}

/* --- home --------------------------------------------------- */

.hero {
  text-align: center;
  padding: 20px 0 4px;
}

.hero .bigbot {
  font-size: 68px;
  display: block;
  margin-bottom: 6px;
  animation: bob 3.4s ease-in-out infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-9px) rotate(3deg);
  }
}

/* --- the trail ------------------------------------------------
   One dotted path down the page with a stop on each bend. Only
   the stop you are on carries a description, so the page reads
   in a couple of seconds instead of a couple of minutes. */

.big-btn {
  margin-top: 22px;
  font-size: 20px;
  padding: 16px 34px;
  min-height: 58px;
}

.ages {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink-3);
  margin-top: 10px;
}

.hero-track {
  max-width: 340px;
  margin: 26px auto 0;
}

.trackwrap {
  position: relative;
  height: 14px;
  background: var(--sunk);
  border-radius: 999px;
}

.track {
  height: 100%;
  background: linear-gradient(90deg, var(--grape), var(--mint));
  border-radius: 999px;
  transition: width 600ms var(--ease);
}

.walker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--grape);
  color: var(--grape);
  transition: left 600ms var(--ease);
}

.trail {
  list-style: none;
  position: relative;
  max-width: 620px;
  margin: 34px auto 0;
  padding: 0;
}

/* The path itself. */
.trail::before {
  content: "";
  position: absolute;
  left: 47px;
  top: 34px;
  bottom: 34px;
  width: 4px;
  border-left: 4px dotted var(--line-2);
}

.trail li + li {
  margin-top: 6px;
}

.tstop {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 10px 14px;
  border-radius: 18px;
  border: 3px solid transparent;
  transition:
    transform 140ms var(--pop),
    background 140ms var(--ease),
    border-color 140ms var(--ease);
}

.tstop:hover {
  transform: translateX(4px);
}

.tdot {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 22px;
  border: 4px solid var(--paper);
  box-shadow: 0 4px 0 rgba(43, 33, 64, 0.09);
}

.tnum {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pill {
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--grape);
  color: #fff;
}

.ttitle {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 2px;
}

.tblurb {
  display: block;
  font-size: 16px;
  color: var(--ink-3);
  margin-top: 3px;
}

.tgo {
  display: grid;
  place-items: center;
  color: var(--ink-3);
}

/* A colour each, so a child can say "the pink one". */
.tstop-grape .tdot {
  background: var(--grape-soft);
  color: var(--grape);
}
.tstop-mint .tdot {
  background: var(--mint-soft);
  color: var(--mint-dk);
}
.tstop-sun .tdot {
  background: var(--sun-soft);
  color: var(--sun-dk);
}
.tstop-berry .tdot {
  background: var(--berry-soft);
  color: var(--berry-dk);
}
.tstop-sky .tdot {
  background: var(--sky-soft);
  color: var(--sky-dk);
}

.tstop.done .tdot {
  background: var(--mint);
  color: #fff;
}

.tstop.done .ttitle {
  color: var(--ink-3);
}

/* Where you are now looks like a card; everything else is a plain row. */
.tstop.nextup {
  background: var(--card);
  border-color: var(--grape);
  box-shadow: 0 5px 0 var(--grape-soft);
  padding: 15px 14px;
}

.tstop.nextup .tgo {
  color: var(--grape);
}

.grown {
  max-width: 620px;
  margin: 30px auto 0;
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 18px;
  padding: 6px 20px;
}

.grown summary {
  cursor: pointer;
  padding: 12px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-2);
  min-height: var(--tap);
  display: flex;
  align-items: center;
}

.grown summary::marker {
  color: var(--ink-3);
}

.grown p {
  padding-bottom: 16px;
}

/* --- lesson chrome ------------------------------------------ */

.crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.crumb button {
  min-height: 42px;
  font-family: var(--display);
  font-size: 16px;
  color: var(--ink-3);
}

.crumb button:hover {
  color: var(--grape);
}

.chip {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--sun-soft);
  color: var(--sun-dk);
}

.nav {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 26px;
  flex-wrap: wrap;
}

/* --- letter cards (what LLM and GPT mean) ------------------- */

.acronym {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.acronym span {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 8vw, 58px);
  line-height: 1;
  color: var(--grape);
  animation: drop 480ms var(--pop) both;
}

@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-18px) rotate(-12deg) scale(0.7);
  }
}

.acronym span.wiggle {
  animation: wiggle 480ms var(--pop);
}

@keyframes wiggle {
  30% {
    transform: translateY(-8px) rotate(-9deg);
  }
  60% {
    transform: translateY(0) rotate(7deg);
  }
}

.letters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.letter {
  text-align: left;
  padding: 18px;
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 18px;
  transition:
    transform 140ms var(--pop),
    border-color 140ms var(--ease);
}

.letter:hover {
  transform: translateY(-3px);
  border-color: var(--grape);
}

.letter .cap {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  background: var(--grape-soft);
  color: var(--grape);
}

.letter .word {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
  margin-top: 12px;
}

.letter .said {
  font-size: 16px;
  color: var(--ink-2);
  margin-top: 4px;
}

.letter .later {
  display: inline-block;
  font-family: var(--display);
  font-size: 13px;
  color: var(--mint-dk);
  background: var(--mint-soft);
  padding: 3px 11px;
  border-radius: 999px;
  margin-top: 12px;
}

/* --- tokens ------------------------------------------------- */

.tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.tok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 14px;
  background: var(--sky-soft);
  border: 3px solid #bde3f8;
  border-radius: 14px;
  animation: pop 250ms var(--pop) both;
}

@keyframes pop {
  from {
    transform: scale(0.65);
    opacity: 0;
  }
}

.tok b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
}

.tok span {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--sky-dk);
}

/* --- inputs ------------------------------------------------- */

.field {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 16px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 15px;
}

.field:focus {
  outline: none;
  border-color: var(--grape);
}

textarea.field {
  line-height: 1.55;
  resize: vertical;
}

.slider {
  width: 100%;
  height: var(--tap);
  accent-color: var(--grape);
  cursor: pointer;
}

/* --- multiple choice ---------------------------------------- */

.choices {
  display: grid;
  gap: 11px;
  margin-top: 16px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 14px 18px;
  text-align: left;
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 15px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  transition:
    border-color 140ms var(--ease),
    background 140ms var(--ease),
    transform 120ms var(--pop);
}

.choice:hover {
  border-color: var(--grape);
  transform: translateX(3px);
}

.choice.right {
  border-color: var(--mint);
  background: var(--mint-soft);
}

.choice.wrong {
  border-color: var(--berry);
  background: var(--berry-soft);
  animation: shake 380ms var(--ease);
}

@keyframes shake {
  25% {
    transform: translateX(-7px);
  }
  50% {
    transform: translateX(7px);
  }
  75% {
    transform: translateX(-4px);
  }
}

.choice .mark {
  margin-left: auto;
  font-size: 21px;
}

/* --- tally table -------------------------------------------- */

.tscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 18px;
}

.tally {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}

.tally th {
  text-align: left;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 9px 10px;
  border-bottom: 3px solid var(--line);
  white-space: nowrap;
}

.tally td {
  padding: 11px 10px;
  border-bottom: 2px solid var(--line);
  vertical-align: middle;
}

.tally .word {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}

.tally .num {
  font-family: var(--mono);
  font-weight: 700;
  white-space: nowrap;
}

/* The peek table holds a whole list per row, so it wraps rather than
   forcing the table wider than the card. */
.tally .pk {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.marks {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--sun-dk);
  letter-spacing: 1px;
  white-space: nowrap;
}

.barwrap {
  background: var(--sunk);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
  min-width: 70px;
}

.barfill {
  height: 100%;
  background: var(--grape);
  border-radius: 999px;
  transition: width 400ms var(--ease);
}

/* --- rhyme reader ------------------------------------------- */

.rhyme {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 2.05;
  color: var(--ink);
  margin-top: 16px;
}

.rw {
  padding: 4px 8px;
  border-radius: 9px;
  transition: background 160ms var(--ease);
}

.rw.seen {
  background: var(--sun-soft);
}

.rw.cur {
  background: var(--sun);
  color: var(--ink);
  font-weight: 600;
}

.rw.next {
  background: var(--mint);
  color: #fff;
  font-weight: 600;
}

/* --- spinner ------------------------------------------------ */

.spinwrap {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.spinner {
  position: relative;
  width: 210px;
  height: 210px;
  flex: none;
}

.spinner svg {
  width: 100%;
  height: 100%;
  transition: transform 1.5s cubic-bezier(0.15, 0.9, 0.25, 1);
  filter: drop-shadow(0 4px 0 rgba(43, 33, 64, 0.14));
}

.needle {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  z-index: 2;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.legend .lrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend .sw {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  flex: none;
}

.legend b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
}

.legend .pc {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-3);
}

/* --- meaning dials and map ---------------------------------- */

.dials {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.dial {
  background: var(--sunk);
  border-radius: 16px;
  padding: 8px 16px 2px;
}

.dial label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
}

.dial label .v {
  margin-left: auto;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--grape);
}

.vec {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  background: var(--grape-soft);
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 14px;
  overflow-x: auto;
  white-space: nowrap;
}

.mapbox {
  position: relative;
  height: 390px;
  background: var(--sunk);
  border: 3px solid var(--line);
  border-radius: 18px;
  margin-top: 16px;
  overflow: hidden;
  touch-action: none;
}

.dot {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 7px 13px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.dot.animal {
  background: var(--mint-soft);
  color: var(--mint-dk);
}

.dot.food {
  background: var(--sun-soft);
  color: var(--sun-dk);
}

.dot.colour {
  background: var(--berry-soft);
  color: var(--berry-dk);
}

.dot.action {
  background: var(--sky-soft);
  color: var(--sky-dk);
}

.dot.you {
  background: var(--grape);
  color: #fff;
  cursor: grab;
  z-index: 3;
  min-height: 38px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 0 var(--grape-dk);
}

/* --- output ------------------------------------------------- */

.out {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 3.2vw, 26px);
  line-height: 1.5;
  color: var(--ink);
  background: var(--mint-soft);
  border-radius: 18px;
  padding: 18px 20px;
  margin-top: 16px;
  min-height: 76px;
}

/* --- finish ------------------------------------------------- */

.cert {
  text-align: center;
  padding: clamp(26px, 5vw, 46px) clamp(20px, 4vw, 40px);
  background: var(--card);
  border: 4px solid var(--grape);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--grape-soft);
  position: relative;
}

.cert::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px dashed var(--sun);
  border-radius: 16px;
  pointer-events: none;
}

.cert .seal {
  font-size: 56px;
  display: block;
}

.cert h2 {
  font-size: clamp(24px, 4.6vw, 34px);
  margin-top: 6px;
}

.cert .name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 6vw, 44px);
  color: var(--grape);
  padding-bottom: 6px;
  border-bottom: 3px dotted var(--line-2);
  display: inline-block;
  margin: 14px 0 16px;
  min-width: min(320px, 80%);
}

.cert .knows {
  display: grid;
  gap: 10px;
  max-width: 540px;
  margin: 20px auto 0;
  text-align: left;
}

.cert .knows div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 16px;
  color: var(--ink-2);
}

.cert .knows span:first-child {
  font-size: 20px;
  line-height: 1.3;
}

.cert .stamp {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 24px;
}

/* --- footer -------------------------------------------------- */

.foot {
  border-top: 3px solid var(--line);
  background: var(--card);
}

.foot-in {
  padding: 28px 0 36px;
  text-align: center;
}

.ded {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}

.ded b {
  color: var(--berry);
}

.fine {
  font-size: 16px;
  color: var(--ink-3);
  margin-top: 4px;
}

/* --- tablet -------------------------------------------------
   Most of the audience is on a tablet, so this size is tuned
   for on purpose rather than left to fall between phone and
   desktop. */

@media (min-width: 700px) and (max-width: 1100px) {
  body {
    font-size: 19px;
  }
  .wrap {
    max-width: 800px;
  }
  .map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mapbox {
    height: 420px;
  }
  .spinner {
    width: 240px;
    height: 240px;
  }
  .btn {
    font-size: 18px;
    padding: 14px 26px;
  }
  .choice {
    font-size: 18px;
    padding: 16px 20px;
  }
}

/* --- phone --------------------------------------------------- */

@media (max-width: 699px) {
  .spinwrap {
    gap: 16px;
    justify-content: center;
  }
  .spinner {
    width: 200px;
    height: 200px;
    margin-inline: auto;
  }
  .legend {
    width: 100%;
  }
  .nav .btn {
    flex: 1 1 100%;
  }
  .mapbox {
    height: 380px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 17px;
  }
  .bar-in {
    gap: 10px;
  }
  .home {
    font-size: 16px;
  }
  .bot {
    font-size: 22px;
  }
  .pips {
    gap: 4px;
  }
  .pip {
    width: 10px;
    height: 10px;
    border-width: 2px;
  }
  .mini {
    width: 44px;
    height: 44px;
    border-width: 2px;
  }
  .barwrap {
    display: none;
  }

  /* A four-column table cannot fit a phone, and a sideways scroll is
     something a child has to discover. Each row becomes a small block
     instead: the word and its tally on one line, the fraction and the
     percentage underneath. */
  .tally,
  .tally tbody,
  .tally tr,
  .tally td {
    display: block;
    width: 100%;
  }
  .tally thead {
    display: none;
  }
  .tally tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 14px;
    align-items: center;
    padding: 11px 2px;
    border-bottom: 2px solid var(--line);
  }
  .tally td {
    padding: 0;
    border: 0;
  }
  .tally .word {
    font-size: 20px;
  }
  .tally .marks {
    text-align: right;
  }
  .tally .num {
    font-size: 16px;
    color: var(--ink-2);
  }
  .tally .pk {
    grid-column: 1 / -1;
  }
  .rhyme {
    font-size: 19px;
    line-height: 1.95;
  }
  .hero .bigbot {
    font-size: 56px;
  }
}

@media (max-width: 380px) {
  .tally .word {
    font-size: 18px;
  }
  .tally tr {
    gap: 2px 10px;
  }
}

/* --- print ---------------------------------------------------
   The certificate is meant to end up on a fridge door or in a
   school bag, so printing gives one clean page: no navigation,
   no buttons, and no backgrounds emptying a colour cartridge. */

@media print {
  .bar,
  .foot,
  .crumb,
  .nav,
  .skip,
  .noprint {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    background-image: none !important;
    color: #000;
    font-size: 12pt;
  }

  .stage {
    padding: 0;
  }

  .wrap {
    padding-inline: 0;
    max-width: none;
  }

  .cert {
    border: 2pt solid #000;
    border-radius: 0;
    box-shadow: none;
    padding: 20mm 15mm;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .cert::before {
    inset: 4mm;
    border: 0.75pt dashed #666;
    border-radius: 0;
  }

  .cert .seal {
    font-size: 28pt;
  }

  .cert .name {
    color: #000;
    border-bottom: 1pt solid #000;
  }

  .cert .knows div,
  .cert .stamp {
    color: #000;
  }

  @page {
    size: A4 portrait;
    margin: 12mm;
  }
}

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

[hidden] {
  display: none !important;
}

/* --- drawn icons --------------------------------------------
   One rule set for every mark on the site. They inherit
   currentColor, so an icon always matches the text it sits
   with and never needs a second colour decision. */

.ic {
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
}

.bot .ic,
.mini .ic {
  display: block;
  vertical-align: baseline;
}

.bot {
  color: var(--grape);
  display: grid;
  place-items: center;
}

.hero .bigbot {
  color: var(--grape);
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
  width: 108px;
  height: 108px;
  background: var(--grape-soft);
  border-radius: 34px;
  animation: bob 3.4s ease-in-out infinite;
}

.say .who {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #fff;
  color: var(--grape);
  flex: none;
}

/* Celebration bubbles get the warm pair instead. */
.say:has(.who .ic) {
  align-items: center;
}

.stop h3 .si {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--sun-soft);
  color: var(--sun-dk);
  margin-right: 8px;
  vertical-align: -0.35em;
}

.stop.done .n .ic,
.choice .mark .ic {
  display: block;
}

.choice.right .mark {
  color: var(--mint-dk);
}

.choice.wrong .mark {
  color: var(--berry-dk);
}

.crumb button .ic,
.btn .ic {
  vertical-align: -0.2em;
}

/* The spinner needle, drawn rather than typed. */
.needle {
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 17px solid var(--ink);
  border-radius: 2px;
}

.cert .seal {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--sun-soft);
  color: var(--sun-dk);
}

.cert .knows span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--grape-soft);
  color: var(--grape);
}

@media print {
  .cert .seal {
    background: none;
    color: #000;
    border: 1pt solid #000;
  }
  .cert .knows span:first-child {
    background: none;
    color: #000;
  }
}

/* Each stop keeps its own colour, on the map and inside the lesson, so
   a child can say "the pink one" and be understood. */
.stop h3 .si {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  margin-right: 10px;
  vertical-align: -0.5em;
}

.si-grape {
  background: var(--grape-soft);
  color: var(--grape);
}
.si-mint {
  background: var(--mint-soft);
  color: var(--mint-dk);
}
.si-sun {
  background: var(--sun-soft);
  color: var(--sun-dk);
}
.si-berry {
  background: var(--berry-soft);
  color: var(--berry-dk);
}
.si-sky {
  background: var(--sky-soft);
  color: var(--sky-dk);
}

/* Breathing room under the certificate title, on screen and on paper. */
.cert h2 + .tiny {
  margin-top: 10px;
}

.cert .knows {
  margin-top: 24px;
}

/* --- drawn tally marks --------------------------------------- */

.marks {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sun-dk);
}

.tk {
  flex: none;
}

.tk-none {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink-3);
}

/* The newly counted row flashes, so a child watching the rhyme can see
   which line just changed. */
@keyframes rowflash {
  from {
    background: var(--sun-soft);
  }
}

.tally tr.just {
  animation: rowflash 700ms var(--ease);
}

/* --- stop 6: two questions, one map -------------------------- */

.qcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.qcard {
  padding: 16px 18px;
  border-radius: 18px;
  border: 3px solid transparent;
}

.qcard b {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  margin-top: 8px;
}

.qcard span:last-child {
  display: block;
  font-size: 15px;
  color: var(--ink-2);
  margin-top: 2px;
}

.qcard .qn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-family: var(--display);
  font-weight: 700;
  background: #fff;
}

.qcard-mint {
  background: var(--mint-soft);
  border-color: #b6ead9;
}

.qcard-mint .qn {
  color: var(--mint-dk);
}

.qcard-sun {
  background: var(--sun-soft);
  border-color: #f6d69b;
}

.qcard-sun .qn {
  color: var(--sun-dk);
}

/* Axis labels as two chips above the map. A rotated label in a gutter
   was invisible at some widths, and these also read aloud properly. */
.axes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.ax {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 15px;
}

.ax b {
  font-weight: 700;
}

.ax-mint {
  background: var(--mint-soft);
  color: var(--mint-dk);
}

.ax-mint b {
  color: var(--mint-dk);
}

.ax-sun {
  background: var(--sun-soft);
  color: var(--sun-dk);
}

.ax-sun b {
  color: var(--sun-dk);
}

/* The word being placed rides on the map itself, so it is on screen at
   the moment the dot is being moved. */
.gbar {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: 4;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: 15px;
  white-space: nowrap;
  pointer-events: none;
}

.gbar b {
  color: #fff;
  font-weight: 700;
}

.split {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 3px dashed var(--line);
}

.split h3 {
  font-size: 21px;
}

.mapbox .maplines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mapbox .maplines line {
  stroke: var(--grape);
  stroke-width: 0.7;
  stroke-dasharray: 2 2;
  opacity: 0.75;
  transition:
    x1 200ms var(--ease),
    y1 200ms var(--ease),
    x2 200ms var(--ease),
    y2 200ms var(--ease);
}

.dot {
  transition:
    left 200ms var(--ease),
    top 200ms var(--ease),
    transform 200ms var(--pop);
}

.dot.both {
  background: var(--berry-soft);
  color: var(--berry-dk);
}

.dot.alive {
  background: var(--mint-soft);
  color: var(--mint-dk);
}

.dot.food {
  background: var(--sun-soft);
  color: var(--sun-dk);
}

.dot.neither {
  background: #eee7f5;
  color: var(--ink-2);
}

.dot.closest {
  outline: 3px solid var(--grape);
  outline-offset: 2px;
}

@keyframes hitpop {
  40% {
    transform: translate(-50%, -50%) scale(1.35);
  }
}

.dot.hit {
  animation: hitpop 420ms var(--pop);
}

.dial-mint {
  background: var(--mint-soft);
}

.dial-mint .v {
  color: var(--mint-dk);
}

.dial-mint .slider {
  accent-color: var(--mint);
}

.dial-sun {
  background: var(--sun-soft);
}

.dial-sun .v {
  color: var(--sun-dk);
}

.dial-sun .slider {
  accent-color: var(--sun);
}

/* --- the parking game ---------------------------------------- */

.game .gword {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 4vw, 28px);
  color: var(--ink);
  margin-bottom: 14px;
}

.game .score {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink-3);
}

.out.good {
  background: var(--mint-soft);
}

.out.bad {
  background: var(--berry-soft);
}

/* --- typed-out poem ------------------------------------------ */

.out .caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--mint-dk);
  vertical-align: -0.12em;
  margin-left: 3px;
  animation: blink 900ms steps(2) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.out .nw {
  animation: rise 260ms var(--pop) both;
  display: inline-block;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
}

@media (max-width: 560px) {
  .ax {
    font-size: 14px;
    padding: 5px 12px;
  }
  .gbar {
    font-size: 14px;
  }
}

/* On a phone a nowrap formula scrolls out of sight, so "= about 33%"
   ended up reading "= about 3". Wrapping is the lesser evil: a child must
   never see arithmetic that looks wrong. */
@media (max-width: 700px) {
  .maths .sum,
  .vec {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.75;
  }
}

/* --- the training widget on stop 4 --------------------------- */

.trainbox {
  margin-top: 18px;
  padding: 18px;
  background: var(--sunk);
  border-radius: 18px;
}

.trainstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  text-align: center;
}

.trainstats > div {
  background: #fff;
  border-radius: 14px;
  padding: 12px 8px;
}

.tsv {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 4.6vw, 30px);
  color: var(--grape);
  line-height: 1.1;
}

.tsl {
  display: block;
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 2px;
}

.trainbox .trackwrap {
  background: #fff;
}

.trainbox .out {
  background: #fff;
  font-size: 19px;
  min-height: auto;
}

@media (max-width: 560px) {
  .tstop {
    grid-template-columns: 56px minmax(0, 1fr) 20px;
    gap: 12px;
  }
  .tdot {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }
  .trail::before {
    left: 42px;
    top: 30px;
    bottom: 30px;
  }
  .ttitle {
    font-size: 19px;
  }
  .big-btn {
    width: 100%;
  }
  .tsl {
    font-size: 13px;
  }
}