/* =========================================
   RANKING PAGE STYLES (CLEANED VERSION)
   ========================================= */

/* --- 1. GLOBAL & BACKGROUND --- */
html, body {
    min-height: 100% !important;
    height: auto !important;
}

.ranking-page-body {
    background-color: #0b0f16;
    background-image: url('../img/bg/Long-ART-WITHOUT.jpg');
    background-size: cover; 
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: 100vh; 
    margin: 0;
}

.ranking-hero-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 0; pointer-events: none;
}
.ranking-hero-container img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    opacity: 0.5; 
}
.sparks-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* =========================================
   FLOATING PNG ITEMS (ANIMATION)
   ========================================= */
.floating-background-icons {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; pointer-events: none; z-index: 1;
}

.float-item {
    position: absolute; 
    width: 80px; height: auto; 
    filter: drop-shadow(0 0 15px rgba(255, 173, 51, 0.4));
    will-change: transform;
    z-index: -1;
}

.i-top-1 { top: 5%; left: 5%; width: 90px; animation: floatZoneTop 10s ease-in-out infinite; }
.i-top-2 { top: 15%; right: 10%; width: 120px; transform: rotate(45deg); animation: floatZoneTop 12s ease-in-out infinite reverse; }
.i-top-3 { top: 2%; left: 45%; width: 90px; animation: floatZoneTop 9s ease-in-out infinite 1s; }
.i-top-4 { top: 18%; left: 17%; width: 120px; transform: rotate(-15deg); animation: floatZoneTop 11s ease-in-out infinite 2s; }

.i-bot-1 { top: 70%; left: 85%; width: 190px; animation: floatZoneBot 12s ease-in-out infinite; }
.i-bot-2 { top: 65%; left: 5%; width: 180px; animation: floatZoneBot 14s ease-in-out infinite reverse; }
.i-bot-3 { top: 87%; left: 40%; width: 100px; transform: rotate(20deg); animation: floatZoneBot 10s ease-in-out infinite 1s; }
.i-bot-4 { top: 75%; right: 25%; width: 180px; animation: floatZoneBot 13s ease-in-out infinite 0.5s; }

@keyframes floatZoneTop {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(60px, 50px) rotate(25deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes floatZoneBot {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-60px, -50px) rotate(-25deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* --- 2. LAYOUT --- */
.ranking-section { position: relative; padding-top: 140px; padding-bottom: 80px; z-index: 5; }

.ranking-header-center {
    text-align: left; 
    margin-bottom: 50px; 
    max-width: 1200px; 
    padding: 0 15px;
    display: flex; flex-direction: column; align-items: flex-start; 
    gap: 30px; 
}

.ranking-header-center h1 {
    font-size: 4rem; margin-bottom: 10px; line-height: 1; color: #fff;
    font-family: 'Rajdhani', sans-serif; font-weight: 700;
}
.text-gold { color: #FFAD33; text-shadow: 0 0 25px rgba(255, 173, 51, 0.35); }
.sub-heading { font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: 2px; color: #FFAD33; text-transform: uppercase; }

/* --- 3. SERVER SWITCHER --- */
.server-switch-wrapper {
    display: flex; justify-content: flex-start; position: relative; z-index: 10;
}
.server-switch-container {
    transform: skewX(-10deg);
    background: rgba(6, 10, 18, 0.8);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); 
    padding: 4px; border-radius: 17px; display: flex; gap: 5px;
    backdrop-filter: blur(10px);
}
.srv-btn {
    background: transparent; border: none; 
    height: 60px; padding: 0 30px; 
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    min-width: 120px; transition: all 0.3s ease; border-radius: 13px;
    text-decoration: none !important;
}
.srv-content {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 8px; transform: skewX(10deg); width: 100%;
}
.srv-name {
    font-family: 'Rajdhani', sans-serif; font-weight: 700; 
    font-size: 1.2rem; color: #8b9bb4; text-transform: uppercase; 
}
.srv-rate { 
    font-size: 1.2rem; color: #505b6b; font-weight: 600; 
}
.srv-btn.active { background: linear-gradient(180deg, #FFAD33 0%, #E69500 100%); box-shadow: 0 0 15px rgba(255, 173, 51, 0.3); }
.srv-btn.active .srv-name { color: #0b1521; }
.srv-btn.active .srv-rate { color: #422d05; }

/* --- 4. CATEGORIES --- */
.ranking-categories { 
    display: flex; justify-content: flex-start; gap: 15px; flex-wrap: wrap; 
}
.rank-cat-card {
    position: relative; width: 180px; height: 60px; display: block; text-decoration: none;
    transform: skewX(-10deg); border-radius: 13px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 5px 15px rgba(0,0,0,0.3);
    overflow: hidden; background-size: cover; background-position: center center; transition: all 0.3s ease;
}
.cat-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; transition: 0.3s; transform: skewX(10deg); width: 120%; margin-left: -10%; }
.cat-overlay span { color: #aebfd6; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.rank-cat-card:hover, .rank-cat-card.active { box-shadow: 0 0 0 1px #FFAD33, 0 5px 20px rgba(255, 173, 51, 0.2); transform: skewX(-10deg) translateY(-3px); }
.rank-cat-card:hover span, .rank-cat-card.active span { color: #fff; text-shadow: 0 0 10px rgba(255, 173, 51, 0.8); }

/* --- 8. GUILD MODAL --- */
#guildModal {
    display: none; align-items: center; justify-content: center;
    padding: 10px; z-index: 9999; overflow: hidden; 
}
#guildModal.active { display: flex; }

.guild-modal-card {
    background: #0b0f16;
    border: 1px solid #FFAD33; border-radius: 20px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 173, 51, 0.15);
    position: relative;
    display: flex; flex-direction: column; 
    width: 95%; max-height: 70vh; margin: auto;
}

.close-guild-btn {
    position: absolute; top: 15px; right: 15px; background: transparent;
    border: none; color: #666; font-size: 1.5rem; cursor: pointer;
    z-index: 20; line-height: 1; transition: 0.3s;
}

.guild-modal-header {
    display: flex; align-items: center; gap: 15px; padding: 20px;
    background: radial-gradient(circle at top left, rgba(255, 173, 51, 0.15) 0%, #0b0f16 80%);
    border-bottom: 1px solid rgba(255, 173, 51, 0.3);
    flex-shrink: 0; border-radius: 19px 19px 0 0; 
}

.guild-big-logo-wrapper {
    width: 60px; height: 60px; background: #050505;
    border: 1px solid #FFAD33; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.guild-big-logo-wrapper img { width: 80%; height: 80%; object-fit: contain; }

.guild-modal-name {
    font-family: 'Rajdhani', sans-serif; font-size: 1.5rem; color: #FFAD33;
    text-transform: uppercase; font-weight: 700; margin: 0;
}

.guild-members-container {
    background: #0b0f16; flex-grow: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
}

/* --- 9. SEO & FOOTER --- */
.seo-footer-text {
    max-width: 900px; margin: 60px auto 30px; text-align: center;
    color: rgba(255, 255, 255, 0.05); font-size: 11px; font-family: sans-serif; 
    transition: all 0.3s ease; z-index: 999; padding: 0 20px;
}
.seo-footer-text:hover { color: rgba(255, 255, 255, 0.5); }
/* КАРТКА МОДАЛКИ */
.guild-modal-card {
    background: rgba(11, 15, 22, 0.98);
    border: 1px solid #ffad33;
    border-radius: 20px;
    width: 650px; /* Трохи розширив для комфортного читання назв класів */
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

/* ЗАГАЛЬНА СІТКА (6 КОЛОНОК) */
/* NAME(2.5) | LVL(0.7) | ML(0.7) | RES(0.7) | CLASS(1.5) | RANK(1.2) */
.g-list-header, .g-member-row {
    display: grid !important;
    grid-template-columns: 2.5fr 0.7fr 0.7fr 0.7fr 1.5fr 1.2fr !important;
    gap: 10px;
    align-items: center;
    padding: 12px 25px !important;
}

/* ШАПКА ТАБЛИЦІ */
.g-list-header {
    background: rgba(255, 173, 51, 0.05);
    border-bottom: 1px solid rgba(255, 173, 51, 0.3);
    position: sticky;
    top: 0;
    z-index: 10;
}

.g-list-header span {
    color: #ffad33;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

.g-list-header span:first-child { text-align: left; }
.g-list-header span:last-child { text-align: right; }

/* КОНТЕЙНЕР СПИСКУ */
.guild-members-container {
    padding: 0;
    overflow-y: auto;
    flex-grow: 1;
}

/* РЯДОК УЧАСНИКА */
.g-member-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s;
}

.g-member-row:hover { background: rgba(255, 255, 255, 0.02); }

.gm-col-name { 
    color: #fff; 
    font-weight: 600; 
    font-size: 14px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.gm-col-name i { color: #ffad33; font-size: 12px; } /* Корона майстра */

.gm-col-stat { 
    color: #8b9bb4; 
    font-size: 13px; 
    text-align: center; 
    font-family: 'Rajdhani', sans-serif;
}

.gm-col-class { 
    color: #8b9bb4; 
    font-size: 12px; 
    text-align: center; 
    text-transform: uppercase;
}

.gm-col-rank { 
    text-align: right; 
    font-size: 11px; 
    font-weight: 700; 
    color: #4b5563; 
    font-family: 'Rajdhani', sans-serif;
}

/* АКЦЕНТИ РАНГІВ */
.g-member-row.master .gm-col-rank { color: #ffad33; }
.g-member-row.assist .gm-col-rank { color: #ffad33; opacity: 0.7; }
.g-member-row.master { background: rgba(255, 173, 51, 0.03); }

/* МОБІЛЬНА АДАПТАЦІЯ (4 КОЛОНКИ) */
@media (max-width: 768px) {
    .g-list-header, .g-member-row {
        grid-template-columns: 3fr 1fr 1fr 1.5fr !important; /* NAME | LVL | RES | RANK */
        padding: 10px 15px !important;
    }
    
    /* Ховаємо ML(3-й) та CLASS(5-й) на мобайлі для чистоти */
    .g-list-header span:nth-child(3), 
    .g-member-row span:nth-child(3),
    .g-list-header span:nth-child(5), 
    .g-member-row span:nth-child(5) {
        display: none !important;
    }

    .gm-col-name { font-size: 13px; }
    .gm-col-stat { font-size: 12px; }
}



/* =========================================
   АДАПТАЦІЯ ГОЛОВНОЇ ТАБЛИЦІ РЕЙТИНГУ
   ========================================= */
@media (max-width: 768px) {
    /* 1. Налаштовуємо сітку заголовка та рядків основної таблиці */
    /* Залишаємо 4 колонки: Rank | Logo | Name | Score */
    .rankings-table thead tr, 
    .eg-row {
        display: grid !important;
        grid-template-columns: 40px 50px 1fr 80px !important;
        gap: 5px;
        align-items: center;
        padding: 10px 15px !important;
    }

    /* 2. Ховаємо непотрібні колонки в заголовку (за порядковим номером) */
    .rankings-table thead th:nth-child(4), /* Guild Master */
    .rankings-table thead th:nth-child(5), /* Empty Spacer */
    .rankings-table thead th:nth-child(7)  /* Members Count */ {
        display: none !important;
    }

    /* 3. Ховаємо непотрібні комірки в рядках за їх класами */
    .eg-row td.eg-master,
    .eg-row td.eg-spacer,
    .eg-row td.eg-members {
        display: none !important;
    }

    /* 4. Стилізація того, що залишилося */
    .eg-num {
        font-size: 12px;
        color: #666;
        text-align: center;
    }

    .eg-logo img {
        width: 30px !important;
        height: auto;
    }

    .eg-name {
        font-size: 14px !important;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Якщо назва дуже довга - обрізаємо крапками */
    }

    .eg-score {
        font-family: 'Rajdhani', sans-serif;
        font-weight: 700;
        color: #ffad33 !important;
        text-align: right;
        font-size: 14px;
    }

    /* Прибираємо зайві відступи у таблиці для мобілок */
    .rankings-table {
        border-spacing: 0;
        border-collapse: collapse;
        width: 100% !important;
    }
}