/* Sıralama Konteynırı */
.rank-container {
    border: 1px solid #cc0000 !important;
    background: rgba(15, 15, 15, 0.95) !important;
}

.rank-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
}

.rank-table {
    width: 100%;
    border-collapse: collapse;
}

.rank-table th {
    background: #cc0000;
    color: #fff;
    padding: 12px;
    font-size: 0.85em;
    text-transform: uppercase;
}

.rank-table td {
    padding: 15px 10px;
    text-align: center;
    border-bottom: 1px solid #222;
    color: #ddd;
}

.rank-table tbody tr:hover {
    background: rgba(255, 204, 0, 0.05);
}

.rank-number { font-weight: bold; color: #888; width: 50px; }
.rank-name { font-weight: bold; color: #ffffff; text-shadow: 0 0 5px rgba(255, 255, 255, 0.2); }
.rank-points { color: #ffcc00; font-weight: bold; }
.rank-leader { color: #5da9ff; }

.rank-empire {
    width: 45px; /* 35px'den 45px'e çıkardık, artık tam belirgin olacaktır */
    height: auto; 
    
    /* Bayrakların keskin durması için (Pixel Art koruması) */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    
    /* Bayrakların arkasına hafif bir gölge ekleyerek öne çıkarıyoruz */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    
    vertical-align: middle;
    /* Satırda diğer öğelerle (rütbe, isim) hizalanması için */
    margin: 2px 0;
}

.no-guild {
    color: #555 !important;
    font-style: italic;
    font-size: 0.9em;
}

/* === ÖNEMLİ: GİZLİ SÜTUNLAR === */
/* İleride aktif etmek istersen aşağıdaki 'display: none;' satırını silmen yeterli */
.extra-stats {
    display: none; 
    font-size: 0.85em;
    width: 40px;
}

.win { color: #2ecc71; }  /* Yeşil */
.loss { color: #e74c3c; } /* Kırmızı */
.draw { color: #95a5a6; } /* Gri */

/* === LONCA SIRALAMASI MOBİL DOKUNUŞLAR === */

@media (max-width: 768px) {
    /* 1. Konteynır boşluklarını daralt */
    .rank-container {
        padding: 10px 5px !important;
    }

    /* 2. Başlık boyutunu küçült */
    .rank-header h1 {
        font-size: 1.1rem !important;
        margin-bottom: 5px;
    }

    .rank-header p {
        font-size: 0.8rem;
        padding: 0 10px;
    }

    /* 3. Tablo hücrelerini daralt */
    .rank-table td, .rank-table th {
        padding: 10px 5px !important;
        font-size: 0.75rem !important;
    }

    /* 4. Bayrak ikonunu mobilde küçült */
    .rank-empire {
        width: 32px !important;
    }

    /* 5. Lonca ismi mobilde çok uzunsa alt satıra geçmesin, tabloyu bozmasın */
    .rank-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
    }
}

/* Ekstra Küçük Ekranlar (iPhone SE vb. 480px altı) */
@media (max-width: 480px) {
    /* Lideri zaten gizlemiştin, bayrağı da gizleyerek sadece isim ve puanı bırakabiliriz */
    /* Veya tabloyu yatayda kaydırılabilir yapalım: */
    .rank-container {
        overflow-x: auto;
    }
    
    .rank-table {
        min-width: 450px; /* Zorunlu minimum genişlik, kullanıcı kaydırarak her şeyi görür */
    }
}