/* ==========================================================================
   Hükümdar: Age of Khans — Savaş Simülatörü CSS
   Uyumlu Tasarım Sistemi: guides.css / guide-hub.css
   ========================================================================== */

:root {
  --sim-blue: #65a8ff;
  --sim-blue-glow: rgba(101, 168, 255, 0.45);
  --sim-red: #ff5e57;
  --sim-red-glow: rgba(255, 94, 87, 0.45);
  --sim-gold: #f59e0b;
  --sim-gold-glow: rgba(245, 158, 11, 0.45);
  --sim-green: #2ecc71;
  --sim-panel-bg: rgba(18, 10, 7, 0.92);
  --sim-card-bg: rgba(28, 15, 10, 0.85);
  --sim-border: rgba(217, 119, 6, 0.28);
  --sim-border-strong: rgba(245, 158, 11, 0.55);
}

/* Simülatör Ana Kapsayıcı (Geniş Ekran Tam Kapasite) */
.guide-container.simulator-page,
.simulator-page {
  max-width: 1440px !important;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 90px;
}

.sim-hero {
  text-align: center;
  padding: 18px 0 10px;
  position: relative;
}

.sim-hero::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 160px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(50px);
  z-index: -1;
}

.sim-title {
  font: 900 clamp(1.8rem, 3.8vw, 2.8rem)/1.1 var(--font-serif);
  color: #fff;
  letter-spacing: -0.02em;
}

.sim-title em {
  display: inline-block;
  font-style: normal;
  color: transparent;
  background: linear-gradient(105deg, #fff6cf, #f0b84e 55%, #c77b21);
  background-clip: text;
  -webkit-background-clip: text;
}

.sim-subtitle {
  max-width: 800px;
  margin: 6px auto 0;
  color: #cbbba4;
  font-size: 0.94rem;
  line-height: 1.55;
}

/* Hızlı Senaryo Seçici & Araç Çubuğu */
.sim-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  margin: 12px 0 16px;
  border: 1px solid var(--sim-border);
  border-radius: 12px;
  background: rgba(14, 8, 5, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.sim-presets-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sim-toolbar-label {
  color: var(--gold-400);
  font: 800 0.76rem/1 var(--font-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 6px;
}

.sim-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #e2d7c5;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sim-preset-btn:hover {
  border-color: var(--gold-400);
  background: rgba(245, 158, 11, 0.15);
  color: #fff;
  transform: translateY(-1px);
}

.sim-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 94, 87, 0.35);
  background: rgba(255, 94, 87, 0.08);
  color: #ff9b97;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sim-reset-btn:hover {
  background: rgba(255, 94, 87, 0.2);
  color: #fff;
}

/* Savaş Arenası — İki Cepheli Düzen (Alt Alta Yerleşim) */
.battle-arena {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
  width: 100%;
}

/* Cephe Kolonu (Saldıran / Savunan) */
.army-column {
  border-radius: 16px;
  border: 1px solid var(--sim-border);
  background: var(--sim-panel-bg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.army-column.attacker-col {
  border-color: rgba(255, 94, 87, 0.4);
}

.army-column.defender-col {
  border-color: rgba(101, 168, 255, 0.4);
}

.army-column-head {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.attacker-col .army-column-head {
  background: linear-gradient(135deg, rgba(80, 20, 15, 0.7), rgba(28, 12, 8, 0.9));
}

.defender-col .army-column-head {
  background: linear-gradient(135deg, rgba(15, 40, 80, 0.7), rgba(12, 20, 28, 0.9));
}

.army-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.army-head-icon {
  font-size: 1.4rem;
}

.army-head-title h2 {
  font: 800 1.15rem/1.2 var(--font-serif);
  color: #fff;
  letter-spacing: 0.03em;
}

.army-head-title small {
  display: block;
  font-size: 0.74rem;
  color: #b7a996;
  font-family: var(--font-sans);
  margin-top: 2px;
}

.army-live-stat {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: right;
}

.army-live-stat span {
  display: block;
  font-size: 0.68rem;
  color: #9f9180;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.army-live-stat strong {
  display: block;
  font: 800 1.1rem/1.1 var(--font-serif);
  color: #fff;
}

.attacker-col .army-live-stat strong {
  color: #ff9b97;
}

.defender-col .army-live-stat strong {
  color: #9ec9ff;
}

/* Sur Kontrol Paneli (Savunan Taraf İçin) */
.wall-controller-card {
  margin: 10px 14px 0;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(18, 28, 45, 0.65);
  border: 1px solid rgba(101, 168, 255, 0.3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wall-ctrl-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wall-ctrl-icon {
  font-size: 1.5rem;
}

.wall-ctrl-info h3 {
  font: 800 0.9rem/1.2 var(--font-serif);
  color: #fff;
}

.wall-ctrl-info p {
  font-size: 0.74rem;
  color: #9eb8dd;
}

.wall-ctrl-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wall-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wall-slider {
  width: 130px;
  accent-color: var(--sim-blue);
  cursor: pointer;
}

.wall-badge {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(101, 168, 255, 0.18);
  border: 1px solid rgba(101, 168, 255, 0.4);
  color: #65a8ff;
  font: 800 0.8rem/1 var(--font-serif);
}

/* Formasyon Kartı (Ordu / Birlik Seferi / İttifak Desteği) */
.formation-card {
  margin: 10px 14px 12px;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: var(--sim-card-bg);
  border: 1px solid var(--sim-border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  position: relative;
}

.formation-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.formation-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.formation-role-badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  font: 800 0.68rem/1 var(--font-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.attacker-col .formation-role-badge {
  background: rgba(255, 94, 87, 0.15);
  color: #ff8b87;
  border: 1px solid rgba(255, 94, 87, 0.35);
}

.defender-col .formation-role-badge {
  background: rgba(101, 168, 255, 0.15);
  color: #8ec2ff;
  border: 1px solid rgba(101, 168, 255, 0.35);
}

.formation-title {
  font: 800 1.05rem/1.2 var(--font-serif);
  color: #fff;
}

.formation-controls-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nation-select-dropdown {
  padding: 7px 12px;
  border-radius: 8px;
  background: #190e09;
  border: 1px solid var(--gold-500);
  color: #fff;
  font: 700 0.82rem var(--font-sans);
  cursor: pointer;
  outline: none;
}

.nation-select-dropdown:focus {
  border-color: #fff;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.btn-remove-formation {
  background: rgba(255, 94, 87, 0.12);
  border: 1px solid rgba(255, 94, 87, 0.3);
  color: #ff9b97;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-remove-formation:hover {
  background: rgba(255, 94, 87, 0.25);
  color: #fff;
}

/* Yan Yana Birlikler Şeridi (10 Birlik Tek Satırda — Sağa/Sola Kaydırma Olmadan) */
.unit-strip-container {
  position: relative;
  margin: 2px 0 0;
  width: 100%;
}

.unit-strip-scroll-controls {
  display: none !important;
}

.unit-cards-track {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  padding: 2px 0 6px;
  overflow: visible;
}

@media (max-width: 1080px) {
  .unit-cards-track {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (max-width: 580px) {
  .unit-cards-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
}

/* Tekil Asker Kartı (Kompakt 10'lu Grid Kartı - Dikeyde Rahat, Yatayda Sabit) */
.sim-unit-card {
  flex: none;
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(16, 9, 6, 0.85);
  padding: 10px 5px 12px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.sim-unit-card:hover, .sim-unit-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--border-gold-glow);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.sim-unit-card.active-troops {
  border-color: var(--gold-500);
  background: rgba(26, 14, 9, 0.95);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

/* Asker İsmi (Kartın Üst Başlığı) */
.unit-card-name {
  font: 800 0.84rem/1.2 var(--font-serif);
  color: #fff;
  text-align: center;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sim-unit-card.active-troops .unit-card-name {
  color: var(--gold-300);
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

/* Genişletilmiş Asker Görseli (Ortaya Çıkan Alanla Büyütüldü) */
.unit-card-media {
  position: relative;
  width: 82px;
  height: 82px;
  max-width: 92%;
  margin: 0 auto 8px;
  border-radius: 12px;
  overflow: visible;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(18, 10, 7, 0.88) 75%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.unit-card-media img {
  width: 74px;
  height: 74px;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
  transition: transform 0.2s ease;
}

.sim-unit-card:hover .unit-card-media img {
  transform: scale(1.08);
}

.unit-card-special-pill {
  position: absolute;
  bottom: -4px;
  right: -4px;
  padding: 2px 5px;
  border-radius: 4px;
  font: 800 0.56rem/1 var(--font-serif);
  background: #f59e0b;
  color: #120904;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 2;
  white-space: nowrap;
}

/* Canlı Stat Hapı */
.unit-card-stat-chip {
  padding: 4px 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-around;
  font-size: 0.65rem;
  font-weight: 700;
  margin-bottom: 7px;
  gap: 2px;
}

.unit-card-stat-chip .stat-atk {
  color: #ff8b87;
}

.unit-card-stat-chip .stat-def {
  color: #8ec2ff;
}

.unit-card-stat-chip .stat-cavdef {
  color: #f6ca63;
}

/* Asker Sayısı & Geliştirme Inputları */
.unit-input-group {
  margin-bottom: 7px;
}

.unit-input-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.62rem;
  color: #9f9180;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.unit-input-label strong {
  color: var(--gold-400);
}

.stepper-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: #120906;
  overflow: hidden;
  height: 28px;
}

.stepper-input-wrap input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  color: #fff;
  text-align: center;
  padding: 2px;
  font-size: 0.82rem;
  font-weight: 700;
  outline: none;
  font-family: var(--font-sans);
}

.stepper-btn {
  width: 20px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: #e2d7c5;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.stepper-btn:hover {
  background: rgba(245, 158, 11, 0.3);
  color: #fff;
}

/* Geliştirme (Demirci & Zırhçı) Girişleri */
.unit-upgrades-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.upgrade-input-box {
  display: flex;
  flex-direction: column;
}

.upgrade-input-box label {
  font-size: 0.6rem;
  color: #9f9180;
  margin-bottom: 2px;
  white-space: nowrap;
  text-align: center;
}

.upgrade-input-box input {
  width: 100%;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  background: #120906;
  color: #fff;
  text-align: center;
  padding: 2px;
  font-size: 0.76rem;
  font-weight: 700;
  outline: none;
}

.upgrade-input-box input:focus {
  border-color: var(--gold-400);
}

/* Ek Ulus Ekle Butonu */
.add-formation-wrap {
  padding: 0 14px 12px;
}

.btn-add-formation {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.03);
  color: #d9c9b2;
  font: 800 0.82rem/1 var(--font-serif);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-add-formation:hover {
  border-color: var(--gold-400);
  background: rgba(245, 158, 11, 0.12);
  color: #fff;
  transform: translateY(-2px);
}

/* Büyük Simülasyon Tetikleme Butonu */
.sim-trigger-banner {
  text-align: center;
  margin: 18px 0 28px;
}

.btn-simulate-battle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 38px;
  border-radius: 14px;
  border: 1px solid #f2c25d;
  background: linear-gradient(135deg, #f0a629 0%, #c46d14 60%, #8c4206 100%);
  box-shadow: 0 14px 40px rgba(217, 119, 6, 0.45);
  color: #fff;
  font: 900 1.08rem/1 var(--font-serif);
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
}

.btn-simulate-battle:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 55px rgba(245, 158, 11, 0.65);
  background: linear-gradient(135deg, #fbb847 0%, #d97706 60%, #9e4a07 100%);
}

.btn-simulate-battle:active {
  transform: translateY(1px);
}

/* ==========================================================================
   Savaş Sonuç Paneli (Battle Results Dashboard)
   ========================================================================== */
.battle-results-panel {
  border-radius: 20px;
  border: 1px solid var(--sim-border-strong);
  background: rgba(16, 9, 6, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  padding: 24px;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}

.battle-results-panel[hidden] {
  display: none;
}

/* Sonuç Başlık Şeridi */
.result-banner {
  border-radius: 18px;
  padding: 24px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 30px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

.result-banner.attacker-won {
  border: 1px solid rgba(255, 94, 87, 0.6);
  background: linear-gradient(135deg, rgba(140, 28, 20, 0.85), rgba(40, 14, 10, 0.95));
}

.result-banner.defender-won {
  border: 1px solid rgba(101, 168, 255, 0.6);
  background: linear-gradient(135deg, rgba(20, 60, 140, 0.85), rgba(10, 20, 40, 0.95));
}

.result-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.result-banner-icon {
  font-size: 2.8rem;
}

.result-banner-left h3 {
  font: 900 1.8rem/1.1 var(--font-serif);
  color: #fff;
  letter-spacing: 0.02em;
}

.result-banner-left p {
  color: #e2d7c5;
  font-size: 0.92rem;
  margin-top: 4px;
}

.result-banner-tag {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font: 800 0.82rem/1 var(--font-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* İki Gücün Çarpışma İlerleme Çubuğu */
.power-clash-card {
  padding: 20px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 28px;
}

.power-clash-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font: 800 0.92rem/1 var(--font-serif);
}

.power-clash-header .atk-side {
  color: #ff8b87;
}

.power-clash-header .def-side {
  color: #8ec2ff;
}

.power-clash-bar {
  height: 22px;
  border-radius: 11px;
  background: #10203a;
  overflow: hidden;
  display: flex;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
}

.power-clash-fill-atk {
  background: linear-gradient(90deg, #d63031, #ff7675);
  height: 100%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.power-clash-fill-def {
  background: linear-gradient(90deg, #0984e3, #74b9ff);
  height: 100%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Metrik Grid */
.sim-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

.sim-metric-card {
  padding: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.sim-metric-card span {
  display: block;
  font-size: 0.74rem;
  color: #a89a87;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sim-metric-card strong {
  display: block;
  font: 800 1.5rem/1.2 var(--font-serif);
  color: #fff;
  margin-top: 6px;
}

.sim-metric-card small {
  display: block;
  font-size: 0.75rem;
  color: #b5a693;
  margin-top: 4px;
}

/* Taktiksel Çıkarımlar Not Kutusu */
.tactical-insights-box {
  padding: 22px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
  margin-bottom: 34px;
}

.tactical-insights-box h4 {
  font: 800 1.05rem/1.2 var(--font-serif);
  color: var(--gold-400);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tactical-insights-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tactical-insights-list li {
  position: relative;
  padding-left: 24px;
  color: #d9c9b2;
  font-size: 0.88rem;
  line-height: 1.6;
}

.tactical-insights-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-400);
}

/* Birlik Kayıp ve Kalan Tabloları */
.casualties-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 960px) {
  .casualties-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.casualties-card {
  padding: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.casualties-card h4 {
  font: 800 1.15rem/1.2 var(--font-serif);
  color: #fff;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

.casualties-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.casualties-table th {
  padding: 8px 10px;
  text-align: left;
  font: 800 0.72rem/1 var(--font-serif);
  color: #9f9180;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.casualties-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #e2d7c5;
}

.casualties-table tr:last-child td {
  border-bottom: none;
}

.casualties-table .unit-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #fff;
}

.casualties-table .unit-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.4);
}

.casualties-table .lost-num {
  color: #ff746f;
  font-weight: 700;
}

.casualties-table .survived-num {
  color: #2ecc71;
  font-weight: 700;
}

/* Sayfa Altındaki Savaş Matematiği Bölümü */
.sim-docs-section {
  margin-top: 70px;
  padding: 40px;
  border-radius: 20px;
  border: 1px solid var(--sim-border);
  background: rgba(14, 8, 5, 0.75);
}

.sim-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.sim-doc-card {
  padding: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sim-doc-card h3 {
  font: 800 0.98rem/1.2 var(--font-serif);
  color: var(--gold-400);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sim-doc-card p {
  color: #aa9e90;
  font-size: 0.85rem;
  line-height: 1.65;
}

/* Mobil İyileştirmeleri */
@media (max-width: 768px) {
  .battle-results-panel {
    padding: 20px;
  }
  .result-banner {
    padding: 18px;
  }
  .result-banner-left h3 {
    font-size: 1.35rem;
  }
  .btn-simulate-battle {
    width: 100%;
    min-height: 58px;
    padding: 0 20px;
    font-size: 1rem;
  }
}