.story-screen{height:100%;min-height:0;display:grid;grid-template-rows:46px minmax(150px,1fr) auto;background:#e8edcc;overflow:hidden}
.story-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 22px;background:#2d4435;color:#f9edce;font-size:12px;letter-spacing:1px}.story-top button{color:#fff0d0;border:1px solid #819674;border-radius:5px;min-height:32px;padding:4px 12px;background:#385440;font-size:12px;letter-spacing:0}
.story-view{min-height:0;position:relative;border-bottom:4px solid #4c6542;overflow:hidden;background:#bdd3b6}.story-view canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.story-scene-title{position:absolute;top:18px;left:50%;transform:translateX(-50%);padding:7px 15px;background:#faf0d8e8;border:1px solid #668053;border-radius:5px;font:500 22px var(--pixel);text-align:center;width:max-content;max-width:90%;pointer-events:none}
.story-dialogue{display:grid;grid-template-columns:100px minmax(0,1fr);gap:18px;padding:20px clamp(20px,7vw,100px);max-height:43dvh;overflow:auto;background:#fff2d1;border-top:2px solid #e7d3a6}.story-face{display:flex;align-items:center;justify-content:center;align-self:start;padding-top:2px}.story-face canvas{width:96px;height:96px;transform-origin:center bottom;animation:papa-breathe 3s ease-in-out infinite}.story-copy{min-width:0}.story-speaker{font-size:12px;font-weight:700;letter-spacing:1.3px;color:#647b45;margin-bottom:5px}.story-line{font-size:clamp(14px,1.4vw,18px);line-height:1.65;max-width:900px;min-height:3.3em}.story-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px}.story-actions .primary{margin-left:auto;min-width:120px}.story-actions .secondary{min-height:38px;padding:6px 11px;font-size:12px}.story-progress{display:flex;gap:5px;align-items:center;margin-right:8px}.story-progress span{width:9px;height:9px;border:1px solid #7c9160;border-radius:2px;background:#d6dfb4}.story-progress span.current{background:#7b984d;border-color:#506837}.story-counter{font-size:12px;color:#68794e;margin-left:6px}.story-hint{font-size:11px;color:#707e55;margin-top:6px}
.shell[data-screen=story] .audio-controls{display:none}.shell[data-screen=story] .brand{opacity:.8}.story-screen[data-paused=true] *{animation-play-state:paused}
.story-bubble{position:absolute;top:max(61px,24%);left:51%;width:clamp(140px,28vw,290px);max-width:45%;padding:11px 15px 13px;border:3px solid #514a30;border-radius:14px 14px 14px 3px;background:#fffbed;color:#343e2d;box-shadow:4px 4px 0 #6a694933;pointer-events:none;transform-origin:left bottom;animation-duration:.23s;animation-timing-function:ease-out}
.story-bubble::before{content:'';position:absolute;left:-13px;bottom:12px;border-style:solid;border-width:8px 13px 8px 0;border-color:transparent #514a30 transparent transparent}
.story-bubble::after{content:'';position:absolute;left:-8px;bottom:14px;border-style:solid;border-width:6px 10px 6px 0;border-color:transparent #fffbed transparent transparent}
.story-bubble small{display:block;color:#778153;font:700 9px/1.2 'Trebuchet MS',sans-serif;letter-spacing:1.3px;margin-bottom:5px}.story-bubble span{display:block;font:700 clamp(14px,1.7vw,21px)/1.3 'Trebuchet MS',sans-serif;overflow-wrap:break-word}
@keyframes bubble-pop-a{from{opacity:0;transform:translateY(5px) scale(.94)}to{opacity:1;transform:none}}@keyframes bubble-pop-b{from{opacity:0;transform:translateY(5px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:680px){.story-bubble{left:49%;max-width:47%;top:max(56px,22%);padding:9px 10px 10px;border-width:2px;border-radius:10px 10px 10px 2px;box-shadow:3px 3px 0 #6a694933}.story-bubble span{font-size:14px}.story-bubble small{font-size:8px;margin-bottom:4px}}
@media(max-height:520px) and (min-width:600px){.story-bubble{top:43px;padding:6px 10px;max-width:33%;width:230px}.story-bubble small{display:none}.story-bubble span{font-size:13px}}
.mentor-head canvas[data-mood=thoughtful]{animation:papa-think 3s ease-in-out infinite}.mentor-head canvas[data-mood=worried]{animation:papa-worry 1.8s ease-in-out infinite}.mentor-head canvas[data-mood=relieved]{animation:papa-relief 1.6s ease-out}.mentor-head canvas[data-mood=wink]{animation:papa-proud 1s ease-in-out}.mentor-head canvas[data-mood=sleepy]{animation:papa-doze 3s ease-in-out infinite}.mentor-head canvas[data-mood=laughing]{animation:papa-laugh .6s ease-in-out 3}.mentor-head canvas[data-mood=determined]{animation:papa-relief .7s ease-out}.mentor-head canvas[data-mood=touched]{animation:papa-breathe 3s ease-in-out infinite}
@keyframes papa-think{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}@keyframes papa-worry{0%,100%{transform:translateX(0)}30%{transform:translateX(-1px)}70%{transform:translateX(1px)}}@keyframes papa-relief{0%{transform:translateY(-3px)}100%{transform:translateY(0)}}@keyframes papa-doze{0%,100%{transform:rotate(0) translateY(0)}60%{transform:rotate(4deg) translateY(2px)}}@keyframes papa-laugh{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(2deg)}}
@media(max-width:680px){.story-screen{grid-template-rows:39px minmax(135px,1fr) auto}.story-top{padding:5px 12px;font-size:10px;letter-spacing:.5px}.story-top button{font-size:11px;min-height:30px}.story-scene-title{font-size:18px;top:12px;padding:6px 10px}.story-dialogue{grid-template-columns:57px minmax(0,1fr);gap:10px;padding:13px 14px;max-height:44dvh}.story-face canvas{width:57px;height:57px}.story-speaker{font-size:10px;margin-bottom:5px}.story-line{font-size:13px;line-height:1.55;min-height:4.65em}.story-actions{gap:6px;margin-top:9px}.story-progress{gap:4px;flex:1 0 100%;margin-bottom:2px}.story-progress span{width:8px;height:8px}.story-actions .primary{min-width:105px;min-height:40px}.story-actions .secondary{font-size:11px;min-height:36px;padding:6px 9px}.story-hint{font-size:10px}}
@media(max-height:520px) and (min-width:600px){.story-screen{grid-template-rows:31px minmax(100px,1fr) auto}.story-top{padding:2px 14px;font-size:10px}.story-top button{min-height:26px;font-size:11px}.story-dialogue{grid-template-columns:55px minmax(0,1fr);padding:8px 18px;gap:12px;max-height:37dvh}.story-face canvas{width:53px;height:53px}.story-line{font-size:12px;line-height:1.4;min-height:0}.story-speaker{font-size:10px;margin-bottom:3px}.story-actions{margin-top:6px;gap:6px}.story-actions .primary,.story-actions .secondary{min-height:31px;padding:4px 10px;font-size:11px}.story-progress{flex:initial;margin:0 5px 0 0}.story-hint{display:none}.story-scene-title{font-size:17px;top:8px;padding:4px 10px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Larger portraits preserve the chunky pixels and make reactions easy to read. */
.story-dialogue{grid-template-columns:148px minmax(0,1fr)}
.story-face canvas{width:144px;height:144px;image-rendering:pixelated}
.story-face canvas[data-mood=worried]{animation:papa-worry 1.8s ease-in-out infinite}
.story-face canvas[data-mood=thoughtful]{animation:papa-think 3s ease-in-out infinite}
.story-face canvas[data-mood=determined]{animation:papa-relief .8s ease-out}
.story-face canvas[data-mood=wink]{animation:papa-proud 1s ease-in-out}
.story-face canvas[data-mood=laughing]{animation:papa-laugh .6s ease-in-out 3}
.mentor-head{width:130px;flex-shrink:0}.mentor-head canvas{width:126px;height:126px;image-rendering:pixelated}
.mentor-words{min-width:0}.papa-intro canvas{width:128px;height:128px;flex-shrink:0}
.level-welcome>canvas{width:120px;height:120px}
.level-method{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:1250px;margin:0 auto 18px;font-size:13px}.level-method>span{color:#63764a;font-size:12px}
@media(max-width:1000px){.mentor-head{width:102px}.mentor-head canvas{width:98px;height:98px}.game-body{grid-template-columns:minmax(270px,1fr) minmax(320px,1.3fr)}}
@media(max-width:680px){.story-dialogue{grid-template-columns:84px minmax(0,1fr);padding:12px;gap:10px;max-height:48dvh}.story-face canvas{width:84px;height:84px}.story-line{font-size:13px}.story-top{font-size:9px;gap:6px}.story-top>span{max-width:65%}.mentor-head{width:82px}.mentor-head canvas{width:80px;height:80px}.mentor{padding:6px 12px}.game-body{max-height:49dvh}.level-welcome>canvas{width:82px;height:82px}.level-method{gap:8px;margin-bottom:14px;font-size:12px}.level-method>span{flex-basis:100%;font-size:11px}.papa-intro canvas{width:96px;height:96px}}
@media(max-height:520px) and (min-width:600px){.story-dialogue{grid-template-columns:78px minmax(0,1fr);max-height:42dvh;padding:7px 16px}.story-face canvas{width:76px;height:76px}.mentor-head{width:72px}.mentor-head canvas{width:70px;height:70px}.game-body{grid-template-columns:minmax(230px,1fr) minmax(330px,1.5fr);max-height:41dvh}}

.story-dialogue{border-top:4px solid #456143;box-shadow:inset 0 3px 0 #fff9e3}
.story-face{background:#e4e9be;border:2px solid #8a9c69;border-radius:8px;padding:8px;box-shadow:3px 3px 0 #cfcea3}
.story-line{min-height:4.95em;white-space:pre-wrap}.story-speaker{color:#3b623c;font-size:13px}
.story-time-label{display:inline-block;background:#36533e;color:#fff3cc;font:700 10px/1.4 'Trebuchet MS',sans-serif;letter-spacing:.6px;padding:4px 8px;border-radius:3px;margin:0 0 6px}
.story-scene-meter{height:3px;background:#e2dbb7;max-width:900px;margin-top:9px;overflow:hidden}.story-scene-meter span{display:block;height:100%;width:0;background:#759653}
.story-top{font-weight:700}.story-scene-title{box-shadow:3px 3px 0 #5e73412b}
.community-garden{max-width:1250px;margin:0 auto 26px;border:3px solid #687e4e;background:#eaf0cf;border-radius:8px;overflow:hidden;box-shadow:4px 5px 0 #b9c797}
.garden-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 15px;background:#435f43;color:#fff2d0;font-size:12px}.garden-heading>span{font-size:10px;font-weight:700;letter-spacing:1px}.garden-heading>strong{font-size:12px}
.community-garden canvas{display:block;width:100%;aspect-ratio:5/1;image-rendering:pixelated}.community-garden>p{padding:7px 13px;font-size:11px;line-height:1.4;color:#5d7147;border-top:1px solid #afc18c}
.checkpoint-toast{position:absolute;top:12px;right:12px;border:1px solid #79986b;border-radius:5px;padding:6px 9px;color:#2e4e34;background:#f3f4d9eb;font:700 11px/1.3 'Trebuchet MS',sans-serif;pointer-events:none}
.cinema-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.cinema-card{overflow:hidden;border:2px solid #809165;border-radius:8px;background:#f0edcf;box-shadow:3px 4px 0 #cbd1ad}.cinema-card>canvas{display:block;width:100%;aspect-ratio:2/1;image-rendering:pixelated;border-bottom:2px solid #809165}.cinema-copy{padding:12px}.cinema-copy .eyebrow{font-size:10px}.cinema-copy h3{font:700 16px/1.35 'Trebuchet MS',sans-serif;margin:7px 0;min-height:2.7em}.cinema-copy p{font-size:12px;color:#587046;margin:0 0 10px}.cinema-buttons{display:flex;gap:7px;flex-wrap:wrap}.cinema-buttons button{flex:1;min-height:40px;font-size:12px}.cinema-copy small{display:block;font-size:11px;line-height:1.4;color:#60704c;margin-top:10px}.cinema-buttons button:disabled{opacity:.48;cursor:not-allowed}.cinema-locked{box-shadow:none}.growth-scene canvas{height:auto;aspect-ratio:2/1}.growth-actions{gap:8px}.growth-actions .primary{flex:1}.growth-actions .secondary{font-size:12px}
@media(max-width:480px){.cinema-grid{grid-template-columns:1fr}.cinema-copy h3{min-height:0}.checkpoint-toast{font-size:9px;top:10px;right:8px;max-width:42%;padding:5px 7px}.growth-scene canvas{height:auto}.growth-actions .secondary{flex:1}.growth-actions .primary{flex-basis:100%}}
.lesson-card .chapter-name{display:block;min-height:2.6em;font-size:11px;line-height:1.3;font-weight:700;color:#607345;margin:0 0 5px}.lesson-card{min-height:256px}
@media(max-width:680px){.story-face{padding:3px}.story-dialogue{grid-template-columns:90px minmax(0,1fr);gap:9px;max-height:51dvh}.story-line{min-height:6.2em}.story-time-label{font-size:9px;letter-spacing:0}.story-speaker{font-size:11px}.story-actions{gap:5px}.story-actions .secondary{padding:5px 8px}.community-garden canvas{aspect-ratio:2.6/1}.garden-heading{padding:8px 10px;gap:7px}.garden-heading>strong{font-size:10px}.garden-heading>span{font-size:9px}.community-garden>p{font-size:10px}.lesson-card .chapter-name{font-size:10px}.lesson-card{min-height:245px}}
@media(max-height:520px) and (min-width:600px){.story-dialogue{grid-template-columns:82px minmax(0,1fr);max-height:45dvh}.story-face{padding:1px}.story-line{min-height:2.8em}.story-scene-meter{margin-top:4px;height:2px}.story-time-label{font-size:8px;padding:2px 6px;margin-bottom:3px}.story-actions{margin-top:4px}}