
:root{
  --ink:#17233b;--cream:#fff7e8;--paper:rgba(255,248,234,.94);--gold:#f3bc44;--green:#2fae61;--blue:#2068bc;--shadow:0 22px 60px rgba(5,18,28,.28)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#111}button,input{font:inherit}button{cursor:pointer}
.lw-screen{min-height:100vh;background:#111;overflow:hidden}.living-stage{--stage-img:url('../art/dino-world-approved.png');position:relative;min-height:100vh;overflow:hidden;isolation:isolate;background:#10191a}
.stage-bg{position:absolute;inset:-1.5%;background-image:var(--stage-img);background-size:cover;background-position:center;z-index:0;animation:stageBreathe 13s ease-in-out infinite alternate;filter:saturate(1.06) contrast(1.03)}
.child-stage .stage-bg{background-position:center center}.teacher-stage .stage-bg{background-position:center center}
.soft-light{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(8,14,10,.18),rgba(8,14,10,.02) 45%,rgba(8,14,10,.13)),radial-gradient(circle at 43% 46%,rgba(255,232,150,.13),transparent 25%);box-shadow:inset 0 -95px 90px rgba(0,0,0,.20)}
.living-stage:after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;box-shadow:inset 0 0 55px rgba(0,0,0,.10)}
@keyframes stageBreathe{from{transform:scale(1.005) translate3d(0,0,0)}to{transform:scale(1.025) translate3d(-.35%,.15%,0)}}

/* CHILD VIEW */
.kid-topbar{position:absolute;left:14px;right:14px;top:10px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:14px;pointer-events:none}
.kid-brand,.audio-pill{pointer-events:auto;background:rgba(255,251,241,.92);border:1px solid rgba(255,255,255,.7);border-radius:999px;box-shadow:0 9px 28px rgba(15,28,36,.18);backdrop-filter:blur(12px)}
.kid-brand{display:flex;align-items:center;gap:8px;padding:7px 13px 7px 7px}.kid-brand img{height:32px;width:auto;object-fit:contain}.kid-brand strong{font-family:Georgia,serif;font-size:17px}.audio-pill{border:0;padding:10px 13px;font-weight:900;color:#1f3a54}
.kid-mission{position:absolute;left:18px;bottom:18px;z-index:10;width:min(520px,calc(100vw - 36px));background:var(--paper);border:1px solid rgba(255,255,255,.86);border-radius:24px;padding:15px 17px 16px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.kicker{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:950;color:#927245;margin-bottom:5px}.kid-mission h1,.preview-card h1{font:800 clamp(28px,4vw,48px)/.93 Georgia,serif;margin:0 0 8px;color:#17233b}.kid-mission p,.preview-card p{font-size:14px;margin:0 0 11px;color:#334056}
.mission-stars{display:flex;gap:7px;margin:10px 0 12px}.mission-stars span{width:39px;height:39px;border-radius:14px;background:#fff;border:2px solid #dac7a1;display:grid;place-items:center;color:#cbbba1;font-size:22px;transition:.22s}.mission-stars span.on{background:#fff3bd;border-color:#f1c350;color:var(--gold);transform:translateY(-2px);filter:drop-shadow(0 7px 9px rgba(169,126,33,.24))}
.egg-tray,.word-tray{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.egg{width:58px;height:74px;border:5px solid rgba(255,255,255,.85);border-radius:50% 50% 45% 45%/60% 60% 40% 40%;box-shadow:0 12px 26px rgba(4,18,20,.26);transition:.18s;position:relative;overflow:hidden}.egg:before{content:"";position:absolute;left:16%;top:9%;width:33%;height:30%;background:rgba(255,255,255,.35);border-radius:50%;filter:blur(2px)}.egg:hover,.egg.focus-target{transform:translateY(-5px) scale(1.05)}.egg.focus-target{outline:6px solid rgba(255,219,82,.8);outline-offset:5px;animation:objectPulse .88s ease-in-out infinite}.red{background:#ef4040}.blue{background:#3388ee}.yellow{background:#f3c930}.green{background:#36b768}.pink{background:#ef82b7}
.word-chip{border:0;background:#fff;border-radius:999px;padding:10px 14px;font-weight:900;color:#3d4c61;box-shadow:0 8px 18px rgba(0,0,0,.08)}.kid-actions{display:flex;gap:8px;flex-wrap:wrap}.big-play,.mini-action{border:0;border-radius:16px;padding:12px 14px;font-weight:950;box-shadow:0 9px 22px rgba(12,86,41,.26)}.big-play{background:linear-gradient(#4cc66a,#26984b);color:#fff;min-width:175px}.mini-action{background:#1b314f;color:#fff}
.teacher-bubble{position:absolute;right:14px;top:72px;z-index:12;width:260px;transition:.25s}.teacher-toggle{position:absolute;right:0;top:0;z-index:2;width:50px;height:50px;border:0;border-radius:18px;background:rgba(255,250,240,.94);box-shadow:0 12px 30px rgba(8,17,26,.23);font-size:23px}.teacher-video{margin-top:56px;background:rgba(255,250,240,.94);border-radius:22px;padding:12px;box-shadow:var(--shadow);border:1px solid #fff}.teacher-video h3{margin:0 0 8px;font-family:Georgia,serif}.zoom-mini{height:130px;border-radius:16px;background:#13181d;color:#fff;display:grid;place-items:center;text-align:center}.zoom-mini small{display:block;opacity:.65;margin-top:4px}.teacher-bubble.collapsed{width:50px}.teacher-bubble.collapsed .teacher-video{display:none}

/* TEACHER */
.teacher-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:100vh;background:#10171d}.teacher-preview{min-width:0}.teacher .living-stage{min-height:100vh}.preview-card{position:absolute;left:18px;bottom:18px;z-index:10;width:min(560px,calc(100% - 36px));background:var(--paper);border:1px solid #fff;border-radius:22px;padding:14px 16px;box-shadow:var(--shadow);backdrop-filter:blur(13px)}.preview-card h1{font-size:clamp(26px,3vw,42px)}
.target-summary,.hint-block{background:rgba(255,255,255,.84);border:1px solid #eadcc1;border-radius:13px;padding:9px 10px;margin-top:7px;font-size:12px;color:#384359}.target-summary b,.hint-block strong{display:block;color:#9a6040;font-size:11px;margin-bottom:3px;text-transform:capitalize}
.director{z-index:20;background:linear-gradient(#fbf3e4,#f3e9d7);padding:14px;overflow:auto;box-shadow:-15px 0 35px rgba(0,0,0,.2)}.director header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}.eyebrow{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:950;color:#8a6b40}.director h2{font:800 22px/1.05 Georgia,serif;margin:2px 0 0}.lesson-pill{white-space:nowrap;border-radius:999px;background:#fff;border:1px solid #eadcc1;padding:8px 10px;font-size:11px;font-weight:800}.director-card{background:rgba(255,252,244,.9);border:1px solid #fff;border-radius:18px;padding:12px;margin-bottom:10px;box-shadow:0 8px 24px rgba(41,31,21,.08)}.director-card h3{margin:0 0 8px;font:800 16px Georgia,serif}.director-card p{font-size:12px;color:#334056}.microcopy{margin-top:-2px;margin-bottom:8px}
.teacher-actions,.target-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.target-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.target-buttons button{border:0;border-radius:14px;padding:11px 9px;font-weight:950;color:#17233b;background:#fff;border:2px solid #e4d4b8;box-shadow:0 6px 14px rgba(0,0,0,.08);text-transform:capitalize}.target-buttons button.active{background:#fff2b8;border-color:#f3bc44}
.teacher-actions button,.complete-btn{border:0;border-radius:13px;padding:11px 9px;font-weight:950;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.12)}.teacher-actions .ok{background:#28a957}.teacher-actions .retry{background:#eda332}.teacher-actions .hint{background:#347fd3}.teacher-actions .model{background:#845ec9}.teacher-actions .muted{background:#ece4d4;color:#26344a}.complete-btn{background:#29a357;width:100%;margin-top:4px}.compact-hints .hint-block{font-size:11px;padding:8px}

/* REACTIONS */
.reaction{position:absolute;left:50%;top:18%;transform:translate(-50%,-20px) scale(.98);z-index:30;min-width:250px;max-width:min(520px,90vw);text-align:center;pointer-events:none;background:rgba(255,252,239,.96);border:1px solid #fff;border-radius:999px;padding:13px 19px;font:900 22px/1.15 Georgia,serif;color:#17233b;box-shadow:0 18px 45px rgba(9,18,31,.23);opacity:0;transition:.22s}.reaction.show{opacity:1;transform:translate(-50%,0) scale(1)}.reaction.good{background:#fff5c1}.reaction.retry{background:#fff0df}.reaction.hint{background:#eaf5ff}.reaction.model{background:#f4ecff}.reaction.complete{background:#eaffee}
.hint-ring{position:absolute;left:43%;top:73%;width:135px;height:102px;border:7px solid rgba(255,219,72,.86);border-radius:50%;z-index:29;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.78);transition:.2s;filter:drop-shadow(0 0 13px rgba(255,216,88,.55))}.living-stage.hinting .hint-ring{opacity:1;transform:translate(-50%,-50%) scale(1);animation:hintPulse 1s ease-in-out infinite}.living-stage.rex-happy .stage-bg{animation:rexHappyBg .75s ease-out 1}.living-stage.rex-confused .stage-bg{animation:rexConfusedBg 1.1s ease-in-out 1}.living-stage.modeling .preview-card,.living-stage.modeling .kid-mission{box-shadow:0 0 0 5px rgba(255,205,92,.35),var(--shadow)}
@keyframes hintPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,217,96,.45)}50%{box-shadow:0 0 0 18px rgba(255,217,96,0)}}@keyframes objectPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}@keyframes rexHappyBg{0%,100%{transform:scale(1.012)}40%{transform:scale(1.035) translateY(-.7%)}}@keyframes rexConfusedBg{0%,100%{transform:scale(1.012)}30%{transform:scale(1.02) translateX(-.25%)}60%{transform:scale(1.02) translateX(.25%)}}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:#fff;padding:12px 18px;border-radius:999px;z-index:99;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.2)}

.home-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:28px;max-width:1100px;margin:auto}.home-card{background:#fffaf0f2;border-radius:26px;padding:24px;box-shadow:var(--shadow)}.home-card h2{font-family:Georgia,serif;font-size:32px}.big-icon{font-size:72px}.progress-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}.paw{aspect-ratio:1;border-radius:12px;background:#ede4d4;display:grid;place-items:center}.paw.done{background:#d9efd9;color:#247c3b}
@media(max-width:1100px){.teacher-shell{grid-template-columns:1fr}.director{max-height:none}}
@media(max-width:800px){.stage-bg{background-position:45% center}.kid-topbar{left:8px;right:8px;top:7px}.kid-brand strong{font-size:15px}.kid-brand img{height:30px}.audio-pill{padding:9px 11px}.kid-mission{left:8px;right:8px;bottom:8px;width:auto;border-radius:20px;padding:13px}.kid-mission h1{font-size:29px}.mission-stars span{width:36px;height:36px;border-radius:12px;font-size:20px}.egg{width:52px;height:67px}.teacher-bubble{right:8px;top:62px}.preview-card{left:8px;right:8px;bottom:8px;width:auto}}
