/* runner.css — Word Runner (/games/runner/). Loaded after main.css, so the site's
   tokens (--cream, --ink, the section inks) are the palette here too. Everything
   is prefixed rn- so none of it can reach a pack page, and none of main.css's
   component classes can reach the game.
   The canvas scene keeps the lavender road of the Bearry artwork — the hills and
   mountains were painted for it — while every piece of DOM chrome (HUD, cards,
   buttons) is the site's cream paper, brown ink and blue action colour. */

.rn-body {
  margin: 0;
  line-height: 1.45;
  overscroll-behavior: none;
}
/* :where() keeps this at zero specificity. As `.rn-body button` it was (0,1,1)
   and beat `.rn-btn-primary { color: #fff }` (0,1,0) — the start button came
   out brown on blue. */
.rn-body :where(button, select) { font: inherit; color: inherit; }

main.rn-page {
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 20px;
  display: grid;
  place-items: center;
}

.rn-phone {
  position: relative;
  width: min(100%, 414px);
  height: min(880px, calc(100dvh - 40px));
  min-height: 600px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--cream);
  border: 2px solid var(--divider);
  box-shadow: 0 18px 45px rgba(74, 63, 53, 0.16);
  isolation: isolate;
}
/* Phone-sized viewport (and always inside the popup, whose frame already has
   the rounded edge): the game is the whole screen. */
@media (max-width: 460px) {
  main.rn-page { padding: 0; }
  .rn-phone { width: 100%; height: 100dvh; min-height: 560px; border: 0; border-radius: 0; box-shadow: none; }
}
.is-embed, .is-embed body { height: 100%; }
.is-embed main.rn-page { padding: 0; height: 100%; min-height: 0; }
.is-embed .rn-phone { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }

/* Opaque: main.css draws its graph paper on a fixed layer behind the body, and
   it showed through wherever a screen had no fill of its own. */
.rn-screen { position: absolute; inset: 0; display: none; background: var(--cream); }
.rn-screen.is-active { display: flex; }

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

/* ---- shared controls ---- */
.rn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}
/* --vocab-ink, not --vocab-accent: white on the accent is 3.6:1, on the ink 6.9:1 */
.rn-btn-primary { background: var(--vocab-ink); color: #fff; box-shadow: 0 4px 0 #234a6e; }
.rn-btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #234a6e; }
.rn-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.rn-btn-secondary { background: #fff; color: var(--vocab-ink); border-color: var(--vocab-accent); }
.rn-btn-ghost { background: transparent; color: var(--ink-soft); }
.rn-body :focus-visible { outline: 3px solid var(--vocab-accent); outline-offset: 2px; }

.rn-icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--divider);
  background: #fff;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
}
.rn-icon-btn .rn-sound-off { display: none; }
.rn-icon-btn[data-on="false"] .rn-sound-on { display: none; }
.rn-icon-btn[data-on="false"] .rn-sound-off { display: inline; }

.rn-eyebrow {
  margin: 0 0 2px;
  font-family: 'Nunito', -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- menu ---- */
/* The menu is a scrolling body over a pinned foot that holds the start button.
   On an iPhone the popup leaves the game ~475px and the menu is ~700px: with
   the button at the end of the scroll, the one thing you came to press was
   below the fold. */
.rn-menu { flex-direction: column; overflow: hidden; }
.rn-menu-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: max(18px, env(safe-area-inset-top)) 20px 14px;
}
.rn-menu-foot {
  flex: none;
  padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 1.5px solid var(--divider);
}
/* In the popup the title repeats nothing the player needs, and the back link
   is the popup's close. What is left of the top row floats over the hero. */
.is-embed .rn-menu-body { padding-top: 0; }
.is-embed .rn-eyebrow, .is-embed .rn-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.is-embed .rn-menu-top { position: absolute; z-index: 5; top: 12px; left: 12px; right: 12px; margin: 0; }
.is-embed .rn-hero { margin-top: 0; }
/* The title again, painted into the sky. Only in the popup — the standalone
   page has the real one above the hero. It sits between the clouds and the
   mountains in paint order, so a short hero simply hides it behind them. */
.rn-hero-title { display: none; }
.is-embed .rn-hero-title {
  display: block;
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Nunito', -apple-system, sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rn-hero-title span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rn-menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#rnMenuSound { margin-left: auto; }
.rn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--vocab-ink);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}
.rn-title {
  margin: 0;
  font-family: 'Nunito', -apple-system, sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* The hero is the scene the game is played in, built from the same artwork:
   sky, clouds, the lavender mountains, the green hills, trees and grass, with
   the road laid over them. The two landscape strips are 1600×600 with their
   ridge 54–69% of the way down and an opaque bottom edge, so they are sized
   from the bottom: at height H the ridge stands about 0.44·H above the hero's
   bottom edge. The road's far end is 162px up, the hills' ridge just above it
   and the mountains' behind that, which leaves sky above for the clouds even
   at the hero's minimum height. */
.rn-hero {
  position: relative;
  flex: 1 1 250px;
  min-height: 210px;
  margin: 6px -20px 0;
  overflow: hidden;
  background: linear-gradient(#dff4fb, #f3ecfb 70%, #f6e9ff);
  border-radius: 0 0 22px 22px;
}
.rn-scene { position: absolute; display: block; pointer-events: none; user-select: none; }
.rn-hero .rn-mountains { bottom: 0; left: 50%; height: 440px; transform: translateX(-50%); max-width: none; }
.rn-hero .rn-hills { bottom: 0; left: 50%; height: 385px; transform: translateX(-50%); max-width: none; }
.rn-hero .rn-cloud.c1 { top: 8px; left: 5%; width: 96px; }
.rn-hero .rn-cloud.c2 { top: 26px; right: 4%; width: 84px; }
.rn-hero .rn-cloud.c3 { top: 4px; left: 60%; width: 56px; opacity: 0.85; }
.rn-hero .rn-tree.t1 { bottom: 150px; left: 22%; height: 40px; }
.rn-hero .rn-tree.t2 { bottom: 64px; left: -1%; height: 112px; }
.rn-hero .rn-tree.t3 { bottom: 80px; right: 2%; height: 96px; }
.rn-hero .rn-grass.g1 { bottom: 26px; left: 13%; height: 38px; }
.rn-hero .rn-grass.g2 { bottom: 40px; right: 16%; height: 30px; }
.rn-hero-road {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 340px;
  height: 172px;
  transform: translateX(-50%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(#c7b7e8, #9679c6);
}
.rn-hero-gate {
  position: absolute;
  z-index: 2;
  /* From the bottom, like the road: the hero grows with the screen height and
     signs pinned to the top drifted off the far end of the road. */
  bottom: 136px;
  width: 96px;
  padding: 7px 4px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--divider);
  box-shadow: 0 3px 0 var(--divider);
  text-align: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rn-hero-gate.g-a { left: calc(50% - 124px); transform: scale(0.78); }
.rn-hero-gate.g-b { left: calc(50% - 48px); }
.rn-hero-gate.g-c { left: calc(50% + 28px); transform: scale(0.78); }
.rn-hero-bear {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  height: 128px;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 8px rgba(74, 63, 53, 0.22));
  pointer-events: none;
  user-select: none;
}

.rn-hero-copy { text-align: center; margin-top: 10px; }
.rn-hero-copy h2 { margin: 0 0 2px; font-size: 1.2rem; color: var(--ink); }
.rn-hero-copy p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

/* Setup card: one column rhythm. Every control is 48px tall and every label
   the same caption style, so the chapter select, the best score and the speed
   buttons line up edge to edge instead of floating at their own heights. */
.rn-setup {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius);
  background: #fff;
  border: 2px solid var(--vocab-accent);
}
.rn-setup-top { display: grid; grid-template-columns: 1fr 92px; gap: 10px; align-items: end; }
.rn-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rn-field-label { font-size: 0.75rem; font-weight: 800; color: var(--ink-soft); }
.rn-field select {
  height: 48px;
  padding: 0 12px;
  border: 1.5px solid var(--divider);
  border-radius: 14px;
  background: var(--vocab);
  font-weight: 800;
  color: var(--ink);
}
.rn-best { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.rn-best strong {
  display: grid;
  place-items: center;
  height: 48px;
  border-radius: 14px;
  background: var(--quiz);
  color: var(--quiz-ink);
  font-family: 'Nunito', -apple-system, sans-serif;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.rn-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--chip-bg);
  border: 1.5px solid var(--divider);
}
.rn-seg button {
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
}
.rn-seg button[aria-checked="true"] { background: #fff; color: var(--vocab-ink); box-shadow: 0 2px 0 var(--divider); }
.rn-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rn-levels li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  border-radius: 12px;
  background: var(--cream);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.rn-levels b { font-family: 'Nunito', -apple-system, sans-serif; font-size: 0.7rem; color: var(--ink-soft); }
.rn-levels span { font-family: 'Nunito', -apple-system, sans-serif; font-weight: 900; color: var(--quiz-ink); }
.rn-hint { margin: -4px 0 0; text-align: center; font-size: 0.72rem; line-height: 1.6; color: var(--ink-soft); }
.rn-error { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #ffe7ec; color: #9b2c44; font-size: 0.85rem; font-weight: 700; }

/* ---- game ---- */
.rn-game { flex-direction: column; background: #dff4fb; touch-action: none; user-select: none; -webkit-user-select: none; }
#rnCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rn-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.rn-hud { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
.rn-chip {
  min-height: 46px;
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--cream);
  border: 1.5px solid #fff;
  box-shadow: 0 3px 0 rgba(74, 63, 53, 0.18);
  color: var(--ink);
}
.rn-chip small { display: block; font-size: 0.66rem; font-weight: 800; color: var(--ink-soft); }
.rn-chip strong { display: block; margin-top: 1px; font-family: 'Nunito', -apple-system, sans-serif; font-size: 1.1rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rn-hud .rn-chip:first-child { justify-self: start; }
.rn-score { text-align: center; min-width: 96px; }
.rn-combo { justify-self: end; text-align: right; }
.rn-combo.is-hot { background: var(--quiz); animation: rn-pop 0.25s ease-out; }

.rn-question {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: #fff;
  border: 2px solid var(--vocab-accent);
  text-align: center;
}
.rn-prompt-label { display: block; font-size: 0.72rem; font-weight: 800; color: var(--vocab-ink); }
.rn-question strong { display: block; margin-top: 2px; font-size: clamp(1.15rem, 5.5vw, 1.45rem); line-height: 1.3; color: var(--ink); }
.rn-prompt-ask { display: block; margin-top: 4px; font-size: 0.8rem; line-height: 1.4; color: var(--ink-soft); }
.rn-speak {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  min-height: 34px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--vocab);
  color: var(--vocab-ink);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.rn-lanes { position: absolute; inset: 31% 0 0; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: auto; }
.rn-lanes button { border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rn-lanes button:focus-visible { outline: 2px dashed rgba(255, 255, 255, 0.8); outline-offset: -8px; }

.rn-actions {
  position: absolute;
  right: 14px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}
.rn-actions .rn-icon-btn { width: 40px; height: 40px; font-size: 0.9rem; }

.rn-control-hint {
  position: absolute;
  left: 14px;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px));
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(74, 63, 53, 0.78);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  transition: opacity 0.4s ease;
}
.rn-control-hint.is-hidden { opacity: 0; }

.rn-question-wrap { position: relative; }
/* Laid over the question card it answers: the question is done with by now,
   and the road below — the bear, the gate with its ✓ — stays in view. It was
   centred on the screen and covered half the card and half the road. */
.rn-feedback {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  min-height: 100%;
  z-index: 5;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: #fff;
  border: 2px solid var(--divider);
  box-shadow: 0 16px 40px rgba(74, 63, 53, 0.22);
  text-align: center;
  opacity: 0;
  transform: scale(0.96);
  transition: 0.2s ease;
  pointer-events: none;
}
.rn-feedback.is-visible { opacity: 1; transform: none; }
.rn-feedback.is-correct { border-color: var(--grammar-accent); }
.rn-feedback.is-wrong { border-color: var(--review-accent); }
.rn-mark { width: 30px; height: 30px; display: grid; place-items: center; margin: 0 auto 4px; border-radius: 50%; font-size: 1rem; font-weight: 900; }
.is-correct .rn-mark { background: var(--grammar); color: var(--grammar-ink); }
.is-wrong .rn-mark { background: var(--review); color: var(--review-ink); }
.rn-feedback h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--ink); }
.rn-feedback p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); }

.rn-countdown.is-level { flex-direction: column; font-size: 44px; text-align: center; line-height: 1.1; }
.rn-countdown.is-level strong { display: block; }
.rn-countdown.is-level small { display: block; margin-top: 8px; font-size: 18px; font-weight: 800; }
.rn-countdown {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(74, 63, 53, 0.12);
  font-family: 'Nunito', -apple-system, sans-serif;
  font-size: 88px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 6px 22px rgba(74, 63, 53, 0.35);
}

.rn-modal {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(74, 63, 53, 0.4);
  backdrop-filter: blur(6px);
}
.rn-modal-card {
  width: 100%;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  text-align: center;
}
.rn-modal-card h2 { margin: 0 0 4px; font-size: 1.25rem; }
.rn-modal-card p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.rn-stack { display: grid; gap: 8px; margin-top: 16px; }

/* ---- result ---- */
.rn-result {
  flex-direction: column;
  overflow: auto;
  padding: max(22px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom));
}
.rn-result-hero { text-align: center; }
/* Same scenery as the menu hero, so the round ends where it started. */
.rn-result-scene {
  position: relative;
  height: 150px;
  margin: 6px -20px 0;
  overflow: hidden;
  background: linear-gradient(#dff4fb, #f6e9ff);
}
.rn-result-scene .rn-mountains { bottom: 0; left: 50%; height: 300px; transform: translateX(-50%); max-width: none; }
.rn-result-scene .rn-hills { bottom: -34px; left: 50%; height: 260px; transform: translateX(-50%); max-width: none; }
.rn-result-scene .rn-cloud.c1 { top: 12px; right: 12%; width: 84px; }
.rn-result-scene .rn-tree.t1 { bottom: 26px; left: 9%; height: 84px; }
.rn-result-scene .rn-tree.t2 { bottom: 20px; right: 8%; height: 100px; }
.rn-result-bear {
  position: absolute;
  bottom: 4px;
  left: 50%;
  height: 130px;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 8px rgba(74, 63, 53, 0.18));
}
.rn-result-hero h2 { margin: 6px 0 0; font-size: 1.3rem; }
.rn-final-score {
  font-family: 'Nunito', -apple-system, sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--quiz-ink);
  font-variant-numeric: tabular-nums;
}
.rn-final-label { font-size: 0.75rem; font-weight: 800; color: var(--ink-soft); }
.rn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.rn-stat { padding: 10px 6px; border-radius: 14px; background: #fff; border: 1.5px solid var(--divider); text-align: center; }
.rn-stat small { display: block; font-size: 0.68rem; font-weight: 800; color: var(--ink-soft); }
.rn-stat strong { display: block; margin-top: 2px; font-family: 'Nunito', -apple-system, sans-serif; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.rn-mistakes { padding: 14px; border-radius: var(--radius); background: #fff; border: 2px solid var(--review-accent); }
.rn-mistakes h3 { margin: 0 0 10px; font-size: 0.95rem; color: var(--review-ink); }
.rn-mistake-list { display: grid; gap: 8px; }
.rn-mistake {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border-radius: 12px;
  background: var(--review);
}
.rn-mistake strong { display: block; font-size: 0.92rem; color: var(--ink); }
.rn-mistake span { display: block; font-size: 0.78rem; color: var(--ink-soft); }
.rn-empty { margin: 0; font-size: 0.9rem; color: var(--grammar-ink); font-weight: 700; }

@keyframes rn-pop { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .rn-body *, .rn-body *::before, .rn-body *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}