/* Local, reusable scene shell. Legacy Explore styling is intentionally separate. */
.home-primary-art { display: block; width: 110px; height: 110px; margin: 0 auto; background: url("../assets/lesson/toy-props.png") 0 0 / 200% 200% no-repeat; }
.home-continue-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 24px; min-height: 52px; border: 0; border-radius: 20px; background: #e5eee5; color: #347c72; font: 700 20px "Avenir Next", system-ui, sans-serif; cursor: pointer; }
.home-continue-btn[hidden] { display: none; }
.home-continue-btn:focus-visible { outline: 4px solid #347c72; outline-offset: 4px; }
body.playing { background: #fffdf6; animation: none; color: #314843; }
body.playing .bg-shapes { display: none; }
body.playing #app { max-width: 1100px; padding: 0; }
#play-lesson { animation: none; }
.play-shell { height: 100svh; min-height: 540px; display: flex; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 24px max(12px, env(safe-area-inset-bottom)); font-family: "Avenir Next", Avenir, system-ui, sans-serif; }
.play-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.play-control { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 60px; height: 60px; border: 0; border-radius: 22px; color: #347c72; background: #e5eee5; box-shadow: 0 3px 0 #31484314, inset 0 2px 0 #ffffff80; cursor: pointer; flex-shrink: 0; transition: transform .15s, background .15s; }
.play-control svg { width: 30px; height: 30px; fill: currentColor; overflow: visible; }
.play-icon-accent { opacity: .3; }
.play-icon-line { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.play-control:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 0 #31484314; }
@media (hover: hover) { .play-control:hover:not(:disabled) { filter: brightness(.96); } }
.play-control:focus-visible, .play-world button:focus-visible { outline: 4px solid #347c72; outline-offset: 5px; }
.play-control:disabled { opacity: .45; cursor: default; }
.play-progress { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.play-section-progress { display: flex; gap: 6px; }
.play-progress i { width: 9px; height: 9px; border-radius: 50%; background: #deded0; }
.play-progress i.visited { background: #347c72; }
.play-word { text-align: center; font-size: clamp(36px, 5vw, 48px); line-height: 1.2; margin: 18px 0 0; font-weight: 750; color: #314843; }
.play-world { position: relative; width: min(100%, calc((100svh - 300px) * 1.7)); align-self: center; flex: 1; min-height: 340px; max-height: 650px; height: 55svh; isolation: isolate; container-type: inline-size; --girl-width: 35cqw; --girl-left: 1%; --girl-bottom: 13%; --iskra-width: 37cqw; --iskra-right: 0%; --iskra-bottom: 13%; --ball-width: 16cqw; --child-x: calc(var(--girl-left) + var(--girl-width) * .665); --child-y: calc(100% - var(--girl-bottom) - var(--girl-width) * .60); --box-x: 27%; --box-y: calc(87% - 23cqw); }
.play-arch { position: absolute; inset: 4% 6% 9%; border-radius: 48% 48% 18% 18%; background: #f8eedd; z-index: -2; }
.play-rug { position: absolute; left: 3%; right: 3%; height: 39%; bottom: 6%; border-radius: 50%; background: #dcebe1; z-index: -1; }
/* Cap the circular cue by scene height too; reserve room for its 7px halo. */
.play-pocket { position: absolute; left: var(--child-x); top: var(--child-y); height: min(14cqw, calc(28% - 14px)); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; color: #8c7139; background: #f9e5ac; box-shadow: 0 0 0 7px #fffdf655, inset 0 -4px 0 #c6a86220; pointer-events: none; transition: opacity .4s; }
.play-pocket svg { width: 58%; height: 58%; opacity: .65; }
.play-pocket .play-icon-line { stroke-width: 1.8; }
.play-shell[data-acted="true"] .play-pocket { opacity: 0; }
.play-world button { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
/* Disabled foreground props must not intercept taps on an active toy behind them. */
.play-world button:disabled { cursor: default; pointer-events: none; }
.play-art { display: block; width: 100%; height: 100%; background-size: 200% 200%; background-repeat: no-repeat; pointer-events: none; }
.play-box { width: 35%; aspect-ratio: 1; left: var(--box-x); bottom: 13%; z-index: 2; }
.play-iskra { width: var(--iskra-width); height: calc(var(--iskra-width) * .9230769); right: var(--iskra-right); bottom: var(--iskra-bottom); z-index: 1; }
.play-mascot { display: block; width: 100%; height: 100%; }
.play-mascot .mascot { width: 100%; height: 100%; animation: none; }
.play-ball { width: var(--ball-width); aspect-ratio: 1; z-index: 3; transition: left .36s ease-in-out, top .36s ease-in-out; }
.play-ball[data-place="box"], .play-shell[data-scene="box"][data-template="take"][data-phase="reach"] .play-ball { left: calc(var(--box-x) + 17.5cqw - var(--ball-width) / 2); top: var(--box-y); }
.play-ball[data-place="child"] { left: calc(var(--child-x) - var(--ball-width) / 2); top: calc(var(--child-y) - var(--ball-width) / 2); }
.play-ball[data-place="iskra"] { left: calc(100% - var(--iskra-right) - var(--iskra-width) * .84 - var(--ball-width) * .5); top: calc(100% - var(--iskra-bottom) - var(--iskra-width) * .07 - var(--ball-width) * .8); }

.play-hoof-cue { position: absolute; width: 30%; aspect-ratio: 1; left: 3%; top: 67%; border: 3px solid #ed7964; border-radius: 50%; opacity: 0; }
.play-iskra.play-cue .play-hoof-cue { opacity: 1; animation: play-pulse 1.8s ease-in-out infinite; }
.play-toy.play-cue::after { content: ""; position: absolute; width: 24px; height: 24px; border: 3px solid #347c72; border-radius: 50%; left: 46%; top: 42%; animation: play-pulse 1.8s ease-in-out infinite; pointer-events: none; }
.play-shell[data-template="touch"][data-acted="true"] .play-ball { animation: play-bounce .6s ease; }
.play-actions { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; min-height: 144px; padding-top: 12px; flex-shrink: 0; }
.play-navigation, .play-ending { display: flex; align-items: center; justify-content: center; gap: 16px; }
.play-ending { height: 60px; visibility: hidden; }
.play-shell[data-template="again"] .play-ending { visibility: visible; }
.play-actions .play-control { width: 72px; }
.play-actions .play-next, .play-actions .play-finish { background: #347c72; color: #fffdf6; }
.play-actions .play-again { width: 154px; background: #f3c76d; color: #314843; font: 700 24px "Avenir Next", system-ui, sans-serif; }
.play-shell [hidden] { display: none !important; }
.play-audio-note { text-align: center; font-size: 11px; color: #66776b; margin-top: 10px; }
@keyframes play-pulse { 0%, 100% { transform: scale(.8); opacity: .45; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes play-bounce { 40% { transform: translateY(-30px) rotate(12deg); } 75% { transform: translateY(0) rotate(-8deg); } }
.play-art-fallback .play-art { background-image: none !important; }
.play-art-fallback .play-ball .play-art[data-asset="ball"], .play-art-fallback .play-ball .play-art[data-asset="apple"] { width: 70%; height: 70%; margin: 15%; border-radius: 50%; background: conic-gradient(#ed7964 0deg 120deg,#f3c76d 120deg 240deg,#5aa99c 240deg); border: 3px solid #ba7355; }

.play-girl { position: absolute; width: var(--girl-width); height: calc(var(--girl-width) * 1.4); left: var(--girl-left); bottom: var(--girl-bottom); pointer-events: none; }
.play-girl svg { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; overflow: visible; }
.play-girl .girl-hands { z-index: 6; }
.play-girl g { transform-origin: 0 0; }
.play-girl .girl-head { transform-origin: 85px 103px; transition: transform .26s ease; }
.play-girl[data-pose="look"] .girl-head, .play-girl[data-pose="open"] .girl-head, .play-girl[data-pose="reach"] .girl-head { transform: rotate(7deg); }
.play-box .play-art svg { width: 100%; height: 100%; overflow: visible; }
.play-box-lid { transform-origin: 31px 104px; transition: transform .36s ease-in-out; }
.play-shell:not([data-template="open"]) .play-box-lid,
.play-shell[data-template="open"][data-acted="true"]:not([data-phase="reach"]) .play-box-lid { transform: rotate(-38deg); }
.play-shell[data-template="open"][data-phase="reach"] .play-ball { visibility: hidden; }
.play-pocket { z-index: 4; height: auto; width: max(52px, calc(var(--girl-width) * .40)); background: #f9e5ac99; box-shadow: 0 0 0 5px #fffdf655; }
.play-ball { z-index: 5; }
.play-box.play-cue::after { left: 36%; top: 32%; }

@media (max-width: 540px) {
  .play-shell { padding-left: 14px; padding-right: 14px; }
  .play-control { width: 52px; height: 52px; border-radius: 18px; }
  .play-word { margin-top: 30px; }
  .play-world { width: 100%; min-height: 280px; height: 54svh; --girl-width: 42cqw; --girl-left: -3%; --girl-bottom: 17%; --iskra-width: 40cqw; --iskra-right: -2%; --iskra-bottom: 17%; --ball-width: 22cqw; --box-x: 30%; --box-y: calc(83% - 27cqw); }
  .play-box { width: 39%; bottom: 17%; }
  .play-ball[data-place="box"], .play-shell[data-scene="box"][data-template="take"][data-phase="reach"] .play-ball { left: calc(var(--box-x) + 19.5cqw - var(--ball-width) / 2); }
  .play-actions .play-control { height: 60px; }
}
@media (max-width: 540px) and (max-height: 680px) {
  .play-word { margin-top: 12px; }
  .play-world { min-height: 230px; }
  .play-actions { gap: 8px; min-height: 116px; padding-top: 8px; }
  .play-ending, .play-actions .play-control { height: 50px; }
}
/* A two-row footer plus the full scene needs about 665px. Switch the entire
   composition before it overflows, keeping navigation and final choices level. */
@media (max-height: 680px) and (min-width: 541px) {
  .play-shell { padding-top: 8px; min-height: 360px; }
  .play-word { position: absolute; top: 12px; left: 40%; right: 40%; margin: 0; font-size: 30px; }
  .play-progress { visibility: hidden; }
  .play-world { width: min(100%, calc((100svh - 155px) * 1.8)); min-height: 215px; height: 55svh; flex: auto; }
  .play-actions { min-height: 58px; padding-top: 4px; position: relative; }
  .play-navigation { align-self: flex-start; }
  .play-ending { position: absolute; right: 0; bottom: 0; gap: 10px; height: 52px; }
  .play-actions .play-control { width: 64px; height: 52px; }
  .play-actions .play-again { width: 100px; font-size: 20px; }
  .play-audio-note { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .play-shell *, .play-shell *::after { animation: none !important; transition: none !important; }
}

/* Four lesson identities; character and control colors remain consistent. */
body.playing[data-play-theme="picnic"] { background: #edf5e9; }
body.playing[data-play-theme="painting"] { background: #fff0e9; }
body.playing[data-play-theme="positions"] { background: #eaf2fa; }
.play-shell[data-scene="picnic"] .play-arch { background: #dceacf; border-radius: 50% 50% 18% 18%; }
.play-shell[data-scene="picnic"] .play-rug { background: #f3dfc3; border-radius: 35%; }
.play-shell[data-scene="painting"] .play-arch { background: #f7dccf; }
.play-shell[data-scene="painting"] .play-rug { background: #efdfd4; }
.play-shell[data-scene="positions"] .play-arch { background: #d7e5f2; }
.play-shell[data-scene="positions"] .play-rug { background: #dce4ea; }
.play-shell:not([data-scene="box"]) .play-world { --iskra-width: 29cqw; --iskra-right: -1%; }
.play-shell:not([data-scene="box"]) .play-ball { --ball-width: 13cqw; min-width: 52px; min-height: 52px; }
.play-art svg, .play-world > button > svg, .basket-back svg, .basket-front svg, .play-stream svg { display: block; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.play-toy.play-cue::after, .play-iskra.play-cue .play-hoof-cue { animation-delay: 5s; }
.play-table { position: absolute; left: 30%; width: 36%; height: 17cqw; bottom: 13%; border-top: 2cqw solid #e8cbaa; border-radius: 12px 12px 4px 4px; z-index: 1; }
.play-table::before, .play-table::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2cqw; background: #d2af87; border-radius: 0 0 8px 8px; }
.play-table::before { left: 7%; } .play-table::after { right: 7%; }
.picnic-table { border-top-color: #d9bb96; }
.picnic-plate { position: absolute; left: 51%; bottom: calc(13% + 17cqw); width: 14%; height: 2cqw; border-radius: 50%; background: #fffcf0; border: 2px solid #ddc9ab; z-index: 2; }
.picnic-shrub { position: absolute; right: 9%; top: 19%; width: 20%; height: 13cqw; background: #cbdcba; border-radius: 50% 50% 35% 40%; opacity: .5; z-index: -1; }
.play-shell[data-scene="picnic"] .play-ball[data-place="tray"] { left: 51%; top: calc(87% - 29cqw); }
.play-jug { width: 14cqw; height: 16.33cqw; min-width: 56px; min-height: 65px; left: 44%; top: calc(87% - 33cqw); z-index: 4; transform-origin: 30% 55%; transition: left .32s ease, top .32s ease, transform .4s ease; }
.play-jug[data-place="pour"] { left: calc(var(--child-x) - 1cqw); top: calc(var(--child-y) - 10cqw); transform: rotate(42deg); }
.play-cup { width: 10cqw; height: 11.67cqw; min-width: 52px; min-height: 60px; left: 31%; top: calc(87% - 28cqw); z-index: 5; transition: left .3s ease, top .3s ease, transform .3s ease; }
.play-cup[data-place="mouth"] { left: calc(var(--girl-left) + var(--girl-width) * .46 - 5cqw); top: calc(100% - var(--girl-bottom) - var(--girl-width) * .99); transform: rotate(-17deg); }
.play-water { transform-origin: 60px 122px; transition: transform .65s ease; }
[data-level="empty"] .play-water { transform: scaleY(0); }
[data-level="half"] .play-water { transform: scaleY(.42); }
.play-stream { position: absolute; left: calc(var(--child-x) + 10cqw); top: calc(var(--child-y) - 1cqw); width: 5cqw; height: 7cqw; z-index: 4; pointer-events: none; }
.play-shell[data-template="drink"] .girl-head { transform: rotate(-4deg); }

.painting-table { left: 28%; width: 39%; height: 19cqw; }
.play-paper { position: absolute; left: 32%; bottom: calc(13% + 20cqw); width: 32%; height: 22cqw; border-radius: 6px; background: #fffdf6; box-shadow: 0 3px 0 #b6947133; z-index: 2; transform: rotate(-3deg); }
.play-paper svg { width: 100%; height: 100%; }
.paint-mark { animation: paint-reveal .6s ease-out; stroke-dasharray: 120; stroke-dashoffset: 0; fill: none; stroke-width: 13; stroke-linecap: round; }
.paint-pot { bottom: calc(13% + 6cqw); width: 10cqw; height: 11.67cqw; min-width: 52px; min-height: 60px; z-index: 4; }
.paint-red, [data-color="red"] { color: #dd6555; }
.paint-blue, [data-color="blue"] { color: #4b91c1; }
.paint-yellow, [data-color="yellow"] { color: #e5b533; }
[data-color="none"] .brush-paint { opacity: 0; }
.play-ball[data-prop="brush"] { color: #745947; }
.play-ball[data-prop="brush"][data-color="red"] { color: #dd6555; }
.play-ball[data-prop="brush"][data-color="blue"] { color: #4b91c1; }
.play-ball[data-prop="brush"][data-color="yellow"] { color: #e5b533; }
.play-ball[data-place="table"] { left: 45%; top: calc(87% - 33cqw); }
.play-ball[data-place="paper"] { left: 33%; top: calc(87% - 44cqw); }
.play-ball[data-place="pot"] { top: calc(87% - 27cqw); }
.play-shell[data-scene="painting"][data-template="paint"][data-phase="act"] .play-ball { animation: play-brush .7s ease-in-out; }
@keyframes play-brush { 0% { transform: translateX(-3cqw) rotate(-12deg); } 100% { transform: translateX(3cqw) rotate(8deg); } }

.play-shelf { position: absolute; left: 30%; bottom: 13%; width: 30%; height: 37cqw; z-index: 1; border-left: 1.4cqw solid #b89c7e; border-right: 1.4cqw solid #b89c7e; border-radius: 6px 6px 0 0; }
.play-shelf span { position: absolute; left: -2cqw; right: -2cqw; height: 2cqw; background: #e5c7a0; border-bottom: .5cqw solid #c4a27b; border-radius: 5px; }
.play-shelf span:first-child { bottom: 27cqw; } .play-shelf span:last-child { bottom: 12cqw; }
.play-world .place-target { width: 22%; min-width: 60px; height: 9cqw; min-height: 52px; left: 32%; z-index: 4; }
.place-target > span { display: block; width: 52px; height: 52px; margin: auto; border: 2px dashed #347c7266; border-radius: 50%; color: #347c72; font: 700 32px system-ui; background: #fffdf680; }
.place-target:disabled > span { visibility: hidden; }
.place-upper { top: calc(87% - 38cqw); } .place-lower { top: calc(87% - 23cqw); }
.play-world .place-basket, .basket-back, .basket-front { position: absolute; left: 35%; bottom: 8%; width: 21%; height: 24.5cqw; z-index: 2; }
.basket-front { z-index: 6; pointer-events: none; }
.play-world .place-basket { z-index: 7; }
.play-ball[data-place="mat"] { left: 60%; top: calc(87% - max(52px, var(--ball-width)) * .88); }
.play-ball[data-place="upper"] { left: 33%; top: calc(87% - 29cqw - max(52px, var(--ball-width)) * .88); }
.play-ball[data-place="lower"] { left: 33%; top: calc(87% - 14cqw - max(52px, var(--ball-width)) * .88); }
.play-ball[data-place="basket"] { left: 39%; top: calc(92% - 20cqw); }
.play-shell[data-scene="positions"] .play-ball { --ball-width: 12cqw; }

.play-lesson-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; max-width: 760px; margin: 24px auto; }
.play-lesson-card { border-radius: 26px; padding: 20px; background: #fffdf6; border: 2px solid #31484314; color: #314843; text-align: center; }
.play-lesson-card[data-scene="picnic"] { background: #edf5e9; }
.play-lesson-card[data-scene="painting"] { background: #fff0e9; }
.play-lesson-card[data-scene="positions"] { background: #eaf2fa; }
.play-lesson-card h3 { font: 700 22px "Avenir Next",system-ui,sans-serif; margin: 4px 0 18px; }
.play-card-art { width: 110px; height: 110px; margin: 0 auto 10px; color: #dd6555; }
.play-card-art svg { width: 100%; height: 100%; }
.play-cover-atlas { display: block; width: 100%; height: 100%; background: url('../assets/lesson/toy-props.png') 0 100% / 200% 200%; }
.play-cover-apple { background-position: 100% 100%; }
.play-card-start, .play-card-resume { min-height: 52px; padding: 12px 22px; margin: 4px; border: 0; border-radius: 16px; background: #347c72; color: #fffdf6; font: 700 18px "Avenir Next",system-ui,sans-serif; cursor: pointer; }
.play-card-resume { background: #e0e9df; color: #314843; }
.play-card-start:focus-visible, .play-card-resume:focus-visible { outline: 4px solid #ed7964; outline-offset: 3px; }
@media (max-width: 540px) {
  .play-shell:not([data-scene="box"]) .play-world { --iskra-width: 31cqw; --iskra-right: -3%; }
  .play-shell:not([data-scene="box"]) .play-ball { --ball-width: 16cqw; }
  .play-shell[data-scene="positions"] .play-ball { --ball-width: 14cqw; }
  .play-shell:not([data-scene="box"]) .play-girl { bottom: 13%; }
  .play-shell:not([data-scene="box"]) .play-world { --girl-bottom: 13%; }
  .play-cup { left: 30%; }
  .play-jug { left: 46%; }
  .play-shell[data-scene="picnic"] .play-ball[data-place="tray"] { left: 56%; }
  .paint-pot { width: 13cqw; }
  .play-lesson-grid { gap: 10px; }
  .play-lesson-card { padding: 12px 6px; border-radius: 20px; }
  .play-lesson-card h3 { font-size: 18px; min-height: 44px; margin-bottom: 8px; }
  .play-card-art { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .play-shell *, .play-shell *::after { animation: none !important; transition: none !important; }
}

@keyframes paint-reveal { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }