/* Growing Wise Little Adventures. Loaded only by game.html, and every rule is
   scoped under .gw-game, so the teaser page and blog keep using styles.css. */

.gw-game {
  --gw-bg: #f8f5ed;
  --gw-ink: #254537;
  --gw-text: #2c4f35;
  --gw-muted: #5d6e5d;
  --gw-eyebrow: #5a6e4e;
  --gw-green: #355e42;
  --gw-green-dark: #284d34;
  --gw-green-shadow: #203e2a;
  --gw-line: #dddccd;
  --gw-card: #fffdfa;
  --gw-card-line: #e0e4d6;
  --gw-scene: #f0e7cf;
  --gw-scene-img: #eaddc5;
  --gw-sun: #db982d;
  --gw-pill: #f4e3ac;
  --gw-pill-ink: #6b4f14;
  --gw-outcome: #eef4e5;
  --gw-focus: #a44919;
  --gw-error: #a3331a;

  margin: 0;
  min-height: 100vh;
  background: var(--gw-bg);
  color: var(--gw-ink);
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

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

.gw-game [hidden] { display: none !important; }

html:has(body.gw-game) { background: #f8f5ed; scroll-padding-top: 16px; }

.gw-game button,
.gw-game input,
.gw-game textarea { font: inherit; }
.gw-game button,
.gw-game a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gw-game button { cursor: pointer; min-height: 44px; }
.gw-game button:disabled { opacity: 0.6; cursor: default; }
.gw-game a { color: #315c40; }
.gw-game p { line-height: 1.6; }

.gw-game :focus-visible { outline: 3px solid var(--gw-focus); outline-offset: 4px; }
/* Headings receive focus so screen readers announce each new step; they
   aren't interactive, so they don't need a visible focus ring. */
.gw-game [tabindex="-1"]:focus { outline: none; }

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

.gw-game .gw-skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 50;
  background: var(--gw-green);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
}
.gw-game .gw-skip-link:focus { top: 12px; }

/* ---------- Header ---------- */

.gw-game .gw-header {
  max-width: 1360px;
  margin: 0 auto;
  min-height: 90px;
  padding: 16px 40px;
  padding-top: max(16px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--gw-line);
}

/* Same brand as the growing-wise.com header. */
.gw-game .gw-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  text-decoration: none;
  color: #253128;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
.gw-game .gw-brand-name { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.65; white-space: nowrap; }
.gw-game .gw-brand-tagline { display: block; font-size: 0.75rem; font-weight: 650; color: #68736b; letter-spacing: 0; line-height: 1.65; }

/* ---------- Buttons ---------- */

.gw-game .gw-outline {
  border: 1px solid #b7c4ab;
  background: transparent;
  color: #31583e;
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 0.9rem;
  min-height: 44px;
}
.gw-game .gw-outline:hover { background: #edf2e5; }

.gw-game .gw-primary {
  display: block;
  border: 0;
  background: var(--gw-green);
  color: #fff;
  border-radius: 12px;
  width: 100%;
  padding: 16px 20px;
  min-height: 50px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 20px;
  box-shadow: 0 3px 0 var(--gw-green-shadow);
}
.gw-game .gw-primary:hover { background: var(--gw-green-dark); }
.gw-game .gw-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gw-green-shadow); }

.gw-game .gw-wide { width: 100%; margin-top: 14px; }

.gw-game .gw-text-button {
  border: 0;
  background: transparent;
  color: #3f633e;
  padding: 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 0.9rem;
}

/* ---------- Layout ---------- */

.gw-game .gw-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 28px calc(32px + env(safe-area-inset-bottom));
}
.gw-game .gw-main:focus { outline: none; }

.gw-game .gw-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.gw-game .gw-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gw-eyebrow);
  margin: 0 0 10px;
}

.gw-game h1 { font: 500 clamp(1.7rem, 3vw, 2.4rem)/1.2 Georgia, serif; margin: 0; color: var(--gw-ink); }
.gw-game h2 { font: 500 1.8rem/1.2 Georgia, serif; margin: 0 0 16px; color: var(--gw-ink); }
.gw-game h3 { font-size: 1.15rem; }

.gw-game .gw-sticker-count {
  margin: 0;
  background: var(--gw-pill);
  border-radius: 25px;
  padding: 12px 18px;
  color: var(--gw-pill-ink);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  line-height: 1.3;
}

.gw-game .gw-progress { display: flex; gap: 12px; margin: 24px 0 0; }
.gw-game .gw-progress > span {
  flex: 1 1 0%;
  border-bottom: 3px solid #dbdfd1;
  padding: 12px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5f7057;
  font-size: 0.9rem;
  min-width: 0;
}
.gw-game .gw-progress > span.is-active { border-color: #355d3e; color: #284c33; }
.gw-game .gw-progress > span.is-done { border-color: #cda239; }
.gw-game .gw-progress b {
  border: 1px solid #afc29e;
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-weight: 400;
}
.gw-game .gw-progress .is-done b { background: var(--gw-pill); border-color: #cda239; color: var(--gw-pill-ink); }
.gw-game .gw-progress .is-active b,
.gw-game .gw-progress .is-active.is-done b { background: #355d3e; color: #fff; border-color: #355d3e; }


/* ---------- Story card ---------- */

.gw-game .gw-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--gw-card);
  border: 1px solid var(--gw-card-line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 9px 40px rgba(51, 70, 35, 0.035);
}

.gw-game .gw-scene {
  margin: 0;
  position: relative;
  min-width: 0;
  min-height: 560px;
  background: var(--gw-scene);
  overflow: hidden;
}

/* The illustration fills the left panel. Pictures are scaled, never
   stretched; each scenario can set a focal point so the characters stay in
   view when the panel's shape differs from the picture's. */
/* --gw-scrim is the darkness of the fade behind the caption; the contrast
   test reads the same value. */
.gw-game .gw-scene-frame { position: absolute; inset: 0; overflow: hidden; background: var(--gw-scene-img); --gw-scrim: 0.8; }
.gw-game .gw-scene-frame::after {
  content: "";
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(to bottom, rgba(24, 38, 28, 0) 0%, rgba(24, 38, 28, var(--gw-scrim)) 100%);
  pointer-events: none;
}
.gw-game .gw-scene-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* The portrait illustrations have a white border with dark corners baked
   into the files; a slight zoom keeps it out of view. */
.gw-game .gw-scene-frame.is-portrait .gw-scene-image { transform: scale(1.07); }
/* Scenarios with fit: "contain" show the whole picture; a blurred, enlarged
   copy of it fills the space around it instead of plain bars. */
.gw-game .gw-scene-frame.is-contain::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: var(--gw-scene-bg) center / cover no-repeat;
  filter: blur(24px) saturate(1.1);
  opacity: 0.85;
}
.gw-game .gw-scene-frame.is-contain .gw-scene-image { position: relative; object-fit: contain; object-position: 50% 30%; }

.gw-game .gw-scene-tag {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 2;
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fffdf8;
  color: #283a2c;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(30, 40, 30, 0.08);
}

.gw-game .gw-scene-overlay {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 32px;
  z-index: 2;
  display: block;
}

.gw-game .gw-bubble {
  display: block;
  background: rgba(255, 252, 244, 0.97);
  border-radius: 22px;
  padding: 22px 32px 24px;
  box-shadow: 0 10px 30px rgba(20, 30, 20, 0.12);
}
.gw-game .gw-bubble-name {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  color: #7a5e2f;
}
.gw-game .gw-bubble-text { display: block; font: 600 1.75rem/1.3 Georgia, serif; margin: 10px 0 0; color: #1f3326; }

.gw-game .gw-scene-caption {
  display: block;
  margin: 18px 0 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.gw-game .gw-panel { padding: 40px 44px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.gw-game .gw-scenario-title { margin-bottom: 12px; }

.gw-game .gw-description { font-size: 1rem; color: var(--gw-muted); line-height: 1.65; margin: 0 0 22px; }
.gw-game .gw-prompt {
  font: 600 1.1rem/1.5 ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  color: #3f5a40;
  margin: 0 0 20px;
}

.gw-game .gw-choices { display: grid; gap: 12px; }
.gw-game .gw-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
  border: 1px solid #d7dfcc;
  background: var(--gw-card);
  border-radius: 14px;
  padding: 17px 16px;
  color: var(--gw-text);
  line-height: 1.5;
  min-height: 68px;
  transition: background 0.15s, transform 0.15s;
  overflow-wrap: anywhere;
}
.gw-game .gw-choice:hover { background: #f1f5e8; transform: translateX(2px); }
.gw-game .gw-choice:disabled { opacity: 0.55; transform: none; }
.gw-game .gw-choice-icon { font-size: 1.5rem; flex: 0 0 38px; text-align: center; line-height: 1; }
.gw-game .gw-choice-text { font-size: 1rem; font-weight: 600; min-width: 0; }

.gw-game .gw-outcome {
  background: var(--gw-outcome);
  padding: 20px;
  border-radius: 14px;
  margin: 0 0 20px;
  color: #36543a;
  line-height: 1.65;
}
.gw-game .gw-outcome strong { display: block; margin-bottom: 6px; }
.gw-game .gw-outcome p { margin: 0; }

.gw-game .gw-celebration { text-align: center; margin: 8px 0 24px; }
.gw-game .gw-sticker-award-emoji {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 6px double #d7aa37;
  border-radius: 50%;
  background: #f7df94;
  font-size: 2rem;
  margin: 8px;
}
.gw-game .gw-celebration .gw-sticker-award-emoji { width: 100px; height: 100px; font-size: 2.6rem; margin: 0 0 14px; }
.gw-game .gw-sticker-award-emoji.is-new { animation: gw-pop 0.35s ease-out; }
.gw-game .gw-sticker-name { font: 600 clamp(1.8rem, 3vw, 2.3rem)/1.15 Georgia, serif; margin: 0 0 10px; color: #1f3326; }
.gw-game .gw-cheer { color: var(--gw-muted); font-size: 1.05rem; line-height: 1.6; margin: 0 auto; max-width: 22em; }
.gw-game .gw-talk { text-align: center; padding: 22px 24px; }
.gw-game .gw-talk strong { font-size: 1.15rem; color: #2a4a33; margin-bottom: 10px; }
.gw-game .gw-talk p { font-size: 1.05rem; color: #3d5a42; }
.gw-game .gw-talk + .gw-primary,
.gw-game .gw-book-card + .gw-primary { margin-top: 24px; }
.gw-game .gw-book-card {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px;
  background: var(--gw-card); border: 1px solid var(--gw-card-line); border-radius: 16px;
  color: var(--gw-text); text-decoration: none; text-align: left;
}
.gw-game .gw-book-card:hover { border-color: var(--gw-green); }
.gw-game .gw-book-card:focus-visible { outline: 3px solid var(--gw-focus); outline-offset: 2px; }
.gw-game .gw-book-cover { flex: 0 0 auto; width: 64px; height: 84px; object-fit: cover; border-radius: 6px; background: var(--gw-scene-img); }
.gw-game .gw-book-text { display: grid; gap: 2px; min-width: 0; }
.gw-game .gw-book-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gw-eyebrow); }
.gw-game .gw-book-text strong { font-size: 1.02rem; color: var(--gw-ink); }
.gw-game .gw-book-author { font-size: .88rem; color: var(--gw-muted); }
.gw-game .gw-talk-list { margin: 0; padding-left: 1.4em; text-align: left; font-size: 1.05rem; color: #3d5a42; display: grid; gap: 10px; }
.gw-game .gw-outcome .gw-prompt { margin: 0 0 8px; }
.gw-game .gw-outcome p + p { margin-top: 8px; }
.gw-game .gw-outcome + .gw-primary { margin-top: 20px; }

/* The one message every path of a scenario comes back to (message nodes
   with variant "key"). Set apart by size and a border, not colour alone. */
.gw-game .gw-key-message {
  background: var(--gw-pill);
  border: 2px solid var(--gw-sun);
  border-radius: 18px;
  padding: 24px 22px;
  text-align: center;
  display: grid;
  gap: 12px;
}
.gw-game .gw-key-title {
  font: 600 clamp(1.6rem, 5vw, 2.1rem)/1.2 Georgia, serif;
  color: var(--gw-ink);
  margin: 0;
}
.gw-game .gw-key-message p { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--gw-pill-ink); }
.gw-game .gw-key-message + .gw-primary { margin-top: 20px; }

.gw-game .gw-stickers {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 18px 0;
}
.gw-game .gw-stickers li { display: flex; flex-direction: column; align-items: center; width: 110px; }
.gw-game .gw-sticker-label { font-size: 0.85rem; font-weight: 600; color: var(--gw-muted); text-align: center; }


/* ---------- Breathing ---------- */

.gw-game .gw-breath {
  width: 110px;
  height: 110px;
  margin: 30px auto;
  border: 8px solid #d5e5c6;
  background: #597f45;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  animation: gw-breathe 8s ease-in-out infinite;
}
.gw-game .gw-breath.is-still { animation: none; }
.gw-game .gw-breath-steps { margin: 0 0 8px; padding-left: 1.2em; color: var(--gw-muted); line-height: 1.6; }
.gw-game .gw-breath-count { text-align: center; font-weight: 700; color: var(--gw-muted); min-height: 1.6em; margin: 0; }

@keyframes gw-pop {
  0% { transform: scale(0.7); }
  100% { transform: scale(1); }
}
@keyframes gw-breathe {
  0%, 100% { transform: scale(0.8); }
  50% { transform: scale(1.15); }
}

/* ---------- Form pages ---------- */

.gw-game .gw-form-page {
  max-width: 660px;
  margin: 12px auto;
  background: var(--gw-card);
  border: 1px solid #e1e2d5;
  border-radius: 22px;
  padding: 32px;
}
.gw-game .gw-form-page h1 { margin-bottom: 18px; }

.gw-game .gw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gw-game .gw-field { margin-bottom: 18px; }
.gw-game .gw-form label,
.gw-game .gw-form legend { display: block; font-weight: 600; line-height: 1.5; margin-bottom: 8px; }

.gw-game .gw-form input[type="number"],
.gw-game .gw-form input[type="text"],
.gw-game .gw-form input[type="email"],
.gw-game .gw-form textarea {
  display: block;
  width: 100%;
  border: 1px solid #bfcab1;
  border-radius: 10px;
  background: #fff;
  padding: 13px;
  color: #294532;
  min-height: 48px;
  font-size: 16px;
  scroll-margin: 16px 0 140px;
}
.gw-game .gw-form textarea { resize: vertical; }
.gw-game .gw-form input[aria-invalid="true"] { border: 2px solid var(--gw-error); }

.gw-game .gw-choice-group { border: 0; padding: 0; margin: 26px 0; min-width: 0; }
.gw-game .gw-radio-options { display: flex; gap: 10px; }
.gw-game .gw-radio-options label { flex: 1 1 0%; position: relative; margin: 0; font-weight: 500; }
.gw-game .gw-radio-options input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  scroll-margin: 16px 0 140px;
}
.gw-game .gw-radio-options span {
  display: grid;
  place-items: center;
  border: 1px solid #bdcbb1;
  border-radius: 10px;
  padding: 12px 6px;
  min-height: 48px;
  background: #fff;
}
.gw-game .gw-radio-options input:checked + span { background: #e5efd9; border: 2px solid #456d40; padding: 11px 5px; font-weight: 700; }
.gw-game .gw-radio-options input:focus-visible + span { outline: 3px solid var(--gw-focus); outline-offset: 3px; }
.gw-game .gw-choice-group[aria-invalid="true"] .gw-radio-options span { border-color: var(--gw-error); }

.gw-game .gw-muted { color: #5f6e57; font-weight: 400; }
.gw-game .gw-field-error { color: var(--gw-error); font-weight: 700; font-size: 0.95rem; margin: 6px 0 0; }
.gw-game .gw-form-status { font-weight: 700; color: var(--gw-green-dark); margin: 14px 0 0; }
.gw-game .gw-form-status.is-error { color: #7a4f0a; }

.gw-game .gw-resource-card,
.gw-game .gw-signup-card { padding: 24px; background: #edf3e3; border-radius: 16px; margin: 24px 0; }
.gw-game .gw-signup-card { background: #f8f0dc; }
.gw-game .gw-resource-card h2,
.gw-game .gw-signup-card h2 { font-size: 1.5rem; }
.gw-game .gw-resource-card p,
.gw-game .gw-signup-card p { margin: 10px 0 18px; }
.gw-game .gw-consent { font-size: 0.85rem; color: #5c5842; }

.gw-game .gw-end-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 28px 0 0;
  font-size: 0.9rem;
}
.gw-game .gw-end-links a { display: inline-flex; align-items: center; min-height: 44px; }

.gw-game .gw-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  color: #5a6a4d;
  font-size: 0.85rem;
}
.gw-game .gw-footer-end { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px 12px; }
.gw-game .gw-footer-button {
  border: 0;
  background: transparent;
  color: #2f4a35;
  padding: 10px 6px;
  font-size: 1rem;
}
.gw-game .gw-footer-end .gw-footer-button { font-size: 0.85rem; text-decoration: underline; text-underline-offset: 4px; color: #3f633e; }
.gw-game .gw-footer-button:hover { color: var(--gw-green-dark); }

/* ---------- Grown-ups dialog ---------- */

.gw-game .gw-dialog {
  border: 0;
  border-radius: 22px;
  max-width: 500px;
  width: calc(100% - 32px);
  max-height: 85dvh;
  padding: 32px;
  color: #294632;
  background: var(--gw-card);
  box-shadow: 0 15px 80px rgba(0, 0, 0, 0.2);
}
.gw-game .gw-dialog::backdrop { background: rgba(18, 56, 32, 0.53); }
.gw-game .gw-dialog p { font-size: 0.95rem; }
.gw-game .gw-dialog h3 { margin: 22px 0 6px; }
.gw-game .gw-dialog-story { background: var(--gw-outcome); border-radius: 14px; padding: 4px 18px; margin: 18px 0; }
.gw-game .gw-dialog-story h3 { margin-top: 14px; }
.gw-game .gw-close { float: right; border: 0; background: none; color: #34533a; min-width: 44px; font-size: 1.2rem; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .gw-game .gw-scene { min-height: 560px; }
  .gw-game .gw-scene-overlay { left: 24px; right: 24px; bottom: 24px; }
  .gw-game .gw-bubble { padding: 18px 22px; }
  .gw-game .gw-bubble-text { font-size: 1.4rem; }
  .gw-game .gw-panel { padding: 28px; }
}

/* Narrow tablets and phones: picture above the story, so the illustration
   keeps a landscape shape instead of a tall, heavily cropped strip. */
@media (max-width: 900px) {
  .gw-game .gw-card { grid-template-columns: 1fr; }
  .gw-game .gw-scene { min-height: 0; overflow: visible; }
  .gw-game .gw-scene-frame { position: relative; inset: auto; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; }
  .gw-game .gw-scene-frame::after { display: none; }
  .gw-game .gw-scene-tag { top: 16px; left: 16px; }
  .gw-game .gw-scene-overlay { position: static; padding: 16px 20px 20px; }
  .gw-game .gw-bubble { box-shadow: none; border: 1px solid #e6dec8; }
  .gw-game .gw-scene-caption { color: #4f5a45; text-shadow: none; margin-top: 12px; }
}

@media (max-width: 760px) {
  .gw-game .gw-header { padding: 12px 18px; min-height: 76px; }
  .gw-game .gw-brand-name { font-size: 1.15rem; }
  .gw-game .gw-outline { padding: 10px 13px; font-size: 0.85rem; }
  .gw-game .gw-main { padding: 24px 16px; }
  .gw-game .gw-scene-tag { top: 14px; left: 14px; padding: 8px 14px; font-size: 0.8rem; }
  .gw-game .gw-scene-overlay { padding: 14px 16px 18px; }
  .gw-game .gw-bubble { padding: 14px 18px; }
  .gw-game .gw-bubble-text { font-size: 1.25rem; }
  .gw-game .gw-scene-caption { font-size: 0.95rem; }
  .gw-game .gw-sticker-name { font-size: 2rem; }
  .gw-game .gw-intro { gap: 12px; align-items: flex-start; }
  .gw-game .gw-sticker-count { padding: 10px; font-size: 0.8rem; }
  .gw-game .gw-progress { gap: 6px; margin-top: 20px; }
  .gw-game .gw-progress > span { font-size: 0.8rem; gap: 6px; align-items: flex-start; line-height: 1.5; }
  .gw-game .gw-progress b { width: 24px; height: 24px; font-size: 0.8rem; }
  .gw-game .gw-panel { padding: 22px 18px; }
  .gw-game .gw-form-page { padding: 24px 18px; }
  .gw-game .gw-form-row { grid-template-columns: 1fr; gap: 0; }
  .gw-game .gw-resource-card,
  .gw-game .gw-signup-card { padding: 20px 16px; }
  .gw-game .gw-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 4px; }
  .gw-game .gw-footer-end { justify-content: center; }
  .gw-game .gw-radio-options { gap: 6px; }
  .gw-game h2 { font-size: 1.6rem; }
}

@media (max-width: 360px) {
  .gw-game .gw-header { gap: 8px; padding: 12px; }
  .gw-game .gw-intro { flex-wrap: wrap; }
  .gw-game .gw-progress > span { flex-direction: column; }
  .gw-game .gw-radio-options { flex-wrap: wrap; }
  .gw-game .gw-radio-options label { min-width: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .gw-game *,
  .gw-game *::before,
  .gw-game *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------- End-of-game: reward first
   Completion stays compact so the reward card is visible on a phone without
   scrolling, and the questions only appear once the parent asks for them. */
.gw-done { text-align: center; }
.gw-done .gw-stickers { margin: 14px 0 6px; }
.gw-done-summary { margin: 4px 0 0; color: var(--gw-muted); font-size: .95rem; }

/* A gift from Growing Wise, not an advert: warm highlight, no urgency. */
.gw-reward {
  display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start;
  margin: 22px 0 0; padding: 20px;
  background: #fdf6e8; border: 1px solid #ecdcc0; border-radius: 20px;
}
.gw-reward-art { position: relative; height: 110px; }
.gw-reward-sheet {
  position: absolute; width: 62px; height: 84px; border-radius: 8px;
  background: #fff; border: 1px solid #e6d8c3; box-shadow: 0 6px 14px rgba(60,48,30,.10);
}
.gw-reward-sheet-a { left: 2px;  top: 14px; transform: rotate(-8deg); }
.gw-reward-sheet-b { left: 14px; top: 10px; transform: rotate(4deg); }
.gw-reward-sheet-c {
  left: 26px; top: 6px; transform: rotate(-2deg);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.gw-reward-kicker {
  margin: 0 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #9a7433;
}
.gw-reward-title { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.25; }
.gw-reward-text { margin: 0 0 10px; color: var(--gw-muted); font-size: .95rem; }
.gw-reward-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 5px; }
.gw-reward-list li { position: relative; padding-left: 22px; font-size: .94rem; }
.gw-reward-list li::before { content: "✓"; position: absolute; left: 0; color: #5f8a63; font-weight: 800; }
.gw-reward-ask { margin: 0 0 14px; font-size: .92rem; color: var(--gw-text); }

/* Quick-tap questions */
.gw-quick-head { text-align: center; margin-bottom: 18px; }
.gw-quick-head h3 { margin: 0 0 4px; }
.gw-quick-head p { margin: 0; color: var(--gw-muted); font-size: .93rem; }
.gw-q { border: 0; padding: 0; margin: 0 0 20px; }
.gw-q legend { padding: 0; margin-bottom: 10px; font-weight: 700; font-size: 1rem; }
.gw-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.gw-chip {
  flex: 1 1 auto; min-width: 84px; min-height: 52px; padding: 12px 18px;
  border: 2px solid #d9cdb8; border-radius: 999px; background: #fff;
  font: inherit; font-weight: 650; color: var(--gw-ink); cursor: pointer;
}
.gw-chip:hover { border-color: var(--gw-green); }
.gw-chip:focus-visible { outline: 3px solid var(--gw-green); outline-offset: 2px; }
/* Selected state is colour plus a tick, never colour alone. */
.gw-chip[aria-pressed="true"] {
  background: var(--gw-green); border-color: var(--gw-green); color: #fff;
}
.gw-chip[aria-pressed="true"]::before { content: "✓ "; font-weight: 800; }
.gw-chip-quiet { flex: 1 1 100%; font-weight: 600; color: var(--gw-muted); }

.gw-quick-email { margin-top: 26px; }
.gw-quick-email label { display: block; font-weight: 700; margin-bottom: 8px; }
.gw-optin {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px;
  font-weight: 400; font-size: .92rem; color: var(--gw-text); cursor: pointer;
}
.gw-optin input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; }

.gw-success { text-align: center; }
.gw-success h3 { margin: 0 0 8px; font-size: 1.3rem; }
.gw-success h3:focus-visible { outline: 3px solid var(--gw-green); outline-offset: 4px; }
.gw-success-actions { display: grid; gap: 10px; margin: 20px 0 0; }

/* The Explorer Pack thank-you, shown after the feedback form. */
.gw-game .gw-success { text-align: left; }
.gw-game .gw-pack-brand { margin: 0 0 6px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gw-muted); }
.gw-game .gw-success h3#feedback-success-title { font: 500 clamp(1.7rem, 4.5vw, 2.1rem)/1.2 Georgia, serif; color: var(--gw-ink); margin: 0 0 14px; }
.gw-game .gw-pack-explored, .gw-game .gw-pack-lede { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.6; color: var(--gw-ink); }
.gw-game .gw-pack { background: var(--gw-outcome); border-radius: 14px; padding: 20px 22px; margin: 18px 0 4px; }
.gw-game .gw-pack-kicker { margin: 0 0 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gw-pill-ink); }
.gw-game .gw-pack-title { margin: 0 0 10px; font-size: 1.25rem; font-weight: 700; color: var(--gw-ink); }
.gw-game .gw-pack-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; font-size: 1.02rem; color: var(--gw-ink); }
.gw-game .gw-pack-list li::before { content: "\2713"; margin-right: 10px; font-weight: 700; color: var(--gw-green); }
.gw-game .gw-pack-button { display: inline-block; text-decoration: none; width: auto; padding-inline: 26px; }
.gw-game .gw-success-actions > * { text-align: center; }
.gw-last-thing { margin-top: 26px; text-align: left; }
.gw-last-thing summary { cursor: pointer; color: var(--gw-muted); font-size: .92rem; padding: 10px 0; min-height: 44px; }
.gw-last-thing label { display: block; margin: 8px 0; font-weight: 700; }

@media (max-width: 560px) {
  /* Art above the words would push the CTA off screen, so it sits inline. */
  .gw-reward { grid-template-columns: 74px 1fr; gap: 14px; padding: 16px; }
  .gw-reward-art { height: 92px; }
  .gw-reward-sheet { width: 50px; height: 68px; }
  .gw-reward-sheet-c { font-size: 24px; }
  .gw-chip { min-width: 0; flex: 1 1 calc(50% - 10px); }
}

/* ------------------------------------- Mobile: get the reward above the fold
   Measured on a 568px-tall viewport the CTA sat at 1414px, over two screens
   down, because the brand bar wrapped, the stickers stacked and the reward
   list was very airy. These trim roughly 500px without losing anything. */
@media (max-width: 560px) {
  .game-brandbar { padding: 10px 0; }
  .game-brandbar-inner { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .game-brandbar-sub { display: none; }
  .gw-done { margin-top: 4px; }
  .gw-done .gw-stickers {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 10px 0 4px;
  }
  /* Three across in one row: any wider and the third wraps, costing ~140px. */
  .gw-done .gw-stickers { gap: 6px; }
  .gw-done .gw-stickers li { flex: 0 0 auto; width: 30%; max-width: 104px; }
  .gw-done .gw-stickers .gw-sticker-award-emoji { width: 54px; height: 54px; font-size: 1.6rem; }
  .gw-done .gw-sticker-label { font-size: .78rem; line-height: 1.25; }
  .gw-reward-list { gap: 2px; }
  .gw-reward-list li { font-size: .9rem; line-height: 1.35; }
  .gw-reward-title { font-size: 1.05rem; }
  .gw-reward-text, .gw-reward-ask { font-size: .9rem; margin-bottom: 8px; }
  .gw-reward { margin-top: 16px; padding: 14px; }
  .gw-done .gw-done-summary { margin-top: 2px; }
}