/* ============================================================================
 * zen/components/scene/scene.css
 * ----------------------------------------------------------------------------
 * <zen-scene> — named spatial region of the world.
 * Positioned by zen-scene.js (absolute, left/top/width/height in world %).
 * Children inside use regular data-at in SCENE-LOCAL %.
 * ============================================================================ */

zen-scene, .zen-scene {
    display: block;
    /* position/left/top/width/height set by scene.js */
    box-sizing: border-box;
}

/* Debug overlay — shown when ?debug=layout outlines each scene rectangle
 * and prints its id + bbox in a small tag. Enabled by adding
 * .zen-debug--scenes on the body (layout-debug.js toggles this).            */
body.zen-debug--scenes zen-scene,
body.zen-debug--scenes .zen-scene {
    outline: 2px dashed rgba(124, 58, 237, 0.55);   /* violet */
    outline-offset: -2px;
}

body.zen-debug--scenes zen-scene::before,
body.zen-debug--scenes .zen-scene::before {
    content: '#' attr(id);
    position: absolute;
    top: 4px; left: 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 2px 6px;
    background: rgba(124, 58, 237, 0.85);
    color: var(--white);
    border-radius: 3px;
    z-index: 999;
    pointer-events: none;
}

/* Active scene subtle glow (useful in catalog / debug; no effect in normal
 * playback because all other elements drive their own state).               */
zen-scene.a-active,
.zen-scene.a-active {
    /* Intentionally empty — scenes are positioning containers, not visible
     * actors. Children drive the visible state. Keep the hook for future
     * chapter-break effects if needed.                                     */
}