/* =========================================================
   MU ESMERALDA - RANKINGS V2
   ========================================================= */
body { background-color:#030b08; }

#container:has(.rankings_menu) {
    margin-top: 90px !important;
    padding-top: 42px;
    padding-bottom: 54px;
    min-height: calc(100vh - 250px);
    background-image:
      linear-gradient(180deg, rgba(0,10,7,.38) 0%, rgba(0,10,7,.72) 48%, rgba(1,8,6,.94) 100%),
      url('../img/hero-esmeralda.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

#container:has(.rankings_menu) #content {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 28px;
}

.emerald-rankings-head {
    text-align:center;
    margin: 0 auto 26px;
    position:relative;
}
.emerald-rankings-head:after {
    content:"";
    display:block;
    width:170px;
    height:1px;
    margin:19px auto 0;
    background:linear-gradient(90deg,transparent,#18d697,transparent);
    box-shadow:0 0 16px rgba(24,214,151,.55);
}
.emerald-rankings-kicker {
    display:block;
    color:#39e5ad;
    font:700 11px/1.2 'PT Sans',sans-serif;
    letter-spacing:5px;
    margin-bottom:8px;
}
.emerald-rankings-head h1 {
    margin:0;
    font:700 44px/1 'Cinzel',serif;
    letter-spacing:4px;
    color:#f3f5ef;
    text-shadow:0 0 26px rgba(38,224,164,.16);
}
.emerald-rankings-head p {
    margin:10px 0 0;
    color:#8fa69e;
    font-size:14px;
}

.rankings_menu {
    max-width:1180px !important;
    margin:0 auto 24px !important;
    display:flex !important;
    justify-content:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    padding:10px !important;
    border:1px solid rgba(45,210,156,.18);
    background:rgba(3,14,11,.72);
    box-shadow:0 16px 48px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.02);
    border-radius:9px;
}
.rankings-menu-btn {
    min-height:42px;
    padding:9px 15px !important;
    gap:8px !important;
    border-radius:5px !important;
    color:#9db3ab !important;
    background:transparent !important;
    border:1px solid transparent !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.25px;
    text-transform:uppercase;
    transform:none !important;
}
.rankings-menu-btn svg { width:16px !important; height:16px !important; }
.rankings-menu-btn:hover {
    color:#ecfff8 !important;
    background:rgba(26,196,140,.08) !important;
    border-color:rgba(44,222,163,.22) !important;
    box-shadow:none !important;
}
.rankings-menu-btn.active {
    color:#eafff7 !important;
    background:linear-gradient(180deg,rgba(21,188,130,.22),rgba(7,76,55,.24)) !important;
    border-color:#199e73 !important;
    box-shadow:inset 0 0 18px rgba(24,214,151,.08),0 0 16px rgba(16,170,116,.12) !important;
}

.rankings-filter-container {
    max-width:980px !important;
    margin:0 auto 22px !important;
    padding:10px 14px !important;
    gap:8px !important;
    border-radius:8px !important;
    border:1px solid rgba(45,210,156,.14) !important;
    background:rgba(2,12,9,.64) !important;
    backdrop-filter:blur(8px);
}
.rankings-filter-btn { opacity:.62 !important; filter:grayscale(70%) !important; transform:none !important; }
.rankings-filter-btn:hover,.rankings-filter-btn.active { opacity:1 !important; filter:none !important; transform:translateY(-2px) !important; }
.rankings-filter-ring { padding:2px !important; border:1px solid rgba(60,213,164,.18) !important; }
.rankings-filter-btn.active .rankings-filter-ring {
    background:#0f8d67 !important;
    border-color:#28d7a2 !important;
    box-shadow:0 0 15px rgba(34,211,157,.25) !important;
}
.rankings-filter-img-wrapper,.rankings-filter-all-icon { width:44px !important; height:44px !important; }
.rankings-filter-all-icon {
    background:linear-gradient(145deg,#0b5d46,#0b241d) !important;
    color:#dffff4 !important;
    font-size:10px !important;
}

.rankings-card {
    max-width:1180px;
    margin:0 auto 16px !important;
    border-radius:8px !important;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(4,17,13,.96),rgba(2,10,8,.98)) !important;
    border:1px solid rgba(39,194,145,.22) !important;
    box-shadow:0 24px 65px rgba(0,0,0,.36) !important;
}
.rankings-table { width:100%; margin:0 !important; border-collapse:collapse !important; }
.rankings-table thead th {
    padding:13px 18px !important;
    color:#5fe5b5 !important;
    background:rgba(18,72,54,.22) !important;
    border-bottom:1px solid rgba(54,209,160,.24) !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:1px;
    text-transform:uppercase;
}
.rankings-table tbody tr {
    background:rgba(255,255,255,.006) !important;
    border-bottom:1px solid rgba(74,129,109,.12) !important;
    transition:background .18s ease,border-color .18s ease;
}
.rankings-table tbody tr:nth-child(even) { background:rgba(23,74,57,.045) !important; }
.rankings-table tbody tr:hover { background:rgba(20,164,115,.09) !important; }
.rankings-table td {
    padding:11px 18px !important;
    color:#c7d5d0 !important;
    font-size:13px !important;
    border:0 !important;
}
.rankings-table .player-name { color:#f1f7f4 !important; font-size:14px; font-weight:700 !important; }
.rankings-table .player-name:hover { color:#43e2ab !important; }
.rankings-table .class-avatar,.rankings-class-image {
    width:38px !important;
    height:38px !important;
    object-fit:cover;
    border-radius:50% !important;
    border:1px solid rgba(45,215,160,.34) !important;
    box-shadow:0 0 12px rgba(0,0,0,.38) !important;
}
.rankings-table img.online-status-indicator { width:9px !important; height:9px !important; margin-left:6px; }

.rank-pos-circle {
    width:32px !important;
    height:32px !important;
    font-size:12px !important;
    border-radius:50% !important;
    background:rgba(30,112,84,.12) !important;
    color:#79ad9b !important;
    border:1px solid rgba(66,178,139,.22) !important;
    box-shadow:none !important;
}
.rank-pos-circle.rank-1 { background:linear-gradient(145deg,#e8b949,#86611d) !important; color:#fff8df !important; border-color:#e9c45c !important; box-shadow:0 0 14px rgba(231,183,62,.24) !important; }
.rank-pos-circle.rank-2 { background:linear-gradient(145deg,#cfd7d5,#697674) !important; color:#fff !important; border-color:#c8d1cf !important; }
.rank-pos-circle.rank-3 { background:linear-gradient(145deg,#c47d45,#663b21) !important; color:#fff3e8 !important; border-color:#c78553 !important; }

.rankings-update-time {
    max-width:1180px;
    margin:0 auto;
    padding:0 4px !important;
    text-align:right !important;
    color:#617a70 !important;
    font-size:10px !important;
}

/* Guild ranking logos */
.rankings_guild_logo img { max-height:42px !important; width:auto !important; }

@media (max-width: 767px) {
    #container:has(.rankings_menu) { margin-top:70px !important; padding-top:24px; }
    #container:has(.rankings_menu) #content { padding:0 10px; }
    .emerald-rankings-head h1 { font-size:31px; }
    .emerald-rankings-head p { font-size:12px; }
    .rankings_menu { justify-content:flex-start !important; flex-wrap:nowrap !important; overflow-x:auto; padding:8px !important; }
    .rankings-menu-btn { white-space:nowrap; padding:8px 11px !important; }
    .rankings-filter-container { justify-content:flex-start !important; flex-wrap:nowrap !important; overflow-x:auto; }
    .rankings-table thead th,.rankings-table td { padding:10px 12px !important; white-space:nowrap; }
    .rankings-card { border-radius:5px !important; }
}

/* =========================================================
   FIX: fondo Rankings a ancho completo de la ventana
   El #container del template tiene un ancho maximo, por eso
   el fondo quedaba encerrado dentro del contenido.
   ========================================================= */
body:has(.rankings_menu) {
    background-color: #030b08 !important;
    background-image:
      linear-gradient(180deg, rgba(0,10,7,.38) 0%, rgba(0,10,7,.72) 48%, rgba(1,8,6,.94) 100%),
      url('../img/hero-esmeralda.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

#container:has(.rankings_menu) {
    background: transparent !important;
}