/* v18: full-room opening, with independent wool character poses and a physical sign.
   Time zero is held until all images decode; JavaScript and CSS pause together. */
#app[data-cinematic="true"] .game-topbar{position:absolute;inset:0 0 auto;z-index:20;background:linear-gradient(#102b40b5,transparent);border:0;box-shadow:none;color:#fff2da}
#app[data-cinematic="true"] .game-topbar h1{visibility:hidden}
.cinematic-service{position:absolute;inset:0;display:block!important;background:#1d3a51}
.cinematic-service>.scene{height:100%;min-height:0}
.cinematic-service>.dialogue{position:absolute;inset:auto 0 0;z-index:10;min-height:0;max-height:30%;padding:55px 4vw 24px;background:linear-gradient(transparent,#102c40db);border:0;overflow:visible;text-shadow:0 2px 7px #172c3a}
.cinematic-service>.dialogue .speaker{font-size:13px;letter-spacing:.14em}
.cinematic-service>.dialogue .line{font-size:clamp(13px,1.5vw,20px);line-height:1.7;max-width:60ch}
.cinematic-service>.dialogue .btn:disabled{background:none;color:#f7e7cc;padding:0;border:0;box-shadow:none;opacity:.8;font-size:13px}
.cinematic-service .service-scene-hud{top:80px}
.opening-day{position:absolute;top:88px;left:4vw;color:#fff2d5;font-size:17px;font-weight:700;letter-spacing:.2em;text-shadow:0 2px 8px #233440}
.opening-day span{font-weight:400;font-size:12px;letter-spacing:.14em}
.opening-camera,.opening-room-plate,.opening-owner,.owner-walk{position:absolute;inset:0;width:100%;height:100%}
.opening-room-plate{object-fit:fill;max-width:none;pointer-events:none}
.opening-camera{transform-origin:62% 47%}
.opening-owner{z-index:4;pointer-events:none;transform:translateX(-45%)}
.owner-frame{position:absolute;bottom:10.7%;width:auto;max-width:none;object-fit:contain;pointer-events:none;filter:drop-shadow(1px 2px 1px #30261d30)}
.owner-frame-1{height:73%;left:17.1%;opacity:1}
.owner-frame-2{height:71.5%;left:16.5%;opacity:0}
.owner-frame-3{height:71.2%;left:16.4%;opacity:0;transform-origin:36% 89%}
.owner-foot-shadow{position:absolute;left:25.5%;top:86.5%;width:15%;height:3.2%;border-radius:50%;background:#4733233b;filter:blur(7px)}
.opening-scene .door-sign-hanger{left:47%;top:34%;width:24%;height:18%;z-index:3}
.opening-scene .physical-door-sign{pointer-events:none}
.opening-scene:not(.opening-action):not(.opening-done) .physical-door-sign{pointer-events:auto}
.opening-action .opening-camera{animation:opening-camera-in var(--opening-duration,6.2s) ease-in-out both}
.opening-action .opening-owner{animation:owner-to-door var(--opening-duration,6.2s) cubic-bezier(.25,.1,.25,1) both}
.opening-action .owner-walk{animation:owner-lowers-paw var(--opening-duration,6.2s) linear both,owner-step-bob var(--opening-step,.42s) ease-in-out 6}
.opening-action .owner-frame-1{animation:owner-left-step var(--opening-step,.42s) linear 6}
.opening-action .owner-frame-2{animation:owner-right-step var(--opening-step,.42s) linear 6}
.opening-action .owner-frame-3{animation:owner-reaches-sign var(--opening-duration,6.2s) ease-in-out both}
.opening-action .physical-door-sign{animation:opening-turn-sign var(--opening-duration,6.2s) ease-in-out both}
.opening-scene .opening-motion{animation-play-state:paused}
.opening-ready .opening-motion{animation-play-state:running}
#app[data-paused="true"] .opening-motion{animation-play-state:paused}
.opening-done .opening-camera{transform:scale(1.035)}
.opening-done .opening-owner{transform:translateX(0)}
@keyframes opening-camera-in{0%,35%{transform:scale(1)}75%,100%{transform:scale(1.035)}}
@keyframes owner-to-door{0%{transform:translateX(-45%)}8%{transform:translateX(-40%)}36%{transform:translateX(-2%)}41%,100%{transform:translateX(0)}}
@keyframes owner-left-step{0%,40%,100%{opacity:1}50%,90%{opacity:0}}
@keyframes owner-right-step{0%,40%,100%{opacity:0}50%,90%{opacity:1}}
@keyframes owner-step-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.7%) rotate(.35deg)}}
@keyframes owner-lowers-paw{0%,41%{opacity:1}44%,88%{opacity:0}92%,100%{opacity:1}}
@keyframes owner-reaches-sign{0%,41%{opacity:0;transform:translateY(.6%) rotate(-1deg)}44%{opacity:1;transform:translateY(0) rotate(0)}53%{opacity:1;transform:translateY(-.4%) rotate(.6deg)}75%,88%{opacity:1;transform:translateY(0) rotate(0)}92%,100%{opacity:0;transform:translateY(.4%)}}
@keyframes opening-turn-sign{0%,45%{transform:rotateY(0) rotate(-3deg)}51%{transform:translateY(-5%) rotateY(15deg) rotate(1deg)}64%{transform:translateY(-2%) rotateY(169deg) rotate(-1deg)}70%{transform:rotateY(186deg) rotate(-4deg)}78%,100%{transform:rotateY(180deg) rotate(-3deg)}}
@media(max-width:650px) and (orientation:portrait){.cinematic-service>.dialogue{padding:38px 22px 24px;max-height:27%;grid-template-columns:1fr}.cinematic-service>.dialogue>.actions{margin-top:3px}.cinematic-service>.dialogue .line{font-size:15px}.opening-day{left:22px;top:85px;font-size:15px}.opening-scene .sign-face b{font-size:4cqw}.opening-scene .sign-face small{font-size:1.4cqw}}
@media(max-height:580px) and (orientation:landscape){.opening-day{top:58px;font-size:13px}.cinematic-service .service-scene-hud{top:59px}.cinematic-service>.dialogue{padding:28px 24px 13px;max-height:28%}.cinematic-service>.dialogue .line{font-size:13px}.cinematic-service>.dialogue .speaker{font-size:11px}.cinematic-service>.dialogue .btn{font-size:12px;padding:8px 13px}}
@media(prefers-reduced-motion:reduce){.opening-action .opening-camera,.opening-action .opening-owner,.opening-action .owner-walk,.opening-action .owner-frame-1,.opening-action .owner-frame-2,.opening-action .owner-frame-3{animation:none}.opening-action .opening-owner{transform:none}.opening-action .owner-frame-1,.opening-action .owner-frame-2{opacity:0}.opening-action .owner-frame-3{opacity:1}.opening-action .physical-door-sign{animation:opening-turn-sign var(--opening-duration,6.2s) steps(1,end) both}}