.scene-stage { position: relative; min-width: 0; overflow: hidden; isolation: isolate; --scene-label-color: #40594d; --scene-control-bg: #f7f8f1; --scene-control-color: #203e34; }
.scene-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; touch-action: pan-y; cursor: grab; }
.scene-canvas:active { cursor: grabbing; }
.scene-status { position: absolute; top: 16px; left: 20px; right: 20px; margin: 0; color: var(--scene-label-color); font: 12px/1.6 "Segoe UI", sans-serif; z-index: 2; pointer-events: none; }
.scene-controls { position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.scene-controls button { min-width: 44px; min-height: 44px; padding: 9px 13px; border: 1px solid #85968b55; background: var(--scene-control-bg); color: var(--scene-control-color); font: 600 12px/1.4 "Segoe UI", sans-serif; border-radius: 5px; cursor: pointer; touch-action: manipulation; }
.scene-controls button.scene-icon { width: 44px; padding: 0; font-size: 23px; font-weight: 400; }
.scene-controls button[aria-pressed="true"] { box-shadow: inset 0 -2px currentColor; }
.scene-controls button:hover { filter: brightness(.94); }
.scene-controls button:focus-visible { outline: 3px solid #278362; outline-offset: 3px; }
.scene-stage[data-scene="nocturne"] { --scene-label-color: #e1ddd1; --scene-control-bg: #292b26; --scene-control-color: #eee9db; }
@media (max-width: 600px) { .scene-status { top: 10px; left: 12px; font-size: 12px; } .scene-controls { bottom: 10px; gap: 5px; left: 8px; right: 8px; } .scene-controls button { padding-inline: 9px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .scene-controls button { transition: none; } }