* { box-sizing: border-box; }
:root { --page-bg:#f7f4ee; --app-bg:#fffaf2; --card-bg:#fff; --soft-bg:#f7f4ee; --border:#ece7dc; --primary:#263238; --accent:#ffe7a8; --progress:#8bc34a; --muted:#78909c; }
body { margin:0; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--page-bg); color:#263238; min-height:100vh; display:flex; justify-content:center; }
body.phase-1 { --page-bg:#f7f4ee; --app-bg:#fffaf2; --soft-bg:#f7f4ee; --border:#ece7dc; --primary:#263238; --accent:#ffe7a8; --progress:#8bc34a; }
body.phase-2 { --page-bg:#eef7fb; --app-bg:#f4fbff; --soft-bg:#e7f3fb; --border:#cfe5f3; --primary:#1f4e5f; --accent:#bdefff; --progress:#38a3c7; }
body.phase-3 { --page-bg:#f4efff; --app-bg:#fbf8ff; --soft-bg:#eee5ff; --border:#d9c9ff; --primary:#4a2c75; --accent:#dec8ff; --progress:#8b5cf6; }
body.phase-4 { --page-bg:#eefaf2; --app-bg:#f7fff9; --soft-bg:#e5f7ec; --border:#c7ecd5; --primary:#24563a; --accent:#c8f7d7; --progress:#22a060; }
body.phase-5 { --page-bg:#fff3ee; --app-bg:#fffaf7; --soft-bg:#ffe9df; --border:#ffd0bf; --primary:#7a321f; --accent:#ffc6ad; --progress:#e86f42; }
body.story-mode { --page-bg:#eef2ff; --app-bg:#f8f9ff; --soft-bg:#e8edff; --border:#c7d2fe; --primary:#30346b; --accent:#c7d2fe; --progress:#6366f1; }
.app { width:100%; max-width:520px; min-height:100vh; background:var(--app-bg); padding:20px; transition:background .25s ease; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.logo { font-size:1.25rem; font-weight:900; letter-spacing:-.04em; }
.badge { background:var(--accent); padding:8px 12px; border-radius:999px; font-size:.85rem; font-weight:800; white-space:nowrap; }
.screen { display:none; }
.screen.active { display:block; }
.card { background:var(--card-bg); border-radius:26px; padding:24px; box-shadow:0 12px 26px rgba(0,0,0,.08); margin-bottom:16px; }
h1 { font-size:2rem; line-height:1.08; margin:0 0 10px; letter-spacing:-.05em; }
h2 { font-size:1.5rem; margin:0 0 8px; letter-spacing:-.03em; }
h3 { font-size:1.15rem; margin:0 0 8px; }
p { color:#54656c; line-height:1.45; margin:0 0 14px; }
.button { width:100%; border:none; border-radius:18px; padding:16px 18px; font-size:1rem; font-weight:900; background:var(--primary); color:#fff; cursor:pointer; margin-top:10px; }
.button.secondary { background:var(--border); color:#263238; }
.button.small { padding:12px 14px; border-radius:14px; font-size:.9rem; }
.level-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px; }
.level-card { border:2px solid var(--border); border-radius:20px; padding:16px; background:var(--app-bg); cursor:pointer; }
.level-card.locked { opacity:.55; cursor:not-allowed; }
.level-title-row { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.level-title { font-weight:900; font-size:1.05rem; }
.level-status { font-size:.8rem; font-weight:900; color:var(--muted); white-space:nowrap; }
.word-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.word-card,.sentence-card,.book-page { background:var(--soft-bg); border:2px solid transparent; border-radius:22px; cursor:pointer; color:#263238; }
.word-card { padding:22px 12px; text-align:center; font-size:1.7rem; font-weight:950; }
.sentence-card { padding:18px; margin:12px 0; font-size:1.6rem; line-height:1.25; font-weight:850; text-align:center; }
.book-page { min-height:210px; border-radius:24px; padding:24px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:1.85rem; line-height:1.25; font-weight:900; }
.step-label { font-size:.8rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px; }
.mini-controls,.reset-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.progress-wrap { background:var(--border); border-radius:999px; height:14px; overflow:hidden; margin:14px 0 8px; }
.progress-bar { height:100%; width:0%; background:var(--progress); transition:width .25s ease; }
.success { text-align:center; padding:24px 4px; }
.star { font-size:5rem; margin-bottom:8px; }
.fine-print { font-size:.82rem; color:var(--muted); margin-top:10px; }
.listen-button { width:auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:999px; padding:10px 14px; background:var(--accent); color:#263238; font-size:.9rem; font-weight:900; cursor:pointer; margin:6px 0 12px; }
.pulse-next { animation:pulseNext .75s ease-in-out 3; background:#ffe7a8 !important; color:#263238 !important; box-shadow:0 0 0 6px rgba(255,231,168,.55); }
@keyframes pulseNext { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }
.final-celebration { position:relative; overflow:hidden; min-height:360px; }
.reader-badge { display:inline-flex; align-items:center; justify-content:center; margin:14px auto; padding:14px 18px; border-radius:999px; background:var(--accent); color:#263238; font-weight:950; font-size:1.05rem; animation:badgePop .7s ease-out both; }
.star-count-big { font-size:2.3rem; font-weight:950; margin:14px 0 4px; }
.confetti { position:absolute; top:-20px; width:10px; height:18px; border-radius:3px; opacity:.95; animation:confettiFall 2.6s linear forwards; }
@keyframes confettiFall { 0%{transform:translateY(-20px) rotate(0deg); opacity:1} 100%{transform:translateY(440px) rotate(720deg); opacity:0} }
@keyframes badgePop { 0%{transform:scale(.65); opacity:0} 70%{transform:scale(1.08); opacity:1} 100%{transform:scale(1); opacity:1} }
.reset-confirm { display:none; margin-top:12px; padding:14px; border-radius:18px; background:var(--soft-bg); border:2px solid var(--accent); }
.reset-confirm.active { display:block; }
.phase-banner { background:var(--primary); color:white; border-radius:24px; padding:18px; margin-bottom:16px; box-shadow:0 10px 22px rgba(0,0,0,.08); }
.phase-kicker { font-size:.8rem; font-weight:950; text-transform:uppercase; letter-spacing:.1em; opacity:.85; margin-bottom:5px; }
.phase-title { font-size:1.55rem; font-weight:950; letter-spacing:-.04em; line-height:1.1; }
.phase-subtitle { color:rgba(255,255,255,.82); margin:8px 0 0; font-size:.95rem; }
.story-section { margin-top:22px; }
.story-section-title { font-size:1.15rem; font-weight:950; letter-spacing:-.03em; margin:8px 0 10px; padding:10px 14px; border-radius:16px; }
.story-section.beginner .story-section-title { background:#fff0b8; color:#6a5200; }
.story-section.growing .story-section-title { background:#dff1ff; color:#174d72; }
.story-section.fluent .story-section-title { background:#eadfff; color:#4d2f78; }
.story-card { border:2px solid var(--border); border-radius:22px; background:var(--app-bg); padding:18px; margin:12px 0; cursor:pointer; }
.parent-card { background:var(--soft-bg); border-radius:18px; padding:16px; margin-top:12px; }
.parent-stat { font-size:1.7rem; font-weight:950; margin:6px 0; }
.story-progress { text-align:center; color:var(--muted); font-size:.9rem; font-weight:800; margin-top:12px; }