/* V0.3.5 — stable trio composition + subtle speaker focus */

/* Production artwork: one stable trio composition reused across conversation beats. */
.stage:not([data-type="boot"]):not([data-type="phone_ui"]):not([data-type="profile_progress"]):not([data-type="profile_cards"]):not([data-type="archetype_reveal"]):not([data-type="share_card"]):not([data-type="teaser"]):not([data-type="direct_action"]) .bg{
  background:#040607 url('./backgrounds/production_trio_bg.webp') center 39%/cover no-repeat!important;
  filter:saturate(.9) contrast(1.04) brightness(.78);
  animation:none!important;
  transform:scale(1.015);
}
.stage:not([data-type="boot"]):not([data-type="phone_ui"]):not([data-type="profile_progress"]):not([data-type="profile_cards"]):not([data-type="archetype_reveal"]):not([data-type="share_card"]):not([data-type="teaser"]):not([data-type="direct_action"]) .bg:before,
.stage:not([data-type="boot"]):not([data-type="phone_ui"]):not([data-type="profile_progress"]):not([data-type="profile_cards"]):not([data-type="archetype_reveal"]):not([data-type="share_card"]):not([data-type="teaser"]):not([data-type="direct_action"]) .bg:after{content:none!important;display:none!important;}

/* Old character layers are intentionally disabled. Characters are baked into the approved composition. */
.asset-silhouettes,.silhouette-layer{display:none!important;}

/* Cinematic veil preserves readability without hiding the artwork. */
.stage:not([data-type="phone_ui"]) .scene:before{opacity:.12!important;}
.stage:not([data-type="phone_ui"]) .scene:after{
  background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.03) 48%,rgba(0,0,0,.24) 64%,rgba(0,0,0,.82) 100%)!important;
}

/* Speaker focus: tiny local bloom only, never replaces or moves the trio. */
.speaker-focus{position:absolute;z-index:4;pointer-events:none;width:34%;height:36%;top:31%;opacity:0;filter:blur(9px);transition:left .28s ease,right .28s ease,opacity .28s ease,background .28s ease;mix-blend-mode:screen;}
.speaker-maya .speaker-focus{left:0%;opacity:.62;background:radial-gradient(ellipse at 46% 54%,rgba(99,203,238,.24),rgba(99,203,238,.055) 36%,transparent 68%);}
.speaker-raka .speaker-focus{left:33%;opacity:.56;background:radial-gradient(ellipse at 50% 52%,rgba(247,174,92,.20),rgba(247,174,92,.045) 38%,transparent 69%);}
.speaker-dani .speaker-focus{left:66%;opacity:.50;background:radial-gradient(ellipse at 48% 53%,rgba(178,211,222,.16),rgba(178,211,222,.035) 38%,transparent 69%);}
.speaker-none .speaker-focus{opacity:0;}

/* A small tonal dim around non-speakers; still preserves the whole composition. */
.stage.speaker-maya:after,.stage.speaker-raka:after,.stage.speaker-dani:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;transition:background .25s ease;}
.stage.speaker-maya:after{background:linear-gradient(90deg,transparent 0 32%,rgba(0,0,0,.18) 46%,rgba(0,0,0,.24) 100%);}
.stage.speaker-raka:after{background:linear-gradient(90deg,rgba(0,0,0,.17) 0 25%,transparent 40% 63%,rgba(0,0,0,.17) 77% 100%);}
.stage.speaker-dani:after{background:linear-gradient(90deg,rgba(0,0,0,.24) 0 54%,rgba(0,0,0,.12) 68%,transparent 100%);}

/* Emergency/tension treatment uses the same composition. */
.scene-emergency .bg{filter:saturate(.76) contrast(1.12) brightness(.59) sepia(.08)!important;}
.scene-emergency:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 12%,rgba(174,42,34,.16),transparent 42%),linear-gradient(180deg,rgba(89,10,8,.07),transparent 48%);animation:emergencyBreath 2.1s ease-in-out infinite;}

/* Dialogue lower-third: compact and consistent. */
.stage.dialogues .scene,.stage[data-type="dialogue"] .scene,.stage[data-type="reaction"] .scene,.stage[data-type="branch_reaction"] .scene{align-items:flex-end;padding:76px 18px 64px!important;}
.stage.dialogues .stack,.stage[data-type="dialogue"] .stack,.stage[data-type="reaction"] .stack,.stage[data-type="branch_reaction"] .stack{width:100%;max-width:none;padding:15px 17px 17px!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(4,10,13,.70),rgba(3,7,9,.94))!important;border:1px solid rgba(151,194,209,.25)!important;box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.025)!important;backdrop-filter:blur(13px)!important;}
.dlg{padding-left:13px!important;border-left:1px solid rgba(86,189,224,.58)!important;}
.dlg b{font-size:10px!important;letter-spacing:.22em!important;color:#68cce9!important;margin-bottom:6px!important;}
.dlg span{font-size:18px!important;line-height:1.42!important;color:#f0efec!important;}
.dlg+.dlg{margin-top:13px!important;}

/* Choices match the approved screenshot while staying dynamic/code-driven. */
.stage[data-type="behavior_moment"] .scene{align-items:flex-end!important;padding:72px 16px 24px!important;}
.stage[data-type="behavior_moment"] .moment{width:100%;padding:16px!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(5,11,14,.74),rgba(3,7,9,.96))!important;border:1px solid rgba(142,186,201,.24)!important;box-shadow:0 25px 80px rgba(0,0,0,.55)!important;}
.stage[data-type="behavior_moment"] .moment h2{font-size:19px!important;line-height:1.38!important;text-align:center;}
.stage[data-type="behavior_moment"] .choices button{min-height:54px!important;padding:13px 15px!important;border-radius:999px!important;background:rgba(7,14,18,.84)!important;border:1px solid rgba(130,173,190,.35)!important;font-size:14px!important;}
.stage[data-type="behavior_moment"] .choices button:active{border-color:#66c8e8!important;background:rgba(20,53,68,.88)!important;}
.stage[data-type="behavior_moment"] .timer{margin-top:4px!important;height:4px!important;background:rgba(101,151,170,.2)!important;}
.stage[data-type="behavior_moment"] .timer i{background:linear-gradient(90deg,#38bce8,#217ba3)!important;box-shadow:0 0 13px rgba(56,188,232,.35)!important;}
.stage[data-type="behavior_moment"] .moment>small{display:block;text-align:center;letter-spacing:.16em;color:#7d878b;margin-top:10px;}

/* Intro/title stay restrained. */
.stage[data-type="cinematic"] .bg{filter:brightness(.66) saturate(.8)!important;}
.stage[data-type="title"] .bg{filter:brightness(.42) saturate(.68)!important;}

@keyframes emergencyBreath{0%,100%{opacity:.55}50%{opacity:1}}
@media(max-width:380px){
  .dlg span{font-size:17px!important;}
  .speaker-focus{height:34%;top:32%;}
}
@media(prefers-reduced-motion:reduce){.scene-emergency:before{animation:none!important}.speaker-focus{transition:none!important}}