/* GorillaStrike — arayüz */

:root {
  --mavi: #3d8bff;
  --kirmizi: #ff4d4d;
  --buz: #e0c885;
  --kehribar: #ffb347;
  --koyu: #0d1016;
  /* Kuboom menü paleti — altın çerçeve ve sarı PLAY.
     Menünün bütün kart kenarları ve ikonları buradan besleniyor. */
  --altin: #e8b53c;
  --altin-koyu: #8a6414;
  --sari: #ffd23f;
  --sari-koyu: #c98d10;
  --lacivert: #101c36;
  --panel: rgba(12, 15, 22, 0.88);
  --kenar: rgba(228, 206, 147, 0.22);

  /* Güvenli alan — çentik, ada ve ana sayfa çubuğu.
     Değişkene alınıyor ki `calc()` içinde yedeğiyle birlikte tek
     yerden yönetilsin; `env()` desteklemeyen tarayıcıda 0px. */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--koyu);
  font-family: "Segoe UI", "Inter", system-ui, sans-serif;
  color: #e8eef6;
  user-select: none;
  -webkit-user-select: none;
  /* Uzun basınca çıkan iOS balonu (Kopyala/Paylaş) ve gri dokunma
     dikdörtgeni. İkisi de WebKit'te KALITILAN özellik: burada bir
     kez vermek tüm menü ağacını kapsıyor. Bildirilen "kopyala
     yapıştır çıkıyor" şikâyetinin kaynağı buydu. */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* Kök seviyede de veriliyor: aşağıdaki seçici listesi
     kaçırdığı bir öge olursa çift dokunuş yine kapalı kalsın.
     `#sahne` / `#dokunmatik` / `.dj-btn` üzerindeki `none` daha
     kısıtlayıcı olduğu için sürükleme bundan etkilenmiyor. */
  touch-action: manipulation;
}

/* ÇİFT DOKUNUŞ YAKINLAŞTIRMASI.
   `user-scalable=no` iOS Safari'de iOS 10'dan beri YOK SAYILIYOR;
   çift-dokun-yakınlaştırmayı kapatan tek şey `touch-action`.
   `manipulation` kaydırmayı ve tek parmak sürüklemeyi SERBEST
   bırakıyor — yalnız çift dokunuş ve 300 ms tıklama gecikmesi
   kalkıyor, yani menü listeleri hâlâ kaydırılabiliyor.

   3B bakış sürüklemesi BOZULMUYOR: `#sahne`, `#dokunmatik` ve
   `.dj-btn` üzerindeki `touch-action: none` daha kısıtlayıcı ve
   etkin değer ata kesişimi olduğu için kazanıyor. */
button, label, input, a,
.kart, .urun, .oda-satir, .shop-sekme, .takim-kart,
.tablo-dugme, .ust-dugme, .kese-arti, .sandik-etiket,
#menu, #menu-ic, #hud, #tablo, #odalar, #istatistik, #bitis,
#on-ogretici, #yukleniyor, #ayar-panel {
  touch-action: manipulation;
}

#sahne {
  /* HUD ve dokunmatik katmanla AYNI kutu. Eskiden `100vw/100vh`
     kullanıyordu; iOS'ta bu birimler HUD'un dayandığı `fixed`
     kutuya eşit değil ve ikisi ayrışabiliyordu. Artık matematiksel
     olarak ayrışması imkânsız. */
  position: fixed; inset: 0;
  display: block; width: 100%; height: 100%;
  z-index: 0;
  /* Dokunmatikte ŞART: yoksa tarayıcı dokunuşu kaydırma/yakınlaştırma
     hareketi sanıyor ve pointermove olaylarını yutuyor — joystik ve
     kamera sürüklemesi hiç çalışmıyordu. */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.gizli { display: none !important; }

/* ═══════════════════════════════════════════
   AÇILIŞ PERDESİ
   ═══════════════════════════════════════════ */
#yukleniyor {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(10px, 2vh, 22px);
  /* Öğretici kaldırıldı; perde artık yalnız duvar kâğıdı + çubuk.
     Kaydırma da gerekmiyor — taşacak içerik yok. */
  overflow: hidden; padding: clamp(12px, 3vh, 30px) 12px;
  justify-content: flex-end;
  /* AÇILIŞ GÖRSELİ — yalnız ilk yüklemede.
     Maç bulma perdesi (`#on-ogretici`) bundan ayrı ve öğreticiyle
     devam ediyor; oraya görsel konmuyor.

     Görsel `cover` ile kaplıyor ve ÜSTÜNE koyu bir katman biniyor:
     kontrol öğreticisi ve yükleme çubuğu her görselde okunur kalmalı.
     Katman olmadan açık bölgelerdeki beyaz yazı kayboluyor. */
  /* Öğretici kalkınca perdenin üstündeki koyu katman da hafifledi:
     okunması gereken tek şey alttaki çubuk ve yazı. Karartma artık
     yalnız ALTTA, o yazının arkasında. */
  background:
    linear-gradient(to bottom, rgba(6, 9, 16, 0.10) 0%,
      rgba(6, 9, 16, 0.20) 55%, rgba(6, 9, 16, 0.88) 100%),
    url('../gorsel/yukleme.jpg') center / cover no-repeat,
    radial-gradient(ellipse at 50% 40%, #241d14 0%, #0a0806 70%);
  transition: opacity 0.5s ease;
}
#yukleniyor.bitti { opacity: 0; pointer-events: none; }

#yuk-bar {
  width: 260px; height: 4px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.10); overflow: hidden;
}
#yuk-dolgu {
  display: block; width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--buz), var(--sari));
  box-shadow: 0 0 12px var(--buz);
  transition: width 0.25s ease;
}
#yuk-alt { font-size: 12px; letter-spacing: 2px; opacity: 0.45; text-transform: uppercase; }

/* ═══════════════════════════════════════════
   ANA MENÜ
   ═══════════════════════════════════════════ */
#menu.gizli { display: none; }




/* ── Takım seçimi ── */
#takimlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.takim-kart {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 12px; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.14s ease;
}
.takim-kart:hover { transform: translateY(-2px); }
.takim-kart[data-takim="mavi"]    { --t: #3d8bff; }
.takim-kart[data-takim="kirmizi"] { --t: #ff4d4d; }
.takim-kart.secili {
  border-color: var(--t);
  background: color-mix(in srgb, var(--t) 14%, transparent);
  box-shadow: 0 0 0 1px var(--t), 0 8px 24px rgba(0, 0, 0, 0.4);
}
.takim-ad { font-size: 15px; font-weight: 800; letter-spacing: 2.5px; color: var(--t); }
.takim-alt { font-size: 10px; opacity: 0.5; line-height: 1.4; }
.takim-kadro {
  align-self: flex-start; margin-top: 4px; padding: 2px 8px;
  border-radius: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px;
  background: color-mix(in srgb, var(--t) 20%, transparent); color: var(--t);
}

/* Harita başlığı — tek harita olduğu için seçici değil, etiket.
   Ayrıntılı kural css/menu.css içinde; buradaki taban. */
#harita-basligi {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 11px;
  border: 1.5px solid var(--buz); border-radius: 9px;
  background: rgba(224, 200, 133, 0.12); color: var(--buz);
}
#harita-basligi b { font-size: 13px; font-weight: 800; letter-spacing: 2px; }
#harita-basligi span { font-size: 9.5px; opacity: 0.55; color: #e8eef6; }


/* ── Karakter seçimi ── */
.bolum-basligi {
  margin: 22px 0 10px;
  font-size: 10px; letter-spacing: 3.5px; opacity: 0.42;
  text-align: left; text-transform: uppercase;
}

#karakterler {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}

.kart {
  position: relative;
  padding: 0 0 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.028);
  cursor: pointer; overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.14s ease;
}
.kart:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.055); }
.kart.secili {
  border-color: var(--vurgu, var(--buz));
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 1px var(--vurgu, var(--buz)), 0 8px 26px rgba(0, 0, 0, 0.45);
}

.kart-gorsel {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
}
.kart.eksik .kart-gorsel { filter: grayscale(0.75) brightness(0.65); }
.kart-rozet {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 5px; white-space: nowrap;
  background: rgba(255, 179, 71, 0.18);
  border: 1px solid rgba(255, 179, 71, 0.5);
  color: #ffcf6a; font-size: 8.5px; font-weight: 800; letter-spacing: 1.1px;
}

.kart-ad {
  margin-top: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: 2.4px;
  color: var(--vurgu, #fff);
}
.kart-alt {
  margin-top: 3px; padding: 0 9px;
  font-size: 10px; line-height: 1.45; opacity: 0.5;
}
.kart-kurt {
  display: inline-block; margin-top: 7px; padding: 2.5px 8px;
  border-radius: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  background: color-mix(in srgb, var(--vurgu) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--vurgu) 40%, transparent);
  color: var(--vurgu);
}

#model-durum {
  margin: 18px 0 0;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11.5px; letter-spacing: 0.4px;
}
#model-durum div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 11px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
#model-durum .etiket { opacity: 0.6; }
#model-durum .deger { font-weight: 700; }
#model-durum .glb   { color: #5ce08a; }
#model-durum .gecici { color: var(--kehribar); }

#oyna {
  margin-top: 20px; width: 100%; padding: 15px;
  font-size: 16px; font-weight: 800; letter-spacing: 3px;
  color: #04121c; cursor: pointer;
  border: none; border-radius: 10px;
  background: linear-gradient(180deg, var(--sari) 0%, var(--buz) 100%);
  box-shadow: 0 6px 26px rgba(224, 200, 133, 0.32);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#oyna:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(224, 200, 133, 0.45); }
#oyna:active:not(:disabled) { transform: translateY(0); }
#oyna:disabled { filter: grayscale(0.8) brightness(0.6); cursor: default; }

#menu-tuslar {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11.5px; opacity: 0.55; line-height: 1.5;
}
#menu-tuslar b {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin: 0 2px;
  border-radius: 4px; background: rgba(255, 255, 255, 0.09);
  font-size: 10.5px; font-weight: 700;
}
#menu-tuslar .dikkat { margin-top: 6px; color: #ffcf6a; opacity: 0.85; }

/* ═══════════════════════════════════════════
   NİŞANGÂH
   ═══════════════════════════════════════════ */
#nisangah {
  position: fixed; left: 50%; top: 50%; z-index: 20;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  pointer-events: none;
  transition: transform 0.18s ease;
}
#nisangah.kurt { transform: scale(1.75); }
.ch {
  position: absolute; background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
.ch-u { left: 12px; top: 0;    width: 2px; height: 8px; }
.ch-d { left: 12px; bottom: 0; width: 2px; height: 8px; }
.ch-l { top: 12px; left: 0;    height: 2px; width: 8px; }
.ch-r { top: 12px; right: 0;   height: 2px; width: 8px; }
.ch-nokta {
  position: absolute; left: 12px; top: 12px; width: 2px; height: 2px;
  background: rgba(255, 255, 255, 0.95);
}
#nisangah.kurt .ch { background: var(--buz); box-shadow: 0 0 6px var(--buz); }
#nisangah.kurt .ch-nokta { background: var(--buz); }

/* Kurt nişangâhı sönük durur; pençe menzilinde düşman varken yanar.
   Nişan aleti değil, "şimdi vurursan tutar" göstergesi. */
#nisangah.kurt { opacity: 0.34; }
#nisangah.kurt.hedefte {
  opacity: 1;
  transform: scale(2.1);
}
#nisangah.kurt.hedefte .ch {
  background: var(--kirmizi, #ff5a4a);
  box-shadow: 0 0 10px var(--kirmizi, #ff5a4a);
}
#nisangah.kurt.hedefte .ch-nokta { background: #fff; }

/* ═══════════════════════════════════════════
   DÖNÜŞÜM FLAŞI
   ═══════════════════════════════════════════ */
#donusum-flas {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.95) 0%,
              rgba(224, 200, 133, 0.55) 35%, rgba(224, 200, 133, 0) 72%);
}
#donusum-flas.insan {
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.95) 0%,
              rgba(255,179,71,0.55) 35%, rgba(255,179,71,0) 72%);
}
#donusum-flas.patla { animation: patlama 0.62s ease-out; }
@keyframes patlama {
  0%   { opacity: 0;    transform: scale(0.4); }
  12%  { opacity: 1;    transform: scale(1.0); }
  100% { opacity: 0;    transform: scale(1.5); }
}

/* ═══════════════════════════════════════════
   HUD
   ═══════════════════════════════════════════ */
#hud { position: fixed; inset: 0; z-index: 25; pointer-events: none; }

/* ═══════════════════════════════════════════
   MAÇ BAŞLIĞI — ekranın tam tepesi, ortalı

   Ölçüler vw'ye bağlı clamp() ile veriliyor: dar telefonda küçülüyor,
   geniş ekranda tavana oturuyor. Sabit px verilirse 360 px genişlikte
   ikonlar ortadaki yazıyı eziyor.
   ═══════════════════════════════════════════ */
#hud-ust {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(96vw, 560px);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}

/* Bar duzeni — YEDI sutun:
     [kirmizi serit][kirmizi kalkan][kirmizi skor]
     [saat + mod]
     [mavi skor][mavi kalkan][mavi serit]

   ══ SATIR KAYMASI ══
   Burada BES sutun tanimliydi ama HTML'de YEDI cocuk var: iki takim
   kalkani ikonu hesaba katilmamisti. Izgara fazlalik iki ogeyi ALT
   SATIRA sarkitiyordu — mavi kalkan ve mavi serit ikinci satira
   dusuyor, bar 72 px yerine 105 px oluyor ve duzen bozuluyordu.
   Sahibi ekran goruntusuyle bildirdi ("her ayar bozulmus").

   Seritler esnek ve BUZULEBILIR (min-width: 0) — 8v8'de 16 karo var,
   dar ekranda karolar kuculuyor, bar tasmiyor. */
#mac-ust {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto auto auto auto auto minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  border-radius: 0 0 10px 10px;
  background: rgba(8, 11, 17, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: none;
  overflow: hidden;
}

/* Oyuncu karo seridi — her karo bir oyuncu, olen X aliyor */
.oyuncu-serit {
  display: flex; align-items: center; gap: 2px;
  padding: 3px 4px; min-width: 0; overflow: hidden;
}
.oyuncu-serit.kirmizi { justify-content: flex-end; }
.oyuncu-serit.mavi { justify-content: flex-start; }
.karo {
  position: relative; flex: 0 1 auto;
  width: clamp(15px, 2.6vw, 26px); height: clamp(15px, 2.6vw, 26px);
  border-radius: 3px; overflow: hidden;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.karo svg,
.karo .ui-ik,
.karo .dj-ik { width: 78%; height: 78%; display: block; }
.karo svg .oyuk,
.karo .ui-ik .oyuk,
.karo .dj-ik .oyuk { fill: #0c1119; }
.oyuncu-serit.kirmizi .karo { background: rgba(255, 77, 77, 0.26); }
.oyuncu-serit.kirmizi .karo svg,
.oyuncu-serit.kirmizi .karo .ui-ik,
.oyuncu-serit.kirmizi .karo .dj-ik { fill: var(--kirmizi); }
.oyuncu-serit.mavi .karo { background: rgba(61, 139, 255, 0.26); }
.oyuncu-serit.mavi .karo svg,
.oyuncu-serit.mavi .karo .ui-ik,
.oyuncu-serit.mavi .karo .dj-ik { fill: var(--mavi); }
/* Oyuncunun kendi karosu — altin cerceve, Kuboom'daki gibi */
.karo.ben { border-color: var(--kehribar); box-shadow: 0 0 0 1px var(--kehribar) inset; }
/* Olen karo: koyu zemin + kirmizi X */
.karo.olu { background: rgba(30, 12, 12, 0.85); }
.karo.olu svg,
.karo.olu .ui-ik,
.karo.olu .dj-ik { opacity: 0.18; }
.karo.olu::after {
  content: ''; position: absolute; inset: 12%;
  background:
    linear-gradient(45deg, transparent 43%, var(--kirmizi) 43%, var(--kirmizi) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--kirmizi) 43%, var(--kirmizi) 57%, transparent 57%);
}

/* Skor kutulari — barin icinde, takim renginde blok */
.skor-kutu {
  display: grid; place-items: center;
  min-width: clamp(30px, 5vw, 48px);
  padding: 0 clamp(4px, 1vw, 9px);
  font-size: clamp(16px, 3.4vw, 26px); font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
/* ══ TAKIM RENGİ VURGU, ZEMİN DEĞİL ══
   SAHİBİN BİLDİRDİĞİ: "barlarda hâlâ mavilik ve eski oyundan kalma
   özellikler var."

   Skor kutuları DÜZ DOYGUN BLOKTU (`background: var(--mavi)`) —
   WolfStrike'ın düzeni. Oyunun geri kalanı koyu metal + altın levha
   diliyle yazılmışken üst barda iki parlak renk bloğu duruyordu ve
   bar oraya ait görünmüyordu.

   Takım kimliği KAYBOLMUYOR, yer değiştiriyor: renk artık SAYININ
   ve alt kenarın rengi. Bilgi aynı (kim hangi taraf), ama ekrandaki
   doygun renk alanı yaklaşık beşte birine iniyor. */
.skor-kutu.kirmizi {
  background: linear-gradient(180deg, rgba(72, 26, 26, 0.85) 0%, rgba(38, 14, 14, 0.9) 100%);
  color: #ffb9b9;
  box-shadow: inset 0 -3px 0 var(--kirmizi);
}
.skor-kutu.mavi {
  background: linear-gradient(180deg, rgba(24, 40, 74, 0.85) 0%, rgba(12, 20, 40, 0.9) 100%);
  color: #bdd6ff;
  box-shadow: inset 0 -3px 0 var(--mavi);
}

/* Orta blok — ustte saat, altinda "mod = puan" */
#mac-orta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: clamp(3px, 0.8vw, 6px) clamp(6px, 1.6vw, 14px);
  min-width: 0;
}

/* Skorun oranini gosteren ince bant — barin hemen altinda */
#mac-cizgi {
  display: flex; width: min(56%, 260px); height: 3px;
  border-radius: 0 0 3px 3px; overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
#mac-cizgi i { display: block; height: 100%; transition: width 0.3s ease; }
#mac-cizgi .k { background: var(--kirmizi); width: 50%; }
#mac-cizgi .m { background: var(--mavi); width: 50%; }

/* ═══════════════════════════════════════════
   ÖLDÜRME BİLDİRİMLERİ — ekranın ortası

   Kuboom bunları nişangâhın hemen üstünde, kalın beyaz yazıyla
   gösteriyor: "KILL x1", "HEADSHOT x1". Üst üste gelen aynı tür
   bildirim SAYIYI artırıyor, yeni satır açmıyor.
   ═══════════════════════════════════════════ */
#basari {
  position: absolute; left: 50%; top: 38%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; z-index: 24;
}
/* SAHİBİN İSTEĞİ: "ekranda 1 KILL yazıyor, o biraz büyük olsun."
   13-19 px'ten 22-38 px'e çıktı ve her yazıda kısa bir "pop" var —
   öldürme oyunun en iyi anı, ekranda da öyle görünmeli. */
.basari-satir {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(22px, 4.4vw, 38px); font-weight: 900; letter-spacing: 2.4px;
  color: #fff;
  text-shadow: 0 0 6px #000, 0 3px 10px rgba(0, 0, 0, 0.95);
  animation: basariGir 0.22s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.basari-satir .im { font-size: 1.15em; line-height: 1; }
.basari-satir.kafa { color: #ffd23f; }
.basari-satir.solan { opacity: 0; transition: opacity 0.5s ease; }
@keyframes basariGir {
  from { opacity: 0; transform: translateY(9px) scale(0.72); }
  60%  { opacity: 1; transform: translateY(0) scale(1.12); }
  to   { opacity: 1; transform: none; }
}
/* EFEKTLERİ AZALT açıkken "pop" da sakinleşiyor. */
body.efekt-az .basari-satir { animation: none; }
#mac-mod {
  display: flex; align-items: baseline; gap: clamp(4px, 1vw, 8px);
  max-width: 100%; min-width: 0;
}
#mod-ad {
  font-size: clamp(9px, 2.1vw, 13px); font-weight: 800;
  letter-spacing: 0.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#mac-mod .esit { font-size: clamp(8px, 1.7vw, 11px); opacity: 0.35; }
#mod-puan {
  font-size: clamp(9px, 2.1vw, 13px); font-weight: 800;
  opacity: 0.72; white-space: nowrap;
}

/* Maç saati — barın ortasında, skorların arasında */
#mac-sure {
  font-size: clamp(13px, 3vw, 21px); font-weight: 800;
  letter-spacing: 1.2px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}
/* Son 20 saniye — nabız gibi atar */
#mac-sure.kritik { color: var(--kirmizi); animation: sureNabiz 1s ease-in-out infinite; }
@keyframes sureNabiz { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } }

/* Yatayda çok basık ekranda (telefon yan) barı sıkıştır */
@media (max-height: 460px) {
  .skor-kutu { font-size: clamp(14px, 3vw, 20px); }
  #mac-sure { font-size: clamp(11px, 2.2vw, 15px); }
  .karo { width: clamp(13px, 2.2vw, 20px); height: clamp(13px, 2.2vw, 20px); }
}
/* Dar ekran HUD düzeltmeleri dosyanın SONUNDA — bkz. "DAR EKRAN
   HUD DÜZENİ". Burada dururken `#cephane` gibi sonradan gelen
   id kuralları onu eziyordu (aynı özgüllük, kaynak sırası kazanır). */

/* ═══════════════════════════════════════════
   MİNİ HARİTA — sağ üst

   Tuval bitmap'i sabit 176 px; CSS boyutu ekrana göre değişiyor.
   Bitmap'i CSS ile ölçeklemek, her karede yeniden boyutlandırmaktan
   ucuz — kaynak zaten tepeden bakış bir taslak, hafif yumuşama sorun değil.
   ═══════════════════════════════════════════ */
/* SOL ÜST ve YUVARLAK — Kuboom'un mini haritası daire. Duraklat
   düğmesi sol üst köşede kalıyor, harita onun sağına/altına oturuyor. */
/* Sol kenar payı DURAKLAT DÜĞMESİNE zincirli — düğmenin kendi
   `clamp(44px, 7vw, 48px)` ölçüsü burada tekrarlanıyor, elle sabit
   sayı yazılmıyor. Sabit 52 px yazılmıştı ve dokunmatik kipte düğme
   büyüyünce mini haritanın altına giriyordu (ölçümle yakalandı). */
#minimap {
  position: absolute; z-index: 22;
  top: calc(var(--sa-t, 0px) + 8px);
  left: calc(var(--sa-l, 0px) + 8px + clamp(44px, 7vw, 48px) + 8px);
  width: clamp(96px, 17vw, 168px); height: clamp(96px, 17vw, 168px);
  border-radius: 50%; overflow: hidden;
  background: rgba(8, 11, 17, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
#minimap-tuval { width: 100%; height: 100%; display: block; }
#minimap-yon {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  opacity: 0.45; text-shadow: 0 1px 3px #000;
}
/* Dar ekranda maç barı ekranın neredeyse tamamını kaplıyor; mini harita
   yan yana sığmıyor, barın ALTINA iniyor. Ölçüldü: 375 px genişlikte
   bar x 8→368, mini harita sağ üstte kalsa x 283→367'de üstüne biniyordu. */
@media (max-width: 760px) {
  #minimap { top: 64px; right: 8px; width: 84px; height: 84px; border-radius: 8px; }
}

/* ═══════════════════════════════════════════
   SKOR TABLOSU (Tab)
   ═══════════════════════════════════════════ */
#tablo {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 9, 14, 0.72);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
/* ══ SKOR TABLOSU OYUNUN DİLİNE ══
   Sahibin bildirdiği: "tab tuşundaki barda hâlâ mavi, eski düzende;
   sarartalım bar kısmını."

   Panel düz koyu-mavimsi bir kutuydu ve kenarı beyazdı — WolfStrike
   düzeni. Artık bitiş ekranıyla aynı: sıcak koyu zemin + altın
   kenar. */
#tablo-ic {
  width: min(94vw, 720px);
  max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 12px;
  background: linear-gradient(180deg, #241f18 0%, #12100c 100%);
  border: 1px solid rgba(228, 206, 147, 0.32);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  animation: tabloGir 0.14s ease-out;
}
@keyframes tabloGir { from { opacity: 0; transform: scale(0.97); } }

#tablo-baslik {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: clamp(9px, 2vw, 14px) clamp(12px, 2.6vw, 20px);
  /* Altın şerit — panelin üst kenarını oyunun rengiyle kapatıyor. */
  background: linear-gradient(180deg, rgba(232, 181, 60, 0.14), transparent);
  border-bottom: 1px solid rgba(228, 206, 147, 0.32);
}
#tablo-mod { font-size: clamp(11px, 2.2vw, 14px); font-weight: 800;
  letter-spacing: 0.6px; color: #e0c885; }
#tablo-skor { font-size: clamp(14px, 3vw, 20px); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--sari); }
#tablo-sure {
  font-size: clamp(11px, 2.2vw, 14px); font-weight: 800; opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* İki takım yan yana; dar ekranda alt alta */
#tablo-govde {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  overflow-y: auto; min-height: 0;
}
.tablo-takim { padding: clamp(8px, 1.8vw, 12px); min-width: 0; }
.tablo-takim + .tablo-takim { border-left: 1px solid rgba(228, 206, 147, 0.16); }

.tablo-ust, .tablo-satir {
  /* İlk sütun CİHAZ İKONU (sahibin isteği, WolfStrike düzeni):
     sabit 16px — ikon olmayan satırda (botlar) boş kutu duruyor ve
     adlar hizalı kalıyor. */
  display: grid; grid-template-columns: 16px minmax(0, 1fr) 34px 34px;
  align-items: center; gap: 6px;
}
.cihaz-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 14px; opacity: 0.85; color: currentColor;
}
.cihaz-ikon svg { display: block; }
.tablo-ust {
  padding: 4px 8px 7px;
  font-size: clamp(8px, 1.7vw, 10px); font-weight: 800; letter-spacing: 1.6px;
  border-bottom: 1px solid rgba(228, 206, 147, 0.22);
}
.tablo-ust .tt-k, .tablo-ust .tt-o { text-align: center; opacity: 0.45; }
.tablo-takim[data-takim="kirmizi"] .tt-ad { color: var(--kirmizi); }
.tablo-takim[data-takim="mavi"]    .tt-ad { color: var(--mavi); }

.tablo-satir {
  padding: clamp(3px, 0.9vw, 5px) 8px; border-radius: 5px;
  font-size: clamp(10px, 2vw, 13px); font-weight: 700;
}
.tablo-satir:nth-child(odd) { background: rgba(255, 255, 255, 0.035); }
/* Oyuncunun kendi satırı belirgin */
.tablo-satir.ben {
  background: rgba(232, 181, 60, 0.16);
  box-shadow: inset 3px 0 0 var(--sari);
}
.tablo-satir .ts-ad {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tablo-satir .ts-olu { opacity: 0.38; }
.tablo-satir .ts-k, .tablo-satir .ts-o {
  text-align: center; font-variant-numeric: tabular-nums;
}
.tablo-satir .ts-o { opacity: 0.5; }

#tablo-alt {
  padding: clamp(6px, 1.4vw, 10px); text-align: center;
  font-size: clamp(8px, 1.6vw, 10px); opacity: 0.5;
  border-top: 1px solid rgba(228, 206, 147, 0.18);
}
#tablo-alt b { opacity: 0.9; color: var(--sari); }

@media (max-width: 560px) {
  #tablo-govde { grid-template-columns: 1fr; }
  .tablo-takim + .tablo-takim {
    border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
}

/* Ölüm akışı — sağ üst.
   Maç başlığı ortada ~120 px yer kapladığı için dar ekranda akış
   onun altına iniyor; geniş ekranda yan yana sığıyorlar. */
#olum-akisi {
  position: absolute; top: calc(24px + clamp(96px, 17vw, 176px));
  right: calc(var(--sa-r, 0px) + 8px);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
@media (max-width: 760px) { #olum-akisi { top: 156px; right: 8px; } }
.olum-satir {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(8, 11, 17, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 11px; font-weight: 700;
  animation: akisGir 0.22s ease-out;
}
@keyframes akisGir { from { opacity: 0; transform: translateX(18px); } }
.olum-satir .m { color: var(--mavi); }
.olum-satir .k { color: var(--kirmizi); }
.olum-satir .ok { opacity: 0.45; font-size: 12px; }
.olum-satir.benim { border-color: rgba(255, 210, 63, 0.5); background: rgba(60, 45, 10, 0.7); }

/* Can barı ALT ORTA — Kuboom düzeni. Form rozeti barın hemen üstünde,
   ortalı; eskiden ikisi de sol alt köşedeydi. */
#hud-alt-orta {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: min(46vw, 420px);
}

#form-rozet {
  padding: 5px 13px; border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 2.6px;
  border: 1px solid;
  transition: all 0.3s ease;
}
#form-rozet[data-form="insan"] {
  color: var(--kehribar); border-color: rgba(255, 179, 71, 0.45);
  background: rgba(255, 179, 71, 0.10);
}
#form-rozet[data-form="kurt"] {
  color: var(--buz); border-color: rgba(224, 200, 133, 0.5);
  background: rgba(224, 200, 133, 0.12);
  box-shadow: 0 0 20px rgba(224, 200, 133, 0.25);
}
#form-rozet[data-form="surun"] {
  color: #8be08b; border-color: rgba(139, 224, 139, 0.5);
  background: rgba(139, 224, 139, 0.12);
}
#form-rozet[data-form="gecis"] {
  color: #fff; border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
  animation: yanip 0.28s infinite alternate;
}
@keyframes yanip { from { opacity: 0.5; } to { opacity: 1; } }

/* Kuboom'un can barı: geniş, düz kırmızı, ortasında büyük beyaz sayı.
   Genişlik kapsayıcıdan geliyor (%100) — telefonda da ekranın altını
   boydan boya kaplıyor. */
#can-kutu {
  position: relative;
  /* +6px: 9 dilimli cerceve (menu.css) yukseklikten 10px yiyor;
     taban 20px olunca kirmizi dolguya hic yer kalmiyordu. */
  width: 100%; height: clamp(26px, 3.8vh, 34px);
  border-radius: 5px; overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}
#can-dolgu {
  position: absolute; inset: 0; width: 100%;
  background: linear-gradient(90deg, #ff5b5b, #ff9068);
  transition: width 0.16s ease;
}
#gecici-dolgu {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, rgba(255, 210, 63, 0.9), rgba(224, 200, 133, 0.9));
  box-shadow: 0 0 14px rgba(224, 200, 133, 0.6);
  transition: width 0.1s linear;
}
#can-yazi {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(13px, 2.1vh, 17px); font-weight: 800; letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

#hud-sag-alt {
  position: absolute; right: 24px; bottom: 24px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
}

/* Cephane SAĞ ÜST (Kuboom). Mini harita sola geçtiği için üst sağ boş. */
/* Sag kenar boslugu 12 -> 8. Sol kenar (duraklat ve minimap)
   `--sa-l + 8px` kullaniyor; sag taraf 12'de kalinca HUD asimetrik
   duruyordu. Olculdu (812x375): sol 8, sag 12. */
#cephane {
  position: absolute; top: 10px; right: calc(var(--sa-r, 0px) + 8px);
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  background: rgba(10, 14, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
#cep-sarjor {
  font-size: clamp(20px, 3.4vh, 30px); font-weight: 800; line-height: 1; letter-spacing: 1px;
}
#cep-sarjor.az { color: #ff8a4c; }
#cep-sarjor.bos { color: var(--kirmizi); animation: yanip 0.4s infinite alternate; }
#cep-yedek { font-size: 12px; opacity: 0.5; font-weight: 700; }
#cep-dolum {
  position: absolute; inset: 0;
  display: grid; place-items: center; border-radius: 8px;
  background: rgba(10, 14, 20, 0.9);
  color: var(--buz); font-size: 11px; font-weight: 800; letter-spacing: 2px;
}
#donusum-tus {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 8px;
  background: rgba(10, 14, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
  transition: opacity 0.25s ease;
}
#donusum-tus.bekliyor { opacity: 0.42; }
#donusum-tus b {
  display: grid; place-items: center;
  width: 25px; height: 25px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 12px; font-weight: 800;
}
#donusum-yazi { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; opacity: 0.85; }
#bekleme-yay {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0%;
  background: var(--buz); box-shadow: 0 0 8px var(--buz);
}

/* Buz topu göstergesi — dönüşüm tuşuyla aynı kalıp.
   Hak tükenince sönüyor; şarj çubuğu sağ tık basılı tutuldukça doluyor. */
/* Şarj dolduğu an kısa bir parlama */

/* Ekran kenarı buz katmanı — üzerinde yavaşlatma varken */

/* DIP 24 -> 94.
   Olculdu (863x910, masaustu): ipuclari 849-886, #can-kutu 860-894 --
   26 PIKSEL UST USTE. Kontrol yazisi can barinin uzerinden geciyordu.

   94 su hesaptan: `#hud-alt-orta` dipten 16px yukarida basliyor ve
   icinde form rozeti (27) + bosluk (6) + can bari (34) = 67px var,
   yani ust kenari 83px'te. 94 hem onu hem 11px payi birakiyor.
   `@media (max-height: 460px)` kumeyi 8px'e cekiyor (ust kenar 75),
   orada da rahat geciyor.

   Dar ekranda ve dokunmatikte `#ipuclari` zaten `display: none` --
   bu sayi yalnizca masaustunu ilgilendiriyor. */
#ipuclari {
  position: absolute; bottom: 94px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 3px; text-align: center;
  font-size: 10.5px; opacity: 0.30; line-height: 1.6;
  transition: opacity 0.6s ease;
}
#ipuclari.sol { opacity: 0; }
#ipuclari b {
  display: inline-block; padding: 0 4px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.10); font-size: 10px;
}

#uyari {
  position: absolute; top: 33%; left: 50%; transform: translateX(-50%);
  padding: 8px 18px; border-radius: 7px;
  background: rgba(255, 70, 70, 0.16);
  border: 1px solid rgba(255, 90, 90, 0.4);
  color: #ffb0b0; font-size: 12.5px; font-weight: 700; letter-spacing: 1px;
}
/* Kısa bilgi bildirimi — aynı kutu, farklı ton */
#uyari.bilgi {
  background: rgba(224, 200, 133, 0.14);
  border-color: rgba(224, 200, 133, 0.45);
  color: #ffe3ad;
}

/* ═══════════════════════════════════════════
   ÖLÜM PERDESİ
   ═══════════════════════════════════════════ */
#olum {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at center, rgba(90, 10, 10, 0.42) 0%, rgba(0, 0, 0, 0.85) 75%);
  pointer-events: none;
}
#olum h2 {
  font-size: 40px; font-weight: 800; letter-spacing: 9px;
  color: #ff6a6a; text-shadow: 0 0 34px rgba(255, 70, 70, 0.5);
}
#olum-sebep { font-size: 13px; opacity: 0.6; letter-spacing: 1.4px; }
#olum-sayac {
  margin-top: 14px; font-size: 52px; font-weight: 300; opacity: 0.35;
}

/* ═══════════════════════════════════════════
   DOKUNMATİK KONTROLLER
   ═══════════════════════════════════════════ */
/* Skor tablosu açıkken dokunmatik katman GERİ ÇEKİLİYOR — bkz.
   `js/main.js` `tabloda` sınıfı. 20 < `#hud`un 25'i, yani tablo
   üstte kalıyor; düğmeler yine tıklanabilir, yalnız arkada. */
body.tabloda #dokunmatik { z-index: 20; }

#dokunmatik {
  position: fixed; inset: 0; z-index: 30;
  pointer-events: none;              /* sahne dokunuşları geçsin */
  touch-action: none;
}

/* Joystik — HER ZAMAN görünür. Boştayken evinde duruyor, sol yarıya
   basılınca parmağın altına taşınıyor, bırakınca evine dönüyor.
   Görünmez joystik "kontrol yok" hissi veriyordu. */
#dj-taban {
  position: absolute;
  /* `22vmin`, `22vh` DEĞİL. js/dokunmatik.js çapı
     `Math.min(innerWidth, innerHeight) * 0.22` ile hesaplıyor; `vh`
     yalnız yatayda buna denk düşüyor. Dikeyde CSS 150 px çiziyor,
     JS 110 px varsayıyordu — parmağın bastığı yer ile topuzun
     gittiği yer tutmuyordu. `vmin` tam olarak JS'in formülü. */
  width: clamp(110px, 22vmin, 150px); height: clamp(110px, 22vmin, 150px);
  margin: 0; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: radial-gradient(circle, rgba(20, 30, 45, 0.42) 0%, rgba(10, 14, 20, 0.3) 70%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  opacity: 0.55;
  transform: translate(-50%, -50%);
  transition: opacity 0.14s ease, border-color 0.14s ease;
  pointer-events: none;
}
#dj-taban.acik { opacity: 1; border-color: var(--buz); }
#dj-topuz {
  position: absolute; left: 50%; top: 50%;
  width: 46%; height: 46%; border-radius: 50%;
  background: rgba(230, 245, 255, 0.38);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
}
#dj-taban.acik #dj-topuz {
  background: rgba(224, 200, 133, 0.5); border-color: var(--buz);
}
/* Yön okları — joystiğin ne işe yaradığı ilk bakışta anlaşılsın */
#dj-taban::before {
  content: ''; position: absolute; inset: 14%;
  border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.12);
}

#dj-dugmeler {
  /* Güvenli alan payı: ateş düğmesi iPhone'un ana sayfa çubuğu ve
     yan kaydırma şeritlerinin üstünde duruyordu, parmak oraya
     basınca iOS kendi jestini yakalıyordu. */
  position: absolute;
  right: calc(var(--sa-r) + 14px);
  bottom: calc(var(--sa-b) + clamp(18px, 4vh, 30px));
  display: grid; grid-template-columns: repeat(2, auto); gap: 12px;
  align-items: end; justify-items: center;
  pointer-events: auto;
}
/* Çömel / koş düğmeleri KALDIRILDI (bkz. js/dokunmatik.js).
   Koş zaten joystik %85'i geçince kendiliğinden devreye giriyor;
   çömel de sol yarıda, yürümek için basılan parmağın altında
   yer kaplıyordu. Sol yarı artık tamamen joystiğe ait. */

.dj-btn {
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  color: #e8f4ff; font-size: 22px; line-height: 1;
  background: rgba(12, 18, 28, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(2px);
  transition: transform 0.08s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
}
.dj-btn.basili { transform: scale(0.92); background: rgba(224, 200, 133, 0.28); }
.dj-kucuk { width: 54px; height: 54px; font-size: 19px; }
.dj-ates {
  width: 92px; height: 92px; font-size: 30px;
  grid-column: 2; grid-row: 1 / span 2;
  border-color: rgba(255, 120, 90, 0.5);
  background: rgba(70, 20, 14, 0.45);
}
.dj-donus {
  width: 66px; height: 66px; font-size: 26px;
  border-color: rgba(224, 200, 133, 0.55);
  background: rgba(14, 44, 60, 0.5);
  color: var(--buz);
}

/* Dar ekran */
@media (max-width: 620px) {
  #menu-ic h1 { font-size: 30px; }
  #can-kutu { width: 168px; height: 26px; }   /* cerceve 10px yiyor */
  #ipuclari { display: none; }
}

/* ═══════════════════════════════════════════
   İKİ BAŞLANGIÇ + ONLINE PANELİ
   ═══════════════════════════════════════════ */
#oyna-online:hover { background: rgba(224, 200, 133, 0.18); border-color: var(--buz); }
#oyna-online b { font-size: 13px; font-weight: 800; letter-spacing: 2px; }
#oyna-online span { font-size: 10px; opacity: 0.6; font-weight: 600; letter-spacing: 0.4px; }
#oyna-online.acik { background: rgba(224, 200, 133, 0.22); border-color: var(--buz); }

#online-durum {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  padding: 6px 10px; border-radius: 6px; margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.05);
}
#online-durum.baglaniyor { color: #ffd479; }
#online-durum.bagli     { color: #7fe6a0; }
#online-durum.hata      { color: var(--kirmizi); }

.online-satir { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.online-satir span { font-size: 10px; opacity: 0.55; letter-spacing: 1.4px; min-width: 82px; }
#online-panel input {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff; font-family: inherit; font-size: 13px; font-weight: 700;
  /* 16px altı yazı tipi iOS Safari'de odaklanınca sayfayı yakınlaştırıyor */
}
#online-panel input:focus { outline: none; border-color: var(--buz); }

#online-butonlar { display: flex; flex-direction: column; gap: 8px; }
.online-katil { display: flex; gap: 8px; }
#online-panel button {
  padding: 9px 14px; border-radius: 7px; cursor: pointer;
  background: rgba(224, 200, 133, 0.14);
  border: 1px solid rgba(224, 200, 133, 0.3);
  color: var(--buz); font-family: inherit;
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
}
#online-panel button:hover:not(:disabled) { background: rgba(224, 200, 133, 0.24); }
#online-panel button:disabled { opacity: 0.35; cursor: default; }
#online-panel button.ikincil {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #ddd2bd;
}

#kod-kopyala {
  margin-left: auto; padding: 5px 9px !important; font-size: 9px !important; letter-spacing: 1px !important;
}
.lobi-satir {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.04);
  font-size: 12px; font-weight: 700;
}
.lobi-satir .nokta { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.lobi-satir.mavi .nokta { background: var(--mavi); }
.lobi-satir.kirmizi .nokta { background: var(--kirmizi); }
.lobi-satir .rol { margin-left: auto; font-size: 9px; opacity: 0.5; letter-spacing: 1.2px; }
.lobi-satir.ben { background: rgba(255, 255, 255, 0.11); }
.lobi-satir.kopuk { opacity: 0.4; }

#online-not { margin-top: 10px; font-size: 9.5px; opacity: 0.4; line-height: 1.6; }
#online-not code { opacity: 0.8; }


/* ═══════════════════════════════════════════
   DOKUNMATİKTE HUD YERLEŞİMİ

   Dokunmatik düğmeler ekranın alt köşelerini kaplıyor. Yatay telefonda
   (844×390) yükseklik çok az; can ve cephane kutularını "biraz yukarı
   almak" yetmiyor, ölçüldü — joystik ve ateş düğmesiyle üst üste
   biniyorlardı. Bu yüzden dokunmatikte HUD'un yeri TAMAMEN değişiyor:

     can + form   → sol ÜST
     cephane      → sağ üst, mini haritanın altı
     dönüşüm/buz  → GİZLİ (dokunmatik düğmeleri zaten var, kutular
                    yalnızca klavye kısayolunu anlatıyordu)
     ipuçları     → gizli (klavye yok)

   Alt yarı tamamen kontrollere kalıyor.

   `.dokunmatikli` sınıfı js/main.js'te <body>'ye ekleniyor — medya
   sorgusu yetmiyor, dokunmatik desteği ekran boyutundan bağımsız.
   ═══════════════════════════════════════════ */
/* Mini haritanın boyu ve üst payı TEK DEĞİŞKENDE: altındaki cephane
   ve ölüm akışı buna zincirleniyor. Eskiden üç ayrı yerde elle
   hesaplanmış sabitler vardı ve biri değişince zincir kopuyordu. */
body.dokunmatikli { --mini-boy: clamp(72px, 17vw, 176px); --mini-ust: 8px; }

/* Can barı artık SOL ÜST köşede değil, ALT ORTADA (`#hud-alt-orta`,
   Kuboom düzeni). Buradaki eski `#hud-sol-alt` kuralları — duraklat
   düğmesinin altına kaydırma, sütuna çevirme — gereksiz kaldı ve
   kaldırıldı: alt orta şeridi kimseyle köşe paylaşmıyor.
   `#hud` zaten `pointer-events: none`, yani barın parmağın altında
   kalması dokunmatik kontrolü engellemiyor. */
body.dokunmatikli #form-rozet {
  white-space: nowrap; font-size: 10px; letter-spacing: 1.2px; padding: 4px 9px;
}
body.dokunmatikli #can-kutu {
  flex: 0 0 auto; width: clamp(110px, 30vw, 170px); min-width: 0;
  height: 24px;                      /* cerceve 10px yiyor -> 14px dolgu */
}
body.dokunmatikli #hud-sag-alt {
  top: calc(var(--sa-t) + var(--mini-ust) + var(--mini-boy) + 8px);
  right: calc(var(--sa-r) + 8px); bottom: auto;
  align-items: flex-end;
}
body.dokunmatikli #donusum-tus,
body.dokunmatikli #ipuclari { display: none; }
body.dokunmatikli #minimap {
  top: calc(var(--sa-t) + var(--mini-ust)); right: calc(var(--sa-r) + 8px);
  width: var(--mini-boy); height: var(--mini-boy);
}
body.dokunmatikli #olum-akisi {
  /* ══ DÜĞME KÜMESİNİN ALTINDAN BAŞLIYOR ══
     Konum MİNİ HARİTAYA göre veriliyordu ama ölüm akışı SAĞDA
     duruyor ve orada dokunmatik düğme kümesi var. Ölçüldü
     (375×812, tek satır): akış 204..231, küme 106..232 →
     136×27 px ÜST ÜSTE. İlk öldürmeye kadar görünmüyor çünkü boş
     akışın yüksekliği sıfır; ilk ölümle beliriyor ve satır sayısı
     arttıkça büyüyor.

     Küme: üst `clamp(104px, 13vh, 114px)`, yükseklik 126 px
     (ateş 72 + boşluk 8 + küçük 46). Alt kenarı en fazla 240;
     10 px pay bırakıldı. */
  top: calc(var(--sa-t) + clamp(104px, 13vh, 114px) + 136px);
  right: calc(var(--sa-r) + 8px);
  /* Genişlik sınırı yoktu: giriş animasyonu kartı ekranın dışına
     atıyor, "…ürpençe" gibi kesik adlar bırakıyordu. */
  max-width: calc(100vw - var(--sa-l) - var(--sa-r) - 16px);
}

/* DİKEY telefon.
   Bu dalın tamamı EKSİKTİ: dokunmatik ayarları yalnız yüksekliğe
   (max-height: 540px) bakıyordu ve dikeyde hiç eşleşmiyordu. Maç
   barı dikeyde min(96vw,560px) ile ekranın neredeyse tamamını
   kapladığı için can kutusu, mini harita ve duraklat düğmesi barın
   ÜZERİNE biniyordu. */
@media (orientation: portrait) {
  body.dokunmatikli { --mini-boy: 84px; --mini-ust: 64px; }
}

/* Yatay telefon — daha da sıkı */
@media (max-height: 540px) and (orientation: landscape) {
  body.dokunmatikli { --mini-boy: 72px; }
  /* Kontroller: ekran alçakken düğmeler küçülüyor */
  .dj-kucuk { width: 44px; height: 44px; font-size: 16px; }
  .dj-ates { width: 74px; height: 74px; font-size: 25px; }
  .dj-donus { width: 54px; height: 54px; }
}


/* ===========================================
   MAC DURAKLATMA — skor tablosunun altindaki iki buyuk dugme

   ESC artik ana menuye ATMIYOR: oda canli kaliyor, ustune skor
   tablosu ve bu iki dugme geliyor. Tab BASILI TUTULURKEN isaretci
   kilitli oldugu icin dugmeler gizli — tiklanamayacak bir sey
   gostermek yaniltiyordu.
   =========================================== */
#tablo-dugmeler {
  display: flex; gap: clamp(8px, 1.6vw, 14px);
  padding: clamp(10px, 1.8vh, 16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  /* #tablo pointer-events:none — dugmeler icin geri aciliyor */
  pointer-events: auto;
}
#tablo-dugmeler.gizli { display: none !important; }

.tablo-dugme {
  flex: 1; min-width: 0;
  padding: clamp(12px, 2.2vh, 20px) 10px;
  border-radius: 12px; cursor: pointer;
  font-family: inherit; font-weight: 900; color: #fff;
  font-size: clamp(13px, 2.4vw, 20px); letter-spacing: clamp(0.5px, 0.25vw, 2px);
  border: 2px solid transparent;
  transition: filter 0.14s ease, transform 0.08s ease;
}
.tablo-dugme:active { transform: translateY(3px); }
.tablo-dugme:hover { filter: brightness(1.12); }
.tablo-dugme:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.tablo-dugme.yesil {
  background: linear-gradient(180deg, #3fce6a 0%, #1e9c45 100%);
  border-color: #86efac;
  box-shadow: 0 5px 0 #12692e, 0 10px 24px rgba(63, 206, 106, 0.32);
}
.tablo-dugme.yesil:active { box-shadow: 0 2px 0 #12692e; }

.tablo-dugme.kirmizi {
  background: linear-gradient(180deg, #ef4d54 0%, #bd1f27 100%);
  border-color: #fca5a5;
  box-shadow: 0 5px 0 #7d1218, 0 10px 24px rgba(239, 77, 84, 0.32);
}
.tablo-dugme.kirmizi:active { box-shadow: 0 2px 0 #7d1218; }

@media (max-width: 520px) {
  #tablo-dugmeler { flex-direction: column; }
}

/* Dokunmatikte ESC yok — duraklatma icin HUD dugmesi */
#duraklat {
  position: absolute; z-index: 32;
  /* `#hud` pointer-events:none — duraklat onun ÇOCUĞU olduğu için
     tıklamaları geçiriyordu ve dokunmatikte tamamen ölüydü. Telefonda
     duraklatma/skor/ODADAN ÇIK'a ulaşmanın tek kapısı bu düğme. */
  pointer-events: auto;
  top: calc(var(--sa-t) + 8px); left: calc(var(--sa-l) + 8px);
  width: clamp(44px, 7vw, 48px); height: clamp(44px, 7vw, 48px);
  border-radius: 10px; cursor: pointer;
  touch-action: manipulation;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 16, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff; font-size: clamp(11px, 2.4vw, 15px); letter-spacing: 1px;
  font-family: inherit;
}
/* HER ZAMAN gorunur — masaustunde de. Duraklatmanin tek yolu ESC idi
   ve o da isaretci kilidine bagliydi; kilit kurulamayinca oyuncu
   mactan cikamiyordu. */
#duraklat { display: flex; }
#duraklat.gizli { display: none !important; }
#duraklat svg,
#duraklat .ui-ik,
#duraklat .dj-ik { width: 58%; height: 58%; color: #fff; }


/* ===========================================
   OGRETICI — yukleme ekraninda kontroller

   Masaustunde klavye + fare, dokunmatikte parmak kontrolleri.
   Ikisi de HTML'de duruyor, gorunurlugu burasi seciyor: js tarafinda
   dal olusturmak yerine tek kural yeterli.
   =========================================== */
#ogretici {
  width: min(92vw, 720px);
  margin: clamp(12px, 3vh, 26px) auto clamp(10px, 2vh, 18px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 1.6vh, 14px);
}
.og-baslik {
  font-size: clamp(9px, 1.2vw, 11px); font-weight: 800;
  letter-spacing: 4px; opacity: 0.42;
}
.og-izgara {
  display: grid; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 15vw, 150px), 1fr));
  gap: clamp(7px, 1.2vw, 12px);
}
.og-kutu {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: clamp(9px, 1.6vh, 14px) 8px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 199, 140, 0.14);
  text-align: center;
}
.og-ad {
  font-size: clamp(8.5px, 1vw, 10px); font-weight: 800;
  letter-spacing: 1.4px; opacity: 0.72; line-height: 1.35;
}
.og-ad b { color: var(--kehribar); font-weight: 800; }

/* Klavye tuslari */
.og-tuslar { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.og-tuslar.wasd {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.tus {
  display: grid; place-items: center;
  min-width: clamp(22px, 3vw, 30px); height: clamp(22px, 3vw, 30px);
  padding: 0 5px; border-radius: 6px;
  font-size: clamp(8.5px, 1vw, 11px); font-weight: 800; letter-spacing: 0.5px;
  color: #e8f0fb;
  background: linear-gradient(180deg, #5f5444 0%, #383128 100%);
  border: 1px solid rgba(222, 214, 198, 0.28);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.tus.genis { min-width: clamp(42px, 6vw, 62px); }
.tus.bos { background: none; border: none; box-shadow: none; }

/* Fare — SVG, tek gorsel uc kez kullaniliyor, vurgulanan parca degisiyor */
.og-fare svg,
.og-fare .ui-ik,
.og-fare .dj-ik { width: clamp(26px, 3.4vw, 36px); height: auto; display: block; }
.og-fare .govde { fill: #383128; stroke: rgba(222, 214, 198, 0.32); stroke-width: 2; }
.og-fare .sol, .og-fare .sag { fill: #4b4236; }
.og-fare .teker { fill: #a18a4d; }
.og-fare[data-vurgu="sol"] .sol,
.og-fare[data-vurgu="sag"] .sag { fill: var(--kehribar); }
.og-fare[data-vurgu="teker"] .teker { fill: var(--kehribar); }

.og-simge { font-size: clamp(18px, 2.6vw, 26px); color: var(--buz); line-height: 1; }

.og-ipucu {
  font-size: clamp(9px, 1.15vw, 11.5px); opacity: 0.55; letter-spacing: 0.4px;
  text-align: center; max-width: 46ch;
}
.og-ipucu b { color: var(--kehribar); }

/* Hangi set gorunuyor */
.og-kutu.dokunmatik { display: none; }
body.dokunmatikli .og-kutu.masaustu { display: none; }
body.dokunmatikli .og-kutu.dokunmatik { display: flex; }

/* Yukleme bitince cikan dugme — ogretici okunmadan gecilmesin diye
   ekran kendiliginden kapanmiyor, oyuncu BASLA diyor. */

@media (max-height: 620px) {
  #ogretici { margin: 8px auto 6px; gap: 6px; }
  .og-kutu { padding: 6px 5px; gap: 5px; }
  .og-ipucu { display: none; }
}


/* ===========================================
   MAC ONCESI OGRETICI — Play'e basinca 2.5 sn

   Yukleme ekranindaki ogreticinin AYNI govdesi; .og-* siniflari
   ikisinde de ayni. Tekrar akilda kalicilik icin: oyuncu her mac
   oncesi tuslari bir kez daha goruyor.
   =========================================== */
#on-ogretici {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vh, 30px) 12px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 42%, rgba(18, 26, 44, 0.96) 0%, rgba(5, 8, 13, 0.98) 70%);
  animation: onOgrGir 0.18s ease-out;
}
#on-ogretici.gizli { display: none !important; }
#on-ogretici.kapaniyor { opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
@keyframes onOgrGir { from { opacity: 0; } }

#on-ogretici-ic {
  width: min(94vw, 760px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 1.6vh, 14px);
}
#on-ogretici .ogretici-govde {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: clamp(8px, 1.6vh, 14px);
}

/* Kalan sureyi gosteren ince cubuk */
#on-ogretici-cubuk {
  width: min(70%, 320px); height: 4px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.1); overflow: hidden;
}
#on-ogretici-cubuk i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--buz), var(--kehribar));
  transform-origin: left center;
}

/* ===========================================
   ILK DENEYIM — tek seferlik giris akisi
   (yalniz portal paketlerinde, bkz. js/ilkdeneyim.js)
   =========================================== */

#ilk-deneyim {
  position: fixed; z-index: 70;
  left: 50%; bottom: calc(var(--sa-b) + 18px);
  transform: translateX(-50%);
  pointer-events: none;              /* dokunus oyuna gecsin — iptal oradan */
}
#ilk-deneyim-kutu {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-radius: 14px;
  background: rgba(8, 12, 20, 0.86);
  border: 1px solid rgba(224, 200, 133, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
}
#ilk-deneyim-kutu b {
  font-size: clamp(11px, 1.6vw, 14px); font-weight: 800;
  letter-spacing: 2.4px; color: var(--buz);
}
#ilk-deneyim-sayi {
  min-width: 30px; text-align: center;
  font-size: clamp(20px, 3vw, 28px); font-weight: 800;
  color: #fff; font-variant-numeric: tabular-nums;
}
#ilk-deneyim-kutu i {
  font-style: normal; font-size: clamp(9px, 1.2vw, 11px);
  letter-spacing: 1.4px; opacity: 0.5; text-transform: uppercase;
}

/* ── Oyun ici ogretici: kurt dugmesi vurgusu ── */

/* Dugmenin kendisi nabiz atiyor. `outline` degil `box-shadow`:
   outline yuvarlak dugmede kare cikiyor. */
.dj-btn.ogretici-vurgu {
  border-color: var(--buz) !important;
  animation: ogreticiNabiz 1.05s ease-in-out infinite;
}
@keyframes ogreticiNabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 200, 133, 0.55); }
  55%      { box-shadow: 0 0 0 14px rgba(224, 200, 133, 0); }
}

/* Parmak isareti — dugmenin sag altinda, dokunmaya davet.
   `pointer-events: none` sart: parmak dugmenin ustunde duruyor ve
   dokunusu yutarsa ogretici hic tamamlanamaz. */
/* Eski (26 px, köşeye yapışık) parmak kuralı KALDIRILDI. Yenisi
   dosyanın sonunda. İkisi bir arada dururken eskinin `bottom: -10px`i
   yeninin `top: 100%`üyle birleşiyor ve mutlak konumlu ögenin
   yüksekliğini 10 px'e kilitliyordu — parmak 46 px punto ile ama
   10 px kutuda çiziliyordu (ölçüldü). */

#ogretici-balon {
  position: fixed; z-index: 45;
  right: calc(var(--sa-r) + 14px);
  bottom: calc(var(--sa-b) + clamp(150px, 26vh, 210px));
  padding: 8px 14px; border-radius: 10px;
  background: rgba(8, 12, 20, 0.88);
  border: 1px solid rgba(224, 200, 133, 0.4);
  color: var(--buz); font-size: clamp(10px, 1.5vw, 13px);
  font-weight: 800; letter-spacing: 1.8px; white-space: nowrap;
  pointer-events: none;
  animation: ogreticiBalon 1.05s ease-in-out infinite;
}
/* MASAUSTU: dokunmatik dugme yok, isaret edilecek bir hedef de yok.
   O yuzden balon ekranin TAM ORTASINDA ve daha iri — oyuncu kurda
   donusebildigini hic fark etmeden maci bitirebiliyordu. */
#ogretici-balon:not(.dokunmatik) {
  right: auto; left: 50%; bottom: auto; top: 46%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 26px; border-radius: 14px;
  background: rgba(6, 10, 18, 0.9);
  border: 1px solid rgba(224, 200, 133, 0.55);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
#ogretici-balon:not(.dokunmatik) b {
  font-size: clamp(13px, 2vw, 18px); letter-spacing: 3px; color: var(--buz);
}
#ogretici-balon:not(.dokunmatik) span {
  display: flex; align-items: center; gap: 9px;
}
#ogretici-balon:not(.dokunmatik) i {
  font-style: normal; font-size: 11px; letter-spacing: 1px;
  opacity: 0.5; text-transform: uppercase;
}
#ogretici-balon kbd {
  display: inline-block; padding: 5px 11px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom-width: 3px;
  font-family: inherit; font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 800; letter-spacing: 1.4px; color: #fff;
}
@keyframes ogreticiBalon {
  0%, 100% { opacity: 0.72; }
  55%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dj-btn.ogretici-vurgu, .ogretici-parmak, #ogretici-balon { animation: none; }
}

/* ===========================================
   BAKIS OGRETICISI — sag yarida kayan el
   Oyuncular sag yarinin surukleme alani oldugunu anlamiyordu.
   =========================================== */
#bakis-ogretici {
  position: fixed; z-index: 46;
  left: 66%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;              /* SART: altindaki surukleme calissin */
}
#bakis-el {
  font-size: clamp(38px, 8vw, 56px); line-height: 1;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.65));
  animation: bakisKay 2.1s ease-in-out infinite;
}
#bakis-yazi {
  padding: 7px 14px; border-radius: 9px;
  background: rgba(6, 10, 18, 0.86);
  border: 1px solid rgba(224, 200, 133, 0.45);
  color: var(--buz); white-space: nowrap;
  font-size: clamp(10px, 1.6vw, 13px); font-weight: 800; letter-spacing: 1.6px;
}
/* Sagdan sola kayip geri donuyor — hangi hareketin beklendigi belli olsun */
@keyframes bakisKay {
  0%, 100% { transform: translateX(-46px) rotate(-9deg); opacity: 0.55; }
  50%      { transform: translateX(46px) rotate(9deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #bakis-el { animation: none; }
}

/* ═══════════════════════════════════════════
   DAR EKRAN HUD DÜZENİ — dosyanın SONU olmak zorunda

   Bu blok id seçicileriyle çalışıyor ve yukarıdaki `#cephane`,
   `#hud-sag-alt`, `#hud-alt-orta` tanımlarıyla AYNI ÖZGÜLLÜKTE.
   Eşitlikte kaynak sırası kazanıyor, yani yukarıya konulursa
   sessizce eziliyor — bir kez yaşandı, ölçümle yakalandı.

   Çözdüğü üç çakışma (375 px'te ölçüldü):
   · 16 karo bara sığmıyor          → şeritler gizleniyor
   · cephane barın sağ ucuna biniyor → barın altına iniyor
   · can barı dönüşüm düğmesiyle üst üste → düğme yukarı kalkıyor,
     ekranın dip şeridi tamamen can barının oluyor
   ═══════════════════════════════════════════ */
@media (max-width: 620px) {
  .oyuncu-serit { display: none; }
  #hud-ust { width: min(70vw, 340px); }
  /* ══ CEPHANE BARIN ALTINA ══
     46px yetmiyordu: dar ekranda `#hud-ust` 54px yüksek (oyuncu
     şeritleri gizlense de skor kutuları + mod satırı o kadar
     tutuyor) ve cephane kutusu barın sağ ucuna 37×8 px BİNİYORDU.
     Ölçüldü, 375×812.

     60 = 54 (bar) + 6 (pay). Sağ boşluk 10 → 8: sol kenar (duraklat)
     ve ölüm akışı zaten 8; üçü aynı hizaya geldi. */
  #cephane { top: 60px; right: 8px; padding: 4px 10px; }
  #hud-sag-alt { bottom: 64px; right: 12px; }
  #hud-alt-orta { width: min(74vw, 420px); bottom: 10px; }
}

/* YATAY TELEFON (kısa ama geniş — asıl oynanan biçim, ör. 812×375).
   Genişlik 620'yi aştığı için yukarıdaki blok burada çalışmıyor;
   çakışmalar ayrı ölçüldü:
   · mini harita üst barın sol ucunun altına giriyordu → küçülüp
     barın soluna çekiliyor
   · can barı dönüşüm düğmesine değiyordu → düğme yukarı kalkıyor */
@media (max-height: 460px) {
  #minimap { width: 72px; height: 72px; border-width: 1.5px; }
  #hud-sag-alt { bottom: 58px; }
  #hud-alt-orta { bottom: 8px; width: min(44vw, 400px); }
  /* Bar daralıyor ki sol ucu mini haritanın sağında kalsın. Mini
     harita duraklat düğmesine zincirli olduğu için sola daha fazla
     çekilemiyor; hareket eden taraf bar. */
  #hud-ust { width: min(72vw, 500px); }
}


/* ═══════════════════════════════════════════════════════════════
   MOBİL YERLEŞİM — sahibin belirlediği düzen

     sol üst   → mini harita
     sağ üst   → ATEŞ + GORİLE DÖNÜŞ (altlarında zıpla / şarjör)
     sol alt   → joystik
     sağ alt   → kamera çevirme (boş bırakılıyor)

   Dosyanın SONUNDA duruyor: aynı özgüllükte kaynak sırası belirleyici
   ve bu projede iki kez o tuzağa düşüldü (HUD'da cephane, menüde
   ikon boyu).
   ═══════════════════════════════════════════════════════════════ */
body.dokunmatikli #dj-dugmeler {
  top: calc(var(--sa-t, 0px) + clamp(48px, 9vh, 76px));
  right: calc(var(--sa-r, 0px) + 12px);
  bottom: auto;
  grid-template-columns: repeat(2, auto);
  align-items: start;
  gap: 10px;
}
/* Ateş en büyük ve en dışta — başparmağın doğal yeri */
body.dokunmatikli .dj-ates { grid-column: 2; grid-row: 1; }
body.dokunmatikli .dj-donus { grid-column: 1; grid-row: 1; align-self: center; }
body.dokunmatikli .dj-btn.dj-kucuk:nth-of-type(3) { grid-column: 2; grid-row: 2; }
body.dokunmatikli .dj-btn.dj-kucuk:nth-of-type(4) { grid-column: 1; grid-row: 2; }

/* Mini harita SOL ÜST. Dokunmatikte sağ üstteydi; orası artık ateş
   ve dönüşüm düğmelerinin yeri. */
body.dokunmatikli #minimap {
  top: calc(var(--sa-t, 0px) + var(--mini-ust));
  left: calc(var(--sa-l, 0px) + 8px + clamp(44px, 7vw, 48px) + 8px);
  right: auto;
  width: var(--mini-boy); height: var(--mini-boy);
}

/* Sağ alt tamamen bakışa ait: oraya düşen HUD parçaları yukarı
   çekiliyor, yoksa sürükleyen parmağın altında kalıyorlar. */
body.dokunmatikli #hud-sag-alt { bottom: auto; top: calc(var(--sa-t, 0px) + 8px); }

/* DİKEY telefon: düğmeler biraz küçülüyor ve joystik yükseliyor —
   dikeyde alt kenar ana sayfa çubuğuna çok yakın. */
@media (orientation: portrait) {
  /* Taban 56 -> 88 -> 104. Ates dugmesi kumesi #cephane
     gostergesini ortuyordu; taban HER ZAMAN cephanenin ALTINDAN
     baslamak zorunda.

     Hesap cephanenin yerinden turuyor: `#cephane` top 46 iken 88
     dogruydu. Bar cakismasi duzeltilip cephane 60'a indirilince
     (60 + 38 boy = 98 alt kenar) 88 yetersiz kaldi ve kume yeniden
     cephanenin ustune binerdi — o yuzden 104: 98 + 6 pay.

     BU IKI SAYI BIRBIRINE BAGLI. `#cephane` top degeri degisirse
     burasi da degismek zorunda; kapisi `tools/hud-sina.mjs`. */
  body.dokunmatikli #dj-dugmeler { gap: 8px; top: calc(var(--sa-t, 0px) + clamp(104px, 13vh, 114px)); }
  body.dokunmatikli .dj-ates { width: 72px; height: 72px; font-size: 24px; }
  body.dokunmatikli .dj-donus { width: 56px; height: 56px; }
  body.dokunmatikli .dj-kucuk { width: 46px; height: 46px; font-size: 16px; }
}

/* Can/ad şeridi joystiğin ÜSTÜNE çıkıyor. Ölçüldü (375x812): şerit
   49-326 / 752-802, joystik 18-128 / 684-794 — 79x42 px çakışma,
   yani başparmak şeridin yarısını kapatıyordu. Joystik 110 px yüksek
   ve 18 px paylı; şerit onun üstünde duruyor. */
@media (orientation: portrait) {
  body.dokunmatikli #hud-alt-orta {
    bottom: calc(var(--sa-b, 0px) + 140px);
  }
}
/* ALÇAK YATAY — şerit daralıyor.
   Ölçüldü (812x375): can/ad şeridi 227-585, sağ alttaki dönüşüm
   kutusu 574'te başlıyor — 11 px çakışma. `dokunmatikli` şartı YOK
   çünkü çakışma masaüstü dar pencerede de var. */
@media (orientation: landscape) and (max-height: 520px) {
  #hud-alt-orta { width: min(36vw, 330px); }
}
@media (orientation: landscape) {
  body.dokunmatikli #hud-alt-orta {
    bottom: calc(var(--sa-b, 0px) + 8px);
    left: 50%;
  }
}

/* Üst skor barı mini haritanın sağında kalıyor. Mini harita
   dokunmatikte SOL ÜSTE taşındı ve ölçümde bar onunla çakıştı
   (740x360: harita 60-132, bar 120-620 → 12x46 px). Bar merkezli
   olduğu için daraltmak iki kenarı da içeri çekiyor. */
@media (orientation: landscape) {
  body.dokunmatikli #hud-ust { width: min(58vw, 430px); }
}


/* ═══════════════════════════════════════════════════════════════
   MOBİL DÜĞME İKONLARI
   Düğme ölçüleri DEĞİŞMİYOR; içindeki SVG kutuyu dolduruyor.
   ═══════════════════════════════════════════════════════════════ */
.dj-btn svg,
.dj-btn .ui-ik,
.dj-btn .dj-ik {
  width: 58%; height: 58%;
  fill: currentColor; pointer-events: none;
}
.dj-btn svg .cizgi,
.dj-btn .ui-ik .cizgi,
.dj-btn .dj-ik .cizgi {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
}
/* Goril kafası düğmeyi daha çok doldursun — tanınması için ayrıntı
   gerekiyor, küçükken lekeye dönüyor. */
.dj-donus svg,
.dj-donus .ui-ik,
.dj-donus .dj-ik { width: 74%; height: 74%; }
/* Kafa içindeki oyuklar (göz/ağız) düğmenin zeminini göstersin;
   düz tek renk siluet goril gibi okunmuyordu. */
.dj-donus svg .oyuk,
.dj-donus .ui-ik .oyuk,
.dj-donus .dj-ik .oyuk { fill: rgba(6, 10, 18, 0.72); }

/* Dönüşüm düğmesi HER ZAMAN dikkat çekiyor: oyunun imza mekaniği bu
   ve oyuncular fark etmiyordu. Hazırken yumuşak bir nabız var,
   beklemedeyken sönük duruyor. */
.dj-donus {
  border-color: rgba(224, 200, 133, 0.75);
  background: rgba(224, 200, 133, 0.16);
}
@keyframes goril-nabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 200, 133, 0.5); }
  55% { box-shadow: 0 0 0 10px rgba(224, 200, 133, 0); }
}
.dj-donus:not(.bekliyor) { animation: goril-nabiz 2.4s ease-out infinite; }
.dj-donus.bekliyor { opacity: 0.45; animation: none; }

/* ═══ ÖĞRETİCİ PARMAĞI — büyük ve dikkat çekici ═══
   Öncesi 22 px'lik bir emojiydi ve telefonda gözden kaçıyordu
   (sahibin isteği: "parmak daha büyük ve dikkat çekici olsun").
   Artık düğmenin köşesinde değil ÜSTÜNDE duruyor, iki kat büyük ve
   düğmeye doğru vuruyor. */
.ogretici-parmak {
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  font-size: 46px; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
  pointer-events: none; z-index: 3;
  animation: parmak-vur 1.15s ease-in-out infinite;
}
@keyframes parmak-vur {
  0%, 100% { transform: translateX(-50%) translateY(6px) scale(1); }
  45% { transform: translateX(-50%) translateY(-10px) scale(1.14); }
}
/* Düğmenin çevresinde genişleyen halka — parmakla birlikte çalışıyor,
   ikisi bir arada gözden kaçmıyor. */
.dj-btn.ogretici-vurgu::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%;
  border: 3px solid #ffd75e;
  animation: ogretici-halka 1.15s ease-out infinite;
  pointer-events: none;
}
@keyframes ogretici-halka {
  0% { transform: scale(0.92); opacity: 0.95; }
  100% { transform: scale(1.5); opacity: 0; }
}
.dj-btn.ogretici-vurgu { position: relative; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .dj-donus:not(.bekliyor), .ogretici-parmak,
  .dj-btn.ogretici-vurgu::after { animation: none; }
}

/* MUZ ÖFKE BARI HAZIR — çubuk dolduğunda düğme altın titriyor.
   Eski "bekliyor" durumu sönüktü ve hiçbir şey vaat etmiyordu;
   dolan çubuk bir ÖDÜL, o yüzden dolunca kendini duyuruyor. */
#donusum-tus.hazir { border-color: #ffd75e; box-shadow: 0 0 0 0 rgba(255, 215, 94, 0.55); }
#donusum-tus.hazir #bekleme-yay { background: linear-gradient(90deg, #ffe27a, #f2a824); }
#donusum-tus.hazir,
.dj-donus.hazir { animation: gorilHazir 1.5s ease-out infinite; }
@keyframes gorilHazir {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 94, 0.5); }
  55% { box-shadow: 0 0 0 10px rgba(255, 215, 94, 0); }
}
body.efekt-az #donusum-tus.hazir,
body.efekt-az .dj-donus.hazir { animation: none; }