/* ============================================================
   The Tractor Farm Adventure — UI/UX from ref.md
   Decorative farm shell + cohesive style across all screens.
   ============================================================ */

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

:root {
  --green: #70c446;
  --green-deep: #438831;
  --green-dark: #3f8c2e;
  --gold: #f4c83b;
  --blue: #42a5f5;
  --blue-dark: #1976d2;
  --ink: #21331d;
  --ink-soft: #586a54;
  --bad: #c62828;
  --good: #2e7d32;
  --card: rgba(255, 255, 255, 0.96);

  --r-md: 18px;
  --r-lg: 30px;
  --tap: 54px;

  --font: "Nunito", sans-serif;
  --display: "Baloo 2", cursive;
}

body {
  font-family: var(--font);
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, #bceeff 0%, #e8fff0 70%);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
button { font-family: inherit; cursor: pointer; }
img { display: block; }

/* ---- Shell + decorative background ---- */
.game-shell {
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Full-bleed generated farm illustration behind everything (the mockup) */
  background-image: url("assets/images/farm-bg.webp");
  background-size: cover;
  background-position: center top;
}
/* The CSS clouds/hills are no longer needed with the illustrated bg. */
.cloud,
.hill { display: none; }
.bottom-fence { display: none; }

/* ---- AppBar ---- */
.appbar {
  position: relative;
  z-index: 3;
  min-height: 64px;
  margin: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 8px 18px;
  box-shadow: 0 10px 28px rgba(43, 106, 31, 0.18);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: clamp(18px, 3.6vw, 26px);
  font-weight: 800;
  color: var(--green-deep);
  min-width: 0;
}
.brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 16px;
  background: #e7f8df;
  display: grid; place-items: center;
  font-size: 26px;
  border: none;
  box-shadow: inset 0 -3px 0 rgba(67, 136, 49, 0.12);
}
.brand-icon { overflow: hidden; }
.brand-icon__img { width: 100%; height: 100%; object-fit: contain; }
.brand-icon--back {
  cursor: pointer;
  font-size: 24px;
  transition: transform 0.15s ease;
}
.brand-icon--back:active { transform: scale(0.9); }
.brand-icon[hidden] { display: none; }
.icon-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-size: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.icon-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); }
.icon-btn:active { transform: scale(0.92); }

/* ---- Main content column ---- */
.main-content {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0; /* allow children to shrink within the fixed-height shell */
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(10px, 2.4vh, 28px) 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 1vh, 13px);
  overflow: hidden;
}
/* If a screen genuinely needs more room than the viewport (very short
   windows), allow that one screen to scroll internally rather than the page. */
.main-content.scrollable { overflow-y: auto; justify-content: flex-start; scrollbar-width: none; -ms-overflow-style: none; }
.main-content.scrollable::-webkit-scrollbar { width: 0; height: 0; }

/* ============================================================
   Shared buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap);
  padding: 0 28px;
  border: none; border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, #7bc84c, #49a832);
  box-shadow: 0 10px 18px rgba(65, 155, 42, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--blue { background: linear-gradient(135deg, #5bb6f7, #2f86d8); box-shadow: 0 10px 18px rgba(47, 134, 216, 0.28); }
.btn--ghost { background: #fff; color: var(--ink); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); }
.btn--big { min-height: 70px; font-size: 1.45rem; padding: 0 46px; }
.btn:disabled { opacity: 0.45; }

/* ============================================================
   HOME (per ref.md)
   ============================================================ */
.progress { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.progress-top { display: flex; align-items: center; gap: 10px; }
.progress-reset {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.85); color: var(--ink-soft);
  font-family: var(--font); font-weight: 800; font-size: 11px;
  padding: 3px 10px; border-radius: 99px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: color 0.15s ease, transform 0.1s ease;
}
.progress-reset svg { width: 12px; height: 12px; }
.progress-reset:hover { color: var(--bad); }
.progress-reset:active { transform: scale(0.95); }

/* ---- Player profile chip + picker ---- */
.player-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; cursor: pointer;
  background: #fff; color: var(--green-deep);
  font-family: var(--display); font-weight: 800; font-size: 12px;
  padding: 4px 11px; border-radius: 99px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  max-width: 150px;
}
.player-chip__ic { display: inline-flex; }
.player-chip__ic svg { width: 15px; height: 15px; display: block; }
.player-chip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-chip b { font-size: 10px; opacity: 0.65; }
.players-ov {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 30, 18, 0.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.players-card {
  position: relative; width: min(340px, 92vw);
  background: #fff; border-radius: 22px; padding: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  display: flex; flex-direction: column; gap: 12px;
}
.players-title { font-family: var(--display); font-size: 1.4rem; color: var(--green-dark); text-align: center; }
.players-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow: auto; }
.player-row { display: flex; gap: 8px; }
.player-row.current .player-pick { background: #eaf8e2; border-color: var(--green); }
.player-pick {
  flex: 1; text-align: left; border: 2px solid #dfe7d8; background: #fff;
  border-radius: 14px; padding: 11px 15px; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--ink);
}
.player-del { border: none; background: #fff0f0; color: var(--bad); width: 44px; border-radius: 14px; cursor: pointer; font-weight: 800; }
.player-add {
  border: none; background: linear-gradient(135deg, #7bc84c, #49a832); color: #fff; cursor: pointer;
  border-radius: 14px; padding: 12px; font-family: var(--display); font-weight: 800; font-size: 1.05rem;
}
.players-close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: none; cursor: pointer;
  border-radius: 50%; background: #f0f0f0; color: var(--ink-soft); font-weight: 800; font-size: 1.1rem;
}

/* One-time "progress isn't saving" notice (for the grown-up). */
.save-warn {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60;
  max-width: 92%; display: flex; align-items: center; gap: 10px;
  background: #fff4e0; color: #8a5a00; border: 1px solid #f0c878; border-radius: 12px;
  padding: 10px 14px 10px 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.14); font-weight: 700; font-size: 0.95rem;
}
.save-warn__x { width: 28px; height: 28px; border: none; border-radius: 50%; background: #f0c878; color: #6b4500; font-weight: 800; cursor: pointer; flex: none; }

/* ---- In-app dialogs (prompt / confirm / alert) ---- */
.modal-ov {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(20, 30, 18, 0.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  width: min(330px, 90vw); background: #fff; border-radius: 22px; padding: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  display: flex; flex-direction: column; gap: 14px;
}
.modal-title { font-family: var(--display); font-size: 1.3rem; color: var(--green-dark); text-align: center; }
.modal-msg { font-weight: 700; color: var(--ink); text-align: center; line-height: 1.35; font-size: 1.02rem; }
.modal-input {
  width: 100%; height: 48px; padding: 0 14px; font-size: 1.05rem; font-family: var(--font); font-weight: 700;
  border: 2px solid #dfe7d8; border-radius: 14px; outline: none; color: var(--ink); background: #fff;
}
.modal-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(73, 168, 50, 0.18); }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-btn {
  flex: 1; min-height: 46px; border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  transition: transform 0.1s ease, filter 0.12s ease;
}
.modal-btn:hover { filter: brightness(1.03); }
.modal-btn:active { transform: scale(0.97); }
.modal-btn--primary { color: #fff; background: linear-gradient(135deg, #7bc84c, #49a832); }
.modal-btn--danger { color: #fff; background: linear-gradient(135deg, #ef6a6a, #c62828); }
.modal-btn--ghost { background: #eef1ea; color: var(--ink); }

/* In-game "How to play" overlay + button */
.howto-card { width: min(420px, 92vw); max-height: 86vh; overflow-y: auto; }
.howto-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.howto-item { display: flex; align-items: center; gap: 12px; background: #f4f8f0; border-radius: 14px; padding: 10px 12px; }
.howto-ic { font-size: 1.5rem; flex: none; width: 30px; text-align: center; }
.howto-tx { display: flex; flex-direction: column; line-height: 1.25; }
.howto-tx strong { font-family: var(--display); font-size: 1.02rem; color: var(--ink); }
.howto-tx span { font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); }
.howto-tip { text-align: center; font-weight: 700; color: var(--ink-soft); font-size: 0.95rem; }
.howto-btn {
  margin-top: 10px; align-self: center; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.75); color: var(--green-deep);
  font-family: var(--display); font-weight: 800; font-size: 0.95rem;
  padding: 8px 18px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
.howto-btn:hover { background: #fff; transform: translateY(-1px); }
.howto-btn:active { transform: scale(0.97); }
.progress-label {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(12px, 1.7vh, 15px); color: var(--green-deep);
  background: #fff; padding: 3px 14px; border-radius: 99px;
  box-shadow: 0 4px 12px rgba(45, 109, 35, 0.14);
}
.progress-wrap {
  width: min(440px, 80%); height: 16px;
  background: #ffffff;
  border: 2px solid rgba(67, 136, 49, 0.18);
  border-radius: 99px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(45, 109, 35, 0.14);
}
.progress-bar {
  height: 100%;
  min-width: 16px;                 /* stays a tidy rounded nub even at low % */
  background: linear-gradient(90deg, #70c446, #f7c945);
  border-radius: 99px;
  transition: width 0.5s ease;
}
.progress-bar.is-empty { min-width: 0; }   /* show a clean empty track at 0 stars */
/* Frosted hero panel keeps the title + subtitle readable over the busy farm bg */
.home-hero {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(4px, 0.8vh, 8px);
  align-self: center;
  max-width: 94%;
  padding: clamp(7px, 1.1vh, 13px) clamp(16px, 3vw, 28px);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(45, 109, 35, 0.16);
  flex-shrink: 0;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #7bc84c, #49a832); color: #fff;
  padding: 6px 16px; border-radius: 99px;
  font-weight: 800; font-size: 13px; letter-spacing: 0.3px; text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(65, 155, 42, 0.28);
  align-self: center;
  flex-shrink: 0;
}
/* Prominent Start-the-story CTA (matches reference) */
.start-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  align-self: center; margin-top: 2px;
  min-height: 44px; padding: 0 24px;
  border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, #7bc84c, #49a832);
  box-shadow: 0 10px 20px rgba(65, 155, 42, 0.3);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.start-btn svg { width: 22px; height: 22px; }
.start-btn b { font-size: 1.45rem; line-height: 1; }
.start-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.start-btn:active { transform: translateY(1px) scale(0.98); }
.home-title {
  font-family: var(--display);
  font-size: clamp(19px, 3.2vh, 32px);
  line-height: 1.02;
  color: var(--green-dark);
  /* soft white halo so the title stays crisp over the busy farm background */
  text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 255, 255, 0.95), 0 4px 0 rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}
.subtitle { font-size: clamp(13px, 1.9vh, 18px); color: #52704c; font-weight: 800; flex-shrink: 0; }

.tractor-stage {
  width: 100%;
  height: clamp(40px, 7vh, 90px);
  position: relative;
  flex-shrink: 0;
}
.tractor-stage .tractor {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  font-size: 72px;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.18));
  animation: bounce 2.2s ease-in-out infinite;
}
.tractor--img { height: 100%; width: auto; }
.hero-dog {
  position: absolute;
  right: 14%; bottom: -2%;
  height: 52%; width: auto;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.18));
  animation: bobY 2.4s ease-in-out infinite;
}
@keyframes bobY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.menu-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(6px, 1vh, 11px); }
.game-card {
  position: relative;
  border: none;
  background: var(--card);
  border-radius: 22px;
  padding: clamp(5px, 0.8vh, 10px) clamp(10px, 1.2vw, 15px);
  display: grid;
  grid-template-columns: clamp(34px, 4.8vh, 48px) 1fr auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  box-shadow: 0 14px 30px rgba(49, 94, 42, 0.15);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  animation: rise 0.45s ease backwards;
  animation-delay: calc(var(--i) * 0.08s);
}
.game-card::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 8px; height: 100%;
  background: linear-gradient(180deg, #75c94a, #f4c83b);
  opacity: 0; transition: opacity 0.2s ease;
}
.game-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 20px 40px rgba(49, 94, 42, 0.22); }
.game-card:hover::before { opacity: 1; }
.game-card:active { transform: translateY(0) scale(0.99); }

.card-icon {
  width: 100%; aspect-ratio: 1;
  border-radius: 22px;
  display: grid; place-items: center;
  overflow: hidden;
  background: #d9f5ff;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}
.card-icon__img { width: 100%; height: 100%; object-fit: contain; }
.game-card:nth-child(2) .card-icon { background: #fff0c8; }
.game-card:nth-child(3) .card-icon { background: #e2dcff; }
.game-card:nth-child(4) .card-icon { background: #dff8d4; }
.game-card:nth-child(5) .card-icon { background: #ffe0e6; }
.game-card:nth-child(6) .card-icon { background: #d7f0ff; }
.card-icon--emoji { font-size: clamp(28px, 4.6vh, 38px); line-height: 1; }
/* per-card progress cue (corner) */
.card-badge {
  position: absolute; top: 6px; right: 8px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: #fff6cc; color: #855f00;
  font-family: var(--display); font-weight: 900; font-size: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.card-badge.done { background: var(--good); color: #fff; }
.card-chevron { font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1; color: #bcd3b0; padding-right: 2px; }
.card-copy h2 { font-family: var(--display); font-size: clamp(14px, 1.8vh, 18px); color: var(--ink); line-height: 1.05; margin-bottom: 1px; }
.card-copy p { color: var(--ink-soft); font-size: clamp(10px, 1.3vh, 12px); font-weight: 700; line-height: 1.12; }
.card-meta { display: none; } /* compact 2-col menu — whole card is tappable; top bar shows progress */
.level-pill {
  background: #eef9e9; color: var(--green-deep);
  font-size: 14px; font-weight: 900;
  padding: 7px 12px; border-radius: 999px;
  white-space: nowrap;
}
.level-pill.done { background: #d6f3c6; color: var(--good); }
.play-btn {
  width: 54px; height: 54px;
  border-radius: 20px; border: none;
  background: linear-gradient(135deg, #7bc84c, #49a832);
  color: #fff; font-size: 24px;
  display: grid; place-items: center;
  box-shadow: 0 10px 18px rgba(65, 155, 42, 0.25);
}

/* ============================================================
   Activity shared panel (gives gameplay screens the card look)
   ============================================================ */
.panel {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 30px rgba(49, 94, 42, 0.15);
  padding: clamp(14px, 2.2vh, 22px);
  display: grid;
  gap: clamp(10px, 1.8vh, 18px);
  text-align: center;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  max-height: 100%;
  overflow: auto;
}
.panel__head {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.2rem, 4.6vw, 1.7rem);
  color: var(--green-dark);
}

/* ---- Layered scene ---- */
.scene {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9; max-height: 34vh;
  border-radius: var(--r-lg); overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  margin: 0 auto;
}
.scene__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene__sprite { position: absolute; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 6px rgba(0,0,0,0.2)); }
.scene__sprite.anim-bob { animation: bobSprite 2.2s ease-in-out infinite; }
.raindrop { position: absolute; top: -8%; font-size: 1.1rem; animation: fall linear infinite; pointer-events: none; }

/* ---- Read Along ---- */
.read__story { font-size: clamp(13px, 2vh, 16px); color: var(--ink-soft); font-weight: 700; font-style: italic; }
.read__sentence {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 7vw, 2.6rem); color: var(--ink); line-height: 1.3;
}
.read__sentence .w { display: inline-block; padding: 2px 6px; border-radius: 8px; transition: background 0.15s, transform 0.15s, color 0.15s; }
.read__sentence .w.hl { background: var(--gold); transform: scale(1.08); }
.read__sentence .w.tap-word { cursor: pointer; }
.read__sentence .w.pointed { background: var(--green); color: #fff; }
/* the word to tap next pulses with a soft highlight so non-readers know where */
.read__sentence .w.next { background: #fff3c4; animation: wpulse 1.1s ease-in-out infinite; }
@keyframes wpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
.read__hint { font-size: clamp(12px, 1.7vh, 15px); font-weight: 800; color: var(--green-deep); opacity: 0.85; }
.read__controls { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.dots { display: inline-flex; gap: 8px; justify-content: center; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #c7d2bb; display: inline-block; transition: transform 0.2s, background 0.2s; }
.dots i.on { background: var(--green); transform: scale(1.3); }

/* ---- Prompt + picture cards ---- */
.prompt { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.prompt__text { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 5vw, 2rem); color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 700px; margin: 0 auto; width: 100%; }
.piccard {
  border: 4px solid #fff; border-radius: var(--r-lg); background: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1); padding: 8px;
  display: grid; gap: 6px; transition: transform 0.12s ease, border-color 0.12s ease;
}
.piccard:active { transform: scale(0.96); }
.piccard__img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--r-md); }
.piccard__label { font-family: var(--display); font-weight: 800; color: var(--ink); }
.piccard.is-correct { border-color: var(--good); background: #e8f5e9; }
.piccard.is-wrong { border-color: var(--bad); background: #ffebee; animation: shake 0.3s ease; }
.feedback { min-height: 28px; font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.feedback.good { color: var(--good); }
.feedback.bad { color: var(--bad); }

/* ---- Sentence builder ---- */
.build-prompt { display: flex; align-items: center; justify-content: center; gap: 14px; }
.build-pic {
  width: clamp(64px, 15vh, 104px); height: auto; object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.16));
}
.dropzone {
  min-height: 78px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; padding: 12px;
  border: 3px dashed #b0b8a6; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.6);
}
.dropzone:empty::before { content: "Tap the words in order…"; color: var(--ink-soft); font-weight: 700; }
.bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tile {
  min-height: var(--tap); padding: 0 20px; border: none; border-radius: 14px;
  background: #fff; box-shadow: 0 4px 0 #cfd8c4;
  font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.tile:active { transform: translateY(4px); box-shadow: 0 0 0 #cfd8c4; }
.tile.in-drop { background: var(--gold); box-shadow: 0 4px 0 #d9a93f; }
.tile.placed-correct { background: #c8e6c9; box-shadow: 0 4px 0 #a5d6a7; }
.tile.placed-wrong { background: #ffcdd2; box-shadow: 0 4px 0 #ef9a9a; animation: shake 0.35s; }
/* Pulse the next word the child should tap (same cue as Read Along). */
.bank .tile.next { background: #fff3c4; box-shadow: 0 4px 0 #d9a93f, 0 0 0 3px #ffd54a; animation: wpulse 1.1s ease-in-out infinite; }
.row-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ---- Tractor rescue ---- */
.rescue__story { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 4.5vw, 1.6rem); color: #5d4037; }
.rescue__stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 32vh;
  border-radius: var(--r-lg); overflow: hidden; border: 5px solid #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  margin: 0 auto;
}
.rescue__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rescue__car, .rescue__tractor {
  position: absolute; bottom: 12%; width: clamp(90px, 26%, 200px);
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.25));
  transition: left 1.2s cubic-bezier(0.4, 1.3, 0.5, 1);
}
.rescue__car { left: 12%; }
.rescue__car.tappable { animation: nudge 1.4s ease-in-out infinite; }
.rescue__tractor { left: 60%; transform: scaleX(-1); }
.rescue__rope {
  /* sit on the mud in the clear gap between the car (~38%) and tractor (~60%) */
  position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%);
  width: clamp(44px, 12%, 84px);   /* width on the BUTTON (% of stage), img fills it */
  border: none; background: transparent; padding: 0; cursor: pointer;
  opacity: 0.92; transition: opacity 0.2s ease; z-index: 3;
}
/* white outline-halo so the brown rope stands out against the brown mud */
.rescue__rope-img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #fff)
          drop-shadow(0 0 7px rgba(255, 255, 255, 0.95))
          drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
}
.rescue__rope.ready { opacity: 1; animation: bobRope 1.2s ease-in-out infinite; }
.rescue__rope.ready .rescue__rope-img { filter: drop-shadow(0 0 8px #f4c83b) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.28)); }
.rescue__rope.attached { display: none; }
.rescue__dog {
  position: absolute; right: 7%; bottom: 9%;
  width: clamp(44px, 13%, 92px);
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.25));
  animation: bobY 1.8s ease-in-out infinite;
}
.rescue__stage.pulled .rescue__car { left: 38%; }
.rescue__steps { display: grid; gap: 8px; max-width: 460px; margin: 0 auto; width: 100%; }
.rescue__step {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: var(--r-md); background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  font-weight: 700; color: var(--ink); text-align: left;
}
.rescue__step.done { background: #e8f5e9; color: var(--good); }
.rescue__step .num { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #d9f5ff; font-weight: 800; flex-shrink: 0; }
.rescue__step.done .num { background: var(--good); color: #fff; }

/* ---- Result ---- */
.result { display: grid; gap: 18px; justify-items: center; }
.result__emoji { font-size: 5rem; animation: pop 0.5s ease; }
.result__title { font-family: var(--display); font-size: 2rem; color: var(--green-dark); }
.result__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Find & Tap ---- */
.find-scene { cursor: default; aspect-ratio: 4 / 3; max-height: 46vh; }
.find-obj {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(70px, 22%, 150px); aspect-ratio: 1;
  border: none; background: transparent; padding: 0; cursor: pointer;
}
.find-obj__img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.22)); transition: filter 0.15s ease; }
.find-obj.anim-bob { animation: bobSprite 2.2s ease-in-out infinite; }
.find-obj.hit .find-obj__img { filter: drop-shadow(0 0 10px #2e7d32) drop-shadow(0 0 4px #2e7d32); }
.find-obj.miss .find-obj__img { animation: flashbad 0.4s ease; }
@keyframes flashbad { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 8px #c62828) saturate(1.5); } }

/* ---- First Sounds (phonics) ---- */
.phon-pic { position: relative; width: min(46%, 240px); margin: 0 auto; }
.phon-pic__img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.16)); }
.phon-pic .icon-btn { position: absolute; right: -6px; bottom: -6px; }
.letters { display: flex; justify-content: center; gap: clamp(12px, 3vw, 22px); flex-wrap: wrap; }
.letter-tile {
  width: clamp(72px, 22vw, 110px); aspect-ratio: 1;
  border: 4px solid #fff; border-radius: 24px; background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 8vw, 3rem); color: var(--green-deep);
  transition: transform 0.1s ease, border-color 0.12s ease, background 0.12s ease;
}
.letter-tile:active { transform: scale(0.94); }
.letter-tile.is-correct { border-color: var(--good); background: #e8f5e9; color: var(--good); }
.letter-tile.is-wrong { border-color: var(--bad); background: #ffebee; animation: shake 0.3s ease; }

/* Sight-word tiles (word recognition) */
.word-tile {
  min-height: var(--tap); padding: 10px clamp(18px, 4vw, 30px);
  border: 4px solid #fff; border-radius: 18px; background: #fff; cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 5vw, 2rem); color: var(--ink);
  transition: transform 0.1s ease, border-color 0.12s ease, background 0.12s ease;
}
.word-tile:active { transform: scale(0.95); }
.word-tile.is-correct { border-color: var(--good); background: #e8f5e9; color: var(--good); }
.word-tile.is-wrong { border-color: var(--bad); background: #ffebee; animation: shake 0.3s ease; }

/* Read-aloud sentence (shown to read; not tappable) */
.ra__sentence {
  font-family: var(--display); font-weight: 800; text-align: center;
  font-size: clamp(1.5rem, 5.5vw, 2.4rem); color: var(--ink); line-height: 1.15;
  margin: clamp(6px, 1.4vh, 12px) 0;
}

/* ---- Spot the dog-guide (floating AI helper) ---- */
.spot {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.spot__btn {
  pointer-events: auto;
  width: 62px; height: 62px; padding: 6px;
  border: none; border-radius: 50%; background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  cursor: pointer; transition: transform 0.15s ease;
}
.spot__btn:active { transform: scale(0.93); }
.spot__btn.thinking { animation: bobY 0.8s ease-in-out infinite; }
.spot__img { width: 100%; height: 100%; object-fit: contain; }
.spot__bubble {
  pointer-events: none; /* never block taps on the card underneath */
  max-width: min(200px, 58vw);
  background: rgba(255, 255, 255, 0.97); color: var(--ink);
  font-weight: 800; font-size: 13.5px; line-height: 1.25;
  padding: 9px 13px; border-radius: 16px 16px 4px 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-8px); } }
@keyframes bobSprite { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 6px)); } }
@keyframes bobRope { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes drift { from { margin-left: 0; } to { margin-left: 40px; } }
@keyframes fall { to { transform: translateY(58vh); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Responsive (per ref.md)
   ============================================================ */
@media (max-width: 640px) {
  .appbar { padding: 0 16px; }
  .brand__name { font-size: 18px; }
  .main-content { padding: 30px 16px; }
  .game-card { grid-template-columns: 56px 1fr auto; border-radius: 24px; padding: 14px; gap: 12px; }
  .card-icon { width: 54px; height: 54px; font-size: 28px; border-radius: 18px; }
  .card-copy h2 { font-size: 20px; }
  .card-copy p { font-size: 14px; }
  .level-pill { display: none; }
  .play-btn { width: 46px; height: 46px; border-radius: 16px; }
  .tractor-stage .tractor { font-size: 58px; }
  .cards { gap: 10px; }
}