:root {
  --bg-deep: #0b1219;
  --panel: #141f2e;
  --panel-border: #223144;
  --text-primary: #eef2f6;
  --text-muted: #8b98a8;
  --accent: #2dd4bf;
  --accent-dim: #1a3d38;
  --danger: #e6636b;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-deep);
}

#map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg-deep);
}

/* Leaflet controls — сдвигаем ниже топбара, приглушаем стиль под тёмную тему */
.leaflet-control-zoom {
  margin-top: 76px !important;
}
.leaflet-bar a {
  background: var(--panel) !important;
  color: var(--text-primary) !important;
  border-color: var(--panel-border) !important;
}
.leaflet-container {
  font-family: var(--font-body);
}
/* Клик по любой точке карты ищет ближайший дом — курсор-указатель вместо
   стандартной "руки", чтобы это было видно; во время перетаскивания (drag)
   Leaflet сам переключает на grabbing. */
.leaflet-container,
.leaflet-grab {
  cursor: pointer;
}
.leaflet-dragging .leaflet-grab,
.leaflet-container.leaflet-dragging {
  cursor: grabbing;
}

.hidden { display: none !important; }

/* ---------------- Topbar ---------------- */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(to bottom, rgba(11,18,25,0.92), rgba(11,18,25,0));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-right: auto;
}

.city-select, .locale-select {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  border-radius: 10px;
  padding: 8px 10px;
  max-width: 160px;
}
.locale-select { max-width: 70px; }

.balance-pill {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 8px 16px;
}
.balance-label {
  font-size: 12px;
  color: var(--text-muted);
}
.balance-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--accent);
}

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.97); }

.btn-ghost {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text-primary);
}
.btn-ghost:hover { border-color: var(--accent); }

.btn-accent {
  background: var(--accent);
  color: #06231f;
}
.btn-accent:hover { opacity: 0.9; }
.btn-accent:disabled {
  background: var(--panel-border);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ---------------- Legend ---------------- */
.legend {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 500;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  min-width: 168px;
}
.legend-title {
  color: var(--text-muted);
  margin-bottom: 2px;
  font-size: 11px;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legend-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------------- House panel (bottom sheet) ---------------- */
/* Карточка дома — теперь содержимое Leaflet-попапа (см. .ct-popup ниже),
   а не фиксированная панель: своего фона/тени/позиционирования не несёт. */
.house-panel {
  position: relative;
  width: min(320px, calc(100vw - 64px));
  padding: 16px 18px 18px;
}

.panel-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.panel-close:hover { color: var(--text-primary); }

.house-zone-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.house-zone-tag::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--zone-color, var(--accent));
}

.house-address {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 14px;
  padding-right: 20px;
  color: var(--text-primary);
}

.house-stats {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.stat {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-label {
  font-size: 11px;
  color: var(--text-muted);
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.house-owner-line {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.house-action-btn { width: 100%; padding: 12px; font-size: 15px; }

.locked-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--danger);
  line-height: 1.4;
}

/* ---------------- Modal ---------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5,9,13,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  position: relative;
  width: min(340px, calc(100% - 32px));
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 22px 20px 20px;
}
.modal-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 18px;
}
.modal-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.modal-tab.active {
  background: var(--panel-border);
  color: var(--text-primary);
}
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-form input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
}
.modal-form input:focus {
  outline: none;
  border-color: var(--accent);
}
.modal-form input::placeholder { color: var(--text-muted); }
.form-error {
  font-size: 12.5px;
  color: var(--danger);
  min-height: 16px;
}

/* ---------------- Toast ---------------- */
.toast {
  position: absolute;
  left: 50%;
  top: 76px;
  transform: translateX(-50%);
  z-index: 1200;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
}

/* ---------------- Map markers ---------------- */
.house-marker {
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}

/* Купленные дома — иконка домика в цвете зоны */
.owned-house-marker,
.leaflet-div-icon.owned-house-marker {
  background: transparent;
  border: 0;
}
.owned-house-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--zc, var(--accent));
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.owned-house-pin svg { display: block; fill: #0b1219; }
.owned-house-pin.mine {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--accent), 0 2px 7px rgba(0,0,0,0.55);
}
/* Дом с офисом — золотая окантовка поверх обычного стиля/кольца "mine",
   чтобы бизнес-объекты сразу выделялись на карте. */
.owned-house-pin.has-office {
  border-color: #f5c451;
  box-shadow: 0 0 0 2px #f5c451, 0 2px 7px rgba(0,0,0,0.55);
}
.owned-house-pin.has-office.mine {
  box-shadow: 0 0 0 2px #f5c451, 0 0 0 5px var(--accent), 0 2px 7px rgba(0,0,0,0.55);
}

/* ---------------- Stats modal ---------------- */
.modal.modal-wide {
  width: min(720px, calc(100% - 32px));
  max-height: min(80vh, 760px);
  display: flex;
  flex-direction: column;
}
.stats-body {
  overflow-y: auto;
  margin: -2px -4px 0;
  padding: 2px 4px 0;
}

.s-summary {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.s-foot {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 10px;
}
.s-note {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 22px 8px;
}
.s-note.s-error { color: var(--danger); }

.s-tablewrap { overflow-x: auto; }
.s-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.s-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11.5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}
.s-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
}
.s-table td:first-child, .s-table th:first-child { padding-left: 4px; }
.s-num { text-align: right; font-variant-numeric: tabular-nums; }
.s-rank { width: 28px; color: var(--text-muted); text-align: right; }
.s-accent { color: var(--accent); }

.s-row { cursor: pointer; transition: background 0.12s ease; }
.s-row:hover { background: rgba(255,255,255,0.04); }
.s-row.s-me { background: var(--accent-dim); }
.s-tag {
  font-size: 10.5px;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  padding: 1px 5px;
  margin-left: 4px;
}

.s-zone { display: inline-flex; align-items: center; gap: 6px; }
.s-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.s-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.s-metric {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.s-metric span { font-size: 10.5px; color: var(--text-muted); }
.s-metric b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.s-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.s-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.s-chip b { color: var(--text-primary); }

.s-bonus {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.s-bonus-mult {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0;
}
.s-bonus-title { display: block; font-size: 13px; font-weight: 600; }
.s-bonus-hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.s-pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.s-pending-empty {
  background: rgba(255,255,255,0.03);
  border-color: var(--panel-border);
  color: var(--text-muted);
  font-size: 12.5px;
  justify-content: center;
}
.s-pending-title { font-size: 13px; font-weight: 600; }
.s-pending-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.s-pending-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.s-pending-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.s-pending .btn-accent { padding: 8px 14px; }

.s-back {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  padding: 0 0 10px;
}
.s-back:hover { color: var(--text-primary); }
.s-player-head { margin-bottom: 12px; }
.s-player-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}
.s-player-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 560px) {
  .s-metrics { grid-template-columns: repeat(2, 1fr); }
  .s-pending { flex-direction: column; align-items: stretch; }
  .s-pending-right { justify-content: space-between; }
}

@media (max-width: 480px) {
  .brand { font-size: 16px; }
  .legend { min-width: 140px; padding: 10px 12px; }
  .topbar { flex-wrap: wrap; gap: 8px; }
}

.s-locate {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-align: left;
  cursor: pointer;
}
.s-locate:hover { text-decoration: underline; }
.s-locate span { opacity: 0.7; font-size: 0.9em; }

/* ---------------- Auction (house card + modal) ---------------- */
.house-auction {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ha-status {
  font-size: 12.5px;
  color: var(--text-muted);
}
.ha-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
}
.ha-row b {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.ha-time { font-variant-numeric: tabular-nums; }
.ha-lead {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  text-align: center;
  font-weight: 600;
}
.ha-bid {
  display: flex;
  gap: 8px;
}
.ha-bid input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
}
.ha-bid input:focus { outline: none; border-color: var(--accent); }
.ha-bid .btn-accent { flex-shrink: 0; }
.ha-hint { font-size: 11px; color: var(--text-muted); }
.ha-btn { width: 100%; padding: 11px; }

.ha-toggle {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
}
.ha-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ha-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.ha-form input, .ha-form select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
}
.ha-form input:focus, .ha-form select:focus { outline: none; border-color: var(--accent); }

.s-subhead {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 6px;
}
.s-subhead:first-child { margin-top: 0; }
.s-muted { color: var(--text-muted); }

.s-chip-good {
  background: rgba(45, 212, 191, 0.10);
  border-color: var(--accent-dim);
  color: var(--text-primary);
}

/* Знаковые объекты (лендмарки) */
.landmark-marker, .leaflet-div-icon.landmark-marker { background: transparent; border: 0; }
.landmark-pin {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #f5c451;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.landmark-pin svg { display: block; fill: #3a2c07; }
.landmark-pin.mine { box-shadow: 0 0 0 3px var(--accent), 0 2px 8px rgba(0,0,0,0.55); }
.landmark-pin.on-auction { border-color: var(--danger); }

.s-season-head { margin-bottom: 12px; }
.s-season-num { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.s-season-left {
  margin-left: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}
.s-season-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

@keyframes daily-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(45,212,191,0.5); }
  50%     { box-shadow: 0 0 0 6px rgba(45,212,191,0); }
}
.btn.daily-ready {
  border-color: var(--accent);
  color: var(--accent);
  animation: daily-glow 1.6s ease-in-out infinite;
}

/* ---------------- Activity feed ---------------- */
.activity {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  width: min(320px, calc(100vw - 36px));
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  padding: 10px 12px;
  cursor: pointer;
}
.activity-caret { color: var(--text-muted); transition: transform 0.15s ease; }
.activity.collapsed .activity-caret { transform: rotate(-90deg); }
.activity.collapsed .activity-list { display: none; }
.activity-list {
  max-height: 40vh;
  overflow-y: auto;
  border-top: 1px solid var(--panel-border);
}
.activity-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.activity-row.locatable { cursor: pointer; }
.activity-row.locatable:hover { background: rgba(255,255,255,0.04); }
.activity-text { color: var(--text-primary); }
.activity-time { color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.activity-empty { padding: 14px 12px; color: var(--text-muted); font-size: 12px; text-align: center; }

@media (max-width: 560px) {
  .activity { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
  .legend { display: none; }
}

/* Кластеры городов на низком зуме */
.city-cluster-marker { background: transparent; border: 0; }
.city-cluster {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.55);
  cursor: pointer;
  line-height: 1.25;
}
.city-cluster b { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--text-primary); }
.city-cluster i { font-style: normal; font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.city-cluster:hover { border-color: var(--text-primary); }

.s-loans { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.s-danger { color: var(--danger); }

.s-kick, .s-join {
  background: none; border: 1px solid var(--panel-border); border-radius: 6px;
  color: var(--text-muted); font: inherit; font-size: 11px; padding: 2px 7px; cursor: pointer;
}
.s-join { color: var(--accent); border-color: var(--accent-dim); }
.s-kick:hover, .s-join:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* ---------------- Cosmetics ---------------- */
.cos-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cos-item {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 6px 9px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
}
.cos-item.equipped { border-color: var(--accent); }
.cos-item.locked { opacity: 0.85; }
.cos-item i { font-style: normal; font-variant-numeric: tabular-nums; }
.cos-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); }
.cos-mk { width: 16px; height: 16px; display: inline-block; background: var(--accent); }
.cos-mk-house { border-radius: 50%; }
.cos-mk-dot { border-radius: 50%; transform: scale(0.6); }
.cos-mk-pin { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.cos-mk-diamond { transform: rotate(45deg) scale(0.85); }
.cos-mk-ring { border-radius: 50%; background: transparent; border: 3px solid var(--accent); }

/* Стили маркера своих домов на карте */
.owned-house-pin.style-dot { width: 14px; height: 14px; }
.owned-house-pin.style-dot svg { display: none; }
.owned-house-pin.style-pin { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.owned-house-pin.style-pin svg { transform: rotate(45deg); }
.owned-house-pin.style-diamond { border-radius: 3px; transform: rotate(45deg); }
.owned-house-pin.style-diamond svg { transform: rotate(-45deg); }
.owned-house-pin.style-ring { background: transparent; border-width: 4px; }
.owned-house-pin.style-ring svg { display: none; }

.btn.push-on { border-color: var(--accent); }

/* ---------------- Hourly event pill ---------------- */
.event-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  max-width: 260px;
}
.event-icon { flex-shrink: 0; }
.event-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.event-timer {
  flex-shrink: 0;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.event-pill.event-claimed {
  opacity: 0.6;
}
.event-pill.event-claimed .event-timer { color: var(--text-muted); }
.event-pill:not(.event-claimed) { border-color: var(--accent-dim); animation: daily-glow 2.4s ease-in-out infinite; }

@media (max-width: 700px) {
  .event-pill { display: none; }
}

/* ---------------- Карточка дома как Leaflet-попап (2GIS-style) ---------------- */
.leaflet-popup.ct-popup .leaflet-popup-content-wrapper {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  padding: 0;
  /* Leaflet по умолчанию красит текст попапа в #333 (расчёт на светлый фон) —
     на тёмной теме это давало почти нечитаемые адрес/значения статов, у
     которых нет своего color. Задаём светлый цвет на обёртке — наследуется
     всем, что не переопределяет его само (метки — var(--text-muted)). */
  color: var(--text-primary);
}
.leaflet-popup.ct-popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
  max-height: min(70vh, 640px);
  overflow-y: auto;
}
.leaflet-popup.ct-popup .leaflet-popup-tip-container { width: 24px; height: 12px; }
.leaflet-popup.ct-popup .leaflet-popup-tip {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: none;
}