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

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

.rank-header h2 {
    margin: 0;
    color: #f7f7f7;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* === Tablo Tasarımı === */
.rank-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

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

.rank-table td {
    padding: 12px 8px; /* Rütbe eklendiği için padding dengelendi */
    text-align: center;
    border-bottom: 1px solid #222;
    color: #ddd;
    vertical-align: middle;
}

/* Satır Efekti */
.rank-table tbody tr:hover {
    background: rgba(255, 204, 0, 0.05);
}

/* === Hücre Özel Stilleri === */
.rank-number {
    font-weight: bold;
    color: #888;
    width: 40px;
}

.rank-name {
    font-weight: bold;
    color: #fff;
}

/* Rütbe Görseli Stili (Sayıları Netleştirme Odaklı) */
.rank-medal {
    width: 20px; 
    height: 20px;
    
    /* Tarayıcıya pikselleri ASLA yumuşatma, ne görüyorsan sertçe çiz diyoruz */
    image-rendering: -webkit-optimize-contrast; /* Chrome ve Opera için sihirli dokunuş */
    image-rendering: crisp-edges;               /* Firefox için */
    image-rendering: pixelated;                 /* Genel keskinlik */

    /* Parlaklığı hafif artırıp (sayıları parlatır) kontrastı yükseltiyoruz */
    filter: brightness(1.1) contrast(1.2);

    /* Satırda tam ortalı dursun */
    vertical-align: middle;
    margin: 0 4px;
    
    /* Hafif yukarı kaymış gibi duruyorsa hizalamayı düzeltir */
    position: relative;
    top: -1px; 
}

.rank-level {
    color: #ffcc00;
    font-weight: bold;
}

.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;
}

.rank-char-icon {
    /* 32 ile 42 arası en ideal denge boyutu */
    width: 38px;
    height: 38px;
    
    /* Çerçeveyi inceltip rengini belirginleştiriyoruz */
    border: 1px solid #ffcc00;
    border-radius: 3px;
    background: #000;
    
    /* Bulanıklığı önlemek için kontrastı ve parlaklığı manuel artırıyoruz */
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
    filter: brightness(1.1) contrast(1.1); /* İkonun içindeki detayları patlatır */
    
    vertical-align: middle;
    /* Yanındaki bayrak ve rütbeyle aynı hizada durması için */
    margin-left: 5px;
}

.rank-guild {
    color: #5da9ff;
}

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

/* === GELİŞMİŞ SIRALAMA MOBİL UYUMLULUK === */

/* === GELİŞMİŞ SIRALAMA MOBİL UYUMLULUK === */

@media (max-width: 768px) {
    .rank-container {
        padding: 10px 5px !important;
    }

    /* Tablonun sığmadığında kayması için kapsayıcıya (div) genişlik veriyoruz */
    /* HTML'de eklediğin <div style="overflow-x: auto;"> içindeki tabloya etki eder */
    .rank-table {
        min-width: 600px !important; /* Sütunların iç içe girmemesi için zorunlu genişlik */
    }

    .rank-table th, .rank-table td {
        padding: 8px 4px !important;
        font-size: 0.8rem !important;
    }

    /* Görselleri mobilde makul boyuta çekiyoruz */
    .rank-empire { width: 30px !important; }
    .rank-char-icon { width: 30px !important; height: 30px !important; }
    .rank-medal { width: 18px !important; height: 18px !important; }
}

/* Buradaki @media (max-width: 480px) içindeki 
   display: none komutlarını SİLDİK. 
   Böylece artık gizlenmeyecekler.
*/
@media (max-width: 480px) {
    .rank-header h1 {
        font-size: 1rem !important;
    }
    
    .rank-name {
        font-size: 0.85rem !important;
    }
}