/* ============================================================
   GUNBOUND LEGACY - MODERN PORTAL 2026
   Production visual layer. Keeps current PHP / routes / DB logic intact.
   ============================================================ */

:root {
    --legacy-bg: #070b12;
    --legacy-bg-2: #0b111b;
    --legacy-surface: #0e1722;
    --legacy-surface-2: #121e2b;
    --legacy-surface-3: #172536;
    --legacy-border: rgba(140, 169, 196, .18);
    --legacy-border-strong: rgba(255,255,255,.12);
    --legacy-text: #f4f7fb;
    --legacy-muted: #91a1b2;
    --legacy-orange: #ff8516;
    --legacy-orange-2: #ff5e1f;
    --legacy-cyan: #2bc6e8;
    --legacy-green: #19c966;
    --legacy-green-2: #0a9f4c;
    --legacy-radius: 12px;
    --legacy-shadow: 0 12px 34px rgba(0,0,0,.28);
}

html { background: var(--legacy-bg); }
body {
    background:
        radial-gradient(circle at 72% 0%, rgba(87, 47, 165, .12), transparent 32%),
        radial-gradient(circle at 12% 36%, rgba(0, 113, 178, .09), transparent 28%),
        linear-gradient(180deg, #080d15 0%, #09111a 44%, #070b12 100%) !important;
    color: var(--legacy-text) !important;
}

/* ---------- top bar ---------- */
body .top-bar,
body .top_nav,
body .top_menu_container {
    background: rgba(5, 8, 14, .97) !important;
}
body .top-bar {
    border-top: 3px solid var(--legacy-orange) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,.22);
    position: relative;
    z-index: 4000;
}
body .top_main_menu > li > a { color: #9ba8b7 !important; letter-spacing: .04em; }
body .top_main_menu > li > a:hover { color: #fff !important; }
body .top_main_menu > li > a.highlight { color: #b4ef23 !important; }
body .top_sub_menu {
    background: rgba(8,12,19,.98) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 15px 32px rgba(0,0,0,.35) !important;
    backdrop-filter: blur(10px);
}
body .top_sub_menu li a:hover { background: rgba(255,133,22,.12) !important; color: #fff !important; }

/* ---------- hero / header ---------- */
body .header-banner {
    height: clamp(260px, 20.214vw, 360px) !important;
    min-height: 260px !important;
    margin-bottom: 0 !important;
    background-image: url('../img/header_legacy_2026_v3.jpg') !important;
    /* v2.4: usa la cabecera de tormenta proporcionada por el usuario. */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: #060a14 !important;
    position: relative !important;
    isolation: isolate;
    border-bottom: 1px solid rgba(255,133,22,.28);
    box-shadow: inset 0 -35px 70px rgba(0,0,0,.22);
}
body .header-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4,7,13,.38) 0, rgba(4,7,13,.08) 30%, rgba(4,7,13,.00) 62%, rgba(4,7,13,.12) 100%);
    pointer-events: none;
    z-index: 0;
}
body .slide-bt { display: none !important; }

/* v2.4 - CABECERA TORMENTA
   Mantiene la proporción panorámica 2048x414 para mostrar prácticamente toda
   la ilustración y evita volver a generar espacio vertical innecesario. */
@media (min-width: 992px) {
    body .header-banner {
        height: clamp(260px, 20.214vw, 360px) !important;
        min-height: 260px !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    body .gb-gnb:hover {
        height: 100% !important;
    }
    .legacy-hero-copy { bottom: 18px; }
    .legacy-season-chip { bottom: 14px; }
}


body .gb-gnb {
    z-index: 2500 !important;
    height: 104px !important;
    padding-top: 25px !important;
    background: linear-gradient(180deg, rgba(3,6,11,.52) 0%, rgba(3,6,11,.18) 62%, rgba(3,6,11,0) 100%) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    transition: height .22s ease, background .22s ease, backdrop-filter .22s ease !important;
}
body .gb-gnb:hover {
    height: 300px !important;
    padding-top: 25px !important;
    /* Glass dropdown: translucent so the hero artwork remains visible. */
    background: linear-gradient(180deg,
        rgba(4,8,15,.78) 0%,
        rgba(4,8,15,.68) 48%,
        rgba(4,8,15,.44) 78%,
        rgba(4,8,15,.08) 100%) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(7px) saturate(118%);
    backdrop-filter: blur(7px) saturate(118%);
}
body .gb-gnb-container { max-width: 1160px !important; }
body .gb-gnb h1 {
    top: 1px !important;
    width: 178px !important;
    height: 102px !important;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.52));
}
body .gb-gnb > div > ul > li { margin: 0 4px !important; }
body .gb-gnb > div > ul > li > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 14px 13px !important;
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: .018em;
    color: rgba(255,255,255,.9) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.7) !important;
    border-radius: 8px;
}
body .gb-gnb > div > ul > li > a i { color: #bdc9d9; font-size: .95em; }
body .gb-gnb > div > ul > li > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.07);
    text-shadow: none !important;
}
body .gb-gnb > div > ul > li > a:hover i { color: var(--legacy-orange); }
body .gb-gnb ul ul { top: 56px !important; }
body .gb-gnb ul ul li { margin: 5px 0 !important; }
body .gb-gnb ul ul li a {
    color: #aeb9c6 !important;
    font-size: .86rem !important;
    font-weight: 600 !important;
    line-height: 1.25;
    padding: 5px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
body .gb-gnb ul ul li a:hover {
    color: #fff !important;
    background: rgba(255,133,22,.12);
    transform: translateX(2px) !important;
}

.legacy-hero-copy {
    position: absolute;
    z-index: 50;
    left: max(42px, calc((100vw - 1480px) / 2 + 24px));
    bottom: 24px;
    pointer-events: none;
    text-shadow: 0 6px 26px rgba(0,0,0,.7);
}
.legacy-hero-eyebrow {
    display: block;
    color: #b7c4d4;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .38em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.legacy-hero-title {
    font-family: 'Titillium Web', sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.9rem);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -.04em;
    color: #fff;
}
.legacy-hero-title strong {
    color: var(--legacy-orange);
    font-weight: 900;
    background: linear-gradient(180deg,#ffb436 0%,#ff7c15 54%,#f04f1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.legacy-hero-tagline {
    margin-top: 7px;
    color: #dbe7f4;
    font-size: .92rem;
    letter-spacing: .33em;
    font-weight: 700;
    text-transform: uppercase;
}
.legacy-season-chip {
    position: absolute;
    right: max(32px, calc((100vw - 1480px) / 2 + 24px));
    bottom: 18px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #e8edf5;
    background: rgba(5,10,18,.64);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.legacy-season-chip::before {
    content:'';
    width:8px;height:8px;border-radius:50%;background:#39e978;box-shadow:0 0 10px rgba(57,233,120,.8);
}

/* ---------- main grid ---------- */
body .main-container-wrapper {
    max-width: 1480px !important;
    padding-top: 22px !important;
    padding-bottom: 34px !important;
    position: relative;
}
body .main-container-wrapper::before,
body .main-container-wrapper::after { display: none !important; }
body .modern-sidebar { color: var(--legacy-text); }

/* ---------- download ---------- */
body .download-btn-orange {
    height: 76px !important;
    border: 1px solid rgba(255,184,89,.52) !important;
    border-radius: var(--legacy-radius) !important;
    background: linear-gradient(115deg, #ff9b24 0%, #ff7618 54%, #e9521c 100%) !important;
    box-shadow: 0 12px 24px rgba(225,72,13,.22), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transform: none !important;
}
body .download-btn-orange::before {
    content: '\F30A';
    font-family: 'bootstrap-icons';
    position:absolute;
    left:18px; top:50%; transform:translateY(-50%);
    width:43px;height:43px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.35rem;
    background:rgba(120,45,13,.28);
    border:1px solid rgba(255,255,255,.18);
    z-index:3;
}
body .download-btn-orange:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.06) !important;
    box-shadow: 0 15px 32px rgba(225,72,13,.3), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
body .download-btn-orange::after { display:none !important; }
body .btn-layer { padding-left: 38px; }
body .dl-text-main {
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
}
body .dl-text-sub { letter-spacing: .16em !important; color: rgba(255,255,255,.82) !important; }

/* ---------- sidebar account/login/ranking ---------- */
body .sidebar-account-wrapper,
body .sidebar-login-wrapper,
body .ranking-preview-sidebar {
    background: linear-gradient(180deg,#101a26 0%,#0b131d 100%) !important;
    border: 1px solid var(--legacy-border) !important;
    box-shadow: var(--legacy-shadow) !important;
    color: var(--legacy-text) !important;
    border-radius: var(--legacy-radius) !important;
}
body .sidebar-account-wrapper::before,
body .sidebar-login-wrapper::before { height: 2px !important; background: linear-gradient(90deg,var(--legacy-cyan),#4a78ff) !important; }
body .sidebar-account-header,
body .sidebar-login-title { color: #eef4fb !important; }
body .sidebar-account-header a { color:#90a0b1 !important; }
body .sidebar-avatar-preview {
    background: linear-gradient(180deg,#111923,#0c131c) !important;
    border: 1px solid var(--legacy-border) !important;
}
body .sidebar-user-name { color: #f4f7fb !important; }
body .stat-item {
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}
body .stat-label { color: #7f91a4 !important; }
body .stat-value { color: #f4f7fb !important; }
body .sidebar-account-footer { border-top-color: rgba(255,255,255,.08) !important; }
body .sidebar-account-link {
    color: #8ed8ff !important;
    background: rgba(43,198,232,.09) !important;
    border: 1px solid rgba(43,198,232,.12);
}
body .sidebar-account-link:hover { background: rgba(43,198,232,.18) !important; color:#fff !important; }

body .ranking-preview-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,133,22,.45) !important;
    color: #f6f8fb !important;
    text-shadow: none !important;
}
body .ranking-preview-list { background: transparent !important; }
body .ranking-preview-list li {
    background: rgba(255,255,255,.035) !important;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    color: #dce4ee !important;
}
body .ranking-preview-list li:hover {
    background: rgba(255,133,22,.085) !important;
    border-left-color: var(--legacy-orange) !important;
}
body .rank-name { color: #f4f7fb !important; }
body .rank-gp { color: #9fb1c4 !important; }
body .ranking-preview-list li:hover .rank-name { color: #ffb15d !important; }
body .ranking-preview-list li:hover .rank-gp { color:#fff !important; }

/* ---------- community ---------- */
body .community-banner {
    background: linear-gradient(115deg,#0ca44c 0%,#18be5b 42%,#087c3f 100%) !important;
    border: 1px solid rgba(70,255,150,.32) !important;
    border-radius: var(--legacy-radius) !important;
    padding: 17px 20px !important;
    box-shadow: 0 12px 30px rgba(0,128,65,.2) !important;
    transform: none !important;
}
body .community-banner:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 34px rgba(0,150,75,.25) !important; }
body .community-banner h4 { font-family:'Titillium Web',sans-serif; font-size:1.15rem !important; letter-spacing:.01em; }
body .community-banner .animate-float { background: rgba(255,255,255,.96) !important; box-shadow: none !important; }
body .community-banner .btn {
    background:#f7fbf9 !important;
    border:0 !important;
    color:#08753b !important;
    box-shadow:none !important;
    min-width:150px;
    padding-top:10px !important;
    padding-bottom:10px !important;
}

/* ---------- content cards ---------- */
body .content-panel {
    background: linear-gradient(180deg,var(--legacy-surface-2),var(--legacy-surface)) !important;
    border: 1px solid var(--legacy-border) !important;
    border-radius: var(--legacy-radius) !important;
    box-shadow: var(--legacy-shadow) !important;
    color: var(--legacy-text) !important;
}
body .content-panel:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255,133,22,.28) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.32) !important;
}
body .panel-header {
    background: rgba(7,13,20,.78) !important;
    border-bottom: 1px solid rgba(255,133,22,.48) !important;
    color: #f7f9fc !important;
    font-size:.82rem !important;
    letter-spacing:.02em;
}
body .panel-header i { color: var(--legacy-orange) !important; }
body .panel-header a { color:#8fa2b7 !important; }
body .panel-header a:hover { color:#fff !important; }
body .panel-body,
body .content-panel:hover .panel-body { background: transparent !important; color: var(--legacy-text) !important; }

/* news */
body .notice-list { background: transparent !important; }
body .notice-item {
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
    border-left: 2px solid transparent !important;
    background: transparent !important;
}
body .notice-item:hover {
    background: rgba(255,133,22,.055) !important;
    border-left-color: var(--legacy-orange) !important;
}
body .notice-date { color: #71869a !important; }
body .notice-title { color:#e7edf5 !important; font-weight:600 !important; }
body .notice-title:hover { color:#fff !important; }
body .notice-title::after { display:none !important; }
body .notice-tag { box-shadow:none !important; border:0 !important; border-radius:6px !important; }
body .tag-announce { background: var(--legacy-orange) !important; }
body .tag-info { background:#17b5d0 !important; }
body .tag-update { background:#e74747 !important; }

/* events */
body #video-container {
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    box-shadow:none !important;
    background:#070b11;
}
body #video-container:hover { transform:none !important; border-color:rgba(255,133,22,.5) !important; box-shadow:0 8px 18px rgba(0,0,0,.25) !important; }
body #video-container::before { display:none !important; }
body .panel-list--events li {
    background: transparent !important;
    border: 0 !important;
    border-bottom:1px solid rgba(255,255,255,.065) !important;
    border-left:2px solid transparent !important;
    border-radius:0 !important;
}
body .panel-list--events li:hover {
    background: rgba(255,133,22,.055) !important;
    border-left-color:var(--legacy-orange) !important;
    transform:none !important;
}
body .panel-list--events a { color:#dce5ef !important; }
body .panel-list--events a:hover { color:#fff !important; }
body .panel-list--events i { color:var(--legacy-orange) !important; }

/* hot avatars */
body .hot-avatars-track { gap: 12px !important; }
body .hot-avatars-slide { flex-basis: 220px !important; max-width:220px !important; }
body .avatar-card {
    background: linear-gradient(180deg,#121c28 0%,#0b131d 100%) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:10px !important;
    box-shadow:none !important;
    padding:10px !important;
}
body .avatar-card:hover {
    transform:translateY(-3px) !important;
    border-color:rgba(255,133,22,.55) !important;
    box-shadow:0 10px 22px rgba(0,0,0,.28) !important;
}
body .avatar-card::before { height:2px !important; background:linear-gradient(90deg,var(--legacy-orange),var(--legacy-cyan)) !important; }
body .avatar-card::after { display:none !important; }
body .avatar-card > div:first-child {
    background: radial-gradient(circle at 50% 42%, #edf3f6 0%, #dfe7ec 72%, #d4dde3 100%) !important;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px !important;
}
body .avatar-card .text-dark { color:#edf3f9 !important; }
body .hot-avatars-nav { background:rgba(3,8,13,.8) !important; border:1px solid rgba(255,255,255,.1) !important; }
body .hot-avatars-nav:hover:not(:disabled) { background:var(--legacy-orange) !important; }

/* ---------- footer ---------- */
body .footer-bar {
    background: #05080d !important;
    border-top: 1px solid rgba(255,133,22,.6) !important;
    color:#7e8d9d !important;
    padding:28px 0 !important;
}
body .footer-bar a { color:#aab7c5 !important; }
body .footer-bar a:hover { color:#fff !important; }
body .footer-socials a {
    background:rgba(255,255,255,.055) !important;
    border:1px solid rgba(255,255,255,.08);
    color:#dce5ee !important;
    width:38px !important;height:38px !important;
}
body .footer-socials a:hover { background:var(--legacy-orange) !important; border-color:var(--legacy-orange); box-shadow:none !important; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    body .header-banner {
        min-height: 205px !important;
        height: 205px !important;
        background-position: 66% center !important;
    }
    .legacy-hero-copy,.legacy-season-chip { display:none !important; }
    body .mobile-logo { max-height:92px !important; filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
    body .gb-mobile-toggle-btn { background:rgba(7,12,19,.88) !important; color:#fff !important; border:1px solid rgba(255,255,255,.12) !important; }
    body .gb-mobile-menu-container { background:#09111a !important; }
    body .gb-mobile-item > a { background:#101c29 !important; }
    body .gb-mobile-submenu { background:#0b141e !important; }
}

@media (max-width: 767px) {
    body .community-banner { gap:14px; }
    body .community-banner > div { justify-content:center; }
    body .download-btn-orange { height:70px !important; }
    body .download-btn-orange::before { width:38px;height:38px;left:14px; }
    body .dl-text-main { font-size:26px !important; }
}

/* ============================================================
   v2.2 - FIX HOVER GP / GOLD / CASH
   Evita que el hover claro heredado desde header.php borre el
   contraste de los valores en la tarjeta Mi Cuenta.
   ============================================================ */
body .sidebar-user-stats .stat-item:hover {
    background: rgba(255,255,255,.085) !important;
    border-color: rgba(43,198,232,.24) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
    transform: translateY(-2px);
}
body .sidebar-user-stats .stat-item:hover .stat-label {
    color: #a9bacb !important;
}
body .sidebar-user-stats .stat-item:hover .stat-value {
    color: #ffffff !important;
}
body .sidebar-user-stats .stat-item:hover .stat-value.text-warning {
    color: #ffc107 !important;
}
body .sidebar-user-stats .stat-item:hover .stat-value.text-info {
    color: #29b6f6 !important;
}

/* ==========================================================
   v2.5 - Vista previa de avatar sin recuadro blanco
   Integra el avatar con el panel oscuro de Mi Cuenta.
   ========================================================== */
body .sidebar-account-wrapper .sidebar-avatar-preview {
    background:
        radial-gradient(circle at 50% 48%, rgba(43, 198, 232, .10) 0%, rgba(43, 198, 232, .035) 38%, transparent 64%),
        linear-gradient(180deg, #111923 0%, #0b121a 100%) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: inset 0 0 24px rgba(0,0,0,.16) !important;
}
body .sidebar-account-wrapper .sidebar-avatar-preview iframe {
    background: transparent !important;
}

/* ==========================================================
   TEST v2.6 - Avatar preview realmente transparente
   El blanco provenia del documento interno del iframe.
   ========================================================== */
body .sidebar-account-wrapper .sidebar-avatar-preview,
body .sidebar-account-wrapper .sidebar-avatar-preview iframe.legacy-sidebar-avatar-frame {
    background: transparent !important;
    background-color: transparent !important;
}
body .sidebar-account-wrapper .sidebar-avatar-preview {
    background:
        radial-gradient(circle at 50% 48%, rgba(43,198,232,.09) 0%, rgba(43,198,232,.025) 40%, transparent 65%),
        linear-gradient(180deg,#101923 0%,#0a1119 100%) !important;
}


/* ==========================================================
   TEST v2.7 - Hot Avatar / Avatar Shop preview transparente
   Reutiliza la misma transparencia interna del renderer.
   ========================================================== */
body .hot-avatars-panel .legacy-hot-avatar-preview {
    background:
        radial-gradient(circle at 50% 48%, rgba(43,198,232,.075) 0%, rgba(43,198,232,.02) 40%, transparent 66%),
        linear-gradient(180deg,#101923 0%,#0a1119 100%) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    box-shadow: inset 0 0 22px rgba(0,0,0,.15) !important;
}
body .hot-avatars-panel .legacy-hot-avatar-preview iframe.legacy-hot-avatar-frame {
    background: transparent !important;
    background-color: transparent !important;
}
body .hot-avatars-panel .avatar-card > .legacy-hot-avatar-preview {
    background-color: transparent !important;
}


/* ==========================================================
   TEST v2.8 - Hot Avatar: transparencia REAL del contenedor
   El rectangulo claro restante no era el iframe: era este contenedor
   exterior heredando el preview claro de la UI anterior.
   ========================================================== */
body .hot-avatars-panel .avatar-card > .legacy-hot-avatar-preview,
body .hot-avatars-panel .legacy-hot-avatar-preview,
body .hot-avatars-panel .avatar-card > div.legacy-hot-avatar-preview:first-child {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
}
body .hot-avatars-panel .legacy-hot-avatar-preview iframe,
body .hot-avatars-panel iframe.legacy-hot-avatar-frame {
    background: transparent !important;
    background-color: transparent !important;
}


/* ===== v2.9 - Medallas Top 3 ===== */
body .ranking-preview-list .rank-position.rank-medal {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 27px !important;
    line-height: 1 !important;
    overflow: visible !important;
}
body .ranking-preview-list .rank-position.rank-medal i {
    display: block;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
body .ranking-preview-list .rank-position.rank-1.rank-medal,
body .ranking-preview-list .rank-position.rank-1.rank-medal i {
    color: #ffd54a !important;
}
body .ranking-preview-list .rank-position.rank-2.rank-medal,
body .ranking-preview-list .rank-position.rank-2.rank-medal i {
    color: #dce5ee !important;
}
body .ranking-preview-list .rank-position.rank-3.rank-medal,
body .ranking-preview-list .rank-position.rank-3.rank-medal i {
    color: #d98b4c !important;
}
body .ranking-preview-list li:hover .rank-position.rank-medal {
    transform: translateY(-1px) scale(1.12) !important;
}

/* ============================================================
   LEGACY MODERN TEST v2.10 - SECTION TITLE UPGRADE
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&display=swap');

/* Base title treatment */
body .panel-header,
body .ranking-preview-header,
body .sidebar-account-header,
body .sidebar-login-title {
    font-family: 'Rajdhani','Titillium Web',sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .065em !important;
}

/* Main content section headers */
body .panel-header {
    min-height: 46px !important;
    padding: 11px 15px !important;
    background: linear-gradient(90deg, rgba(8,15,23,.97) 0%, rgba(12,24,35,.92) 58%, rgba(8,15,23,.86) 100%) !important;
    position: relative !important;
}
body .panel-header::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: linear-gradient(180deg,#ffd166 0%,#ff8a1d 52%,#e85b10 100%) !important;
    opacity: 1 !important;
    z-index: 2 !important;
}
body .panel-header > span {
    color: #ffd28b !important;
    font-size: .97rem !important;
    text-shadow: 0 0 12px rgba(255,139,29,.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
body .panel-header > span > i,
body .panel-header i {
    color: #ff941f !important;
    background: rgba(255,139,29,.10) !important;
    border: 1px solid rgba(255,153,42,.18) !important;
    border-radius: 7px !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0 !important;
    text-shadow: 0 0 10px rgba(255,139,29,.35) !important;
}
body .panel-header > a,
body .panel-header a.small {
    font-family: 'Rajdhani','Titillium Web',sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

/* My Account title: cyan identity */
body .sidebar-account-header {
    min-height: 38px !important;
    color: #eaf8ff !important;
    border-bottom: 1px solid rgba(57,194,255,.16) !important;
    padding-bottom: 10px !important;
}
body .sidebar-account-header > span {
    color: #83dcff !important;
    font-size: .96rem !important;
    text-shadow: 0 0 12px rgba(45,191,255,.18) !important;
}
body .sidebar-account-header > span i {
    color: #31c5ff !important;
    filter: drop-shadow(0 0 5px rgba(49,197,255,.35));
}

/* Top ranking title: gold identity */
body .ranking-preview-header {
    min-height: 46px !important;
    padding: 11px 14px !important;
    color: #ffd56f !important;
    font-size: .95rem !important;
    background: linear-gradient(90deg,rgba(18,18,16,.97),rgba(22,18,12,.92)) !important;
    border-bottom: 1px solid rgba(255,183,38,.42) !important;
    text-shadow: 0 0 13px rgba(255,182,36,.16) !important;
    position: relative !important;
}
body .ranking-preview-header::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: linear-gradient(180deg,#ffe47a,#ffad16,#df7110) !important;
}
body .ranking-preview-header i {
    color: #ffbe24 !important;
    filter: drop-shadow(0 0 5px rgba(255,190,36,.3));
}

/* Different accent for Hot Avatar header */
body .hot-avatars-panel .panel-header > span {
    color: #f6fbff !important;
}
body .hot-avatars-panel .panel-header > span i {
    color: #48d8ff !important;
    background: rgba(54,202,255,.10) !important;
    border-color: rgba(54,202,255,.20) !important;
    text-shadow: 0 0 10px rgba(54,202,255,.35) !important;
}
body .hot-avatars-panel .panel-header::before {
    background: linear-gradient(180deg,#62e0ff 0%,#21b7ed 48%,#ff8a1d 100%) !important;
}

/* Slight hover highlight without changing layout */
body .content-panel:hover .panel-header > span,
body .ranking-preview-sidebar:hover .ranking-preview-header {
    filter: brightness(1.08);
}