.bld .buildingBody::after {
  display: block;
  content: "";
  position: absolute;
  z-index: 1;
  inset: 32% 15% 12%;
  border-radius: 38% 38% 10% 10%;
  background: radial-gradient(ellipse at 50% 74%, rgba(255, 201, 120, .26), rgba(255, 168, 92, .07) 46%, transparent 68%);
  mix-blend-mode: screen;
  opacity: .34;
  pointer-events: none;
  animation: bldWindowGlow 5.5s ease-in-out infinite;
}

.bld.slot-2 .buildingBody::after { animation-delay: -1.3s; }
.bld.slot-3 .buildingBody::after { animation-delay: -2.6s; }
.bld.slot-4 .buildingBody::after { animation-delay: -3.9s; }
.bld.slot-5 .buildingBody::after { animation-delay: -.8s; }
.bld.slot-6 .buildingBody::after { animation-delay: -2.1s; }

.bld.done .buildingBody::after,
.bld.busted .buildingBody::after { animation: none; opacity: .08; }

@keyframes bldWindowGlow {
  0%, 100% { opacity: .28; }
  50% { opacity: .58; }
}

.bld .buildingBody {
  filter:
    saturate(.87) brightness(.96) contrast(1.05)
    drop-shadow(0 13px 12px rgba(2, 12, 25, .55))
    drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
}

.bld::before {
  right: 6%;
  bottom: -46px;
  left: 6%;
  height: 52px;
  border-radius: 0;
  background:
    radial-gradient(50% 26% at 50% 4%, rgba(1, 8, 18, .55), transparent 70%),
    linear-gradient(180deg, rgba(255, 196, 110, .2), rgba(255, 196, 110, .05) 52%, transparent 80%);
  filter: blur(5px);
  opacity: .85;
}

.bld.key-juwelier::before {
  background:
    radial-gradient(50% 26% at 50% 4%, rgba(1, 8, 18, .55), transparent 70%),
    linear-gradient(180deg, rgba(255, 214, 128, .26), rgba(255, 205, 96, .06) 55%, transparent 80%);
}

.bld.key-apotheke::before {
  background:
    radial-gradient(50% 26% at 50% 4%, rgba(1, 8, 18, .55), transparent 70%),
    linear-gradient(180deg, rgba(150, 236, 170, .18), rgba(150, 236, 170, .05) 52%, transparent 80%);
}

.bld.key-tanke::before {
  background:
    radial-gradient(50% 26% at 50% 4%, rgba(1, 8, 18, .55), transparent 70%),
    linear-gradient(180deg, rgba(228, 240, 255, .2), rgba(228, 240, 255, .05) 52%, transparent 80%);
}

.game.running #thief.walking:not(.busted) {
  animation: runnerLope .35s ease-in-out .09s 3 both;
}

@keyframes runnerLope {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(2.2deg); }
  32% { transform: translateX(-50%) translateY(-5px) rotate(3.6deg); }
  62% { transform: translateX(-50%) translateY(-1px) rotate(1.4deg); }
}

#thief.walking::after { animation: actorDust .35s ease-out .09s 3; }

#thief.walking.busted {
  animation: actorCaughtAfterRunRoot .24s ease-out 1.1s both;
}

#thief.walking.busted .thiefFallback::before {
  opacity: 1;
  animation: actorRunLoop .35s steps(7, end) .09s 3, actorRunEndFade .14s linear 1.1s both;
}

#thief.walking.busted .thiefFallback::after {
  animation: actorCaughtAfterRun .24s ease-out 1.1s both;
}

.streetWrap:has(#thief.walking.busted) .runnerShadow {
  animation: actorShadowBustRun 1.34s ease-in-out both;
}

@keyframes actorCaughtAfterRunRoot {
  from { filter: none; transform: translateX(-50%); }
  to { filter: saturate(.72); transform: translateX(-50%) translateY(1px); }
}

@keyframes actorCaughtAfterRun {
  from { opacity: 0; transform: translateY(-2px) scale(.96); }
  60% { opacity: 1; transform: translateY(2px) scale(1.025); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes actorShadowBustRun {
  0%, 34%, 68% { opacity: .86; transform: translateX(-50%) scaleX(1); }
  17%, 51% { opacity: .58; transform: translateX(-50%) scaleX(.76); }
  100% { opacity: .78; transform: translateX(-50%) scaleX(1.12); }
}

.streetWrap:has(.street.shifting) { animation: cinematicCameraPan 1.32s cubic-bezier(.25, .7, .2, 1) both; }
@keyframes cinematicCameraPan {
  0%, 100% { transform: translateX(0); }
  58% { transform: translateX(-4%); }
}

.bld.hit .buildingBody { outline: 0; }

.bld.hit .buildingBody::before {
  opacity: 1;
  animation: bldBreakInFlash .36s ease-out .92s both;
}

@keyframes bldBreakInFlash {
  0% { opacity: 0; transform: scale(.9); }
  30% { opacity: 1; transform: scale(1.05); }
  100% { opacity: .3; transform: scale(1); }
}

.bld.hit .buildingBody::after {
  inset: 52% 26% 4%;
  border-radius: 40% 40% 8% 8%;
  background: radial-gradient(ellipse at 50% 96%, rgba(255, 220, 140, .9), rgba(255, 180, 84, .3) 55%, transparent 78%);
  opacity: 0;
  animation: doorSpill .42s ease-out .88s both;
}

@keyframes doorSpill {
  0% { opacity: 0; }
  16% { opacity: 1; }
  60% { opacity: .85; }
  100% { opacity: .22; }
}

.bld.hit {
  animation: bldRummage .1s linear 3;
  animation-delay: 1s;
}

@keyframes bldRummage {
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1.3px); }
}

.game.punch { animation: cinematicShake .28s cubic-bezier(.36, .07, .19, .97) both; }

.alarmLights.on { animation-duration: .35s; }

@keyframes cinematicShake {
  12% { transform: translate(-5px, 2px) rotate(-.35deg); }
  26% { transform: translate(6px, -2px) rotate(.4deg); }
  40% { transform: translate(-5px, 1px); }
  56% { transform: translate(4px, -1px); }
  72% { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); }
}

.fxText {
  font-size: 30px;
  animation: cinematicLootRise 1.32s ease-out both;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(255, 214, 120, .5);
}

@keyframes cinematicLootRise {
  0%, 65% { opacity: 0; transform: translate(-50%, 0) scale(.92); }
  72% { opacity: 1; transform: translate(-50%, -4px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1.12); }
}

.fxText.green { color: #b6f7dc; text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(90, 230, 160, .55); }
.fxText.gold { text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 22px rgba(255, 205, 90, .7); }
.fxText.red { color: #ff9aa8; text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(240, 70, 90, .5); }

@media (max-width: 760px) {

  .bld .bldState { display: none; }

  .bld .buildingBody .sign {
    right: 8%;
    left: 8%;
    bottom: 3%;
  }
}

@media (max-width: 480px) {
  #thief { left: var(--thief-left, 5%); width: 60px; height: 100px; }
  .runnerShadow { left: var(--thief-left, 5%); width: 48px; }
}

@media (max-width: 480px) and (min-height: 701px) {
  .streetWrap {
    bottom: max(calc(var(--deck-h, 244px) + 20px), 230px);
  }

  .street > .bld {
    height: clamp(144px, 40vw, 156px);
  }

}

@media (orientation: landscape) and (max-height: 500px) {
  .gamePage .topbar { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .gamePage .accountCluster { display: flex; width: auto; gap: 5px; }
  .gamePage .audioToggle { width: 44px; height: 44px; }
  .gamePage .brand h1 { font-size: 17px; }
  .gamePage .wallet { min-width: 112px; }
  .game { min-height: min(420px, calc(100dvh - 46px)); }
  .streetWrap { top: 44px; bottom: calc(var(--deck-h, 76px) + 10px); }
  .street { inset: 6px 4px 18px; }
  #thief { width: 44px; height: 74px; }
  .runnerShadow { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .bld .buildingBody::after { animation: none; opacity: .42; }
  .bld.hit .buildingBody::before { animation: none; opacity: .4; }
  .game.running #thief.walking:not(.busted),
  .streetWrap:has(.street.shifting) { animation: none; }
  .bld.hit,
  .bld.hit .buildingBody::after { animation: none; }
}