* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #FDF6EC;
  --ink: #2D3047;
  --accent: #FF6B35;
  --good: #06D6A0;
  --bad: #EF476F;
  --card: #FFFFFF;
}

html, body { height: 100%; }

body {
  font-family: 'Baloo 2', 'Comic Sans MS', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  user-select: none;
}

#app { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding: 16px; }

.screen { flex: 1; display: flex; flex-direction: column; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 16px; }
.topbar .logo { font-size: 1.3rem; font-weight: 800; }
.logo span { color: var(--accent); }
.stars-pill { background: #FFE8A3; border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 1rem; }
.back-btn { background: none; border: none; font-size: 1.6rem; cursor: pointer; padding: 4px 10px; border-radius: 12px; }
.back-btn:active { background: #00000010; }

/* ---------- home ---------- */
.hero { text-align: center; padding: 12px 0 4px; }
.hero h1 { font-size: 2.1rem; font-weight: 800; line-height: 1.15; }
.hero h1 span { color: var(--accent); }
.hero p { margin-top: 8px; font-size: 1.05rem; color: #5b5e78; }

.tree-label { font-weight: 800; font-size: 1.1rem; margin: 18px 0 10px; }

.family-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.family-card {
  background: var(--card); border-radius: 20px; padding: 18px 14px;
  text-align: center; border: 3px solid transparent; cursor: pointer;
  box-shadow: 0 4px 0 #00000012; transition: transform .1s ease;
  position: relative;
}
.family-card:active { transform: scale(.97); }
.family-card .fam-code { font-size: 1.9rem; font-weight: 800; letter-spacing: 2px; }
.family-card .fam-sub { font-size: .85rem; color: #5b5e78; margin-top: 4px; }
.family-card.mastered { border-color: var(--good); }
.family-card.mastered::after { content: "⭐"; position: absolute; top: -10px; right: -6px; font-size: 1.4rem; }
.family-card.master {
  border-color: #E8B93B;
  background: linear-gradient(160deg, #FFFDF4, #FFF3D0);
  box-shadow: 0 4px 0 #e8b93b55, 0 0 14px #ffd86b66;
}
.family-card.master::after { content: "👑"; position: absolute; top: -12px; right: -6px; font-size: 1.5rem; }
.family-card.locked { opacity: .45; filter: grayscale(.6); }
.family-card.locked .fam-code::before { content: "🔒 "; font-size: 1.1rem; }
.family-card.next { border-color: var(--accent); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 4px 0 #00000012; } 50% { box-shadow: 0 4px 0 #00000012, 0 0 0 6px #FF6B3522; } }

/* ---------- learn ---------- */
.learn-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; }
.chunk-display { display: flex; gap: 10px; align-items: center; justify-content: center; }
.big-letter {
  width: 84px; height: 96px; border-radius: 18px; background: var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.2rem; font-weight: 800; box-shadow: 0 5px 0 #00000015;
}
.big-letter.chunk { background: var(--accent); color: #fff; }
.big-letter.flyin { animation: flyIn .5s ease; }
@keyframes flyIn { from { transform: translateX(-90px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.learn-word { font-size: 1.6rem; font-weight: 800; min-height: 2.2rem; }
.learn-emoji { font-size: 3.4rem; min-height: 4rem; }
.learn-caption { color: #5b5e78; font-size: 1.05rem; }

/* ---------- buttons ---------- */
.btn {
  border: none; border-radius: 18px; padding: 16px 28px; font-size: 1.2rem;
  font-weight: 800; font-family: inherit; cursor: pointer; color: #fff;
  background: var(--accent); box-shadow: 0 5px 0 #d1471a; transition: transform .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #d1471a; }
.btn.secondary { background: #fff; color: var(--ink); box-shadow: 0 5px 0 #00000018; }
.btn.wide { width: 100%; }
.btn-row {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 0 12px;
  /* the main action always floats at the bottom of the screen - no scrolling
     needed to find "Let's go", on any device */
  position: sticky; bottom: 0; z-index: 5;
  background: linear-gradient(to top, var(--bg) 75%, transparent);
}

/* ---------- games ---------- */
.game-header { text-align: center; padding: 8px 0 4px; }
.game-header .game-title { font-weight: 800; font-size: 1.15rem; }
.progress-track { height: 12px; background: #00000010; border-radius: 999px; margin: 12px 0; overflow: hidden; }
.progress-fill { height: 100%; background: var(--good); border-radius: 999px; width: 0%; transition: width .3s ease; }

.game-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }

.prompt-emoji { font-size: 4.5rem; }
.word-img { border-radius: 18px; box-shadow: 0 4px 0 #00000010; display: inline-block; }
.prompt-emoji .word-img, .learn-emoji .word-img { width: 150px; height: 150px; }
.choice.pic-choice { width: auto; height: auto; padding: 8px; }
.choice.pic-choice .word-img, .choice.pic-choice span { width: 88px; height: 88px; font-size: 3rem; display: flex; align-items: center; justify-content: center; }
.hl-emoji .word-img { width: 40px; height: 40px; border-radius: 10px; }
.chip-img { width: 22px; height: 22px; border-radius: 6px; vertical-align: -5px; }
.prompt-word { font-size: 2.6rem; font-weight: 800; letter-spacing: 4px; }
.prompt-word .gap { color: var(--accent); border-bottom: 4px dashed var(--accent); padding: 0 6px; }

.choices { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.choice {
  min-width: 76px; height: 76px; border-radius: 18px; background: var(--card);
  border: 3px solid transparent; font-size: 1.9rem; font-weight: 800; font-family: inherit;
  cursor: pointer; box-shadow: 0 4px 0 #00000012; padding: 0 14px;
}
.choice:active { transform: scale(.95); }
.choice.right { background: var(--good); color: #fff; animation: pop .35s; }
.choice.wrong { background: var(--bad); color: #fff; animation: shake .35s; }
@keyframes pop { 50% { transform: scale(1.15); } }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

.speak-btn { background: #fff; border: none; border-radius: 999px; width: 60px; height: 60px; font-size: 1.7rem; cursor: pointer; box-shadow: 0 4px 0 #00000015; animation: speakNudge 4s ease-in-out infinite; }
@keyframes speakNudge { 0%, 88%, 100% { transform: none; } 92% { transform: scale(1.12) rotate(-6deg); } 96% { transform: scale(1.05) rotate(4deg); } }
.speak-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.speak-label { font-size: .75rem; font-weight: 700; color: #a89d7f; letter-spacing: .5px; }

/* ---------- celebration ---------- */
.celebrate-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.badge-circle {
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE8A3, #FFB703);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800; color: #7a4c00;
  box-shadow: 0 8px 0 #d99a00, 0 0 0 10px #FFB70330;
  animation: pop .6s ease;
}
.celebrate-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 420px; }
.won-word { background: var(--card); border-radius: 12px; padding: 8px 14px; font-weight: 800; box-shadow: 0 3px 0 #00000010; animation: fadeIn .4s both; }

.confetti { position: fixed; top: -20px; font-size: 1.4rem; animation: fall linear forwards; z-index: 50; pointer-events: none; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* big positive-affirmation pop on every correct answer */
.cheer-pop {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 60; pointer-events: none;
}
.cheer-pop span {
  font-size: 3.4rem; font-weight: 800; color: #fff; text-align: center;
  background: var(--good); padding: 18px 38px; border-radius: 26px;
  box-shadow: 0 10px 0 #049e73, 0 0 0 8px #06d6a033;
  transform: rotate(-4deg);
  animation: cheerPop 1.1s ease forwards;
}
@keyframes cheerPop {
  0% { transform: scale(.3) rotate(-4deg); opacity: 0; }
  25% { transform: scale(1.15) rotate(-4deg); opacity: 1; }
  45% { transform: scale(1) rotate(-4deg); }
  80% { transform: scale(1) rotate(-4deg); opacity: 1; }
  100% { transform: scale(1.05) rotate(-4deg); opacity: 0; }
}

/* read-along */
.story-line {
  font-size: 2rem; font-weight: 700; line-height: 2.3;
  max-width: 520px; color: var(--ink);
  word-spacing: 14px;
}
.story-line .tok { display: inline-block; vertical-align: top; text-align: center; border-radius: 10px; padding: 0 4px; }
.story-line .tok-word { display: block; }
.story-line .hl { cursor: pointer; }
.story-line .hl .tok-word {
  color: var(--accent); font-weight: 800;
  border-bottom: 3px dashed var(--accent);
}
.story-line .hl-emoji { display: block; font-size: 1.5rem; line-height: 1.2; margin-top: 2px; }
.story-line .hl:active { background: #FF6B3522; }
.story-line .tok.speak { background: #FFE8A3; box-shadow: 0 0 0 3px #FFE8A3; }

.result-line { font-size: 1.2rem; font-weight: 800; }
.result-line.good { color: #059669; }
.result-line.bad { color: var(--bad); }

/* phones: bigger words, bigger targets - little eyes and little fingers */
@media (max-width: 520px) {
  .big-letter { width: 72px; height: 82px; font-size: 2.7rem; }
  .learn-stage { gap: 12px; }
  .learn-caption { font-size: 1.15rem; line-height: 1.5; }
  .game-header .game-title { font-size: 1.25rem; }
  .prompt-word { font-size: 3.1rem; }
  .prompt-emoji { font-size: 5.2rem; }
  .choice { min-width: 82px; height: 82px; font-size: 2.2rem; }
  .learn-word { font-size: 1.9rem; }
  .story-line { font-size: 1.75rem; word-spacing: 10px; }
  .btn { padding: 18px 28px; font-size: 1.3rem; }
  .speak-btn { width: 68px; height: 68px; font-size: 1.9rem; }
  .fam-code { font-size: 2.1rem; }
}

.footnote { text-align: center; color: #9a9db5; font-size: .8rem; padding: 14px 0 6px; }

/* pause overlay */
.pause-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: #2D3047E6; display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s ease;
}
.pause-card {
  background: var(--bg); border-radius: 26px; padding: 34px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; max-width: 320px; box-shadow: 0 20px 60px #00000060;
}

/* onboarding */
.onb-blocks { display: flex; gap: 10px; }
.onb-blocks .big-letter { animation: pop .6s ease both; }
.onb-blocks .big-letter:nth-child(2) { animation-delay: .15s; }
.onb-blocks .big-letter:nth-child(3) { animation-delay: .3s; }

/* daily review card */
.review-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(120deg, #FFF1E8, #FFE3D0);
  border: 3px solid #FFB088; border-radius: 20px;
  padding: 14px 18px; margin-top: 16px; cursor: pointer;
  box-shadow: 0 4px 0 #00000010;
}
.review-card:active { transform: scale(.98); }
.review-flame { font-size: 2rem; }
.review-title { font-weight: 800; font-size: 1.15rem; }
.review-sub { font-size: .85rem; color: #8a5b3c; }

/* level map */
.level-map { display: flex; flex-direction: column; gap: 10px; position: relative; }
.level-map::before {
  content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px;
  width: 4px; background: #e8e2d2; border-radius: 2px; z-index: 0;
}
.level-card {
  display: flex; gap: 14px; align-items: center;
  background: var(--card); border-radius: 18px; padding: 12px 16px;
  box-shadow: 0 3px 0 #00000010; position: relative; z-index: 1;
}
.level-card.active { border: 3px solid var(--accent); }
.level-card.locked-level { opacity: .62; }
.level-num {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: #F4EFE3; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.level-card.active .level-num { background: #FFE1D2; }
.level-info { flex: 1; min-width: 0; }
.level-name { font-weight: 800; font-size: 1.02rem; }
.level-sub { font-size: .8rem; color: #7b7e96; }
.level-tease { font-style: italic; }
.level-progress { height: 8px; background: #00000010; border-radius: 999px; margin: 6px 0 3px; overflow: hidden; }
.level-progress-fill { height: 100%; background: var(--good); border-radius: 999px; }

/* grown-ups corner */
.grownups-btn {
  margin-top: 18px; background: none; border: 2px dashed #c9c3b2;
  border-radius: 14px; padding: 12px; font-family: inherit; font-size: .9rem;
  color: #8a8471; cursor: pointer; width: 100%;
}
.parent-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }
.pstat { background: var(--card); border-radius: 16px; padding: 14px; text-align: center; box-shadow: 0 3px 0 #00000010; }
.pstat-num { font-size: 1.6rem; font-weight: 800; }
.pstat-lbl { font-size: .8rem; color: #7b7e96; }
.parent-list { display: flex; flex-direction: column; gap: 6px; }
.parent-row {
  display: flex; justify-content: space-between; background: var(--card);
  border-radius: 12px; padding: 10px 16px; box-shadow: 0 2px 0 #00000008;
}
.premium-tease {
  margin-top: 16px; background: #FFF8E1; border: 2px solid #FFD54F;
  border-radius: 16px; padding: 14px 16px; font-size: .9rem; line-height: 1.5;
}
.ac-input {
  width: 100%; font-family: inherit; font-size: 1rem; font-weight: 600;
  padding: 12px 16px; border-radius: 14px; border: 2px solid #d8d2c0;
  margin-bottom: 8px; outline: none; background: var(--card);
}
.ac-input:focus { border-color: var(--accent); }