.streetheist-renderer {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease-out;
}

.game.has-pixi-scene .streetheist-renderer {
  opacity: 1;
}

.game.scene-pending .streetWrap {
  opacity: 0;
  pointer-events: none;
}

.game.has-pixi-scene .streetWrap,
.game.dom-street-fallback .streetWrap {
  opacity: 1;
}

.scene {
  opacity: 0;
}

.game.dom-street-fallback .scene {
  opacity: 1;
}

.game.has-pixi-scene .scene {
  opacity: 0;
}

.game.has-pixi-scene .message,
.game.has-pixi-scene .bldState {
  transition: opacity .16s ease-out;
}

.game.has-pixi-scene.cinematic-active .message,
.game.has-pixi-scene.cinematic-active .bldState {
  opacity: 0;
}

.game.has-pixi-scene.scene-changing .bldState {
  opacity: 0;
}

.game.has-pixi-scene .streetWrap {
  top: var(--scene-street-top, 28%);
  right: auto;
  bottom: calc(100% - var(--scene-ground-y, 80%));
  left: var(--scene-left, 0);
  width: var(--scene-width, 100%);
  overflow: visible;
  background: transparent;
  animation: none;
  transform: none;
}

.game.has-pixi-scene .streetWrap::before {
  opacity: 0;
}

.game.has-pixi-scene .street::after,
.game.has-pixi-scene .streetWrap::after,
.game.has-pixi-scene .fxLayer::before,
.game.has-pixi-scene .horizonGlow {
  display: none;
}

.game.has-pixi-scene.cinematic-active .actionDeck {
  opacity: 0;
  pointer-events: none;
}

.game.has-pixi-scene.cinematic-active .actionDeck :is(button, input, a, [tabindex]) {
  visibility: hidden;
}
.game.has-pixi-scene.cinematic-active .actionDeck * { pointer-events: none; }

.app:not(.mobile-run-active) .game.has-pixi-scene[data-camera-mode="focused"] .mobileStreetNav,
.game.has-pixi-scene.cinematic-active .mobileStreetNav {
  visibility: hidden;
  pointer-events: none;
}

.game.has-pixi-scene .street,
.game.has-pixi-scene .street.shifting {
  inset: 0;
  align-items: stretch;
  display: block;
  gap: 0;
  overflow: visible;
  background: transparent;
  animation: none;
  transform: none;
}

.game.has-pixi-scene #street > .bld {
  position: absolute;
  top: 0;
  bottom: 0;
  /* dom-snapshot.ts writes the street-layout lot; until then an even split of the 4–6 targets. */
  left: var(--target-left, calc(var(--slot, 0) * 100% / var(--targets, 5)));
  width: var(--target-width, calc(100% / var(--targets, 5)));
}

.game.has-pixi-scene .bld,
.game.has-pixi-scene .bld.deal,
.game.has-pixi-scene .bld:not(:disabled):hover,
.game.has-pixi-scene .bld.selected {
  opacity: 1;
  filter: none;
  height: 100%;
  background: transparent;
  box-shadow: none;
  animation: none;
  transform: none;
  transition: none;
}

.game.has-pixi-scene .bld::before,
.game.has-pixi-scene .bld::after,
.game.has-pixi-scene .buildingAlarm {
  display: none;
}

.game.has-pixi-scene .bld .buildingBody,
.game.has-pixi-scene .bld .building-kiosk,
.game.has-pixi-scene .bld .building-imbiss,
.game.has-pixi-scene .bld .building-tanke,
.game.has-pixi-scene .bld .building-apotheke,
.game.has-pixi-scene .bld .building-juwelier,
.game.has-pixi-scene .bld .building-bank {
  border: 0;
  position: absolute;
  inset: 0;
  background: none;
  box-shadow: none;
  filter: none;
  animation: none;
}

.game.has-pixi-scene .targetIdentity {
  position: absolute;
  z-index: 7;
  top: calc(var(--sign-text-y, 22%) + var(--sign-offset-y, 0%));
  left: calc(var(--sign-text-x, 6%) + var(--sign-offset-x, 0%));
  display: block;
  width: var(--sign-text-w, 88%);
  height: var(--sign-text-h, auto);
  pointer-events: none;
}

.game.has-pixi-scene .bld .buildingBody::before,
.game.has-pixi-scene .bld .buildingBody::after,
.game.has-pixi-scene .buildingArt {
  display: none;
}

.game.has-pixi-scene .bldState {
  top: calc(var(--sign-y, 22%) - 17px);
  bottom: auto;
}

.game.has-pixi-scene .bldState { display: none; }
.game.has-pixi-scene .bld.done .bldState,
.game.has-pixi-scene .bld.busted .bldState {
  right: 8%;
  display: block;
  font-size: 0;
}
.game.has-pixi-scene .bld.done .stateIcon,
.game.has-pixi-scene .bld.busted .stateIcon {
  margin: 0;
  font-size: 15px;
  filter: drop-shadow(0 2px 5px #07121f);
}

.game.has-pixi-scene .bld:focus-visible {
  outline: 0;
}

.game.has-pixi-scene .signBoundsDebug { display: none; }
.game.has-pixi-scene[data-sign-bounds-debug="true"] .signBoundsDebug {
  position: absolute;
  z-index: 8;
  top: var(--sign-frame-y);
  left: var(--sign-frame-x);
  display: block;
  width: var(--sign-frame-w);
  height: var(--sign-frame-h);
  border: 1px solid #ff4d5f;
  pointer-events: none;
}

.game.has-pixi-scene #thief,
.game.has-pixi-scene .runnerShadow,
.game.has-pixi-scene .policeCar,
.game.has-pixi-scene .alarmLights {
  display: none;
  opacity: 0;
  animation: none;
  transition: none;
}

.game.has-pixi-scene.punch {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .game.has-pixi-scene .streetheist-renderer,
  .game.has-pixi-scene .bld,
  .game.has-pixi-scene .bld .buildingBody .sign,
  .game.has-pixi-scene .bldState,
  .game.has-pixi-scene .streetWrap,
  .game.has-pixi-scene .street {
    animation: none;
    transition: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .game.has-pixi-scene .streetWrap {
    top: var(--scene-street-top, 22%);
  }
}

@media (max-width: 620px) {
  .game.has-pixi-scene .bldState {
    top: calc(var(--sign-y, 22%) - 14px);
  }

  .game.has-pixi-scene .bldState { right: 2px; }
}