:root {
  --flox: #39ff8f;
  --flox-dim: #1f8f55;
  --obsidian: #0a0c0f;
  --obsidian-panel: rgba(18, 21, 26, 0.62);
  --obsidian-border: rgba(57, 255, 143, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.font-display {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  letter-spacing: 0.03em;
}

/* Tam ekran Myth-Tech arka planı: bg-image.jpg kullanıcı tarafından eklenecek;
   dosya yoksa aşağıdaki koyu radyal gradyan zaten kabul edilebilir bir sahne sunar. */
.bg-scene {
  position: relative;
  background-color: var(--obsidian);
  background-image:
    radial-gradient(ellipse at top, rgba(57, 255, 143, 0.08), transparent 60%),
    radial-gradient(circle at 15% 85%, rgba(57, 255, 143, 0.05), transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(56, 189, 248, 0.04), transparent 40%),
    linear-gradient(rgba(6, 8, 10, 0.78), rgba(6, 8, 10, 0.94)),
    url('bg-image.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Yıldız alanı + sürüklenen nebula: bg-image.jpg olmadığında bile sahnenin "boş
   siyah" görünmemesi için tamamen CSS ile üretilmiş derinlik katmanı. Dosya
   gerektirmez; gerçek bir arka plan görseli eklenirse onun üstünde kalır. */
.bg-scene::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 68% 14%, rgba(180, 255, 220, 0.5), transparent),
    radial-gradient(1px 1px at 34% 68%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 87% 62%, rgba(160, 220, 255, 0.45), transparent),
    radial-gradient(1px 1px at 52% 42%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 22% 88%, rgba(200, 255, 230, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 78% 34%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 44% 8%, rgba(255, 255, 255, 0.3), transparent);
  background-size: 100% 100%;
  animation: star-drift 140s linear infinite;
  opacity: 0.75;
}

.bg-scene::after {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(57, 255, 143, 0.055), transparent 70%),
    radial-gradient(ellipse 50% 45% at 78% 70%, rgba(120, 90, 255, 0.05), transparent 70%);
  animation: nebula-drift 90s ease-in-out infinite alternate;
}

/* Sahne katmanları z-index 0'da; tüm gerçek içerik onların üstünde kalmalı. */
.bg-scene > * {
  position: relative;
  z-index: 1;
}

@keyframes star-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-40px, -60px, 0); }
}

@keyframes nebula-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(40px, -30px, 0) scale(1.12); }
}

.glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--obsidian-panel);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid var(--obsidian-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 26px rgba(0, 0, 0, 0.32);
}

/* Tailwind CDN (app.html) "flex-1" class'ını runtime'da JIT üretiyor ama
   dinamik olarak innerHTML ile eklenen satırlarda (admin paneli gibi) bazen
   zamanlama sorunu yüzünden hiç uygulanmıyor — burada statik olarak da
   tanımlayınca Tailwind'in JIT'ine bağımlı kalmadan garanti çalışır. */
.flex-1 {
  flex: 1 1 0%;
  min-width: 0;
}

/* Admin kaynak bağışı satırı: select doğal genişliğiyle (en uzun seçenek
   metnine göre) çok yer kaplayıp miktar kutusunu neredeyse sıfıra
   düşürüyordu. Miktar kutusuna garanti bir minimum genişlik + satırın
   dar ekranlarda alt satıra sarabilmesini veriyoruz. */
#admin-grant-amount-input {
  min-width: 90px;
}

/* Rapor listeleri (Savaş/İstihbarat/Suikast/Olay) backend'de zaten 50 kayıtla
   sınırlı ama hiçbir yükseklik sınırı olmadan sayfayı aşağı doğru sonsuz
   uzatıyordu — sabit yükseklik + kendi scroll'u ile bu düzeltiliyor. */
.report-scroll-list {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.field {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--obsidian-border);
  border-radius: 0.6rem;
  padding: 0.65rem 0.9rem;
  color: #f1f5f9;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field::placeholder {
  color: #64748b;
}

.field:focus {
  border-color: var(--flox);
  box-shadow: 0 0 0 3px rgba(57, 255, 143, 0.15);
}

.btn-flox {
  background: linear-gradient(180deg, var(--flox), var(--flox-dim));
  color: #052014;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: 0.6rem;
  padding: 0.65rem 1rem;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
  box-shadow: 0 0 18px rgba(57, 255, 143, 0.45);
}

.btn-flox:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(57, 255, 143, 0.6);
}

.btn-flox:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: 0 0 12px rgba(57, 255, 143, 0.5);
}

.btn-flox:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-danger {
  background: linear-gradient(180deg, #ff6b6b, #b91c1c);
  color: #fff5f5;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: 0.6rem;
  padding: 0.65rem 1rem;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.4);
}

.btn-danger:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(239, 68, 68, 0.55);
}

.btn-danger:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

.btn-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-gather {
  background: linear-gradient(180deg, #fbbf24, #b45309);
  color: #1a1103;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: 0.6rem;
  padding: 0.65rem 1rem;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.4);
}

.btn-gather:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(251, 191, 36, 0.55);
}

.btn-gather:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
}

.btn-gather:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-scout {
  background: linear-gradient(180deg, #38bdf8, #0369a1);
  color: #052014;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: 0.6rem;
  padding: 0.65rem 1rem;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.4);
}

.btn-scout:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(56, 189, 248, 0.55);
}

.btn-scout:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.btn-scout:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: rgba(148, 163, 184, 0.14);
  color: #e2e8f0;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: 0.6rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  transition: transform 0.12s, background 0.12s, opacity 0.12s;
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.24);
  transform: translateY(-1px);
}

.btn-secondary:active:not(:disabled) {
  transform: scale(0.96);
}

.btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Sefer Duruşu (Faz 42) — dispatch panelindeki duruş seçici */
.stance-btn {
  flex: 1;
  padding: 0.5rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.4);
  color: #94a3b8;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.stance-btn.active {
  background: rgba(57, 255, 143, 0.16);
  border-color: rgba(57, 255, 143, 0.55);
  color: var(--flox);
}

/* Sunucu Geneli Dünya Olayları (Faz 42) — üst çubuğun hemen altında bir banner */
.world-event-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(90deg, rgba(57, 255, 143, 0.14), rgba(56, 189, 248, 0.1));
  border-bottom: 1px solid rgba(57, 255, 143, 0.25);
  font-size: 0.82rem;
}

.world-event-banner-icon {
  font-size: 1rem;
}

.world-event-banner-text {
  color: #e2e8f0;
  flex: 1;
  min-width: 0;
}

.world-event-banner-timer {
  color: var(--flox);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hero Halefiyeti (Faz 42) — Kışla sekmesinde durum bandı */
.hero-succession-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
  border-radius: 0.6rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 0.85rem;
  color: #fca5a5;
}

.hero-succession-banner-ready {
  background: rgba(57, 255, 143, 0.1);
  border-color: rgba(57, 255, 143, 0.3);
  color: var(--flox);
}

.map-cell-trader {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.32), rgba(251, 191, 36, 0.06));
  border-color: rgba(251, 191, 36, 0.55);
  animation: map-cell-caravan-pulse 2s ease-in-out infinite;
}

.auth-tab-btn {
  color: #94a3b8;
  background: transparent;
  transition: color 0.15s, background 0.15s;
}

.auth-tab-btn.active {
  color: #052014;
  background: var(--flox);
  font-weight: 600;
}

.tab-btn {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  border-radius: 0.5rem;
  color: #94a3b8;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}

.tab-btn:hover {
  color: #e2e8f0;
}

.tab-btn.active {
  color: var(--flox);
  background: rgba(57, 255, 143, 0.08);
  box-shadow: inset 0 0 0 1px rgba(57, 255, 143, 0.3);
}

.tab-btn.tab-locked {
  color: #52525b;
  cursor: not-allowed;
}

.tab-btn.tab-locked::after {
  content: ' 🔒';
  font-size: 0.7em;
}

.resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--obsidian-border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.resource-pill:hover {
  border-color: rgba(57, 255, 143, 0.4);
  box-shadow: 0 0 12px rgba(57, 255, 143, 0.15);
}

.resource-pill,
.core-dominance-pill {
  flex-shrink: 0;
}

/* Topbar rozetleri masaüstünde satıra sarabilir ama dar ekranda tek satırda
   yatay kaydırmalı şerit olur — aksi halde 8 rozet birden 3-4 satıra sarıp
   her sekmede içerikten önce yüzlerce piksel boşluk yaratıyordu. */
.topbar-pills-scroll {
  scrollbar-width: none;
}

.topbar-pills-scroll::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  .topbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    /* Güvenlik ağı: içerik hâlâ sığmazsa üst üste binmek yerine ikinci
       satıra düzgünce sarsın (kullanıcı geri bildirimi: "menüyü ikiye
       bölmüş gibi, çok kötü duruyor" — o zamanki sorun budur). */
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }

  .resource-pill {
    font-size: 0.75rem;
    padding: 0.28rem 0.6rem;
  }

  /* Kaynak rozetleri (şehir/asker/materyal/enerji/nüfus/bilim/FLOX) 640px
     altında Tailwind'in "sm:flex-wrap" eşiğine hiç girmediği için tek
     satırda sıkışıp yatay kaydırmaya (overflow-x) mecbur kalıyordu —
     kullanıcı: "kaç enerjim var kaç nüfusum var kaç askerim var
     göremiyorum... yana kaydırmak falan çok kötü". Gerçek dar telefon
     genişliğinde de aynı sarma davranışını zorla, kaydırma yerine 2-3
     satıra bölünsün ki hepsi tek bakışta görünsün. */
  .topbar-pills-scroll {
    flex-wrap: wrap !important;
    overflow-x: visible;
    row-gap: 0.35rem;
  }

  /* "Çıkış" butonu ☰ menüsündeki "🚪 Çıkış Yap" ile birebir aynı işi
     yapıyor — mobilde topbar'da ayrıca yer kaplamasın. */
  #logout-btn {
    display: none;
  }

  /* Kalkan rozeti mobilde TAMAMEN gizli — sadece ikon bırakmak bile asıl
     görülmesi gereken kaynak rozetlerinden (enerji/nüfus/asker) yer
     çalıyordu. Kullanıcı: "kalkan aktif - çıkışı kaldırabiliriz çünkü asıl
     görmem gereken şeyleri göremiyorum". Şehir sekmesinde zaten kalkan
     durumu ayrıca gösteriliyor, burada tekrar etmesine gerek yok. */
  #shield-badge {
    display: none;
  }
}

/* Ambar tavanına ulaşmış kaynak — kırmızımsı kenarlıkla "artık taşıyor" uyarısı,
   detay title="" tooltip'inde (mevcut/tavan). */
.resource-pill-full {
  border-color: rgba(248, 113, 113, 0.55);
  color: #f87171;
}

/* Asker eğitimi artık birim-birim tamamlandığı için gerçek bir ilerleme çubuğu
   var — tek büyük "X dakika sonra hepsi biter" beklemesi yerine. */
.unit-training-progress {
  width: 100%;
  height: 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.unit-training-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--flox-dim), var(--flox));
  transition: width 0.4s ease;
}

.leader-rail {
  width: 220px;
  background: #05070a;
}

.civ-card {
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.75rem;
  padding: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.civ-card:hover {
  transform: translateY(-2px);
}

.civ-card.selected {
  border-color: var(--flox);
  box-shadow: 0 0 18px rgba(57, 255, 143, 0.35);
}

.building-row, .garrison-card, .stat-card {
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.6rem;
  padding: 0.6rem 0.8rem;
}

/* Şehir Durumu kartı daha kompakt olmalı (kullanıcı isteği) — diğer .stat-card
   kullanımlarını (kalkan kademeleri, mağza vb.) etkilememesi için kapsamlı. */
#city-summary.stat-card,
#city-summary .stat-card {
  padding: 0.4rem 0.55rem;
  font-size: 0.85em;
}

.toast {
  min-width: 220px;
  max-width: 320px;
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  backdrop-filter: blur(10px);
  animation: toast-in 0.2s ease-out;
}

.toast-error {
  background: rgba(127, 29, 29, 0.75);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fecaca;
}

.toast-success {
  background: rgba(6, 78, 59, 0.75);
  border: 1px solid rgba(57, 255, 143, 0.4);
  color: #d1fae5;
}

.toast-quest {
  background: rgba(120, 53, 15, 0.8);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fef3c7;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.25);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(57, 255, 143, 0.25);
  border-radius: 999px;
}

/* Bir kart içinde aktif bir geri sayım (inşaat/eğitim) sürüyorken kenarlık
   nabız gibi parlar — "Myth-Tech" canlılık hissi. Jenerik: entity-card + eski
   garrison-card/stat-card gibi tüm kart türleri paylaşır. */
.is-counting {
  animation: card-pulse-glow 1.8s ease-in-out infinite;
}

@keyframes card-pulse-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(57, 255, 143, 0.25); border-color: rgba(57, 255, 143, 0.25); }
  50% { box-shadow: 0 0 22px rgba(57, 255, 143, 0.55); border-color: rgba(57, 255, 143, 0.6); }
}

.requirement-warning {
  color: #f87171;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ==========================================================================
   2D Harita Izgarası
   ========================================================================== */

.map-pan-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--flox);
  border-radius: 0.5rem;
  font-size: 0.8rem;
  transition: background 0.15s, transform 0.1s;
}

.map-pan-btn:hover {
  background: rgba(57, 255, 143, 0.12);
}

.map-pan-btn:active {
  transform: scale(0.9);
}

/* Faz 31 — kompakt D-pad + koordinata git formu, eski dört köşeye dağılmış
   büyük ok butonlarının yerini alır. */
.map-controls-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.map-dpad {
  display: grid;
  grid-template-columns: repeat(3, 2rem);
  grid-template-rows: repeat(3, 2rem);
  gap: 2px;
}

.map-dpad-up { grid-column: 2; grid-row: 1; }
.map-dpad-left { grid-column: 1; grid-row: 2; }
.map-dpad-center { grid-column: 2; grid-row: 2; font-size: 0.95rem; }
.map-dpad-right { grid-column: 3; grid-row: 2; }
.map-dpad-down { grid-column: 2; grid-row: 3; }

.map-goto-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.map-goto-input {
  width: 4.2rem;
  padding: 0.35rem 0.5rem;
  text-align: center;
  font-size: 0.8rem;
}

.map-zoom-controls {
  display: flex;
  gap: 0.35rem;
}

#map-lines {
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.1s ease;
  /* Kullanıcı geri bildirimi: "saldırıya giden birimler gözükmüyor" — kök neden
     bulundu: #map-lines DOM'da #map-grid'den ÖNCE geliyor, ikisi de konumlanmış
     (positioned) eleman ve z-index:auto — CSS'te konumlanmış kardeşler z-index eşit
     olduğunda DOM SIRASINA göre boyanır, yani #map-grid (ve özellikle şehrin kendi
     ikonu) sefer çizgisinin/işaretçisinin ÜSTÜNE biniyordu, işaretçi görünmez oluyordu.
     Artık açık bir z-index ile çizgi katmanı ızgaranın üstünde (position zaten
     app.html'deki .absolute sınıfından geliyor, burada TEKRAR set edilmiyor —
     ID özgüllüğü .absolute'ü ezip inset-0 konumlandırmasını bozardı). */
  z-index: 5;
}

/* Mobil yakınlaştırma düzeltmesi: sarmalayıcı artık gerçek bir `width` alabiliyor
   (bkz. applyMapZoom()), bu da dar bir telefon ekranında konteynerden TAŞABİLİR —
   bu dış katman o taşmayı yatay kaydırmaya (native scroll) çeviriyor. Yakınlaştırma
   viewport'tan küçük/eşitken hiçbir görsel etkisi yok (scrollbar/davranış farkı
   olmaz), sadece gerçekten taştığında devreye giriyor. */
.map-grid-scroll {
  overflow-x: auto;
  /* Faz 52: harita 17x17 kare bir ızgara olduğundan yakınlaştırıldığında
     dikeyde de yatay kadar taşıyor — overflow-y:hidden bunu görmezden gelip
     dokunmatik dikey kaydırmayı engelliyordu (yalnızca yatay native scroll
     çalışıyordu). JS sürükleme (bindMapDragToPan) dokunmatikte KASITLI olarak
     devre dışı (bkz. Faz 45 notu, #map-grid-wrapper) — o karara dokunmuyoruz,
     bunun yerine native scroll'u iki eksene de açıyoruz. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Harita tam ekran modu: Fullscreen API #map-panel-card'ı ekrana sabitliyor
   (tarayıcı bunu otomatik yapar, siyah bir arka plan üzerine), biz sadece
   içeriği dikeyde yayıp #map-grid-scroll'a kalan tüm boşluğu veriyoruz ki
   yakınlaştırma gerçekten işe yarasın. */
#map-panel-card:fullscreen,
#map-panel-card:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 1rem;
  overflow: hidden;
}

#map-panel-card:fullscreen .map-controls-bar,
#map-panel-card:-webkit-full-screen .map-controls-bar {
  flex-shrink: 0;
}

#map-panel-card:fullscreen #map-grid-scroll,
#map-panel-card:-webkit-full-screen #map-grid-scroll {
  flex: 1;
  /* Faz 52 düzeltmesi: align-items/justify-content:center + overflow:auto,
     çoğu tarayıcıda taşan içeriğin BAŞLANGIÇ kenarına (üst/sol) kaydırmayı
     imkansız kılan bilinen bir flexbox hatası — kullanıcının "tam ekranda
     sağa sola gitmiyor" şikayetinin kök nedeni muhtemelen buydu. Ortalamayı
     artık ebeveyn değil, tek flex öğesi (#map-grid-wrapper) margin:auto ile
     yapıyor — küçükken ortalar, taştığında taşan HER yöne kaydırmaya izin verir. */
  display: flex;
  overflow: auto;
}

#map-panel-card:fullscreen #map-grid-scroll #map-grid-wrapper,
#map-panel-card:-webkit-full-screen #map-grid-scroll #map-grid-wrapper {
  margin: auto;
}

#map-panel-card:fullscreen p,
#map-panel-card:-webkit-full-screen p {
  flex-shrink: 0;
}

#map-grid-wrapper {
  cursor: grab;
  /* Faz 45 düzeltmesi: 'none' sayfayı bu bölgede kaydırmaya çalışan her dokunuşu
     JS sürükleme mantığına kaçırıyordu ("harita kendi kendine hareket ediyor"
     şikayeti buradan geliyordu) — 'pan-y' tarayıcının dikey sayfa kaydırmasını
     kendi haline bırakır, yalnızca yatay/genel jestler JS'e kalır. Bu artık SADECE
     fare için geçerli: dokunmatikte bindMapDragToPan() artık sürüklemeyi hiç
     başlatmıyor (bkz. pointerType kontrolü), böylece dokunmatik yatay kaydırmayı
     üstteki .map-grid-scroll'a (native scroll, yakınlaştırıldığında gerekli)
     bırakabiliriz — 'pan-x pan-y' bunu tarayıcıya devreder. */
  touch-action: pan-x pan-y;
  user-select: none;
}

#map-grid-wrapper.map-grid-dragging {
  cursor: grabbing;
}

#map-grid-wrapper.map-grid-dragging #map-lines {
  opacity: 0;
}

/* Harita artık ayrı ayrı boyalı kareler değil, TEK sürekli bir zemin dokusu
   (bu container'ın kendi arka planı) — hücreler yalnızca üstüne çizilmiş ince
   bir ızgara çizgisi. gap:0 ve kare köşeler dikişleri gizliyor. */
/* Kullanıcı: "haritada zemin çok kötü, tonlar birbirine çok yakın" — önceki
   0.28 opaklıklı düz siyah katman land.png dokusunu neredeyse tamamen
   boğuyordu (şehir sahnesindeki aynı sorunun harita karşılığı). Katman
   0.12'ye indirildi ki doku gerçekten görünsün; ayrıca şehir sahnesindeki
   güneş parıltısıyla aynı sıcak tonda çok hafif bir köşe vinyeti eklendi —
   iki sahne artık aynı ışık kaynağını paylaşıyormuş hissi veriyor. */
#map-grid {
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  gap: 0;
  position: relative;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(251, 191, 36, 0.07), transparent 55%),
    linear-gradient(rgba(8, 10, 6, 0.12), rgba(8, 10, 6, 0.12)),
    url('assets/ground/land.png');
  background-size: auto, auto, 220px 220px;
  background-repeat: no-repeat, repeat, repeat;
  border-radius: 0.5rem;
  overflow: hidden;
}

.map-cell {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}

/* Kara: içerik taşımayan boş kareler bile hafif bir toprak dokusu alır — Faz 35,
   harita artık Şehir Görünümü'yle aynı Myth-Tech dilini konuşuyor (düz, dokusuz
   gri kare yerine). */
.map-cell-land {
  /* Kendi dokusu yok — #map-grid'in sürekli zemini altından görünüyor,
     hücre yalnızca ince bir ızgara çizgisi ekliyor. --land-shade her hücreye
     renderMapGrid()'te hash ile verilen ~0.94-1.06 arası hafif bir parlaklık
     farkı — düz tek dokunun "kare kare aynı" hissini kırıyor, göze batmadan
     bir hafif derinlik ipucu (kullanıcı isteği: "daha gerçekçi"). */
  background: transparent;
  border-color: rgba(120, 100, 70, 0.14);
  filter: brightness(var(--land-shade, 1));
}

/* Deniz: içerik taşımayan boş hücreler bile bu dokuyu alır (bilinen kara sınırının
   ötesi) — mevcut kamp/köy/kervan gibi yalnızca "içerik olan" hücrelerde değil,
   TÜM boş karelerde görünen ilk harita dokusu (bkz. TerrainService::gridForViewport).
   Dalga hissi için ince, tekrarlayan bir çizgi deseni radyal tona eklenir. */
.map-cell-sea {
  /* Eskiden background-position hep 0,0 idi — 140px'lik dokunun HER hücrede
     aynı köşesi görünüyordu (kullanıcı: "her kare aynı img hissiyatı").
     --sea-bg-pos artık renderMapGrid()'te dünya koordinatından bir hash ile
     hücre başına ayarlanıyor; aynı doku farklı köşelerden göründüğü için
     "damgalanmış" hissi kırılıyor, zoom seviyesinden bağımsız çalışır. */
  background:
    linear-gradient(rgba(8, 14, 20, 0.15), rgba(8, 14, 20, 0.15)),
    url('assets/ground/sea.png');
  background-size: auto, 140px 140px;
  background-position: 0 0, var(--sea-bg-pos, 0% 0%);
  border-color: rgba(56, 130, 246, 0.3);
}

.map-cell:hover {
  background: rgba(57, 255, 143, 0.14);
  border-color: rgba(57, 255, 143, 0.45);
}

.map-cell:active {
  transform: scale(0.92);
}

.map-cell-icon {
  position: relative;
  font-size: 1.15rem;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.map-cell-icon-img {
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.map-cell-icon-fallback {
  display: none;
}

.map-cell-shield-badge {
  position: absolute;
  bottom: -3px;
  right: -6px;
  font-size: 0.5rem;
}

.map-cell-self {
  background: radial-gradient(circle, rgba(57, 255, 143, 0.4), rgba(57, 255, 143, 0.06));
  border-color: var(--flox);
  cursor: default;
}

.map-cell-self:active {
  transform: none;
}

.map-cell-selected {
  border-color: var(--flox);
  box-shadow: inset 0 0 0 2px var(--flox);
}

.map-cell-under-attack {
  animation: map-cell-alarm 1.2s ease-in-out infinite;
}

@keyframes map-cell-alarm {
  0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
  50% { box-shadow: 0 0 18px rgba(239, 68, 68, 0.95); }
}

/* Harita artık gerçek bir siyasi harita gibi okunuyor: her şehir kendi seçtiği
   banner rengiyle boyanıyor (Faz 19 banner_color, --city-banner custom property
   olarak satır içi geçiliyor — bkz. app.js renderMapGrid ve banner picker'daki
   aynı --swatch-color deseni). */
.map-cell-banner-city {
  background: radial-gradient(circle, color-mix(in srgb, var(--city-banner) 32%, transparent), color-mix(in srgb, var(--city-banner) 5%, transparent));
  border-color: color-mix(in srgb, var(--city-banner) 55%, transparent);
}

/* İttifak halkası: bireysel banner rengi zaten "kimin şehri" diyor, bu halka
   ayrıca "bu ittifakınızın bir parçası" diyor — ikisi üst üste biner. */
.map-cell-ally-ring {
  box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.8), 0 0 8px rgba(56, 189, 248, 0.4);
}

.map-cell-camp {
  background: radial-gradient(circle, rgba(234, 179, 8, 0.28), rgba(234, 179, 8, 0.05));
  border-color: rgba(234, 179, 8, 0.5);
  position: relative;
}

/* Kamp "izliyor" parıltısı — köşede ufak, seyrek yanıp sönen bir göz kırpması.
   --idle-delay her hücreye özgü (artHash), böylece TÜM kamplar aynı anda
   yanıp sönmüyor (bkz. şehirdeki aynı sorun/çözüm). */
.map-cell-camp::after {
  content: '';
  position: absolute;
  top: 14%;
  right: 18%;
  width: 12%;
  height: 12%;
  border-radius: 50%;
  background: rgba(253, 224, 71, 0.9);
  box-shadow: 0 0 4px rgba(253, 224, 71, 0.8);
  opacity: 0;
  animation: map-camp-glint 5.5s ease-in-out infinite;
  animation-delay: var(--idle-delay, 0s);
  pointer-events: none;
}

@keyframes map-camp-glint {
  0%, 92%, 100% { opacity: 0; }
  95% { opacity: 0.9; }
  97% { opacity: 0.2; }
}

/* Kervanlar: geçici/hareketli hedef hissi için hafif nabız — burada olduğu süre sınırlı. */
.map-cell-caravan {
  background: radial-gradient(circle, rgba(217, 119, 6, 0.3), rgba(217, 119, 6, 0.05));
  border-color: rgba(217, 119, 6, 0.55);
  animation: map-cell-caravan-pulse 2s ease-in-out infinite;
}

@keyframes map-cell-caravan-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(217, 119, 6, 0.35); }
  50% { box-shadow: 0 0 12px rgba(217, 119, 6, 0.75); }
}

/* Kaynak düğümleri: materyal (taş) ve enerji (sarı) sakin tonlar; FLOX (oyunun
   en nadir varlığı) kendi kart glow animasyonuyla dikkat çeker. */
.map-cell-node-materials,
.map-cell-node-energy {
  position: relative;
  overflow: hidden;
}

.map-cell-node-materials {
  background: radial-gradient(circle, rgba(168, 162, 158, 0.3), rgba(168, 162, 158, 0.05));
  border-color: rgba(168, 162, 158, 0.55);
}

.map-cell-node-energy {
  background: radial-gradient(circle, rgba(250, 204, 21, 0.28), rgba(250, 204, 21, 0.05));
  border-color: rgba(250, 204, 21, 0.55);
}

/* Materyal/enerji düğümlerinde yumuşak bir shimmer — FLOX düğümünün kendi
   belirgin glow'unu (card-pulse-glow) taklit etmeden, çok daha sakin bir
   "burada bir kaynak var" hissi. --idle-delay ile desenkronize. */
.map-cell-node-materials::before,
.map-cell-node-energy::before {
  content: '';
  position: absolute;
  inset: -50% -20%;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-60%);
  animation: map-node-shimmer 6s ease-in-out infinite;
  animation-delay: var(--idle-delay, 0s);
  pointer-events: none;
}

@keyframes map-node-shimmer {
  0%, 80%, 100% { transform: translateX(-60%); opacity: 0; }
  88% { opacity: 0.8; }
  95% { transform: translateX(60%); opacity: 0; }
}

.map-cell-node-flox {
  background: radial-gradient(circle, rgba(57, 255, 143, 0.35), rgba(57, 255, 143, 0.06));
  border-color: var(--flox);
  animation: card-pulse-glow 2.2s ease-in-out infinite;
}

.map-cell-node-depleted {
  opacity: 0.4;
}

/* Faz 39 — Metruk Topraklar: kurulmayı bekleyen sahipsiz konumlar davetkâr bir
   yeşil nabızla, zaten kurulmuş olanlar sakin/soluk bir tonla ayrışır. */
.map-cell-territory {
  background: radial-gradient(circle, rgba(57, 255, 143, 0.3), rgba(57, 255, 143, 0.05));
  border-color: rgba(57, 255, 143, 0.55);
  animation: map-cell-territory-pulse 2.6s ease-in-out infinite;
}

@keyframes map-cell-territory-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(57, 255, 143, 0.3); }
  50% { box-shadow: 0 0 14px rgba(57, 255, 143, 0.65); }
}

.map-cell-territory-claimed {
  background: radial-gradient(circle, rgba(148, 163, 184, 0.28), rgba(148, 163, 184, 0.05));
  border-color: rgba(148, 163, 184, 0.5);
}

/* Faz 42 — FLOX Kazı: en zorlu kamp türü, mor bir parıltıyla diğer tüm kamplardan
   ayrışır — oyuncu haritaya bakar bakmaz "burası özel" hissi vermeli. */
.map-cell-camp-mining {
  background: radial-gradient(circle, rgba(192, 132, 252, 0.35), rgba(192, 132, 252, 0.06));
  border-color: rgba(216, 180, 254, 0.7);
  animation: map-cell-mining-pulse 2.4s ease-in-out infinite;
}

@keyframes map-cell-mining-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(192, 132, 252, 0.35); }
  50% { box-shadow: 0 0 16px rgba(192, 132, 252, 0.75); }
}

.map-ping {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flox);
  box-shadow: 0 0 8px var(--flox);
  animation: map-ping-pulse 1.4s ease-out infinite;
}

@keyframes map-ping-pulse {
  0% { transform: scale(0.6); opacity: 1; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { opacity: 0; }
}

.map-line {
  stroke: var(--flox);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  opacity: 0.65;
  animation: map-line-flow 1s linear infinite;
}

@keyframes map-line-flow {
  to { stroke-dashoffset: -24; }
}

/* Faz 46 — sefer animasyonu: hedefe giden her aktif sefer için harita üzerinde
   gerçek zamanlı ilerleyen bir işaretçi (bkz. app.js drawMapLines/
   movementMarkerAnimationLoop). Renk sefer tipine göre değişir — mevcut buton
   renkleriyle aynı dil (btn-danger kırmızı/btn-flox yeşil/btn-gather amber/
   btn-scout mavi) tekrar kullanılıyor ki oyuncu haritada da aynı anlamı okusun. */
.map-movement-marker-glow {
  fill: currentColor;
  opacity: 0.22;
  animation: map-movement-marker-pulse 1.4s ease-in-out infinite;
}

.map-movement-marker-arrow {
  fill: currentColor;
  filter: drop-shadow(0 0 3px currentColor);
}

.map-movement-marker-attack { color: #ef4444; }
.map-movement-marker-support { color: var(--flox); }
.map-movement-marker-gather { color: #f59e0b; }
.map-movement-marker-espionage { color: #38bdf8; }

/* Gelen seferler (bkz. app.js drawMapLines): kim gönderdiğine bakılmaksızın
   HER ZAMAN kırmızı — kendi şehrine yaklaşan herhangi bir şey bir tehdit
   sinyalidir, giden seferlerin renkli-amaca-göre şemasından kasıtlı olarak ayrı. */
.map-line.map-movement-incoming {
  stroke: #ef4444;
}

.map-movement-marker.map-movement-incoming {
  color: #ef4444;
}

@keyframes map-movement-marker-pulse {
  0%, 100% { r: 8; opacity: 0.22; }
  50% { r: 11; opacity: 0.4; }
}

/* Seyahat halindeki kervan — mevcut .map-cell-caravan-pulse ile aynı amber ton
   (rgba(217,119,6,...)), harita üzerinde gerçek zamanlı kayıyor (bkz. app.js
   drawMapLines/positionMovementMarkers). Sefer okundan farklı olarak ince/
   noktalı bir iz bırakıyor — bu bir tehdit değil, ticaret hareketi. */
.map-caravan-line {
  stroke: #d97706;
  stroke-width: 1.5;
  stroke-dasharray: 2 5;
  opacity: 0.55;
  animation: map-line-flow 2.2s linear infinite;
}

.map-caravan-marker-glow {
  fill: #d97706;
  opacity: 0.3;
  animation: map-movement-marker-pulse 1.8s ease-in-out infinite;
}

.map-caravan-marker-icon {
  font-size: 12px;
  filter: drop-shadow(0 0 3px rgba(217, 119, 6, 0.85));
}

/* Faz 46 — harita altındaki 7 rapor paneli artık akordeon: sayfa açılışında
   dikey kaydırma boyu neredeyse yarıya iniyor. "Aktif Seferler" ve "Savaş
   Raporları" en sık bakılan iki panel olduğu için varsayılan olarak açık
   kalıyor (bkz. app.html — .collapsed sınıfı olmayanlar), geri kalanı kapalı. */
.collapsible-section {
  padding: 0;
  overflow: hidden;
}

.collapsible-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.collapsible-toggle h3 {
  margin: 0;
}

.collapsible-chevron {
  color: var(--flox);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.collapsible-section.collapsed .collapsible-chevron {
  transform: rotate(-90deg);
}

.collapsible-body {
  padding: 0 1.25rem 1.25rem;
}

/* Yönetim Paneli kategorileri (Ekonomi/Dünya&Harita/Savaş&Diplomasi/Olaylar) —
   aynı .collapsible-section mekaniği, ama başlık büyük harf + geniş harf
   aralığıyla "bu bir kategori, tekil bir kart değil" ayrımını netleştiriyor.
   İçindeki kartlar kendi .glass stilini koruyor (kart-içinde-kart), bu yüzden
   kategori zemini hafifçe farklı (daha az opak) tutuluyor ki iç içelik boğucu
   durmasın. */
.admin-category {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(57, 255, 143, 0.15);
}

.admin-category > .collapsible-toggle h3 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
}

.admin-category .collapsible-body > .glass:not(:last-child) {
  margin-bottom: 1rem;
}

/* ==========================================================================
   Ana Menü (hamburger) ve Genel Amaçlı Modal
   ========================================================================== */

.topbar-icon-btn {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--flox);
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}

.topbar-icon-btn:hover {
  background: rgba(57, 255, 143, 0.12);
}

.topbar-icon-btn:active {
  transform: scale(0.92);
}

.main-menu-panel {
  position: fixed;
  top: 4.25rem;
  left: 0.75rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  background: #0e1116;
  border: 1px solid rgba(57, 255, 143, 0.3);
  border-radius: 0.75rem;
  padding: 0.4rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.main-menu-item {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: #e2e8f0;
  transition: background 0.12s;
}

.main-menu-item:hover {
  background: rgba(57, 255, 143, 0.1);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 8, 10, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-box {
  width: 100%;
  max-width: 32rem;
  border-radius: 0.9rem;
  padding: 1.25rem;
}

.modal-box-oracle {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.15);
}

.oracle-message {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #fef3c7;
  font-style: italic;
  text-align: center;
  padding: 0.5rem 0;
}

/* ==========================================================================
   Sol Menü (Sidebar) — mobilde üstte yatay kaydırmalı çubuk, masaüstünde
   (lg: 1024px+) kalıcı/katlanabilir sol sütun. .tab-btn, switchTab()/
   applyTutorialLocks()'ın JS seçicileri için işlevsel işaretleyici olarak
   korunur; tüm görsel stil burada, sonradan yüklenip tab-btn'in eski yatay
   sekme kurallarının üzerine yazar.
   ========================================================================== */

.sidebar-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--obsidian-border);
}

.sidebar-header {
  display: none;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.85rem;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}

.sidebar-nav-item:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
}

.sidebar-nav-item.active {
  color: var(--flox);
  background: rgba(57, 255, 143, 0.08);
  box-shadow: inset 0 0 0 1px rgba(57, 255, 143, 0.3);
}

.sidebar-nav-item.tab-locked {
  color: #52525b;
  cursor: not-allowed;
}

.sidebar-nav-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sidebar-nav-item-disabled {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.85rem;
  color: #52525b;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-nav-badge {
  font-size: 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  margin-left: auto;
}

.sidebar-collapse-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--obsidian-border);
  border-radius: 0.4rem;
  color: var(--flox);
  font-size: 0.75rem;
  background: transparent;
  transition: transform 0.2s;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .sidebar-nav {
    flex-direction: column;
    align-items: stretch;
    width: 220px;
    min-width: 220px;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: none;
    border-right: 1px solid var(--obsidian-border);
    padding: 1rem 0.75rem;
    transition: width 0.2s ease;
  }

  .sidebar-nav.sidebar-collapsed {
    width: 4.5rem;
    min-width: 4.5rem;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--obsidian-border);
  }

  .sidebar-collapsed .sidebar-header {
    justify-content: center;
  }

  .sidebar-collapsed .sidebar-brand,
  .sidebar-collapsed .sidebar-nav-label,
  .sidebar-collapsed .sidebar-nav-badge {
    display: none;
  }

  .sidebar-collapsed .sidebar-collapse-btn {
    transform: rotate(180deg);
  }
}

/* ==========================================================================
   Günlük Görevler
   ========================================================================== */

.quest-row {
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.6rem;
  padding: 0.65rem 0.85rem;
}

.quest-row-completed {
  border-color: rgba(57, 255, 143, 0.35);
  background: rgba(57, 255, 143, 0.05);
}

.quest-progress-track {
  margin-top: 0.4rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--flox-dim), var(--flox));
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ==========================================================================
   Landing Page (index.html) — görsel efekt/ses yok, tipografi odaklı sunum
   ========================================================================== */

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(6, 8, 10, 0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--obsidian-border);
}

.landing-nav-cta {
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem;
}

.landing-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
}

.landing-hero-inner {
  max-width: 640px;
}

.landing-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flox);
  margin-bottom: 1rem;
}

.landing-title {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
}

.landing-subtitle {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 2rem;
}

.landing-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.landing-cta-primary {
  padding: 0.85rem 2rem;
  font-size: 1rem;
}

.landing-cta-secondary {
  font-size: 0.85rem;
  color: #94a3b8;
  transition: color 0.15s;
}

.landing-cta-secondary:hover {
  color: var(--flox);
}

.landing-section {
  padding: 4rem 1.5rem;
}

.landing-section-alt {
  background: rgba(255, 255, 255, 0.015);
  border-top: 1px solid var(--obsidian-border);
  border-bottom: 1px solid var(--obsidian-border);
}

.landing-section-inner {
  max-width: 780px;
  margin: 0 auto;
}

.landing-section-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flox-dim);
  margin-bottom: 0.5rem;
}

.landing-section-title {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: var(--flox);
  margin-bottom: 1.25rem;
}

.landing-lore-text {
  font-size: 0.92rem;
  line-height: 1.8;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.landing-civ-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.landing-civ-card {
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.9rem;
  padding: 1.1rem 1.25rem;
  transition: border-color 0.15s, transform 0.15s;
}

.landing-civ-card:hover {
  border-color: rgba(57, 255, 143, 0.35);
  transform: translateY(-2px);
}

.landing-civ-name {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--flox);
  font-size: 0.95rem;
}

.landing-civ-pantheon {
  font-size: 0.72rem;
  color: #64748b;
  margin: 0.15rem 0 0.5rem;
}

.landing-civ-desc {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #94a3b8;
}

.landing-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.landing-feature-card {
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.9rem;
  padding: 1.25rem;
}

.landing-feature-icon {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.5rem;
}

.landing-feature-title {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--flox);
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.landing-feature-desc {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #94a3b8;
}

.landing-final-cta {
  padding: 5rem 1.5rem;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.landing-footer {
  text-align: center;
  padding: 2rem 1.5rem 3rem;
  font-size: 0.75rem;
  color: #52525b;
}

/* Faz 25: genişletilmiş "Nasıl Oynanır" / Özellikler / FlowiOX bölümleri için ek stiller */
.landing-section-inner-wide {
  max-width: 980px;
}

.landing-civ-hero {
  font-size: 0.75rem;
  color: #fbbf24;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(251, 191, 36, 0.25);
}

.landing-ecosystem-box {
  text-align: center;
  max-width: 640px;
  border: 1px solid rgba(57, 255, 143, 0.25);
  border-radius: 1rem;
  padding: 2.25rem 1.75rem;
  background: rgba(57, 255, 143, 0.03);
}

.landing-ecosystem-disclaimer {
  font-size: 0.75rem;
  color: #64748b;
  font-style: italic;
}

@media (min-width: 640px) {
  .landing-civ-grid { grid-template-columns: 1fr 1fr; }
  .landing-feature-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .landing-feature-grid-dense { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Faz 18 — Sayfa Üstbilgisi (section-hero), Boş Durum Kartları, Teknoloji
   Ağacı, Esirler ve Hikaye Modalı
   ========================================================================== */

.section-hero {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-radius: 0.9rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
  background: linear-gradient(120deg, rgba(57, 255, 143, 0.07), rgba(255, 255, 255, 0.02));
}

.section-hero-icon {
  font-size: 1.9rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(57, 255, 143, 0.35));
}

.section-hero-title {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  color: var(--flox);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.section-hero-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 0.15rem;
  line-height: 1.5;
}

.empty-state {
  text-align: center;
  padding: 1.75rem 1rem;
  color: #64748b;
}

.empty-state-icon {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.empty-state-text {
  font-size: 0.82rem;
  line-height: 1.5;
}

/* entity-card ailesiyle paylaşılan küçük etki/bonus rozeti (teknoloji, bina, birim). */
.research-effect-tag {
  display: inline-block;
  font-size: 0.68rem;
  color: var(--flox);
  background: rgba(57, 255, 143, 0.08);
  border: 1px solid rgba(57, 255, 143, 0.25);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-top: 0.15rem;
}

.research-active-track {
  margin-top: 0.4rem;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.research-active-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--flox-dim), var(--flox));
  animation: card-pulse-glow 1.8s ease-in-out infinite;
}

/* Faz 34 — Tek Kart Sistemi (entity-card): teknoloji, bina, birim hepsi aynı
   .entity-card dilini paylaşır. Faz 41 — kart-listesi ("dev buton gibi" eleştirisi
   Faz 30'da bir kez, "hâlâ beğenmedim" diye bu sefer İKİNCİ kez geldi) tamamen
   terk edilip gerçek bir düğüm-ağacına geçildi: kademe=sütun, dal=satır bir CSS
   grid'i + üstüne bindirilen bir SVG çizgi katmanı (Faz 31'in #map-lines'ıyla
   BİREBİR aynı yöntem — bkz. drawTechGraphLines() app.js). */
.tech-graph {
  position: relative;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.tech-graph-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.tech-graph-grid {
  display: grid;
  gap: 1.6rem 1.4rem;
  position: relative;
  z-index: 1;
  align-items: start;
}

.tech-graph-tier-header {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  text-align: center;
  border-bottom: 1px solid var(--obsidian-border);
  padding-bottom: 0.4rem;
}

.tech-graph-lane-label {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--flox-dim);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.tech-graph-cell {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 2rem;
  justify-content: center;
}

.tech-graph-scroll-hint {
  display: none;
  font-size: 0.72rem;
  color: var(--flox-dim);
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .tech-graph-scroll-hint {
    display: block;
  }
}

.tech-graph-node {
  position: relative;
  z-index: 1;
}

.tech-graph-edge {
  fill: none;
  stroke: rgba(148, 163, 184, 0.3);
  stroke-width: 1.5;
}

.tech-graph-edge-done {
  stroke: rgba(57, 255, 143, 0.55);
  stroke-width: 2;
}

/* Mobil teknoloji ağacı (< 768px): kademe×dal matris+SVG grafiği yerine dikey
   kaydırmalı, kademeye göre gruplanmış düz liste — bkz. renderTechnologyTreeMobile(). */
.tech-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tech-mobile-tier-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tech-mobile-tier-header {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flox-dim);
  border-bottom: 1px solid var(--obsidian-border);
  padding-bottom: 0.35rem;
}

.tech-mobile-tier-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.entity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--obsidian-border);
  border-left: 3px solid var(--obsidian-border);
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

/* Kışla: asker kartları eskiden sabit 1/2/3 sütunlu bir ızgarada, geniş
   ekranlarda gereksiz büyük görünüyordu — tech-tree'deki auto-fill deseniyle
   aynı mantık, daha fazla ve daha kompakt kart tek satırda sığar. */
.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.6rem;
}

.unit-grid .entity-card {
  padding: 0.55rem 0.6rem;
  gap: 0.28rem;
}

/* Faz 47 kısmi düzeltmesi (font-size büyütme) yeterli olmadı — kullanıcı hâlâ
   "asker modellerini göremiyoruz" dedi. Kök neden: ikon küçük bir başlık
   satırında metnin yanında duruyordu, sanatın kendisi asla öne çıkmıyordu.
   Artık ikon başlığın ÜSTÜNDE, kartın büyük bir kısmını (~%40 genişlik)
   kaplayan kendi satırında — bir "kart oyunu" düzeni. */
/* Altyapı'daki (ve Bilim Akademisi/Kışla'nın kendi bina kartındaki) yapı
   kartları da aynı buildingRowHtml() şablonunu kullanıyor ama bu "kart
   oyunu" düzenine hiç girmemişti — kullanıcı: "altyapıda gözüken binalar
   özellikle çok küçük kaldı". Aynı 3 seçiciye building kart konteynerları
   da eklendi. */
.unit-grid .entity-card-header,
.tech-graph-node .entity-card-header,
#city-infrastructure-list .entity-card-header,
#research-content .entity-card-header,
#barracks-building-card .entity-card-header {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}

.unit-grid .entity-card-icon,
.tech-graph-node .entity-card-icon,
#city-infrastructure-list .entity-card-icon,
#research-content .entity-card-icon,
#barracks-building-card .entity-card-icon,
#advisors-list .entity-card-icon {
  display: flex;
  justify-content: center;
  width: 100%;
}

.unit-grid .entity-card-icon-img,
.tech-graph-node .entity-card-icon-img,
#city-infrastructure-list .entity-card-icon-img,
#research-content .entity-card-icon-img,
#barracks-building-card .entity-card-icon-img,
#advisors-list .entity-card-icon-img {
  /* Kullanıcı isteği: önce "%40 daha büyüt" (48%->67%), sonra "çok az daha
     büyüt" — 67%/150px'ten 74%/165px'e. */
  width: 74%;
  max-width: 165px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 0.6rem;
  box-shadow: 0 0 0 1px rgba(57, 255, 143, 0.15);
}

.unit-grid .entity-card-icon-fallback,
.tech-graph-node .entity-card-icon-fallback,
#city-infrastructure-list .entity-card-icon-fallback,
#research-content .entity-card-icon-fallback,
#barracks-building-card .entity-card-icon-fallback,
#advisors-list .entity-card-icon-fallback {
  font-size: 2.8rem;
  line-height: 1;
}

.unit-grid .entity-card-title {
  font-size: 0.76rem;
}

.unit-grid .entity-card-desc {
  font-size: 0.65rem;
}

.tech-graph-node .entity-card-title {
  font-size: 0.8rem;
}

.entity-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
}

.entity-card-shared { border-left-color: var(--flox-dim); }
.entity-card-askeri { border-left-color: #f87171; }
.entity-card-ekonomi { border-left-color: #fbbf24; }
.entity-card-deniz { border-left-color: #38bdf8; }

.entity-card-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.entity-card-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* Gerçek görsel/asset desteği (bkz. entityIconHtml() app.js): dosya varsa img
   gösterilir, 404 olursa onerror ile img gizlenir ve bu emoji fallback açığa çıkar. */
.entity-card-icon-img {
  display: inline-block;
  width: 1.7em;
  height: 1.7em;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 0.3em;
}

.entity-card-icon-fallback {
  display: none;
}

.entity-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #f1f5f9;
}

.entity-card-tag {
  align-self: flex-start;
  font-size: 0.62rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.entity-card-desc {
  font-size: 0.7rem;
  line-height: 1.4;
  color: #94a3b8;
}

.entity-card-lock-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-size: 0.85rem;
  opacity: 0.75;
}

.entity-card-locked {
  filter: grayscale(0.6);
  opacity: 0.65;
}

.entity-card-completed {
  border-color: rgba(57, 255, 143, 0.35);
  background: rgba(57, 255, 143, 0.04);
}

/* Şehir sahnesindeki küpe tıklanınca aşağıdaki bina kartı bulunup bu kısa
   parıltıyla işaretlenir — hangi karta baktığınızı gözle takip edebilirsiniz. */
.entity-card-flash {
  animation: entity-card-flash-pulse 1.1s ease-out;
}

@keyframes entity-card-flash-pulse {
  0% { box-shadow: 0 0 0 2px rgba(57, 255, 143, 0.9); }
  100% { box-shadow: 0 0 0 2px rgba(57, 255, 143, 0); }
}

.city-plot-clickable {
  cursor: pointer;
}

/* Faz 44 — yerleştirme modu: hedef hücreler işaretçiyi el yapar, seçili (armed)
   bina belirgin bir titreşen dış çizgiyle "elde tutuluyor" hissi verir. */
.city-view-scene.placement-active .city-plot-target {
  cursor: pointer;
}

.city-plot-armed {
  animation: city-plot-armed-pulse 1s ease-in-out infinite;
}

@keyframes city-plot-armed-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(57, 255, 143, 0.4)); }
  50% { filter: drop-shadow(0 0 10px rgba(57, 255, 143, 0.95)); }
}

.entity-card.is-counting {
  border-color: var(--flox);
}

/* Esirler bölümü */
.captive-row {
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.6rem;
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.captive-row-info p:first-child {
  font-size: 0.85rem;
  color: #e2e8f0;
}

.captive-row-info p:last-child {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 0.1rem;
}

.captive-ransom-btn {
  font-size: 0.78rem;
  padding: 0.45rem 0.8rem;
  flex-shrink: 0;
}

/* Hikaye modalı — tutorial-intro-screen'in "kadim kitap" hissini modal boyutunda tekrarlar */
.modal-box-story {
  border-color: rgba(57, 255, 143, 0.45);
  box-shadow: 0 0 34px rgba(57, 255, 143, 0.18);
  text-align: center;
}

.story-chapter-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flox-dim);
  margin-bottom: 0.4rem;
}

.story-narrative {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #e2e8f0;
  font-style: italic;
  padding: 0.5rem 0 0.25rem;
}

/* Rehber (compendium) modalı içindeki bölüm başlıkları */
.guide-section-title {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  color: var(--flox);
  font-size: 0.85rem;
  margin-top: 0.9rem;
  margin-bottom: 0.3rem;
}

.guide-section-title:first-child {
  margin-top: 0;
}

/* Ayarlar modalındaki ses aç/kapa anahtarı */
.mute-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.6rem;
  padding: 0.6rem 0.85rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   FAZ 19 — Pazar Yeri ve Günlük Görev Paneli
   ========================================================================== */

.market-order {
  border: 1px solid var(--obsidian-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    rgba(10, 13, 17, 0.5);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  transition: border-color 0.18s, transform 0.14s, box-shadow 0.18s;
}

.market-order:hover {
  border-color: rgba(57, 255, 143, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.market-order-mine {
  border-color: rgba(251, 191, 36, 0.4);
  background:
    linear-gradient(180deg, rgba(251, 191, 36, 0.07), rgba(255, 255, 255, 0.01)),
    rgba(10, 13, 17, 0.5);
}

/* Takas satırı: "veriyor → alıyor" görsel akışı */
.market-trade-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.market-leg {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  border-radius: 0.5rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
}

.market-leg-offer {
  color: var(--flox);
  border-color: rgba(57, 255, 143, 0.3);
}

.market-leg-want {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

.market-arrow {
  color: #64748b;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.market-seller {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 0.45rem;
}

.market-burn-note {
  font-size: 0.7rem;
  color: #f87171;
  margin-top: 0.3rem;
}

.market-create-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

@media (min-width: 640px) {
  .market-create-grid { grid-template-columns: 1fr 1fr; }
}

.market-field-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 0.25rem;
  display: block;
}

/* Günlük görev paneli — üst çubuktaki ikondan açılan sabit konumlu panel.
   #main-menu-panel ile aynı desen: .glass'ın stacking context'ine hapsolmaması
   için body'nin doğrudan çocuğu ve position: fixed. */
.quest-panel-float {
  position: fixed;
  top: 4.25rem;
  right: 0.75rem;
  z-index: 60;
  width: min(22rem, calc(100vw - 1.5rem));
  background: #0e1116;
  border: 1px solid rgba(57, 255, 143, 0.3);
  border-radius: 0.9rem;
  padding: 1rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
  max-height: 75vh;
  overflow-y: auto;
}

.quest-panel-title {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  color: var(--flox);
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

/* Üst çubuktaki görev rozeti — tamamlanmamış görev sayısını gösterir */
.quest-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #fbbf24;
  color: #1a1103;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}

.quest-badge-ready {
  background: var(--flox);
  color: #052014;
  box-shadow: 0 0 12px rgba(57, 255, 143, 0.7);
  animation: card-pulse-glow 1.6s ease-in-out infinite;
}

/* Faz 37 — "Ulu Ruh": aktif görev kutusundaki anlatıcı karakter. Gerçek asset
   pipeline'ı yok (proje kısıtı) — prosedürel SVG bir "ruh gözü" motifi, .glass
   panelin tema paletiyle (flox yeşili) tutarlı, hafif nabız animasyonuyla "canlı". */
.ulu-ruh-panel {
  border-color: rgba(57, 255, 143, 0.25);
  /* Faz 52: sabit 320px, ~320px genişlikteki telefonlarda (ana içeriğin p-4
     dolgusuyla birlikte) taşabiliyordu — artık viewport'a göre kırpılıyor. */
  max-width: min(320px, calc(100vw - 2rem));
}

.ulu-ruh-avatar-wrap {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  animation: ulu-ruh-breathe 3.4s ease-in-out infinite;
}

.ulu-ruh-avatar {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes ulu-ruh-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* Günlük Sandık kutusu */
.daily-chest {
  margin-top: 0.75rem;
  border-radius: 0.7rem;
  padding: 0.85rem;
  text-align: center;
  border: 1px dashed rgba(251, 191, 36, 0.45);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08), rgba(255, 255, 255, 0.01));
}

.daily-chest-claimed {
  border-style: solid;
  border-color: rgba(57, 255, 143, 0.45);
  background: linear-gradient(180deg, rgba(57, 255, 143, 0.09), rgba(255, 255, 255, 0.01));
}

.daily-chest-icon {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.3rem;
}

.daily-chest-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.82rem;
  color: #fbbf24;
}

.daily-chest-claimed .daily-chest-label {
  color: var(--flox);
}

.daily-chest-sub {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 0.2rem;
}

/* Sandık açılış modalı */
.modal-box-chest {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.22);
  text-align: center;
}

.chest-burst {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 0.5rem;
  animation: chest-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chest-pop {
  0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ==========================================================================
   FAZ 20 — Sıralama (Leaderboard) ve Kadim Çekirdek
   ========================================================================== */

.core-dominance-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.14), rgba(56, 189, 248, 0.08));
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  color: #e9d5ff;
  white-space: nowrap;
}

.core-dominance-pill.core-mine {
  background: linear-gradient(90deg, rgba(57, 255, 143, 0.16), rgba(57, 255, 143, 0.05));
  border-color: rgba(57, 255, 143, 0.4);
  color: var(--flox);
}

.core-dominance-icon {
  display: inline-block;
  animation: core-spin 6s linear infinite;
}

@keyframes core-spin {
  to { transform: rotate(360deg); }
}

/* Sıralama kategori sekmeleri (Güç/Savaş/İttifak) */
.leaderboard-category-btn {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.85rem;
  color: #94a3b8;
  background: transparent;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}

.leaderboard-category-btn:hover {
  color: #e2e8f0;
}

.leaderboard-category-btn.active {
  color: var(--flox);
  background: rgba(57, 255, 143, 0.08);
  box-shadow: inset 0 0 0 1px rgba(57, 255, 143, 0.3);
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.leaderboard-row:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--obsidian-border);
}

.leaderboard-row-clickable {
  cursor: pointer;
}

.leaderboard-row-me {
  background: rgba(57, 255, 143, 0.06);
  border-color: rgba(57, 255, 143, 0.3);
}

.leaderboard-rank {
  width: 2.25rem;
  flex-shrink: 0;
  text-align: center;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.9rem;
  color: #64748b;
}

.leaderboard-rank-top1 { color: #facc15; font-size: 1.05rem; }
.leaderboard-rank-top2 { color: #cbd5e1; font-size: 1rem; }
.leaderboard-rank-top3 { color: #d97706; font-size: 1rem; }

.leaderboard-name {
  flex: 1;
  min-width: 0;
}

.leaderboard-name-primary {
  font-size: 0.88rem;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-name-secondary {
  font-size: 0.7rem;
  color: #64748b;
}

.leaderboard-value {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--flox);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.leaderboard-sticky-rank {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: 0.75rem;
}

/* Harita — Kadim Çekirdek hücresi */
.map-cell-core {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45), rgba(56, 189, 248, 0.1));
  border-color: rgba(168, 85, 247, 0.75);
  animation: core-cell-glow 2.4s ease-in-out infinite;
}

@keyframes core-cell-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(168, 85, 247, 0.5); }
  50% { box-shadow: 0 0 26px rgba(168, 85, 247, 0.95), 0 0 40px rgba(56, 189, 248, 0.5); }
}

.map-cell-core .map-cell-icon {
  animation: core-spin 6s linear infinite;
  display: inline-block;
}

.core-info-box {
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.08), rgba(255, 255, 255, 0.01));
  border-radius: 0.7rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  color: #e9d5ff;
}

/* ==========================================================================
   FAZ 21 — Sohbet Paneli, Profil/Cüzdan
   ========================================================================== */

.chat-toggle-btn {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 55;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--flox), var(--flox-dim));
  color: #052014;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(57, 255, 143, 0.4);
  transition: transform 0.15s;
}

.chat-toggle-btn:hover {
  transform: translateY(-2px) scale(1.04);
}

.chat-unread-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: #f87171;
  font-size: 0;
  box-shadow: 0 0 0 2px #0a0c0f;
}

.chat-panel-float {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem;
  z-index: 55;
  width: min(22rem, calc(100vw - 1.5rem));
  height: min(28rem, calc(100vh - 8rem));
  background: #0e1116;
  border: 1px solid rgba(57, 255, 143, 0.3);
  border-radius: 0.9rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--obsidian-border);
  flex-shrink: 0;
}

.chat-channel-btn {
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  color: #94a3b8;
  transition: color 0.15s, background 0.15s;
}

.chat-channel-btn:hover {
  color: #e2e8f0;
}

.chat-channel-btn.active {
  color: var(--flox);
  background: rgba(57, 255, 143, 0.1);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.chat-message {
  font-size: 0.82rem;
  line-height: 1.4;
  word-break: break-word;
}

.chat-message-author {
  color: var(--flox);
  font-weight: 600;
  margin-right: 0.35rem;
}

.chat-message-author-me {
  color: #fbbf24;
}

.chat-message-time {
  font-size: 0.65rem;
  color: #52525b;
  margin-left: 0.35rem;
}

.chat-message-body {
  color: #cbd5e1;
}

.chat-send-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--obsidian-border);
  flex-shrink: 0;
}

.chat-send-row .field {
  flex: 1;
}

/* Profil modalı içindeki bölüm başlıkları + istatistik ızgarası */
.profile-section-title {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  color: var(--flox);
  font-size: 0.85rem;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}

.profile-section-title:first-child {
  margin-top: 0;
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* Cüzdan bölümü */
.wallet-balance-box {
  text-align: center;
  border: 1px solid rgba(57, 255, 143, 0.3);
  background: linear-gradient(180deg, rgba(57, 255, 143, 0.08), rgba(255, 255, 255, 0.01));
  border-radius: 0.7rem;
  padding: 0.9rem;
}

.wallet-balance-value {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.4rem;
  color: var(--flox);
}

/* Puan bakiyesi FLOX'tan kasıtlı olarak farklı bir renk (mor) alır — gerçek para
   karşılığı olan FLOX ile karıştırılmasın diye; "sembolik" etiketi de bunu pekiştirir. */
.wallet-points-box {
  border-color: rgba(167, 139, 250, 0.35);
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.08), rgba(255, 255, 255, 0.01));
}

.wallet-points-value {
  color: #a78bfa;
}

.wallet-points-tag {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  margin-left: 0.3rem;
}

.wallet-request-row {
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.55rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.78rem;
}

.wallet-status-pending { color: #fbbf24; }
.wallet-status-completed { color: var(--flox); }

/* ==========================================================================
   FAZ 22 — Mitolojik Herolar, Ele Geçirilebilir Köyler
   ========================================================================== */

.game-card-hero {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(251, 191, 36, 0.18);
}

.game-card-hero:hover {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 16px 34px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(251, 191, 36, 0.3);
}

.game-card-hero .entity-card-title {
  color: #fbbf24;
}

/* Harita — köy hücreleri, bonus türüne göre renklendirilmiş */
.map-cell-village-materials { background: radial-gradient(circle, rgba(168, 162, 158, 0.4), rgba(168, 162, 158, 0.08)); border-color: rgba(168, 162, 158, 0.65); }
.map-cell-village-energy { background: radial-gradient(circle, rgba(250, 204, 21, 0.35), rgba(250, 204, 21, 0.08)); border-color: rgba(250, 204, 21, 0.65); }
.map-cell-village-science { background: radial-gradient(circle, rgba(56, 189, 248, 0.35), rgba(56, 189, 248, 0.08)); border-color: rgba(56, 189, 248, 0.65); }
.map-cell-village-flox { background: radial-gradient(circle, rgba(57, 255, 143, 0.4), rgba(57, 255, 143, 0.08)); border-color: var(--flox); }
.map-cell-village-attack { background: radial-gradient(circle, rgba(239, 68, 68, 0.35), rgba(239, 68, 68, 0.08)); border-color: rgba(239, 68, 68, 0.65); }
.map-cell-village-defense { background: radial-gradient(circle, rgba(120, 113, 108, 0.4), rgba(120, 113, 108, 0.08)); border-color: rgba(168, 162, 158, 0.6); }

.map-cell-village-mine {
  box-shadow: inset 0 0 0 2px var(--flox);
}

/* ==========================================================================
   FAZ 23 — Şehir İçi Görünüm + Özelleştirme
   ========================================================================== */

.city-view-scene {
  width: 100%;
  border-radius: 0.7rem;
  overflow: hidden;
  border: 1px solid var(--obsidian-border);
  background: #05070a;
}

.city-scene-svg {
  display: block;
  width: 100%;
  height: auto;
}

.city-banner-flag {
  transform-origin: 2px 4px;
  animation: banner-wave 2.6s ease-in-out infinite;
}

/* 7. gün ardışık giriş ödülü — normal günden görsel olarak ayrışsın diye
   (LoginStreakCatalog zaten en büyük ödülü veriyor, burası sadece sunuş). */
.modal-box-streak-big {
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 0 32px rgba(251, 191, 36, 0.25);
}

.streak-big-day-reward {
  animation: streak-big-day-pulse 1.4s ease-in-out infinite;
}

@keyframes streak-big-day-pulse {
  0%, 100% { text-shadow: 0 0 0 rgba(251, 191, 36, 0); }
  50% { text-shadow: 0 0 14px rgba(251, 191, 36, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-big-day-reward {
    animation: none;
  }
}

@keyframes banner-wave {
  0%, 100% { transform: skewY(0deg); }
  50% { transform: skewY(-6deg); }
}

.city-fx-smoke {
  animation: city-smoke-rise 3.2s ease-out infinite;
}

@keyframes city-smoke-rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0.7; }
  100% { transform: translateY(-30px) scale(1.8); opacity: 0; }
}

.city-fx-spark {
  animation: city-spark-flicker 1.1s ease-in-out infinite;
}

@keyframes city-spark-flicker {
  0%, 100% { opacity: 0.35; r: 2; }
  50% { opacity: 1; r: 4; }
}

.city-fx-glow {
  animation: city-glow-pulse 2.8s ease-in-out infinite;
}

@keyframes city-glow-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.4; }
}

/* Enerji Santrali — bina merkezinden dışa doğru genişleyen FLOX yeşili parıltı. */
.city-fx-flox-pulse {
  animation: city-flox-pulse 2.4s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes city-flox-pulse {
  0%, 100% { r: 10; opacity: 0.25; }
  50% { r: 20; opacity: 0.55; }
}

/* Bilim Akademisi — dürbünün ucunda küçük, keskin bir parıltı flaşı. */
.city-fx-telescope-glint {
  animation: city-telescope-glint 2.6s ease-in-out infinite;
}

@keyframes city-telescope-glint {
  0%, 80%, 100% { opacity: 0; r: 1.5; }
  90% { opacity: 1; r: 3.5; }
}

/* Barınaklar — zeminde ileri-geri gezinen minik "yürüyüş" noktaları. */
.city-fx-walker {
  animation: city-walker-pace 4.5s ease-in-out infinite;
}

@keyframes city-walker-pace {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  25% { transform: translateX(9px); opacity: 0.85; }
  50% { transform: translateX(9px) translateY(-1px); opacity: 0.6; }
  75% { transform: translateX(-9px); opacity: 0.85; }
}

/* Bina "nefes alma" parıltısı: sahnenin baskın yeşil/siyah paletiyle kasıtlı
   kontrast için sıcak amber ton — bkz. isoCubeMarkup() notu. transform-box
   olmadan SVG <image> transform-origin merkezi yanlış hesaplar (varsayılan
   viewport 0,0 olur), o yüzden fill-box + merkez şart. */
.city-building-billboard {
  transform-box: fill-box;
  transform-origin: center;
}

.city-building-anim {
  animation: city-building-breathe 3.6s ease-in-out infinite;
}

@keyframes city-building-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 0px rgba(251, 191, 36, 0));
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(251, 191, 36, 0.85)) drop-shadow(0 0 16px rgba(251, 191, 36, 0.35));
  }
}

/* Sis yamaları: zeminin üzerinde yavaşça sağa-sola süzülen hafif bulanık pus.
   pointer-events:none — yerleştirme modunda tıklamaları engellemesin. */
.city-fog-layer {
  pointer-events: none;
}

.city-fog-wisp {
  animation: city-fog-drift 15s ease-in-out infinite;
}

@keyframes city-fog-drift {
  0%, 100% { transform: translateX(-22px); opacity: 0.45; }
  50% { transform: translateX(22px); opacity: 0.85; }
}

/* Arkaplandaki fırtına bulutlarıyla uyumlu, seyrek şimşek çakması. */
.city-lightning-flicker {
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: city-lightning-flash 10s ease-in-out infinite;
}

@keyframes city-lightning-flash {
  0%, 91%, 100% { opacity: 0; }
  92% { opacity: 0.28; }
  93% { opacity: 0.04; }
  94% { opacity: 0.18; }
  95% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .city-building-anim,
  .city-fx-smoke,
  .city-fx-spark,
  .city-fx-glow,
  .city-fx-flox-pulse,
  .city-fx-telescope-glint,
  .city-fx-walker,
  .city-fog-wisp,
  .city-lightning-flicker {
    animation: none;
  }
}

/* Banner rengi/amblem seçicileri — sabit palet, serbest metin yok */
.banner-color-picker, .banner-emblem-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.banner-swatch {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--swatch-color);
  border: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.banner-swatch:hover {
  transform: scale(1.1);
}

.banner-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--swatch-color);
}

.emblem-btn {
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.emblem-btn:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.07);
}

.emblem-btn.active {
  border-color: var(--flox);
  background: rgba(57, 255, 143, 0.12);
}

.city-theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.city-theme-swatch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--obsidian-border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.78rem;
  color: #cbd5e1;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.city-theme-swatch:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.07);
}

.city-theme-swatch.active {
  border-color: var(--flox);
  background: rgba(57, 255, 143, 0.12);
  color: var(--flox);
}

.city-theme-swatch-icon {
  font-size: 1rem;
}

/* Bu iki kural bilerek dosyanın EN SONUNDA — aynı özgüllükteki (specificity)
   temel kurallar (.sidebar-nav-item ~satır 1126, #city-summary .stat-card
   ~satır 500) dosyada bunlardan SONRA gelirse media query şartı doğru olsa
   bile kaynak sırası yüzünden kazanırlar. Önce burada değil daha yukarıda bir
   yere eklenmişlerdi ve hiç etkisi olmadığı (gerçek mobil DOM ölçümüyle)
   fark edildi — düzeltilirken buraya taşındı. */
@media (max-width: 768px) {
  /* Şehir Merkezi / Kışla / Bilim Akademisi sekme şeridi — kullanıcı isteği:
     "biraz daraltılabilir". */
  .sidebar-nav-item,
  .sidebar-nav-item-disabled {
    padding: 0.4rem 0.55rem;
    font-size: 0.75rem;
    gap: 0.4rem;
  }

  .sidebar-nav-icon {
    font-size: 0.95rem;
  }

  /* Şehir Durumu — kullanıcı isteği: "daha minik kutucuklar hoş olabilir". */
  #city-summary .stat-card {
    padding: 0.3rem 0.4rem;
    font-size: 0.72em;
  }

  /* Şehir sahnesi mobilde küçük duruyordu şikayeti: kart dolgusunu iptal edip
     tam genişliğe yay (padding kaybını geri kazan), ayrıca sahnenin kendi
     600x320 en-boy oranı (1.875) çok geniş/basık olduğundan binalar orantısal
     olarak küçük kalıyordu — SVG'yi daha dar bir çerçeveye "slice" ile
     sığdırarak üstteki boş gökyüzü/alttaki boş ön alanı kırpıp ızgaraya
     görsel olarak yakınlaştırıyoruz (genişlik kaybı yok, sadece dikey kırpma). */
  .city-view-scene {
    margin: 0 -0.5rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    aspect-ratio: 2.3 / 1;
  }

  .city-scene-svg {
    width: 100%;
    height: 100%;
  }
}