.bridge-diorama {
  --bd-ink: #194f53;
  --bd-mint: #d5f0e0;
  --bd-amber: #f1c065;
  --bd-gate-angle: 0deg;
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  background: #e8f1dc;
  color: var(--bd-ink);
  box-shadow: inset 0 0 0 1px #ffffff90;
}
.bd-world { position: relative; width: 100%; height: 100%; min-height: 300px; overflow: hidden; }
.bd-world-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }
.bd-river, .bd-inspection-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bd-river { z-index: 1; mix-blend-mode: screen; }
.bd-current { fill: none; stroke: #dcfff5; stroke-width: 2; stroke-linecap: round; opacity: .32; animation: bd-river-current 8s ease-in-out infinite; }
.bd-current-second { opacity: .22; animation-delay: -4s; animation-duration: 11s; }
.bd-inspection-overlay { z-index: 4; opacity: 0; transition: opacity .4s; }
.bd-road-line { stroke: #fff1ba; stroke-width: 32; fill: none; opacity: .11; }
.bd-scan-trail { stroke: #ffeac2; stroke-width: 3; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 6px #fff1c5); }
.bd-inspection-drone { fill: #fff9e7; stroke: #4e787b; stroke-width: 2.5; filter: drop-shadow(0 6px 3px #0c404444); }
.bd-inspection-drone .bd-drone-range { fill: #ffefb820; stroke: #fff1ba; stroke-width: 1.2; stroke-dasharray: 4 5; }
.bridge-diorama[data-inspecting="true"] .bd-inspection-overlay { opacity: 1; }
.bridge-diorama[data-inspecting="true"] .bd-drone-range { animation: bd-sensor-ring 2s linear infinite; }
.bd-vehicle { position: absolute; width: 7%; min-width: 30px; transform: translate(-50%, -58%); z-index: 3; pointer-events: none; filter: drop-shadow(0 4px 2px #2247414a); }
.bd-vehicle img { display: block; width: 100%; height: auto; pointer-events: none; }
.bd-vehicle-crossing { opacity: 0; }
.bd-vehicle-waiting { transition: opacity .3s; }
.bridge-diorama[data-crossing="true"] .bd-vehicle-waiting { opacity: 0; }
.bd-brake-light { position: absolute; left: 29%; top: 51%; width: 5%; height: 5%; border-radius: 50%; background: #f5a386; box-shadow: 0 0 4px #f66a43; opacity: .9; }
.bd-gate { position: absolute; left: 23%; top: 35.6%; width: 8%; min-width: 48px; z-index: 5; transform: translate(-23%, -67%); pointer-events: none; }
.bd-gate svg { display: block; width: 100%; overflow: visible; }
.bd-gate-arm { transform-origin: 23px 51px; transform: rotate(var(--bd-gate-angle)); transition: transform .16s linear; }
.bd-gate-beacon { fill: #e5b74e; }
.bridge-diorama[data-pending="true"] .bd-gate-beacon { animation: bd-beacon 1s steps(2, jump-none) infinite; }
.bridge-diorama[data-crossing="true"] .bd-gate-beacon { fill: #59b691; }
.bd-hotspot, .bd-gate-hotspot {
  position: absolute;
  z-index: 8;
  min-height: 48px;
  border: 1px solid #ffffffcf;
  border-radius: 14px;
  padding: 10px 14px;
  color: #194e50;
  background: #fffdf3ed;
  box-shadow: 0 6px 18px #214f4020, 0 1px 3px #214f4022;
  font: inherit;
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 750;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .15s, box-shadow .15s, transform .15s;
}
.bd-hotspot svg { width: 23px; height: 23px; flex: 0 0 auto; }
.bd-hotspot:hover, .bd-gate-hotspot:hover { background: #fffef8; box-shadow: 0 8px 22px #214f4038; transform: translateY(-2px); }
.bd-hotspot:focus-visible, .bd-gate-hotspot:focus-visible { outline: 3px solid #256f6f; outline-offset: 4px; }
.bd-inspect-hotspot { left: 43%; top: 34%; }
.bd-impact-hotspot { right: 5%; top: 15%; }
.bd-gate-hotspot { left: 4%; bottom: 11%; gap: 9px; }
.bd-gate-hotspot > svg { width: 23px; height: 23px; margin-left: 2px; }
.bd-gate-dot, .bd-access-dot { width: 8px; height: 8px; flex: 0 0 auto; background: #cf9561; border-radius: 50%; box-shadow: 0 0 0 4px #dba86a20; }
.bridge-diorama[data-crossing="true"] .bd-gate-dot { background: #409f78; box-shadow: 0 0 0 4px #5db49324; }
.bridge-diorama[data-pending="true"] .bd-gate-dot { background: #d7a63d; animation: bd-beacon 1.2s ease-in-out infinite; }
.bd-damage-marker { position: absolute; left: 53%; top: 48%; width: 40px; height: 52px; z-index: 7; opacity: 0; transform: translate(-50%, -100%) scale(.7); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.bd-marker-pin { position: absolute; top: 31px; bottom: 0; width: 2px; left: 50%; background: #dfaf61; }
.bd-damage-symbol { position: absolute; inset: 0 0 auto; width: 38px; height: 38px; border: 3px solid #fff6df; border-radius: 50%; background: #ebbc63; color: #704824; display: grid; place-items: center; font: 800 24px/1 system-ui, sans-serif; box-shadow: 0 4px 12px #71532f30; }
.bridge-diorama[data-damaged="true"] .bd-damage-marker { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.bd-inspection-complete { position: absolute; left: 41%; top: 29%; z-index: 7; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: #fff5dbea; color: #775431; font-size: 12px; font-weight: 750; box-shadow: 0 3px 12px #4b51351a; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.bd-inspection-complete svg { width: 21px; height: 21px; }
.bridge-diorama[data-fresh="true"] .bd-inspection-complete { opacity: 1; transform: none; }
.bridge-diorama[data-fresh="true"][data-damaged="false"] .bd-inspection-complete { background: #def4e5ee; color: #2c705b; }
.bd-access-cue { position: absolute; right: 5%; top: 25%; z-index: 6; display: flex; align-items: center; gap: 6px; color: #215552; background: #fff9e6c9; border: 1px solid #ffffffa6; border-radius: 20px; padding: 5px 9px 5px 6px; font-size: 10px; font-weight: 700; pointer-events: none; }
.bd-access-symbol { width: 23px; height: 23px; display: grid; place-items: center; }
.bd-access-symbol svg { width: 18px; height: 18px; }
.bd-access-dot { width: 6px; height: 6px; margin-left: 4px; }
.bridge-diorama[data-crossing="true"] .bd-access-dot { background: #409f78; box-shadow: 0 0 0 3px #5db49324; }
.bd-evidence-packet { position: absolute; width: 30px; height: 34px; z-index: 8; display: grid; place-items: center; border: 1px solid #e6efda; border-radius: 5px; background: #fff9e6; color: #305d60; box-shadow: 0 4px 12px #214f4040; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.bd-evidence-packet svg { width: 22px; height: 22px; }
.bridge-diorama[data-pending="true"] .bd-evidence-packet { opacity: 1; }
.bd-scene-caption { position: absolute; z-index: 8; bottom: 4%; left: 4%; display: flex; align-items: center; gap: 8px; font-size: clamp(11px, 1vw, 13px); line-height: 1.25; color: #225954; font-weight: 650; background: #fff9e2d9; border: 1px solid #fff9eac7; border-radius: 20px; padding: 7px 11px; backdrop-filter: blur(7px); pointer-events: none; }
.bd-scene-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6d9890; flex: 0 0 auto; }
.bridge-diorama[data-damaged="true"] .bd-scene-status-dot { background: #d39f48; }
.bridge-diorama[data-crossing="true"] .bd-scene-status-dot { background: #409f78; }
.bridge-diorama[data-playing="false"] *, .bridge-diorama[data-reduced-motion="true"] * { animation-play-state: paused !important; }
@keyframes bd-river-current { 0%, 100% { transform: translate(0, 0); opacity: .12; } 45% { opacity: .32; } 95% { transform: translate(12px, 4px); opacity: .12; } }
@keyframes bd-sensor-ring { to { stroke-dashoffset: -36; } }
@keyframes bd-beacon { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (max-width: 700px) {
  .bridge-diorama { border-radius: 20px; }
  .bd-world { min-height: 285px; }
  .bd-hotspot, .bd-gate-hotspot { min-height: 44px; padding: 9px 10px; font-size: 11px; gap: 5px; border-radius: 11px; }
  .bd-hotspot svg, .bd-gate-hotspot svg { width: 19px; height: 19px; }
  .bd-inspect-hotspot { left: 36%; top: 32%; }
  .bd-impact-hotspot { top: 9%; right: 3%; }
  .bd-access-cue { top: 25%; right: 3%; font-size: 9px; }
  .bd-inspection-complete { left: 38%; top: 25%; font-size: 10px; padding: 6px 8px; }
  .bd-damage-marker { width: 31px; height: 43px; }
  .bd-damage-symbol { width: 30px; height: 30px; font-size: 19px; }
  .bd-scene-caption { max-width: 90%; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bridge-diorama *, .bridge-diorama *::before, .bridge-diorama *::after { animation: none !important; transition-duration: .01ms !important; }
}