/* ============================================================
   GRAMMAR GARDEN · STYLESHEET (v5.1 — Illuminated Garden)
   - Constant dawn-light sky behind everything
   - Distant hills + corner foliage frame the page
   - Stage = a paper card floating above the scene
   - Bolder color palette: forest green + gold + rose + plum
   - Typography:
       Fraunces  → UI display (titles, headings, brand)
       Crimson   → italic body, prompts
       Inter     → UI text (buttons, controls, settings)
       Caveat    → handwritten accent
       AbcPrint  → child-facing reading text (sentences, words, blanks)
   ============================================================ */

/* ----------------------------------------------------------
   LOCAL FAMILIES (loaded from Windows-installed fonts via local())
   These will resolve when the app runs on a device that has
   the font installed. On other devices the next family in the
   chain is used (AbcKids → AbcTeacher → Segoe Print → system).
---------------------------------------------------------- */
@font-face {
  font-family: 'AbcPrint';
  src: local('AbcPrint Regular'), local('AbcPrint-Regular'), local('AbcPrint'),
       url('../fonts/AbcPrint-Regular.woff2') format('woff2'),
       url('../fonts/AbcPrint-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AbcKids';
  src: local('AbcKids'), local('AbcKids-Regular');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AbcTeacher';
  src: local('AbcTeacher'), local('AbcTeacher-Regular');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AbcDNManuscript';
  src: local('AbcDNManuscript Regular'), local('AbcDNManuscript-Regular'), local('AbcDNManuscript');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AbcPhonicsOne';
  src: local('AbcPhonicsOne'), local('AbcPhonicsOne-Regular');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AbcPhonicsTwo';
  src: local('AbcPhonicsTwo'), local('AbcPhonicsTwo-Regular');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------
   FOUNDATION TOKENS
---------------------------------------------------------- */
:root {
  /* Sky/atmosphere palette */
  --sky-top:    #F8DDB1;
  --sky-mid:    #F4D9B8;
  --sky-bottom: #E9C594;
  --hills-far:  #7E9A82;
  --hills-near: #1F3526;

  /* Paper / cards */
  --paper:        #FFFBF1;
  --paper-warm:   #FBF1D8;
  --paper-cream:  #F4E6BE;
  --paper-deep:   #E8D29D;

  /* Ink / text */
  --ink:        #1B2A20;
  --ink-rich:   #2C3E2F;
  --ink-soft:   #5A6E60;
  --ink-mute:   #87958A;
  --ink-faint:  #B9C3BC;

  /* Brand greens */
  --green:        #1F3526;
  --green-rich:   #2C5F3D;
  --green-mid:    #3D6249;
  --green-soft:   #4F7E5A;
  --sage:         #8FA987;
  --sage-light:   #B5C9A4;
  --green-glaze:  rgba(31, 53, 38, 0.06);

  /* Gold accents */
  --gold:        #C9A158;
  --gold-rich:   #946735;
  --gold-warm:   #E5BB72;
  --gold-light:  #F4D589;
  --gold-pale:   #F8E8C2;

  /* Color variety */
  --rose:        #D67862;
  --rose-soft:   #F0AD96;
  --rose-pale:   #FBE4D8;
  --plum:        #7A5773;
  --plum-soft:   #A88AA0;
  --plum-pale:   #EFE2EC;
  --berry:       #B5304E;

  /* Word job colors */
  --color-noun:        var(--green-rich);
  --color-noun-soft:   #5C8A6B;
  --color-noun-pale:   #DCEAD8;
  --color-verb:        var(--gold-rich);
  --color-verb-soft:   var(--gold-warm);
  --color-verb-pale:   var(--gold-pale);
  --color-adjective:   var(--rose);
  --color-adjective-soft: var(--rose-soft);
  --color-adjective-pale: var(--rose-pale);
  --color-adverb:      var(--plum);
  --color-adverb-soft: var(--plum-soft);
  --color-adverb-pale: var(--plum-pale);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(45, 30, 12, 0.08);
  --shadow-sm: 0 2px 6px rgba(45, 30, 12, 0.10), 0 1px 2px rgba(45, 30, 12, 0.06);
  --shadow-md: 0 8px 20px rgba(45, 30, 12, 0.12), 0 2px 4px rgba(45, 30, 12, 0.08);
  --shadow-lg: 0 18px 40px rgba(45, 30, 12, 0.18), 0 6px 12px rgba(45, 30, 12, 0.10);
  --shadow-paper: 0 22px 50px rgba(45, 30, 12, 0.20), 0 8px 16px rgba(45, 30, 12, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(165, 124, 60, 0.08);
  --shadow-press: inset 0 2px 4px rgba(45, 30, 12, 0.18);
  --shadow-glow-gold: 0 0 0 4px rgba(229, 187, 114, 0.30), 0 8px 24px rgba(229, 187, 114, 0.40);
  --shadow-glow-green: 0 0 0 4px rgba(95, 126, 90, 0.22), 0 8px 24px rgba(95, 126, 90, 0.30);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 180ms;
  --t-med: 300ms;
  --t-slow: 500ms;

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Iowan', Georgia, serif;
  --font-heading: 'Crimson Pro', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Caveat', 'Brush Script MT', cursive;
  --font-child: 'AbcPrint', 'AbcKids', 'AbcTeacher', 'AbcDNManuscript', 'Segoe Print', 'Comic Sans MS', sans-serif;

  /* Layout */
  --max-w: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* ==========================================
   DARK / EVENING THEME
   "Evening" now actually switches the app to a proper dark forest palette.
========================================== */
[data-theme="dark"] {
  --paper: #1a2520;
  --paper-warm: #16201b;
  --paper-cream: #1f2b25;
  --paper-deep: #0f1713;

  --ink: #e8f0e8;
  --ink-rich: #d4e0d4;
  --ink-soft: #a8b8a8;
  --ink-mute: #7a8a7a;
  --ink-faint: #5a6a5a;

  --green: #4a7a5a;
  --green-rich: #5a8a6a;
  --green-mid: #3d6249;
  --green-soft: #6a9a7a;

  --gold: #d4b070;
  --gold-rich: #b89550;
  --gold-warm: #c8a060;
  --gold-pale: #8a7040;

  --shadow-paper: 0 22px 50px rgba(0,0,0,0.45), 0 8px 16px rgba(0,0,0,0.35);
}

/* ----------------------------------------------------------
   RESET
---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sky-mid);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: var(--r-sm); }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; }
p { color: var(--ink-soft); }
::selection { background: var(--gold-pale); color: var(--green); }

/* ----------------------------------------------------------
   ATMOSPHERE — fixed dawn-light backdrop
---------------------------------------------------------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmosphere-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 20%, rgba(255, 230, 180, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 30%, rgba(255, 220, 170, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 35%, var(--sky-bottom) 100%);
}
.atmosphere-mist {
  position: absolute;
  bottom: 30%;
  left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(248, 232, 200, 0.45) 50%, rgba(232, 210, 157, 0.55) 100%);
  filter: blur(4px);
}
.atmosphere-hills {
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 24vh;
  min-height: 220px;
}
.atmosphere-foliage {
  position: absolute;
  width: 320px;
  height: 280px;
  filter: drop-shadow(0 8px 16px rgba(31, 53, 38, 0.25));
  opacity: 0.95;
}
.atmosphere-foliage-tl { top: -40px; left: -60px; }
.atmosphere-foliage-br { bottom: -40px; right: -60px; transform: scale(-1, -1); }
@media (max-width: 720px) {
  .atmosphere-foliage { width: 200px; height: 180px; opacity: 0.6; }
  .atmosphere-foliage-tl { top: -30px; left: -40px; }
  .atmosphere-foliage-br { bottom: -30px; right: -40px; }
}

/* ----------------------------------------------------------
   APP SHELL
---------------------------------------------------------- */
.app {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px) var(--gutter) 80px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}

/* Dark immersive body only while the living scene is actually on (any age).
   In "off"/still mode the normal light parchment atmosphere is kept. */
[data-little-blessings="true"] body.cinematic-garden-session {
  background: #0a2219;
}

/* The entire app feels like it's inside a living garden during active sessions */
[data-little-blessings="true"] .app {
  padding-top: 4px;
  padding-bottom: 4px;
  max-width: 1180px;
}

/* The stage feels like a beautiful, soft-edged clearing or window *inside* the living garden world */
[data-little-blessings="true"] .stage {
  background: rgba(255, 251, 241, 0.78);
  border-radius: 40px;
  box-shadow: 
    0 60px 140px rgba(0,0,0,0.55),
    0 20px 50px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.8);
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 5;
  margin: 4px auto 12px;
  max-width: 700px;
  border: 4px solid rgba(166,124,60,0.4);
}

/* The garden IS the full cinematic living world during active sessions */
[data-little-blessings="true"] .progress-garden {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: none;
  min-height: 460px;
}

/* The home garden becomes the rich, deep, breathing world the stage floats inside */
[data-little-blessings="true"] .home-garden {
  background: 
    linear-gradient(180deg, rgba(8,24,18,0.92) 0%, rgba(4,14,10,0.98) 100%);
  border-radius: 40px;
  padding: 44px 40px 52px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.65);
  border: 3px solid rgba(166,124,60,0.45);
  min-height: 460px;
  position: relative;
  overflow: hidden;
}

/* Make the garden plots much larger and more cinematic for K-2 */
[data-little-blessings="true"] .home-plot {
  height: 162px;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: all 260ms cubic-bezier(0.23, 1.0, 0.32, 1);
}

[data-little-blessings="true"] .home-plot.has-plant {
  box-shadow: 0 10px 32px rgba(0,0,0,0.32);
}

/* Dramatic growth flash visible across the whole cinematic garden */
[data-little-blessings="true"] .home-plot.blessed-growth {
  animation: cinematicBlessedGrowth 1.6s cubic-bezier(0.23, 1.0, 0.32, 1);
  border-color: #e8c36a;
}

@keyframes cinematicBlessedGrowth {
  0% { transform: scale(0.92); filter: brightness(1.4) saturate(1.3); }
  25% { transform: scale(1.18); filter: brightness(1.1) saturate(1.15); }
  100% { transform: scale(1); filter: none; }
}

/* Full cinematic reactions on the entire garden environment during active sessions */
[data-little-blessings="true"] .progress-garden.cinematic-burst {
  animation: cinematicGardenBurst 1.55s cubic-bezier(0.23, 1, 0.32, 1);
}

[data-little-blessings="true"] .progress-garden.cinematic-intense {
  animation: cinematicGardenIntense 2.1s ease-in-out;
  filter: saturate(1.4) brightness(1.1);
}

@keyframes cinematicGardenBurst {
  0%   { transform: scale(0.97) translateY(4px); filter: brightness(1.35) saturate(1.25); }
  30%  { transform: scale(1.04) translateY(-2px); filter: brightness(1.12) saturate(1.15); }
  100% { transform: scale(1) translateY(0); filter: none; }
}

@keyframes cinematicGardenIntense {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.55) brightness(1.15); }
}

/* Make the garden feel constantly alive and breathing during play */
[data-little-blessings="true"] .home-garden {
  animation: gardenBreathing 7s ease-in-out infinite;
}

@keyframes gardenBreathing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.005); }
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
  flex-wrap: wrap;
  padding: 4px 0;
}
.brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo-mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--paper);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  flex-shrink: 0;
}
.logo-mark::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--gold-warm);
  opacity: 0.6;
}
.logo-mark svg { width: 36px; height: 36px; display: block; }

.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-rich);
}
.brand-tag {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.18);
  border-radius: var(--r-pill);
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
}
.stat-pill:hover {
  border-color: var(--gold-warm);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.stat-icon {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.stat-icon svg { width: 100%; height: 100%; }
.stat-value {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--green);
  min-width: 14px;
  text-align: right;
}

.profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.18);
  border-radius: var(--r-pill);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
}
.profile-pill:hover {
  border-color: var(--green-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.profile-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-pale), var(--gold-warm));
  display: grid; place-items: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.profile-name {
  font-family: var(--font-display);
  color: var(--green);
  max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ghost-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.18);
  color: var(--green);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  box-shadow: var(--shadow-xs);
}
.ghost-btn:hover {
  background: var(--paper-warm);
  border-color: var(--gold-warm);
  color: var(--green-rich);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.ghost-btn svg { width: 20px; height: 20px; }

@media (max-width: 720px) {
  .stat-pill .stat-value { display: inline; }
  .stat-pill { padding: 6px 10px; }
}
@media (max-width: 540px) {
  .profile-pill .profile-name { display: none; }
  .profile-pill { padding: 4px; }
  .stat-pill { font-size: 0.82rem; }
}

/* ----------------------------------------------------------
   MODE BAR — chapter-style markers
---------------------------------------------------------- */
.mode-bar-wrap {
  position: sticky;
  top: 12px;
  z-index: 20;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.mode-bar {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 251, 241, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(165, 124, 60, 0.18);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mode-bar::-webkit-scrollbar { display: none; }

.mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
  position: relative;
}
.mode-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--gold-rich);
  background: var(--gold-pale);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  min-width: 22px;
  text-align: center;
  font-weight: 600;
  transition: all var(--t-fast) var(--ease);
}
.mode-name {
  font-weight: 500;
}
.mode-tab:hover {
  color: var(--green);
  background: var(--green-glaze);
}
.mode-tab:hover .mode-num { background: var(--gold-warm); color: var(--paper); }
.mode-tab.active {
  background: var(--green);
  color: var(--paper);
  box-shadow: var(--shadow-sm);
}
.mode-tab.active .mode-num {
  background: var(--gold-warm);
  color: var(--green);
}

@media (max-width: 720px) {
  .mode-tab { padding: 8px 14px; font-size: 0.88rem; }
  .mode-num { font-size: 0.7rem; padding: 1px 5px; }
}

/* ============================================================
   RESPONSIVE MODE BAR — never cuts off, adapts to any screen/window
   Works for full 9-tab view and the 6-tab Little Blessings view.
   Preserves elegant chapter ribbon on wide screens; becomes friendly
   wrapped centered chapters on narrower viewports (including cinematic LB).
============================================================ */

/* Improve scroll experience: always give the last tab breathing room */
.mode-bar {
  scroll-padding: 12px;
  padding-right: 18px; /* ensures "Mixed" (and any future last tab) is never hard-clipped */
}

/* Short-name spans are hidden by default; revealed responsively below */
.mode-name-short {
  display: none;
}

/* === Breakpoint 1: Large desktop / wide cinematic windows (gentle tightening) === */
@media (max-width: 1100px) {
  .mode-bar {
    gap: 3px;
    padding: 5px;
  }
  .mode-tab {
    padding: 9px 14px;
    font-size: 0.9rem;
    gap: 6px;
  }
  .mode-num {
    font-size: 0.72rem;
    min-width: 20px;
    padding: 1px 5px;
  }
}

/* === Breakpoint 2: Medium / tablet landscape — start preventing cutoff === */
/* Note: In the cinematic Garden Window layout the available horizontal space is tighter,
   so we wrap much earlier to guarantee the menu never cuts off. */
@media (max-width: 1050px) {
  /* Allow the chapter tabs to wrap into two centered rows instead of scrolling forever.
     This guarantees zero text cutoff on any window size while still looking intentional. */
  .mode-bar {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible; /* wrapping, not scrolling */
    padding: 6px 4px;
    gap: 4px;
    -webkit-mask-image: none;
            mask-image: none; /* remove fade mask when we wrap — it would look odd */
  }

  .mode-tab {
    padding: 7px 12px;
    font-size: 0.82rem;
    gap: 5px;
    white-space: normal; /* allow natural wrapping inside tab if needed */
  }

  .mode-num {
    font-size: 0.68rem;
    min-width: 18px;
    padding: 1px 4px;
  }

  /* Reveal the shorter names for the three longest labels */
  .mode-tab .mode-name-short {
    display: inline;
  }
  .mode-tab .mode-name {
    display: none;
  }

  /* In cinematic LB (only 6 tabs) the wrap is rarely needed, but when it happens it still looks great */
  [data-little-blessings="true"] .mode-bar {
    gap: 3px;
  }
}

/* === Breakpoint 3: Narrow phones / very constrained cinematic windows === */
@media (max-width: 640px) {
  .mode-bar {
    gap: 2px;
    padding: 4px 2px;
    border-radius: 999px;
  }
  .mode-tab {
    padding: 6px 9px;
    font-size: 0.76rem;
    gap: 4px;
    border-radius: 999px;
  }
  .mode-num {
    font-size: 0.62rem;
    min-width: 16px;
    padding: 0 3px;
  }

  /* Even more compact in the floating Garden Window context */
  [data-little-blessings="true"].cinematic-garden-session .mode-bar {
    background: rgba(255, 251, 241, 0.92);
  }
}

/* === Cinematic Little Blessings specific polish === */
[data-little-blessings="true"].cinematic-garden-session .mode-bar-wrap {
  /* Subtle garden ribbon sitting on top of the living world */
  background: linear-gradient(180deg, rgba(7,28,21,0.45), transparent 70%);
  margin: 0;
  padding: 2px 8px;
  border-radius: 0;
}

[data-little-blessings="true"].cinematic-garden-session .mode-bar {
  border-color: rgba(166, 124, 60, 0.28);
  /* Extra safety in the constrained cinematic view: tighter gaps so all tabs stay visible longer */
  gap: 2px;
}

/* In full cinematic mode, hide the old garden header stats so it doesn't feel like a separate "garden box" */
[data-little-blessings="true"] .cinematic-meadow .garden-header,
[data-little-blessings="true"] .cinematic-meadow .garden-stats {
  display: none !important;
}

/* Ensure the active tab and numbers remain highly legible in the darker meadow backdrop */
[data-little-blessings="true"] .mode-tab.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Touch + accessibility (already present, reinforced for new wrap states) */
.mode-tab {
  min-height: 44px; /* WCAG touch target */
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .mode-tab {
    transition: none;
  }
}

/* ----------------------------------------------------------
   STAGE — paper card floating above the scene
---------------------------------------------------------- */
.stage {
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 56px);
  min-height: 540px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  box-shadow: var(--shadow-paper);
  overflow: hidden;
}
.stage::before {
  /* subtle top gold ribbon */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-warm) 30%, var(--gold) 50%, var(--gold-warm) 70%, transparent 100%);
  opacity: 0.7;
}
.stage::after {
  /* subtle paper grain */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(166, 124, 60, 0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(166, 124, 60, 0.03) 0, transparent 40%);
  mix-blend-mode: multiply;
}

.stage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(165, 124, 60, 0.18);
  position: relative;
}
.stage-title-group { flex: 1; min-width: 240px; }
.stage-title-group h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--green);
  margin-bottom: 6px;
  font-weight: 600;
}
.stage-prompt {
  font-size: 1.05rem;
  color: var(--ink-soft);
  font-family: var(--font-heading);
  font-style: italic;
}
.stage-counter {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--paper-warm);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(165, 124, 60, 0.20);
  flex-shrink: 0;
}
.progress-counter {
  background: var(--gold-pale);
  color: var(--gold-rich);
  border-color: var(--gold-warm);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0;
}

/* ----------------------------------------------------------
   LEARN MODE
---------------------------------------------------------- */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.learn-card {
  background: var(--paper-warm);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: all var(--t-med) var(--ease);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(165, 124, 60, 0.15);
  overflow: hidden;
}
.learn-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, var(--accent-pale, var(--green-glaze)) 0, transparent 50%);
  pointer-events: none;
}
.learn-card[data-job="noun"]      { --accent: var(--color-noun);      --accent-pale: var(--color-noun-pale); }
.learn-card[data-job="verb"]      { --accent: var(--color-verb);      --accent-pale: var(--color-verb-pale); }
.learn-card[data-job="adjective"] { --accent: var(--color-adjective); --accent-pale: var(--color-adjective-pale); }
.learn-card[data-job="adverb"]    { --accent: var(--color-adverb);    --accent-pale: var(--color-adverb-pale); }

.learn-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.learn-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.learn-icon svg { width: 28px; height: 28px; }

.learn-card h3 {
  font-size: 1.7rem;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--accent);
  z-index: 1;
}
.learn-card h3 .label-tag {
  font-family: var(--font-script);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold-rich);
  letter-spacing: 0;
  text-transform: lowercase;
}
.learn-def {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.55;
  z-index: 1;
}
.learn-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px dashed rgba(165, 124, 60, 0.25);
  z-index: 1;
}
.learn-example-pill {
  padding: 6px 14px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  border: 1px solid rgba(165, 124, 60, 0.2);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.learn-example-pill.with-tts { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; }

.learn-tips { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; z-index: 1; }
.learn-tip {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.96rem; color: var(--ink-soft); line-height: 1.5;
}
.learn-tip::before {
  content: "✦";
  color: var(--gold);
  font-size: 0.92rem;
  flex-shrink: 0;
  margin-top: 3px;
}

.lock-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  background: var(--paper-warm);
  border: 1px dashed var(--gold);
  border-radius: var(--r-lg);
  color: var(--ink-soft);
}
.lock-icon { font-size: 1.8rem; }
.lock-text { font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.45; }
.lock-text strong { color: var(--gold-rich); }

/* ----------------------------------------------------------
   SORT MODE — sentence card + word tiles + baskets
---------------------------------------------------------- */
.sentence-card {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(165, 124, 60, 0.15);
  overflow: visible;
}

.sentence-label-row {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}
.sentence-label {
  font-family: var(--font-script);
  font-size: 1.15rem;
  color: var(--gold-rich);
  font-weight: 600;
}

.sentence-words {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  align-items: center;
}

/* Word tile — paper note with character */
.word-tile {
  padding: 12px 22px;
  background: linear-gradient(180deg, #FFFEF6 0%, #F8EBC8 100%);
  border: 1px solid rgba(165, 124, 60, 0.25);
  border-radius: 8px;
  font-family: var(--font-child);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--ink);
  font-weight: 500;
  cursor: grab;
  transition: all var(--t-fast) var(--ease);
  user-select: none;
  position: relative;
  touch-action: none;
  box-shadow:
    0 1px 2px rgba(45, 30, 12, 0.10),
    0 4px 8px rgba(45, 30, 12, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  letter-spacing: -0.01em;
}
.word-tile:nth-child(2n) { transform: rotate(0.6deg); }
.word-tile:nth-child(3n) { transform: rotate(-0.5deg); }
.word-tile:nth-child(5n) { transform: rotate(0.4deg); }

.word-tile:hover:not(.passive):not(.placed):not(.locked) {
  transform: translateY(-3px) rotate(0deg) !important;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-color: var(--gold-warm);
}

.word-tile.passive {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink-mute);
  cursor: default;
  font-weight: 400;
  padding: 12px 4px;
  font-style: italic;
  transform: none !important;
}

.word-tile.selected {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-warm) 100%);
  color: var(--green);
  transform: translateY(-4px) rotate(0deg) scale(1.04) !important;
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(229, 187, 114, 0.30);
}

.word-tile.placed {
  opacity: 0.4;
  cursor: default;
  background: var(--paper-cream);
  border-style: dashed;
  font-style: italic;
  transform: none !important;
}

.word-tile.dragging { opacity: 0.7; transform: scale(0.95) !important; }

/* DARK / EVENING THEME word tiles. The base tile background is a hardcoded
   cream gradient, but in the time-based dark theme (6pm–6am) --ink flips to a
   light green — which made the words invisible (light text on a light cream
   tile). Give the tiles a dark, high-contrast surface in dark theme so the
   words are clearly legible. Fix 2026-05-30. */
[data-theme="dark"] .word-tile {
  background: linear-gradient(180deg, #2d3e33 0%, #20302a 100%);
  border-color: rgba(212, 176, 112, 0.45);
  color: #f1ead7;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .word-tile:hover:not(.passive):not(.placed):not(.locked) {
  border-color: var(--gold);
}
[data-theme="dark"] .word-tile.passive { color: var(--ink-mute); }
[data-theme="dark"] .word-tile.placed { background: var(--paper-deep); color: var(--ink-soft); }
[data-theme="dark"] .word-tile.selected { color: #1b2a20; }

/* Dark/evening baskets: the pale category tokens are light pastels (good on a
   cream page), so on the dark theme the bins are kept dark — tinted faintly
   with their category colour at the top and fading to deep forest — with the
   vivid woven rim and label carrying the colour. Keeps the evening look
   cohesive instead of fading to a light pastel bottom. Fix 2026-05-30. */
[data-theme="dark"] .basket {
  background:
    repeating-linear-gradient(48deg,  rgba(255, 255, 255, 0.022) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(-48deg, rgba(255, 255, 255, 0.018) 0 7px, transparent 7px 14px),
    linear-gradient(180deg, color-mix(in srgb, var(--basket-color) 22%, var(--paper)) 0%, var(--paper-deep) 100%);
  border-color: color-mix(in srgb, var(--basket-color) 55%, transparent);
  box-shadow: var(--shadow-sm), inset 0 -16px 22px rgba(0, 0, 0, 0.22);
}
[data-theme="dark"] .basket-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--basket-color) 26%, transparent) 0%, transparent 100%);
}
[data-theme="dark"] .basket-icon { background: var(--paper-deep); }
[data-theme="dark"] .basket-word {
  background: var(--paper-deep);
  color: color-mix(in srgb, var(--basket-color) 60%, #f1ead7);
  border-color: color-mix(in srgb, var(--basket-color) 45%, transparent);
}

.word-tile.correct-flash { animation: correctFlash var(--t-slow) var(--ease) forwards; }
.word-tile.wrong-shake { animation: wrongShake 480ms ease forwards; }

@keyframes correctFlash {
  0%   { box-shadow: 0 1px 2px rgba(45, 30, 12, 0.10); }
  30%  { background: var(--color-noun-pale); border-color: var(--color-noun-soft); transform: scale(1.06) rotate(0deg) !important; box-shadow: var(--shadow-glow-green); }
  100% {}
}
@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* Baskets — illustrated bins with hanging label tags */
.baskets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.baskets-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .baskets-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .baskets { grid-template-columns: 1fr; }
}

/* A woven bin: the label rides INSIDE the basket as a top band (no longer a
   floating pill that overlapped the body), the body carries a soft diagonal
   weave + a flared rim, and the bottom corners round generously like a real
   basket. Redesigned 2026-05-30 (was: shaded box + hanging tag that overlapped
   its own title). */
.basket {
  --basket-color: var(--green);
  --basket-color-soft: var(--color-noun-soft);
  --basket-color-pale: var(--color-noun-pale);
  background:
    repeating-linear-gradient(48deg,  rgba(120, 84, 38, 0.05) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(-48deg, rgba(120, 84, 38, 0.04) 0 7px, transparent 7px 14px),
    linear-gradient(180deg, var(--paper) 0%, var(--basket-color-pale) 100%);
  border: 1.5px solid var(--basket-color-soft);
  border-radius: 12px 12px 26px 26px;
  padding: 0 0 16px;
  min-height: 188px;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
  box-shadow:
    var(--shadow-sm),
    inset 0 -16px 22px rgba(90, 60, 25, 0.07);
  cursor: pointer;
}
/* The flared rim across the top of the bin. */
.basket::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, var(--basket-color) 0 9px, var(--basket-color-soft) 9px 18px);
  opacity: 0.85;
  border-radius: 11px 11px 0 0;
}
/* The label is now an in-flow band at the top of the basket — never overlaps. */
.basket-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 14px 10px;
  width: 100%;
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--basket-color-pale) 70%, transparent) 0%, transparent 100%);
}
.basket-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--basket-color-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--basket-color);
  box-shadow: var(--shadow-xs);
}
.basket-icon svg { width: 17px; height: 17px; }
.basket-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--basket-color);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.basket-hint {
  font-family: var(--font-script);
  font-size: 1rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
  margin: 1px 14px 0;
}

.basket[data-type="noun"]      { --basket-color: var(--color-noun);      --basket-color-soft: var(--color-noun-soft);      --basket-color-pale: var(--color-noun-pale); }
.basket[data-type="verb"]      { --basket-color: var(--color-verb);      --basket-color-soft: var(--color-verb-soft);      --basket-color-pale: var(--color-verb-pale); }
.basket[data-type="adjective"] { --basket-color: var(--color-adjective); --basket-color-soft: var(--color-adjective-soft); --basket-color-pale: var(--color-adjective-pale); }
.basket[data-type="adverb"]    { --basket-color: var(--color-adverb);    --basket-color-soft: var(--color-adverb-soft);    --basket-color-pale: var(--color-adverb-pale); }

.basket:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), inset 0 -10px 16px rgba(0, 0, 0, 0.04);
}
.basket.drop-target {
  transform: scale(1.02);
  box-shadow: var(--shadow-md), 0 0 0 4px var(--basket-color-soft);
}

.basket-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding: 0 14px;
  flex: 1 1 auto;
  align-content: flex-start;
  justify-content: center;
}
.basket-word {
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--basket-color-soft);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--basket-color);
  font-weight: 500;
  animation: basketDrop var(--t-med) var(--ease-bounce);
  box-shadow: var(--shadow-xs);
}
@keyframes basketDrop {
  0% { transform: translateY(-12px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Drag ghost */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  padding: 12px 22px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-warm) 100%);
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--green);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transform-origin: center center;
}

/* ----------------------------------------------------------
   WORD CHOICE MODE
---------------------------------------------------------- */
.choice-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 24px 0;
}

.word-card {
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.20);
  border-radius: var(--r-xl);
  padding: clamp(48px, 7vw, 84px) clamp(48px, 9vw, 120px);
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-md);
  min-width: 360px;
  transition: all var(--t-med) var(--ease);
  overflow: hidden;
}
.word-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(229, 187, 114, 0.20) 0, transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(95, 126, 90, 0.10) 0, transparent 60%);
  pointer-events: none;
}
.word-card.correct-glow {
  border-color: var(--green-soft);
  box-shadow: var(--shadow-glow-green);
  animation: gentleGlow var(--t-slow) var(--ease);
}
.word-card.wrong-shake { animation: wrongShake 480ms ease; }
@keyframes gentleGlow {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.word-card-label {
  font-family: var(--font-script);
  font-size: 1.2rem;
  color: var(--gold-rich);
  margin-bottom: 14px;
  display: block;
  font-weight: 600;
}
.word-card-word-row {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  position: relative; z-index: 1;
}
.word-card-word {
  font-family: var(--font-child);
  font-size: clamp(3rem, 8vw, 5.4rem);
  color: var(--green);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
}
.word-card-example {
  margin-top: 18px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-soft);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--t-med) var(--ease), max-height var(--t-med) var(--ease), margin var(--t-med) var(--ease);
  position: relative; z-index: 1;
}
.word-card.revealed .word-card-example {
  opacity: 1;
  max-height: 80px;
  margin-top: 18px;
}
.word-card-tag {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 18px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--t-med) var(--ease);
  position: relative; z-index: 1;
}
.word-card.revealed .word-card-tag { opacity: 1; transform: translateY(0); }
.word-card-tag[data-type="noun"]      { background: var(--color-noun-pale);      color: var(--color-noun); }
.word-card-tag[data-type="verb"]      { background: var(--color-verb-pale);      color: var(--gold-rich); }
.word-card-tag[data-type="adjective"] { background: var(--color-adjective-pale); color: var(--color-adjective); }
.word-card-tag[data-type="adverb"]    { background: var(--color-adverb-pale);    color: var(--color-adverb); }

.choice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 760px;
}
.choice-row-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .choice-row { grid-template-columns: 1fr; }
  .choice-row-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Embossed choice button with depth */
.choice-button {
  padding: 22px 18px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  border: 1px solid rgba(165, 124, 60, 0.22);
  border-radius: var(--r-lg);
  font-family: var(--font-child);
  font-size: 1.4rem;
  color: var(--green);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  box-shadow:
    0 1px 2px rgba(45, 30, 12, 0.08),
    0 4px 12px rgba(45, 30, 12, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(165, 124, 60, 0.08);
  letter-spacing: -0.01em;
}
.choice-button .choice-sub {
  font-family: var(--font-script);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gold-rich);
  letter-spacing: 0;
  text-transform: lowercase;
}
.choice-button:hover:not(:disabled) {
  border-color: var(--gold-warm);
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(45, 30, 12, 0.10),
    0 12px 28px rgba(45, 30, 12, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, var(--paper) 0%, var(--gold-pale) 100%);
}
.choice-button:active:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-press);
}
.choice-button.correct {
  border-color: var(--green-soft);
  background: linear-gradient(180deg, var(--color-noun-pale) 0%, var(--sage-light) 100%);
  color: var(--green);
  box-shadow: var(--shadow-glow-green);
}
.choice-button.wrong {
  border-color: var(--rose);
  background: var(--color-adjective-pale);
  color: var(--rose);
  animation: wrongShake 480ms ease;
}
.choice-button:disabled { cursor: default; }

/* ----------------------------------------------------------
   FIND MODE
---------------------------------------------------------- */
.find-prompt {
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--paper-warm) 100%);
  border: 1px solid var(--gold-warm);
  border-radius: var(--r-lg);
  padding: 20px 28px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--gold-rich);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.find-prompt strong { color: var(--green); font-weight: 700; }

.sentence-words.find-mode .word-tile { cursor: pointer; }
.sentence-words.find-mode .word-tile.selected {
  background: linear-gradient(180deg, var(--color-noun-pale) 0%, var(--sage-light) 100%);
  border-color: var(--green-soft);
  color: var(--green);
}
.sentence-words.find-mode .word-tile.wrong {
  background: var(--color-adjective-pale);
  border-color: var(--rose);
  color: var(--rose);
}

/* ----------------------------------------------------------
   MISSING WORD MODE
---------------------------------------------------------- */
.blank-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 12px 24px;
  border: 2px dashed var(--gold);
  border-radius: 8px;
  background: var(--gold-pale);
  font-family: var(--font-child);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--gold-rich);
  font-weight: 600;
  margin: 0 4px;
  transition: all var(--t-med) var(--ease);
  vertical-align: middle;
}
.blank-slot.filled-correct {
  border-style: solid;
  border-color: var(--green-soft);
  background: var(--color-noun-pale);
  color: var(--green);
  animation: gentleGlow var(--t-slow) var(--ease);
}
.blank-slot.filled-wrong {
  border-color: var(--rose);
  background: var(--color-adjective-pale);
  color: var(--rose);
  animation: wrongShake 480ms ease;
}

/* ----------------------------------------------------------
   BUILD MODE
---------------------------------------------------------- */
.build-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.build-base-row {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.build-base, .build-result {
  font-family: var(--font-child);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--green);
  text-align: center;
  font-weight: 500;
  line-height: 1.4;
  padding: 28px 36px;
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.20);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  letter-spacing: -0.01em;
}
.build-result {
  background: linear-gradient(180deg, var(--color-noun-pale) 0%, var(--sage-light) 100%);
  border-color: var(--green-soft);
}
.build-result em { font-style: italic; color: var(--gold-rich); font-weight: 600; }
.build-arrow { color: var(--gold); font-size: 1.8rem; text-align: center; }
.build-direction {
  font-family: var(--font-script);
  color: var(--gold-rich);
  font-size: 1.3rem;
  text-align: center;
}

/* ----------------------------------------------------------
   FEEDBACK PANEL
---------------------------------------------------------- */
.feedback {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-radius: var(--r-lg);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  min-height: 60px;
  transition: all var(--t-med) var(--ease);
}
.feedback:empty { display: none; }
.feedback.success {
  background: linear-gradient(180deg, var(--color-noun-pale) 0%, transparent 100%);
  border: 1px solid var(--green-soft);
  color: var(--green);
}
.feedback.warn {
  background: linear-gradient(180deg, var(--color-adjective-pale) 0%, transparent 100%);
  border: 1px solid var(--rose);
  color: var(--rose);
}
.feedback.info {
  background: linear-gradient(180deg, var(--paper-warm) 0%, transparent 100%);
  border: 1px solid rgba(165, 124, 60, 0.18);
  color: var(--ink);
}
.feedback-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--paper);
  font-size: 1.2rem;
  box-shadow: var(--shadow-xs);
}
.feedback.success .feedback-icon { color: var(--green); }
.feedback.warn .feedback-icon { color: var(--rose); }

/* ----------------------------------------------------------
   ACTIONS / BUTTONS
---------------------------------------------------------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(165, 124, 60, 0.15);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 500;
  font-family: var(--font-body);
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: linear-gradient(180deg, var(--green-mid) 0%, var(--green) 100%);
  color: var(--paper);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--green-soft) 0%, var(--green-mid) 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-secondary {
  background: var(--paper);
  color: var(--green);
  border: 1px solid rgba(165, 124, 60, 0.22);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  background: var(--paper-warm);
  border-color: var(--gold-warm);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold-warm) 0%, var(--gold) 100%);
  color: var(--paper);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-gold:hover {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-warm) 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:disabled:hover { transform: none; }

/* TTS button */
.tts-btn {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.20);
  color: var(--green-soft);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.tts-btn:hover {
  background: var(--gold-pale);
  border-color: var(--gold-warm);
  color: var(--green);
  transform: scale(1.06);
}
.tts-btn svg { width: 16px; height: 16px; }
.tts-btn-lg { width: 40px; height: 40px; }
.tts-btn-lg svg { width: 22px; height: 22px; }

/* ----------------------------------------------------------
   REVIEW + SORT SUMMARY
---------------------------------------------------------- */
.review {
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  border: 1px solid var(--gold-warm);
  border-radius: var(--r-lg);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.review h3 {
  font-size: 1.4rem;
  display: flex; align-items: center; gap: 10px;
  color: var(--green);
}
.review-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
}
.stat-card {
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.20);
  border-radius: var(--r-md);
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.stat-card[data-type="noun"]      { border-color: var(--color-noun-soft); }
.stat-card[data-type="verb"]      { border-color: var(--color-verb-soft); }
.stat-card[data-type="adjective"] { border-color: var(--color-adjective-soft); }
.stat-card[data-type="adverb"]    { border-color: var(--color-adverb-soft); }
.stat-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}
.stat-card[data-type="noun"]      .stat-num { color: var(--color-noun); }
.stat-card[data-type="verb"]      .stat-num { color: var(--gold-rich); }
.stat-card[data-type="adjective"] .stat-num { color: var(--color-adjective); }
.stat-card[data-type="adverb"]    .stat-num { color: var(--color-adverb); }
.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-top: 6px;
  font-weight: 600;
}
.review-tip {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--gold-pale);
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  color: var(--gold-rich);
  font-style: italic;
  font-size: 1.05rem;
}

.sort-summary {
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  border: 1px solid rgba(165, 124, 60, 0.18);
  border-radius: var(--r-lg);
  padding: 28px;
}
.sort-summary h3 { font-size: 1.3rem; margin-bottom: 16px; color: var(--green); }
.summary-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(165, 124, 60, 0.18);
  flex-wrap: wrap;
}
.summary-row:last-child { border-bottom: none; }
.summary-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: 100px;
}
.summary-row[data-type="noun"]      .summary-label { color: var(--color-noun); }
.summary-row[data-type="verb"]      .summary-label { color: var(--gold-rich); }
.summary-row[data-type="adjective"] .summary-label { color: var(--color-adjective); }
.summary-row[data-type="adverb"]    .summary-label { color: var(--color-adverb); }
.summary-words {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 500;
}

/* ----------------------------------------------------------
   WHY-PROMPT CARD
---------------------------------------------------------- */
.why-card {
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--paper) 100%);
  border: 1px solid var(--gold-warm);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow-sm);
}
.why-card h3 {
  font-size: 1.4rem;
  color: var(--gold-rich);
  margin: 0;
  font-family: var(--font-display);
}
.why-options { display: flex; flex-direction: column; gap: 10px; }
.why-option {
  text-align: left;
  padding: 14px 20px;
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.20);
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  box-shadow: var(--shadow-xs);
}
.why-option:hover:not(:disabled) {
  border-color: var(--gold);
  background: var(--gold-pale);
  transform: translateX(2px);
}
.why-option.correct { border-color: var(--green-soft); background: var(--color-noun-pale); color: var(--green); }
.why-option.wrong { border-color: var(--rose); background: var(--color-adjective-pale); color: var(--rose); animation: wrongShake 480ms ease; }
.why-option:disabled { cursor: default; }
.why-teach {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--green);
  padding: 12px 16px;
  background: var(--paper);
  border-radius: var(--r-md);
  border-left: 3px solid var(--green-soft);
}
.why-teach.warn { color: var(--rose); border-left-color: var(--rose); }

/* ----------------------------------------------------------
   STORIES MODE
---------------------------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.story-card {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  border: 1px solid rgba(165, 124, 60, 0.18);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: all var(--t-med) var(--ease);
  box-shadow: var(--shadow-sm);
}
.story-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--story-accent, var(--green));
}
.story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.story-card.locked { opacity: 0.55; }
.story-card.completed::after {
  content: "✓ Completed";
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--font-script);
  font-size: 1rem;
  color: var(--story-accent, var(--green));
  font-weight: 600;
}
.story-head { display: flex; gap: 14px; align-items: center; }
.story-icon { font-size: 2.6rem; line-height: 1; flex-shrink: 0; }
.story-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0;
  color: var(--story-accent, var(--green));
  font-weight: 600;
}
.story-summary {
  font-family: var(--font-heading);
  color: var(--ink-soft);
  font-style: italic;
  margin: 4px 0 0;
  font-size: 0.98rem;
}
.story-progress {
  height: 6px;
  background: var(--paper-cream);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.story-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--story-accent, var(--green-soft)), var(--gold-warm));
  transition: width var(--t-med) var(--ease);
}
.story-progress-text {
  font-size: 0.88rem;
  color: var(--ink-mute);
  font-style: italic;
  font-family: var(--font-heading);
}

.story-complete {
  text-align: center;
  padding: 40px;
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  border: 1px solid var(--green-soft);
  border-radius: var(--r-lg);
}
.story-complete-icon { font-size: 4.5rem; line-height: 1; margin-bottom: 12px; }
.story-complete h3 { font-size: 2rem; margin-bottom: 8px; color: var(--green); }
.story-complete-text {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

/* ----------------------------------------------------------
   DISAMBIGUATE MODE
---------------------------------------------------------- */
.disamb-hero {
  text-align: center;
  padding: 32px;
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  border: 1px solid var(--green-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.disamb-hero-label {
  font-family: var(--font-script);
  font-size: 1.2rem;
  color: var(--gold-rich);
  font-weight: 600;
}
.disamb-hero-word {
  font-family: var(--font-child);
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.025em;
  margin-top: 8px;
}
.disamb-sentences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.disamb-card {
  background: var(--paper);
  border: 2px solid rgba(165, 124, 60, 0.20);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all var(--t-med) var(--ease);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.disamb-card.is-active {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  box-shadow: var(--shadow-md);
}
.disamb-card.is-active::before {
  content: "?";
  position: absolute;
  top: -16px; right: 20px;
  width: 34px; height: 34px;
  background: linear-gradient(180deg, var(--gold-warm) 0%, var(--gold) 100%);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: var(--shadow-sm);
}
.disamb-card.revealed { background: linear-gradient(180deg, var(--color-noun-pale) 0%, var(--paper) 100%); border-color: var(--green-soft); }
.disamb-head { display: flex; align-items: center; justify-content: space-between; }
.disamb-tag {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.disamb-card.is-active .disamb-tag { color: var(--gold-rich); }
.disamb-text {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.disamb-highlight {
  font-weight: 700;
  color: var(--green);
  background: var(--gold-pale);
  padding: 0 6px;
  border-radius: 4px;
}
.disamb-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(165, 124, 60, 0.20);
}
.disamb-meta-text {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-family: var(--font-heading);
  font-style: italic;
  flex: 1;
  min-width: 200px;
}

/* ----------------------------------------------------------
   PROGRESS GARDEN (home garden window)
---------------------------------------------------------- */
.progress-garden {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  border: 1px solid rgba(165, 124, 60, 0.18);
  border-radius: var(--r-xl);
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.garden-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.garden-header h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  display: flex; align-items: center; gap: 10px;
  color: var(--green);
}
.garden-h-icon { font-size: 1.4rem; }
.garden-stats {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.garden-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.garden-stat .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.garden-stat[data-type="noun"]      .dot { background: var(--color-noun); }
.garden-stat[data-type="verb"]      .dot { background: var(--gold-rich); }
.garden-stat[data-type="adjective"] .dot { background: var(--color-adjective); }
.garden-stat[data-type="adverb"]    .dot { background: var(--color-adverb); }
.garden-stat strong {
  color: var(--green);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
}

.garden-grid {
  min-height: 100px;
  align-items: end;
  padding: 8px 0;
}
.home-garden {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(166, 124, 60, 0.05) 70%, rgba(94, 64, 38, 0.10) 100%);
  border-radius: var(--r-md);
  position: relative;
}

/* Make the garden feel like a living tended world for K-2 — immersive and responsive */
[data-little-blessings="true"] .home-garden {
  background:
    linear-gradient(180deg, 
      rgba(200, 220, 240, 0.07) 0%, 
      rgba(255, 245, 210, 0.05) 32%,
      rgba(170, 135, 75, 0.07) 65%, 
      rgba(85, 58, 35, 0.16) 100%);
  box-shadow: inset 0 0 0 1px rgba(166, 124, 60, 0.12);
}
.home-garden-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: 3px solid rgba(166, 124, 60, 0.30);
  position: relative;
}
.home-garden-row:last-child { border-bottom: none; }
.home-garden-row::after {
  /* soil row line texture */
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(94, 64, 38, 0.15) 4px 5px);
}

/* Continuous cinematic life in the garden during active sessions */
[data-little-blessings="true"] .plant {
  animation: gardenSway 4.2s ease-in-out infinite;
  transform-origin: bottom center;
}

[data-little-blessings="true"] .home-garden-row:nth-child(even) .plant {
  animation-duration: 5.1s;
  animation-delay: -1.8s;
}

@keyframes gardenSway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.8deg); }
}

/* Subtle living light moving across the cinematic garden */
[data-little-blessings="true"] .home-garden::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 240, 180, 0.07) 38%,
    transparent 55%
  );
  background-size: 220% 100%;
  animation: cinematicLightDrift 18s linear infinite;
  pointer-events: none;
  border-radius: 24px;
  z-index: 2;
}

@keyframes cinematicLightDrift {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* Cinematic mode bar recedes so the living garden + parchment stage feel like the movie */
[data-little-blessings="true"] .mode-bar-wrap {
  opacity: 0.82;
  transition: opacity 220ms ease;
}

[data-little-blessings="true"] .mode-bar-wrap:hover {
  opacity: 1;
}
.home-plot {
  border: 1px dashed rgba(165, 124, 60, 0.25);
  background: linear-gradient(180deg, rgba(255, 251, 241, 0.6) 0%, rgba(166, 124, 60, 0.08) 100%);
  border-radius: 8px;
  padding: 4px;
  height: 72px;
  cursor: pointer;
  display: grid;
  place-items: end center;
  transition: all var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
.home-plot:hover { border-color: var(--green-soft); transform: translateY(-2px); }
.home-plot.empty { background: rgba(166, 124, 60, 0.05); border-style: dotted; opacity: 0.4; cursor: default; }
.home-plot.empty:hover { transform: none; }
.home-plot.has-plant { background: linear-gradient(180deg, transparent 60%, rgba(74, 124, 92, 0.10)); }

/* === LIVE BLESSING GARDEN (K-2 SimCity/Minecraft-style interactive play space) === */
[data-little-blessings="true"] .progress-garden {
  padding: 26px 22px 34px;
  border-radius: var(--r-xl);
  border-color: var(--gold-warm);
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, #FFFBF1 0%, #FDF3D9 100%);
  position: relative;
  overflow: hidden;
}

/* Living world background for the Blessing Garden — makes it feel like a real tended place */
[data-little-blessings="true"] .progress-garden::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 230, 170, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(180, 210, 170, 0.08) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Extra living depth — subtle hills and light that make the garden feel like a real outdoor place */
[data-little-blessings="true"] .progress-garden::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent 10%, rgba(120, 85, 50, 0.07) 55%, rgba(70, 48, 28, 0.11) 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

[data-little-blessings="true"] .garden-grid {
  min-height: 218px;
}

[data-little-blessings="true"] .home-plot {
  height: 112px;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}
[data-little-blessings="true"] .home-plot.empty {
  cursor: pointer;
  opacity: 0.9;
  border-style: solid;
  border-color: rgba(232, 201, 125, 0.72);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 241, 204, 0.72) 0%, rgba(255, 241, 204, 0) 34%),
    linear-gradient(180deg, rgba(255, 251, 241, 0.42) 0%, rgba(145, 107, 64, 0.18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 10px 24px rgba(28, 18, 9, 0.18);
}
[data-little-blessings="true"] .home-plot.empty::before {
  content: "+";
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: rgba(255, 244, 214, 0.82);
  text-shadow: 0 0 12px rgba(255, 233, 168, 0.45);
}
[data-little-blessings="true"] .home-plot.empty:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 226, 136, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 16px 30px rgba(24, 15, 8, 0.28),
    0 0 0 1px rgba(255, 233, 168, 0.24);
}
[data-little-blessings="true"] .home-plot.empty:active {
  transform: translateY(-1px) scale(0.99);
}

.home-plot.blessed-growth {
  animation: blessedGrowthFlash 1.35s ease-out;
  border-color: var(--gold);
  box-shadow: 0 0 0 12px rgba(229, 187, 114, 0.25);
}

@keyframes blessedGrowthFlash {
  0% { transform: scale(0.96); }
  35% { transform: scale(1.18); box-shadow: 0 0 0 22px rgba(229, 187, 114, 0); }
  100% { transform: scale(1); }
}

/* Live rain drops and sun blessing that appear while the child answers during lessons */
.live-rain {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 12;
}
.rain-drop {
  position: absolute; top: -18px; width: 2.8px; height: 16px;
  background: linear-gradient(transparent, #A8C3D8, transparent);
  opacity: 0.7;
  animation: rainFall linear forwards;
}
@keyframes rainFall { to { transform: translateY(280px); } }

.persistent-rain .rain-drop {
  opacity: 0.55;
}

.live-sun-burst {
  position: absolute; top: 14px; right: 22px; width: 48px; height: 48px;
  background: radial-gradient(circle, #FFE070 18%, transparent 72%);
  border-radius: 50%; pointer-events: none; z-index: 14;
  animation: sunBlessing 3.8s ease-out forwards; opacity: 0.85;
}
@keyframes sunBlessing {
  0% { transform: scale(0.35); opacity: 0.25; }
  28% { transform: scale(1.35); opacity: 0.95; }
  100% { transform: scale(2.1); opacity: 0; }
}

.persistent-sun .sun-ray {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px;
  height: 38px;
  background: linear-gradient(#FFE070, transparent);
  transform-origin: 50% 0;
  opacity: 0.6;
  animation: sunRayPulse 2.8s ease-in-out infinite;
}

@keyframes sunRayPulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); }
  50% { opacity: 0.85; transform: scaleY(1.05); }
}

/* Beautiful floating blessing particles that appear when the child answers correctly */
.blessing-particle {
  position: fixed;
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #FFE9A8 30%, #E5BB72 70%, transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.9;
  animation: blessingFloat var(--dur, 1.6s) ease-out forwards;
}

@keyframes blessingFloat {
  0% { 
    transform: translate(0, 0) scale(0.6); 
    opacity: 0.95; 
  }
  100% { 
    transform: translate(var(--drift-x), var(--drift-y)) scale(0.2); 
    opacity: 0; 
  }
}

.garden-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-mute);
  font-style: italic;
  font-family: var(--font-heading);
  padding: 24px;
  font-size: 1.05rem;
}
.garden-empty.garden-empty-live {
  max-width: 760px;
  margin: 0 auto 10px;
  color: rgba(255, 244, 214, 0.9);
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.garden-hint {
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-mute);
  font-family: var(--font-script);
  font-size: 1.05rem;
  margin-top: 14px;
}

/* Plant component */
.plant {
  display: grid; place-items: end center;
  width: 100%;
  height: 100%;
}
.plant > svg { width: 100%; height: 100%; display: block; }
.plant[data-stage="0"] { transform: scale(0.55); opacity: 0.95; }
.plant[data-stage="1"] { transform: scale(0.7); }
.plant[data-stage="2"] { transform: scale(0.82); }
.plant[data-stage="3"] { transform: scale(0.92); }
.plant[data-stage="4"] { transform: scale(1); }
.home-garden[data-motion="lively"] .plant {
  transform-origin: bottom center;
  animation: plantSway 5.5s ease-in-out infinite;
}
@keyframes plantSway {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(1deg); }
}
.home-garden[data-motion="still"] .plant { animation: none !important; }

/* ----------------------------------------------------------
   REWARD SCREEN — full cinematic scene
---------------------------------------------------------- */
.reward-screen {
  position: relative;
  margin: -28px -28px 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  /* The reward screen FILLS the stage and lays out as a flex column: the
     header pins to the top, the garden grid takes the flexible middle (and
     scrolls inside itself if tall), and the action buttons sit in normal
     flow at the bottom — always inside the stage, never clipped by the
     stage's overflow:hidden and never colliding with the footer below.
     Earlier attempts (overflow:auto, then sticky buttons) failed because the
     buttons landed at the stage's clipped bottom edge where the footer
     overlaps. This makes the layout fit instead of scroll-to-reach. Fix 2026-05-30. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 238, 194, 0.62) 0%, transparent 26%),
    radial-gradient(circle at 82% 22%, rgba(255, 220, 160, 0.44) 0%, transparent 28%),
    linear-gradient(180deg, #fff2d8 0%, #f5dbab 34%, #d9be89 58%, #8c6b46 100%);
  /* Fill the stage — do NOT use min-height:75vh. The stage shares the viewport
     with the garden window and is often only ~450px tall, so a 75vh (≈525px)
     reward screen was TALLER than its own container and the stage's
     overflow:hidden clipped off the bottom — taking the action buttons with
     it. flex:1 + min-height:0 makes the screen exactly fill the stage so the
     header, grid and buttons all fit inside it. THIS was the real cause of the
     "planted screen is a dead end" bug. Fix 2026-05-30. */
  min-height: 0;
}
@media (max-width: 540px) { .reward-screen { margin: -22px -16px 0; } }
.reward-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 249, 228, 0.34) 0%, transparent 28%),
    linear-gradient(180deg, transparent 0%, rgba(255, 248, 228, 0.16) 46%, rgba(42, 28, 14, 0.26) 100%);
  pointer-events: none;
  z-index: 0;
}
.reward-screen::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -8%;
  height: 42%;
  background:
    radial-gradient(ellipse at center top, rgba(255, 243, 214, 0.38) 0%, rgba(255, 243, 214, 0) 42%),
    linear-gradient(180deg, rgba(57, 38, 18, 0) 0%, rgba(57, 38, 18, 0.18) 38%, rgba(57, 38, 18, 0.48) 100%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}

.scene-sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 290px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.scene-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 246, 196, 0.58) 0%, transparent 18%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 30%);
  mix-blend-mode: screen;
}
.reward-screen[data-tod="night"] .scene-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 26% 12%, rgba(255,255,255,0.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 38% 28%, rgba(255,255,255,0.8) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 54% 18%, rgba(255,255,255,0.78) 0 1px, transparent 1.6px),
    radial-gradient(circle at 69% 24%, rgba(255,255,255,0.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 10%, rgba(255,255,255,0.85) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 90% 30%, rgba(255,255,255,0.74) 0 1px, transparent 1.7px);
  opacity: 0.82;
}
.sky-svg { width: 100%; height: 100%; display: block; }
.sky-svg .sky-bg { fill: url(#skyGradMid); }
.sky-svg .moon, .sky-svg .moon-glow { opacity: 0; }
.reward-screen[data-tod="morning"] .sky-svg .sky-bg { fill: url(#skyGradMorn); }
.reward-screen[data-tod="midday"]  .sky-svg .sky-bg { fill: url(#skyGradMid); }
.reward-screen[data-tod="evening"] .sky-svg .sky-bg { fill: url(#skyGradEve); }
.reward-screen[data-tod="night"]   .sky-svg .sky-bg { fill: url(#skyGradNite); }
.reward-screen[data-tod="night"] .sky-svg .sun, .reward-screen[data-tod="night"] .sky-svg .sun-glow { opacity: 0; }
.reward-screen[data-tod="night"] .sky-svg .moon, .reward-screen[data-tod="night"] .sky-svg .moon-glow { opacity: 1; }
.reward-screen[data-weather="cloudy"] .sky-clouds .cloud { opacity: 1; }
.reward-screen[data-weather="rainy"] .sky-rain { opacity: 1; }

.reward-screen[data-motion="lively"] .sky-svg .sun-glow,
.reward-screen[data-motion="lively"] .sky-svg .sun {
  transform-origin: 80px 14px;
  animation: sunPulse 6s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.sky-clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute;
  width: 100px; height: 28px;
  background:
    radial-gradient(circle at 25% 60%, rgba(255,255,255,0.95) 18%, transparent 19%),
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.95) 22%, transparent 23%),
    radial-gradient(circle at 75% 60%, rgba(255,255,255,0.95) 18%, transparent 19%);
  background-repeat: no-repeat;
  filter: blur(0.5px);
  opacity: 0.85;
}
.cloud-1 { top: 28px; left: -110px; }
.cloud-2 { top: 70px; left: -140px; width: 70px; height: 22px; opacity: 0.7; }
.cloud-3 { top: 44px; left: -180px; width: 120px; height: 32px; opacity: 0.6; }
.reward-screen[data-motion="lively"] .cloud-1 { animation: cloudDrift 70s linear infinite; }
.reward-screen[data-motion="lively"] .cloud-2 { animation: cloudDrift 95s linear infinite; animation-delay: 18s; }
.reward-screen[data-motion="lively"] .cloud-3 { animation: cloudDrift 80s linear infinite; animation-delay: 35s; }
@keyframes cloudDrift { 0% { transform: translateX(0); } 100% { transform: translateX(120vw); } }

.sky-birds { position: absolute; inset: 0; pointer-events: none; }
.bird {
  position: absolute;
  width: 16px; height: 10px;
  background:
    radial-gradient(ellipse at 30% 50%, var(--ink-rich) 30%, transparent 31%),
    radial-gradient(ellipse at 70% 50%, var(--ink-rich) 30%, transparent 31%);
  opacity: 0;
}
.reward-screen[data-motion="lively"] .bird-1 { top: 36px; left: -20px; animation: birdFly 22s linear infinite; animation-delay: 8s; }
.reward-screen[data-motion="lively"] .bird-2 { top: 70px; left: -20px; animation: birdFly 28s linear infinite; animation-delay: 50s; }
@keyframes birdFly {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  5% { opacity: 0.85; }
  50% { transform: translateX(60vw) translateY(-14px); }
  95% { opacity: 0.85; }
  100% { transform: translateX(120vw) translateY(0); opacity: 0; }
}

.sky-rain { position: absolute; inset: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.raindrop {
  position: absolute; top: -10px;
  width: 1.5px; height: 14px;
  background: linear-gradient(180deg, transparent, #88AAC8 40%, transparent);
  animation: rainFall 1.6s linear infinite;
  opacity: 0.6;
}
@keyframes rainFall {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 0.6; }
  100% { transform: translateY(240px); opacity: 0; }
}

.reward-screen[data-motion="still"] .cloud,
.reward-screen[data-motion="still"] .bird,
.reward-screen[data-motion="still"] .raindrop,
.reward-screen[data-motion="still"] .sun,
.reward-screen[data-motion="still"] .sun-glow {
  animation: none !important;
}

.reward-inner {
  position: relative;
  z-index: 2;
  /* Fill the reward screen and lay out top→bottom: header, flexible grid,
     action buttons. Top padding leaves room for the sky-scene background and
     is clamped so the column fits inside the stage on short viewports. The
     buttons live at the bottom in normal flow (flex:0) and stay on-screen.
     Fix 2026-05-30. */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(44px, 9vh, 140px) 36px 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2vh, 24px);
  align-items: center;
  /* Single scroll region: if the stage is too short for the whole reward
     (head + garden + buttons), the content scrolls here while the action
     bar below stays sticky-pinned and reachable. Fix 2026-05-30. */
  overflow-y: auto;
}
@media (max-width: 540px) { .reward-inner { padding: clamp(96px, 16vh, 180px) 16px 24px; gap: 14px; } }

.reward-head { text-align: center; max-width: 680px; }
.reward-eyebrow {
  display: inline-block;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-rich); font-weight: 700;
  background: rgba(255, 251, 241, 0.78);
  backdrop-filter: blur(10px) saturate(135%);
  padding: 8px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--gold-warm);
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.reward-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3rem);
  color: var(--green);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 2px 22px rgba(255, 244, 214, 0.26);
}
.reward-sub {
  font-family: var(--font-script);
  color: var(--gold-rich);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  margin-top: 12px;
}
.reward-sub strong { color: var(--green); font-weight: 600; }

.reward-blessing {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--green-mid);
  background: linear-gradient(180deg, rgba(255, 251, 241, 0.92) 0%, rgba(252, 241, 216, 0.86) 100%);
  backdrop-filter: blur(10px) saturate(125%);
  border: 1px solid rgba(165, 124, 60, 0.18);
  border-radius: var(--r-md);
  padding: 14px 22px;
  margin: 16px auto 8px;
  max-width: 620px;
  text-align: center;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  box-shadow: var(--shadow-xs);
}

/* Little Blessings (K-2) — bigger, warmer, lower-friction garden blessing cards */
.little-blessings-picker {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}
.little-blessings-picker .blessing-plant {
  padding: 24px 18px 20px;
  border-radius: var(--r-xl);
  border-color: var(--gold-warm);
  background: linear-gradient(180deg, #FFFEF6 0%, #FDF3D9 100%);
}
.little-blessings-picker .blessing-plant .plant-pick-icon {
  width: 96px; height: 120px;
  transform: scale(1.1);
}
.little-blessings-picker .plant-pick-label {
  font-size: 1.25rem;
  color: var(--green-rich);
}
[data-little-blessings="true"] .reward-sub {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--green);
}
[data-little-blessings="true"] .stage {
  padding: clamp(32px, 5vw, 64px);
}

/* Automatic K-2 enlargements for interaction targets */
[data-little-blessings="true"] .word-tile {
  padding: 16px 28px;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
}
[data-little-blessings="true"] .choice-button {
  padding: 26px 20px;
  font-size: 1.55rem;
}
[data-little-blessings="true"] .basket {
  min-height: 196px;
}
[data-little-blessings="true"] .basket-title { font-size: 1.2rem; }
[data-little-blessings="true"] .basket-hint { font-size: 1.05rem; }

.little-blessings-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 8px;
  padding: 4px 14px;
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--paper-warm) 100%);
  color: var(--gold-rich);
  font-family: var(--font-script);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  border: 1px solid var(--gold-warm);
  box-shadow: var(--shadow-xs);
}

/* Plant picker */
.plant-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  max-width: 1000px;
  width: 100%;
}
.plant-pick {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  border: 1px solid rgba(165, 124, 60, 0.20);
  border-radius: var(--r-lg);
  padding: 18px 14px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  transition: all var(--t-fast) var(--ease);
  font-family: var(--font-body);
  box-shadow:
    0 2px 4px rgba(45, 30, 12, 0.08),
    0 8px 18px rgba(45, 30, 12, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.plant-pick:hover {
  border-color: var(--green-soft);
  transform: translateY(-4px);
  box-shadow:
    0 4px 8px rgba(45, 30, 12, 0.10),
    0 16px 32px rgba(45, 30, 12, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.plant-pick:active { transform: translateY(-1px); }
.plant-pick-icon { width: 80px; height: 110px; display: grid; place-items: end center; }
.plant-pick-icon .plant { width: 100%; height: 100%; }
.plant-pick-label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--green);
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.plant-pick-desc {
  font-family: var(--font-script);
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.3;
}

.reward-skip { margin-top: 12px; }
.reward-actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  /* Sticky-pinned to the bottom of the (stage-bounded) reward scroll region so
     the advance buttons are ALWAYS visible and tappable, no matter how short
     the stage is. This works now because the reward screen fills the stage
     instead of being 75vh-tall and overflowing it. The translucent backdrop
     keeps the buttons legible over scrolled content. Fix 2026-05-30. */
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  z-index: 5;
  width: calc(100% + 72px);
  margin: 0 -36px;
  padding: 14px 36px 16px;
  background: linear-gradient(180deg, rgba(248,224,182,0) 0%, rgba(246,221,177,0.94) 32%, rgba(240,212,165,0.99) 100%);
}
@media (max-width: 540px) {
  .reward-actions { width: calc(100% + 32px); margin: 0 -16px; padding: 12px 16px 14px; gap: 8px; flex-wrap: nowrap; }
  /* Keep both buttons on one short row on narrow phones so the sticky bar
     doesn't grow to two rows and clip off the bottom of a collapsed stage. */
  .reward-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Reward garden grid (place + planted phase) */
.reward-garden-grid {
  position: relative;
  display: flex; flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 760px;
  background: linear-gradient(180deg, transparent 0%, rgba(94, 64, 38, 0.06) 30%);
  border-radius: var(--r-lg);
  padding: 16px 14px;
  /* Natural height; the reward-inner above is the single scroll region. The
     garden grid no longer forces the screen taller than the stage. Fix 2026-05-30. */
  flex: 0 0 auto;
}
.reward-row { display: flex; flex-direction: column; gap: 4px; position: relative; }
.reward-soil {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #a37f49 0%, #8a6939 30%, #a37f49 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15) inset, 0 -1px 0 rgba(255,255,255,0.25) inset;
  position: relative;
  overflow: hidden;
}
.reward-soil::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,0.06) 4px 5px);
}
.reward-plots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 8px 0 16px;
}
.reward-plot {
  aspect-ratio: 0.72;
  background: linear-gradient(180deg, transparent 60%, rgba(166, 124, 60, 0.10));
  border: 1px dashed transparent;
  border-radius: 8px;
  cursor: default;
  display: grid; place-items: end center;
  position: relative;
  transition: all var(--t-med) var(--ease);
  padding: 4px;
}
.reward-plot.pickable {
  cursor: pointer;
  border-color: var(--gold-warm);
  background: linear-gradient(180deg, rgba(229, 187, 114, 0.12) 0%, rgba(200, 161, 88, 0.18) 100%);
}
.reward-plot.pickable:hover {
  border-color: var(--green-soft);
  background: linear-gradient(180deg, rgba(95, 138, 107, 0.18) 0%, rgba(95, 126, 90, 0.28) 100%);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.reward-plot.has-plant {
  background: linear-gradient(180deg, transparent 50%, rgba(95, 126, 90, 0.10));
}
.reward-plot.highlight {
  animation: plotHighlight 2s ease-out 1;
}
.reward-plot.highlight::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 70%, rgba(255, 220, 130, 0.55), transparent 60%);
  pointer-events: none;
  animation: plotHighlight 2s ease-out 1;
}
@keyframes plotHighlight {
  0%   { box-shadow: 0 0 0 0 rgba(229, 187, 114, 0.55); transform: scale(1); }
  50%  { box-shadow: 0 0 0 16px rgba(229, 187, 114, 0); transform: scale(1.1); }
  100% { box-shadow: 0 0 0 0 rgba(229, 187, 114, 0); transform: scale(1); }
}
.plot-spot {
  width: 14px; height: 14px;
  background: radial-gradient(circle, var(--gold) 30%, transparent 70%);
  border-radius: 50%;
  margin-bottom: 8px;
  animation: pickableBlink 1.4s ease-in-out infinite;
}
@keyframes pickableBlink {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}
.reward-garden-grid[data-motion="still"] .plot-spot { animation: none; opacity: 0.5; }

.garden-sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkle {
  position: absolute;
  width: 5px; height: 5px;
  background: radial-gradient(circle, #FFEFB3 30%, transparent 31%);
  opacity: 0;
  animation: sparkleTwinkle 3s ease-in-out infinite;
}
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.5); }
}
.reward-garden-grid[data-motion="still"] .sparkle { animation: none; opacity: 0; }

.fly-butterfly {
  position: absolute;
  top: 4px; left: 50%;
  width: 16px; height: 12px;
  background:
    radial-gradient(ellipse at 25% 50%, var(--rose) 50%, transparent 51%),
    radial-gradient(ellipse at 75% 50%, var(--rose) 50%, transparent 51%);
  pointer-events: none;
  animation: flutter 4s ease-in-out infinite;
}
.reward-garden-grid[data-motion="still"] .fly-butterfly { animation: none; opacity: 0; }
@keyframes flutter {
  0%   { transform: translate(-50%, 0) rotate(0deg); }
  25%  { transform: translate(-30%, -8px) rotate(8deg); }
  50%  { transform: translate(-70%, -4px) rotate(-8deg); }
  75%  { transform: translate(-40%, -12px) rotate(4deg); }
  100% { transform: translate(-50%, 0) rotate(0deg); }
}

/* ----------------------------------------------------------
   CONFETTI
---------------------------------------------------------- */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.confetti-piece {
  position: absolute; top: 0;
  width: 12px; height: 16px;
  border-radius: 50% 0 50% 0;
  opacity: 0.85;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0.85; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

.seed-particle {
  position: fixed;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-warm), var(--green-soft));
  pointer-events: none;
  z-index: 99;
  animation: seedFly 950ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  box-shadow: 0 0 10px rgba(229, 187, 114, 0.7);
}
@keyframes seedFly {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15%  { transform: translate(calc(var(--dx) * 0.15), calc(var(--dy) * 0.15 - 30px)) scale(1.1); opacity: 1; }
  60%  { transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6 - 50px)) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */
.app-footer {
  text-align: center;
  font-family: var(--font-script);
  color: var(--ink-soft);
  font-size: 1.2rem;
  padding: 24px;
  opacity: 0.8;
}

/* ----------------------------------------------------------
   TOAST
---------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--green);
  color: var(--paper);
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: 0.98rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all var(--t-med) var(--ease);
  z-index: 1100;
  max-width: 90vw;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ----------------------------------------------------------
   DRAWER (Settings, Profile, Help)
---------------------------------------------------------- */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(31, 53, 38, 0.42);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.drawer-overlay.open { opacity: 1; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 96vw);
  background: var(--paper);
  border-left: 1px solid rgba(165, 124, 60, 0.22);
  box-shadow: -24px 0 60px rgba(31, 53, 38, 0.20);
  z-index: 201;
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease);
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-content { display: flex; flex-direction: column; height: 100%; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 28px 22px;
  border-bottom: 1px solid rgba(165, 124, 60, 0.18);
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
}
.drawer-head h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0;
  color: var(--green);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.drawer-body .icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.22);
  color: var(--green);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.drawer-head .icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 1px solid rgba(165, 124, 60, 0.22); color: var(--green); display: grid; place-items: center; cursor: pointer; }
.drawer-head .icon-btn svg { width: 18px; height: 18px; }
.drawer-head .icon-btn:hover { background: var(--paper-warm); border-color: var(--gold); }

.settings-section {
  font-family: var(--font-script);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-rich);
  margin-top: 10px;
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(165, 124, 60, 0.20);
  letter-spacing: 0;
  text-transform: none;
}
.settings-section:first-child { margin-top: 0; }

.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
}
.settings-row-vert { flex-direction: column; align-items: stretch; gap: 12px; }
.settings-text { flex: 1; }
.settings-label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
}
.settings-hint {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.4;
  font-family: var(--font-heading);
  font-style: italic;
}

.switch {
  width: 52px; height: 30px;
  background: rgba(165, 124, 60, 0.30);
  border-radius: var(--r-pill);
  position: relative;
  transition: background var(--t-fast) var(--ease);
  cursor: pointer;
  flex-shrink: 0;
  border: none; padding: 0;
  box-shadow: var(--shadow-press);
}
.switch.on { background: linear-gradient(180deg, var(--green-soft) 0%, var(--green-mid) 100%); }
.switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  transition: left var(--t-fast) var(--ease);
}
.switch.on .switch-thumb { left: 25px; }

.segmented {
  display: inline-flex;
  background: var(--paper-warm);
  border: 1px solid rgba(165, 124, 60, 0.22);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-press);
}
.seg-btn {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  font-family: var(--font-body);
}
.seg-btn:hover { color: var(--green); }
.seg-btn.active {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-cream) 100%);
  color: var(--green);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.settings-actions .btn { padding: 10px 18px; font-size: 0.92rem; }

.kbd-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kbd-list li { display: flex; align-items: center; gap: 14px; }
.kbd-list kbd {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.30);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  min-width: 32px;
  text-align: center;
  box-shadow: 0 2px 0 rgba(165, 124, 60, 0.30);
  color: var(--green);
}

/* Profiles */
.profile-list { display: flex; flex-direction: column; gap: 14px; }
.profile-card {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  border: 1px solid rgba(165, 124, 60, 0.20);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-xs);
}
.profile-card.active {
  border-color: var(--green-soft);
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--color-noun-pale) 100%);
  box-shadow: var(--shadow-sm);
}
.profile-card-head { display: flex; align-items: center; gap: 14px; }
.profile-card-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-pale), var(--gold-warm));
  display: grid; place-items: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.profile-card-meta { flex: 1; min-width: 0; }
.profile-card-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--green);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-card-sub { font-size: 0.92rem; color: var(--ink-soft); margin-top: 2px; font-family: var(--font-heading); font-style: italic; }
.profile-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-card-actions .btn { padding: 8px 16px; font-size: 0.88rem; }
.profile-active-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--color-noun-pale);
  color: var(--green);
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 600;
}
.profile-add {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px;
  background: var(--paper);
  border: 2px dashed rgba(165, 124, 60, 0.30);
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.profile-add:hover { border-color: var(--green-soft); color: var(--green); background: var(--paper-warm); }
.profile-add svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------
   ONBOARDING / TEND / REPORT MODALS
---------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(31, 53, 38, 0.55);
  backdrop-filter: blur(6px);
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: fadeIn var(--t-med) var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--paper);
  box-sizing: border-box;
  border-radius: var(--r-xl);
  padding: 40px;
  max-width: 540px;
  width: min(100%, calc(100vw - 40px));
  box-shadow: var(--shadow-paper);
  border: 1px solid rgba(165, 124, 60, 0.22);
  animation: modalRise 380ms var(--ease-bounce);
  position: relative;
  overflow: hidden;
}
.modal::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-warm) 30%, var(--gold) 50%, var(--gold-warm) 70%, transparent 100%);
}
@keyframes modalRise {
  0%   { transform: translateY(20px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-title { font-family: var(--font-display); font-size: 2rem; margin-bottom: 6px; color: var(--green); }
.modal-sub { font-family: var(--font-script); color: var(--gold-rich); font-size: 1.2rem; margin-bottom: 26px; }
.modal-body { display: flex; flex-direction: column; gap: 14px; }
.field-label {
  font-family: var(--font-script);
  font-size: 1.1rem;
  color: var(--gold-rich);
  font-weight: 600;
  margin-top: 8px;
}
.field-input {
  box-sizing: border-box;
  font-family: var(--font-display);
  font-size: 1.4rem;
  padding: 14px 18px;
  background: var(--paper);
  border: 2px solid rgba(165, 124, 60, 0.22);
  border-radius: var(--r-md);
  color: var(--green);
  transition: border-color var(--t-fast) var(--ease);
  width: 100%;
  box-shadow: var(--shadow-press);
}
.field-input:focus { outline: none; border-color: var(--green-soft); box-shadow: var(--shadow-press), 0 0 0 4px rgba(95, 126, 90, 0.18); }
.field-input-small {
  font-size: 1.05rem !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
}
.field-divider {
  margin-top: 24px;
  font-family: var(--font-script);
  font-size: 1.1rem;
  color: var(--ink-mute);
  text-align: center;
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 10px;
}
.avatar-pick {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid rgba(165, 124, 60, 0.22);
  font-size: 1.8rem;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-bounce);
  display: grid; place-items: center;
  box-shadow: var(--shadow-xs);
}
.avatar-pick:hover { transform: scale(1.1); border-color: var(--gold); }
.avatar-pick.active {
  border-color: var(--green-soft);
  background: var(--color-noun-pale);
  transform: scale(1.1);
  box-shadow: var(--shadow-sm), 0 0 0 4px rgba(95, 126, 90, 0.18);
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 26px;
}

/* Tend / Report modals */
.modal-tend, .modal-report { max-width: 720px; }
.modal-report { max-width: 920px; max-height: 92vh; overflow-y: auto; padding: 36px; }
.tend-detail {
  display: flex; gap: 18px; align-items: center;
  padding: 20px;
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  border: 1px solid rgba(165, 124, 60, 0.18);
}
.tend-plant { width: 80px; height: 100px; flex-shrink: 0; }
.tend-plant svg { width: 100%; height: 100%; }
.tend-meta { flex: 1; }
.tend-note {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 4px;
}
.tend-date { font-family: var(--font-heading); font-style: italic; font-size: 0.92rem; color: var(--ink-mute); }
.tend-mastery h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 12px;
  margin-top: 6px;
}
.tend-words { display: flex; flex-wrap: wrap; gap: 8px; max-height: 220px; overflow-y: auto; padding: 4px 2px; }
.tend-word-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.22);
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 500;
}
.tend-word-chip[data-type="noun"]      { border-color: var(--color-noun-soft);      color: var(--color-noun); }
.tend-word-chip[data-type="verb"]      { border-color: var(--color-verb-soft);      color: var(--gold-rich); }
.tend-word-chip[data-type="adjective"] { border-color: var(--color-adjective-soft); color: var(--color-adjective); }
.tend-word-chip[data-type="adverb"]    { border-color: var(--color-adverb-soft);    color: var(--color-adverb); }
.tend-word-box { font-size: 0.72rem; color: var(--gold); }
.tend-empty {
  font-style: italic;
  font-family: var(--font-heading);
  color: var(--ink-mute);
  padding: 16px;
}

/* Report modal */
.report-overlay { padding: 12px; }
.report-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(165, 124, 60, 0.18);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.report-eyebrow {
  font-family: var(--font-script);
  font-size: 1.1rem;
  color: var(--gold-rich);
  font-weight: 600;
}
.report-title { font-family: var(--font-display); font-size: 1.9rem; margin: 0; color: var(--green); }
.report-sub { font-family: var(--font-heading); font-style: italic; color: var(--ink-soft); margin-top: 4px; font-size: 1rem; }
.report-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.report-stat {
  text-align: center;
  padding: 18px 14px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  border: 1px solid rgba(165, 124, 60, 0.18);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
.report-stat-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--green);
  line-height: 1;
}
.report-stat-label {
  font-size: 0.78rem; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 8px; font-weight: 600;
}
.report-section { margin-bottom: 26px; }
.report-section h3 {
  font-family: var(--font-display);
  font-size: 1.25rem; margin-bottom: 14px;
  color: var(--green);
}
.report-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.report-type {
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid rgba(165, 124, 60, 0.18);
  border-radius: var(--r-md);
}
.report-type-name { font-weight: 600; color: var(--green); margin-bottom: 8px; font-family: var(--font-display); }
.report-bar {
  height: 8px;
  background: var(--paper-cream);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 8px;
}
.report-bar span {
  display: block; height: 100%;
  background: var(--green-soft);
  transition: width 700ms var(--ease);
}
.report-type[data-type="noun"]      .report-bar span { background: var(--color-noun); }
.report-type[data-type="verb"]      .report-bar span { background: var(--gold-rich); }
.report-type[data-type="adjective"] .report-bar span { background: var(--color-adjective); }
.report-type[data-type="adverb"]    .report-bar span { background: var(--color-adverb); }
.report-type-num { font-size: 0.92rem; color: var(--ink-soft); font-family: var(--font-heading); }
.report-type-num strong { color: var(--green); }
.report-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
  align-items: end;
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  padding: 22px;
  border-radius: var(--r-md);
}
.report-day { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.report-day-bar {
  background: linear-gradient(180deg, var(--green-soft), var(--green));
  border-radius: 4px;
  margin-left: auto; margin-right: auto;
  width: 60%;
  min-height: 4px;
  transition: height 700ms var(--ease);
}
.report-day-label { font-size: 0.78rem; color: var(--ink-mute); font-weight: 500; }
.report-day-val { font-size: 0.92rem; color: var(--green); font-weight: 600; font-family: var(--font-display); }
.report-insights {
  list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
.report-insights li {
  padding: 12px 16px;
  background: var(--paper-warm);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  color: var(--ink);
}
.report-foot {
  text-align: center; margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed rgba(165, 124, 60, 0.18);
  color: var(--ink-mute);
  font-family: var(--font-script);
  font-size: 1.1rem;
}

@media print {
  .modal-report { box-shadow: none; border: 1px solid #ccc; max-height: none; }
  .modal-overlay { background: transparent; }
  .report-actions { display: none; }
}

/* ----------------------------------------------------------
   ACCESSIBILITY MODES
---------------------------------------------------------- */
:root[data-dyslexia="true"] {
  --font-body: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Lexend', Georgia, serif;
}
:root[data-dyslexia="true"] body { letter-spacing: 0.02em; word-spacing: 0.06em; }
:root[data-dyslexia="true"] .word-tile,
:root[data-dyslexia="true"] .word-card-word,
:root[data-dyslexia="true"] .disamb-text,
:root[data-dyslexia="true"] .build-base,
:root[data-dyslexia="true"] .build-result {
  letter-spacing: 0.04em; word-spacing: 0.1em;
}

:root[data-larger="true"] { font-size: 17px; }
:root[data-xlarger="true"] { font-size: 19px; }
:root[data-xlarger="true"] .word-tile { padding: 16px 28px; font-size: clamp(1.4rem, 2.6vw, 1.8rem); }

:root[data-color-blind="true"] .basket {
  background-image: var(--cb-pattern, none);
  background-size: 16px 16px;
}
:root[data-color-blind="true"] .basket[data-type="noun"]      { --cb-pattern: repeating-linear-gradient(45deg, transparent 0 8px, rgba(44, 95, 61, 0.12) 8px 16px); }
:root[data-color-blind="true"] .basket[data-type="verb"]      { --cb-pattern: repeating-linear-gradient(135deg, transparent 0 6px, rgba(166, 128, 61, 0.14) 6px 12px); }
:root[data-color-blind="true"] .basket[data-type="adjective"] { --cb-pattern: radial-gradient(rgba(214, 120, 98, 0.18) 1.5px, transparent 1.5px); background-size: 10px 10px; }
:root[data-color-blind="true"] .basket[data-type="adverb"]    { --cb-pattern: repeating-linear-gradient(90deg, transparent 0 8px, rgba(122, 87, 115, 0.14) 8px 12px); }
:root[data-color-blind="true"] .basket-title::before {
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
  font-family: var(--font-body);
  font-size: 0.78em;
  vertical-align: middle;
}
:root[data-color-blind="true"] .basket[data-type="noun"]      .basket-title::before { content: "[N]"; }
:root[data-color-blind="true"] .basket[data-type="verb"]      .basket-title::before { content: "[V]"; }
:root[data-color-blind="true"] .basket[data-type="adjective"] .basket-title::before { content: "[Adj]"; }
:root[data-color-blind="true"] .basket[data-type="adverb"]    .basket-title::before { content: "[Adv]"; }
:root[data-color-blind="true"] .word-card-tag::before {
  display: inline-block; margin-right: 6px;
  font-weight: 700; font-family: var(--font-body); font-size: 0.85em;
}
:root[data-color-blind="true"] .word-card-tag[data-type="noun"]::before      { content: "[N]"; }
:root[data-color-blind="true"] .word-card-tag[data-type="verb"]::before      { content: "[V]"; }
:root[data-color-blind="true"] .word-card-tag[data-type="adjective"]::before { content: "[Adj]"; }
:root[data-color-blind="true"] .word-card-tag[data-type="adverb"]::before    { content: "[Adv]"; }

:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 800ms !important;
  transition-duration: 200ms !important;
}
:root[data-motion="still"] *,
:root[data-motion="still"] *::before,
:root[data-motion="still"] *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *,
  :root:not([data-motion="full"]) *::before,
  :root:not([data-motion="full"]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------
   MOBILE / TOUCH
---------------------------------------------------------- */
@supports (padding: max(0px)) {
  .app {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-bottom: max(80px, env(safe-area-inset-bottom));
  }
}
.word-tile, .basket, .choice-button, .stat-pill, .profile-pill, .ghost-btn, .mode-tab, .btn, .tts-btn, .home-plot, .reward-plot, .plant-pick { touch-action: manipulation; }
.btn, .choice-button, .mode-tab { min-height: 44px; }

@media (max-width: 720px) {
  .stage { padding: 24px 18px; }
  .baskets-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .app-header { gap: 12px; }
  .header-nav { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .baskets-4 { grid-template-columns: 1fr; }
  .home-garden-row { gap: 4px; }
  .home-plot { height: 50px; }
  .modal { padding: 28px; }
  .modal-title { font-size: 1.5rem; }
  .drawer { width: 100vw; }
  .progress-garden { padding: 24px 18px; }
}

/* Stage-load fade-in */
.stage > * { animation: fadeUp var(--t-slow) var(--ease) backwards; }
.stage > *:nth-child(1) { animation-delay: 0.05s; }
.stage > *:nth-child(2) { animation-delay: 0.10s; }
.stage > *:nth-child(3) { animation-delay: 0.15s; }
.stage > *:nth-child(4) { animation-delay: 0.20s; }
.stage > *:nth-child(5) { animation-delay: 0.25s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CHILD-FACING READING FONT
   AbcPrint is the friendly print-style font children learn to
   read in. Apply it specifically to the elements where the
   child reads CONTENT (sentences, words, answers, blanks),
   NOT to UI chrome (titles, buttons, settings) which stay in
   Fraunces for premium feel.
============================================================ */
.word-tile,
.word-card-word,
.word-card-example,
.disamb-hero-word,
.disamb-text,
.disamb-highlight,
.build-base,
.build-result,
.build-result em,
.blank-slot,
.basket-word,
.summary-words,
.tend-word-chip,
.tend-word-text,
.learn-example-pill,
.find-prompt strong,
.drag-ghost,
.ws-word /* worksheet print */ {
  font-family: var(--font-child);
}

/* AbcPrint visually has different proportions — slight tweaks for balance */
.word-tile { letter-spacing: 0; }
.word-card-word { letter-spacing: 0; }
.disamb-hero-word { letter-spacing: 0; }

/* Worksheet print font path — used by the print HTML */
@font-face {
  font-family: 'AbcPrint-print';
  src: local('AbcPrint Regular'), local('AbcPrint-Regular'), local('AbcPrint');
}

/* Print */
@media print {
  .atmosphere, .mode-bar-wrap, .header-nav, .actions, .progress-garden, .app-footer, .ghost-btn, .tts-btn, .drawer, .drawer-overlay, .modal-overlay, .reward-screen .scene-sky, .reward-screen .sky-clouds, .reward-screen .sky-birds, .reward-screen .sky-rain { display: none !important; }
  .stage { box-shadow: none; border: 1px solid #999; }
}

/* === Blessing Planter toolbar (K-2 interactive garden building) === */
.blessing-planter-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid rgba(166, 124, 60, 0.18);
}
.blessing-planter-label {
  font-family: var(--font-script);
  font-size: 1.05rem;
  color: var(--gold-rich);
  margin-right: 6px;
}
.blessing-plant-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px 6px;
  background: linear-gradient(180deg, #FFFEF6 0%, var(--paper-warm) 100%);
  border: 2px solid var(--gold-warm);
  border-radius: 12px;
  font-size: 0.85rem;
  color: var(--green);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  min-width: 72px;
}
.blessing-plant-btn:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--green-soft);
  box-shadow: var(--shadow-sm);
}
.blessing-plant-btn .blessing-plant-icon {
  width: 42px;
  height: 52px;
  display: grid;
  place-items: end center;
}
.blessing-plant-btn .blessing-plant-icon .plant {
  transform: scale(0.95);
}

.blessing-water-btn {
  margin-top: 12px;
  padding: 12px 24px;
  font-size: 1.05rem;
  background: linear-gradient(180deg, #D4E8F5 0%, #A8C3D8 100%);
  color: #2C5F3D;
  border: 2px solid #7BA3C9;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.blessing-water-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(123, 163, 201, 0.3);
}

.blessing-sun-btn {
  margin-top: 12px;
  padding: 12px 24px;
  font-size: 1.05rem;
  background: linear-gradient(180deg, #FFF4C2 0%, #FFE070 100%);
  color: #8A5F0A;
  border: 2px solid #E5BB72;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.blessing-sun-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(229, 187, 114, 0.35);
}

/* Signature "Sing a Blessing Over the Garden" button — the joyful heart moment for K-2 */
.blessing-sing-btn {
  margin-top: 16px;
  width: 100%;
  max-width: 320px;
  padding: 16px 20px;
  font-size: 1.15rem;
  background: linear-gradient(180deg, #FFF8E1 0%, #F4D9B8 100%);
  color: #5A4630;
  border: 3px solid #C9A158;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-script);
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.blessing-sing-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px rgba(201, 161, 88, 0.3);
  background: linear-gradient(180deg, #FFF4C2 0%, #F4D9B8 100%);
}
.blessing-sing-btn:active {
  transform: scale(0.985);
}

/* Special singing state — the whole garden glows with grace during the moment */
.home-garden.singing-blessing {
  animation: gardenSinging 5.4s ease-in-out;
  box-shadow: 0 0 0 12px rgba(229, 187, 114, 0.22), 0 0 0 24px rgba(229, 187, 114, 0.08), var(--shadow-md);
  filter: brightness(1.04) saturate(1.08);
}

@keyframes gardenSinging {
  0%, 100% { filter: brightness(1) saturate(1); }
  20% { filter: brightness(1.1) saturate(1.18); }
  45% { filter: brightness(1.14) saturate(1.28); }
  75% { filter: brightness(1.07) saturate(1.12); }
}

.live-garden-blessing-count {
  font-family: var(--font-script);
  font-size: 1.0rem;
  color: var(--green-mid);
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  border: 1px solid var(--gold-warm);
  border-radius: 999px;
  padding: 4px 16px;
  margin: 0 auto 8px;
  display: inline-block;
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   ONE LIVING WORLD (Option B — ambitious clean)
   For Little Blessings (K-2) during active practice:
   The entire session viewport *is* the garden.
   The meadow + canvas is the persistent, beautiful, living game world.
   The lesson lives as a tasteful, readable "altar/parchment" overlay inside that world.
   No more boxes fighting for space. This is the SimCity-style immersive experience.
   ============================================================ */

/* === One Living World layout === */

/* The meadow world is the dominant living "game screen" */
[data-little-blessings="true"] body.cinematic-garden-session {
  /* The living garden world uses its own rich dark palette for immersion,
     but still tries to respect overall theme choice where possible. */
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 227, 168, 0.18) 0%, transparent 26%),
    linear-gradient(180deg, #071c15 0%, #0b261b 42%, #102c1f 100%);
}

[data-little-blessings="true"] .progress-garden.cinematic-world {
  position: relative;
  /* The world owns the visual space — large, immersive, not fighting for scraps */
  min-height: 420px;
  margin: 4px auto 8px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  z-index: 1;
}

/* The meadow is the beautiful persistent living surface */
[data-little-blessings="true"] .home-garden.cinematic-meadow {
  /* Generous living band — the heart of the experience. Canvas + plants live here as one diorama. */
  min-height: 380px;
  padding: 36px 20px 44px;
  background:
    linear-gradient(180deg, #a7c5d8 0%, #c8d9b8 18%, #d8e0b8 32%, #c8b88a 48%, #8f6f4a 68%, #3f2a1f 100%),
    radial-gradient(circle at 20% 82%, rgba(60, 92, 48, 0.65) 0%, transparent 55%),
    radial-gradient(circle at 78% 88%, rgba(72, 58, 32, 0.55) 0%, transparent 50%);
  background-blend-mode: normal, overlay, normal;
  border-radius: 28px;
  border: 5px solid #5c4630;
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.55),
    inset 0 60px 40px rgba(255,245,200,0.05),
    inset 0 -30px 40px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}

/* The high-fidelity Living Meadow Canvas — this is the new beating heart of the cinematic garden.
   It renders dense wind-driven grass, volumetric light, particles, and creatures in real time.
   The interactive plant cards and Garden Window sit on top of it. */
[data-little-blessings="true"] .meadow-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: normal;
  opacity: 1;
  filter: saturate(1.08) brightness(1.02);
}

/* Video-game style smooth growth bloom on the actual plant elements when they level up from correct answers */
[data-little-blessings="true"] .plant.cinematic-growth-bloom {
  animation: plantCinematicBloom 1.6s cubic-bezier(0.2, 1.0, 0.3, 1);
  transform-origin: bottom center;
}

@keyframes plantCinematicBloom {
  0% {
    transform: scale(0.7) rotate(-8deg);
    filter: brightness(1.8) saturate(1.6) drop-shadow(0 0 12px #f4e9c8);
  }
  15% {
    transform: scale(1.45) rotate(6deg);
    filter: brightness(1.3) saturate(1.3);
  }
  35% {
    transform: scale(0.92) rotate(-2deg);
    filter: brightness(1.1);
  }
  55% {
    transform: scale(1.22) rotate(3deg);
  }
  75% {
    transform: scale(1.05) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: none;
  }
}

/* Sky and atmosphere layers inside the meadow (parallax depth) */
[data-little-blessings="true"] .world-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(167,197,216,0.35) 0%, rgba(200,217,184,0.12) 22%, transparent 38%);
  pointer-events: none;
  z-index: 1;
  border-radius: 26px;
}

/* Slow drifting clouds — three layers for real depth and life */
[data-little-blessings="true"] .world-cloud {
  position: absolute;
  background: rgba(255,255,255,0.72);
  border-radius: 999px;
  filter: blur(1.5px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
  animation: cloudDrift linear infinite;
}
[data-little-blessings="true"] .world-cloud.c1 { width: 180px; height: 42px; top: 11%; left: -20%; animation-duration: 48s; animation-delay: -8s; }
[data-little-blessings="true"] .world-cloud.c2 { width: 260px; height: 54px; top: 19%; left: -30%; animation-duration: 71s; animation-delay: -22s; opacity: 0.38; filter: blur(2.5px); }
[data-little-blessings="true"] .world-cloud.c3 { width: 140px; height: 32px; top: 27%; left: -15%; animation-duration: 36s; animation-delay: -3s; opacity: 0.48; }

@keyframes cloudDrift {
  to { transform: translateX(1220px); }
}

/* Distant soft hills for depth */
[data-little-blessings="true"] .world-hills {
  position: absolute;
  bottom: 34%;
  left: 0; right: 0;
  height: 28%;
  background: linear-gradient(180deg, rgba(62, 78, 48, 0.55) 0%, rgba(48, 62, 38, 0.75) 100%);
  clip-path: ellipse(120% 80% at 50% 100%);
  pointer-events: none;
  z-index: 3;
}

/* Foreground grass / meadow texture that feels alive */
[data-little-blessings="true"] .home-garden.cinematic-meadow::before {
  content: "";
  position: absolute;
  inset: 42% 0 0 0;
  background: 
    repeating-linear-gradient(92deg, transparent 0 3px, rgba(48, 72, 36, 0.18) 3px 5px),
    linear-gradient(180deg, transparent 0%, rgba(32, 48, 24, 0.25) 60%, rgba(18, 28, 14, 0.5) 100%);
  pointer-events: none;
  z-index: 4;
  border-radius: 0 0 26px 26px;
}

/* The beautiful Garden Window — the lesson lives here, inside the living world */
[data-little-blessings="true"] .garden-window {
  /* The lesson is a beautiful, readable "altar" resting inside the living meadow world */
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 82%);
  max-width: 580px;
  z-index: 25;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.5)) drop-shadow(0 6px 14px rgba(0,0,0,0.3));
}

/* The physical carved-wood + vine frame that makes it feel like a real window in the garden */
[data-little-blessings="true"] .window-frame {
  position: relative;
  background: linear-gradient(145deg, #6b5138 0%, #4a3726 38%, #3a2a1f 100%);
  border-radius: 18px;
  padding: 14px 14px 18px;
  border: 7px solid #2f2218;
  box-shadow: 
    inset 0 2px 0 rgba(255,245,200,0.25),
    inset 0 -3px 0 rgba(0,0,0,0.6),
    0 4px 0 #2f2218;
}

[data-little-blessings="true"] .window-frame::before {
  /* Inner carved lip */
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 12px;
  border: 2px solid rgba(255,245,200,0.35);
  pointer-events: none;
}

/* Climbing blessing vines on the frame — they grow on correct answers */
[data-little-blessings="true"] .window-vines {
  position: absolute;
  inset: -4px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  border-radius: 22px;
}

[data-little-blessings="true"] .window-vine {
  position: absolute;
  width: 3.5px;
  background: linear-gradient(#4a6b3f, #2f4a2a);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
  transition: height 420ms cubic-bezier(0.23,1,0.32,1);
}

[data-little-blessings="true"] .window-vine.v1 { left: 12%; top: -6px; height: 42%; transform: rotate(-18deg); }
[data-little-blessings="true"] .window-vine.v2 { right: 9%; top: -2px; height: 51%; transform: rotate(22deg); }
[data-little-blessings="true"] .window-vine.v3 { left: 22%; bottom: -4px; height: 34%; transform: rotate(48deg); }

[data-little-blessings="true"] .window-vine .leaf {
  position: absolute;
  width: 13px; height: 9px;
  background: #5a7e5c;
  border-radius: 50% 20% 50% 20%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

[data-little-blessings="true"] .window-vine.v1 .leaf { left: -4px; top: 34%; transform: rotate(-32deg); }
[data-little-blessings="true"] .window-vine.v2 .leaf { right: -5px; top: 48%; transform: rotate(41deg); }
[data-little-blessings="true"] .window-vine.v3 .leaf { left: 6px; top: 22%; transform: rotate(19deg); }

[data-little-blessings="true"] .garden-window.vine-burst .window-vine {
  height: 62% !important;
  transition: height 680ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

[data-little-blessings="true"] .garden-window.vine-burst .window-vine .leaf {
  animation: vineLeafPop 620ms ease-out;
}

@keyframes vineLeafPop {
  0% { transform: scale(0.2) rotate(-20deg); opacity: 0; }
  40% { transform: scale(1.25) rotate(12deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* The actual content area inside the window — soft parchment that feels part of the garden */
[data-little-blessings="true"] .window-content {
  background: rgba(255, 251, 241, 0.92);
  border-radius: 10px;
  padding: 18px 20px 20px;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(90, 70, 42, 0.25);
}

/* Gentle stone / mossy bench base that grounds the window in the meadow */
[data-little-blessings="true"] .window-base {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 68%;
  height: 28px;
  background: linear-gradient(180deg, #5c4630 0%, #3f2a1f 100%);
  border-radius: 0 0 999px 999px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.45), inset 0 3px 0 rgba(255,245,200,0.2);
  z-index: 0;
}
[data-little-blessings="true"] .window-base::after {
  content: "moss & stone • tended with care";
  position: absolute;
  bottom: 3px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-script);
  font-size: 0.62rem;
  letter-spacing: 0.5px;
  color: rgba(255,245,200,0.55);
}

/* The lesson inside the world — highly readable but clearly part of the garden */
[data-little-blessings="true"] .garden-window .stage {
  background: rgba(255, 252, 244, 0.94);
  box-shadow: none;
  border: none;
  margin: 0;
  padding: 14px 16px;
  max-width: 100%;
  border-radius: 8px;
}

/* When the garden celebrates, the window glows with holy warmth */
[data-little-blessings="true"] .garden-window.window-celebrate {
  animation: windowHolyPulse 1.65s cubic-bezier(0.23,1,0.32,1);
}

@keyframes windowHolyPulse {
  0% { filter: drop-shadow(0 28px 60px rgba(0,0,0,0.55)) drop-shadow(0 8px 18px rgba(0,0,0,0.35)) brightness(1); }
  25% { filter: drop-shadow(0 28px 60px rgba(0,0,0,0.55)) drop-shadow(0 8px 18px rgba(0,0,0,0.35)) brightness(1.18) saturate(1.15); }
  60% { filter: drop-shadow(0 28px 60px rgba(0,0,0,0.55)) drop-shadow(0 8px 18px rgba(0,0,0,0.35)) brightness(1.06); }
  100% { filter: drop-shadow(0 28px 60px rgba(0,0,0,0.55)) drop-shadow(0 8px 18px rgba(0,0,0,0.35)) brightness(1); }
}

/* Ethereal drifting blessing text that appears in the sky on big moments */
[data-little-blessings="true"] .drifting-blessing {
  position: absolute;
  font-family: var(--font-script);
  font-size: clamp(1.05rem, 2.8vw, 1.55rem);
  color: #f4e9c8;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 18px rgba(229,187,114,0.35);
  pointer-events: none;
  z-index: 25;
  white-space: nowrap;
  opacity: 0.92;
  animation: blessingDrift 4.8s ease-out forwards;
  letter-spacing: 0.3px;
}

@keyframes blessingDrift {
  0% { opacity: 0.1; transform: translateY(12px) scale(0.86); }
  12% { opacity: 0.95; }
  78% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-38px) scale(0.96); }
}

/* Pollen / dandelion seeds that float constantly — gentle persistent life */
[data-little-blessings="true"] .pollen {
  position: absolute;
  width: 5px; height: 5px;
  background: #f4e9c8;
  border-radius: 50%;
  opacity: 0.6;
  pointer-events: none;
  z-index: 6;
  animation: pollenFloat linear forwards;
}

@keyframes pollenFloat {
  to { transform: translateY(260px) translateX(18px); opacity: 0; }
}

/* Enhanced cinematic weather — full world sun rays and living rain */
[data-little-blessings="true"] .world-sun-rays {
  position: absolute;
  top: -10%; left: 18%; right: 18%;
  height: 55%;
  background: repeating-conic-gradient(
    from 38deg at 50% 10%,
    transparent 0deg 6deg,
    rgba(255, 225, 130, 0.18) 7deg 11deg,
    transparent 12deg 19deg
  );
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  animation: sunRaySweep 7.5s ease-in-out infinite;
  border-radius: 50%;
}

@keyframes sunRaySweep {
  0%,100% { transform: rotate(-6deg) scale(1); opacity: 0.6; }
  50% { transform: rotate(5deg) scale(1.03); opacity: 0.85; }
}

[data-little-blessings="true"] .world-rainbow {
  position: absolute;
  top: 9%; left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 38%;
  background: linear-gradient(180deg, 
    rgba(255,80,80,0.22) 0%, rgba(255,180,60,0.18) 16%, rgba(255,240,90,0.2) 30%,
    rgba(120,220,120,0.18) 46%, rgba(90,170,230,0.18) 62%, rgba(160,110,220,0.15) 80%);
  border-radius: 50% / 30%;
  pointer-events: none;
  z-index: 7;
  opacity: 0.75;
  filter: blur(0.6px);
  animation: rainbowFade 2.8s ease-out forwards;
}

@keyframes rainbowFade {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  18% { opacity: 0.82; }
  82% { opacity: 0.7; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.08); }
}

/* Joy wave that propagates across every plant on big correct answers */
[data-little-blessings="true"] .plant.joy-wave {
  animation: plantJoyWave 1.1s cubic-bezier(0.23, 1.0, 0.32, 1) !important;
}

@keyframes plantJoyWave {
  0% { transform: rotate(-1.5deg) scale(0.94); }
  22% { transform: rotate(7deg) scale(1.22); }
  48% { transform: rotate(-4deg) scale(1.04); }
  78% { transform: rotate(3deg) scale(1.01); }
  100% { transform: rotate(-1.5deg) scale(1); }
}

/* Reduced motion respect — everything gentler */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) [data-little-blessings="true"] .world-cloud,
  :root:not([data-motion="full"]) [data-little-blessings="true"] .pollen,
  :root:not([data-motion="full"]) [data-little-blessings="true"] .world-sun-rays,
  :root:not([data-motion="full"]) [data-little-blessings="true"] .plant {
    animation: none !important;
    transition: none !important;
  }
  :root:not([data-motion="full"]) [data-little-blessings="true"] .garden-window.vine-burst .window-vine {
    transition: none;
  }
}

/* Header + mode bar recede into the living garden world during cinematic LB sessions */
[data-little-blessings="true"].cinematic-garden-session .app-header {
  background: rgba(7, 28, 21, 0.55);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(166, 124, 60, 0.25);
  position: relative;
  z-index: 50;
}

[data-little-blessings="true"].cinematic-garden-session .mode-bar-wrap {
  position: relative;
  z-index: 45;
  margin-top: -2px;
  background: linear-gradient(180deg, rgba(7,28,21,0.35), transparent);
  /* Cooperate with the responsive wrap behavior on narrow windows */
  overflow: visible;
}

/* The old garden section can sit tighter when the world is the full cinematic canvas */
[data-little-blessings="true"] .progress-garden.cinematic-world {
  margin-bottom: 4px;
}

/* Gentle blessing creatures (butterflies) that occasionally flutter through the living meadow */
[data-little-blessings="true"] .blessing-creature {
  position: absolute;
  z-index: 9;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
[data-little-blessings="true"] .blessing-creature.butterfly svg {
  animation: butterflyWing 280ms ease-in-out infinite alternate;
}
@keyframes butterflyWing {
  from { transform: scaleX(0.6) rotate(-4deg); }
  to { transform: scaleX(1.05) rotate(4deg); }
}

/* ============================================================================
   LIVING GARDEN SCENE  (rebuilt 2026-05-28)
   A single full-viewport, animated, growing world that lives BEHIND the lesson
   during practice — for every learner, all ages. The lesson floats as a
   readable translucent parchment panel over the scene. Sky + sun + drifting
   clouds + distant hills + swaying trees + wind-driven canvas grass + falling
   pollen/petals + butterflies + reactive rain/sun + a foreground garden that
   visibly grows as answers come in.

   Gating:
     scene[data-motion="lively"] → full canvas simulation + every animation
     scene[data-motion="calm"]   → gentle CSS-only motion, no heavy canvas
     "still" / reduced-motion    → scene never turns on (calm original layout)
   ============================================================================ */

.garden-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease;
  /* Fallback wash if a layer fails to paint */
  background: linear-gradient(180deg, #bcd9e8 0%, #d8e6c4 46%, #b89a6a 70%, #5d4327 100%);
}
.garden-scene.scene-on { opacity: 1; visibility: visible; }

/* The whole app sits above the scene; chrome turns to glass so the world shows through */
body.cinematic-garden-session .atmosphere { display: none !important; }
body.cinematic-garden-session { background: #0c1f17; }
body.cinematic-garden-session .app {
  position: relative;
  z-index: 1;
  gap: clamp(14px, 2vw, 24px);
}

/* The lesson — a luminous parchment "altar" floating in the living world */
body.cinematic-garden-session .stage {
  background: rgba(255, 251, 242, 0.86);
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
  backdrop-filter: blur(7px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 24px 60px rgba(12, 30, 20, 0.45),
    0 6px 18px rgba(12, 30, 20, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
}
[data-theme="dark"] body.cinematic-garden-session .stage,
body.cinematic-garden-session[data-tod-late] .stage {
  background: rgba(28, 24, 18, 0.8);
}

/* Header + mode bar recede into soft glass for every cinematic learner */
body.cinematic-garden-session .app-header {
  background: rgba(10, 26, 19, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 245, 210, 0.18);
  border-radius: var(--r-lg, 16px);
  position: relative;
  z-index: 50;
  color: #f4ecd9;
}
body.cinematic-garden-session .app-header .brand-title,
body.cinematic-garden-session .app-header .brand-tag,
body.cinematic-garden-session .stat-value { color: #f7efdc; }
body.cinematic-garden-session .mode-bar-wrap { position: relative; z-index: 45; }

/* The old bottom "Your Garden" box is retired while the scene is live —
   the garden now lives in the scene foreground. (Returns in "still" mode.) */
body.cinematic-garden-session .progress-garden { display: none; }
body.cinematic-garden-session .app-footer { color: rgba(247, 239, 220, 0.8); }

/* ---- Scene layers --------------------------------------------------------- */
.garden-scene > * { position: absolute; pointer-events: none; }

.scene-sky {
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #8fc4e8 0%, #bcdcec 30%, #dceccf 52%, transparent 70%);
  transition: background 1.6s ease;
}
/* Time-of-day skies */
.garden-scene[data-tod="morning"] .scene-sky {
  background: linear-gradient(180deg, #a9d2ea 0%, #ffe6c4 34%, #ffeccb 50%, transparent 70%);
}
.garden-scene[data-tod="midday"] .scene-sky {
  background: linear-gradient(180deg, #7fbfe8 0%, #b6dcef 30%, #dceccf 54%, transparent 72%);
}
.garden-scene[data-tod="evening"] .scene-sky {
  background: linear-gradient(180deg, #5d6fae 0%, #e9a45f 40%, #f4c98a 56%, transparent 74%);
}
.garden-scene[data-tod="night"] .scene-sky {
  background: linear-gradient(180deg, #0c1733 0%, #1b2c52 34%, #28406a 56%, transparent 76%);
}

/* Stars — only at night */
.scene-stars {
  inset: 0 0 50% 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 28% 32%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.6px 1.6px at 44% 12%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 62% 26%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 90% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.3px 1.3px at 54% 40%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 18% 44%, rgba(255,255,255,0.6), transparent);
  animation: starTwinkle 5s ease-in-out infinite;
}
.garden-scene[data-tod="night"] .scene-stars { opacity: 1; }
@keyframes starTwinkle { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Sun (becomes a cool moon at night) */
.scene-sun {
  top: 11%; right: 14%;
  width: 92px; height: 92px;
  z-index: 1;
}
.scene-sun .sun-core {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff6d6 0%, #ffe08a 45%, #f7c64e 100%);
  box-shadow: 0 0 50px 14px rgba(255, 214, 120, 0.55);
}
.scene-sun .sun-glow {
  position: absolute; inset: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 150, 0.4) 0%, transparent 62%);
  animation: sunBreath 7s ease-in-out infinite;
}
@keyframes sunBreath { 0%,100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.12); opacity: 1; } }
.garden-scene[data-tod="morning"] .scene-sun { top: 26%; right: 18%; }
.garden-scene[data-tod="evening"] .scene-sun { top: 30%; right: 16%; }
.garden-scene[data-tod="evening"] .scene-sun .sun-core {
  background: radial-gradient(circle at 42% 38%, #fff0cf 0%, #ff9d52 55%, #e7702f 100%);
  box-shadow: 0 0 60px 18px rgba(255, 140, 70, 0.5);
}
.garden-scene[data-tod="night"] .scene-sun .sun-core {
  background: radial-gradient(circle at 38% 36%, #ffffff 0%, #e7eefc 50%, #c2cfe6 100%);
  box-shadow: 0 0 40px 10px rgba(200, 215, 245, 0.4);
}
.garden-scene[data-tod="night"] .scene-sun .sun-glow { background: radial-gradient(circle, rgba(190, 210, 245, 0.28) 0%, transparent 62%); }

/* Drifting clouds */
.scene-clouds { inset: 0 0 40% 0; z-index: 2; }
.scene-cloud {
  position: absolute;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.96), rgba(255,255,255,0.7) 70%, transparent),
    radial-gradient(closest-side at 30% 60%, rgba(255,255,255,0.85), transparent);
  border-radius: 999px;
  filter: blur(2px);
  opacity: 0.9;
  will-change: transform;
}
.scene-cloud.sc1 { width: 220px; height: 58px; top: 12%; left: -24%; animation: cloudCross 64s linear infinite; }
.scene-cloud.sc2 { width: 320px; height: 78px; top: 20%; left: -38%; opacity: 0.7; filter: blur(3px); animation: cloudCross 92s linear infinite; animation-delay: -30s; }
.scene-cloud.sc3 { width: 160px; height: 44px; top: 8%;  left: -18%; opacity: 0.8; animation: cloudCross 50s linear infinite; animation-delay: -12s; }
.scene-cloud.sc4 { width: 260px; height: 64px; top: 28%; left: -30%; opacity: 0.55; filter: blur(3.5px); animation: cloudCross 110s linear infinite; animation-delay: -64s; }
@keyframes cloudCross { to { transform: translateX(150vw); } }
.garden-scene[data-tod="night"] .scene-cloud { opacity: 0.35; background: radial-gradient(closest-side, rgba(180,195,225,0.7), transparent 72%); }

/* Distant rolling hills */
.scene-hills { inset: auto 0 30% 0; height: 34%; z-index: 3; }
.scene-hill { position: absolute; left: -4%; right: -4%; bottom: 0; }
.scene-hill.h-far {
  height: 100%;
  background: linear-gradient(180deg, #7fa06a 0%, #5f8553 100%);
  clip-path: ellipse(72% 100% at 32% 100%);
  opacity: 0.65;
}
.scene-hill.h-mid {
  height: 78%;
  background: linear-gradient(180deg, #5b8049 0%, #3f6438 100%);
  clip-path: ellipse(68% 100% at 72% 100%);
  opacity: 0.8;
}
.garden-scene[data-tod="evening"] .scene-hill.h-far { filter: saturate(0.8) brightness(0.82); }
.garden-scene[data-tod="evening"] .scene-hill.h-mid { filter: saturate(0.8) brightness(0.7); }
.garden-scene[data-tod="night"] .scene-hill.h-far { filter: brightness(0.4) saturate(0.6); }
.garden-scene[data-tod="night"] .scene-hill.h-mid { filter: brightness(0.32) saturate(0.55); }

/* A swaying tree line for mid-ground depth */
.scene-treeline { inset: auto 0 26% 0; height: 24%; z-index: 4; }
.scene-tree {
  position: absolute; bottom: 0;
  width: 120px; height: 100%;
  transform-origin: 50% 100%;
  animation: treeSway 6.5s ease-in-out infinite;
}
.scene-tree::before { /* canopy */
  content: ""; position: absolute; left: 50%; bottom: 38%;
  width: 92px; height: 92px; transform: translateX(-50%);
  border-radius: 48% 52% 50% 50%;
  background: radial-gradient(circle at 40% 35%, #6fa05f 0%, #3f6a3f 75%);
  box-shadow: inset -8px -8px 18px rgba(0,0,0,0.25);
}
.scene-tree::after { /* trunk */
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 12px; height: 42%; transform: translateX(-50%);
  background: linear-gradient(90deg, #6b4a2c, #4c3320);
  border-radius: 3px;
}
.scene-tree.t1 { left: 6%;  transform: scale(0.8); animation-delay: -1.2s; }
.scene-tree.t2 { left: 24%; transform: scale(1.05); animation-delay: -3.4s; }
.scene-tree.t3 { right: 22%; transform: scale(0.92); animation-delay: -2.1s; }
.scene-tree.t4 { right: 5%;  transform: scale(0.74); animation-delay: -4.6s; }
@keyframes treeSway { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.6deg); } }
.garden-scene[data-tod="night"] .scene-treeline { filter: brightness(0.4) saturate(0.6); }
.garden-scene[data-tod="evening"] .scene-treeline { filter: brightness(0.74) saturate(0.85); }

/* The high-fidelity wind/particle canvas */
.garden-scene .meadow-canvas {
  inset: 0; z-index: 5;
  width: 100%; height: 100%;
  filter: saturate(1.06);
}

/* Ground / soil band the garden grows from */
.scene-ground {
  inset: auto 0 0 0; height: 30%; z-index: 4;
  background:
    linear-gradient(180deg, #6f8f4f 0%, #51702f 14%, #6b4f2e 40%, #43301d 100%);
}
.scene-ground::before { /* grass crest highlight */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 22%;
  background: linear-gradient(180deg, rgba(150,190,90,0.5), transparent);
}
.garden-scene[data-tod="night"] .scene-ground { filter: brightness(0.45) saturate(0.7); }
.garden-scene[data-tod="evening"] .scene-ground { filter: brightness(0.8) saturate(0.95); }

/* Foreground garden — the real, earned plants, growing across the meadow floor */
.scene-plants {
  inset: auto 0 2.5% 0; z-index: 6;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(6px, 2vw, 26px);
  padding: 0 4vw;
  flex-wrap: nowrap;
}
.scene-plant {
  width: clamp(40px, 6vw, 78px);
  height: clamp(70px, 11vw, 132px);
  display: flex; align-items: flex-end; justify-content: center;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.3));
  transform-origin: 50% 100%;
  animation: plantBreeze 4.8s ease-in-out infinite;
}
.scene-plant:nth-child(even) { animation-delay: -1.6s; animation-duration: 5.6s; }
.scene-plant:nth-child(3n) { animation-delay: -2.9s; }
.scene-plant .plant { width: 100%; height: 100%; }
.scene-plant .plant svg { width: 100%; height: 100%; }
@keyframes plantBreeze { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.8deg); } }

/* Reactive weather overlay host (DOM rain / sunburst render inside) */
.scene-weather { inset: 0; z-index: 8; overflow: hidden; }

/* Soft cinematic vignette to focus the eye on the lesson */
.scene-vignette {
  inset: 0; z-index: 9;
  background: radial-gradient(ellipse at 50% 42%, transparent 46%, rgba(10, 24, 16, 0.42) 100%);
}

/* ---- Whole-scene reactions ----------------------------------------------- */
.garden-scene.scene-celebrate { animation: sceneCelebrate 1.6s ease; }
@keyframes sceneCelebrate {
  0% { filter: brightness(1); }
  22% { filter: brightness(1.16) saturate(1.12); }
  100% { filter: brightness(1); }
}
.garden-scene.singing-blessing { animation: sceneSinging 5.2s ease; }
@keyframes sceneSinging {
  0%,100% { filter: brightness(1); }
  30% { filter: brightness(1.22) saturate(1.18) hue-rotate(-4deg); }
  60% { filter: brightness(1.1) saturate(1.1); }
}

/* ---- Reaction effects, ungated so every learner sees them ---------------- */
.cinematic-garden-session .drifting-blessing {
  position: absolute;
  font-family: var(--font-script);
  font-size: clamp(1.05rem, 2.8vw, 1.55rem);
  color: #fff6dc;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 0 20px rgba(255, 226, 150, 0.4);
  pointer-events: none; z-index: 7; white-space: nowrap;
  animation: blessingDrift 4.8s ease-out forwards;
}
.cinematic-garden-session .world-rainbow {
  position: absolute; top: 9%; left: 50%; transform: translateX(-50%);
  width: 62%; height: 38%;
  background: linear-gradient(180deg,
    rgba(255,80,80,0.22) 0%, rgba(255,180,60,0.18) 16%, rgba(255,240,90,0.2) 30%,
    rgba(120,220,120,0.18) 46%, rgba(90,170,230,0.18) 62%, rgba(160,110,220,0.15) 80%);
  border-radius: 50% / 30%; pointer-events: none; z-index: 7;
  filter: blur(0.6px);
  animation: rainbowFade 2.8s ease-out forwards;
}
.cinematic-garden-session .blessing-creature {
  position: absolute; z-index: 7; pointer-events: none; opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.cinematic-garden-session .blessing-creature.butterfly svg {
  animation: butterflyWing 280ms ease-in-out infinite alternate;
}
.cinematic-growth-bloom {
  animation: plantCinematicBloom 1.6s cubic-bezier(0.2, 1.0, 0.3, 1);
  transform-origin: bottom center;
}

/* ---- "calm" mode: gentle CSS only, drop the busy/heavy bits --------------- */
.garden-scene[data-motion="calm"] .meadow-canvas { display: none; }
.garden-scene[data-motion="calm"] .scene-cloud.sc2,
.garden-scene[data-motion="calm"] .scene-cloud.sc4 { display: none; }
.garden-scene[data-motion="calm"] .scene-tree { animation: none; }
.garden-scene[data-motion="calm"] .scene-plant { animation: none; }
.garden-scene[data-motion="calm"] .scene-sun .sun-glow { animation: none; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 720px) {
  body.cinematic-garden-session .stage { max-width: 100%; }
  .scene-sun { width: 64px; height: 64px; top: 9%; right: 10%; }
  .scene-plants { gap: 4px; padding: 0 2vw; }
  .scene-tree { width: 84px; }
}

/* ---- Respect reduced motion: freeze the world (it still looks like a painting) */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .garden-scene .scene-cloud,
  :root:not([data-motion="full"]) .garden-scene .scene-tree,
  :root:not([data-motion="full"]) .garden-scene .scene-plant,
  :root:not([data-motion="full"]) .garden-scene .scene-sun .sun-glow,
  :root:not([data-motion="full"]) .garden-scene .scene-stars { animation: none !important; }
}

/* ============================================================
   SCREEN-ADAPTIVE SHELL  (added 2026-05-29)
   --------------------------------------------------------------
   The whole app now fits the viewport instead of growing into one
   long scrolling page. The header and the chapter (mode) bar stay
   pinned; the lesson/quiz "stage" fills the remaining height and
   scrolls INTERNALLY only when a lesson is genuinely taller than the
   screen (e.g. the long Learn pages). The garden stays in view at
   all times — as the fixed living backdrop in motion modes, or as
   the framed panel beside/below the stage in "still" mode.
   Fixes: "I have to keep scrolling up and down to see the garden
   AND the quizzes."
   ============================================================ */
html { height: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;          /* lock the body to the viewport... */
  overflow: hidden;        /* ...so the PAGE never scrolls; regions scroll inside */
}

.app {
  height: 100vh;           /* fallback for browsers without dvh */
  height: 100dvh;
  max-height: 100dvh;
  padding-top: clamp(10px, 1.8vh, 24px);
  padding-bottom: clamp(10px, 1.8vh, 22px);
  gap: clamp(10px, 1.6vh, 22px);
  overflow: hidden;        /* the app is the bounded shell */
}

/* Chrome rows take only the height they need. */
.app-header,
.mode-bar-wrap,
.app-footer { flex: 0 0 auto; }

/* The decorative footer should sip space, not eat ~80px of a bounded viewport. */
.app-footer { padding: clamp(6px, 1.3vh, 16px); font-size: 1.05rem; }

/* The work area owns all the leftover vertical space and holds the stage
   (+ the framed garden in still mode). */
.work-area {
  flex: 1 1 auto;
  min-height: 0;           /* critical: lets the flex child shrink below content */
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 22px);
  overflow: hidden;
}

/* Default (still / reduced-motion) layout: the paper sheet fills the area above
   the framed garden, and scrolls inside itself if a lesson runs long. */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* The framed "Your Garden" panel shares the screen with the stage in still mode.
   Capped so the quiz always keeps the larger share; scrolls if the garden is full. */
.progress-garden {
  flex: 0 1 auto;
  max-height: 34vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Cinematic sessions: the garden IS the fixed living backdrop and the framed
   panel is hidden, so the lesson becomes a content-sized card floating in the
   middle of the world — vertically centred, scrolling internally only if it is
   taller than the available height. */
body.cinematic-garden-session .work-area { justify-content: center; }
body.cinematic-garden-session .stage {
  flex: 0 1 auto;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
}

/* Tall modals can always scroll within their fixed overlay now that the page
   itself does not scroll. */
.modal-overlay { overflow-y: auto; }

/* On shorter screens, relax the stage's generous interior spacing AND scale the
   big presentational pieces (the word card, the giant word, answer buttons,
   sort baskets) with viewport-height units so an ordinary quiz fits on screen
   without the answer options falling below the fold. The grouped
   `[data-little-blessings="true"]` selectors keep these overrides winning over
   the larger K-2 defaults. */
/* Gentle tier for tall screens (laptops/desktops 881-1180px high): the answer
   options are already on-screen, this just trims the generous word card so the
   bottom hint/skip row comes into view too — while keeping a spacious feel. */
@media (min-height: 881px) and (max-height: 1180px) {
  [data-little-blessings="true"] .stage { padding: clamp(28px, 4vh, 56px); }
  .word-card { padding: clamp(30px, 4.4vh, 70px) clamp(40px, 7vw, 110px); }
  .word-card-word { font-size: clamp(2.8rem, 6.5vh, 5rem); }
}
@media (max-height: 880px) {
  .stage,
  [data-little-blessings="true"] .stage { padding: clamp(14px, 2.6vh, 36px) clamp(20px, 3vw, 44px); gap: clamp(8px, 1.4vh, 18px); }
  .stage-header { padding-bottom: clamp(6px, 1vh, 14px); }
  .stage-title-group h2 { font-size: clamp(1.35rem, 2.8vh, 2rem); margin-bottom: 2px; }
  .word-card { padding: clamp(12px, 2.4vh, 44px) clamp(28px, 6vw, 96px); }
  .word-card-word { font-size: clamp(2.2rem, 6vh, 4.4rem); }
  .word-card-label { margin-bottom: 4px; }
  .word-card-example { margin-top: 8px; }
  .choice-button,
  [data-little-blessings="true"] .choice-button { padding: clamp(10px, 1.8vh, 22px) 18px; }
  /* Reclaim the chrome the K-2 "Little Blessings" pill eats above the card. */
  .little-blessings-indicator { margin: 0 auto 2px; padding: 3px 12px; }
  body.cinematic-garden-session .app { gap: clamp(8px, 1.4vh, 18px); }
}

/* ----------------------------------------------------------------------------
   SORT MODE — height-adaptive on ALL laptop/desktop heights (not just <880px).
   Previously the big K-2 word tiles + baskets only shrank below 880px, so on a
   900–1080px screen the sentence card + baskets + actions overflowed and the
   user had to scroll constantly. These vh-based clamps scale everything to the
   available height: larger on tall screens, smaller on short ones, always
   on-screen, always comfortably tappable. Fix 2026-05-30.
---------------------------------------------------------------------------- */
@media (max-height: 1180px) {
  .stage-header { padding-bottom: clamp(6px, 1vh, 14px); }
  .stage-title-group h2 { font-size: clamp(1.3rem, 2.6vh, 1.95rem); margin-bottom: 2px; }
  .stage-prompt { font-size: clamp(0.92rem, 1.5vh, 1.05rem); }

  .sentence-card { padding: clamp(11px, 1.7vh, 28px) clamp(18px, 2.6vw, 36px); }
  .sentence-label-row { margin-bottom: clamp(5px, 1vh, 14px); }
  .sentence-words { gap: clamp(6px, 0.9vh, 12px) clamp(8px, 1.2vw, 14px); }
  .word-tile,
  [data-little-blessings="true"] .word-tile { padding: clamp(7px, 1.2vh, 14px) clamp(14px, 2vw, 24px); font-size: clamp(1.05rem, 2vh, 1.6rem); }

  .basket,
  [data-little-blessings="true"] .basket { min-height: clamp(96px, 13vh, 176px); }
  .basket-header { padding: clamp(8px, 1.2vh, 15px) 12px clamp(4px, 0.7vh, 9px); }
  .basket-hint { font-size: clamp(0.85rem, 1.3vh, 1rem); }
  .basket-words { margin-top: clamp(2px, 0.5vh, 6px); }

  .feedback { min-height: 0; padding: clamp(7px, 1.2vh, 16px) 20px; font-size: clamp(0.96rem, 1.6vh, 1.1rem); }
  .actions { padding-top: clamp(8px, 1.4vh, 20px); gap: clamp(8px, 1.2vh, 12px); }
  .actions .btn { padding: clamp(8px, 1.3vh, 14px) clamp(16px, 2vw, 26px); }

  /* Let the decorative chrome sip a little less of a bounded viewport so the
     lesson gets the room it needs to fit without scrolling. */
  .app-footer { padding: clamp(4px, 0.7vh, 12px); font-size: clamp(0.9rem, 1.4vh, 1.05rem); }
  .app,
  .work-area { gap: clamp(8px, 1.3vh, 20px); }
}
@media (max-height: 720px) {
  .stage,
  [data-little-blessings="true"] .stage { padding: 12px clamp(16px, 2.6vw, 32px); gap: clamp(8px, 1.2vh, 14px); }
  .app,
  body.cinematic-garden-session .app { gap: clamp(6px, 1vh, 14px); }
  .stage-header { padding-bottom: 8px; }
  .stage-title-group h2 { font-size: clamp(1.3rem, 2.6vh, 1.8rem); }
  .stage-prompt { font-size: 0.98rem; }
  .word-card { padding: clamp(10px, 2vh, 32px) clamp(24px, 5vw, 72px); min-width: 0; }
  .word-card-word { font-size: clamp(1.9rem, 5.2vh, 3.4rem); }
  .word-card-label { font-size: 1rem; margin-bottom: 3px; }
  .word-card-example { margin-top: 6px; }
  .choice-button,
  [data-little-blessings="true"] .choice-button { padding: 9px 16px; font-size: 1.2rem; }
  [data-little-blessings="true"] .basket { min-height: 120px; }
  .little-blessings-indicator { margin: 0 auto 2px; padding: 2px 10px; font-size: 0.8rem; }
}

/* Very wide AND tall screens: keep the floating card from becoming an awkward
   full-height slab in still mode by letting the garden take a touch more room. */
@media (min-height: 1000px) {
  .progress-garden { max-height: 40vh; }
}

/* Little Blessings (K-2) uses very tall (460px) immersive garden panels meant
   for the full-screen living world. In cinematic mode that panel is hidden and
   the garden becomes the fixed backdrop — so this only matters in the
   "still"/reduced-motion layout, where the panel is shown inline. There, relax
   those minimums and shrink the plots so the garden shares the screen as a
   compact strip while the lesson keeps the dominant share. (Specificity here
   intentionally beats `[data-little-blessings="true"] .progress-garden`.) */
body:not(.cinematic-garden-session) .progress-garden {
  min-height: 0;
  max-height: clamp(120px, 19vh, 170px);   /* compact strip — the lesson stays dominant */
  overflow-y: auto;
  overscroll-behavior: contain;
}
body:not(.cinematic-garden-session) [data-little-blessings="true"] .home-garden {
  min-height: 0;
  padding: 18px 20px 22px;
}
body:not(.cinematic-garden-session) [data-little-blessings="true"] .home-plot {
  height: 96px;
}

/* Still / reduced-motion on a WIDE screen: stop stacking. Put the lesson and the
   garden side by side so the lesson gets the full viewport height (quizzes fit
   with no scrolling) and the garden becomes a full-height panel that is entirely
   visible at the same time — the literal "see the garden AND the quiz at once". */
@media (min-width: 900px) {
  body:not(.cinematic-garden-session) .work-area {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(14px, 1.6vw, 26px);
  }
  body:not(.cinematic-garden-session) .work-area .stage {
    flex: 1 1 auto;
    min-height: 0;
  }
  body:not(.cinematic-garden-session) .work-area .progress-garden {
    flex: 0 0 clamp(260px, 24vw, 340px);
    max-height: none;        /* full column height — nothing hidden */
    align-self: stretch;
  }
  body:not(.cinematic-garden-session) [data-little-blessings="true"] .home-plot { height: 104px; }
}
@media (max-height: 720px) {
  body:not(.cinematic-garden-session) .progress-garden { max-height: clamp(100px, 16vh, 140px); }
  body:not(.cinematic-garden-session) [data-little-blessings="true"] .home-plot { height: 72px; }
}

/* ----------------------------------------------------------------------------
   HOTFIX 2026-05-31: Windows Chrome + Mobile Reliability
---------------------------------------------------------------------------- */

/* Evening/dark readability sweep. Several practice modes used pale cards whose
   text inherited low-contrast evening colors, especially after the cinematic
   scene turned the main stage into translucent glass. */
[data-theme="dark"] .sentence-card,
[data-theme="dark"] .word-card,
[data-theme="dark"] .find-prompt,
[data-theme="dark"] .build-base,
[data-theme="dark"] .build-result {
  background: rgba(12, 24, 18, 0.92);
  border-color: rgba(212, 176, 112, 0.36);
}
[data-theme="dark"] .word-card-word,
[data-theme="dark"] .build-base,
[data-theme="dark"] .build-result,
[data-theme="dark"] .blank-slot,
[data-theme="dark"] .choice-button > span:first-child,
[data-theme="dark"] .word-tile:not(.passive),
[data-theme="dark"] .basket-title,
[data-theme="dark"] .basket-word {
  color: #fff7df;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .word-card-label,
[data-theme="dark"] .choice-button .choice-sub,
[data-theme="dark"] .find-prompt,
[data-theme="dark"] .find-prompt strong,
[data-theme="dark"] .stage-prompt,
[data-theme="dark"] .sentence-label {
  color: #f0d18e;
}
[data-theme="dark"] .stage-title-group h2,
[data-theme="dark"] .stage-counter,
[data-theme="dark"] .feedback,
[data-theme="dark"] .feedback.info {
  color: #fff7df;
}
[data-theme="dark"] .word-tile.passive {
  color: #d8dccf;
  opacity: 0.94;
}
[data-theme="dark"] .word-tile:not(.passive),
[data-theme="dark"] .choice-button,
[data-theme="dark"] .basket-title,
[data-theme="dark"] .basket-word {
  font-weight: 700;
}
[data-theme="dark"] .choice-button {
  background: linear-gradient(180deg, #223429 0%, #17251d 100%);
  border-color: rgba(212, 176, 112, 0.34);
  color: #fff7df;
}
[data-theme="dark"] .choice-button.correct,
[data-theme="dark"] .sentence-words.find-mode .word-tile.selected,
[data-theme="dark"] .blank-slot.filled-correct {
  background: linear-gradient(180deg, #dcead8 0%, #b5c9a4 100%);
  color: #173420;
  text-shadow: none;
}
[data-theme="dark"] .choice-button.wrong,
[data-theme="dark"] .sentence-words.find-mode .word-tile.wrong,
[data-theme="dark"] .blank-slot.filled-wrong {
  background: #fbe4d8;
  color: #8b2f22;
  text-shadow: none;
}
[data-theme="dark"] .blank-slot {
  background: #2f3d2a;
  border-color: #d4b070;
}

/* Mobile should use normal document scrolling. The desktop viewport-locked shell
   works on laptops, but on phones it trapped the user inside nested scroll
   regions and could chop sort baskets or hide the menu after scrolling. */
@media (max-width: 760px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    min-height: 100svh;
  }

  .app {
    height: auto;
    min-height: 100svh;
    max-height: none;
    overflow: visible;
    padding: 76px clamp(10px, 3vw, 18px) 18px;
    gap: 10px;
  }
  :root[data-little-blessings="true"] .app {
    padding: 76px clamp(10px, 3vw, 18px) 18px;
  }

  .app-header {
    position: fixed;
    top: 0;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    z-index: 95;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 0 0 16px 16px;
  }

  body.cinematic-garden-session .app-header,
  body[data-little-blessings="true"].cinematic-garden-session .app-header {
    position: fixed;
    top: 0;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    z-index: 95;
    background: rgba(10, 26, 19, 0.72);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
  }

  .brand { min-width: 0; }
  .brand-block { gap: 8px; min-width: 0; }
  .logo-mark { width: 42px; height: 42px; }
  .logo-mark svg { width: 28px; height: 28px; }
  .brand-title { font-size: clamp(1.15rem, 5vw, 1.55rem); }
  .brand-tag { display: none; }
  .header-nav { flex: 0 0 auto; gap: 6px; flex-wrap: nowrap; }
  .stat-pill { display: none; }
  .profile-pill .profile-name { display: none; }
  .profile-pill { padding: 4px; }
  .ghost-btn { width: 40px; height: 40px; }

  .mode-bar-wrap {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mode-bar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-radius: 18px;
    padding: 7px;
  }
  .mode-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
  }

  .work-area,
  body.cinematic-garden-session .work-area {
    display: block;
    min-height: 0;
    overflow: visible;
  }

  .stage,
  body.cinematic-garden-session .stage,
  [data-little-blessings="true"] .stage {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    flex: none;
    overflow: visible;
    overscroll-behavior: auto;
    margin: 0 auto 14px;
    padding: 14px;
    gap: 12px;
    border-radius: 18px;
  }

  .stage-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 8px;
  }
  .stage-title-group {
    min-width: 0;
    width: 100%;
  }
  .stage-title-group h2 {
    font-size: clamp(1.3rem, 7vw, 1.7rem);
  }
  .stage-prompt {
    font-size: 0.96rem;
  }

  .sentence-card {
    padding: 12px;
    border-radius: 16px;
  }
  .sentence-label-row {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }
  .sentence-words {
    justify-content: flex-start;
    gap: 8px;
  }
  .word-tile,
  [data-little-blessings="true"] .word-tile,
  :root[data-xlarger="true"] .word-tile {
    max-width: 100%;
    padding: 8px 12px;
    font-size: clamp(1rem, 5vw, 1.24rem);
    overflow-wrap: anywhere;
  }
  .word-tile.passive {
    padding: 8px 3px;
  }

  .baskets,
  .baskets-4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .basket,
  [data-little-blessings="true"] .basket {
    min-height: 96px;
    border-radius: 14px 14px 20px 20px;
  }
  .basket-header {
    justify-content: flex-start;
    padding: 12px 12px 6px;
    gap: 10px;
  }
  .basket-hint {
    margin: 0;
    text-align: left;
    font-size: 0.92rem;
  }
  .basket-words {
    justify-content: flex-start;
    padding: 0 12px 12px;
  }

  .choice-stage {
    width: 100%;
    gap: 14px;
    padding: 0;
  }
  .word-card {
    min-width: 0;
    width: 100%;
    padding: 20px 14px;
  }
  .word-card-word {
    font-size: clamp(2.1rem, 13vw, 3.4rem);
    overflow-wrap: anywhere;
  }
  .word-card-word-row {
    flex-wrap: wrap;
  }
  .choice-row,
  .choice-row-4 {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: none;
  }
  .choice-button,
  [data-little-blessings="true"] .choice-button {
    padding: 12px 14px;
    font-size: 1.12rem;
  }

  .find-prompt,
  .build-base,
  .build-result {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
  }
  .blank-slot {
    min-width: 86px;
    padding: 8px 12px;
  }

  .feedback {
    align-items: flex-start;
    padding: 12px 14px;
    font-size: 1rem;
  }
  .actions {
    margin-top: 10px;
    padding-top: 12px;
    gap: 8px;
  }
  .actions .btn {
    flex: 1 1 140px;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .progress-garden,
  body:not(.cinematic-garden-session) .progress-garden {
    max-height: none;
    overflow: visible;
  }
  .drawer {
    width: 100vw;
    max-width: 100vw;
  }
  .drawer-content {
    min-height: 100svh;
    height: 100svh;
  }
  .drawer-body {
    max-height: calc(100svh - 82px);
  }
}

/* Final mobile containment pass: keep onboarding, mode tabs, sort baskets,
   and reward controls inside the phone viewport without horizontal panning. */
@media (max-width: 760px) {
  * {
    max-width: 100%;
  }
  .modal-overlay {
    align-items: start;
    overflow-y: auto;
    padding: 12px;
    place-items: start center;
  }
  .modal {
    box-sizing: border-box;
    border-radius: 18px;
    margin: 0 auto 18px;
    max-height: none;
    max-width: min(100%, 440px);
    overflow: visible;
    padding: 22px 18px;
    width: min(100%, calc(100vw - 24px));
  }
  .modal-title {
    font-size: clamp(1.45rem, 7vw, 1.85rem);
    overflow-wrap: anywhere;
  }
  .modal-sub {
    font-size: 1.05rem;
    margin-bottom: 16px;
  }
  .modal-body {
    gap: 10px;
  }
  .field-input {
    box-sizing: border-box;
    font-size: 1.08rem;
    min-width: 0;
    padding: 11px 13px;
    width: 100%;
  }
  .avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .avatar-pick {
    flex: 0 0 48px;
    height: 48px;
    width: 48px;
  }
  .modal-actions {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
  }
  .modal-actions .btn {
    width: 100%;
  }
  .mode-tab {
    white-space: normal;
  }
  .plant-picker,
  .little-blessings-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .plant-pick {
    border-radius: 14px;
    padding: 12px 8px;
  }
  .plant-pick-icon {
    height: 82px;
    width: 64px;
  }
  .plant-pick-label {
    font-size: 0.98rem;
  }
  .plant-pick-desc {
    display: none;
  }
  .story-grid,
  .word-card-grid,
  .profile-grid,
  .report-grid {
    grid-template-columns: 1fr;
  }
  .reward-screen,
  .reward-inner {
    max-width: 100%;
    overflow-x: hidden;
  }
}

@media (max-width: 420px) {
  .app {
    padding-left: 8px;
    padding-right: 8px;
  }
  .mode-tab {
    padding-left: 9px;
    padding-right: 9px;
  }
  .basket-title,
  .word-card-word {
    overflow-wrap: anywhere;
  }
}