/* ═══════════════════════════════════════════════════════════════════════════
   🎮 Faz F — YENİ OYUN İÇİ ARAYÜZ (Hayatta Kal + Takım Savaşı)
   Ölçüler ekran yüksekliğine göre (vh/clamp) — 320px'lik küçük telefondan masaüstüne.
   Yerleşim: sol üst çıkış+radar · üst orta skor kapsülü · sağ üst ayarlar+tablolar ·
   alt orta can/XP/market (iki başparmağın arası) · sağ alt nitro+EMP (başparmak erişimi).
   Eski hud/mobile/responsive/tdm kuralları !important kullandığı için html:root body.in-game.in-game ile ezilir.
   backdrop-filter YOK (mobilde pahalı) — yarı saydam koyu cam.
   Seçici "html:root body.in-game.in-game": tdm.css "body.in-game.tdm-mode #x" kurallarından daha özgül olsun diye.
   ═══════════════════════════════════════════════════════════════════════════ */

html:root body.in-game.in-game {
    --sl: max(8px, env(safe-area-inset-left));
    --sr: max(8px, env(safe-area-inset-right));
    --sb: max(6px, env(safe-area-inset-bottom));
    --shop: clamp(30px, 9.5vh, 44px);            /* market düğmesi (v2.15: oyun alanı için küçültüldü) */
    --nitro: clamp(54px, 17vh, 78px);            /* nitro düğmesi */
    --emp: clamp(44px, 13.5vh, 60px);            /* EMP düğmesi */
    --radar: clamp(58px, 17vh, 96px);
    --stick: clamp(84px, 26vh, 124px);
    --bar-w: calc(7 * var(--shop) + 72px);       /* market genişliği ≈ can/XP genişliği */
    --glass: rgba(4, 12, 22, 0.62);
    --glass-b: rgba(127, 246, 255, 0.16);
}

/* ── Sol üst: çıkış + radar + FPS ─────────────────────────────────────── */
html:root body.in-game.in-game #exitBtn {
    position: fixed !important; top: 8px !important; left: var(--sl) !important; margin: 0 !important;
    width: 34px !important; height: 34px !important; border-radius: 50% !important;
    background: var(--glass) !important; border: 1px solid rgba(255, 51, 102, 0.45) !important; box-shadow: none !important;
}
html:root body.in-game.in-game .minimap-container {
    position: fixed !important; top: 8px !important; left: calc(var(--sl) + 42px) !important; right: auto !important; bottom: auto !important;
    width: var(--radar) !important; height: var(--radar) !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden !important;
    background: rgba(2, 10, 20, 0.55) !important; border: 1px solid rgba(0, 234, 255, 0.35) !important;
    box-shadow: 0 0 14px rgba(0, 234, 255, 0.15), inset 0 0 18px rgba(0, 234, 255, 0.12) !important;
}
html:root body.in-game.in-game #minimap { width: 100% !important; height: 100% !important; border-radius: 50% !important; border: none !important; }
html:root body.in-game.in-game #statsPanel {
    top: calc(12px + var(--radar)) !important; bottom: auto !important; left: calc(var(--sl) + 42px) !important;
    padding: 1px 6px !important; font-size: 9px !important; line-height: 1.4 !important;
    background: rgba(0, 0, 0, 0.35) !important; border: none !important; border-radius: 6px !important; box-shadow: none !important;
}

/* ── Üst orta: skor kapsülü (Hayatta Kal) ─────────────────────────────── */
html:root body.in-game.in-game .center-panel {
    position: fixed !important; top: 8px !important; left: 50% !important; transform: translateX(-50%) !important;
    display: flex !important; align-items: center !important; gap: 14px !important;
    height: 34px !important; padding: 0 16px !important; margin: 0 !important; min-width: 0 !important; width: auto !important;
    background: var(--glass) !important; border: 1px solid var(--glass-b) !important; border-radius: 17px !important; box-shadow: none !important;
}
html:root body.in-game.in-game .center-panel .score-box { font-size: 12px !important; letter-spacing: 1.5px !important; color: #e8fbff !important; text-shadow: none !important; margin: 0 !important; }
html:root body.in-game.in-game .center-panel .money-box { font-size: 13px !important; margin: 0 !important; }

/* ── Üst orta: Takım Savaşı skor paneli (hud.js .tdm-sp-* yapısı) ─────── */
html:root body.in-game.in-game #tdm-score-panel {
    top: 6px !important; padding: 4px 8px !important; gap: 0 !important; min-width: 0 !important;
    background: var(--glass) !important; border: 1px solid var(--glass-b) !important; border-radius: 16px !important;
}
#tdm-score-panel .tdm-sp-team { display: flex; align-items: center; gap: 8px; padding: 2px 12px; }
#tdm-score-panel .tdm-sp-team b { font-size: clamp(18px, 6vh, 26px); font-weight: 900; line-height: 1; }
#tdm-score-panel .tdm-sp-team span { font-size: 9px; letter-spacing: 1.5px; font-weight: 700; }
#tdm-score-panel .tdm-sp-team.blue { color: #3fa9ff; }
#tdm-score-panel .tdm-sp-team.red { color: #ff5533; flex-direction: row-reverse; }
#tdm-score-panel .tdm-sp-mid { display: flex; flex-direction: column; align-items: center; padding: 0 12px; border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(255, 255, 255, 0.12); }
#tdm-score-panel .tdm-sp-time { font-size: clamp(13px, 4.4vh, 18px); color: #fff; letter-spacing: 1px; }
#tdm-score-panel .tdm-sp-sub { display: flex; gap: 8px; font-size: 9px; color: rgba(232, 251, 255, 0.6); white-space: nowrap; }
#tdm-score-panel .tdm-sp-sub .gem { color: var(--crystal, #7ff6ff); }

/* ── Sağ üst: ayarlar + tablolar ──────────────────────────────────────── */
html:root body.in-game.in-game #topRightControls { top: 8px !important; right: var(--sr) !important; gap: 5px !important; }
html:root body.in-game.in-game #topRightControls .icon-btn {
    width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 10px !important; font-size: 12px !important;
    background: var(--glass) !important; border: 1px solid var(--glass-b) !important; box-shadow: none !important;
}
html:root body.in-game.in-game #topRightControls #langBtn { width: auto !important; padding: 0 8px !important; }
html:root body.in-game.in-game #leaderboard, html:root body.in-game.in-game #killboard,
html:root body.in-game.in-game #tdm-leaderboard, html:root body.in-game.in-game #tdm-killboard {
    position: fixed !important; right: var(--sr) !important; left: auto !important; bottom: auto !important;
    width: clamp(118px, 19vw, 176px) !important; min-width: 0 !important; max-width: none !important; margin: 0 !important;
    padding: 6px 9px !important; border-radius: 12px !important;
    background: var(--glass) !important; border: 1px solid var(--glass-b) !important; box-shadow: none !important;
    font-size: 10px !important; line-height: 14px !important; overflow: hidden !important;
}
/* Sabit satır yüksekliği → tablolar alt alta çakışmadan dizilir (lider 5 + başlık) */
html:root body.in-game.in-game #leaderboard, html:root body.in-game.in-game #tdm-leaderboard { top: 48px !important; max-height: 100px !important; }
html:root body.in-game.in-game #killboard, html:root body.in-game.in-game #tdm-killboard { top: 154px !important; max-height: 72px !important; }
html:root body.in-game.in-game #leaderboard h3, html:root body.in-game.in-game #killboard h3 {
    margin: 0 0 3px !important; padding: 0 0 2px !important; font-size: 9px !important; letter-spacing: 1.5px !important; border-bottom-width: 1px !important;
}
html:root body.in-game.in-game #leaderboard li, html:root body.in-game.in-game #killboard li { font-size: 10px !important; line-height: 14px !important; margin: 0 !important; padding: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:root body.in-game.in-game #leaderboard-list li:nth-child(n+6), html:root body.in-game.in-game #killboard-list li:nth-child(n+4) { display: none !important; }
html:root body.in-game.in-game #tdm-leaderboard > div, html:root body.in-game.in-game #tdm-killboard > div { margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:root body.in-game.in-game #tdm-leaderboard > div:first-child, html:root body.in-game.in-game #tdm-killboard > div:first-child { margin-bottom: 2px !important; font-size: 9px !important; letter-spacing: 1px; }

/* ── Alt orta: can + XP + market ──────────────────────────────────────── */
html:root body.in-game.in-game .shop-bar {
    position: fixed !important; left: 50% !important; right: auto !important; bottom: var(--sb) !important; top: auto !important;
    transform: translateX(-50%) !important; width: auto !important; max-width: calc(100vw - 2 * var(--nitro) - 60px) !important;
    display: flex !important; align-items: center !important; gap: 4px !important; padding: 4px 6px !important; margin: 0 !important;
    background: var(--glass) !important; border: 1px solid var(--glass-b) !important; border-radius: 16px !important; box-shadow: none !important;
}
html:root body.in-game.in-game .shop-bar .shop-btn {
    position: relative !important; flex: none !important; width: var(--shop) !important; height: var(--shop) !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 0 9px !important; border-radius: 11px !important;
    font-size: calc(var(--shop) * 0.36) !important;
    background: linear-gradient(180deg, rgba(20, 40, 60, 0.85), rgba(6, 14, 24, 0.9)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: none !important;
}
@media (pointer: coarse) { html:root body.in-game.in-game .shop-bar .shop-btn::before { display: none !important; } } /* [1] tuş etiketi: dokunmatikte gereksiz */
html:root body.in-game.in-game .shop-bar .shop-btn::after {
    bottom: 2px !important; left: 0 !important; right: 0 !important; transform: none !important; width: auto !important; text-align: center;
    font-size: clamp(6.5px, 2vh, 9px) !important; color: rgba(232, 251, 255, 0.75) !important; text-shadow: none !important;
}
html:root body.in-game.in-game .shop-bar .separator { width: 1px !important; height: 70% !important; margin: 0 3px !important; background: rgba(255, 255, 255, 0.15) !important; }
/* Yükseltme düğmesi: seviye rozeti sağ üstte, fiyat düğmenin İÇİNDE altta (eskiden düğmenin altına taşıyordu) */
html:root body.in-game.in-game .shop-bar .upgrade-info { position: static !important; }
html:root body.in-game.in-game .shop-bar .upgrade-info span:first-child { top: 2px !important; right: 2px !important; font-size: clamp(6.5px, 2vh, 8.5px) !important; padding: 0 3px !important; color: #ffd36b !important; background: rgba(0, 0, 0, 0.55) !important; }
html:root body.in-game.in-game .shop-bar .upgrade-info span:last-child { bottom: 2px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: clamp(6.5px, 2vh, 9px) !important; color: rgba(232, 251, 255, 0.75) !important; text-shadow: none !important; }
html:root body.in-game.in-game .shop-bar .badge-time { top: 2px !important; right: 2px !important; bottom: auto !important; font-size: 7px !important; padding: 0 3px !important; }

/* Seviye çubuğu (v2.15): alttaki can çubuğu KALDIRILDI — can, geminin üstündeki renkli barda (yeşil → sarı → kırmızı).
   Kalan yer seviye çubuğuna: [LV 5] + kalın XP çubuğu, marketin hemen üstünde. */
html:root body.in-game.in-game .health-container { display: none !important; }
html:root body.in-game.in-game #xp-container {
    position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; transform: translateX(-50%) !important;
    bottom: calc(var(--sb) + var(--shop) + 14px) !important;
    width: var(--bar-w) !important; max-width: calc(100vw - 2 * var(--nitro) - 60px) !important; height: 17px !important;
    display: flex !important; align-items: center !important; gap: 7px !important; padding: 0 !important; margin: 0 !important;
    background: none !important; border: none !important; box-shadow: none !important;
}
html:root body.in-game.in-game #xp-container .xp-label {
    position: static !important; flex: none !important; box-sizing: border-box !important; min-width: 44px !important;
    height: 17px !important; line-height: 15px !important; text-align: center !important;
    font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; padding: 0 7px !important; margin: 0 !important;
    border-radius: 9px !important; color: #3dff8f !important; background: rgba(61, 255, 143, 0.12) !important; border: 1px solid rgba(61, 255, 143, 0.4) !important;
}
html:root body.in-game.in-game #xp-container .xp-label > span:first-child { display: none !important; } /* "LEVEL/SEVİYE" yerine her dilde kısa LV */
html:root body.in-game.in-game #xp-container .xp-label::before { content: 'LV '; }
html:root body.in-game.in-game #xp-container .xp-bar-bg {
    position: relative !important; flex: 1 !important; width: auto !important; height: 7px !important; margin: 0 !important; overflow: hidden !important;
    border-radius: 4px !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(61, 255, 143, 0.22) !important;
}
html:root body.in-game.in-game #xp-container .xp-bar-fill {
    height: 100% !important; border-radius: 4px !important;
    background: linear-gradient(90deg, #1fc46b, #3dff8f) !important; box-shadow: 0 0 8px rgba(61, 255, 143, 0.45) !important;
}

/* ── Sağ alt: nitro (büyük) + EMP (çapraz üstte) ──────────────────────── */
html:root body.in-game.in-game .mobile-skills-container {
    position: fixed !important; right: var(--sr) !important; bottom: var(--sb) !important; left: auto !important; top: auto !important;
    width: calc(var(--nitro) * 0.92 + var(--emp)) !important; height: calc(var(--nitro) * 0.72 + var(--emp)) !important;
    margin: 0 !important; padding: 0 !important; transform: none !important; background: none !important; border: none !important;
}
html:root body.in-game.in-game .mobile-skills-container .abilities-wrapper { position: absolute !important; inset: 0 !important; display: block !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; }
html:root body.in-game.in-game .mobile-skills-container .ability-slot {
    position: absolute !important; margin: 0 !important; border-radius: 50% !important; overflow: hidden !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: radial-gradient(circle at 50% 35%, rgba(30, 70, 100, 0.9), rgba(4, 14, 26, 0.92)) !important;
    border: 2px solid rgba(0, 234, 255, 0.6) !important; box-shadow: 0 0 16px rgba(0, 234, 255, 0.25) !important;
}
html:root body.in-game.in-game .mobile-skills-container .ability-slot:first-child { right: 0 !important; bottom: 0 !important; width: var(--nitro) !important; height: var(--nitro) !important; }
html:root body.in-game.in-game .mobile-skills-container .ability-slot:nth-child(2) {
    right: calc(var(--nitro) * 0.92) !important; bottom: calc(var(--nitro) * 0.72) !important; width: var(--emp) !important; height: var(--emp) !important; /* nitronun sol üst çaprazı, boşluklu */
    border-color: rgba(185, 140, 255, 0.65) !important; box-shadow: 0 0 14px rgba(185, 140, 255, 0.25) !important;
}
html:root body.in-game.in-game .mobile-skills-container .ability-icon { font-size: calc(var(--nitro) * 0.36) !important; }
html:root body.in-game.in-game .mobile-skills-container .ability-slot:nth-child(2) .ability-icon { font-size: calc(var(--emp) * 0.38) !important; }
html:root body.in-game.in-game .mobile-skills-container .ability-slot:nth-child(2) .ability-icon i { color: #c9b6ff !important; }
html:root body.in-game.in-game .mobile-skills-container .cooldown-overlay { left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; background: rgba(0, 0, 0, 0.62) !important; border-radius: 0 !important; }
html:root body.in-game.in-game .mobile-skills-container .key-hint { bottom: 4px !important; top: auto !important; left: 0 !important; right: 0 !important; text-align: center !important; font-size: 8px !important; background: none !important; }

/* ── Joystick işaretleri: sönük, köşelerde; dokununca tam görünür (game.js satır içi opacity:1) ── */
/* Bekleyen işaretler: sol sönük, sağ gizli (sağ yarıya dokununca çıkar). Eski kural 0.85 !important veriyordu. */
html:root body.in-game.in-game #stick-left { opacity: 0.3 !important; }
html:root body.in-game.in-game #stick-right { opacity: 0 !important; }
html:root body.in-game.in-game #stick-left { left: calc(var(--sl) + 22px) !important; bottom: calc(var(--sb) + 18px) !important; top: auto !important; right: auto !important; width: var(--stick) !important; height: var(--stick) !important; }
html:root body.in-game.in-game #stick-right { right: calc(var(--sr) + var(--nitro) + var(--emp) + 30px) !important; bottom: calc(var(--sb) + 18px) !important; top: auto !important; left: auto !important; width: var(--stick) !important; height: var(--stick) !important; }
html:root body.in-game.in-game .stick-base { width: 100% !important; height: 100% !important; }
/* Joystick görselleri dokunuş ALMAZ (game.js dokunuşları body'den okur). Görünmez sağ joystick dar telefonlarda
   market düğmelerinin (Hasar/Hızlı Ateş) üstünde duruyor ve dokunuşu yutuyordu (v2.15 test turu). */
html:root body.in-game.in-game #mobile-controls, html:root body.in-game.in-game #stick-left, html:root body.in-game.in-game #stick-right,
html:root body.in-game.in-game #stick-left *, html:root body.in-game.in-game #stick-right * { pointer-events: none !important; }

/* ── Kısa ekran (yatay telefon ≤430px yükseklik) ──────────────────────── */
@media (max-height: 430px) {
    html:root body.in-game.in-game #leaderboard, html:root body.in-game.in-game #tdm-leaderboard { max-height: 72px !important; }
    html:root body.in-game.in-game #leaderboard-list li:nth-child(n+4) { display: none !important; }
    html:root body.in-game.in-game #tdm-leaderboard > div:nth-child(n+5) { display: none !important; }
    html:root body.in-game.in-game #killboard, html:root body.in-game.in-game #tdm-killboard { top: 126px !important; max-height: 44px !important; }
    html:root body.in-game.in-game #killboard-list li:nth-child(n+3) { display: none !important; }
    html:root body.in-game.in-game #tdm-killboard > div:nth-child(n+4) { display: none !important; }
}
/* Çok kısa ekran (≤340px): tablolardan sadece liderler */
@media (max-height: 340px) {
    html:root body.in-game.in-game #killboard, html:root body.in-game.in-game #tdm-killboard { display: none !important; }
}

/* Takım Savaşı'nda Hayatta Kal skor kapsülü gizli (yukarıda display:flex zorlandığı için ayrıca) */
html:root body.in-game.in-game.tdm-mode .center-panel { display: none !important; }

/* Sadece bilgi gösteren öğeler dokunmayı geçirir: başparmak can çubuğuna/tabloya değse de joystick başlar
   (game.js isTouchOnUI .health-container/.center-panel/tabloları "arayüz" sayıyordu → ortada ölü bölge). */
html:root body.in-game.in-game .health-container, html:root body.in-game.in-game #xp-container,
html:root body.in-game.in-game .center-panel, html:root body.in-game.in-game .minimap-container,
html:root body.in-game.in-game #leaderboard, html:root body.in-game.in-game #killboard,
html:root body.in-game.in-game #tdm-leaderboard, html:root body.in-game.in-game #tdm-killboard,
html:root body.in-game.in-game #tdm-score-panel { pointer-events: none !important; }

/* Öğretici: ilerleme noktaları skor kapsülünün ALTINA (üst üste biniyordu), daha küçük */
html:root body.in-game.in-game #tutorial-overlay .tutorial-progress { margin-top: 48px !important; gap: 7px !important; }
html:root body.in-game.in-game #tutorial-overlay .tutorial-progress-dot { width: 9px !important; height: 9px !important; }
html:root body.in-game.in-game #tutorial-overlay .tutorial-message-box { margin-top: 8px !important; padding: 9px 18px !important; }

/* Eski duyarlı CSS tablet boyutlarında öğeleri transform: scale ile büyütüyordu → tablolar üst üste biniyordu.
   Ölçüler burada zaten vh/clamp ile orantılı; ölçekleme kapalı. */
html:root body.in-game.in-game #leaderboard, html:root body.in-game.in-game #killboard,
html:root body.in-game.in-game #tdm-leaderboard, html:root body.in-game.in-game #tdm-killboard,
html:root body.in-game.in-game #topRightControls, html:root body.in-game.in-game .minimap-container,
html:root body.in-game.in-game #exitBtn { transform: none !important; }

/* v2.17: Oyun içinde sol üstte sadece çıkış + radar. Hesap seviyesi ("LV.1 GİRİŞ") ve kristal kutusu masaüstünde
   açık kalıp çıkış tuşu ile radarın üstüne biniyordu (dokunmatikte zaten gizliydi). */
html:root body.in-game.in-game #profile-btn, html:root body.in-game.in-game .top-left-controls .lobby-money,
html:root body.in-game.in-game #playstore-badge { display: none !important; }

/* v2.20 Harita olayı şeridi (skor kapsülünün altı) + kenar yön oku. Şerit görünürken bildirimler biraz aşağı. */
html:root body #world-event-banner {
    position: fixed; left: 50%; top: 52px; transform: translateX(-50%); z-index: 9998; pointer-events: none;
    padding: 4px 14px; border-radius: 14px; font-family: Orbitron, sans-serif; font-size: 13px; letter-spacing: 1px;
    white-space: nowrap; background: rgba(10, 8, 0, 0.72); border: 1px solid #ffd24a; color: #ffe08a;
    box-shadow: 0 0 12px rgba(255, 200, 60, 0.45); animation: wev-glow 1.4s ease-in-out infinite alternate;
}
html:root body #world-event-banner.wev-titan { border-color: #c46bff; color: #e2b8ff; box-shadow: 0 0 12px rgba(190, 90, 255, 0.5); background: rgba(12, 0, 20, 0.72); }
@keyframes wev-glow { from { opacity: 0.85; } to { opacity: 1; } }
html:root body #world-event-arrow {
    position: fixed; left: 0; top: 0; z-index: 9997; pointer-events: none; display: none;
    flex-direction: column; align-items: center; gap: 1px; color: #ffd24a; text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
    font-family: Orbitron, sans-serif; font-size: 11px;
}
html:root body #world-event-arrow.wev-titan { color: #d39bff; }
html:root body #world-event-arrow .wev-ico { font-size: 22px; transform-origin: 50% 50%; filter: drop-shadow(0 0 4px currentColor); }
/* fa-location-arrow 45° yukarı-sağı gösterir → JS açısı 0 = sağ; ikonu -45° düzelt */
html:root body #world-event-arrow .wev-ico::before { display: inline-block; transform: rotate(45deg); }
html:root body.in-game.in-game.has-wevent #notification-area { top: 84px !important; }
@media (max-height: 500px) {
    html:root body #world-event-banner { top: 44px; font-size: 11px; padding: 2px 10px; }
    html:root body.in-game.in-game.has-wevent #notification-area { top: 68px !important; }
}