:root {
  color-scheme: dark;
  --ink: #071626;
  --ink-2: #0a2137;
  --panel: rgba(7, 22, 38, .86);
  --line: rgba(208, 230, 247, .18);
  --muted: #a9bed0;
  --text: #f4f8fb;
  --blue: #18a8ff;
  --signal: #ff4051;
  --cyan: #61d3ff;
  --green: #18c996;
  --orange: #ff6a2a;
  --amber: #ffbd4a;
  --danger: #ff4f52;
  --shadow: 0 18px 60px rgba(2, 10, 18, .34);
  --topbar-height: 64px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #071626; }

body { color: var(--text); overflow: hidden; }

button, input, select { font: inherit; }
button { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  background: #071626;
}

.app-shell:fullscreen { width: 100%; height: 100%; margin: 0; background: #071626; }
.app-shell:-webkit-full-screen { width: 100%; height: 100%; margin: 0; background: #071626; }
.app-shell::backdrop { background: #071626; }
#fullscreenButton[aria-pressed="true"] { color: #84f0ce; border-color: rgba(132,240,206,.6); }
#fullscreenButton:focus-visible { outline: 2px solid #84f0ce; outline-offset: 3px; }
.fullscreen-notice { position: fixed; z-index: 70; top: 70px; right: 12px; max-width: min(380px, calc(100vw - 24px)); margin: 0; padding: 12px 14px; border: 1px solid #ffbd4a; border-radius: 10px; background: #071626; color: #f4f8fb; font-size: .875rem; line-height: 1.4; box-shadow: var(--shadow); }
.fullscreen-notice[hidden] { display: none; }

.topbar {
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(330px, 1fr) auto minmax(330px, 1fr);
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: rgba(6, 19, 33, .96);
  box-shadow: 0 8px 35px rgba(0, 0, 0, .22);
}

.brand-lockup, .top-actions, .live-pill, .elapsed, .ghost-button,
.icon-button, .phase-summary, .play-cluster, .node-top, .control-title,
.range-control > span, .timeline-labels, .timeline-readings { display: flex; align-items: center; }

.brand-lockup { min-width: 0; gap: 14px; }
.brand-panel {
  display: grid;
  place-items: center;
  width: 118px;
  height: 42px;
  padding: 7px 11px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(2, 17, 30, .08);
}
.brand-panel img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-divider { width: 1px; height: 31px; background: rgba(255,255,255,.15); }
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { font-family: Poppins, sans-serif; font-size: .88rem; letter-spacing: .01em; }
.brand-copy small { margin-top: 4px; color: #87a2b7; font-size: .73rem; }

.live-pill {
  justify-self: center;
  gap: 9px;
  min-width: 180px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: #c7d8e6;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #758a9d; box-shadow: 0 0 0 4px rgba(117,138,157,.13); }
.live-dot.running { background: var(--green); box-shadow: 0 0 0 4px rgba(24,201,150,.13), 0 0 13px rgba(24,201,150,.72); }
.live-dot.impact { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,79,82,.14), 0 0 14px rgba(255,79,82,.8); }

.top-actions { justify-content: flex-end; gap: 9px; }
.mobile-play-cluster { display: none; }
.elapsed { flex-direction: column; align-items: flex-end; margin-right: 6px; line-height: 1; }
.elapsed span { color: #7f9bb2; font-size: .59rem; font-weight: 800; letter-spacing: .13em; }
.elapsed strong { margin-top: 5px; font: 800 1.16rem/1 Poppins, sans-serif; font-variant-numeric: tabular-nums; color: #fff; }

.speed-picker select, .icon-button, .ghost-button, .close-button {
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.speed-picker select { height: 39px; padding: 0 28px 0 11px; border-radius: 10px; color: #dae6ef; outline: none; }
.icon-button { justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 10px; cursor: pointer; }
.icon-button svg, .ghost-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button .sound-shape { fill: none; }
.icon-button.muted { color: #748a9c; }
.ghost-button { gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; cursor: pointer; font-size: .8rem; font-weight: 700; }
.icon-button:hover, .ghost-button:hover, .speed-picker select:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); }
.scenario-fixed { cursor: default; border-color: rgba(39,201,245,.3); background: rgba(39,201,245,.08); }
.scenario-fixed svg { color: #61d9ff; }

.simulation, .scene { min-height: 0; }
.simulation { position: relative; overflow: hidden; }
.scene { position: relative; width: 100%; height: calc(100dvh - var(--topbar-height)); min-height: 0; overflow: hidden; isolation: isolate; background: #10263a; }
.scene-photo, .scene-detail, .scene-grade, .shake-vignette, .physical-frame { position: absolute; inset: 0; }
.scene-photo {
  z-index: -5;
  background-image: url('./assets/scene-seismic-urban-sat-v5.png');
  background-size: cover;
  background-position: center;
  filter: blur(12px) saturate(.82);
  opacity: .3;
  transform: scale(1.04);
  will-change: transform;
}
.scene-detail {
  z-index: -4;
  background-image: url('./assets/scene-seismic-urban-sat-v5.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: none;
  filter: none;
  transition: opacity .24s ease;
  will-change: transform;
}
.scene[data-scenario="seismic-urban"] .scene-photo,
.scene[data-scenario="seismic-urban"] .scene-detail {
  background-image: url('./assets/scene-seismic-urban-sensorless-v1.png');
}
.scene-grade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4,17,30,.13) 0%, rgba(4,17,30,.02) 38%, rgba(4,16,29,.14) 62%, rgba(3,13,23,.52) 100%),
    linear-gradient(90deg, rgba(3,16,28,.18), transparent 22%, transparent 80%, rgba(3,16,28,.2));
  pointer-events: none;
}
.physical-frame {
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: none;
  transform-origin: center;
  pointer-events: none;
  transition: opacity .18s linear;
  will-change: opacity;
}
.scene:not([data-hazard="tsunami"]) .tsunami-frame { display: none; }
.scene:not([data-hazard="river"]) .river-frame { display: none; }
.scene:not([data-scenario="seismic-urban"]) .seismic-impact-frame { display: none; }
.seismic-impact-frame, .river-frame { opacity: 0; }
.scene.tsunami-near .scene-grade {
  background:
    linear-gradient(180deg, rgba(4,17,30,.16) 0%, rgba(4,17,30,.01) 32%, rgba(0,35,55,.11) 52%, rgba(0,18,31,.58) 100%),
    linear-gradient(90deg, rgba(3,16,28,.18), transparent 22%, transparent 80%, rgba(3,16,28,.2));
}
.scene.tsunami-impact .shake-vignette { opacity: .3; box-shadow: inset 0 0 150px 24px rgba(50,210,255,.52); }
.shake-vignette { z-index: 18; pointer-events: none; opacity: 0; box-shadow: inset 0 0 130px 18px rgba(255,65,45,.6); transition: opacity .35s ease; }
.scene.impact .shake-vignette { opacity: .38; }
.scene[data-hazard="seismic"]:not([data-scenario="seismic-urban"]).impact .scene-detail { animation: ground-shake .085s linear infinite; }
.scene[data-scenario="seismic-urban"] .seismic-impact-frame {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(var(--urban-s-front, 0%) - 7%), transparent calc(var(--urban-s-front, 0%) + 3%));
  mask-image: linear-gradient(to right, #000 0%, #000 calc(var(--urban-s-front, 0%) - 7%), transparent calc(var(--urban-s-front, 0%) + 3%));
}
.scene[data-scenario="seismic-urban"].urban-s-surface .seismic-impact-frame { animation: ground-shake .085s linear infinite; }
.scene[data-scenario="seismic-urban"].urban-sensor-shaking .urban-sensor-station image,
.scene[data-scenario="seismic-urban"].urban-sensor-shaking .urban-sensor-station ellipse {
  animation: sensor-ground-shake .085s linear infinite;
}

@keyframes ground-shake {
  0%, 100% { transform: scale(1.014) translate(0, 0); }
  25% { transform: scale(1.014) translate(-1.5px, 1px); }
  50% { transform: scale(1.014) translate(2px, -1px); }
  75% { transform: scale(1.014) translate(-1px, -1.5px); }
}
@keyframes sensor-ground-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, -1.5px); }
}

.systems-layer { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; transform: none; transform-origin: center; }
.urban-only { display: none; }
.scene[data-scenario="seismic-urban"] .urban-only { display: initial; }
.urban-sensor-station ellipse { fill: rgba(2, 18, 25, .4); filter: blur(6px); }
.urban-sensor-station image { filter: drop-shadow(0 4px 4px rgba(4, 16, 22, .36)); }
.urban-blind-map { opacity: 1; }
#blindZoneArea { fill: url(#blindGradient); }
#blindZoneHatch { fill: url(#blindHatch); }
#blindZoneSurface { fill: none; stroke: #ff4b73; stroke-width: 5; stroke-dasharray: 13 7; filter: url(#redGlow); }
#blindZoneEdge { fill: none; stroke: #ff6688; stroke-width: 4; stroke-dasharray: 12 9; filter: url(#redGlow); }
.blind-zone-limit circle:first-child { fill: rgba(45,9,23,.94); stroke: #ff90ad; stroke-width: 3; filter: url(#redGlow); }
.blind-zone-limit circle:nth-child(2) { fill: #ffe9ef; }
.blind-zone-limit text { fill: #fff4f7; font: 900 16px/1 Poppins, sans-serif; paint-order: stroke; stroke: #350819; stroke-width: 4; letter-spacing: .04em; }
.blind-zone-limit text:last-child { fill: #ffbacb; font-size: 18px; }
.blind-zone-badge rect { fill: rgba(41,9,24,.91); stroke: #ff7999; stroke-width: 2; filter: drop-shadow(0 8px 16px rgba(15,0,6,.35)); }
.blind-zone-badge text { fill: #ffe5ed; font-family: Poppins, sans-serif; font-weight: 800; letter-spacing: .4px; }
.blind-zone-badge .blind-title { fill: #ff9bb3; font-size: 19px; }
.blind-zone-badge .blind-subtitle { font-size: 19px; letter-spacing: 0; }
.blind-zone-badge .blind-explain { fill: #ffd5e0; font-size: 14px; letter-spacing: 0; }
.blind-zone-badge .blind-sensor { fill: #ffe9c7; font-size: 12px; letter-spacing: 0; font-weight: 800; }
.urban-callout-guides path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 8; }
.blind-callout-guide { stroke: rgba(255,141,169,.82); }
.epicenter-callout-guide { stroke: rgba(255,211,145,.82); }
.sensor-ruler-projection { fill: none; stroke: rgba(255,195,117,.7); stroke-width: 2; stroke-dasharray: 8 8; }
.sensor-ruler-line { fill: none; stroke: rgba(255,209,147,.88); stroke-width: 2.5; stroke-dasharray: 12 7; }
.sensor-ruler-ticks { fill: none; stroke: rgba(255,209,147,.88); stroke-width: 2.5; }
.sensor-ruler-anchor { fill: #fff0d6; stroke: #ffbd73; stroke-width: 3; filter: url(#orangeGlow); }
.sensor-ruler-label rect { fill: rgba(20,27,38,.9); stroke: rgba(255,204,137,.75); stroke-width: 1.4; }
.sensor-ruler-label text { fill: #ffe1b4; font: 800 13px Poppins, sans-serif; letter-spacing: .05em; }
.sensor-ruler-label .sensor-ruler-note { fill: #b9d6df; font-size: 10px; letter-spacing: .045em; }
.wave { fill: none; transform-origin: 150px 770px; opacity: .95; }
.wave-group { transition: opacity .2s ease; }
.scene:not([data-hazard="seismic"]) .wave-group { opacity: 0; }
.scene[data-scenario="seismic-urban"] .wave,
.scene[data-scenario="seismic-urban"] .surface-wave { display: none; }
.urban-contour, .urban-contour-halo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.urban-contour-p { stroke: #62d8ff; filter: url(#blueGlow); }
.urban-contour-s { stroke: #ff9a57; filter: url(#orangeGlow); }
.urban-contour { stroke-width: 5; }
.urban-contour-halo { stroke-width: 19; opacity: .24; }
.urban-surface-head { opacity: 0; }
.urban-surface-head > circle { fill: #d7f8ff; stroke: #49cfff; stroke-width: 4; filter: url(#blueGlow); }
.urban-surface-head rect { fill: rgba(8,28,43,.93); stroke: rgba(124,214,247,.65); stroke-width: 1.5; }
.urban-surface-head text { fill: #d8f7ff; font: 800 11px Poppins, sans-serif; letter-spacing: .04em; }
.urban-surface-head.head-s > circle { fill: #fff2d1; stroke: #ff8c49; filter: url(#orangeGlow); }
.urban-surface-head.head-s rect { fill: rgba(40,21,15,.93); stroke: rgba(255,171,105,.7); }
.urban-surface-head.head-s text { fill: #ffe0b7; }
.urban-s-local { opacity: 0; pointer-events: none; }
.urban-s-local.active { opacity: 1; }
.urban-s-local-line { fill: none; stroke: #ff9a57; stroke-width: 5; stroke-linecap: round; filter: url(#orangeGlow); }
.urban-s-local-head { fill: #fff2d1; stroke: #ff8c49; stroke-width: 3; filter: url(#orangeGlow); }
.urban-sensor-arrival { opacity: 0; }
.urban-sensor-arrival > path { fill: none; stroke: #74dfff; stroke-width: 4; stroke-dasharray: 5 5; filter: url(#blueGlow); }
.urban-sensor-arrival > circle { fill: #b9f5ff; stroke: #46ceff; stroke-width: 3; filter: url(#blueGlow); }
.urban-sensor-arrival > .sensor-arrival-halo { fill: none; stroke: #81eaff; stroke-width: 3; }
.wave-p { stroke: url(#waveP); stroke-width: 5; filter: url(#blueGlow); }
.wave-p-outer { stroke-width: 2; opacity: .36; }
.wave-s { stroke: url(#waveS); stroke-width: 7; filter: url(#orangeGlow); stroke-dasharray: 7 5; }
.wave-s-outer { stroke-width: 2; opacity: .36; stroke-dasharray: none; }
.wave-trail { stroke-width: 2.5; opacity: .45; filter: none; }
.wave-s.wave-trail { stroke-dasharray: 5 8; }
.surface-wave { fill: none; stroke: rgba(255,153,72,.8); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 3 10; stroke-dashoffset: 100; filter: url(#orangeGlow); opacity: .62; }
.epicenter > circle:first-child { fill: #ffd269; stroke: #fff1c7; stroke-width: 2; filter: url(#orangeGlow); }
.epicenter-pulse { fill: none; stroke: var(--orange); stroke-width: 3; animation: epicenter-pulse 1.6s ease-out infinite; transform-origin: 150px 770px; }
.epicenter path { fill: none; stroke: #ff8d38; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: url(#orangeGlow); }

.hazard-front { opacity: 0; transition: opacity .25s ease; }
.hazard-front.active { opacity: 1; }
.scene[data-hazard="tsunami"] .hazard-front,
.scene[data-hazard="river"] .hazard-front { display: none; }
.hazard-plume, .hazard-track, .hazard-progress { fill: none; stroke-linecap: round; }
.hazard-plume { stroke: var(--hazard, #2bbef2); stroke-width: 38; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .13; filter: url(#blueGlow); }
.hazard-track { stroke: color-mix(in srgb, var(--hazard, #2bbef2) 38%, transparent); stroke-width: 18; stroke-dasharray: 2 11; }
.hazard-progress { stroke: var(--hazard, #2bbef2); stroke-width: 9; stroke-dasharray: 100; stroke-dashoffset: 100; filter: url(#blueGlow); }
.hazard-symbol { filter: url(#blueGlow); }
.hazard-head { fill: #e8fbff; stroke: var(--hazard, #2bbef2); stroke-width: 5; }
.hazard-wave-shape { fill: none; stroke: var(--hazard, #2bbef2); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.hazard-debris { display: none; fill: #ffb05e; stroke: #fff0ce; stroke-width: 2; }
.scene[data-hazard="aluvion"] .hazard-wave-shape { display: none; }
.scene[data-hazard="aluvion"] .hazard-debris { display: block; }
.scene[data-hazard="aluvion"] .hazard-plume { stroke-width: 50; opacity: .2; }
.scene[data-hazard="tsunami"] .hazard-wave-shape { stroke-width: 15; }
.scene[data-hazard="tsunami"] { --hazard: #27c9f5; }
.scene[data-hazard="flood"] { --hazard: #39bff0; }
.scene[data-hazard="river"] { --hazard: #21d6c1; }
.scene[data-hazard="aluvion"] { --hazard: #ff9b3f; }

@keyframes epicenter-pulse { from { transform: scale(.55); opacity: .95; } to { transform: scale(2); opacity: 0; } }

.data-guide { fill: none; stroke: rgba(255,64,81,.26); stroke-width: 3; stroke-dasharray: 9 10; }
.data-flow { fill: none; stroke: var(--signal); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 540; stroke-dashoffset: 540; opacity: 0; filter: url(#redGlow); transition: opacity .28s ease; }
.data-flow.active { opacity: 1; animation: draw-flow 1.1s ease forwards; }
.ack-flow { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 10; opacity: 0; transition: opacity .35s ease; }
.ack-flow.active { opacity: .9; animation: ack-dash 1.2s linear infinite; }
@keyframes draw-flow { to { stroke-dashoffset: 0; } }
@keyframes ack-dash { to { stroke-dashoffset: -40; } }
.packet { opacity: 0; filter: url(#redGlow); }
.packet-a, .packet-tide, .packet-b { fill: #ff6471; }
.packet.visible { opacity: 1; }
.signal-labels { pointer-events: none; }
.signal-badge rect { fill: rgba(36,12,21,.83); stroke: rgba(255,117,130,.58); stroke-width: 1.5; }
.signal-badge text { fill: #ffe6e9; font: 800 12px Poppins, sans-serif; letter-spacing: 1.1px; text-anchor: middle; }
.signal-badge { opacity: .48; transition: opacity .28s ease; }
.scene.signal-detected .sensor-signal, .scene.signal-detected .control-signal { opacity: 1; }
.scene.response-active .response-signal { opacity: 1; }
.urban-bms-link { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.scene.urban-bms-transmitting .urban-bms-link,
.scene.urban-bms-received .urban-bms-link { opacity: 1; }
.urban-bms-guide,
.urban-bms-flow { fill: none; stroke-linecap: round; }
.urban-bms-guide { stroke: rgba(255,96,105,.52); stroke-width: 2; stroke-dasharray: 7 11; }
.urban-bms-flow { stroke: #ff3d50; stroke-width: 5; stroke-dasharray: 100; stroke-dashoffset: 100; filter: url(#redGlow); }
.urban-bms-packet { fill: #fff1ee; stroke: #ff4051; stroke-width: 3; opacity: 0; filter: url(#redGlow); }
.scene.urban-bms-transmitting .urban-bms-packet { opacity: 1; }
.urban-bms-halo { fill: rgba(255,65,76,.12); stroke: rgba(255,109,117,.64); stroke-width: 2; }
.urban-bms-core { fill: #ffd3d5; stroke: #ff4654; stroke-width: 3; }
.scene.urban-bms-received .urban-bms-halo { animation: point-ring 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.urban-bms-badge rect { fill: rgba(28,11,24,.94); stroke: rgba(255,103,116,.87); stroke-width: 1.6; filter: drop-shadow(0 8px 14px rgba(20,0,9,.38)); }
.urban-bms-badge text { font-family: Poppins, sans-serif; font-weight: 800; }
.urban-bms-badge .bms-kicker { fill: #ff9ca9; font-size: 12px; letter-spacing: 1.1px; }
.urban-bms-badge .bms-title { fill: #fff5f5; font-size: 16px; letter-spacing: .2px; }
.urban-bms-badge .bms-meta { fill: #f5d6d9; font-size: 13px; }
.urban-bms-badge .bms-state { fill: #ffd2d4; font-size: 13px; }
.map-point { opacity: .56; transition: opacity .25s ease; }
.map-point.active { opacity: 1; }
.point-halo { fill: rgba(24,168,255,.12); stroke: rgba(105,211,255,.65); stroke-width: 2; }
.point-core { fill: #dff8ff; stroke: var(--blue); stroke-width: 4; filter: url(#blueGlow); }
.map-point.active .point-halo { animation: point-ring 1.45s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes point-ring { from { transform: scale(.45); opacity: 1; } to { transform: scale(1.85); opacity: 0; } }

.sound-arcs { opacity: 0; transition: opacity .25s ease; }
.sound-arcs.active { opacity: 1; }
.sound-arcs path { fill: none; stroke: #8effe4; stroke-width: 4; stroke-linecap: round; filter: url(#blueGlow); animation: sound-pulse 1.25s ease-in-out infinite alternate; transform-origin: 0 0; }
.sound-arcs path:nth-child(2) { animation-delay: .16s; opacity: .75; }
.sound-arcs path:nth-child(3) { animation-delay: .32s; opacity: .48; }
@keyframes sound-pulse { from { transform: scale(.88); opacity: .25; } to { transform: scale(1.12); opacity: 1; } }

.urban-sound-route { opacity: .36; transition: opacity .2s ease; }
.scene.urban-siren-on .urban-sound-route { opacity: 1; }
.sound-route-guide, .sound-route-progress { fill: none; stroke-linecap: round; }
.sound-route-guide { stroke: rgba(129,246,231,.72); stroke-width: 3; stroke-dasharray: 8 10; }
.sound-route-progress { stroke: #70ffdf; stroke-width: 7; stroke-dasharray: 100; stroke-dashoffset: 100; filter: url(#blueGlow); }
.sound-route-head { fill: #dcfff4; stroke: #58e9ce; stroke-width: 3; opacity: 0; filter: url(#blueGlow); }
.scene.urban-sound-in-flight .sound-route-head { opacity: 1; }
.urban-person-marker { pointer-events: all; cursor: pointer; outline: none; }
.urban-person-marker:focus-visible .person-foot-ring { stroke: #fff; stroke-width: 5; }
.person-ground-shadow { display: none; }
.person-s-arrival { fill: none; stroke: #ffab63; stroke-width: 3; opacity: 0; filter: url(#orangeGlow); }
.scene.urban-person-s-arrived .person-s-arrival { opacity: 1; animation: point-ring 1.5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.person-foot-ring { fill: none; stroke: rgba(125,255,227,.86); stroke-width: 2.5; stroke-dasharray: 7 7; opacity: .6; filter: url(#blueGlow); }
.person-caption rect { fill: rgba(7,26,39,.92); stroke: rgba(110,255,229,.7); stroke-width: 1.5; }
.person-caption text { fill: #eafff9; font: 800 15px Poppins, sans-serif; letter-spacing: .4px; }
.person-caption .person-caption-title { fill: #8bffdf; }
.person-caption .person-caption-time { font-size: 16px; letter-spacing: 0; }
.scene.urban-person-heard .person-foot-ring { stroke: #8fffce; stroke-dasharray: none; opacity: 1; animation: point-ring 1.5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.scene.urban-person-heard .person-caption rect { stroke: rgba(126,255,203,.96); }
.scene[data-scenario="seismic-urban"] .sound-route-guide { stroke: rgba(177,255,237,.42); stroke-width: 2; stroke-dasharray: 5 10; }
.scene[data-scenario="seismic-urban"] .sound-route-progress { stroke: #a4ffe8; stroke-width: 2.5; opacity: .55; }
.scene[data-scenario="seismic-urban"] .sound-route-head { r: 5; opacity: 0; }
.urban-sound-fronts { opacity: 0; transition: opacity .2s ease; }
.scene.urban-sound-wave-active .urban-sound-fronts { opacity: 1; }
.sound-front { fill: none; stroke: #b9fff0; filter: url(#blueGlow); }
.sound-front-leading { stroke-width: 6; opacity: .9; }
.sound-front-trail { stroke-width: 4; opacity: .58; }
.sound-front-after { stroke-width: 2.5; opacity: .32; }
.urban-safe-sign { pointer-events: none; }
.safe-zone-arrival { fill: rgba(49,235,150,.14); stroke: rgba(109,255,177,.8); stroke-width: 3; opacity: 0; filter: url(#blueGlow); }
.scene.urban-person-safe .safe-zone-arrival { opacity: 1; animation: point-ring 1.5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.person-running, .person-protecting { opacity: 0; }
.scene.urban-person-protecting .person-standing { opacity: 0; }
.scene.urban-person-protecting .person-protecting { opacity: 1; }
.scene.urban-person-running .person-standing { opacity: 0; }
.scene.urban-person-running .person-figure { animation: urban-run-bob .34s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
.scene.urban-person-running .person-running-a { animation: urban-run-a .34s steps(1) infinite; }
.scene.urban-person-running .person-running-b { animation: urban-run-b .34s steps(1) infinite; }
@keyframes urban-run-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes urban-run-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes urban-run-b { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
.scene[data-scenario="seismic-urban"] .person-caption text { font-size: 13px; letter-spacing: .015em; }
.scene[data-scenario="seismic-urban"] .person-caption .person-caption-time { font-size: 14px; }
.local-safety-note { margin: 12px 0 0; color: #afc3cf; font-size: .7rem; line-height: 1.45; }

.integrated-beacon { display: none; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.scene[data-scenario="seismic-urban"] .integrated-beacon { display: initial; }
.scene[data-scenario="seismic-urban"] .integrated-beacon.active { opacity: 1; }
.integrated-beacon-halo, .integrated-beacon-core { transform-box: fill-box; transform-origin: center; }
.integrated-beacon-halo { fill: rgba(255,38,31,.42); stroke: rgba(255,126,108,.72); stroke-width: 2; filter: url(#redGlow); }
.integrated-beacon-halo-a { animation: integrated-beacon-pulse .82s ease-out infinite; }
.integrated-beacon-halo-b { animation: integrated-beacon-pulse .82s .18s ease-out infinite; }
.integrated-beacon-core { fill: #fff1e9; stroke: #ff2f25; stroke-width: 4; filter: url(#redGlow); animation: integrated-beacon-core .82s steps(2, jump-none) infinite; }
@keyframes integrated-beacon-pulse { 0% { transform: scale(.32); opacity: 1; } 72%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes integrated-beacon-core { 0%, 42% { opacity: .42; } 43%, 100% { opacity: 1; } }

.tsunami-only { display: none; }
.scene[data-hazard="tsunami"] .tsunami-only { display: initial; }
.river-only { display: none; }
.scene[data-hazard="river"] .river-only { display: initial; }
.origin-ring { fill: none; stroke: #ff7845; stroke-width: 4; filter: url(#orangeGlow); transform-box: fill-box; transform-origin: center; }
.origin-ring.ring-a { animation: tsunami-origin-pulse 1.5s ease-out infinite; }
.origin-ring.ring-b { opacity: .55; animation: tsunami-origin-pulse 1.5s .55s ease-out infinite; }
.origin-core { fill: #fff0c7; stroke: #ff572f; stroke-width: 6; filter: url(#orangeGlow); }
.fault-symbol { fill: none; stroke: #ff8b4b; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; filter: url(#orangeGlow); }
.tsunami-origin-marker.reported .origin-ring { stroke: #ffbb55; }
@keyframes tsunami-origin-pulse { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

.scene-badge rect { fill: rgba(4,20,34,.9); stroke: rgba(255,255,255,.28); stroke-width: 1.5; filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
.scene-badge text { font-family: Poppins, sans-serif; }
.scene-badge .badge-kicker { fill: #7fcfee; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; }
.scene-badge .badge-title { fill: #f4fbff; font-size: 15px; font-weight: 800; }
.scene-badge .badge-meta { fill: #9eb7c8; font-size: 11px; font-weight: 650; }
.origin-badge rect { stroke: rgba(255,122,69,.55); }
.origin-badge .badge-kicker { fill: #ff9b6c; }

.monitor-halo { fill: rgba(39,201,245,.1); stroke: rgba(124,230,255,.72); stroke-width: 3; animation: point-ring 1.65s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.monitor-core { fill: #e8fcff; stroke: #27c9f5; stroke-width: 5; filter: url(#blueGlow); }
.monitor-stem { fill: none; stroke: #b7f3ff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: url(#blueGlow); }
.tide-monitor.monitoring .tide-badge rect { stroke: rgba(66,235,209,.72); }
.tide-monitor.monitoring .monitor-core { stroke: #32e0bf; }

.control-focus { fill: rgba(14,151,234,.13); stroke: rgba(94,212,255,.76); stroke-width: 3; filter: url(#blueGlow); }
.control-icon { fill: none; stroke: #e7fbff; stroke-width: 5; stroke-linecap: round; filter: url(#blueGlow); }
.cnat-marker.evaluating .control-focus { animation: cnat-focus 1.2s ease-in-out infinite alternate; }
.cnat-marker.confirmed .cnat-badge rect { stroke: rgba(40,222,166,.75); }
.cnat-marker.confirmed .cnat-badge .badge-kicker { fill: #65e5bf; }
@keyframes cnat-focus { from { opacity: .55; } to { opacity: 1; transform: scale(1.08); transform-origin: center; } }

.river-station-halo { fill: rgba(37,215,190,.1); stroke: rgba(116,255,225,.72); stroke-width: 3; animation: point-ring 1.7s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.river-station-core { fill: #eafff9; stroke: #21d6c1; stroke-width: 5; filter: url(#blueGlow); }
.river-station-icon { fill: none; stroke: #c9fff2; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: url(#blueGlow); }
.river-badge rect { stroke: rgba(80,224,195,.58); }
.river-badge .badge-kicker { fill: #69e9ce; }
.river-station-marker.watch .river-badge rect { stroke: rgba(255,207,77,.75); }
.river-station-marker.watch .river-badge .badge-kicker { fill: #ffd56d; }
.river-station-marker.warning .river-badge rect { stroke: rgba(255,146,63,.82); }
.river-station-marker.warning .river-badge .badge-kicker { fill: #ffb267; }
.river-station-marker.critical .river-badge rect { stroke: rgba(255,80,80,.9); }
.river-station-marker.critical .river-badge .badge-kicker { fill: #ff8a84; }
.river-station-marker.critical .river-station-core { stroke: #ff665b; }

.scene-equipment {
  position: absolute;
  z-index: 0;
  left: var(--equipment-left, auto);
  right: var(--equipment-right, 4.2%);
  bottom: var(--equipment-bottom, 36%);
  width: var(--equipment-width, clamp(138px, 11vw, 208px));
  margin: 0;
  pointer-events: none;
  filter: saturate(.9) contrast(.98) brightness(.92) drop-shadow(0 12px 12px rgba(0,0,0,.48));
  transform: perspective(900px) rotateY(var(--equipment-yaw, -2deg));
  transform-origin: 50% 100%;
  transition: filter .35s ease;
}
.scene-equipment img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.equipment-ground-shadow {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  width: 76%;
  height: 5.5%;
  border-radius: 50%;
  background: rgba(1, 8, 13, .5);
  filter: blur(7px);
  transform: translate(-50%, 42%) skewX(-8deg);
}
.equipment-beacon { position: absolute; z-index: 2; left: 50%; top: 1.4%; width: 19%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,57,52,.15); transform: translateX(-50%); opacity: 0; }
.scene-equipment.active { filter: saturate(1) contrast(1) brightness(.98) drop-shadow(0 12px 12px rgba(0,0,0,.48)) drop-shadow(0 0 10px rgba(255,64,55,.22)); }
.scene-equipment.active .equipment-beacon { opacity: 1; animation: beacon-pulse .78s ease-in-out infinite alternate; }
@keyframes beacon-pulse { from { transform: translateX(-50%) scale(.75); box-shadow: 0 0 8px rgba(255,62,52,.45); } to { transform: translateX(-50%) scale(1.7); box-shadow: 0 0 28px 12px rgba(255,62,52,.38); } }

.scene[data-scenario="seismic-urban"] { --equipment-right: 24%; --equipment-bottom: 37%; --equipment-width: clamp(142px, 11.2vw, 210px); }
.scene[data-scenario="seismic-urban"] .scene-equipment { display: none; }
.scene[data-scenario="seismic-mine"] { --equipment-right: 18%; --equipment-bottom: 44%; --equipment-width: clamp(134px, 10.5vw, 198px); --equipment-yaw: -4deg; }
.scene[data-scenario="seismic-industry"] { --equipment-right: 24%; --equipment-bottom: 43%; --equipment-width: clamp(146px, 11.6vw, 218px); }
.scene[data-scenario="seismic-rail"] { --equipment-left: 16%; --equipment-right: auto; --equipment-bottom: 44%; --equipment-width: clamp(134px, 10.5vw, 198px); --equipment-yaw: 3deg; }
.scene[data-scenario="tsunami"] { --equipment-right: 7%; --equipment-bottom: 42%; --equipment-width: clamp(122px, 9.4vw, 178px); }
.scene[data-scenario="flood"] { --equipment-right: 18%; --equipment-bottom: 34%; --equipment-width: clamp(142px, 11.2vw, 210px); }
.scene[data-scenario="river"] { --equipment-right: 20%; --equipment-bottom: 36%; --equipment-width: clamp(120px, 9.4vw, 176px); }
.scene[data-scenario="aluvion"] { --equipment-left: 64%; --equipment-right: auto; --equipment-bottom: 39%; --equipment-width: clamp(124px, 9.7vw, 182px); }

.node-card {
  position: absolute;
  z-index: 8;
  width: clamp(215px, 17vw, 286px);
  padding: 15px 16px 14px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 13px;
  color: #10263b;
  background: rgba(250,253,255,.91);
  box-shadow: 0 17px 38px rgba(5,22,37,.22);
  backdrop-filter: blur(14px) saturate(1.1);
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease, border-color .35s ease;
}
.node-card::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: #91a7b8; transform: scaleX(.22); transform-origin: left; transition: transform .55s ease, background .3s ease; }
.node-card.is-active { transform: translateY(-4px); border-color: #fff; box-shadow: 0 20px 48px rgba(3,19,32,.3), 0 0 0 1px rgba(24,168,255,.2); }
.node-card.is-active::after { transform: scaleX(1); background: var(--blue); }
.quake-card.is-active::after { background: var(--orange); }
.response-card.is-active::after { background: var(--green); }
.node-top { justify-content: space-between; gap: 9px; margin-bottom: 8px; }
.node-index { font: 800 .59rem/1 Poppins, sans-serif; letter-spacing: .11em; }
.node-index.orange { color: #d95318; }
.node-index.sky { color: #007bbf; }
.node-index.blue { color: #0669c9; }
.node-index.green { color: #078d66; }
.node-state { padding: 4px 7px; border-radius: 999px; background: #edf2f5; color: #748797; font: 800 .51rem/1 Poppins, sans-serif; letter-spacing: .08em; }
.node-card.is-active .node-state { color: #087b5c; background: #dff8ef; }
.quake-card.is-active .node-state { color: #bf4d18; background: #fff0e7; }
.node-card strong { display: block; font: 800 clamp(.8rem, .9vw, .95rem)/1.18 Poppins, sans-serif; letter-spacing: -.015em; }
.node-card small { display: block; margin-top: 5px; color: #687d8e; font-size: clamp(.63rem, .7vw, .73rem); line-height: 1.35; }
.node-time { display: inline-flex; margin-top: 9px; padding: 5px 8px; border: 1px solid rgba(13,52,81,.13); border-radius: 7px; background: #e8f4fb; color: #075b91; font: 800 .75rem/1 Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.response-card .node-time { color: #087b5c; background: #e4f8f1; }
.urban-siren-pin { display: none; position: absolute; z-index: 9; right: 13%; top: 28%; min-width: 185px; padding: 9px 12px; border: 1px solid rgba(255,112,125,.78); border-radius: 10px; background: rgba(9,29,44,.88); color: #fff; box-shadow: 0 10px 28px rgba(3,19,32,.3); text-align: left; cursor: pointer; }
.scene[data-scenario="seismic-urban"] .urban-siren-pin { display: grid; gap: 4px; }
.urban-siren-pin::after { content: ""; position: absolute; right: -19px; top: 22px; width: 18px; border-top: 2px solid rgba(255,112,125,.8); }
.urban-siren-pin span { color: #ff9daa; font: 800 .7rem/1.1 Poppins, sans-serif; letter-spacing: .07em; }
.urban-siren-pin strong { font: 800 .82rem/1.2 Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.urban-siren-pin:hover, .urban-siren-pin:focus-visible { border-color: #fff; outline: none; }
.scene.urban-siren-on .urban-siren-pin { border-color: #ff4f58; box-shadow: 0 0 0 3px rgba(255,65,81,.18), 0 10px 28px rgba(3,19,32,.3); }

.quake-card { left: 3.2%; top: 50%; }
.sensor-card { left: 26%; top: 38%; }
.process-card { left: 47%; top: 28%; }
.response-card { right: 3%; top: 9%; }
.scene[data-hazard="tsunami"] .quake-card { left: 2.8%; top: 61%; }
.scene[data-hazard="tsunami"] .sensor-card { left: 29%; top: 52%; }
.scene[data-hazard="tsunami"] .process-card { left: 56%; top: 49%; }
.scene[data-hazard="tsunami"] .response-card { right: 2.7%; top: 27%; }
.scene[data-hazard="tsunami"] .impact-banner { top: 138px; }
.scene[data-hazard="river"] .quake-card { left: 3%; top: 61%; }
.scene[data-hazard="river"] .sensor-card { left: 25%; top: 48%; }
.scene[data-hazard="river"] .process-card { left: 49%; top: 38%; }
.scene[data-hazard="river"] .response-card { right: 2.7%; top: 27%; }
.scene[data-hazard="river"] .impact-banner { top: 138px; }

.wave-tag {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(5,18,31,.76);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(9px);
  font: 700 .62rem/1 Poppins, sans-serif;
  letter-spacing: .06em;
  white-space: nowrap;
  pointer-events: none;
}
.wave-tag > span { width: 7px; height: 7px; border-radius: 50%; }
.wave-tag em { font-style: normal; }
.wave-tag strong { font-size: .67rem; }
.p-tag { left: 10%; bottom: 23.8%; color: #9be8ff; }
.p-tag > span { background: #53c9ff; box-shadow: 0 0 9px #53c9ff; }
.s-tag { left: 10%; bottom: 18.2%; color: #ffd184; }
.s-tag > span { background: #ff783b; box-shadow: 0 0 9px #ff783b; }

.impact-banner {
  position: absolute;
  z-index: 25;
  left: 50%;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 11px;
  border: 1px solid rgba(255,112,88,.45);
  border-radius: 13px;
  background: rgba(68,14,18,.9);
  box-shadow: 0 18px 42px rgba(48,7,10,.34);
  transform: translate(-50%, -125%);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2,.9,.25,1.18), opacity .3s ease;
}
.impact-banner.show { transform: translate(-50%, 0); opacity: 1; }
.impact-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #ff604f; font: 800 1.15rem Poppins, sans-serif; }
.impact-banner div { display: grid; }
.impact-banner strong { font: 800 .78rem Poppins, sans-serif; }
.impact-banner small { color: #ffc3bc; font-size: .68rem; margin-top: 2px; }

.hud {
  position: absolute;
  z-index: 20;
  left: 18px;
  right: clamp(270px, 21vw, 350px);
  top: 16px;
  bottom: auto;
  min-height: 108px;
  display: grid;
  grid-template-columns: minmax(245px, 1.1fr) minmax(315px, 1.6fr) minmax(150px, .65fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(205,226,241,.2);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(4,18,31,.82), rgba(7,29,48,.76));
  box-shadow: 0 18px 46px rgba(1,10,18,.32), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(17px) saturate(1.2);
}
.phase-summary { gap: 14px; min-width: 0; }
.phase-number { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(97,211,255,.38); border-radius: 13px; background: rgba(24,168,255,.1); color: #8ee4ff; font: 800 1rem Poppins, sans-serif; }
.phase-summary > div { min-width: 0; }
.micro-label { display: block; color: #7ca2be; font: 800 .56rem/1.15 Poppins, sans-serif; letter-spacing: .13em; }
.phase-summary strong { display: block; margin-top: 5px; font: 800 .87rem/1.25 Poppins, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene[data-hazard="tsunami"] .phase-summary strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.phase-summary p { margin: 4px 0 0; color: #a7bdcc; font-size: .68rem; line-height: 1.34; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.timeline-wrap { min-width: 0; }
.timeline-labels, .timeline-readings { justify-content: space-between; gap: 15px; }
.timeline-labels { color: #8ca7ba; font: 800 .55rem/1 Poppins, sans-serif; letter-spacing: .1em; }
.timeline-labels strong { color: #d9e7f1; font-size: .62rem; font-variant-numeric: tabular-nums; }
.timeline { position: relative; height: 35px; margin: 8px 7px 4px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); }
.timeline-fill { position: absolute; z-index: 1; left: 0; top: 7px; width: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--orange), var(--blue), var(--green)); box-shadow: 0 0 11px rgba(24,168,255,.45); }
.timeline-event { position: absolute; z-index: 2; left: var(--at); top: 0; width: 54px; margin-left: -27px; padding: 0; border: 0; background: none; color: #718b9d; cursor: pointer; }
.timeline-event:first-of-type { margin-left: -5px; text-align: left; }
.timeline-event i { display: block; width: 14px; height: 14px; margin: 1px auto 6px; border: 3px solid #667d8e; border-radius: 50%; background: #10263a; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.timeline-event:first-of-type i { margin-left: 0; }
.timeline-event span { display: block; font: 800 .6rem/1 Poppins, sans-serif; letter-spacing: .06em; }
.timeline-event.reached { color: #cfeaf8; }
.timeline-event.reached i { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(24,168,255,.1), 0 0 10px rgba(24,168,255,.7); transform: scale(1.08); }
.timeline-event.physical.reached i { border-color: #ffc45c; box-shadow: 0 0 0 4px rgba(255,196,92,.11), 0 0 10px rgba(255,178,70,.72); }
.timeline-event.danger.reached i { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(255,79,82,.11), 0 0 10px rgba(255,79,82,.75); }
.timeline-event.acoustic.reached i { border-color: #70ffdf; box-shadow: 0 0 0 4px rgba(112,255,223,.13), 0 0 10px rgba(112,255,223,.75); }
.timeline-event[hidden], .chain-times > div[hidden] { display: none; }
.timeline-readings { color: #91aabb; font-size: .66rem; }
.timeline-readings span:first-child { color: #b9cfdd; }
.chain-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 3px 0 8px; }
.scene[data-scenario="seismic-urban"] .chain-times { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.chain-times > div { min-width: 0; padding: 6px 8px; border: 1px solid rgba(103,183,227,.2); border-radius: 8px; background: rgba(20,84,121,.22); }
.chain-times span { display: block; min-height: 33px; color: #a9d1e6; font: 800 .63rem/1.15 Poppins, sans-serif; letter-spacing: .02em; }
.chain-times strong { display: block; margin-top: 3px; color: #ecfaff; font: 800 .95rem/1 Poppins, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chain-times > div:nth-child(3) { border-color: rgba(24,201,150,.3); background: rgba(24,201,150,.12); }
.chain-times > div:nth-child(3) strong { color: #8df0ca; }
.chain-times > .person-chain-time { border-color: rgba(112,255,223,.38); background: rgba(23,119,107,.22); }
.chain-times > .person-chain-time span { color: #a4f4dc; }
.chain-times > .person-chain-time strong { color: #e1fff4; }
.chain-times > .person-chain-time b { font-weight: 800; }
.chain-times > .person-chain-time[role="button"] { cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.chain-times > .person-chain-time[role="button"]:hover, .chain-times > .person-chain-time[role="button"]:focus-visible { border-color: #d7fff0; background: rgba(33,150,133,.28); outline: none; }

.urban-equation[hidden] { display: none; }
.urban-equation { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; column-gap: 8px; row-gap: 3px; margin: 2px 0 7px; padding: 6px 9px; border-left: 3px solid #70ffdf; border-radius: 2px 7px 7px 2px; background: rgba(3,64,72,.42); font-variant-numeric: tabular-nums; }
.urban-equation span { color: #9cf6e4; font: 800 .59rem/1.15 Poppins, sans-serif; letter-spacing: .07em; white-space: nowrap; }
.urban-equation strong { color: #effffb; font: 800 .77rem/1.2 Poppins, sans-serif; white-space: nowrap; }
.urban-equation small { grid-column: 2; color: #b8e9df; font-size: .67rem; }

.reaction-card { padding: 11px 13px; border: 1px solid rgba(24,201,150,.25); border-radius: 13px; background: rgba(24,201,150,.08); }
.reaction-card > span { display: block; color: #7ddfc2; font: 800 .54rem/1 Poppins, sans-serif; letter-spacing: .1em; }
.reaction-card strong { display: block; margin-top: 5px; color: #74f0ca; font: 800 1.55rem/1 Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.reaction-card small { display: block; margin-top: 5px; color: #97b9ae; font-size: .59rem; line-height: 1.3; }
.reaction-card.negative { border-color: rgba(255,79,82,.31); background: rgba(255,79,82,.09); }
.reaction-card.negative > span, .reaction-card.negative strong { color: #ff8b8e; }
.reaction-card.negative small { color: #d5a4a6; }

.play-cluster { gap: 8px; }
.round-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.17); cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.round-button:hover { transform: translateY(-2px); }
.round-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.round-button.secondary { width: 42px; height: 42px; padding: 0; border-radius: 13px; background: rgba(255,255,255,.055); color: #b7cad7; }
.round-button.primary { gap: 8px; height: 48px; padding: 0 18px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #1098ed, #0075d8); box-shadow: 0 9px 24px rgba(0,119,215,.28); font-weight: 800; }
.round-button.primary svg { fill: currentColor; stroke: none; }
.round-button.primary.paused svg { fill: none; stroke: currentColor; stroke-width: 2.3; }

.panel-scrim { position: fixed; z-index: 48; inset: var(--topbar-height) 0 0; background: rgba(1,10,18,.42); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.panel-scrim.show { opacity: 1; pointer-events: auto; }
.scenario-panel {
  position: fixed;
  z-index: 50;
  top: var(--topbar-height);
  right: 0;
  bottom: 0;
  width: min(460px, 100vw);
  padding: 23px 23px 28px;
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(180deg, rgba(7,24,41,.985), rgba(5,18,31,.99));
  box-shadow: -25px 0 80px rgba(0,0,0,.42);
  transform: translateX(104%);
  transition: transform .38s cubic-bezier(.2,.75,.2,1);
}
.scenario-panel.open { transform: translateX(0); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-head h2, .technical-dialog h2 { margin: 6px 0 0; font: 800 1.3rem/1.2 Poppins, sans-serif; letter-spacing: -.025em; }
.close-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; color: #aec3d2; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.scenario-library { display: grid; gap: 18px; margin: 22px 0; }
.scenario-group > span { display: block; margin-bottom: 9px; color: #7190a6; font: 800 .58rem/1.2 Poppins, sans-serif; letter-spacing: .12em; }
.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scenario-option { position: relative; min-height: 65px; padding: 12px 12px 11px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: #aebfcb; background: rgba(255,255,255,.035); text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.scenario-option:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.065); }
.scenario-option::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #536d81; }
.scenario-option b, .scenario-option small { display: block; }
.scenario-option b { font: 800 .76rem/1.2 Poppins, sans-serif; }
.scenario-option small { margin-top: 4px; color: #70899b; font-size: .62rem; line-height: 1.25; }
.scenario-option.active { border-color: rgba(24,168,255,.5); color: #edf9ff; background: linear-gradient(135deg, rgba(24,168,255,.14), rgba(24,201,150,.06)); box-shadow: inset 0 0 0 1px rgba(24,168,255,.08); }
.scenario-option.active::before { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.scenario-option.active small { color: #8cccf1; }
.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 22px 0; }
.preset { min-width: 0; padding: 11px 9px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(255,255,255,.035); color: #aec0cd; text-align: left; cursor: pointer; }
.preset strong, .preset small { display: block; }
.preset strong { font-size: .67rem; line-height: 1.2; }
.preset small { margin-top: 3px; color: #6f8799; font-size: .55rem; }
.preset.active { border-color: rgba(24,168,255,.5); background: rgba(24,168,255,.1); color: #e8f7ff; box-shadow: inset 0 0 0 1px rgba(24,168,255,.1); }
.preset.active small { color: #75c7f6; }

.control-section { padding: 17px 0 18px; border-top: 1px solid rgba(255,255,255,.09); }
.control-title { gap: 10px; margin-bottom: 18px; }
.control-title > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(24,168,255,.11); color: #79d2ff; font: 800 .7rem Poppins, sans-serif; }
.control-title div { display: grid; }
.control-title strong { font-size: .78rem; }
.control-title small { margin-top: 2px; color: #7892a5; font-size: .61rem; }
.range-control { display: block; margin: 0 2px 18px; }
.range-control:last-child { margin-bottom: 0; }
.range-control > span { justify-content: space-between; gap: 10px; }
.range-control em { color: #bacbd7; font-size: .7rem; font-style: normal; }
.range-control output { color: #eef8ff; font: 800 .72rem Poppins, sans-serif; }
.range-control input { width: 100%; height: 5px; margin: 12px 0 5px; appearance: none; border-radius: 999px; background: linear-gradient(90deg, var(--blue) 0 var(--fill, 25%), rgba(255,255,255,.12) var(--fill, 25%)); outline: none; }
.range-control input::-webkit-slider-thumb { width: 17px; height: 17px; appearance: none; border: 3px solid #dff7ff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(24,168,255,.12); cursor: pointer; }
.range-control input::-moz-range-thumb { width: 13px; height: 13px; border: 3px solid #dff7ff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(24,168,255,.12); cursor: pointer; }
.range-control > small { display: flex; justify-content: space-between; color: #5f788b; font-size: .54rem; }
.range-control i { font-style: normal; }
.range-control > .control-assumption { display: block; margin: 9px 0 0; padding: 8px 10px; border-left: 2px solid #70d8d1; border-radius: 0 7px 7px 0; background: rgba(28,123,137,.12); color: #b4d7df; font-size: .65rem; line-height: 1.4; }
.urban-geometry-note { display: none; margin: -1px 2px 1px; padding: 9px 10px; border-left: 2px solid #80d9ee; border-radius: 0 7px 7px 0; background: rgba(34,132,155,.13); color: #c2dce5; font-size: .63rem; line-height: 1.45; }
body[data-scenario="seismic-urban"] .urban-geometry-note { display: block; }
.control-assumption strong { color: #e3fcfa; font-weight: 800; }
.control-assumption[hidden] { display: none; }

.hazard-summary { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.09); }
.hazard-summary[hidden] { display: none; }
.hazard-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hazard-facts > div { min-width: 0; padding: 11px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.035); }
.hazard-facts span { display: block; color: #69869a; font: 800 .5rem/1 Poppins, sans-serif; letter-spacing: .1em; }
.hazard-facts strong { display: block; margin-top: 6px; color: #dbe9f2; font-size: .65rem; line-height: 1.25; }
.mini-flow { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: mini-flow; }
.mini-flow li { position: relative; padding: 9px 10px 9px 35px; border-radius: 9px; color: #a9bfce; background: rgba(15,48,72,.52); font-size: .65rem; line-height: 1.35; counter-increment: mini-flow; }
.mini-flow li::before { content: counter(mini-flow, decimal-leading-zero); position: absolute; left: 10px; top: 9px; color: #5ecbff; font: 800 .56rem Poppins, sans-serif; }

.equation-card { margin-top: 2px; padding: 16px; border: 1px solid rgba(24,201,150,.23); border-radius: 14px; background: linear-gradient(135deg, rgba(24,201,150,.1), rgba(24,168,255,.06)); }
.equation-card > span { color: #7dcbb7; font: 800 .56rem Poppins, sans-serif; letter-spacing: .11em; }
.equation-card > div { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.equation-card strong { color: #7cf0cf; font: 800 1.8rem Poppins, sans-serif; }
.equation-card small { color: #8eb2a9; font-size: .7rem; }
.equation-card p { margin: 6px 0 0; color: #8da6b5; font-size: .63rem; line-height: 1.45; }

.technical-dialog { width: min(720px, calc(100vw - 32px)); padding: 28px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; color: var(--text); background: linear-gradient(145deg, #0b263e, #061625); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.technical-dialog::backdrop { background: rgba(0,8,15,.66); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; right: 18px; top: 18px; }
.technical-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.technical-grid article { display: flex; gap: 12px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); }
.technical-grid strong { font: 800 .78rem Poppins, sans-serif; }
.technical-grid p { margin: 4px 0 0; color: #91a9bb; font-size: .67rem; line-height: 1.45; }
.legend-dot { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; }
.legend-dot.cyan { background: #55ceff; box-shadow: 0 0 10px #55ceff; }
.legend-dot.orange-dot { background: #ff7135; box-shadow: 0 0 10px #ff7135; }
.legend-line { flex: 0 0 auto; width: 25px; height: 3px; margin-top: 7px; border-radius: 3px; }
.signal-line { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.green-line { background: repeating-linear-gradient(90deg, var(--green) 0 5px, transparent 5px 8px); }
.formula { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--green); background: rgba(24,201,150,.07); }
.formula span { display: block; color: #79d7bd; font: 800 .56rem Poppins, sans-serif; letter-spacing: .11em; }
.formula strong { display: block; margin-top: 5px; font-size: .78rem; }
.disclaimer { margin: 16px 0 0; color: #718c9f; font-size: .62rem; line-height: 1.55; }
.source-links { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.09); }
.source-links[hidden] { display: none; }
.source-links > span { display: block; color: #6f91a7; font: 800 .54rem/1 Poppins, sans-serif; letter-spacing: .11em; }
.source-links > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.source-links a { padding: 7px 9px; border: 1px solid rgba(91,196,255,.2); border-radius: 8px; color: #8fdcff; background: rgba(24,168,255,.06); font-size: .61rem; text-decoration: none; }
.source-links a:hover { border-color: rgba(91,196,255,.5); background: rgba(24,168,255,.12); }
.urban-technical-note { margin-top: 14px; padding: 13px 15px; border: 1px solid rgba(255,134,164,.29); border-radius: 10px; background: rgba(255,65,81,.08); }
.urban-technical-note[hidden] { display: none; }
.urban-technical-note strong { color: #ffb4c4; font-size: .85rem; }
.urban-technical-note p { margin: 6px 0 0; color: #c7d5dd; font-size: .77rem; line-height: 1.48; }
.local-dialog { position: fixed; width: min(610px, calc(100vw - 24px)); max-height: min(780px, calc(100dvh - 24px)); padding: 27px; overflow: auto; border: 1px solid rgba(112,255,223,.32); border-radius: 18px; background: linear-gradient(155deg, #0e2b40, #071626 72%); color: #f5fbff; box-shadow: 0 28px 90px rgba(0,0,0,.55); }
.local-dialog::backdrop { background: rgba(0,8,15,.7); backdrop-filter: blur(4px); }
.local-dialog h2 { margin: 6px 0 0; font: 800 1.5rem/1.17 Poppins, sans-serif; letter-spacing: -.02em; }
.local-dialog > .micro-label { max-width: calc(100% - 44px); line-height: 1.3; }
.local-intro { max-width: 48ch; margin: 12px 0 22px; color: #b5cbd8; font-size: .9rem; line-height: 1.45; }
.local-route { display: grid; grid-template-columns: 120px minmax(0,1fr) 110px; align-items: center; gap: 10px; min-height: 130px; padding: 18px 16px; border: 1px solid rgba(112,255,223,.2); border-radius: 14px; background: rgba(7,47,63,.43); }
.local-end { display: grid; justify-items: center; gap: 5px; text-align: center; }
.local-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(112,255,223,.65); border-radius: 11px; color: #90ffe9; background: rgba(112,255,223,.1); font-size: 1rem; font-style: normal; font-weight: 800; }
.local-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.local-icon.person { border-color: rgba(255,126,144,.67); color: #ffc6d0; background: rgba(255,126,144,.1); }
.local-icon.person { position: relative; overflow: hidden; }
.local-icon.person img { position: absolute; left: 50%; top: -3px; display: block; width: 105px; height: 158px; max-width: none; transform: translateX(-50%); }
.local-end strong { font-size: .75rem; line-height: 1.1; }
.local-end small { color: #a8cbd7; font-size: .72rem; font-variant-numeric: tabular-nums; }
.local-track { position: relative; height: 5px; border-radius: 5px; background: rgba(112,255,223,.2); }
.local-track > span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #6affdf; box-shadow: 0 0 13px #6affdf; }
.local-track em { position: absolute; left: 50%; top: -29px; color: #aaf9e7; font-size: .77rem; font-style: normal; font-weight: 800; white-space: nowrap; transform: translateX(-50%); }
.local-calculation { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.local-calculation > div { min-width: 0; padding: 10px; border: 1px solid rgba(110,220,231,.22); border-radius: 9px; background: rgba(2,31,48,.66); }
.local-calculation span, .local-calculation strong { display: block; }
.local-calculation span { min-height: 27px; color: #9fcad9; font: 800 .68rem/1.25 Poppins, sans-serif; letter-spacing: .025em; }
.local-calculation strong { margin-top: 6px; color: #ebfaff; font: 800 .79rem/1.15 Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.local-calculation .local-calc-result { border-color: rgba(112,255,223,.58); background: rgba(29,123,107,.2); }
.local-calculation .local-calc-result strong { color: #8bffe3; }
.local-equation-line { margin: 10px 0 0; padding: 8px 11px; border-radius: 8px; background: rgba(112,255,223,.1); color: #bdffef; font: 800 .82rem/1.3 Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.local-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.local-facts > div { padding: 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(255,255,255,.04); }
.local-facts span, .local-facts strong, .local-facts small { display: block; }
.local-facts span { color: #8eb6c8; font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.local-facts strong { margin-top: 7px; color: #84ffdf; font: 800 1.45rem/1 Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.local-facts small { margin-top: 7px; color: #a4bbc8; font-size: .7rem; }
.local-blind-text { margin: 15px 0 0; padding-left: 11px; border-left: 3px solid #ff7897; color: #ffd4df; font-size: .84rem; line-height: 1.45; }
.local-chronology { margin-top: 15px; border-top: 1px solid rgba(255,255,255,.12); }
.local-chronology summary { padding: 13px 0 4px; color: #b9f5e6; font-size: .82rem; font-weight: 800; cursor: pointer; }
.local-chronology summary:focus-visible { outline: 2px solid #70ffdf; outline-offset: 3px; }
.local-chronology ol { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.local-chronology li { display: grid; grid-template-columns: 75px 1fr; gap: 9px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.07); color: #c9d8e1; font-size: .79rem; line-height: 1.35; }
.local-chronology li strong { color: #8cf4dd; font-variant-numeric: tabular-nums; }
.local-caveat { margin: 15px 0 0; color: #8eaab9; font-size: .76rem; line-height: 1.45; }
.urban-acoustic-control[hidden] { display: none; }

@media (max-width: 600px) {
  .local-dialog { padding: 23px; }
  .local-route { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; row-gap: 24px; min-height: 165px; }
  .local-route .local-end:first-child { grid-column: 1; grid-row: 1; }
  .local-route .local-end:last-child { grid-column: 2; grid-row: 1; }
  .local-route .local-track { grid-column: 1 / -1; grid-row: 2; margin: 0 18px 5px; }
}

@media (max-width: 1240px) {
  .topbar { grid-template-columns: 1fr auto; }
  .live-pill { display: none; }
  .hud { right: clamp(240px, 20vw, 290px); grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.5fr) minmax(145px, .65fr) auto; gap: 12px; }
  .phase-summary p { display: none; }
  .node-card { width: 220px; }
  .scene-equipment { width: clamp(122px, 12vw, 168px); }
}

@media (min-width: 981px) and (max-width: 1500px) {
  .hud { grid-template-columns: minmax(185px, .6fr) minmax(355px, 1.45fr) minmax(145px, .5fr) auto; gap: 6px; }
  .hud .timeline-event#eventProcess span, .hud .timeline-event#eventResponse span { display: none; }
  .round-button.primary { padding: 0 11px; }
  .phase-summary { gap: 9px; }
  .phase-summary .phase-number { width: 38px; height: 38px; }
  .scene[data-scenario="seismic-urban"] .response-card { display: none; }
}

@media (max-width: 980px) {
  body { overflow: hidden; }
  .app-shell { grid-template-rows: auto minmax(0, 1fr); }
  .topbar { min-height: 64px; padding: 9px 14px; }
  .brand-panel { width: 106px; height: 40px; }
  .brand-copy, .brand-divider, .elapsed { display: none; }
  .scene { height: calc(100dvh - var(--topbar-height)); min-height: 0; }
  .node-card { width: 205px; padding: 12px; }
  .process-card { left: 41%; top: 28%; }
  .response-card { right: 2%; top: 27%; }
  .hud { left: 10px; right: 10px; top: 10px; bottom: auto; grid-template-columns: 1fr auto; min-height: auto; gap: 11px; padding: 11px 12px; }
  .phase-summary { grid-column: 1; }
  .timeline-wrap { grid-column: 1 / -1; grid-row: 2; }
  .reaction-card { grid-column: 2; grid-row: 1; }
  .play-cluster { grid-column: 2; grid-row: 2; align-self: end; }
  .timeline-wrap { padding-right: 165px; }
  .scene-equipment { width: clamp(104px, 13vw, 142px); }
  .scene[data-hazard="river"] .river-badge { display: none; }
  .panel-scrim, .scenario-panel { top: 64px; }
}

@media (max-width: 720px) {
  .topbar { grid-template-columns: auto 1fr; gap: 8px; }
  .brand-lockup { gap: 0; }
  .top-actions { gap: 5px; }
  .ghost-button { padding: 0 10px; }
  .ghost-button span, .speed-picker { display: none; }
  .scene { min-height: 0; }
  .scene-photo, .scene-detail { background-position: 50% center; }
  .systems-layer { inset: 0; width: 100%; max-width: none; transform: none; }
  .node-card { width: 172px; padding: 10px; }
  .node-card strong { font-size: .7rem; }
  .node-card small { font-size: .56rem; }
  .node-time { font-size: .7rem; }
  .scene[data-hazard] .quake-card { left: 2%; top: 66%; }
  .scene[data-hazard] .sensor-card { left: 2%; top: 48%; }
  .scene[data-hazard] .process-card { left: auto; right: 2%; top: 48%; }
  .scene[data-hazard] .response-card { right: 2%; top: 30%; }
  .wave-tag { display: none; }
  .signal-labels { display: none; }
  .scene-equipment { left: auto; right: 3%; bottom: 31%; width: clamp(76px, 18vw, 96px); }
  .scene[data-scenario="seismic-urban"] .scene-equipment,
  .scene[data-scenario="seismic-industry"] .scene-equipment { bottom: 34%; }
  .scene[data-scenario="tsunami"] .scene-equipment { bottom: 38%; }
  .scene[data-scenario="river"] .scene-equipment,
  .scene[data-scenario="flood"] .scene-equipment { bottom: 32%; }
  .hud { grid-template-columns: 1fr auto; }
  .phase-number { width: 39px; height: 39px; }
  .phase-summary strong { font-size: .75rem; }
  .reaction-card { padding: 10px; }
  .reaction-card > span { font-size: .48rem; }
  .reaction-card strong { font-size: 1.35rem; }
  .reaction-card small { display: none; }
  .timeline-wrap { padding-right: 0; grid-column: 1 / -1; }
  .play-cluster { grid-column: 1 / -1; grid-row: 3; justify-content: center; }
  #eventProcess span, #eventResponse span { display: none; }
  .timeline-readings span:last-child { display: none; }
  .round-button.primary { min-width: 130px; }
  .technical-grid { grid-template-columns: 1fr; }

  body[data-scenario="seismic-urban"] .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; padding: 9px 10px; }
  body[data-scenario="seismic-urban"] .mobile-play-cluster { display: flex; align-items: center; justify-self: center; gap: 5px; }
  body[data-scenario="seismic-urban"] .mobile-play-cluster button { height: 40px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: #fff; cursor: pointer; }
  body[data-scenario="seismic-urban"] #mobileRestartButton { width: 29px; padding: 0; background: rgba(255,255,255,.06); font-size: 1.35rem; }
  body[data-scenario="seismic-urban"] #mobilePlayButton { min-width: 93px; padding: 0 8px; background: linear-gradient(135deg, #1098ed, #0075d8); font-size: .69rem; font-weight: 800; }
  body[data-scenario="seismic-urban"] .top-actions { gap: 4px; }
  body[data-scenario="seismic-urban"] .top-actions .icon-button,
  body[data-scenario="seismic-urban"] .top-actions .ghost-button { width: 37px; height: 40px; padding: 0; justify-content: center; }
  body[data-scenario="seismic-urban"] .brand-panel { width: 86px; padding: 6px 8px; }
  body[data-scenario="seismic-urban"] #mobilePlayButton { min-width: 78px; padding: 0 6px; }
  body[data-scenario="seismic-urban"] #mobileRestartButton { width: 28px; }
  body[data-scenario="seismic-urban"] .top-actions .icon-button,
  body[data-scenario="seismic-urban"] .top-actions .ghost-button { width: 34px; }

  .scene[data-scenario="seismic-urban"] .hud { top: 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; padding: 8px 9px; }
  .scene[data-scenario="seismic-urban"] .phase-summary { grid-column: 1; grid-row: 1; gap: 7px; }
  .scene[data-scenario="seismic-urban"] .phase-number { width: 32px; height: 32px; font-size: .74rem; }
  .scene[data-scenario="seismic-urban"] .phase-summary strong { margin-top: 3px; font-size: .68rem; }
  .scene[data-scenario="seismic-urban"] .reaction-card { grid-column: 2; grid-row: 1; padding: 7px 8px; }
  .scene[data-scenario="seismic-urban"] .reaction-card > span { font-size: .42rem; }
  .scene[data-scenario="seismic-urban"] .reaction-card strong { margin-top: 4px; font-size: 1.12rem; }
  .scene[data-scenario="seismic-urban"] .timeline-wrap { grid-column: 1 / -1; grid-row: 2; }
  .scene[data-scenario="seismic-urban"] .timeline-labels,
  .scene[data-scenario="seismic-urban"] .timeline,
  .scene[data-scenario="seismic-urban"] .timeline-readings { display: none; }
  .scene[data-scenario="seismic-urban"] .chain-times { gap: 3px; margin: 0; }
  .scene[data-scenario="seismic-urban"] .chain-times > div { padding: 4px 3px; }
  .scene[data-scenario="seismic-urban"] .chain-times span { min-height: 22px; font-size: .46rem; line-height: 1.1; letter-spacing: 0; }
  .scene[data-scenario="seismic-urban"] .chain-times strong { margin-top: 2px; font-size: .76rem; }
  .scene[data-scenario="seismic-urban"] .play-cluster { display: none; }
  .scene[data-scenario="seismic-urban"] .node-card { display: none; top: 43%; left: 10px; right: auto; width: 172px; }
  .scene[data-scenario="seismic-urban"][data-phase="0"] .quake-card,
  .scene[data-scenario="seismic-urban"][data-phase="1"] .sensor-card,
  .scene[data-scenario="seismic-urban"][data-phase="2"] .process-card,
  .scene[data-scenario="seismic-urban"][data-phase="3"] .response-card,
  .scene[data-scenario="seismic-urban"][data-phase="4"] .response-card,
  .scene[data-scenario="seismic-urban"][data-phase="5"] .response-card { display: block; }
  .scene[data-scenario="seismic-urban"][data-phase="1"] .sensor-card { left: auto; right: 10px; }
  .scene[data-scenario="seismic-urban"] .response-card small { display: none; }
  .scene[data-scenario="seismic-urban"][data-phase="0"] .urban-siren-pin,
  .scene[data-scenario="seismic-urban"][data-phase="1"] .urban-siren-pin,
  .scene[data-scenario="seismic-urban"][data-phase="2"] .urban-siren-pin { display: none; }
  .scene[data-scenario="seismic-urban"] .urban-siren-pin { left: 10px; right: auto; top: 28%; min-width: 170px; }
  .scene[data-scenario="seismic-urban"] .urban-siren-pin::after { display: none; }
  .scene[data-scenario="seismic-urban"] .person-caption { transform: translate(28px, 34px); }
  .scene[data-scenario="seismic-urban"][data-phase="3"] .response-card,
  .scene[data-scenario="seismic-urban"][data-phase="4"] .response-card,
  .scene[data-scenario="seismic-urban"][data-phase="5"] .response-card { display: none; }
}

@media (max-width: 360px) {
  body[data-scenario="seismic-urban"] .brand-panel { width: 76px; }
  body[data-scenario="seismic-urban"] #mobilePlayButton { min-width: 70px; }
}

@media (min-width: 981px) {
  .quake-card { left: 4.4%; }
  .sensor-card { left: 28%; }
  .process-card { left: 48%; top: 31%; }
  .response-card { top: 6%; }
  .scene[data-scenario="seismic-urban"] .sensor-card { left: 20%; top: 28%; width: 250px; padding: 12px; }
  .scene[data-scenario="seismic-urban"] .process-card { left: 42%; top: 28%; }
  .scene[data-scenario="seismic-urban"] .response-card { right: 17%; top: 41%; width: 235px; padding: 10px 12px; }
  .scene[data-scenario="seismic-urban"] .response-card strong { margin-top: 1px; font-size: .78rem; white-space: nowrap; }
  .scene[data-scenario="seismic-urban"] .response-card small { display: none; }
  .scene[data-scenario="seismic-urban"] .response-card .node-time { margin-top: 6px; padding: 4px 6px; }
}
@media (min-width: 981px) and (max-width: 1500px) {
  .scene[data-scenario="seismic-urban"] .sensor-card { top: 29%; width: 220px; padding: 11px; }
  .scene[data-scenario="seismic-urban"] .process-card { top: 29%; width: 250px; padding: 11px; }
  .scene[data-scenario="seismic-urban"] .quake-card { top: 53%; }
}

/* Urban seismic overlays stay compact and anchored away from the physical equipment. */
.scene[data-scenario="seismic-urban"] .node-card {
  --accent: #62d6ff;
  width: 196px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  border-radius: 9px;
  background: linear-gradient(130deg, rgba(3,20,34,.93), rgba(8,39,57,.84));
  color: #f4fcff;
  box-shadow: 0 10px 26px rgba(0,9,19,.32), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
}
.scene[data-scenario="seismic-urban"] .node-card { display: none; }
.scene[data-scenario="seismic-urban"][data-phase="0"] .quake-card,
.scene[data-scenario="seismic-urban"][data-phase="1"] .sensor-card,
.scene[data-scenario="seismic-urban"][data-phase="2"] .process-card { display: block; }
.scene[data-scenario="seismic-urban"] .quake-card { --accent: #ff9864; }
.scene[data-scenario="seismic-urban"] .process-card { --accent: #68baff; }
.scene[data-scenario="seismic-urban"] .node-card::after { left: 0; right: 26px; bottom: 0; height: 2px; background: var(--accent); box-shadow: 0 0 13px var(--accent); }
.scene[data-scenario="seismic-urban"] .node-index,
.scene[data-scenario="seismic-urban"] .node-index.orange,
.scene[data-scenario="seismic-urban"] .node-index.sky,
.scene[data-scenario="seismic-urban"] .node-index.blue { color: var(--accent); font-size: .62rem; }
.scene[data-scenario="seismic-urban"] .node-state { padding: 3px 5px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: rgba(255,255,255,.06); color: #adbfcb; font-size: .52rem; }
.scene[data-scenario="seismic-urban"] .node-card.is-active .node-state { color: #95ffdb; background: rgba(24,201,150,.13); }
.scene[data-scenario="seismic-urban"] .node-card strong { font-size: .77rem; line-height: 1.2; }
.scene[data-scenario="seismic-urban"] .node-card small { display: none; }
.scene[data-scenario="seismic-urban"] .node-time { margin-top: 7px; padding: 4px 6px; border-color: rgba(98,214,255,.25); border-radius: 4px; background: rgba(98,214,255,.09); color: #b7ecff; font-size: .72rem; }
.scene[data-scenario="seismic-urban"] .response-card { display: none; }
.scene[data-scenario="seismic-urban"] .urban-siren-pin { padding: 9px 11px; border-radius: 8px; background: linear-gradient(130deg, rgba(3,20,34,.95), rgba(33,24,41,.85)); box-shadow: 0 10px 25px rgba(0,9,19,.32), inset 0 1px 0 rgba(255,255,255,.1); }

@media (min-width: 981px) {
  .scene[data-scenario="seismic-urban"] .quake-card { left: 3%; top: 47%; width: 176px; }
  .scene[data-scenario="seismic-urban"] .sensor-card { left: 18%; top: 40%; width: 195px; }
  .scene[data-scenario="seismic-urban"] .process-card { left: 60%; top: 39%; width: 196px; }
}

.scene[data-scenario="seismic-urban"] .wave-tag { display: none; }

@media (min-width: 721px) {
  .scene[data-scenario="seismic-urban"] .sensor-card { left: 2%; top: 31%; width: 196px; }
  .scene[data-scenario="seismic-urban"] .urban-siren-pin { top: 37%; }
}

@media (max-width: 720px) {
  .scene[data-scenario="seismic-urban"] .node-card { width: 165px; padding: 8px 10px; }
  .scene[data-scenario="seismic-urban"] .node-card strong { font-size: .69rem; }
  .scene[data-scenario="seismic-urban"][data-phase="1"] .sensor-card { top: 30%; }
  .scene[data-scenario="seismic-urban"] .urban-equation { grid-template-columns: auto minmax(0,1fr); margin: 3px 0 0; padding: 4px 6px; column-gap: 6px; }
  .scene[data-scenario="seismic-urban"] .urban-equation span { font-size: .54rem; }
  .scene[data-scenario="seismic-urban"] .urban-equation strong { font-size: .66rem; white-space: nowrap; }
  .scene[data-scenario="seismic-urban"] .urban-equation small { display: none; }
  .local-calculation { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .local-calculation span { min-height: 16px; }
  .local-equation-line { font-size: .74rem; }
}
.scene[data-scenario="seismic-urban"] .signal-labels { display: none; }

/* The urban aerial view is a second camera on the same event, not a second simulation. */
.view-toggle[hidden] { display: none; }
.view-toggle { flex: 0 0 auto; white-space: nowrap; }
.view-toggle[aria-pressed="true"] { color: #92e8ff; border-color: rgba(105,212,255,.7); background: rgba(23,144,196,.18); }
.view-toggle:focus-visible { outline: 2px solid #92e8ff; outline-offset: 3px; }
.aerial-view { display: none; position: absolute; z-index: 10; inset: 0; pointer-events: none; overflow: hidden; background: #102e43; }
.scene[data-scenario="seismic-urban"][data-view="aerial"] .aerial-view { display: block; }
.scene[data-scenario="seismic-urban"][data-view="aerial"] .node-card,
.scene[data-scenario="seismic-urban"][data-view="aerial"] .urban-siren-pin { display: none; }
.aerial-photo, .aerial-shake-photo, .aerial-tone, .aerial-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.aerial-photo, .aerial-shake-photo { background: url('./assets/scene-seismic-urban-aerial-costa-verde-oblique-v3.png') center / cover no-repeat; transform-origin: center; }
.aerial-shake-photo {
  opacity: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse var(--aerial-s-rx, 1px) var(--aerial-s-ry, 1px) at var(--aerial-s-cx, 0px) var(--aerial-s-cy, 0px), transparent 82%, #000 92%, #000 102%, transparent 112%);
  mask-image: radial-gradient(ellipse var(--aerial-s-rx, 1px) var(--aerial-s-ry, 1px) at var(--aerial-s-cx, 0px) var(--aerial-s-cy, 0px), transparent 82%, #000 92%, #000 102%, transparent 112%);
}
.scene[data-scenario="seismic-urban"].urban-s-surface .aerial-shake-photo { opacity: 1; animation: ground-shake .085s linear infinite; }
.aerial-tone { background: linear-gradient(180deg, rgba(4,19,33,.23), rgba(4,19,33,.02) 34%, rgba(4,19,33,.12) 70%, rgba(4,19,33,.35)), linear-gradient(90deg, rgba(4,21,34,.2), transparent 36%, transparent 78%, rgba(4,21,34,.18)); }
.aerial-map { overflow: hidden; pointer-events: none; }
.aerial-blind-fill { fill: rgba(255,65,115,.17); }
.aerial-blind-hatch { fill: url(#aerialBlindHatch); }
.aerial-blind-edge { fill: none; stroke: rgba(255,95,143,.82); stroke-width: 3; stroke-dasharray: 12 12; }
.aerial-route-guide { fill: none; stroke: rgba(255,200,207,.46); stroke-width: 3; stroke-dasharray: 8 10; }
.aerial-route-signal { fill: none; stroke: #ff3e52; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 7px rgba(255,50,75,.8)); }
.aerial-ack-route { fill: none; stroke: #45e5ba; stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .9; }
.aerial-wave, .aerial-wave-glow { fill: none; vector-effect: non-scaling-stroke; }
.aerial-wave { stroke-width: 6; }
.aerial-wave-glow { stroke-width: 18; opacity: .72; }
.aerial-wave.p { stroke: #53d4ff; }
.aerial-wave.s { stroke: #ff943f; }
.aerial-wave-glow.p { stroke: #36bdff; filter: url(#aerialBlueGlow); }
.aerial-wave-glow.s { stroke: #ff7b35; filter: url(#aerialOrangeGlow); }
.aerial-s-local { opacity: 0; pointer-events: none; }
.aerial-s-local.active { opacity: 1; }
.aerial-s-local-line { fill: none; stroke: #ffa158; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255,130,58,.8)); }
.aerial-s-local-head { fill: #fff2d1; stroke: #ff8c49; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(255,130,58,.85)); }
.aerial-origin > path { fill: none; stroke: #ffd998; stroke-width: 3; stroke-linecap: round; }
.aerial-origin-core { fill: #ffe1a3; stroke: #ff9f42; stroke-width: 4; filter: drop-shadow(0 0 10px #ff7b35); }
.aerial-origin-pulse { fill: rgba(255,140,60,.1); stroke: rgba(255,168,87,.85); stroke-width: 3; animation: point-ring 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.aerial-marker { --marker: #a8c0ce; }
.aerial-marker.is-on.aerial-sensor { --marker: #68dbff; }
.aerial-marker.is-on.aerial-control { --marker: #54baff; }
.aerial-marker.is-on.aerial-bms, .aerial-marker.is-on.aerial-pdd { --marker: #ff5162; }
.aerial-marker.is-on.aerial-person { --marker: #75f0cd; }
.aerial-marker.aerial-person.is-s-arrived { --marker: #ffad69; }
.aerial-marker-ring { fill: rgba(6,27,43,.7); stroke: var(--marker); stroke-width: 3; filter: drop-shadow(0 0 9px var(--marker)); }
.aerial-marker-core { fill: var(--marker); stroke: #eafaff; stroke-width: 2; }
.aerial-marker.is-on .aerial-marker-ring { animation: point-ring 1.7s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.aerial-interactive { pointer-events: all; cursor: pointer; outline: none; }
.aerial-interactive:focus-visible .aerial-marker-ring { stroke: #fff; stroke-width: 5; }
.aerial-beacon { fill: #742e38; stroke: #ffd1d7; stroke-width: 2; }
.aerial-pdd.is-on .aerial-beacon { fill: #ff3e4d; filter: drop-shadow(0 0 10px #ff4659); animation: aerial-beacon-pulse .75s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes aerial-beacon-pulse { from { transform: scale(.82); opacity: .78; } to { transform: scale(1.28); opacity: 1; } }
.aerial-equipment-shadow { fill: rgba(0, 13, 23, .42); filter: blur(3px); }
.aerial-pdd-equipment { pointer-events: none; filter: drop-shadow(2px 4px 3px rgba(0, 12, 20, .58)); }
.aerial-pdd:not(.is-on) .aerial-pdd-equipment { filter: brightness(.8) saturate(.8) drop-shadow(2px 4px 3px rgba(0, 12, 20, .58)); }
.aerial-pdd .aerial-marker-ring { fill: rgba(5, 21, 34, .25); }
.aerial-pdd-secondary .aerial-marker-ring { stroke-width: 2; }
.aerial-pdd-secondary .aerial-label text { font-size: 11px; }
.aerial-label rect { fill: rgba(3,22,36,.91); stroke: rgba(162,210,230,.53); stroke-width: 1.4; filter: drop-shadow(0 7px 12px rgba(0,9,18,.36)); }
.aerial-label text { fill: #effbff; font: 800 12px Poppins, sans-serif; letter-spacing: .045em; }
.aerial-label .aerial-label-sub { fill: #bdd9e8; font: 700 11px Poppins, sans-serif; letter-spacing: 0; }
.aerial-sensor.is-on .aerial-label rect { stroke: #69dcff; }
.aerial-control.is-on .aerial-label rect { stroke: #5cbdff; }
.aerial-bms.is-on .aerial-label rect, .aerial-pdd.is-on .aerial-label rect { stroke: #ff6978; }
.aerial-blind-note rect { fill: rgba(42,8,25,.91); stroke: rgba(255,104,146,.88); }
.aerial-blind-note text { fill: #ffc2d4; font-size: 14px; }
.aerial-blind-note .aerial-label-sub { fill: #ffe2eb; font-size: 13px; }
.aerial-sound-wave { fill: none; stroke: #79ffe2; stroke-width: 5; opacity: 0; filter: drop-shadow(0 0 10px rgba(100,255,224,.8)); }
.aerial-person-route > path:first-child { fill: none; stroke: rgba(158,255,224,.77); stroke-width: 3; stroke-dasharray: 7 8; }
.aerial-safe-point { fill: rgba(17,96,73,.85); stroke: #82ffd2; stroke-width: 3; }
.aerial-safe-cross { fill: none; stroke: #ecfff7; stroke-width: 3; stroke-linecap: round; }
.aerial-safe-label rect { stroke: #82ffd2; }
.aerial-safe-label text { fill: #acffe5; }
.aerial-person.is-running .aerial-marker-core { animation: aerial-beacon-pulse .34s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.aerial-person.is-protecting .aerial-marker-core { fill: #ffcc88; }
.aerial-wave-key circle.p { fill: #53d4ff; }
.aerial-wave-key circle.s { fill: #ff943f; }
.aerial-wave-key text { fill: #e6f8ff; font: 800 13px Poppins, sans-serif; }
.aerial-wave-key .aerial-key-note { fill: #d0e4ec; font-size: 11px; font-weight: 700; }
@media (max-width: 1500px) {
  .view-toggle { width: 40px; padding: 0; justify-content: center; }
  .view-toggle span { display: none; }
}
@media (max-width: 720px) {
  .aerial-wave-key .aerial-key-note { display: none; }
}

/* Keep the urban sequence and controls in one calm, compact instrument bar. */
.scene[data-scenario="seismic-urban"] .impact-banner { display: none; }
@media (min-width: 981px) {
  .scene[data-scenario="seismic-urban"] .hud {
    left: 16px; right: 16px; top: 12px; min-height: 0;
    grid-template-columns: minmax(190px, .75fr) minmax(490px, 2.5fr) minmax(135px, .53fr) auto;
    gap: 10px; align-items: center; padding: 9px 12px;
    border-radius: 13px;
  }
  .scene[data-scenario="seismic-urban"] .phase-summary { gap: 9px; }
  .scene[data-scenario="seismic-urban"] .phase-number { width: 37px; height: 37px; }
  .scene[data-scenario="seismic-urban"] .phase-summary strong { margin-top: 3px; font-size: .77rem; }
  .scene[data-scenario="seismic-urban"] .phase-summary p { margin-top: 3px; font-size: .61rem; -webkit-line-clamp: 2; }
  .scene[data-scenario="seismic-urban"] .timeline-labels { font-size: .5rem; }
  .scene[data-scenario="seismic-urban"] .timeline { height: 28px; margin: 5px 7px 1px; }
  .scene[data-scenario="seismic-urban"] .timeline-event span { font-size: .52rem; }
  .scene[data-scenario="seismic-urban"] .chain-times { gap: 4px; margin: 0; }
  .scene[data-scenario="seismic-urban"] .chain-times > div { padding: 4px 5px; }
  .scene[data-scenario="seismic-urban"] .chain-times span { min-height: 22px; font-size: .52rem; }
  .scene[data-scenario="seismic-urban"] .chain-times strong { font-size: .79rem; }
  .scene[data-scenario="seismic-urban"] .urban-equation { margin: 3px 0 0; padding: 4px 6px; row-gap: 0; }
  .scene[data-scenario="seismic-urban"] .urban-equation small,
  .scene[data-scenario="seismic-urban"] .timeline-readings { display: none; }
  .scene[data-scenario="seismic-urban"] .reaction-card { padding: 8px 10px; border-radius: 9px; }
  .scene[data-scenario="seismic-urban"] .reaction-card strong { margin-top: 4px; font-size: 1.25rem; }
  .scene[data-scenario="seismic-urban"] .reaction-card small { font-size: .53rem; }
  .scene[data-scenario="seismic-urban"] .play-cluster { gap: 5px; }
  .scene[data-scenario="seismic-urban"] .round-button.primary { min-width: 115px; padding: 0 12px; }
  .scene[data-scenario="seismic-urban"] .urban-siren-pin { left: 59%; right: auto; top: 39%; min-width: 165px; }
  .scene[data-scenario="seismic-urban"] .urban-siren-pin::after { right: -15px; width: 14px; }
}
@media (min-width: 981px) and (max-width: 1240px) {
  .scene[data-scenario="seismic-urban"] .hud { grid-template-columns: minmax(0, 1fr) auto auto; }
  .scene[data-scenario="seismic-urban"] .phase-summary { grid-column: 1; grid-row: 1; }
  .scene[data-scenario="seismic-urban"] .reaction-card { grid-column: 2; grid-row: 1; }
  .scene[data-scenario="seismic-urban"] .play-cluster { grid-column: 3; grid-row: 1; }
  .scene[data-scenario="seismic-urban"] .timeline-wrap { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .scene[data-scenario="seismic-urban"] .hud {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    padding: 8px 10px;
  }
  .scene[data-scenario="seismic-urban"] .phase-summary { grid-column: 1; grid-row: 1; }
  .scene[data-scenario="seismic-urban"] .phase-number { width: 34px; height: 34px; }
  .scene[data-scenario="seismic-urban"] .phase-summary strong { font-size: .73rem; }
  .scene[data-scenario="seismic-urban"] .phase-summary p { display: none; }
  .scene[data-scenario="seismic-urban"] .reaction-card { grid-column: 2; grid-row: 1; padding: 6px 9px; }
  .scene[data-scenario="seismic-urban"] .reaction-card strong { font-size: 1.14rem; }
  .scene[data-scenario="seismic-urban"] .reaction-card small { display: none; }
  .scene[data-scenario="seismic-urban"] .play-cluster { grid-column: 3; grid-row: 1; align-self: center; }
  .scene[data-scenario="seismic-urban"] .round-button.primary { min-width: 92px; padding: 0 8px; }
  .scene[data-scenario="seismic-urban"] .timeline-wrap { grid-column: 1 / -1; grid-row: 2; padding-right: 0; }
  .scene[data-scenario="seismic-urban"] .timeline-labels,
  .scene[data-scenario="seismic-urban"] .timeline,
  .scene[data-scenario="seismic-urban"] .timeline-readings { display: none; }
  .scene[data-scenario="seismic-urban"] .chain-times { gap: 4px; margin: 0; }
  .scene[data-scenario="seismic-urban"] .chain-times > div { padding: 4px 5px; }
  .scene[data-scenario="seismic-urban"] .chain-times span { min-height: 19px; font-size: .49rem; }
  .scene[data-scenario="seismic-urban"] .chain-times strong { font-size: .76rem; }
  .scene[data-scenario="seismic-urban"] .urban-equation { margin: 4px 0 0; padding: 5px 6px; }
  .scene[data-scenario="seismic-urban"] .urban-equation small,
  .scene[data-scenario="seismic-urban"][data-phase] .node-card { display: none; }
  .scene[data-scenario="seismic-urban"] .urban-siren-pin { display: none; }
}
.scene[data-scenario="seismic-urban"] .reaction-card.expired { border-color: rgba(255,104,105,.68); background: rgba(141,34,39,.26); }
.scene[data-scenario="seismic-urban"] .reaction-card.expired > span,
.scene[data-scenario="seismic-urban"] .reaction-card.expired strong { color: #ffb6b1; }
@media (max-width: 720px) {
  .scene[data-scenario="seismic-urban"] .sensor-ruler-label { display: none; }
  .scene[data-scenario="seismic-urban"] .person-caption { transform: translate(-162px, 32px); }
  .scene[data-scenario="seismic-urban"] .blind-zone-badge .blind-sensor { font-size: 11px; }
  .scene[data-scenario="seismic-urban"] .urban-siren-pin { left: 10px; top: 27%; min-width: 0; width: 155px; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Urban teaching sequence: one readable chronology, with sound in its own step. */
.urban-sequence, .urban-sequence-note { display: none; }
.scene[data-scenario="seismic-urban"] .person-caption { display: none; }
.scene[data-scenario="seismic-urban"].simulation-paused .scene-detail,
.scene[data-scenario="seismic-urban"].simulation-paused .seismic-impact-frame,
.scene[data-scenario="seismic-urban"].simulation-paused .aerial-shake-photo,
.scene[data-scenario="seismic-urban"].simulation-paused .urban-sensor-station image,
.scene[data-scenario="seismic-urban"].simulation-paused .urban-sensor-station ellipse,
.scene[data-scenario="seismic-urban"].simulation-paused .person-figure,
.scene[data-scenario="seismic-urban"].simulation-paused .person-running-a,
.scene[data-scenario="seismic-urban"].simulation-paused .person-running-b { animation-play-state: paused; }
.scene[data-scenario="seismic-urban"] .hud {
  left: 12px; right: 12px; top: 10px; padding: 8px 12px; gap: 6px 14px;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) auto;
  background: linear-gradient(120deg, rgba(3,20,34,.94), rgba(9,36,57,.91));
}
.scene[data-scenario="seismic-urban"] .phase-summary { grid-column: 1; grid-row: 1; gap: 10px; }
.scene[data-scenario="seismic-urban"] .phase-number { width: 38px; height: 38px; font-size: 1rem; border-radius: 10px; }
.scene[data-scenario="seismic-urban"] .phase-summary .micro-label { display: inline; margin-right: 10px; font-size: .65rem; letter-spacing: .045em; }
.scene[data-scenario="seismic-urban"] .phase-summary strong { display: inline; font-size: .95rem; line-height: 1.2; margin-top: 0; white-space: normal; }
.scene[data-scenario="seismic-urban"] .phase-summary p { display: none; }
.scene[data-scenario="seismic-urban"] .timeline-wrap { display: none; }
.scene[data-scenario="seismic-urban"] .reaction-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; grid-column: 2; grid-row: 1; min-height: 38px; padding: 5px 8px; }
.scene[data-scenario="seismic-urban"] .reaction-card > span { font-size: .65rem; line-height: 1.2; letter-spacing: .015em; }
.scene[data-scenario="seismic-urban"] .reaction-card strong { flex-shrink: 0; font-size: 1.2rem; margin-top: 0; }
.scene[data-scenario="seismic-urban"] .reaction-card small { display: none; }
.scene[data-scenario="seismic-urban"] .play-cluster { grid-column: 3; grid-row: 1; }
.scene[data-scenario="seismic-urban"] .play-cluster .round-button { height: 38px; }
.scene[data-scenario="seismic-urban"] .urban-sequence {
  display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(7, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0; gap: 8px; min-width: 0;
}
.scene[data-scenario="seismic-urban"] .urban-sequence li { min-width: 0; display: flex; }
.urban-stage { --stage-color: #55bcf9; position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding: 6px 8px; border: 1px solid rgba(138,180,207,.24); border-top: 2px solid rgba(138,180,207,.35); border-radius: 8px; color: #dbeaf3; background: rgba(13,42,63,.65); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.urban-stage.origin-stage { --stage-color: #ffae74; }
.urban-stage.siren-stage { --stage-color: #ff8b95; }
.urban-stage.sound-stage { --stage-color: #84f0ce; }
.urban-stage.p-stage { --stage-color: #ffd17d; }
.urban-stage.s-stage { --stage-color: #ff9293; }
.urban-stage::after { content: "›"; position: absolute; z-index: 1; right: -7px; top: 40%; color: #6f99b3; font: 600 18px/1 sans-serif; }
.urban-stage.is-last::after { display: none; }
.urban-stage-top { display: flex; align-items: center; gap: 5px; min-height: 15px; color: #91b5cd; }
.urban-stage-top b { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: rgba(255,255,255,.08); color: #b9d2e2; font: 800 11px/1 Poppins, sans-serif; }
.urban-stage-top em { font: 800 .61rem/1 Poppins, sans-serif; font-style: normal; letter-spacing: .025em; }
.urban-stage-state { margin-left: auto; color: #a6bbca; font: 700 .62rem/1 Poppins, sans-serif; }
.urban-stage > strong { font: 800 .875rem/1.13 Poppins, sans-serif; }
.urban-stage time { color: #eefaff; font: 800 1.1rem/1.1 Poppins, sans-serif; }
.urban-stage small { color: #b4cbd9; font: 600 .75rem/1.15 Poppins, sans-serif; }
.urban-stage small[hidden] { display: none; }
.urban-stage .urban-sound-weather { color: #a4e1ce; font-size: .7rem; line-height: 1.1; }
.urban-stage .urban-sound-formula { color: #d1ffed; font-size: .73rem; line-height: 1.1; }
.urban-stage.is-done { border-top-color: var(--stage-color); background: rgba(29,62,81,.62); }
.urban-stage.is-done .urban-stage-top b { color: var(--stage-color); }
.urban-stage.is-current { border-color: var(--stage-color); background: linear-gradient(140deg, rgba(41,79,104,.88), rgba(14,50,71,.92)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.urban-stage.is-current .urban-stage-state { color: var(--stage-color); }
.urban-stage.is-current .urban-stage-top b { background: var(--stage-color); color: #09263b; }
.urban-stage:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.urban-stage:hover { background: rgba(37,77,101,.88); }
.scene[data-scenario="seismic-urban"] .urban-sequence-note { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 14px; margin-top: 4px; color: #91b0c5; font: 600 .7rem/1.2 Poppins, sans-serif; }
.urban-sequence-note button { padding: 0; border: none; background: none; color: #9ee6d3; text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; }
.urban-sequence[hidden], .urban-sequence-note[hidden] { display: none !important; }
@media (min-width: 721px) and (max-width: 1240px) {
  .scene[data-scenario="seismic-urban"] .phase-summary #phaseCaption { font-size: 0; }
  .scene[data-scenario="seismic-urban"] #phaseCaption::before { content: "TIEMPOS DESDE EL SISMO"; font-size: .6rem; }
  .urban-sequence-note > span { display: none; }
}
@media (max-width: 1440px) and (min-width: 981px) {
  .scene[data-scenario="seismic-urban"] .phase-summary p { display: none; }
  .urban-stage-top em { font-size: .58rem; }
  .urban-stage-state { font-size: .58rem; }
  .urban-stage > strong { min-height: 33px; }
}
@media (max-width: 1240px) {
  .scene[data-scenario="seismic-urban"] .hud { grid-template-columns: minmax(0, 1fr) minmax(130px, 180px) auto; gap: 7px 9px; }
  .scene[data-scenario="seismic-urban"] .phase-summary p { display: none; }
  .scene[data-scenario="seismic-urban"] .phase-summary strong { font-size: .875rem; }
  .scene[data-scenario="seismic-urban"] .phase-summary .micro-label { font-size: .61rem; }
  .scene[data-scenario="seismic-urban"] .urban-sequence { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 178px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 0 7px; scrollbar-width: thin; }
  .urban-sequence li { scroll-snap-align: start; }
  .urban-stage > strong { min-height: 0; }
  .scene[data-scenario="seismic-urban"] .reaction-card small { display: none; }
  .scene[data-scenario="seismic-urban"] .reaction-card > span { font-size: .6rem; }
  .scene[data-scenario="seismic-urban"] .urban-sequence-note { font-size: .65rem; }
}
@media (max-width: 720px) {
  .scene[data-scenario="seismic-urban"] .hud { left: 8px; right: 8px; padding: 8px; grid-template-columns: minmax(0, 1fr) 116px; }
  .scene[data-scenario="seismic-urban"] .phase-number { display: none; }
  .scene[data-scenario="seismic-urban"] .phase-summary .micro-label { font-size: .58rem; }
  .scene[data-scenario="seismic-urban"] .phase-summary strong { font-size: .85rem; }
  .scene[data-scenario="seismic-urban"] .reaction-card { padding: 6px; }
  .scene[data-scenario="seismic-urban"] .reaction-card { display: block; }
  .scene[data-scenario="seismic-urban"] .reaction-card strong { font-size: 1.12rem; }
  .scene[data-scenario="seismic-urban"] .play-cluster { display: none; }
  .scene[data-scenario="seismic-urban"] .urban-siren-pin { display: none; }
  .scene[data-scenario="seismic-urban"] .urban-sequence-note { align-items: start; }
  .scene[data-scenario="seismic-urban"] .phase-summary .micro-label { display: block; }
  .urban-sequence-note > span { display: none; }
}