:root {
    --bg-darker: #131219;
    --bg-dark: #1b1b24;
    --bg-nav: #282b3d;
    --bg-hero: #25222d;
    --bg-panel: #1e213a;
    --bg-panel-header: #151829;
    --bg-dropdown: #202436;
    --text-main: #8c92a6;
    --text-light: #ffffff;
    --text-dim: #60657b;
    --accent-orange: #ff9900;
    --accent-orange-hover: #ffad33;
    --accent-green: #30c853;
    --accent-blue: #4fa5e2;
    --border-color: #272b47;
    --border-highlight: rgba(255, 153, 0, 0.4);
    --font-main: 'Roboto', sans-serif;
    --glow-orange: 0 0 10px rgba(255, 153, 0, 0.6);
    --glow-white: 0 0 12px rgba(255, 255, 255, 0.4);
    --shadow-deep: 0 8px 16px rgba(0, 0, 0, 0.5);
    --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-medium: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* LIGHT THEME VARIABLES OVERRIDE */
:root.light-theme {
    --bg-darker: #f0f2f5;
    --bg-dark: #e8eaef;
    --bg-nav: #ffffff;
    --bg-hero: #f4f6f9;
    --bg-panel: #ffffff;
    --bg-panel-header: #f8f9fa;
    --bg-dropdown: #ffffff;
    --text-main: #4a5065;
    --text-light: #2c3140;
    /* Dark text for light mode headers */
    --text-dim: #7a819c;
    --border-color: #e1e4ec;
    --border-highlight: rgba(255, 153, 0, 0.6);
    --glow-orange: 0 0 10px rgba(255, 153, 0, 0.3);
    --glow-white: 0 0 12px rgba(0, 0, 0, 0.1);
    --shadow-deep: 0 8px 16px rgba(0, 0, 0, 0.08);
}

:root.light-theme body {
    background-color: #f0f2f5;
}

:root.light-theme .top-nav {
    background: #ffffff;
    border-bottom: 2px solid var(--accent-orange);
    color: var(--text-light);
}

:root.light-theme .nav-links>li>a {
    color: var(--text-main);
}

:root.light-theme .nav-links>li:hover>a,
:root.light-theme .nav-links>li>a.active {
    color: var(--accent-orange);
    background-color: rgba(255, 153, 0, 0.05);
}

:root.light-theme .nav-links>li:not(:last-child)::before {
    background-color: rgba(0, 0, 0, 0.08);
    /* Darker separators */
}

:root.light-theme .brand {
    color: #2c3140;
    text-shadow: none;
}

:root.light-theme .brand:hover {
    color: var(--accent-orange);
}

:root.light-theme .panel {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

:root.light-theme .panel-header h2 {
    text-shadow: none;
}

:root.light-theme .btn-white {
    background-color: #f8f9fa;
    border: 1px solid #e1e4ec;
}

:root.light-theme .hero h1 {
    color: #ffffff;
    /* Keep hero text white */
}

:root.light-theme .downloads-banner {
    background: linear-gradient(135deg, #ffffff, #f4f6f9);
    border-color: #e1e4ec;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

:root.light-theme .sys-link {
    background-color: #ffffff;
    border: 1px solid #e1e4ec;
    border-bottom: none;
}

:root.light-theme .sys-link:last-child {
    border-bottom: 1px solid #e1e4ec;
}

:root.light-theme .sys-link:hover {
    background-color: #f8f9fa;
    color: var(--accent-orange);
}

:root.light-theme .sys-link.highlight {
    background-color: #fff9f0;
    color: var(--accent-orange);
    border-bottom: 1px solid var(--border-color);
}

:root.light-theme .site-footer {
    background: #ffffff;
    border-top: 3px solid var(--accent-orange);
}

:root.light-theme .social-btn {
    background-color: #f0f2f5;
    border-color: #e1e4ec;
    color: #2c3140;
}

:root.light-theme .dropdown-menu {
    background-color: #ffffff;
    border-color: var(--accent-orange);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

:root.light-theme .dropdown-menu a {
    color: var(--text-main);
}

:root.light-theme .dropdown-menu a:hover {
    color: var(--accent-orange);
    background-color: #f0f2f5;
}

:root.light-theme .nav-links {
    background-color: #ffffff;
}

:root.light-theme .avatar-card {
    background-color: #ffffff;
    border: 1px solid #e1e4ec;
}

:root.light-theme .avatar-card:hover {
    border-color: var(--accent-orange);
    box-shadow: var(--shadow-deep);
}

:root.light-theme .avi-details h4 {
    color: var(--text-light);
}

:root.light-theme .balance-card {
    background-color: #f8f9fa;
    border: 1px solid #e1e4ec;
}

:root.light-theme .account-panel p {
    color: var(--text-light);
}

:root.light-theme .list-items li,
:root.light-theme .ranking-list li {
    border-bottom: 1px solid #f0f2f5;
}

:root.light-theme .info-group p {
    color: var(--text-main);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    background-color: #e8e8e8;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.5;
    /* Prevent horizontal scroll from entry animations and particles */
    overflow-x: hidden;
    width: 100vw;
    position: relative;
}

a {
    text-decoration: none;
    color: var(--text-main);
    transition: color var(--transition-fast), transform var(--transition-bounce);
    display: inline-block;
    /* Needed for transform */
}

a:hover {
    color: var(--text-light);
}

/* TOP NAV WITH DROPDOWN */
.top-nav {
    background: linear-gradient(to bottom, #2b2e42, #181a26);
    border-bottom: 2px solid var(--accent-orange);
    color: var(--text-light);
    height: 50px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.nav-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

.nav-left {
    display: flex;
    align-items: center;
    height: 100%;
}

.brand {
    color: var(--text-light);
    font-weight: 700;
    font-size: 15px;
    margin-right: 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(255, 153, 0, 0.4);
    transition: transform var(--transition-medium), text-shadow var(--transition-medium), color var(--transition-fast);
}

.brand:hover {
    transform: scale(1.05);
    color: var(--accent-orange);
    text-shadow: var(--glow-orange);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    width: 48px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    cursor: pointer;
    position: relative;
    transition: background var(--transition-medium);
}

:root.light-theme .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.theme-icon-dark,
.theme-icon-light {
    font-size: 11px;
    z-index: 1;
    transition: opacity var(--transition-fast);
}

.theme-toggle-btn::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 3px;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 0;
}

:root.light-theme .theme-toggle-btn::after {
    transform: translateX(21px);
    background: var(--accent-orange);
}

.lang-selector {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    height: 100%;
}

.nav-links>li {
    height: 100%;
    position: relative;
    /* For Dropdown positioning */
}

/* Vertical separators */
.nav-links>li:not(:last-child)::before {
    content: '';
    position: absolute;
    right: 0;
    top: 30%;
    height: 40%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 2;
}

.nav-links>li>a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 20px;
    color: #aeb4c9;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

/* Hover effect glow from bottom */
.nav-links>li>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: radial-gradient(circle at bottom, rgba(255, 153, 0, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-medium);
    pointer-events: none;
}

.nav-links>li:hover>a::after,
.nav-links>li>a.active::after {
    opacity: 1;
}

.nav-links>li:hover>a {
    color: var(--text-light);
    background-color: rgba(255, 255, 255, 0.03);
}

.nav-links>li>a.active {
    color: var(--text-light);
    background-color: rgba(255, 255, 255, 0.03);
}

.caret {
    font-size: 9px;
    margin-left: 6px;
    transition: transform var(--transition-medium);
    color: var(--accent-orange);
}

.nav-links>li:hover .caret {
    transform: rotate(180deg);
}

/* Dropdown Menu styling */
.dropdown-menu {
    position: absolute;
    top: 52px;
    left: 0;
    background-color: #1c1e2d;
    min-width: 180px;
    border-radius: 0 0 6px 6px;
    border: 1px solid #3a3f58;
    border-top: 3px solid var(--accent-orange);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: all var(--transition-medium);
    z-index: 90;
    overflow: hidden;
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.dropdown-menu li:last-child {
    border-bottom: none;
}

.dropdown-menu a {
    display: block;
    padding: 14px 20px;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all var(--transition-fast);
    position: relative;
}

.dropdown-menu a::before {
    content: '❯';
    position: absolute;
    left: 10px;
    opacity: 0;
    color: var(--accent-orange);
    transition: all var(--transition-fast);
    transform: translateX(-5px);
}

.dropdown-menu a:hover {
    background-color: #242738;
    color: var(--text-light);
    padding-left: 28px;
}

.dropdown-menu a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* Nav Right */
.lang-selector {
    cursor: pointer;
    transition: color var(--transition-fast);
}

.lang-selector:hover {
    color: var(--text-light);
    text-shadow: var(--glow-white);
}

/* HERO ANIMATION */
.hero {
    background-color: var(--bg-hero);
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #17161e;
    position: relative;
    overflow: hidden;
}

#heroVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 0;
    object-fit: cover;
}

.dotted {
    position: absolute;
    background: url('assets/img/dot.png') center top;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .4;
}

/* Simulate simple floating particles in CSS */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 153, 0, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    animation: floatParticle 10s infinite linear alternate;
    z-index: 1;
}

.hero::after {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(79, 165, 226, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
    animation: floatParticle2 15s infinite linear alternate;
    right: 10%;
    top: -50px;
}

@keyframes floatParticle {
    0% {
        transform: translate(-50px, -50px) scale(1);
    }

    100% {
        transform: translate(100px, 50px) scale(1.5);
    }
}

@keyframes floatParticle2 {
    0% {
        transform: translate(50px, 0px) scale(1);
    }

    100% {
        transform: translate(-100px, 100px) scale(1.2);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    animation: zoomIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    overflow: hidden;
    /* Prevent particle spill */
}

.hero h1 {
    color: var(--text-light);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    position: relative;
}

/* Hero Title Shine effect */
.hero h1::after {
    content: 'Gunbound Mundial';
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 200% 100%;
    animation: shineText 4s infinite linear;
}

@keyframes shineText {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* MAIN LAYOUT */
.main-container {
    max-width: 1400px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: 250px 1fr 240px;
    gap: 20px;
    padding: 0 10px;
}

.main-container>* {
    min-width: 0;
    /* Force grid items to shrink and avoid blowing out mobile viewport */
}

.main-container.wide-mode {
    grid-template-columns: 250px 1fr;
}

/* ANIMATIONS & EFFECTS UTILS */
.anim-slide-in-left {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInLeft 0.6s var(--transition-bounce) forwards;
    animation-delay: var(--delay, 0s);
}

.anim-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s var(--transition-bounce) forwards;
    animation-delay: var(--delay, 0s);
}

.anim-slide-in-right {
    opacity: 0;
    transform: translateX(30px);
    animation: slideInRight 0.6s var(--transition-bounce) forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* PANELS */
.panel {
    background-color: var(--bg-panel);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-fast);
}

.panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.2);
}

.panel-header {
    background-color: var(--bg-panel-header);
    padding: 20px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.panel-header h2 {
    font-size: 11px;
    color: var(--text-light);
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    padding-left: 10px;
}

/* Cute little bar next to headers */
.panel-header h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    background-color: var(--accent-orange);
    border-radius: 2px;
}

.link-more {
    font-size: 10px;
    color: var(--text-dim);
}

.link-more.pulse:hover {
    color: var(--accent-orange);
    animation: pulseText 1s infinite alternate;
}

@keyframes pulseText {
    0% {
        transform: scale(1);
        text-shadow: none;
    }

    100% {
        transform: scale(1.1);
        text-shadow: var(--glow-orange);
    }
}

.panel-body {
    padding: 15px;
}

/* SIDEBAR LEFT */
.sys-menu {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.sys-link {
    background-color: #212542;
    padding: 15px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    transition: all var(--transition-fast);
}

.sys-link.hover-slide:hover {
    background-color: #282d50;
    padding-left: 20px;
    color: var(--text-light);
}

.sys-link.highlight {
    background-color: #2c335a;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

/* Glow sweep animation */
.glow-on-hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}

.glow-on-hover:hover::after {
    left: 150%;
}

.block-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-white {
    background-color: #ffffff;
    color: #333333;
    border: none;
    border-radius: 4px;
    padding: 12px;
    font-weight: bold;
    font-size: 11px;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
}

.lift-up:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    background-color: #f0f0f0;
}

.btn-white .icon {
    margin-right: 15px;
    font-size: 16px;
    display: inline-block;
}

.btn-white:hover .pulse-icon {
    animation: iconPulse 1s infinite;
}

.btn-white:hover .bounce-icon {
    animation: iconBounce 1s infinite;
}

@keyframes iconPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes iconBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}

.list-items {
    list-style: none;
}

.list-items li {
    margin-bottom: 8px;
    padding-left: 10px;
    position: relative;
}

.list-items li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-dim);
    transition: color var(--transition-fast);
}

.list-hover li:hover::before {
    color: var(--accent-orange);
    text-shadow: var(--glow-orange);
}

.list-hover a {
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.list-hover li:hover a {
    transform: translateX(5px);
    color: var(--text-light);
}

.new-tag {
    background: red;
    color: white;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 5px;
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.ranking-list {
    list-style: none;
}

.ranking-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 500;
    transition: transform var(--transition-medium), background var(--transition-fast);
    padding: 4px;
    border-radius: 4px;
    cursor: default;
}

.hover-scale li:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.05);
}

.rank-num {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
    margin-right: 10px;
    font-size: 10px;
    position: relative;
    overflow: hidden;
}

.gold {
    background-color: #ff9900;
    box-shadow: 0 0 5px rgba(255, 153, 0, 0.5);
}

.silver {
    background-color: #c0c0c0;
}

.bronze {
    background-color: #cd7f32;
}

/* Shine sweep on rank numbers */
.shine-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100px;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    animation: sweepShine 3s infinite;
}

@keyframes sweepShine {
    0% {
        left: -100px;
    }

    20% {
        left: 100px;
    }

    100% {
        left: 100px;
    }
}

/* MIDDLE COLUMN */
.downloads-banner {
    background: linear-gradient(135deg, #1e2030, #141522);
    border: 1px solid #2a2d42;
    border-top: 2px solid var(--accent-orange);
    border-radius: 8px;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    /* IMPORTANT: Clip pseudo element glow */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.downloads-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 153, 0, 0.15) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.dl-info {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1;
}

.dl-icon-container {
    width: 50px;
    height: 50px;
    background: rgba(255, 153, 0, 0.1);
    border: 1px solid rgba(255, 153, 0, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-orange);
    font-size: 24px;
    box-shadow: 0 0 15px rgba(255, 153, 0, 0.2);
}

.dl-text h3 {
    color: var(--text-light);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dl-count {
    color: var(--accent-orange);
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
}

.dl-text p {
    font-size: 12px;
    color: #8c92a6;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dl-text .badge {
    background: #2b314d;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #3d456a;
}

.dl-text .size {
    color: #5d637a;
}

.btn-premium-download {
    background: linear-gradient(135deg, #ff9900 0%, #cc5200 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ffffff;
    font-weight: 800;
    font-style: italic;
    font-size: 16px;
    padding: 14px 35px;
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(204, 82, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-medium);
    z-index: 1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

.btn-premium-download:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 20px rgba(204, 82, 0, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-premium-download .btn-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    animation: premiumGlow 3s infinite linear;
    pointer-events: none;
}

@keyframes premiumGlow {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.btn-pulse {
    animation: btnBreath 2s infinite;
}

@keyframes btnBreath {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 153, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0);
    }
}

.btn-orange-large:hover {
    background: linear-gradient(180deg, #ffbb33, #ff8800);
    transform: translateY(-2px);
}

.download-icon {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.btn-orange-large:hover .download-icon {
    transform: translateY(3px);
}

.two-col-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.page-like-panel {
    min-height: 80px;
}

.block-social {
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-btn {
    border: none;
    background: #1877f2;
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}


.new-avatars .nav-arrows {
    display: flex;
    gap: 5px;
}

.nav-arrows .arrow {
    background-color: #272b47;
    color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: pointer;
    font-size: 10px;
    transition: all var(--transition-fast);
}

.press-effect:hover {
    background-color: var(--accent-orange);
    color: #000;
}

.press-effect:active {
    transform: scale(0.9);
}

.avatars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.avatar-card {
    background-color: #242845;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all var(--transition-medium);
    cursor: pointer;
    border: 1px solid transparent;
}

.hover-glow:hover {
    background-color: #2d3257;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.avi-img {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
    transition: transform var(--transition-bounce);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.hover-glow:hover .avi-img {
    transform: scale(1.1) rotate(5deg);
}

.avi-details h4 {
    color: #fff;
    font-size: 11px;
    margin-bottom: 2px;
    transition: color var(--transition-fast);
}

.hover-glow:hover .avi-details h4 {
    color: var(--accent-orange);
}

.avi-details p {
    font-size: 10px;
    margin-bottom: 2px;
}

.slide-price {
    transition: transform var(--transition-medium);
    color: var(--accent-orange);
    font-weight: 500;
    display: inline-block;
}

.hover-glow:hover .slide-price {
    transform: translateX(3px);
}

/* RIGHT COLUMN */
.profile-panel {
    padding: 15px 0 0 0;
}

.profile-header {
    text-align: center;
    padding: 0 15px 15px 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* PREMIUM LOGIN STYLES */
.login-header {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.login-header h2 {
    color: var(--text-light);
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.login-body {
    padding: 10px 15px;
}

.login-input {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px 15px;
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 12px;
    transition: all var(--transition-medium);
    box-sizing: border-box;
}

.login-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.login-input:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 10px rgba(255, 153, 0, 0.3), inset 0 0 5px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.6);
}

.form-btn {
    padding: 12px !important;
    font-size: 13px !important;
    letter-spacing: 1px;
    border-radius: 4px !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}


.avatar-circle {
    width: 60px;
    height: 60px;
    background: #151829;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 2px solid var(--accent-orange);
    padding: 2px;
    overflow: hidden;
}

:root.light-theme .avatar-circle {
    background: transparent;
}

.avatar-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.pulse-ring {
    animation: ringBreath 3s infinite;
}

@keyframes ringBreath {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 153, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0);
    }
}


.profile-header p {
    color: var(--text-light);
    font-size: 12px;
}

.highlight-orange {
    color: var(--accent-orange);
    font-weight: bold;
}

.glow-text {
    animation: textGlowAnim 2s infinite alternate;
}

@keyframes textGlowAnim {
    0% {
        text-shadow: none;
    }

    100% {
        text-shadow: var(--glow-orange);
    }
}

.small-text {
    font-size: 10px !important;
    color: var(--text-dim) !important;
    margin-top: 5px;
}

.logout-link:hover {
    color: #ff3333;
    text-decoration: underline;
}

.info-group {
    padding: 5px 15px;
    border-bottom: 1px solid var(--border-color);
}

.info-group:last-child {
    border-bottom: none;
}

.group-title {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.group-content {
    font-size: 11px;
    font-weight: 500;
}

.sidebar-avatar-preview {
    background: #151829;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}

:root.light-theme .sidebar-avatar-preview {
    background: transparent;
}

.avatar-preview-fallback {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.group-content p {
    margin-bottom: 4px;
}

.level-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

.badge-red {
    width: 14px;
    height: 14px;
    background-color: #ff3333;
    border-radius: 50%;
    display: inline-block;
}

.breathing {
    animation: breathRed 1.5s infinite alternate;
}

@keyframes breathRed {
    from {
        transform: scale(0.9);
        box-shadow: 0 0 2px rgba(255, 0, 0, 0.5);
    }

    to {
        transform: scale(1.2);
        box-shadow: 0 0 8px rgba(255, 0, 0, 1);
    }
}

.gold-text {
    color: var(--accent-orange);
}

.cash-text {
    color: var(--accent-green);
}

.points-text {
    color: var(--accent-blue);
}

.stats-content p {
    transition: transform var(--transition-fast);
}

.stats-content p:hover {
    transform: translateX(5px);
    filter: brightness(1.2);
}

.shake-on-hover {
    display: inline-block;
    cursor: pointer;
}

.shake-on-hover:hover {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-2px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(2px, 0, 0);
    }
}

.balance-card {
    background: #191c2e;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #272b47;
}

.highlight-green {
    color: var(--accent-green);
    font-weight: bold;
}

.btn-green {
    width: 100%;
    background: linear-gradient(180deg, #33cc55, #22aa44);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    margin-top: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.btn-green:hover {
    background: linear-gradient(180deg, #44dd66, #33bb55);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(51, 204, 85, 0.4);
}

.shiny-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: all 0.5s ease;
}

.shiny-btn:hover::before {
    left: 150%;
}


.account-panel p {
    font-size: 11px;
    margin-bottom: 5px;
    color: #fff;
}

.guild-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background var(--transition-fast);
}

.hover-slide-right:hover {
    background: rgba(255, 255, 255, 0.05);
}

.hover-slide-right:hover .guild-icon {
    transform: rotate(15deg) scale(1.1);
}

.guild-icon {
    width: 25px;
    height: 25px;
    background: linear-gradient(45deg, #444, #666);
    border-radius: 4px;
    transition: transform var(--transition-bounce);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.guild-name {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    transition: transform var(--transition-medium);
}

.hover-slide-right:hover .guild-name {
    transform: translateX(5px);
}

.sub-name {
    font-size: 9px;
    color: var(--text-dim);
}

/* FOOTER */
.site-footer {
    background: linear-gradient(to bottom, #111218, #0a0b0e);
    border-top: 3px solid var(--accent-orange);
    color: var(--text-main);
    padding: 40px 0 20px;
    margin-top: 40px;
}

.footer-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-logo h2 {
    color: var(--text-light);
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    font-style: italic;
}

.footer-logo p {
    color: var(--text-dim);
    font-size: 11px;
}

.footer-links ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: #aeb4c9;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--accent-orange);
    text-shadow: var(--glow-orange);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-social span {
    font-weight: bold;
    font-size: 11px;
    color: #aeb4c9;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: #1a1c29;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    transition: all var(--transition-medium);
    border: 1px solid #3a3f58;
}

.social-btn:hover {
    transform: translateY(-3px) scale(1.1);
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 153, 0, 0.4);
}

.social-btn.facebook:hover {
    background-color: #1877F2;
    border-color: #1877F2;
}

.social-btn.discord:hover {
    background-color: #5865F2;
    border-color: #5865F2;
}

.social-btn.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: transparent;
}

.footer-bottom {
    max-width: 1400px;
    width: 100%;
    margin: 30px auto 0;
    padding: 20px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dim);
    font-size: 11px;
}

.disclaimer {
    font-size: 10px;
}

/* RANKING PAGE */
.ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ranking-filters {
    display: flex;
    gap: 10px;
}

.btn-filter {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-filter:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}

.btn-filter.active {
    background: var(--glow-orange);
    color: var(--text-light);
    border-color: var(--accent-orange);
    font-weight: 600;
    box-shadow: 0 0 10px rgba(255, 153, 51, 0.3);
}

:root.light-theme .btn-filter {
    background: #f0f2f5;
    color: var(--text-main);
}

:root.light-theme .btn-filter.active {
    background: var(--accent-orange);
    color: #fff;
}

/* --- RANKING PODIUM --- */
.ranking-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 30px;
    margin: 40px 0 50px;
    flex-wrap: wrap;
}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 180px;
    position: relative;
    transition: transform 0.3s ease;
}

.podium-item:hover {
    transform: translateY(-5px);
}

.podium-item.first {
    order: 2;
    transform: translateY(-30px);
}

.podium-item.first:hover {
    transform: translateY(-35px);
}

.podium-item.second {
    order: 1;
}

.podium-item.third {
    order: 3;
}

/* Wreaths */
.wreath-container {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin-bottom: -20px;
    position: relative;
    z-index: 1;
}

.podium-item.first .wreath-container {
    width: 160px;
    height: 160px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
}

.wreath-bg {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.95;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.6));
}

.podium-item.first .wreath-bg {
    width: 100%;
    height: 180px;
}

.silver-theme .wreath-bg {
    background-image: url('assets/img/Ranking/plata.png');
}

.gold-theme .wreath-bg {
    background-image: url('assets/img/Ranking/oro.png');
}

.bronze-theme .wreath-bg {
    background-image: url('assets/img/Ranking/bronce.png');
}

.rank-number-3d {
    font-size: 70px;
    font-weight: 900;
    line-height: 1;
    z-index: 2;
    margin-top: 40px;
    /* Bajar los numeros para no tapar la corona */
}

.podium-item.first .rank-number-3d {
    font-size: 95px;
    margin-top: 50px;
}

.silver-num {
    color: #e0e0e0;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 1px rgba(0, 0, 0, .1), 0px 0px 5px rgba(0, 0, 0, .1), 0px 1px 3px rgba(0, 0, 0, .3), 0px 3px 5px rgba(0, 0, 0, .2), 0px 10px 10px rgba(0, 0, 0, .3);
}

.gold-num {
    color: #ffdf00;
    text-shadow: 0px 1px 0px #cca300, 0px 2px 0px #b38f00, 0px 3px 0px #997a00, 0px 4px 0px #806600, 0px 5px 0px #665200, 0px 6px 1px rgba(0, 0, 0, .1), 0px 0px 5px rgba(0, 0, 0, .1), 0px 1px 3px rgba(0, 0, 0, .3), 0px 3px 5px rgba(0, 0, 0, .2), 0px 10px 10px rgba(0, 0, 0, .3);
}

.bronze-num {
    color: #e6a88b;
    text-shadow: 0px 1px 0px #c07750, 0px 2px 0px #ab633e, 0px 3px 0px #95502e, 0px 4px 0px #803e1e, 0px 5px 0px #6a2e10, 0px 6px 1px rgba(0, 0, 0, .1), 0px 0px 5px rgba(0, 0, 0, .1), 0px 1px 3px rgba(0, 0, 0, .3), 0px 3px 5px rgba(0, 0, 0, .2), 0px 10px 10px rgba(0, 0, 0, .3);
}

/* Ribbons */
.ribbon-wrapper {
    position: relative;
    width: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    margin-bottom: 10px;
    margin-top: -15px;
    /* Subir la cinta para que toque la corona */
}

.podium-item.first .ribbon-wrapper {
    width: 175px;
    margin-top: -15px;
}

.ribbon-center {
    position: relative;
    z-index: 6;
    width: 100%;
    padding: 4px 10px;
    /* Thinner padding */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

/* Base Themes for Ribbons */
.silver-ribbon .ribbon-center {
    background: linear-gradient(to bottom, #eeeeee, #a0a0a0);
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #777777;
}

.red-ribbon .ribbon-center {
    background: linear-gradient(to bottom, #ff1a1a, #a30000);
    border-top: 2px solid #ff4d4d;
    border-bottom: 2px solid #660000;
}

.brown-ribbon .ribbon-center {
    background: linear-gradient(to bottom, #694030, #3d2218);
    border-top: 2px solid #8c5a48;
    border-bottom: 2px solid #1a0e0a;
}

/* Ribbon Tails (The Back Fold) */
.ribbon-tail {
    position: absolute;
    top: 6px;
    /* Drops it down behind the center */
    bottom: -6px;
    width: 35px;
    z-index: 4;
}

.left-tail {
    left: -20px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 10px 50%, 0 0);
}

.right-tail {
    right: -20px;
    clip-path: polygon(0 0, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
}

.silver-ribbon .ribbon-tail {
    background: #888888;
}

.red-ribbon .ribbon-tail {
    background: #800000;
}

.brown-ribbon .ribbon-tail {
    background: #2a1710;
}

/* The Fold Shadows (Connecting Triangles) */
.ribbon-center::before,
.ribbon-center::after {
    content: '';
    position: absolute;
    bottom: -6px;
    /* Exact distance the tail is pushed down */
    z-index: -1;
}

/* Silver Shadow */
.silver-ribbon .ribbon-center::before {
    left: 0;
    border-top: 6px solid #666;
    border-left: 15px solid transparent;
}

.silver-ribbon .ribbon-center::after {
    right: 0;
    border-top: 6px solid #666;
    border-right: 15px solid transparent;
}

/* Red Shadow */
.red-ribbon .ribbon-center::before {
    left: 0;
    border-top: 6px solid #4d0000;
    border-left: 15px solid transparent;
}

.red-ribbon .ribbon-center::after {
    right: 0;
    border-top: 6px solid #4d0000;
    border-right: 15px solid transparent;
}

/* Brown Shadow */
.brown-ribbon .ribbon-center::before {
    left: 0;
    border-top: 6px solid #140b08;
    border-left: 15px solid transparent;
}

.brown-ribbon .ribbon-center::after {
    right: 0;
    border-top: 6px solid #140b08;
    border-right: 15px solid transparent;
}

/* Guild Icons Inside Ribbon */
.guild-badge {
    font-size: 16px;
    display: inline-block;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.podium-item.first .guild-badge {
    font-size: 20px;
}

/* Player Name inside Ribbon */
.ribbon-center .player-name {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 5px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
}

.podium-item.first .ribbon-center .player-name {
    font-size: 14px;
}

.silver-ribbon .ribbon-center .player-name {
    color: #222;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}

/* Bottom Stats (Flags and GP) */
.podium-bottom-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.country-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: bold;
    color: var(--text-light);
}

:root.light-theme .country-info {
    color: #333;
}

.flag-icon {
    display: inline-block;
    width: 22px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    background-size: cover;
    background-position: center;
}

.flag-icon.pe {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="%23D91023"/><rect x="1" width="1" height="2" fill="%23fff"/><rect x="2" width="1" height="2" fill="%23D91023"/></svg>');
}

.flag-icon.bo {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="3" height="0.66" fill="%23D91023"/><rect y="0.66" width="3" height="0.67" fill="%23F9E11E"/><rect y="1.33" width="3" height="0.67" fill="%23007A33"/></svg>');
}

.gp-info {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-dim);
}

.podium-item.first .gp-info {
    font-size: 16px;
}

:root.light-theme .gp-info {
    color: var(--text-main);
}

/* --- PREMIUM RANKING TABLE --- */
.table-responsive {
    overflow: visible;
    /* Prevent tooltips from getting clipped */
    margin-top: 20px;
    padding: 0 15px;
    /* Added extra padding to prevent rank-circle cutoff */
}

.ranking-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    text-align: left;
    min-width: 600px;
    table-layout: fixed;
    /* Fix header misalignment */
}

.ranking-table th {
    padding: 10px 15px;
    color: var(--text-dim);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    background: transparent;
    white-space: nowrap;
}

/* Explicit Column Widths */
.ranking-table th:nth-child(1) {
    width: 50px;
    text-align: center;
}

/* # */
.ranking-table th:nth-child(2) {
    width: 60px;
    text-align: center;
}

/* Nivel */
.ranking-table th:nth-child(3) {
    width: 180px;
}

/* Jugador */
.ranking-table th:nth-child(4) {
    width: 110px;
}

/* Guild */
.ranking-table th:nth-child(5) {
    width: 140px;
}

/* Puntos */
.ranking-table th:nth-child(6) {
    width: 120px;
}

/* Win Rate */

.ranking-table td {
    padding: 14px 15px;
    background: rgba(20, 22, 33, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    /* Ensure flex contents don't override text truncation */
    max-width: 0;
}

.ranking-table td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.ranking-table td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.ranking-table tbody tr:hover td {
    background: rgba(30, 34, 50, 0.9);
    border-color: rgba(255, 153, 51, 0.4);
    position: relative;
    z-index: 50;
    /* Ensure tooltip and row overlap others */
}

/* Light Mode Overrides for Premium Table */
:root.light-theme .ranking-table td {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.05);
}

:root.light-theme .ranking-table tbody tr:hover td {
    background: #fff;
    border-color: rgba(255, 153, 51, 0.6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.rank-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--panel-bg), var(--bg-primary));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-weight: 800;
    color: var(--text-light);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    margin-left: 5px;
    /* Give breathing room from the left border */
}

:root.light-theme .rank-circle {
    color: var(--text-main);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.win-rate-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.win-rate-track {
    width: 80px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

:root.light-theme .win-rate-track {
    background: rgba(0, 0, 0, 0.1);
}

.win-rate-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff4757, #ff6b81);
    border-radius: 3px;
    transition: width 1s ease-out;
}

.win-rate-percent {
    font-weight: 700;
    color: var(--text-light);
    min-width: 40px;
}

.gold-gp {
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
}

.guild-tag {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    color: var(--text-muted);
}

:root.light-theme .guild-tag {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}

/* Avatar Popup Tooltip */
.has-tooltip {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.avatar-tooltip {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    /* Adjust positioning to pop straight up above the player name */
    bottom: 100%;
    left: 30%;
    transform: translateX(-50%) translateY(10px);
    margin-bottom: 8px;
    /* Breathing room */
    background: rgba(15, 17, 26, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
    pointer-events: none;
}

.has-tooltip:hover .avatar-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    /* Slide up gracefully */
    z-index: 9999;
}

.avatar-tooltip iframe {
    width: 250px;
    height: 160px;
    border: none;
    display: block;
    background: transparent;
}

.avatar-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    /* Align to bottom of tooltip pointing down */
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1) transparent transparent transparent;
}

:root.light-theme .ranking-table td {
    border-bottom: 1px solid #f0f2f5;
}

.rank-row:hover td {
    background: rgba(255, 255, 255, 0.03);
}

:root.light-theme .rank-row:hover td {
    background: #f8f9fa;
}

.rank-number {
    font-weight: bold;
    color: var(--text-dim);
}

.player-name.highlight {
    color: var(--text-light);
    font-weight: bold;
}

:root.light-theme .player-name.highlight {
    color: #2c3140;
}

.guild-text {
    color: var(--accent-blue);
    font-size: 11px;
}

.table-responsive {
    overflow-x: auto;
}

/* R E S P O N S I V E N E S S */
/* RESPONSIVENESS */
@media (max-width: 1024px) {

    .main-container,
    .main-container.wide-mode {
        grid-template-columns: 1fr;
    }

    .sidebar-left {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }

    .profile-panel {
        padding: 15px;
    }

    .downloads-banner {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .nav-links>li>a {
        padding: 0 10px;
        font-size: 10px;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 30px 0 15px;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .footer-links ul {
        flex-direction: column;
        gap: 10px;
    }

    .footer-social {
        flex-direction: column;
        gap: 10px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .top-nav {
        height: 60px;
    }

    .nav-container {
        padding: 0 15px;
    }

    .menu-toggle {
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1000;
        position: relative;
    }

    .hamburger {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text-light);
        position: relative;
        transition: all var(--transition-medium);
    }

    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--text-light);
        left: 0;
        transition: all var(--transition-medium);
    }

    .hamburger::before {
        top: -8px;
    }

    .hamburger::after {
        top: 8px;
    }

    .menu-toggle.active .hamburger {
        background-color: transparent;
    }

    .menu-toggle.active .hamburger::before {
        top: 0;
        transform: rotate(45deg);
    }

    .menu-toggle.active .hamburger::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .nav-links {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 60px);
        background-color: #1a1c29;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0;
        gap: 0;
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-medium);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
        border-top: 2px solid var(--accent-orange);
        overflow-y: auto;
        z-index: 999;
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        padding: 10px 0;
    }

    .nav-links>li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-links>li>a {
        padding: 12px 20px;
        font-size: 11px;
        justify-content: space-between;
    }

    .nav-links>li:not(:last-child)::before {
        display: none;
    }

    .nav-links>li>a::after {
        display: none;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        min-width: 100%;
        border: none;
        background-color: transparent;
        display: block;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height 0.4s ease, padding 0.4s ease, background-color 0.4s ease;
    }

    .has-dropdown.open .dropdown-menu {
        max-height: 400px;
        /* Enough height for content */
        padding: 5px 0;
        background-color: rgba(0, 0, 0, 0.2);
    }

    :root.light-theme .has-dropdown.open .dropdown-menu {
        background-color: rgba(0, 0, 0, 0.05);
        /* Lighter background for dropdown in light mode */
    }

    .has-dropdown.open>a .caret {
        transform: rotate(180deg);
        color: var(--text-light);
    }

    .dropdown-menu a {
        padding: 10px 15px 10px 30px;
        font-size: 10px;
        color: var(--text-dim);
    }

    .dropdown-menu a::before {
        display: none;
    }

    .mobile-overlay {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-medium);
        backdrop-filter: blur(3px);
    }

    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* AVATAR TOOLTIPS IN RANKING */
    .has-tooltip {
        position: relative;
        cursor: pointer;
    }

    .avatar-tooltip {
        position: absolute;
        bottom: 110%;
        /* Show above by default */
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background: rgba(20, 22, 33, 0.95);
        border: 1px solid var(--accent-orange);
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), var(--glow-orange);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-medium);
        z-index: 1000;
        pointer-events: none;
        width: 140px;
        height: 160px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .avatar-tooltip iframe {
        width: 130px;
        height: 150px;
        border: none;
        transform: scale(0.9);
        transform-origin: center center;
    }

    /* Tooltip caret */
    .avatar-tooltip::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: rgba(20, 22, 33, 0.95);
        border-right: 1px solid var(--accent-orange);
        border-bottom: 1px solid var(--accent-orange);
    }

    .has-tooltip:hover .avatar-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    /* Adjust tooltip position for table rows */
    .rank-row .avatar-tooltip {
        bottom: auto;
        top: 50%;
        left: 100%;
        transform: translate(10px, -50%);
        margin-left: 10px;
    }

    .rank-row .avatar-tooltip::after {
        bottom: auto;
        top: 50%;
        left: -6px;
        transform: translateY(-50%) rotate(135deg);
    }

    .rank-row.has-tooltip:hover .avatar-tooltip {
        transform: translate(0, -50%);
    }

    body.no-scroll {
        overflow: hidden;
    }

    .main-container,
    .main-container.wide-mode {
        grid-template-columns: 1fr;
    }

    /* Navbar Overrides to prevent overflow */
    .brand {
        margin-right: 15px;
        font-size: 13px;
    }

    .nav-right {
        gap: 5px;
        /* Reduce gap between lang and theme toggle */
    }

    .lang-selector {
        display: none;
        /* Hide language selector on mobile to save space */
    }

    /* Ranking Header & Filters */
    .ranking-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .ranking-filters {
        flex-wrap: wrap;
        /* Prevent buttons from stretching the screen */
        width: 100%;
        gap: 5px;
    }

    .btn-filter {
        padding: 6px 12px;
        font-size: 0.8rem;
        flex: 1;
        /* Make buttons share width evenly */
        text-align: center;
    }

    /* Search panel and inputs */
    .search-panel {
        flex-direction: column;
        width: 100%;
    }

    .search-panel form {
        width: 100%;
        display: flex;
        gap: 5px;
    }

    .search-input {
        width: 100%;
        flex: 1;
    }

    /* Prevent ranking table from overlapping podium on small screens */
    .table-responsive {
        margin-top: 20px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 5px;
        /* Reduce padding to give table more space */
        width: 100%;
        max-width: 100vw;
    }

    .ranking-table {
        margin-top: 0 !important;
        min-width: 660px;
        /* Force scroll to prevent column squashing */
    }

    .ranking-table th,
    .ranking-table td {
        padding: 10px 5px;
        /* Reduce padding aggressively on mobile */
    }

    /* Stack the premium podium vertically on mobile to prevent squishing */
    .ranking-podium.premium-podium {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        margin-bottom: 20px;
        padding-top: 10px;
    }

    /* Hide complex hover tooltips on mobile devices (touch screens) */
    .avatar-tooltip {
        display: none !important;
    }

    .two-col-panels {
        grid-template-columns: 1fr;
    }

    .avatars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h1 {
        font-size: 28px;
        text-align: center;
        padding: 0 10px;
    }

    .hero {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .avatars-grid {
        grid-template-columns: 1fr;
    }

    .brand {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .panel-body {
        padding: 10px;
    }

    .ranking-table {
        min-width: 580px;
        /* Slight scale down to fit tight screens while scrolling */
    }

    .ranking-table th:nth-child(4) {
        /* Jugador */
        width: 140px;
    }

    .ranking-table th:nth-child(5) {
        /* Guild */
        width: 120px;
    }
}