/* ═══════════════════════════════════════════════════════════════════════════
   📱 MOBİL OYUN İÇİ (IN-GAME) SURVIVAL MODE - KAPSAMLI RESPONSIVE TASARIM
   SADECE OYUN İÇİ GÖRÜNÜMÜ ETKİLER - LOBİ & PC'YE DOKUNMAZ

   BÖLGE 1: ÜST KISIM (Skor/Para orta, Radar sol üst, Paneller sağ üst)
   BÖLGE 2: SOL ALT (Joystick + HP + Skills = Combat Complex)
   BÖLGE 3: ORTA ALT (Market + Level Bar)
   BÖLGE 4: SAĞ ALT (Sağ Joystick)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) and (orientation: landscape) {

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 BÖLGE 1: ÜST KISIM
       ═══════════════════════════════════════════════════════════════════════ */

    /* --- ORTA ÜST: SKOR & PARA PANELİ --- */
    /* Büyütüldü ve tam ortalandı */
    body.in-game .center-panel {
        position: absolute !important;
        top: 3px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 4px 15px !important;
        gap: 20px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 10px !important;
        border-top: 2px solid rgba(0, 234, 255, 0.5) !important;
        z-index: 100 !important;
    }

    body.in-game .score-box {
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
        color: #00eaff !important;
        text-shadow: 0 0 5px rgba(0, 234, 255, 0.5) !important;
    }

    body.in-game .money-box {
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
        color: #ffd700 !important;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5) !important;
    }

    /* --- SOL ÜST: RADAR/MINIMAP - Exit'in sağında, responsive --- */
    body.in-game .minimap-container {
        position: absolute !important;
        top: 2px !important;
        left: clamp(38px, 5vw, 45px) !important;
        /* Exit butonunun tam sağı - responsive */
        bottom: auto !important;
        right: auto !important;
        width: clamp(70px, 15vh, 90px) !important;
        /* Responsive boyut */
        height: clamp(70px, 15vh, 90px) !important;
        min-width: 70px !important;
        min-height: 70px !important;
        max-width: 90px !important;
        max-height: 90px !important;
        border-radius: 8px !important;
        border: 2px solid rgba(0, 234, 255, 0.4) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        box-shadow: 0 0 10px rgba(0, 234, 255, 0.2) !important;
        z-index: 90 !important;
        transform: none !important;
    }

    body.in-game .minimap-container canvas {
        width: 100% !important;
        height: 100% !important;
        border-radius: 6px !important;
    }

    /* --- SOL ÜST: EXIT BUTONU - Responsive --- */
    body.in-game #exitBtn {
        display: flex !important;
        position: absolute !important;
        top: 2px !important;
        left: 5px !important;
        width: clamp(26px, 5.5vh, 32px) !important;
        /* Responsive */
        height: clamp(26px, 5.5vh, 32px) !important;
        font-size: clamp(0.6rem, 1.3vh, 0.75rem) !important;
        z-index: 250 !important;
        background: rgba(255, 0, 85, 0.2) !important;
        border: 1px solid rgba(255, 0, 85, 0.5) !important;
        color: #ff0055 !important;
    }

    body.in-game .top-left-controls {
        display: flex !important;
        position: absolute !important;
        top: 3px !important;
        left: 5px !important;
        z-index: 250 !important;
    }

    /* --- SAĞ ÜST: KONTROL BUTONLARI --- */
    body.in-game .top-right-controls {
        position: absolute !important;
        top: 3px !important;
        right: 5px !important;
        gap: 3px !important;
        z-index: 200 !important;
    }

    body.in-game .top-right-controls .icon-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.55rem !important;
    }

    /* --- SAĞ ÜST: LEADERBOARD & KILLBOARD - %50 büyütülmüş ve daha okunur --- */
    body.in-game #killboard {
        position: absolute !important;
        top: 32px !important;
        right: 5px !important;
        bottom: auto !important;
        width: 125px !important;
        /* %50 büyük -> biraz küçültüldü */
        max-width: 28vw !important;
        padding: 5px 10px !important;
        background: rgba(0, 0, 0, 0.65) !important;
        border-radius: 7px !important;
        border-left: 2px solid rgba(255, 0, 85, 0.7) !important;
        max-height: 100px !important;
        overflow: hidden !important;
        z-index: 80 !important;
    }

    body.in-game #killboard h3 {
        font-size: 0.58rem !important;
        /* %50 büyük -> biraz küçültüldü */
        margin-bottom: 2px !important;
        padding-bottom: 2px !important;
        border-bottom: 1px solid rgba(255, 0, 85, 0.4) !important;
        color: #ff0055 !important;
    }

    body.in-game #killboard ul {
        max-height: 75px !important;
        overflow: hidden !important;
    }

    body.in-game #killboard li {
        font-size: 0.52rem !important;
        /* %50 büyük -> biraz küçültüldü */
        line-height: 1.4 !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.in-game #leaderboard {
        position: absolute !important;
        top: 140px !important;
        /* Killboard daha büyük olduğu için daha aşağı */
        right: 5px !important;
        bottom: auto !important;
        width: 125px !important;
        /* %50 büyük -> biraz küçültüldü */
        max-width: 28vw !important;
        padding: 5px 10px !important;
        background: rgba(0, 0, 0, 0.65) !important;
        border-radius: 7px !important;
        border-left: 2px solid rgba(0, 234, 255, 0.7) !important;
        max-height: 100px !important;
        overflow: hidden !important;
        z-index: 80 !important;
    }

    body.in-game #leaderboard h3 {
        font-size: 0.58rem !important;
        /* %50 büyük -> biraz küçültüldü */
        margin-bottom: 2px !important;
        padding-bottom: 2px !important;
        border-bottom: 1px solid rgba(0, 234, 255, 0.4) !important;
        color: #00eaff !important;
    }

    body.in-game #leaderboard ul {
        max-height: 75px !important;
        overflow: hidden !important;
    }

    body.in-game #leaderboard li {
        font-size: 0.52rem !important;
        /* %50 büyük -> biraz küçültüldü */
        line-height: 1.4 !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 BÖLGE 2: SOL ALT - COMBAT COMPLEX
       Joystick + HP Bar + Skills bir arada
       ═══════════════════════════════════════════════════════════════════════ */

    /* --- MOBİL KONTROLLER CONTAINER - Flexbox yerine absolute positioning --- */
    body.in-game #mobile-controls {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        /* Flex yerine block */
        z-index: 200 !important;
        pointer-events: none !important;
    }

    /* SOL JOYSTİCK - Absolute position ile sabit konumda */
    body.in-game #stick-left {
        position: absolute !important;
        /* Relative yerine absolute */
        bottom: 55px !important;
        left: 40px !important;
        /* Sağa kaydırıldı (8px -> 40px) */
        width: 26vh !important;
        /* %30 büyük (20vh * 1.30) */
        height: 26vh !important;
        min-width: 115px !important;
        /* %30 büyük (90px * 1.30) */
        min-height: 115px !important;
        max-width: 140px !important;
        /* %30 büyük (110px * 1.30) */
        max-height: 140px !important;
        margin: 0 !important;
        /* Margin kaldırıldı */
        opacity: 0.85 !important;
        pointer-events: auto !important;
    }

    body.in-game #stick-left .stick-base {
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 234, 255, 0.1) !important;
        border: 2px solid rgba(0, 234, 255, 0.4) !important;
        border-radius: 50% !important;
    }

    body.in-game #stick-left .stick-handle {
        width: 42% !important;
        height: 42% !important;
        background: rgba(0, 234, 255, 0.7) !important;
        box-shadow: 0 0 15px rgba(0, 234, 255, 0.5) !important;
    }

    /* --- HP BAR: SAĞ ALTA TAŞINDI --- */
    body.in-game .health-container {
        position: absolute !important;
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        min-width: 120px !important;
        max-width: 150px !important;
        display: flex !important;
        flex-direction: row !important;
        /* Skills ile yan yana olması için */
        align-items: center !important;
        gap: 8px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        padding: 5px 8px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(0, 234, 255, 0.3) !important;
        z-index: 95 !important;
    }

    /* --- HP BAR STYLING --- */
    body.in-game .p1-health {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 0.6rem !important;
        color: #00eaff !important;
        width: 100% !important;
    }

    body.in-game .bar-bg {
        flex-grow: 1 !important;
        height: 10px !important;
        min-width: 80px !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(0, 234, 255, 0.4) !important;
        transform: none !important;
    }

    body.in-game .bar-fill {
        border-radius: 3px !important;
    }

    /* --- MOBİL SKİLL KONTROLLERİ: SAĞ ALT HP BARININ SOLUNDA --- */
    body.in-game .mobile-skills-container {
        position: absolute !important;
        bottom: 25px !important;
        /* HP bar'dan biraz yukarıda */
        right: calc(45px + 26vh) !important;
        /* HP bar'ın solunda (right + max-width + padding + gap) */
        left: auto !important;
        top: auto !important;
        z-index: 96 !important;
        display: flex !important;
    }

    /* --- YETENEKLER: YATAY SIRALANMIŞ, BÜYÜTÜLMÜŞ --- */
    body.in-game .abilities-wrapper {
        display: flex !important;
        flex-direction: row !important;
        /* Yatay */
        gap: 8px !important;
        margin-bottom: 0 !important;
        order: -1 !important;
        /* HP bar'dan önce (solunda) görünmesi için */
    }

    body.in-game .ability-slot {
        width: clamp(52px, 11vh, 62px) !important;
        /* Biraz daha büyütüldü */
        height: clamp(52px, 11vh, 62px) !important;
        border-radius: 8px !important;
        border: 2px solid rgba(0, 234, 255, 0.6) !important;
        background: rgba(0, 20, 40, 0.9) !important;
        box-shadow: 0 0 12px rgba(0, 234, 255, 0.4) !important;
    }

    body.in-game .ability-icon {
        font-size: clamp(1.1rem, 2.4vh, 1.4rem) !important;
        /* Biraz daha büyütüldü */
    }

    body.in-game .ability-icon i {
        color: #00eaff !important;
    }

    body.in-game .key-hint {
        display: none !important;
    }

    body.in-game .cooldown-overlay {
        border-radius: 6px !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 BÖLGE 3: ORTA ALT - MARKET & LEVEL BAR
       ═══════════════════════════════════════════════════════════════════════ */

    /* --- XP/LEVEL BAR: Market'in ÜZERİNDE (üst üste binmemesi için) --- */
    body.in-game #xp-container {
        position: absolute !important;
        bottom: clamp(50px, 14vh, 75px) !important;
        /* Market'ten daha yukarıda */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: clamp(280px, 35vw, 330px) !important;
        height: clamp(14px, 4vh, 22px) !important;
        padding: 2px 10px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 7px !important;
        border: 1px solid rgba(0, 255, 136, 0.3) !important;
        z-index: 105 !important;
        /* Market'ten (z-index: 100) yüksek */
    }

    body.in-game .xp-label {
        font-size: 0.45rem !important;
        color: #00ff88 !important;
        text-shadow: 0 0 5px rgba(0, 255, 136, 0.5) !important;
    }

    body.in-game .xp-bar-bg {
        height: 5px !important;
        border-radius: 3px !important;
    }

    body.in-game .xp-bar-fill {
        border-radius: 3px !important;
    }

    /* --- MARKET BUTONLARI: Fiyat ve Level görünür --- */
    body.in-game .shop-bar {
        position: absolute !important;
        bottom: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 4px 8px !important;
        gap: 4px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        max-width: 85% !important;
        z-index: 100 !important;
    }

    body.in-game .shop-btn {
        position: relative !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 0.7rem !important;
        border-radius: 6px !important;
        background: rgba(0, 20, 40, 0.7) !important;
    }

    /* Fiyat etiketi - butonun altında görünür */
    body.in-game .shop-btn::after {
        display: block !important;
        position: absolute !important;
        bottom: -11px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.32rem !important;
        color: #ccc !important;
        white-space: nowrap !important;
        text-shadow: 1px 1px 1px #000 !important;
    }

    /* Tuş numarası - butonun üstünde */
    body.in-game .shop-btn::before {
        display: none !important;
    }

    body.in-game .badge-time {
        font-size: 0.28rem !important;
        padding: 1px 2px !important;
        bottom: 2px !important;
        right: 2px !important;
    }

    /* Separator görünür */
    body.in-game .separator {
        display: block !important;
        width: 1px !important;
        height: 28px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        margin: 0 3px !important;
    }

    /* Upgrade butonları - Level ve Fiyat görünür */
    body.in-game .upgrade-btn {
        position: relative !important;
    }

    body.in-game .upgrade-info {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
    }

    body.in-game .upgrade-info span:first-child {
        /* Level badge - sağ üst köşede */
        position: absolute !important;
        top: 1px !important;
        right: 1px !important;
        font-size: 0.3rem !important;
        background: rgba(0, 0, 0, 0.7) !important;
        padding: 1px 3px !important;
        border-radius: 3px !important;
        color: #fff !important;
    }

    body.in-game .upgrade-info span:last-child {
        /* Fiyat - altta */
        position: absolute !important;
        bottom: -11px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.32rem !important;
        color: #ccc !important;
        white-space: nowrap !important;
    }

    body.in-game .upgrade-info br {
        display: none !important;
    }

    body.in-game .upgrade-btn::after {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 BÖLGE 4: SAĞ ALT - SAĞ JOYSTİCK
       ═══════════════════════════════════════════════════════════════════════ */

    /* SAĞ JOYSTİCK - Absolute position ile sabit konumda */
    body.in-game #stick-right {
        position: absolute !important;
        /* Relative yerine absolute */
        bottom: 55px !important;
        right: 40px !important;
        /* Sola kaydırıldı (8px -> 40px) */
        width: 26vh !important;
        /* %30 büyük (20vh * 1.30) */
        height: 26vh !important;
        min-width: 115px !important;
        /* %30 büyük (90px * 1.30) */
        min-height: 115px !important;
        max-width: 140px !important;
        /* %30 büyük (110px * 1.30) */
        max-height: 140px !important;
        margin: 0 !important;
        /* Margin kaldırıldı */
        opacity: 0.85 !important;
        pointer-events: auto !important;
    }

    body.in-game #stick-right .stick-base {
        width: 100% !important;
        height: 100% !important;
        background: rgba(255, 0, 85, 0.1) !important;
        border: 2px solid rgba(255, 0, 85, 0.4) !important;
        border-radius: 50% !important;
    }

    body.in-game #stick-right .stick-handle {
        width: 42% !important;
        height: 42% !important;
        background: rgba(255, 0, 85, 0.7) !important;
        box-shadow: 0 0 15px rgba(255, 0, 85, 0.5) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 DİĞER ELEMENTLER
       ═══════════════════════════════════════════════════════════════════════ */

    /* --- BİLDİRİM ALANI --- */
    body.in-game #notification-area {
        top: 40px !important;
        width: 70% !important;
    }

    body.in-game .kill-msg {
        padding: 3px 8px !important;
        border-radius: 8px !important;
    }

    body.in-game .kill-text {
        font-size: 0.75rem !important;
    }

    body.in-game .kill-sub {
        font-size: 1.2rem !important;
    }

    body.in-game .kill-reward {
        font-size: 0.65rem !important;
    }

    /* --- LEVEL UP YAZISI --- */
    body.in-game .level-up-text,
    body.in-game #level-up-display {
        font-size: 1rem !important;
        padding: 5px 15px !important;
    }

}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 ÇOK KÜÇÜK MOBİL EKRANLAR (height < 400px) - IN-GAME SURVIVAL
   Daha kompakt düzen
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 400px) {

    /* Üst Panel - daha küçük */
    body.in-game .center-panel {
        padding: 2px 10px !important;
        gap: 15px !important;
    }

    body.in-game .score-box {
        font-size: 0.6rem !important;
    }

    body.in-game .money-box {
        font-size: 0.55rem !important;
    }

    /* Radar - daha büyük */
    body.in-game .minimap-container {
        width: 12vh !important;
        height: 12vh !important;
        min-width: 55px !important;
        min-height: 55px !important;
        max-width: 70px !important;
        max-height: 70px !important;
        top: 28px !important;
    }

    /* Paneller - daha küçük */
    body.in-game #killboard,
    body.in-game #leaderboard {
        width: 75px !important;
        max-height: 55px !important;
        padding: 3px 5px !important;
    }

    body.in-game #killboard h3,
    body.in-game #leaderboard h3 {
        font-size: 0.35rem !important;
    }

    body.in-game #killboard li,
    body.in-game #leaderboard li {
        font-size: 0.3rem !important;
    }

    body.in-game #leaderboard {
        top: 88px !important;
    }

    /* Joystick'ler - biraz küçük (küçük ekranlar için) */
    body.in-game #stick-left {
        width: 17vh !important;
        height: 17vh !important;
        min-width: 75px !important;
        min-height: 75px !important;
        max-width: 90px !important;
        max-height: 90px !important;
        bottom: 45px !important;
        /* Margin yerine bottom */
        left: 30px !important;
        /* Sağa kaydırıldı (6px -> 30px) */
    }

    body.in-game #stick-right {
        width: 17vh !important;
        height: 17vh !important;
        min-width: 75px !important;
        min-height: 75px !important;
        max-width: 90px !important;
        max-height: 90px !important;
        bottom: 45px !important;
        /* Margin yerine bottom */
        right: 30px !important;
        /* Sola kaydırıldı (6px -> 30px) */
    }

    /* HP Container - sol joystickin altına taşındı (simetrik) */
    body.in-game .health-container {
        bottom: clamp(20px, 5.5vh, 28px) !important;
        left: 30px !important;
        padding: 3px 6px !important;
        min-width: 85px !important;
        max-width: 110px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    body.in-game .p1-health {
        font-size: 0.5rem !important;
    }

    body.in-game .bar-bg {
        height: 8px !important;
        min-width: 60px !important;
    }

    /* Skill butonları market'in sağında (simetrik) */
    body.in-game .mobile-skills-container {
        bottom: 5px !important;
        left: calc(50% + 30vw / 2 + 8px) !important;
    }

    body.in-game .ability-slot {
        width: clamp(38px, 7.5vh, 48px) !important;
        height: clamp(38px, 7.5vh, 48px) !important;
    }

    body.in-game .ability-icon {
        font-size: clamp(0.75rem, 1.7vh, 0.95rem) !important;
    }

    /* XP Bar - daha ince */
    body.in-game #xp-container {
        bottom: 38px !important;
        height: 12px !important;
        min-width: 150px !important;
    }

    body.in-game .xp-label {
        font-size: 0.4rem !important;
    }

    /* Market - daha küçük */
    body.in-game .shop-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.6rem !important;
    }

    body.in-game .shop-btn::after {
        font-size: 0.28rem !important;
        bottom: -10px !important;
    }

    body.in-game .upgrade-info span:first-child {
        font-size: 0.26rem !important;
    }

    body.in-game .upgrade-info span:last-child {
        font-size: 0.28rem !important;
        bottom: -10px !important;
    }

}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 PORTRAIT (ROTATED) MODE - IN-GAME SURVIVAL
   CSS ile yataya çevrilen portrait modda oyun içi optimizasyon
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (orientation: portrait) {

    /* Portrait modda da aynı layout mantığı (body rotate olduğu için) */

    body.in-game .center-panel {
        padding: 3px 12px !important;
        gap: 15px !important;
    }

    body.in-game .score-box {
        font-size: 0.65rem !important;
    }

    body.in-game .money-box {
        font-size: 0.6rem !important;
    }

    body.in-game .minimap-container {
        top: 28px !important;
        width: 55px !important;
        height: 55px !important;
    }

    body.in-game #killboard,
    body.in-game #leaderboard {
        width: 80px !important;
        max-height: 60px !important;
    }

    body.in-game #killboard h3,
    body.in-game #leaderboard h3 {
        font-size: 0.38rem !important;
    }

    body.in-game #killboard li,
    body.in-game #leaderboard li {
        font-size: 0.32rem !important;
    }

    /* Joystick'ler - çok küçük ekranlar için */
    body.in-game #stick-left {
        width: 85px !important;
        height: 85px !important;
        bottom: 50px !important;
        /* Margin yerine bottom */
        left: 25px !important;
        /* Sağa kaydırıldı (5px -> 25px) */
    }

    body.in-game #stick-right {
        width: 85px !important;
        height: 85px !important;
        bottom: 50px !important;
        /* Margin yerine bottom */
        right: 25px !important;
        /* Sola kaydırıldı (5px -> 25px) */
    }

    body.in-game .health-container {
        bottom: clamp(20px, 5.5vh, 28px) !important;
        left: 25px !important;
        min-width: 90px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    body.in-game .p1-health {
        font-size: 0.5rem !important;
    }

    body.in-game .bar-bg {
        height: 8px !important;
        min-width: 60px !important;
    }

    /* Skill butonları market'in sağında (simetrik) */
    body.in-game .mobile-skills-container {
        bottom: 5px !important;
        left: calc(50% + 30vw / 2 + 8px) !important;
    }

    body.in-game .ability-slot {
        width: clamp(38px, 7.5vh, 48px) !important;
        height: clamp(38px, 7.5vh, 48px) !important;
    }

    body.in-game .ability-icon {
        font-size: clamp(0.75rem, 1.7vh, 0.95rem) !important;
    }

    body.in-game #xp-container {
        bottom: 40px !important;
        width: 30vw !important;
        min-width: 160px !important;
    }

    body.in-game .shop-btn {
        width: 32px !important;
        height: 32px !important;
    }

}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 TDM (TEAM DEATHMATCH) MOBİL UI - ÖZEL STİLLER
   SADECE TDM MODUNDA + MOBİLDE AKTİF
   Survival moduna ve PC'ye dokunmaz
   ═══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) and (orientation: landscape) {

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 TDM: GİZLENECEK ÖGELER
       Survival'ın Avcılar/Liderler tabloları TDM'de gereksiz
       ═══════════════════════════════════════════════════════════════════════ */
    body.in-game.tdm-mode #leaderboard,
    body.in-game.tdm-mode #killboard {
        display: none !important;
    }

    body.in-game.tdm-mode .center-panel {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 TDM: ORTA ÜST SKOR PANELİ (#tdm-score-panel)
       Skor, süre, para, KDA - hepsi bu panelde (çalışan panel)
       ═══════════════════════════════════════════════════════════════════════ */
    body.in-game.tdm-mode #tdm-score-panel {
        position: fixed !important;
        top: 2px !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.65) !important;
        transform-origin: top center !important;
        padding: 6px 15px !important;
        gap: 10px !important;
        border-radius: 8px !important;
        border-width: 1px !important;
        z-index: 100 !important;
    }

    /* TDM modunda skill butonları survival ile aynı konumda */
    body.in-game.tdm-mode .mobile-skills-container {
        display: flex !important;
        bottom: 25px !important;
        right: calc(45px + 26vh) !important;
        /* Survival modu ile aynı konumda */
    }

    /* TDM modunda HP barı sağ altta */
    body.in-game.tdm-mode .health-container {
        bottom: 20px !important;
        right: 20px !important;
        flex-direction: row !important;
        /* Skills ile yan yana */
        align-items: center !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 TDM: SAĞ ÜST PANELLER (En Çok Kill & Son Killer)
       Daha geniş, üst üste binmeyen, okunabilir
       ═══════════════════════════════════════════════════════════════════════ */

    /* En Çok Kill (tdm-leaderboard) - Üstte */
    body.in-game.tdm-mode #tdm-leaderboard {
        position: fixed !important;
        top: 30px !important;
        right: 5px !important;
        padding: 6px 10px !important;
        border-radius: 6px !important;
        font-size: 9px !important;
        min-width: 130px !important;
        max-width: 150px !important;
        max-height: 110px !important;
        overflow: hidden !important;
        background: rgba(0, 0, 0, 0.75) !important;
    }

    /* Son Killer (tdm-killboard) - Altta, boşluk bırakarak */
    body.in-game.tdm-mode #tdm-killboard {
        position: fixed !important;
        top: 150px !important;
        right: 5px !important;
        padding: 6px 10px !important;
        border-radius: 6px !important;
        font-size: 9px !important;
        min-width: 130px !important;
        max-width: 150px !important;
        max-height: 70px !important;
        overflow: hidden !important;
        background: rgba(0, 0, 0, 0.75) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 TDM: RESPAWN OVERLAY
       ═══════════════════════════════════════════════════════════════════════ */

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 TDM: LEVEL BAR - Market'in üstünde sabit, responsive
       ═══════════════════════════════════════════════════════════════════════ */
    body.in-game.tdm-mode #xp-container {
        position: absolute !important;
        bottom: clamp(50px, 14vh, 75px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: clamp(280px, 35vw, 330px) !important;
        height: clamp(14px, 4vh, 22px) !important;
        padding: 2px 10px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(0, 255, 136, 0.4) !important;
        z-index: 95 !important;
    }

    body.in-game.tdm-mode .xp-label {
        font-size: clamp(0.5rem, 1.5vh, 0.8rem) !important;
        color: #00ff88 !important;
        text-shadow: 0 0 5px rgba(0, 255, 136, 0.5) !important;
        white-space: nowrap !important;
    }

    body.in-game.tdm-mode .xp-bar-bg {
        height: clamp(4px, 1.2vh, 8px) !important;
        border-radius: 4px !important;
    }

    body.in-game.tdm-mode .xp-bar-fill {
        border-radius: 4px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 TDM - ÇOK KÜÇÜK EKRANLAR (height < 400px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 400px) {

    body.in-game.tdm-mode #tdm-score-panel {
        transform: translateX(-50%) scale(0.55) !important;
        padding: 4px 10px !important;
    }

    body.in-game.tdm-mode #tdm-leaderboard {
        top: 28px !important;
        padding: 5px 8px !important;
        font-size: 8px !important;
        min-width: 110px !important;
        max-width: 130px !important;
        max-height: 90px !important;
    }

    body.in-game.tdm-mode #tdm-killboard {
        top: 125px !important;
        padding: 5px 8px !important;
        font-size: 8px !important;
        min-width: 110px !important;
        max-width: 130px !important;
        max-height: 55px !important;
    }

    /* Level bar - küçük ekranlarda daha kompakt */
    body.in-game.tdm-mode #xp-container {
        bottom: 45px !important;
        width: clamp(180px, 40vw, 320px) !important;
        height: 12px !important;
        padding: 2px 8px !important;
    }

    body.in-game.tdm-mode .xp-label {
        font-size: 0.45rem !important;
    }

    body.in-game.tdm-mode .xp-bar-bg {
        height: 4px !important;
    }

    /* Küçük ekranlarda skill butonları survival ile aynı konumda */
    body.in-game.tdm-mode .mobile-skills-container {
        bottom: 25px !important;
        right: calc(55px + 26vh) !important;
        /* Survival modu ile aynı konumda */
    }

    body.in-game.tdm-mode .ability-slot {
        width: clamp(38px, 7.5vh, 48px) !important;
        height: clamp(38px, 7.5vh, 48px) !important;
    }

    body.in-game.tdm-mode .ability-icon {
        font-size: clamp(0.75rem, 1.7vh, 0.95rem) !important;
    }

    /* Küçük ekranlarda HP barı sağ altta */
    body.in-game.tdm-mode .health-container {
        bottom: 20px !important;
        right: 20px !important;
        flex-direction: row !important;
        /* Skills ile yan yana */
        align-items: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 TDM - PORTRAIT (ROTATED) MODE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (orientation: portrait) {

    body.in-game.tdm-mode #leaderboard,
    body.in-game.tdm-mode #killboard {
        display: none !important;
    }

    body.in-game.tdm-mode .center-panel {
        display: none !important;
    }

    body.in-game.tdm-mode #tdm-score-panel {
        transform: translateX(-50%) scale(0.6) !important;
        padding: 5px 12px !important;
    }

    body.in-game.tdm-mode #tdm-leaderboard {
        top: 28px !important;
        padding: 5px 8px !important;
        font-size: 8px !important;
        min-width: 115px !important;
        max-width: 130px !important;
        max-height: 95px !important;
        overflow: hidden !important;
    }

    body.in-game.tdm-mode #tdm-killboard {
        top: 130px !important;
        padding: 5px 8px !important;
        font-size: 8px !important;
        min-width: 115px !important;
        max-width: 130px !important;
        max-height: 60px !important;
        overflow: hidden !important;
    }

    /* Portrait modda skill butonları survival ile aynı konumda */
    body.in-game.tdm-mode .mobile-skills-container {
        bottom: 20px !important;
        right: calc(45px + 85px) !important;
        /* Survival modu ile aynı konumda */
    }

    /* Portrait modda HP barı sağ altta */
    body.in-game.tdm-mode .health-container {
        bottom: 20px !important;
        right: 20px !important;
        flex-direction: row !important;
        /* Skills ile yan yana */
        align-items: center !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
    💻 PC TDM (TEAM DEATHMATCH) UI - ÖZEL STİLLER
    SADECE TDM MODUNDA + PC'DE AKTİF
    Survival moduna ve mobiliye dokunmaz
    ═════════════════════════════════════════════════════════════════════════ */

@media (pointer: fine) {

    /* ═════════════════════════════════════════════════════════════════════
       🎯 TDM: GİZLENECEK ÖGELER
       Survival'ın Avcılar/Liderler tabloları TDM'de gereksiz
       ═════════════════════════════════════════════════════════════════════ */
    body.in-game.tdm-mode #leaderboard,
    body.in-game.tdm-mode #killboard {
        display: none !important;
    }

    body.in-game.tdm-mode .center-panel {
        display: none !important;
    }

    /* ═════════════════════════════════════════════════════════════════════
       🎯 TDM: ORTA ÜST SKOR PANELİ (#tdm-score-panel)
       Skor, süre, para, KDA - hepsi bu panelde
       ═════════════════════════════════════════════════════════════════════ */
    body.in-game.tdm-mode #tdm-score-panel {
        position: fixed !important;
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 8px 20px !important;
        gap: 15px !important;
        border-radius: 10px !important;
        border-width: 2px !important;
        z-index: 100 !important;
    }

    /* ═════════════════════════════════════════════════════════════════════
       🎯 TDM: SAĞ ÜST PANELLER (En Çok Kill & Son Killer)
       5 oyuncu sığacak şekilde yükseklik ayarlandı
       Genişlikler eşitlendi
       ═════════════════════════════════════════════════════════════════════ */

    /* En Çok Kill (tdm-leaderboard) - Üstte */
    body.in-game.tdm-mode #tdm-leaderboard {
        position: fixed !important;
        top: 60px !important;
        right: 10px !important;
        padding: 10px 15px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        min-width: 180px !important;
        max-width: 200px !important;
        max-height: 150px !important;
        overflow: hidden !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }

    /* Son Killer (tdm-killboard) - Altta, boşluk bırakarak */
    body.in-game.tdm-mode #tdm-killboard {
        position: fixed !important;
        top: 220px !important;
        right: 10px !important;
        padding: 10px 15px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        min-width: 180px !important;
        max-width: 200px !important;
        max-height: 100px !important;
        overflow: hidden !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }

}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 TDM OYUN SONU EKRANI - MOBİL LANDSCAPE (RESPONSIVE)
   Ekran boyutuna göre otomatik ölçeklenir, ekranı doldurur
   PC'ye dokunmaz - sadece dokunmatik + landscape
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (orientation: landscape) {

    /* Ana container - tam ekran, dikey ortalı */
    #game-over-screen {
        gap: 2vh !important;
        padding: 3vh 5vw !important;
        justify-content: center !important;
    }

    /* Skor header - başlığın üstünde */
    .tdm-end-header {
        margin-bottom: 1vh !important;
    }

    .tdm-end-score {
        font-size: clamp(18px, 5vh, 32px) !important;
        letter-spacing: 0.5vw !important;
    }

    .tdm-end-vs {
        margin: 0 2vw !important;
    }

    .tdm-end-reason {
        font-size: clamp(11px, 3vh, 18px) !important;
        margin-top: 0.5vh !important;
    }

    /* Başlık (KAZANDINIZ/KAYBETTİNİZ) */
    #game-over-screen h1 {
        font-size: clamp(1.5rem, 8vh, 3.5rem) !important;
        letter-spacing: 0.5vw !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }

    /* death-tip - MVP içeriği */
    /* death-tip - MVP içeriği (Disabled to match TDM style globally) */
    /* #game-over-screen .death-tip-text {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
        width: 95vw !important;
        max-width: none !important;
        margin: 0 auto !important;
        font-style: normal !important;
    } */

    /* MVP container - yan yana, geniş */
    .tdm-end-mvp-container {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: clamp(10px, 3vw, 25px) !important;
        margin-top: 1vh !important;
    }

    /* MVP kutuları - büyük, şık */
    .tdm-end-mvp-box {
        padding: clamp(8px, 2vh, 15px) clamp(15px, 4vw, 30px) !important;
        border-radius: clamp(6px, 1.5vh, 12px) !important;
        text-align: center !important;
        min-width: clamp(140px, 28vw, 220px) !important;
    }

    .tdm-end-mvp-label {
        font-size: clamp(11px, 2.5vh, 16px) !important;
        margin-bottom: 0.5vh !important;
    }

    .tdm-end-mvp-name {
        font-size: clamp(16px, 4vh, 26px) !important;
    }

    .tdm-end-mvp-stat {
        font-size: clamp(12px, 3vh, 18px) !important;
        margin-top: 0.5vh !important;
    }

    /* ANA MENÜYE DÖN butonu - büyük, görünür */
    #game-over-screen button {
        width: clamp(180px, 40vw, 320px) !important;
        padding: clamp(10px, 2.5vh, 18px) 0 !important;
        font-size: clamp(0.85rem, 3vh, 1.3rem) !important;
        margin-top: 2vh !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TDM SONUÇ EKRANI - PC STİLLERİ
   ═══════════════════════════════════════════════════════════════════════════ */

/* Skor header - başlığın üstünde */
.tdm-end-header {
    text-align: center;
    margin-bottom: 5px;
}

.tdm-end-score {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;
}

.tdm-end-blue {
    color: #0088ff;
}

.tdm-end-red {
    color: #ff2200;
}

.tdm-end-vs {
    color: #fff;
    margin: 0 8px;
}

.tdm-end-reason {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
    letter-spacing: 1px;
}

/* MVP Container - death-tip içinde */
.tdm-end-mvp-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tdm-end-mvp-box {
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    min-width: 160px;
}

.tdm-end-mvp-killer {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid #ffd700;
}

.tdm-end-mvp-assist {
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid #00ff88;
}

.tdm-end-mvp-label {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 5px;
}

.tdm-end-mvp-killer .tdm-end-mvp-label {
    color: #ffd700;
}

.tdm-end-mvp-assist .tdm-end-mvp-label {
    color: #00ff88;
}

.tdm-end-mvp-name {
    font-size: 20px;
    font-weight: bold;
}

.tdm-end-mvp-stat {
    font-size: 14px;
    color: #ccc;
    margin-top: 3px;
}

/* death-tip TDM modunda düzelt */
#game-over-screen .death-tip-text {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    color: #ffd700;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    font-style: italic;
    letter-spacing: 1px;
    animation: none;
    opacity: 1;
}