/* ── Savaş İlan Banner'ı ── */
#war-banner{
  position:fixed;top:0;left:0;right:0;z-index:950;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
  /* tam overlay — arka plan kararır */
}
#war-banner-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition:background .4s, backdrop-filter .4s;
  pointer-events:none;z-index:949;
}
#war-banner-overlay.show{
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#war-banner-card{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.7);
  opacity:0;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  z-index:951;
  width:min(560px, 96vw);
  background:linear-gradient(165deg,#0d0a1a 0%,#1a0d14 50%,#0d0a1a 100%);
  color:#e8eaf8; /* açık/koyu moddan bağımsız — bu kart her zaman koyu, savaş temalı sabit tasarım */
  border:2px solid rgba(240,74,74,.6);
  border-radius:22px;
  padding:1.8rem 1.6rem 1.6rem;
  box-shadow:
    0 0 0 1px rgba(240,74,74,.2),
    0 0 40px rgba(240,74,74,.3),
    0 0 80px rgba(240,74,74,.15),
    0 32px 80px rgba(0,0,0,.8);
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  /* ── BUG FIX: görünmez ama tıklanabilir katman düzeltmesi ──
     opacity:0 bir elemanı GÖRSEL olarak gizler ama tıklamaları
     engellemez. Bu kart .show class'ı almadığı sürece ekranın
     ortasında (genelde diğer modallerin/butonların TAM üzerinde)
     gözle görünmez bir tıklama-yutan katman olarak duruyordu —
     örn. faction "Kur" butonuna basan kullanıcı farkında olmadan
     bu kartın (görünmez) kapatma butonuna basıyordu. Çözüm:
     varsayılan durumda pointer-events:none, sadece .show ile
     birlikte pointer-events:auto. */
  pointer-events:none;
}
#war-banner-card.show{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  pointer-events:auto;
}

/* Kırmızı pırıltı efekti */
#war-banner-card::before{
  content:'';position:absolute;inset:-2px;border-radius:24px;
  background:linear-gradient(135deg,#f04a4a00,#f04a4a60,#f04a4a00,#c41c1c60,#f04a4a00);
  background-size:300% 300%;
  animation:war-border-anim 2s linear infinite;
  z-index:-1;
}
@keyframes war-border-anim{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

.war-title{
  font-size:.65rem;font-weight:900;letter-spacing:.22em;
  text-transform:uppercase;
  color:#f04a4a;
}
@keyframes war-title-anim{
  0%{background-position:0%}100%{background-position:200%}
}

.war-vs-row{
  display:flex;align-items:center;gap:1rem;width:100%;justify-content:center;
}
.war-faction-card{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:.9rem .7rem;
}
.war-faction-emoji{font-size:2rem;line-height:1;}
.war-faction-name{
  font-size:.82rem;font-weight:800;text-align:center;
  line-height:1.2;color:#fff;
}
.war-faction-tag{
  font-size:.58rem;font-family:var(--font-mono);
  color:rgba(255,255,255,.4);
}
.war-vs-text{
  font-size:1.8rem;font-weight:900;
  color:#f04a4a;
  text-shadow:0 0 20px rgba(240,74,74,.8), 0 0 40px rgba(240,74,74,.4);
  animation:vs-pulse 0.8s ease-in-out infinite alternate;
  flex-shrink:0;
}
@keyframes vs-pulse{
  from{transform:scale(1);text-shadow:0 0 20px rgba(240,74,74,.8);}
  to{transform:scale(1.15);text-shadow:0 0 30px rgba(240,74,74,1),0 0 60px rgba(240,74,74,.5);}
}

.war-desc{
  font-size:.75rem;color:rgba(255,255,255,.6);text-align:center;line-height:1.6;
}
.war-desc b{color:#fca5a5;}

.war-close-btn{
  background:rgba(240,74,74,.15);border:1px solid rgba(240,74,74,.4);
  border-radius:10px;color:#fca5a5;
  font-family:var(--font-display);font-size:.8rem;font-weight:800;
  padding:.6rem 2rem;cursor:pointer;
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.war-close-btn:hover{background:rgba(240,74,74,.28);border-color:#f04a4a;}

/* Savaş kıvılcımları (parçacık efekti) */
.war-spark{
  position:fixed;width:4px;height:4px;border-radius:50%;
  pointer-events:none;z-index:952;
  animation:spark-fly var(--dur,1.2s) ease-out forwards;
}
@keyframes spark-fly{
  0%{opacity:1;transform:translate(0,0) scale(1);}
  100%{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) scale(0);}
}

/* ── İttifak Banner'ı ── */
#ally-banner-card{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.75);
  opacity:0;
  transition:transform .4s cubic-bezier(.34,1.5,.64,1), opacity .3s ease;
  z-index:951;
  width:min(500px,96vw);
  background:linear-gradient(160deg,#0a1a12 0%,#0d2018 50%,#0a1a12 100%);
  color:#e8eaf8; /* açık/koyu moddan bağımsız — bu kart her zaman koyu, sabit tasarım */
  border:2px solid rgba(0,212,160,.5);
  border-radius:20px;
  padding:1.6rem 1.4rem 1.4rem;
  box-shadow:0 0 40px rgba(0,212,160,.25), 0 32px 80px rgba(0,0,0,.7);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  /* ── BUG FIX: bkz. #war-banner-card'daki aynı düzeltme açıklaması ── */
  pointer-events:none;
}
#ally-banner-card.show{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  pointer-events:auto;
}
.ally-title{
  font-size:.6rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  color:#33e8b0;
}
.ally-handshake{
  font-size:2.8rem;
  animation:handshake-bounce .6s ease-in-out 3;
}
@keyframes handshake-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.ally-names{
  font-size:.88rem;font-weight:800;color:#fff;text-align:center;line-height:1.7;
}
.ally-close-btn{
  background:rgba(0,212,160,.12);border:1px solid rgba(0,212,160,.35);
  border-radius:10px;color:#33e8b0;
  font-family:var(--font-display);font-size:.78rem;font-weight:800;
  padding:.55rem 1.8rem;cursor:pointer;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.ally-close-btn:hover{background:rgba(0,212,160,.22);border-color:#00d4a0;}

/* Savaş ekranı titremesi */
@keyframes war-screen-shake{
  0%,100%{transform:translate(0,0);}
  10%{transform:translate(-4px,2px);}
  20%{transform:translate(4px,-3px);}
  30%{transform:translate(-3px,4px);}
  40%{transform:translate(3px,-2px);}
  50%{transform:translate(-2px,3px);}
  60%{transform:translate(4px,2px);}
  70%{transform:translate(-3px,-3px);}
  80%{transform:translate(2px,4px);}
  90%{transform:translate(-4px,-2px);}
}
body.war-shake{animation:war-screen-shake .5s ease-in-out;}

/* Mobil uyum */
@media (max-width:768px){
  #war-banner-card, #ally-banner-card{
    padding:1.3rem 1rem 1.1rem;gap:.85rem;
    border-radius:18px 18px 0 0;
    top:auto;bottom:0;left:0;right:0;
    transform:translateY(100%);
    width:100%;max-width:100%;
  }
  #war-banner-card.show, #ally-banner-card.show{
    transform:translateY(0);
  }
  .war-vs-text{font-size:1.4rem;}
  .war-faction-emoji{font-size:1.6rem;}
  .war-faction-name{font-size:.76rem;}
  .war-title{font-size:.58rem;}
  .ally-handshake{font-size:2.2rem;}
  .ally-names{font-size:.8rem;}
}

/* ── BÖLGE SEÇİM MODU ── */
#tpl-region-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1900;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  /* Dokunmatikte sürükleme tarayıcı kaydırmasına gitmesin —
     bu olmadan mobilde bölge seçimi hiç çalışmıyordu */
  touch-action: none;
}
#tpl-region-overlay.active { display: block; }

/* Hafif karartma */
#tpl-region-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}

/* Seçim dikdörtgeni */
#tpl-region-rect {
  position: fixed;
  border: 2px dashed rgba(255,255,255,0.9);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(167,139,250,0.4);
  pointer-events: none;
  display: none;
}
/* Köşe noktaları */
#tpl-region-rect::before,
#tpl-region-rect::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
#tpl-region-rect::before { top: -5px; left: -5px; }
#tpl-region-rect::after  { bottom: -5px; right: -5px; }

/* Üst bilgi paneli */
#tpl-region-info {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17,17,32,0.92);
  border: 1px solid rgba(167,139,250,0.4);
  border-radius: 14px;
  padding: .75rem 1.25rem;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  text-align: center;
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.6;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 1;
}
#tpl-region-info strong {
  color: #a78bfa;
  font-size: 1rem;
  display: block;
  margin-bottom: .2rem;
}
#tpl-region-info .tpl-ri-dim {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  color: #94e044;
  margin-top: .25rem;
  display: none;
}
/* Bölge boyut sınırına dayanıldığında (v78) — sürükleme büyümüyor,
   sebebini renkle de belli et */
#tpl-region-info .tpl-ri-dim.limit { color: #ffb454; }

/* Alt aksiyon barı */
#tpl-region-actions {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: .75rem;
  align-items: center;
  background: rgba(17,17,32,0.92);
  border: 1px solid rgba(167,139,250,0.35);
  border-radius: 14px;
  padding: .65rem 1rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  white-space: nowrap;
  pointer-events: all;
  z-index: 2;
}
#tpl-region-actions.visible { display: flex; }

#tpl-region-confirm {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: .55rem 1.2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .03em;
  transition: opacity .15s;
}
#tpl-region-confirm:hover { opacity: .85; }

#tpl-region-cancel {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9px;
  padding: .55rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
#tpl-region-cancel:hover { opacity: .7; }

#tpl-region-reset {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  padding: .55rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
#tpl-region-reset:hover { opacity: .7; }


/* ══════════════════════════════════════════════════════════════════
   SAVAŞ ŞERİDİ (wz-banner)                              2026-07-26
   Eski sürüm baştan sona kırmızı bir gradyandı: fraksiyon adları
   (kırmızı üstüne kırmızı) okunmuyordu ve kenarlardaki kıvılcım
   ikonları dağınık duruyordu. Yeni tasarım koyu mürekkep bir "ilan
   plakası": iki fraksiyon kendi renkli bloğunda, ortada VS mührü,
   üstte akan bir alarm hattı. Markup: war_zone.js _injectWzBannerHTML
══════════════════════════════════════════════════════════════════ */

/* Şerit YÜKSEKLİĞİ artık sabit değil: mobilde iki satıra dönüşüyor.
   Bu yüzden giriş animasyonu `top:-140px` ile değil translateY(-100%)
   ile yapılıyor — yükseklik ne olursa olsun şerit tam olarak ekranın
   dışında bekler. Eski sabit -140px, iki satırlık şeritte şeridin
   ucunun ekranda asılı kalmasına yol açardı. */
#wz-banner{
  position:fixed;
  top:0; left:0; right:0;
  z-index:9500;
  min-height:88px;
  cursor:pointer;
  user-select:none;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(24,8,12,.96) 0%, rgba(8,10,18,.97) 100%);
  border-bottom:1px solid rgba(240,74,74,.55);
  box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 60px rgba(240,74,74,.18);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
          backdrop-filter:blur(16px) saturate(140%);
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
#wz-banner.show{ transform:translateY(0); }

/* Üst kenarda akan alarm hattı — tek hareketli öğe, dikkati çeker
   ama metni okumayı zorlaştırmaz */
.wzb-alertline{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    rgba(240,74,74,0) 0%, rgba(240,74,74,.9) 30%,
    rgba(255,196,80,1) 50%, rgba(240,74,74,.9) 70%, rgba(240,74,74,0) 100%);
  background-size:220% 100%;
  animation:wzbAlert 2.6s linear infinite;
}
@keyframes wzbAlert{ from{background-position:120% 0} to{background-position:-120% 0} }

/* Yavaş geçen ışık — plakaya derinlik verir */
.wzb-sweep{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 35%, rgba(255,255,255,.055) 50%, transparent 65%);
  background-size:260% 100%;
  animation:wzbSweep 5.5s ease-in-out infinite;
}
@keyframes wzbSweep{ 0%{background-position:130% 0} 100%{background-position:-130% 0} }

.wzb-inner{
  position:relative; z-index:1;
  min-height:88px;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.6rem, 3vw, 2.4rem);
  /* Simetrik: eskiden sağ 56 / sol 20 idi, bu da plakayı görsel olarak
     sola kaydırıyordu. İki yanda da kapatma düğmesi kadar boşluk. */
  padding:0 56px;
}

/* ── Fraksiyon blokları ── */
.wzb-side{
  --wzb-fc:#f04a4a;
  flex:1 1 0;
  min-width:0;
  display:flex; flex-direction:column;
  gap:.15rem;
  padding:.4rem .7rem;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
  max-width:290px;
}
.wzb-side-a{ align-items:flex-end;  text-align:right; border-right:3px solid var(--wzb-fc); }
.wzb-side-b{ align-items:flex-start; text-align:left;  border-left:3px solid var(--wzb-fc); }

.wzb-fname{
  font-family:var(--font-display);
  font-size:1.02rem; font-weight:800;
  letter-spacing:.01em;
  color:#fff;
  /* Fraksiyon rengi metnin ARKASINDAN parlar — koyu renkli fraksiyonlar
     da okunur kalsın diye yazının kendisi beyaz bırakıldı */
  text-shadow:0 0 16px var(--wzb-fc), 0 2px 6px rgba(0,0,0,.7);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wzb-ftag{
  font-family:var(--font-mono);
  font-size:.6rem; font-weight:700;
  letter-spacing:.12em;
  color:var(--wzb-fc);
}

/* ── Orta: VS mührü + metinler ──
   flex-shrink:0 İDİ ve içindeki .wzb-sub tek satırdı: orta blok kendi
   doğal genişliğini (300px+) dayatıyor, iki fraksiyon bloğu 16px'e
   eziliyor ve şeridin dışına taşıyordu — telefonda fraksiyon adları
   hiç görünmüyordu. Artık orta blok da daralabiliyor, uzun metni
   .wzb-sub'un kendi ellipsis'i kesiyor. */
.wzb-center{ display:flex; align-items:center; gap:.7rem; flex:0 1 auto; min-width:0; }
.wzb-seal{
  width:44px; height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), rgba(0,0,0,.35));
  border:1px solid rgba(240,74,74,.55);
  box-shadow:0 0 0 4px rgba(240,74,74,.10), 0 4px 16px rgba(0,0,0,.5);
  animation:wzbPulse 2.2s ease-in-out infinite;
}
@keyframes wzbPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(240,74,74,.10), 0 4px 16px rgba(0,0,0,.5); }
  50%    { box-shadow:0 0 0 9px rgba(240,74,74,0),   0 4px 16px rgba(0,0,0,.5); }
}
.wzb-labels{ text-align:center; min-width:0; }
.wzb-eyebrow{
  font-family:var(--font-ui);
  font-size:.52rem; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase;
  color:#ff8a8a;
}
.wzb-title{
  font-family:var(--font-display);
  font-size:.82rem; font-weight:800;
  letter-spacing:.18em;
  color:rgba(255,255,255,.55);
  line-height:1.2;
}
.wzb-sub{
  font-family:var(--font-mono);
  font-size:.62rem;
  color:rgba(255,214,180,.8);
  letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.wzb-close{
  position:absolute; top:10px; right:10px; z-index:3;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.3);
  color:rgba(255,255,255,.65);
  cursor:pointer;
  transition:background .18s, color .18s, transform .18s cubic-bezier(.34,1.4,.5,1);
}
.wzb-close:hover{ background:rgba(240,74,74,.5); color:#fff; transform:rotate(90deg); }

/* ── MOBİL: tek satır yerine iki satır ──────────────────────────
   390px'lik bir ekranda "A · ⚔ · B · başlık · alt yazı" tek satıra
   sığmıyordu; orta blok bütün genişliği yutup fraksiyon bloklarını
   ekranın dışına itiyordu (soldaki tamamen kayboluyor, sağdaki
   kapatma düğmesinin altında kalıyordu). Çözüm: .wzb-center'a
   `display:contents` verilip çocukları doğrudan .wzb-inner'ın flex
   öğesi yapılıyor, sonra metinler `flex-basis:100%` ile ALT SATIRA
   sarıyor. Üst satır: [A] ⚔ [B] — alt satır: başlık + bölge. */
@media (max-width: 760px){
  #wz-banner, .wzb-inner{ min-height:0; }
  .wzb-inner{
    flex-wrap:wrap;
    row-gap:.25rem; column-gap:.5rem;
    /* sağda kapatma düğmesine yer + çentikli telefonlarda durum çubuğu payı */
    padding:calc(.55rem + env(safe-area-inset-top, 0px)) 50px .6rem 10px;
  }
  .wzb-center{ display:contents; }
  .wzb-side{ padding:.28rem .5rem; order:1; }
  .wzb-seal{ width:32px; height:32px; font-size:1rem; order:1; }
  .wzb-labels{
    order:2;
    flex:1 0 100%;      /* tam genişlik → ikinci satıra sarar */
    width:100%;
  }
  .wzb-fname{ font-size:.8rem; }
  .wzb-ftag{ font-size:.55rem; letter-spacing:.08em; }
  .wzb-eyebrow{ font-size:.5rem; letter-spacing:.18em; }
  .wzb-title{ font-size:.68rem; }
  .wzb-sub{ font-size:.56rem; }
  .wzb-close{ width:32px; height:32px; right:8px;
              top:calc(8px + env(safe-area-inset-top, 0px)); }
}

/* Çok dar ekran (≤360px): etiketler bile sığmıyor, adları küçült */
@media (max-width: 360px){
  .wzb-fname{ font-size:.72rem; }
  .wzb-ftag{ display:none; }
  .wzb-inner{ padding-right:46px; }
}
@media (prefers-reduced-motion: reduce){
  .wzb-alertline, .wzb-sweep, .wzb-seal{ animation:none !important; }
}