/* ─────────────────────────────────────────────
   ObbloxGun.io — tüm görsel stil
   ───────────────────────────────────────────── */

* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --sari:#ffd23f;
  --yesil:#3ddc84;
  --kirmizi:#ff4757;
  --mor:#8b5cf6;
  --koyu:#0e1116;
  --panel:rgba(14,17,22,.88);
}

html,body{
  width:100%; height:100%; overflow:hidden;
  background:var(--koyu);
  font-family:'Segoe UI',system-ui,sans-serif;
  color:#fff;
  user-select:none;
  -webkit-user-select:none;
  cursor:default;
}

canvas#sahne{ display:block; width:100%; height:100%; }

.gizli{ display:none !important; }

/* ── Oyun logosu ─────────────────────────────
   Lobide sol üstte; maça girince gizleniyor.

   Logo dosyası 1586×992 ve rozet bunun İÇİNDE duruyor
   (x %27–%74, y %31–%70) — etrafı saydam boşluk.
   Bu yüzden kutuyu sola/yukarı kaydırıp boşluğu dışarı
   taşırıyoruz; yoksa rozet ekranın ortasına düşüyor ve
   üstteki jeton/kristal barını kapatıyor.                */
#logo{
  position:fixed; left:-58px; top:34px; z-index:46;
  width:320px; height:auto;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
@media (max-width:980px){ #logo{ width:240px; left:-44px; top:30px; } }
@media (max-width:720px){ #logo{ width:190px; left:-34px; top:26px; } }

/* ── Nişangâh ───────────────────────────────── */
#nisangah{
  position:fixed; left:50%; top:50%;
  width:0; height:0;
  pointer-events:none; z-index:20;
}
#nisangah .ch{
  position:absolute; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.65);
  transition:none;
}
/* --yay: JS her karede günceller (yayılma) */
#nisangah .ch-u{ width:2px; height:7px; left:-1px; top:calc(-7px - var(--yay,4px)); }
#nisangah .ch-d{ width:2px; height:7px; left:-1px; top:var(--yay,4px); }
#nisangah .ch-l{ width:7px; height:2px; top:-1px; left:calc(-7px - var(--yay,4px)); }
#nisangah .ch-r{ width:7px; height:2px; top:-1px; left:var(--yay,4px); }
#nisangah .ch-nokta{
  position:absolute; width:2px; height:2px; left:-1px; top:-1px;
  background:#fff; opacity:.55;
}
/* ── Nişangâh HEDEFTE ────────────────────────────
   js/main.js nişangâh bir rakibin üzerine geldiğinde #nisangah'a
   "hedefte" sınıfını ekliyor.
   NEDEN: 7-13 yaş kitlede en sık şikâyet "ateş ettim ama tutmadı" —
   çocuk, tetiğe basmadan ÖNCE hedefte olduğunu görmeli. Beyaz artı
   parlak zeminde kayboluyordu; kırmızı + kalın + hafif parıltı ile
   durum bir bakışta okunuyor.
   Animasyon YOK: sınıf her karede açılıp kapanabildiği için
   animasyon sürekli baştan başlar ve titreme yaratırdı.
   Sadece sınıf varken çalışır — masaüstü görünümü değişmez.       */
#nisangah.hedefte .ch{
  background:var(--kirmizi);
  box-shadow:0 0 0 1px rgba(0,0,0,.75), 0 0 7px rgba(255,71,87,.95);
}
#nisangah.hedefte .ch-u,
#nisangah.hedefte .ch-d{ width:3px; left:-1.5px; }
#nisangah.hedefte .ch-l,
#nisangah.hedefte .ch-r{ height:3px; top:-1.5px; }
#nisangah.hedefte .ch-nokta{
  width:4px; height:4px; left:-2px; top:-2px;
  background:var(--kirmizi); opacity:1; border-radius:50%;
  box-shadow:0 0 6px rgba(255,71,87,.95);
}

/* ── Vuruş işareti (hitmarker) ──────────────── */
#vurus{
  position:fixed; left:50%; top:50%;
  width:0; height:0; z-index:21; pointer-events:none;
  animation:vurusSol .18s ease-out forwards;
}
#vurus i{ position:absolute; width:9px; height:2px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.7); }
#vurus i:nth-child(1){ transform:rotate(45deg)  translate(6px,6px); }
#vurus i:nth-child(2){ transform:rotate(-45deg) translate(6px,-6px); }
#vurus i:nth-child(3){ transform:rotate(45deg)  translate(-6px,-6px); }
#vurus i:nth-child(4){ transform:rotate(-45deg) translate(-6px,6px); }
#vurus.olum i{ background:var(--kirmizi); }
@keyframes vurusSol{ from{opacity:1;transform:scale(.8)} to{opacity:0;transform:scale(1.35)} }

/* ── Dürbün maskesi ─────────────────────────────
   Fiziksel dürbün tüpü ADS'te görüşün çoğunu kapatıyor.
   Referans oyunların hepsi bunu 2B maske ile çözüyor:
   ortada temiz yuvarlak pencere, dışı siyah.           */
#durbun{
  position:fixed; inset:0; z-index:19; pointer-events:none;
  animation:durbunGir .10s ease-out;
}
#durbun-delik{
  position:absolute; left:50%; top:50%;
  width:min(78vh,78vw); height:min(78vh,78vw);
  transform:translate(-50%,-50%);
  border-radius:50%;
  box-shadow:
    0 0 0 5px rgba(0,0,0,.92),
    0 0 0 12px rgba(20,22,26,.98),
    0 0 0 100vmax #06070a;
  /* mercek kenarında hafif koyulaşma */
  background:radial-gradient(circle at center,
    transparent 62%, rgba(0,0,0,.20) 88%, rgba(0,0,0,.55) 100%);
}
#durbun .dc{ position:absolute; background:rgba(10,10,12,.9); }
#durbun .dc-u{ left:50%; top:0;   width:1.5px; height:calc(50% - 26px); margin-left:-.75px; }
#durbun .dc-d{ left:50%; bottom:0;width:1.5px; height:calc(50% - 26px); margin-left:-.75px; }
#durbun .dc-l{ top:50%; left:0;   height:1.5px; width:calc(50% - 26px); margin-top:-.75px; }
#durbun .dc-r{ top:50%; right:0;  height:1.5px; width:calc(50% - 26px); margin-top:-.75px; }
#durbun .dc-nokta{
  position:absolute; left:50%; top:50%; width:3px; height:3px;
  margin:-1.5px 0 0 -1.5px; background:#111; border-radius:50%;
}
/* mesafe çentikleri — dikey eksende ince çizgiler */
#durbun-tik{
  position:absolute; left:50%; top:50%; width:0; height:0;
}
#durbun-tik::before,#durbun-tik::after{
  content:''; position:absolute; left:-9px; width:18px; height:1.5px;
  background:rgba(10,10,12,.75);
}
#durbun-tik::before{ top:34px; }
#durbun-tik::after { top:62px; }
@keyframes durbunGir{ from{opacity:0} to{opacity:1} }

/* ── HUD ────────────────────────────────────── */
#hud{ position:fixed; inset:0; pointer-events:none; z-index:15;
  font-variant-numeric:tabular-nums; }

#hud-sol{ position:absolute; left:26px; bottom:26px; }
#can-kutu{
  position:relative; width:230px; height:30px;
  background:rgba(0,0,0,.45);
  border:2px solid rgba(255,255,255,.16);
  border-radius:4px; overflow:hidden;
}
#can-dolgu{
  position:absolute; inset:0; width:100%;
  background:linear-gradient(90deg,#2ecc71,#3ddc84);
  transition:width .12s linear, background .2s;
}
#can-dolgu.orta{ background:linear-gradient(90deg,#f0932b,#ffbe76); }
#can-dolgu.az  { background:linear-gradient(90deg,#c0392b,#ff4757); }
#can-yazi{
  position:absolute; inset:0; display:flex; align-items:center;
  /* NEDEN: hedef kitle 7-13 yaş — can sayısı oyunun en kritik bilgisi,
     17px uzaktan/küçük ekranda zor okunuyordu. */
  padding-left:10px; font-size:19px; font-weight:800;
  text-shadow:0 1px 3px #000;
}
/* NEDEN: 12px durum yazısı (ÇÖMELİ / KOŞU / DOĞMA KORUMASI) çocuk oyuncu için
   okunmuyordu; yükseklik de yazıyla birlikte büyütüldü ki HUD zıplamasın. */
#hiz-durum{ margin-top:7px; font-size:14px; font-weight:700;
  letter-spacing:.09em; color:var(--sari); opacity:.9; height:18px; }

#hud-sag{ position:absolute; right:26px; bottom:26px; text-align:right; }
/* NEDEN: #sarj-gosterge bunun içinde ama #mermi konumlandırılmamıştı, bu yüzden
   gösterge #hud-sag'a göre hizalanıp silah listesinin üstüne düşüyordu; oysa
   "#mermi.sarj" kuralı mermi sayısını .18 opaklığa indirip göstergeyi tam
   sayının üstünde göstermek için yazılmış. */
#mermi{ position:relative; font-size:17px; color:rgba(255,255,255,.6); }
#mermi b{ font-size:46px; color:#fff; font-weight:800;
  text-shadow:0 2px 8px #000; vertical-align:-3px; margin-right:4px; }
#mermi.bos b{ color:var(--kirmizi); }
#mermi.sarj #mermi-sarjor,
#mermi.sarj #mermi-toplam{ opacity:.18; }

/* ── Şarjör göstergesi ──────────────────────────
   Oyuncu silah animasyonuna bakmasa bile şarjörün
   dolduğunu buradan anlasın: dönen halka + ilerleme yayı. */
#sarj-gosterge{
  position:absolute; right:2px; bottom:6px;
  width:58px; height:58px;
}
/* ilerleme yayı — JS --ilerleme değişkenini günceller */
#sarj-yay{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--sari) var(--ilerleme,0deg),
                            rgba(255,255,255,.10) 0deg);
  -webkit-mask:radial-gradient(circle, transparent 61%, #000 63%);
          mask:radial-gradient(circle, transparent 61%, #000 63%);
}
/* dönen halka — bir tarafı boş, sürekli döner */
#sarj-halka{
  position:absolute; inset:7px; border-radius:50%;
  border:3px solid transparent;
  border-top-color:#fff;
  border-right-color:rgba(255,255,255,.45);
  animation:sarjDon .75s linear infinite;
}
#sarj-ok{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:23px; font-weight:900; color:#fff;
  text-shadow:0 2px 5px #000;
  animation:sarjDon 1.5s linear infinite;
}
@keyframes sarjDon{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
/* NEDEN: silah adı ve tuş rozetleri 11-14px'ti; 7-13 yaş kitlesi hangi silahın
   elinde olduğunu bir bakışta görebilmeli. */
#silah-adi{ font-size:16px; font-weight:700; letter-spacing:.05em;
  color:var(--sari); margin-top:-2px; }
#silah-listesi{ margin-top:9px; display:flex; gap:5px; justify-content:flex-end; }
#silah-listesi div{
  padding:4px 10px; font-size:13px; font-weight:700;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12);
  border-radius:3px; color:rgba(255,255,255,.45);
}
#silah-listesi div.aktif{
  background:var(--sari); color:#111; border-color:var(--sari);
}

#hud-ust{ position:absolute; top:16px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px; }
#sure{
  font-size:26px; font-weight:800; letter-spacing:.04em;
  padding:3px 16px; background:rgba(0,0,0,.5); border-radius:5px;
  text-shadow:0 2px 5px #000;
}
#sure.kritik{ color:var(--kirmizi); }
#skor-tablosu{ display:flex; gap:5px; }
/* NEDEN: 12px isim + 16px skor küçük kalıyordu; kim önde sorusu maçın
   en sık bakılan bilgisi, çocuk oyuncuda okunur olmalı. */
#skor-tablosu div{
  min-width:48px; padding:4px 9px; text-align:center;
  background:rgba(0,0,0,.5); border-radius:4px;
  font-size:13.5px; font-weight:700; line-height:1.35;
}
#skor-tablosu div span{ display:block; font-size:18px; }
#skor-tablosu div.ben{ background:var(--sari); color:#111; }

/* ── Öldürme akışı ──────────────────────────── */
#olum-akisi{ position:absolute; top:16px; right:26px;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
/* NEDEN: 13px öldürme satırı 7-13 yaş için küçüktü — kimin kimi elediği
   oyunun anlık geri bildirimi, okunamazsa hiç görülmüyor. */
#olum-akisi div{
  padding:5px 12px; background:rgba(0,0,0,.6); border-radius:4px;
  font-size:15px; font-weight:700; white-space:nowrap;
  animation:akisGir .22s ease-out;
}
#olum-akisi div b{ color:var(--sari); }
#olum-akisi div.ben  b:first-child{ color:var(--yesil); }
#olum-akisi div.olen b:last-child { color:var(--kirmizi); }
#olum-akisi div i{ font-style:normal; opacity:.55; margin:0 6px; }
@keyframes akisGir{ from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }

/* ── Hasar geri bildirimi ───────────────────── */
#hasar-flas{
  position:fixed; inset:0; pointer-events:none; z-index:16;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(200,0,0,.62) 100%);
  opacity:0; transition:opacity .3s;
}
#hasar-yonu{ position:absolute; inset:0; }
/* NEDEN: eskiden ok "top:50%" ile ekran merkezine oturuyor, dönüş merkezi ise
   "transform-origin:50% 118px" ile merkezin 118px ALTINA düşüyordu; hud.js'teki
   rotate()+translateY(-118px) ile birleşince arkadan gelen hasar oku merkezin
   ~330px ALTINA, kısa pencerelerde ekran dışına çiziliyordu.
   Çözüm: elemanı yarıçap kadar yukarı al → dönüş merkezi tam ekran ortası,
   ön/arka simetrik. Yarıçap görünüm alanına bağlı (min(22vh,160px)) olduğu için
   alçak pencerede de ok her zaman ekranın içinde kalıyor.                      */
#hasar-yonu i{
  --yon-yaricap:min(22vh,160px);
  position:absolute; left:50%; top:calc(50% - var(--yon-yaricap));
  width:6px; height:54px;                    /* 7-13 yaş: ok biraz kalınlaştırıldı */
  margin-left:-3px; transform-origin:50% var(--yon-yaricap);
  background:linear-gradient(180deg,var(--kirmizi),transparent);
  animation:yonSol 1s ease-out forwards;
}
@keyframes yonSol{ from{opacity:.95} to{opacity:0} }

/* ── Öldürme bandı ──────────────────────────── */
#kill-banner{
  position:fixed; left:50%; top:29%; transform:translateX(-50%);
  z-index:22; pointer-events:none; text-align:center;
  font-size:30px; font-weight:900; letter-spacing:.06em;
  color:var(--sari); text-shadow:0 3px 12px #000;
  animation:bandGir .3s ease-out;
}
/* NEDEN: elenen rakibin adı 14px + %75 opaklıkla neredeyse görünmezdi. */
#kill-banner small{ display:block; font-size:16px; color:#fff; opacity:.85;
  letter-spacing:.14em; font-weight:700; }
@keyframes bandGir{ from{opacity:0;transform:translateX(-50%) scale(.75)}
                    to{opacity:1;transform:translateX(-50%) scale(1)} }

/* ── Dar ekran HUD'ı — SADECE FARELİ (masaüstü) dar pencere ─────
   NEDEN genişlik sorgusu tek başına YETMİYOR: kullanıcının telefonu 2048px
   genişlikte bildiriyor, bu yüzden bu blok telefonda HİÇ devreye girmiyordu.
   Telefon/tablet yerleşimi artık aşağıdaki (pointer:coarse) + yönelim
   bloklarında; orası bu bloktan SONRA geldiği için dokunmatikte her
   çakışan özelliği ezer.
   NEDEN (pointer:fine) eklendi: dokunmatik cihazda bu bloğun
   "#hud-sag{right:12px;bottom:12px}" satırı mermi sayacını ateş butonunun
   tam altına düşürüyordu. Fareli dar pencerede (230px can kutusu +
   ~247px silah listesi ~530px altında bindiriyor) hâlâ gerekli, o yüzden
   silinmedi; sadece dokunmatik cihazlar kapsam dışına alındı.
   js/dokunmatik.js de aynı ölçütü kullanıyor (matchMedia('(pointer: coarse)')),
   yani CSS ile dokunmatik arayüzün açılma koşulu birebir aynı.            */
@media (max-width:760px) and (pointer:fine){
  #hud-sol{ left:12px; bottom:12px; }
  #hud-sag{ right:12px; bottom:12px; }
  #can-kutu{ width:152px; height:27px; }
  #can-yazi{ font-size:17px; padding-left:8px; }
  #hiz-durum{ font-size:12.5px; height:16px; letter-spacing:.05em; }
  #mermi{ font-size:15px; }
  #mermi b{ font-size:34px; }
  #silah-adi{ font-size:14px; }
  /* #silah-listesi BURADA GİZLENMEZ: bu blok fareli (pointer:fine) dar
     pencere için ve orada dokunmatik katman kurulmuyor — gizlersek hiç
     silah seçici kalmıyordu. Gizleme artık `body.dokunmatik-var` ile. */
  #sarj-gosterge{ width:46px; height:46px; }
  #sarj-ok{ font-size:19px; }
  #olum-akisi{ top:12px; right:12px; }
  #olum-akisi div{ font-size:13px; padding:4px 9px; }
  #hud-ust{ top:10px; }
  #sure{ font-size:22px; }
  #kill-banner{ font-size:24px; }
  #kill-banner small{ font-size:14px; }
}

/* ── Menü & perde ───────────────────────────── */
#menu,#perde{
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,#1b2430,#080a0d 78%);
}
#perde{ background:rgba(6,8,11,.9); backdrop-filter:blur(4px); }

#menu-ic,#perde-ic{
  width:min(430px,92vw); padding:30px 34px 26px;
  background:var(--panel); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; box-shadow:0 26px 70px rgba(0,0,0,.75);
  text-align:center;
}

#menu h1{
  font-size:44px; font-weight:900; letter-spacing:.03em; line-height:.95;
  margin-bottom:3px;
}
#menu h1 span{ color:var(--sari); }
#menu .alt{ font-size:12.5px; color:rgba(255,255,255,.5);
  margin-bottom:22px; letter-spacing:.03em; }

.satir{ display:flex; align-items:center; justify-content:space-between;
  margin-bottom:13px; gap:12px; }
.satir label{ font-size:12.5px; font-weight:700; color:rgba(255,255,255,.62);
  letter-spacing:.04em; flex:0 0 92px; text-align:left; }

#ad{
  flex:1; padding:9px 12px; font-size:14px; font-family:inherit; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:6px; outline:none;
}
#ad:focus{ border-color:var(--sari); }

.secenekler{ flex:1; display:flex; gap:5px; }
.secenekler button{
  flex:1; padding:8px 4px; font-size:12.5px; font-weight:700;
  font-family:inherit; color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11);
  border-radius:6px; cursor:pointer; transition:.13s;
}
.secenekler button:hover{ background:rgba(255,255,255,.13); color:#fff; }
.secenekler button.aktif{ background:var(--sari); color:#111;
  border-color:var(--sari); }

#oyna{
  width:100%; margin-top:16px; padding:15px; font-size:20px; font-weight:900;
  font-family:inherit; letter-spacing:.09em; color:#111;
  background:linear-gradient(180deg,#4ef09a,#2fbb6d);
  border:none; border-radius:8px; cursor:pointer;
  box-shadow:0 5px 0 #1c7a45; transition:.1s;
}
#oyna:hover{ filter:brightness(1.08); }
#oyna:active{ transform:translateY(3px); box-shadow:0 2px 0 #1c7a45; }

#tuslar{ margin-top:19px; display:flex; flex-direction:column; gap:4px;
  font-size:11.5px; color:rgba(255,255,255,.4); }
#tuslar b{ color:rgba(255,255,255,.72); }

#perde h2{ font-size:27px; font-weight:900; margin-bottom:16px; }
#perde-tablo{ margin-bottom:18px; }
#perde-tablo table{ width:100%; border-collapse:collapse; font-size:13.5px; }
#perde-tablo th{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.38); padding:0 8px 7px; text-align:left; font-weight:700; }
#perde-tablo td{ padding:6px 8px; border-top:1px solid rgba(255,255,255,.07);
  font-weight:700; text-align:left; }
#perde-tablo td:not(:first-child){ text-align:right; }
#perde-tablo tr.ben td{ color:var(--sari); }
#perde-tablo tr.ben td:first-child::after{ content:' (sen)'; opacity:.55;
  font-weight:400; font-size:11px; }

#perde button{
  width:100%; margin-top:8px; padding:12px; font-size:15px; font-weight:800;
  font-family:inherit; letter-spacing:.05em; color:#111;
  background:var(--sari); border:none; border-radius:7px; cursor:pointer;
}
#perde button.ikincil{ background:rgba(255,255,255,.1); color:#fff; }
#perde button:hover{ filter:brightness(1.1); }

/* ── Açılış perdesi: logo + dolan bar ─────────────────────────
   Modüller yüklenmeden görünmesi gerektiği için tamamen CSS ile
   çalışıyor; JS yalnızca bitince %100'e çekip perdeyi kapatıyor.
   Bar ~%92'ye kadar kendi kendine akıyor, son %8'i gerçek "oyun
   hazır" anında doluyor — yani çubuk yalan söylemiyor, sadece
   bekleme süresini görünür kılıyor.                                */
#yukleniyor{
  position:fixed; inset:0; z-index:60; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:radial-gradient(ellipse at 50% 42%, #16263c 0%, var(--koyu) 72%);
  transition:opacity .45s ease;
}
#yukleniyor.bitti{ opacity:0; pointer-events:none; }

#yuk-logo{
  width:min(300px, 62vw); height:auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));
  animation:yukNefes 2.4s ease-in-out infinite;
}
@keyframes yukNefes{
  0%,100%{ transform:scale(1)      translateY(0); }
  50%    { transform:scale(1.035) translateY(-5px); }
}

#yuk-bar{
  position:relative; width:min(320px, 68vw); height:14px;
  border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.07);
}
#yuk-dolgu{
  display:block; height:100%; width:0;
  border-radius:99px;
  background:linear-gradient(90deg,#3ddc84,#5cf5a4,#ffd23f);
  box-shadow:0 0 14px rgba(92,245,164,.7);
  animation:yukDol 2.6s cubic-bezier(.16,.9,.3,1) forwards;
}
/* Kendiliğinden %92'ye kadar akar; kalanı JS "hazır" deyince doldurur. */
@keyframes yukDol{
  0%  { width:0; }
  55% { width:62%; }
  100%{ width:92%; }
}
/* JS bitirince: kalan yolu hızla tamamla. */
#yukleniyor.bitti #yuk-dolgu{
  animation:none; width:100%; transition:width .3s ease;
}

/* Hareket hassasiyeti olan oyuncular için nefes/akış sakinleşir. */
@media (prefers-reduced-motion:reduce){
  #yuk-logo{ animation:none; }
  #yuk-dolgu{ animation-duration:.6s; }
}

/* ═════════════════════════════════════════════════════════════
   DOKUNMATİK HUD  (telefon / tablet)

   Dosyanın EN SONUNDA duruyor: aynı özniteliği yazan yukarıdaki
   kurallardan sonra geldiği için cascade'de kazanır.

   Ölçüt genişlik DEĞİL, (pointer:coarse):
   kullanıcının telefonu 2048px genişlik bildiriyor ve eski
   (max-width:760px) sorgusu telefonda hiç çalışmıyordu.
   Aynı ölçütü js/dokunmatik.js de kullanıyor.

   Konumlar px + env(safe-area-inset-*) ile veriliyor; vh KULLANILMIYOR
   çünkü mobil tarayıcıda adres çubuğu açılıp kapandıkça vh zıplıyor
   ve HUD kayıyor.

   Buton konumları (#dm-*) BURADA DEĞİL — js/dokunmatik.js içindeki
   STIL sabitinde; o stil head'e style.css'ten SONRA enjekte edildiği
   için buraya yazılsa ezilirdi.
   ═════════════════════════════════════════════════════════════ */

/* ── Her yönelimde geçerli dokunmatik kuralları ── */
@media (pointer:coarse){

  /* Silah seçici gizleme buradan KALDIRILDI — medya sorgusu yanlış ölçüttü.
     Dokunmatik ekranlı dizüstünde sorgu tutmayınca iki şerit birden
     görünüyordu. Tek doğru ölçüt katmanın gerçekten kurulmuş olması:
     dosyanın sonundaki `body.dokunmatik-var #silah-listesi` kuralı.       */

  /* Logo masaüstünde 320px ve left:-58px ile konumlanıyor; telefonda profil
     kutusuyla çakışıyordu. GİZLEMİYORUZ — oyunun markası görünür kalmalı.
     Küçültülüp profil kartının ALTINA alınıyor (sohbet butonu kaldırıldığı
     için sol taraf artık boş).
     Negatif sol ofset logonun saydam kenarını kırpmak için: görselin sol
     %27.5'i saydam, yani 128px genişlikte 35px boşluk var — -26px kaydırma
     yalnızca o boşluğu yiyor, çizimden bir şey kesmiyor.                  */
  #logo{
    width:128px;
    left:calc(-26px + env(safe-area-inset-left));
    top:calc(76px + env(safe-area-inset-top));   /* profil kartı 68px'de bitiyor */
  }

  /* Nişangâh: küçük, keskin artı (referans yerleşim).
     Kol boyu 7px→6px; boşluk hesabı (--yay) kol boyuyla birlikte
     küçültülmezse artının ortasında 1px'lik kayma kalıyordu.             */
  #nisangah .ch{ box-shadow:0 0 0 1px rgba(0,0,0,.8); }
  #nisangah .ch-u{ height:6px; top:calc(-6px - var(--yay,4px)); }
  #nisangah .ch-d{ height:6px; }
  #nisangah .ch-l{ width:6px;  left:calc(-6px - var(--yay,4px)); }
  #nisangah .ch-r{ width:6px; }

  /* Şarjör göstergesi 58px→38px küçüldüğü için içindeki halka ve ok da
     oranlı küçülüyor; yoksa ok halkanın dışına taşıyor.                  */
  #sarj-ok{ font-size:15px; }
  #sarj-halka{ inset:5px; border-width:2.5px; }

  #kill-banner{ font-size:24px; }
  #kill-banner small{ font-size:13px; letter-spacing:.10em; }
}

/* ─────────────────────────────────────────────────────────────
   YATAY (landscape)
   Sol alt = hareket + can · sağ alt = başparmak yayı (ateş en içte)
   Alt-orta-sağ = silah ızgarası, ONUN ÜSTÜNDE mermi yazısı
   Üst şerit = skor / öldürme akışı · ORTA tamamen boş (bakış sürükleme)

   EN KRİTİK DÜZELTME: mermi sayacı + silah adı eskiden sağ alt köşedeydi,
   yani ateş butonunun TAM ALTINDA kalıyor ve hiç okunmuyordu. Yeni yerinin
   (sağdan 234px, alttan 124px) ÜSTÜNDE hiçbir dokunulabilir öğe yok:
   silah ızgarasından 13px, şarjör butonundan 12px ayrık.
   ───────────────────────────────────────────────────────────── */
@media (pointer:coarse) and (orientation:landscape){

  /* ── Sol alt: can barı ── */
  #hud-sol{
    left:calc(12px + env(safe-area-inset-left));
    bottom:calc(10px + env(safe-area-inset-bottom));
  }
  /* 230px can kutusu ekranın yarısını kaplıyordu; 150px ile çömel
     butonuna 18px boşluk kalıyor ve hiçbir butonun altında değil.        */
  #can-kutu{ width:150px; height:26px; }
  #can-yazi{ font-size:16px; padding-left:8px; }
  /* Bu üçlü #hud-sol yüksekliğini tam 48px'te sabitler (26+6+16). */
  #hiz-durum{ margin-top:6px; font-size:12px; height:16px; letter-spacing:.04em; }

  /* ── Mermi + silah adı: ateş butonunun ALTINDAN çıkarıldı ── */
  #hud-sag{
    right:calc(234px + env(safe-area-inset-right));
    bottom:calc(124px + env(safe-area-inset-bottom));
    left:auto; width:180px; height:52px; text-align:right;
  }
  #mermi{ font-size:13px; line-height:1; }
  #mermi b{ font-size:28px; margin-right:3px; vertical-align:-2px; }
  /* nowrap: uzun silah adı (js/dil.js İngilizce/Rusça'ya çeviriyor) iki
     satıra düşerse 52px'lik blok taşıp altındaki silah ızgarasına iner. */
  #silah-adi{ font-size:13px; line-height:17px; margin-top:1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #sarj-gosterge{ right:0; left:auto; bottom:2px; width:38px; height:38px; }

  /* ── Üst orta: skor + süre ──
     width:max-content ŞART: left:50% ile konumlanan mutlak bir kutunun
     kendiliğinden genişliği ekranın SAĞ YARISI kadardır (yatayda 422px,
     dikeyde 195px). Verilmezse skor şeridi dar ekranda ikinci satıra
     kırılıp #hud-ust'u 130px'e uzatıyor ve öldürme akışına çarpıyor.    */
  #hud-ust{
    top:calc(8px + env(safe-area-inset-top));
    left:50%; right:auto; transform:translateX(-50%);
    width:max-content; max-width:min(280px, calc(100vw - 350px)); gap:5px;
  }
  #skor-tablosu{ flex-wrap:wrap; justify-content:center; }
  /* max-width:51px: hud.js en fazla 5 kutu basıyor (ilk 4 + oyuncu) ve
     adı 9 karaktere kısaltıyor. 5x51 + 4x5 = 275 <= 280, yani en uzun
     adlarda bile şerit TEK SATIR kalır. nowrap+ellipsis olmazsa uzun ad
     kutu içinde iki satıra düşüp şeridi yükseltiyordu; skor sayısı
     (span) her zaman tam görünür.                                       */
  #skor-tablosu div{ min-width:34px; max-width:51px; padding:3px 6px;
    font-size:11.5px; line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #sure{ font-size:20px; padding:2px 12px; }

  /* ── Üst sağ: öldürme akışı ──
     max-height olmazsa 5. satır zıpla butonunun üzerine iniyor;
     112px ile en fazla 4 satır görünür, zıpla'ya 27px kalır.
     justify-content:flex-end ŞART: js/hud.js yeni satırı SONA ekliyor
     (appendChild) ve 5 satır tutuyor. Hizalama verilmezse taşan satır
     alttaki, yani EN YENİ eleme kırpılırdı. Bu şekilde taşma üstten
     olur; en eski satır kırpılır, yeni eleme her zaman tam görünür.      */
  #olum-akisi{
    top:calc(8px + env(safe-area-inset-top));
    right:calc(12px + env(safe-area-inset-right));
    gap:3px; max-height:112px; overflow:hidden;
    justify-content:flex-end;
    /* Skor tablosu ortalanmış, akış sağa yaslı: dar yatay ekranda
       (640x360 gibi) uzun adlarla ikisi orta hatta çarpışıyordu.
       50vw-168px, iki kutu arasında her genişlikte >=8px boşluk bırakır;
       844px ve üzerinde (hedef cihaz) hiç devreye girmez, satırlar doğal
       genişliğinde kalır. Sığmayan satır ikinci satıra sarar.            */
    max-width:max(150px, calc(50vw - 168px));
  }
  #olum-akisi div{ font-size:12px; padding:3px 8px; }
}

/* ─────────────────────────────────────────────────────────────
   DİKEY (portrait) — daha önce HİÇ yoktu, tüm mobil CSS yatay
   varsayımıyla yazılmıştı.

   Ekranın ÜST YARISI tamamen boş (oyun görüntüsü); tüm kontroller
   alt yarıda. Sağ alt köşe şarjör butonunun olduğu için mermi yazısı
   sol alta, can barının üstüne alındı: tek bir "oyuncu durumu sütunu".
   ───────────────────────────────────────────────────────────── */
@media (pointer:coarse) and (orientation:portrait){

  /* ── Sol en alt: can barı ── */
  #hud-sol{
    left:calc(12px + env(safe-area-inset-left));
    bottom:calc(12px + env(safe-area-inset-bottom));
  }
  #can-kutu{ width:150px; height:26px; }
  #can-yazi{ font-size:16px; padding-left:8px; }
  #hiz-durum{ margin-top:6px; font-size:12px; height:16px; letter-spacing:.04em; }

  /* ── Can barının 10px üstü: mermi + silah adı ──
     Üstünde sadece hareket çubuğu alanı var, o da 68px yukarıda ve
     halkası en fazla y=639'a kadar iniyor — yazı asla örtülmez.          */
  #hud-sag{
    left:calc(12px + env(safe-area-inset-left)); right:auto;
    bottom:calc(70px + env(safe-area-inset-bottom));
    width:150px; height:52px; text-align:left;
  }
  #mermi{ font-size:13px; line-height:1; }
  #mermi b{ font-size:28px; margin-right:3px; vertical-align:-2px; }
  /* nowrap gerekçesi yataydaki ile aynı: çeviri sonrası uzayan ad
     ikinci satıra düşüp 52px'lik bloğu taşırmasın.                      */
  #silah-adi{ font-size:13px; line-height:17px; margin-top:1px; text-align:left;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Blok sola yaslandığı için gösterge de sola alındı; yoksa mermi
     sayısının üstünde değil, boşlukta duruyordu.                          */
  #sarj-gosterge{ left:0; right:auto; bottom:2px; width:38px; height:38px; }

  /* ── Üst orta: skor + süre (dokunulamaz, üst yarıda kalabilir) ──
     width:max-content olmadan kutu, ekranın sağ yarısı kadar (195px)
     dar kalıp skor şeridini ikinci satıra kırıyor; #hud-ust 130px'e
     çıkıp altındaki öldürme akışının üzerine biniyordu.                 */
  #hud-ust{
    top:calc(8px + env(safe-area-inset-top));
    left:50%; right:auto; transform:translateX(-50%);
    width:max-content; max-width:300px; gap:5px;
  }
  #skor-tablosu{ flex-wrap:wrap; justify-content:center; }
  /* 5x55 + 4x5 = 295 <= 300 → en uzun adlarda bile tek satır. */
  #skor-tablosu div{ min-width:34px; max-width:55px; padding:3px 6px;
    font-size:11.5px; line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #sure{ font-size:20px; padding:2px 12px; }

  /* ── Öldürme akışı: skorun ALTINA ──
     390px genişlikte skor tablosu ile akış aynı satıra sığmıyor.
     justify-content:flex-end — yataydaki ile aynı gerekçe: taşma üstten
     olsun, en yeni eleme satırı kırpılmasın.                             */
  #olum-akisi{
    top:calc(96px + env(safe-area-inset-top));
    right:calc(10px + env(safe-area-inset-right));
    gap:3px; max-height:96px; overflow:hidden;
    justify-content:flex-end;
  }
  #olum-akisi div{ font-size:12px; padding:3px 8px; white-space:nowrap; }
}

/* ── TEK silah seçici ─────────────────────────────────────────
   Dokunmatik katman kurulduysa HUD'ın kendi şeridi gizlenir; kurulmadıysa
   (masaüstü, fare) HUD şeridi tek seçicidir. Ölçüt medya sorgusu DEĞİL,
   katmanın gerçekten var olması — main.js bu sınıfı gövdeye koyuyor. */
body.dokunmatik-var #silah-listesi{ display:none !important; }