/* Layered scenes (js/layers.js). The container takes the place of the flat scene image;
   .layer-canvas keeps the scene's own aspect ratio inside it, like object-fit: contain. */
.scene-layers{display:block}
.scene-layers .layer-canvas{position:absolute;inset:0}
.scene-layers .layer{position:absolute;display:block;max-width:none;max-height:none;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none}
.scene-layers .layer-bg{left:0;top:0;width:100%;height:100%}

/* Play screen: #scene-image is sized and transformed by the zoom code. */
.scene-frame #scene-image.scene-layers{container-type:size}
.scene-frame #scene-image.scene-layers .layer-canvas{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100cqw,calc(100cqh * var(--lw) / var(--lh)));height:min(100cqh,calc(100cqw * var(--lh) / var(--lw)))}

/* Archive detail: standalone, sized by the dialog. */
.modal .scene-frame .scene-layers{position:relative;aspect-ratio:var(--lw)/var(--lh);width:min(100%,calc(55dvh * var(--lw) / var(--lh)))}
.modal .scene-frame .scene-layers .layer{max-height:none;object-fit:fill}

/* Compare toggle: flips a found anomaly against the normal scene (see toggleCompare). */
.scene-layers .layer[data-state="normal"]{visibility:hidden}
.scene-layers.show-normal .layer[data-state="normal"]{visibility:visible}
.scene-layers.show-normal .layer[data-state="anomaly"]{visibility:hidden}
.compare-toggle{position:absolute;left:10px;top:10px;z-index:4;display:inline-flex;align-items:center;gap:.5em;padding:.4em .85em;border-radius:999px;border:1px solid #c6ad6f;background:#3d0b17e6;color:#fff3d6;font:600 14px/1.2 var(--reading-font,'Noto Sans JP',sans-serif);letter-spacing:.06em;cursor:pointer;box-shadow:0 2px 10px #0008;touch-action:manipulation}
.compare-toggle.normal{background:#0b2740e6;color:#d9eeff}
.compare-toggle b{font-weight:700;min-width:2em}
.compare-toggle small{font-size:11px;font-weight:500;opacity:.8}
.compare-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.modal .scene-frame{position:relative}
@media (max-width:760px){.compare-toggle{left:6px;top:6px;font-size:12px;padding:.35em .7em}.compare-toggle small{display:none}}
/* Phone layout: the frame follows the area's own portrait ratio (3:4 in the first areas, a little taller in later ones).
   It is still fixed for a whole investigation, because every scene of one area shares one ratio. */
@media (max-width:760px){.focus-layout .scene-stage,.focus-layout .scene-stage .scene-frame{aspect-ratio:var(--scene-ratio,.75)}}