*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#111d20;color:#f4f7f5;font-family:"Microsoft YaHei",system-ui,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #ffe594;outline-offset:5px}[hidden]{display:none!important}.app{max-width:1600px;margin:auto;padding:14px 24px 8px}header{height:64px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center}.brand>span{color:#f3c56b;border:1px solid #a38955;font:700 25px Georgia;padding:6px;border-radius:9px}.brand small{font-size:11px;color:#bdc6bd;letter-spacing:3px}h1{font-size:23px;margin:0}nav{display:flex;gap:8px}nav button,.underbar{font-size:12px}nav button{border:1px solid #536361;border-radius:6px;background:#21312f;color:#eaf0eb;padding:8px 12px}#stage{position:relative;aspect-ratio:1672/941;width:100%;max-height:calc(100vh - 118px);margin:auto;overflow:hidden;border-radius:12px;background:#2d3836;isolation:isolate;container-type:inline-size}#world{position:absolute;inset:0;transition:transform 1.1s ease,filter .7s;transform-origin:50% 80%}#background{width:100%;height:100%;position:absolute;inset:0;object-fit:fill;user-select:none}#environment,#objects,#annotations{position:absolute;inset:0;pointer-events:none}#objects>*{pointer-events:auto}#annotations>*{pointer-events:auto}.top-caption{position:absolute;left:2.2%;top:2.8%;max-width:46%;padding:12px 17px;border-left:3px solid #ebc375;border-radius:3px 10px 10px 3px;background:rgba(15,33,34,.88);box-shadow:0 8px 24px #0002;pointer-events:none}#stepTag{font-size:11px;color:#efd19a;letter-spacing:2px}h2{font-size:clamp(16px,1.7cqw,27px);line-height:1.45;margin:5px 0}#hint{font-size:clamp(11px,1.05cqw,16px);line-height:1.5;margin:0;color:#d7e0da}.scene-footer{height:37px;position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#102626dc);display:flex;align-items:center;justify-content:space-between;padding:8px 18px;font-size:11px;pointer-events:none}.underbar{display:flex;justify-content:space-between;color:#b8c5bb;margin-top:7px}#scenarioName{color:#e9c680}.hotspot{position:absolute;background:transparent;border:2px solid transparent;border-radius:8px;padding:0;color:white;transition:box-shadow .2s,border .2s}.hotspot:hover,.hotspot:focus-visible{border-color:#f8d58a;box-shadow:inset 0 0 28px #ffe5a726}.tag{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);background:rgba(19,43,42,.9);border:1px solid #ecebd48c;border-radius:30px;padding:6px 13px;font-size:clamp(11px,1.05cqw,17px);white-space:nowrap;color:white;box-shadow:0 5px 15px #0003}.tag:before{content:"";display:inline-block;width:6px;height:6px;background:#f2d18b;border-radius:50%;margin-right:7px}.door-leaf{position:absolute;left:40.7%;top:2.6%;width:26.1%;height:83.1%;background-image:none;background-size:383.14% 120.34%;background-position:55.07% 15.38%;transform-origin:100% 50%;transition:transform 1.15s ease;backface-visibility:hidden;transform:perspective(1100px) rotateY(0deg)}.door-leaf.opened{transform:perspective(1100px) rotateY(-73deg)}.behind-door{position:absolute;left:40.7%;top:2.6%;width:26.1%;height:83.1%;background:none 40% 50%/cover}.handle{position:absolute;left:0%;top:48%;width:17%;height:17%;border:0;background:transparent;touch-action:none;cursor:grab;padding:0}.handle:after{content:"";position:absolute;inset:19% 6%;border-radius:50%;border:2px solid #ffe7a691;animation:ring 2s infinite}.handle img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.handle.rotatable img{transition:transform .1s}.handle.hot{filter:drop-shadow(0 0 9px #fb4f1f)}@keyframes ring{50%{box-shadow:0 0 0 9px #ffd97815}}.handle-caption{position:absolute;left:35%;top:57%;font-size:clamp(11px,1cqw,16px);background:#203d39e6;border:1px solid #ecd39a;border-radius:20px;padding:6px 12px;pointer-events:none}.temperature{position:absolute;left:47%;top:44%;display:flex;align-items:center;gap:9px;padding:8px 13px;background:#edf7f2f0;color:#233e35;border-radius:9px;font-size:14px}.temperature.hot{background:#fff1df;color:#9b330f}.temperature svg{width:29px;height:36px}.temperature b{display:block}.temperature small{font-size:11px}.drop-zone{position:absolute;left:40.7%;top:84.6%;width:26.1%;height:3%;border:2px dashed #e7cf83;border-radius:5px;box-shadow:0 0 15px #ffdc9177}.drop-zone.ready{background:#76e5ac77;border-color:#95ffb6}.towel{position:absolute;left:14%;top:53%;width:12%;height:10%;padding:0;border:0;background:transparent;touch-action:none;cursor:grab;z-index:3}.towel img{width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;filter:drop-shadow(0 4px 3px #0005)}.towel.placed{left:40.7%;top:83.2%;width:26.1%;height:5%}.prop-label{position:absolute;font-size:12px;border-radius:20px;background:#1a3532e6;padding:5px 10px;pointer-events:none}.smoke-strip{position:absolute;left:40.7%;top:82%;width:26%;height:4%;background:radial-gradient(ellipse,#555b56aa,transparent 70%);animation:drift 3s infinite}.smoke-strip.sealed{opacity:.12}#smoke{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s;background:radial-gradient(ellipse at 25% 5%,#454c4bde,transparent 70%),radial-gradient(ellipse at 80% 0%,#3a4141cc,transparent 55%)}#smoke.light{opacity:.22;background-size:100% 45%;background-repeat:no-repeat}#smoke.heavy{opacity:.93}#dangerFlash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 35%,#bf3d1499);transition:opacity .3s}#stage.danger #dangerFlash{opacity:1}#stage.low #world{transform:scale(1.12) translateY(-5%)}#stage.advance #world{transform:scale(1.25) translateY(-3%)}#actions{position:absolute;left:0;right:0;bottom:9%;display:flex;gap:12px;justify-content:center;pointer-events:none}#actions button{pointer-events:auto;padding:10px 16px;border:1px solid #a9b9a8;border-radius:8px;background:#1c3a36ed;color:#fff;font-size:clamp(12px,1.05cqw,17px);display:flex;align-items:center;gap:9px;max-width:42%}#actions svg{height:30px;width:30px}.posture-note{position:absolute;left:3%;top:55%;padding:9px 12px;color:white;background:#203d39dc;font-size:13px;border-radius:7px}@keyframes drift{50%{transform:translateY(-15px) scaleY(2)}}#message{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:min(650px,72%);background:#132e2bf5;padding:17px 23px;border-radius:12px;border:1px solid #a4b7a2;box-shadow:0 20px 70px #0005;z-index:20}#message.error{border-color:#f0a16a;background:#351f1bef}#messageTag{font-size:11px;letter-spacing:2px;color:#f0ce8d}#message h3{font-size:20px;margin:7px 0}#message p{font-size:14px;line-height:1.7;margin:7px 0 15px}#message button,#scenario button,#completion button{background:#f0d096;color:#25352d;border:0;border-radius:6px;padding:9px 17px;font-size:14px}#scenario,#completion{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:min(580px,85%);padding:30px;background:#132f2cf7;border:1px solid #b1bdab;border-radius:14px;box-shadow:0 0 0 2000px #0005;text-align:center}#scenario h3{margin:0;font-size:23px}#scenario p,#completion p{color:#d8e0d6;line-height:1.8;font-size:15px}#scenario button{display:block;width:100%;margin:10px 0}#completion button{margin:5px}#completion .complete-mark{font-size:40px;color:#f5d899}#stage:fullscreen{max-height:none;width:100vw;height:100vh;border-radius:0}#stage:fullscreen .scene-footer{font-size:14px}@media(max-width:850px){.app{padding:8px}.brand>span{font-size:19px}h1{font-size:18px}header{height:55px}nav button{padding:6px;font-size:11px}.top-caption{padding:8px 10px;max-width:54%}#hint{font-size:10px}#stepTag{font-size:9px}.scene-footer{font-size:9px}.scene-footer>span:last-child{display:none}#message{padding:10px 14px}#message h3{font-size:17px}#message p{font-size:12px}.underbar{font-size:10px}.temperature{font-size:11px;padding:6px}.temperature small{display:none}}
.app{width:min(100%,calc((100vh - 118px)*1.7768 + 48px))}#stage{max-height:none}.behind-door{background-image:none}
.drop-zone{background:rgba(239,210,142,.16)}.scene-footer{font-size:clamp(10px,.85cqw,14px)}

/* Scene assets and effects stay independent of the background plate. */
#world{z-index:0}
#smoke{z-index:2}#dangerFlash{z-index:3}
.top-caption,#annotations{z-index:5}#actions{z-index:6}
#effects{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
#effects *{pointer-events:none}
.door-leaf{background:none;overflow:hidden}
.door-art{position:absolute;left:-13.86%;top:-.68%;width:127.45%;height:103.01%;object-fit:fill;pointer-events:none;user-select:none}
.effect{position:absolute;pointer-events:none}
.effect img{width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.flames{transform-origin:50% 100%;animation:fire-flicker 1.5s ease-in-out infinite alternate}
.smoke-billow{animation:smoke-roll 6s ease-in-out infinite alternate;transform-origin:50% 20%}
.door-top-smoke{opacity:.75}
.gap-smoke{opacity:.68;transition:opacity 1.3s ease}
#effects.sealed .gap-smoke{opacity:.07}
.upper-smoke{opacity:.88}
.ceiling-smoke{opacity:.92}
.door-heat{position:absolute;left:40.7%;top:2.6%;width:26.1%;height:83.1%;border:2px solid #ff8b35;box-shadow:0 0 12px #ff542a,inset 0 0 9px #ff6f25;opacity:.8;animation:heat-pulse 2.4s ease-in-out infinite alternate}
#effects.sealed .door-heat{border-bottom-color:transparent}
.handle img{position:relative;z-index:1}
@keyframes fire-flicker{0%{transform:scaleX(.96) scaleY(.94);filter:brightness(.94)}100%{transform:scaleX(1.03) scaleY(1.06);filter:brightness(1.12)}}
@keyframes smoke-roll{0%{transform:translateX(-1%) scale(1)}100%{transform:translateX(1.7%) translateY(-1.5%) scale(1.06)}}
@keyframes heat-pulse{to{opacity:.55}}
@media(prefers-reduced-motion:reduce){.effect,.door-heat{animation:none}}
.next-rescue{box-shadow:0 0 0 3px #f2d49644;border-color:#f2d496!important}
.rescue-status{position:absolute;right:2.3%;top:3%;padding:12px 16px;border-radius:10px;background:#152e30ed;font-size:clamp(11px,1cqw,16px);box-shadow:0 5px 20px #0003;pointer-events:none!important}
.rescue-status b{display:block;color:#f3d28b;margin-bottom:7px}
.rescue-status span{display:block;line-height:1.9;color:#d8dfdd}
.rescue-status .done{color:#a2e4bb}
#stage[data-state="rescue"] #background{filter:brightness(.72) saturate(1.08)}
.rescue-flashlight{position:absolute;left:6%;top:72%;width:14%;height:12%;border:0;background:transparent;cursor:grab;touch-action:none;padding:0;z-index:4;filter:drop-shadow(2px 6px 4px #0007)}
.rescue-flashlight img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.rescue-flashlight.at-window{left:42%;top:43%;width:16%;height:13%;transform-origin:30% 50%;cursor:pointer}
.rescue-flashlight.signalling{animation:flashlight-hand .72s ease-in-out infinite alternate}
.rescue-flashlight.signal-done{filter:drop-shadow(0 0 9px #fff3a5)}
.flashlight-beam{position:absolute;left:51%;top:31%;width:44%;height:34%;opacity:0;transform-origin:0 50%;clip-path:polygon(0 44%,100% 0,100% 100%,0 56%);background:linear-gradient(90deg,#fffbd8f2 0%,#ffe988b8 30%,#ffd95e70 62%,transparent 100%);filter:blur(1px) drop-shadow(0 0 12px #ffe997b8);mix-blend-mode:screen;z-index:3}
.flashlight-beam.on{animation:beam-flash .42s steps(1,end) infinite,beam-sweep .72s ease-in-out infinite alternate}
.flashlight-beam.done{opacity:.24;transform:rotate(-3deg)}
.signal-zone{border:2px dashed #f5d38a6e;background:#f4d47708}
.signal-zone.ready{border-color:#ffdb87;background:#f4d47720;box-shadow:inset 0 0 30px #f5d38a55}
.signal-progress{position:absolute;left:39%;top:65%;width:25%;padding:9px 12px;border-radius:9px;background:#163936ed;color:#ffdd8e;font-size:clamp(11px,1cqw,16px);text-align:center;pointer-events:none!important}
.signal-progress>div{height:5px;border-radius:4px;background:#ffffff25;margin-top:8px;overflow:hidden}
.signal-progress i{display:block;width:0;height:100%;background:#e9cd7c}
@keyframes flashlight-hand{from{transform:rotate(-11deg)}to{transform:rotate(9deg)}}
@keyframes beam-sweep{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes beam-flash{0%,45%{opacity:.94}46%,70%{opacity:.42}71%,100%{opacity:.86}}
@media(max-width:1300px){.rescue-status{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.rescue-flashlight.signalling{animation:none;outline:2px solid #f3d28b}.flashlight-beam.on{animation:beam-flash .42s steps(1,end) infinite}}