/* The tactical map (sh-film-map.ts) and the facade chips (sh-film-targets.ts).
   The painted street fades as the map rises; the schematic plane lives in
   the stage's model shell (world space): charcoal ground, 16 px grid, the
   blueprint (sh-film-map-detail.css), white lots, gold hotspots, a teal
   thief dot, white patrol arrows. Loops run only under html.sh-ambient. */

.sh-map__ground {
  position: absolute; left: -240px; top: -160px; width: 1000px; height: 660px; opacity: 0; transform: translateZ(1.9px); pointer-events: none;
  background:
    radial-gradient(ellipse 52% 50% at 50% 48%, transparent 40%, rgb(7 8 10 / 92%) 100%),
    radial-gradient(circle at 8px 8px, rgb(255 255 255 / 20%) 0 .9px, transparent 1.4px) 0 0 / 16px 16px,
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px) 0 0 / 16px 16px,
    #15181d;
}
.sh-map__plane { position: absolute; left: -40px; top: -80px; overflow: visible; opacity: 0; transform: translateZ(2.5px); pointer-events: none; }
.sh-map__detail { transform: translateZ(2.2px); }
.sh-map__road { fill: rgb(255 255 255 / 3.5%); }
.sh-map__centre { fill: none; stroke: rgb(255 255 255 / 14%); stroke-width: 1; stroke-dasharray: 8 10; }
.sh-map__lane { fill: none; stroke: rgb(255 255 255 / 26%); stroke-width: .8; stroke-dasharray: 2 5; }
.sh-map__rear { fill: rgb(255 255 255 / 1.5%); stroke: rgb(255 255 255 / 11%); stroke-width: 1; }
.sh-map__lot { fill: none; stroke: var(--sh-line-strong); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round; }
.sh-map__lot-edge { fill: none; stroke: rgb(255 255 255 / 30%); stroke-width: .8; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sh-map__alarm-fill { fill: var(--sh-red-glow); opacity: 0; }
.sh-map__ring { fill: none; stroke: var(--sh-red); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sh-map__car { fill: rgb(255 255 255 / 7%); stroke: rgb(255 255 255 / 85%); stroke-width: 1.2; }
.sh-map__route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sh-map__route--push { stroke: var(--sh-gold); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .5; }
.sh-map__route--exit { stroke: var(--sh-teal); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .8; }
.sh-map__route.is-run { opacity: 1; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sh-map__reveal { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 1; }

.sh-map__marks { position: absolute; left: 0; top: 0; width: 520px; height: 306px; opacity: 0; transform: translateZ(4px); pointer-events: none; }
.sh-map__hotspot { position: absolute; border-radius: 50%; }
.sh-map__hotspot-glow, .sh-map__hotspot-cool { position: absolute; inset: 0; border-radius: 50%; }
.sh-map__hotspot-glow { background: radial-gradient(circle, rgb(229 198 92 / 60%) 0, rgb(212 175 55 / 30%) 16%, rgb(212 175 55 / 9%) 42%, transparent 70%); }
.sh-map__hotspot-cool { opacity: 0; background: radial-gradient(circle, rgb(200 204 210 / 30%) 0, rgb(200 204 210 / 8%) 30%, transparent 64%); }
.sh-map__hotspot-core {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--sh-gold-hi); box-shadow: 0 0 0 5px rgb(229 198 92 / 22%), 0 0 16px 5px rgb(229 198 92 / 55%);
}
.sh-map__hotspot-core::after { content: ""; position: absolute; inset: -9px; border: 1px solid rgb(229 198 92 / 55%); border-radius: 50%; opacity: 0; }
html.sh-ambient .sh-stage.is-map .sh-map__hotspot-core::after { animation: sh-map-pulse 2.4s var(--sh-ease-out) infinite; }
@keyframes sh-map-pulse { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }
.sh-map__dot {
  position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-teal);
  box-shadow: 0 0 0 1px rgb(95 212 196 / 90%), 0 0 0 4px rgb(95 212 196 / 18%), 0 0 14px 4px rgb(95 212 196 / 50%);
}
.sh-map__dot.is-red { background: var(--sh-red); box-shadow: 0 0 0 1px rgb(226 59 77 / 90%), 0 0 0 4px rgb(226 59 77 / 20%), 0 0 16px 5px rgb(226 59 77 / 55%); }
.sh-map__dot-ring { position: absolute; inset: -8px; border: 1px solid rgb(95 212 196 / 70%); border-radius: 50%; opacity: 0; }
html.sh-ambient .sh-stage.is-map .sh-map__dot.is-waiting .sh-map__dot-ring { animation: sh-map-pulse 2.4s var(--sh-ease-out) infinite; }
.sh-map__check { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
.sh-map__check::before { content: ""; position: absolute; left: 8px; top: -15px; width: 7px; height: 3.5px; border: solid var(--sh-teal); border-width: 0 0 1.4px 1.4px; transform: rotate(-45deg); }
.sh-map__arrow {
  position: absolute; left: -7px; top: -6px; width: 14px; height: 12px; background: #fff;
  clip-path: polygon(100% 50%, 0 0, 30% 50%, 0 100%); filter: drop-shadow(0 0 3px rgb(255 255 255 / 60%));
}

/* Screen-space tags and chips (projected, so always 11px on screen). */
.sh-map__tag, .sh-film-chip, .sh-film-lock__tag {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .55em; padding: 5px 8px 5px 9px; border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 6px; background: rgb(7 8 10 / 74%); color: var(--sh-fg); font: 600 11px/1 var(--sh-font-mono); letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap; will-change: transform, opacity;
}
.sh-map__tag.is-gold { border-color: rgb(212 175 55 / 55%); background: rgb(60 48 12 / 82%); color: var(--sh-gold-hi); }
.sh-film-chip.is-target .sh-film-chip__risk span { color: var(--sh-gold-hi); }
.sh-map__tag.is-teal { border-color: rgb(95 212 196 / 50%); background: rgb(10 46 44 / 82%); color: var(--sh-teal); }
.sh-map__tag.is-red { border-color: rgb(226 59 77 / 60%); background: rgb(70 14 22 / 86%); color: #ff8593; }
.sh-map__tag.is-glass { background: rgb(243 242 238 / 14%); border-color: rgb(255 255 255 / 36%); font-family: var(--sh-font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; }
.sh-map__tag.is-quiet { border-color: transparent; background: none; color: var(--sh-fg-2); }
.sh-map__tag.is-shield::before { content: ""; width: 9px; height: 11px; background: currentColor; clip-path: polygon(50% 0, 100% 16%, 100% 52%, 50% 100%, 0 52%, 0 16%); }
.sh-map__tag [data-risk-pct-of] { color: var(--sh-gold-hi); }
.sh-film-chip {
  flex-direction: column; align-items: flex-start; gap: 5px; padding: 7px 10px 7px 10px; background: rgb(14 16 20 / 78%);
  border-color: rgb(255 255 255 / 22%); box-shadow: 0 8px 28px -10px rgb(0 0 0 / 85%);
}
.sh-film-chip__top { display: inline-flex; align-items: baseline; gap: .7em; }
.sh-film-chip__name { color: var(--sh-fg-2); }
.sh-film-chip__x {
  display: inline-block; color: var(--sh-fg); font: 400 22px/.9 var(--sh-font-num); letter-spacing: 0; text-transform: none;
  font-variant-numeric: lining-nums; transform-origin: 50% 55%; backface-visibility: hidden;
}
.sh-film-chip__x i { margin-right: .08em; font: 500 .62em/1 var(--sh-font-sans); font-style: normal; vertical-align: .18em; opacity: .8; }
.sh-film-chip.is-target .sh-film-chip__x { color: var(--sh-gold-hi); text-shadow: 0 0 14px rgb(229 198 92 / 45%); }
.sh-film-chip__risk { color: var(--sh-fg-3); font-size: 10px; letter-spacing: .18em; }
.sh-map__x { color: var(--sh-gold-hi); font-weight: 700; }
.sh-film-lock { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; pointer-events: none; }
.sh-film-lock i { position: absolute; width: 11px; height: 11px; border: 0 solid var(--sh-gold-hi); filter: drop-shadow(0 0 4px rgb(229 198 92 / 70%)); }
.sh-film-lock__tl { left: 0; top: 0; border-top-width: 2px !important; border-left-width: 2px !important; }
.sh-film-lock__tr { right: 0; top: 0; border-top-width: 2px !important; border-right-width: 2px !important; }
.sh-film-lock__bl { left: 0; bottom: 0; border-bottom-width: 2px !important; border-left-width: 2px !important; }
.sh-film-lock__br { right: 0; bottom: 0; border-bottom-width: 2px !important; border-right-width: 2px !important; }
.sh-film-lock.is-locked i { border-color: #fff; filter: drop-shadow(0 0 4px rgb(255 255 255 / 70%)); }
.sh-film-lock__tag { left: 50%; top: calc(100% + 8px); border-color: rgb(255 255 255 / 40%); background: rgb(243 242 238 / 92%); color: var(--sh-ink-0); transform: translateX(-50%); }

/* The flat still map (sh-film-flatmap.ts). */
.sh-flatmap { display: block; width: 100%; height: auto; border: 1px solid var(--sh-line); border-radius: 14px; }
.sh-flatmap__ground { fill: #15181d; }
.sh-flatmap__grid { fill: none; stroke: rgb(255 255 255 / 5%); stroke-width: 1; }
.sh-flatmap__glow-in { stop-color: rgb(229 198 92 / 45%); }
.sh-flatmap__glow-out { stop-color: rgb(229 198 92 / 0%); }
.sh-flatmap__lot { fill: none; stroke: var(--sh-line-strong); stroke-width: 1.3; }
.sh-flatmap .sh-map__alarm-fill { opacity: 1; }
.sh-flatmap .sh-map__route { stroke-dashoffset: 0; }
.sh-flatmap .sh-map__route--push { opacity: 1; stroke-dasharray: none; }
.sh-flatmap__dot { fill: var(--sh-teal); }
.sh-flatmap__arrow { fill: #fff; }
.sh-flatmap__tag { fill: var(--sh-fg); font: 600 10px var(--sh-font-mono); letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; }
.sh-flatmap__tag.is-gold { fill: var(--sh-gold-hi); }
.sh-flatmap__tag.is-teal { fill: var(--sh-teal); }
.sh-flatmap__tag.is-red { fill: #ff8593; }
.sh-flatmap__tag.is-quiet { fill: var(--sh-fg-3); }
.sh-flatmap__tag.is-start { text-anchor: start; }
.sh-flatmap__tag tspan { fill: var(--sh-gold-hi); }
.sh-flatmap__legend { margin-top: 10px; color: var(--sh-fg-3); font: 500 11px/1.5 var(--sh-font-mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 767px) and (orientation: portrait) {
  .sh-film-chip { gap: 3px; padding: 5px 7px; font-size: 9.5px; letter-spacing: .12em; }
  .sh-film-chip__x { font-size: 17px; }
  .sh-film-chip__risk { font-size: 8.5px; }
  .sh-map__tag { padding: 4px 6px; font-size: 9.5px; letter-spacing: .12em; }
}