@charset "UTF-8";
:root { color-scheme: dark; --ink:#e5e1d2; --muted:#a1aca6; --dim:#717f7a; --gold:#c5b083; --paper:#dfd7bf; --cyan:#a3c6c1; --bg:#0a1719; --panel:#152426; --line:rgba(201,202,177,.18); --serif:'Iowan Old Style','Baskerville','Palatino Linotype','Songti SC','Noto Serif CJK SC',serif; --sans:'Avenir Next','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; --mono:'SFMono-Regular','Menlo','Consolas',monospace; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
body { background:var(--bg); color:var(--ink); font:14px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
button,a,input,textarea,summary { -webkit-tap-highlight-color:transparent; }
button,input,textarea { font:inherit; }
button { border:0; padding:0; background:none; color:inherit; cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
button,a,summary { touch-action:manipulation; }
button { transition:color .2s,background .2s,border-color .2s,opacity .2s; }
button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
button:disabled:focus { outline:none; }
a { color:inherit; text-decoration:none; }
button .icon { flex-shrink:0; }
.icon { display:inline-block; vertical-align:middle; }
.line { display:inline-block; width:32px; height:1px; background:var(--gold); opacity:.65; }
.eyebrow { display:flex; align-items:center; gap:14px; color:var(--gold); font-size:10px; font-weight:500; letter-spacing:2px; text-transform:uppercase; }
.brand-mark { width:43px; height:43px; flex-shrink:0; }
.brand { display:flex; gap:14px; align-items:center; color:var(--paper); font-size:10px; letter-spacing:2.5px; }
.brand.compact { font:16px var(--serif); letter-spacing:3px; }
.brand.compact .brand-mark { width:36px; height:36px; }
.topbar { position:absolute; z-index:4; left:0; right:0; top:0; padding:28px 3.4vw; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar::after { content:''; position:absolute; left:3.4vw; right:3.4vw; bottom:0; height:1px; background:linear-gradient(90deg,var(--line),transparent 75%); }
.header-tools { display:flex; gap:20px; align-items:center; }
.languages { display:flex; align-items:center; gap:8px; color:#b9bdb0; font-size:11px; letter-spacing:1px; }
.languages button { width:28px; min-height:36px; opacity:.6; }
.languages span { opacity:.3; }
.languages button.active { opacity:1; color:var(--paper); }
.icon-button { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; color:#bbc0b4; }
.icon-button:hover { color:var(--paper); background:rgba(216,206,173,.08); }
.stage { position:absolute; inset:0; overflow:hidden; background:radial-gradient(ellipse at 58% 35%,#1f3436,#0a1719 70%); }
.world { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; }
.scene-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; filter:brightness(.97) saturate(.84); transition:filter 1s; }
body[data-screen=game] .world::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0a1719 0%,transparent 5%,transparent 95%,#0a1719 100%); }
.scene-vignette { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(5,13,15,.4),transparent 27%,transparent 60%,rgba(5,13,15,.55) 93%),linear-gradient(90deg,rgba(5,13,15,.1),transparent 50%); }
.is-echo .scene-image { filter:sepia(.6) saturate(.85) brightness(1.15); }
.is-echo .scene-vignette { background:radial-gradient(ellipse at 60% 40%,rgba(191,133,62,.07),rgba(59,41,20,.23)),linear-gradient(180deg,rgba(13,15,12,.4),transparent 40%,rgba(5,13,15,.7)); }
.mist { pointer-events:none; position:absolute; width:135%; height:26%; bottom:0; left:-15%; opacity:.15; filter:blur(25px); border-radius:50%; background:radial-gradient(ellipse,#b8d2ca,transparent 68%); animation:mist 26s ease-in-out infinite alternate; }
.mist-two { bottom:9%; opacity:.07; left:20%; width:90%; animation-delay:-10s; animation-duration:35s; }
.dust { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.dust i { position:absolute; left:var(--x); width:2px; height:2px; background:#e8dbb5; opacity:0; border-radius:50%; animation:dust var(--duration) linear infinite; animation-delay:var(--delay); }
.echo-grain { position:absolute; inset:0; pointer-events:none; opacity:.04; background:repeating-linear-gradient(transparent 0 3px,#c6b28b 3px 4px); }
.echo-line { position:absolute; pointer-events:none; width:100%; height:1px; background:linear-gradient(90deg,transparent,#d4c194,transparent); box-shadow:0 0 40px #c9b68b; animation:scan 9s linear infinite; opacity:.3; }
@keyframes mist { to { transform:translateX(12%) scaleY(1.3); } }
@keyframes dust { 0% { top:95%; opacity:0; transform:translateX(0); } 15% {opacity:.4;} 85% {opacity:.3;} 100% {top:12%;opacity:0;transform:translateX(40px);} }
@keyframes scan { from {top:0;} to {top:100%;} }
.title-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(6,16,18,.86),rgba(6,16,18,.52) 34%,rgba(6,16,18,.06) 63%),linear-gradient(0deg,rgba(5,12,14,.6),transparent 30%); }
.title-content { position:absolute; z-index:2; top:50%; transform:translateY(-43%); left:8.4vw; max-width:650px; }
.title-content .eyebrow { margin-bottom:27px; }
.title-content h1 { font:clamp(54px,6.3vw,102px)/.99 var(--serif); letter-spacing:-3px; font-weight:400; margin:0 0 19px -4px; color:#e4dfcd; }
.title-content h1.chinese-title { font-size:clamp(62px,6.8vw,108px); line-height:1.18; letter-spacing:.14em; margin-left:-5px; }
.title-caption { font:10px var(--mono); letter-spacing:4px; color:var(--gold); margin:20px 0 26px; }
.tagline { font-size:14px; letter-spacing:1.1px; color:#bfc3b6; line-height:2.1; margin:0 0 34px; }
.primary,.secondary { display:inline-flex; gap:25px; align-items:center; justify-content:space-between; min-height:49px; padding:13px 23px; font-size:12px; font-weight:500; letter-spacing:1.2px; }
.primary { background:var(--paper); color:#142426; border:1px solid var(--paper); }
.primary:hover { background:#f0e9d6; border-color:#f0e9d6; }
.primary:active { transform:translateY(1px); }
.secondary { border:1px solid rgba(208,201,171,.4); color:var(--paper); background:rgba(17,32,33,.45); }
.secondary:hover { border-color:var(--paper); background:rgba(96,99,76,.16); }
.enter-button { min-width:240px; min-height:56px; }
.title-meta { color:#899891; letter-spacing:1.3px; font-size:9px; margin-top:15px; }
.text-button { display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.4px; min-height:40px; color:#a6b3a9; }
.text-button:hover:not(:disabled) { color:var(--paper); }
.text-button .icon { width:17px; height:17px; }
.title-restart { margin-top:8px; }
.title-footer { position:absolute; z-index:3; bottom:25px; left:3.4vw; right:3.4vw; display:flex; justify-content:space-between; gap:20px; color:#84958c; font:9px var(--mono); letter-spacing:2px; }
.title-footer b { font-weight:400; opacity:.4; margin:0 12px; }
.title-footer i { font-style:normal; margin:0 6px; color:var(--gold); }
.phase-wrap { position:absolute; left:50%; top:25px; transform:translateX(-50%); text-align:center; }
.phase-control { display:flex; gap:2px; background:rgba(11,25,27,.6); border:1px solid rgba(207,206,178,.22); padding:3px; backdrop-filter:blur(15px); }
.phase-control button { display:flex; gap:10px; align-items:center; justify-content:center; min-width:99px; height:33px; font-size:11px; color:#a2aea5; letter-spacing:1.6px; }
.phase-control button i { width:6px; height:6px; border:1px solid currentColor; border-radius:50%; }
.phase-control button.active { color:var(--paper); background:rgba(195,192,159,.12); }
.phase-control button.active i { background:var(--paper); box-shadow:0 0 8px #ccbf8855; }
.phase-control .icon { width:14px; height:14px; }
.phase-shortcut { font-size:8px; color:#9ba99e; letter-spacing:1.5px; margin-top:5px; display:block; }
html[data-phase=echo] { --cyan:#d1b98c; }
.exploration { position:absolute; inset:0; pointer-events:none; }
.room-heading { position:absolute; top:130px; left:4.5vw; max-width:34vw; }
.room-heading .eyebrow { font-size:9px; }
.room-heading .line { width:20px; }
.room-heading h1 { margin:13px 0 6px; font:30px/1.25 var(--serif); letter-spacing:4px; text-shadow:0 1px 10px #071819; }
.room-heading p { margin:0; font-size:10px; color:#a6b1a7; letter-spacing:.6px; text-shadow:0 1px 5px #071819; }
.station-clock { position:absolute; right:4vw; top:130px; text-align:right; }
.station-clock span { display:block; font-size:8px; letter-spacing:2px; color:#9fae9f; }
.station-clock strong { display:block; font:30px/1.5 var(--serif); font-variant-numeric:tabular-nums; letter-spacing:5px; color:#c9c4ad; }
.clock-rule { height:1px; background:var(--line); width:90px; margin-left:auto; position:relative; }
.clock-rule i { width:4px; height:4px; background:var(--gold); display:block; position:absolute; right:17px; top:-1px; }
.mission { position:absolute; bottom:135px; left:4.5vw; max-width:290px; }
.mission-signals { display:flex; align-items:center; gap:16px; }
.mission-signals>span:last-child { font:11px var(--mono); color:#c8c4ae; }
.mission-signals i { color:#77897f; margin:0 5px; font-style:normal; }
.signal-light { color:#7b8d81; opacity:.6; }
.signal-light.lit { color:#e0cd94; opacity:1; filter:drop-shadow(0 0 5px #d6b67b44); }
.signal-light .icon { width:20px; height:20px; }
.mission p { color:#aeb5a7; font-size:10px; line-height:1.8; margin:10px 0 0; letter-spacing:.5px; }
.side-tools { position:absolute; bottom:66px; right:3.3vw; display:flex; align-items:center; gap:8px; z-index:4; }
.journal-button { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:1px; min-height:43px; color:var(--paper); margin-right:14px; }
.journal-button b { font:9px var(--mono); color:var(--muted); border:1px solid var(--line); padding:2px 5px; }
.journal-button:hover { color:white; }
.room-nav { position:absolute; z-index:4; left:4vw; bottom:64px; display:flex; background:rgba(11,24,25,.84); backdrop-filter:blur(14px); border:1px solid rgba(202,200,162,.22); }
.room-nav button { position:relative; display:flex; align-items:center; gap:9px; padding:0 20px; min-height:54px; font-size:11px; letter-spacing:.5px; color:#94a49a; border-right:1px solid rgba(201,202,177,.1); }
.room-nav button:last-child { border-right:0; }
.room-nav button.active { color:var(--paper); background:rgba(201,190,151,.1); }
.room-nav button.active::before { content:''; position:absolute; top:-1px; left:0; right:0; height:1px; background:var(--gold); }
.room-nav button:hover { color:var(--paper); background:rgba(201,190,151,.07); }
.room-nav .icon { width:17px; height:17px; }
.nav-number { font:8px var(--mono); opacity:.6; }
.nav-dot { width:4px; height:4px; border-radius:50%; background:var(--gold); position:absolute; right:8px; top:8px; }
.game-footer { position:absolute; left:4vw; right:4vw; bottom:20px; display:flex; justify-content:space-between; color:#7f9187; font-size:8px; letter-spacing:1px; }
.hotspots { position:absolute; inset:0; }
.hotspot { position:absolute; z-index:2; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
.point-mark { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(235,220,183,.6); color:#e6dec5; background:rgba(11,28,30,.65); box-shadow:0 0 0 5px rgba(220,203,161,.035); border-radius:50%; transition:box-shadow .25s,background .25s; }
.point-mark .icon { width:17px; height:17px; }
.point-mark::before { content:''; position:absolute; width:40px; height:40px; border:1px solid #d9cea766; border-radius:50%; animation:point-pulse 4s ease-out infinite; }
.point-label { position:absolute; top:calc(100% + 4px); white-space:nowrap; color:#e5dfc9; font-size:10px; text-shadow:0 1px 3px black; letter-spacing:1px; background:rgba(8,24,26,.7); padding:4px 9px; opacity:0; transition:opacity .2s; }
.point-label small { display:none; font-size:7px; color:#a6bba9; margin-left:7px; }
.edge-right .point-label { right:0; }
.edge-left .point-label { left:0; }
.hotspot.done .point-mark { border-color:#8fa89b; color:#acc3b2; }
.hotspot.done .point-mark::before { animation:none; opacity:.25; }
.hotspot:hover .point-label small { display:inline; }
.hotspot:hover .point-mark,.hotspot:focus-visible .point-mark { background:rgba(117,107,69,.7); box-shadow:0 0 0 8px #cab68012; }
.hotspot:hover .point-label,.hotspot:focus-visible .point-label,.show-markers .point-label { opacity:1; }
.hotspots:not(.show-markers) .hotspot:not(:hover):not(:focus-visible) { opacity:.35; }
@keyframes point-pulse { 0%{transform:scale(.8);opacity:.5;} 65%,100%{transform:scale(1.5);opacity:0;} }
.toast { position:fixed; z-index:20; left:50%; bottom:26px; transform:translate(-50%,10px); opacity:0; transition:opacity .25s,transform .25s; max-width:calc(100vw - 40px); text-align:center; padding:11px 20px; border:1px solid rgba(201,202,177,.3); background:rgba(18,38,39,.98); box-shadow:0 10px 60px #0005; color:var(--paper); font-size:11px; pointer-events:none; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.modal { padding:0; border:1px solid rgba(197,183,142,.36); color:var(--ink); width:min(660px,calc(100vw - 40px)); max-width:none; max-height:calc(100svh - 70px); background:linear-gradient(140deg,#1c2c2d,#102023); box-shadow:0 40px 160px rgba(0,0,0,.55); overflow:hidden; }
.modal::backdrop { background:rgba(4,12,14,.64); backdrop-filter:blur(9px); }
.modal-scroll { overflow-y:auto; overscroll-behavior:contain; max-height:calc(100svh - 74px); padding:31px 36px 30px; scrollbar-color:#6c7561 transparent; scrollbar-width:thin; }
.modal-header { display:flex; gap:20px; justify-content:space-between; align-items:flex-start; margin-bottom:24px; }
.modal-header .eyebrow { font-size:8px; letter-spacing:1.7px; }
.modal-header h2 { font:29px/1.35 var(--serif); letter-spacing:1.5px; margin:11px 0 0; color:#e4deca; }
.modal-header h2:focus { outline:none; }
.close-button { flex-shrink:0; margin:-10px -15px 0 0; }
.body-copy { font-size:13px; line-height:2; color:#bac2b4; }
.body-copy p { margin:0 0 21px; }
.body-copy + .primary { margin-top:16px; }
.control-guide { display:flex; gap:16px; margin:26px 0 10px; padding:17px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--paper); }
.control-guide .icon { margin-top:4px; flex-shrink:0; }
.control-guide p { font-size:12px; line-height:1.9; margin:0; }
.keyboard-guide { color:#95a59b; font-size:10px; line-height:1.9; margin:12px 0 26px; }
.note-sheet { padding:27px 30px; background:linear-gradient(115deg,#d8cfb6,#c4bba3); color:#2d3934; font:15px/2 var(--serif); box-shadow:3px 4px 0 #283b37; margin-bottom:30px; position:relative; }
.note-sheet::before { content:''; position:absolute; left:17px; right:17px; top:10px; bottom:10px; border:1px solid #7c7e6833; pointer-events:none; }
.note-sheet p:first-child { margin-top:0; }
.note-sheet p { position:relative; margin:0 0 20px; }
.note-stamp { font:9px var(--sans); letter-spacing:2px; color:#4d6658; border-top:1px solid #6a705849; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
.note-stamp .icon { width:17px; height:17px; }
.puzzle-intro { font-size:12px; line-height:1.9; color:#aab7ac; margin:0 0 22px; }
.instrument { margin:0; padding:22px 20px 18px; min-width:0; background:radial-gradient(ellipse at top,rgba(60,73,57,.16),transparent 85%),rgba(3,15,17,.28); border:1px solid rgba(194,180,139,.17); }
.arrival-slots { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.arrival-slot { display:flex; flex-direction:column; align-items:center; border:1px solid #78836c66; padding:10px 1px; min-width:0; background:linear-gradient(0deg,rgba(144,127,77,.07),transparent); }
.arrival-slot.selected { border-color:var(--gold); background:rgba(206,184,118,.07); box-shadow:0 0 14px #b49b5e0c; }
.slot-number { color:#849387; font:9px var(--mono); }
.arrival-slot strong { font:40px/1.4 var(--serif); color:var(--paper); }
.slot-name { font-size:9px; color:#a5b4a4; }
.order-arrow { display:flex; align-items:center; gap:5px; font:8px var(--mono); color:#778b7d; margin:13px 0 15px; }
.order-arrow i { flex:1; height:1px; background:var(--line); }
.order-arrow .icon { width:17px; height:17px; }
.symbol-bank { display:flex; justify-content:center; gap:12px; }
.symbol-bank button { display:flex; flex-direction:column; align-items:center; min-width:55px; min-height:54px; padding:4px 7px; border:1px solid transparent; }
.symbol-bank button:hover { border-color:var(--line); background:rgba(224,210,169,.06); }
.symbol-bank strong { color:var(--gold); font:30px/1.3 var(--serif); }
.symbol-bank span { font-size:9px; color:#9da995; }
.symbol-bank button.placed { opacity:.6; }
.instrument-instruction { font-size:10px; line-height:1.9; color:#92a196; margin:17px 0 0; text-align:center; }
.puzzle-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:14px; }
.puzzle-actions .primary { min-width:176px; }
.puzzle-feedback { min-height:18px; margin-top:10px; color:#dcc192; font-size:11px; line-height:1.7; }
.shake { animation:shake .3s linear; }
@keyframes shake { 25% {transform:translateX(3px);} 75% {transform:translateX(-3px);} }
.dials { display:grid; gap:19px; align-items:start; }
.dials-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dials-4 { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.dial-label { font:10px var(--mono); letter-spacing:2px; color:#b7bea9; text-align:center; margin:3px 0 14px; }
.instrument-dial { width:100%; display:block; color:#bdc2a5; overflow:visible; }
.instrument-dial text { fill:#788c7c; font:8px var(--mono); }
.instrument-dial .active-tick { fill:#e4d7aa; }
.dial-outer { stroke:#89947a55; stroke-width:.6; fill:rgba(184,160,92,.045); }
.dial-inner { stroke:#798a703d; fill:none; stroke-width:.6; stroke-dasharray:1 3; }
.needle { transform-origin:60px 60px; }
.needle path:first-child { fill:var(--gold); }
.needle path:last-child { stroke:var(--gold); stroke-width:1; }
.pin { fill:#263b35; stroke:var(--gold); stroke-width:.8; }
.instrument-dial .dial-roman { font:7px var(--serif); fill:#7b8e7b; }
.dial-controls { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:12px; }
.dial-turn { width:36px; height:36px; border:1px solid rgba(188,183,139,.28); background:rgba(118,129,95,.045); font:18px var(--serif); color:#d1c8a8; }
.dial-turn:hover { background:#8a977728; border-color:var(--gold); }
.dial-controls output { min-width:25px; font:20px var(--serif); text-align:center; color:var(--paper); }
.scope { color:#a8bca2; border:1px solid #8b9c7230; background:#0c1c1d; margin-bottom:25px; padding:5px 7px 4px; }
.scope svg { display:block; width:100%; }
.scope>span { font:7px var(--mono); color:#71836e; letter-spacing:2px; display:block; text-align:right; margin-right:5px; }
.listen-button { display:flex; margin:10px auto 0; }
.tiny-copy { text-align:center; color:#8c9e91; font-size:8px; line-height:1.7; margin:1px 0 0; }
.coupling { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:24px; padding-top:17px; border-top:1px solid var(--line); }
.coupling>span { color:#839788; font-size:9px; letter-spacing:1px; }
.coupling code { font:9px/1.9 var(--mono); color:#afba9e; columns:2; column-gap:35px; }
.hint-area { border-top:1px solid var(--line); margin-top:23px; padding-top:9px; }
.hint-copy { margin:8px 0; color:#c3bb9d; font-size:11px; line-height:1.9; }
.hint-copy>span { display:block; font:8px var(--mono); color:#8fa291; margin-bottom:6px; letter-spacing:1px; }
.evidence-peek { margin-top:14px; border:1px solid var(--line); background:#0d1d2033; }
.evidence-peek summary { display:flex; align-items:center; gap:10px; cursor:pointer; padding:12px 15px; list-style:none; color:#aeb8a5; font-size:10px; }
.evidence-peek summary::-webkit-details-marker { display:none; }
.evidence-peek summary>span { margin-left:auto; color:var(--gold); font-size:16px; }
.evidence-peek[open] summary>span { transform:rotate(45deg); }
.evidence-peek summary>.icon { width:15px; height:15px; }
.evidence-peek>div { padding:0 18px 16px; }
.evidence-peek article { border-top:1px solid var(--line); font-size:10px; line-height:1.9; color:#b2baaa; }
.evidence-peek h4 { font-weight:500; color:#d7ccb0; letter-spacing:.8px; margin:15px 0 9px; }
.missing-note { color:#8b9c8f; font-size:10px; line-height:1.9; }
.calibration-success,.anchor-success { display:flex; flex-direction:column; align-items:center; gap:15px; margin:28px auto; font:9px var(--mono); letter-spacing:3px; color:var(--gold); }
.calibration-success>.icon { width:49px; height:49px; border:1px solid var(--gold); border-radius:50%; padding:10px; }
.anchor-success .brand-mark { width:100px; height:100px; }
.locked-orbit { text-align:center; margin:20px 0; color:var(--gold); opacity:.55; }
.locked-orbit .brand-mark { width:125px; height:125px; }
.calibration-list { list-style:none; padding:0; margin:25px 0; }
.calibration-list li { display:flex; gap:16px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); font-size:12px; color:#92a297; }
.calibration-list li b { margin-left:auto; font-size:10px; font-weight:400; }
.calibration-list li.complete { color:var(--gold); }
.meridian-device { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(100px,1fr); align-items:center; gap:18px; }
.meridian-orbits { width:100%; }
.orbit { fill:none; stroke:#9ba68388; stroke-width:.8; }
.orbit-rim { fill:none; stroke:#b1a57244; stroke-width:.6; }
.orbit-axis { stroke:#8b9c7526; stroke-width:.7; fill:none; }
.orbit-node { fill:var(--gold); stroke:#e8e3c5; stroke-width:1; }
.node-0 { fill:#94b6b1; }
.node-2 { fill:#e1d7b1; }
.meridian-star { fill:#c9bc85; }
.meridian-orbits text { font:7px var(--mono); fill:#879b84; }
.orbit-controls { display:flex; flex-direction:column; gap:18px; }
.orbit-controls>div { display:flex; align-items:center; flex-direction:column; }
.orbit-controls label { font-size:9px; letter-spacing:2px; color:#a5b09b; }
.orbit-controls .dial-controls { margin-top:7px; }
.phase-warning { display:flex; gap:12px; font-size:11px; line-height:1.9; color:#c6b995; padding-top:5px; }
.phase-warning .icon { flex-shrink:0; margin-top:4px; }
.journal-modal { width:min(1020px,calc(100vw - 50px)); }
.journal-tabs { display:flex; gap:5px; padding-bottom:17px; margin-bottom:8px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.journal-tabs button { min-height:32px; padding:5px 11px; border:1px solid transparent; color:#91a395; font-size:10px; }
.journal-tabs button.active { border-color:var(--line); color:var(--paper); background:#c3b87a09; }
.journal-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:32px; }
.journal-entry { padding:23px 0 18px; border-bottom:1px solid var(--line); }
.entry-meta { display:flex; gap:10px; justify-content:space-between; color:#92a58f; font-size:8px; letter-spacing:.7px; }
.entry-phase { display:inline-flex; align-items:center; gap:5px; }
.entry-phase .icon { width:12px; height:12px; }
.journal-entry h3 { color:#d0c7a9; font:19px var(--serif); letter-spacing:1px; margin:12px 0; }
.journal-entry p { color:#b3bbaa; font-size:12px; line-height:1.95; }
.personal-notes { align-self:start; position:sticky; top:10px; padding-top:22px; }
.personal-notes>label { display:block; font:17px var(--serif); letter-spacing:2px; color:#c8bda0; margin-bottom:16px; }
.personal-notes textarea { width:100%; height:285px; resize:vertical; min-height:160px; max-height:450px; border:1px solid #80916e33; background:repeating-linear-gradient(transparent 0 27px,#80916e13 27px 28px),#0d1c1d66; padding:14px; font-size:12px; line-height:28px; color:#d2cfb9; border-radius:0; }
.personal-notes textarea::placeholder { color:#778a7b; }
.personal-notes small { display:block; margin-top:9px; font-size:8px; line-height:1.9; color:#839680; }
.personal-notes small>span { display:block; text-align:right; font-family:var(--mono); }
.settings-list { margin-top:25px; }
.setting-row { display:flex; align-items:center; gap:16px; width:100%; border-top:1px solid var(--line); min-height:56px; color:#b9c1ae; text-align:left; font-size:12px; }
.setting-row:hover { color:var(--paper); padding-left:3px; }
.confirm-actions { display:flex; justify-content:space-between; gap:20px; margin-top:30px; }
.ending-choices { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.ending-shade { position:absolute; inset:0; background:rgba(4,16,17,.76); }
.ending-content { position:absolute; left:50%; top:50%; transform:translate(-50%,-45%); width:min(630px,calc(100vw - 50px)); text-align:center; }
.ending-content .eyebrow { justify-content:center; }
.ending-clock { font:clamp(55px,7vw,92px) var(--serif); letter-spacing:7px; margin:8px 0 13px; color:var(--paper); }
.ending-content h1 { font:32px var(--serif); letter-spacing:3px; margin:23px 0; }
.ending-copy { color:#b7c0af; font-size:12px; line-height:2.1; }
.ending-copy p { margin:0 0 16px; }
.ending-actions { display:flex; justify-content:center; gap:22px; margin-top:30px; }
@media (min-width:1500px) {
  .title-content { left:10vw; }
  .room-nav button { padding:0 27px; }
}
@media (max-width:1100px) {
  .room-nav button { padding:0 13px; gap:7px; }
  .nav-number { display:none; }
  .journal-button { margin-right:0; }
  .journal-button>span { display:none; }
  .mission { bottom:130px; }
}
@media (max-height:740px) and (min-width:701px) {
  .topbar { padding-top:18px; padding-bottom:18px; }
  .phase-wrap { top:15px; }
  .title-content { top:51%; transform:translateY(-43%); }
  .title-content h1,.title-content h1.chinese-title { font-size:64px; }
  .title-content .eyebrow { margin-bottom:16px; }
  .title-caption { margin:13px 0 18px; }
  .tagline { margin-bottom:22px; font-size:12px; }
  .room-heading,.station-clock { top:105px; }
  .room-heading h1 { font-size:25px; }
  .room-nav { bottom:50px; }
  .side-tools { bottom:52px; }
  .mission { bottom:119px; }
  .modal { max-height:calc(100svh - 30px); }
  .modal-scroll { max-height:calc(100svh - 34px); }
}
@media (max-width:700px) {
  .topbar { padding:20px; gap:8px; }
  .topbar::after { left:20px; right:20px; }
  .brand { font-size:8px; gap:9px; letter-spacing:1.3px; }
  .brand-mark { width:34px; height:34px; }
  .header-tools { gap:9px; }
  .languages { gap:3px; font-size:10px; }
  .icon-button { width:34px; height:36px; }
  .title-content { left:8vw; right:5vw; top:48%; transform:translateY(-37%); }
  .title-content .eyebrow { font-size:8px; letter-spacing:1.4px; margin-bottom:23px; }
  .title-content h1 { font-size:60px; letter-spacing:-2px; }
  .title-content h1.chinese-title { font-size:72px; line-height:1.17; }
  .title-caption { font-size:8px; letter-spacing:2.6px; margin:19px 0 24px; }
  .tagline { font-size:12px; margin-bottom:27px; letter-spacing:.7px; }
  .title-shade { background:linear-gradient(90deg,#051113bf,#0614178a 50%,#0413184d); }
  .title-stage .world { left:22%; }
  .title-footer { left:20px; right:20px; bottom:22px; font-size:8px; letter-spacing:1px; }
  .title-coordinate { display:none; }
  .enter-button { min-height:53px; min-width:220px; }
  .title-meta { font-size:8px; letter-spacing:.8px; }
  .brand.compact { font-size:13px; gap:7px; letter-spacing:1px; }
  .brand.compact .brand-mark { width:29px; height:29px; }
  .game-bar { height:78px; }
  .game-bar .header-tools { gap:4px; }
  .phase-wrap { top:85px; z-index:3; left:auto; right:20px; transform:none; }
  .phase-control button { min-width:65px; height:30px; font-size:10px; gap:5px; letter-spacing:.5px; }
  .phase-shortcut { display:none; }
  .room-heading { left:21px; top:89px; max-width:calc(100vw - 180px); }
  .room-heading .eyebrow { font-size:7px; letter-spacing:.5px; gap:6px; }
  .room-heading .line { width:10px; }
  .room-heading h1 { font-size:22px; letter-spacing:2px; margin-top:10px; }
  .room-heading p { position:fixed; top:148px; left:22px; right:22px; font-size:9px; }
  .station-clock { display:none; }
  body[data-screen=game] .stage { top:180px; bottom:190px; }
  body[data-screen=game] .stage::before { content:''; position:absolute; inset:-20px; background-image:var(--room-art); background-size:cover; background-position:center; filter:blur(13px); opacity:.25; }
  body[data-screen=game] .scene-vignette { background:linear-gradient(180deg,#0a1719 0%,transparent 15%,transparent 85%,#0a1719 100%); }
  .hotspot { min-width:40px; min-height:40px; }
  .point-mark { width:29px; height:29px; }
  .point-mark .icon { width:15px; height:15px; }
  .point-mark::before { width:33px; height:33px; }
  .point-label { font-size:8px; padding:3px 5px; letter-spacing:0; }
  .point-label small { display:none!important; }
  .mission { left:22px; bottom:137px; right:85px; max-width:none; }
  .mission-signals { gap:13px; }
  .mission-signals .icon { width:16px; height:16px; }
  .mission p { font-size:9px; margin-top:6px; }
  .side-tools { bottom:135px; right:17px; display:grid; grid-template-columns:repeat(2,29px); gap:3px; }
  .journal-button { grid-column:1/3; justify-content:center; min-height:35px; gap:4px; }
  .journal-button>.icon { width:19px; height:19px; }
  .journal-button>b { padding:1px 4px; font-size:8px; }
  .side-tools .icon-button { width:29px; height:29px; }
  .side-tools .icon-button>.icon { width:17px; height:17px; }
  .room-nav { left:15px; right:15px; bottom:47px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .room-nav button { flex-direction:column; gap:6px; padding:12px 3px; min-height:62px; font-size:9px; letter-spacing:0; }
  .room-nav button>.icon { width:18px; height:18px; }
  .game-footer { left:17px; right:17px; bottom:19px; font-size:7px; letter-spacing:0; }
  .game-footer>span:first-child { max-width:62%; }
  .modal { width:calc(100vw - 24px); max-height:calc(100svh - 28px); }
  .modal-scroll { padding:25px 21px; max-height:calc(100svh - 32px); }
  .modal-header { gap:10px; margin-bottom:19px; }
  .modal-header h2 { font-size:25px; letter-spacing:.7px; }
  .modal-header .eyebrow { font-size:7px; }
  .body-copy { font-size:12px; }
  .note-sheet { padding:23px 22px; font-size:14px; }
  .note-sheet::before { left:10px; right:10px; }
  .primary,.secondary { padding:11px 17px; min-height:46px; font-size:11px; gap:15px; }
  .instrument { padding:17px 11px; }
  .arrival-slots { gap:5px; }
  .arrival-slot strong { font-size:30px; }
  .slot-name { font-size:8px; }
  .slot-number { font-size:8px; }
  .symbol-bank { gap:4px; justify-content:space-between; }
  .symbol-bank button { min-width:43px; padding:4px; }
  .symbol-bank strong { font-size:27px; }
  .symbol-bank span { font-size:8px; }
  .instrument-instruction { font-size:9px; margin-top:13px; }
  .puzzle-intro { font-size:11px; }
  .puzzle-actions { gap:10px; }
  .puzzle-actions .primary { min-width:140px; }
  .text-button { font-size:10px; }
  .dials-3 { gap:11px; }
  .dials-4 { gap:5px; }
  .dials-4 .dial-controls { gap:2px; }
  .dials-4 .dial-controls output { min-width:16px; font-size:17px; }
  .dials-4 .dial-turn { width:25px; height:34px; }
  .dial-label { font-size:8px; letter-spacing:1px; margin-bottom:10px; }
  .dial-turn { width:28px; height:35px; }
  .dial-controls { gap:3px; }
  .dial-controls output { min-width:20px; font-size:18px; }
  .scope { margin-bottom:20px; }
  .coupling { gap:10px; }
  .coupling code { font-size:8px; }
  .coupling>span { font-size:8px; }
  .journal-modal { width:calc(100vw - 20px); }
  .journal-layout { display:flex; flex-direction:column; gap:6px; }
  .journal-tabs { gap:1px; padding-bottom:10px; }
  .journal-tabs button { padding:4px 7px; font-size:9px; }
  .journal-entry h3 { font-size:18px; }
  .journal-entry p { font-size:11px; }
  .personal-notes { position:static; width:100%; }
  .personal-notes textarea { height:200px; }
  .meridian-device { gap:9px; grid-template-columns:minmax(0,1.5fr) minmax(90px,1fr); }
  .orbit-controls { gap:14px; }
  .ending-content { transform:translate(-50%,-43%); }
  .ending-content h1 { font-size:26px; }
  .ending-copy { font-size:11px; }
  .ending-actions { gap:15px; flex-wrap:wrap; }
  .toast { bottom:20px; padding:10px 17px; font-size:10px; }
}
@media (max-width:370px) {
  .brand.compact span { font-size:11px; }
  .header-tools .languages button { width:24px; }
  .modal-scroll { padding:23px 16px; }
  .dials-4 .dial-turn { width:23px; }
  .title-content h1 { font-size:51px; }
}
@media (max-height:500px) and (min-width:701px) {
  body[data-screen=game] .stage { top:78px; bottom:92px; }
  .room-heading { top:103px; left:23px; max-width:190px; }
  .room-heading h1 { font-size:21px; letter-spacing:1.5px; }
  .room-heading .eyebrow { font-size:7px; letter-spacing:.8px; gap:8px; }
  .room-heading p { font-size:9px; max-width:160px; }
  .station-clock { top:102px; right:25px; }
  .station-clock strong { font-size:25px; }
  .mission { left:24px; bottom:120px; max-width:175px; }
  .mission p { display:none; }
  .room-nav { left:23px; }
  .room-nav button { min-height:46px; }
  .point-label { font-size:8px; padding:3px 5px; }
  .title-content { top:51%; transform:translateY(-40%); }
  .title-content .eyebrow,.title-meta { display:none; }
  .title-content h1,.title-content h1.chinese-title { font-size:44px; }
  .title-caption { margin:10px 0 12px; font-size:8px; }
  .tagline { font-size:10px; line-height:1.8; margin-bottom:15px; }
  .enter-button { min-height:43px; min-width:210px; }
  .title-footer { bottom:14px; }
}
@media (max-height:600px) and (max-width:700px) {
  .title-content { top:52%; transform:translateY(-45%); }
  .title-content h1,.title-content h1.chinese-title { font-size:43px; }
  .title-content .eyebrow { margin-bottom:13px; }
  .title-caption { margin:12px 0; }
  .tagline { margin-bottom:15px; font-size:11px; }
  .title-meta { display:none; }
  .title-footer { bottom:12px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .dust { display:none; }
}

/* Campaign: parchment itinerary and nine instruments, within the original scene shell. */
.campaign-title-meta { color:#a4ad9e; font-size:9px; letter-spacing:1px; margin-top:11px; line-height:1.6; }
.title-chapters { margin-top:8px; margin-right:22px; }
.title-restart { margin-top:8px; }
.chapters-modal { width:min(760px,calc(100vw - 40px)); }
.chapter-list { display:flex; flex-direction:column; }
.chapter-row { display:flex; align-items:center; gap:22px; width:100%; text-align:left; padding:20px 0; border-top:1px solid var(--line); }
.chapter-row>img { width:118px; height:88px; object-fit:cover; opacity:.8; flex-shrink:0; }
.chapter-row>.icon { flex-shrink:0; color:var(--gold); margin-left:auto; }
.chapter-row.current { border-top-color:#c6ae7680; }
.chapter-row:disabled { opacity:.46; }
.chapter-row:hover:not(:disabled) img { opacity:1; }
.chapter-list-copy { display:flex; flex-direction:column; gap:8px; }
.chapter-list-copy small { font-size:8px; letter-spacing:1.3px; color:var(--gold); }
.chapter-list-copy strong { font:25px/1.3 var(--serif); color:var(--paper); letter-spacing:1px; }
.chapter-list-copy>span { font-size:10px; line-height:1.8; color:#a2b0a2; }
.chapter-room-nav button { min-width:155px; }
.chapter-stage .point-label { max-width:128px; width:max-content; white-space:normal; text-align:center; line-height:1.5; }
.chapter-stage .hotspot[data-action^="chapter-puzzle"] .point-label { left:50%; right:auto; transform:translateX(-50%); }
.chapter-record { padding:0 0 15px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.chapter-record h4,.travel-records h4 { color:var(--paper); font:17px/1.5 var(--serif); margin:15px 0 12px; }
.chapter-record p,.travel-records p { font-size:11px; line-height:2; color:#aebbad; }
.journal-section-title,.travel-records h3 { color:var(--gold); font-size:11px; letter-spacing:1.5px; margin:18px 0; }
.travel-records { margin-top:24px; padding-top:5px; border-top:1px solid var(--line); }
.travel-records article { padding:5px 0; }
.route-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:9px; font:10px var(--mono); color:var(--gold); margin-bottom:18px; }
.route-board { display:grid; grid-template-columns:repeat(4,1fr); position:relative; width:min(100%,330px); margin:auto; border:1px solid var(--line); background:#0b191c; }
.route-board>svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.route-board polyline { stroke:#c9b47c; stroke-width:2; fill:none; }
.route-cell { position:relative; aspect-ratio:1; border:1px solid #849a7a25; color:#90a796; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.route-cell small { position:absolute; top:8px; left:8px; font:8px var(--mono); }
.route-cell strong { font:27px var(--serif); }
.route-cell b { position:absolute; right:6px; bottom:5px; font:8px var(--mono); }
.route-cell:disabled { background:repeating-linear-gradient(135deg,#87918410 0 1px,transparent 1px 6px); opacity:.45; }
.route-cell.visited { color:#e7d8a9; background:#c6aa6b0b; }
.route-cell.route-end { box-shadow:inset 0 0 0 1px var(--gold); }
.route-cell:hover:not(:disabled) { background:#bbac751a; }
.testimony-lamps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.testimony-lamps button { display:flex; flex-direction:column; align-items:center; gap:16px; padding:17px 3px; border:1px solid var(--line); background:#112226; }
.testimony-lamps button>span { font:18px var(--serif); color:var(--gold); }
.testimony-lamps small { font-size:9px; color:#aebdab; }
.lamp-bulb { display:block; width:49px; height:49px; border-radius:50%; border:4px solid #7c6b474d; background:radial-gradient(circle at 40% 40%,#354644,#0b1b1d); box-shadow:0 0 0 4px #0c191d; }
.lit .lamp-bulb { background:radial-gradient(circle at 40% 35%,#fff1c7,#d49d49 70%,#967646); box-shadow:0 0 22px #e0ba624d,0 0 0 4px #74644655; }
.bridge-board { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:min(100%,270px); margin:auto; }
.bridge-board button { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px solid #8a9b703e; background:#0b1c1f; }
.bridge-board small { font:9px var(--mono); color:#b2bda5; }
.bridge-bulb { width:21px; height:21px; border:1px solid #71877766; background:#263d34; border-radius:4px; }
.lit .bridge-bulb { background:#e2c47f; border-color:#ffedb3; box-shadow:0 0 18px #d4b76855; }
.bridge-board button:hover,.testimony-lamps button:hover { border-color:var(--gold); }
.optical-bench { position:relative; width:min(100%,390px); aspect-ratio:1; margin:0 auto; }
.mirror-grid { position:absolute; inset:8.333%; display:grid; grid-template-columns:repeat(5,1fr); background:#0a1a1c; border:1px solid var(--line); }
.mirror-grid>* { min-width:0; border:1px solid #81987b29; }
.mirror-cell { position:relative; color:var(--paper); background:#22362d; }
.mirror-cell strong { font:42px/1 var(--serif); }
.mirror-cell small { position:absolute; top:5px; left:5px; color:var(--gold); font:7px var(--mono); }
.mirror-cell:hover { background:#46503a; }
.beam-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.beam-overlay polyline { stroke:#ffdb86; fill:none; stroke-width:.022; filter:drop-shadow(0 0 .035px #fff0a3); }
.beam-source,.beam-target { position:absolute; left:0; top:50%; transform:translateY(-50%); color:#dcb871; font-size:21px; }
.beam-target { left:auto; right:0; top:83.333%; color:#829987; }
.beam-target.lit { color:#ffeeae; text-shadow:0 0 15px #e1c178; }
.puzzle-live-status { text-align:center; color:var(--gold); font-size:10px; line-height:1.8; }
.climate-sequence { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.climate-card { display:flex; flex-direction:column; align-items:center; gap:9px; padding:12px 4px; border:1px solid var(--line); color:var(--paper); }
.climate-card small { font:8px var(--mono); color:#8ca690; }
.climate-card strong { font:30px/1.3 var(--serif); color:var(--gold); }
.climate-card span { font-size:10px; }
.climate-card:hover { background:#c5b07614; }
.growth-target { font:10px/1.8 var(--mono); color:var(--gold); text-align:center; margin:20px 0 12px; }
.growth-history { border-collapse:collapse; width:100%; font:11px/1.7 var(--mono); color:#b5c2ac; }
.growth-history td,.growth-history th { text-align:center; padding:7px; border-bottom:1px solid #89967526; font-weight:400; }
.growth-history th { color:#8fa48e; font-size:10px; }
.growth-history tr:last-child td { color:var(--gold); }
.specimen-grid { width:min(100%,320px); margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.specimen-grid button { position:relative; aspect-ratio:1; border:1px solid #96a27c66; color:var(--gold); font:30px var(--serif); background:#1c302a; }
.specimen-grid button.fixed { background:#0d1e21; color:#d6d4b7; opacity:1; }
.specimen-grid .fixed i { position:absolute; top:5px; right:5px; width:3px; height:3px; background:#bcb990; border-radius:50%; }
.specimen-grid button:hover:not(:disabled) { border-color:var(--gold); background:#293d2f; }
.causal-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.causal-list li { display:flex; align-items:center; gap:14px; padding:10px 12px; border:1px solid var(--line); background:#0c1f20; }
.causal-list small { font:9px var(--mono); color:var(--gold); }
.causal-list li>span { color:var(--paper); font-size:12px; }
.causal-list li>div { display:flex; gap:5px; margin-left:auto; }
.causal-list .dial-turn { width:29px; height:30px; }
.shutter-comparison { display:flex; align-items:center; justify-content:center; gap:30px; color:var(--gold); }
.shutter-comparison figure { width:108px; margin:0; }
.shutter-comparison figcaption { min-height:30px; font-size:10px; text-align:center; color:var(--gold); }
.shutter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; aspect-ratio:1; padding:5px; border:1px solid #9eac7c4d; background:#091c1d; }
.shutter-grid i { border:1px solid #7f967b1f; background:#1b332c; }
.shutter-grid i.lit { background:#d8c07e; box-shadow:0 0 8px #c6ad5933; }
.shutter-layers { display:grid; grid-template-columns:repeat(3,1fr); gap:27px; margin:26px 15px 0; padding-top:20px; border-top:1px solid var(--line); }
.shutter-layers>div { text-align:center; }
.shutter-layers>div>span { font:9px var(--mono); color:#a7b598; display:block; margin-bottom:12px; }
.shutter-layers .dial-turn { margin-top:12px; width:45px; }
.origin-digits { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.origin-digits>div { display:flex; flex-direction:column; align-items:center; gap:10px; }
.origin-digits small { font:9px var(--mono); color:#819886; }
.origin-digits output { color:var(--paper); font:46px var(--serif); margin:8px 0; }
.origin-digits .dial-turn { width:42px; }
.ending-actions { flex-wrap:wrap; }
.ending-content { max-height:calc(100svh - 120px); overflow:auto; scrollbar-width:thin; padding:5px 0 15px; }
.campaign-ending .ending-copy { line-height:1.95; }
.echo-callback { color:#c5b785; font-style:italic; }
@media (max-width:1100px) and (min-width:701px) {
  .chapter-room-nav button { min-width:130px; }
}
@media (min-width:701px) and (max-width:900px) {
  .side-tools { bottom:124px; }
}
@media (max-width:700px) {
  .campaign-title-meta { font-size:8px; letter-spacing:.4px; }
  .title-content { top:47%; transform:translateY(-43%); }
  .chapter-row { gap:12px; padding:18px 0; }
  .chapter-row>img { width:72px; height:80px; }
  .chapter-list-copy { gap:5px; }
  .chapter-list-copy strong { font-size:19px; }
  .chapter-list-copy small { font-size:7px; letter-spacing:.5px; }
  .chapter-list-copy>span { font-size:9px; line-height:1.7; }
  .chapter-row>.icon { width:16px; }
  .chapters-modal { width:calc(100vw - 24px); }
  .chapter-room-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .chapter-room-nav button { min-width:0; font-size:9px; }
  body:not([data-chapter="1"]) .room-heading { max-width:calc(100vw - 185px); }
  body:not([data-chapter="1"]) .room-heading h1 { font-size:20px; letter-spacing:1px; }
  body:not([data-chapter="1"]) .room-heading p { top:171px; line-height:1.7; max-height:32px; overflow:hidden; }
  body[data-screen="game"]:not([data-chapter="1"]) .stage { top:205px; }
  body:not([data-chapter="1"]) .room-heading .eyebrow { font-size:6px; }
  .chapter-stage .point-label { max-width:22vw; width:max-content; white-space:normal; text-align:center; line-height:1.5; }
  .chapter-stage .hotspot[data-action^="chapter-puzzle"] .point-label { left:50%; right:auto; transform:translateX(-50%); }
  .campaign-tools { bottom:139px; }
  .testimony-lamps { gap:8px; }
  .lamp-bulb { width:37px; height:37px; border-width:3px; }
  .testimony-lamps button { gap:12px; padding:13px 2px; }
  .climate-sequence { gap:5px; }
  .climate-card { padding:10px 2px; }
  .climate-card strong { font-size:25px; }
  .climate-card span { font-size:9px; }
  .route-caption { font-size:9px; }
  .mirror-cell strong { font-size:33px; }
  .mirror-cell small { top:3px; left:3px; font-size:6px; }
  .shutter-layers { gap:14px; margin-left:3px; margin-right:3px; }
  .shutter-layers>div>span { font-size:8px; }
  .shutter-comparison { gap:23px; }
  .causal-list li { gap:9px; padding:9px; }
  .causal-list li>span { font-size:11px; }
  .origin-digits { gap:8px; }
  .ending-content { max-height:calc(100svh - 115px); transform:translate(-50%,-43%); }
  .campaign-ending .ending-clock { font-size:56px; }
}
@media (max-height:600px) {
  .campaign-title-meta { display:none; }
  .title-chapters,.title-restart { margin-top:0; min-height:31px; }
  .ending-content { top:82px; transform:translateX(-50%); max-height:calc(100svh - 95px); }
  .ending-clock { font-size:46px; margin:4px 0; }
  .ending-content h1 { font-size:24px; margin:12px 0; }
  .ending-actions { margin-top:14px; }
}
@media (max-height:500px) and (min-width:701px) {
  .chapter-stage .point-label { max-width:84px; }
}
@media (max-width:370px) {
  body:not([data-chapter="1"]) .room-heading h1 { font-size:18px; letter-spacing:.6px; }
}


/* Scene depth: the art, WebGL layer and clue markers share one coordinate space. */
.scene-depth { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; filter:brightness(.97) saturate(.84); transition:filter 1s; }
.scene-depth[hidden] { display:none; }
.world.depth-ready .scene-image { opacity:0; }
.world.depth-ready .hotspots { z-index:2; }
.is-echo .scene-depth { filter:sepia(.6) saturate(.85) brightness(1.15); }
.stage[data-depth-paused=true] .mist,.stage[data-depth-paused=true] .dust i,.stage[data-depth-paused=true] .echo-line { animation-play-state:paused; }
.depth-control { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:48px; min-height:36px; padding:0 7px; border:1px solid #bfb58b30; color:#98a69e; font:10px var(--mono); letter-spacing:.5px; }
.depth-control .icon { width:16px; height:16px; }
.depth-control[aria-pressed=true] { color:#e0ce9f; background:linear-gradient(135deg,#b7a47518,#192f3000); border-color:#c7b48255; box-shadow:inset 0 1px #e3d7ac14; }
.depth-control:hover:not(:disabled) { border-color:var(--gold); }
.depth-setting b { margin-left:auto; border:1px solid var(--line); padding:2px 6px; font:10px var(--mono); }
.depth-setting[aria-pressed=true] b { color:var(--gold); }
.depth-description { margin:0 0 14px; padding:0 6px 13px 31px; color:var(--muted); font-size:10px; line-height:1.8; border-bottom:1px solid var(--line); }
body[data-depth=on] .instrument { background:linear-gradient(145deg,#22363888,#07131588); box-shadow:inset 0 2px 2px #dfd2a611,inset 0 -3px 8px #020c1370,0 16px 35px #020c1330; perspective:850px; }
body[data-depth=on] .instrument-dial { transform:rotateX(12deg); filter:drop-shadow(0 5px 1px #030d12) drop-shadow(0 10px 12px #020b1260); }
body[data-depth=on] .meridian-orbits { transform:perspective(750px) rotateX(15deg); filter:drop-shadow(0 7px 2px #030d12); }
body[data-depth=on] .arrival-slot { box-shadow:inset 0 1px #e1d4ad1a,inset 0 -4px #030e1477,0 5px 10px #030e1433; }
body[data-depth=on] .mirror-board,body[data-depth=on] .route-grid,body[data-depth=on] .shutter-grid { box-shadow:0 5px 0 #081518,0 16px 24px #040d1433; }
@media (max-width:700px) {
  .depth-control { min-width:41px; padding:0 4px; gap:3px; min-height:34px; font-size:9px; }
  .depth-control .icon { width:14px; height:14px; }
}
@media (max-width:400px) {
  .topbar .brand>span { display:none; }
  .topbar .header-tools { gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .scene-depth { transition:none; }
}