/* Clean deterministic visual layer for the vertical slice. Loaded last. */
.stage{background:#020304;}
.stage .bg{display:block!important;opacity:1!important;visibility:visible!important;z-index:0!important;}
.stage .grain{z-index:1!important;}
.stage .scene{position:relative;z-index:5!important;}
.stage header{z-index:8!important;}

/* Scene backgrounds are selected by screen-id mapping in visual-engine.js. */
.stage[data-visual-bg="trio"] .bg{
  background-color:#05080a!important;
  background-image:url('./backgrounds/trio_master_v1.webp'),url('./backgrounds/production_trio_bg.webp')!important;
  background-position:center 39%,center 39%!important;
  background-size:cover,cover!important;
  background-repeat:no-repeat,no-repeat!important;
  filter:saturate(.98) contrast(1.04) brightness(.82)!important;
  transform:scale(1.008)!important;
}
.stage[data-visual-bg="door"] .bg{
  background:#05080a url('./backgrounds/rear_door.svg') center center/cover no-repeat!important;
  filter:saturate(.83) contrast(1.12) brightness(.66)!important;
  transform:none!important;
}
.stage[data-visual-bg="lever"] .bg{
  background:#05080a url('./backgrounds/lever_area.svg') center center/cover no-repeat!important;
  filter:saturate(.84) contrast(1.13) brightness(.67)!important;
  transform:none!important;
}
.stage[data-visual-bg="phone"] .bg{filter:none!important;transform:none!important;}
.stage[data-visual-bg="none"] .bg{background:#020304!important;filter:none!important;transform:none!important;}

/* Keep old generated silhouette layers out of the new engine. */
.asset-silhouettes,.silhouette-layer{display:none!important;}

/* Readability veil and cinematic depth. */
.stage:not([data-visual-bg="phone"]) .scene:after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.01) 0%,rgba(0,0,0,.01) 43%,rgba(0,0,0,.14) 62%,rgba(0,0,0,.80) 100%)!important;
}
.stage[data-visual-mode="emergency"] .bg{filter:saturate(.76) contrast(1.14) brightness(.58) sepia(.10)!important;}
.stage[data-visual-mode="emergency"]:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 11%,rgba(181,48,35,.17),transparent 44%);animation:emergencyBreath 2.2s ease-in-out infinite;}

/* Stable speaker focus: only lighting changes, never character geometry. */
.speaker-focus{position:absolute;z-index:4;pointer-events:none;top:25%;width:34%;height:45%;opacity:0;filter:blur(11px);mix-blend-mode:screen;transition:opacity .26s ease,left .26s ease,background .26s ease;}
.stage.speaker-maya .speaker-focus{left:0;opacity:.48;background:radial-gradient(ellipse at 50% 52%,rgba(79,194,234,.19),rgba(79,194,234,.04) 38%,transparent 70%);}
.stage.speaker-raka .speaker-focus{left:33%;opacity:.46;background:radial-gradient(ellipse at 50% 52%,rgba(244,171,93,.16),rgba(244,171,93,.035) 38%,transparent 70%);}
.stage.speaker-dani .speaker-focus{left:66%;opacity:.45;background:radial-gradient(ellipse at 50% 52%,rgba(180,211,222,.15),rgba(180,211,222,.03) 38%,transparent 70%);}
.stage.speaker-none .speaker-focus{opacity:0;}

/* Intro is intentionally cleaner. */
.stage[data-visual-mode="boot"] header,.stage[data-visual-mode="establish"] header,.stage[data-visual-mode="title"] header{opacity:0;pointer-events:none;}
.stage[data-visual-mode="establish"] .bg{filter:saturate(.86) contrast(1.04) brightness(.64)!important;}
.stage[data-visual-mode="title"] .bg{filter:saturate(.74) contrast(1.06) brightness(.42)!important;}

/* Story text remains a lower third, not a web card floating in the middle. */
.stage[data-type="environment"] .stack,.stage[data-type="observation"] .stack,.stage[data-type="cinematic"] .stack{
  padding:15px 16px 17px!important;border-radius:17px!important;border:1px solid rgba(139,181,196,.18)!important;
  background:linear-gradient(180deg,rgba(4,9,12,.44),rgba(3,7,9,.88))!important;backdrop-filter:blur(10px)!important;
}
.stage[data-type="dialogue"] .stack,.stage[data-type="reaction"] .stack,.stage[data-type="branch_reaction"] .stack{
  width:100%;padding:15px 17px 17px!important;border-radius:18px!important;border:1px solid rgba(139,184,201,.23)!important;
  background:linear-gradient(180deg,rgba(4,10,13,.60),rgba(3,7,9,.92))!important;backdrop-filter:blur(12px)!important;
}
.dlg b{color:#6bc9e7!important;}

/* Choices feel integrated with the scene. */
.stage[data-type="behavior_moment"] .moment{background:linear-gradient(180deg,rgba(5,11,14,.70),rgba(3,7,9,.95))!important;border:1px solid rgba(140,184,200,.25)!important;backdrop-filter:blur(12px)!important;}
.stage[data-type="behavior_moment"] .choices button{border-radius:999px!important;background:rgba(6,13,17,.84)!important;border:1px solid rgba(125,171,188,.34)!important;}

@keyframes emergencyBreath{0%,100%{opacity:.48}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.speaker-focus{transition:none!important}.stage[data-visual-mode="emergency"]:before{animation:none!important}}