/* =========================================================
   --- OYUN EKRANI VE SAHA (GLOBAL TEMEL) ---
   ========================================================= */
#oyun-ekrani {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#game-canvas { 
    /* Genişlik ve yükseklik JS (mapWidth/mapHeight) tarafından yönetildiği için %100 verilir */
    width: 100%; 
    height: 100%;
    
    /* Temel renk çakışmaları kaldırıldı, zemin JS çim katmanına bırakıldı */
    background-color: transparent; 
    
    /* 🌟 HAXBALL KLASİĞİ: Sahanın üzerindeki o şık çapraz gölge/ışık şeritleri korundu! */
    background-image: 
        repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.07) 35px, rgba(255, 255, 255, 0.07) 70px);
    
    /* Fiziksel saha ölçüleriyle milimetrik uyum */
    background-size: calc(100% - 92px) calc(100% - 60px); 
    background-position: 46px 30px; 
    background-repeat: no-repeat;
    
    border: none;
}

/* =========================================================
   📱 MOBİL DOKUNMATİK KONTROLLER (GLOBAL TEMEL)
   ========================================================= */
#mobil-kontroller {
    display: none; /* Bilgisayarda tamamen gizli */
    position: fixed; /* Sahanın neresinde olursan ol ekrana çakılı kalır */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    pointer-events: none; /* Dokunmaların sadece butonlara işlemesi için */
}

#joystick-alani {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;  /* Sol ekranın yarısını kaplar, nereye dokunsan algılar */
    height: 100vh;
    pointer-events: auto; 
    z-index: 205;
}

#mobil-sut-btn {
    position: absolute;
    bottom: 100px; /* 🚀 50px'ten 100px'e çıkarıldı: Tam baş parmağın altına oturtuldu */
    right: 45px;   /* 🚀 Kenardan hafif içeri alındı */
    width: 75px;   /* 🚀 90px'ten 75px'e küçültüldü: Daha zarif ve ekranda az yer kaplar */
    height: 75px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.35); /* Transparanlığı hafif artırıldı (Top arkasından görünsün) */
    border: 3px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    pointer-events: auto; 
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s;
}

#mobil-sut-btn:active {
    background: rgba(231, 76, 60, 0.9);
    transform: scale(0.85); /* 🚀 Basınca daha belirgin bir içe çökme efekti */
    border-color: #fff;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.8);
}

/* Sadece dokunmatik algılayan cihazlarda (telefon/tablet) göster */
@media (hover: none) and (pointer: coarse) {
    #mobil-kontroller {
        display: block;
    }
}

/* ==========================================
   YENİ: OYUNCU LİSTESİ ÖZEL ARAYÜZ TASARIMLARI
   ========================================== */
/* 1. CS 1.6 Stili: Oyuncunun Kendi Nickini Gri/Belirgin Görmesi */
.benim-nickim {
    background-color: rgba(255, 255, 255, 0.1) !important; /* CS tarzı tatlı şeffaf gri */
    border-radius: 4px;
    padding-left: 2px;
}

/* 2. Admin Seçimi: Tıklanan Oyuncunun Sarı Çerçeveye Alınması (PC + Mobil Ortak) */
.secili-oyuncu {
    background-color: rgba(241, 196, 15, 0.25) !important;
    border: 1px solid #f1c40f !important; /* Senin görseldeki gibi net bir sarı sınır */
    border-radius: 4px !important;
    box-shadow: inset 0 0 5px rgba(241, 196, 15, 0.5) !important;
    transition: all 0.2s ease !important;
}


/* =========================================================
   📱 GORBALL %100 MOBİL UYUM: NİHAİ TWA / NATIVE APP MİMARİSİ 2.0
   (PC Tarafı Tamamen Korunmuş, İlk Girişten Başlayarak Yeniden Tasarlandı)
   ========================================================= */

@media (max-width: 950px), (max-height: 500px) and (orientation: landscape) {
    
    /* ==========================================
       1. İLK GİRİŞ VE NİCK EKRANI (TAM MOBİL UYUM)
       ========================================== */
    .intro-kutu, #giris-ekrani, #nick-ekrani { 
        width: 90vw !important; /* Telefonda kenarlardan tatlı boşluk bırakır */
        min-width: unset !important;
        margin: 10vh auto !important; 
        padding: 30px 15px !important; 
        box-sizing: border-box !important;
    }
    h1.logo-text { font-size: 35px !important; }
    .slogan { font-size: 13px !important; }
    .dev-buton { padding: 15px 20px !important; font-size: 16px !important; width: 100% !important; }

    /* ==========================================
       2. LOBİ VE ODA İÇİ: NATIVE APP TAM EKRAN KİLİDİ
       ========================================== */
    #oda-ici-lobi, #oda-listesi-ekrani {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        /* 🌟 HAYAT KURTARAN KOD: iOS/Android adres çubuklarını hesaba katar */
        height: 100vh !important;
        height: 100dvh !important; 
        background: #141d24 !important; 
        z-index: 10000 !important; 
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Akıcı iOS kaydırması */
        box-sizing: border-box !important;
        padding: 15px !important;
        padding-bottom: 120px !important; /* Maç Başlat butonunun altında devasa güvenlik boşluğu */
    }

    /* Kati Genişlik Kilitlerini Kır */
    .lobi-layout, #app {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ==========================================
       3. ODA LİSTESİ EKRANI (LOBİ MENÜSÜ)
       ========================================== */
    .lobi-layout {
        flex-direction: column !important; 
        height: auto !important; 
    }
    .oda-listesi-alani {
        border-right: none !important;
        border-bottom: 2px solid #111 !important;
        height: 30vh !important; /* Liste telefonda makul yer kaplar */
        min-height: 180px !important;
    }
    .buton-alani {
        width: 100% !important;
        flex-direction: row !important; 
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding: 10px 0 !important;
    }
    .buton-alani .hax-button {
        width: 48% !important; 
        margin-bottom: 8px !important;
        padding: 10px 0 !important;
        font-size: 13px !important;
    }
    .buton-alani a { width: 100% !important; margin-left: 0 !important; margin-top: 5px !important; }
    .aktif-oyuncu-alani { width: 100% !important; margin-top: 5px !important; padding: 5px !important; }
    .lobi-baslik-alani { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .lobi-bilgi-butonlari { flex-wrap: wrap !important; }

    /* ==========================================
       4. ODA İÇİ LOBİ KESİN ORTALAMA VE KÜÇÜLTME (MOBİL NİHAİ)
       ========================================== */
    /* Ana lobi kutusunu ekranın ortasına çivileyip boyutunu sınırlarız */
    #oda-ici-lobi .kutu {
        width: 95vw !important; /* Telefon ekranından %5 boşluk bırakır (Nefes alır) */
        max-width: 420px !important; /* Asla aşırı genişlemez, PC gibi durmaz */
        margin: 0 auto !important; /* MUCİZE KOD: Tamamen ekranın merkezine ortalar */
        padding: 15px 10px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    
    /* 🌟 ODA BAŞLIĞI VE BUTONLAR (Ekran Görüntüsündeki Taşan Yer) */
    /* İsim ve butonların yan yana savaşmasını durdurup ALT ALTA diziyoruz */
    #oda-ici-lobi .kutu > div:first-child {
        display: flex !important;
        flex-direction: column !important; /* İçeriği alt alta iter */
        align-items: center !important; /* Tam merkeze hizalar */
        gap: 12px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    /* Oda İsmi (Örn: asdasd) */
    #oda-ici-lobi .kutu > div:first-child h2 {
        font-size: 20px !important; /* Yazı büyüklüğünü telefona uyarlar */
        text-align: center !important;
        margin: 0 !important;
        word-wrap: break-word !important; 
    }

    /* Sağ üstteki buton grubu (Oyuna Dön, Ses, Link) */
    #oda-ici-lobi .kutu > div:first-child > div {
        display: flex !important;
        flex-wrap: wrap !important; /* Ekrana sığmazlarsa esneyip alta atarlar */
        justify-content: center !important; /* Butonları da ortalar */
        gap: 8px !important;
        width: 100% !important;
    }

    /* Butonların Kendisi */
    #oda-ici-lobi .kutu > div:first-child > div button,
    #oda-ici-lobi .kutu > div:first-child > div a {
        font-size: 13px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        flex: 1 1 auto !important; /* Kutuya sığacak şekilde esnekleşirler */
        text-align: center !important;
    }

    /* 🌟 TAKIM LİSTESİ ALANI: Yükseklik sınırlandırıldı */
    #oda-ici-lobi .kutu > div:nth-child(2) {
        height: 35vh !important; 
        min-height: 180px !important; 
        max-height: 250px !important;
        gap: 5px !important; 
        width: 100% !important;
    }

    /* Oyuncular dolunca sayfayı esnetmek yerine SADECE listeyi kaydırılabilir yapar! */
    #oda-ici-lobi .kutu > div:nth-child(2) > div {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #red-team-list, #spec-team-list, #blue-team-list {
        overflow-y: auto !important;
        flex: 1 !important;
        padding: 5px !important;
        font-size: 11px !important; /* İsimlerin satır atlamaması için milimetrik küçültüldü */
    }

    /* Sol dar sütun butonları (Auto/Lock) */
    #oda-ici-lobi .kutu > div:nth-child(2) > div:first-child { width: 45px !important; }
    #oda-ici-lobi .kutu > div:nth-child(2) > div:first-child button { padding: 8px 4px !important; font-size: 10px !important; }

    /* Süre ve Skor Ayar Tablosu (Tam Ortalı) */
    #oda-ici-lobi table { width: 100% !important; margin-bottom: 10px !important; }
    #oda-ici-lobi table td { font-size: 12px !important; padding: 4px !important; text-align: center !important; }
    #oda-ici-lobi table input, #oda-ici-lobi table select { 
        width: 100% !important; max-width: 60px !important; padding: 4px !important; margin: 0 auto !important;
    }

    /* ==========================================
       5. MAÇ BAŞLAT BUTONU (Asla Gözden Kaçmaz)
       ========================================== */
    #oyun-kontrolleri {
        margin-top: 10px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    #baslat-btn, #pause-btn, #stop-btn {
        font-size: 18px !important; /* Parmağa tam oturması için büyütüldü */
        padding: 15px 20px !important;
        width: 100% !important; 
        border-radius: 8px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    }

    /* ==========================================
       6. OYUN İÇİ GÜVENLİK KALKANLARI VE REKLAM 
       ========================================== */
    #sag-reklam { display: none !important; }
    
    body.oyun-aktif #ust-panel, 
    body.oyun-aktif .oyun-ust-bilgi,
    body.oyun-aktif #sag-reklam {
        display: none !important; 
    }

    /* 🌟 KRİTİK: Maç aktifken mobil menu butonunun ekranda zorla görünmesini sağlayan eski ayarımız (Asla kaybetmemeliyiz!) */
    body.oyun-aktif #mobil-menu-btn { 
        display: block !important; 
    }

    /* 🌟 NİHAİ VE TEK DOĞRU KURAL: Maç aktifken, eğer chat açık DEĞİLSE gizle; eğer kullanıcı açtıysa (.mobil-acik varsa) dokunma, açık kalsın! */
    body.oyun-aktif:not(.lobi-menu-aktif) #chat-alani:not(.mobil-acik) {
        display: none !important; 
    }

    /* 7. JOYSTICK AŞAĞI ÇEKME VE YENİLEME ENGELLEYİCİ */
    body.oyun-aktif, html.oyun-aktif {
        overflow: hidden !important; 
        width: 100vw !important;
        height: 100vh !important;
        position: fixed !important; 
        touch-action: none !important; 
        overscroll-behavior: none !important;
    }
    #mobil-kontroller { touch-action: none !important; }

    /* ==========================================
       8. SKOR TABELASI (HUD) VE ODA MENÜSÜ MOBİL DÜZENİ 
       ========================================== */
    #hud-wrapper {
        position: fixed !important;
        top: 15px !important; 
        left: 50% !important;
        transform: translateX(-50%) !important; 
        width: max-content !important; 
        z-index: 9998 !important; 
        padding: 0 !important;
    }
    #hud-wrapper > button.hax-button { display: none !important; }
    #hax-scoreboard {
        width: auto !important;
        min-width: 200px !important; 
        height: 35px !important;
        font-size: 16px !important;
        padding: 0 15px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.8) !important;
    }

    /* 9. Lobi Overlay Taşkınlık Düzeltmesi */
    #oda-ici-lobi.lobi-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important; 
        width: 100vw !important; 
        height: 100vh !important; 
        height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important; 
        box-sizing: border-box !important;
    }

/* ==========================================
       10. OYUN EKRANI VE SAHA ORTALAMA ÇÖZÜMÜ (NİHAİ, HATASIZ FİX)
       ========================================== */
    
    /* 🌟 KÖK DÜZELTME: Senin game.js'deki 'sahaBoyutunuAyarla' motorun zaten kusursuz ortalama (scale) yapıyor. 
       Biz CSS ile sadece dış kabuğun arkasına güvenli zemin rengini atıyoruz. */
    body.oyun-aktif #ana-oyun-alani {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #718C5A !important; /* JS'deki yeşil tonuyla birebir senkronize edildi */
        z-index: 40 !important;
    }

    body.oyun-aktif #oyun-ekrani {
        position: relative !important; 
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 50 !important;
        background-color: transparent !important; 
        overflow: hidden !important;
    }
    
    /* 🚨 İŞTE BÜTÜN HATANIN KAYNAĞINI ÇÖZEN SATIRLAR 🚨
       Önceki koddaki 'max-width' ve 'auto' kuralları, senin JS'in yaptığı mükemmel ölçeklemeyi bozuyordu.
       Şimdi bunu %100'e sabitleyerek boyut kontrolünü tamamen senin game.js motoruna geri veriyoruz.
       Böylece saha çizgileri, çimler ve beyaz çizgiler milimetrik olarak üst üste oturacak! */
    body.oyun-aktif #game-canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        position: relative !important;
        margin: 0 !important;
        object-fit: fill !important;
    }
    #saha-reklam-alani {
        display: none !important;
    }
/* ==========================================
       12. MOBİLDE SKOR TABELASINI ŞEFFAFLEŞTİRME (TOPUN GÖRÜNMESİ İÇİN)
       ========================================== */
    #hax-scoreboard {
        opacity: 0.35 !important; /* Arkasındaki topun ve oyuncuların net görünmesi için hafif şeffaflık */
        transition: opacity 0.2s ease !important;
    }
    
    /* İsteğe bağlı: Parmakla üstüne dokunulduğunda veya maç anında netleşmesi istenirse bu kalsın */
    #hax-scoreboard:active {
        opacity: 0.9 !important;
    }


/* ==========================================
       13. MOBİLDE MENÜ BUTONUNU ŞEFFAFLEŞTİRME (TOPUN GÖRÜNMESİ İÇİN)
       ========================================== */
    #mobil-menu-btn {
        opacity: 0.35 !important; /* Arkasındaki topun ve oyuncuların net görünmesi için hafif şeffaflık */
        transition: opacity 0.2s ease !important;
    }
    
    /* Parmakla üstüne dokunulduğunda anında netleşmesi için */
    #mobil-menu-btn:active {
        opacity: 0.9 !important;
    }

 /* ==========================================
       14. MOBİL ODA İÇİ LOBİ "OYUNA DÖN" BUTONU (SADECE MAÇ BAŞLADIĞINDA GÖRÜNÜR)
       ========================================== */
    #lobi-mobil-menu-btn {
        display: none !important; /* Varsayılan olarak maç yoksa lobi başlığında gizlidir */
        font-size: 13px !important;
        padding: 6px 12px !important;
        background-color: #f1c40f !important; /* Canlı Sarı */
        color: #000000 !important; /* Siyah Yazı */
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
        font-weight: bold !important;
    }

    /* 🌟 Maç aktif olduğunda (oyun oynanırken lobiye girilirse) butonu görünür yap */
    body.mac-aktif #lobi-mobil-menu-btn {
        display: inline-block !important; 
    }

    /* ==========================================
       15. MOBİL CHAT OVERLAY (SADECE MOBİL İÇİN)
       ========================================== */
    #mobil-chat-ac-btn {
        display: block !important;
        font-size: 11px !important;
        padding: 8px 4px !important;
    }
    
    #mobil-chat-header {
        display: flex !important;
    }

#chat-alani.mobil-acik {
        display: flex !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 92vw !important;
        max-width: 400px !important;
        height: auto !important;
        z-index: 10005 !important;
        background-color: #141d24 !important;
        box-shadow: 0 5px 25px rgba(0,0,0,0.9) !important; /* Ekranı kilitleyen dev gölge yerine şık ve güvenli bir gölge verildi */
        border: 2px solid #f9d342 !important;
        border-radius: 8px !important;
        pointer-events: auto !important; /* Dokunmaların doğrudan chat içinde kalmasını sağlar */
    }
    
    /* ==========================================
       16. MOBİL SAĞ TIK SEÇİLİ OYUNCU EFEKTİ
       ========================================== */
    .mobil-secili-oyuncu {
        background-color: rgba(241, 196, 15, 0.25) !important; /* Haxball sarısının tatlı saydam hali */
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
        box-shadow: inset 0 0 5px rgba(241, 196, 15, 0.5) !important;
    }

    /* ==========================================
       17. NATIVE APP KORUMASI: GEREKSİZ METİN SEÇİMİNİ ENGELLE
       ========================================== */
    /* Mobilde oyun oynarken ekranın herhangi bir yerindeki yazıların mavi blok (seçim) içine alınmasını engeller */
    body {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important; /* Uzun basınca çıkan menüyü engeller */
    }

    /* Ancak nick yazma ve chat kutularında kopyala/yapıştır ve metin yazma özgürlüğü tamamen açıktır! */
    input, textarea {
        -webkit-user-select: text !important;
        user-select: text !important;
    }

} /* 👈 KRİTİK: @media bloğunun kapanış parantezi */