/* Keep all artwork in one coordinate system; crop the frame, never resize its axes independently. */
.stage{overflow:hidden;height:auto;aspect-ratio:15/7;min-height:0;max-height:none}
.scene-frame{position:absolute;width:100%;aspect-ratio:15/7;pointer-events:none}
.scene-frame .village,.scene-frame .family{pointer-events:auto}
body .stage .scene-frame .village{inset:0;width:100%;height:100%}
body .stage .scene-frame .family{left:-1.5%;bottom:1.7%;width:38%;height:91%}
.scene-frame .village>svg{width:100%;height:100%}
.stage .scene-frame .landscape{background-size:100% 100%;background-position:center}
@media(orientation:portrait){body .stage{height:440px;min-height:0;max-height:none;aspect-ratio:auto}.stage .scene-label{display:none}body.scene-only .stage{height:calc(100dvh - 140px)}}
@media(orientation:landscape) and (max-height:600px) and (min-width:600px){body .stage{height:auto;aspect-ratio:auto;min-height:0}.choices{overflow-y:auto;max-height:120px;flex-wrap:wrap}}
@media(orientation:landscape){body .stage{aspect-ratio:auto}.card .choices{display:flex;flex-wrap:wrap;flex-shrink:0;max-height:35vh;overflow:auto}.card .choices>.choice{flex:1 1 130px}}
/* Scroll one complete panel instead of shrinking the story inside a clipped flex item. */
@media(orientation:landscape) and (min-width:600px){
 body .play-area{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#987bb0 #e9dfcc;scrollbar-gutter:stable}
 body .play-area>.identity,body .play-area>.card{flex:0 0 auto;min-height:auto;height:auto;max-height:none;overflow:visible}
 body .play-area .card>.prompt,body .play-area .card>.result-list,body .play-area .card>.result-source,body .play-area .card>.choices{flex-shrink:0;height:auto;max-height:none;overflow:visible}
 body .play-area .card>.choices{margin-top:14px;margin-bottom:5px}
}
@media(orientation:portrait){html,body{height:auto;overflow-x:hidden;overflow-y:auto}#app{height:auto;overflow:visible}.play-area{height:auto;max-height:none;overflow:visible;flex-direction:column}.play-area .card{height:auto;max-height:none;min-height:0;overflow:visible;flex:none}.card .prompt,.card .result-list{max-height:none;overflow:visible}.card .choices{display:flex;flex-direction:column;flex-wrap:nowrap;gap:12px;height:auto;max-height:none;overflow:visible;margin-top:18px}.card .choices>.choice{flex:none;width:100%;min-height:48px;height:auto;padding:15px 12px}}
.wind .autumn-farewell{width:22px;height:25px;background:var(--leaf-color);border-radius:0;clip-path:polygon(50% 0,60% 24%,80% 12%,76% 36%,100% 34%,83% 57%,94% 71%,62% 77%,54% 100%,47% 80%,18% 83%,26% 64%,0 50%,26% 43%,15% 20%,41% 31%);animation:autumn-farewell 4.7s ease-in-out forwards}
@keyframes autumn-farewell{0%{transform:translate(-80px,40px) rotate(-35deg);opacity:0}15%,70%{opacity:.95}100%{transform:translate(100vw,-170px) rotate(530deg);opacity:0}}
.no-motion .autumn-farewell{display:none}

/* The game setting controls scenery consistently across phones and desktops. */
body:not(.no-motion) .weather-particles i{animation-name:rain!important}
body:not(.no-motion) .stage[data-weather="2"] .weather-particles i{animation-name:snowfall!important}
body:not(.no-motion) .stage[data-weather="5"] .weather-particles i{animation-name:snowstorm!important}
body:not(.no-motion) .season-layer{transition:opacity 10s ease-in-out!important}
body:not(.no-motion) .roof-snow,body:not(.no-motion) .ground-snow,body:not(.no-motion) .home-snow{transition:opacity 6s ease-in-out!important}
body:not(.no-motion) .landscape,body:not(.no-motion) .village{transition:filter 6s ease-in-out!important}

/* Complete winter paintings retain the summer buildings' placement and scale. */
.summer-building,.winter-building{transition:none;pointer-events:none}
/* The artwork itself must remain a drag target while arranging the village. */
.arranging-village .painted-site .summer-building,.arranging-village .painted-site .winter-building{pointer-events:all}
.summer-building{opacity:calc(1 - var(--snow-cover,0))}.winter-building{opacity:var(--snow-cover,0)}
.stage[data-snow-buildings="true"] .winter-building .household-home{filter:none}
.no-motion .summer-building,.no-motion .winter-building{transition:none}
@media(prefers-reduced-motion:reduce){.summer-building,.winter-building{transition:none}}

.rock-arena{position:relative;width:240px;height:220px;margin:8px auto;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;overflow:visible}.rock-circle{position:absolute;left:55px;top:45px;width:130px;height:130px;border:3px solid #a48246;border-radius:50%;background:#b9a17022;pointer-events:none}.work-rock{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:38% 48% 32% 42%;background:radial-gradient(ellipse at 28% 20%,#b8b5a6,#77786e 55%,#484f47);border:1px solid #53594d;box-shadow:inset 3px 3px 3px #e6dfbc66,2px 3px 3px #302c3144;cursor:grab;touch-action:none}.work-rock.cleared{opacity:.4;pointer-events:none}.rock-arena .practice-finish{text-align:center}

/* The household home shares the portrait coordinates, beneath rain and snow. */
body .stage .scene-frame .household-backdrop{position:absolute;left:-1.5%;bottom:1.7%;width:38%;height:91%;z-index:2;pointer-events:none;filter:drop-shadow(4px 7px 5px #12201766) saturate(.83) brightness(.93)}
.household-backdrop>svg{width:100%;height:100%;overflow:visible}
.arranging-village .household-backdrop{visibility:hidden!important}
@media(max-width:650px){body .stage .scene-frame .household-backdrop{filter:drop-shadow(3px 6px 3px #11231166) brightness(.92)}}