/* V0.3.8 — production visual pass: high-fidelity trio master */

/* Use the approved cinematic plate for the opening carriage / dialogue / first-choice slice. */
.stage[data-screen="LT_S01_TIME"] .bg,
.stage[data-screen="LT_S02_TITLE"] .bg,
.stage[data-screen="LT_S03_CARRIAGE"] .bg,
.stage[data-screen="LT_S04_STRANGERS"] .bg,
.stage[data-screen="LT_S06_STOP"] .bg,
.stage[data-screen="LT_S07_PA"] .bg,
.stage[data-screen="LT_S08_M01_SILENCE"] .bg,
.stage[data-screen="LT_S08R_M01_REACTION"] .bg,
.stage[data-visual-mode="trio"] .bg,
.stage[data-visual-mode="choice"] .bg,
.stage[data-visual-mode="emergency"] .bg{
  background-color:#020507!important;
  background-image:url('./backgrounds/trio_master_v1.webp')!important;
  background-repeat:no-repeat!important;
  background-size:100% auto!important;
  background-position:center 62px!important;
  filter:saturate(.94) contrast(1.05) brightness(.86)!important;
  transform:none!important;
}

/* Keep the artwork readable as a composed top-half plate on portrait phones. */
.stage[data-visual-mode="trio"] .bg:after,
.stage[data-visual-mode="choice"] .bg:after,
.stage[data-visual-mode="emergency"] .bg:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0 47%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.72) 70%,#020405 88%)!important;
}

/* No old vector passengers or CSS silhouettes on production trio scenes. */
.stage[data-visual-mode="trio"] .asset-silhouettes,
.stage[data-visual-mode="trio"] .silhouette-layer,
.stage[data-visual-mode="choice"] .asset-silhouettes,
.stage[data-visual-mode="choice"] .silhouette-layer,
.stage[data-visual-mode="emergency"] .asset-silhouettes,
.stage[data-visual-mode="emergency"] .silhouette-layer{display:none!important;}

/* Subtle speaker light over the baked, consistent trio. */
.stage[data-visual-mode="trio"] .speaker-focus,
.stage[data-visual-mode="choice"] .speaker-focus,
.stage[data-visual-mode="emergency"] .speaker-focus{
  z-index:3!important;
  top:23%!important;
  width:33.333%!important;
  height:31%!important;
  filter:blur(12px)!important;
  mix-blend-mode:screen!important;
}
.stage.speaker-maya .speaker-focus{left:0!important;background:radial-gradient(ellipse at 54% 58%,rgba(81,198,236,.25),rgba(81,198,236,.06) 42%,transparent 72%)!important;opacity:.72!important;}
.stage.speaker-raka .speaker-focus{left:33.333%!important;background:radial-gradient(ellipse at 50% 58%,rgba(255,188,103,.24),rgba(255,188,103,.055) 42%,transparent 72%)!important;opacity:.70!important;}
.stage.speaker-dani .speaker-focus{left:66.666%!important;background:radial-gradient(ellipse at 44% 58%,rgba(125,201,224,.20),rgba(125,201,224,.045) 42%,transparent 72%)!important;opacity:.68!important;}

/* Dialogue becomes a true lower-third so it does not bury the characters. */
.stage[data-visual-mode="trio"] .scene,
.stage[data-visual-mode="emergency"] .scene{align-items:flex-end!important;padding:72px 16px 58px!important;}
.stage[data-visual-mode="trio"] .stack.dialogues,
.stage[data-visual-mode="emergency"] .stack.dialogues{
  margin-top:auto!important;
  padding:14px 16px 16px!important;
  max-height:34svh!important;
  overflow:auto!important;
  background:linear-gradient(180deg,rgba(3,9,12,.72),rgba(2,6,8,.96))!important;
  border:1px solid rgba(121,190,214,.27)!important;
  border-radius:18px!important;
  box-shadow:0 22px 70px rgba(0,0,0,.55)!important;
  backdrop-filter:blur(12px)!important;
}

/* First behavioural choice: artwork dominates the upper half; decision surface stays compact. */
.stage[data-visual-mode="choice"] .scene{align-items:flex-end!important;padding:72px 14px 16px!important;}
.stage[data-visual-mode="choice"] .moment{
  width:100%!important;
  max-height:47svh!important;
  overflow:auto!important;
  padding:15px!important;
  background:linear-gradient(180deg,rgba(4,10,13,.76),rgba(2,6,8,.97))!important;
  border:1px solid rgba(114,184,210,.30)!important;
  border-radius:20px!important;
  box-shadow:0 22px 80px rgba(0,0,0,.58)!important;
  backdrop-filter:blur(12px)!important;
}
.stage[data-visual-mode="choice"] .moment h2{font-size:18px!important;line-height:1.35!important;margin:2px 4px 12px!important;}
.stage[data-visual-mode="choice"] .choices{gap:8px!important;}
.stage[data-visual-mode="choice"] .choices button{min-height:48px!important;padding:11px 14px!important;font-size:13px!important;line-height:1.35!important;}

/* Emergency is the same consistent art direction with a controlled colour shift. */
.stage[data-visual-mode="emergency"] .bg{filter:saturate(.72) contrast(1.12) brightness(.67) 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% 18%,rgba(173,42,31,.15),transparent 40%);animation:v038Emergency 2.4s ease-in-out infinite;}

/* The title and establishing beats use the same world, but subdued. */
.stage[data-screen="LT_S01_TIME"] .bg{filter:saturate(.84) contrast(1.04) brightness(.68)!important;}
.stage[data-screen="LT_S02_TITLE"] .bg{filter:saturate(.74) contrast(1.08) brightness(.50)!important;}

@keyframes v038Emergency{0%,100%{opacity:.45}50%{opacity:.95}}
@media(max-width:380px){
  .stage[data-visual-mode="choice"] .moment{max-height:50svh!important;}
  .stage[data-visual-mode="trio"] .stack.dialogues{max-height:37svh!important;}
}
@media(prefers-reduced-motion:reduce){.stage[data-visual-mode="emergency"]:before{animation:none!important;}}