/* WP Stage v2 — living per-level scenes for the Game Patch spec-game runner.
   Scene = layered backdrop (image layers from the art manifest when present,
   otherwise the built-in SVG kit), cast on a stage floor, progress lights.
   Decorative only: never blocks the question card. */
.wpstage{position:relative;border-radius:18px;overflow:hidden;min-height:210px;margin:10px 0 12px;
  box-shadow:inset 0 0 0 2px #ffffff88, 0 4px 14px #173f3222;background:#AEDCF2}
.wpstage .sky{position:absolute;inset:0}
.wpstage .sky-day{background:linear-gradient(180deg,#AEDCF2 0%,#D8F0E4 62%,#F4F8F1 100%)}
.wpstage .sky-dusk{background:linear-gradient(180deg,#7E6BA8 0%,#F49FB0 55%,#FFD29D 100%)}
.wpstage .sky-night{background:linear-gradient(180deg,#16324F 0%,#2C5F8A 70%,#7FB3D5 100%)}
.wpstage .sky-room{background:linear-gradient(180deg,#F7E3C0 0%,#F3D9AE 68%,#E8C48F 100%)}
.wpstage .sky-workshop{background:linear-gradient(180deg,#EFD3A7 0%,#E4BE8C 68%,#C99B62 100%)}
.wpstage .imglayer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wpstage .layer-back{animation:wpdrift 26s ease-in-out infinite alternate}
.wpstage .layer-mid{animation:wpdrift 17s ease-in-out infinite alternate-reverse}
@keyframes wpdrift{from{transform:translateX(-6px) scale(1.03)}to{transform:translateX(6px) scale(1.03)}}
.wpstage .hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:110px}
.wpstage .aurora{position:absolute;left:0;right:0;top:0;width:100%;height:120px;opacity:.8;animation:wpaurora 9s ease-in-out infinite alternate}
@keyframes wpaurora{from{transform:translateX(-10px) skewX(-2deg)}to{transform:translateX(10px) skewX(2deg)}}
.wpstage .flake{position:absolute;top:-10px;border-radius:50%;background:#fff;opacity:.95;pointer-events:none;animation-name:wpfall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes wpfall{to{transform:translateY(240px)}}
.wpstage .ground{position:absolute;left:0;right:0;bottom:0;height:36px}
.wpstage .ground-snow{background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0;opacity:.96}
.wpstage .ground-floor{background:linear-gradient(180deg,#B07B45,#96622F)}
.wpstage .ground-rug{background:linear-gradient(180deg,#C94F4F,#A83B3B)}
.wpstage .prop{position:absolute;z-index:2}
.wpstage .prop-right{right:20px;bottom:20px;width:170px}
.wpstage .prop-center{left:50%;transform:translateX(-50%);bottom:24px;width:220px}
.wpstage .prop-backleft{left:8px;bottom:44px;width:150px;opacity:.95}
.wpstage-pal{position:absolute;left:24px;bottom:28px;width:92px;animation:wpbob 3.4s ease-in-out infinite;z-index:4}
@keyframes wpbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.wpstage-pal .eye{transform-box:fill-box;transform-origin:center;transition:transform .07s}
.wpstage-pal .eye.blink{transform:scaleY(.08)}
.wpstage-char{position:absolute;left:136px;bottom:22px;width:124px;z-index:4}
.wpstage-companion{position:absolute;left:278px;bottom:22px;width:102px;z-index:4;animation:wpbob 3.9s ease-in-out infinite}
.wpstage-char.cheer{animation:wpcheer .62s ease-in-out 2}
@keyframes wpcheer{0%,100%{transform:translateY(0)}30%{transform:translateY(-16px) rotate(-3deg)}60%{transform:translateY(0)}80%{transform:translateY(-9px) rotate(3deg)}}
.wpstage-char.shake{animation:wpshake .45s ease-in-out 1}
@keyframes wpshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
 .wpstage .wpstage-name{position:absolute;left:136px;bottom:4px;width:124px;text-align:center;font-size:12px;color:#173F32;font-weight:600;z-index:4;background:#FFFDF5d9;border-radius:8px;padding:1px 4px}
.wpstage-tree .bulb,.wpstage-lights .bulb{fill:#5b7267;stroke:#ffffff99;stroke-width:.6;transition:fill .3s}
.wpstage .bulb.lit-r{fill:#E5484D;filter:drop-shadow(0 0 5px #E5484D)}
.wpstage .bulb.lit-g{fill:#F4C542;filter:drop-shadow(0 0 5px #F4C542)}
.wpstage .bulb.lit-b{fill:#43B04C;filter:drop-shadow(0 0 5px #43B04C)}
.wpstage .bulb.lit-w{fill:#FFF3C4;filter:drop-shadow(0 0 6px #FFE9A3)}
.wpstage .starshape{fill:#5b7267;transition:fill .3s}
.wpstage .starshape.lit{fill:#F4C542;filter:drop-shadow(0 0 8px #F4C542)}
.wpstage-lights{position:absolute;top:4px;left:0;right:0;width:100%;height:40px;z-index:3}
.wpstage-lights .bulb{position:absolute;width:13px;height:13px;border-radius:50%;background:#8fa89c;opacity:.55;transform:translateX(-50%);transition:background .3s,opacity .3s}
.wpstage-lights .bulb.lit-r{background:#E5484D;opacity:1;box-shadow:0 0 9px #E5484D}
.wpstage-lights .bulb.lit-g{background:#F4C542;opacity:1;box-shadow:0 0 9px #F4C542}
.wpstage-lights .bulb.lit-b{background:#43B04C;opacity:1;box-shadow:0 0 9px #43B04C}
.wpstage-lights .bulb.lit-w{background:#FFF3C4;opacity:1;box-shadow:0 0 10px #FFE9A3}
@media (max-width:560px){
  .wpstage{min-height:168px}
  .wpstage-pal{left:10px;width:70px;bottom:24px}
  .wpstage-char{left:94px;width:78px;bottom:22px}
  .wpstage-companion{display:none}
  .wpstage .wpstage-name{left:94px;width:78px}
  .wpstage .prop-right{right:6px;width:118px;bottom:16px}
  .wpstage .prop-center{width:150px}
  .wpstage .prop-backleft{display:none}
}
@media (prefers-reduced-motion: reduce){
  .wpstage-pal,.wpstage-companion,.layer-back,.layer-mid,.aurora{animation:none}
  .wpstage .flake{display:none}
  .wpstage-char.cheer,.wpstage-char.shake{animation:none}
}

/* ===== MOVE MODE (opt-in, .wpmove only — nothing above changes) ===== */
.wpmove{min-height:0;touch-action:manipulation}
.wpmove .wm-world{position:relative;height:clamp(360px,76dvh,900px);overflow:hidden;outline:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.wpmove .wm-world:focus-visible{box-shadow:inset 0 0 0 3px #3A6EA5}
.wpmove .wm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wpmove .wpstage-pal{bottom:34px}
.wpmove .wpstage-companion{left:auto;right:14px;bottom:30px}
.wpmove .wpstage-pal,.wpmove .wpstage-companion{pointer-events:none}
.wpmove .wm-player{position:absolute;left:0;bottom:0;z-index:5;will-change:transform;touch-action:none}
.wpmove .wm-flip,.wpmove .wm-pose{transform-origin:50% 100%}
.wpmove .wm-pose{position:relative}
.wpmove .wpstage-char{position:relative;left:auto;bottom:auto;width:100%}
.wpmove .wpstage-char svg{display:block;width:100%;height:auto}
.wpmove .wm-wings{position:absolute;left:-30%;width:160%;top:18%;opacity:0;transform:scale(.4);transform-origin:50% 60%;transition:opacity .15s,transform .2s;pointer-events:none;z-index:-1}
.wpmove .wm-pose.fly .wm-wings{opacity:1;transform:scale(1);animation:wmflap .38s ease-in-out infinite alternate}
@keyframes wmflap{from{transform:scale(1,1)}to{transform:scale(1,.7)}}
.wpmove .wm-pose.walk{animation:wmwalk .36s ease-in-out infinite}
@keyframes wmwalk{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.wpmove .wm-pose.jump{transform:scale(.92,1.06) translateY(-2px);transition:transform .15s}
.wpmove .wm-pose.fly{animation:wmfloat 1.1s ease-in-out infinite;transform:rotate(-4deg)}
@keyframes wmfloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(2deg)}}
.wpmove .wm-pose.land{animation:wmland .22s ease-out}
@keyframes wmland{0%{transform:scale(1.12,.86)}100%{transform:scale(1,1)}}
.wpmove .wpstage-name{position:absolute;left:50%;bottom:auto;top:-15px;width:auto;white-space:nowrap;transform:translateX(-50%);font-size:11px;z-index:6}
.wpmove .wm-shadow{position:absolute;left:0;bottom:0;height:8px;border-radius:50%;background:#173f3238;z-index:4;pointer-events:none}
.wpmove .wm-tip{position:absolute;z-index:7;transform:translateX(-50%);background:#FFFDF5;border:2px solid #C06524;color:#213F32;border-radius:12px;padding:3px 9px;font-size:12px;font-weight:700;pointer-events:none;opacity:0;transition:opacity .2s;max-width:70%;text-align:center}
.wpmove .wm-tip.show{opacity:1}
/* nodes: lanterns/stars; state shown by shape + numeral + check, never color alone */
.wm-node .wm-glow{fill:#F4C542;opacity:.18}
.wm-node .wm-body{fill:#E8A13A;stroke:#8A5A2B;stroke-width:2}
.wm-node .wm-cap{fill:#8A5A2B}
.wm-node .wm-ring{stroke:#8A5A2B;stroke-width:1.5;fill:none}
.wm-node .wm-num{font:800 12px system-ui,sans-serif;fill:#3a1f08}
.wm-node .wm-check{fill:none;stroke:#1d6b34;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.wm-node.st-open .wm-glow{opacity:.5;animation:wmpulse 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.wm-node.st-open .wm-body{fill:#FFD76A;stroke:#C06524}
@keyframes wmpulse{0%,100%{transform:scale(.85)}50%{transform:scale(1.25)}}
.wm-node.st-lit .wm-glow{opacity:.65;fill:#FFE9A3}
.wm-node.st-lit .wm-body{fill:#FFF3C4;stroke:#C06524}
.wm-node.st-lit .wm-num{opacity:0}
.wm-node.st-lit .wm-check{opacity:1}
.wm-node.st-missed .wm-body{fill:#F6C6C6;stroke:#B03A3E;stroke-dasharray:4 3}
.wm-node.st-missed .wm-glow{fill:#E5484D;opacity:.2}
.wm-node.st-idle .wm-body{fill:#D9B77A}
.wm-node.pop .wm-in{animation:wmpop .5s ease-out;transform-box:fill-box;transform-origin:center}
@keyframes wmpop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
/* touch pad: a bar BELOW the scene so it never covers a node */
.wpmove .wm-pad{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px 8px;background:#FFFDF5;border-top:2px solid #ffffffaa}
.wpmove .wm-grp{display:flex;gap:8px}
.wpmove .wm-btn{min-width:64px;min-height:56px;border-radius:16px;border:3px solid #8A5A2B;background:#F4C542;color:#3a1f08;font:800 22px/1 system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;box-shadow:0 3px 0 #8A5A2B}
.wpmove .wm-btn span{font-size:11px;letter-spacing:.04em}
.wpmove .wm-btn.on,.wpmove .wm-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8A5A2B;background:#FFD76A}
.wpmove .wm-btn:focus-visible{outline:3px solid #3A6EA5;outline-offset:2px}
.wpmove .wm-fly{background:#BFE3F2}
.wpmove .wm-hint{flex:1;text-align:center;font-size:12px;color:#173F32;font-weight:600;display:none}
@media (max-width:560px){
  .wpmove .wm-world{height:min(72dvh,560px);min-height:300px}
  .wpmove .wpstage-pal{left:6px;width:60px;bottom:30px}
  .wpmove .wpstage-companion{display:none}
  .wpmove .wm-btn{min-width:56px}
}
/* small landscape phones: the pad would crowd the scene — hide it; tap-to-move / tap-me-to-jump / hold-me-to-fly cover everything */
@media (max-height:440px) and (orientation:landscape){
  .wpmove .wm-world{height:calc(100dvh - 110px);min-height:230px}
  .wpmove .wm-grp{display:none}
  .wpmove .wm-hint{display:block}
  .wpmove .wm-pad{padding:3px 8px}
}
@media (pointer:fine) and (min-width:900px){ .wpmove .wm-hint{display:block} }
@media (prefers-reduced-motion: reduce){
  .wpmove .wm-pose.walk,.wpmove .wm-pose.fly,.wpmove .wm-pose.land,.wm-node.st-open .wm-glow,.wm-node.pop .wm-in,.wpmove .wm-pose.fly .wm-wings{animation:none}
}

/* ===== ART PASS (move mode only; the classic stage never sees these classes) ===== */
.wpmove .wa-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .35s}
.wpmove .wm-world.wm-art-on .wa-art{opacity:1}
.wpmove .wm-world.wm-art-on .sky,.wpmove .wm-world.wm-art-on .aurora,.wpmove .wm-world.wm-art-on .wm-back,.wpmove .wm-world.wm-art-on .wm-ground{display:none}
.wpmove .wa-far,.wpmove .wa-mid{position:absolute;will-change:transform}
.wpmove .wa-dr{position:absolute;inset:0;animation:wa-drift 21s ease-in-out infinite alternate}
.wpmove .wa-mid .wa-dr{animation-duration:27s}
.wpmove .wa-rev .wa-dr{animation-direction:alternate-reverse}
@keyframes wa-drift{from{transform:translate3d(-.7%,0,0)}to{transform:translate3d(.7%,0,0)}}
.wpmove .wa-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.wpmove .wa-fx{position:absolute;inset:0}
.wpmove .wa-near{position:absolute;left:0;right:0;bottom:0;z-index:3;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .35s}
.wpmove .wa-near.on{opacity:1}
.wpmove .wa-near img{position:absolute;bottom:0;max-width:none;will-change:transform;-webkit-user-drag:none}
/* twinkling light points sampled on the painting's own lit areas */
.wpmove .wa-tw{position:absolute;width:11px;height:11px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,rgba(255,236,160,.85) 38%,rgba(255,200,90,0) 72%);opacity:.2;animation:wa-twk 2.4s ease-in-out infinite}
@keyframes wa-twk{0%,100%{opacity:.12;transform:scale(.55)}50%{opacity:.95;transform:scale(1.25)}}
/* aurora shimmer: two drifting colour ribbons, low opacity, fading out toward the horizon */
.wpmove .wa-aur{position:absolute;left:0;top:0;width:100%;height:40%;overflow:hidden;opacity:.26;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(#000 20%,transparent);mask-image:linear-gradient(#000 20%,transparent);animation:wa-aurp 7s ease-in-out infinite alternate}
.wpmove .wa-aur-in{position:absolute;left:0;top:0;width:200%;height:100%;background:linear-gradient(90deg,#3dffb0 0,#7a6bff 12.5%,#45f0d0 25%,#c07bff 37.5%,#3dffb0 50%,#7a6bff 62.5%,#45f0d0 75%,#c07bff 87.5%,#3dffb0 100%);animation:wa-aurm 24s linear infinite}
.wpmove .wa-aur2{opacity:.16;top:6%;animation-duration:11s;animation-delay:-3s}
.wpmove .wa-aur2 .wa-aur-in{animation-duration:37s;animation-direction:reverse}
@keyframes wa-aurm{to{transform:translate3d(-50%,0,0)}}
@keyframes wa-aurp{from{opacity:.14}to{opacity:.3}}
/* chimney / steam puffs */
.wpmove .wa-smoke{position:absolute;width:2.4%;aspect-ratio:1;margin:-1.2% 0 0 -1.2%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,255,255,.25) 55%,rgba(255,255,255,0) 72%);opacity:0;animation:wa-puff 4.8s ease-out infinite}
@keyframes wa-puff{0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}15%{opacity:.6}100%{opacity:0;transform:translate3d(60%,-420%,0) scale(2.4)}}
/* water / ice shimmer: a moving highlight band plus faint ripple lines */
.wpmove .wa-water{position:absolute;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.wpmove .wa-water i{position:absolute;top:0;bottom:0;left:-30%;width:26%;background:linear-gradient(90deg,transparent,rgba(190,240,255,.34),transparent);transform:skewX(-24deg);animation:wa-sweep 7s ease-in-out infinite}
.wpmove .wa-water i+i{width:14%;animation-duration:11s;animation-delay:-4s;opacity:.7}
.wpmove .wa-water b{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.1) 0 1px,transparent 1px 8px);animation:wa-rip 5s linear infinite}
@keyframes wa-sweep{0%{left:-30%}100%{left:112%}}
@keyframes wa-rip{to{transform:translate3d(0,8px,0)}}
/* fireplace flicker */
.wpmove .wa-flick{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,170,60,.55),rgba(255,120,30,0) 68%);mix-blend-mode:screen;animation:wa-flk 1.7s steps(1,end) infinite}
@keyframes wa-flk{0%{opacity:.35}18%{opacity:.7}33%{opacity:.45}52%{opacity:.8}70%{opacity:.4}86%{opacity:.65}}
/* snow beyond the window (interior scenes) */
.wpmove .wa-winsnow{position:absolute;overflow:hidden}
.wpmove .wa-winsnow span{position:absolute;top:-6%;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.9;animation:wa-wsnow 4s linear infinite}
@keyframes wa-wsnow{to{transform:translate3d(14px,380%,0)}}
/* Paper Craft props + ledges sit IN the painted world */
.wpmove .wm-world.wm-art-on .wm-props>g,.wpmove .wm-world.wm-art-on .wm-ledges>g{filter:drop-shadow(0 3px 2.5px rgba(30,25,60,.42))}
/* legibility: a soft dark halo keeps the lanterns/stars readable on busy paintings (shapes and colours unchanged) */
.wpmove .wm-world.wm-art-on .wm-nodes{filter:drop-shadow(0 0 3px rgba(45,25,10,.6))}
/* quality ladder: step 1 drops the mid plane; step 2 also halves sparkle and stills the aurora */
.wpmove .wm-world.wa-low1 .wa-mid{display:none}
.wpmove .wm-world.wa-low2 .wa-odd,.wpmove .wm-world.wa-low2 .wa-aur2{display:none}
.wpmove .wm-world.wa-low2 .wa-aur-in{animation:none}
.wpmove .wm-world.wa-paused .wa-art *,.wpmove .wm-world.wa-paused .flake{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .wpmove .wa-dr,.wpmove .wa-aur,.wpmove .wa-aur-in,.wpmove .wa-smoke,.wpmove .wa-water i,.wpmove .wa-water b,.wpmove .wa-flick,.wpmove .wa-winsnow span{animation:none}
  .wpmove .wa-tw{animation:none;opacity:.7}
  .wpmove .wa-smoke,.wpmove .wa-winsnow{display:none}
}

/* 2026-11-03 owner fix: on wide monitors the movement stage becomes a centered play screen
   (art stays near native resolution instead of stretching across the whole window) */
.wpstage.wpmove{max-width:none;margin-left:0;margin-right:0}

/* ===== KEYBOARD + FULLSCREEN PASS (2026-11-04, .wpmove only) ===== */
.wpmove .wm-fsbtn{position:absolute;top:10px;right:10px;z-index:8;min-height:44px;padding:6px 12px;border-radius:12px;border:2px solid #8A5A2B;background:rgba(23,63,50,.88);color:#fff;font:800 13px/1 system-ui,sans-serif;display:flex;align-items:center;gap:6px;cursor:pointer;touch-action:manipulation}
.wpmove .wm-fsbtn:active{transform:translateY(1px)}
.wpstage.wpmove:fullscreen,.wpstage.wpmove:-webkit-full-screen{background:#0d2b1a;display:flex;flex-direction:column;width:100%;height:100%}
.wpstage.wpmove:fullscreen .wm-world,.wpstage.wpmove:-webkit-full-screen .wm-world{flex:1 1 auto;height:auto;min-height:0}
.wpstage.wpmove:fullscreen .wm-pad,.wpstage.wpmove:-webkit-full-screen .wm-pad{flex:0 0 auto}