/* ══════════════════════════════════════════════════════════════
   BÖLGE İZLEME (region-watch.js)

   İki parça:
     1) SEÇİM KATMANI — haritada sürükleyerek dikdörtgen seç
     2) İZLEME PANELİ — o alana kim basıyor, canlı

   Panel sağ altta sabit bir "telsiz" gibi durur: harita açık kalır,
   oyuncu izlerken piksel basmaya devam edebilir. Bu yüzden panel
   haritanın ÜSTÜNÜ KAPATMAZ ve modal DEĞİLDİR.
══════════════════════════════════════════════════════════════ */

/* ── 1. SEÇİM KATMANI ── */
#rw-sel{
  display:none; position:fixed; inset:0; z-index:9300;
  background:rgba(0,0,0,.42); cursor:crosshair;
}
#rw-sel-box{
  display:none; position:fixed; pointer-events:none;
  border:2px dashed var(--accent, #7B61FF);
  background:rgba(var(--accent-rgb, 123,97,255), .14);
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
#rw-sel-hud{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.7rem; pointer-events:none;
  background:var(--surf, #0a1020);
  border:1px solid var(--bdr2, #33415f);
  border-radius:11px; padding:.55rem .9rem;
  box-shadow:0 6px 26px rgba(0,0,0,.6);
  font-size:.78rem; font-weight:600; color:var(--txt, #eef2fd);
  max-width:min(94vw, 520px);
}
#rw-sel-hud b{
  font-family:var(--font-mono); color:var(--accent-text, var(--accent));
  font-size:.8rem; min-width:64px;
}
#rw-sel-hud i{ font-style:normal; font-size:.64rem; color:var(--muted, #95a3c6); }

/* ── 2. İZLENEN ALANIN HARİTADAKİ ÇERÇEVESİ ──
   TUZAK: harita üstündeki katmanlar tıklamayı YUTMAMALI, yoksa piksel
   basılamaz (radar ve ülke katmanlarında yaşandı). pointer-events:none. */
#rw-frame{
  position:absolute; pointer-events:none; z-index:43;
  border:1.5px solid var(--accent, #7B61FF);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),
             0 0 14px rgba(var(--accent-rgb, 123,97,255), .45),
             inset 0 0 22px rgba(var(--accent-rgb, 123,97,255), .10);
  border-radius:2px;
}
.rw-frame-tag{
  position:absolute; left:0; top:-1.15rem; white-space:nowrap;
  font-family:var(--font-mono); font-size:.52rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--accent, #7B61FF);
  padding:.06rem .3rem; border-radius:3px;
}

/* ── 3. İZLEME PANELİ ── */
#rw-panel{
  display:none; position:fixed; z-index:610;
  right:14px; bottom:14px; width:min(320px, calc(100vw - 28px));
  max-height:min(62vh, 520px);
  flex-direction:column;
  background:linear-gradient(165deg,
    rgba(var(--surf2-rgb, 17,26,46), .97) 0%,
    rgba(var(--surf-rgb, 10,16,32), .99) 100%);
  border:1px solid var(--bdr2, #33415f);
  border-radius:14px;
  box-shadow:var(--pf-sh2, 0 14px 40px rgba(0,0,0,.5));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  overflow:hidden;
}
#rw-panel.open{ display:flex; }

.rw-head{
  display:flex; align-items:center; gap:.45rem; flex-shrink:0;
  padding:.6rem .7rem .5rem;
  border-bottom:1px solid var(--pf-hair, rgba(255,255,255,.075));
}
.rw-title{
  flex:1; min-width:0;
  font-family:var(--font-display); font-size:.8rem; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; color:var(--txt, #eef2fd);
}
/* Canlılık lambası: alanda şu an basan varsa yanıp söner */
.rw-live-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--muted, #95a3c6); box-shadow:none;
}
.rw-live-dot.on{
  background:#22d3a5; box-shadow:0 0 8px #22d3a5;
  animation:rwBreath 1.8s ease-in-out infinite;
}
@keyframes rwBreath{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.rw-x{
  border:none; background:transparent; cursor:pointer; flex-shrink:0;
  color:var(--muted, #95a3c6); font-size:.85rem; line-height:1;
  padding:.15rem .3rem; border-radius:5px;
}
.rw-x:hover{ color:var(--txt, #fff); background:rgba(255,255,255,.07); }

.rw-meta{
  display:flex; align-items:center; gap:.35rem; flex-shrink:0;
  padding:.4rem .7rem;
  font-family:var(--font-mono); font-size:.62rem; color:var(--muted, #95a3c6);
}
.rw-sep{ opacity:.5; }
.rw-goto{
  margin-left:auto; cursor:pointer;
  border:1px solid var(--bdr2, #33415f); background:transparent;
  color:var(--txt, #eef2fd); border-radius:6px;
  padding:.16rem .42rem; font-size:.6rem; font-weight:700;
  font-family:var(--font-ui, sans-serif);
}
.rw-goto:hover{ border-color:var(--accent, #7B61FF); color:var(--accent-text, var(--accent)); }

/* Üç sayı: piksel · oyuncu · şu an */
.rw-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem;
  padding:0 .7rem .5rem; flex-shrink:0;
}
.rw-stat{
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding:.35rem .2rem; border-radius:8px;
  background:rgba(var(--surf3-rgb, 28,40,66), .55);
  border:1px solid var(--pf-hair, rgba(255,255,255,.075));
}
.rw-stat b{
  font-family:var(--font-mono); font-size:.86rem; font-weight:800;
  color:var(--txt, #eef2fd); line-height:1.15; font-variant-numeric:tabular-nums;
}
.rw-stat span{
  font-size:.52rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted, #95a3c6);
}
.rw-stat.hot{
  background:rgba(34,211,165,.12); border-color:rgba(34,211,165,.32);
}
.rw-stat.hot b{ color:#22d3a5; }

/* Oyuncu listesi */
.rw-list{
  flex:1; min-height:0; overflow-y:auto;
  padding:0 .5rem .4rem; display:flex; flex-direction:column; gap:1px;
}
.rw-list::-webkit-scrollbar{ width:3px; }
.rw-list::-webkit-scrollbar-thumb{ background:var(--bdr, #1f2b47); border-radius:2px; }
.rw-row{
  display:grid; grid-template-columns:16px 8px 1fr auto auto auto;
  align-items:center; gap:.35rem;
  padding:.28rem .3rem; border-radius:7px; font-size:.7rem;
}
.rw-row:nth-child(odd){ background:rgba(128,140,180,.05); }
.rw-row.me{
  background:rgba(var(--accent-rgb, 123,97,255), .14);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb, 123,97,255), .3);
}
.rw-pos{
  font-family:var(--font-mono); font-size:.58rem; color:var(--muted, #95a3c6);
  text-align:right; font-variant-numeric:tabular-nums;
}
/* Satır lambası — o oyuncu ŞU AN basıyorsa yeşil */
.rw-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--bdr2, #33415f);
}
.rw-row.live .rw-dot{
  background:#22d3a5; box-shadow:0 0 6px #22d3a5;
  animation:rwBreath 1.8s ease-in-out infinite;
}
.rw-name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--txt, #eef2fd); cursor:pointer; font-weight:600;
}
.rw-name:hover{ color:var(--accent-text, var(--accent)); text-decoration:underline; }
/* İzlemeye başladığından beri eklediği piksel */
.rw-new{
  font-family:var(--font-mono); font-size:.56rem; font-weight:800;
  color:#22d3a5; background:rgba(34,211,165,.14);
  border-radius:4px; padding:.02rem .22rem;
}
.rw-when{
  font-family:var(--font-mono); font-size:.54rem; color:var(--muted, #95a3c6);
  min-width:22px; text-align:right;
}
.rw-px{
  font-family:var(--font-mono); font-size:.66rem; font-weight:800;
  color:var(--accent-text, var(--accent)); min-width:34px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.rw-empty{
  padding:1rem .6rem; text-align:center;
  font-size:.66rem; line-height:1.5; color:var(--muted, #95a3c6);
}

.rw-foot{
  flex-shrink:0; padding:.45rem .7rem .6rem;
  border-top:1px solid var(--pf-hair, rgba(255,255,255,.075));
}
.rw-again{
  width:100%; cursor:pointer;
  border:1px solid var(--bdr2, #33415f); background:transparent;
  color:var(--txt, #eef2fd); border-radius:8px;
  padding:.4rem; font-size:.68rem; font-weight:700;
}
.rw-again:hover{
  border-color:var(--accent, #7B61FF);
  background:rgba(var(--accent-rgb, 123,97,255), .1);
}

/* Telefon: panel alta tam genişlik yapışır — tek elle okunur */
@media (max-width:560px){
  #rw-panel{
    right:8px; left:8px; bottom:8px; width:auto;
    max-height:min(54vh, 420px);
  }
  #rw-sel-hud{ font-size:.7rem; padding:.5rem .7rem; gap:.5rem; }
  #rw-sel-hud i{ display:none; }   /* telefonda ESC yok */
}

@media (prefers-reduced-motion: reduce){
  .rw-live-dot.on, .rw-row.live .rw-dot{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════
   BÖLGE SOHBETİ + BAKIŞLAR
══════════════════════════════════════════════════════════════ */

/* ── Bakış etiketleri (haritada) ──
   TUZAK: katman tıklamayı YUTMAMALI, yoksa altındaki piksele basılamaz. */
#rw-look-layer{
  position:absolute; inset:0; pointer-events:none; z-index:44; overflow:hidden;
}
.rw-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 rgba(var(--accent-rgb, 123,97,255), .6);
  border-radius:10px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-family:var(--font-ui, sans-serif);
  font-size:.58rem; font-weight:700; color:#e8eaf8; white-space:nowrap;
  pointer-events:none; opacity:.9;
  transition:opacity .15s ease, transform .12s ease;
  will-change:transform;
}
.rw-look.edge{ opacity:.55; font-size:.52rem; }
.rw-look-dot{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--accent, #7B61FF);
  box-shadow:0 0 6px var(--accent, #7B61FF);
  animation:rwBreath 2.4s ease-in-out infinite;
}
.rw-look-name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; }

/* ── Sohbet bloğu (panelin içinde) ── */
.rw-chat{
  display:flex; flex-direction:column; min-height:0; flex-shrink:0;
  border-top:1px solid var(--pf-hair, rgba(255,255,255,.075));
  max-height:210px;
}
.rw-chat-head{
  display:flex; align-items:center; gap:.4rem; flex-shrink:0;
  padding:.45rem .7rem .35rem;
}
.rw-chat-title{
  flex:1; min-width:0;
  font-family:var(--font-display, sans-serif); font-size:.68rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--txt, #eef2fd);
}
.rw-chat-eyes{
  font-family:var(--font-mono, monospace); font-size:.58rem;
  color:var(--muted, #95a3c6); flex-shrink:0;
}
.rw-chat-eyes b{ color:var(--accent-text, var(--accent)); }
.rw-chat-x{
  flex-shrink:0; cursor:pointer;
  border:1px solid var(--bdr2, #33415f); background:transparent;
  color:var(--muted, #95a3c6); border-radius:6px;
  padding:.12rem .38rem; font-size:.56rem; font-weight:700;
}
.rw-chat-x:hover{ color:var(--red, #ff4d67); border-color:var(--red, #ff4d67); }

.rw-chat-list{
  flex:1; min-height:64px; overflow-y:auto;
  padding:0 .7rem .3rem; display:flex; flex-direction:column; gap:2px;
}
.rw-chat-list::-webkit-scrollbar{ width:3px; }
.rw-chat-list::-webkit-scrollbar-thumb{ background:var(--bdr, #1f2b47); border-radius:2px; }
.rw-msg{ display:flex; gap:.32rem; font-size:.66rem; line-height:1.4; }
.rw-msg-u{
  flex-shrink:0; font-weight:800; color:var(--accent-text, var(--accent));
  max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rw-msg.me .rw-msg-u{ color:#22d3a5; }
.rw-msg-t{ min-width:0; color:var(--txt, #eef2fd); overflow-wrap:anywhere; }

.rw-chat-in{
  display:flex; gap:.3rem; flex-shrink:0; padding:.35rem .7rem .5rem;
}
.rw-chat-in input{
  flex:1; min-width:0; box-sizing:border-box;
  background:rgba(0,0,0,.28);
  border:1px solid var(--bdr2, #33415f); border-radius:8px;
  color:var(--txt, #eef2fd);
  /* 16px: iOS Safari daha küçük yazıda alanı otomatik yakınlaştırır */
  padding:.34rem .5rem; font-size:16px; outline:none;
  font-family:var(--font-ui, sans-serif);
}
.rw-chat-in input:focus{ border-color:var(--accent, #7B61FF); }
.rw-chat-in button{
  flex-shrink:0; cursor:pointer;
  border:1px solid var(--accent, #7B61FF);
  background:rgba(var(--accent-rgb, 123,97,255), .16);
  color:var(--accent-text, var(--accent)); border-radius:8px;
  padding:.34rem .55rem; font-size:.66rem; font-weight:700;
}
.rw-chat-in button:hover{ background:rgba(var(--accent-rgb, 123,97,255), .28); }

.rw-chat-new{
  width:100%; cursor:pointer; margin-bottom:.35rem;
  border:1px solid var(--accent, #7B61FF);
  background:rgba(var(--accent-rgb, 123,97,255), .14);
  color:var(--accent-text, var(--accent)); border-radius:8px;
  padding:.42rem; font-size:.68rem; font-weight:800;
}
.rw-chat-new:hover{ background:rgba(var(--accent-rgb, 123,97,255), .26); }

/* ── "Yakında sohbet açıldı" bildirimi ── */
#rw-notice{
  position:fixed; left:50%; top:14px; z-index:9500;
  transform:translate(-50%, -18px); opacity:0;
  display:flex; align-items:center; gap:.5rem;
  max-width:min(94vw, 460px);
  padding:.5rem .6rem .5rem .7rem;
  background:linear-gradient(160deg,
    rgba(var(--surf2-rgb, 17,26,46), .98), rgba(var(--surf-rgb, 10,16,32), .99));
  border:1px solid rgba(var(--accent-rgb, 123,97,255), .5);
  border-radius:12px;
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  transition:opacity .25s ease, transform .25s ease;
}
#rw-notice.show{ opacity:1; transform:translate(-50%, 0); }
.rw-notice-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--accent, #7B61FF); box-shadow:0 0 8px var(--accent, #7B61FF);
  animation:rwBreath 1.8s ease-in-out infinite;
}
.rw-notice-txt{
  flex:1; min-width:0; font-size:.72rem; font-weight:600;
  color:var(--txt, #eef2fd);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rw-notice-go{
  flex-shrink:0; cursor:pointer;
  border:none; background:var(--accent, #7B61FF); color:#fff;
  border-radius:7px; padding:.3rem .6rem; font-size:.68rem; font-weight:800;
}
.rw-notice-x{
  flex-shrink:0; cursor:pointer; border:none; background:transparent;
  color:var(--muted, #95a3c6); font-size:.8rem; padding:.2rem .3rem;
}

@media (max-width:560px){
  .rw-chat{ max-height:170px; }
  #rw-notice{ left:8px; right:8px; transform:translate(0,-18px); max-width:none; }
  #rw-notice.show{ transform:translate(0,0); }
}
@media (prefers-reduced-motion: reduce){
  .rw-look-dot, .rw-notice-dot{ animation:none; }
  #rw-notice{ transition:none; }
}