/* Landscape stage: artwork and its hotspots share one undistorted canvas. */
.room,.road-scene{height:100svh;min-height:100svh;padding:0}
.room-frame{width:100%;height:100svh;max-height:none;aspect-ratio:auto;box-shadow:none}
.room-camera{inset:auto;left:50%;top:50%;width:max(100vw,236.3077svh);height:max(42.3177vw,100svh);margin-left:min(-50vw,-118.15385svh);margin-top:min(-21.15885vw,-50svh);overflow:hidden}
.room-art{background-size:100% auto}
.notebook-hotspot{top:80%;height:16%;min-height:0}
.book-scene{height:100svh;min-height:100svh;padding:12px 24px 20px}
.book-wrap{width:min(88vw,156svh,1280px);height:min(92svh,755px);min-height:0;max-height:calc(100svh - 32px)}
.page{padding:18px 24px 12px}
.page-content{display:flex;flex-direction:column;gap:10px;align-items:center}
.illustration{flex:1;min-height:0;max-height:none;width:100%;aspect-ratio:auto;align-self:center}
.page-art{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.page-prose{font-size:clamp(17px,2.7svh,23px);line-height:1.65;letter-spacing:.02em;padding:0;flex-shrink:0}
.page-prose p+p{margin-top:.25em}
.page-number{font-size:12px;line-height:1;margin:0}
.mini-road{height:100%;width:auto;max-width:100%;aspect-ratio:1}
.enter-road{left:7%;right:7%;width:auto;top:4%;height:57%}
.road-frame{width:100%;height:100svh;max-height:none;aspect-ratio:auto;border:0;box-shadow:none}
.road-landscape{width:max(190vw,297svh);background-size:100% 100%}
.road-vehicle{width:min(56vw,106svh);bottom:3%}
.arrival-caption{left:24px;right:auto;top:68px;bottom:auto;max-width:38%;padding:12px 18px;background:#f4ebd7ed;color:#352b23;border:1px solid #a48b5a;display:flex;flex-wrap:wrap;gap:10px}
.arrival-caption>span,.arrival-caption .end-button{color:#715730}
.toolbar{padding:8px max(12px,env(safe-area-inset-right));background:linear-gradient(#08070650,transparent)}
.toolbar button{min-height:40px;padding:7px 10px;font-size:12px}
.tap-guide{position:absolute;left:50%;top:50%;width:42px;height:49px;pointer-events:none;z-index:9;opacity:0;transform-origin:20% 10%;animation:tap-demo 4.8s .8s both;filter:drop-shadow(0 2px 3px #30200b66)}
.tap-guide svg{display:block;width:100%;height:100%}
@keyframes tap-demo{0%{opacity:0;transform:translate(7px,10px) rotate(-12deg)}12%,35%,58%,80%{opacity:1;transform:translate(0,0) rotate(-12deg) scale(1)}23%,68%{opacity:1;transform:translate(-4px,-6px) rotate(-12deg) scale(.88)}100%{opacity:0;transform:translate(7px,10px) rotate(-12deg)}}
.wheel-hotspot{animation:none;background:none}
.wheel-hotspot .wheel-ring{position:absolute;inset:9%;border:2px solid #ffe29b;border-radius:50%;box-shadow:0 0 20px #ffe9a8b3;animation:breathe 2.8s ease-in-out infinite}
.wheel-hotspot .tap-guide{inset:auto;left:50%;top:40%;border:0;border-radius:0;box-shadow:none}
.turn-page{animation:none}.turn-page>.tap-guide{top:66%;left:0}
.write-page:disabled .tap-guide,.enter-road:disabled .tap-guide,.wheel-hotspot:disabled .tap-guide{visibility:hidden;animation-play-state:paused}
.orientation-paused *{animation-play-state:paused!important}
#rotate-screen{display:none;position:fixed;inset:0;z-index:200;background:radial-gradient(ellipse,#342719,#0d0b08);color:#eadbc0;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:32px}
#rotate-screen>div{font:80px var(--serif);color:#bda16a;line-height:1.3}#rotate-screen p{font-size:23px;letter-spacing:.1em}#rotate-screen small{font-size:15px;color:#b7a68b;line-height:1.8}
@media(orientation:portrait) and (max-width:900px){#rotate-screen{display:flex}body{overflow:hidden}}
@media(max-height:500px) and (orientation:landscape){
 .book-scene{padding:9px 24px 17px}.book-wrap{height:calc(100svh - 26px);max-height:none;width:min(calc(100vw - 144px),172svh)}
 .page{padding:10px 17px 7px}.page-content{gap:5px}.page::after{inset:5px}.page-prose{font-size:17px;line-height:1.4;letter-spacing:0}.page-prose p+p{margin-top:.15em}.page-number{font-size:11px}
 .toolbar{padding:5px max(10px,env(safe-area-inset-right))}.toolbar-right{flex-direction:column;gap:5px}.toolbar button{font-size:11px;padding:5px 7px;min-height:36px;min-width:36px}
 .tap-guide{width:34px;height:40px}.road-vehicle{width:min(50vw,100svh);bottom:1%}
 .arrival-caption{top:58px;left:18px;max-width:32%;padding:9px 12px}.arrival-caption h1{font-size:18px}.arrival-caption .end-button{font-size:13px;min-height:36px}
}
@media(prefers-reduced-motion:reduce){.tap-guide{animation:none;display:none}}
.reduce-motion .tap-guide{display:none}
.page-number{min-height:14px;display:block}
/* One painted room and one clock: no dissolving duplicate window layer. */
.room-camera{transform-origin:7% 45%}
.room.entering .room-camera{animation:none}
.original{font-family:Georgia,'Times New Roman',serif;font-size:clamp(15px,2.05svh,19px);line-height:1.4;letter-spacing:0;color:#65513b;border-top:1px solid #a2855038;padding-top:.45em!important;margin-top:.5em!important;hyphens:auto}
.page-prose{font-size:clamp(17px,2.4svh,22px);line-height:1.5}
.driver-hotspot{position:absolute;left:42%;top:11%;width:18%;height:32%;min-width:44px;min-height:44px;z-index:6;border-radius:45%}
.driver-ring{position:absolute;inset:0;border-radius:45%;background:radial-gradient(ellipse,#ffe8a342,transparent 70%);box-shadow:0 0 16px #ffe9a888;animation:breathe 2.8s infinite}
.driver-hotspot:disabled .tap-guide{visibility:hidden;animation-play-state:paused}
.horse-leg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;will-change:transform}
/* Articulated cutouts from the approved animal, in original image coordinates. */
.leg-0{clip-path:polygon(65% 59%,70% 59%,67% 69%,69% 76%,73% 85%,68% 87%,63% 75%,61% 69%);transform-origin:66% 60%}
.leg-1{clip-path:polygon(61% 59%,68% 60%,66% 68%,62% 76%,64% 86%,59% 87%,58% 81%,59% 70%);transform-origin:64% 60%}
.leg-2{clip-path:polygon(82% 58%,86% 60%,84% 70%,84% 78%,87% 86%,81% 87%,80% 80%,80% 70%);transform-origin:83% 60%}
.leg-3{clip-path:polygon(85% 57%,89% 60%,92% 68%,94% 78%,96% 85%,92% 87%,90% 80%,89% 74%,84% 68%,82% 63%);transform-origin:86% 60%}
.carriage-body{clip-path:polygon(0 0,100% 0,100% 57%,91% 59%,86% 60%,81% 63%,71% 63%,65% 59%,61% 61%,57% 78%,57% 100%,0 100%)}
@media(max-height:500px) and (orientation:landscape){
 .page-prose{font-size:16px;line-height:1.4}.original{font-size:14px;line-height:1.25;padding-top:.3em!important;margin-top:.35em!important}
 .page-content{gap:5px}.illustration{min-height:60px}.page-prose{flex-shrink:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b7a17c transparent}
 .enter-road{height:35%}
}
.intro-copy{width:min(1040px,100%);display:grid;grid-template-columns:1fr 1fr;gap:36px;font-size:clamp(18px,2vw,23px);line-height:1.9}
.intro-original{font:clamp(17px,1.7vw,21px)/1.65 Georgia,'Times New Roman',serif;color:#bfb5a3;margin:0!important}
@media(max-height:500px) and (orientation:landscape){.intro-copy{font-size:17px;line-height:1.7;gap:25px}.intro-original{font-size:16px;line-height:1.5}.intro{padding-left:70px;padding-right:70px}}
.illustration{position:relative}
.illustration .enter-road{inset:0;width:100%;height:100%}
@media(max-height:350px) and (orientation:landscape){.illustration{min-height:100px}.page-prose{overflow-y:auto}}
/* Reserve a quiet lower margin; Chinese captions follow art rather than the page edge. */
.book-scene:not(.preface-scene) .page-content{padding-bottom:clamp(20px,5svh,48px)}
.book-scene:not(.preface-scene) .page-number{position:absolute;bottom:14px;left:0;right:0;text-align:center}
.mini-road{height:auto;width:min(100%,52svh);aspect-ratio:1;flex-shrink:0}
@media(max-height:500px){.mini-road{width:min(100%,49svh)}}
.illustration{container-type:size}
.illustration .mini-road{width:min(100cqw,100cqh,52svh);height:min(100cqw,100cqh,52svh);max-height:none}