/* ══════════════════════════════════════════════════════════════════
   📡 FRAKSİYON RADARI — üye bakışları, lider işareti, güçlü bildirim
   (faction-radar.js) — v79
   Renk değişkeni: --fcr  (fraksiyon rengi / işaret türü rengi)
══════════════════════════════════════════════════════════════════ */

#fc-radar-layer{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:45;                 /* pf-ping(40) üstü, HUD altı */
  overflow:hidden;
}

/* ══════════ ÜYE BAKIŞ İMLECİ ══════════ */
.fcr-look{
  position:absolute; left:0; top:0;
  display:flex; align-items:center; gap:5px;
  padding:2px 7px 2px 4px;
  background:rgba(10,10,20,.72);
  border:1px solid color-mix(in srgb, var(--fcr, #4f8cff) 55%, transparent);
  border-radius:10px;
  backdrop-filter:blur(4px);
  font-family:var(--font-ui, sans-serif);
  font-size:.58rem; font-weight:700; letter-spacing:.02em;
  color:#e8eaf8; white-space:nowrap;
  /* pointer-events YOK: bu etiketler haritanın üstünde yüzüyor; tıklanabilir
     olsalardı altlarındaki piksele basmayı yutarlardı (geçmişte pixel-info
     kutusuyla yaşanan hata). Birinin yanına gitmek için radar menüsündeki
     üye listesi kullanılır. */
  pointer-events:none;
  opacity:.82;
  transition:opacity .15s ease, transform .12s ease;
  will-change:transform;
}
.fcr-look:hover{ opacity:1; }
.fcr-look.lead{
  border-color:var(--fcr, #4f8cff);
  box-shadow:0 0 10px color-mix(in srgb, var(--fcr, #4f8cff) 45%, transparent);
}
.fcr-look-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--fcr, #4f8cff);
  box-shadow:0 0 6px var(--fcr, #4f8cff);
  flex:0 0 auto;
  animation:fcrBreath 2.4s ease-in-out infinite;
}
.fcr-look-name{ max-width:110px; overflow:hidden; text-overflow:ellipsis; }
/* Ekran dışındaysa kenarda küçülerek dursun */
.fcr-look.edge{ opacity:.5; font-size:.52rem; }
.fcr-look.edge .fcr-look-name{ max-width:70px; }

@keyframes fcrBreath{
  0%,100%{ transform:scale(1);   opacity:1;  }
  50%    { transform:scale(1.5); opacity:.55;}
}

/* ══════════ İŞARET FENERİ (PING) ══════════ */
.fcr-ping{
  position:absolute; left:0; top:0;
  width:0; height:0;
  will-change:transform;
  z-index:2;                  /* bakış etiketlerinin (z:1) üstünde kalsın */
  /* Ekrandayken TIKLANMAZ: işaretin durduğu piksele basmayı yutmasın.
     Ekran dışındayken (kenar oku) tıklamak tek işe yarar davranış olduğu
     için orada tıklanabilir olur (.edge kuralı aşağıda). */
  pointer-events:none;
}
.fcr-ping.edge{ pointer-events:auto; cursor:pointer; }
.fcr-look{ z-index:1; }
.fcr-ping .fcr-ring{
  position:absolute; left:50%; top:50%;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:2px solid var(--fcr, #f04a4a);
  border-radius:50%;
  opacity:0;
  animation:fcrRing 2.2s cubic-bezier(.2,.6,.35,1) infinite;
}
.fcr-ping .fcr-ring.r2{ animation-delay:.73s; }
.fcr-ping .fcr-ring.r3{ animation-delay:1.46s; }
@keyframes fcrRing{
  0%  { transform:scale(.35); opacity:.95; }
  70% { opacity:.35; }
  100%{ transform:scale(3.4); opacity:0;   }
}

.fcr-ping .fcr-core{
  position:absolute; left:50%; top:50%;
  width:30px; height:30px; margin:-15px 0 0 -15px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(10,10,20,.85);
  border:2px solid var(--fcr, #f04a4a);
  box-shadow:0 0 14px var(--fcr, #f04a4a), inset 0 0 8px color-mix(in srgb, var(--fcr,#f04a4a) 40%, transparent);
  color:var(--fcr, #f04a4a);
  animation:fcrPulse 1.6s ease-in-out infinite;
}
.fcr-ping .fcr-core svg,
.fcr-ping .fcr-core span{ width:16px; height:16px; }
@keyframes fcrPulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.12); }
}

.fcr-ping .fcr-tag{
  position:absolute; left:50%; top:20px;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  padding:2px 8px;
  background:rgba(10,10,20,.86);
  border:1px solid var(--fcr, #f04a4a);
  border-radius:8px;
  backdrop-filter:blur(4px);
  font-family:var(--font-display, sans-serif);
  white-space:nowrap; line-height:1.2;
}
.fcr-ping .fcr-tag b{
  font-size:.6rem; font-weight:800; letter-spacing:.06em;
  color:var(--fcr, #f04a4a); text-transform:uppercase;
}
.fcr-ping .fcr-tag i{
  font-style:normal; font-size:.52rem;
  color:rgba(255,255,255,.6);
}

/* Ekran dışı: kenarda yön oku */
.fcr-ping .fcr-arrow{ display:none; }
.fcr-ping.edge .fcr-ring{ display:none; }
.fcr-ping.edge .fcr-arrow{
  display:block;
  position:absolute; left:50%; top:50%;
  width:0; height:0; margin:-9px 0 0 14px;
  border:9px solid transparent;
  border-left-color:var(--fcr, #f04a4a);
  transform-origin:-14px 9px;
  transform:rotate(var(--fcr-ang, 0deg));
  filter:drop-shadow(0 0 5px var(--fcr, #f04a4a));
}

/* ══════════ GÜÇLÜ BİLDİRİM ŞERİDİ ══════════ */
#fcr-alert{
  position:fixed; top:0; left:0; right:0;
  z-index:9000;
  transform:translateY(-140%);
  transition:transform .32s cubic-bezier(.2,.9,.3,1.2);
  pointer-events:none;
  font-family:var(--font-display, sans-serif);
}
#fcr-alert.in { transform:translateY(0); }
#fcr-alert.out{ transform:translateY(-140%); }

/* Üstteki ikaz şeridi — kayan sarı-siyah bant */
.fcr-al-stripe{
  height:5px;
  background:repeating-linear-gradient(
    -45deg,
    var(--fcr, #f04a4a) 0 14px,
    rgba(0,0,0,.85) 14px 28px);
  animation:fcrStripe .7s linear infinite;
  background-size:39.6px 100%;
}
@keyframes fcrStripe{ to{ background-position:39.6px 0; } }

.fcr-al-body{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .9rem;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--fcr, #f04a4a) 26%, rgba(12,10,20,.96)),
    rgba(12,10,20,.96));
  border-bottom:1px solid var(--fcr, #f04a4a);
  box-shadow:0 8px 30px rgba(0,0,0,.6),
             0 0 40px color-mix(in srgb, var(--fcr,#f04a4a) 30%, transparent);
  /* Şerit haritanın üst bandını kaplıyor. TIKLAMA GEÇİRGEN olmalı: yoksa
     bildirim ekrandayken üst bantta kaydırma/piksel basma/tekerlekle zoom
     ölüyordu. Yalnız iki buton olayları yakalar. */
  pointer-events:none;
}
.fcr-al-go, .fcr-al-x{ pointer-events:auto; }

.fcr-al-ic{
  flex:0 0 auto;
  width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.4);
  border:1.5px solid var(--fcr, #f04a4a);
  color:var(--fcr, #f04a4a);
  animation:fcrPulse 1s ease-in-out infinite;
}
.fcr-al-ic svg, .fcr-al-ic span{ width:20px; height:20px; }

.fcr-al-txt{ flex:1 1 auto; min-width:0; }
.fcr-al-kind{
  font-size:.86rem; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fcr, #f04a4a);
  text-shadow:0 0 12px color-mix(in srgb, var(--fcr,#f04a4a) 60%, transparent);
  line-height:1.15;
}
.fcr-al-who{
  font-size:.68rem; color:#e8eaf8;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fcr-al-co{
  font-family:var(--font-mono, monospace);
  font-size:.58rem; color:rgba(255,255,255,.5);
}

.fcr-al-go{
  flex:0 0 auto;
  padding:.45rem .95rem;
  background:var(--fcr, #f04a4a);
  border:none; border-radius:8px;
  color:#fff; font-family:inherit;
  font-size:.72rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer;
  box-shadow:0 0 18px color-mix(in srgb, var(--fcr,#f04a4a) 55%, transparent);
  animation:fcrGo 1.3s ease-in-out infinite;
}
.fcr-al-go:hover{ filter:brightness(1.15); }
@keyframes fcrGo{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.05); }
}
.fcr-al-x{
  flex:0 0 auto;
  width:26px; height:26px;
  background:transparent; border:none;
  color:rgba(255,255,255,.45);
  font-size:1.2rem; line-height:1; cursor:pointer;
}
.fcr-al-x:hover{ color:#fff; }

/* Ekran kenarı nabzı */
.fcr-glow{
  position:fixed; inset:0; z-index:8999;
  pointer-events:none;
  box-shadow:inset 0 0 120px 20px color-mix(in srgb, var(--fcr,#f04a4a) 55%, transparent);
  animation:fcrGlow 2.4s ease-out forwards;
}
@keyframes fcrGlow{
  0%  { opacity:0;   }
  12% { opacity:.95; }
  40% { opacity:.35; }
  60% { opacity:.8;  }
  100%{ opacity:0;   }
}

/* Ekran sarsıntısı */
.fcr-shake{ animation:fcrShake .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes fcrShake{
  10%,90%{ transform:translate3d(-2px,0,0); }
  20%,80%{ transform:translate3d(4px,0,0);  }
  30%,50%,70%{ transform:translate3d(-7px,0,0); }
  40%,60%{ transform:translate3d(7px,0,0);  }
}

/* ══════════ RADAR BUTONU + PANEL ══════════ */
#fc-radar-btn{
  color:var(--fcr, #4f8cff);
  border-color:color-mix(in srgb, var(--fcr, #4f8cff) 45%, var(--bdr, #2a2b45));
}
#fc-radar-btn svg, #fc-radar-btn span{ width:16px; height:16px; }
#fc-radar-btn:hover{
  background:color-mix(in srgb, var(--fcr, #4f8cff) 18%, var(--surf2, #1c1d33));
}

#fcr-menu{
  position:fixed; z-index:2000;
  width:250px; max-height:60vh; overflow-y:auto;
  padding:.6rem;
  background:var(--surf, #14152a);
  border:1px solid color-mix(in srgb, var(--fcr, #4f8cff) 40%, var(--bdr2, #2a2b45));
  border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.6);
  font-family:var(--font-ui, sans-serif);
  color:var(--txt, #e8eaf8);
  animation:fcrMenuIn .14s ease;
}
@keyframes fcrMenuIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

.fcr-mhead{
  display:flex; flex-direction:column; gap:.35rem;
  padding-bottom:.45rem; margin-bottom:.4rem;
  border-bottom:1px solid var(--bdr2, #2a2b45);
}
.fcr-mhead b{
  display:flex; align-items:center; gap:.35rem;
  font-size:.74rem; font-weight:800; letter-spacing:.05em;
  color:var(--fcr, #4f8cff);
}
.fcr-mhead b svg, .fcr-mhead b span{ width:14px; height:14px; }
.fcr-mtog{
  display:flex; align-items:center; gap:.35rem;
  font-size:.62rem; color:var(--muted, #8b8db8); cursor:pointer;
}
.fcr-mtog input{ accent-color:var(--fcr, #4f8cff); cursor:pointer; }

.fcr-msec{
  font-size:.56rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted, #8b8db8);
  margin:.5rem 0 .3rem;
}
.fcr-mlist{ display:flex; flex-direction:column; gap:2px; }
.fcr-mrow{
  display:flex; align-items:center; gap:.4rem;
  width:100%; padding:.33rem .4rem;
  background:transparent; border:none; border-radius:6px;
  color:var(--txt, #e8eaf8); font-family:inherit;
  font-size:.66rem; text-align:left; cursor:pointer;
}
.fcr-mrow:hover{ background:var(--surf2, #1c1d33); }
.fcr-mdot{
  width:6px; height:6px; border-radius:50%; flex:0 0 auto;
  background:var(--fcr, #4f8cff);
  box-shadow:0 0 5px var(--fcr, #4f8cff);
}
.fcr-mname{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fcr-mco{
  font-family:var(--font-mono, monospace);
  font-size:.56rem; color:var(--muted, #8b8db8); flex:0 0 auto;
}
.fcr-mempty{
  padding:.5rem .3rem; font-size:.62rem;
  color:var(--muted, #8b8db8); text-align:center;
}

.fcr-mping{ display:flex; flex-direction:column; gap:4px; }
.fcr-pbtn{
  display:flex; align-items:center; gap:.45rem;
  width:100%; padding:.42rem .5rem;
  background:var(--surf2, #1c1d33);
  border:1px solid var(--bdr2, #2a2b45);
  border-radius:8px;
  color:var(--txt, #e8eaf8); font-family:inherit;
  font-size:.68rem; font-weight:700; cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.fcr-pbtn span{ display:flex; }
.fcr-pbtn span svg, .fcr-pbtn span > span{ width:14px; height:14px; }
.fcr-pbtn.attack{ color:#f04a4a; }
.fcr-pbtn.defend{ color:#3b82f6; }
.fcr-pbtn.gather{ color:#f5a623; }
.fcr-pbtn:hover{ border-color:currentColor; background:rgba(255,255,255,.05); }

.fcr-mhint{
  margin-top:.4rem; font-size:.55rem; line-height:1.4;
  color:var(--muted, #8b8db8);
}

/* ══════════ PİKSEL BASAN ÜYENİN ADI ══════════ */
.fcr-pxname{
  position:absolute; left:0; top:0;
  display:flex; flex-direction:column; align-items:center;
  padding:2px 8px;
  background:rgba(10,10,20,.88);
  border:1px solid var(--fcr, #4f8cff);
  border-radius:8px;
  backdrop-filter:blur(3px);
  font-family:var(--font-ui, sans-serif);
  line-height:1.15;
  white-space:nowrap;
  pointer-events:none;               /* piksel basmayı yutmasın */
  z-index:3;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  box-shadow:0 0 8px color-mix(in srgb, var(--fcr, #4f8cff) 40%, transparent);
  animation:fcrNameIn .18s cubic-bezier(.2,.9,.3,1.4);
  transition:opacity .8s ease;
  will-change:transform;
}
/* Ad: "kimin bastığını GÖREBİLMEK" istendi — bakış etiketlerinden bir tık
   büyük ve kontrastlı, çünkü kısa süre görünüp kayboluyor. */
.fcr-pxname b{
  font-size:.66rem; font-weight:800; letter-spacing:.02em;
  color:#fff;
}
/* Ne yaptığı — "bakıyor" etiketleriyle karışmasın */
.fcr-pxname i{
  font-style:normal;
  font-size:.5rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--fcr, #4f8cff);
}
.fcr-pxname.fade{ opacity:0; }
@keyframes fcrNameIn{
  from{ opacity:0; transform:translate(-50%,-100%) scale(.7); }
}

/* İşaret geri çekilirken */
.fcr-ping.gone{
  opacity:0 !important;
  transform-origin:center;
  transition:opacity .25s ease;
}

/* ══════════ ORTA TUŞ SEÇİCİSİ ══════════ */
#fcr-pick{
  position:fixed; z-index:2100;
  min-width:150px; padding:.4rem;
  background:var(--surf, #14152a);
  border:1px solid color-mix(in srgb, var(--fcr, #4f8cff) 45%, var(--bdr2, #2a2b45));
  border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.6);
  font-family:var(--font-ui, sans-serif);
  color:var(--txt, #e8eaf8);
  opacity:0; transform:scale(.9);
  transform-origin:top left;
  transition:opacity .11s ease, transform .11s cubic-bezier(.2,.9,.3,1.3);
}
#fcr-pick.in{ opacity:1; transform:scale(1); }

.fcr-pk-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
  padding:.15rem .3rem .35rem;
  margin-bottom:.3rem;
  border-bottom:1px solid var(--bdr2, #2a2b45);
}
.fcr-pk-head span{
  font-size:.55rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted, #8b8db8);
}
.fcr-pk-head b{
  font-family:var(--font-mono, monospace);
  font-size:.58rem; color:var(--fcr, #4f8cff);
}

.fcr-pk-btn{
  display:flex; align-items:center; gap:.45rem;
  width:100%; padding:.4rem .5rem;
  background:transparent; border:1px solid transparent; border-radius:7px;
  color:var(--txt, #e8eaf8); font-family:inherit;
  font-size:.7rem; font-weight:700; text-align:left; cursor:pointer;
}
.fcr-pk-btn span{ display:flex; }
.fcr-pk-btn span svg, .fcr-pk-btn span > span{ width:14px; height:14px; }
.fcr-pk-btn.attack{ color:#f04a4a; }
.fcr-pk-btn.defend{ color:#3b82f6; }
.fcr-pk-btn.gather{ color:#f5a623; }
.fcr-pk-btn:hover{ border-color:currentColor; background:rgba(255,255,255,.06); }

/* ══════════ HEDEF SEÇİMİ (Herkes / Alay) ══════════ */
.fcr-pk-targets{
  display:flex; flex-wrap:wrap; gap:3px;
  padding:0 .1rem .4rem;
  margin-bottom:.35rem;
  border-bottom:1px solid var(--bdr2, #2a2b45);
}
.fcr-pk-t{
  padding:.2rem .45rem;
  background:transparent;
  border:1px solid var(--bdr2, #2a2b45);
  border-radius:20px;
  color:var(--muted, #8b8db8);
  font-family:inherit; font-size:.55rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:all .12s ease;
}
.fcr-pk-t[style*="--u"]{ color:var(--u); border-color:color-mix(in srgb, var(--u) 40%, transparent); }
.fcr-pk-t:hover{ background:rgba(255,255,255,.06); }
.fcr-pk-t.sel{
  background:var(--u, #f04a4a);
  border-color:var(--u, #f04a4a);
  color:#fff;
}

/* ══════════ ALAY EMRİ — küçük, renkli, sarsıntısız ══════════ */
#fcr-unit-alert{
  position:fixed; right:14px; top:70px; z-index:8990;
  display:flex; align-items:center; gap:.5rem;
  max-width:min(340px, calc(100vw - 28px));
  padding:.45rem .5rem;
  background:rgba(12,10,20,.95);
  border:1px solid var(--fcr, #4f8cff);
  border-left:4px solid var(--fcr, #4f8cff);
  border-radius:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.55),
             0 0 18px color-mix(in srgb, var(--fcr, #4f8cff) 30%, transparent);
  font-family:var(--font-display, sans-serif);
  opacity:0; transform:translateX(20px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.2);
}
#fcr-unit-alert.in { opacity:1; transform:none; }
#fcr-unit-alert.out{ opacity:0; transform:translateX(20px); }

.fcr-ua-ic{
  flex:0 0 auto; width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--fcr, #4f8cff) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--fcr, #4f8cff) 55%, transparent);
  color:var(--fcr, #4f8cff);
}
.fcr-ua-ic svg, .fcr-ua-ic span{ width:14px; height:14px; }

.fcr-ua-txt{ flex:1 1 auto; min-width:0; }
.fcr-ua-top{ display:flex; align-items:baseline; gap:.35rem; }
.fcr-ua-unit{
  font-size:.66rem; font-weight:900; letter-spacing:.04em;
  color:var(--fcr, #4f8cff);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fcr-ua-kind{
  font-size:.56rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#e8eaf8;
}
.fcr-ua-sub{
  font-size:.52rem; color:rgba(255,255,255,.5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fcr-ua-go{
  flex:0 0 auto; padding:.3rem .6rem;
  background:var(--fcr, #4f8cff); border:none; border-radius:6px;
  color:#fff; font-family:inherit; font-size:.6rem; font-weight:800;
  text-transform:uppercase; cursor:pointer;
}
.fcr-ua-go:hover{ filter:brightness(1.15); }
.fcr-ua-x{
  flex:0 0 auto; width:20px; height:20px;
  background:transparent; border:none;
  color:rgba(255,255,255,.4); font-size:1rem; line-height:1; cursor:pointer;
}
.fcr-ua-x:hover{ color:#fff; }

/* ══════════ MOBİL ══════════ */
@media (max-width: 768px){
  #fcr-menu{
    left:50% !important; right:auto;
    bottom:90px !important;
    transform:translateX(-50%);
    width:min(300px, calc(100vw - 24px));
  }
  .fcr-al-body{ padding:.5rem .6rem; gap:.5rem; }
  .fcr-al-ic{ width:32px; height:32px; }
  .fcr-al-kind{ font-size:.74rem; }
  .fcr-al-who{ font-size:.6rem; }
  .fcr-al-go{ padding:.4rem .7rem; font-size:.64rem; }
  .fcr-look{ font-size:.52rem; padding:1px 5px 1px 3px; }
  .fcr-look-name{ max-width:76px; }
  #fcr-unit-alert{
    right:8px; left:8px; top:64px;
    max-width:none;
  }
  .fcr-ua-unit{ font-size:.6rem; }
  .fcr-ua-kind{ font-size:.52rem; }
  .fcr-pxname{ padding:2px 6px; }
  .fcr-pxname b{ font-size:.6rem; }
  .fcr-pxname i{ font-size:.46rem; }
  .fcr-ping .fcr-tag b{ font-size:.54rem; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){
  .fcr-shake{ animation:none; }
  .fcr-al-stripe, .fcr-al-go, .fcr-al-ic,
  .fcr-ping .fcr-core, .fcr-look-dot{ animation:none; }
  .fcr-ping .fcr-ring{ animation-duration:3s; }
}