/* Clover — The Garden */

@font-face {
  font-family: "OpenDyslexic";
  src: url("https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff") format("woff");
  font-weight: bold;
  font-display: swap;
}

:root {
  --bg: #fefae0;
  --bg-soft: #f9f3d5;
  --bg-card: #ffffff;
  --text: #3a3a3a;
  --text-muted: #71717a;
  --accent: #6ee7b7;
  --accent-dark: #10b981;
  --petal-pink: #fbcfe8;
  --sunshine: #fde68a;
  --lavender: #ddd6fe;
  --earth: #d4a574;
  --coral: #fda4af;
  --hill-far: #c7e3c4;
  --hill-near: #a3d4a3;

  --radius: 20px;
  --radius-lg: 32px;
  --shadow-card: 0 10px 30px rgba(58, 58, 58, 0.08);
  --shadow-lift: 0 14px 40px rgba(16, 185, 129, 0.18);

  --font-stack: "OpenDyslexic", "Comic Sans MS", system-ui, sans-serif;
  --reading-line-height: 1.8;
  --reading-letter-spacing: 0.04em;

  --motion-fast: 200ms;
  --motion-med: 380ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-stack);
  font-size: 18px;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
}

body.app-clover {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* GARDEN BACKGROUND ----------------------------------------------------- */
.garden-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.garden-bg .sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #fff7d6 0%, var(--bg) 35%, #fef3c7 70%, #fbe8c0 100%);
}
.garden-bg .hills {
  position: absolute; left: 0; right: 0; bottom: 18%;
  height: 22%;
  background:
    radial-gradient(ellipse at 30% 100%, var(--hill-far) 0 50%, transparent 51%),
    radial-gradient(ellipse at 75% 100%, var(--hill-near) 0 55%, transparent 56%);
}
.garden-bg .grass {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 18%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(110, 231, 183, 0.5) 60%, var(--accent-dark) 100%);
}
.garden-bg .sun {
  position: absolute; top: 8%; right: 12%;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(253, 230, 138, 0.9) 0%, rgba(253, 230, 138, 0) 70%);
  filter: blur(2px);
}
.garden-bg .butterflies::before,
.garden-bg .butterflies::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  background: var(--petal-pink);
  clip-path: polygon(50% 50%, 0 0, 0 50%, 50% 50%, 0 100%, 50% 100%, 50% 50%, 100% 100%, 100% 50%, 50% 50%, 100% 0, 100% 50%);
  opacity: 0;
  animation: flutter 14s linear infinite;
}
.garden-bg .butterflies::after {
  top: 30%;
  background: var(--lavender);
  animation-delay: 7s;
  animation-duration: 18s;
}
@keyframes flutter {
  0% { opacity: 0; left: -5%; top: 22%; transform: translateY(0) scale(0.9); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 105%; top: 16%; transform: translateY(-20px) scale(1.05); opacity: 0; }
}

/* HEADER ---------------------------------------------------------------- */
.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem 0.5rem;
}

.mascot-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.mascot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transition: transform var(--motion-med) ease;
}
.mascot.is-listening { transform: scale(1.05); }
.mascot.is-celebrating { animation: hop 0.7s ease 2; }
@keyframes hop {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}
.mascot-mouth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}
.sun-halo {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 230, 138, 0.5) 0%, transparent 70%);
  box-shadow: 0 0 60px var(--sunshine);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.greeting h1 {
  margin: 0;
  font-size: 1.6rem;
}
.muted { color: var(--text-muted); margin: 0.2rem 0 0; }

/* TABS ------------------------------------------------------------------ */
.tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab, .submode {
  flex: 1 1 auto;
  min-width: 110px;
  min-height: 56px;
  padding: 0.75rem 1.2rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all var(--motion-fast);
  white-space: nowrap;
}
.tab:hover, .submode:hover { transform: translateY(-2px); }
.tab-active, .submode-active {
  background: var(--accent);
  color: #064e3b;
  font-weight: bold;
  border-color: var(--accent-dark);
}

.submodes {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.submodes::-webkit-scrollbar { display: none; }

/* CONTENT --------------------------------------------------------------- */
.content {
  flex: 1;
  padding: 0 1rem 6rem;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
}

.tab-panel { display: none; }
.tab-panel-active { display: block; }

/* CARDS / BUTTONS ------------------------------------------------------- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 1.05rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  color: #064e3b;
  font-weight: bold;
  border-color: var(--accent-dark);
}
.btn-huge {
  font-size: 1.4rem;
  min-height: 72px;
  padding: 1rem 2rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--lavender);
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  font-family: inherit;
  margin: 0.25rem;
}
.chip:hover { background: var(--petal-pink); }
.chip-mastered { background: var(--accent); color: #064e3b; }
.chip-review { background: var(--sunshine); }

/* STORY COVER ART ------------------------------------------------------- */
.story-cover {
  margin: 0 0 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  animation: coverIn 600ms ease both;
}
.story-cover img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes coverIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* STORY READING --------------------------------------------------------- */
.reading-pane {
  font-size: 1.4rem;
  line-height: var(--reading-line-height);
  letter-spacing: var(--reading-letter-spacing);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(212, 165, 116, 0.04) 0,
      rgba(212, 165, 116, 0.04) 36px,
      rgba(212, 165, 116, 0.06) 36px,
      rgba(212, 165, 116, 0.06) 37px
    ),
    #fffdf3;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid #f0e8c8;
}
.reading-pane p { margin: 0 0 1rem; }

.word {
  display: inline-block;
  padding: 0.1em 0.2em;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--motion-fast);
}
.word:hover { background: rgba(110, 231, 183, 0.25); }
.word.is-current {
  background: rgba(110, 231, 183, 0.5);
  border-bottom: 3px solid var(--accent-dark);
}
.word.is-stretch {
  position: relative;
  background: linear-gradient(180deg, transparent 70%, var(--sunshine) 70%);
}
.word.is-stretch::after {
  content: "✨";
  font-size: 0.6em;
  position: absolute;
  top: -0.4em;
  right: -0.2em;
}

.alternating-cue {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-soft);
  border-radius: 999px;
  margin: 1rem 0;
  font-size: 0.95rem;
}
.alternating-cue .who { font-weight: bold; }
.alternating-cue.is-emma .who { color: var(--accent-dark); }
.alternating-cue.is-clover .who { color: #b45309; }

/* SOUND-IT-OUT PANEL ---------------------------------------------------- */
.syllable-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
  transform: translateY(100%);
  transition: transform var(--motion-med) cubic-bezier(.3,1.3,.5,1);
  z-index: 5;
  max-height: 60vh;
  overflow-y: auto;
}
.syllable-panel.is-open { transform: translateY(0); }
.syllables { font-size: 2.2rem; letter-spacing: 0.1em; margin: 0.5rem 0; }
.syl { padding: 0 0.2em; border-radius: 6px; }
.syl:nth-child(1) { background: var(--petal-pink); }
.syl:nth-child(2) { background: var(--sunshine); }
.syl:nth-child(3) { background: var(--lavender); }
.syl:nth-child(4) { background: var(--accent); }
.syl:nth-child(5) { background: var(--coral); }

/* MIC --------------------------------------------------------------------*/
.mic-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.mic-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--accent-dark);
  display: grid;
  place-items: center;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
  transition: transform var(--motion-fast);
}
.mic-btn:hover { transform: scale(1.04); }
.mic-btn.is-listening {
  animation: micPulse 1.2s ease-in-out infinite;
  background: var(--coral);
  border-color: #be123c;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(253, 164, 175, 0.4); }
  50% { box-shadow: 0 8px 36px rgba(253, 164, 175, 0.8); }
}
.transcript {
  flex: 1;
  min-width: 200px;
  padding: 1rem;
  background: var(--bg-soft);
  border-radius: var(--radius);
  font-size: 1.1rem;
  min-height: 56px;
}
.transcript:empty::before {
  content: "Tap the mic to talk to Clover…";
  color: var(--text-muted);
}

/* SUGGESTION CHIPS */
.suggestions {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem 0;
}

/* MODAL */
.modal-root {
  position: fixed;
  inset: 0;
  background: rgba(58, 58, 58, 0.45);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 10;
}
.modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

/* CONFETTI */
.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* SCENE BACKGROUNDS ---------------------------------------------------- */
.mode-scene {
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}
.mode-scene[data-scene="story-time"] { background-image: url("assets/scenes/story-time.webp"); }
.mode-scene[data-scene="read-aloud"] { background-image: url("assets/scenes/read-aloud.webp"); }
.mode-scene[data-scene="word-power"] { background-image: url("assets/scenes/word-power.webp"); }
.mode-scene[data-scene="dictate"] { background-image: url("assets/scenes/dictate.webp"); }
.mode-scene[data-scene="progress"] { background-image: url("assets/scenes/progress.webp"); }

/* PROGRESS GRID ----------------------------------------------------------*/
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.stat {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.stat-value { font-size: 1.8rem; font-weight: bold; color: var(--accent-dark); }
.stat-label { font-size: 0.9rem; color: var(--text-muted); }

/* COMPAT WARNING */
.compat-warning {
  background: var(--coral);
  color: #5b1a1a;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin: 1rem 0;
}

/* REDUCED MOTION ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .garden-bg .butterflies::before,
  .garden-bg .butterflies::after { display: none; }
}

/* small screens */
@media (max-width: 480px) {
  .header { flex-direction: column; text-align: center; }
  .reading-pane { font-size: 1.2rem; padding: 1rem; }
}