/* World layers the stage draws over the street (sh-stage-fx.ts,
   sh-stage-map-arch.ts, sh-stage-type.ts): reticle brackets on lit anchors,
   the LOOT SECURED tag, the architecture map, the currency roll and the
   typed section HUDs. Transform and opacity only. */
.sh-reticle { position: absolute; left: 0; top: 0; pointer-events: none; transition: opacity var(--sh-dur-2); }
.sh-reticle > div { position: absolute; width: 10px; height: 10px; border: 0 solid var(--sh-gold-hi); filter: drop-shadow(0 0 4px rgb(229 198 92 / 70%)); }
.sh-reticle__tl { left: 0; top: 0; border-top-width: 2px !important; border-left-width: 2px !important; }
.sh-reticle__tr { right: 0; top: 0; border-top-width: 2px !important; border-right-width: 2px !important; }
.sh-reticle__bl { left: 0; bottom: 0; border-bottom-width: 2px !important; border-left-width: 2px !important; }
.sh-reticle__br { right: 0; bottom: 0; border-bottom-width: 2px !important; border-right-width: 2px !important; }
html.sh-ambient .sh-reticle:not(.is-off) { animation: sh-reticle-in .5s var(--sh-ease-snap) both; }
@keyframes sh-reticle-in { from { opacity: 0; scale: 1.25; } }
.sh-stage__loot { box-shadow: 0 0 0 1px rgb(95 212 196 / 30%), 0 0 26px -2px rgb(95 212 196 / 55%); }
html.sh-ambient .sh-stage__loot:not(.is-off) { animation: sh-loot-in .7s var(--sh-ease-snap) both; }
@keyframes sh-loot-in { from { opacity: 0; translate: 0 10px; } }

/* The architecture map (beat 15): lots, routes and their heads. */
.sh-arch__lot { fill: rgb(255 255 255 / 2%); stroke: rgb(255 255 255 / 40%); stroke-width: 1.1; transition: stroke .4s, fill .4s; }
.sh-arch__lot.is-lit { fill: rgb(212 175 55 / 7%); stroke: var(--sh-gold-hi); }
.sh-arch__route { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sh-arch__route.is-money { stroke: var(--sh-gold-hi); filter: drop-shadow(0 0 3px rgb(229 198 92 / 60%)); }
.sh-arch__route.is-data { stroke: var(--sh-teal); stroke-dasharray: .02 .018; }
.sh-arch__route.is-verify { stroke: #fff; }
.sh-arch__head { opacity: 0; transition: opacity .3s; }
.sh-arch__head.is-money { fill: var(--sh-gold-hi); }
.sh-arch__head.is-data { fill: var(--sh-teal); }
.sh-arch__head.is-verify { fill: #fff; }
.sh-arch__tag { max-width: 220px; white-space: normal; line-height: 1.35; text-align: center; }

/* Currency switch: the new amount rolls in from below (240 ms). */
[data-amt].is-rolling { display: inline-block; animation: sh-roll .24s var(--sh-ease-out); }
@keyframes sh-roll { from { opacity: 0; transform: translateY(.55em); } }

/* Section HUDs typed by the stage (a clip per line, like the film). */
html.film-live .sh-beat .is-a-typed .sh-hud__line { clip-path: inset(-2px calc(100% - (var(--chars, 999) + 1) * (1ch + .14em)) -2px -2px); }
html.film-live .sh-beat .is-a-typed .sh-hud__line.is-blank { clip-path: inset(0 100% 0 0); }
html.film-live .sh-beat .is-a-typed .sh-hud__line.is-typing::after {
  content: ""; position: absolute; right: auto; left: 0; top: .3em; width: 1ch; height: 1.15em; background: var(--sh-fg);
  transform: translateX(calc(var(--chars, 0) * (1ch + .14em)));
}
@media (prefers-reduced-motion: reduce) {
  .sh-reticle, .sh-stage__loot, [data-amt].is-rolling { animation: none !important; }
}