/* The game owns the viewport; only the level board and long dialogs scroll. */
html,body{height:100%;overflow:hidden;background:#375241}
.shell{max-width:none;width:100%;height:100%;height:100dvh;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;grid-template-rows:auto minmax(0,1fr);position:relative;background:#f3edcd}
.topbar{min-height:58px;padding:6px 22px;border:0;border-bottom:3px solid #304b38;background:#46634a;color:#fff5d7;z-index:5;box-shadow:0 3px 0 #00000014}
.game-brand{display:flex;align-items:center;gap:18px}.brand{font-size:19px;color:#f3edcd}.menu-btn{display:flex;gap:7px;align-items:center;min-height:42px;padding:6px 13px;background:#f7edcf;border:2px solid #293e2e;border-bottom-width:4px;border-radius:5px;font-weight:700;color:#344e37;font-size:16px}
.tools{gap:7px}.topbar .icon-btn{background:#f7edcf;color:#344e37;border:2px solid #293e2e;border-bottom-width:4px;border-radius:5px;min-height:42px;width:42px}.music-btn{min-height:42px;border:2px solid #293e2e;border-bottom-width:4px;border-radius:5px;color:#344e37}.music-btn[aria-pressed=true]{background:#dce8ad;color:#304629}
.audio-controls{position:absolute;right:20px;top:calc(61px + env(safe-area-inset-top));z-index:8;padding:5px 12px;border:2px solid #46634a;border-radius:5px;background:#faf0cf;box-shadow:2px 3px 0 #0002}.audio-message{position:absolute;right:20px;top:calc(110px + env(safe-area-inset-top));max-width:340px;z-index:8;background:#fff4d8;border-radius:4px;padding:10px}
.shell[data-screen=game] .audio-controls{display:none}.screen-stage{min-height:0;min-width:0;position:relative}.level-screen{height:100%;overflow-y:auto;padding:clamp(16px,3vh,36px) clamp(16px,5vw,80px) 18px;background-color:#e8edce;background-image:linear-gradient(#ffffef55 1px,transparent 1px),linear-gradient(90deg,#ffffef55 1px,transparent 1px);background-size:28px 28px}
.title-row{max-width:1250px;margin:auto;padding:0 0 20px}.title-row h1{font-size:clamp(34px,4.3vw,60px);color:#35543c;text-shadow:2px 3px 0 #fff8dc}.eyebrow{font:700 11px/1.4 'Trebuchet MS',sans-serif;letter-spacing:1.4px;margin:0 0 7px;color:#617542}.session-stars{background:#fff7dc;border:2px solid #8b9d6f;border-radius:8px;display:flex;flex-direction:column;align-items:center;padding:10px 17px;gap:3px;font:700 23px 'Trebuchet MS',sans-serif;color:#926923;box-shadow:3px 3px 0 #b7c698}.session-stars small{white-space:nowrap;color:#506443}
.level-welcome{display:flex;align-items:center;gap:24px;padding:16px 26px;margin:0 auto 26px;max-width:1250px;background:#fff5d8;border:3px solid #60784c;box-shadow:5px 5px 0 #bdc99e;border-radius:10px}.level-welcome>canvas{width:93px;height:110px;flex-shrink:0;object-fit:contain;animation:papa-breathe 3.5s ease-in-out infinite}.level-welcome h2{font:600 clamp(27px,3vw,38px)/1.1 var(--pixel);margin-bottom:8px}.level-welcome p:not(.eyebrow){line-height:1.6;font-size:15px}.level-welcome>button{margin-left:auto}
.level-heading{max-width:1250px;display:flex;align-items:center;justify-content:space-between;margin:0 auto 13px;gap:10px}.level-heading h2{font:600 28px var(--pixel)}.level-heading span{font-size:13px;color:#59694a}
.lesson-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;max-width:1250px;margin:auto;overflow:visible;padding:0 4px 6px 0}
.lesson-card{display:flex;flex-direction:column;justify-content:flex-start;gap:7px;min-width:0;min-height:232px;padding:14px 12px;background:#faf3d6;border:3px solid #758958;border-bottom-width:3px;border-radius:8px;box-shadow:4px 5px 0 #a6b78a;position:relative;text-align:center}.lesson-card:hover{background:#fff9e9;transform:translateY(-3px)}.lesson-card.selected{background:#fff8d6;border:3px solid #486837;box-shadow:4px 5px 0 #708f4f}.lesson-card canvas{width:70px;height:88px;flex:none;object-fit:contain}.lesson-card strong{font-size:17px;margin:3px 0 5px}.lesson-card small,.lesson-card .level{display:block;font-size:12px;line-height:1.5}.lesson-card .level{margin-bottom:3px}.level-number{align-self:flex-start;font:700 11px/1 'Trebuchet MS',sans-serif;letter-spacing:1px;color:#506344}.level-score{font:700 21px/1.2 'Trebuchet MS',sans-serif;color:#9d752a;letter-spacing:3px}.level-action{font-size:12px;font-weight:700;margin-top:auto;padding-top:5px;color:#536741}.lesson-card.locked{background:#e0e4cc;box-shadow:4px 5px 0 #b4bea0;border-color:#a0ad8b;cursor:not-allowed}.lesson-card.locked canvas{filter:grayscale(.8);opacity:.6}.lesson-card.locked:hover{transform:none}.lesson-card.locked .level-score{color:#899577}.lesson-check{right:10px;top:10px;font-size:16px;color:#486837}.level-message{max-width:1250px;margin:14px auto 0;text-align:center;font-size:14px;color:#865632;min-height:20px}
.footer-nav{margin:10px auto 0;gap:18px;align-items:center;flex-wrap:wrap}.footer-nav button{font:700 14px 'Trebuchet MS',sans-serif;padding:11px 15px}.footer-nav .primary{background:#d4dda0;border:2px solid #46634a;border-bottom-width:4px;border-radius:5px}.level-screen footer{padding-bottom:0;line-height:1.5}
.game{height:100%;min-height:0;display:grid;grid-template-rows:50px minmax(130px,1fr) auto;border:0;box-shadow:none;margin:0;background:#f9edc7}
.game-top{padding:6px 24px;min-height:0;background:#fbefce;color:#344a34;border-bottom:2px solid #758757;gap:16px}.level-hud{display:flex;align-items:center;gap:10px}.hud-level{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#496447;color:#fff6d8;border-radius:6px;font:600 21px var(--pixel)}.game-top strong{font:700 16px 'Trebuchet MS',sans-serif}.game-top small{color:#64724f;font-size:12px}.round-hud{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700}.step-track{gap:5px}.step-dot{width:20px;height:10px;border-radius:2px;background:#d8d6af}.step-dot.past{background:#87a553}.step-dot.current{background:#c48b3c}.round-stars{font-weight:700;color:#926a24;min-width:40px;text-align:right}
.canvas-wrap{height:auto;min-height:0;border-bottom:3px solid #536242;background:#a47b4e}.canvas-wrap>canvas{height:100%;width:100%}.scene-label{top:15px;left:20px;font-size:13px;padding:6px 10px;border-radius:4px}.scene-choices{bottom:14px;left:11%;right:11%;gap:16%}.scene-choice{font-size:17px;min-height:48px;border-radius:5px;background:#fff6dd}.scene-readout{bottom:14px;border-radius:5px;font-size:14px}.result-label{top:26%;border-radius:7px;padding:15px 30px;box-shadow:5px 5px 0 #0003}.result-label strong{font-size:27px}.result-label span{font-size:25px;display:block;margin-top:7px}
.game-body{display:grid;grid-template-columns:minmax(245px,.9fr) minmax(350px,1.4fr);align-items:stretch;max-height:40dvh;overflow:auto;background:#fbefce}.mentor{align-items:center;gap:13px;border:0;border-right:2px solid #dad3a8;background:#f3e8c4;padding:13px 20px}.mentor-head{width:74px}.mentor-head canvas{width:70px;height:70px}.mentor-name{font-size:12px}.mentor-words{padding:0}.speech{font-size:14px;line-height:1.55}.mentor-tip{display:none}.data-link{display:none}.work-area{padding:14px 24px;min-width:0}.work-title{margin-bottom:6px;align-items:center}.work-title h2{font-size:27px}.work-title p{font-size:12px;white-space:nowrap}.instructions{font-size:14px;line-height:1.4;margin-bottom:9px}.buttons{gap:8px}.primary,.secondary{border-radius:5px;min-height:44px;padding:9px 14px;font-size:14px}.hold-button{min-width:155px}.meter-wrap{margin-bottom:9px;max-width:none;gap:10px}.meter{height:19px;border-radius:4px}.meter-value{font-size:14px}.feedback{font-size:13px;line-height:1.4;margin-top:7px}.next{margin-left:0;min-width:175px}.medium-panel{padding:3px 0 10px}.medium-panel p{display:none}.game[data-started=false] .mentor{display:flex}.game[data-started=false] .work-title p{display:none}.game[data-started=false] .instructions{display:none}
.screen-message{position:fixed;z-index:30;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#fff4d9;border:2px solid #526945;padding:12px 18px;border-radius:8px;box-shadow:3px 4px 0 #0003;width:max-content;max-width:90%;font-size:14px;line-height:1.5;text-align:center;pointer-events:none}
dialog{border-radius:10px;box-shadow:7px 7px 0 #263b3066}dialog::backdrop{background:#203b2cbb;backdrop-filter:blur(3px)}.win-stars{font-size:38px}.round-results{display:flex;gap:7px;justify-content:center;margin:16px 0}.round-result{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#5d6b46}.round-result b{background:#e1e8bd;border:1px solid #9aa879;border-radius:4px;padding:5px;font-size:12px;color:#8b661f;min-width:37px}.result-unlock{margin:15px auto;padding:10px;background:#e5edc5;border:1px solid #9eb17b;border-radius:6px;font-size:14px;line-height:1.5}.dialog-buttons{justify-content:center}.dialog-close{min-height:40px;min-width:40px}
@media(min-width:1600px){.work-area{padding:18px 40px}.mentor{padding:18px 40px}.speech,.instructions{font-size:16px}.mentor-head{width:90px}.mentor-head canvas{width:86px;height:86px}.game-body{grid-template-columns:1fr 1.3fr}}
@media(max-width:1000px){.lesson-picker{gap:12px}.lesson-card{padding:12px 6px;min-height:223px}.lesson-card strong{font-size:15px}.level-screen{padding:20px}.game-body{grid-template-columns:minmax(210px,.85fr) minmax(330px,1.4fr)}.mentor{padding:12px}.work-area{padding:12px 16px}.mentor-head{width:59px}.mentor-head canvas{width:57px;height:57px}.speech{font-size:13px}.game-top{padding:6px 15px}}
@media(max-width:680px){.topbar{min-height:52px;padding:4px 10px}.game-brand{gap:9px}.brand{font-size:15px}.menu-btn{font-size:14px;padding:5px 9px;min-height:40px}.topbar .icon-btn{width:37px;min-height:40px}.tools{gap:5px}.music-btn{font-size:12px;min-height:40px;padding:6px 8px}.level-screen{padding:18px 15px}.title-row{gap:10px;padding-bottom:18px}.title-row .eyebrow{font-size:9px;letter-spacing:.7px}.title-row h1{font-size:36px}.session-stars{padding:9px 10px;font-size:19px}.session-stars small{font-size:10px}.level-welcome{padding:12px 15px;gap:13px;margin-bottom:23px;flex-wrap:wrap}.level-welcome>canvas{width:63px;height:80px}.level-welcome h2{font-size:28px}.level-welcome p:not(.eyebrow){font-size:12px}.level-welcome .eyebrow{font-size:9px}.level-welcome>button{margin:0 0 0 auto}.level-heading h2{font-size:25px}.level-heading span{font-size:11px}.lesson-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.lesson-card{min-height:220px;padding:12px}.lesson-card strong{font-size:16px}.lesson-card:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}.footer-nav{gap:5px}.footer-nav button{font-size:12px;padding:10px}.game{grid-template-rows:47px minmax(140px,1fr) auto}.game-top{padding:5px 11px;gap:6px;flex-wrap:nowrap}.game-top strong{font-size:14px}.game-top small{display:none}.hud-level{width:28px;height:30px;font-size:18px}.level-hud{gap:7px}.round-hud{gap:5px;flex-direction:column;font-size:10px}.step-dot{width:12px;height:6px}.step-track{gap:3px}.round-stars{font-size:13px;min-width:30px}.scene-label{top:10px;left:10px;font-size:11px}.scene-choices{left:5%;right:5%;gap:8%;bottom:10px}.scene-choice{font-size:14px;padding:7px;min-height:47px}.scene-readout{font-size:12px;bottom:10px;padding:6px 9px}.game-body{display:flex;flex-direction:column;max-height:46dvh}.mentor{padding:7px 13px;gap:10px;border-right:0;border-bottom:1px solid #d5cea8}.mentor-head{width:46px}.mentor-head canvas{width:45px;height:45px}.mentor-name{display:none}.speech{font-size:12px;line-height:1.4}.work-area{padding:10px 14px 12px}.work-title h2{font-size:24px}.work-title{flex-wrap:nowrap;gap:5px}.work-title p{font-size:10px}.instructions{font-size:13px;margin-bottom:8px}.buttons{gap:6px}.primary,.secondary{padding:8px 10px;font-size:12px;min-height:43px}.hold-button{min-width:120px}.meter-wrap{margin-bottom:8px}.meter-value{font-size:12px;min-width:61px}.meter{height:16px}.feedback{font-size:12px;margin-top:5px}.medium-panel{gap:7px;padding-bottom:8px;font-size:12px}.medium-options button{min-height:37px;padding:6px 13px;font-size:12px}.result-label{padding:11px 23px}.result-label strong{font-size:22px}.result-label span{font-size:22px}.audio-controls{top:calc(55px + env(safe-area-inset-top));right:10px}.audio-message{right:10px}.dialog-inner{padding:23px 18px}.round-results{gap:5px}.round-result b{min-width:32px;padding:5px 3px;font-size:11px}.round-result{font-size:10px}}
@media(max-width:370px){.brand{display:none}.title-row h1{font-size:30px}.title-row .eyebrow{font-size:8px}.level-welcome>canvas{width:50px;height:70px}.level-welcome h2{font-size:24px}.level-welcome{gap:10px;padding:12px 10px}.level-welcome p:not(.eyebrow){font-size:11px}.work-title h2{font-size:22px}.game-top strong{font-size:12px}.round-hud{font-size:9px}.buttons{gap:5px}.primary,.secondary{font-size:11px;padding:8px}.hold-button{min-width:109px}}
@media(max-height:520px) and (min-width:600px){.topbar{min-height:44px;padding:2px 12px}.menu-btn,.music-btn,.topbar .icon-btn{min-height:36px}.game{grid-template-rows:36px minmax(110px,1fr) auto}.game-top{padding:3px 15px}.hud-level{height:26px}.game-body{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(330px,1.6fr);max-height:37dvh}.mentor{padding:7px 12px}.mentor-head{width:42px}.mentor-head canvas{width:42px;height:42px}.mentor-name{display:none}.speech{font-size:11px;line-height:1.4}.work-area{padding:7px 13px}.work-title h2{font-size:21px}.work-title{margin-bottom:3px}.work-title p{font-size:10px}.instructions{font-size:11px;margin-bottom:5px}.primary,.secondary{font-size:12px;min-height:36px;padding:5px 10px}.meter-wrap{margin-bottom:5px}.meter{height:13px}.meter-value{font-size:11px}.feedback{font-size:11px;margin-top:4px}.scene-label{font-size:11px;top:7px}.scene-choices{bottom:7px}.scene-choice{min-height:38px;font-size:13px;padding:6px}.scene-readout{font-size:11px;bottom:7px;padding:4px 8px}.result-label{padding:7px 18px}.result-label strong{font-size:19px}.result-label span{font-size:17px;margin-top:3px}.audio-controls{top:calc(47px + env(safe-area-inset-top))}.medium-panel{padding-bottom:5px}.medium-options button{min-height:32px;padding:5px 12px}.title-row h1{font-size:36px}.level-welcome{padding:10px 22px}.level-welcome>canvas{height:70px;width:60px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.round-intro{position:absolute;top:13%;left:50%;transform:translateX(-50%);background:#fff5da;color:#35503a;border:3px solid #567244;border-radius:8px;padding:10px 22px;text-align:center;pointer-events:none;box-shadow:4px 5px 0 #0002;width:max-content;max-width:85%;animation:round-ready 1.25s both}
.round-intro small{display:block;font-size:10px;letter-spacing:1.2px;font-weight:700;margin-bottom:3px}.round-intro strong{font:600 28px/1.1 var(--pixel)}
.earned-star{display:inline-block;font-style:normal;opacity:.38;transform-origin:center;animation:star-reveal .55s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--star)*.14s)}.earned-star.filled{opacity:1}.win-stars .earned-star{padding:0 3px;animation-delay:calc(.15s + var(--star)*.18s)}
.celebration-spark{position:absolute;font-style:normal;color:#e5ad39;font-size:26px;animation:happy-spark .75s ease-out both;pointer-events:none}.spark-left{left:-25px;top:-12px}.spark-right{right:-25px;bottom:-10px;animation-delay:.12s}
.lesson-card.just-unlocked{animation:level-unlock .8s cubic-bezier(.2,.9,.3,1.2)}.lesson-card.just-unlocked .level-action{color:#86561e;background:#f5df8b;padding:5px 10px;border-radius:20px;animation:step-pulse 1.8s ease-in-out 3}
.game[data-started=false] .work-title h2{animation:page-in .4s ease-out}
@keyframes round-ready{0%{opacity:0;transform:translate(-50%,8px) scale(.75)}20%{opacity:1;transform:translate(-50%,0) scale(1.04)}32%,78%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-10px) scale(.96)}}
@keyframes star-reveal{0%{opacity:0;transform:translateY(10px) scale(.2) rotate(-18deg)}70%{opacity:1;transform:translateY(-3px) scale(1.18) rotate(7deg)}100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes happy-spark{0%{opacity:0;transform:scale(.2) rotate(-30deg)}40%{opacity:1;transform:scale(1.2) rotate(10deg)}100%{opacity:0;transform:translateY(-14px) scale(.7) rotate(40deg)}}
@keyframes level-unlock{0%{transform:scale(.9);box-shadow:0 0 0 12px #e8cc7555}55%{transform:scale(1.035)}100%{transform:scale(1)}}
@media(max-width:680px){.round-intro{padding:8px 15px}.round-intro strong{font-size:24px}}
@media(max-height:520px) and (min-width:600px){.round-intro{top:6%;padding:6px 14px}.round-intro strong{font-size:21px}.round-intro small{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}