@import "./styles-foundation.css";
@import "./styles-landing.css";
@import "./styles-game-classic.css";
@import "./styles-popups.css";
@import "./styles-auth-faction.css";
@import "./styles-game-redesign.css";
@import "./styles-building-modals.css";
@import "./styles-alliance.css";
@import "./styles-city-events.css";
@import "./styles-bounty.css";
@import "./styles-boost.css";
@import "./styles-onboarding.css";
@import "./styles-district.css";
@import "./styles-action-results.css";
@import "./styles-mobile-fixes.css";
@import "./styles-static-hover.css";

html body .buildings-popup__type-btn.is-locked,
html body .buildings-popup__type-btn.is-locked:hover,
html body .buildings-popup__type-btn:disabled {
  cursor: not-allowed !important;
  transform: none !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(31, 41, 55, 0.72), rgba(15, 23, 42, 0.86)),
    rgba(15, 23, 42, 0.82) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
  color: #94a3b8 !important;
  opacity: 0.6 !important;
  filter: grayscale(0.85) !important;
}

html body .buildings-popup__type-btn.is-locked::before,
html body .buildings-popup__type-btn:disabled::before {
  opacity: 0.18 !important;
}

html body .buildings-popup__type-btn.is-locked .buildings-popup__type-label,
html body .buildings-popup__type-btn.is-locked .buildings-popup__type-meta,
html body .buildings-popup__type-btn:disabled .buildings-popup__type-label,
html body .buildings-popup__type-btn:disabled .buildings-popup__type-meta {
  color: #a8b3c2 !important;
  text-shadow: none !important;
}

html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__mobile-type-caption {
  display: none !important;
}

html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup-card.buildings-modal__content > .modal__header > h3 {
  display: none !important;
}

html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__detail-title {
  display: none !important;
}

html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--type.is-active,
html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--type.is-active:hover,
html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--type.buildings-popup__building--interactive:hover {
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--buildings-type-border-hover, rgba(250, 204, 21, 0.72)) 78%, rgba(255, 255, 255, 0.2)) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--buildings-type-glow, rgba(250, 204, 21, 0.2)) 48%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(5, 10, 18, 0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 0 18px color-mix(in srgb, var(--buildings-type-glow, rgba(250, 204, 21, 0.16)) 42%, transparent),
    0 0 18px color-mix(in srgb, var(--buildings-type-glow, rgba(250, 204, 21, 0.18)) 72%, transparent) !important;
}

html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--type,
html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--type:hover,
html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--type:focus-visible {
  border-style: solid !important;
}

html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building-grid--names {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 6px !important;
}

html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--name,
html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--name.buildings-popup__building--interactive,
html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--name.buildings-popup__building--interactive:hover,
html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--name.buildings-popup__building--interactive:focus-visible {
  min-height: 34px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-style: solid !important;
  border-radius: 9px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006)),
    linear-gradient(90deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 13, 0.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    0 8px 18px rgba(0, 0, 0, 0.24) !important;
  color: #e5edf7 !important;
  transform: none !important;
}

html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--name.buildings-popup__building--interactive:hover,
html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--name.buildings-popup__building--interactive:focus-visible {
  border-color: rgba(103, 232, 249, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(103, 232, 249, 0.075), rgba(255, 255, 255, 0.008)),
    linear-gradient(90deg, rgba(10, 18, 30, 0.98), rgba(2, 5, 12, 0.99)) !important;
  box-shadow:
    inset 2px 0 0 rgba(103, 232, 249, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 12px rgba(34, 211, 238, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--name > span:only-child {
  color: #eef7ff !important;
  font-size: 11.5px !important;
  font-weight: 760 !important;
  letter-spacing: 0.015em !important;
  line-height: 1.12 !important;
  text-shadow: 0 0 10px rgba(15, 23, 42, 0.86) !important;
}

html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--name.buildings-popup__building--locked,
html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__building--name.buildings-popup__building--locked:disabled {
  border-color: rgba(100, 116, 139, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.32), rgba(2, 6, 13, 0.92)),
    rgba(2, 6, 13, 0.92) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.012) !important;
  color: #8794a6 !important;
}

@media (min-width: 781px) {
  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup-card.buildings-modal__content {
    position: absolute !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup-card.buildings-modal__content > .modal__header {
    position: absolute !important;
    z-index: 8 !important;
    top: 40px !important;
    right: 44px !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup-card.buildings-modal__content > .modal__body {
    padding-top: 0 !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__detail-card {
    padding-right: 54px !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__types.buildings-modal__types {
    height: var(--buildings-modal-panel-height) !important;
    align-content: stretch !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn {
    position: relative !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 10px 12px 10px 54px !important;
    overflow: hidden !important;
    border-color: color-mix(in srgb, var(--buildings-type-border, rgba(34, 211, 238, 0.42)) 66%, rgba(255, 255, 255, 0.12)) !important;
    background:
      radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--buildings-type-glow, rgba(34, 211, 238, 0.2)) 72%, transparent), transparent 42%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012) 48%, rgba(255, 255, 255, 0.04)),
      linear-gradient(180deg, color-mix(in srgb, var(--buildings-type-bg-a, rgba(8, 14, 26, 0.92)) 86%, transparent), color-mix(in srgb, var(--buildings-type-bg-b, rgba(2, 6, 13, 0.95)) 92%, transparent)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.045),
      inset 0 0 22px color-mix(in srgb, var(--buildings-type-glow, rgba(34, 211, 238, 0.14)) 42%, transparent),
      0 10px 24px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(10px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.16) !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    background:
      linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 24%, transparent 74%, color-mix(in srgb, var(--buildings-type-glow, rgba(34, 211, 238, 0.16)) 54%, transparent)) !important;
    opacity: 0.54 !important;
    pointer-events: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn::before {
    position: absolute !important;
    left: -10px !important;
    top: 52% !important;
    display: grid !important;
    width: 76px !important;
    height: 76px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--buildings-type-text, #e6fbff) 88%, #ffffff) !important;
    font-size: 58px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    opacity: 0.26 !important;
    filter: saturate(1.9) brightness(1.42) drop-shadow(0 0 10px var(--buildings-type-border-hover, rgba(34, 211, 238, 0.72))) !important;
    text-shadow:
      0 0 4px color-mix(in srgb, var(--buildings-type-text, #e6fbff) 94%, #ffffff),
      0 0 12px var(--buildings-type-border-hover, rgba(34, 211, 238, 0.92)),
      0 0 26px var(--buildings-type-border-hover, rgba(34, 211, 238, 0.78)),
      0 0 48px var(--buildings-type-glow, rgba(34, 211, 238, 0.62)),
      0 0 76px var(--buildings-type-glow, rgba(34, 211, 238, 0.42)) !important;
    transform: translateY(-50%) rotate(-8deg) !important;
    pointer-events: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn.is-active::before {
    opacity: 0.44 !important;
    transform: translateY(-50%) rotate(-5deg) scale(1.06) !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--resident::before,
  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--residential::before {
    content: "⌂" !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--park::before {
    content: "♧" !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--economy::before,
  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--commercial::before {
    content: "€" !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--industrial::before {
    content: "⚙" !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--downtown::before {
    content: "★" !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-label {
    position: relative !important;
    z-index: 1 !important;
    display: inline-block !important;
    min-width: 0 !important;
    color: var(--buildings-type-text, #e6fbff) !important;
    font-size: 1rem !important;
    font-weight: 860 !important;
    line-height: 1.05 !important;
    text-align: left !important;
    text-shadow:
      0 0 10px var(--buildings-type-glow, rgba(34, 211, 238, 0.34)),
      0 0 18px var(--buildings-type-glow, rgba(34, 211, 238, 0.22)) !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn.is-active .buildings-popup__type-label {
    font-size: 1.08rem !important;
    color: color-mix(in srgb, var(--buildings-type-text, #e6fbff) 82%, #ffffff) !important;
    text-shadow:
      0 0 12px var(--buildings-type-border-hover, rgba(34, 211, 238, 0.7)),
      0 0 24px var(--buildings-type-glow, rgba(34, 211, 238, 0.38)),
      0 0 34px var(--buildings-type-glow, rgba(34, 211, 238, 0.22)) !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-meta {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    color: rgba(226, 232, 240, 0.68) !important;
    font-size: 0.68rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) button#buildings-modal-close.modal__close {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(103, 232, 249, 0.58) !important;
    border-radius: 7px !important;
    background:
      radial-gradient(circle at 50% 35%, rgba(103, 232, 249, 0.22), transparent 56%),
      linear-gradient(180deg, rgba(8, 18, 30, 0.92), rgba(2, 6, 16, 0.96)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.055),
      0 0 12px rgba(34, 211, 238, 0.38),
      0 0 22px rgba(244, 114, 182, 0.12) !important;
    color: #e6fbff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow:
      0 0 8px rgba(103, 232, 249, 0.86),
      0 0 16px rgba(244, 114, 182, 0.22) !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) button#buildings-modal-close.modal__close::before {
    content: none !important;
    display: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) button#buildings-modal-close.modal__close::after {
    content: none !important;
    display: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) button#buildings-modal-close.modal__close:hover,
  html body #buildings-modal.buildings-popup-shell:not([hidden]) button#buildings-modal-close.modal__close:focus-visible {
    border-color: rgba(165, 243, 252, 0.92) !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 0 12px rgba(103, 232, 249, 0.13),
      0 0 15px rgba(34, 211, 238, 0.62),
      0 0 26px rgba(244, 114, 182, 0.18) !important;
  }
}

/* Final loaded override: custom building photo cards must stay visible under glass UI. */
html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004) 24%, rgba(2, 6, 14, 0.12) 100%),
    linear-gradient(135deg, rgba(var(--building-window-accent-rgb), 0.04), rgba(2, 6, 14, 0.08) 38%, rgba(var(--building-window-danger-rgb), 0.024) 100%),
    var(--building-detail-background-image) center/cover,
    rgba(4, 8, 16, 0.46) !important;
}

html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  border-radius: inherit !important;
  background: var(--building-detail-background-image) center/cover no-repeat !important;
  opacity: 0.78 !important;
  pointer-events: none !important;
}

html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::before {
  z-index: 1 !important;
  opacity: 0.16 !important;
  background:
    linear-gradient(180deg, rgba(2, 6, 14, 0.035), transparent 34%, rgba(2, 6, 14, 0.08)),
    linear-gradient(90deg, transparent 0 10%, rgba(var(--building-window-accent-rgb), 0.14) 20%, rgba(var(--building-window-secondary-rgb), 0.08) 50%, rgba(var(--building-window-accent-rgb), 0.12) 80%, transparent 90%) !important;
}

html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] > * {
  position: relative !important;
  z-index: 2 !important;
}

html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .modal__header,
html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel,
html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel--merged,
html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__section,
html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-mechanic-row,
html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-info-card,
html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__effects,
html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.002)),
    rgba(3, 8, 16, 0.14) !important;
  backdrop-filter: blur(1px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(1px) saturate(1.02) !important;
}

html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__section::before,
html body.game-body .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-info-card::before {
  opacity: 0.05 !important;
}

html body.game-body .district-building-detail-card .building-detail-info-text,
html body.game-body .district-building-detail-shell.is-building-detail-single-panel .district-building-detail-panel--merged > .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004)),
    rgba(2, 6, 14, 0.52) !important;
  border-color: rgba(var(--building-window-accent-rgb), 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

html body.game-body .district-building-detail-card [data-district-building-detail-action-section] > h5 {
  color: #facc15 !important;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.16),
    0 0 18px rgba(234, 179, 8, 0.1) !important;
}

@media (min-width: 721px) {
  html body.game-body .district-building-detail-card [data-district-building-detail-action-section] > h5 {
    margin-bottom: 120px !important;
  }
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="school"] .district-building-detail-card [data-district-building-detail-action-section] {
  margin-top: 34px !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="school"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
  color: #facc15 !important;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.16),
    0 0 18px rgba(234, 179, 8, 0.1) !important;
}

@media (min-width: 721px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="school"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
    margin-bottom: 56px !important;
  }
}

@media (max-width: 720px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="school"] .district-building-detail-card [data-district-building-detail-action-section] {
    margin-top: 10px !important;
  }
}

/* Restaurant card lock: keep the approved visual treatment stable for this building. */
html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004) 24%, rgba(2, 6, 14, 0.12) 100%),
    linear-gradient(135deg, rgba(var(--building-window-accent-rgb), 0.04), rgba(2, 6, 14, 0.08) 38%, rgba(var(--building-window-danger-rgb), 0.024) 100%),
    var(--building-detail-background-image) center/cover,
    rgba(4, 8, 16, 0.46) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::after {
  opacity: 0.78 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::before {
  opacity: 0.16 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .modal__header,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel--merged,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__section,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-mechanic-row,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-info-card,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__effects,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.002)),
    rgba(3, 8, 16, 0.14) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card .building-detail-info-text,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"].is-building-detail-single-panel .district-building-detail-panel--merged > .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004)),
    rgba(2, 6, 14, 0.52) !important;
  border-color: rgba(var(--building-window-accent-rgb), 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
  color: #facc15 !important;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.16),
    0 0 18px rgba(234, 179, 8, 0.1) !important;
}

@media (min-width: 721px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="restaurant"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
    margin-bottom: 120px !important;
  }
}

/* Casino card lock: keep the approved visual treatment stable for this building. */
html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004) 24%, rgba(2, 6, 14, 0.12) 100%),
    linear-gradient(135deg, rgba(var(--building-window-accent-rgb), 0.04), rgba(2, 6, 14, 0.08) 38%, rgba(var(--building-window-danger-rgb), 0.024) 100%),
    var(--building-detail-background-image) center/cover,
    rgba(4, 8, 16, 0.46) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::after {
  opacity: 0.78 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::before {
  opacity: 0.16 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .modal__header,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel--merged,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__section,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-mechanic-row,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-info-card,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__effects,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.002)),
    rgba(3, 8, 16, 0.14) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card .building-detail-info-text,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"].is-building-detail-single-panel .district-building-detail-panel--merged > .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004)),
    rgba(2, 6, 14, 0.52) !important;
  border-color: rgba(var(--building-window-accent-rgb), 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
  color: #facc15 !important;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.16),
    0 0 18px rgba(234, 179, 8, 0.1) !important;
}

@media (min-width: 721px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="casino"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
    margin-bottom: 120px !important;
  }
}

/* Auto salon card lock: keep the approved visual treatment stable for this building. */
html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004) 24%, rgba(2, 6, 14, 0.12) 100%),
    linear-gradient(135deg, rgba(var(--building-window-accent-rgb), 0.04), rgba(2, 6, 14, 0.08) 38%, rgba(var(--building-window-danger-rgb), 0.024) 100%),
    var(--building-detail-background-image) center/cover,
    rgba(4, 8, 16, 0.46) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::after {
  opacity: 0.78 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::before {
  opacity: 0.16 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .modal__header,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel--merged,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__section,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-mechanic-row,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-info-card,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__effects,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.002)),
    rgba(3, 8, 16, 0.14) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card .building-detail-info-text,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"].is-building-detail-single-panel .district-building-detail-panel--merged > .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004)),
    rgba(2, 6, 14, 0.52) !important;
  border-color: rgba(var(--building-window-accent-rgb), 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
  color: #facc15 !important;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.16),
    0 0 18px rgba(234, 179, 8, 0.1) !important;
}

@media (min-width: 721px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="auto-salon"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
    margin-bottom: 120px !important;
  }
}

/* Shopping mall card lock: keep the approved visual treatment stable for this building. */
html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004) 24%, rgba(2, 6, 14, 0.12) 100%),
    linear-gradient(135deg, rgba(var(--building-window-accent-rgb), 0.04), rgba(2, 6, 14, 0.08) 38%, rgba(var(--building-window-danger-rgb), 0.024) 100%),
    var(--building-detail-background-image) center/cover,
    rgba(4, 8, 16, 0.46) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::after {
  opacity: 0.78 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::before {
  opacity: 0.16 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .modal__header,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel--merged,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__section,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-mechanic-row,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-info-card,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__effects,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.002)),
    rgba(3, 8, 16, 0.14) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card .building-detail-info-text,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"].is-building-detail-single-panel .district-building-detail-panel--merged > .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004)),
    rgba(2, 6, 14, 0.52) !important;
  border-color: rgba(var(--building-window-accent-rgb), 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
  color: #facc15 !important;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.16),
    0 0 18px rgba(234, 179, 8, 0.1) !important;
}

@media (min-width: 721px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="retail"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
    margin-bottom: 120px !important;
  }
}

/* Arcade card lock: keep the approved visual treatment stable for this building. */
html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004) 24%, rgba(2, 6, 14, 0.12) 100%),
    linear-gradient(135deg, rgba(var(--building-window-accent-rgb), 0.04), rgba(2, 6, 14, 0.08) 38%, rgba(var(--building-window-danger-rgb), 0.024) 100%),
    var(--building-detail-background-image) center/cover,
    rgba(4, 8, 16, 0.46) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::after {
  opacity: 0.78 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::before {
  opacity: 0.16 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .modal__header,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel--merged,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__section,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-mechanic-row,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-info-card,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__effects,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.002)),
    rgba(3, 8, 16, 0.14) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card .building-detail-info-text,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"].is-building-detail-single-panel .district-building-detail-panel--merged > .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004)),
    rgba(2, 6, 14, 0.52) !important;
  border-color: rgba(var(--building-window-accent-rgb), 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
  color: #facc15 !important;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.16),
    0 0 18px rgba(234, 179, 8, 0.1) !important;
}

@media (min-width: 721px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="arcade"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
    margin-bottom: 120px !important;
  }
}

/* Recruitment center card lock: keep the approved visual treatment stable for this building. */
html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004) 24%, rgba(2, 6, 14, 0.12) 100%),
    linear-gradient(135deg, rgba(var(--building-window-accent-rgb), 0.04), rgba(2, 6, 14, 0.08) 38%, rgba(var(--building-window-danger-rgb), 0.024) 100%),
    var(--building-detail-background-image) center/cover,
    rgba(4, 8, 16, 0.46) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::after {
  opacity: 0.78 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::before {
  opacity: 0.16 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .modal__header,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel--merged,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__section,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-mechanic-row,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-info-card,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__effects,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.002)),
    rgba(3, 8, 16, 0.14) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card .building-detail-info-text,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"].is-building-detail-single-panel .district-building-detail-panel--merged > .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004)),
    rgba(2, 6, 14, 0.52) !important;
  border-color: rgba(var(--building-window-accent-rgb), 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
  color: #facc15 !important;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.16),
    0 0 18px rgba(234, 179, 8, 0.1) !important;
}

@media (min-width: 721px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="recruitment-center"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
    margin-bottom: 120px !important;
  }
}

/* Garage card lock: keep the approved visual treatment stable for this building. */
html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.004) 24%, rgba(2, 6, 14, 0.12) 100%),
    linear-gradient(135deg, rgba(var(--building-window-accent-rgb), 0.04), rgba(2, 6, 14, 0.08) 38%, rgba(var(--building-window-danger-rgb), 0.024) 100%),
    var(--building-detail-background-image) center/cover,
    rgba(4, 8, 16, 0.46) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::after {
  opacity: 0.78 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"]::before {
  opacity: 0.16 !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .modal__header,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-panel--merged,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__section,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-mechanic-row,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .district-building-detail-info-card,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-info-card__effects,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card.building-detail-modal__content[data-building-has-custom-background="true"] .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.002)),
    rgba(3, 8, 16, 0.14) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card .building-detail-info-text,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"].is-building-detail-single-panel .district-building-detail-panel--merged > .building-detail-info-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004)),
    rgba(2, 6, 14, 0.52) !important;
  border-color: rgba(var(--building-window-accent-rgb), 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
  color: #facc15 !important;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.16),
    0 0 18px rgba(234, 179, 8, 0.1) !important;
}

@media (min-width: 721px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="garage"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
    margin-bottom: 120px !important;
  }
}

@media (min-width: 721px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="exchange"] .district-building-detail-card [data-district-building-detail-action-section] > h5 {
    margin-bottom: 44px !important;
  }
}

@media (max-width: 780px), (hover: none) and (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup-card.buildings-modal__content > .modal__header {
    position: absolute !important;
    z-index: 9 !important;
    top: 8px !important;
    right: 4px !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) button#buildings-modal-close.modal__close {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgb(var(--mobile-building-scroll-rgb, 34, 211, 238)) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px rgba(103, 232, 249, 0.88) !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) button#buildings-modal-close.modal__close::before,
  html body #buildings-modal.buildings-popup-shell:not([hidden]) button#buildings-modal-close.modal__close::after {
    content: none !important;
    display: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup-card.buildings-modal__content > .modal__body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup-card.buildings-modal__content > .modal__body::-webkit-scrollbar,
  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup-card.buildings-modal__content > .modal__body::-webkit-scrollbar-track,
  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup-card.buildings-modal__content > .modal__body::-webkit-scrollbar-thumb {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__layout.buildings-modal__layout {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__types.buildings-modal__types {
    flex: 0 0 auto !important;
    max-height: min(30svh, 180px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn {
    position: relative !important;
    display: grid !important;
    min-width: 0 !important;
    min-height: 70px !important;
    padding: 8px 6px !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--buildings-type-border, rgba(34, 211, 238, 0.42)) 62%, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 13px !important;
    background:
      radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--buildings-type-glow, rgba(34, 211, 238, 0.22)) 72%, transparent), transparent 48%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.012) 52%, rgba(255, 255, 255, 0.035)),
      rgba(3, 8, 17, 0.72) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      inset 0 0 18px color-mix(in srgb, var(--buildings-type-glow, rgba(34, 211, 238, 0.14)) 48%, transparent),
      0 8px 18px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(10px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.18) !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn::before {
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    display: block !important;
    color: color-mix(in srgb, var(--buildings-type-text, #e6fbff) 88%, #ffffff) !important;
    font-size: 31px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    opacity: 0.9 !important;
    filter: saturate(1.9) brightness(1.3) drop-shadow(0 0 8px var(--buildings-type-border-hover, rgba(34, 211, 238, 0.72))) !important;
    text-shadow:
      0 0 7px color-mix(in srgb, var(--buildings-type-text, #e6fbff) 86%, #ffffff),
      0 0 15px var(--buildings-type-border-hover, rgba(34, 211, 238, 0.86)),
      0 0 28px var(--buildings-type-glow, rgba(34, 211, 238, 0.58)) !important;
    transform: translate(-50%, -56%) !important;
    pointer-events: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--resident::before,
  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--residential::before {
    content: "⌂" !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--park::before {
    content: "♧" !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--economy::before,
  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--commercial::before {
    content: "€" !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--industrial::before {
    content: "⚙" !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-btn--downtown::before {
    content: "★" !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-label {
    display: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-meta {
    position: absolute !important;
    right: 4px !important;
    bottom: 3px !important;
    z-index: 1 !important;
    display: inline-flex !important;
    min-width: 15px !important;
    min-height: 15px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid color-mix(in srgb, var(--buildings-type-border-hover, rgba(34, 211, 238, 0.72)) 52%, transparent) !important;
    border-radius: 999px !important;
    background: rgba(2, 6, 13, 0.72) !important;
    color: color-mix(in srgb, var(--buildings-type-text, #e6fbff) 84%, #ffffff) !important;
    font-size: 0.56rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow:
      0 0 8px var(--buildings-type-border-hover, rgba(34, 211, 238, 0.82)),
      0 0 15px var(--buildings-type-glow, rgba(34, 211, 238, 0.46)) !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-meta[data-mobile-count] {
    font-size: 0 !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__type-meta[data-mobile-count]::after {
    content: attr(data-mobile-count) !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__mobile-type-caption {
    grid-column: 1 / -1 !important;
    display: block !important;
    min-height: 15px !important;
    margin: 6px 2px 1px !important;
    color: color-mix(in srgb, var(--mobile-building-scroll-rgb, 34, 211, 238) 78%, #ffffff) !important;
    font-size: 0.62rem !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-shadow:
      0 0 8px rgba(var(--mobile-building-scroll-rgb, 34, 211, 238), 0.72),
      0 0 16px rgba(var(--mobile-building-scroll-soft-rgb, 8, 145, 178), 0.38) !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__types.buildings-modal__types::-webkit-scrollbar,
  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__types.buildings-modal__types::-webkit-scrollbar-track,
  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__types.buildings-modal__types::-webkit-scrollbar-thumb {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__detail.buildings-modal__detail {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color:
      rgba(var(--mobile-building-scroll-rgb, 34, 211, 238), 0.92)
      rgba(2, 8, 18, 0.82) !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__detail-card {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__detail.buildings-modal__detail::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__detail.buildings-modal__detail::-webkit-scrollbar-track {
    border: 1px solid rgba(var(--mobile-building-scroll-rgb, 34, 211, 238), 0.16) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(2, 8, 18, 0.94), rgba(8, 14, 26, 0.78)),
      repeating-linear-gradient(180deg, rgba(var(--mobile-building-scroll-rgb, 34, 211, 238), 0.12) 0 1px, transparent 1px 5px) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.035),
      inset 0 0 14px rgba(var(--mobile-building-scroll-soft-rgb, 8, 145, 178), 0.12) !important;
  }

  html body #buildings-modal.buildings-popup-shell:not([hidden]) .buildings-popup__detail.buildings-modal__detail::-webkit-scrollbar-thumb {
    border: 1px solid rgba(2, 8, 18, 0.76) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(var(--mobile-building-scroll-rgb, 34, 211, 238), 0.96) 34%, rgba(var(--mobile-building-scroll-soft-rgb, 8, 145, 178), 0.88)) !important;
    box-shadow:
      0 0 12px rgba(var(--mobile-building-scroll-rgb, 34, 211, 238), 0.42),
      inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  }
}

html body.game-body #buildings-modal .buildings-popup-card.buildings-modal__content {
  background:
    var(
      --buildings-popup-background-stack,
      linear-gradient(rgba(3, 7, 18, 0.5), rgba(3, 7, 18, 0.66)),
      url("../../img/index.png")
    ) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* Final market popup polish: compact header, darker modes, and desktop black-market columns. */
html body .market-popup-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 30px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

html body .market-popup-heading > .market-popup-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #f8fdff !important;
  font-size: clamp(1.18rem, 2vw, 1.52rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  overflow-wrap: anywhere !important;
  text-shadow:
    0 0 14px rgba(34, 211, 238, 0.72),
    0 0 28px rgba(244, 114, 182, 0.24) !important;
}

html body .market-popup-heading > .market-popup-close {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  flex: 0 0 26px !important;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(103, 232, 249, 0.54) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(103, 232, 249, 0.24), transparent 54%),
    rgba(3, 10, 20, 0.7) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 13px rgba(34, 211, 238, 0.34) !important;
  color: #dffbff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}

html body .market-popup-heading > .market-popup-close::before {
  content: "×" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: currentColor !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-shadow:
    0 0 8px rgba(103, 232, 249, 0.78),
    0 0 14px rgba(244, 114, 182, 0.24) !important;
  transform: translate(-50%, -53%) !important;
}

html body .market-popup-heading > .market-popup-close::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 720px), (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body .market-popup-shell[data-market-popup] .market-popup-heading > .market-popup-close {
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    border-radius: 7px !important;
    border-color: rgba(103, 232, 249, 0.68) !important;
    background:
      radial-gradient(circle at 50% 34%, rgba(103, 232, 249, 0.25), transparent 54%),
      linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(244, 114, 182, 0.14)),
      rgba(3, 10, 20, 0.82) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.055),
      0 0 10px rgba(34, 211, 238, 0.3),
      0 0 16px rgba(244, 114, 182, 0.12) !important;
  }

  html body .market-popup-shell[data-market-popup] .market-popup-heading > .market-popup-close::before {
    font-size: 16px !important;
    font-weight: 600 !important;
    transform: translate(-50%, -54%) !important;
    text-shadow:
      0 0 8px rgba(103, 232, 249, 0.82),
      0 0 14px rgba(244, 114, 182, 0.28) !important;
  }
}

html body .market-popup-shell[data-market-mode="black-market"] .market-popup-card {
  border-color: rgba(244, 114, 182, 0.68) !important;
  background:
    linear-gradient(180deg, rgba(2, 4, 10, 0.9), rgba(2, 3, 8, 0.97)),
    radial-gradient(circle at 16% 0%, rgba(244, 114, 182, 0.22), transparent 42%),
    radial-gradient(circle at 86% 8%, rgba(34, 211, 238, 0.12), transparent 34%),
    rgba(1, 2, 7, 0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 48px rgba(244, 114, 182, 0.08),
    0 26px 72px rgba(0, 0, 0, 0.72),
    0 0 42px rgba(244, 114, 182, 0.28) !important;
}

html body .market-popup-shell[data-market-mode="black-market"] .market-popup-title {
  color: #ffe8f4 !important;
  text-shadow:
    0 0 14px rgba(244, 114, 182, 0.82),
    0 0 30px rgba(34, 211, 238, 0.18) !important;
}

html body .market-popup-shell[data-market-mode="black-market"] .market-popup-row[data-resource-color] {
  --market-row-resource-rgb: var(--resource-accent-rgb, 103, 232, 249);
  border-color: rgba(var(--market-row-resource-rgb), 0.28) !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(var(--market-row-resource-rgb), 0.08) 42%, rgba(0, 0, 0, 0.9)),
    rgba(1, 2, 7, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 22px rgba(0, 0, 0, 0.5),
    0 12px 26px rgba(0, 0, 0, 0.32),
    0 0 16px rgba(var(--market-row-resource-rgb), 0.08) !important;
}

html body .market-popup-shell[data-market-mode="black-market"] .market-popup-row[data-resource-color]::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.96), rgba(var(--market-row-resource-rgb), 0.94), rgba(0, 0, 0, 0.96)) !important;
  box-shadow:
    0 0 12px rgba(var(--market-row-resource-rgb), 0.42),
    0 0 18px rgba(0, 0, 0, 0.7) !important;
}

html body .market-popup-shell[data-market-mode="black-market"] .market-popup-row[data-resource-color] .market-popup-row__stock::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.96), rgba(var(--market-row-resource-rgb), 0.9)) !important;
  box-shadow: 0 0 12px rgba(var(--market-row-resource-rgb), 0.36) !important;
}

html body .market-popup-shell[data-market-mode="black-market"] .market-popup-row[data-resource-color] .market-popup-row__trade {
  border-color: rgba(var(--market-row-resource-rgb), 0.2) !important;
  background:
    linear-gradient(180deg, rgba(var(--market-row-resource-rgb), 0.055), rgba(0, 0, 0, 0.16)),
    rgba(1, 2, 7, 0.74) !important;
}

html body .market-popup-shell[data-market-mode="black-market"] .market-popup-row[data-resource-color] .market-popup-row__name {
  text-shadow:
    0 0 12px rgba(var(--market-row-resource-rgb), 0.34),
    0 0 18px rgba(0, 0, 0, 0.9) !important;
}

@media (min-width: 721px) {
  html body .market-popup-shell[data-market-mode="black-market"] .market-popup-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  html body .market-popup-shell[data-market-mode="black-market"] .market-popup-row {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: space-between !important;
    min-width: 0 !important;
  }

  html body .market-popup-shell[data-market-mode="black-market"] .market-popup-row__trade {
    grid-template-columns: minmax(72px, 0.7fr) minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  html body .market-popup-shell[data-market-mode="black-market"] .market-popup-row__actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* Final loaded rule: mobile settings must render as a solid, opaque panel. */
@media (max-width: 720px), (hover: none) and (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body #settings-modal:not(.hidden),
  html body.mobile-settings-modal-open #settings-modal {
    background: #01040b !important;
    background-color: #01040b !important;
    background-image: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
  }

  html body.mobile-settings-modal-open .game-shell {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body #settings-modal:not(.hidden) > #settings-modal-backdrop.modal__backdrop,
  html body.mobile-settings-modal-open #settings-modal > #settings-modal-backdrop.modal__backdrop {
    background: #01040b !important;
    background-color: #01040b !important;
    background-image: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    pointer-events: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body #settings-modal:not(.hidden) .modal__content.settings-modal__content,
  html body.mobile-settings-modal-open #settings-modal .modal__content.settings-modal__content {
    background: #030814 !important;
    background-color: #030814 !important;
    background-image: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    pointer-events: auto !important;
    border: 1px solid rgba(103, 232, 249, 0.78) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      inset 0 0 34px rgba(34, 211, 238, 0.12),
      0 24px 58px rgba(0, 0, 0, 0.82),
      0 0 34px rgba(34, 211, 238, 0.3) !important;
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body #settings-modal:not(.hidden) .modal__content.settings-modal__content::after,
  html body.mobile-settings-modal-open #settings-modal .modal__content.settings-modal__content::after {
    background: none !important;
    opacity: 0 !important;
  }

  html body #settings-modal:not(.hidden) .settings-modal__content > .modal__header,
  html body.mobile-settings-modal-open #settings-modal .settings-modal__content > .modal__header {
    background: #061123 !important;
    background-color: #061123 !important;
    background-image: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: none !important;
  }

  html body #settings-modal:not(.hidden) .settings-modal__body,
  html body.mobile-settings-modal-open #settings-modal .settings-modal__body {
    background: #020610 !important;
    background-color: #020610 !important;
    background-image: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: none !important;
  }

  html body #settings-modal:not(.hidden) .settings-modal__row,
  html body.mobile-settings-modal-open #settings-modal .settings-modal__row {
    background: #071426 !important;
    background-color: #071426 !important;
    background-image: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    border-color: rgba(103, 232, 249, 0.38) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body #settings-modal:not(.hidden) .settings-modal__actions,
  html body.mobile-settings-modal-open #settings-modal .settings-modal__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body #settings-modal:not(.hidden) .settings-modal__select select,
  html body.mobile-settings-modal-open #settings-modal .settings-modal__select select {
    background: #030812 !important;
    background-color: #030812 !important;
    background-image: none !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #e6fbff !important;
  }

  html body #settings-modal:not(.hidden) *,
  html body.mobile-settings-modal-open #settings-modal * {
    visibility: visible !important;
  }
}

/* Final loaded override: make the Očista command visibly blink after imported CSS is cached. */
html body.game-body .city-status-ai-button {
  --purge-button-carmine: 196, 18, 48;
  --purge-button-carmine-hot: 255, 45, 96;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 999px !important;
  border-color: rgba(var(--purge-button-carmine), 0.64) !important;
  background:
    linear-gradient(135deg, rgba(var(--purge-button-carmine), 0.26), rgba(var(--purge-button-carmine-hot), 0.14)),
    rgba(22, 4, 10, 0.92) !important;
  color: #ffe4ec !important;
  animation: cityStatusAiButtonBlink 4.8s ease-in-out infinite !important;
  will-change: border-color, background-color, box-shadow, color, filter;
}

html body.game-body .city-status-bar .city-status-pill--action {
  height: 18px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  overflow: hidden !important;
}

html body.game-body #game-command-bar-mount {
  height: 20px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  transform: translateY(0) !important;
}

html body.game-body #game-command-bar-mount .city-status-bar {
  height: 20px !important;
  align-items: center !important;
}

html body.game-body .city-status-bar .city-status-pill:first-child {
  display: grid !important;
  place-items: center !important;
  padding: 0 4px !important;
}

html body.game-body .city-status-bar .city-status-pill:first-child .city-status-pill__label {
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
}

html body.game-body .city-status-bar .city-status-pill:first-child .city-status-pill__label::after {
  content: "Čas" !important;
  display: inline-block !important;
  color: rgba(var(--city-status-accent), 0.92) !important;
  font-size: 0.36rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body.game-body .city-status-bar .city-status-pill:first-child .city-status-pill__value {
  justify-self: center !important;
  width: auto !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body.game-body .city-status-bar .city-status-pill:nth-child(4) {
  display: grid !important;
  place-items: center !important;
  padding: 0 4px !important;
}

html body.game-body .city-status-bar .city-status-pill:nth-child(4) .city-status-pill__label {
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
}

html body.game-body .city-status-bar .city-status-pill:nth-child(4) .city-status-pill__label::after {
  content: "Hráči" !important;
  display: inline-block !important;
  color: rgba(var(--city-status-accent), 0.92) !important;
  font-size: 0.36rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body.game-body .city-status-bar .city-status-pill:nth-child(4) .city-status-pill__value {
  justify-self: center !important;
  width: auto !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

@media (max-width: 780px), (hover: none) and (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body #game-command-bar-mount,
  html body.game-body #game-command-bar-mount .city-status-bar {
    height: 16px !important;
  }

  html body.game-body #game-command-bar-mount .city-status-pill,
  html body.game-body #game-command-bar-mount .city-status-pill--action {
    height: 15px !important;
    min-height: 0 !important;
    border-radius: 7px !important;
  }

  html body.game-body #game-command-bar-mount .city-status-ai-button {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 7px !important;
    font-size: 0.36rem !important;
  }

  html body.game-body #game-command-bar-mount .city-status-pill__value {
    font-size: 0.42rem !important;
  }
}

@keyframes cityStatusAiButtonBlink {
  0%, 100% {
    border-color: rgba(var(--purge-button-carmine), 0.54);
    background:
      linear-gradient(135deg, rgba(var(--purge-button-carmine), 0.22), rgba(var(--purge-button-carmine-hot), 0.1)),
      rgba(22, 4, 10, 0.92);
    color: #ffdce6;
    text-shadow: 0 0 7px rgba(var(--purge-button-carmine), 0.34);
    box-shadow:
      0 0 8px rgba(var(--purge-button-carmine), 0.24),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    filter: brightness(0.96) saturate(1.08);
  }
  48%, 58% {
    border-color: rgba(var(--purge-button-carmine-hot), 0.96);
    background:
      linear-gradient(135deg, rgba(var(--purge-button-carmine-hot), 0.34), rgba(var(--purge-button-carmine), 0.22)),
      rgba(33, 5, 14, 0.96);
    color: #ffffff;
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.78),
      0 0 16px rgba(var(--purge-button-carmine-hot), 0.78);
    box-shadow:
      0 0 16px rgba(var(--purge-button-carmine-hot), 0.58),
      0 0 30px rgba(var(--purge-button-carmine), 0.34),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    filter: brightness(1.2) saturate(1.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.game-body .city-status-ai-button {
    animation: none !important;
  }
}

@media (min-width: 781px) and (hover: hover) and (pointer: fine) {
  html body.game-body #game-rail-left.sidebar-shell.game-rail,
  html body.game-body #game-rail-right.sidebar-shell.game-rail {
    box-sizing: border-box !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.08) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.004)),
      rgba(2, 6, 13, 0.24) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.012),
      0 14px 34px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(9px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(9px) saturate(1.04) !important;
  }

  html body.game-body #game-left-nav {
    padding-top: 0 !important;
  }
}

/* Final loaded building-card overrides: keep warehouse mobile layout and industrial close color stable. */
html body.game-body .district-building-detail-shell[data-building-district-type="industrial"] .district-building-detail-card .modal__close,
html body.game-body .district-building-detail-shell[data-building-district-type="industry"] .district-building-detail-card .modal__close,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="warehouse"] .district-building-detail-card .modal__close {
  color: #ffffff !important;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.48),
    0 0 14px rgba(226, 232, 240, 0.28) !important;
}

html body.game-body .district-building-detail-shell[data-building-district-type="industrial"] .district-building-detail-card .modal__close:hover,
html body.game-body .district-building-detail-shell[data-building-district-type="industrial"] .district-building-detail-card .modal__close:focus-visible,
html body.game-body .district-building-detail-shell[data-building-district-type="industry"] .district-building-detail-card .modal__close:hover,
html body.game-body .district-building-detail-shell[data-building-district-type="industry"] .district-building-detail-card .modal__close:focus-visible,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="warehouse"] .district-building-detail-card .modal__close:hover,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="warehouse"] .district-building-detail-card .modal__close:focus-visible {
  color: #ffffff !important;
}

html body.game-body .district-building-detail-shell[data-building-district-type="industrial"] .district-building-detail-card .modal__close::before,
html body.game-body .district-building-detail-shell[data-building-district-type="industry"] .district-building-detail-card .modal__close::before,
html body.game-body .district-building-detail-shell[data-building-mechanics-type="warehouse"] .district-building-detail-card .modal__close::before {
  color: #ffffff !important;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.62),
    0 0 14px rgba(226, 232, 240, 0.34) !important;
  filter: none !important;
}

@media (max-width: 720px) {
  html body.game-body .district-building-detail-shell[data-building-mechanics-type="power-plant"].is-building-detail-single-panel .district-building-detail-card .district-building-detail-panel--merged {
    gap: 4px !important;
  }

  html body.game-body .district-building-detail-shell[data-building-mechanics-type="power-plant"] .district-building-detail-card .building-info-card__section {
    gap: 3px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  html body.game-body .district-building-detail-shell[data-building-mechanics-type="power-plant"] .district-building-detail-card [data-district-building-detail-effects-section] {
    margin-top: 0 !important;
  }

  html body.game-body .district-building-detail-shell[data-building-mechanics-type="power-plant"] .district-building-detail-card [data-district-building-detail-effects-section] > h5 {
    margin-bottom: 3px !important;
  }

  html body.game-body .district-building-detail-shell[data-building-mechanics-type="power-plant"] .district-building-detail-card .building-info-card__effects {
    margin-top: 0 !important;
    gap: 5px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  html body.game-body .district-building-detail-shell[data-building-mechanics-type="warehouse"] .district-building-detail-mechanics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    justify-items: stretch !important;
  }

  html body.game-body .district-building-detail-shell[data-building-mechanics-type="warehouse"] .district-building-detail-mechanic-row {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
  }

  html body.game-body .district-building-detail-shell[data-building-mechanics-type="warehouse"] .district-building-detail-mechanic-row strong {
    min-width: 0 !important;
    font-size: 0.68rem !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }
}

/* Final loaded override: street news shows six compact rows, then scrolls. */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  html body.game-body .building-action-status__feed {
    --street-news-row-height: 38px;
    --street-news-row-gap: 8px;
    display: grid !important;
    grid-auto-rows: max-content !important;
    gap: var(--street-news-row-gap) !important;
    align-content: start !important;
    align-items: start !important;
    max-height: calc((var(--street-news-row-height) * 6) + (var(--street-news-row-gap) * 5)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    padding-right: 8px !important;
    scrollbar-gutter: stable !important;
  }

  html body.game-body .building-action-status__item {
    min-height: var(--street-news-row-height) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: start !important;
  }

  html body.game-body .building-action-status__item-summary,
  html body.game-body .building-action-status__item-meta {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  html body.game-body .building-action-status__item--clickable {
    min-height: 38px !important;
    padding-block: 8px !important;
    gap: 0 !important;
  }

  html body.game-body .building-action-status__item--clickable .building-action-status__item-title {
    font-size: 0.62rem !important;
    line-height: 1.18 !important;
  }

  html body.game-body .building-action-status__item--clickable .building-action-status__item-summary,
  html body.game-body .building-action-status__item--clickable .building-action-status__item-meta {
    display: none !important;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body .building-action-status__feed {
    --street-news-row-height: 38px;
    --street-news-row-gap: 7px;
    display: grid !important;
    grid-auto-rows: max-content !important;
    gap: var(--street-news-row-gap) !important;
    align-content: start !important;
    align-items: start !important;
    max-height: calc((var(--street-news-row-height) * 6) + (var(--street-news-row-gap) * 5)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    padding-right: 0 !important;
    scrollbar-gutter: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.game-body .building-action-status__feed::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}

html body.game-body .building-action-status__item--clickable {
  --street-news-action-rgb: 103, 232, 249;
  border-color: rgba(var(--street-news-action-rgb), 0.2) !important;
  background: rgba(var(--street-news-action-rgb), 0.1) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--street-news-action-rgb), 0.05) !important;
}

html body.game-body .building-action-status__item--clickable::before {
  background: rgb(var(--street-news-action-rgb)) !important;
  box-shadow: none !important;
}

html body.game-body .building-action-status__item--clickable .building-action-status__item-title {
  color: color-mix(in srgb, rgb(var(--street-news-action-rgb)) 24%, #f8fafc) !important;
  text-shadow: none !important;
}

html body.game-body .building-action-status__item--clickable:hover,
html body.game-body .building-action-status__item--clickable:focus-visible {
  border-color: rgba(var(--street-news-action-rgb), 0.32) !important;
  background: rgba(var(--street-news-action-rgb), 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--street-news-action-rgb), 0.08) !important;
}

html body.game-body .building-action-status__item--kind-police {
  --street-news-action-rgb: 59, 130, 246;
}

html body.game-body .building-action-status__item--kind-attack,
html body.game-body .building-action-status__item--kind-attack-warning {
  --street-news-action-rgb: 239, 68, 68;
}

html body.game-body .building-action-status__item--kind-raid {
  --street-news-action-rgb: 245, 158, 11;
}

html body.game-body .building-action-status__item--kind-spy,
html body.game-body .building-action-status__item--kind-spy-alert {
  --street-news-action-rgb: 34, 211, 238;
}

html body.game-body .building-action-status__item--kind-occupy {
  --street-news-action-rgb: 34, 197, 94;
}

html body.game-body .building-action-status__item--kind-market {
  --street-news-action-rgb: 250, 204, 21;
}

html body.game-body .building-action-status__item--kind-elimination {
  --street-news-action-rgb: 168, 85, 247;
}

/* Final loaded override: mobile player profile info uses two compact columns. */
@media (max-width: 720px) {
  html body.game-body .player-popup-body {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-content: start !important;
  }

  html body.game-body .player-popup-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 7px 8px !important;
  }

  html body.game-body .player-popup-row span,
  html body.game-body .player-popup-row strong {
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html body.game-body .player-popup-row span {
    font-size: 9.5px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: rgba(186, 230, 253, 0.78) !important;
  }

  html body.game-body .player-popup-row strong {
    font-size: 12px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }
}

/* Final loaded parity pass: district action buttons keep desktop colors on phones. */
@media (max-width: 720px), (hover: none) and (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body .district-popup-action[data-district-action-id] {
    border-color: rgba(var(--district-action-rgb), 0.34) !important;
    background:
      linear-gradient(135deg, rgba(var(--district-action-rgb), 0.17), rgba(var(--district-action-secondary-rgb), 0.08) 46%, rgba(6, 10, 18, 0.66)),
      rgba(6, 10, 18, 0.44) !important;
    color: var(--district-action-text) !important;
    text-shadow: 0 0 8px rgba(var(--district-action-rgb), 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 8px 18px rgba(2, 6, 23, 0.22),
      0 0 14px rgba(var(--district-action-rgb), 0.11) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id]::before {
    inset: 0 !important;
    width: auto !important;
    border-radius: inherit !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.13), transparent 30%, transparent 78%, rgba(var(--district-action-rgb), 0.12)),
      repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 8px) !important;
    opacity: 0.26 !important;
  }

  html body.game-body .district-popup-action[data-district-action-id]::after {
    inset: 0 auto 0 0 !important;
    width: 2px !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgb(var(--district-action-rgb)), rgb(var(--district-action-secondary-rgb))) !important;
    box-shadow: 0 0 12px rgba(var(--district-action-rgb), 0.62) !important;
    opacity: 1 !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="defense"] {
    --district-action-rgb: 96, 165, 250;
    --district-action-secondary-rgb: 34, 211, 238;
    --district-action-text: #eaf5ff;
  }

  html body.game-body .district-popup-action[data-district-action-id="trap"] {
    --district-action-rgb: 45, 212, 191;
    --district-action-secondary-rgb: 34, 197, 94;
    --district-action-text: #eafff8;
  }

  html body.game-body .district-popup-action[data-district-action-id="spy"] {
    --district-action-rgb: 250, 204, 21;
    --district-action-secondary-rgb: 236, 72, 153;
    --district-action-text: #fff9d7;
  }

  html body.game-body .district-popup-action[data-district-action-id="rob"] {
    --district-action-rgb: 34, 211, 238;
    --district-action-secondary-rgb: 168, 85, 247;
    --district-action-text: #e8fdff;
  }

  html body.game-body .district-popup-action[data-district-action-id="heist"] {
    --district-action-rgb: 244, 114, 182;
    --district-action-secondary-rgb: 168, 85, 247;
    --district-action-text: #fff0fa;
  }

  html body.game-body .district-popup-action[data-district-action-id="attack"] {
    --district-action-rgb: 248, 113, 113;
    --district-action-secondary-rgb: 251, 146, 60;
    --district-action-text: #fff1f2;
  }

  html body.game-body .district-popup-action[data-district-action-id="occupy"] {
    --district-action-rgb: 220, 20, 60;
    --district-action-secondary-rgb: 136, 19, 55;
    --district-action-text: #ffe7ee;
  }
}

/* Final interaction guard: overlays behave like app sheets and never leak taps to the map/topbar behind them. */
html body.game-body {
  -webkit-tap-highlight-color: transparent;
}

html body.game-body,
html body.game-body * {
  -webkit-touch-callout: none;
}

@media (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body,
  html body.game-body *:not(input):not(textarea):not(select):not([contenteditable="true"]) {
    -webkit-user-select: none;
    user-select: none;
  }

  html body.game-body button,
  html body.game-body [role="button"],
  html body.game-body .button,
  html body.game-body .district-popup-card,
  html body.game-body .modal__content,
  html body.game-body .storage-popup-card {
    touch-action: manipulation;
  }

  html body.game-modal-scroll-locked .game-resource-strip,
  html body.game-modal-scroll-locked .resource-pill,
  html body.game-modal-scroll-locked .game-toolbar-button,
  html body.game-modal-scroll-locked .game-topbar,
  html body.game-modal-scroll-locked #game-header {
    pointer-events: none !important;
  }

  html body.game-modal-scroll-locked {
    --district-mobile-resource-clearance: 0px;
  }

  html body.game-modal-scroll-locked .district-popup-shell:not([hidden]) {
    z-index: 12000 !important;
    padding-top: var(--district-mobile-resource-clearance, 0px) !important;
  }

  html body.game-modal-scroll-locked .district-popup-shell:not([hidden]) .district-popup-card {
    max-height: calc(
      var(--mobile-locked-vh, 100svh)
      - var(--district-mobile-resource-clearance, 0px)
      - max(8px, env(safe-area-inset-bottom))
    ) !important;
  }
}

html body.game-body .storage-popup-shell[data-storage-popup]:not([hidden]) {
  z-index: 18000 !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

html body.game-body .storage-popup-shell[data-storage-popup]:not([hidden]) .storage-popup-backdrop {
  z-index: 18001 !important;
  pointer-events: auto !important;
}

html body.game-body .storage-popup-shell[data-storage-popup]:not([hidden]) .storage-popup-card {
  z-index: 18002 !important;
  pointer-events: auto !important;
}

@media (max-width: 720px), (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body .storage-popup-shell[data-storage-popup]:not([hidden]) {
    padding: max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom)) !important;
  }

  html body.game-body .storage-popup-shell[data-storage-popup]:not([hidden]) .storage-popup-card {
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Final mobile desktop parity: district action buttons use desktop action skins. */
@media (max-width: 720px), (hover: none) and (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body .district-popup-actions {
    gap: 6px !important;
    padding-top: 6px !important;
    border-top-color: rgba(var(--district-accent-rgb), 0.22) !important;
  }

  html body.game-body .district-popup-action-row {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
  }

  html body.game-body .district-popup-action[data-district-action-id] {
    width: 100% !important;
    min-height: 46px !important;
    grid-column: auto !important;
    padding: 8px 10px 9px !important;
    overflow: hidden !important;
    border: 1px solid rgba(var(--district-action-rgb), 0.34) !important;
    border-radius: 7px !important;
    background:
      linear-gradient(135deg, rgba(var(--district-action-rgb), 0.17), rgba(var(--district-action-secondary-rgb), 0.08) 46%, rgba(6, 10, 18, 0.66)),
      rgba(6, 10, 18, 0.44) !important;
    color: var(--district-action-text) !important;
    text-align: left !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 8px rgba(var(--district-action-rgb), 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 8px 18px rgba(2, 6, 23, 0.22),
      0 0 14px rgba(var(--district-action-rgb), 0.11) !important;
    backdrop-filter: blur(12px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id]::before {
    inset: 0 !important;
    width: auto !important;
    border-radius: inherit !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.13), transparent 30%, transparent 78%, rgba(var(--district-action-rgb), 0.12)),
      repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 8px) !important;
    opacity: 0.26 !important;
  }

  html body.game-body .district-popup-action[data-district-action-id]::after {
    inset: 0 auto 0 0 !important;
    width: 2px !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgb(var(--district-action-rgb)), rgb(var(--district-action-secondary-rgb))) !important;
    box-shadow: 0 0 12px rgba(var(--district-action-rgb), 0.62) !important;
    opacity: 1 !important;
  }

  html body.game-body .district-popup-action__label {
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    color: inherit !important;
    font-size: 0.66rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.08 !important;
  }

  html body.game-body .district-popup-action__sub {
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    color: rgba(236, 248, 255, 0.68) !important;
    font-size: 0.54rem !important;
    letter-spacing: 0 !important;
    line-height: 1.18 !important;
  }

  html body.game-body .district-popup-action--countdown {
    min-height: 46px !important;
    line-height: 1.05 !important;
  }

  html body.game-body .district-popup-action__countdown {
    position: absolute !important;
    right: 7px !important;
    bottom: 5px !important;
    z-index: 2 !important;
    color: #facc15 !important;
    font-size: 0.5rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.42) !important;
    pointer-events: none !important;
  }

  html body.game-body .district-popup-action--countdown .district-popup-action__label {
    padding-right: 42px !important;
  }

  html body.game-body .district-popup-action--countdown:disabled {
    border-color: rgba(148, 163, 184, 0.3) !important;
    background:
      linear-gradient(135deg, rgba(71, 85, 105, 0.54), rgba(15, 23, 42, 0.7)),
      rgba(15, 23, 42, 0.62) !important;
    color: rgba(226, 232, 240, 0.72) !important;
    opacity: 1 !important;
    filter: saturate(0.48) !important;
    cursor: not-allowed !important;
  }

  html body.game-body .district-popup-action--countdown {
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    padding-bottom: 9px !important;
  }

  html body.game-body .district-popup-action--countdown .district-popup-action__label {
    width: 100% !important;
    padding: 0 8px !important;
    text-align: center !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="defense"] {
    --district-action-rgb: 96, 165, 250;
    --district-action-secondary-rgb: 34, 211, 238;
    --district-action-text: #d9f7ff;
    border-color: rgba(96, 165, 250, 0.42) !important;
    background:
      linear-gradient(180deg, rgba(37, 99, 235, 0.96), rgba(29, 78, 216, 0.76)) !important;
    color: #d9f7ff !important;
    box-shadow:
      0 16px 34px rgba(37, 99, 235, 0.24),
      inset 0 1px 0 rgba(191, 219, 254, 0.26),
      inset 0 0 0 1px rgba(59, 130, 246, 0.14) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="trap"] {
    --district-action-rgb: 45, 212, 191;
    --district-action-secondary-rgb: 34, 197, 94;
    --district-action-text: #d1fae5;
    border-color: rgba(45, 212, 191, 0.34) !important;
    background:
      linear-gradient(180deg, rgba(17, 94, 89, 0.94), rgba(15, 118, 110, 0.74)) !important;
    color: #d1fae5 !important;
    box-shadow:
      0 16px 34px rgba(13, 148, 136, 0.2),
      inset 0 1px 0 rgba(153, 246, 228, 0.18) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="trap"][data-district-trap-state="active"] {
    --district-action-rgb: 148, 163, 184;
    --district-action-secondary-rgb: 71, 85, 105;
    --district-action-text: rgba(226, 232, 240, 0.76);
    border-color: rgba(148, 163, 184, 0.32) !important;
    background:
      linear-gradient(135deg, rgba(71, 85, 105, 0.58), rgba(15, 23, 42, 0.72)),
      rgba(15, 23, 42, 0.66) !important;
    color: rgba(226, 232, 240, 0.76) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 8px 18px rgba(2, 6, 23, 0.18) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="trap"][data-district-trap-state="cooldown"] .district-popup-action__sub {
    color: rgba(167, 243, 208, 0.88) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="spy"] {
    --district-action-rgb: 251, 191, 36;
    --district-action-secondary-rgb: 161, 98, 7;
    --district-action-text: #fff8e1;
    border-color: rgba(251, 191, 36, 0.42) !important;
    background:
      linear-gradient(135deg, rgba(120, 53, 15, 0.96), rgba(161, 98, 7, 0.9)) !important;
    color: #fff8e1 !important;
    box-shadow:
      0 18px 36px rgba(180, 83, 9, 0.24),
      0 0 18px rgba(251, 191, 36, 0.14),
      inset 0 1px 0 rgba(254, 243, 199, 0.14) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="spy"] .district-popup-action__sub {
    color: rgba(255, 243, 173, 0.92) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="rob"] {
    --district-action-rgb: 34, 211, 238;
    --district-action-secondary-rgb: 15, 118, 110;
    --district-action-text: #ecfeff;
    border-color: rgba(34, 211, 238, 0.4) !important;
    background:
      linear-gradient(135deg, rgba(8, 47, 73, 0.96), rgba(15, 118, 110, 0.9)) !important;
    color: #ecfeff !important;
    box-shadow:
      0 18px 36px rgba(8, 145, 178, 0.24),
      0 0 18px rgba(34, 211, 238, 0.14),
      inset 0 1px 0 rgba(207, 250, 254, 0.14) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="heist"] {
    --district-action-rgb: 244, 114, 182;
    --district-action-secondary-rgb: 168, 85, 247;
    --district-action-text: #fff0fa;
    border-color: rgba(244, 114, 182, 0.42) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="attack"] {
    --district-action-rgb: 248, 113, 113;
    --district-action-secondary-rgb: 127, 29, 29;
    --district-action-text: #fff1f2;
    border-color: rgba(248, 113, 113, 0.42) !important;
    background:
      linear-gradient(135deg, rgba(127, 29, 29, 0.96), rgba(24, 24, 27, 0.94)) !important;
    color: #fff1f2 !important;
    box-shadow:
      0 18px 36px rgba(127, 29, 29, 0.3),
      0 0 20px rgba(248, 113, 113, 0.16),
      inset 0 1px 0 rgba(254, 202, 202, 0.12) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="occupy"] {
    --district-action-rgb: 220, 20, 60;
    --district-action-secondary-rgb: 136, 19, 55;
    --district-action-text: #ffe7ee;
    border-color: rgba(220, 20, 60, 0.5) !important;
    background:
      linear-gradient(135deg, rgba(136, 19, 55, 0.96), rgba(64, 8, 24, 0.92)) !important;
    color: #ffe7ee !important;
    box-shadow:
      0 18px 36px rgba(136, 19, 55, 0.28),
      0 0 20px rgba(220, 20, 60, 0.18),
      inset 0 1px 0 rgba(255, 205, 217, 0.14) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="attack"]::before {
    background: linear-gradient(120deg, rgba(254, 202, 202, 0.08), transparent 38%, transparent 72%, rgba(248, 113, 113, 0.12)) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="rob"]::before {
    background: linear-gradient(120deg, rgba(125, 211, 252, 0.14), transparent 36%, transparent 72%, rgba(45, 212, 191, 0.12)) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="spy"]::before {
    background: linear-gradient(120deg, rgba(253, 224, 71, 0.14), transparent 36%, transparent 72%, rgba(251, 191, 36, 0.12)) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="occupy"]::before {
    background: linear-gradient(120deg, rgba(255, 205, 217, 0.12), transparent 36%, transparent 72%, rgba(220, 20, 60, 0.16)) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="defense"]::before {
    background: linear-gradient(120deg, rgba(125, 211, 252, 0.18), transparent 36%, transparent 68%, rgba(191, 219, 254, 0.16)) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id="trap"]::before {
    background: linear-gradient(120deg, rgba(153, 246, 228, 0.16), transparent 36%, transparent 68%, rgba(45, 212, 191, 0.12)) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id].district-popup-action--countdown,
  html body.game-body .district-popup-action[data-district-action-id].district-popup-action--countdown:disabled {
    --district-action-rgb: 148, 163, 184;
    --district-action-secondary-rgb: 71, 85, 105;
    --district-action-text: rgba(226, 232, 240, 0.78);
    border-color: rgba(148, 163, 184, 0.32) !important;
    background:
      linear-gradient(135deg, rgba(71, 85, 105, 0.58), rgba(15, 23, 42, 0.72)),
      rgba(15, 23, 42, 0.66) !important;
    color: rgba(226, 232, 240, 0.78) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 8px 18px rgba(2, 6, 23, 0.18) !important;
    opacity: 1 !important;
    filter: saturate(0.48) !important;
    cursor: not-allowed !important;
  }

  html body.game-body .district-popup-action[data-district-action-id].district-popup-action--countdown::before {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 34%, transparent 76%, rgba(148, 163, 184, 0.12)),
      repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 8px) !important;
  }

  html body.game-body .district-popup-action[data-district-action-id].district-popup-action--countdown::after {
    background: linear-gradient(180deg, rgb(148, 163, 184), rgb(71, 85, 105)) !important;
    box-shadow: 0 0 12px rgba(148, 163, 184, 0.34) !important;
  }
}

/* Final gang profile transparency override. */
html body.game-body #game-gang-panel-mount.gang-profile-panel {
  border-color: rgba(12, 18, 28, 0.72) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.012),
    0 16px 34px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.game-body #game-gang-panel-mount.gang-profile-panel::before,
html body.game-body #game-gang-panel-mount.gang-profile-panel::after {
  opacity: 0.12 !important;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.34), transparent) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.game-body #profile-gang-card.right-panel-card {
  --gang-profile-player-color: #67e8f9;
  border-color: rgba(15, 23, 42, 0.72) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.032), transparent 38%),
    radial-gradient(circle at 100% 18%, rgba(250, 204, 21, 0.025), transparent 34%),
    linear-gradient(145deg, rgba(0, 0, 0, 0.72), rgba(3, 5, 10, 0.66) 52%, rgba(0, 0, 0, 0.7)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.014),
    inset 0 0 30px rgba(0, 0, 0, 0.34),
    0 16px 32px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.game-body #profile-gang-card.right-panel-card::before {
  opacity: 0.16 !important;
}

html body.game-body #profile-gang-card.right-panel-card::after {
  opacity: 0.34 !important;
}

html body.game-body #profile-gang-card.right-panel-card .gang-profile-row.profile-row {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
    rgba(4, 10, 18, 0.28) !important;
  border-color: rgba(103, 232, 249, 0.13) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.012),
    0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

html body.game-body #profile-gang-card.right-panel-card .gang-profile-row.profile-row--alliance {
  background:
    linear-gradient(90deg, rgba(168, 85, 247, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
    rgba(13, 8, 28, 0.34) !important;
  border-color: rgba(196, 181, 253, 0.28) !important;
  box-shadow:
    inset 2px 0 0 rgba(168, 85, 247, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.014),
    0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

html body.game-body #profile-gang-card.right-panel-card .gang-profile-row.profile-row--districts {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gang-profile-player-color, #67e8f9) 22%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
    color-mix(in srgb, var(--gang-profile-player-color, #67e8f9) 8%, rgba(4, 10, 18, 0.28)) !important;
  border-color: color-mix(in srgb, var(--gang-profile-player-color, #67e8f9) 36%, transparent) !important;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--gang-profile-player-color, #67e8f9) 62%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.014),
    0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

html body.game-body #profile-gang-card.right-panel-card .gang-profile-row.profile-row--wanted {
  background:
    linear-gradient(90deg, rgba(239, 68, 68, 0.17), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
    rgba(30, 8, 10, 0.32) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
  box-shadow:
    inset 2px 0 0 rgba(239, 68, 68, 0.62),
    inset 0 0 0 1px rgba(255, 255, 255, 0.014),
    0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

html body.game-body #profile-gang-card.right-panel-card .gang-profile-row.profile-row--members {
  background:
    linear-gradient(90deg, rgba(187, 247, 208, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
    rgba(6, 28, 18, 0.34) !important;
  border-color: rgba(134, 239, 172, 0.36) !important;
  box-shadow:
    inset 2px 0 0 rgba(74, 222, 128, 0.68),
    inset 0 0 0 1px rgba(255, 255, 255, 0.014),
    0 0 16px rgba(74, 222, 128, 0.12),
    0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

html body.game-body #profile-gang-card.right-panel-card .gang-profile-row.profile-row--faction {
  background:
    linear-gradient(90deg, rgba(250, 204, 21, 0.15), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
    linear-gradient(135deg, rgba(2, 6, 13, 0.42), rgba(24, 20, 9, 0.34)) !important;
  border-color: rgba(250, 204, 21, 0.32) !important;
  box-shadow:
    inset 2px 0 0 rgba(250, 204, 21, 0.62),
    inset 0 0 0 1px rgba(255, 255, 255, 0.014),
    0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

html body.game-body #profile-gang-card.right-panel-card .profile-row--alliance .gang-profile-row__label,
html body.game-body #profile-gang-card.right-panel-card .profile-row--alliance > span:last-child {
  color: rgba(233, 213, 255, 0.94) !important;
}

html body.game-body #profile-gang-card.right-panel-card .profile-row--districts > span:last-child {
  color: color-mix(in srgb, var(--gang-profile-player-color, #67e8f9) 72%, #ffffff) !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--gang-profile-player-color, #67e8f9) 34%, transparent) !important;
}

html body.game-body #profile-gang-card.right-panel-card .profile-row--wanted .gang-profile-row__label,
html body.game-body #profile-gang-card.right-panel-card .profile-row--wanted .profile-heat-panel {
  color: rgba(254, 202, 202, 0.96) !important;
}

html body.game-body #profile-gang-card.right-panel-card .profile-row--members .gang-profile-row__label,
html body.game-body #profile-gang-card.right-panel-card .profile-row--members > span:last-child {
  color: rgba(220, 252, 231, 0.98) !important;
  text-shadow: 0 0 12px rgba(134, 239, 172, 0.32) !important;
}

html body.game-body #profile-gang-card.right-panel-card .profile-row--faction .gang-profile-row__label,
html body.game-body #profile-gang-card.right-panel-card .profile-row--faction > span:last-child {
  color: rgba(254, 240, 138, 0.96) !important;
}

html body.game-body #profile-gang-card.right-panel-card [data-gang-members],
html body.game-body #profile-gang-card.right-panel-card [data-gang-districts],
html body.game-body #profile-gang-card.right-panel-card [data-gang-heat] {
  font-size: 0.92rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html body.game-body #profile-gang-card.right-panel-card .gang-profile-stars {
  font-size: 1.22rem !important;
  gap: 6px !important;
  line-height: 1 !important;
}

html body.game-body .wanted-popup-card .wanted-popup-header__title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body.game-body .wanted-popup-card .wanted-popup-meta--header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.game-body .wanted-popup-card .wanted-popup-meta--mobile {
  display: none !important;
}

html body.game-body .wanted-popup-card .wanted-popup-meta--header .wanted-popup-row {
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 0.58rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body.game-body .wanted-popup-card .wanted-popup-meta--header .wanted-popup-row span {
  margin-left: 5px !important;
  font-size: 0.64rem !important;
}

html body.game-body .wanted-popup-card .wanted-popup-title--stars {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body.game-body .wanted-popup-card .wanted-popup-title__text {
  min-width: 0 !important;
}

html body.game-body .wanted-popup-card .wanted-popup-stars {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  color: rgba(251, 191, 36, 0.32) !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html body.game-body .wanted-popup-card .wanted-popup-stars > span {
  display: inline-flex !important;
  color: rgba(251, 191, 36, 0.32) !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

html body.game-body .wanted-popup-card .wanted-popup-stars > span.is-active {
  color: #fbbf24 !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.34) !important;
  animation: ui-soft-pulse 3.2s ease-in-out infinite !important;
}

html body.game-body .wanted-popup-card .wanted-popup-stars--title {
  font-size: 0.82rem !important;
}

html body.game-body .wanted-popup-card .wanted-popup-stars--level {
  gap: 2px !important;
  font-size: 0.58rem !important;
}

html body.game-body .wanted-popup-card .wanted-popup-hero {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (max-width: 720px) {
  html body.game-body .wanted-popup-card .wanted-popup-header__title {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }

  html body.game-body .wanted-popup-card .wanted-popup-meta--header {
    display: none !important;
  }

  html body.game-body .wanted-popup-card .wanted-popup-meta--mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}

@media (min-width: 721px) {
  html body.game-body .wanted-popup-card .wanted-popup-close {
    top: 6px !important;
    right: 2px !important;
    z-index: 30 !important;
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 1px solid rgba(103, 232, 249, 0.48) !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 30% 24%, rgba(236, 254, 255, 0.22), transparent 38%),
      radial-gradient(circle at 76% 80%, rgba(248, 113, 113, 0.22), transparent 42%),
      linear-gradient(145deg, rgba(5, 13, 24, 0.96), rgba(10, 5, 14, 0.96)) !important;
    color: #e0fbff !important;
    font-size: 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 0 14px rgba(34, 211, 238, 0.12),
      0 0 14px rgba(34, 211, 238, 0.24),
      0 0 20px rgba(248, 113, 113, 0.14),
      0 10px 20px rgba(0, 0, 0, 0.28) !important;
    text-shadow: none !important;
    transform: none !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow:
      0 0 7px rgba(103, 232, 249, 0.66),
      0 0 10px rgba(248, 113, 113, 0.24) !important;
  }

  html body.game-body .wanted-popup-card .wanted-popup-close::before,
  html body.game-body .wanted-popup-card .wanted-popup-close::after {
    content: none !important;
    display: none !important;
  }

  html body.game-body .wanted-popup-card .wanted-popup-close:hover,
  html body.game-body .wanted-popup-card .wanted-popup-close:focus-visible {
    border-color: rgba(248, 113, 113, 0.7) !important;
    color: #ffffff !important;
    background:
      radial-gradient(circle at 30% 24%, rgba(236, 254, 255, 0.28), transparent 38%),
      radial-gradient(circle at 76% 80%, rgba(248, 113, 113, 0.32), transparent 42%),
      linear-gradient(145deg, rgba(7, 18, 32, 0.98), rgba(25, 7, 14, 0.98)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 0 16px rgba(34, 211, 238, 0.16),
      0 0 16px rgba(34, 211, 238, 0.34),
      0 0 24px rgba(248, 113, 113, 0.26),
      0 12px 22px rgba(0, 0, 0, 0.32) !important;
  }

  html body.game-body #profile-gang-card.right-panel-card .gang-profile-stars {
    font-size: 0.96rem !important;
    gap: 4px !important;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body #profile-gang-card.right-panel-card .gang-profile-stars {
    font-size: 0.78rem !important;
    gap: 3px !important;
    line-height: 1 !important;
  }

  html body.game-body #profile-gang-card.right-panel-card .gang-profile-stars > * {
    font-size: inherit !important;
    line-height: 1 !important;
  }
}

html body.game-body .map-phase-toolbar .map-phase-button[data-border-toggle] {
  border-color: rgba(255, 89, 185, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    linear-gradient(90deg, rgba(255, 89, 185, 0.14), rgba(130, 54, 255, 0.08)),
    rgba(18, 10, 24, 0.82) !important;
  color: #ffd9f5 !important;
}

@media (max-width: 840px) {
  html body.game-body .map-stage-shell {
    border-color: rgba(15, 23, 42, 0.72) !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.035), transparent 34%),
      radial-gradient(circle at 86% 4%, rgba(34, 211, 238, 0.055), transparent 30%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.74), rgba(2, 6, 23, 0.92)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      inset 0 0 22px rgba(0, 0, 0, 0.42),
      0 16px 30px rgba(0, 0, 0, 0.38),
      0 0 18px rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.game-body .mount-point--map {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background:
      linear-gradient(145deg, rgba(0, 0, 0, 0.96), rgba(3, 7, 18, 0.92) 48%, rgba(0, 0, 0, 0.98)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.035),
      0 14px 28px rgba(0, 0, 0, 0.42),
      0 0 18px rgba(2, 6, 23, 0.34) !important;
  }

  html body.game-body .map-viewport {
    background: rgba(0, 0, 0, 0.96) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.045),
      inset 0 0 24px rgba(0, 0, 0, 0.48),
      0 12px 24px rgba(0, 0, 0, 0.36) !important;
  }

  html body.game-body .map-canvas-shell::before {
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04), transparent 34%),
      linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.28)),
      repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px) !important;
  }
}

html body.game-body .wanted-popup-card .wanted-popup-police-toggle.button,
html body.game-body .wanted-popup-card .wanted-popup-police-toggle {
  border-color: rgba(255, 255, 255, 0.62) !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.24), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(2, 6, 13, 0.98), rgba(17, 24, 39, 0.96)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 12px rgba(255, 255, 255, 0.08),
    0 0 12px rgba(255, 255, 255, 0.14),
    0 8px 16px rgba(0, 0, 0, 0.24) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.38) !important;
}

html body.game-body .wanted-popup-card .wanted-popup-police-toggle[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.86) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0 14%, transparent 16%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 44%),
    linear-gradient(135deg, rgba(0, 0, 0, 1), rgba(31, 41, 55, 0.98)) !important;
  color: #ffffff !important;
}

/* Final demo modal layer: wanted police help must stay above storage/heat popup cards. */
html body.game-body .wanted-popup-shell:not([hidden]) {
  z-index: 21000 !important;
}

html body.game-body .wanted-popup-shell:not([hidden]) .wanted-popup-card {
  z-index: 21010 !important;
}

html body.game-body .wanted-popup-shell:not([hidden]) > .wanted-popup-police-window,
html body.game-body .wanted-popup-shell:not([hidden]) .wanted-popup-card .wanted-popup-police-window {
  z-index: 21020 !important;
}

html body.game-body #global-chat-card.right-panel-card {
  border-color: rgba(125, 211, 252, 0.12) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(186, 230, 253, 0.035), transparent 38%),
    rgba(14, 165, 233, 0.012) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.01),
    0 14px 28px rgba(7, 89, 133, 0.045),
    0 0 20px rgba(56, 189, 248, 0.025) !important;
}

@media (min-width: 841px) {
  html body.game-body #global-chat-card.right-panel-card {
    display: flex !important;
    min-height: 276px !important;
    height: clamp(276px, 38vh, 354px) !important;
  }

  html body.game-body #global-chat-card .alliance-chat.server-chat-panel {
    flex: 1 1 auto !important;
    min-height: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  html body.game-body #global-chat-card .alliance-chat__log,
  html body.game-body #global-chat-card .server-chat-panel__feed {
    min-height: 150px !important;
    max-height: none !important;
  }
}

html body.game-body #global-chat-card .alliance-chat.server-chat-panel {
  border-color: rgba(125, 211, 252, 0.14) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(224, 242, 254, 0.07), transparent 38%),
    radial-gradient(circle at 92% 18%, rgba(125, 211, 252, 0.055), transparent 34%),
    linear-gradient(145deg, rgba(8, 47, 73, 0.22), rgba(14, 116, 144, 0.14) 48%, rgba(7, 89, 133, 0.18)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.014),
    inset 0 0 28px rgba(186, 230, 253, 0.018),
    0 16px 32px rgba(7, 89, 133, 0.07),
    0 0 22px rgba(56, 189, 248, 0.035) !important;
}

html body.game-body #global-chat-card .alliance-chat.server-chat-panel::before {
  opacity: 0.34 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), transparent 34%),
    repeating-linear-gradient(180deg, rgba(224, 242, 254, 0.04) 0 1px, transparent 1px 9px) !important;
}

html body.game-body #global-chat-card .alliance-chat.server-chat-panel::after {
  opacity: 0.58 !important;
  background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.42), rgba(226, 232, 240, 0.5), transparent) !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.16) !important;
}

html body.game-body #global-chat-card .alliance-chat__title {
  border-color: rgba(224, 242, 254, 0.34) !important;
  background: rgba(8, 47, 73, 0.48) !important;
  color: rgba(240, 249, 255, 0.94) !important;
  box-shadow:
    inset 0 0 12px rgba(224, 242, 254, 0.055),
    0 0 12px rgba(56, 189, 248, 0.12) !important;
  text-shadow: 0 0 10px rgba(224, 242, 254, 0.14) !important;
}

html body.game-body #global-chat-card .alliance-chat__title::before {
  background: #020617 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 8px rgba(15, 23, 42, 0.56),
    0 0 14px rgba(255, 255, 255, 0.08) !important;
}

html body.game-body #global-chat-card .alliance-chat__log,
html body.game-body #global-chat-card .server-chat-panel__feed {
  scrollbar-color: rgba(15, 23, 42, 0.78) rgba(8, 47, 73, 0.28) !important;
}

html body.game-body #global-chat-card .alliance-chat__log::-webkit-scrollbar-track {
  background: rgba(8, 47, 73, 0.34) !important;
}

html body.game-body #global-chat-card .alliance-chat__log::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.72)) !important;
  border-color: rgba(8, 47, 73, 0.42) !important;
  box-shadow: 0 0 10px rgba(15, 23, 42, 0.26) !important;
}

html body.game-body #global-chat-card .alliance-chat__item,
html body.game-body #global-chat-card .server-chat-panel__message {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 5px !important;
  row-gap: 2px !important;
  border-color: rgba(224, 242, 254, 0.18) !important;
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.12), transparent 48%),
    rgba(3, 20, 34, 0.94) !important;
  box-shadow:
    inset 2px 0 0 rgba(186, 230, 253, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 16px rgba(2, 6, 23, 0.22) !important;
}

html body.game-body #global-chat-card .server-chat-panel__author {
  --chat-author-color: #020617;
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--chat-author-color) 64%, #f8fafc) !important;
  box-shadow: none !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--chat-author-color) 18%, transparent) !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-size: 0.72rem !important;
  line-height: 1.38 !important;
  white-space: nowrap !important;
}

html body.game-body #global-chat-card .server-chat-panel__timestamp {
  display: inline-block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  min-width: 0 !important;
  color: rgba(186, 230, 253, 0.62) !important;
  font-size: 0.53rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.14) !important;
}

html body.game-body #global-chat-card .server-chat-panel__text {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  color: rgba(240, 249, 255, 0.86) !important;
  font-size: 0.74rem !important;
  line-height: 1.38 !important;
  overflow-wrap: anywhere !important;
}

html body.game-body #global-chat-card .alliance-chat__input,
html body.game-body #global-chat-card .server-chat-panel__composer {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  border-color: rgba(224, 242, 254, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    rgba(8, 47, 73, 0.48) !important;
  box-shadow: inset 0 0 16px rgba(186, 230, 253, 0.055) !important;
}

html body.game-body #global-chat-card .server-chat-panel__composer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.game-body #global-chat-card .server-chat-panel__composer-head .alliance-chat__title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 24px !important;
  padding: 0 7px !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 0.66rem !important;
}

html body.game-body #global-chat-card .server-chat-panel__composer-head .alliance-chat__title::after {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 0 10px currentColor !important;
  animation: lobbyDot 1.2s infinite !important;
}

html body.game-body #global-chat-card .server-chat-panel__composer-head .alliance-chat__title::before {
  content: none !important;
  display: none !important;
}

html body.game-body #global-chat-card .server-chat-panel__composer-head .server-chat-panel__send {
  flex: 0 0 auto !important;
  margin-right: 8px !important;
}

@keyframes lobbyDot {
  0%, 100% {
    opacity: 0.42;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

html body.game-body #global-chat-card .server-chat-panel__input {
  border-color: rgba(224, 242, 254, 0.22) !important;
  background: rgba(8, 47, 73, 0.58) !important;
  color: rgba(240, 249, 255, 0.92) !important;
}

html body.game-body #global-chat-card .server-chat-panel__send {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(135deg, rgba(2, 6, 13, 0.98), rgba(15, 23, 42, 0.96)) !important;
  color: rgba(248, 250, 252, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 14px rgba(255, 255, 255, 0.035),
    0 8px 16px rgba(0, 0, 0, 0.24) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.16) !important;
}

html body.game-body #global-chat-card .server-chat-panel__send:hover,
html body.game-body #global-chat-card .server-chat-panel__send:focus-visible {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent),
    linear-gradient(135deg, rgba(3, 7, 18, 1), rgba(30, 41, 59, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 16px rgba(255, 255, 255, 0.045),
    0 10px 18px rgba(0, 0, 0, 0.28) !important;
}

html body.game-body #global-chat-card .server-chat-panel__send--arrow {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border-color: rgba(103, 232, 249, 0.7) !important;
  background:
    radial-gradient(circle at 32% 18%, rgba(240, 249, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(8, 47, 73, 0.66) 52%, rgba(2, 6, 23, 0.98)) !important;
  color: #67e8f9 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 18px rgba(34, 211, 238, 0.16),
    0 0 14px rgba(34, 211, 238, 0.32),
    0 0 26px rgba(14, 165, 233, 0.2),
    0 8px 16px rgba(2, 6, 23, 0.34) !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

html body.game-body #global-chat-card .server-chat-panel__send--arrow::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 50% !important;
  width: 20px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.26), transparent),
    radial-gradient(circle at 82% 50%, rgba(103, 232, 249, 0.32), transparent 46%) !important;
  box-shadow:
    0 0 10px rgba(103, 232, 249, 0.24),
    0 0 18px rgba(34, 211, 238, 0.18) !important;
  transform: translateY(-50%) !important;
}

html body.game-body #global-chat-card .server-chat-panel__send--arrow::after {
  content: none !important;
  display: none !important;
}

html body.game-body #global-chat-card .server-chat-panel__send--arrow span {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  color: #a5f3fc !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
  text-shadow:
    0 0 6px rgba(165, 243, 252, 0.95),
    0 0 14px rgba(34, 211, 238, 0.7),
    0 0 24px rgba(14, 165, 233, 0.44) !important;
}

html body.game-body #global-chat-card .server-chat-panel__send--arrow:hover,
html body.game-body #global-chat-card .server-chat-panel__send--arrow:focus-visible {
  border-color: rgba(186, 230, 253, 0.9) !important;
  background:
    radial-gradient(circle at 32% 18%, rgba(240, 249, 255, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(34, 211, 238, 0.38), rgba(14, 116, 144, 0.72) 52%, rgba(2, 6, 23, 1)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 20px rgba(34, 211, 238, 0.22),
    0 0 18px rgba(103, 232, 249, 0.42),
    0 0 32px rgba(14, 165, 233, 0.26),
    0 10px 18px rgba(2, 6, 23, 0.36) !important;
}

html body.game-body .building-action-status {
  border-color: rgba(15, 23, 42, 0.62) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.026), transparent 36%),
    radial-gradient(circle at 100% 18%, rgba(250, 204, 21, 0.018), transparent 34%),
    linear-gradient(145deg, rgba(0, 0, 0, 0.58), rgba(3, 5, 10, 0.42) 52%, rgba(0, 0, 0, 0.52)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.012),
    inset 0 0 28px rgba(0, 0, 0, 0.24),
    0 14px 28px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.game-body .building-action-status::before,
html body.game-body .building-action-status::after {
  opacity: 0.16 !important;
}

html body.game-body .building-action-status__summary,
html body.game-body .building-action-status__meta,
html body.game-body .building-action-status__empty,
html body.game-body .building-action-status__feed {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    rgba(0, 0, 0, 0.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.012),
    0 8px 16px rgba(0, 0, 0, 0.14) !important;
}

html body.game-body .building-action-status__item {
  background:
    linear-gradient(90deg, rgba(var(--street-news-action-rgb, 103, 232, 249), 0.08), transparent 48%),
    rgba(3, 5, 10, 0.9) !important;
}

html body.game-body .building-action-status__feed::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.76) !important;
}

/* Final loaded override: main left launchers keep a subtle dark glass tint. */
html body.game-body #city-events-card #city-events-open.panel-action-button,
html body.game-body #city-events-card #city-events-open.panel-action-button:hover,
html body.game-body #city-events-card #city-events-open.panel-action-button:focus-visible {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.08), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(244, 114, 182, 0.06), transparent 34%),
    rgba(5, 10, 18, 0.34) !important;
  background-color: rgba(5, 10, 18, 0.34) !important;
}

/* Final loaded override: remove the extra dark frame around Budovy and Bazar launchers. */
html body.game-body #buildings-card.feature-card,
html body.game-body #market-card.feature-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.game-body #buildings-card .panel-action-button--feature,
html body.game-body #market-card .panel-action-button--feature {
  border-color: rgba(103, 232, 249, 0.18) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.08), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(244, 114, 182, 0.06), transparent 34%),
    rgba(5, 10, 18, 0.34) !important;
  background-color: rgba(5, 10, 18, 0.34) !important;
  backdrop-filter: blur(8px) saturate(116%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(116%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 0 0 1px rgba(103, 232, 249, 0.08),
    0 8px 18px rgba(2, 6, 23, 0.12),
    0 0 18px rgba(34, 211, 238, 0.06) !important;
}

html body.game-body #buildings-card .panel-action-button--feature:hover,
html body.game-body #buildings-card .panel-action-button--feature:focus-visible,
html body.game-body #market-card .panel-action-button--feature:hover,
html body.game-body #market-card .panel-action-button--feature:focus-visible {
  border-color: rgba(103, 232, 249, 0.34) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.1), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(244, 114, 182, 0.08), transparent 34%),
    rgba(5, 10, 18, 0.42) !important;
  background-color: rgba(5, 10, 18, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 0 1px rgba(103, 232, 249, 0.12),
    0 10px 20px rgba(2, 6, 23, 0.18),
    0 0 20px rgba(34, 211, 238, 0.1) !important;
}

html body.game-body #buildings-card .panel-action-button--feature:focus-visible,
html body.game-body #market-card .panel-action-button--feature:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.2) !important;
  outline-offset: 2px !important;
}

html body.game-body #buildings-card .panel-action-button--feature::before,
html body.game-body #buildings-card .panel-action-button--feature::after,
html body.game-body #market-card .panel-action-button--feature::before,
html body.game-body #market-card .panel-action-button--feature::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  html body.game-body #game-left-nav.panel-action-stack > #city-events-card,
  html body.game-body #game-left-nav.panel-action-stack > #buildings-card,
  html body.game-body #game-left-nav.panel-action-stack > #market-card {
    margin-bottom: 12px !important;
  }

  html body.game-body #game-left-nav.panel-action-stack > #market-card {
    margin-bottom: 18px !important;
  }

  html body.game-body #game-left-nav.panel-action-stack > #building-shortcut-grid {
    position: relative !important;
    padding-top: 24px !important;
  }

  html body.game-body #game-left-nav.panel-action-stack > #building-shortcut-grid::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: -6px !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(250, 204, 21, 0.76),
      rgba(226, 232, 240, 0.68),
      transparent
    ) !important;
    box-shadow:
      0 0 8px rgba(250, 204, 21, 0.34),
      0 0 14px rgba(226, 232, 240, 0.18) !important;
    pointer-events: none !important;
  }
}

/* Requested UI polish overrides. */
html body.game-body #profile-gang-card.right-panel-card .gang-profile-row.profile-row--wanted {
  background:
    linear-gradient(90deg, rgba(248, 250, 252, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(12, 18, 28, 0.38) !important;
  border-color: rgba(226, 232, 240, 0.34) !important;
  box-shadow:
    inset 2px 0 0 rgba(226, 232, 240, 0.68),
    inset 0 0 0 1px rgba(255, 255, 255, 0.026),
    0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

html body.game-body #profile-gang-card.right-panel-card .gang-profile-row.profile-row--members {
  background:
    linear-gradient(90deg, rgba(187, 247, 208, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(6, 28, 18, 0.38) !important;
  border-color: rgba(134, 239, 172, 0.38) !important;
  box-shadow:
    inset 2px 0 0 rgba(74, 222, 128, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.026),
    0 0 16px rgba(74, 222, 128, 0.14),
    0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

html body.game-body #profile-gang-card.right-panel-card .profile-row--wanted .gang-profile-row__label {
  color: rgba(241, 245, 249, 0.96) !important;
  text-shadow: 0 0 10px rgba(226, 232, 240, 0.14) !important;
}

html body.game-body #profile-gang-card.right-panel-card .profile-row--members .gang-profile-row__label,
html body.game-body #profile-gang-card.right-panel-card .profile-row--members > span:last-child {
  color: rgba(220, 252, 231, 0.98) !important;
  text-shadow: 0 0 12px rgba(134, 239, 172, 0.32) !important;
}

html body.game-body #profile-gang-card.right-panel-card .profile-row--wanted .profile-heat-panel {
  border-color: rgba(248, 113, 113, 0.58) !important;
  background:
    linear-gradient(180deg, rgba(239, 68, 68, 0.92), rgba(127, 29, 29, 0.88)) !important;
  color: #fff1f2 !important;
  box-shadow:
    inset 0 1px 0 rgba(254, 202, 202, 0.2),
    0 0 14px rgba(248, 113, 113, 0.24) !important;
}

html body.game-body #attack-confirm-modal-cancel.modal__cancel-btn,
html body.game-body #attack-confirm-modal-cancel.btn--ghost,
html body.game-body #raid-confirm-modal-cancel.modal__cancel-btn,
html body.game-body #raid-confirm-modal-cancel.btn--ghost,
html body.game-body #trap-confirm-modal-cancel.modal__cancel-btn,
html body.game-body #trap-confirm-modal-cancel.btn--ghost,
html body.game-body #spy-confirm-modal-cancel.modal__cancel-btn,
html body.game-body #spy-confirm-modal-cancel.btn--ghost,
html body.game-body #occupy-confirm-modal-cancel.modal__cancel-btn,
html body.game-body #occupy-confirm-modal-cancel.btn--ghost {
  color: #f8fafc !important;
}

html body.game-body .onboarding-launch-button {
  width: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-color: rgba(226, 232, 240, 0.18) !important;
  background: rgba(8, 13, 24, 0.24) !important;
  color: rgba(248, 250, 252, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 14px rgba(0, 0, 0, 0.18) !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

html body.game-body .onboarding-launch-button::before {
  content: none !important;
  display: none !important;
}

html body.game-body .onboarding-launch-button__glyph {
  color: rgba(248, 250, 252, 0.94) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow:
    0 0 8px rgba(226, 232, 240, 0.28),
    0 0 16px rgba(34, 211, 238, 0.14) !important;
}

html body.game-body .onboarding-launch-button:hover,
html body.game-body .onboarding-launch-button:focus-visible {
  border-color: rgba(226, 232, 240, 0.34) !important;
  background: rgba(15, 23, 42, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 14px rgba(148, 163, 184, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.22) !important;
}

@media (max-width: 720px), (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body #events-modal:not(.hidden) > #events-modal-backdrop.modal__backdrop,
  html body.game-modal-scroll-locked #events-modal:not(.hidden) > #events-modal-backdrop.modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.84)) !important;
    backdrop-filter: blur(5px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(115%) !important;
    opacity: 1 !important;
  }
}

html body.game-body .elimination-ai-panel.is-open {
  background:
    radial-gradient(circle at 76% 12%, rgba(34, 211, 238, 0.1), transparent 34%),
    linear-gradient(90deg, rgba(2, 6, 14, 0.12), rgba(2, 6, 14, 0.34)) !important;
}

html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__backdrop {
  background:
    linear-gradient(90deg, rgba(2, 6, 14, 0.22), rgba(2, 6, 14, 0.56)),
    rgba(1, 5, 12, 0.34) !important;
  backdrop-filter: blur(7px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(130%) !important;
}

html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__card {
  border-radius: 16px !important;
  border-color: rgba(226, 232, 240, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.022)),
    radial-gradient(circle at 16% 0%, rgba(34, 211, 238, 0.12), transparent 38%),
    radial-gradient(circle at 100% 16%, rgba(248, 113, 113, 0.12), transparent 34%),
    rgba(3, 8, 18, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 28px rgba(255, 255, 255, 0.026),
    0 24px 70px rgba(0, 0, 0, 0.46),
    0 0 30px rgba(34, 211, 238, 0.12) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}

html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__card::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 28%, transparent 76%, rgba(255, 255, 255, 0.045)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 36%, rgba(255, 255, 255, 0.018)) !important;
  opacity: 0.42 !important;
  mix-blend-mode: screen !important;
}

html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__card::after {
  opacity: 0.2 !important;
  filter: blur(0.2px) drop-shadow(0 0 18px rgba(34, 211, 238, 0.14)) !important;
}

html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__header {
  min-height: 84px !important;
  padding: 18px 18px 12px 20px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.012)),
    rgba(3, 8, 18, 0.26) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.12) !important;
  backdrop-filter: blur(16px) saturate(136%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(136%) !important;
}

html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__eyebrow,
html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__status-chip {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(226, 232, 240, 0.92) !important;
  text-shadow: none !important;
}

html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__status-chip::before,
html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__status-chip::after {
  content: none !important;
  display: none !important;
}

html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__title {
  color: #f8fafc !important;
  font-size: 23px !important;
  text-shadow: 0 0 18px rgba(226, 232, 240, 0.12) !important;
}

html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__close {
  border: 1px solid rgba(226, 232, 240, 0.2) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: #ffffff !important;
}

html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__hero,
html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__section,
html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__metric,
html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__leaderboard-row,
html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__score-row,
html body.game-body .elimination-ai-panel.is-open .elimination-ai-panel__action-chips span {
  border-color: rgba(226, 232, 240, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.014)),
    rgba(3, 8, 18, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

@media (max-width: 720px), (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html.game-modal-scroll-locked {
    --mobile-overlay-top-offset: 0px !important;
  }

  html body.game-body.game-modal-scroll-locked #game-header,
  html body.game-body.game-modal-scroll-locked .game-topbar,
  html body.game-body.game-modal-scroll-locked .game-resource-strip,
  html body.game-body.game-modal-scroll-locked.is-mobile-topbar-condensed .game-resource-strip {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked .game-topbar,
  html body.game-body.game-modal-scroll-locked .game-topbar * {
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked .game-shell > .modal:not(.hidden):not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 12000 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--mobile-locked-vh, 100svh) !important;
    height: var(--mobile-locked-vh, 100svh) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }

  html body.game-body.game-modal-scroll-locked .game-shell > .modal:not(.hidden):not([hidden]) > .modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
  }

  html body.game-body.game-modal-scroll-locked:has(.storage-popup-shell[data-storage-popup]:not([hidden])) #game-header,
  html body.game-body.game-modal-scroll-locked:has(.storage-popup-shell[data-storage-popup]:not([hidden])) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(.storage-popup-shell[data-storage-popup]:not([hidden])) .game-resource-strip,
  html body.game-body.game-modal-scroll-locked.is-mobile-topbar-condensed:has(.storage-popup-shell[data-storage-popup]:not([hidden])) .game-resource-strip {
    z-index: 20050 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body.game-body.game-modal-scroll-locked:has(.storage-popup-shell[data-storage-popup]:not([hidden])) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(.storage-popup-shell[data-storage-popup]:not([hidden])) .game-topbar * {
    pointer-events: auto !important;
  }

  html body.game-body.game-modal-scroll-locked:has(.storage-popup-shell[data-storage-popup]:not([hidden])) .storage-popup-shell[data-storage-popup]:not([hidden]) {
    padding-top: var(--mobile-topbar-offset, 72px) !important;
  }

  html body.game-body.game-modal-scroll-locked:has(.storage-popup-shell[data-storage-popup]:not([hidden])) .storage-popup-shell[data-storage-popup]:not([hidden]) .storage-popup-card {
    max-height: calc(var(--mobile-locked-vh, 100dvh) - var(--mobile-topbar-offset, 72px) - max(8px, env(safe-area-inset-bottom))) !important;
  }
}

@media (min-width: 721px) {
  html body.game-body.game-modal-scroll-locked #game-header,
  html body.game-body.game-modal-scroll-locked > .game-topbar,
  html body.game-body.alliance-modal-open #game-header,
  html body.game-body.alliance-modal-open > .game-topbar {
    z-index: 20050 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body.game-body.game-modal-scroll-locked .game-topbar .game-resource-strip,
  html body.game-body.game-modal-scroll-locked .game-topbar .resource-pill,
  html body.game-body.game-modal-scroll-locked .game-topbar .game-toolbar-button,
  html body.game-body.alliance-modal-open .game-topbar .game-resource-strip,
  html body.game-body.alliance-modal-open .game-topbar .resource-pill,
  html body.game-body.alliance-modal-open .game-topbar .game-toolbar-button {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 720px), (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body.game-modal-scroll-locked .district-popup-shell:not([hidden]) {
    --district-popup-mobile-top-offset: max(22px, calc(env(safe-area-inset-top) + 18px));
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: var(--district-popup-mobile-top-offset) !important;
  }

  html body.game-body.game-modal-scroll-locked .district-popup-shell:not([hidden]) .district-popup-card {
    max-height: calc(
      var(--mobile-locked-vh, 100dvh)
      - var(--district-popup-mobile-top-offset)
      - max(10px, env(safe-area-inset-bottom))
    ) !important;
  }
}

@media (max-width: 720px), (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body.game-modal-scroll-locked:has(.district-popup-shell:not([hidden])) #game-header,
  html body.game-body.game-modal-scroll-locked:has(.district-popup-shell:not([hidden])) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(.district-popup-shell:not([hidden])) .game-resource-strip,
  html body.game-body.game-modal-scroll-locked.is-mobile-topbar-condensed:has(.district-popup-shell:not([hidden])) .game-resource-strip {
    z-index: 20050 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked:has(.district-popup-shell:not([hidden])) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(.district-popup-shell:not([hidden])) .game-topbar * {
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked:has(.district-popup-shell:not([hidden])) .district-popup-shell:not([hidden]) {
    --district-popup-mobile-top-offset: var(--mobile-topbar-offset, 72px);
    --district-popup-mobile-bottom-offset: max(10px, env(safe-area-inset-bottom));
    align-items: flex-start !important;
    justify-content: center !important;
    padding: var(--district-popup-mobile-top-offset) 8px var(--district-popup-mobile-bottom-offset) !important;
  }

  html body.game-body.game-modal-scroll-locked:has(.district-popup-shell:not([hidden])) .district-popup-shell:not([hidden]) .district-popup-card {
    max-height: calc(
      var(--mobile-locked-vh, 100dvh)
      - var(--district-popup-mobile-top-offset, 72px)
      - var(--district-popup-mobile-bottom-offset, max(10px, env(safe-area-inset-bottom)))
    ) !important;
  }

  html body.game-body.game-modal-scroll-locked:has(.district-popup-shell:not([hidden])):has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) #game-header,
  html body.game-body.game-modal-scroll-locked:has(.district-popup-shell:not([hidden])):has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(.district-popup-shell:not([hidden])):has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-resource-strip {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked :is(
    #attack-confirm-modal,
    #raid-confirm-modal,
    #trap-confirm-modal,
    #spy-confirm-modal,
    #occupy-confirm-modal
  ):not(.hidden):not([hidden]),
  html body.game-body.game-modal-scroll-locked :is(
    .attack-setup-popup-shell,
    .robbery-setup-popup-shell
  ):not([hidden]) {
    z-index: 23000 !important;
  }

  html body.game-body.game-modal-scroll-locked :is(
    #attack-confirm-modal,
    #raid-confirm-modal,
    #trap-confirm-modal,
    #spy-confirm-modal,
    #occupy-confirm-modal
  ):not(.hidden):not([hidden]) .district-action-confirm-popup-card,
  html body.game-body.game-modal-scroll-locked :is(
    .attack-setup-popup-shell,
    .robbery-setup-popup-shell
  ):not([hidden]) .attack-setup-popup-card {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Final mobile action confirmation layout: keep topbar visible and start cards below it. */
@media (max-width: 720px), (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden])
  )) #game-header,
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden])
  )) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden])
  )) .game-resource-strip,
  html body.game-body.game-modal-scroll-locked.is-mobile-topbar-condensed:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden])
  )) .game-resource-strip {
    z-index: 20050 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden])
  )) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden])
  )) .game-topbar * {
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked :is(
    #attack-confirm-modal,
    #raid-confirm-modal,
    #trap-confirm-modal,
    #spy-confirm-modal,
    #occupy-confirm-modal
  ):not(.hidden):not([hidden]) {
    --action-confirm-mobile-top-offset: var(--mobile-topbar-offset, 72px);
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100vw !important;
    min-height: var(--mobile-locked-vh, 100svh) !important;
    height: var(--mobile-locked-vh, 100svh) !important;
    padding: var(--action-confirm-mobile-top-offset) 10px max(10px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body.game-body.game-modal-scroll-locked :is(
    #attack-confirm-modal,
    #raid-confirm-modal,
    #trap-confirm-modal,
    #spy-confirm-modal,
    #occupy-confirm-modal
  ):not(.hidden):not([hidden]) .district-action-confirm-popup-card,
  html body.game-body.game-modal-scroll-locked :is(
    #attack-confirm-modal,
    #raid-confirm-modal,
    #trap-confirm-modal,
    #spy-confirm-modal,
    #occupy-confirm-modal
  ):not(.hidden):not([hidden]) .modal__content {
    margin: 0 auto !important;
    max-height: calc(
      var(--mobile-locked-vh, 100dvh)
      - var(--action-confirm-mobile-top-offset, 72px)
      - max(10px, env(safe-area-inset-bottom))
    ) !important;
  }
}

/* Final mobile action modal topbar layer override. */
@media (max-width: 720px), (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) #game-header,
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-resource-strip,
  html body.game-body.game-modal-scroll-locked.is-mobile-topbar-condensed:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-resource-strip {
    z-index: 24050 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-topbar * {
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-topbar .game-resource-strip,
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-topbar .resource-pill,
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-topbar .game-toolbar-button,
  html body.game-body.game-modal-scroll-locked:has(:is(
    #attack-confirm-modal:not(.hidden):not([hidden]),
    #raid-confirm-modal:not(.hidden):not([hidden]),
    #trap-confirm-modal:not(.hidden):not([hidden]),
    #spy-confirm-modal:not(.hidden):not([hidden]),
    #occupy-confirm-modal:not(.hidden):not([hidden]),
    .attack-setup-popup-shell:not([hidden]),
    .robbery-setup-popup-shell:not([hidden])
  )) .game-resource-strip > * {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

/* Final mobile police raid impact topbar visibility guard. */
@media (max-width: 720px), (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  html body.game-body.game-modal-scroll-locked:has(#police-action-result-modal:not(.hidden):not([hidden]) .police-action-result-modal__content.is-owned-district-raid-alert) #game-header,
  html body.game-body.game-modal-scroll-locked:has(#police-action-result-modal:not(.hidden):not([hidden]) .police-action-result-modal__content.is-owned-district-raid-alert) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(#police-action-result-modal:not(.hidden):not([hidden]) .police-action-result-modal__content.is-owned-district-raid-alert) .game-resource-strip,
  html body.game-body.game-modal-scroll-locked.is-mobile-topbar-condensed:has(#police-action-result-modal:not(.hidden):not([hidden]) .police-action-result-modal__content.is-owned-district-raid-alert) .game-resource-strip,
  html body.game-body.game-modal-scroll-locked:has(.police-raid-impact-detail.is-open) #game-header,
  html body.game-body.game-modal-scroll-locked:has(.police-raid-impact-detail.is-open) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(.police-raid-impact-detail.is-open) .game-resource-strip,
  html body.game-body.game-modal-scroll-locked.is-mobile-topbar-condensed:has(.police-raid-impact-detail.is-open) .game-resource-strip {
    z-index: 24050 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked:has(#police-action-result-modal:not(.hidden):not([hidden]) .police-action-result-modal__content.is-owned-district-raid-alert) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(#police-action-result-modal:not(.hidden):not([hidden]) .police-action-result-modal__content.is-owned-district-raid-alert) .game-topbar *,
  html body.game-body.game-modal-scroll-locked:has(.police-raid-impact-detail.is-open) .game-topbar,
  html body.game-body.game-modal-scroll-locked:has(.police-raid-impact-detail.is-open) .game-topbar * {
    pointer-events: none !important;
  }

  html body.game-body.game-modal-scroll-locked:has(#police-action-result-modal:not(.hidden):not([hidden]) .police-action-result-modal__content.is-owned-district-raid-alert) .game-topbar .game-resource-strip,
  html body.game-body.game-modal-scroll-locked:has(#police-action-result-modal:not(.hidden):not([hidden]) .police-action-result-modal__content.is-owned-district-raid-alert) .game-topbar .resource-pill,
  html body.game-body.game-modal-scroll-locked:has(#police-action-result-modal:not(.hidden):not([hidden]) .police-action-result-modal__content.is-owned-district-raid-alert) .game-topbar .game-toolbar-button,
  html body.game-body.game-modal-scroll-locked:has(#police-action-result-modal:not(.hidden):not([hidden]) .police-action-result-modal__content.is-owned-district-raid-alert) .game-resource-strip > *,
  html body.game-body.game-modal-scroll-locked:has(.police-raid-impact-detail.is-open) .game-topbar .game-resource-strip,
  html body.game-body.game-modal-scroll-locked:has(.police-raid-impact-detail.is-open) .game-topbar .resource-pill,
  html body.game-body.game-modal-scroll-locked:has(.police-raid-impact-detail.is-open) .game-topbar .game-toolbar-button,
  html body.game-body.game-modal-scroll-locked:has(.police-raid-impact-detail.is-open) .game-resource-strip > * {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

/* Final loaded action-modal visual guard: atmosphere remains visible and close icons stay intact. */
html body.game-body .attack-setup-popup-card .district-modal-hero__image,
html body.game-body .district-action-confirm-popup-card .district-modal-hero__image {
  display: block !important;
  opacity: 0.92 !important;
  filter: saturate(1.12) brightness(0.86) contrast(1.04) !important;
}

html body.game-body .attack-setup-popup-card .district-modal-hero__scrim,
html body.game-body .district-action-confirm-popup-card .district-modal-hero__scrim {
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--action-glass-accent-rgb, var(--result-accent-rgb, 103, 232, 249)), 0.22), transparent 34%),
    linear-gradient(180deg, rgba(2, 6, 18, 0.02), rgba(2, 6, 18, 0.24) 48%, rgba(2, 6, 18, 0.64)) !important;
}

html body.game-body .attack-setup-popup-card .attack-setup-popup-close,
html body.game-body .district-action-confirm-popup-card .attack-setup-popup-close {
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border: 1px solid rgba(165, 243, 252, 0.64) !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.18), transparent 42%),
    rgba(4, 12, 22, 0.82) !important;
  color: #e0fbff !important;
  font-size: 0 !important;
  transform: none !important;
  isolation: isolate !important;
}

html body.game-body .attack-setup-popup-card .attack-setup-popup-close::before,
html body.game-body .district-action-confirm-popup-card .attack-setup-popup-close::before,
html body.game-body .attack-setup-popup-card .attack-setup-popup-close::after,
html body.game-body .district-action-confirm-popup-card .attack-setup-popup-close::after {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 14px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 0 8px rgba(165, 243, 252, 0.48) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform-origin: center !important;
}

html body.game-body .attack-setup-popup-card .attack-setup-popup-close::before,
html body.game-body .district-action-confirm-popup-card .attack-setup-popup-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

html body.game-body .attack-setup-popup-card .attack-setup-popup-close::after,
html body.game-body .district-action-confirm-popup-card .attack-setup-popup-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Final loaded action-specific neon close guard for confirmation cards. */
html body.game-body .attack-setup-popup-card .attack-setup-popup-close,
html body.game-body .district-action-confirm-popup-card .attack-setup-popup-close {
  --action-close-rgb: var(--result-accent-rgb, var(--district-action-rgb, var(--district-accent-rgb, 103, 232, 249)));
  --action-close-secondary-rgb: var(--result-secondary-rgb, var(--district-secondary-rgb, 207, 250, 254));
  top: 9px !important;
  right: 9px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  border-color: rgba(var(--action-close-rgb), 0.72) !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(var(--action-close-secondary-rgb), 0.34), transparent 38%),
    radial-gradient(circle at 50% 58%, rgba(var(--action-close-rgb), 0.16), transparent 62%),
    rgba(3, 8, 16, 0.74) !important;
  color: rgba(var(--action-close-secondary-rgb), 0.98) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 10px rgba(var(--action-close-rgb), 0.16),
    0 0 10px rgba(var(--action-close-rgb), 0.42),
    0 0 18px rgba(var(--action-close-rgb), 0.18),
    0 5px 12px rgba(2, 6, 23, 0.26) !important;
}

html body.game-body .attack-setup-popup-card .attack-setup-popup-close::before,
html body.game-body .district-action-confirm-popup-card .attack-setup-popup-close::before,
html body.game-body .attack-setup-popup-card .attack-setup-popup-close::after,
html body.game-body .district-action-confirm-popup-card .attack-setup-popup-close::after {
  width: 9px !important;
  height: 1.5px !important;
  box-shadow:
    0 0 5px rgba(var(--action-close-rgb), 0.86),
    0 0 10px rgba(var(--action-close-rgb), 0.34) !important;
}

/* Final loaded transparency guard for robbery result and spy confirmation cards. */
html body.game-body #raid-result-modal .spy-result-modal__content {
  background:
    radial-gradient(circle at 16% 10%, rgba(168, 85, 247, 0.15), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(217, 70, 239, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(25, 14, 43, 0.24), rgba(10, 8, 20, 0.3)),
    rgba(5, 6, 14, 0.2) !important;
  backdrop-filter: blur(24px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
}

html body.game-body #spy-confirm-modal .spy-confirm-popup-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(180, 83, 9, 0.18), rgba(5, 10, 18, 0.3)),
    rgba(5, 10, 18, 0.34) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}