/* Local display fixes; the original museum artwork and stylesheet stay intact. */
#viewport-shell { width: 100%; height: 100%; overflow: clip; }
/* 电脑端等比缩放：外壳按设计稿尺寸排版，再整体 zoom 到窗口大小（display.js 算 --ui-scale） */
body[data-display-mode="desktop"] #viewport-shell { width: var(--app-width); height: var(--app-height); zoom: var(--ui-scale); }
#btn-orientation[hidden] { display: none; }
#btn-orientation { font: 10px/1 var(--font-body); gap: 1px; padding: 4px; }
#btn-orientation svg { width: 17px; height: 17px; }
#btn-switch-name { font: 10px/1 var(--font-body); gap: 1px; padding: 4px; }
.visit-tool { font: 700 11px/1 var(--font-body); text-decoration: none; background: var(--gold); }
.visit-splash-link { display: inline-block; margin-top: 8px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: underline; }
#btn-mini-caption { display: none; }
body.museum-focused[data-display-mode="desktop"] .mini-bubble { display: none; }
.chat-head { position: relative; }
#btn-chat-reset { float: right; margin: 0 0 8px 10px; font-size: 12px; }
#stage-fire .upload-empty[hidden], #stage-fire .upload-preview[hidden] { display: none; }
#stage-fire .fire-left > * { flex-shrink: 0; }
#stage-fire .upload-preview { padding: 12px 12px 56px; }
#stage-fire .upload-preview img { width: 100%; height: auto; max-height: 320px; object-fit: contain; }

body.manual-landscape { overflow: hidden; }
body.manual-landscape #viewport-shell { position: fixed; top: 0; left: 100%; width: var(--app-width); height: var(--app-height); transform: rotate(90deg); transform-origin: 0 0; overflow: clip; }
body.manual-landscape #museum-dialog { position: fixed; margin: 0; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); width: calc(var(--app-width) - 24px); max-height: calc(var(--app-height) - 20px); }

body:not([data-display-mode="desktop"]) .brand-sub { display: none; }
body:not([data-display-mode="desktop"]) .brand-name { font-size: 19px; }
body:not([data-display-mode="desktop"]) .brand-mark { width: 27px; height: 27px; }
body:not([data-display-mode="desktop"]) .tools { gap: 8px; }
body:not([data-display-mode="desktop"]) .tool-btn { width: 38px; height: 38px; border-width: 2px; }
body:not([data-display-mode="desktop"]) .hud-title h2 { font-size: 25px; }
body:not([data-display-mode="desktop"]) .hud-title p { font-size: 13px; line-height: 1.65; }
body:not([data-display-mode="desktop"]) #mini-teacher { left: 12px; bottom: 12px; gap: 5px; max-width: calc(var(--app-width) - 24px); }
body:not([data-display-mode="desktop"]) .mini-avatar { width: 58px; flex: none; }
body:not([data-display-mode="desktop"]) .mini-bubble { max-width: 260px; padding: 9px 11px; font-size: 12px; line-height: 1.55; margin-bottom: 30px; }
body:not([data-display-mode="desktop"]) #mini-teacher { right: auto; flex-direction: row; }
body:not([data-display-mode="desktop"]) #btn-mini-caption { display: block; position: absolute; left: 4px; bottom: 0; z-index: 1; border: 2px solid var(--ink); border-radius: 12px; background: var(--cream); padding: 3px 8px; font-size: 11px; pointer-events: auto; }
body:not([data-display-mode="desktop"]) .mini-avatar { order: -1; margin-bottom: 21px; }
body:not([data-display-mode="desktop"]) #mini-teacher:not(.caption-open) .mini-bubble { display: none; }
body:not([data-display-mode="desktop"]) .mini-bubble { max-height: calc(var(--app-height) * .4); overflow: auto; pointer-events: auto; }
body:not([data-display-mode="desktop"]) :is(.chat-head, .chips, .chat-input-row, .chat-log .msg) { flex-shrink: 0; }
body:not([data-display-mode="desktop"]) .msg { max-width: 100%; gap: 7px; }
body:not([data-display-mode="desktop"]) .msg .bubble { padding: 9px 12px; font-size: 14px; }
body:not([data-display-mode="desktop"]) .msg .who { width: 30px; height: 30px; }
body:not([data-display-mode="desktop"]) .chips { padding: 8px 12px; gap: 6px; max-height: 108px; overflow: auto; }
body:not([data-display-mode="desktop"]) .chip { padding: 6px 10px; font-size: 12px; }
body:not([data-display-mode="desktop"]) .chat-input-row { padding: 9px 12px 12px; gap: 7px; }
body:not([data-display-mode="desktop"]) #chat-input { min-width: 0; width: 0; padding: 10px 12px; font-size: 16px; }
body:not([data-display-mode="desktop"]) :is(.mic-btn, .send-btn) { width: 38px; height: 38px; }
body:not([data-display-mode="desktop"]) .btn-xl { font-size: 17px; padding: 12px 16px; white-space: normal; line-height: 1.4; }
body:not([data-display-mode="desktop"]) .pan-hint { top: 12px; font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
body:not([data-display-mode="desktop"]) .museum-hud { inset: 35px 16px 18px; }
body:not([data-display-mode="desktop"]) .museum-hud .hud-title { padding: 13px 16px; }
body:not([data-display-mode="desktop"]) .exhibit-card { max-height: 42%; overflow: auto; font-size: 12px; padding: 13px 15px; }
body:not([data-display-mode="desktop"]) .exhibit-name { font-size: 19px; }
body:not([data-display-mode="desktop"]) .exhibit-desc { font-size: 12px; line-height: 1.6; }
body:not([data-display-mode="desktop"]) .shape-pick, body:not([data-display-mode="desktop"]) .pattern-pick { padding: 12px; }
body:not([data-display-mode="desktop"]) .splash-card { width: min(680px, calc(var(--app-width) - 32px)); max-height: calc(var(--app-height) - 32px); overflow: auto; padding: 20px; gap: 14px; }
body:not([data-display-mode="desktop"]) .splash-avatar { width: 120px; }
body:not([data-display-mode="desktop"]) .splash-card h1 { font-size: 26px; white-space: normal; }
body:not([data-display-mode="desktop"]) .splash-card p { font-size: 14px; }
body:not([data-display-mode="desktop"]) .modal-card { width: min(960px, calc(var(--app-width) - 40px)); max-height: calc(var(--app-height) - 36px); overflow: auto; padding: 22px 18px; border-radius: 22px; }
body:not([data-display-mode="desktop"]) .modal-close { top: 8px; right: 8px; width: 34px; height: 34px; z-index: 1; }
body:not([data-display-mode="desktop"]) .badge-card { width: min(500px, calc(var(--app-width) - 40px)); }
body:not([data-display-mode="desktop"]) .badge svg { width: 160px; }
body[data-display-mode="portrait"] .splash-card { grid-template-columns: 1fr; }
body[data-display-mode="landscape"] .splash-card { grid-template-columns: 120px minmax(0, 1fr); text-align: left; }
body[data-display-mode="portrait"] .modal-body img { max-height: 240px; }
body[data-display-mode="landscape"] .modal-body { grid-template-columns: 40% minmax(0, 1fr); gap: 16px; }
body[data-display-mode="landscape"] .modal-body img { max-height: calc(var(--app-height) - 95px); }

/* Portrait: readable stacked panels, with scrolling instead of compressed children. */
body[data-display-mode="portrait"] { overflow: auto; }
body[data-display-mode="portrait"] #viewport-shell { height: auto; min-height: var(--app-height); overflow: visible; }
body[data-display-mode="portrait"] #app { height: auto; min-height: var(--app-height); }
body[data-display-mode="portrait"] .topbar { height: 116px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 38px 50px; gap: 7px 12px; padding: 8px 14px 9px; }
body[data-display-mode="portrait"] .brand { grid-column: 1; grid-row: 1; gap: 8px; }
body[data-display-mode="portrait"] .brand-name { font-size: clamp(14px, calc(4.8 * var(--vw)), 19px); }
body[data-display-mode="portrait"] .tools { grid-column: 2; grid-row: 1; gap: 6px; }
body[data-display-mode="portrait"] .train { grid-column: 1 / -1; grid-row: 2; padding: 0 4px; width: 100%; }
body[data-display-mode="portrait"] .train-stop { flex: 1; padding: 2px 1px 20px; }
body[data-display-mode="portrait"] .train-stop i { width: 23px; height: 23px; }
body[data-display-mode="portrait"] .train-stop span { display: block; font-size: 9px; white-space: nowrap; letter-spacing: 0; }
body[data-display-mode="portrait"] .train-rail { left: 25px; right: 25px; bottom: 0; }
body[data-display-mode="portrait"] .train-loco { bottom: -4px; }
body[data-display-mode="portrait"] .train-loco svg { width: 28px; }
body[data-display-mode="portrait"] .stage { position: relative; display: none; height: auto; min-height: calc(var(--app-height) - 116px); overflow: visible; }
body[data-display-mode="portrait"] .stage.active { display: block; }
body[data-display-mode="portrait"] .stage > * { position: relative !important; }
body[data-display-mode="portrait"] .museum-viewport { height: calc(var(--app-height) - 116px); min-height: 560px; }
body[data-display-mode="portrait"] .exhibit-card { left: 16px; right: 16px; top: 20px; width: auto; max-height: 33%; }
body[data-display-mode="portrait"] .teacher-layout,
body[data-display-mode="portrait"] .craft-layout,
body[data-display-mode="portrait"] .fire-layout { display: flex; flex-direction: column; gap: 20px; padding: 20px 16px 100px; }
body[data-display-mode="portrait"] :is(.teacher-left, .teacher-right, .craft-left, .craft-right, .fire-left, .fire-right) { width: 100%; min-width: 0; overflow: visible; }
body[data-display-mode="portrait"] .teacher-stage { flex: none; height: 290px; }
body[data-display-mode="portrait"] .teacher-avatar { width: 170px; }
body[data-display-mode="portrait"] .teacher-name-tag { font-size: 15px; }
body[data-display-mode="portrait"] .teacher-name-tag small { font-size: 10px; }
body[data-display-mode="portrait"] .knowledge { padding: 12px; }
body[data-display-mode="portrait"] .knowledge-title small { display: block; margin: 5px 0 0; }
body[data-display-mode="portrait"] .kcards { gap: 5px; }
body[data-display-mode="portrait"] .kcard { padding: 8px 3px; }
body[data-display-mode="portrait"] .kcard b { font-size: 14px; }
body[data-display-mode="portrait"] .chat-box { flex: none; height: 620px; }
body[data-display-mode="portrait"] .chat-head { padding: 15px; }
body[data-display-mode="portrait"] .chat-head h2 { font-size: 22px; }
body[data-display-mode="portrait"] .chat-log { padding: 15px; min-height: 180px; }
body[data-display-mode="portrait"] .craft-steps { grid-template-columns: 1fr; }
body[data-display-mode="portrait"] .craft-right { padding: 14px 12px; gap: 12px; }
body[data-display-mode="portrait"] .scratch-wrap { flex: none; height: 330px; min-height: 0; }
body[data-display-mode="portrait"] .scratch-head h3 { font-size: 20px; }
body[data-display-mode="portrait"] .scratch-hint { font-size: 12px; padding: 8px 10px; }
body[data-display-mode="portrait"] .toolset.always { justify-content: flex-start; }
body[data-display-mode="portrait"] .fire-kiln { height: 350px; }
body[data-display-mode="portrait"] .fire-status { left: 12px; right: 12px; bottom: 15px; font-size: 13px; text-align: center; padding: 10px; white-space: normal; }
body[data-display-mode="portrait"] .fire-result { position: relative; display: none; grid-template-columns: 1fr; margin-top: 16px; padding: 20px; }
body[data-display-mode="portrait"] .fire-result.show { display: grid; }
body[data-display-mode="portrait"] .result-title { font-size: 30px; }
body[data-display-mode="portrait"] .result-comment { font-size: 16px; }
body[data-display-mode="portrait"] .gallery-layout { padding: 20px 16px 100px; }
body[data-display-mode="portrait"] .gallery-head { align-items: flex-start; flex-direction: column; }
body[data-display-mode="portrait"] .gallery-actions { justify-content: flex-start; }
body[data-display-mode="portrait"] .gallery-shelf { flex: none; padding: 18px; min-height: 260px; }
body[data-display-mode="portrait"] .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
body[data-display-mode="portrait"] .kiln-scene { height: calc(var(--app-height) - 116px); min-height: 650px; }
body[data-display-mode="portrait"] #kiln-svg { position: absolute; top: 190px; width: 100%; height: 240px; }
body[data-display-mode="portrait"] #embers { top: 190px; height: 240px; }
body[data-display-mode="portrait"] .kiln-hud { left: 16px; right: 16px; top: 20px; }
body[data-display-mode="portrait"] .step-track { flex-wrap: wrap; gap: 7px; }
body[data-display-mode="portrait"] .step { font-size: 11px; padding: 5px 8px; }
body[data-display-mode="portrait"] .kiln-card { left: 16px; right: 16px; top: 430px; width: auto; padding: 13px 16px; }
body[data-display-mode="portrait"] .kiln-card-title { font-size: 21px; }
body[data-display-mode="portrait"] .kiln-card-text { font-size: 13px; }
body[data-display-mode="portrait"] .kiln-next { right: 16px; bottom: 15px; }
body[data-display-mode="portrait"]:is([data-stage="craft"], [data-stage="fire"], [data-stage="gallery"]) #mini-teacher { left: auto; right: 10px; flex-direction: row-reverse; }
body[data-display-mode="portrait"]:is([data-stage="craft"], [data-stage="fire"], [data-stage="gallery"]) .mini-avatar { width: 42px; }
body[data-display-mode="portrait"]:is([data-stage="craft"], [data-stage="fire"], [data-stage="gallery"]) #btn-mini-caption { left: auto; right: 0; }

/* Both native landscape and the manual rotated viewport use these same rules. */
body[data-display-mode="landscape"] { overflow: hidden; }
body[data-display-mode="landscape"] #app { height: var(--app-height); min-height: 0; }
body[data-display-mode="landscape"] .topbar { height: 58px; gap: 10px; padding: 0 14px; }
body[data-display-mode="landscape"] .brand-name { font-size: 16px; }
body[data-display-mode="landscape"] .brand { gap: 7px; }
body[data-display-mode="landscape"] .train { padding: 0 5px; }
body[data-display-mode="landscape"] .train-stop { padding: 2px 4px 17px; }
body[data-display-mode="landscape"] .train-stop span { display: none; }
body[data-display-mode="landscape"] .train-rail { left: 23px; right: 23px; bottom: 4px; }
body[data-display-mode="landscape"] .train-loco { bottom: 0; }
body[data-display-mode="landscape"] .stage { position: absolute; display: block; inset: 0; height: auto; min-height: 0; overflow: hidden; }
body[data-display-mode="landscape"] .stage > * { position: absolute !important; }
body[data-display-mode="landscape"] .museum-viewport,
body[data-display-mode="landscape"] .kiln-scene { height: 100%; }
body[data-display-mode="landscape"] .museum-hud { inset: 20px; }
body[data-display-mode="landscape"] .museum-hud .hud-title { max-width: 390px; }
body[data-display-mode="landscape"] .museum-hud .hud-title p { margin-top: 6px; }
body[data-display-mode="landscape"] .exhibit-card { right: 16px; top: 14px; width: 240px; max-height: 73%; }
body[data-display-mode="landscape"] .mini-avatar { width: 42px; }
body[data-display-mode="landscape"] .mini-bubble { max-width: 280px; font-size: 11px; margin-bottom: 18px; }
body[data-display-mode="landscape"] .teacher-layout,
body[data-display-mode="landscape"] .craft-layout,
body[data-display-mode="landscape"] .fire-layout { display: grid; gap: 14px; padding: 14px; }
body[data-display-mode="landscape"] .teacher-layout { grid-template-columns: 230px minmax(0, 1fr); }
body[data-display-mode="landscape"] .craft-layout { grid-template-columns: 220px minmax(0, 1fr); }
body[data-display-mode="landscape"] .fire-layout { grid-template-columns: 310px minmax(0, 1fr); }
body[data-display-mode="landscape"] .teacher-left,
body[data-display-mode="landscape"] .craft-left,
body[data-display-mode="landscape"] .craft-right,
body[data-display-mode="landscape"] .fire-left { min-width: 0; min-height: 0; overflow: auto; }
body[data-display-mode="landscape"] .teacher-left > *,
body[data-display-mode="landscape"] .craft-right > * { flex-shrink: 0; }
body[data-display-mode="landscape"] .teacher-stage { min-height: 220px; }
body[data-display-mode="landscape"] .teacher-avatar { max-width: 135px; }
body[data-display-mode="landscape"] .teacher-name-tag { font-size: 13px; bottom: 8px; padding: 6px 10px; }
body[data-display-mode="landscape"] .teacher-name-tag small { display: none; }
body[data-display-mode="landscape"] .knowledge { padding: 10px; }
body[data-display-mode="landscape"] .knowledge-title small { display: block; margin: 5px 0 0; }
body[data-display-mode="landscape"] .kcards { grid-template-columns: repeat(2, 1fr); }
body[data-display-mode="landscape"] .teacher-right { min-width: 0; gap: 8px; }
body[data-display-mode="landscape"] .to-craft { flex: none; padding: 6px 14px; font-size: 14px; }
body[data-display-mode="landscape"] .chat-head { padding: 8px 13px; }
body[data-display-mode="landscape"] .chat-head h2 { font-size: 18px; }
body[data-display-mode="landscape"] .chat-head :is(p, .hud-kicker) { display: none; }
body[data-display-mode="landscape"] #btn-chat-reset { margin-bottom: 0; padding: 4px 8px; font-size: 11px; }
body[data-display-mode="landscape"] .chat-log { padding: 8px 12px; }
body[data-display-mode="landscape"] .chips { flex-wrap: nowrap; padding: 5px 10px; }
body[data-display-mode="landscape"] .chip { flex: none; white-space: nowrap; font-size: 11px; padding: 4px 9px; }
body[data-display-mode="landscape"] .chat-input-row { padding: 6px 10px 9px; }
body[data-display-mode="landscape"] #chat-input { padding: 6px 10px; }
body[data-display-mode="landscape"] :is(.mic-btn, .send-btn) { width: 34px; height: 34px; }
body[data-display-mode="landscape"] .craft-right { padding: 12px; gap: 10px; }
body[data-display-mode="landscape"] .scratch-wrap { flex: none; height: 220px; min-height: 220px; }
body[data-display-mode="landscape"] .fire-status { left: 12px; right: 12px; bottom: 12px; font-size: 12px; white-space: normal; text-align: center; padding: 7px; }
body[data-display-mode="landscape"] .fire-result { position: absolute; margin: 0; padding: 16px; gap: 14px; grid-template-columns: 1fr 1fr; overflow: auto; }
body[data-display-mode="landscape"] .fire-result:not(.show) { display: grid; }
body[data-display-mode="landscape"] .result-title { font-size: 25px; }
body[data-display-mode="landscape"] .result-comment { font-size: 13px; line-height: 1.6; }
body[data-display-mode="landscape"] .result-actions { margin-top: 12px; gap: 8px; }
body[data-display-mode="landscape"] .gallery-layout { padding: 14px; gap: 12px; }
body[data-display-mode="landscape"] .gallery-shelf { padding: 16px; }
body[data-display-mode="landscape"] .gallery-head { align-items: center; }
body[data-display-mode="landscape"] .gallery-head .hud-title p { display: none; }
body[data-display-mode="landscape"] .kiln-hud { top: 14px; left: 18px; }
body[data-display-mode="landscape"] .kiln-hud .hud-title p { display: none; }
body[data-display-mode="landscape"] #museum-dialog { width: calc(var(--app-width) - 24px); max-height: calc(var(--app-height) - 20px); }
body[data-display-mode="landscape"] .museum-detail-grid { display: grid; grid-template-columns: 40% 60%; height: calc(var(--app-height) - 126px); overflow: hidden; }
body[data-display-mode="landscape"] .museum-picture-panel { height: auto; min-height: 0; padding: 10px; border-right: 1px solid #dcc9a9; border-bottom: 0; }
body[data-display-mode="landscape"] .museum-picture { min-height: 80px; margin: 4px 0; }
body[data-display-mode="landscape"] .museum-reading { overflow: auto; padding: 16px; }
body[data-display-mode="landscape"] .museum-detail-top { padding: 9px 16px; }
body[data-display-mode="landscape"] .museum-detail-bottom { padding: 9px 16px; }
body[data-display-mode="landscape"] #museum-image-note { font-size: 9px; }
body[data-display-mode="landscape"] #warp .warp-center { top: 17px; left: 20px; gap: 2px; }
body[data-display-mode="landscape"] #warp .warp-title { font-size: 10px; }
body[data-display-mode="landscape"] #warp .warp-year { font-size: 29px; }
body[data-display-mode="landscape"] #warp .warp-sub { font-size: 17px; }
body[data-display-mode="landscape"] #warp .journey-actions { top: 15px; right: 16px; gap: 6px; }
body[data-display-mode="landscape"] #warp .journey-actions :is(button, a) { min-height: 33px; font-size: 10px; padding: 6px 11px; }
body[data-display-mode="landscape"] #warp .journey-scene img { position: static; width: 100%; height: 100%; object-fit: cover; }
body[data-display-mode="landscape"] #warp .journey-caption { left: 20px; right: 115px; bottom: 82px; gap: 10px; }
body[data-display-mode="landscape"] #warp .journey-caption p { font-size: 14px; line-height: 1.5; }
body[data-display-mode="landscape"] #warp .journey-avatar { width: 38px; height: 50px; }
body[data-display-mode="landscape"] #warp .journey-track { left: 20px; right: 20px; bottom: 12px; }
body[data-display-mode="landscape"] #warp .journey-note { right: 20px; bottom: 69px; font-size: 8px; }
body[data-display-mode="landscape"] #warp .warp-train { right: -12px; bottom: 90px; }
body[data-display-mode="landscape"] #warp .warp-train svg { width: 70px; }