@font-face {
  font-family: "Sentence Train Nunito";
  src: url("./fonts/nunito-latin.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --night: #173557;
  --ink: #16243a;
  --muted: #596679;
  --paper: #fffaf0;
  --cream: #f7ecd7;
  --white: #ffffff;
  --blue: #2f6ec9;
  --blue-dark: #214f94;
  --teal: #59b9aa;
  --teal-soft: #dff3ed;
  --gold: #f4c95d;
  --gold-soft: #fff1b8;
  --coral: #d95645;
  --green: #397b5f;
  --track: #253647;
  --train-colour: var(--cp-player-accent, #d95645);
  --train-dark: var(--cp-player-accent-dark, #a43b30);
  color: var(--ink);
  background: var(--paper);
  font-family: "Sentence Train Nunito", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

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

html { min-width: 320px; scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background:
    radial-gradient(circle at 8% 15%, rgba(244, 201, 93, 0.25), transparent 21rem),
    linear-gradient(180deg, #fffaf0 0%, #edf5f1 100%);
  font-size: 1rem;
  line-height: 1.5;
}

button,
select,
a { font: inherit; }

button { color: inherit; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 4px solid #8a4d00;
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.7rem;
  left: 0.7rem;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-170%);
}

.skip-link:focus { transform: translateY(0); }

.game-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  min-height: 66px;
  padding: 0.45rem clamp(0.6rem, 2vw, 1.4rem);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 2px solid #0d253f;
  color: var(--white);
  background: var(--night);
}

.catalogue-link,
.mini-brand,
.bar-button {
  min-height: 44px;
  border-radius: 12px;
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}

.catalogue-link {
  display: inline-flex;
  width: max-content;
  padding: 0.55rem 0.7rem;
  align-items: center;
  gap: 0.35rem;
}

.catalogue-link:hover,
.mini-brand:hover { background: rgba(255, 255, 255, 0.11); }

.mini-brand {
  display: inline-flex;
  padding: 0.45rem 0.7rem;
  align-items: center;
  gap: 0.55rem;
  letter-spacing: 0.02em;
}

.brand-wheel {
  position: relative;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  border: 4px solid var(--gold);
  border-radius: 50%;
}

.brand-wheel::before,
.brand-wheel::after {
  position: absolute;
  inset: 8px -4px auto;
  height: 3px;
  background: var(--gold);
  content: "";
}

.brand-wheel::after { transform: rotate(90deg); }

.bar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.bar-button {
  min-width: 64px;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

#game { position: relative; min-height: calc(100svh - 66px); }

.start-screen {
  display: grid;
  width: min(1180px, 100%);
  min-height: calc(100svh - 66px);
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
}

.start-copy { max-width: 680px; }

.route-label {
  margin: 0 0 0.45rem;
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p { overflow-wrap: break-word; }

h1 {
  margin: 0;
  font-size: clamp(3.35rem, 9vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 0.82;
}

h1 em {
  color: var(--blue);
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
}

.lead {
  max-width: 610px;
  margin: 1.25rem 0;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
}

.boundary-demo {
  display: grid;
  max-width: 600px;
  margin: 1.2rem 0;
  grid-template-columns: auto minmax(30px, 1fr) auto;
  align-items: center;
}

.demo-sign {
  display: grid;
  min-width: 114px;
  min-height: 112px;
  padding: 0.45rem 0.7rem;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 5px 0 rgba(22, 36, 58, 0.16);
}

.demo-sign b {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.demo-sign strong { color: var(--blue-dark); font-size: 2.45rem; line-height: 1; }
.demo-sign small { font-weight: 800; }
.demo-finish strong { color: var(--coral); }

.demo-rail {
  height: 8px;
  border-block: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, transparent 0 12px, var(--ink) 12px 18px);
}

.start-rule { max-width: 620px; margin: 0 0 1.15rem; color: var(--muted); }

.primary-action,
.secondary-action,
.secondary-link,
.text-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.primary-action {
  min-width: 178px;
  padding: 0.75rem 1.15rem;
  border: 2px solid var(--blue-dark);
  color: var(--white);
  background: var(--blue-dark);
  box-shadow: 0 4px 0 #153765;
}

.primary-action:hover { background: #183f78; }
.primary-action:active { transform: translateY(2px); box-shadow: 0 2px 0 #153765; }

.secondary-action,
.secondary-link {
  padding: 0.65rem 0.9rem;
  border: 2px solid var(--ink);
  background: var(--white);
}

.secondary-action:hover,
.secondary-link:hover { background: var(--gold-soft); }

button:disabled { cursor: not-allowed; opacity: 0.48; }

.grown-up-note { max-width: 620px; margin-top: 1rem; color: var(--muted); }
.grown-up-note summary { min-height: 44px; padding: 0.65rem 0; color: var(--ink); font-weight: 800; cursor: pointer; }
.grown-up-note label { display: block; margin: 0.6rem 0 0.25rem; color: var(--ink); font-weight: 800; }
.grown-up-note select { min-width: 220px; min-height: 44px; padding: 0.55rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); }

.station-poster {
  position: relative;
  overflow: hidden;
  min-height: min(620px, 72vh);
  border: 3px solid #102941;
  border-radius: 180px 180px 30px 30px;
  background:
    linear-gradient(transparent 67%, #bb6a48 67% 72%, #f2dbb6 72%),
    radial-gradient(circle at 72% 17%, #fff4b8 0 8%, transparent 8.4%),
    linear-gradient(165deg, #204b70 0%, #5ba6aa 61%, #b9d9c8 61% 67%, transparent 67%);
  box-shadow: 16px 18px 0 rgba(23, 53, 87, 0.12);
}

.station-poster::before,
.station-poster::after {
  position: absolute;
  bottom: 17%;
  width: 38%;
  height: 19%;
  border: 3px solid var(--ink);
  background: #e56c4f;
  content: "";
}

.station-poster::before { left: 7%; border-radius: 50% 50% 10px 10px; }
.station-poster::after { right: -5%; border-radius: 70% 0 0 0; background: #f4c95d; }
.station-roof { position: absolute; z-index: 2; right: 11%; bottom: 31%; width: 61%; height: 8%; border: 3px solid var(--ink); border-radius: 60% 20% 0 0; background: #f8f0df; transform: rotate(-2deg); }
.station-window { position: absolute; z-index: 2; right: 20%; bottom: 16%; display: flex; width: 36%; height: 18%; align-items: end; justify-content: center; gap: 0.45rem; border: 3px solid var(--ink); border-radius: 60px 60px 0 0; background: #173557; }
.station-window span { width: 22%; height: 58%; border: 2px solid var(--ink); border-radius: 22px 22px 0 0; background: #f7d66e; }
.clock { position: absolute; z-index: 3; top: 15%; left: 13%; width: 82px; height: 82px; border: 5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.clock::after { position: absolute; left: 50%; bottom: -76px; width: 5px; height: 75px; background: var(--ink); content: ""; }
.clock i,.clock b { position: absolute; left: 50%; top: 50%; width: 4px; height: 26px; border-radius: 4px; background: var(--coral); transform-origin: 50% 0; }
.clock i { transform: rotate(130deg); }
.clock b { height: 19px; transform: rotate(235deg); }
.porter { position: absolute; z-index: 5; left: 21%; bottom: 11%; width: 86px; height: 124px; border: 3px solid var(--ink); border-radius: 44px 44px 18px 18px; background: var(--teal); }
.porter::before { position: absolute; left: 14px; top: -36px; width: 52px; height: 52px; border: 3px solid var(--ink); border-radius: 50%; background: #d99563; content: ""; }
.porter i,.porter b { position: absolute; top: -17px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.porter i { left: 30px; }.porter b { left: 50px; }
.porter span { position: absolute; left: 24px; top: 40px; width: 38px; height: 30px; border: 3px solid var(--ink); border-radius: 8px; background: var(--gold); }

.journey-screen {
  display: grid;
  min-height: calc(100svh - 66px);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  background: var(--night);
}

.journey-world { position: relative; overflow: hidden; min-height: 690px; background: linear-gradient(180deg, #173557 0 58%, #426b68 58% 71%, #c3a778 71%); }
.skyline { position: absolute; inset: 4% 0 31%; }
.skyline span { position: absolute; bottom: 0; width: 27%; height: 38%; border-radius: 50% 50% 0 0; background: #2d616d; }
.skyline span:nth-child(1) { left: -8%; height: 48%; }.skyline span:nth-child(2) { left: 17%; width: 43%; height: 31%; background: #356f70; }.skyline span:nth-child(3) { right: 8%; height: 45%; }.skyline span:nth-child(4) { right: -16%; width: 40%; height: 25%; background: #477f76; }

.route-board { position: relative; z-index: 3; margin: clamp(1rem, 3vw, 2rem); padding: 0.8rem 1rem; border: 3px solid #0c2238; border-radius: 12px; color: var(--ink); background: var(--gold); box-shadow: 0 7px 0 #0c2238; }
.route-board p { margin: 0 0 0.45rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.route-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35rem; }
.route-progress span { display: grid; min-width: 30px; height: 30px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); font-size: 0.75rem; font-weight: 900; }
.route-progress span[data-complete="true"] { color: var(--white); background: var(--green); }

.cue-art { position: relative; z-index: 2; width: min(82%, 380px); margin: clamp(1rem, 5vh, 3rem) auto 0; }
.cue-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 0 rgba(9, 29, 46, 0.18)); }

.railway { position: absolute; z-index: 4; right: 0; bottom: 3%; left: 0; height: 135px; }
.tracks { position: absolute; right: -10%; bottom: 7px; left: -10%; height: 22px; border-block: 6px solid var(--track); background: repeating-linear-gradient(90deg, transparent 0 20px, var(--track) 20px 29px); }
.train { position: absolute; right: 8%; bottom: 29px; display: flex; width: 84%; align-items: end; justify-content: flex-end; gap: 3px; transform: translateX(calc((6 - var(--train-progress, 0)) * 1.2%)); transition: transform 480ms ease; }
.engine,.carriage { position: relative; height: 60px; flex: 1 1 0; border: 3px solid #101f33; border-radius: 10px 10px 4px 4px; background: var(--train-colour); }
.engine { flex-basis: 24%; height: 73px; border-radius: 48% 12px 4px 4px; background: var(--train-colour); }
.cab { position: absolute; right: 8%; top: -31px; width: 43%; height: 39px; border: 3px solid #101f33; border-radius: 11px 11px 0 0; background: var(--cream); }
.chimney { position: absolute; left: 18%; top: -27px; width: 16px; height: 31px; border: 3px solid #101f33; border-radius: 4px 4px 0 0; background: var(--train-dark); }
.engine i,.engine b,.carriage i,.carriage b { position: absolute; bottom: -15px; width: 25px; height: 25px; border: 4px solid #101f33; border-radius: 50%; background: var(--gold); }
.engine i,.carriage i { left: 12%; }.engine b,.carriage b { right: 12%; }
.carriage span { display: grid; width: 30px; height: 30px; margin: 9px auto; place-items: center; border: 2px solid #101f33; border-radius: 50%; background: var(--cream); font-weight: 900; }
.carriage[data-complete="true"] { background: var(--teal); }
.train.is-moving { animation: train-nudge 700ms ease both; }

@keyframes train-nudge { 0% { transform: translateX(5%); } 65% { transform: translateX(-1%); } 100% { transform: translateX(0); } }

.work-card { position: relative; z-index: 5; overflow: auto; min-height: 690px; max-height: calc(100svh - 66px); padding: clamp(1rem, 3vw, 2.2rem); background: var(--paper); box-shadow: -12px 0 28px rgba(5, 22, 36, 0.22); }
.task-context { position: sticky; z-index: 8; top: 0; padding-bottom: 0.05rem; background: var(--paper); box-shadow: 0 8px 10px -12px rgba(5, 22, 36, 0.8); }
.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.card-heading h2 { margin: 0; font-size: clamp(1.65rem, 3.3vw, 2.5rem); line-height: 1.08; }
.text-button { min-width: 76px; padding: 0.5rem 0.65rem; border: 0; color: var(--blue-dark); background: transparent; text-decoration: underline; }
.task-prompt { margin: 0.65rem 0 1rem; color: var(--muted); font-size: 1.05rem; font-weight: 700; }

.sentence-board { display: grid; margin: 0 0 0.95rem; padding: 0.8rem; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; border: 3px solid var(--ink); border-radius: 18px; background: var(--white); box-shadow: 0 5px 0 rgba(22, 36, 58, 0.13); }
.platform-label { display: grid; min-height: 44px; padding: 0.35rem 0.45rem; place-items: center; border-radius: 8px; color: var(--white); background: var(--green); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.08em; }
.platform-finish { background: #b84436; }
body[data-support="guided"][data-view-phase="diagnose"] .platform-label { outline: 5px solid var(--gold); outline-offset: 2px; }
.sentence-preview { min-width: 0; margin: 0; text-align: center; font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 850; line-height: 1.35; }
.preview-stop { display: inline-grid; width: 0.45em; color: var(--coral); place-items: center; }

.diagnosis-panel { padding: 0.9rem; border: 2px solid #9db7c9; border-radius: 18px; background: #f2f7fb; }
.diagnosis-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.diagnosis-panel legend { padding: 0; font-size: 1.08rem; font-weight: 900; }
.diagnosis-options { display: flex; margin-top: 0.7rem; flex-wrap: wrap; gap: 0.55rem; }
.diagnosis-choice { min-height: 48px; padding: 0.6rem 0.85rem; border: 2px solid var(--ink); border-radius: 13px; background: var(--white); font-weight: 900; cursor: pointer; }
.diagnosis-choice[aria-pressed="true"] { color: var(--white); background: var(--blue-dark); box-shadow: inset 0 0 0 3px var(--gold); }
.diagnosis-panel > .primary-action { width: 100%; }

.choice-task { margin-top: 0.8rem; padding: 0.8rem; border: 2px solid #bcc8ce; border-radius: 16px; background: #f9fbf8; }
.choice-task > div:first-child { display: flex; align-items: center; gap: 0.65rem; }
.choice-task h3 { margin: 0; font-size: 1.03rem; }
.task-number { display: grid; width: 30px; height: 30px; flex: 0 0 auto; margin: 0; place-items: center; border-radius: 50%; color: var(--white); background: var(--blue-dark); font-weight: 900; }
.choice-task[data-complete="true"] { border-color: #7fae95; background: #edf7f1; }

.word-options,.stop-options { display: flex; margin-top: 0.65rem; flex-wrap: wrap; gap: 0.45rem; }
.word-choice,.stop-choice { position: relative; min-width: 56px; min-height: 48px; padding: 0.5rem 0.75rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); font-size: 1.05rem; font-weight: 850; cursor: pointer; }
.word-choice[aria-pressed="true"],.stop-choice[aria-pressed="true"] { color: var(--white); background: var(--blue-dark); box-shadow: inset 0 0 0 3px var(--gold); }
.stop-choice { display: grid; min-width: 78px; grid-template-columns: 1fr auto; gap: 0.35rem; font-size: 0.82rem; }
.stop-choice b { color: var(--coral); font-size: 1.65rem; line-height: 0.7; }
.fixed-boundary { display: inline-flex; min-height: 44px; margin-top: 0.65rem; padding: 0.55rem 0.8rem; align-items: center; gap: 0.45rem; border: 2px solid #7fae95; border-radius: 12px; color: #24543f; background: #edf7f1; font-weight: 800; }

.boundary-map { margin-top: 0.8rem; padding: 0.85rem; border: 3px solid var(--gold); border-radius: 18px; background: #fff8d8; }
.boundary-map > h3 { margin: 0; font-size: 1.12rem; }
.boundary-map > p { margin: 0.25rem 0 0.75rem; color: var(--muted); font-weight: 700; }
.boundary-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.boundary-zone { min-width: 0; padding: 0.65rem; border: 2px solid #a9b5ba; border-radius: 14px; background: var(--white); }
.boundary-zone-start { border-color: var(--green); }
.boundary-zone-finish { border-color: var(--coral); }
.boundary-zone h4 { margin: 0; font-size: 0.74rem; letter-spacing: 0.06em; }
.boundary-zone > p { min-height: 2.4em; margin: 0.2rem 0 0.55rem; color: var(--muted); font-size: 0.78rem; }
.retry-options { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.4rem; }
.retry-options .fixed-boundary { margin: 0; font-size: 0.78rem; }
.retry-empty { margin: 0; color: var(--muted); font-size: 0.8rem; font-weight: 700; }

.help-panel { display: flex; margin-top: 0.8rem; padding: 0.75rem; align-items: center; gap: 0.75rem; border: 2px solid #b17b12; border-radius: 14px; background: var(--gold-soft); }
.help-panel p { margin: 0.1rem 0 0; }
.signal-lamp { width: 38px; height: 38px; flex: 0 0 auto; border: 4px solid var(--ink); border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 5px #fff7d8; }
body[data-hint-target="capital"] .platform-start,body[data-hint-target="full_stop"] .platform-finish { outline: 5px solid var(--gold); outline-offset: 3px; }
body[data-hint-target="capital"] .word-choice:first-child,body[data-hint-target="full_stop"] .stop-choice:last-child { animation: clue-pulse 760ms ease 2; }
@keyframes clue-pulse { 50% { box-shadow: 0 0 0 7px rgba(244, 201, 93, 0.7); } }

.feedback { min-height: 48px; margin: 0.75rem 0; padding: 0.65rem 0.75rem; border-left: 5px solid var(--blue); border-radius: 0 10px 10px 0; background: #eaf1fb; font-weight: 750; }
.feedback[data-kind="error"] { border-color: #a84934; background: #fff0eb; }
.feedback[data-kind="success"] { border-color: var(--green); background: #e8f5ed; }
.repair-actions,.read-actions,.finish-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.repair-actions .primary-action { margin-left: auto; }

.read-panel { display: grid; min-height: 490px; align-content: center; justify-items: center; text-align: center; }
.ticket-stamp { margin: 0; padding: 0.25rem 0.65rem; border: 3px double var(--green); border-radius: 7px; color: var(--green); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.15em; transform: rotate(-2deg); }
.read-panel h3 { margin: 1rem 0 0.35rem; font-size: 1.35rem; }
.read-sentence { display: flex; max-width: 100%; margin: 0.8rem 0; flex-wrap: wrap; justify-content: center; gap: 0.35em; font-size: clamp(1.8rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.3; }
.read-word { padding: 0 0.08em; border-bottom: 5px solid transparent; border-radius: 6px; }
.read-word.is-reading { border-color: var(--coral); background: var(--gold-soft); }
.read-word.is-read { border-color: var(--green); }
.read-note { max-width: 560px; margin: 0.6rem 0 1.1rem; color: var(--muted); }
.read-gate { max-width: 560px; margin: 0 0 1rem; color: var(--train-dark); font-weight: 850; }

.completion-screen,.finished-screen { width: min(920px, calc(100% - 1.2rem)); min-height: calc(100svh - 66px); margin: 0 auto; padding: clamp(1rem, 5vw, 4rem) 0; scroll-margin-top: 66px; }
.completion-screen { display: grid; align-content: center; }
.completion-ticket { padding: 1rem clamp(1rem, 4vw, 2.4rem); border: 3px solid var(--ink); border-radius: 22px; background: var(--gold-soft); }
.completion-ticket h2,.finished-screen h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1; }
.completion-ticket p:last-child { margin-bottom: 0; }
#finish-journey { margin: 1rem auto 0; }

.finished-screen { display: grid; max-width: 800px; align-content: center; justify-items: center; text-align: center; }
.sunrise { position: relative; width: min(100%, 600px); height: 170px; overflow: hidden; margin-bottom: 1.3rem; border: 3px solid var(--ink); border-radius: 200px 200px 18px 18px; background: linear-gradient(#8ac9cf 0 58%, #74a56d 58%); }
.sunrise span { position: absolute; left: calc(50% - 48px); bottom: 41%; width: 96px; height: 96px; border: 4px solid var(--ink); border-radius: 50%; background: var(--gold); }
.sunrise i,.sunrise b { position: absolute; bottom: 0; width: 62%; height: 48%; border-radius: 50% 50% 0 0; background: #4f8668; }
.sunrise i { left: -12%; }.sunrise b { right: -10%; background: #3d755b; }
.finished-screen > p { max-width: 680px; }
.finish-fact { padding: 0.7rem 1rem; border-radius: 12px; background: var(--teal-soft); font-weight: 850; }
.adult-transfer { width: min(100%, 680px); margin-top: 1.3rem; text-align: left; }
.adult-transfer summary { min-height: 44px; padding: 0.6rem; font-weight: 850; cursor: pointer; }

.pause-panel { position: fixed; z-index: 70; inset: 66px 0 0; display: grid; padding: 1rem; place-items: center; background: rgba(9, 29, 46, 0.82); }
.pause-panel > div { width: min(460px, 100%); padding: 1.5rem; border: 3px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.25); text-align: center; }
.pause-panel h2 { margin: 0; font-size: 2rem; }

.static-guide { width: min(920px, calc(100% - 1.5rem)); margin: 2rem auto; padding: 1rem 1.2rem; border-left: 5px solid var(--blue); background: rgba(255, 255, 255, 0.7); }
.static-guide h2 { margin: 0; font-size: 1.25rem; }
.static-guide p { margin-bottom: 0; }
.noscript { margin: 1rem; padding: 1rem; border: 2px solid var(--ink); background: var(--gold-soft); }

@media (max-width: 899px) {
  .start-screen { grid-template-columns: 1fr; align-content: center; gap: clamp(1rem, 2.8vw, 1.6rem); }
  .station-poster { display: block; width: min(56vw, 390px); min-height: clamp(270px, 44vw, 340px); justify-self: center; }
  .journey-screen { grid-template-columns: 1fr; }
  .journey-world { min-height: 350px; }
  .cue-art { width: min(64%, 300px); margin-top: 0; }
  .railway { height: 115px; }
  .work-card { overflow: visible; min-height: auto; max-height: none; box-shadow: 0 -10px 26px rgba(5, 22, 36, 0.22); }
  .task-context { top: 66px; }
}

@media (max-width: 560px) {
  .game-bar { grid-template-columns: auto 1fr auto; gap: 0.25rem; }
  .mini-brand { justify-self: center; }
  .mini-brand strong { display: none; }
  .catalogue-link { padding-inline: 0.35rem; font-size: 0.88rem; }
  .bar-actions { gap: 0.25rem; }
  .bar-button { min-width: 55px; padding-inline: 0.35rem; font-size: 0.86rem; }
  .start-screen { padding: 1.2rem 0.75rem 2rem; }
  .station-poster { display: none; }
  h1 { font-size: clamp(3.3rem, 19vw, 5rem); }
  .boundary-demo { grid-template-columns: 1fr 28px 1fr; }
  .demo-sign { min-width: 0; min-height: 104px; padding-inline: 0.35rem; }
  .demo-sign small { font-size: 0.72rem; }
  .journey-world { display: none; }
  .route-board { margin: 0.75rem; padding: 0.6rem; }
  .cue-art { width: 58%; }
  .train { width: 97%; right: 1.5%; gap: 1px; }
  .engine,.carriage { border-width: 2px; }
  .carriage span { width: 22px; height: 22px; margin-top: 12px; font-size: 0.7rem; }
  .cab { top: -22px; height: 29px; border-width: 2px; }
  .chimney { top: -20px; height: 24px; border-width: 2px; }
  .engine i,.engine b,.carriage i,.carriage b { width: 20px; height: 20px; bottom: -12px; border-width: 3px; }
  .work-card { padding: 0.85rem 0.7rem 1.4rem; }
  .card-heading { gap: 0.35rem; }
  .card-heading h2 { font-size: 1.45rem; }
  .sentence-board { padding: 0.5rem; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.3rem; }
  .platform-label { min-height: 30px; }
  .sentence-preview { font-size: 1.2rem; }
  .diagnosis-panel { padding: 0.65rem; }
  .diagnosis-options { gap: 0.35rem; }
  .diagnosis-choice { flex: 1 1 78px; padding-inline: 0.4rem; }
  .choice-task { padding: 0.65rem; }
  .word-choice { min-width: 52px; padding-inline: 0.55rem; }
  .stop-choice { min-width: 70px; padding-inline: 0.55rem; }
  .repair-actions > * { flex: 1 1 calc(50% - 0.4rem); min-width: 120px; }
  .repair-actions .primary-action { margin-left: 0; }
  .boundary-zones { grid-template-columns: 1fr; }
  .boundary-zone { display: grid; grid-template-columns: minmax(82px, auto) 1fr; align-items: center; gap: 0.45rem; }
  .boundary-zone > p { min-height: 0; margin: 0; }
  .retry-options { grid-column: 1 / -1; }
  .read-panel { min-height: 410px; }
  .read-actions > * { width: 100%; }
  .finish-actions { width: 100%; }
  .finish-actions > * { width: 100%; }
  .finished-screen { align-content: start; padding: 0.7rem 0 1rem; }
  .sunrise { width: min(100%, 430px); height: 104px; margin-bottom: 0.55rem; }
  .sunrise span { left: calc(50% - 34px); width: 68px; height: 68px; }
  .finished-screen h2 { font-size: 2rem; line-height: 1.05; }
  .finished-screen > p { margin: 0.45rem 0; line-height: 1.35; }
  .finish-fact { padding: 0.55rem 0.7rem; }
  .adult-transfer { margin-top: 0.6rem; }
}

@media (max-height: 470px) and (orientation: landscape) {
  .game-bar { min-height: 54px; padding-block: 0.2rem; }
  #game { min-height: calc(100svh - 54px); }
  .start-screen { min-height: calc(100svh - 54px); padding: 0.55rem 1rem; grid-template-columns: 1fr; }
  #start-screen .route-label,.lead,.boundary-demo,.station-poster { display: none; }
  h1 { margin-bottom: 0.35rem; font-size: 2.6rem; line-height: 1; }
  h1 br { display: none; }
  .start-rule { margin-bottom: 0.45rem; font-size: 0.82rem; line-height: 1.3; }
  .grown-up-note { margin-top: 0.35rem; }
  .journey-screen { min-height: calc(100svh - 54px); grid-template-columns: minmax(0, 1fr); }
  .journey-world { display: none; }
  .work-card { min-height: calc(100svh - 54px); padding: 0.2rem 0.75rem 0.25rem; }
  .task-context { top: 54px; }
  #station-number { display: none; }
  .card-heading h2 { font-size: 1.2rem; }
  .card-heading .text-button { min-height: 44px; }
  .task-prompt { display: block; margin: 0.05rem 0 0.15rem; font-size: 0.76rem; line-height: 1.15; }
  .sentence-board { margin-bottom: 0.15rem; padding: 0.2rem; }
  .platform-label { min-height: 26px; font-size: 0.58rem; }
  .sentence-preview { font-size: 1rem; line-height: 1.1; }
  .diagnosis-panel { display: grid; padding: 0.3rem; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.4rem; row-gap: 0.2rem; }
  .diagnosis-panel fieldset { grid-column: 1 / -1; }
  .diagnosis-panel legend { font-size: 0.84rem; line-height: 1.1; }
  .diagnosis-options { margin-top: 0.15rem; }
  .diagnosis-choice { min-height: 44px; padding-block: 0.35rem; }
  .diagnosis-panel .feedback { min-height: 0; margin: 0; padding-block: 0.1rem; font-size: 0.68rem; line-height: 1.1; }
  .diagnosis-panel > .primary-action { width: auto; min-height: 44px; padding-inline: 0.65rem; }
  .choice-task { margin-top: 0.4rem; padding: 0.4rem; }
  .choice-task h3 { font-size: 0.9rem; }
  .word-options,.stop-options { margin-top: 0.35rem; }
  .word-choice,.stop-choice { min-height: 44px; }
  .feedback { min-height: 42px; margin: 0.4rem 0; padding: 0.4rem 0.6rem; font-size: 0.86rem; }
  .help-panel { margin-top: 0.35rem; padding: 0.4rem; }
  .read-panel { min-height: 390px; }
  .read-note { margin: 0.25rem 0 0.55rem; }
  .completion-screen,.finished-screen { min-height: calc(100svh - 54px); padding: 0.7rem 0; scroll-margin-top: 54px; }
  .finished-screen { align-content: start; gap: 0.2rem; padding: 0.35rem 0.6rem 0.7rem; }
  .finished-screen .sunrise { display: none; }
  .finished-screen .route-label { margin: 0; }
  .finished-screen h2 { font-size: 1.45rem; line-height: 1.05; }
  .finished-screen > p { margin: 0.12rem 0; font-size: 0.78rem; line-height: 1.15; }
  .finished-screen .finish-fact { padding: 0.25rem 0.5rem; }
  .finished-screen .finish-actions { justify-content: center; gap: 0.35rem; }
  .finished-screen .finish-actions > * { padding: 0.4rem 0.65rem; }
  .finished-screen .adult-transfer { margin-top: 0.2rem; font-size: 0.76rem; }
  .pause-panel { inset-block-start: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .train.is-moving { transform: none; }
  .read-word.is-reading { border-color: var(--green); }
}