/* ═══════════════════════════════════════════════════════════════════════════
   🎨 CSS CUSTOM PROPERTIES (VARIABLES) - v2.0 Optimized
   Tekrar eden değerler merkezi olarak yönetiliyor
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* --- ANA RENKLER --- */
    --color-primary: #00eaff;
    --color-primary-rgb: 0, 234, 255;
    --color-secondary: #ffd700;
    --color-secondary-rgb: 255, 215, 0;
    --color-danger: #ff0055;
    --color-danger-rgb: 255, 0, 85;
    --color-success: #00ff88;
    --color-success-rgb: 0, 255, 136;
    --color-warning: #ffaa00;
    --color-warning-rgb: 255, 170, 0;
    
    /* --- GLOW RENKLER (Market butonları için) --- */
    --glow-gold: #ffd700;
    --glow-gold-rgb: 255, 215, 0;
    --glow-green: #00ff00;
    --glow-green-rgb: 0, 255, 0;
    --glow-purple: #aa00ff;
    --glow-purple-rgb: 170, 0, 255;
    --glow-red: #ff0000;
    --glow-red-rgb: 255, 0, 0;
    --glow-blue: #0088ff;
    --glow-blue-rgb: 0, 136, 255;
    --glow-orange: #ffaa00;
    --glow-orange-rgb: 255, 170, 0;
    
    /* --- TAKIMLAR (MOBA) --- */
    --team-blue: #0088ff;
    --team-blue-rgb: 0, 136, 255;
    --team-red: #ff2200;
    --team-red-rgb: 255, 34, 0;
    
    /* --- ARKA PLAN --- */
    --bg-dark: #05070a;
    --bg-panel: rgba(0, 0, 0, 0.5);
    --bg-panel-dark: rgba(0, 10, 20, 0.85);
    --bg-button: rgba(0, 20, 40, 0.6);
    
    /* --- BOYUTLAR --- */
    --btn-size: 45px;
    --btn-radius: 10px;
    --icon-btn-size: 40px;
    --border-radius-sm: 5px;
    --border-radius-md: 10px;
    --border-radius-lg: 20px;
    --border-radius-full: 50px;
    
    /* --- GEÇİŞLER --- */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    
    /* --- FONT --- */
    --font-main: 'Orbitron', sans-serif;
    --font-mono: monospace;
    
    /* --- GLOW INTENSITY --- */
    --glow-intensity: 15px;
    --glow-intensity-sm: 10px;
    --glow-intensity-lg: 20px;
}

/* --- GENEL AYARLAR --- */
* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: var(--bg-dark); color: #fff; font-family: var(--font-main);
    overflow: hidden; position: fixed; user-select: none; touch-action: none;
}
.main-screen-wrapper { width: 100%; height: 100%; position: relative; z-index: 10; }
#gameCanvas { display: block; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   📱 MOBİL TASARIM - DOKUNMATİK EKRANLAR (PORTRAIT)
   Ekran döndürülür, ana lobi 5 kart sığar, elite'de kaydırma var
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (orientation: portrait) {
    /* Ekranı yatay çevir */
    body {
        transform-origin: top left;
        transform: rotate(90deg) translateY(-100%);
        width: 100vh !important;
        height: 100vw !important;
        overflow: hidden;
    }

    .main-screen-wrapper, #overlay {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* === LOBİ BAŞLIK === */
    #overlay h1 {
        font-size: clamp(1.2rem, 5vw, 2rem) !important;
        letter-spacing: 2px;
        margin-bottom: 8px !important;
    }

    .mini-tutorial, .guide-link-btn { display: none !important; }

    /* === HANGAR WRAPPER & CONTAINER === */
    .hangar-wrapper {
        width: fit-content !important;
        max-width: 95% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        position: relative !important;
    }

    /* Ana lobi - 5 kart sığar, kaydırma yok */
    .hangar-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        width: fit-content !important;
        max-width: 100% !important;
        gap: clamp(8px, 2vw, 15px) !important;
        padding: 10px 15px !important;
        padding-top: 50px !important;
        overflow: hidden !important;
    }

    /* Elite modda kaydırma aktif */
    .hangar-container.elite-mode {
        overflow-x: auto !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* === GEMİ KARTLARI - Esnek ve dengeli (tüm telefon boyutları için) === */
    .ship-card {
        width: clamp(145px, 17vw, 175px) !important;
        min-width: clamp(145px, 17vw, 175px) !important;
        max-width: 175px !important;
        height: auto !important;
        min-height: clamp(195px, 45vh, 245px) !important;
        max-height: 255px !important;
        padding: clamp(8px, 1.6vw, 11px) !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .ship-icon {
        width: clamp(42px, 8.5vw, 54px) !important;
        height: clamp(42px, 8.5vw, 54px) !important;
        margin-bottom: 5px !important;
    }
    .ship-icon i { font-size: clamp(20px, 4.2vw, 28px) !important; }

    .ship-name {
        font-size: clamp(0.78rem, 2.1vw, 0.96rem) !important;
        margin-bottom: 4px !important;
    }

    .ship-desc {
        font-size: clamp(0.54rem, 1.5vw, 0.67rem) !important;
        height: clamp(40px, 9.5vh, 54px) !important;
        padding: 4px 5px !important;
        margin-bottom: 5px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
    }

    .stat-container {
        padding: 4px !important;
        gap: 3px !important;
        flex-grow: 1 !important;
    }
    .stat-row { gap: 4px !important; }
    .stat-label { font-size: clamp(0.4rem, 1.2vw, 0.55rem) !important; min-width: 32px !important; }
    .stat-bar-bg { height: 4px !important; }
    .stat-bar { height: 4px !important; }

    .ship-price, .ship-owned {
        font-size: clamp(0.55rem, 1.8vw, 0.75rem) !important;
        margin-top: 5px !important;
        padding: 3px 6px !important;
    }

    /* === ELITE GATE - Daha büyük elmas === */
    .elite-gate {
        width: clamp(100px, 15vw, 130px) !important;
        min-width: clamp(100px, 15vw, 130px) !important;
        max-width: 130px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
    }
    .elite-gate .ship-icon {
        width: clamp(45px, 10vw, 65px) !important;
        height: clamp(45px, 10vw, 65px) !important;
        margin-bottom: 10px !important;
    }
    .elite-gate .ship-icon i {
        font-size: clamp(24px, 5vw, 36px) !important;
    }
    .elite-gate .ship-name {
        font-size: clamp(0.55rem, 1.6vw, 0.75rem) !important;
        margin-top: 5px !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    /* === GERİ BUTONU - PC gibi nizamlı === */
    #fixed-back-btn {
        position: absolute !important;
        left: 15px !important;
        top: 8px !important;
        padding: 6px 14px !important;
        font-size: clamp(0.6rem, 1.8vw, 0.8rem) !important;
        gap: 6px !important;
        z-index: 250 !important;
    }

    /* === SCROLL BUTONLARI - Elite modda görünür === */
    #scroll-right-btn, #scroll-left-btn {
        display: none !important;
    }
    .elite-mode ~ #scroll-right-btn,
    .elite-mode ~ #scroll-left-btn,
    .hangar-wrapper:has(.elite-mode) #scroll-right-btn,
    .hangar-wrapper:has(.elite-mode) #scroll-left-btn {
        display: flex !important;
        width: clamp(35px, 8vw, 50px) !important;
        height: clamp(35px, 8vw, 50px) !important;
        font-size: clamp(1rem, 3vw, 1.5rem) !important;
    }

    /* === KULLANICI ADI INPUT - Esnek ve dengeli === */
    #usernameInput {
        width: clamp(210px, 37vw, 290px) !important;
        padding: clamp(11px, 2.5vh, 15px) !important;
        font-size: clamp(0.9rem, 2.3vw, 1.08rem) !important;
        margin-top: clamp(8px, 2vh, 12px) !important;
    }

    /* === OYUN MODLARI BUTONLARI - Esnek ve dengeli === */
    .game-modes-container {
        width: clamp(220px, 39vw, 305px) !important;
        height: clamp(48px, 11vh, 60px) !important;
        margin-top: clamp(8px, 2vh, 12px) !important;
    }
    .mode-btn {
        font-size: clamp(0.62rem, 1.95vw, 0.82rem) !important;
        padding: clamp(7px, 1.6vh, 11px) clamp(10px, 2.2vw, 14px) !important;
    }
    .mode-btn i {
        font-size: clamp(0.75rem, 2.5vw, 1rem) !important;
        margin-bottom: 3px !important;
    }
    .survival-btn { padding-right: 15px !important; }
    .tdm-btn { padding-left: 15px !important; }
    .mode-divider { width: 3px !important; }

    /* === PARA GÖSTERGESİ === */
    .lobby-money {
        font-size: clamp(0.7rem, 2.2vw, 0.95rem) !important;
        padding: 6px 14px !important;
        top: 10px !important;
        left: 10px !important;
    }

    /* === ÜST SAĞ KONTROLLER === */
    .top-right-controls {
        gap: 6px !important;
        top: 10px !important;
        right: 10px !important;
    }
    .top-right-controls .icon-btn {
        width: clamp(34px, 7vw, 44px) !important;
        height: clamp(34px, 7vw, 44px) !important;
        font-size: clamp(0.7rem, 2vw, 0.95rem) !important;
    }
    .lang-btn {
        min-width: clamp(50px, 11vw, 70px) !important;
        padding: 0 10px !important;
        font-size: clamp(0.6rem, 1.7vw, 0.8rem) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       📱 OYUN İÇİ HUD - MOBİL (PORTRAIT → LANDSCAPE ROTATED)
       ═══════════════════════════════════════════════════════════════════════ */

    /* === ÜST SKOR PANELİ (Survival) === */
    .center-panel {
        top: 3px !important;
        padding: 3px 12px !important;
        gap: 15px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border-radius: 12px !important;
        border-top: 1px solid rgba(0, 234, 255, 0.3) !important;
    }
    .score-box { font-size: clamp(0.6rem, 1.8vw, 0.8rem) !important; }
    .money-box { font-size: clamp(0.55rem, 1.6vw, 0.75rem) !important; }

    /* === MOBA/TDM HUD === */
    #moba-hud {
        transform: translateX(-50%) scale(0.75) !important;
        transform-origin: top center !important;
    }
    .team-score {
        width: 80px !important;
        height: 35px !important;
        font-size: 1rem !important;
    }
    .score-label { font-size: 0.5rem !important; }
    .moba-timer-box {
        padding: 4px 15px !important;
        font-size: 1rem !important;
    }
    .moba-kda-box {
        padding: 2px 10px !important;
        font-size: 0.6rem !important;
    }

    /* === LEADERBOARD - Daha büyük ve okunur === */
    #leaderboard {
        display: block !important;
        position: absolute !important;
        top: auto !important;
        bottom: 85px !important;
        right: 5px !important;
        width: clamp(100px, 16vw, 130px) !important; /* %20 büyük */
        padding: 5px 8px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border-radius: 5px !important;
        border-left: 2px solid rgba(0, 234, 255, 0.5) !important;
        max-height: 95px !important;
        overflow: hidden !important;
    }
    #leaderboard h3 {
        font-size: clamp(0.48rem, 1.4vw, 0.65rem) !important;
        margin-bottom: 3px !important;
    }
    #leaderboard li {
        font-size: clamp(0.42rem, 1.2vw, 0.56rem) !important;
        line-height: 1.4 !important;
        margin-top: 2px !important;
    }

    /* === KILLBOARD - Daha büyük ve okunur === */
    #killboard {
        display: block !important;
        position: absolute !important;
        top: auto !important;
        bottom: 185px !important;
        right: 5px !important;
        width: clamp(100px, 16vw, 130px) !important; /* %20 büyük */
        padding: 5px 8px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border-radius: 5px !important;
        border-left: 2px solid rgba(255, 0, 85, 0.5) !important;
        max-height: 90px !important;
        overflow: hidden !important;
    }
    #killboard h3 {
        font-size: clamp(0.48rem, 1.4vw, 0.65rem) !important;
        margin-bottom: 3px !important;
    }
    #killboard li {
        font-size: clamp(0.42rem, 1.2vw, 0.56rem) !important;
        line-height: 1.4 !important;
        margin-top: 2px !important;
    }

    /* === MINIMAP/RADAR - Exit'in sağında, büyütülmüş === */
    .minimap-container {
        position: absolute !important;
        bottom: 130px !important;
        left: 45px !important; /* Exit butonunun sağı */
        right: auto !important;
        top: auto !important;
        width: clamp(65px, 12vw, 85px) !important; /* %15-20 büyük */
        height: clamp(65px, 12vw, 85px) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(0, 234, 255, 0.4) !important;
        border-radius: 5px !important;
    }

    /* === SAĞLIK BARI & SKİLLER - SAĞ ÜSTE TAŞINDI === */
    .health-container {
        position: absolute !important;
        bottom: auto !important;
        top: 50px !important; /* Üst sağ bölge */
        right: 3px !important;
        left: auto !important;
        width: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 5px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        padding: 3px 6px !important;
        border-radius: 8px !important;
    }
    .abilities-wrapper {
        display: flex !important;
        flex-direction: column !important; /* Dikey sıralama */
        gap: 4px !important;
        margin-bottom: 0 !important;
    }
    .ability-slot {
        width: clamp(32px, 7vw, 42px) !important; /* Biraz büyük */
        height: clamp(32px, 7vw, 42px) !important;
        border-radius: 6px !important;
    }
    .ability-icon { font-size: clamp(0.6rem, 1.5vw, 0.85rem) !important; }
    .key-hint { display: none !important; }
    .cooldown-text { font-size: clamp(0.5rem, 1.2vw, 0.7rem) !important; }

    .health-bar-section {
        display: flex !important;
        flex-direction: column !important;
        min-width: 60px !important;
    }
    .p1-health { font-size: clamp(0.4rem, 1.2vw, 0.55rem) !important; }
    .bar-bg { height: 5px !important; border-radius: 3px !important; }

    /* === XP BAR - Market'in ÜZERİNDE, daha yukarı taşı === */
    #xp-container {
        position: absolute !important;
        bottom: 125px !important; /* Market'in üzerinde (market ~8px'de) */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: clamp(200px, 40vw, 350px) !important;
        height: 14px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border-radius: 7px !important;
        padding: 2px 8px !important;
        z-index: 105 !important; /* Market'ten yüksek */
    }
    .xp-label { font-size: clamp(0.45rem, 1.2vw, 0.6rem) !important; }
    .xp-bar-bg { height: 4px !important; border-radius: 2px !important; }

    /* === LEVEL UP YAZISI - Küçült === */
    .level-up-text, #level-up-display {
        font-size: clamp(1rem, 3vw, 1.5rem) !important;
        padding: 5px 15px !important;
    }

    /* === MARKET BUTONLARI === */
    .shop-bar {
        position: absolute !important;
        bottom: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 4px 8px !important;
        gap: 4px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 10px !important;
        max-width: 80% !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .shop-btn {
        width: clamp(30px, 6vw, 40px) !important;
        height: clamp(30px, 6vw, 40px) !important;
        font-size: clamp(0.65rem, 1.6vw, 0.9rem) !important;
        background: rgba(0, 20, 40, 0.6) !important;
        border-radius: 6px !important;
    }
    .shop-btn::before, .shop-btn::after { display: none !important; }
    .badge-time {
        font-size: clamp(0.3rem, 0.9vw, 0.45rem) !important;
        padding: 1px 2px !important;
    }
    .upgrade-info, .separator { display: none !important; }

    /* === MOBİL KONTROLLER (JOYSTICK) - %18 BÜYÜTÜLDÜ === */
    #mobile-controls {
        display: flex !important;
        position: absolute !important;
        bottom: 10px !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 15px !important;
        justify-content: space-between !important;
        z-index: 200 !important;
        pointer-events: none !important;
    }
    .joystick-area {
        width: clamp(106px, 21vw, 140px) !important; /* ~18% büyük (90*1.18≈106) */
        height: clamp(106px, 21vw, 140px) !important;
        opacity: 0.85 !important;
        pointer-events: auto !important;
    }
    .stick-base {
        background: rgba(0, 234, 255, 0.12) !important;
        border: 2px solid rgba(0, 234, 255, 0.35) !important;
    }
    .stick-handle {
        width: clamp(42px, 8.5vw, 60px) !important; /* ~20% büyük (35*1.2≈42) */
        height: clamp(42px, 8.5vw, 60px) !important;
        background: rgba(0, 234, 255, 0.65) !important;
        box-shadow: 0 0 10px rgba(0, 234, 255, 0.4) !important;
    }

    /* === ÜST KONTROLLER === */
    .top-left-controls {
        display: none !important; /* Health container'a taşındı */
    }
    .top-right-controls {
        top: 3px !important;
        right: 3px !important;
        gap: 3px !important;
    }
    .top-right-controls .icon-btn {
        width: clamp(26px, 5vw, 34px) !important;
        height: clamp(26px, 5vw, 34px) !important;
        font-size: clamp(0.55rem, 1.4vw, 0.75rem) !important;
    }
    #exitBtn {
        position: absolute !important;
        top: 3px !important;
        left: 3px !important;
        width: clamp(26px, 5vw, 34px) !important;
        height: clamp(26px, 5vw, 34px) !important;
        font-size: clamp(0.55rem, 1.4vw, 0.75rem) !important;
        z-index: 250 !important;
    }

    /* === BİLDİRİM ALANI === */
    #notification-area {
        top: 50px !important;
        width: 90% !important;
    }
    .kill-msg {
        padding: 3px 10px !important;
        border-radius: 8px !important;
    }
    .kill-text { font-size: 0.9rem !important; }
    .kill-sub { font-size: 1.5rem !important; }
    .kill-reward { font-size: 0.75rem !important; }
}

/* ÜST KONTROLLER */
.top-left-controls { position: absolute; top: 10px; left: 10px; z-index: 201; display: flex; gap: 10px; }
.top-right-controls { position: absolute; top: 10px; right: 10px; z-index: 201; display: flex; gap: 10px; }
.icon-btn {
    background: var(--bg-button); border: 1px solid rgba(var(--color-primary-rgb), 0.3); color: var(--color-primary);
    width: var(--icon-btn-size); height: var(--icon-btn-size); border-radius: var(--border-radius-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: var(--transition-fast);
}
.icon-btn:hover { background: rgba(var(--color-primary-rgb), 0.2); color: #fff; box-shadow: 0 0 var(--glow-intensity-sm) var(--color-primary); }

/* DİL BUTONU */
.lang-btn {
    width: auto !important;
    padding: 0 12px;
    font-size: 0.75rem;
    font-family: var(--font-main);
    font-weight: bold;
    gap: 4px;
    min-width: 60px;
}
.lang-btn:hover {
    background: rgba(var(--color-secondary-rgb), 0.2);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    box-shadow: 0 0 10px rgba(var(--color-secondary-rgb), 0.5);
}

/* ORTA PANEL (SKOR & PARA) */
.center-panel {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 30px; background: var(--bg-panel);
    padding: 5px 20px; border-radius: var(--border-radius-lg); border-top: 2px solid rgba(var(--color-primary-rgb), 0.5);
    z-index: 50; pointer-events: none;
}
.score-box { font-size: 1.1rem; color: var(--color-primary); text-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0.5); }
.money-box { font-size: 1rem; color: var(--color-secondary); text-shadow: 0 0 5px rgba(var(--color-secondary-rgb), 0.5); }

/* --- MARKET (OYUN İÇİ) --- */
.shop-bar {
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; background: var(--bg-panel-dark);
    padding: 8px 15px; border-radius: var(--border-radius-full); border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px); z-index: 100; box-shadow: 0 5px 20px rgba(0,0,0,0.5); white-space: nowrap;
}
.shop-btn {
    position: relative; background: transparent; border: 1px solid transparent;
    width: var(--btn-size); height: var(--btn-size); border-radius: var(--btn-radius); cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem; color: rgba(255, 255, 255, 0.7); transition: all var(--transition-fast);
}
.shop-btn::before {
    content: "[" attr(data-key) "]"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    font-size: 0.6rem; color: #999; font-weight: bold; font-family: var(--font-mono); opacity: 0.7;
}
.shop-btn::after {
    content: attr(data-price); position: absolute; bottom: -15px;
    font-size: 0.6rem; color: #ccc; font-family: var(--font-main); text-shadow: 1px 1px 1px #000;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🌟 GLOW EFEKTLERİ - Optimize Edilmiş (Tek Mixin Benzeri Yaklaşım)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ortak hover stili */
.shop-btn[class*="-glow"]:hover {
    transform: translateY(-3px);
}

/* Her renk için sadece değişen özellikler */
.gold-glow:hover { 
    --glow-color: var(--glow-gold); 
    --glow-color-rgb: var(--glow-gold-rgb);
    border-color: var(--glow-color); 
    box-shadow: 0 0 var(--glow-intensity) rgba(var(--glow-color-rgb), 0.4); 
    color: var(--glow-color); 
}
.green-glow:hover { 
    --glow-color: var(--glow-green); 
    --glow-color-rgb: var(--glow-green-rgb);
    border-color: var(--glow-color); 
    box-shadow: 0 0 var(--glow-intensity) rgba(var(--glow-color-rgb), 0.4); 
    color: var(--glow-color); 
}
.purple-glow:hover { 
    --glow-color: var(--glow-purple); 
    --glow-color-rgb: var(--glow-purple-rgb);
    border-color: var(--glow-color); 
    box-shadow: 0 0 var(--glow-intensity) rgba(var(--glow-color-rgb), 0.4); 
    color: var(--glow-color); 
}
.red-glow:hover { 
    --glow-color: var(--glow-red); 
    --glow-color-rgb: var(--glow-red-rgb);
    border-color: var(--glow-color); 
    box-shadow: 0 0 var(--glow-intensity) rgba(var(--glow-color-rgb), 0.4); 
    color: var(--glow-color); 
}
.blue-glow:hover { 
    --glow-color: var(--glow-blue);
    border-color: var(--glow-color); 
    box-shadow: 0 0 var(--glow-intensity) var(--glow-color); 
    color: var(--glow-color); 
}
.orange-glow:hover { 
    --glow-color: var(--glow-orange);
    border-color: var(--glow-color); 
    box-shadow: 0 0 var(--glow-intensity) var(--glow-color); 
    color: var(--glow-color); 
}

.separator { width: 1px; height: 40px; background: rgba(255,255,255,0.2); margin: 0 5px; }
.badge-time {
    position: absolute; bottom: 2px; right: 2px;
    background: var(--color-secondary); color: #000; font-size: 0.5rem; font-weight: 900;
    padding: 1px 3px; border-radius: 3px; z-index: 10; pointer-events: none; border: 1px solid #fff; line-height: 1;
}

/* UPGRADE BUTONLARI */
.upgrade-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.upgrade-btn i { font-size: 1rem; margin-bottom: 2px; }

/* --- UPGRADE BUTONLARI DÜZELTME --- */
.upgrade-info { 
    position: static; /* Konumlandırmayı span'lere bırakıyoruz */
    width: auto; 
}

/* 1. LEVEL BİLGİSİ: Butonun sağ üst köşesine (Badge gibi) taşı */
.upgrade-info span:first-child { 
    position: absolute; 
    top: 2px; 
    right: 2px; 
    font-size: 0.55rem; 
    color: #fff; 
    background: rgba(0,0,0,0.6); 
    padding: 1px 4px; 
    border-radius: 4px; 
    font-weight: bold;
    pointer-events: none;
}

/* 2. FİYAT BİLGİSİ: Diğer butonlarla birebir aynı hizaya (-15px) çek */
.upgrade-info span:last-child { 
    position: absolute; 
    bottom: -15px; /* Standart butonların ::after değeriyle aynı */
    left: 0; 
    width: 100%; 
    text-align: center; 
    font-size: 0.6rem; 
    color: #ccc; 
    font-family: 'Orbitron', sans-serif; 
    text-shadow: 1px 1px 1px #000;
}

/* Araya giren <br> etiketini gizle */
.upgrade-info br {
    display: none;
}



.upgrade-btn::after { display: none; }

/* SAĞLIK ve XP */
.health-container { position: absolute; bottom: 20px; left: 20px; width: 200px; z-index: 90; }
.p1-health { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: #aaa; }
.bar-bg { flex-grow: 1; height: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); transform: skewX(-20deg); }
.bar-fill { width: 100%; height: 100%; background: #00eaff; box-shadow: 0 0 8px #00eaff; transition: width 0.2s; }

#xp-container {
    position: absolute; bottom: 85px; left: 50%; transform: translateX(-50%);
    width: 60%; height: 20px; z-index: 95; display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.xp-label { font-size: 0.8rem; color: #fff; font-weight: bold; white-space: nowrap; text-shadow: 0 0 5px #00eaff; }
.xp-bar-bg { flex-grow: 1; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden; }
.xp-bar-fill { width: 0%; height: 100%; background: #00ff88; box-shadow: 0 0 10px #00ff88; transition: width 0.3s; }

/* MINIMAP & LEADERBOARD */
.minimap-container {
    position: absolute; bottom: 20px; right: 20px;
    width: 120px; height: 120px; border-radius: 50%;
    border: 2px solid rgba(0, 234, 255, 0.3); box-shadow: 0 0 15px rgba(0, 234, 255, 0.1);
    overflow: hidden; z-index: 90;
}
#leaderboard {
    position: absolute; top: 60px; right: 10px; width: 180px;
    background: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px; border-left: 2px solid #00eaff;
    pointer-events: none; z-index: 80;
}
#leaderboard h3 { margin: 0 0 5px 0; font-size: 0.8rem; color: #00eaff; border-bottom: 1px solid #333; }
#leaderboard ul { list-style: none; padding: 0; margin: 0; }
#leaderboard li { font-size: 0.75rem; display: flex; justify-content: space-between; margin-top: 3px; color: #ccc; }
#leaderboard span.lb-score { color: #ffd700; }

#killboard {
    position: absolute; top: 180px; right: 10px; width: 180px;
    background: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px; 
    border-left: 2px solid #ff0055; pointer-events: none; z-index: 80;
}
#killboard h3 { margin: 0 0 5px 0; font-size: 0.8rem; color: #ff0055; border-bottom: 1px solid #333; }
#killboard ul { list-style: none; padding: 0; margin: 0; }
#killboard li { font-size: 0.75rem; display: flex; justify-content: space-between; margin-top: 3px; color: #ccc; }
#killboard span { color: #fff; font-weight: bold; }

/* YETENEKLER */
.abilities-wrapper { display: flex; gap: 10px; margin-bottom: 8px; }
.ability-slot {
    position: relative; width: 60px; height: 60px;
    background: rgba(0, 20, 40, 0.8); border: 1px solid #00eaff; border-radius: 10px;
    display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 234, 255, 0.2); overflow: hidden;
}
.key-hint {
    position: absolute; top: 2px; right: 4px; font-size: 0.85rem; color: #ffd700;
    font-weight: 900; font-family: monospace; text-shadow: 1px 1px 2px #000; pointer-events: none; z-index: 5;
}
.cooldown-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 0%;
    background: rgba(0, 0, 0, 0.7); transition: height 0.1s linear;
}
#btn-miner i { color: #00ff88; text-shadow: 0 0 5px #00ff88; }

/* --- ARAYÜZ (LOBBY & GAME OVER) - DÜZELTİLDİ --- */
#overlay, #game-over-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(5, 5, 10, 0.95);
    display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 200;
    
    /* GÜNCELLEME: Simetri için sıkı Gap ve Padding ayarı */
    gap: 10px; 
    padding: 10px;
    text-align: center; /* Her şeyi ortala */
}

/* Margin sıfırlama (Gap kullanıyoruz) */
#overlay > *, #game-over-screen > * { margin: 0 !important; }

/* Başlık ayarları (Game Over başlığı için de geçerli) */
h1 { 
    font-size: 3rem; 
    color: #fff; 
    text-shadow: 0 0 20px #00eaff; 
    letter-spacing: 5px; 
    line-height: 1.2;
    text-align: center;
}
.subtitle { color: #888; letter-spacing: 3px; font-size: 0.9rem; }

/* Para göstergesi (Lobby) */
/* --- public/style.css --- */

.lobby-money {
    /* GÜNCELLEME: Akıştan çıkarıp sol üst köşeye sabitledik */
    position: absolute;
    top: 20px;
    left: 20px;
    margin: 0;
    
    /* Mevcut Tasarım */
    font-size: 1.2rem;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    background: rgba(0,0,0,0.5);
    padding: 8px 25px;
    border-radius: 20px;
    border: 1px solid #ffd700;
    z-index: 205; /* Diğer öğelerin üzerinde */
    
    /* Animasyonlu giriş (Opsiyonel ama şık durur) */
    animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* GİRİŞ EKRANI İSİM KUTUSU - Eşitlendi */
#usernameInput {
    background: rgba(0,0,0,0.5); 
    border: 1px solid #00eaff; 
    color: #fff;
    padding: 12px; 
    font-family: 'Orbitron'; 
    font-size: 1.2rem; 
    text-align: center;
    width: 280px; /* Butonla aynı genişlik */
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,234,255,0.1);
}

/* style.css - Hangar Container Güncellemesi */

/* Hangar Wrapper - Geri butonu ve container'ı saran kutu */
.hangar-wrapper {
    position: relative;
    width: fit-content;
    max-width: 95%;
    margin: 0 auto;
}

.hangar-container {
    display: flex;
    gap: 15px;
    padding: 15px;
    padding-top: 60px; /* Geri butonu için üstte boşluk */

    width: fit-content;
    max-width: 100%;

    overflow-x: auto; /* Yatay kaydırma */
    padding-bottom: 30px; /* Hover efekti için boşluk */
    align-items: stretch; /* Kart boylarını eşitle */

    /* Scrollbar Tasarımı */
    scrollbar-width: thin;
    scrollbar-color: #00eaff rgba(0,0,0,0.5);
}

/* YENİ: SAĞ KAYDIRMA OKU */
#scroll-right-btn {
    display: none; /* Varsayılan olarak GİZLİ */
    position: absolute;
    right: 20px;
    top: 55%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #00eaff;
    cursor: pointer;
    z-index: 210;
    opacity: 0.7;
    animation: bounceRight 1.5s infinite;
    background: rgba(0,0,0,0.5);
    width: 50px; height: 50px;
    border-radius: 50%;
    justify-content: center; align-items: center;
    border: 1px solid rgba(0,234,255,0.3);
    transition: 0.3s;
}

#scroll-right-btn:hover {
    background: rgba(0,234,255,0.2);
    opacity: 1;
    box-shadow: 0 0 15px #00eaff;
}
@keyframes bounceRight {
    0%, 100% { transform: translate(0, -50%); }
    50% { transform: translate(5px, -50%); }
}

/* --- GÜNCELLENMİŞ KART TASARIMI (DAHA BÜYÜK YAZILAR & NEON ANİMASYON) --- */

.ship-card {
    /* Boyutlar aynı */
    width: 200px !important; 
    min-width: 200px; 
    height: 310px !important; 
    
    background: linear-gradient(180deg, rgba(0, 20, 40, 0.95), rgba(0, 10, 20, 0.98));
    border: 1px solid rgba(0, 234, 255, 0.3); 
    border-radius: 8px;
    display: flex; 
    flex-direction: column; 
    padding: 12px; /* İç boşluğu biraz artırdık */
    position: relative; 
    
    /* ANİMASYON GEÇİŞİ BURADA */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
    cursor: pointer;
    overflow: hidden;
}

/* --- YENİ HOVER (ÜZERİNE GELME) EFEKTİ --- */
.ship-card:hover {
    transform: translateY(-8px) scale(1.02); /* Yukarı kalkma */
    border-color: #00eaff; /* Çerçeve parlasın */
    box-shadow: 
        0 10px 25px rgba(0, 234, 255, 0.3), /* Dış gölge */
        inset 0 0 15px rgba(0, 234, 255, 0.1); /* İç neon parlaması */
    z-index: 10; /* Diğer kartların önüne geçsin */
}

/* Seçili Kart Efekti */
.ship-card.selected { 
    border: 2px solid #00eaff; 
    background: rgba(0, 234, 255, 0.1); 
    box-shadow: 0 0 20px rgba(0, 234, 255, 0.4); 
    transform: scale(1.02); /* Seçili kart hafif büyük dursun */
}

.ship-icon {
    width: 65px; /* İkonu çok az büyüttük */
    height: 65px;
    margin: 0 auto 5px auto; 
    display: block;
    filter: drop-shadow(0 0 5px rgba(0, 234, 255, 0.6));
    pointer-events: none;
    flex-shrink: 0;
}

.ship-name { 
    font-size: 1rem; /* İsim büyüdü (0.9 -> 1.0) */
    font-weight: 900; 
    color: #fff; 
    text-align: center; 
    margin-bottom: 5px; 
    flex-shrink: 0;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
}

/* AÇIKLAMA KUTUSU (Genişletildi) */
.ship-desc { 
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 4px; 
    padding: 6px 8px; 
    
    /* YAZI BÜYÜDÜ */
    font-size: 0.75rem; /* (0.65 -> 0.75) Okunabilir oldu */
    color: #ddd; 
    line-height: 1.3; 
    text-align: center; 
    
    /* KUTU YÜKSEKLİĞİ ARTTI */
    height: 55px; /* (40px -> 55px) Boşluğu doldurmak için */
    
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 8px; 
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.05);
}

/* İSTATİSTİK ALANI */
.stat-container { 
    width: 100%; 
    background: rgba(0,0,0,0.4); 
    padding: 8px; 
    border-radius: 4px; 
    
    /* Margin-top: auto, bu kutuyu en alta iter. 
       Yukarıdaki yazı büyüdüğü için aradaki boşluk artık azalacaktır. */
    margin-top: auto; 
    
    display: flex;
    flex-direction: column;
    gap: 5px; 
}

.stat-label { 
    /* ETİKETLER BÜYÜDÜ */
    font-size: 0.7rem; /* (0.55 -> 0.7) Artık "ZIRH" rahat okunur */
    color: #bbb; 
    margin-bottom: 2px; 
    font-weight: bold; 
    display: flex; 
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-bar { 
    width: 100%; 
    height: 4px; /* Bar kalınlığı hafif arttı (3px -> 4px) */
    background: #222; 
    border-radius: 2px; 
    overflow: hidden; 
}

/* --- EKSİK OLAN KISIM BURASI --- */
.stat-fill {
    height: 100%; /* Bunu yazmadığımız için barlar 0px boyunda kalıyordu */
    width: 0;     /* JS ile dolacak */
    border-radius: 2px;
    transition: width 0.5s ease-out; /* Dolarken şık bir animasyon olsun */
}

.ship-price, .ship-owned { 
    font-size: 0.85rem; 
    margin-top: 8px; 
    font-weight: bold; 
    text-align: center; 
}

/* ELITE KARTLAR */
.elite-card { border-color: #aa00ff; background: linear-gradient(180deg, rgba(30, 0, 50, 0.9), rgba(10, 0, 20, 0.95)); }
.elite-card .ship-icon { color: #d000ff; filter: drop-shadow(0 0 8px #aa00ff); }
.elite-card .ship-name { color: #e0aaff; text-shadow: 0 0 10px #aa00ff; }
.elite-card .ship-desc { border-color: rgba(170, 0, 255, 0.3); background: rgba(20, 0, 40, 0.6); color: #e0aaff; }
.elite-card .stat-fill { background: #d000ff; box-shadow: 0 0 8px #d000ff; }
.elite-card .stat-label { color: #d000ff; }
.elite-card:hover { border-color: #d000ff; box-shadow: 0 10px 30px rgba(170, 0, 255, 0.4); }
.elite-card.selected { border-color: #d000ff; background: rgba(170, 0, 255, 0.2); }

.ship-card:last-child.elite-card { border: 2px solid #ffd700; background: linear-gradient(180deg, rgba(40, 30, 0, 0.9), rgba(10, 5, 0, 0.95)); }
.ship-card:last-child.elite-card .ship-icon { color: #ffd700; filter: drop-shadow(0 0 10px #ffd700); }
.ship-card:last-child.elite-card .ship-name { color: #ffd700; }
.ship-card:last-child.elite-card .stat-fill { background: #ffd700; box-shadow: 0 0 10px #ffd700; }
.ship-card:last-child.elite-card .stat-label { color: #ffd700; }

/* Elite Gate - Özel Gemiler Kartı */
.elite-gate {
    width: 140px !important;
    border: 2px dashed #ffd700;
    background: rgba(255, 215, 0, 0.05);
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 15px 10px !important;
    cursor: pointer;
    transition: all 0.3s ease;
}
.elite-gate:hover {
    background: rgba(255, 215, 0, 0.15);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.elite-gate .ship-icon.elite-gem-icon {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}
.elite-gate .ship-icon.elite-gem-icon i {
    font-size: 2.5rem !important;
    color: #ffd700 !important;
    text-shadow: 0 0 15px #ffaa00 !important;
    animation: gemPulse 2s ease-in-out infinite;
}
.elite-gate .ship-name {
    font-size: 0.85rem !important;
    margin-top: 5px !important;
    text-align: center !important;
}
.elite-gate-desc {
    font-size: 0.6rem;
    color: #aaa;
    margin-top: 5px;
    text-align: center;
}

@keyframes gemPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.1); filter: brightness(1.3); }
}

.back-card { width: 100px !important; border: 2px dashed #00eaff; justify-content: center; align-items: center; opacity: 0.7; }

/* --- BİLDİRİM SİSTEMİ --- */
#notification-area { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 9999; width: 80%; }
.kill-msg { background: rgba(0, 0, 0, 0.5); padding: 5px 15px; border-radius: 10px; border: 1px solid rgba(0, 234, 255, 0.3); text-align: center; margin-bottom: 8px; backdrop-filter: blur(2px); animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, fadeOut 0.5s ease-in 2.5s forwards; }
.kill-text { font-size: 1.3rem; color: #fff; text-shadow: 0 0 10px #00eaff; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.kill-sub { font-size: 2.2rem; color: #ffd700; text-shadow: 0 0 20px #ff0000; font-weight: 900; margin: 2px 0; animation: shake 0.5s infinite; }
.kill-reward { font-size: 1rem; color: #00ff88; font-weight: bold; margin-top: 2px; }

@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-20px); } }
@keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }

/* MOBİL KONTROLLER */
#mobile-controls { position: absolute; bottom: 80px; width: 100%; display: none; justify-content: space-between; padding: 0 40px; z-index: 15; pointer-events: none; }
.joystick-area { width: 100px; height: 100px; position: relative; pointer-events: auto; opacity: 0.6; }
.stick-base { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; }
.stick-handle { width: 40px; height: 40px; background: #00eaff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px #00eaff; }

/* Masaüstü için mobil kontrolleri gizle */
/* pointer: fine = mouse/trackpad (PC), pointer: coarse = dokunmatik (mobil/tablet) */
@media (pointer: fine) {
    #mobile-controls { display: none !important; }
}

/* Dokunmatik cihazlarda (tablet dahil) landscape modda joystick göster */
@media (pointer: coarse) and (orientation: landscape) {
    #mobile-controls {
        display: flex !important;
        z-index: 200 !important;
    }
}

/* Portrait mod artık CSS ile landscape'e dönüştürülüyor (yukarıdaki transform kuralı) */

/* --- OYUN MODLARI BUTON CONTAINER --- */
.game-modes-container {
    display: flex;
    align-items: stretch;
    width: 280px; /* usernameInput ile aynı genişlik */
    height: 50px;
    position: relative;
    margin-top: 5px;
}

/* Ortak mod butonu stili */
.mode-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 5px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.mode-btn i {
    font-size: 1rem;
    margin-bottom: 2px;
}

/* Hayatta Kal butonu - Sol taraf (mavi/cyan) */
.survival-btn {
    background: linear-gradient(135deg, rgba(0, 40, 60, 0.9), rgba(0, 80, 100, 0.8));
    color: #00eaff;
    border-radius: 4px 0 0 4px;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    padding-right: 15px;
    box-shadow: 0 0 15px rgba(0, 234, 255, 0.3);
}

.survival-btn:hover {
    background: linear-gradient(135deg, rgba(0, 60, 80, 0.95), rgba(0, 100, 120, 0.9));
    box-shadow: 0 0 25px rgba(0, 234, 255, 0.6);
    text-shadow: 0 0 10px #00eaff;
}

/* Takım Savaşı butonu - Sağ taraf (kırmızı/turuncu) */
.tdm-btn {
    background: linear-gradient(135deg, rgba(100, 20, 0, 0.9), rgba(150, 40, 0, 0.8));
    color: #ff6600;
    border-radius: 0 4px 4px 0;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    padding-left: 15px;
    box-shadow: 0 0 15px rgba(255, 68, 0, 0.3);
}

.tdm-btn:hover {
    background: linear-gradient(135deg, rgba(130, 30, 0, 0.95), rgba(180, 50, 0, 0.9));
    box-shadow: 0 0 25px rgba(255, 68, 0, 0.6);
    text-shadow: 0 0 10px #ff6600;
}

/* Çapraz ayırıcı - ortada */
.mode-divider {
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #00eaff, #ff6600);
    transform: translateX(-50%) skewX(-15deg);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    z-index: 5;
}

/* GAME OVER BUTONU */
#game-over-screen button {
    background: rgba(0, 20, 40, 0.8);
    color: #ff0055;
    border: 1px solid #ff0055;
    width: 280px;
    padding: 12px 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.2);
    transition: all 0.3s ease;
    border-radius: 4px;
}
#game-over-screen button:hover {
    background: rgba(255, 0, 85, 0.15);
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.6);
    text-shadow: 0 0 8px #ff0055;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   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: relative;
    bottom: auto;
    left: auto;
    transform: none;
    animation: none;
    opacity: 1;
    width: auto;
    font-style: normal;
}

/* --- YENİ HANGAR KONTROLLERİ --- */

/* 1. Sabit Geri Butonu - Elite modda görünür */
#fixed-back-btn {
    position: absolute;
    left: 15px; /* Sol kenardan minik aralık */
    top: 10px; /* Üstten minik aralık */

    background: rgba(255, 0, 85, 0.2);
    border: 1px solid #ff0055;
    color: #ff0055;
    padding: 10px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-family: 'Orbitron';
    font-size: 0.9rem;
    font-weight: bold;
    transition: 0.3s;
    z-index: 220;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#fixed-back-btn:hover {
    background: #ff0055;
    color: #fff;
    box-shadow: 0 0 15px #ff0055;
}

/* 2. Sol Ok Butonu (Sağ ok ile aynı stilde ama solda) */
#scroll-left-btn {
    display: none; /* JS ile açılacak */
    position: absolute;
    left: 20px; /* Solda */
    top: 55%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #00eaff;
    cursor: pointer;
    z-index: 210;
    background: rgba(0,0,0,0.5);
    width: 50px; height: 50px;
    border-radius: 50%;
    justify-content: center; align-items: center;
    border: 1px solid rgba(0,234,255,0.3);
    transition: 0.3s;
}
#scroll-left-btn:hover {
    background: rgba(0,234,255,0.2);
    box-shadow: 0 0 15px #00eaff;
}

/* 3. Soluklaştırma (Pasif Buton) Efekti */
.scroll-disabled {
    opacity: 0.2 !important;
    pointer-events: none; /* Tıklanmasın */
    filter: grayscale(100%);
}

/* --- MINI TUTORIAL (LOBI) --- */
.mini-tutorial {
    display: flex;
    gap: 20px;
    background: rgba(0, 20, 40, 0.6);
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(0, 234, 255, 0.2);
    margin-bottom: 10px;
}
.tut-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccc;
    font-size: 0.8rem;
}
.tut-item i { color: #00eaff; font-size: 1rem; }
.key-box {
    border: 1px solid #fff;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
}
.guide-link-btn {
    background: transparent;
    border: none;
    color: #888;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    font-family: 'Orbitron';
    letter-spacing: 1px;
    transition: 0.3s;
    margin-bottom: 10px;
}
.guide-link-btn:hover { color: #00eaff; text-shadow: 0 0 5px #00eaff; }

/* --- GAME OVER IPUCU (GÜNCELLENDİ) --- */
.death-tip-text {
    /* Konumlandırma: En Alt Orta */
    position: absolute;
    bottom: 50px;       /* Ekranın altından 50px yukarıda */
    left: 50%;
    transform: translateX(-50%); /* Tam yatay ortalama */
    
    /* Görünüm */
    font-size: 0.95rem;
    color: #ffd700;     /* Altın Sarısı */
    text-shadow: 0 2px 5px rgba(0,0,0,0.8); /* Okunabilirlik için gölge */
    width: 90%;         /* Genişlik */
    text-align: center;
    font-style: italic;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    
    /* Animasyon */
    animation: fadeInUp 1s ease forwards;
    opacity: 0;         /* Başlangıçta görünmez */
}

/* İpucunun aşağıdan yukarı süzülerek gelmesi için animasyon */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* --- DETAYLI REHBER MODAL --- */
.guide-modal-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 10000; /* En üstte */
    display: flex; justify-content: center; align-items: center;
}
.guide-content {
    width: 90%; max-width: 600px; max-height: 85vh;
    background: linear-gradient(180deg, #0a1015, #000);
    border: 1px solid #00eaff;
    border-radius: 10px;
    padding: 25px;
    overflow-y: auto; /* Kaydırma çubuğu */
    position: relative;
    box-shadow: 0 0 30px rgba(0, 234, 255, 0.2);
    color: #ddd;
    font-family: sans-serif; /* Okuma kolaylığı için */
}
.guide-content h2 {
    font-family: 'Orbitron'; color: #00eaff; text-align: center;
    margin-top: 0; border-bottom: 1px solid #333; padding-bottom: 10px;
}
.guide-section { margin-bottom: 20px; }
.guide-section h3 {
    font-family: 'Orbitron'; color: #ffd700; font-size: 1.1rem;
    margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.guide-section ul { padding-left: 20px; line-height: 1.6; }
.guide-section li { margin-bottom: 8px; font-size: 0.95rem; }
.close-guide {
    position: absolute; top: 15px; right: 15px;
    background: none; border: none; color: #ff0055; font-size: 1.5rem;
    cursor: pointer; transition: 0.3s;
}
.close-guide:hover { transform: scale(1.2); text-shadow: 0 0 10px #ff0055; }
.guide-footer { text-align: center; margin-top: 20px; }
.guide-footer button {
    background: #00eaff; color: #000; border: none; padding: 10px 30px;
    font-family: 'Orbitron'; font-weight: bold; cursor: pointer; border-radius: 5px;
}
.guide-footer button:hover { background: #fff; box-shadow: 0 0 15px #00eaff; }

/* Mobil Düzenleme */
@media (max-width: 600px) {
    .mini-tutorial { flex-direction: column; gap: 5px; padding: 10px; border-radius: 10px; }
}
/* --- BAR RENKLERİ VE PARLAMALARI --- */
/* !important kullanarak Elite temalarından etkilenmemesini sağlıyoruz */

/* Can Barı (Yeşil) */
.bar-hp { background: #00ff88 !important; box-shadow: 0 0 6px #00ff88 !important; }

/* Hız Barı (Mavi) */
.bar-speed { background: #00eaff !important; box-shadow: 0 0 6px #00eaff !important; }

/* Hasar Barı (Kırmızı) */
.bar-dmg { background: #ff0055 !important; box-shadow: 0 0 6px #ff0055 !important; }

/* Serilik Barı (Sarı) */
.bar-fire { background: #ffd700 !important; box-shadow: 0 0 6px #ffd700 !important; }

/* --- MOBA HUD --- */
#moba-hud {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start; /* Yukarı yasla */
    gap: 0; /* Boşluk yok, birleşik dursunlar */
    z-index: 100;
}

.team-score {
    width: 120px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.team-score.blue {
    background: linear-gradient(to bottom, #004488, transparent);
    border-top: 4px solid #0088ff;
    border-bottom-left-radius: 10px;
}

.team-score.red {
    background: linear-gradient(to bottom, #881100, transparent);
    border-top: 4px solid #ff2200;
    border-bottom-right-radius: 10px;
}

.score-label {
    font-size: 0.7rem;
    opacity: 0.8;
    letter-spacing: 2px;
}

.moba-center-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.moba-timer-box {
    background: rgba(0,0,0,0.9);
    padding: 8px 25px;
    border: 1px solid #444;
    border-top: none;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.moba-kda-box {
    background: rgba(0,0,0,0.7);
    padding: 4px 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 1px solid #333;
    border-top: none;
    font-size: 0.9rem;
    color: #aaa;
    letter-spacing: 1px;
}

.moba-kda-box span:last-child {
    color: #fff;
    font-weight: bold;
}
/* Eski moba-btn-wrapper kaldırıldı - yeni game-modes-container kullanılıyor */

@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } }

/* ═══════════════════════════════════════════════════════════════════════════
   📱 MOBİL RESPONSIVE TASARIM - LOBİ & OYUN İÇİ
   Yükseklik bazlı media query ile tüm mobil cihazlarda çalışır
   ═══════════════════════════════════════════════════════════════════════════ */

/*
   YÖNTEM: Ekran yüksekliği 500px altında VE landscape modunda = mobil cihaz
   Bu sayede iPhone 14 Pro Max (932x430) gibi geniş ekranlar da yakalanır
*/

/* ═══════════════════════════════════════════════════════════════════════════
   📱 MOBİL LANDSCAPE - YATAY MOD (Yükseklik 500px altı)
   Ana lobi 5 kart sığar, elite modda kaydırma var
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {

    /* ═══════════════ LOBİ EKRANI ═══════════════ */

    #overlay h1 {
        font-size: clamp(1.1rem, 4vh, 1.8rem) !important;
        letter-spacing: 2px;
        margin-bottom: 5px;
    }

    .mini-tutorial, .guide-link-btn { display: none !important; }

    /* Hangar wrapper ve container */
    .hangar-wrapper {
        width: fit-content !important;
        max-width: 95% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        position: relative !important;
    }

    .hangar-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        width: fit-content !important;
        max-width: 100% !important;
        gap: clamp(8px, 1.5vw, 12px) !important;
        padding: 8px 12px !important;
        padding-top: 45px !important;
        overflow: hidden !important;
    }

    /* Elite modda kaydırma aktif */
    .hangar-container.elite-mode {
        overflow-x: auto !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Gemi kartları - Esnek ve dengeli (landscape mobil) */
    .ship-card {
        width: clamp(130px, 17.5vw, 165px) !important;
        min-width: clamp(130px, 17.5vw, 165px) !important;
        max-width: 165px !important;
        height: auto !important;
        min-height: clamp(170px, 42vh, 220px) !important;
        max-height: 230px !important;
        padding: clamp(6px, 1.3vh, 9px) !important;
        flex-shrink: 0 !important;
    }

    .ship-icon {
        width: clamp(36px, 8.2vh, 46px) !important;
        height: clamp(36px, 8.2vh, 46px) !important;
        margin-bottom: 4px !important;
    }
    .ship-icon i { font-size: clamp(17px, 4.1vh, 24px) !important; }

    .ship-name {
        font-size: clamp(0.65rem, 2vh, 0.87rem) !important;
        margin-bottom: 3px !important;
    }

    .ship-desc {
        font-size: clamp(0.48rem, 1.35vh, 0.61rem) !important;
        height: clamp(32px, 8.2vh, 44px) !important;
        padding: 3px 4px !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }

    .stat-container { padding: 3px !important; gap: 2px !important; }
    .stat-label { font-size: clamp(0.35rem, 1.1vh, 0.5rem) !important; }
    .stat-bar-bg, .stat-bar { height: 3px !important; }

    .ship-price, .ship-owned {
        font-size: clamp(0.5rem, 1.5vh, 0.7rem) !important;
        margin-top: 4px !important;
    }

    /* Elite gate - daha büyük elmas */
    .elite-gate {
        width: clamp(90px, 14vw, 120px) !important;
        min-width: clamp(90px, 14vw, 120px) !important;
        max-width: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .elite-gate .ship-icon {
        width: clamp(40px, 9vh, 55px) !important;
        height: clamp(40px, 9vh, 55px) !important;
        margin-bottom: 8px !important;
    }
    .elite-gate .ship-icon i {
        font-size: clamp(20px, 5vh, 30px) !important;
    }
    .elite-gate .ship-name {
        font-size: clamp(0.5rem, 1.5vh, 0.7rem) !important;
        margin-top: 5px !important;
    }

    /* Esnek ve dengeli (landscape mobil) */
    #usernameInput {
        width: clamp(190px, 32vw, 250px) !important;
        padding: clamp(8px, 2.2vh, 11px) !important;
        font-size: clamp(0.84rem, 2.2vh, 1.02rem) !important;
        margin-top: 8px !important;
    }

    .game-modes-container {
        width: clamp(200px, 34vw, 260px) !important;
        height: clamp(45px, 11vh, 55px) !important;
        margin-top: 8px !important;
    }
    .mode-btn {
        font-size: clamp(0.57rem, 1.65vh, 0.77rem) !important;
        padding: clamp(6px, 1.5vh, 9px) clamp(8px, 2vh, 11px) !important;
    }
    .mode-btn i {
        font-size: clamp(0.65rem, 2vh, 0.9rem) !important;
        margin-bottom: 2px !important;
    }
    .survival-btn { padding-right: 12px !important; }
    .tdm-btn { padding-left: 12px !important; }

    .lobby-money {
        font-size: clamp(0.65rem, 1.8vh, 0.85rem) !important;
        padding: 5px 12px !important;
        top: 8px !important;
        left: 8px !important;
    }

    /* Geri butonu - PC gibi nizamlı */
    #fixed-back-btn {
        position: absolute !important;
        left: 12px !important;
        top: 6px !important;
        padding: 5px 12px !important;
        font-size: clamp(0.55rem, 1.5vh, 0.7rem) !important;
        z-index: 250 !important;
    }

    /* Scroll butonları - elite modda görünür */
    #scroll-right-btn, #scroll-left-btn { display: none !important; }
    .hangar-wrapper:has(.elite-mode) #scroll-right-btn,
    .hangar-wrapper:has(.elite-mode) #scroll-left-btn {
        display: flex !important;
    }

    .top-right-controls {
        gap: 5px !important;
        top: 8px !important;
        right: 8px !important;
    }
    .top-right-controls .icon-btn {
        width: clamp(30px, 7vh, 38px) !important;
        height: clamp(30px, 7vh, 38px) !important;
        font-size: clamp(0.65rem, 1.8vh, 0.85rem) !important;
    }
    .lang-btn {
        min-width: clamp(45px, 10vw, 60px) !important;
        padding: 0 8px !important;
        font-size: clamp(0.55rem, 1.5vh, 0.7rem) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       📱 OYUN İÇİ HUD - MOBİL LANDSCAPE (max-height: 500px)
       ═══════════════════════════════════════════════════════════════════════ */

    /* === ÜST SKOR PANELİ === */
    .center-panel {
        top: 3px !important;
        padding: 2px 10px !important;
        gap: 12px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border-radius: 10px !important;
    }
    .score-box { font-size: clamp(0.55rem, 1.5vh, 0.75rem) !important; }
    .money-box { font-size: clamp(0.5rem, 1.4vh, 0.7rem) !important; }

    /* === MOBA/TDM HUD === */
    #moba-hud {
        transform: translateX(-50%) scale(0.7) !important;
        transform-origin: top center !important;
    }
    .team-score { width: 70px !important; height: 30px !important; font-size: 0.9rem !important; }
    .score-label { font-size: 0.45rem !important; }
    .moba-timer-box { padding: 3px 12px !important; font-size: 0.9rem !important; }
    .moba-kda-box { padding: 2px 8px !important; font-size: 0.55rem !important; }

    /* === LEADERBOARD - Kompakt, sağ alt === */
    #leaderboard {
        display: block !important;
        position: absolute !important;
        top: auto !important;
        bottom: 75px !important;
        right: 5px !important;
        width: clamp(80px, 12vw, 100px) !important;
        padding: 3px 5px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 4px !important;
        border-left: 2px solid rgba(0, 234, 255, 0.5) !important;
        max-height: 70px !important;
        overflow: hidden !important;
    }
    #leaderboard h3 { font-size: clamp(0.35rem, 1vh, 0.5rem) !important; margin-bottom: 2px !important; }
    #leaderboard li { font-size: clamp(0.32rem, 0.9vh, 0.45rem) !important; line-height: 1.25 !important; }

    /* === KILLBOARD - Kompakt, sağ alt === */
    #killboard {
        display: block !important;
        position: absolute !important;
        top: auto !important;
        bottom: 150px !important;
        right: 5px !important;
        width: clamp(80px, 12vw, 100px) !important;
        padding: 3px 5px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 4px !important;
        border-left: 2px solid rgba(255, 0, 85, 0.5) !important;
        max-height: 65px !important;
        overflow: hidden !important;
    }
    #killboard h3 { font-size: clamp(0.35rem, 1vh, 0.5rem) !important; margin-bottom: 2px !important; }
    #killboard li { font-size: clamp(0.32rem, 0.9vh, 0.45rem) !important; line-height: 1.25 !important; }

    /* === MINIMAP/RADAR - Sol alt === */
    .minimap-container {
        position: absolute !important;
        bottom: 115px !important;
        left: 5px !important;
        right: auto !important;
        top: auto !important;
        width: clamp(50px, 9vh, 65px) !important;
        height: clamp(50px, 9vh, 65px) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(0, 234, 255, 0.4) !important;
        border-radius: 4px !important;
    }

    /* === SAĞLIK BARI & SKİLLER === */
    .health-container {
        position: absolute !important;
        bottom: auto !important;
        top: 3px !important;
        left: 3px !important;
        width: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        padding: 2px 5px !important;
        border-radius: 6px !important;
    }
    .abilities-wrapper {
        display: flex !important;
        flex-direction: row !important;
        gap: 3px !important;
        margin-bottom: 0 !important;
    }
    .ability-slot {
        width: clamp(26px, 5.5vh, 35px) !important;
        height: clamp(26px, 5.5vh, 35px) !important;
        border-radius: 5px !important;
    }
    .ability-icon { font-size: clamp(0.55rem, 1.3vh, 0.8rem) !important; }
    .key-hint { display: none !important; }
    .cooldown-text { font-size: clamp(0.45rem, 1vh, 0.65rem) !important; }
    .health-bar-section { min-width: 55px !important; }
    .p1-health { font-size: clamp(0.38rem, 1vh, 0.5rem) !important; }
    .bar-bg { height: 4px !important; border-radius: 2px !important; }

    /* === XP BAR === */
    #xp-container {
        position: absolute !important;
        bottom: 85px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: clamp(180px, 35vw, 300px) !important;
        height: 12px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border-radius: 6px !important;
        padding: 2px 6px !important;
    }
    .xp-label { font-size: clamp(0.4rem, 1vh, 0.55rem) !important; }
    .xp-bar-bg { height: 3px !important; }

    /* === LEVEL UP YAZISI === */
    .level-up-text, #level-up-display {
        font-size: clamp(0.9rem, 2.5vh, 1.3rem) !important;
        padding: 4px 12px !important;
    }

    /* === MARKET BUTONLARI === */
    .shop-bar {
        position: absolute !important;
        bottom: 6px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 3px 6px !important;
        gap: 3px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 8px !important;
        max-width: 75% !important;
    }
    .shop-btn {
        width: clamp(28px, 5.5vh, 36px) !important;
        height: clamp(28px, 5.5vh, 36px) !important;
        font-size: clamp(0.6rem, 1.4vh, 0.85rem) !important;
        background: rgba(0, 20, 40, 0.6) !important;
        border-radius: 5px !important;
    }
    .shop-btn::before, .shop-btn::after { display: none !important; }
    .badge-time { font-size: clamp(0.28rem, 0.8vh, 0.4rem) !important; }
    .upgrade-info, .separator { display: none !important; }

    /* === MOBİL KONTROLLER (JOYSTICK) === */
    #mobile-controls {
        display: flex !important;
        position: absolute !important;
        bottom: 8px !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 12px !important;
        justify-content: space-between !important;
        z-index: 200 !important;
        pointer-events: none !important;
    }
    .joystick-area {
        width: clamp(80px, 16vh, 105px) !important;
        height: clamp(80px, 16vh, 105px) !important;
        opacity: 0.85 !important;
        pointer-events: auto !important;
    }
    .stick-base {
        background: rgba(0, 234, 255, 0.12) !important;
        border: 2px solid rgba(0, 234, 255, 0.35) !important;
    }
    .stick-handle {
        width: clamp(32px, 6.5vh, 45px) !important;
        height: clamp(32px, 6.5vh, 45px) !important;
        background: rgba(0, 234, 255, 0.65) !important;
        box-shadow: 0 0 8px rgba(0, 234, 255, 0.4) !important;
    }

    /* === ÜST KONTROLLER === */
    .top-left-controls { display: none !important; }
    .top-right-controls { top: 3px !important; right: 3px !important; gap: 3px !important; }
    .top-right-controls .icon-btn {
        width: clamp(24px, 5vh, 32px) !important;
        height: clamp(24px, 5vh, 32px) !important;
        font-size: clamp(0.5rem, 1.3vh, 0.7rem) !important;
    }
    #exitBtn {
        position: absolute !important;
        top: 3px !important;
        left: 3px !important;
        width: clamp(24px, 5vh, 32px) !important;
        height: clamp(24px, 5vh, 32px) !important;
        font-size: clamp(0.5rem, 1.3vh, 0.7rem) !important;
        z-index: 250 !important;
    }

    /* === BİLDİRİMLER === */
    #notification-area { top: 45px !important; width: 85% !important; }
    .kill-msg { padding: 2px 8px !important; }
    .kill-text { font-size: 0.8rem !important; }
    .kill-sub { font-size: 1.3rem !important; }
    .kill-reward { font-size: 0.7rem !important; }

    /* Joystick kontrolleri - öne çıkar ve büyüt */
    #mobile-controls {
        display: flex !important;
        bottom: 15px !important;
        padding: 0 15px !important;
        z-index: 200 !important;
    }
    .joystick-area {
        width: 90px !important;
        height: 90px !important;
        opacity: 0.7 !important;
    }
    .stick-base {
        background: rgba(0, 234, 255, 0.1) !important;
        border: 2px solid rgba(0, 234, 255, 0.3) !important;
    }
    .stick-handle {
        width: 35px !important;
        height: 35px !important;
        background: rgba(0, 234, 255, 0.6) !important;
        box-shadow: 0 0 8px rgba(0, 234, 255, 0.5) !important;
    }

    /* Exit butonu */
    .top-left-controls {
        top: 5px !important;
        left: 5px !important;
    }
    #exitBtn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.65rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 ÇOK KÜÇÜK EKRANLAR - Yükseklik 400px altı (küçük telefonlar)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 400px) and (orientation: landscape) {

    #overlay h1 { font-size: clamp(0.9rem, 3vh, 1.3rem) !important; }

    /* Gemi kartları - daha da kompakt */
    .ship-card {
        width: calc((100vw - 70px) / 5) !important;
        min-width: 0 !important;
        max-width: 95px !important;
        min-height: clamp(85px, 25vh, 130px) !important;
        max-height: 140px !important;
        padding: 3px !important;
    }

    .ship-icon {
        width: clamp(18px, 5vh, 28px) !important;
        height: clamp(18px, 5vh, 28px) !important;
    }
    .ship-icon i { font-size: clamp(8px, 2.5vh, 14px) !important; }

    .ship-name { font-size: clamp(0.4rem, 1.4vh, 0.55rem) !important; }
    .ship-desc {
        font-size: clamp(0.3rem, 1vh, 0.42rem) !important;
        height: clamp(15px, 4vh, 24px) !important;
        padding: 1px 2px !important;
    }
    .stat-label { font-size: clamp(0.25rem, 0.8vh, 0.38rem) !important; }
    .stat-bar-bg, .stat-bar { height: 2px !important; }
    .ship-price, .ship-owned { font-size: clamp(0.35rem, 1vh, 0.5rem) !important; }

    .elite-gate {
        width: calc((100vw - 70px) / 5) !important;
        max-width: 80px !important;
    }

    #usernameInput {
        width: clamp(110px, 22vw, 150px) !important;
        font-size: clamp(0.55rem, 1.5vh, 0.7rem) !important;
        padding: 4px 8px !important;
    }

    .game-modes-container {
        width: clamp(110px, 24vw, 150px) !important;
        height: clamp(28px, 7vh, 38px) !important;
    }
    .mode-btn { font-size: clamp(0.35rem, 1.2vh, 0.5rem) !important; }
    .mode-btn i { font-size: clamp(0.45rem, 1.5vh, 0.65rem) !important; }

    .lobby-money { font-size: clamp(0.5rem, 1.4vh, 0.65rem) !important; padding: 3px 8px !important; }
    #fixed-back-btn { font-size: clamp(0.4rem, 1.2vh, 0.55rem) !important; padding: 3px 8px !important; }

    /* Oyun içi */
    #leaderboard, #killboard { width: 90px !important; padding: 3px 5px !important; }
    #leaderboard h3, #killboard h3 { font-size: clamp(0.4rem, 1.2vh, 0.5rem) !important; }
    #leaderboard li, #killboard li { font-size: clamp(0.38rem, 1vh, 0.45rem) !important; }

    .minimap-container { width: 55px !important; height: 55px !important; }
    .shop-btn { width: 26px !important; height: 26px !important; font-size: 0.6rem !important; }
    .joystick-area { width: 70px !important; height: 70px !important; }
    .stick-handle { width: 28px !important; height: 28px !important; }
    .ability-slot { width: 32px !important; height: 32px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 TABLET BOYUTLARI - Landscape, yükseklik 500px üstü
   Daha büyük kartlar ve kontroller
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (min-height: 501px) and (orientation: landscape) {

    .hangar-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    .hangar-container {
        justify-content: center !important;
        gap: clamp(8px, 1.5vw, 15px) !important;
        padding-top: 50px !important;
        overflow: hidden !important;
    }

    .ship-card {
        width: calc((100vw - 100px) / 5) !important;
        min-width: 0 !important;
        max-width: 160px !important;
        height: auto !important;
        min-height: clamp(180px, 40vh, 260px) !important;
        padding: clamp(6px, 1.5vh, 10px) !important;
    }

    .ship-icon {
        width: clamp(35px, 7vh, 50px) !important;
        height: clamp(35px, 7vh, 50px) !important;
    }
    .ship-name { font-size: clamp(0.7rem, 2vh, 0.95rem) !important; }
    .ship-desc {
        font-size: clamp(0.5rem, 1.5vh, 0.7rem) !important;
        height: clamp(35px, 8vh, 55px) !important;
    }
    .stat-label { font-size: clamp(0.5rem, 1.3vh, 0.7rem) !important; }
    .stat-bar-bg, .stat-bar { height: 4px !important; }
    .ship-price, .ship-owned { font-size: clamp(0.6rem, 1.8vh, 0.85rem) !important; }

    .elite-gate {
        width: calc((100vw - 100px) / 5) !important;
        max-width: 130px !important;
    }

    #scroll-right-btn, #scroll-left-btn { display: none !important; }

    /* Oyun içi - Joystick kontrolleri */
    #mobile-controls {
        display: flex !important;
        bottom: 20px !important;
        padding: 0 30px !important;
        z-index: 200 !important;
    }

    .joystick-area {
        width: clamp(100px, 15vh, 130px) !important;
        height: clamp(100px, 15vh, 130px) !important;
        opacity: 0.8 !important;
    }

    .stick-base {
        background: rgba(0, 234, 255, 0.15) !important;
        border: 2px solid rgba(0, 234, 255, 0.4) !important;
    }

    .stick-handle {
        width: clamp(40px, 6vh, 55px) !important;
        height: clamp(40px, 6vh, 55px) !important;
        background: rgba(0, 234, 255, 0.7) !important;
    }

    .top-right-controls .icon-btn {
        width: clamp(32px, 6vh, 42px) !important;
        height: clamp(32px, 6vh, 42px) !important;
    }

    .shop-bar { bottom: 15px !important; padding: 6px 12px !important; gap: 6px !important; }
    .shop-btn { width: clamp(36px, 7vh, 48px) !important; height: clamp(36px, 7vh, 48px) !important; }
    .minimap-container { width: clamp(80px, 15vh, 110px) !important; height: clamp(80px, 15vh, 110px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📜 LEGAL FOOTER & MODALS (Privacy, Terms, About)
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Footer Links --- */
.legal-footer {
    position: fixed;
    bottom: 10px;
    right: 15px;
    z-index: 50;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-main);
    display: flex;
    gap: 8px;
    align-items: center;
}

.footer-link {
    cursor: pointer;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

.footer-link:hover {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 5px rgba(0, 234, 255, 0.5);
}

.footer-divider {
    color: rgba(255, 255, 255, 0.2);
}

/* --- Legal Modal Wrapper --- */
.legal-modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Legal Modal Content --- */
.legal-modal-content {
    background: linear-gradient(145deg, rgba(5, 15, 30, 0.98), rgba(10, 25, 50, 0.95));
    border: 1px solid rgba(0, 234, 255, 0.3);
    border-radius: 15px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 234, 255, 0.2), inset 0 0 50px rgba(0, 234, 255, 0.05);
    position: relative;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.legal-modal-content h2 {
    background: linear-gradient(90deg, rgba(0, 234, 255, 0.15), transparent);
    padding: 20px 25px;
    margin: 0;
    font-size: 1.3rem;
    color: var(--color-primary);
    border-bottom: 1px solid rgba(0, 234, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
}

.legal-modal-content h2 i {
    font-size: 1.1rem;
}

/* --- Close Button --- */
.close-legal-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 0, 85, 0.2);
    border: 1px solid rgba(255, 0, 85, 0.4);
    color: #ff0055;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--transition-fast);
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-legal-modal:hover {
    background: rgba(255, 0, 85, 0.4);
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.5);
    transform: scale(1.1);
}

/* --- Legal Text Content --- */
.legal-text {
    padding: 25px;
    overflow-y: auto;
    max-height: calc(85vh - 80px);
    font-size: 0.85rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.legal-text::-webkit-scrollbar {
    width: 6px;
}

.legal-text::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.legal-text::-webkit-scrollbar-thumb {
    background: rgba(0, 234, 255, 0.3);
    border-radius: 3px;
}

.legal-text::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 234, 255, 0.5);
}

.legal-text .last-updated {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-style: italic;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-text h3 {
    color: var(--color-primary);
    font-size: 1rem;
    margin: 25px 0 12px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 234, 255, 0.2);
}

.legal-text h3:first-of-type {
    margin-top: 0;
}

.legal-text p {
    margin: 10px 0;
}

.legal-text ul {
    margin: 10px 0;
    padding-left: 25px;
}

.legal-text li {
    margin: 8px 0;
    position: relative;
}

.legal-text li::marker {
    color: var(--color-primary);
}

.legal-text strong {
    color: var(--color-secondary);
}

/* --- About Modal Special Styles --- */
.about-content {
    max-width: 800px;
}

.about-text {
    padding: 25px;
    overflow-y: auto;
    max-height: calc(85vh - 80px);
}

.about-text::-webkit-scrollbar {
    width: 6px;
}

.about-text::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.about-text::-webkit-scrollbar-thumb {
    background: rgba(0, 234, 255, 0.3);
    border-radius: 3px;
}

/* --- About Hero Section --- */
.about-hero {
    text-align: center;
    padding: 20px 0 30px 0;
    border-bottom: 1px solid rgba(0, 234, 255, 0.2);
    margin-bottom: 25px;
}

.about-hero h3 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-top: 15px;
    font-weight: 400;
}

/* --- About Ships Display --- */
.about-ships-display {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

.about-ship {
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, rgba(0, 234, 255, 0.1), rgba(0, 234, 255, 0.05));
    border: 2px solid rgba(0, 234, 255, 0.4);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--color-primary);
    animation: shipFloat 3s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(0, 234, 255, 0.3);
}

.about-ship.elite {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
    border-color: rgba(255, 215, 0, 0.5);
    color: var(--color-secondary);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    animation-delay: 0.5s;
}

.about-ship.small {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
}

@keyframes shipFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* --- About Sections --- */
.about-section {
    margin-bottom: 25px;
}

.about-section h4 {
    color: var(--color-primary);
    font-size: 1rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-section h4 i {
    color: var(--color-secondary);
}

.about-section p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 10px 0;
}

/* --- About Features --- */
.about-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

.about-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(0, 234, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--color-primary);
}

.about-feature i {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-top: 2px;
}

.about-feature span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* --- About Ships Grid --- */
.about-ships-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 20px 0;
}

.about-ship-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: rgba(0, 234, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(0, 234, 255, 0.2);
    transition: all var(--transition-fast);
}

.about-ship-item:hover {
    background: rgba(0, 234, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 234, 255, 0.2);
}

.about-ship-item.elite-ship {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.3);
}

.about-ship-item.elite-ship:hover {
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
}

.ship-mini-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
}

.ship-mini-icon.fighter {
    background: linear-gradient(145deg, rgba(0, 234, 255, 0.2), transparent);
    color: var(--color-primary);
}

.ship-mini-icon.sniper {
    background: linear-gradient(145deg, rgba(255, 0, 85, 0.2), transparent);
    color: var(--color-danger);
}

.ship-mini-icon.tank {
    background: linear-gradient(145deg, rgba(0, 136, 255, 0.2), transparent);
    color: var(--glow-blue);
}

.ship-mini-icon.speedy {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), transparent);
    color: var(--color-secondary);
}

.ship-mini-icon.healer {
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.2), transparent);
    color: var(--color-success);
}

.ship-mini-icon.elite-phantom {
    background: linear-gradient(145deg, rgba(170, 0, 255, 0.2), transparent);
    color: var(--glow-purple);
}

.ship-mini-icon.elite-titan {
    background: linear-gradient(145deg, rgba(255, 170, 0, 0.2), transparent);
    color: var(--color-warning);
}

.ship-mini-icon.elite-omega {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), transparent);
    color: var(--color-secondary);
}

.about-ship-item span {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

.about-ship-item.elite-ship span {
    color: var(--color-secondary);
}

.about-note {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* --- About Footer --- */
.about-footer {
    text-align: center;
    padding-top: 25px;
    margin-top: 25px;
    border-top: 1px solid rgba(0, 234, 255, 0.2);
}

.about-version {
    display: inline-block;
    background: linear-gradient(90deg, rgba(0, 234, 255, 0.2), rgba(255, 215, 0, 0.2));
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.about-footer p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.about-contact {
    margin: 15px 0;
}

.about-contact a {
    color: #00eaff;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 8px 20px;
    border: 1px solid rgba(0, 234, 255, 0.3);
    border-radius: 25px;
    background: rgba(0, 234, 255, 0.1);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.about-contact a:hover {
    background: rgba(0, 234, 255, 0.2);
    border-color: #00eaff;
    box-shadow: 0 0 15px rgba(0, 234, 255, 0.3);
    transform: translateY(-2px);
}

.about-contact a i {
    font-size: 1rem;
}

/* --- Hide footer during gameplay --- */
body.in-game .legal-footer {
    display: none;
}

/* --- Mobile Responsive for Legal Footer & Modals --- */
@media (pointer: coarse) and (orientation: portrait) {
    .legal-footer {
        bottom: auto;
        top: 10px;
        right: 10px;
        font-size: 0.5rem;
        gap: 5px;
    }

    .legal-modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .legal-modal-content h2 {
        font-size: 1rem;
        padding: 15px 20px;
    }

    .legal-text, .about-text {
        padding: 15px;
        font-size: 0.8rem;
    }

    .about-ships-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .about-ship-item {
        padding: 8px 4px;
    }

    .ship-mini-icon {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .about-ship-item span {
        font-size: 0.55rem;
    }

    .about-ship {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}

@media (pointer: coarse) and (orientation: landscape) {
    .legal-footer {
        bottom: 8px;
        right: 10px;
        font-size: 0.55rem;
        gap: 6px;
    }

    .legal-modal-content {
        max-height: 95vh;
    }

    .about-ships-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 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: 3px !important;
        left: clamp(36px, 4.5vw, 42px) !important; /* Exit butonunun 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: 3px !important;
        left: 5px !important;
        width: clamp(24px, 5vh, 30px) !important; /* Responsive */
        height: clamp(24px, 5vh, 30px) !important;
        font-size: clamp(0.55rem, 1.2vh, 0.7rem) !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 - %30 büyütülmüş ve daha okunur --- */
    body.in-game #killboard {
        position: absolute !important;
        top: 32px !important;
        right: 5px !important;
        bottom: auto !important;
        width: 120px !important; /* %30 büyük */
        max-width: 25vw !important;
        padding: 6px 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: 95px !important;
        overflow: hidden !important;
        z-index: 80 !important;
    }

    body.in-game #killboard h3 {
        font-size: 0.52rem !important; /* %30 büyük */
        margin-bottom: 3px !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: 70px !important;
        overflow: hidden !important;
    }

    body.in-game #killboard li {
        font-size: 0.46rem !important; /* %30 büyük */
        line-height: 1.5 !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.in-game #leaderboard {
        position: absolute !important;
        top: 132px !important; /* Killboard daha büyük olduğu için daha aşağı */
        right: 5px !important;
        bottom: auto !important;
        width: 120px !important; /* %30 büyük */
        max-width: 25vw !important;
        padding: 6px 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: 95px !important;
        overflow: hidden !important;
        z-index: 80 !important;
    }

    body.in-game #leaderboard h3 {
        font-size: 0.52rem !important; /* %30 büyük */
        margin-bottom: 3px !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: 70px !important;
        overflow: hidden !important;
    }

    body.in-game #leaderboard li {
        font-size: 0.46rem !important; /* %30 büyük */
        line-height: 1.5 !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: 8px !important;
        width: 24vh !important; /* %20 büyük (20vh * 1.20) */
        height: 24vh !important;
        min-width: 108px !important; /* %20 büyük (90px * 1.20) */
        min-height: 108px !important;
        max-width: 132px !important; /* %20 büyük (110px * 1.20) */
        max-height: 132px !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: 40% !important;
        height: 40% !important;
        background: rgba(0, 234, 255, 0.7) !important;
        box-shadow: 0 0 15px rgba(0, 234, 255, 0.5) !important;
    }

    /* --- HP BAR & SKİLLER: SAĞ ÜSTE TAŞINDI, nişan joystick'inin üzerinde --- */
    body.in-game .health-container {
        position: absolute !important;
        bottom: calc(55px + 24vh + 5px) !important; /* Sağ joystick'in üstü (büyütülmüş %20) */
        right: 8px !important; /* Sağ tarafa */
        left: auto !important;
        top: auto !important;
        width: auto !important;
        min-width: 100px !important;
        max-width: 130px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important; /* Sağa hizala */
        gap: 4px !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;
    }

    /* --- YETENEKLER: DİKEY SIRALANMIŞ --- */
    body.in-game .abilities-wrapper {
        display: flex !important;
        flex-direction: column !important; /* Dikey */
        gap: 5px !important;
        margin-bottom: 0 !important;
        order: 1 !important;
    }

    body.in-game .ability-slot {
        width: clamp(34px, 7.5vh, 42px) !important; /* Responsive */
        height: clamp(34px, 7.5vh, 42px) !important;
        border-radius: 6px !important;
        border: 2px solid rgba(0, 234, 255, 0.5) !important;
        background: rgba(0, 20, 40, 0.8) !important;
        box-shadow: 0 0 8px rgba(0, 234, 255, 0.3) !important;
    }

    body.in-game .ability-icon {
        font-size: clamp(0.7rem, 1.6vh, 0.85rem) !important; /* Responsive */
    }

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

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

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

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

    body.in-game .bar-bg {
        flex-grow: 1 !important;
        height: 8px !important;
        min-width: 60px !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;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 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: 70px !important; /* Market'ten daha yukarıda (60px -> 70px) */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 35vw !important;
        min-width: 180px !important;
        max-width: 280px !important;
        height: 14px !important;
        padding: 2px 8px !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: 8px !important;
        width: 24vh !important; /* %20 büyük (20vh * 1.20) */
        height: 24vh !important;
        min-width: 108px !important; /* %20 büyük (90px * 1.20) */
        min-height: 108px !important;
        max-width: 132px !important; /* %20 büyük (110px * 1.20) */
        max-height: 132px !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: 40% !important;
        height: 40% !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;
    }

    /* --- TDM/MOBA HUD (TDM modu için) --- */
    body.in-game #moba-hud {
        transform: translateX(-50%) scale(0.65) !important;
        transform-origin: top center !important;
        top: 0 !important;
    }

    body.in-game .team-score {
        width: 60px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }

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

    body.in-game .tower-label {
        font-size: 7px !important;
    }

    body.in-game .moba-timer-box {
        padding: 3px 12px !important;
        font-size: 0.85rem !important;
    }

    body.in-game .moba-kda-box {
        padding: 2px 10px !important;
        font-size: 0.5rem !important;
    }

    /* --- RESPAWN EKRANI --- */
    body.in-game #moba-respawn {
        font-size: 1.1rem !important;
        padding: 15px 30px !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 küçük */
    body.in-game .minimap-container {
        width: 10vh !important;
        height: 10vh !important;
        min-width: 45px !important;
        min-height: 45px !important;
        max-width: 55px !important;
        max-height: 55px !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: 6px !important;
    }

    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: 6px !important;
    }

    /* HP Container - daha kompakt */
    body.in-game .health-container {
        bottom: calc(45px + 17vh + 3px) !important;
        padding: 3px 6px !important;
        min-width: 85px !important;
        max-width: 110px !important;
    }

    body.in-game .ability-slot {
        width: 26px !important;
        height: 26px !important;
    }

    body.in-game .ability-icon {
        font-size: 0.6rem !important;
    }

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

    body.in-game .bar-bg {
        height: 6px !important;
        min-width: 50px !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;
    }

    /* TDM HUD */
    body.in-game #moba-hud {
        transform: translateX(-50%) scale(0.55) !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: 5px !important;
    }

    body.in-game #stick-right {
        width: 85px !important;
        height: 85px !important;
        bottom: 50px !important; /* Margin yerine bottom */
        right: 5px !important;
    }

    body.in-game .health-container {
        bottom: calc(50px + 85px + 5px) !important;
        min-width: 90px !important;
    }

    body.in-game .ability-slot {
        width: 28px !important;
        height: 28px !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;
    }

    body.in-game #moba-hud {
        transform: translateX(-50%) scale(0.6) !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;
    }

    /* #moba-hud TDM'de kullanılmıyor, gizle */
    body.in-game.tdm-mode #moba-hud {
        display: none !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
       ═══════════════════════════════════════════════════════════════════════ */
    body.in-game.tdm-mode #moba-respawn {
        font-size: 0.9rem !important;
        padding: 10px 20px !important;
        border-radius: 8px !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       🎯 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(200px, 45vw, 400px) !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;
    }

    body.in-game.tdm-mode #moba-respawn {
        font-size: 0.75rem !important;
        padding: 8px 15px !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;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 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 #moba-hud {
        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;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
    💻 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;
    }

    /* #moba-hud TDM'de kullanılmıyor, gizle */
    body.in-game.tdm-mode #moba-hud {
        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: RESPAWN OVERLAY
       ═════════════════════════════════════════════════════════════════════ */
    body.in-game.tdm-mode #moba-respawn {
        font-size: 1.5rem !important;
        padding: 20px 40px !important;
        border-radius: 10px !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 */
    #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;
    }
}