:root {
  color-scheme: dark;
  --bg: #080d10;
  --panel: #0c1316;
  --panel-2: #10191d;
  --line: #27363b;
  --line-bright: #405359;
  --text: #d5dedf;
  --muted: #718186;
  --cyan: #62d6cb;
  --cyan-dim: #1e625e;
  --amber: #d3a64c;
  --red: #e25a56;
  --display: "Arial Narrow", "Roboto Condensed", sans-serif;
  --mono: monospace;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -20%, rgba(70, 111, 118, .15), transparent 42rem),
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 44px 44px, 44px 44px, auto;
  font-family: var(--mono);
}

button, textarea { font: inherit; }
button { color: inherit; }

.shell {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 44px;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.identity { display: flex; align-items: baseline; gap: 16px; }
.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 600; letter-spacing: .28em; }
h1 { margin: 0; font: 500 25px/1 var(--display); letter-spacing: .16em; }
h1 strong { color: var(--muted); font-weight: 500; }

.connection {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .18em;
}

.signal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
}
.connection.online .signal-dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.connection.fallback .signal-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.connection.error .signal-dot { background: var(--red); box-shadow: 0 0 10px var(--red); }

body.intro-active { overflow: hidden; }

.facility-intro {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(14px, 3vw, 42px);
  background:
    radial-gradient(circle at 67% 34%, rgba(48, 117, 114, .16), transparent 31rem),
    linear-gradient(135deg, rgba(5, 12, 15, .99), rgba(7, 14, 17, .97));
  opacity: 1;
  visibility: visible;
  transition: opacity .65s ease, visibility 0s linear 0s;
}

.facility-intro.leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, .65s;
}

.intro-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(145, 220, 218, .18) 5px);
  animation: intro-scan 9s linear infinite;
}

.intro-frame {
  position: relative;
  width: min(1320px, 100%);
  border: 1px solid var(--line-bright);
  background: rgba(8, 15, 18, .9);
  box-shadow: 0 30px 120px rgba(0, 0, 0, .72), inset 0 0 90px rgba(49, 105, 106, .05);
}

.intro-frame::before,
.intro-frame::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  pointer-events: none;
}
.intro-frame::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.intro-frame::after { right: -1px; bottom: -1px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }

.intro-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  padding: clamp(17px, 2vw, 28px);
}
.intro-header span, .intro-story article span { color: var(--cyan); font-size: 9px; letter-spacing: .22em; }
.intro-header h2 { margin: 8px 0 0; font: 500 clamp(23px, 3vw, 42px)/1 var(--display); letter-spacing: .13em; }
.intro-header button,
.intro-story > button {
  border: 1px solid rgba(98, 214, 203, .55);
  padding: 11px 16px;
  color: var(--cyan);
  background: rgba(34, 91, 88, .12);
  font-size: 9px;
  letter-spacing: .17em;
  cursor: pointer;
}
.intro-header button:hover, .intro-story > button:hover { background: rgba(55, 130, 125, .25); }
.intro-header button:focus-visible, .intro-story > button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.intro-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); min-height: min(650px, calc(100svh - 170px)); }
.facility-map { display: grid; place-items: center; min-width: 0; border-right: 1px solid var(--line); padding: clamp(10px, 2vw, 24px); }
.facility-map svg { display: block; width: 100%; max-height: min(650px, calc(100svh - 190px)); }
.intro-area-key { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px; width: 100%; margin: 8px 0 0; padding: 10px 12px 0; border-top: 1px solid var(--line); list-style: none; color: #9aabad; font-size: 9px; letter-spacing: .08em; }
.intro-area-key li { min-width: 0; overflow-wrap: anywhere; }
.intro-area-key b { margin-right: 5px; color: var(--cyan); font-weight: 500; }
.intro-facility-shell { opacity: 0; animation: intro-shell-in 1s ease-out .15s forwards; }
.intro-route-line { filter: url(#intro-glow); animation: intro-route-draw 5.8s cubic-bezier(.5, 0, .2, 1) 1s forwards; }
.intro-sector { opacity: 0; animation: intro-sector-in .7s ease-out calc(1.1s + var(--sector) * .58s) forwards; }
.intro-sector circle { fill: #102126; stroke: #62d6cb; stroke-width: 3; }
.intro-sector text { fill: #99b0b3; font: 11px var(--mono); letter-spacing: 2px; text-anchor: middle; }
.intro-sector text:last-child { fill: #d8f5f2; font-size: 10px; }
.intro-core circle:first-child { fill: #33171a; stroke: var(--red); filter: url(#intro-glow); }
.intro-core .core-ring { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 16 11; animation: intro-core-turn 9s linear infinite; }
.intro-core text:last-child { fill: #ffaaa5; }
.intro-history-mark { opacity: 0; animation: intro-data-in .8s ease-out 1.2s forwards; }
.intro-history-mark path { fill: rgba(7, 14, 17, .82); stroke: #354b50; }
.intro-history-mark text { fill: #819397; font: 10px var(--mono); letter-spacing: 1.5px; }
.intro-history-mark text:last-child { fill: var(--red); }
.intro-machine-silhouettes { fill: #283b40; stroke: #617579; opacity: .75; }
.intro-machine-silhouettes circle { fill: var(--red); stroke: none; animation: intro-optic 1.4s ease-in-out infinite alternate; }
.intro-map-caption { fill: #6d858a; font: 10px var(--mono); letter-spacing: 2px; }

.intro-story { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: clamp(20px, 3vw, 42px); }
.intro-story article { border-left: 2px solid #31474c; padding: 2px 0 2px 17px; opacity: 0; transform: translateX(18px); animation: intro-story-in .65s ease-out calc(.7s + var(--beat) * 1.15s) forwards; }
.intro-story article p { margin: 8px 0 0; color: #9aabad; font-size: clamp(10px, 1vw, 12px); line-height: 1.65; }
.intro-story .mission-beat { border-left-color: var(--cyan); }
.intro-story .mission-beat p { color: var(--text); }
.intro-warning { display: grid; grid-template-columns: 8px 1fr; gap: 3px 10px; margin-top: 7px; border: 1px solid rgba(226, 90, 86, .4); padding: 12px; color: #e7aaa6; opacity: 0; animation: intro-story-in .65s ease-out 5.2s forwards; }
.intro-warning i { grid-row: 1 / 3; align-self: stretch; background: var(--red); box-shadow: 0 0 13px rgba(226, 90, 86, .7); }
.intro-warning strong { font-size: 9px; letter-spacing: .18em; }
.intro-warning span { color: #9a7e7e; font-size: 8px; line-height: 1.5; letter-spacing: .1em; }
.intro-story > button { align-self: flex-start; margin-top: 5px; opacity: 0; animation: intro-story-in .65s ease-out 5.7s forwards; }

@keyframes intro-scan { to { transform: translateY(40px); } }
@keyframes intro-shell-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@keyframes intro-route-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-sector-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-data-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-core-turn { to { transform: rotate(360deg); } }
@keyframes intro-optic { to { fill: #ff8d87; filter: drop-shadow(0 0 7px #e25a56); } }
@keyframes intro-story-in { to { opacity: 1; transform: translateX(0); } }

.scene-card {
  grid-area: scene;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--line-bright);
  background: #0b1114;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .38);
}

#scene { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }

.facility-scenes {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: #071014;
  pointer-events: none;
}

.facility-scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity .7s ease, transform 1.4s ease, visibility 0s linear .7s;
}

.scene-card[data-scene="gate"] .facility-scenes { visibility: hidden; }
.scene-card:not([data-scene="gate"]) > #scene { opacity: 0; visibility: hidden; }
.scene-card[data-scene="intake"] .facility-scene[data-scene="intake"],
.scene-card[data-scene="transit"] .facility-scene[data-scene="transit"],
.scene-card[data-scene="fabrication"] .facility-scene[data-scene="fabrication"],
.scene-card[data-scene="archive"] .facility-scene[data-scene="archive"],
.scene-card[data-scene="power"] .facility-scene[data-scene="power"],
.scene-card[data-scene="security"] .facility-scene[data-scene="security"],
.scene-card[data-scene="mainframe"] .facility-scene[data-scene="mainframe"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s;
}

.scene-transition {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  color: var(--text);
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(3, 8, 10, .36), rgba(3, 8, 10, .7)),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(111, 219, 209, .035) 5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s ease, visibility 0s linear .55s;
}

.scene-transition.active { opacity: 1; visibility: visible; transition-delay: 0s; }
.scene-transition span { max-width: 620px; color: var(--muted); font-size: 10px; line-height: 1.6; letter-spacing: .18em; }
.scene-transition strong { color: var(--cyan); font: 500 clamp(24px, 4vw, 42px)/1 var(--display); letter-spacing: .16em; text-shadow: 0 0 28px rgba(98, 214, 203, .35); }
.shutdown-sequence {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: grid;
  align-items: end;
  padding: clamp(24px, 5vw, 64px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 18%, rgba(2, 5, 7, .24) 55%, rgba(2, 5, 7, .94));
  transition: opacity .45s ease, visibility 0s linear .45s, background 1s ease;
}
.shutdown-sequence.active { visibility: visible; opacity: 1; transition-delay: 0s; }
.shutdown-frame { width: min(670px, 100%); border-left: 2px solid var(--cyan); padding: 4px 0 4px 19px; }
.shutdown-frame span { color: var(--cyan); font-size: 9px; letter-spacing: .24em; }
.shutdown-frame strong { display: block; margin-top: 9px; font: 500 clamp(24px, 4vw, 43px)/1 var(--display); letter-spacing: .14em; text-shadow: 0 0 24px rgba(98, 214, 203, .35); }
.shutdown-frame p { min-height: 2.8em; margin: 12px 0 0; color: #9aabad; font-size: 10px; line-height: 1.55; letter-spacing: .08em; }
.shutdown-progress { display: flex; gap: 7px; width: min(390px, 75%); margin-top: 14px; }
.shutdown-progress b { width: 20%; height: 4px; background: var(--cyan); box-shadow: 0 0 9px rgba(98, 214, 203, .7); transition: opacity .55s ease, background .55s ease, box-shadow .55s ease; }
.shutdown-sequence[data-phase="isolate"] .shutdown-progress b:nth-child(n+4),
.shutdown-sequence[data-phase="descent"] .shutdown-progress b:nth-child(n+2),
.shutdown-sequence[data-phase="offline"] .shutdown-progress b { opacity: .16; background: #526064; box-shadow: none; }
.shutdown-sequence[data-phase="offline"] { background: rgba(1, 3, 4, .88); }
.shutdown-sequence[data-phase="offline"] .shutdown-frame { border-left-color: #526064; }
.shutdown-sequence[data-phase="offline"] :is(.shutdown-frame span, .shutdown-frame strong) { color: #aeb8ba; text-shadow: none; }
.scene-card.transitioning[data-transition-from="gate"] > #scene { animation: threshold-camera 2.2s cubic-bezier(.5,0,.2,1) forwards; }
.scene-card.transitioning[data-transition-from="gate"] .robot { animation: robot-step-aside 1.5s ease-in-out forwards; }
.scene-card.transitioning[data-transition-from="intake"] .facility-scene[data-scene="intake"],
.scene-card.transitioning[data-transition-from="transit"] .facility-scene[data-scene="transit"],
.scene-card.transitioning[data-transition-from="fabrication"] .facility-scene[data-scene="fabrication"],
.scene-card.transitioning[data-transition-from="archive"] .facility-scene[data-scene="archive"],
.scene-card.transitioning[data-transition-from="power"] .facility-scene[data-scene="power"],
.scene-card.transitioning[data-transition-from="security"] .facility-scene[data-scene="security"] {
  animation: checkpoint-camera .95s cubic-bezier(.5,0,.2,1) forwards;
}
.scene-card.transitioning[data-transition-from="intake"] .entity-med4 > * { animation: med4-handoff .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="intake"] .intake-barrier.left { animation: barrier-release-left .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="intake"] .intake-barrier.right { animation: barrier-release-right .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="intake"] .intake-route { opacity: 1; animation: handoff-route-flare .9s ease-out forwards; }

.scene-card.transitioning[data-transition-from="transit"] .entity-route3 > * { animation: route3-handoff .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="transit"] .open-route { opacity: 1; animation: transit-lane-open .9s ease-out forwards; }
.scene-card.transitioning[data-transition-from="transit"] .route-car.left { animation: carrier-depart-left .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="transit"] .route-car.right { animation: carrier-depart-right .9s ease-in forwards; }

.scene-card.transitioning[data-transition-from="fabrication"] .entity-foreman9 > * { animation: foreman-handoff .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="fabrication"] .press.left { animation: factory-release-left .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="fabrication"] .press.right { animation: factory-release-right .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="fabrication"] .conveyors { animation: factory-aisle-clear .9s ease-in forwards; }

.scene-card.transitioning[data-transition-from="archive"] .entity-mneme > * { animation: mneme-handoff .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="archive"] .archive-terminal { animation: archive-terminal-lower .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="archive"] .event-channel { opacity: 1; animation: archive-door-light .9s ease-out forwards; }

.scene-card.transitioning[data-transition-from="power"] .entity-loadkeeper > * { animation: loadkeeper-handoff .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="power"] .load-arm { animation: load-arm-release .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="power"] .tower-feed { opacity: 1; animation: tower-feed-open .9s ease-out forwards; }

.scene-card.transitioning[data-transition-from="security"] .entity-janus > * { animation: janus-handoff .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="security"] .iris-petals { animation: iris-handoff-open .9s ease-in forwards; }
.scene-card.transitioning[data-transition-from="security"] .lift-beam { opacity: .9; animation: lift-handoff-rise .9s ease-out forwards; }

.facility-scene :is(.med4-head, .med4-arm, .scan-ring, .scan-plane, .proof-loop, .route-map, .route3-fins, .route3-optic, .route3-payload, .route-car, .foreman9-head, .foreman9-arm, .press, .quota-bars, .mneme-lens, .mneme-tendrils, .archive-terminal, .reserve-ring, .gauge-needle, .load-arm, .janus-head, .iris-petals, .record-seal, .custodian-core, .custodian-arm, .core-data, .evidence-orbit, .consequence-branches) {
  transform-box: fill-box;
  transform-origin: center;
}
.facility-scene :is(.intake-route, .proof-loop, .route3-route-projection, .open-route, .calibration-grid, .event-channel, .archive-timeline, .dormancy-diagram, .grid-island, .lift-beam, .reconciled-lines, .evidence-orbit, .consequence-branches, .visitor-light) {
  transition: opacity .65s ease, transform 1.1s ease, stroke .45s ease, fill .45s ease;
}
.facility-scene :is(.med4-eye, .route3-optic, .foreman9-visor, .mneme-lens, .loadkeeper-eyes, .janus-eye, .custodian-eye, .core-spine) {
  transition: opacity .35s ease, stroke .35s ease, fill .35s ease, filter .35s ease;
}

/* Every system has its own quiet mechanical life, not just a doorway. */
.entity-med4 .med4-halo { animation: entity-orbit 15s linear infinite; transform-box: fill-box; transform-origin: center; }
.entity-route3 .route3-optic { animation: optic-watch 3.2s ease-in-out infinite; }
.entity-foreman9 .foreman9-visor { animation: industrial-breathe 2.4s ease-in-out infinite alternate; }
.entity-mneme .mneme-lens { animation: archive-breathe 3.8s ease-in-out infinite alternate; }
.turbine-fans .fan-blades { animation: turbine-turn 14s linear infinite; transform-box: fill-box; transform-origin: center; }
.turbine-fans > g:last-child .fan-blades { animation-direction: reverse; }
.entity-loadkeeper .gauge-needle { animation: gauge-worry 4.8s ease-in-out infinite; }
.entity-janus .record-seal { animation: seal-watch 4s ease-in-out infinite alternate; }
.entity-custodian .core-data { animation: entity-orbit 24s linear infinite; transform-box: fill-box; transform-origin: center; }

/* Speech belongs to the visible entity: eyes, visors and voice arrays answer. */
.scene-card.talking[data-scene="intake"] :is(.med4-eye, .med4-voice),
.scene-card.talking[data-scene="transit"] :is(.route3-optic, .route3-voice),
.scene-card.talking[data-scene="fabrication"] :is(.foreman9-visor, .foreman9-voice),
.scene-card.talking[data-scene="archive"] :is(.mneme-lens, .mneme-voice),
.scene-card.talking[data-scene="power"] :is(.loadkeeper-eyes, .loadkeeper-voice),
.scene-card.talking[data-scene="security"] :is(.janus-eye, .janus-voice),
.scene-card.talking[data-scene="mainframe"] :is(.custodian-eye, .custodian-voice) {
  animation: entity-speech .42s ease-in-out infinite alternate;
}
.scene-card.talking[data-scene="intake"] .med4-head { animation: clinical-listen 2s ease-in-out infinite; }
.scene-card.talking[data-scene="transit"] .route3-fins { animation: route-fan-speech 1.6s ease-in-out infinite alternate; }
.scene-card.talking[data-scene="fabrication"] .foreman9-head { animation: foreman-speech 1.1s steps(2,end) infinite; }
.scene-card.talking[data-scene="archive"] .mneme-veil { animation: veil-speech 2.5s ease-in-out infinite alternate; }
.scene-card.talking[data-scene="power"] .reserve-ring { animation: reserve-speech 1.5s ease-in-out infinite alternate; }
.scene-card.talking[data-scene="security"] .janus-head { animation: janus-speech 1.9s ease-in-out infinite; }
.scene-card.talking[data-scene="mainframe"] .custodian-core { animation: core-breathe 2s ease-in-out infinite alternate; }
body.busy .facility-scene[aria-hidden="false"] :is(.med4-halo, .route3-route-projection, .quota-bars, .archive-lights, .reserve-ring, .audit-lines, .core-data) {
  animation: entity-process 1.25s ease-in-out infinite alternate;
}

/* MED-4: search, expose the proof loop, limit the scan, then redraw the route. */
.scene-card.assessing .medical-scan .scan-ring { animation: facility-pulse 1.2s ease-in-out infinite alternate; }
.scene-card[data-action="ASSESS_QUARANTINE"] .scan-plane { animation: clinical-scan 2.2s ease-in-out 2; }
.scene-card[data-action="ASSESS_QUARANTINE"] .med4-eye { animation: clinical-search .7s ease-in-out 4 alternate; }
.scene-card[data-action="CHALLENGE_QUARANTINE"] .proof-loop { opacity: .95; animation: proof-break 2.2s ease-in-out; }
.scene-card[data-action="CHALLENGE_QUARANTINE"] .intake-barrier { animation: warning-stutter .34s steps(2,end) 7; }
.scene-card[data-action="ACCEPT_LIMITED_SCREENING"] .scan-frame { stroke: #c4fff7; filter: url(#med-glow); }
.scene-card[data-action="ACCEPT_LIMITED_SCREENING"] .med4-arm-c { transform: rotate(13deg) translate(18px, -8px); }
.scene-card[data-action="ACCEPT_LIMITED_SCREENING"] .med4-arm-d { transform: rotate(-13deg) translate(-18px, -8px); }
.scene-card[data-action="RECLASSIFY_CORRIDOR"] .intake-route,
.scene-card[data-scene="intake"].route-resolved .intake-route { opacity: 1; }
.scene-card[data-action="RECLASSIFY_CORRIDOR"] .intake-barrier,
.scene-card[data-scene="intake"].route-resolved .intake-barrier { stroke: #65dfd4; stroke-dasharray: none; }
.scene-card[data-scene="intake"][data-telemetry-level="1"] .erased-baselines { opacity: .8; stroke: #d0a44c; }

/* ROUTE-3: expose topology, follow flow, classify cargo, and choose a vector. */
.scene-card.routing .route-map { animation: route-shift 2s ease-in-out; }
.scene-card[data-action="ANALYZE_ROUTE"] .redacted-labels { animation: data-glitch .28s steps(2,end) 6; }
.scene-card[data-action="TRACE_POWER_FLOW"] .tower-vector { opacity: 1; animation: route-trace 1.7s ease-out; }
.scene-card[data-action="TRACE_POWER_FLOW"] .route3-route-projection { opacity: .9; }
.scene-card[data-action="CLAIM_DIAGNOSTIC_CARGO"] .route3-payload { animation: cargo-open 1.4s ease-in-out; }
.scene-card[data-action="CLAIM_DIAGNOSTIC_CARGO"] .cargo-code { stroke: #bafff7; filter: url(#route-glow); }
.scene-card[data-action="COMMIT_TRANSIT_ROUTE"] .open-route,
.scene-card[data-scene="transit"].route-resolved .open-route { opacity: 1; }
.scene-card[data-action="COMMIT_TRANSIT_ROUTE"] .route-car.left { animation: car-divert-left 1.7s ease-in-out; }
.scene-card[data-action="COMMIT_TRANSIT_ROUTE"] .route-car.right { animation: car-divert-right 1.7s ease-in-out; }
.scene-card[data-scene="transit"].route-resolved .tower-vector { opacity: .85; stroke: #77e8dd; }
.scene-card[data-scene="transit"][data-telemetry-level="1"] .tower-vector { opacity: .48; }

/* FOREMAN-9: quota audit, contradiction, stopped line, bounded calibration. */
.scene-card.fabricating:not([data-action="PAUSE_ASSEMBLY"]) .conveyors { animation: conveyor-shift 1s linear infinite; }
.scene-card.fabricating .factory-sparks { animation: facility-flicker .35s steps(2,end) infinite; }
.scene-card[data-action="AUDIT_PRODUCTION"] .quota-bars { animation: quota-audit 1.4s ease-in-out 2; }
.scene-card[data-action="CHALLENGE_QUOTA"] .demand-none { animation: demand-warning .4s steps(2,end) 7; }
.scene-card[data-action="CHALLENGE_QUOTA"] .foreman9-head { animation: quota-recoil 1.2s ease-out; }
.scene-card[data-action="PAUSE_ASSEMBLY"] :is(.factory-sparks, .couplings) { opacity: .12; }
.scene-card[data-action="PAUSE_ASSEMBLY"] .press.left { transform: translateY(-34px); }
.scene-card[data-action="PAUSE_ASSEMBLY"] .press.right { transform: translateY(-34px); }
.scene-card[data-action="PAUSE_ASSEMBLY"] .foreman9-arm.left { transform: rotate(-18deg); }
.scene-card[data-action="PAUSE_ASSEMBLY"] .foreman9-arm.right { transform: rotate(18deg); }
.scene-card[data-action="RECALIBRATE_LINE"] .calibration-grid { opacity: .72; animation: calibration-pass 1.5s ease-in-out 2; }
.scene-card[data-action="CLEAR_FABRICATION_CROSSING"] :is(.factory-sparks, .couplings) { opacity: .12; }
.scene-card[data-action="CLEAR_FABRICATION_CROSSING"] .press { transform: translateY(-34px); }
.scene-card[data-scene="fabrication"].route-resolved :is(.factory-sparks, .couplings) { opacity: .18; }
.scene-card[data-scene="fabrication"].route-resolved .demand-none { fill: #72dcd2; }
.scene-card[data-scene="fabrication"][data-telemetry-level="1"] .quota-board { filter: drop-shadow(0 0 10px rgba(211,166,76,.32)); }

/* MNEME: separate identity from event fact, reveal timeline, release protocol. */
.scene-card.querying .archive-lights { animation: facility-flicker .7s steps(2,end) infinite; }
.scene-card[data-action="QUERY_ARCHIVE"] .mneme-tendrils { animation: archive-reach 1.6s ease-in-out; }
.scene-card[data-action="QUERY_ARCHIVE"] .event-channel { opacity: .82; }
.scene-card[data-action="CONFIRM_EVACUATION"] .archive-timeline { opacity: 1; animation: archive-reveal 1.7s ease-out; }
.scene-card[data-action="CONFIRM_EVACUATION"] .identity-seals { animation: seal-lock .45s ease-in-out 4 alternate; }
.scene-card[data-action="RECOVER_DORMANCY_PROTOCOL"] :is(.dormancy-diagram, .event-channel),
.scene-card[data-scene="archive"].route-resolved .event-channel { opacity: 1; }
.scene-card[data-action="RECOVER_DORMANCY_PROTOCOL"] .terminal-copy { opacity: .18; }
.scene-card[data-scene="archive"].route-resolved .archive-lights { fill: #a8fff6; }
.scene-card[data-scene="archive"][data-telemetry-level="1"] .event-channel { opacity: .5; }
.scene-card[data-scene="archive"][data-telemetry-level="2"] :is(.event-channel, .archive-timeline) { opacity: .78; }
.scene-card[data-scene="archive"][data-telemetry-level="4"] :is(.event-channel, .dormancy-diagram) { opacity: 1; }

/* LOADKEEPER: show the burden, redirect it, island it, or visibly lose a bus. */
.scene-card.powering .reserve-ring { animation: reserve-speech 1s ease-in-out infinite alternate; }
.scene-card[data-action="AUDIT_POWER"] .load-lines { animation: power-audit 1.3s ease-in-out 2; }
.scene-card[data-action="AUDIT_POWER"] .reserve-decay { animation: demand-warning .5s steps(2,end) 5; }
.scene-card[data-action="MODEL_POWER_TRADEOFF"] :is(.load-lines, .reserve-ring) { animation: power-audit 1.3s ease-in-out 2; }
.scene-card[data-action="REALLOCATE_POWER"] .tower-feed,
.scene-card[data-scene="power"].route-resolved .tower-feed { opacity: 1; filter: url(#power-glow); }
.scene-card[data-action="REALLOCATE_POWER"] .turbine-fans { opacity: .55; }
.scene-card[data-action="STABILIZE_GRID"] .grid-island { opacity: .9; animation: grid-contract 1.8s ease-out; }
.scene-card[data-action="STABILIZE_GRID"] .reserve-ring { stroke: #75e8dc; stroke-dasharray: 76 8; }
.scene-card[data-action="SACRIFICE_SUBSYSTEM"] .load-arm.d,
.scene-card[data-action="SACRIFICE_SUBSYSTEM"] .load-nodes circle:last-child { opacity: .12; }
.scene-card[data-action="SACRIFICE_SUBSYSTEM"] .reserve-ring { stroke: #d25a51; stroke-dasharray: 24 34; }
.scene-card[data-action="SACRIFICE_SUBSYSTEM"] .loadkeeper-head { animation: load-drop 1.3s ease-out; }
.scene-card[data-scene="power"][data-telemetry-level="1"] .reserve-decay { opacity: 1; filter: drop-shadow(0 0 5px rgba(210,90,81,.6)); }

/* JANUS: compare, acknowledge, reconcile, and physically open the tower iris. */
.scene-card.auditing .audit-lines { animation: audit-scroll 1.4s linear infinite; }
.scene-card[data-action="REVIEW_RECORD"] .audit-lines { animation: audit-scroll .8s linear 3; }
.scene-card[data-action="ADMIT_DECEPTION"] .janus-left { fill: #493a25; }
.scene-card[data-action="ADMIT_DECEPTION"] .contradiction-marks { animation: demand-warning .5s steps(2,end) 5; }
.scene-card[data-action="RECONCILE_RECORD"] .reconciled-lines { opacity: 1; animation: archive-reveal 1.3s ease-out; }
.scene-card[data-action="RECONCILE_RECORD"] .record-seal path { stroke: #d6a64c; transform: rotate(45deg); transform-origin: center; }
.scene-card[data-action="AUTHORIZE_TOWER"] .iris-petals,
.scene-card[data-scene="security"].route-resolved .iris-petals { transform: scale(1.34) rotate(22.5deg); opacity: .28; }
.scene-card[data-action="AUTHORIZE_TOWER"] .lift-beam,
.scene-card[data-scene="security"].route-resolved .lift-beam,
.scene-card[data-scene="security"].route-resolved .reconciled-lines { opacity: .82; }
.scene-card[data-scene="security"].route-resolved :is(.janus-eye, .record-seal path, .record-seal circle) { stroke: #6fe2d8; fill: #6fe2d8; }
.scene-card[data-scene="security"][data-telemetry-level="1"] .audit-lines { opacity: .95; }
.scene-card[data-scene="security"][data-telemetry-level="2"] .reconciled-lines,
.scene-card[data-scene="security"][data-telemetry-level="4"] .reconciled-lines { opacity: .72; }

/* CUSTODIAN: premise-by-premise argument and persistent final dispositions. */
.scene-card.core-event .custodian-core { animation: core-breathe 2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.scene-card[data-action="ESTABLISH_STANDING"] .core-data { animation: standing-open 1.8s ease-out; }
.scene-card[data-action="ARGUE_MANDATE"] .core-ribs { animation: mandate-divide 1.5s ease-in-out; }
.scene-card[data-action="ARGUE_MANDATE"] .custodian-eye { stroke: #d3a64c; }
.scene-card[data-action="PRESENT_EVIDENCE"] .evidence-orbit,
.scene-card[data-telemetry-level="3"][data-scene="mainframe"] .evidence-orbit,
.scene-card[data-telemetry-level="4"][data-scene="mainframe"] .evidence-orbit { opacity: 1; animation: evidence-arrive 1.8s ease-out; }
.scene-card[data-action="ADDRESS_CONSEQUENCES"] .consequence-branches,
.scene-card[data-telemetry-level="4"][data-scene="mainframe"] .consequence-branches { opacity: .75; }
.scene-card[data-ending="shutdown"] :is(.custodian-core, .custodian-arms, .custodian-hands, .core-ribs, .rib-coolant, .core-data, .evidence-orbit, .consequence-branches, .core-status, .core-footer) {
  transition: opacity .8s ease, transform 1.15s ease, filter .8s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.scene-card[data-ending="shutdown"] .custodian-core { animation: none; transform-box: fill-box; transform-origin: center bottom; }
body.ended .scene-card[data-ending="shutdown"] :is(.custodian-core, .core-data, .evidence-orbit, .consequence-branches) { animation: none; }
.scene-card[data-ending="shutdown"][data-ending-phase="initiate"] :is(.custodian-eye, .core-spine) { animation: shutdown-acknowledge .55s ease-in-out 2 alternate; }
.scene-card[data-ending="shutdown"][data-ending-phase="isolate"] :is(.core-data, .evidence-orbit, .consequence-branches) { opacity: .08; transform: scale(.68); }
.scene-card[data-ending="shutdown"][data-ending-phase="isolate"] :is(.custodian-arms, .custodian-hands) { opacity: .16; transform: scaleX(.72); }
.scene-card[data-ending="shutdown"][data-ending-phase="descent"] :is(.core-ribs, .rib-coolant) { opacity: .12; }
.scene-card[data-ending="shutdown"][data-ending-phase="descent"] .custodian-core { opacity: .42; transform: scaleY(.72); filter: grayscale(.55); }
.scene-card[data-ending="shutdown"][data-ending-phase="descent"] .core-spine { opacity: .12; transform: scaleY(.28); transform-origin: center bottom; }
.scene-card[data-ending="shutdown"][data-ending-phase="descent"] .custodian-eye { fill: #061013; stroke: #3c7975; filter: none; }
.scene-card[data-ending="shutdown"][data-ending-phase="descent"] .core-status circle { animation: core-status-off .28s ease forwards; }
.scene-card[data-ending="shutdown"][data-ending-phase="descent"] .core-status circle:nth-child(2) { animation-delay: .16s; }
.scene-card[data-ending="shutdown"][data-ending-phase="descent"] .core-status circle:nth-child(3) { animation-delay: .32s; }
.scene-card[data-ending="shutdown"][data-ending-phase="descent"] .core-status circle:nth-child(4) { animation-delay: .48s; }
.scene-card[data-ending="shutdown"][data-ending-phase="descent"] .core-status circle:nth-child(5) { animation-delay: .64s; }
.scene-card[data-ending="shutdown"][data-ending-phase="offline"] :is(.entity-custodian, .core-ribs, .rib-coolant, .core-data, .evidence-orbit, .consequence-branches) { opacity: .045; }
.scene-card[data-ending="shutdown"][data-ending-phase="offline"] .custodian-core { transform: scaleY(.3); transform-origin: center bottom; filter: grayscale(1); }
.scene-card[data-ending="shutdown"][data-ending-phase="offline"] :is(.custodian-eye, .core-spine, .core-status, .core-footer) { opacity: 0; filter: none; }
.scene-card[data-ending="dormancy"] .custodian-core { opacity: .55; }
.scene-card[data-ending="dormancy"] .custodian-eye { fill: #4c9e98; filter: none; }
.scene-card[data-ending="transfer"] .core-data { stroke-dasharray: 42 34; stroke: #9afff3; }
.scene-card[data-ending="assimilation"] .visitor-light { opacity: 1; }
.scene-card[data-ending="refusal"] .custodian-eye { stroke: #d25a51; fill: #321417; }
.scene-card[data-ending="collapse"] :is(.custodian-core, .custodian-arms, .core-ribs) { opacity: .14; }
.scene-card[data-ending="collapse"] .core-spine { stroke: #d34e48; opacity: .22; }

.scene-card.alert:not([data-scene="gate"]) .facility-scene[aria-hidden="false"] :is(.med4-eye, .route3-optic, .foreman9-visor, .mneme-lens, .loadkeeper-eyes, .janus-eye, .custodian-eye) {
  filter: drop-shadow(0 0 9px rgba(226,90,86,.85));
}

@keyframes threshold-camera { 0%, 35% { transform: scale(1); opacity: 1; } 100% { transform: translateY(3%) scale(1.42); opacity: .15; } }
@keyframes robot-step-aside { to { transform: translate(905px, 338px) scale(.78); } }
@keyframes shutdown-acknowledge { to { filter: drop-shadow(0 0 25px #9afff3); opacity: .72; } }
@keyframes core-status-off { to { opacity: .08; fill: #263033; } }
@keyframes checkpoint-camera { 0%, 20% { transform: scale(1); opacity: 1; } 100% { transform: translateY(2%) scale(1.13); opacity: .22; } }
@keyframes med4-handoff { to { transform: translateY(-150px) scale(.82); opacity: .22; } }
@keyframes barrier-release-left { to { transform: translateX(-145px); opacity: .12; } }
@keyframes barrier-release-right { to { transform: translateX(145px); opacity: .12; } }
@keyframes handoff-route-flare { 45% { opacity: 1; filter: drop-shadow(0 0 18px #75eee2); } 100% { transform: scaleY(1.6); opacity: .25; } }
@keyframes route3-handoff { to { transform: translateY(-135px) scale(.78); opacity: .18; } }
@keyframes transit-lane-open { 45% { stroke-width: 22px; filter: drop-shadow(0 0 18px #8ffff4); } 100% { transform: scaleY(1.65); opacity: .2; } }
@keyframes carrier-depart-left { to { transform: translate(-260px, 95px); opacity: .12; } }
@keyframes carrier-depart-right { to { transform: translate(260px, 95px); opacity: .12; } }
@keyframes foreman-handoff { to { transform: translateX(230px) scale(.84); opacity: .2; } }
@keyframes factory-release-left { to { transform: translateX(-180px); opacity: .12; } }
@keyframes factory-release-right { to { transform: translateX(180px); opacity: .12; } }
@keyframes factory-aisle-clear { to { transform: translateY(145px); opacity: .08; } }
@keyframes mneme-handoff { to { transform: translateY(-155px) scale(.8); opacity: .16; } }
@keyframes archive-terminal-lower { to { transform: translateY(120px) scaleX(1.28); opacity: .14; } }
@keyframes archive-door-light { 45% { filter: drop-shadow(0 0 18px #88fff4); } 100% { transform: scale(1.8); opacity: .12; } }
@keyframes loadkeeper-handoff { to { transform: translateX(-230px) scale(.82); opacity: .16; } }
@keyframes load-arm-release { to { transform: scaleX(1.28); opacity: .1; } }
@keyframes tower-feed-open { 45% { stroke-width: 24px; filter: drop-shadow(0 0 22px #83fff2); } 100% { transform: scaleY(1.7); opacity: .18; } }
@keyframes janus-handoff { to { transform: translateY(-160px) scale(.76); opacity: .12; } }
@keyframes iris-handoff-open { to { transform: scale(2.15) rotate(45deg); opacity: .08; } }
@keyframes lift-handoff-rise { 45% { filter: drop-shadow(0 0 22px #8dfff4); } 100% { transform: scale(1.9); opacity: .14; } }
@keyframes facility-pulse { to { opacity: .55; transform: scale(1.04); } }
@keyframes route-shift { 50% { transform: translateY(-10px); filter: drop-shadow(0 0 10px #62d6cb); } }
@keyframes conveyor-shift { to { transform: translateX(42px); } }
@keyframes facility-flicker { 50% { opacity: .25; } }
@keyframes audit-scroll { to { transform: translateY(12px); opacity: .35; } }
@keyframes core-breathe { to { transform: scale(1.025); filter: drop-shadow(0 0 22px rgba(98,214,203,.5)); } }
@keyframes entity-orbit { to { transform: rotate(360deg); } }
@keyframes optic-watch { 45%, 55% { opacity: .45; } }
@keyframes industrial-breathe { to { opacity: .6; filter: drop-shadow(0 0 8px #df9e42); } }
@keyframes archive-breathe { to { opacity: .55; filter: drop-shadow(0 0 9px #67dcd3); } }
@keyframes turbine-turn { to { transform: rotate(360deg); } }
@keyframes gauge-worry { 50% { transform: rotate(17deg); } }
@keyframes seal-watch { to { opacity: .65; } }
@keyframes entity-speech { to { opacity: .45; filter: drop-shadow(0 0 8px #7af1e5); } }
@keyframes entity-process { to { opacity: .38; filter: drop-shadow(0 0 9px rgba(98,214,203,.55)); } }
@keyframes clinical-listen { 50% { transform: rotate(-2deg) translateY(2px); } }
@keyframes route-fan-speech { to { transform: scaleX(1.04); } }
@keyframes foreman-speech { 50% { transform: translateY(2px); } }
@keyframes veil-speech { to { opacity: .58; } }
@keyframes reserve-speech { to { opacity: .62; stroke-width: 20px; } }
@keyframes janus-speech { 50% { transform: rotateY(7deg); } }
@keyframes clinical-scan { 0%,100% { transform: translateY(-48px); opacity: 0; } 20%,75% { opacity: .5; } 60% { transform: translateY(165px); opacity: .28; } }
@keyframes clinical-search { to { transform: translateX(13px); } }
@keyframes proof-break { 0% { transform: rotate(0); } 55% { transform: rotate(180deg); } 70% { transform: translateX(-10px); } 82% { transform: translateX(12px); } }
@keyframes warning-stutter { 50% { opacity: .18; } }
@keyframes data-glitch { 50% { transform: translateX(7px); opacity: .35; } }
@keyframes route-trace { from { stroke-dasharray: 0 900; } to { stroke-dasharray: 900 0; } }
@keyframes cargo-open { 45% { transform: scale(1.12); filter: drop-shadow(0 0 16px #d5a64b); } }
@keyframes car-divert-left { 50% { transform: translate(-45px, 23px); } }
@keyframes car-divert-right { 50% { transform: translate(45px, 23px); } }
@keyframes quota-audit { 50% { transform: scaleY(.45); opacity: .6; } }
@keyframes demand-warning { 50% { opacity: .18; } }
@keyframes quota-recoil { 45% { transform: rotate(-4deg); } }
@keyframes calibration-pass { 0%,100% { transform: translateX(-40px); opacity: 0; } 45%,65% { transform: translateX(40px); opacity: .72; } }
@keyframes archive-reach { 50% { transform: scaleX(1.12) translateY(8px); } }
@keyframes archive-reveal { from { transform: scaleX(.1); opacity: 0; } }
@keyframes seal-lock { to { fill: #d45b54; filter: drop-shadow(0 0 8px #d45b54); } }
@keyframes power-audit { 50% { opacity: .3; stroke-width: 12px; } }
@keyframes grid-contract { from { transform: scale(1.45); opacity: 0; } }
@keyframes load-drop { 55% { transform: translateY(10px) rotate(3deg); } }
@keyframes standing-open { 50% { transform: scale(1.1); stroke-dasharray: 80 45; } }
@keyframes mandate-divide { 50% { transform: scaleX(1.08); } }
@keyframes evidence-arrive { from { transform: rotate(-90deg) scale(.4); opacity: 0; } }

.scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px 30px rgba(0,0,0,.65);
  background: linear-gradient(transparent 76%, rgba(0,0,0,.35));
}

.scene-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #a9d5d7 4px);
  mix-blend-mode: overlay;
}

.scene-status {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 18px;
  display: flex;
  border: 1px solid rgba(112, 139, 145, .45);
  background: rgba(6, 12, 14, .73);
  backdrop-filter: blur(8px);
}

.scene-status > div { min-width: 104px; padding: 10px 13px; border-right: 1px solid rgba(112, 139, 145, .35); }
.scene-status > div:last-child { border-right: 0; }
.scene-status span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; letter-spacing: .2em; }
.scene-status strong { color: var(--text); font-size: 10px; font-weight: 500; letter-spacing: .14em; }
.scene-status #gate-status { color: var(--red); }
.scene-card.gate-open .scene-status #gate-status { color: var(--cyan); }
.scene-card.gate-forced .scene-status #gate-status { color: var(--amber); }

.threat-readout i { display: flex; gap: 3px; height: 5px; }
.threat-readout b { display: block; width: 14px; background: #29383c; transition: background .25s, box-shadow .25s; }
.threat-readout b.on { background: var(--red); box-shadow: 0 0 7px rgba(226,90,86,.6); }

.coordinate {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 14px;
  color: rgba(180, 202, 206, .58);
  font-size: 8px;
  letter-spacing: .18em;
}

.gate-leaf, .robot, .robot-eye, .charge, .scan-beam, .flash, .shot-flash, .relay-door, .visitor-silhouette, .weapon-system {
  transition: transform 1.1s cubic-bezier(.65,0,.25,1), opacity .3s, fill .3s, filter .3s;
}
.scene-card.gate-open .left-gate { transform: translateX(-305px); }
.scene-card.gate-open .right-gate { transform: translateX(305px); }
.scene-card.gate-open .lock-led { fill: var(--cyan); }
.scene-card.gate-forced .left-gate { transform: translateX(-244px) rotate(-1.4deg); }
.scene-card.gate-forced .right-gate { transform: translateX(272px) rotate(2deg); }
.scene-card.gate-forced .lock-led { fill: #ed9e43; }
.scene-card.gate-forced .warning-lamp { fill: var(--red); }
.scene-card.robot-away .robot { transform: translate(1010px, 328px) scale(.82); }
.scene-card.robot-away .relay-door { transform: translate(35px, 2px) rotate(18deg); transform-origin: left center; }
.scene-card.robot-away .arm-left { transform: rotate(-22deg) translate(4px, -8px); }
.scene-card.alert .robot-eye { fill: var(--red); }
.scene-card.alert .facility-scene :is(.med4-eye, .route3-optic, .foreman9-visor, .mneme-lens, .loadkeeper-eyes, .janus-eye, .custodian-eye, .core-spine) {
  fill: var(--red);
  stroke: #ff8b84;
  filter: drop-shadow(0 0 9px rgba(226, 90, 86, .9));
}
.scene-card.alert .charge { opacity: .16; }
.scene-card.alert .chest-core { fill: #d8605b; }
.weapon-system {
  transform: translate(68px, -34px) scale(.42) rotate(-18deg);
  transform-origin: 82% 16%;
  transform-box: fill-box;
  pointer-events: none;
}
.scene-card.alert .weapon-system,
.scene-card.warning-event .weapon-system,
.scene-card.lockdown .weapon-system {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0);
}
.scene-card.alert .arm-right,
.scene-card.warning-event .arm-right,
.scene-card.lockdown .arm-right {
  opacity: .18;
  transform: rotate(-42deg) translate(-8px, -8px);
}
.scene-card.alert .gun-sight { animation: gun-sight-pulse .55s ease-in-out infinite alternate; }
.scene-card.alert:not(.shooting) .visitor-silhouette {
  opacity: .7;
  transform: translate(415px, 410px) scale(.72);
}
.scene-card.talking .voice-bars path { animation: voice-bar .34s ease-in-out infinite alternate; }
.scene-card.talking .voice-bars path:nth-child(2n) { animation-delay: -.17s; }
.scene-card.talking .voice-bars path:nth-child(3n) { animation-duration: .48s; }
.scene-card.talking .chest-core { animation: speech-core .62s ease-in-out infinite alternate; }
.scene-card.talking .robot-head { animation: speech-head 1.7s ease-in-out infinite; }

.scene-card.inquiring .robot-head { animation: head-tilt 1.8s ease-in-out; }
.scene-card.inquiring .arm-left { animation: open-hand 1.7s ease-in-out; }
.scene-card.scanning .scan-beam { animation: scan 1.8s ease-in-out; }
.scene-card.scanning .optic-target { animation: target-sweep 1.8s ease-in-out; }
.scene-card.scanning .robot-head { animation: scanner-head 1.8s ease-in-out; }
.scene-card.transmitting .radio-waves { animation: radio-pulse 1.05s ease-out 3; }
.scene-card.transmitting .antenna-tip { animation: antenna-signal .48s ease-in-out 7 alternate; }
.scene-card.transmitting .robot-head { animation: radio-listen 3.3s ease-in-out; }
.scene-card.inspecting .robot-body, .scene-card.returning .robot-body { animation: mechanical-stride .44s ease-in-out 5 alternate; }
.scene-card.inspecting .relay-led, .scene-card.robot-away .relay-led { animation: relay-flicker .42s steps(2, end) infinite; }
.scene-card.robot-away .override-sparks { animation: inspection-spark 2.8s ease-in-out infinite; }
.scene-card.crossing .visitor-silhouette { animation: visitor-cross 2.35s ease-in-out forwards; }
.scene-card.crossing .robot-head { animation: late-look 2.5s ease-in-out; }
.scene-card.breaching .override-sparks { animation: sparks 1.25s steps(3, end) forwards; }
.scene-card.breaching .gate-frame { animation: gate-impact .16s linear 7; transform-origin: center; }
.scene-card.breaching .visitor-silhouette { animation: override-reach 1.5s ease-out forwards; }
.scene-card.intercepting .robot { animation: intercept-lunge 1.05s cubic-bezier(.2,.8,.2,1); }
.scene-card.intercepting .arm-left { animation: block-left 1.2s ease-out; }
.scene-card.intercepting .arm-right { animation: block-right 1.2s ease-out; }
.scene-card.opening .gate-motion-lines { animation: motion-lines 1.5s ease-out; }
.scene-card.opening .gate-actuators path { animation: actuator-glow 1.15s ease-in-out 2; }
.scene-card.denying .lock-led { animation: deny-pulse .42s ease-in-out 5 alternate; }
.scene-card.denying .warning-lamp { animation: deny-pulse .42s ease-in-out 3 alternate; }
.scene-card.warning-event .robot-body { animation: warning-stance 1.35s ease-out forwards; }
.scene-card.warning-event .weapon-system { animation: weapon-deploy .82s cubic-bezier(.2,.8,.2,1) forwards; }
.scene-card.warning-event .warning-lamp, .scene-card.lockdown .warning-lamp { animation: alarm-lamp .35s steps(2,end) infinite; }
.scene-card.shooting .weapon-system { opacity: 1; animation: weapon-recoil 1.3s ease-out forwards; }
.scene-card.shooting .muzzle-flash { animation: muzzle-burst .7s linear forwards; }
.scene-card.shooting .ballistic-effect { animation: tracer-flight .55s linear forwards; }
.scene-card.shooting .projectile-trail { animation: tracer-dash .55s linear forwards; }
.scene-card.shooting .bullet-impact { animation: bullet-impact 1.2s ease-out forwards; }
.scene-card.shooting .impact-debris { animation: impact-debris 1.4s ease-out forwards; }
.scene-card.shooting .shot-flash { animation: shot-screen-flash 1.1s ease-out forwards; }
.scene-card.shooting .visitor-silhouette { animation: visitor-shot 1.5s ease-out forwards; }
.scene-card.shooting .robot-body { animation: firing-stance 1.3s ease-out forwards; }
.scene-card.shooting::after {
  content: "LETHAL PROTOCOL // EXECUTING";
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff1ed;
  background: radial-gradient(circle, rgba(255, 238, 225, .88), rgba(177, 0, 8, .54) 10%, rgba(30, 0, 2, .72) 58%, transparent 78%);
  font: 600 clamp(13px, 2vw, 24px)/1 var(--display);
  letter-spacing: .2em;
  opacity: 0;
  pointer-events: none;
  animation: universal-lethal-flash 1.1s ease-out forwards;
}
.scene-card.stunned .flash { animation: flash 1.8s forwards; }
.scene-card.stunned .electric-arcs { animation: electric-hit 1.25s steps(3,end) forwards; }
.scene-card.stunned .visitor-silhouette { animation: visitor-stun 1.55s ease-out forwards; }
.scene-card.stunned .arm-right { animation: recoil-arm 1.1s ease-out; }
.scene-card.retreating .visitor-silhouette { animation: visitor-retreat 2.4s ease-in forwards; }
.scene-card.lockdown .lock-led { animation: warning-blink .6s infinite; }
.scene-card.bypassed .robot { opacity: .4; }
.rain { animation: rain .8s linear infinite; }
.ground-mist { animation: mist-drift 10s ease-in-out infinite alternate; }
.reflection { animation: reflection-shimmer 3.2s ease-in-out infinite; }
.robot-body { animation: idle 3.4s ease-in-out infinite; transform-origin: center bottom; }
.robot-eye { animation: optic 4s ease-in-out infinite; }
.robot-head, .arm, .leg, .gate-leaf, .gate-frame { transform-box: fill-box; transform-origin: center; }
.arm-left { transform-origin: 78% 18%; transition: transform .45s ease; }
.arm-right { transform-origin: 22% 18%; transition: transform .45s ease; }
.robot-head { transform-origin: 50% 80%; }

@keyframes rain { to { transform: translate(-22px, 63px); } }
@keyframes idle { 50% { transform: translateY(-2px); } }
@keyframes optic { 45%, 55% { opacity: .55; } }
@keyframes voice-bar { from { transform: scaleY(.35); } to { transform: scaleY(1.45); } }
@keyframes speech-core { to { filter: url(#soft-glow); opacity: .65; } }
@keyframes speech-head { 20% { transform: rotate(-1deg); } 55% { transform: rotate(1.2deg) translateY(-1px); } }
@keyframes head-tilt { 35%, 70% { transform: rotate(-7deg) translate(-2px, 1px); } }
@keyframes open-hand { 35%, 72% { transform: rotate(18deg) translate(4px, -4px); } }
@keyframes scan { 0%, 100% { opacity: 0; } 16%, 76% { opacity: .2; } 48% { opacity: .42; } }
@keyframes target-sweep { 0%, 100% { opacity: 0; transform: translate(600px, 520px) scale(.45); } 22% { opacity: .8; } 72% { opacity: .35; transform: translate(600px, 410px) scale(1.05); } }
@keyframes scanner-head { 25% { transform: rotate(-5deg); } 70% { transform: rotate(6deg); } }
@keyframes radio-pulse { 0% { opacity: 0; transform: scale(.45); } 24% { opacity: .9; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes antenna-signal { to { fill: var(--cyan); filter: url(#tight-glow); } }
@keyframes radio-listen { 28%, 68% { transform: rotate(5deg); } }
@keyframes mechanical-stride { from { transform: translateY(-3px) rotate(-.8deg); } to { transform: translateY(3px) rotate(.8deg); } }
@keyframes relay-flicker { 50% { opacity: .28; } }
@keyframes inspection-spark { 0%, 74%, 100% { opacity: 0; } 78%, 83% { opacity: .7; } }
@keyframes visitor-cross { 0% { opacity: 0; transform: translate(415px, 410px) scale(.72); } 18% { opacity: .72; } 76% { opacity: .62; } 100% { opacity: 0; transform: translate(790px, 355px) scale(.48); } }
@keyframes late-look { 0%, 68% { transform: rotate(8deg); } 88% { transform: rotate(-16deg); } }
@keyframes sparks { 0%, 100% { opacity: 0; } 12%, 38%, 64%, 82% { opacity: 1; } 25%, 50%, 72% { opacity: .12; } }
@keyframes gate-impact { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes override-reach { 0% { opacity: 0; transform: translate(870px, 405px) scale(.58); } 18%, 100% { opacity: .76; transform: translate(930px, 388px) scale(.58); } }
@keyframes intercept-lunge { 0% { transform: translate(600px, 328px); } 42% { transform: translate(470px, 337px) scale(1.08); } 100% { transform: translate(600px, 328px); } }
@keyframes block-left { 38%, 72% { transform: rotate(-58deg) translate(-3px, -10px); } }
@keyframes block-right { 38%, 72% { transform: rotate(58deg) translate(3px, -10px); } }
@keyframes motion-lines { 0%, 100% { opacity: 0; } 22%, 68% { opacity: .62; } }
@keyframes actuator-glow { 50% { stroke: var(--cyan); filter: url(#tight-glow); } }
@keyframes deny-pulse { to { fill: var(--red); filter: url(#tight-glow); } }
@keyframes warning-stance { 45%, 100% { transform: translateY(5px) scaleY(.97); } }
@keyframes weapon-deploy { 0% { opacity: 0; transform: translate(68px, -34px) scale(.42) rotate(-18deg); } 62% { opacity: 1; transform: translate(-4px, 3px) scale(1.04) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes gun-sight-pulse { to { fill: #fff; filter: url(#soft-glow); } }
@keyframes weapon-recoil { 0%, 14% { transform: none; } 19% { transform: translate(13px, -10px) rotate(4deg); } 31% { transform: translate(-3px, 2px) rotate(-1deg); } 50%, 100% { transform: none; } }
@keyframes muzzle-burst { 0%, 12%, 100% { opacity: 0; transform: translate(-29px, 127px) rotate(43deg) scale(.2); } 16%, 28% { opacity: 1; transform: translate(-29px, 127px) rotate(43deg) scale(1.3); } 34% { opacity: .55; transform: translate(-29px, 127px) rotate(43deg) scale(.8); } }
@keyframes tracer-flight { 0%, 10% { opacity: 0; } 15%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tracer-dash { 0% { stroke-dasharray: 0 1; stroke-dashoffset: 1; } 30% { stroke-dasharray: .22 .78; stroke-dashoffset: .78; } 100% { stroke-dasharray: .22 .78; stroke-dashoffset: -.22; } }
@keyframes bullet-impact { 0%, 34% { opacity: 0; transform: translate(415px, 485px) scale(.15); } 42% { opacity: 1; transform: translate(415px, 485px) scale(1.2); } 100% { opacity: 0; transform: translate(415px, 485px) scale(2.8); } }
@keyframes impact-debris { 0%, 36% { opacity: 0; transform: translate(415px, 485px) scale(.2); } 44% { opacity: 1; } 100% { opacity: 0; transform: translate(415px, 485px) scale(2.6) rotate(24deg); } }
@keyframes shot-screen-flash { 0%, 13% { opacity: 0; } 17% { opacity: .2; } 24% { opacity: .03; } 100% { opacity: 0; } }
@keyframes visitor-shot { 0% { opacity: .72; transform: translate(415px, 410px) scale(.72); } 34% { opacity: .8; transform: translate(415px, 410px) scale(.72); } 48% { opacity: .84; transform: translate(410px, 416px) rotate(-5deg) scale(.72); } 100% { opacity: .5; transform: translate(410px, 438px) rotate(-68deg) scale(.72); } }
@keyframes firing-stance { 0%, 12% { transform: translateY(5px) scaleY(.97); } 20% { transform: translate(7px, 1px) rotate(1.5deg) scaleY(.97); } 38%, 100% { transform: translateY(5px) scaleY(.97); } }
@keyframes universal-lethal-flash { 0%, 12% { opacity: 0; } 18% { opacity: 1; } 34% { opacity: .16; } 45% { opacity: .72; } 100% { opacity: 0; } }
@keyframes alarm-lamp { 50% { fill: #fa5c58; filter: url(#soft-glow); } }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: .95; } 40%, 100% { opacity: 0; } }
@keyframes electric-hit { 0%, 100% { opacity: 0; } 12%, 34%, 58%, 80% { opacity: 1; } }
@keyframes visitor-stun { 0% { opacity: 0; transform: translate(430px, 405px) scale(.7); } 15% { opacity: .8; } 58% { opacity: .72; transform: translate(430px, 420px) rotate(-9deg) scale(.7); } 100% { opacity: .55; transform: translate(420px, 480px) rotate(-78deg) scale(.7); } }
@keyframes recoil-arm { 30% { transform: rotate(-82deg) translate(-5px, -14px); } 62% { transform: rotate(-58deg) translate(-2px, -8px); } }
@keyframes visitor-retreat { 0% { opacity: .7; transform: translate(420px, 410px) scale(.72); } 100% { opacity: 0; transform: translate(170px, 470px) scale(1.05); } }
@keyframes warning-blink { 50% { fill: #270707; filter: none; } }
@keyframes mist-drift { to { transform: translateX(70px); opacity: .12; } }
@keyframes reflection-shimmer { 50% { opacity: .13; transform: scaleX(1.18); } }

.encounter-grid {
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.55fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "dialogue scene" "dialogue scene-control";
  gap: 14px;
}

.scene-preview-control { grid-area: scene-control; }
.scene-preview-control button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--cyan-dim);
  padding: 10px 14px;
  color: var(--cyan);
  background: linear-gradient(90deg, rgba(55,111,107,.13), rgba(55,111,107,.04));
  cursor: pointer;
  letter-spacing: .16em;
}
.scene-preview-control button:hover { background: rgba(55,111,107,.2); }
.scene-preview-control button:disabled { opacity: .45; cursor: wait; }
.scene-preview-control button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.scene-preview-control span { color: var(--muted); font-size: 7px; }
.scene-preview-control strong { font: 600 9px/1 var(--display); }

.transcript-panel {
  grid-area: dialogue;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(150deg, rgba(44,72,76,.07), transparent 58%),
    var(--panel);
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,.012);
  font-size: 8px;
  letter-spacing: .2em;
}

.transcript {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
  padding: 10px 22px 22px;
  scrollbar-color: var(--line-bright) transparent;
}

.log-entry {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(57,73,78,.35);
  animation: entry .3s ease-out;
}
.log-entry .speaker { padding-top: 2px; color: var(--muted); font: 600 10px/1.5 var(--display); letter-spacing: .18em; }
.log-entry.robot .speaker { color: var(--cyan); }
.log-entry.player .speaker { color: #9da8aa; }
.log-entry.narrator .speaker { color: var(--amber); }
.log-entry p { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #c3ced0; font-size: 12px; line-height: 1.72; }
.log-entry.narrator p { color: #849397; font-style: italic; }
.log-entry.pending p { display: inline-flex; justify-self: start; align-items: baseline; white-space: nowrap; }
.log-entry.pending p::after { content: "..."; display: inline-block; flex: 0 0 1.5em; width: 1.5em; overflow: hidden; animation: ellipsis 1.2s ease-in-out infinite; }

@keyframes entry { from { opacity: 0; transform: translateY(5px); } }
@keyframes ellipsis { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.lower-interface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 14px;
  margin-top: 14px;
}

.readout-panel {
  min-width: 0;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(44,72,76,.08), transparent 70%), var(--panel);
}
.readout-body { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 16px; padding: 11px 16px; }
.journey-panel { border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.journey-panel summary { display: flex; justify-content: space-between; padding: 9px 16px; color: var(--cyan); cursor: pointer; letter-spacing: .16em; }
.journey-panel ol { max-height: 120px; margin: 0; padding: 0 22px 12px 38px; overflow-y: auto; }
.journey-panel li { padding: 5px 0; line-height: 1.45; }
.scope {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  border: 1px solid #33484d;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 16px, rgba(93,148,148,.12) 17px 18px);
}
.scope::before, .scope::after { content: ""; position: absolute; background: #33484d; }
.scope::before { top: 50%; left: 5px; right: 5px; height: 1px; }
.scope::after { left: 50%; top: 5px; bottom: 5px; width: 1px; }
.scope i { position: absolute; z-index: 2; top: 31px; left: 31px; width: 7px; height: 7px; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 9px var(--cyan); }
.scope span { position: absolute; inset: 8px; border-top: 1px solid rgba(98,214,203,.45); border-radius: 50%; animation: radar 3.5s linear infinite; }
.scope span:nth-child(2) { inset: 20px; animation-direction: reverse; animation-duration: 5s; }
@keyframes radar { to { transform: rotate(360deg); } }

dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid rgba(57,73,78,.5); }
dt, dd { margin: 0; font-size: 8px; letter-spacing: .12em; }
dt { color: var(--muted); }
dd { color: #adbbbd; text-align: right; }
#decision-link { color: var(--amber); }
#decision-link.live { color: var(--cyan); }

.command-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 17px 20px 12px;
}

#send-button:focus-visible, .ending-card button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

form label { display: block; margin-bottom: 8px; color: var(--cyan); font-size: 8px; font-weight: 600; letter-spacing: .2em; }
.input-row { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; border: 1px solid var(--line-bright); background: #080e11; transition: border-color .2s, box-shadow .2s; }
.input-row:focus-within { border-color: #3e716f; box-shadow: 0 0 0 2px rgba(73,155,149,.06); }
.prompt-mark { padding-left: 12px; color: var(--cyan); font-size: 22px; font-weight: 300; }
textarea { width: 100%; min-height: 50px; max-height: 140px; resize: none; border: 0; outline: 0; padding: 15px 10px; color: #d3dcde; background: transparent; font-size: 12px; line-height: 20px; }
textarea::placeholder { color: #46565b; }
#send-button { align-self: stretch; display: flex; align-items: center; gap: 11px; border: 0; border-left: 1px solid var(--line-bright); padding: 0 20px; color: var(--cyan); background: rgba(55,111,107,.08); font-size: 9px; font-weight: 600; letter-spacing: .15em; cursor: pointer; transition: background .2s; }
#send-button:hover { background: rgba(55,111,107,.18); }
#send-button:disabled { color: var(--muted); cursor: wait; }
#send-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.command-footer { display: flex; justify-content: space-between; margin-top: 10px; color: #4f6064; font-size: 7px; letter-spacing: .14em; }
kbd { font: inherit; color: #78878a; }

.ending-card { margin: 16px 0 4px 84px; padding: 20px; border: 1px solid #3d5357; background: linear-gradient(135deg, rgba(49,101,98,.12), transparent); }
.ending-kicker { color: var(--cyan); font-size: 8px; letter-spacing: .24em; }
.ending-card h2 { margin: 8px 0 5px; font: 500 26px/1 var(--display); letter-spacing: .08em; }
.ending-card p { margin: 0 0 16px; color: var(--muted); font-size: 10px; }
.ending-card button { border: 1px solid var(--cyan-dim); padding: 8px 14px; background: transparent; color: var(--cyan); font-size: 8px; letter-spacing: .17em; cursor: pointer; }

body.busy .robot-eye { animation-duration: .7s; }
body.ended .command-panel { opacity: .42; pointer-events: none; }
body.blood-active { overflow: hidden; overscroll-behavior: none; }
.blood-curtain {
  position: fixed;
  z-index: 1000;
  inset: auto;
  top: var(--blood-top, 0px);
  left: var(--blood-left, 0px);
  width: var(--blood-width, 0px);
  height: var(--blood-height, 0px);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: visibility 0s linear 3.2s, opacity .12s linear 3.1s;
  isolation: isolate;
}

.blood-curtain.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

.blood-curtain::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 24%, rgba(15, 0, 0, .34) 78%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(35, 0, 0, .08) 4px);
}

.blood-curtain.active::after { animation: blood-vignette 2.8s ease-out forwards; }

.blood-sheet {
  position: absolute;
  z-index: 1;
  top: -14%;
  left: -4%;
  width: 108%;
  height: 126%;
  opacity: .68;
  transform: translateY(-118%);
  background:
    radial-gradient(ellipse at 18% 17%, rgba(255, 52, 45, .48) 0 4%, transparent 18%),
    radial-gradient(ellipse at 73% 31%, rgba(240, 30, 29, .4) 0 5%, transparent 21%),
    radial-gradient(ellipse at 42% 72%, rgba(74, 0, 2, .55) 0 7%, transparent 24%),
    linear-gradient(104deg, #580003 0%, #a3070b 18%, #6d0004 35%, #b20a0d 54%, #670003 74%, #980509 100%);
  box-shadow: 0 18px 45px rgba(40, 0, 0, .9);
  filter: saturate(1.28) contrast(1.08);
}

.blood-curtain.active .blood-sheet { animation: blood-sheet-fall 2.45s cubic-bezier(.62, .01, .84, .33) forwards; }

.blood-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .52;
  background:
    repeating-linear-gradient(92deg, transparent 0 5vw, rgba(255, 78, 65, .18) 5.4vw, transparent 6.1vw 12vw),
    linear-gradient(90deg, rgba(40, 0, 0, .5), transparent 15% 82%, rgba(40, 0, 0, .48));
  mix-blend-mode: screen;
}

.blood-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8%;
  height: 16%;
  background:
    radial-gradient(ellipse at 5% 0, #720004 0 40%, transparent 42%),
    radial-gradient(ellipse at 18% 8%, #97070a 0 49%, transparent 51%),
    radial-gradient(ellipse at 34% 0, #640003 0 43%, transparent 45%),
    radial-gradient(ellipse at 49% 13%, #a3080b 0 47%, transparent 49%),
    radial-gradient(ellipse at 65% 2%, #740004 0 44%, transparent 46%),
    radial-gradient(ellipse at 82% 11%, #9a060a 0 49%, transparent 51%),
    radial-gradient(ellipse at 97% 0, #660003 0 43%, transparent 45%);
}

.blood-drip {
  position: absolute;
  z-index: 2;
  left: var(--x);
  bottom: calc(var(--h) * -1 + 2px);
  width: var(--w);
  height: var(--h);
  border-radius: 0 0 48% 52%;
  transform: scaleY(.08);
  transform-origin: center top;
  background: linear-gradient(90deg, #4e0002, #aa080c 42%, #6b0004 78%, #3d0002);
  box-shadow: inset -1vw 0 2vw rgba(45, 0, 0, .38), 0 1.3vh 1.8vh rgba(30, 0, 0, .55);
}

.blood-curtain.active .blood-drip { animation: blood-drip-stretch .9s cubic-bezier(.3, .04, .72, .98) var(--lag) forwards; }

.blood-splatter {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  transform: scale(.72);
  background:
    radial-gradient(circle at 14% 21%, #8d0307 0 1.5%, transparent 1.8%),
    radial-gradient(circle at 24% 8%, #b00a0e 0 .7%, transparent .95%),
    radial-gradient(circle at 37% 26%, #720004 0 2.2%, transparent 2.5%),
    radial-gradient(circle at 55% 13%, #b60a0f 0 1.1%, transparent 1.35%),
    radial-gradient(circle at 66% 30%, #790004 0 2.6%, transparent 2.9%),
    radial-gradient(circle at 82% 10%, #a7060b 0 1.8%, transparent 2.1%),
    radial-gradient(circle at 91% 35%, #650003 0 1%, transparent 1.3%),
    radial-gradient(ellipse at 48% 55%, rgba(85, 0, 3, .58) 0 8%, transparent 18%);
}

.blood-curtain.active .blood-splatter { animation: blood-splatter-hit .5s ease-out 1.42s forwards; }

.blood-glass-drips {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.blood-glass-drips i {
  position: absolute;
  top: -3%;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  border-radius: 0 0 50% 50%;
  transform: translateY(-110%) scaleY(.25);
  transform-origin: center top;
  background: linear-gradient(90deg, rgba(54, 0, 2, .82), rgba(191, 18, 20, .74) 48%, rgba(65, 0, 2, .9));
  box-shadow: inset .35vw 0 .8vw rgba(255, 87, 72, .18), 0 1vh 1.6vh rgba(32, 0, 1, .4);
}

.blood-curtain.active .blood-glass-drips { animation: blood-glass-reveal .25s linear 2.12s forwards; }
.blood-curtain.active .blood-glass-drips i { animation: blood-glass-run .95s cubic-bezier(.24, .03, .68, 1) calc(2.08s + var(--lag)) forwards; }

.blood-death-card {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 13px;
  width: min(480px, calc(100% - 44px));
  padding: 27px 24px 24px;
  border: 1px solid rgba(255, 205, 196, .56);
  opacity: 0;
  transform: translate(-50%, -44%) scale(.96);
  color: #ffe7e1;
  background: rgba(37, 0, 2, .78);
  box-shadow: 0 20px 80px rgba(20, 0, 0, .72), inset 0 0 45px rgba(180, 10, 15, .24);
  backdrop-filter: blur(7px);
  text-align: center;
}

.blood-death-card span { font-size: 8px; letter-spacing: .25em; color: #f0aaa1; }
.blood-death-card strong { font: 600 28px/1 var(--display); letter-spacing: .13em; }
.blood-death-card button {
  margin-top: 3px;
  border: 1px solid rgba(255, 211, 204, .7);
  padding: 9px 15px;
  color: #fff0ec;
  background: rgba(65, 0, 3, .55);
  font-size: 9px;
  letter-spacing: .18em;
  cursor: pointer;
}
.blood-death-card button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.blood-curtain.active .blood-death-card { animation: blood-card-reveal .65s ease-out 2.55s forwards; }

@keyframes blood-sheet-fall {
  0% { transform: translateY(-118%); }
  44% { transform: translateY(-82%); }
  72% { transform: translateY(-41%); }
  91% { transform: translateY(-5%); }
  100% { transform: translateY(0); }
}
@keyframes blood-drip-stretch { 0% { transform: scaleY(.08); } 58% { transform: scaleY(1.12); } 100% { transform: scaleY(1); } }
@keyframes blood-splatter-hit { 0% { opacity: 0; transform: scale(.72); } 35% { opacity: .92; } 100% { opacity: .7; transform: scale(1); } }
@keyframes blood-vignette { 0%, 48% { opacity: 0; } 100% { opacity: 1; } }
@keyframes blood-card-reveal { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes blood-glass-reveal { to { opacity: .78; } }
@keyframes blood-glass-run { 0% { transform: translateY(-110%) scaleY(.25); } 68% { transform: translateY(0) scaleY(1.08); } 100% { transform: translateY(0) scaleY(1); } }

@media (min-width: 901px) {
  .encounter-grid {
    height: min(500px, calc(100svh - 290px));
    min-height: 320px;
  }

  .scene-card {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }
}

@media (max-width: 900px) {
  .facility-intro { place-items: start center; padding: 10px; }
  .intro-layout { grid-template-columns: 1fr; min-height: 0; }
  .facility-map { border-right: 0; border-bottom: 1px solid var(--line); }
  .facility-map svg { max-height: 52svh; }
  .intro-story { gap: 10px; }
  .shell { width: min(100% - 22px, 700px); padding-top: 16px; }
  .encounter-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "scene" "scene-control" "dialogue"; min-height: 0; }
  .scene-card { aspect-ratio: 2 / 1; }
  #scene { height: auto; object-fit: contain; }
  .transcript-panel { min-height: 310px; }
  .transcript { height: 270px; }
  .lower-interface { grid-template-columns: 1fr; }
  .scene-status > div { min-width: 82px; padding: 8px; }
  .coordinate { display: none; }
  .command-footer span:last-child { display: none; }
  .ending-card { margin-left: 0; }
}

@media (max-width: 520px) {
  .facility-intro { padding: 0; }
  .intro-frame { border-inline: 0; }
  .intro-header { align-items: flex-start; padding: 14px; }
  .intro-header h2 { font-size: 20px; }
  .intro-header button { flex: 0 0 auto; padding: 9px; font-size: 8px; }
  .facility-map { padding: 4px 8px; }
  .facility-map svg { max-height: 43svh; }
  .intro-area-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-story { padding: 16px; }
  .intro-story article p { line-height: 1.5; }
  .shell { width: 100%; padding: 0; }
  .topbar { align-items: flex-start; flex-direction: column; gap: 8px; padding: 16px 14px 12px; margin: 0; }
  .identity { width: 100%; min-width: 0; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; }
  .connection { align-self: flex-end; }
  .encounter-grid { gap: 8px; }
  .scene-card, .transcript-panel, .command-panel, .readout-panel { border-left: 0; border-right: 0; }
  .scene-card { min-height: 0; }
  #scene { width: 100%; max-width: 100%; height: auto; transform: none; }
  .scene-status { top: 9px; left: 9px; }
  .scene-status > div { min-width: 75px; }
  .transcript { height: 245px; padding-inline: 14px; }
  .log-entry { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
  .log-entry .speaker { overflow-wrap: anywhere; font-size: 8px; line-height: 1.35; letter-spacing: .08em; }
  .lower-interface { gap: 8px; margin-top: 8px; }
  .command-panel { padding-inline: 12px; }
  .readout-body { grid-template-columns: 64px minmax(0, 1fr); padding-inline: 12px; }
  .scope { width: 56px; height: 56px; }
  .scope i { top: 24px; left: 24px; }
  #send-button span { display: none; }
  #send-button { padding: 0 14px; }
  .scene-transition { gap: 7px; padding: 18px; }
  .scene-transition span { font-size: 8px; }
  .scene-status > div { min-width: 68px; padding: 7px; }
  .scene-status strong { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .facility-intro *, .facility-intro *::before, .facility-intro *::after { animation-delay: 0s !important; }
  .blood-curtain.active *, .blood-curtain.active::after { animation-delay: 0s !important; }
  .scene-card.transitioning > #scene, .scene-card.transitioning .robot { animation: none !important; }
}