.bld {
  --selection-rgb: 225, 173, 93;
  --selection-text: #fff1cc;
}

.bld.selection-cool { --selection-rgb: 143, 200, 232; --selection-text: #e4f5ff; }
.bld.selection-green { --selection-rgb: 117, 217, 151; --selection-text: #e6ffe9; }
.bld.selection-neon { --selection-rgb: 255, 114, 203; --selection-text: #ffe7f8; }
.bld.selection-violet { --selection-rgb: 185, 132, 255; --selection-text: #f1e4ff; }

.bld.selected::after,
.bld:focus-visible::after {
  display: none !important;
  content: none;
}

.storefrontSelectionFx,
.storefrontSelectionFx i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.storefrontSelectionFx {
  z-index: 3;
  inset: 0;
  overflow: visible;
  opacity: 0;
  transition: opacity 190ms cubic-bezier(.22, 1, .36, 1);
}

.storefrontSelectionSign {
  top: var(--sign-frame-y, 24%);
  left: var(--sign-frame-x, 15%);
  width: var(--sign-frame-w, 70%);
  height: var(--sign-frame-h, 14%);
  border-radius: 7px;
  background: rgba(var(--selection-rgb), .07);
  box-shadow:
    inset 0 0 0 1px rgba(var(--selection-rgb), .34),
    0 0 12px rgba(var(--selection-rgb), .18);
}

.storefrontSelectionDoor {
  bottom: 0;
  left: var(--door-x, 50%);
  width: 34%;
  height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 88%, rgba(var(--selection-rgb), .18), transparent 68%);
}

.storefrontSelectionReflection {
  bottom: -7px;
  left: var(--door-x, 50%);
  width: 42%;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--selection-rgb), .3), transparent 70%);
  filter: blur(4px);
}

.bld.visual-focused .storefrontSelectionFx { opacity: .38; }
.bld.visual-selected .storefrontSelectionFx { opacity: 1; }
.bld.selected:not(.hit) .buildingBody { animation: none; }

.bld .buildingBody .sign {
  transition:
    color 170ms cubic-bezier(.22, 1, .36, 1),
    text-shadow 170ms cubic-bezier(.22, 1, .36, 1),
    filter 170ms cubic-bezier(.22, 1, .36, 1);
}

.bld.visual-focused .buildingBody .sign {
  color: color-mix(in srgb, var(--selection-text) 92%, #fff);
  filter: brightness(1.06);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 10px rgba(var(--selection-rgb), .42);
}

.bld.visual-selected .buildingBody .sign {
  color: var(--selection-text);
  filter: brightness(1.12);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .95),
    0 0 7px rgba(var(--selection-rgb), .72),
    0 0 16px rgba(var(--selection-rgb), .38);
}

.bld:focus-visible .buildingBody .sign {
  color: var(--selection-text);
  outline: 0 !important;
  text-decoration: underline;
  text-decoration-color: rgba(var(--selection-rgb), .95);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-shadow: 0 1px 2px #000, 0 0 13px rgba(var(--selection-rgb), .78);
}

.game.has-pixi-scene .storefrontSelectionFx { display: none; }

@media (prefers-reduced-motion: reduce) {
  .storefrontSelectionFx,
  .bld .buildingBody .sign { transition: none; }
}
