/* ==========================================================================
   🗺️ ŞEHİR — 2D HARİTA (lazy: cityCampus.js ilk 2D açılışta yükler; ana CSS bütçesine girmez)
   Pencere kuralı (AGENTS.md §4.2): harita .city-stage içinde absolute; kendi içinde kayar, pencere kaymaz.
   ========================================================================== */
.city-map2d {
  /* the scroll area starts below the floating header row (campus HUD, tabs, daily production), so scrolled
     cards never slide under it */
  top: 118px;
  padding: 6px clamp(14px, 2.5%, 40px) clamp(14px, 2.5%, 30px);
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  grid-template-rows: repeat(3, minmax(150px, 1fr));
  gap: 26px;
  overflow: auto;
  /* asfalt + şerit çizgileri: kartların arasındaki boşluklar yol gibi görünür */
  background:
    radial-gradient(ellipse at 50% 40%, rgba(56, 189, 248, 0.08), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.05) 22px 34px),
    #2b3645;
}
.city-panel-open .city-map2d {
  padding-right: calc(clamp(260px, 30%, 440px) + 30px);
}

.city-map-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border-radius: 20px;
  border: 3px solid #cbd5e1; /* kaldırım */
  background: linear-gradient(170deg, #86efac 0%, #22c55e 55%, #15803d 100%);
  color: #f8fafc;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.city-map-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}
.city-map-card.is-stadium {
  background: linear-gradient(170deg, #93c5fd 0%, #3b82f6 50%, #1e3a8a 100%);
}
.city-map-card.is-selected {
  border-color: #fbbf24;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.35), 0 16px 32px rgba(0, 0, 0, 0.45);
}
.city-map-card.is-building {
  border-color: #f59e0b;
}

/* binanın o anki görünümü (Blender render'ı, seviyeye göre değişir) */
.city-map-art {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 12px 4px;
}
.city-map-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
  transition: transform 0.2s ease;
}
.city-map-card:hover .city-map-art img {
  transform: scale(1.05);
}

.city-map-level {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0369a1, #0ea5e9);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.city-map-tier {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 3px;
}
.city-map-tier i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.city-map-tier i.on {
  background: #fbbf24;
}

.city-map-info {
  padding: 10px 14px 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.92));
}
.city-map-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
}
.city-map-icon {
  font-size: 22px;
}
.city-map-sub {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: #94a3b8;
}
.city-map-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 800;
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}
.city-map-status.is-build {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}
.city-map-status.is-lock {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
}
.city-map-status.is-max {
  background: rgba(251, 191, 36, 0.2);
  color: #fde68a;
}
.city-map-info .city-build-bar {
  margin-top: 8px;
  height: 6px;
}
/* inşaat şeridi: kartın üstünde çapraz sarı-siyah bant */
.city-map-card.is-building::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: repeating-linear-gradient(45deg, #fbbf24 0 12px, #1f2937 12px 24px);
}

@container game (max-width: 900px) {
  .city-map2d { top: 134px; padding-top: 6px; gap: 12px; grid-template-rows: repeat(3, minmax(120px, 1fr)); }
  .city-map-art { padding-top: 30px; }
  .city-map-sub { display: none; }
}