:root{--phonic-line:#172033;--phonic-teal:#159f96;--phonic-gold:#ffbf3f;--phonic-mint:#e8fbf7;--phonic-paper:#fffdf6;--phonic-soft:#eef9ff;--phonic-muted:#69758b}*{box-sizing:border-box}body{margin:0;font-family:Nunito,Trebuchet MS,system-ui,sans-serif;color:var(--phonic-line);background:linear-gradient(135deg,#eefdff,#fffdf5 72%)}button{font:inherit}.phonic-page{width:min(1120px,100%);margin:0 auto;padding:24px}.phonic-activity,.phonic-board,.phonic-card,.phonic-hero,.phonic-side{border:4px solid var(--phonic-line);border-radius:8px;background:#ffffff;box-shadow:0 18px 42px rgba(23,32,51,.1)}.phonic-hero{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px;margin-bottom:16px}.phonic-eyebrow{margin:0 0 4px;color:var(--phonic-teal);font-weight:900;text-transform:uppercase}.phonic-activity h2,.phonic-card h3,.phonic-hero h1{margin:0}.phonic-stars{min-width:106px;padding:10px 14px;border:3px solid var(--phonic-line);border-radius:8px;background:#fff7d7;text-align:center;font-weight:1000}.phonic-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px}.phonic-side{padding:12px;align-self:start}.phonic-actions,.phonic-options,.phonic-progress,.phonic-sound-row,.phonic-tabs,.phonic-word-tabs{display:flex;flex-wrap:wrap;gap:8px}.phonic-action,.phonic-back,.phonic-option,.phonic-sound,.phonic-tab,.phonic-word-tab{min-height:42px;border:3px solid var(--phonic-line);border-radius:8px;background:#ffffff;cursor:pointer;font-weight:1000}.phonic-action,.phonic-back,.phonic-option,.phonic-tab,.phonic-word-tab{padding:8px 12px}.phonic-option.is-correct,.phonic-sound.is-active,.phonic-sound.is-heard,.phonic-tab.is-active,.phonic-word-tab.is-active{background:var(--phonic-teal);color:#ffffff}.phonic-option.is-wrong,.phonic-sound.is-wrong{background:#ffe0e0}.phonic-word-tabs{margin:12px 0}.phonic-word-tab.is-complete:after{content:" ★";color:#ffb703}.phonic-board{padding:16px}.phonic-card-grid,.phonic-picture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.phonic-card{display:grid;gap:8px;padding:10px;cursor:pointer;text-align:center}.phonic-card img,.phonic-picture-card img,.phonic-word-image{width:100%;aspect-ratio:1/1;object-fit:contain;border:3px solid var(--phonic-line);border-radius:8px;background:var(--phonic-soft)}.phonic-activity{position:relative;display:grid;gap:14px;padding:16px;overflow:hidden}.phonic-activity-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.phonic-progress{align-items:center}.phonic-dot{width:18px;height:18px;border:3px solid var(--phonic-line);border-radius:999px;background:#ffffff}.phonic-dot.is-done{background:var(--phonic-gold)}.phonic-dot.is-active{background:var(--phonic-teal)}.phonic-word-focus{display:grid;gap:10px;justify-items:center}.phonic-big-word{width:min(520px,100%);padding:10px;border:4px solid var(--phonic-line);border-radius:8px;background:#e8f8ff;font-size:clamp(2.6rem,8vw,5rem);font-weight:1000;text-align:center}.phonic-sound{min-width:64px;min-height:64px;padding:10px;font-size:1.8rem}.phonic-equation{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:1.25rem;font-weight:1000}.phonic-equation-chip{min-width:58px;padding:8px 12px;border:3px solid var(--phonic-line);border-radius:8px;background:#fff7d7;text-align:center}.phonic-status{min-height:26px;margin:0;color:var(--phonic-muted);font-weight:900;text-align:center}.phonic-picture-card{padding:8px;border:3px solid var(--phonic-line);border-radius:8px;background:#ffffff;cursor:pointer;font-weight:1000}.phonic-complete{display:grid;gap:12px;justify-items:center;padding:24px;text-align:center}.phonic-badge{width:118px;height:118px;display:grid;place-items:center;border:5px solid var(--phonic-line);border-radius:999px;background:var(--phonic-gold);font-size:3rem}.phonic-confetti{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 16% 22%,#ff5f66 0 5px,transparent 6px),radial-gradient(circle at 75% 20%,#20aeea 0 5px,transparent 6px),radial-gradient(circle at 50% 10%,#ffbf3f 0 5px,transparent 6px),radial-gradient(circle at 30% 78%,#32c734 0 5px,transparent 6px),radial-gradient(circle at 84% 72%,#7c3aed 0 5px,transparent 6px);animation:phonicPop 1.1s ease-out forwards}@keyframes phonicPop{0%{opacity:0;transform:scale(.8)}20%{opacity:1}to{opacity:0;transform:scale(1.18)}}.letter-place{display:grid;gap:12px}.letter-place-bank,.letter-place-slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.letter-place-slot,.letter-place-tile{width:54px;height:54px;border:3px solid var(--phonic-line);border-radius:8px;background:#ffffff;font-size:1.8rem;font-weight:1000}.letter-place-slot.is-active{background:#fff7d7}.letter-place-slot.is-filled,.letter-place-tile.is-selected{background:var(--phonic-teal);color:#ffffff}.lesson-tabs,.section-tabs,.word-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.lesson-tab,.section-tab,.word-tab{min-height:42px;border:3px solid var(--phonic-line);border-radius:8px;background:#ffffff;color:var(--phonic-line);cursor:pointer;font-weight:1000;padding:8px 16px;text-transform:uppercase}.lesson-tab.is-active,.section-tab.is-active{background:var(--phonic-teal);color:#ffffff}.word-tab.is-active{background:var(--phonic-gold);color:var(--phonic-line)}.word-tab.is-complete:after{content:" ★";color:#ffb703}.level3-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:14px;align-items:start;width:100%;margin-top:16px}.level3-main-card,.level3-practice-card{border:4px solid var(--phonic-line);border-radius:8px;background:#ffffff;box-shadow:0 18px 42px rgba(23,32,51,.1);padding:16px}.family-header{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--phonic-line);padding-bottom:8px;margin-bottom:12px}.family-header strong{font-size:1.25rem;color:var(--phonic-line)}.family-header span{color:var(--phonic-muted);font-weight:800}.big-word.level3-big-word{width:100%;min-height:72px;border:4px solid var(--phonic-line);border-radius:8px;background:var(--phonic-soft);color:var(--phonic-line);cursor:pointer;font-size:clamp(2.2rem,6vw,3.8rem);font-weight:1000;text-align:center;text-transform:uppercase;margin-bottom:12px}.big-word.level3-big-word:hover{background:#e1f5ff}.sound-blocks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:14px}.sound-block{width:clamp(54px,10vw,80px);aspect-ratio:1;display:grid;place-items:center;border:3px solid var(--phonic-line);border-radius:8px;background:#fffdf5;color:var(--phonic-line);cursor:pointer;font-size:clamp(1.4rem,4vw,2.2rem);font-weight:1000;text-transform:uppercase}.sound-block.is-active,.sound-block.is-heard,.sound-block:hover{background:var(--phonic-teal);color:#ffffff}.sound-block.is-wrong{background:#ffe0e0;animation:gentle-shake-tile .26s ease}@keyframes gentle-shake-tile{0%,to{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}.family-breakdown{text-align:center;margin-bottom:14px}.family-equation{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}.equation-chip{min-width:48px;padding:6px 10px;border:3px solid var(--phonic-line);border-radius:8px;background:#fff7d7;color:var(--phonic-line);cursor:pointer;font-weight:1000;text-transform:uppercase}.equation-chip.level3-blend{background:#e7f8ff}.equation-chip.is-word{background:var(--phonic-teal);color:#ffffff}.family-breakdown p{margin:0;color:var(--phonic-muted);font-weight:900;font-size:1.1rem}.level3-word-art{position:relative;width:min(100%,320px);aspect-ratio:1.2/1;margin:12px auto;display:grid;place-items:center}.level3-word-art .level-two-image{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;border:3px solid var(--phonic-line);border-radius:8px;background:var(--phonic-soft)}.level3-word-art .level-two-fallback-art{position:absolute;inset:0;z-index:1;display:grid;place-items:center;border:3px solid var(--phonic-line);border-radius:8px;background:#fff7d7;color:var(--phonic-line);font-size:clamp(2rem,8vw,4rem);font-weight:1000}.lesson-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}.level3-practice-card{display:flex;flex-direction:column}.level3-practice-card h2{margin-top:0;margin-bottom:8px;font-size:1.4rem;border-bottom:3px solid var(--phonic-line);padding-bottom:6px}.level3-practice-card p{margin-top:0;margin-bottom:12px;font-weight:800;font-size:1.1rem}.level3-speak{width:100%;min-height:64px;font-size:1.25rem;margin-bottom:12px}.speech-result{display:grid;gap:4px;text-align:center;min-height:52px;margin-bottom:12px}.speech-result span{color:var(--phonic-muted);font-weight:800}.speech-result strong{font-size:1.15rem;color:var(--phonic-line);font-weight:1000}.progress-strip{display:grid;gap:8px}.progress-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:2px solid #d8e0ea;border-radius:8px;background:#f8fafc;font-size:.95rem;font-weight:800}.progress-item span{color:var(--phonic-muted)}.progress-item strong{color:var(--phonic-line);font-weight:1000}.games-panel{border:4px solid var(--phonic-line);border-radius:8px;background:#ffffff;box-shadow:0 18px 42px rgba(23,32,51,.1);padding:16px;margin-top:16px}.game-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:16px}.game-tab{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:72px;padding:8px 12px;border:3px solid var(--phonic-line);border-radius:8px;background:#ffffff;cursor:pointer;text-align:left}.game-tab strong{font-size:.95rem;color:var(--phonic-line);font-weight:1000}.game-tab span{font-size:.78rem;color:var(--phonic-muted);font-weight:700;margin-top:2px}.game-tab.is-active{background:var(--phonic-gold)}.game-tab.is-active span,.game-tab.is-active strong{color:var(--phonic-line)}.level3-game-area{min-height:140px;display:grid;place-items:center;padding:12px;border:3px dashed var(--phonic-line);border-radius:8px;background:var(--phonic-soft);margin-bottom:12px}.status-text.level3-feedback{margin:0;min-height:24px;font-size:1.1rem;font-weight:1000;color:var(--phonic-teal);text-align:center}@media (max-width:760px){.phonic-page{padding:12px}.level3-layout{grid-template-columns:1fr}.game-tabs{grid-template-columns:repeat(2,1fr)}}