/* One short orientation, presented differently for reading and for touch. */
.scene-summary{border-left:2px solid var(--accent);background:var(--panel);border-radius:0 10px 10px 0;margin:-5px 0 17px;padding:0 14px}
.scene-summary summary{display:flex;align-items:center;gap:8px;min-height:38px;cursor:pointer;list-style:none;color:var(--accent);font-size:11px;letter-spacing:.05em;font-weight:600}
.scene-summary summary::-webkit-details-marker{display:none}
.scene-summary summary svg{width:14px;height:14px;flex-shrink:0}
.scene-summary summary span{flex:1}
.scene-summary[open] summary>svg:last-child{transform:rotate(90deg)}
.scene-summary summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.scene-summary p{font-size:13px;line-height:1.6;color:var(--soft);margin:0;padding:0 0 13px;text-wrap:pretty}
.large-text .scene-summary p{font-size:15px}
.scene-image-open{display:none}
.art-shade{pointer-events:none}
.scene-location{z-index:2;pointer-events:none}
.scene-location-link{pointer-events:auto}

/* The illustration stays full height behind a separate, scrollable sheet. */
dialog[data-kind="scene-intro"]{width:min(640px,100%);height:100dvh;max-width:100%;max-height:100dvh;padding:0;background:var(--bg);overflow:hidden}
dialog[data-kind="scene-intro"]::before{display:none}
dialog[data-kind="scene-intro"] #modal-content,dialog[data-kind="scene-intro"] .modal-inner{height:100%;padding:0}
.scene-preview{position:relative;isolation:isolate;height:100%;display:flex;align-items:flex-end}
.scene-panorama{position:absolute;inset:0;overflow:hidden;background:#0d1219}
.scene-panorama-viewport{height:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pinch-zoom;-webkit-overflow-scrolling:touch}
.scene-panorama-viewport::-webkit-scrollbar{display:none}
.scene-panorama-viewport img{display:block;height:100%;width:auto;min-width:100%;max-width:none;object-fit:cover;user-select:none;-webkit-user-drag:none}
.can-pan .scene-panorama-viewport{cursor:grab}
.scene-panorama-viewport.is-dragging{cursor:grabbing}
.scene-panorama-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.scene-panorama-caption{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:max(24px,env(safe-area-inset-top)) 24px 38px;color:#fff;background:linear-gradient(#07101ba8,transparent);pointer-events:none;text-shadow:0 1px 7px #000}
.scene-panorama-caption>span{font-size:10px;letter-spacing:.18em;font-weight:600}
.scene-panorama-hint{display:none;align-items:center;gap:7px;padding:6px 10px;border:1px solid #ffffff38;border-radius:20px;background:#0b152378;font-size:11px;line-height:1.4}
.can-pan .scene-panorama-hint{display:flex}
.scene-panorama-hint>span{font-size:17px;line-height:1}
.scene-overlay-sheet{position:relative;width:100%;max-height:64dvh;display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;background:var(--panel);box-shadow:0 -12px 45px #0003;overflow:hidden}
.scene-overlay-sheet::before{content:'';flex-shrink:0;display:block;width:34px;height:4px;border-radius:5px;background:var(--muted);opacity:.4;margin:10px auto 0}
.scene-sheet-scroll{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:22px 24px 0;scrollbar-width:thin}
.scene-preview-meta{display:flex;align-items:flex-start;gap:7px;margin:0 0 12px;color:var(--accent);font-size:11px;line-height:1.5}
.scene-preview-meta svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}
.scene-preview-meta small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.scene-preview h2{font-size:29px;line-height:1.12;letter-spacing:-.8px;margin:0 0 12px;text-wrap:pretty;outline:none}
.scene-preview-summary{font-size:14px;line-height:1.65;color:var(--soft);margin:0;text-wrap:pretty}
.scene-preview-footer{flex-shrink:0;padding:22px 24px max(20px,env(safe-area-inset-bottom));background:var(--panel)}
.scene-preview-footer .primary{min-height:50px}
.large-text .scene-preview-summary{font-size:17px}
@media(max-width:760px){
 .scene-summary{display:none}
 .scene-image-open{display:block;position:absolute;inset:0;z-index:1;width:100%;border-radius:0;color:#fff}
 .scene-image-open span{position:absolute;right:20px;bottom:17px;display:flex;align-items:center;gap:5px;padding:7px 9px;border-radius:6px;background:#0b1523ad;backdrop-filter:blur(8px);font-size:10px}
 .scene-image-open svg{width:13px;height:13px}
 .scene-image-open:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
 .scene-location{right:120px}
 dialog[data-kind="scene-intro"]{height:100dvh;max-height:100dvh;width:100%;max-width:100%;margin:0;inset:0;padding:0;border:0;border-radius:0;overflow:hidden}
}
@media(max-height:700px){
 .scene-sheet-scroll{padding-top:16px}
 .scene-preview h2{font-size:25px;margin-bottom:10px}
 .scene-preview-meta{margin-bottom:9px}
 .scene-preview-summary{font-size:13px;line-height:1.55}
 .scene-preview-footer{padding-top:16px;padding-bottom:max(14px,env(safe-area-inset-bottom))}
}
@media(max-width:760px) and (orientation:landscape){
 .scene-overlay-sheet{max-height:72dvh}
 .scene-panorama-caption{padding-top:max(14px,env(safe-area-inset-top));gap:6px}
 .scene-sheet-scroll{padding-top:12px}
 .scene-preview-footer{padding-top:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
}