/* ==========================================================================

   FRAGZONE.NET GAMING PORTAL THEME

   Modern CS 1.6 Gaming Community Portal

   ========================================================================== */



:root {

    --bg-darkest: #070a0f;

    --bg-main: #0b0f19;

    --bg-card: #111726;

    --bg-card-hover: #161e31;

    --bg-pill: rgba(255, 255, 255, 0.06);

    --border-subtle: rgba(255, 255, 255, 0.08);

    --border-glow: rgba(245, 158, 11, 0.3);



    --gold-primary: #f59e0b;

    --gold-hover: #fbbf24;

    --gold-dark: #b45309;

    --gold-gradient: linear-gradient(135deg, #f59e0b, #d97706);



    --blue-primary: #2563eb;

    --blue-hover: #3b82f6;



    --green-primary: #10b981;

    --green-hover: #059669;



    --red-danger: #ef4444;



    --text-white: #ffffff;

    --text-muted: #94a3b8;

    --text-dim: #64748b;



    --font: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    overflow-x: hidden;
    touch-action: pan-y;

    width: 100%;

    max-width: 100%;

}



body {

    background-color: #06090f;

    background-image: 
        radial-gradient(ellipse at 50% 30%, rgba(6, 9, 15, 0.15) 0%, rgba(6, 9, 15, 0.40) 70%, rgba(4, 6, 10, 0.70) 100%),
        linear-gradient(180deg, rgba(6, 9, 15, 0.10) 0%, rgba(6, 9, 15, 0.45) 100%),
        url('img/body_bg.jpg?v=3');

    background-attachment: fixed;

    background-position: center top;

    background-repeat: no-repeat;

    background-size: cover;

    color: var(--text-white);

    font-family: var(--font);

    line-height: 1.5;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;

    width: 100%;

    max-width: 100%;

}



/* ==========================================================================

   Floating Translucent Site Header (Sticky on scroll, shows hero banner behind)

   ========================================================================== */

.site-header-container {

    position: -webkit-sticky;

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(7, 10, 15, 0.32);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);

    transition: background 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}



.site-header-container.is-scrolled {

    background: rgba(7, 10, 16, 0.92);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

}



.top-bar {

    background: transparent;

    padding: 10px 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    position: relative;

    z-index: 120;

}



.brand-wrapper {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    transition: opacity 0.2s;

}



.site-brand-logo {

    height: 48px;

    max-height: 52px;

    width: auto;

    display: block;

    object-fit: contain;

    filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.45)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

}



.brand-wrapper:hover .site-brand-logo {

    transform: scale(1.04) translateY(-1px);

    filter: drop-shadow(0 0 22px rgba(56, 189, 248, 0.85)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.95));

}



.brand-text-block {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 1px;

}



.brand-name-main {

    font-size: 24px;

    font-weight: 900;

    letter-spacing: 1.5px;

    color: #fff;

    line-height: 1;

    text-transform: uppercase;

    text-shadow: 0 0 12px rgba(56, 189, 248, 0.5), 0 2px 8px rgba(0, 0, 0, 0.9);

}



.brand-name-main span {

    color: var(--gold-primary);

    text-shadow: 0 0 12px rgba(245, 158, 11, 0.6);

}



.brand-name-main .brand-ext {

    color: #38bdf8;

    font-size: 19px;

    text-shadow: 0 0 14px rgba(56, 189, 248, 0.85);

}



.brand-tagline {

    font-size: 9px;

    font-weight: 800;

    color: #94a3b8;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-top: 2px;

}



.player-of-the-day {

    display: flex;

    align-items: center;

    gap: 8px;

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid rgba(245, 158, 11, 0.3);

    padding: 6px 14px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

}



.potd-badge {

    background: var(--gold-primary);

    color: #000;

    font-size: 10px;

    font-weight: 800;

    padding: 2px 6px;

    border-radius: 10px;

    text-transform: uppercase;

}



.potd-name {

    color: #fff;

}



.potd-stat {

    color: var(--text-muted);

}



.top-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}



.lang-switch {

    display: flex;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--border-subtle);

    border-radius: 16px;

    padding: 2px;

    font-size: 11px;

    font-weight: 700;

}



.lang-btn {

    padding: 3px 8px;

    border-radius: 14px;

    color: var(--text-muted);

    text-decoration: none;

    cursor: pointer;

}



.lang-btn.active {

    background: var(--gold-primary);

    color: #000;

}



/* Header Buttons */

.btn-top {

    padding: 7px 14px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    border: none;

    cursor: pointer;

    transition: all 0.2s ease;

}



.btn-gold {

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: #000;

    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);

}



.btn-gold:hover {

    background: linear-gradient(135deg, #fbbf24, #f59e0b);

    transform: translateY(-1px);

}



.btn-blue {

    background: #2563eb;

    color: #fff;

}



.btn-blue:hover {

    background: #3b82f6;

    transform: translateY(-1px);

}



.btn-dark {

    background: rgba(255, 255, 255, 0.08);

    color: #fff;

    border: 1px solid var(--border-subtle);

}



.btn-dark:hover {

    background: rgba(255, 255, 255, 0.14);

}



.btn-green {

    background: linear-gradient(135deg, #10b981, #059669);

    color: #fff;

    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);

}



.btn-green:hover {

    background: linear-gradient(135deg, #34d399, #10b981);

    transform: translateY(-1px);

}

.btn-red {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(248, 113, 113, 0.45) !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35) !important;
}

.btn-red:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.55) !important;
    border-color: rgba(248, 113, 113, 0.75) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.btn-purple {
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(192, 132, 252, 0.45) !important;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.35) !important;
}

.btn-purple:hover {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.55) !important;
    border-color: rgba(192, 132, 252, 0.75) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}



/* ==========================================================================

   Secondary Horizontal Pill Menu (Navigation)

   ========================================================================== */

.nav-pill-bar {

    background: transparent;

    padding: 8px 30px 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    overflow: visible;

    white-space: nowrap;

    position: relative;

    z-index: 50;

}



.nav-pill {

    padding: 7px 18px;

    border-radius: 24px;

    font-size: 13px;

    font-weight: 700;

    color: #cbd5e1;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(15, 23, 42, 0.55);

    backdrop-filter: blur(6px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.nav-pill:hover {

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

    border-color: rgba(255, 255, 255, 0.25);

    transform: translateY(-1px);

}



.nav-pill.active {

    background: var(--gold-primary);

    color: #000;

    font-weight: 800;

    border-color: var(--gold-primary);

    box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);

}



.nav-pill-badge {

    background: #ef4444;

    color: #fff;

    font-size: 10px;

    font-weight: 800;

    padding: 1px 6px;

    border-radius: 10px;

    margin-left: 2px;

}



/* ==========================================================================

   Navigation Dropdown Menu Component (Casino Games Dropdown)

   ========================================================================== */

.nav-dropdown {

    position: relative;

    display: inline-flex;

    align-items: center;

    z-index: 90;

}



/* Extended invisible hit area around dropdown container to prevent accidental mouseleave */

.nav-dropdown::before {

    content: '';

    position: absolute;

    top: -6px;

    bottom: -12px;

    left: -10px;

    right: -10px;

    background: transparent;

    pointer-events: auto;

    z-index: 0;

}



.nav-dropdown:hover,

.nav-dropdown:focus-within,

.nav-dropdown.is-hovered,

.nav-dropdown.is-open {

    z-index: 99999;

}



.nav-dropdown-toggle {

    cursor: pointer;

    user-select: none;

    position: relative;

    z-index: 2;

}



.nav-dropdown-arrow {

    font-size: 10px;

    margin-left: 5px;

    transition: transform 0.22s ease;

    opacity: 0.8;

    pointer-events: none;

}



.nav-dropdown:hover .nav-dropdown-arrow,

.nav-dropdown:focus-within .nav-dropdown-arrow,

.nav-dropdown.is-hovered .nav-dropdown-arrow,

.nav-dropdown.is-open .nav-dropdown-arrow {

    transform: rotate(180deg);

    opacity: 1;

}



.nav-dropdown-menu {

    position: absolute;

    top: 100%;

    margin-top: 6px;

    left: 50%;

    transform: translateX(-50%) translateY(-4px);

    background: linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(6, 9, 14, 0.99));

    border: 1px solid rgba(245, 158, 11, 0.45);

    border-radius: 14px;

    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.88), 0 0 25px rgba(245, 158, 11, 0.2);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    min-width: 295px;

    padding: 10px 8px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    /* Grace period delay: 0.22s delay on leave so micro-slips never close the menu */

    transition: opacity 0.22s ease 0.22s, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) 0.22s, visibility 0.22s ease 0.22s;

    z-index: 999999;

}



/* Little diamond pointer arrow at top of dropdown */

.nav-dropdown-menu::before {

    content: '';

    position: absolute;

    top: -6px;

    left: 50%;

    transform: translateX(-50%) rotate(45deg);

    width: 12px;

    height: 12px;

    background: #111827;

    border-left: 1px solid rgba(245, 158, 11, 0.45);

    border-top: 1px solid rgba(245, 158, 11, 0.45);

    z-index: 2;

    pointer-events: none;

}



/* INVISIBLE HOVER BRIDGE:

   Spans 26px upwards and 20px horizontally beyond the menu borders.

   Ensures that moving the cursor from button downwards to menu can NEVER leave hover zone! */

.nav-dropdown-menu::after {

    content: '';

    position: absolute;

    top: -26px;

    left: -20px;

    right: -20px;

    height: 32px;

    background: transparent;

    pointer-events: auto;

    z-index: 1;

}



.nav-dropdown:hover .nav-dropdown-menu,

.nav-dropdown:focus-within .nav-dropdown-menu,

.nav-dropdown.is-hovered .nav-dropdown-menu,

.nav-dropdown.is-open .nav-dropdown-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateX(-50%) translateY(0);

    /* Open immediately with ZERO delay */

    transition-delay: 0s !important;

}



.nav-dropdown-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    border-radius: 9px;

    color: #e2e8f0;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: all 0.18s ease;

    border: 1px solid transparent;

    margin-bottom: 2px;

}



.nav-dropdown-item i {

    width: 26px;

    height: 26px;

    border-radius: 6px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    background: rgba(245, 158, 11, 0.15);

    color: #fbbf24;

    border: 1px solid rgba(245, 158, 11, 0.25);

    flex-shrink: 0;

    transition: transform 0.2s ease, background 0.2s ease;

}



.nav-dropdown-item .nav-dd-text {

    flex: 1;

    display: flex;

    flex-direction: column;

    text-align: left;

}



.nav-dropdown-item .nav-dd-title {

    font-size: 13px;

    font-weight: 800;

    color: #fff;

    line-height: 1.2;

}



.nav-dropdown-item .nav-dd-sub {

    font-size: 10px;

    font-weight: 600;

    color: #94a3b8;

    margin-top: 2px;

}



.nav-dropdown-item .nav-dd-badge {

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    padding: 3px 7px;

    border-radius: 6px;

    background: rgba(245, 158, 11, 0.18);

    color: #fbbf24;

    border: 1px solid rgba(245, 158, 11, 0.35);

    flex-shrink: 0;

}



.nav-dropdown-item:hover {

    background: rgba(245, 158, 11, 0.12);

    border-color: rgba(245, 158, 11, 0.3);

    color: #fff;

    transform: translateX(3px);

}



.nav-dropdown-item:hover i {

    transform: scale(1.1);

    background: rgba(245, 158, 11, 0.3);

    color: #fff;

}



.nav-dropdown-item.active {

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.32));

    border-color: rgba(245, 158, 11, 0.5);

}



.nav-dropdown-item.active .nav-dd-title {

    color: #fbbf24;

}



.nav-dropdown-divider {

    height: 1px;

    background: rgba(255, 255, 255, 0.08);

    margin: 6px 4px 8px 4px;

}



/* ==========================================================================

   Hero Artwork Banner Section (Matches Reference Screenshot 1)

   ========================================================================== */

.hero-artwork-section {

    position: relative;

    width: 100%;

    /* Panoramic height tailored to showcase the entire artwork without clipping */

    height: clamp(520px, 37.5vw, 720px);

    margin-top: -95px; /* Pulls banner smoothly under the translucent sticky navbar */

    background: url('img/hero_banner.jpg?v=12') no-repeat center top;

    background-size: cover;

    overflow: hidden;

}



.hero-bg-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center top;

    z-index: 1;

    pointer-events: none;

    image-rendering: -webkit-optimize-contrast;

    filter: contrast(106%) saturate(106%) brightness(102%);

    transform: translateZ(0);

    will-change: transform;

}



.hero-overlay-gradient {

    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(180deg, 

        rgba(7, 10, 15, 0.38) 0%, 

        transparent 15%,

        transparent 75%, 

        rgba(7, 10, 15, 0.45) 90%, 

        var(--bg-darkest) 100%

    );

    pointer-events: none;
}

/* Hero Video Volume & Mute Controls (Симпатична & Компактна Микро-Капсула) */
.hero-audio-ctrl {
    position: absolute !important;
    right: 20px !important;
    bottom: 18px !important;
    z-index: 25 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(7, 11, 20, 0.82) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 3px 9px 3px 4px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.12) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    pointer-events: auto !important;
}

.hero-audio-ctrl:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    background: rgba(8, 14, 26, 0.94) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.75), 0 0 16px rgba(56, 189, 248, 0.25) !important;
    transform: translateY(-1px) !important;
}

.hero-mute-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.hero-mute-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.hero-mute-btn.unmuted {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(16, 185, 129, 0.3) 100%) !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.45) !important;
}

.hero-volume-bar-wrap {
    display: flex !important;
    align-items: center !important;
    width: 52px !important;
    flex-shrink: 0 !important;
}

.hero-volume-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    outline: none !important;
    cursor: pointer !important;
    transition: background 0.2s, opacity 0.2s !important;
}

.hero-volume-slider:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

.hero-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #38bdf8 !important;
    cursor: pointer !important;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.8) !important;
    border: 1.5px solid #070b14 !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}

.hero-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25) !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 1) !important;
}

.hero-volume-slider::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #38bdf8 !important;
    cursor: pointer !important;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.8) !important;
    border: 1.5px solid #070b14 !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}

@media (max-width: 768px) {
    .hero-split-brand-wrap {
        margin-bottom: 28px !important;
    }

    .hero-audio-ctrl {
        right: 12px !important;
        bottom: 10px !important;
        padding: 2.5px 7px 2.5px 3.5px !important;
        gap: 5px !important;
        border-radius: 16px !important;
        background: rgba(6, 10, 18, 0.88) !important;
        border: 1px solid rgba(56, 189, 248, 0.35) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.75) !important;
    }

    .hero-mute-btn {
        width: 21px !important;
        height: 21px !important;
        font-size: 9.5px !important;
    }

    .hero-volume-bar-wrap {
        width: 38px !important;
    }

    .hero-volume-slider {
        height: 3px !important;
    }

    .hero-volume-slider::-webkit-slider-thumb {
        width: 8px !important;
        height: 8px !important;
    }

    .hero-volume-slider::-moz-range-thumb {
        width: 8px !important;
        height: 8px !important;
    }
}


/* Page-Specific Themed Hero Backgrounds */

.hero-artwork-section.hero-shop {

    background-image: url('img/hero_shop.jpg?v=2');

}



.hero-artwork-section.hero-casino {

    background-image: url('img/hero_casino.jpg?v=2');

}



.hero-artwork-section.hero-servers {

    background-image: url('img/hero_servers.jpg?v=2');

}



.hero-artwork-section.hero-inventory {

    background-image: url('img/hero_shop.jpg?v=2');

}



.hero-artwork-section.hero-profile {

    background-image: url('img/hero_servers.jpg?v=2');

}



/* Dedicated Operative / Player Models Hero Artwork */

.hero-artwork-section.hero-casino-players {

    background-image: url('img/hero_casino_players.jpg?v=1');

}



.hero-artwork-section.hero-inventory-players {

    background-image: url('img/hero_inventory_players.jpg?v=1');

}



.hero-artwork-section.hero-shop-players {

    background-image: url('img/hero_shop_players.jpg?v=1');

}



/* Center Hero Branding Overlay (Index / Video Hero) */

.hero-center-brand-wrap {

    position: absolute;

    top: 52%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    pointer-events: none;

    width: 100%;

    max-width: 900px;

    padding: 0 20px;

}



.hero-center-logo {

    max-width: clamp(260px, 38vw, 520px);

    height: auto;

    display: block;

    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 35px rgba(56, 189, 248, 0.55));

    animation: heroLogoFloat 4s ease-in-out infinite alternate;

}



@keyframes heroLogoFloat {

    0% { transform: translateY(0); filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 30px rgba(56, 189, 248, 0.45)); }

    100% { transform: translateY(-6px); filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.98)) drop-shadow(0 0 50px rgba(56, 189, 248, 0.75)); }

}



.hero-center-tagline {

    margin-top: 14px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    background: rgba(10, 14, 23, 0.82);

    border: 1px solid rgba(245, 158, 11, 0.45);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 0 20px rgba(245, 158, 11, 0.2);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    padding: 8px 22px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #e2e8f0;

}



.hero-center-tagline span {

    color: var(--gold-primary);

}



.hero-center-tagline .hero-tag-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #38bdf8;

    box-shadow: 0 0 8px #38bdf8;

    display: inline-block;

}



/* ==========================================================================

   SteamID Locker Search Box (Placed inside content area)

   ========================================================================== */

.locker-search-box {

    background: var(--bg-card);

    border: 1px solid rgba(245, 158, 11, 0.35);

    border-radius: 12px;

    padding: 14px 20px;

    margin-bottom: 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

}



.locker-search-info {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.locker-badge {

    color: var(--gold-primary);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.locker-prompt {

    font-size: 13px;

    color: var(--text-white);

    font-weight: 600;

}



.locker-search-form {

    display: flex;

    gap: 8px;

    align-items: center;

    flex: 1;

    max-width: 480px;

}



.locker-search-input {

    flex: 1;

    background: rgba(7, 10, 15, 0.85);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #fff;

    padding: 10px 16px;

    border-radius: 8px;

    font-size: 13px;

    font-family: monospace;

    outline: none;

    transition: border-color 0.2s;

}



.locker-search-input:focus {

    border-color: var(--gold-primary);

    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);

}



.locker-search-btn {

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: #000;

    font-weight: 800;

    font-size: 12px;

    padding: 10px 18px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    white-space: nowrap;

    transition: all 0.2s;

}



.locker-search-btn:hover {

    background: linear-gradient(135deg, #fbbf24, #f59e0b);

    transform: translateY(-1px);

}



.locker-search-clear {

    color: var(--text-muted);

    font-size: 12px;

    text-decoration: none;

    padding: 6px 10px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.05);

}



.locker-search-clear:hover {

    color: #fff;

    background: rgba(255, 255, 255, 0.1);

}



/* ==========================================================================

   Main Content Layout (Two Columns)

   ========================================================================== */

.main-wrapper {

    max-width: 1320px;

    margin: 0 auto;

    padding: 24px;

    width: 100%;

    flex: 1;

}



.content-grid {

    display: flex;

    align-items: flex-start;

    gap: 28px;

    width: 100%;

}



.content-grid.sidebar-left {

    flex-direction: row-reverse;

}



.main-column {

    flex: 1 1 0%;

    min-width: 0;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

}



.sidebar {

    width: 340px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



@media (max-width: 1024px) {

    .content-grid,

    .content-grid.sidebar-left {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

    }



    .main-column {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin-bottom: 24px !important;

        flex: none !important;

    }



    .sidebar {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        align-self: stretch !important;

        flex: none !important;

        gap: 16px !important;

    }



    .sidebar .forum-threads-wrapper,

    .sidebar .glass-card,

    .sidebar .sidebar-server-box {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

    }

}



/* Section Headers */

.section-header-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--border-subtle);

}



.section-headline {

    font-size: 24px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: #fff;

}



.section-link {

    color: #38bdf8;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: color 0.2s;

}



.section-link:hover {

    color: #7dd3fc;

}



/* ==========================================================================

   Weapon Filter Tabs

   ========================================================================== */

.filter-tabs {

    display: flex;

    gap: 8px;

    margin-bottom: 20px;

    flex-wrap: wrap;

}



.tab-btn {

    padding: 7px 14px;

    border-radius: 8px;

    background: var(--bg-card);

    border: 1px solid var(--border-subtle);

    color: var(--text-muted);

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.2s;

}



.tab-btn:hover, .tab-btn.active {

    background: rgba(245, 158, 11, 0.15);

    border-color: var(--gold-primary);

    color: var(--gold-hover);

}



/* ==========================================================================

   Weapon Cards Grid

/* ==========================================================================

   Weapon Cards Full-Width Rows (1 Skin Per Row Showcase)

   ========================================================================== */

.weapons-grid {

    display: flex;

    flex-direction: column;

    gap: 24px;

    width: 100%;

}



.weapon-card {

    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(11, 15, 25, 0.98) 100%);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    padding: 22px 24px;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

}



.weapon-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: transparent;

    transition: background 0.3s ease;

}



.weapon-card.skin-theme-red,

.weapon-card.skin-theme-gold {

    border: 1px solid rgba(255, 255, 255, 0.08);

}



.weapon-card:hover,

.weapon-card.skin-theme-red:hover,

.weapon-card.skin-theme-gold:hover {

    border-color: rgba(245, 158, 11, 0.45);

    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(245, 158, 11, 0.15);

}



.weapon-card:hover::before,

.weapon-card.skin-theme-red:hover::before,

.weapon-card.skin-theme-gold:hover::before {

    background: linear-gradient(90deg, #f59e0b, #fbbf24, transparent);

}



.weapon-card.equipped {

    border-color: var(--green-primary);

    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);

}



.weapon-card.equipped::before {

    background: var(--green-primary);

}



/* ==========================================================================

   Interactive Variant Switcher Bar

   ========================================================================== */

.variant-switcher-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    background: rgba(12, 16, 26, 0.75);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 10px 14px;

    margin-bottom: 16px;

    flex-wrap: wrap;

}



.switcher-title {

    font-size: 11px;

    font-weight: 800;

    color: var(--gold-hover);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    display: flex;

    align-items: center;

    gap: 6px;

}



.switcher-buttons {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.btn-var-switch {

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.09);

    color: #cbd5e1;

    font-size: 11px;

    font-weight: 800;

    padding: 6px 12px;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.2s ease;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    text-transform: uppercase;

    letter-spacing: 0.3px;

}



.btn-var-switch:hover {

    background: rgba(255, 255, 255, 0.09);

    color: #fff;

    border-color: rgba(255, 255, 255, 0.2);

}



.btn-var-switch.active {

    background: rgba(239, 68, 68, 0.18);

    border-color: #ef4444;

    color: #fca5a5;

    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);

}



/* ==========================================================================

   Weapon Card Header Variants Switching

   ========================================================================== */

.weapon-card .card-header-variant {

    display: none;

    width: 100%;

}



/* По подразбиране или когато е избран вариант 1 */

.weapon-card:not([data-header-variant]) .card-header-variant.v1-dossier,

.weapon-card[data-header-variant="1"] .card-header-variant.v1-dossier {

    display: flex;

}



/* Когато е избран вариант 2 */

.weapon-card[data-header-variant="2"] .card-header-variant.v2-rarity {

    display: block;

}



/* Когато е избран вариант 3 */

.weapon-card[data-header-variant="3"] .card-header-variant.v3-texture {

    display: flex;

}



/* --------------------------------------------------------------------------

   ВАРИАНТ 1: Tactical Weapon Dossier

   -------------------------------------------------------------------------- */

.v1-dossier {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    padding: 12px 16px;

    background: linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0%, rgba(15, 23, 42, 0.35) 60%, transparent 100%);

    border-bottom: 1px solid rgba(239, 68, 68, 0.25);

    border-radius: 10px 10px 0 0;

    flex-wrap: wrap;

    margin: -6px -6px 14px -6px;

}



.skin-theme-gold .v1-dossier {

    background: linear-gradient(90deg, rgba(245, 158, 11, 0.09) 0%, rgba(15, 23, 42, 0.35) 60%, transparent 100%);

    border-bottom: 1px solid rgba(245, 158, 11, 0.3);

}



.v1-left-meta {

    display: flex;

    align-items: center;

    gap: 12px;

}



.v1-title-block {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.v1-caliber-sub {

    font-size: 11px;

    font-weight: 700;

    color: #94a3b8;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    display: flex;

    align-items: center;

    gap: 6px;

}



/* --------------------------------------------------------------------------

   ВАРИАНТ 2: CS:GO / CS2 Rarity HUD

   -------------------------------------------------------------------------- */

.v2-rarity {

    display: block;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    padding-bottom: 14px;

    margin-bottom: 14px;

}



.v2-rarity-top-strip {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 6px 12px;

    background: rgba(239, 68, 68, 0.12);

    border-left: 3px solid #ef4444;

    border-radius: 6px;

    margin-bottom: 10px;

    font-size: 10.5px;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



.skin-theme-gold .v2-rarity-top-strip {

    background: rgba(245, 158, 11, 0.12);

    border-left: 3px solid #f59e0b;

}



.v2-rarity-badge {

    color: #fca5a5;

    display: flex;

    align-items: center;

    gap: 6px;

}



.skin-theme-gold .v2-rarity-badge {

    color: #fde68a;

}



.v2-main-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}



/* --------------------------------------------------------------------------

   ВАРИАНТ 3: Forum Integrated Texture Strip

   -------------------------------------------------------------------------- */

.card-header-v3,

.v3-texture {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 14px;

    padding: 14px 22px;

    background: linear-gradient(180deg, rgba(14, 18, 28, 0.85) 0%, rgba(8, 11, 18, 0.92) 100%),

                repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px),

                url(assets/images/header_bg_texture.jpg) center / cover no-repeat;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 15px 15px 0 0;

    margin: -22px -24px 18px -24px;

    width: calc(100% + 48px);

    box-sizing: border-box;

    flex-wrap: wrap;

}



.skin-theme-gold .card-header-v3,

.skin-theme-gold .v3-texture {

    border-bottom: 1px solid rgba(245, 158, 11, 0.25);

}



/* 1. Горна информационна лента на скина (Standard fallback) */

.card-row-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    padding-bottom: 14px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    flex-wrap: wrap;

}



.card-title-group {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.card-badges-row {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}



.skin-row-title {

    font-size: 22px;

    font-weight: 900;

    letter-spacing: 0.5px;

    margin: 0;

    line-height: 1.2;

}



.skin-theme-red .skin-row-title,

.skin-theme-gold .skin-row-title {

    background: linear-gradient(135deg, #ffffff 40%, #fde68a 80%, #f59e0b 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.wpn-type-pill {

    background: rgba(245, 158, 11, 0.15);

    border: 1px solid rgba(245, 158, 11, 0.35);

    color: var(--gold-hover);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    padding: 3px 10px;

    border-radius: 6px;

    letter-spacing: 0.5px;

}



.wpn-status-pill {

    background: rgba(59, 130, 246, 0.12);

    border: 1px solid rgba(59, 130, 246, 0.3);

    color: #60a5fa;

    font-size: 10px;

    font-weight: 800;

    padding: 3px 8px;

    border-radius: 6px;

    letter-spacing: 0.5px;

}



.wpn-id-pill {

    font-family: monospace;

    font-size: 11px;

    color: var(--text-dim);

    background: rgba(255, 255, 255, 0.05);

    padding: 3px 8px;

    border-radius: 6px;

}



.wpn-id-pill code {

    color: #cbd5e1;

}



/* Цена и План на продукта */

/* Цена и План на продукта */

.product-price-badge-top {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 8px 16px;

}



.price-badge-label {

    font-size: 10px;

    font-weight: 800;

    color: var(--text-muted);

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



.price-badge-value {

    font-size: 20px;

    font-weight: 900;

    color: #ffd700;

    line-height: 1.1;

}



.skin-theme-red .price-badge-value {

    color: #f87171;

}



.price-badge-value small {

    font-size: 11px;

    font-weight: 700;

    color: var(--text-muted);

}



/* Интегрирана лента за планове и закупуване */

.card-purchase-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    background: rgba(0, 0, 0, 0.38);

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 12px;

    padding: 12px 18px;

    margin-top: 14px;

    flex-wrap: wrap;

}



.card-plans-group {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.plans-group-title {

    font-size: 11px;

    font-weight: 800;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.4px;

    display: flex;

    align-items: center;

    gap: 6px;

}



.card-plans-mini-bar {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

}



.plan-mini-pill {

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #e2e8f0;

    font-size: 11px;

    font-weight: 700;

    padding: 4px 10px;

    border-radius: 6px;

    white-space: nowrap;

    transition: all 0.2s ease;

}



.plan-mini-pill:hover {

    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.18);

    color: #fff;

}



.plan-mini-pill.highlight {

    background: rgba(245, 158, 11, 0.16);

    border-color: rgba(245, 158, 11, 0.45);

    color: #fbbf24;

    font-weight: 800;

}



.skin-theme-red .plan-mini-pill.highlight {

    background: rgba(239, 68, 68, 0.16);

    border-color: rgba(239, 68, 68, 0.45);

    color: #fca5a5;

}



/* Interactive Plan Pill Buttons */

.plan-mini-pill-btn {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #cbd5e1;

    font-size: 11px;

    font-weight: 700;

    padding: 4px 10px;

    border-radius: 6px;

    white-space: nowrap;

    transition: all 0.18s ease;

    cursor: pointer;

    font-family: inherit;

    outline: none;

    display: inline-flex;

    align-items: center;

    gap: 4px;

}



.plan-mini-pill-btn:hover {

    background: rgba(245, 158, 11, 0.15);

    border-color: rgba(245, 158, 11, 0.4);

    color: #fbbf24;

    transform: translateY(-1px);

}



.plan-mini-pill-btn.active {

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.4));

    border-color: #f59e0b;

    color: #fbbf24;

    font-weight: 800;

    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);

}



/* Sidebar Owned Skins Card Styling (shop.php) */

.sidebar-owned-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.sidebar-owned-item {

    background: rgba(15, 23, 42, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 10px 12px;

    transition: all 0.2s ease;

}



.sidebar-owned-item:hover {

    border-color: rgba(245, 158, 11, 0.35);

    background: rgba(15, 23, 42, 0.9);

}



.sidebar-owned-item.is-equipped {

    border-color: rgba(16, 185, 129, 0.4);

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 23, 42, 0.8));

}



.wpn-plan-pill {

    background: rgba(16, 185, 129, 0.15);

    border: 1px solid rgba(16, 185, 129, 0.35);

    color: #34d399;

    font-size: 11px;

    font-weight: 800;

    padding: 3px 10px;

    border-radius: 6px;

    letter-spacing: 0.5px;

    display: inline-flex;

    align-items: center;

    gap: 4px;

}



.btn-buy-skin {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: #000;

    font-size: 13px;

    font-weight: 900;

    text-transform: uppercase;

    text-decoration: none;

    padding: 12px 24px;

    border-radius: 8px;

    border: none;

    cursor: pointer;

    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);

    transition: all 0.25s ease;

    white-space: nowrap;

}



.skin-theme-red .btn-buy-skin {

    background: linear-gradient(135deg, #ef4444, #dc2626);

    color: #fff;

    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);

}



.skin-theme-red .btn-buy-skin:hover {

    background: linear-gradient(135deg, #f87171, #ef4444);

    transform: translateY(-2px);

    box-shadow: 0 6px 22px rgba(239, 68, 68, 0.5);

}



.skin-theme-gold .btn-buy-skin:hover {

    background: linear-gradient(135deg, #fbbf24, #f59e0b);

    transform: translateY(-2px);

    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.5);

}



.card-action-group .btn-row-action {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: #000;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    text-decoration: none;

    padding: 10px 22px;

    border-radius: 8px;

    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);

    transition: all 0.25s ease;

    white-space: nowrap;

    border: none;

    cursor: pointer;

}



.card-action-group .btn-row-action:hover {

    background: linear-gradient(135deg, #fbbf24, #f59e0b);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);

}



/* 2. Боксовете с изображения (Showcase витрина с 2 изгледа) */

.weapon-previews-showcase {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin: 16px 0;

}



@media (max-width: 768px) {

    .weapon-previews-showcase {

        grid-template-columns: 1fr;

    }

}



.showcase-box {
    position: relative;
    background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.08) 0%, rgba(15, 23, 42, 0.7) 65%, rgba(9, 13, 22, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    height: 195px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.skin-theme-red .showcase-box,
.skin-theme-gold .showcase-box {
    background: radial-gradient(circle at 50% 50%, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.8) 75%, rgba(9, 13, 22, 0.98) 100%);
}

.skin-theme-red .showcase-box:hover,
.skin-theme-gold .showcase-box:hover {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(245, 158, 11, 0.15);
}

.showcase-box-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    z-index: 5;
    background: linear-gradient(180deg, rgba(6, 10, 18, 0.88) 0%, rgba(6, 10, 18, 0.45) 60%, transparent 100%);
    pointer-events: none;
}

.showcase-view-tag {
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.showcase-model-type {
    font-family: monospace;
    font-size: 10px;
    color: #cbd5e1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 2px 6px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

.showcase-image-holder {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Floor shadow under weapon in showcase */
.showcase-image-holder::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 20%;
    right: 20%;
    height: 12px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 75%);
    pointer-events: none;
    filter: blur(2px);
    z-index: 1;
}

.weapon-showcase-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.9));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
    user-select: none;
    display: block;
    z-index: 2;
}

.showcase-box:hover .weapon-showcase-img {
    transform: scale(1.06);
    filter: drop-shadow(0 12px 24px rgba(245, 158, 11, 0.45));
}

.skin-theme-red .showcase-box:hover .weapon-showcase-img {
    filter: drop-shadow(0 12px 24px rgba(239, 68, 68, 0.45));
}



/* 3. Долна техническа лента с пътищата на моделите */

.card-row-bottom {

    background: rgba(7, 10, 15, 0.65);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 10px;

    padding: 12px 16px;

}



.paths-summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    flex-wrap: wrap;

}



.auto-path-chip {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(245, 158, 11, 0.1);

    border: 1px solid rgba(245, 158, 11, 0.25);

    padding: 3px 8px;

    border-radius: 6px;

}



.auto-path-chip .chip-badge {

    background: var(--gold-gradient);

    color: #000;

    font-size: 9px;

    font-weight: 900;

    padding: 1px 5px;

    border-radius: 3px;

}



.auto-path-chip code {

    color: var(--gold-hover);

    font-weight: 700;

    font-size: 11px;

}



.paths-chips-list {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.path-chip {

    font-family: monospace;

    font-size: 11px;

    color: #94a3b8;

    background: rgba(255, 255, 255, 0.03);

    padding: 3px 8px;

    border-radius: 4px;

    border: 1px solid rgba(255, 255, 255, 0.04);

}



.path-chip strong {

    color: #cbd5e1;

}



/* ==========================================================================

   Product Features Bar (Replaces technical .mdl debug paths)

   ========================================================================== */

.product-features-bar {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 12px;

    background: rgba(7, 10, 15, 0.65);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 10px;

    padding: 12px 18px;

    margin-top: 4px;

}



.feature-item {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 12px;

    color: #cbd5e1;

}



.feature-icon {

    font-size: 14px;

    line-height: 1;

}



.feature-text {

    font-weight: 600;

    letter-spacing: 0.2px;

}



/* ==========================================================================

   Buy / Purchase Modal Popup

   ========================================================================== */

.buy-modal-backdrop {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.82);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    padding: 20px;

    opacity: 0;

    transition: opacity 0.25s ease;

}



.buy-modal-backdrop.active {

    display: flex;

    opacity: 1;

}



.buy-modal-box {

    background: linear-gradient(145deg, #131b2e 0%, #0d1322 100%);

    border: 1px solid rgba(245, 158, 11, 0.35);

    border-radius: 16px;

    max-width: 520px;

    width: 100%;

    padding: 28px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.15);

    position: relative;

    transform: scale(0.95);

    transition: transform 0.25s ease;

}



.buy-modal-backdrop.active .buy-modal-box {

    transform: scale(1);

}



.buy-modal-close {

    position: absolute;

    top: 18px;

    right: 18px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #94a3b8;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 18px;

    line-height: 1;

    transition: all 0.2s;

}



.buy-modal-close:hover {

    color: #fff;

    background: rgba(239, 68, 68, 0.2);

    border-color: #ef4444;

}



.buy-modal-header {

    margin-bottom: 20px;

}



.buy-modal-eyebrow {

    font-size: 11px;

    font-weight: 800;

    color: var(--gold-hover);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 4px;

}



.buy-modal-title {

    font-size: 24px;

    font-weight: 900;

    color: #fff;

    margin: 0;

}



.buy-summary-card {

    background: rgba(0, 0, 0, 0.45);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 10px;

    padding: 14px 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}



.buy-summary-info {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.buy-summary-name {

    font-size: 16px;

    font-weight: 800;

    color: #fff;

}



.buy-summary-plan {

    font-size: 12px;

    color: #34d399;

    font-weight: 700;

}



.buy-summary-price {

    font-size: 24px;

    font-weight: 900;

    color: var(--gold-hover);

}



.buy-modal-form .form-group {

    margin-bottom: 18px;

}



.buy-modal-form label {

    display: block;

    font-size: 12px;

    font-weight: 700;

    color: #e2e8f0;

    margin-bottom: 6px;

    text-transform: uppercase;

    letter-spacing: 0.3px;

}



.buy-modal-form input[type="text"] {

    width: 100%;

    background: rgba(7, 10, 15, 0.85);

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 8px;

    padding: 12px 16px;

    color: #fff;

    font-size: 14px;

    font-family: monospace;

    outline: none;

    transition: border-color 0.2s;

}



.buy-modal-form input[type="text"]:focus {

    border-color: var(--gold-hover);

    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);

}



.btn-confirm-buy {

    width: 100%;

    background: linear-gradient(135deg, #10b981, #059669);

    color: #fff;

    font-size: 14px;

    font-weight: 900;

    text-transform: uppercase;

    padding: 14px;

    border-radius: 10px;

    border: none;

    cursor: pointer;

    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35);

    transition: all 0.25s ease;

}



.btn-confirm-buy:hover {

    background: linear-gradient(135deg, #34d399, #10b981);

    transform: translateY(-2px);

    box-shadow: 0 6px 24px rgba(16, 185, 129, 0.5);

}



/* Section Banner Header */

.section-banner-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: linear-gradient(135deg, rgba(20, 26, 42, 0.9) 0%, rgba(13, 17, 28, 0.95) 100%);

    border: 1px solid rgba(245, 158, 11, 0.25);

    border-radius: 14px;

    padding: 20px 24px;

    margin-bottom: 24px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

    gap: 20px;

    flex-wrap: wrap;

}



.section-eyebrow {

    font-size: 11px;

    font-weight: 800;

    color: var(--gold-hover);

    letter-spacing: 1px;

    text-transform: uppercase;

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 6px;

}



.pulse-dot {

    width: 8px;

    height: 8px;

    background: #10b981;

    border-radius: 50%;

    box-shadow: 0 0 8px #10b981;

    animation: pulse 2s infinite;

}



@keyframes pulse {

    0% { transform: scale(0.95); opacity: 0.8; }

    50% { transform: scale(1.3); opacity: 1; }

    100% { transform: scale(0.95); opacity: 0.8; }

}



.section-main-title {

    font-size: 22px;

    font-weight: 900;

    color: #fff;

    margin: 0 0 6px 0;

    letter-spacing: 0.5px;

}



.section-main-title span {

    color: var(--gold-hover);

    font-family: monospace;

    font-size: 18px;

}



.section-sub-desc {

    font-size: 13px;

    color: var(--text-muted);

    margin: 0;

    max-width: 620px;

    line-height: 1.4;

}



.section-meta-badge {

    background: rgba(245, 158, 11, 0.12);

    border: 1px solid rgba(245, 158, 11, 0.35);

    border-radius: 10px;

    padding: 10px 18px;

    text-align: center;

    min-width: 110px;

}



.badge-num {

    display: block;

    font-size: 24px;

    font-weight: 900;

    color: var(--gold-hover);

    line-height: 1;

}



.badge-lbl {

    display: block;

    font-size: 11px;

    font-weight: 700;

    color: var(--text-muted);

    margin-top: 4px;

    text-transform: uppercase;

}



.weapon-preview-frame:hover .preview-badge {

    color: var(--gold-hover);

    border-color: rgba(245, 158, 11, 0.35);

    background: rgba(0, 0, 0, 0.65);

}



.model-paths-box {

    background: rgba(7, 10, 15, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 8px;

    padding: 12px;

    font-size: 12px;

    margin-top: auto;

}



.shorthand-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.shorthand-row code {

    color: var(--gold-hover);

    font-weight: 700;

    font-size: 11px;

}



.badge-auto {

    background: rgba(245, 158, 11, 0.2);

    color: #fbbf24;

    font-size: 9px;

    font-weight: 800;

    padding: 2px 6px;

    border-radius: 4px;

}



.path-line {

    font-family: monospace;

    font-size: 11px;

    color: #94a3b8;

    margin-bottom: 2px;

    word-break: break-all;

}



.path-line strong {

    color: #cbd5e1;

}



.card-action-btn {

    width: 100%;

    margin-top: 16px;

    padding: 10px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 700;

    border: none;

    cursor: pointer;

    transition: all 0.2s;

}



/* ==========================================================================

   Sidebar Widgets (VIP & Server Status)

   ========================================================================== */

.sidebar {

    display: flex;

    flex-direction: column;

    gap: 12px;

    align-self: start;

}



.sidebar .forum-threads-wrapper {

    margin-bottom: 0 !important;

    margin-top: 0 !important;

}



/* VIP Card (Matching the exact card in screenshot) */

.vip-promo-card {

    background: linear-gradient(145deg, #182033, #0f172a);

    border: 1px solid rgba(245, 158, 11, 0.35);

    border-radius: 12px;

    padding: 24px;

    position: relative;

    overflow: hidden;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

}



.vip-promo-card::after {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    width: 60px;

    height: 60px;

    background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, transparent 70%);

}



.vip-tag {

    color: var(--gold-primary);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 8px;

    display: block;

}



.vip-title {

    font-size: 22px;

    font-weight: 900;

    line-height: 1.25;

    text-transform: uppercase;

    margin-bottom: 16px;

    color: #fff;

}



.vip-perks-list {

    list-style: none;

    margin-bottom: 20px;

}



.vip-perks-list li {

    font-size: 13px;

    color: var(--text-muted);

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.vip-perks-list li::before {

    font-family: 'Font Awesome 6 Free';

    font-weight: 900;

    content: '\f00c';

    color: var(--gold-primary);

    font-size: 11px;

}



.btn-vip-action {

    display: block;

    width: 100%;

    text-align: center;

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: #000;

    font-weight: 800;

    font-size: 14px;

    padding: 12px;

    border-radius: 8px;

    text-decoration: none;

    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);

    transition: all 0.2s;

}



.btn-vip-action:hover {

    background: linear-gradient(135deg, #fbbf24, #f59e0b);

    transform: translateY(-1px);

}



/* Server Status Widget */

.widget-card {

    background: var(--bg-card);

    border: 1px solid var(--border-subtle);

    border-radius: 12px;

    padding: 20px;

}



.widget-title {

    font-size: 16px;

    font-weight: 800;

    text-transform: uppercase;

    margin-bottom: 14px;

    padding-bottom: 8px;

    border-bottom: 1px solid var(--border-subtle);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.server-item {

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 8px;

    padding: 12px 14px;

    margin-bottom: 12px;

    transition: all 0.2s ease;

    border-left: 3px solid var(--gold-primary);

}



.server-item:hover {

    background: rgba(255, 255, 255, 0.05);

    border-color: rgba(255, 255, 255, 0.12);

    transform: translateY(-1px);

}



.server-item.server-dust2 {

    border-left-color: #f59e0b;

}



.server-item.server-csdm {

    border-left-color: #3b82f6;

}



.server-item.server-zombie {

    border-left-color: #10b981;

}



.server-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 6px;

}



.server-name {

    color: #fff;

    font-weight: 800;

    font-size: 13px;

}



.server-badge-online {

    background: rgba(16, 185, 129, 0.15);

    border: 1px solid rgba(16, 185, 129, 0.3);

    color: #34d399;

    font-size: 10px;

    font-weight: 800;

    padding: 2px 7px;

    border-radius: 10px;

}



.server-details {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 11px;

    color: var(--text-muted);

    margin-bottom: 8px;

}



.server-map-tag {

    background: rgba(255, 255, 255, 0.06);

    color: #cbd5e1;

    padding: 1px 6px;

    border-radius: 4px;

    font-family: monospace;

}



.server-actions-row {

    display: flex;

    gap: 6px;

    margin-top: 8px;

}



.btn-server-connect {

    flex: 1;

    background: linear-gradient(135deg, #2563eb, #1d4ed8);

    color: #fff;

    text-align: center;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    padding: 6px 10px;

    border-radius: 6px;

    transition: all 0.15s;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

}



.btn-server-connect:hover {

    background: linear-gradient(135deg, #3b82f6, #2563eb);

    color: #fff;

}



.btn-server-copy {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #e2e8f0;

    font-size: 11px;

    font-weight: 600;

    padding: 6px 10px;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.15s;

}



.btn-server-copy:hover {

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

}



/* ==========================================================================

   Footer

   ========================================================================== */

.footer-cs {

    background: #05080c;

    border-top: 1px solid var(--border-subtle);

    padding: 30px 24px;

    text-align: center;

    color: var(--text-dim);

    font-size: 13px;

    margin-top: 50px;

}



.footer-links {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-bottom: 12px;

}



.footer-links a {

    color: var(--text-muted);

    text-decoration: none;

    font-size: 13px;

    transition: color 0.2s;

}



.footer-links a:hover {

    color: #fff;

}



/* ==========================================================================

   Admin Tables & Forms

   ========================================================================== */

.container {

    max-width: 1320px;

    margin: 20px auto;

    padding: 0 24px;

    width: 100%;

    flex: 1;

}



.card {

    background: var(--bg-card);

    border: 1px solid var(--border-subtle);

    border-radius: 12px;

    padding: 24px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

}



.form-group {

    margin-bottom: 16px;

}



.form-label {

    display: block;

    margin-bottom: 6px;

    font-size: 13px;

    font-weight: 700;

    color: var(--text-muted);

}



.input-field, .select-field {

    width: 100%;

    background: rgba(7, 10, 15, 0.8);

    border: 1px solid var(--border-subtle);

    border-radius: 8px;

    padding: 12px 16px;

    color: #fff;

    font-size: 14px;

    outline: none;

    transition: border-color 0.2s;

}



.input-field:focus, .select-field:focus {

    border-color: var(--gold-primary);

    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);

}



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 20px;

    border-radius: 8px;

    border: none;

    font-weight: 700;

    font-size: 13px;

    cursor: pointer;

    transition: all 0.2s;

    text-decoration: none;

}



.btn-primary {

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: #000;

}



.btn-primary:hover {

    background: linear-gradient(135deg, #fbbf24, #f59e0b);

    transform: translateY(-1px);

}



.btn-danger {

    background: #ef4444;

    color: #fff;

}



.btn-danger:hover {

    background: #dc2626;

}



.btn-sm {

    padding: 6px 12px;

    font-size: 12px;

    border-radius: 6px;

}



.table-wrapper {

    background: var(--bg-card);

    border: 1px solid var(--border-subtle);

    border-radius: 12px;

    overflow-x: auto;

    margin-top: 16px;

}



table {

    width: 100%;

    border-collapse: collapse;

    text-align: left;

    font-size: 14px;

}



th, td {

    padding: 14px 18px;

    border-bottom: 1px solid var(--border-subtle);

}



th {

    background: #080c14;

    color: var(--text-dim);

    font-weight: 700;

    text-transform: uppercase;

    font-size: 12px;

    letter-spacing: 0.5px;

}



tr:last-child td {

    border-bottom: none;

}



tr:hover td {

    background: var(--bg-card-hover);

}



.badge {

    display: inline-block;

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 700;

}



.badge-active {

    background: rgba(16, 185, 129, 0.2);

    color: #34d399;

}



.badge-inactive {

    background: rgba(255, 255, 255, 0.08);

    color: var(--text-muted);

}



.badge-expired {

    background: rgba(239, 68, 68, 0.2);

    color: #fca5a5;

}



.badge-perm {

    background: rgba(245, 158, 11, 0.2);

    color: #fbbf24;

}



.badge-days {

    background: rgba(37, 99, 235, 0.2);

    color: #93c5fd;

}



/* ==========================================================================

   Interactive Plan Selector Cards in Buy Modal

   ========================================================================== */

.modal-plans-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    gap: 10px;

    margin: 16px 0;

}



.modal-plan-card {

    background: rgba(11, 15, 25, 0.85);

    border: 1px solid var(--border-subtle);

    border-radius: 8px;

    padding: 12px 8px;

    cursor: pointer;

    text-align: center;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    user-select: none;

}



.modal-plan-card:hover {

    border-color: rgba(245, 158, 11, 0.5);

    background: rgba(22, 30, 49, 0.95);

    transform: translateY(-2px);

}



.modal-plan-card.active {

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.28));

    border-color: var(--gold-primary);

    box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);

}



.modal-plan-badge {

    position: absolute;

    top: -8px;

    right: 4px;

    font-size: 9px;

    font-weight: 800;

    padding: 1px 6px;

    border-radius: 6px;

    background: var(--gold-primary);

    color: #000;

    text-transform: uppercase;

    letter-spacing: 0.3px;

}



.modal-plan-days {

    font-size: 13px;

    font-weight: 800;

    color: #fff;

    margin-bottom: 2px;

}



.modal-plan-price {

    font-size: 15px;

    font-weight: 900;

    color: var(--gold-hover);

}



.modal-payment-actions {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 20px;

}



.btn-pay-test {

    background: linear-gradient(135deg, #10b981, #059669);

    color: #fff;

    border: none;

    border-radius: 8px;

    padding: 13px 18px;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition: all 0.2s;

    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);

}



.btn-pay-test:hover {

    background: linear-gradient(135deg, #34d399, #10b981);

    transform: translateY(-1px);

    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);

}



.btn-pay-paypal {

    background: linear-gradient(135deg, #0070ba, #003087);

    color: #fff;

    border: none;

    border-radius: 8px;

    padding: 13px 18px;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition: all 0.2s;

    box-shadow: 0 4px 14px rgba(0, 112, 186, 0.3);

}



.btn-pay-paypal:hover {

    background: linear-gradient(135deg, #0079c1, #00457c);

    transform: translateY(-1px);

    box-shadow: 0 6px 18px rgba(0, 112, 186, 0.45);

}



.card-plans-mini-bar {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

    margin-top: 6px;

}



.plan-mini-pill {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 700;

    padding: 2px 7px;

    border-radius: 4px;

}



.plan-mini-pill.highlight {

    border-color: rgba(245, 158, 11, 0.3);

    color: var(--gold-hover);

    background: rgba(245, 158, 11, 0.08);

}



/* ==========================================================================

   User Inventory Wardrobe Styles (inventory.php)

   ========================================================================== */

.hero-inventory-banner {

    height: 250px !important;

    min-height: 250px !important;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding-bottom: 26px;

    background: url('img/hero_banner.jpg?v=12') no-repeat center 20% !important;

    background-size: cover !important;

}



.hero-inv-content {

    position: relative;

    z-index: 5;

    text-align: center;

    max-width: 900px;

    padding: 0 20px;

}



.hero-inv-badge {

    display: inline-block;

    background: rgba(245, 158, 11, 0.2);

    border: 1px solid rgba(245, 158, 11, 0.45);

    color: #fbbf24;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    padding: 4px 14px;

    border-radius: 20px;

    margin-bottom: 8px;

    text-transform: uppercase;

    box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);

}



.hero-inv-title {

    font-size: 30px;

    font-weight: 900;

    color: #fff;

    margin: 0 0 6px 0;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);

}



.hero-inv-desc {

    color: #cbd5e1;

    font-size: 14px;

    margin: 0;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);

}



.inv-player-box {

    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(9, 14, 23, 0.98));

    border: 1px solid rgba(245, 158, 11, 0.35);

    border-radius: 16px;

    padding: 24px 28px;

    margin-bottom: 26px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

}



.inv-player-profile {

    display: flex;

    align-items: center;

    gap: 18px;

}



.inv-player-avatar {

    width: 64px;

    height: 64px;

    border-radius: 14px;

    background: radial-gradient(circle, #2563eb, #1e3a8a);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);

    border: 2px solid rgba(255, 255, 255, 0.2);

    flex-shrink: 0;

}



.inv-player-details {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.inv-player-subtitle {

    font-size: 11px;

    font-weight: 800;

    color: var(--gold-primary);

    letter-spacing: 1px;

    text-transform: uppercase;

}



.inv-player-name {

    font-size: 22px;

    font-weight: 900;

    color: #fff;

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}



.inv-auth-pill {

    font-family: 'JetBrains Mono', Consolas, monospace;

    background: rgba(245, 158, 11, 0.15);

    border: 1px solid rgba(245, 158, 11, 0.35);

    color: #fbbf24;

    padding: 2px 10px;

    border-radius: 6px;

    font-size: 14px;

}



.inv-player-sync-status {

    font-size: 12px;

    color: #94a3b8;

    display: flex;

    align-items: center;

    gap: 8px;

}



.inv-sync-dot {

    width: 8px;

    height: 8px;

    background-color: #10b981;

    border-radius: 50%;

    box-shadow: 0 0 8px #10b981;

    display: inline-block;

    animation: pulseDot 2s infinite;

}



.inv-search-form {

    display: flex;

    align-items: center;

    gap: 10px;

    flex: 1;

    max-width: 440px;

}



.inv-search-input-wrap {

    display: flex;

    align-items: center;

    gap: 8px;

    background: #090e17;

    border: 1px solid rgba(255, 255, 255, 0.15);

    padding: 6px 14px;

    border-radius: 10px;

    width: 100%;

    transition: border-color 0.2s;

}



.inv-search-input-wrap:focus-within {

    border-color: var(--gold-primary);

    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);

}



.inv-search-icon {

    font-size: 14px;

    opacity: 0.7;

}



.inv-search-input {

    background: transparent;

    border: none;

    color: #fff;

    font-size: 13px;

    font-family: 'JetBrains Mono', Consolas, monospace;

    width: 100%;

    outline: none;

}



.inv-search-btn {

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: #000;

    border: none;

    padding: 10px 20px;

    border-radius: 8px;

    font-weight: 800;

    font-size: 12px;

    cursor: pointer;

    white-space: nowrap;

    transition: all 0.2s ease;

    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);

}



.inv-search-btn:hover {

    background: linear-gradient(135deg, #fbbf24, #f59e0b);

    transform: translateY(-1px);

    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);

}



.inv-kpi-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 16px;

    margin-bottom: 30px;

}



.inv-kpi-card {

    background: #0d131f;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    padding: 18px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: transform 0.2s, border-color 0.2s;

}



.inv-kpi-card:hover {

    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.16);

}



.inv-kpi-card.is-equipped {

    border-color: rgba(16, 185, 129, 0.35);

}



.inv-kpi-card.is-active-plan {

    border-color: rgba(245, 158, 11, 0.35);

}



.inv-kpi-card.is-speed {

    border-color: rgba(56, 189, 248, 0.35);

}



.inv-kpi-val {

    font-size: 26px;

    font-weight: 900;

    color: #fff;

    line-height: 1.2;

}



.inv-kpi-title {

    font-size: 12px;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 4px;

    font-weight: 700;

}



.inv-kpi-icon {

    font-size: 32px;

    opacity: 0.85;

}



.text-green { color: #34d399 !important; }

.text-gold  { color: #fbbf24 !important; }

.text-cyan  { color: #38bdf8 !important; }



.inv-weapon-section {

    background: #0b101a;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    padding: 24px;

    margin-bottom: 30px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}



.inv-weapon-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    padding-bottom: 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    margin-bottom: 22px;

}



.inv-weapon-header-left {

    display: flex;

    align-items: center;

    gap: 12px;

}



.inv-weapon-icon {

    font-size: 26px;

}



.inv-weapon-title {

    margin: 0;

    font-size: 20px;

    font-weight: 900;

    color: #fff;

    letter-spacing: 0.5px;

}



.highlight-wpn {

    color: var(--gold-hover);

}



.inv-weapon-count-badge {

    background: rgba(37, 99, 235, 0.15);

    border: 1px solid rgba(37, 99, 235, 0.35);

    color: #93c5fd;

    padding: 3px 10px;

    border-radius: 6px;

    font-size: 12px;

    font-weight: 800;

}



.inv-current-equipped-pill {

    background: rgba(16, 185, 129, 0.12);

    border: 1px solid rgba(16, 185, 129, 0.35);

    color: #34d399;

    padding: 6px 14px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.inv-current-default-pill {

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: #cbd5e1;

    padding: 6px 14px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 600;

}



.inv-skins-grid {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.inv-skin-card {

    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(11, 15, 25, 0.98) 100%);

    border: 2px solid rgba(255, 255, 255, 0.08);

    border-radius: 14px;

    padding: 20px 24px;

    display: flex;

    flex-direction: column;

    gap: 16px;

    transition: all 0.25s ease;

    position: relative;

}



.inv-skin-card.is-active-equipped {

    border-color: #10b981;

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(17, 24, 39, 0.98) 100%);

    box-shadow: 0 0 24px rgba(16, 185, 129, 0.25), 0 8px 24px rgba(0, 0, 0, 0.5);

}



.inv-skin-card.is-default-card {

    border-style: dashed;

    border-color: rgba(255, 255, 255, 0.14);

    background: rgba(9, 14, 23, 0.9);

}



.inv-card-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.inv-card-name-group {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}



.inv-card-title {

    font-size: 18px;

    font-weight: 900;

    color: #fff;

    margin: 0;

    letter-spacing: 0.5px;

}



.inv-card-id {

    font-family: 'JetBrains Mono', Consolas, monospace;

    font-size: 11px;

    color: var(--text-dim);

    background: rgba(255, 255, 255, 0.05);

    padding: 3px 8px;

    border-radius: 6px;

}



.inv-status-chip {

    padding: 4px 12px;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.chip-equipped {

    background: rgba(16, 185, 129, 0.2);

    border: 1px solid #10b981;

    color: #34d399;

    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);

}



.chip-ready {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #cbd5e1;

}



.chip-expired {

    background: rgba(239, 68, 68, 0.2);

    border: 1px solid #ef4444;

    color: #fca5a5;

}



.inv-previews-showcase {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}



@media (max-width: 768px) {

    .inv-previews-showcase {

        grid-template-columns: 1fr;

    }

}



.inv-card-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

    padding-top: 6px;

}



.inv-plan-expiry {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: #94a3b8;

}



.inv-actions-group {

    display: flex;

    align-items: center;

    gap: 10px;

}



.btn-equip-submit {

    background: linear-gradient(135deg, #2563eb, #1d4ed8);

    color: #fff;

    border: 1px solid #3b82f6;

    padding: 9px 20px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s ease;

    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);

    text-transform: uppercase;

}



.btn-equip-submit:hover {

    background: linear-gradient(135deg, #3b82f6, #2563eb);

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5);

}



.btn-equipped-active {

    background: rgba(16, 185, 129, 0.15);

    border: 1px solid rgba(16, 185, 129, 0.4);

    color: #34d399;

    padding: 9px 18px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 800;

    cursor: default;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.btn-unequip-submit {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.16);

    color: #cbd5e1;

    padding: 9px 16px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: all 0.2s ease;

}



.btn-unequip-submit:hover {

    background: rgba(239, 68, 68, 0.2);

    border-color: #ef4444;

    color: #fca5a5;

}



.toast-notify.show {

    transform: translateY(0);

    opacity: 1;

}



/* ==========================================================================

   MMORPG Weapon Slots & Inventory Dashboard (Esports Gamer Container)

   ========================================================================== */

.mmo-dashboard-wrapper {

    background: #080c14;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 14px;

    padding: 24px 28px 32px 28px;

    margin-bottom: 40px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

    position: relative;

}



/* ==========================================================================

   Fragzone Container Header Strip (1:1 matching media_1792620483197.png)

   ========================================================================== */

.fragzone-header-strip {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

    margin-bottom: 24px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.header-strip-left {

    display: flex;

    align-items: center;

    gap: 14px;

}



.header-strip-icon-box {

    width: 44px;

    height: 44px;

    border-radius: 10px;

    background: rgba(234, 179, 8, 0.12);

    border: 1px solid rgba(234, 179, 8, 0.35);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: #fbbf24;

    flex-shrink: 0;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

}



.header-strip-title-group {

    display: flex;

    flex-direction: column;

}



.header-strip-title {

    font-size: 18px;

    font-weight: 800;

    color: #ffffff;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    margin: 0 0 3px 0;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    line-height: 1.2;

}



.header-strip-subtitle {

    font-size: 13px;

    color: #94a3b8;

    margin: 0;

    line-height: 1.4;

}



.header-strip-right {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}



/* Розов контурен бутон (1:1 със скрийншота .:: КЪМ ФОРУМА) */

.btn-header-strip-rose {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(244, 63, 94, 0.08);

    border: 1.5px solid #f43f5e;

    color: #f43f5e;

    padding: 8px 18px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    text-decoration: none;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    white-space: nowrap;

}



.btn-header-strip-rose:hover {

    background: #f43f5e;

    color: #ffffff;

    box-shadow: 0 0 16px rgba(244, 63, 94, 0.45);

    transform: translateY(-1px);

}



/* Форма за търсене на SteamID в дясната част на хедера */

.header-strip-search-form {

    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0;

}



.header-strip-search-wrap {

    display: flex;

    align-items: center;

    gap: 8px;

    background: #05080f;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    padding: 7px 12px;

    transition: border-color 0.2s;

}



.header-strip-search-wrap:focus-within {

    border-color: rgba(59, 130, 246, 0.5);

}



.header-strip-search-input {

    background: transparent;

    border: none;

    outline: none;

    color: #fff;

    font-size: 12px;

    width: 170px;

    font-family: inherit;

}



.header-strip-search-input::placeholder {

    color: #64748b;

}



.header-strip-search-btn {

    background: rgba(37, 99, 235, 0.18);

    border: 1px solid rgba(37, 99, 235, 0.35);

    color: #93c5fd;

    font-size: 12px;

    font-weight: 800;

    padding: 7px 14px;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.2s;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



.header-strip-search-btn:hover {

    background: #2563eb;

    color: #fff;

}



/* ==========================================================================

   Fragzone Glass Card & Section Headers (From Community Template)

   ========================================================================== */

.glass-card {

    background: rgba(8, 12, 20, 0.88);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65);

    position: relative;

    overflow: visible;

}



.forum-threads-wrapper {

    margin-bottom: 24px;

}



.forum-threads-wrapper.space-top {

    margin-top: 10px;

}



.threads-wrapper-header {

    background: linear-gradient(180deg, rgba(14, 18, 28, 0.85), rgba(8, 11, 18, 0.92)), 

                repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px),

                url(assets/images/header_bg_texture.jpg) center / cover no-repeat !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

    padding: 14px 22px !important;

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 12px !important;

    overflow: visible !important;

    border-top-left-radius: 12px !important;

    border-top-right-radius: 12px !important;

}



.threads-wrapper-header.standalone-header,

.forum-threads-wrapper > .threads-wrapper-header:only-child {

    border-radius: 12px !important;

    border-bottom: none !important;

}



.header-icon-box {

    width: 32px;

    height: 32px;

    border-radius: 8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 0.9rem;

    flex-shrink: 0;

}



.header-icon-gold {

    background: rgba(234, 179, 8, 0.12);

    border: 1px solid rgba(234, 179, 8, 0.35);

    color: #ffd700;

}



.header-icon-blue {

    background: rgba(59, 130, 246, 0.12);

    border: 1px solid rgba(59, 130, 246, 0.35);

    color: #60a5fa;

}



.header-icon-green {

    background: rgba(16, 185, 129, 0.12);

    border: 1px solid rgba(16, 185, 129, 0.35);

    color: #34d399;

}



.header-icon-red {

    background: rgba(244, 63, 94, 0.12);

    border: 1px solid rgba(244, 63, 94, 0.35);

    color: #f43f5e;

}



.wrapper-title-main {

    font-size: 0.92rem;

    font-weight: 800;

    color: #ffffff;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    line-height: 1.2;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

}



.wrapper-title-sub {

    font-size: 0.75rem;

    color: #94a3b8;

    line-height: 1.3;

    margin-top: 1px;

}



.btn-outline,

.btn.btn-outline {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(244, 63, 94, 0.08);

    border: 1.5px solid #f43f5e;

    color: #f43f5e;

    padding: 4px 12px;

    border-radius: 6px;

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.4px;

    text-transform: uppercase;

    text-decoration: none;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    white-space: nowrap;

}



.btn-outline:hover,

.btn.btn-outline:hover {

    background: #f43f5e;

    color: #ffffff;

    box-shadow: 0 0 12px rgba(244, 63, 94, 0.45);

    transform: translateY(-1px);

}



.wrapper-body {

    padding: 14px;

    overflow: visible;

}



/* MMORPG Character HUD Bar */

.mmo-char-hud-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: linear-gradient(180deg, rgba(14, 20, 32, 0.85) 0%, rgba(8, 12, 20, 0.95) 100%);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    padding: 12px 18px;

    margin-bottom: 16px;

    gap: 16px;

    flex-wrap: wrap;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.45);

}



.mmo-hud-player-block {

    display: flex;

    align-items: center;

    gap: 12px;

}



.mmo-hud-avatar {

    width: 38px;

    height: 38px;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.16);

    color: #fbbf24;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    position: relative;

}



.mmo-hud-dot {

    position: absolute;

    top: -2px;

    right: -2px;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.8);

    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);

}



.mmo-hud-player-details {

    display: flex;

    flex-direction: column;

}



.mmo-hud-profile-title {

    font-size: 10px;

    font-weight: 800;

    color: #94a3b8;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}



.mmo-hud-steam-id {

    font-size: 13px;

    font-weight: 800;

    color: #f1f5f9;

    font-family: monospace;

}



.mmo-hud-stats-group {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}



.mmo-hud-stat-box {

    display: flex;

    flex-direction: column;

    background: rgba(0, 0, 0, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 8px;

    padding: 6px 14px;

    min-width: 110px;

}



.mmo-stat-label {

    font-size: 9.5px;

    font-weight: 800;

    color: #94a3b8;

    letter-spacing: 0.5px;

    display: flex;

    align-items: center;

    gap: 5px;

}



.mmo-stat-val {

    font-size: 12.5px;

    font-weight: 800;

    color: #f1f5f9;

    margin-top: 2px;

}



/* MMORPG Equipment Slots Section (Styled like Casino Slot Machine Reels) */

/* MMORPG Equipment Slots Section (Styled like Casino Slot Machine Reels) */

.mmo-slots-section {

    background: #040711;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    padding: 14px 16px;

    margin-bottom: 20px;

    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.95), 0 8px 24px rgba(0, 0, 0, 0.5);

    position: relative;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

    overflow: hidden;

}



.mmo-slots-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;

    flex-wrap: wrap;

    gap: 10px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.mmo-slots-title {

    font-size: 12px;

    font-weight: 800;

    color: #ffffff;

    display: flex;

    align-items: center;

    gap: 8px;

    letter-spacing: 0.6px;

    text-transform: uppercase;

}



.mmo-slots-title-badge {

    width: 24px;

    height: 24px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #cbd5e1;

    font-size: 11px;

}



.mmo-slots-subhint {

    font-size: 10.5px;

    font-weight: 700;

    color: #94a3b8;

    letter-spacing: 0.4px;

    text-transform: uppercase;

}



.mmo-slots-grid-horizontal {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

}



@media (max-width: 1200px) {

    .mmo-slots-grid-horizontal {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;

    }

}



@media (max-width: 580px) {

    .mmo-slots-grid-horizontal {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 6px;

    }

}



/* Individual Slot Box - Clean Casino Slot Style (NO Blue, NO Green) */

.mmo-slot-card {

    background: linear-gradient(180deg, rgba(14, 20, 32, 0.85) 0%, rgba(8, 12, 20, 0.95) 100%);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 7px 8px;

    min-height: 104px;

    height: 104px;

    min-width: 0;

    width: 100%;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    position: relative;

    cursor: pointer;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    user-select: none;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.45);

    overflow: hidden;

}



.mmo-slot-card:hover {

    border-color: rgba(255, 255, 255, 0.25);

    background: linear-gradient(180deg, rgba(20, 28, 45, 0.95) 0%, rgba(11, 16, 27, 0.98) 100%);

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);

    transform: translateY(-2px);

}



/* Empty Slot */

.mmo-slot-card.is-empty {

    border: 1px dashed rgba(255, 255, 255, 0.09);

    background: rgba(6, 10, 18, 0.6);

    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);

}



.mmo-slot-card.is-empty:hover {

    border-color: rgba(255, 255, 255, 0.2);

    background: rgba(12, 18, 30, 0.7);

}



/* Equipped Slot */

.mmo-slot-card.is-equipped {

    border: 1px solid rgba(255, 255, 255, 0.2);

    background: linear-gradient(180deg, rgba(16, 23, 37, 0.95) 0%, rgba(9, 14, 23, 0.98) 100%);

    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.5);

}



/* Selected Slot Focus (Clean Metallic Slate Highlight - NO Blue, NO Green) */

.mmo-slot-card.is-selected,

.mmo-slot-card.is-equipped.active-highlight {

    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;

    background: linear-gradient(180deg, rgba(22, 32, 50, 0.98) 0%, rgba(12, 18, 30, 0.99) 100%) !important;

    box-shadow: 0 0 16px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.05) !important;

}



.mmo-slot-card.is-selected .mmo-slot-name-label,

.mmo-slot-card.is-equipped.active-highlight .mmo-slot-name-label {

    color: #ffffff !important;

    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);

}



.mmo-slot-card.drag-target-hover {

    border-color: rgba(255, 255, 255, 0.5) !important;

    background: rgba(255, 255, 255, 0.06) !important;

    box-shadow: 0 0 18px rgba(0, 0, 0, 0.6) !important;

}



.mmo-slot-title-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 4px;

    width: 100%;

    min-width: 0;

}



.mmo-slot-name-label {

    font-size: 9.5px;

    font-weight: 800;

    letter-spacing: 0.4px;

    text-transform: uppercase;

    color: #cbd5e1;

    transition: color 0.15s;

    display: flex;

    align-items: center;

    gap: 4px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    min-width: 0;

    flex: 1;

}



.mmo-slot-name-label i {

    font-size: 9px;

    opacity: 0.75;

    flex-shrink: 0;

}



.mmo-slot-card.is-empty .mmo-slot-name-label {

    color: #64748b;

}



.mmo-slot-badge-status {

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.4px;

    text-transform: uppercase;

    padding: 1px 4px;

    border-radius: 4px;

    white-space: nowrap;

    flex-shrink: 0;

    line-height: 1.2;

}



.mmo-slot-badge-status.active {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.16);

    color: #f8fafc;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

}



.mmo-slot-badge-status.empty {

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.06);

    color: #64748b;

}



.mmo-slot-img-wrap {

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    margin: 2px 0;

}



.mmo-slot-weapon-img {

    max-width: 92%;

    max-height: 44px;

    object-fit: contain;

    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85));

    display: block;

    margin: 0 auto;

    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.mmo-slot-card:hover .mmo-slot-weapon-img {

    transform: scale(1.06);

}



.mmo-slot-bottom-name {

    font-size: 9px;

    font-weight: 700;

    color: #e2e8f0;

    text-align: center;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    padding: 2px 2px 0 2px;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    min-width: 0;

    width: 100%;

    box-sizing: border-box;

    letter-spacing: 0.2px;

}



.mmo-slot-card.is-empty .mmo-slot-bottom-name {

    color: #475569;

}



/* Reset All Button - Subdued Slate MMORPG action button */

.mmo-btn-reset-all {

    width: 100%;

    margin-top: 10px;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: #cbd5e1;

    border-radius: 8px;

    padding: 10px 14px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}



.mmo-btn-reset-all:hover {

    background: rgba(239, 68, 68, 0.12);

    border-color: rgba(239, 68, 68, 0.35);

    color: #fca5a5;

    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);

}



/* Right Column: Inventory Filter & Grid */

.mmo-inventory-col {

    display: flex;

    flex-direction: column;

    gap: 14px;

    flex: 1;

}



.mmo-filter-controls-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    background: rgba(11, 17, 30, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 10px;

    padding: 8px 12px;

}



.mmo-filter-pills {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.mmo-filter-btn {

    padding: 8px 16px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(14, 21, 38, 0.7);

    color: #94a3b8;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: all 0.15s ease;

}



.mmo-filter-btn:hover {

    color: #f1f5f9;

    border-color: rgba(255, 255, 255, 0.2);

    background: rgba(24, 34, 58, 0.85);

}



/* Active Pill - MMORPG Electric Blue / Royal Blue (NO RED!) */

.mmo-filter-btn.active {

    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;

    border-color: #60a5fa !important;

    color: #ffffff !important;

    font-weight: 800 !important;

    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;

}



.mmo-filter-search {

    background: rgba(8, 13, 24, 0.8);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    padding: 7px 12px;

    display: flex;

    align-items: center;

    gap: 8px;

    width: 210px;

    transition: all 0.2s ease;

}



.mmo-filter-search:focus-within {

    border-color: #3b82f6;

    box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);

}



.mmo-filter-search input {

    background: transparent;

    border: none;

    color: #fff;

    font-size: 12px;

    width: 100%;

    outline: none;

}



/* Inventory Item Grid (Tiles) - 4 columns */

.mmo-inventory-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

}



@media (max-width: 1200px) {

    .mmo-inventory-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width: 768px) {

    .mmo-inventory-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 480px) {

    .mmo-inventory-grid {

        grid-template-columns: 1fr;

    }

}



/* Individual Skin Tile - MMORPG Backpack Item Card */

.mmo-skin-tile {

    background: linear-gradient(180deg, rgba(14, 20, 32, 0.85) 0%, rgba(8, 12, 20, 0.95) 100%);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    padding: 12px 14px;

    height: 200px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    position: relative;

    cursor: pointer;

    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

    user-select: none;

    box-sizing: border-box;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.45);

    overflow: hidden;

}



.mmo-skin-tile:hover {

    border-color: rgba(255, 255, 255, 0.28);

    background: linear-gradient(180deg, rgba(20, 28, 45, 0.95) 0%, rgba(11, 16, 27, 0.98) 100%);

    transform: translateY(-4px);

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);

}



/* Equipped State - Clean Metallic Accent (NO RED, NO GREEN, NO BLUE!) */

.mmo-skin-tile.is-tile-equipped {

    border: 1px solid rgba(255, 255, 255, 0.3) !important;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(10, 15, 26, 0.98) 100%) !important;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 0 14px rgba(255, 255, 255, 0.03);

}



.mmo-skin-tile.is-tile-equipped:hover {

    border-color: rgba(255, 255, 255, 0.5) !important;

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7) !important;

}



.mmo-tile-top-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

    z-index: 2;

}



.mmo-tile-badge {

    font-size: 11px;

    font-weight: 800;

    padding: 2.5px 8px;

    border-radius: 6px;

    display: inline-flex;

    align-items: center;

    gap: 4px;

}



.badge-infinity {

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #e2e8f0;

    font-size: 11.5px;

    font-weight: 800;

}



.badge-days {

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #f1f5f9;

    font-size: 11px;

    font-weight: 800;

}



.badge-vip {

    background: rgba(245, 158, 11, 0.12);

    border: 1px solid rgba(245, 158, 11, 0.35);

    color: #fbbf24;

    font-size: 11px;

    font-weight: 800;

}



/* Status Tag on top right of each tile */

.mmo-tile-status-tag {

    font-size: 9.5px;

    font-weight: 800;

    letter-spacing: 0.5px;

    padding: 2px 7px;

    border-radius: 5px;

    text-transform: uppercase;

    display: inline-flex;

    align-items: center;

    gap: 4px;

}



.mmo-tile-status-tag.tag-equipped {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.22);

    color: #ffffff;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

}



.mmo-tile-status-tag.tag-idle {

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.06);

    color: #64748b;

}



.mmo-tile-visual-holder {

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    padding: 4px;

    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);

}



.mmo-tile-visual-holder img {

    max-width: 90%;

    max-height: 90%;

    object-fit: contain;

    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85));

    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.mmo-skin-tile:hover .mmo-tile-visual-holder img {

    transform: scale(1.08);

}



.mmo-tile-label-bottom {

    display: flex;

    flex-direction: column;

    gap: 2px;

    position: relative;

    z-index: 2;

}



.mmo-tile-title-text {

    font-size: 13px;

    font-weight: 800;

    color: #ffffff;

    text-align: center;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 1.2;

}



.mmo-tile-sub-text {

    font-size: 10.5px;

    color: #64748b;

    text-align: center;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    transition: color 0.15s;

}



.mmo-skin-tile:hover .mmo-tile-sub-text {

    color: #94a3b8;

}



.mmo-skin-tile.is-tile-equipped .mmo-tile-sub-text {

    color: #34d399;

}



/* ==========================================================================

   Casino Action Buttons & Buy Spins Modal Components

   ========================================================================== */

.btn-buy-spins-trigger {

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: #000;

    border: 1.5px solid #fde68a;

    border-radius: 10px;

    padding: 10px 22px;

    font-size: 13px;

    font-weight: 900;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.btn-buy-spins-trigger:hover {

    background: linear-gradient(135deg, #fbbf24, #f59e0b);

    transform: translateY(-2px);

    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.65);

    color: #000;

}



.btn-buy-spins-trigger:active {

    transform: translateY(0);

}



.spin-packages-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-top: 10px;

}



.spin-package-card {

    background: #090e18;

    border: 1.5px solid rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    padding: 16px 12px;

    text-align: center;

    cursor: pointer;

    transition: all 0.2s ease;

    position: relative;

    user-select: none;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.spin-package-card:hover {

    border-color: rgba(245, 158, 11, 0.4);

    background: #0d1525;

    transform: translateY(-2px);

}



.spin-package-card.selected {

    border-color: var(--gold-primary);

    background: rgba(245, 158, 11, 0.12);

    box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);

}



.spin-pkg-count {

    font-size: 28px;

    font-weight: 900;

    color: #fff;

    line-height: 1.1;

    margin-bottom: 2px;

    font-family: monospace;

}



.spin-package-card.selected .spin-pkg-count {

    color: #fbbf24;

}



.spin-pkg-price {

    font-size: 14px;

    font-weight: 800;

    color: #34d399;

}



.spin-package-badge {

    position: absolute;

    top: -9px;

    right: -6px;

    background: linear-gradient(135deg, #ef4444, #dc2626);

    color: #fff;

    font-size: 10px;

    font-weight: 900;

    padding: 3px 8px;

    border-radius: 8px;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);

    letter-spacing: 0.5px;

}



.btn-spin-test {

    background: rgba(255, 255, 255, 0.05);

    border: 1.5px solid rgba(255, 255, 255, 0.15);

    color: #94a3b8;

    padding: 12px 24px;

    border-radius: 10px;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    transition: all 0.2s ease;

}



.btn-spin-test:hover:not(:disabled) {

    background: rgba(255, 255, 255, 0.12);

    border-color: rgba(255, 255, 255, 0.35);

    color: #fff;

    transform: translateY(-1px);

}



.btn-spin-test:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



/* ==========================================================================

   CASINO PER-GAME SIDEBAR SYSTEM (Matching Sample Screenshot)

   Clean Modular Widgets: Navigation & Profile, Game Intel, Live Winners Feed

   ========================================================================== */

.casino-stage-with-sidebar {

    display: grid;

    gap: 24px;

    align-items: start;

    margin-bottom: 30px;

    width: 100%;

}



.casino-stage-with-sidebar.layout-sidebar-right {

    grid-template-columns: minmax(0, 1fr) 330px;

}



.casino-stage-with-sidebar.layout-sidebar-left {

    grid-template-columns: 330px minmax(0, 1fr);

}



.stage-main-col {

    min-width: 0;

    width: 100%;

}



/* Странична колона за модулни уиджети */

.casino-side-column {

    display: flex;

    flex-direction: column;

    gap: 16px;

    width: 100%;

    position: sticky;

    top: 86px;

}



/* Модулен сайдбар панел (Точно като примерния скрийншот) */

.side-panel {

    background: linear-gradient(180deg, #101626 0%, #0c111e 100%);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

    transition: border-color 0.2s ease;

}



.side-panel:hover {

    border-color: rgba(255, 255, 255, 0.12);

}



/* Заглавна лента на уиджета */

.side-panel-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 13px 18px;

    background: rgba(0, 0, 0, 0.25);

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.side-panel-title {

    font-size: 12.5px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    color: #fff;

    display: flex;

    align-items: center;

    gap: 8px;

}



.side-panel-pill {

    font-size: 10px;

    font-weight: 800;

    padding: 2px 8px;

    border-radius: 4px;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    display: inline-flex;

    align-items: center;

    gap: 5px;

}



.side-panel-pill.pill-online {

    color: #34d399;

    background: rgba(16, 185, 129, 0.15);

    border: 1px solid rgba(16, 185, 129, 0.3);

}



.side-panel-pill.pill-live {

    color: #fbbf24;

    background: rgba(245, 158, 11, 0.15);

    border: 1px solid rgba(245, 158, 11, 0.3);

}



/* Потребителски профил бокс в сайдбара (Точно като в скрийншота) */

.side-user-box {

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 10px;

    margin: 14px 16px;

    padding: 12px 14px;

    display: flex;

    align-items: center;

    gap: 12px;

}



.side-user-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: linear-gradient(135deg, #1e293b, #0f172a);

    border: 2px solid rgba(245, 158, 11, 0.4);

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: #fbbf24;

    flex-shrink: 0;

}



.side-user-avatar .user-status-dot {

    position: absolute;

    bottom: 0;

    right: 0;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #10b981;

    border: 2px solid #0f1523;

    box-shadow: 0 0 6px #10b981;

}



.side-user-info {

    flex: 1;

    min-width: 0;

}



.side-user-name {

    font-size: 13.5px;

    font-weight: 900;

    color: #fff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 1.2;

    margin-bottom: 4px;

}



.side-user-badge-wrap {

    display: flex;

    align-items: center;

    gap: 6px;

}



.side-user-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-size: 10px;

    font-weight: 900;

    padding: 2px 8px;

    border-radius: 4px;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



.side-user-badge.badge-guest {

    background: rgba(245, 158, 11, 0.2);

    color: #fbbf24;

    border: 1px solid rgba(245, 158, 11, 0.4);

}



.side-user-badge.badge-spins {

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.25));

    color: #fef08a;

    border: 1px solid rgba(245, 158, 11, 0.5);

}



/* Вертикално навигационно меню (Като в скрийншота) */

.side-nav-list {

    display: flex;

    flex-direction: column;

}



.side-nav-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 11px 18px;

    color: #cbd5e1;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    border-top: 1px solid rgba(255, 255, 255, 0.04);

    transition: all 0.15s ease;

}



.side-nav-item:hover {

    background: rgba(255, 255, 255, 0.04);

    color: #fff;

    padding-left: 22px;

}



.side-nav-item.active {

    background: rgba(245, 158, 11, 0.12);

    color: #fbbf24;

    border-left: 3px solid #f59e0b;

}



.side-nav-content {

    display: flex;

    align-items: center;

    gap: 11px;

}



.side-nav-content i {

    width: 16px;

    text-align: center;

}



.side-nav-tag {

    font-size: 10px;

    font-weight: 800;

    padding: 2px 7px;

    border-radius: 4px;

    letter-spacing: 0.5px;

}



.side-nav-tag.tag-gold {

    background: rgba(245, 158, 11, 0.18);

    color: #fbbf24;

}



.side-nav-tag.tag-blue {

    background: rgba(56, 189, 248, 0.18);

    color: #38bdf8;

}



.side-nav-tag.tag-green {

    background: rgba(74, 222, 128, 0.18);

    color: #4ade80;

}



.side-nav-tag.tag-red {

    background: rgba(244, 63, 94, 0.18);

    color: #f43f5e;

}



.side-nav-item-buy {

    background: rgba(245, 158, 11, 0.08);

}



.side-nav-item-buy:hover {

    background: rgba(245, 158, 11, 0.16);

}



/* Чист плосък списък без вложени кутии */

.side-flat-list {

    display: flex;

    flex-direction: column;

}



.side-flat-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 11px 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.04);

    font-size: 12px;

    font-weight: 700;

    transition: background 0.15s ease;

}



.side-flat-row:hover {

    background: rgba(255, 255, 255, 0.03);

}



.side-flat-label {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #e2e8f0;

}



.side-flat-val {

    font-family: monospace;

    font-size: 12px;

    font-weight: 900;

}



.side-flat-tag {

    font-size: 10px;

    font-weight: 800;

    padding: 2px 7px;

    border-radius: 4px;

    letter-spacing: 0.5px;

}



.side-flat-tag.tag-gold {

    background: rgba(245, 158, 11, 0.2);

    color: #fbbf24;

    border: 1px solid rgba(245, 158, 11, 0.4);

}



.side-flat-tag.tag-red {

    background: rgba(244, 63, 94, 0.2);

    color: #f43f5e;

    border: 1px solid rgba(244, 63, 94, 0.4);

}



.side-flat-tag.tag-pink {

    background: rgba(236, 72, 153, 0.2);

    color: #ec4899;

    border: 1px solid rgba(236, 72, 153, 0.4);

}



.side-flat-tag.tag-purple {

    background: rgba(168, 85, 247, 0.2);

    color: #c084fc;

    border: 1px solid rgba(168, 85, 247, 0.4);

}



.side-flat-tag.tag-blue {

    background: rgba(56, 189, 248, 0.2);

    color: #38bdf8;

    border: 1px solid rgba(56, 189, 248, 0.4);

}



.side-panel-footer-note {

    padding: 12px 18px;

    font-size: 11.5px;

    color: #94a3b8;

    line-height: 1.45;

    background: rgba(0, 0, 0, 0.2);

    border-top: 1px solid rgba(255, 255, 255, 0.04);

}



/* Последни печалби в сайдбара (Като "Кой е бил тук" в скрийншота) */

.side-winners-list {

    display: flex;

    flex-direction: column;

}



.side-winner-row {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.04);

    transition: background 0.15s ease;

}



.side-winner-row:hover {

    background: rgba(255, 255, 255, 0.03);

}



.side-winner-avatar {

    width: 32px;

    height: 32px;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    color: #fbbf24;

    flex-shrink: 0;

}



.side-winner-info {

    flex: 1;

    min-width: 0;

}



.side-winner-prize {

    font-size: 12px;

    font-weight: 800;

    color: #fff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 1.2;

}



.side-winner-user {

    font-size: 10px;

    color: #94a3b8;

    font-family: monospace;

}



.side-winner-days {

    font-size: 10px;

    font-weight: 800;

    padding: 2px 6px;

    border-radius: 4px;

    background: rgba(56, 189, 248, 0.15);

    color: #38bdf8;

    flex-shrink: 0;

}



.side-empty-text {

    padding: 16px 18px;

    text-align: center;

    font-size: 12px;

    color: #64748b;

    border-top: 1px solid rgba(255, 255, 255, 0.04);

}



/* Респонсивност за таблети и мобилни */

@media (max-width: 1100px) {

    .casino-stage-with-sidebar.layout-sidebar-right,

    .casino-stage-with-sidebar.layout-sidebar-left {

        grid-template-columns: 1fr;

    }



    .casino-side-column {

        position: static;

        order: 2;

        max-width: 100%;

    }

}



/* ==========================================================================

   Live A2S Server Tracker & Monitoring Components

   ========================================================================== */

.server-hero-card {

    position: relative;

    background: linear-gradient(145deg, rgba(14, 23, 42, 0.85) 0%, rgba(9, 14, 26, 0.95) 100%);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    padding: 20px;

    overflow: hidden;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);

}



.server-hero-card::before {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    width: 60%;

    height: 100%;

    background-size: cover;

    background-position: center;

    opacity: 0.08;

    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, transparent 100%);

    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, transparent 100%);

    pointer-events: none;

    z-index: 1;

}



.server-hero-content {

    position: relative;

    z-index: 2;

}



.server-hero-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 12px;

}



.server-hero-tag {

    font-size: 10.5px;

    font-weight: 800;

    color: #38bdf8;

    background: rgba(56, 189, 248, 0.1);

    border: 1px solid rgba(56, 189, 248, 0.3);

    padding: 3px 10px;

    border-radius: 6px;

    letter-spacing: 0.6px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    text-transform: uppercase;

}



.server-live-indicator {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 11px;

    font-weight: 800;

    padding: 3px 10px;

    border-radius: 16px;

    letter-spacing: 0.5px;

    font-family: monospace;

}



.server-live-indicator.online {

    background: rgba(16, 185, 129, 0.15);

    border: 1px solid rgba(16, 185, 129, 0.4);

    color: #34d399;

}



.server-live-indicator.offline {

    background: rgba(239, 68, 68, 0.15);

    border: 1px solid rgba(239, 68, 68, 0.4);

    color: #f87171;

}



.server-pulse-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #10b981;

    box-shadow: 0 0 6px #10b981;

    animation: serverLivePulse 2s infinite;

}



@keyframes serverLivePulse {

    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }

    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }

    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }

}



.server-hero-title {

    font-size: 17px;

    font-weight: 900;

    color: #ffffff;

    margin: 0 0 14px 0;

    letter-spacing: 0.4px;

    line-height: 1.35;

}



.server-metrics-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 8px;

    margin-bottom: 16px;

}



@media (max-width: 1200px) {

    .server-metrics-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width: 640px) {

    .server-metrics-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



.server-metric-box {

    background: rgba(0, 0, 0, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 8px;

    padding: 9px 12px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    transition: all 0.2s ease;

}



.server-metric-box:hover {

    border-color: rgba(56, 189, 248, 0.3);

    background: rgba(14, 23, 42, 0.5);

}



.server-metric-label {

    font-size: 9px;

    font-weight: 800;

    color: #64748b;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    display: flex;

    align-items: center;

    gap: 5px;

}



.server-metric-val {

    font-size: 13px;

    font-weight: 900;

    color: #ffffff;

    font-family: monospace;

}



.server-capacity-bar-wrap {

    margin-bottom: 16px;

    background: rgba(0, 0, 0, 0.25);

    padding: 10px 14px;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.05);

}



.server-capacity-info {

    display: flex;

    justify-content: space-between;

    font-size: 11px;

    font-weight: 800;

    margin-bottom: 6px;

    color: #94a3b8;

}



.server-capacity-track {

    width: 100%;

    height: 7px;

    background: rgba(0, 0, 0, 0.5);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 4px;

    overflow: hidden;

}



.server-capacity-fill {

    height: 100%;

    background: linear-gradient(90deg, #38bdf8, #10b981);

    border-radius: 4px;

    transition: width 0.5s ease;

    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);

}



.server-actions-row-main {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    align-items: center;

}



.btn-hero-connect {

    background: linear-gradient(135deg, #10b981, #059669);

    color: #ffffff;

    border: 1px solid rgba(52, 211, 153, 0.4);

    padding: 9px 18px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s ease;

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

}



.btn-hero-connect:hover {

    background: linear-gradient(135deg, #059669, #047857);

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);

    color: #ffffff;

}



.btn-hero-copy {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: #cbd5e1;

    padding: 9px 16px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s ease;

}



.btn-hero-copy:hover {

    background: rgba(255, 255, 255, 0.1);

    border-color: rgba(255, 255, 255, 0.25);

    color: #ffffff;

}



.btn-hero-refresh {

    background: transparent;

    border: 1px solid rgba(56, 189, 248, 0.35);

    color: #38bdf8;

    padding: 9px 16px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s ease;

}



.btn-hero-refresh:hover {

    background: rgba(56, 189, 248, 0.12);

    border-color: #38bdf8;

}



/* Live Players Table */

.server-players-card {

    margin-top: 20px;

}



.server-players-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 12.5px;

}



.server-players-table th {

    text-align: left;

    padding: 10px 14px;

    background: rgba(0, 0, 0, 0.3);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    font-size: 10.5px;

    font-weight: 800;

    color: #64748b;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}



.server-players-table td {

    padding: 12px 14px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

    color: #cbd5e1;

    font-weight: 600;

    vertical-align: middle;

}



.server-players-table tr:hover td {

    background: rgba(255, 255, 255, 0.02);

    color: #ffffff;

}



.server-player-rank {

    width: 24px;

    height: 24px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.05);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: 900;

    color: #94a3b8;

}



.server-player-rank.rank-1 {

    background: rgba(251, 191, 36, 0.2);

    color: #fbbf24;

    border: 1px solid rgba(251, 191, 36, 0.4);

}



.server-player-name {

    font-weight: 800;

    color: #ffffff;

    display: flex;

    align-items: center;

    gap: 8px;

}



/* Server Feature Cards (Rules & Specs) */

.server-features-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-top: 14px;

}



@media (max-width: 900px) {

    .server-features-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 540px) {

    .server-features-grid {

        grid-template-columns: 1fr;

    }

}



.server-feature-item {

    background: rgba(14, 21, 38, 0.5);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 10px;

    padding: 14px;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    transition: all 0.2s ease;

}



.server-feature-item:hover {

    border-color: rgba(56, 189, 248, 0.25);

    background: rgba(14, 21, 38, 0.8);

    transform: translateY(-2px);

}



.server-feature-icon {

    width: 36px;

    height: 36px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

    flex-shrink: 0;

}



.feature-icon-blue {

    background: rgba(56, 189, 248, 0.12);

    border: 1px solid rgba(56, 189, 248, 0.3);

    color: #38bdf8;

}



.feature-icon-gold {

    background: rgba(245, 158, 11, 0.12);

    border: 1px solid rgba(245, 158, 11, 0.3);

    color: #fbbf24;

}



.feature-icon-green {

    background: rgba(16, 185, 129, 0.12);

    border: 1px solid rgba(16, 185, 129, 0.3);

    color: #34d399;

}



.feature-icon-purple {

    background: rgba(168, 85, 247, 0.12);

    border: 1px solid rgba(168, 85, 247, 0.3);

    color: #c084fc;

}



.server-feature-title {

    font-size: 13px;

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 2px;

}



.server-feature-desc {

    font-size: 11px;

    color: #94a3b8;

    line-height: 1.35;

}



/* Server Console Command Box */

.server-console-box {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(0, 0, 0, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    padding: 8px 12px;

    margin-top: 10px;

    gap: 8px;

}



.server-console-cmd {

    font-family: Consolas, monospace;

    font-size: 12px;

    color: #38bdf8;

    user-select: all;

    word-break: break-all;

}



.server-console-copy-btn {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #cbd5e1;

    padding: 4px 10px;

    border-radius: 5px;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;

    transition: all 0.2s ease;

}



.server-console-copy-btn:hover {

    background: rgba(56, 189, 248, 0.2);

    border-color: #38bdf8;

    color: #ffffff;

}



/* Server CVARS / Rules Grid */

.server-rules-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 10px;

}



@media (max-width: 768px) {

    .server-rules-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



.server-rule-card {

    background: rgba(0, 0, 0, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 8px;

    padding: 8px 12px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.server-rule-key {

    font-size: 11px;

    color: #94a3b8;

    font-family: Consolas, monospace;

}



.server-rule-value {

    font-size: 12px;

    font-weight: 800;

    color: #38bdf8;

    font-family: Consolas, monospace;

}



/* ==========================================================================

   Modern Compact CS 1.6 Server Sidebar Card

   ========================================================================== */

.sidebar-server-box {

    background: linear-gradient(180deg, rgba(14, 21, 35, 0.85) 0%, rgba(8, 12, 22, 0.95) 100%);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 12px 14px;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.4);

    position: relative;

    border-left: 3px solid #fbbf24;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.sidebar-server-box:hover {

    border-color: rgba(255, 255, 255, 0.16);

    border-left-color: #f59e0b;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.5);

}



.sidebar-srv-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

}



.sidebar-srv-title {

    font-size: 12.5px;

    font-weight: 800;

    color: #ffffff;

    display: flex;

    align-items: center;

    gap: 7px;

    letter-spacing: 0.3px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.sidebar-srv-title i {

    color: #fbbf24;

    font-size: 11px;

}



.sidebar-srv-badge {

    background: rgba(16, 185, 129, 0.14);

    border: 1px solid rgba(16, 185, 129, 0.32);

    color: #34d399;

    font-size: 10.5px;

    font-weight: 800;

    padding: 2px 8px;

    border-radius: 20px;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    flex-shrink: 0;

    letter-spacing: 0.3px;

    box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);

}



.sidebar-pulse-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #10b981;

    box-shadow: 0 0 8px #10b981;

    animation: livePulse 2s infinite;

}



@keyframes livePulse {

    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }

    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }

    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }

}



.sidebar-srv-pills {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px;

    margin-bottom: 10px;

}



.sidebar-srv-pill {

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 6px;

    padding: 4px 8px;

    font-size: 11px;

    color: #94a3b8;

    display: flex;

    align-items: center;

    gap: 6px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.sidebar-srv-pill i {

    font-size: 10px;

    color: #cbd5e1;

    opacity: 0.7;

}



.sidebar-srv-pill strong {

    color: #38bdf8;

    font-weight: 700;

}



.sidebar-srv-ip-row {

    margin-bottom: 10px;

}



.sidebar-srv-ip-box {

    background: rgba(6, 10, 18, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 6px;

    padding: 6px 10px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

    transition: all 0.15s ease;

    user-select: none;

}



.sidebar-srv-ip-box:hover {

    background: rgba(14, 21, 35, 0.9);

    border-color: rgba(251, 191, 36, 0.4);

}



.sidebar-srv-ip-box code {

    font-family: 'JetBrains Mono', 'Consolas', monospace;

    font-size: 11px;

    color: #fbbf24;

    font-weight: 700;

    letter-spacing: 0.5px;

}



.sidebar-copy-hint {

    font-size: 10px;

    color: #94a3b8;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    transition: color 0.15s;

}



.sidebar-srv-ip-box:hover .sidebar-copy-hint {

    color: #ffffff;

}



.sidebar-srv-actions {

    display: flex;

    gap: 6px;

}



.sidebar-btn-connect {

    flex: 1;

    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);

    border: 1px solid rgba(59, 130, 246, 0.4);

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.4px;

    padding: 8px 12px;

    border-radius: 6px;

    text-align: center;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);

    transition: all 0.15s ease;

}



.sidebar-btn-connect:hover {

    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.45);

    transform: translateY(-1px);

    color: #ffffff;

}



.sidebar-srv-more-link {

    margin-top: 10px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 6px;

    padding: 7px 10px;

    color: #cbd5e1;

    font-size: 10.5px;

    font-weight: 700;

    text-decoration: none;

    transition: all 0.15s ease;

}



.sidebar-srv-more-link:hover {

    background: rgba(255, 255, 255, 0.06);

    border-color: rgba(255, 255, 255, 0.15);

    color: #fbbf24;

}





/* ==========================================================================

   УНИВЕРСАЛЕН HOVER ZOOM И ИНТЕРАКТИВЕН МОДАЛ ЗА ПРЕГЛЕД НА 2-ТА ИЗГЛЕДА

   ========================================================================== */



/* 1. Поведение при посочване (Hover Zoom) на всички оръжейни картинки в сайта */

.weapon-showcase-img,

.mmo-slot-weapon-img,

.mmo-tile-visual-holder img,

.prize-thumb-img,

.slot-cell-thumb,

.case-card-thumb,

.side-owned-skin-thumb,

.safe-crate-img {

    cursor: zoom-in;

    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease !important;

}



/* Оголемяване на картинката при hover върху картата или бокса */

.showcase-box:hover .weapon-showcase-img,

.showcase-image-holder:hover .weapon-showcase-img {

    transform: scale(1.06) !important;
    filter: drop-shadow(0 14px 28px rgba(245, 158, 11, 0.55)) !important;
}



.mmo-slot-card:hover .mmo-slot-weapon-img,

.mmo-slot-box:hover .mmo-slot-weapon-img {

    transform: scale(1.22) translateY(-2px) !important;

    filter: drop-shadow(0 8px 18px rgba(245, 158, 11, 0.6)) !important;

}



.mmo-skin-tile:hover .mmo-tile-visual-holder img,

.mmo-item-card:hover .mmo-tile-visual-holder img {

    transform: scale(1.22) translateY(-4px) !important;

    filter: drop-shadow(0 12px 24px rgba(245, 158, 11, 0.65)) !important;

}



.prize-card-item:hover .prize-thumb-img,

.prize-thumb-wrap:hover .prize-thumb-img {

    transform: scale(1.22) !important;

    filter: drop-shadow(0 10px 20px rgba(245, 158, 11, 0.6)) !important;

}



.slot-symbol-cell:hover .slot-cell-thumb {

    transform: scale(1.22) !important;

    filter: drop-shadow(0 8px 18px rgba(245, 158, 11, 0.6)) !important;

}



.case-item-card:hover .case-card-thumb {

    transform: scale(1.22) !important;

    filter: drop-shadow(0 10px 20px rgba(245, 158, 11, 0.6)) !important;

}



.side-owned-skin-thumb:hover {

    transform: scale(1.25) !important;

    filter: drop-shadow(0 6px 14px rgba(245, 158, 11, 0.6)) !important;

}



.safe-pro-card:hover .safe-crate-img {

    transform: scale(1.14) translateY(-3px) !important;

    filter: drop-shadow(0 14px 28px rgba(245, 158, 11, 0.55)) !important;

}



/* 2. Модален прозорец за 2-та изгледа на оръжейните модели */

.model-modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(4, 7, 14, 0.88);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    z-index: 99999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 16px;

    opacity: 0;

    transition: opacity 0.25s ease-out;

}



.model-modal-backdrop.active {

    display: flex;

    opacity: 1;

}



.model-modal-dialog {

    background: linear-gradient(180deg, rgba(20, 27, 41, 0.98) 0%, rgba(10, 15, 26, 0.99) 100%);

    border: 1px solid rgba(245, 158, 11, 0.35);

    border-radius: 16px;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(245, 158, 11, 0.12);

    width: 100%;

    max-width: 1320px; width: 95%;

    max-height: 94vh;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    transform: scale(0.94) translateY(12px);

    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;

}



.model-modal-backdrop.active .model-modal-dialog {

    transform: scale(1) translateY(0);

}



.model-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 24px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(255, 255, 255, 0.02);

}



.model-modal-title-wrap {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}



.model-modal-badge {

    background: rgba(245, 158, 11, 0.15);

    color: #fbbf24;

    border: 1px solid rgba(245, 158, 11, 0.4);

    font-size: 11px;

    font-weight: 800;

    padding: 3px 8px;

    border-radius: 6px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.model-modal-title {

    margin: 0;

    font-size: 1.25rem;

    font-weight: 800;

    color: #fff;

    letter-spacing: -0.3px;

}



.model-modal-sub {

    font-size: 11px;

    color: #94a3b8;

    background: rgba(255, 255, 255, 0.05);

    padding: 3px 8px;

    border-radius: 4px;

    font-family: monospace;

}



.model-modal-close {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: #cbd5e1;

    width: 36px;

    height: 36px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 16px;

    transition: all 0.2s ease;

}



.model-modal-close:hover {

    background: rgba(239, 68, 68, 0.2);

    border-color: rgba(239, 68, 68, 0.5);

    color: #ef4444;

    transform: rotate(90deg);

}



.model-modal-tabs {

    display: flex;

    gap: 8px;

    padding: 12px 24px;

    background: rgba(0, 0, 0, 0.25);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.model-tab-btn {

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #94a3b8;

    padding: 8px 16px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s ease;

}



.model-tab-btn:hover {

    background: rgba(255, 255, 255, 0.08);

    color: #fff;

    border-color: rgba(255, 255, 255, 0.18);

}



.tab-text-mobile {
    display: none;
}

.tab-text-full {
    display: inline;
}

.model-tab-btn.active {

    background: rgba(245, 158, 11, 0.18);

    color: #fbbf24;

    border-color: rgba(245, 158, 11, 0.5);

    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);

}



.model-modal-body {

    padding: 20px 24px;

    overflow-y: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    flex: 1;

}



.model-modal-body.single-view {

    grid-template-columns: 1fr;

    max-width: 100%;

    margin: 0 auto;

    width: 100%;

}



.model-view-card {

    background: radial-gradient(circle at 50% 50%, rgba(30, 41, 59, 0.45) 0%, rgba(15, 23, 42, 0.85) 75%, rgba(9, 13, 22, 0.98) 100%);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    transition: border-color 0.2s, box-shadow 0.2s;

}



.model-view-card:hover {

    border-color: rgba(245, 158, 11, 0.4);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);

}



.model-view-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 14px;

    background: rgba(0, 0, 0, 0.35);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.model-view-pill {

    font-size: 11px;

    font-weight: 700;

    color: #e2e8f0;

    display: flex;

    align-items: center;

    gap: 6px;

}



.model-view-type {

    font-size: 10px;

    font-weight: 800;

    color: #fbbf24;

    background: rgba(245, 158, 11, 0.12);

    border: 1px solid rgba(245, 158, 11, 0.3);

    padding: 2px 6px;

    border-radius: 4px;

    font-family: monospace;

}



.model-view-stage {

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px;

    position: relative;

    cursor: zoom-in;

    background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.04) 0%, transparent 70%);

}



.model-modal-body.single-view .model-view-stage {

    min-height: 560px;

}



.model-stage-img {

    max-width: 98%;
    max-height: 400px;

    object-fit: contain;

    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.95));

    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;

    user-select: none;

}



.model-modal-body.single-view .model-stage-img {

    max-height: 65vh;
    min-height: 460px;
    max-width: 100%;
    width: auto;

}



.model-view-stage:hover .model-stage-img {

    transform: scale(1.12);

    filter: drop-shadow(0 16px 32px rgba(245, 158, 11, 0.5));

}



.model-zoom-hint {

    position: absolute;

    bottom: 8px;

    right: 12px;

    font-size: 10px;

    font-weight: 700;

    color: #94a3b8;

    background: rgba(0, 0, 0, 0.6);

    padding: 3px 8px;

    border-radius: 6px;

    pointer-events: none;

    opacity: 0.7;

    transition: opacity 0.2s;

}



.model-view-stage:hover .model-zoom-hint {

    opacity: 1;

    color: #fbbf24;

}



.model-modal-footer {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    padding: 14px 24px;

    background: rgba(0, 0, 0, 0.35);

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    flex-wrap: wrap;

    gap: 12px;

}



.model-modal-paths {

    font-size: 11px;

    color: #94a3b8;

}



.model-modal-paths code {

    background: rgba(0, 0, 0, 0.4);

    color: #38bdf8;

    padding: 2px 6px;

    border-radius: 4px;

    font-size: 10px;

}



.model-modal-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}



.btn-modal-action {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 16px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    border: 1px solid transparent;

    transition: all 0.2s ease;

}



.btn-modal-action.btn-gold {

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    color: #000;

    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);

}



.btn-modal-action.btn-gold:hover {

    filter: brightness(1.1);

    transform: translateY(-1px);

}



.btn-modal-action.btn-blue {

    background: rgba(56, 189, 248, 0.15);

    color: #38bdf8;

    border-color: rgba(56, 189, 248, 0.35);

}



.btn-modal-action.btn-blue:hover {

    background: rgba(56, 189, 248, 0.25);

    color: #fff;

}



.btn-modal-action.btn-secondary {

    background: rgba(255, 255, 255, 0.06);

    color: #cbd5e1;

    border-color: rgba(255, 255, 255, 0.1);

}



.btn-modal-action.btn-secondary:hover {

    background: rgba(255, 255, 255, 0.12);

    color: #fff;

}



/* ==========================================================================
   MODEL PREVIEW MODAL - ENHANCED RESPONSIVE SYSTEM (MOBILE & TABLET)
   ========================================================================== */
@media (max-width: 768px) {
    .tab-text-full {
        display: none !important;
    }
    .tab-text-mobile {
        display: inline !important;
    }

    .model-modal-backdrop {
        padding: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .model-modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 94vh !important;
        height: auto !important;
        margin: auto !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .model-modal-header {
        padding: 10px 14px !important;
        flex-shrink: 0 !important;
    }

    .model-modal-title-wrap {
        gap: 6px 10px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .model-modal-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
        letter-spacing: 0.3px !important;
    }

    .model-modal-title {
        font-size: 0.98rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 180px !important;
    }

    .model-modal-sub {
        font-size: 9.5px !important;
        padding: 2px 6px !important;
    }

    .model-modal-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .model-modal-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        flex-shrink: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .model-tab-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 7px 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 5px !important;
    }

    .model-tab-btn i {
        font-size: 11px !important;
    }

    .model-modal-body {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
        gap: 10px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .model-view-card {
        border-radius: 10px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .model-view-header {
        padding: 7px 10px !important;
        flex-shrink: 0 !important;
    }

    .model-view-pill {
        font-size: 10.5px !important;
    }

    .model-view-type {
        font-size: 9px !important;
        padding: 1px 5px !important;
    }

    /* Dual mode on mobile: stage is 195px with fully contained image */
    .model-view-stage {
        min-height: 180px !important;
        height: 195px !important;
        max-height: 220px !important;
        padding: 6px !important;
        background: #060911 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .model-stage-img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Single-view mode on mobile: large 280px viewport-scaled stage */
    .model-modal-body.single-view .model-view-stage {
        min-height: 250px !important;
        height: 280px !important;
        max-height: 48vh !important;
        padding: 8px !important;
    }

    .model-modal-body.single-view .model-stage-img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Prevent hover transform on touch tap */
    .model-view-stage:hover .model-stage-img {
        transform: none !important;
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.8)) !important;
    }

    .model-zoom-hint {
        bottom: 5px !important;
        right: 8px !important;
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    .model-modal-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .model-modal-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #modalBtnCloseFooter {
        grid-column: 1 / -1 !important;
    }

    .btn-modal-action {
        width: 100% !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        font-size: 11.5px !important;
        border-radius: 7px !important;
    }
}

@media (max-width: 380px) {
    .model-modal-title {
        max-width: 115px !important;
        font-size: 0.92rem !important;
    }
    .model-tab-btn {
        font-size: 10px !important;
        padding: 6px 2px !important;
        gap: 3px !important;
    }
    .model-view-stage {
        height: 175px !important;
        min-height: 165px !important;
    }
    .model-modal-body.single-view .model-view-stage {
        height: 240px !important;
        min-height: 230px !important;
    }
}



/* ==========================================================================

   FULL RESPONSIVE SYSTEM (DESKTOP, LAPTOP, TABLET, PHABLET & MOBILE)

   ========================================================================== */



html,

body {

    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;

    max-width: 100%;

}



/* Desktop default for mobile header controls */

.top-bar-brand-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-shrink: 0;

}



.mobile-header-controls {

    display: none;

    align-items: center;

    gap: 8px;

}



.mobile-quick-user {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 12px;

    border-radius: 8px;

    background: rgba(15, 23, 42, 0.85);

    border: 1px solid rgba(56, 189, 248, 0.45);

    color: #38bdf8;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    max-width: 140px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.mobile-menu-toggle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 8px 13px;

    border-radius: 8px;

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    border: 1px solid rgba(251, 191, 36, 0.6);

    color: #000;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.5px;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);

    transition: all 0.2s ease;

}



.mobile-menu-toggle .icon-close {

    display: none;

}



.site-header-container.is-mobile-menu-open .mobile-menu-toggle {

    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);

    border-color: rgba(248, 113, 113, 0.6);

    color: #fff;

}



.site-header-container.is-mobile-menu-open .mobile-menu-toggle .icon-bars {

    display: none;

}



.site-header-container.is-mobile-menu-open .mobile-menu-toggle .icon-close {

    display: inline-block;

}



/* 1. Medium Desktops & Laptops (max-width: 1480px) */

@media (max-width: 1480px) {

    .top-bar {

        flex-wrap: wrap;

        gap: 10px 16px;

        padding: 10px 20px;

        justify-content: space-between;

    }



    .top-actions {

        flex-wrap: wrap;

        justify-content: flex-end;

        gap: 6px;

    }



    .btn-top {

        padding: 6px 11px;

        font-size: 11.5px;

    }



    .nav-pill-bar {

        flex-wrap: wrap;

        justify-content: center;

        padding: 6px 16px 10px 16px;

        gap: 7px;

    }



    .nav-pill {

        padding: 6px 13px;

        font-size: 11.5px;

    }



    .hero-artwork-section {

        margin-top: 0;

        height: clamp(340px, 34vw, 520px);

    }



    .hero-center-brand-wrap {

        left: 50% !important;

        top: 50% !important;

        transform: translate(-50%, -50%) !important;

    }

}



/* 2. Tablets & Small Laptops (max-width: 1024px) */

@media (max-width: 1024px) {

    .site-header-container {

        background: rgba(9, 13, 22, 0.98);

        backdrop-filter: blur(14px);

        -webkit-backdrop-filter: blur(14px);

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    }



    .top-bar {

        flex-direction: column;

        align-items: stretch;

        padding: 10px 16px;

        gap: 0;

        border-bottom: none;

    }



    .top-bar-brand-row {

        width: 100%;

    }



    .mobile-header-controls {

        display: flex;

    }



    .site-brand-logo {

        height: 40px;

    }



    /* By default on <= 1024px, collapse drawer panels until МЕНЮ is clicked */

    .player-of-the-day,

    .top-actions,

    .nav-pill-bar {

        display: none;

    }



    /* When МЕНЮ is open: show clean unified full-width vertical mobile drawer */

    .site-header-container.is-mobile-menu-open .nav-pill-bar {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 8px !important;

        padding: 12px 14px 16px 14px !important;

        white-space: normal !important;

        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

        background: rgba(6, 9, 15, 0.98) !important;

        box-sizing: border-box !important;

    }



    .site-header-container.is-mobile-menu-open .top-actions {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 8px !important;

        padding: 10px 14px 12px 14px !important;

        margin-top: 10px !important;

        border-top: 1px solid rgba(255, 255, 255, 0.07) !important;

        box-sizing: border-box !important;

    }



    .site-header-container.is-mobile-menu-open .player-of-the-day {

        display: flex;

        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        padding: 6px 12px;

        margin-top: 10px;

        gap: 8px;

    }



    .top-actions .btn-top,

    .top-actions .nav-dropdown,

    .top-actions .nav-dropdown-toggle {

        width: 100% !important;

        justify-content: center !important;

        text-align: center !important;

        padding: 10px 14px !important;

        font-size: 13px !important;

        box-sizing: border-box !important;

    }



    .nav-pill-bar > .nav-pill,

    .nav-pill-bar > .nav-dropdown {

        width: 100% !important;

        box-sizing: border-box !important;

    }



    .nav-pill {

        width: 100% !important;

        justify-content: center !important;

        text-align: center !important;

        padding: 11px 14px !important;

        font-size: 13px !important;

        border-radius: 10px !important;

        box-sizing: border-box !important;

    }



    /* Accordion Dropdowns: Full-width vertical container with accordion underneath */

    .nav-dropdown {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        align-items: stretch !important;

        position: relative !important;

        box-sizing: border-box !important;

    }



    .nav-dropdown .nav-dropdown-toggle {

        width: 100% !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 11px 14px !important;

        font-size: 13px !important;

        box-sizing: border-box !important;

    }



    .nav-dropdown-menu {

        position: static !important;

        top: auto !important;

        left: auto !important;

        right: auto !important;

        transform: none !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin-top: 6px !important;

        padding: 8px !important;

        border-radius: 12px !important;

        display: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;

        box-sizing: border-box !important;

        border: 1px solid rgba(245, 158, 11, 0.4) !important;

        background: rgba(14, 18, 28, 0.98) !important;

    }



    .nav-dropdown-menu::before,

    .nav-dropdown-menu::after,

    .nav-dropdown::before {

        display: none !important;

    }



    .nav-dropdown.is-open > .nav-dropdown-menu,

    .nav-dropdown.is-hovered > .nav-dropdown-menu {

        display: flex !important;

        flex-direction: column !important;

        gap: 6px !important;

    }



    .nav-dropdown-item {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        padding: 10px 12px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 12px !important;

        border-radius: 8px !important;

    }



    .nav-dropdown-item .nav-dd-text {

        flex: 1 1 auto !important;

        min-width: 0 !important;

    }



    .nav-dropdown-item .nav-dd-title {

        font-size: 13px !important;

        white-space: normal !important;

        line-height: 1.3 !important;

    }



    .nav-dropdown-item .nav-dd-sub {

        font-size: 11px !important;

        white-space: normal !important;

    }



    .nav-dropdown-item .nav-dd-badge {

        flex-shrink: 0 !important;

        font-size: 10px !important;

        padding: 3px 8px !important;

    }



    /* Content & Sidebar stack cleanly */

    .content-grid,

    .content-grid.sidebar-left {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

    }



    .main-column {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin-bottom: 24px !important;

        flex: none !important;

    }



    .sidebar {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        align-self: stretch !important;

        flex: none !important;

        gap: 16px !important;

    }



    .main-wrapper {

        padding: 0 14px;

        margin-top: 14px;

    }



    .hero-artwork-section {

        margin-top: 0 !important;

        height: clamp(220px, 40vw, 340px);

    }



    .hero-center-brand-wrap {

        left: 50% !important;

        top: 50% !important;

        transform: translate(-50%, -50%) !important;

        padding: 0 14px;

        width: 100%;

        max-width: 100%;

        box-sizing: border-box;

    }

}



/* 3. Mobile Phones & Phablets (max-width: 768px) */

@media (max-width: 768px) {

    .top-bar {

        padding: 8px 12px;

    }



    .site-brand-logo {

        height: 34px;

    }



    .site-header-container.is-mobile-menu-open .nav-pill-bar {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 8px !important;

        padding: 10px 12px 14px 12px !important;

    }



    .hero-artwork-section {

        height: clamp(175px, 44vw, 240px) !important;

    }



    .hero-center-logo {

        width: clamp(160px, 56vw, 250px);

        max-width: 80vw;

    }



    .hero-center-tagline {

        margin-top: 8px;

        font-size: 9.5px;

        letter-spacing: 0.6px;

        padding: 5px 12px;

        gap: 6px;

        flex-wrap: wrap;

        justify-content: center;

        text-align: center;

        max-width: 92vw;

        border-radius: 14px;

    }



    .main-wrapper {

        padding: 0 10px;

        margin-top: 10px;

    }



    .threads-wrapper-header {

        padding: 12px 12px !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 10px !important;

    }



    .threads-wrapper-header > .btn,

    .threads-wrapper-header > a.btn {

        width: 100%;

        justify-content: center;

        text-align: center;

        padding: 8px 12px !important;

    }



    .welcome-quick-actions {

        width: 100% !important;

        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;

    }



    .welcome-quick-actions .btn-top {

        width: 100%;

        justify-content: center;

        text-align: center;

        padding: 8px 6px;

        font-size: 11px;

        white-space: nowrap;

    }



    .wrapper-body {

        padding: 10px !important;

    }



    /* Filter Tabs in 2 clean columns */

    .filter-tabs {

        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 6px !important;

        width: 100%;

    }



    .filter-tabs .tab-btn {

        width: 100%;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        padding: 8px 8px;

        font-size: 11.5px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }



    /* Content Grid, Main Column & Sidebar Mobile Stack */

    .content-grid,

    .content-grid.sidebar-left {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

    }



    .main-column {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;

        margin-bottom: 24px !important;

    }



    .sidebar {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        align-self: stretch !important;

        box-sizing: border-box !important;

        gap: 16px !important;

    }



    .sidebar .forum-threads-wrapper,

    .sidebar .glass-card,

    .sidebar .sidebar-server-box {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

    }



    /* Weapon & Player Cards */

    .weapons-grid {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        gap: 14px !important;

    }



    .weapon-card {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        padding: 14px 12px;

        border-radius: 12px;

        overflow: hidden !important;

    }



    .card-header-v3 {

        margin: -14px -12px 12px -12px !important;

        width: calc(100% + 24px) !important;

        box-sizing: border-box !important;

        padding: 12px !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 10px !important;

    }



    .card-header-v3 > div:last-child {

        width: 100%;

        justify-content: space-between;

        border-top: 1px solid rgba(255, 255, 255, 0.06);

        padding-top: 8px;

    }



    .weapon-previews-showcase {

        grid-template-columns: 1fr !important;

        gap: 10px;

        margin: 10px 0;

    }



    .showcase-box {

        height: 155px;

    }



    .showcase-box-header {

        padding: 8px 10px;

    }



    .showcase-view-tag {

        font-size: 10.5px;

    }



    .weapon-showcase-img {

        width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover;

    }



    .card-purchase-row {

        flex-direction: column !important;

        align-items: stretch !important;

        padding: 12px !important;

        gap: 10px !important;

    }



    .card-index-actions {

        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 8px !important;

    }



    .card-index-actions .btn-buy-skin,

    .card-index-actions .btn-card-casino {

        width: 100% !important;

        justify-content: center !important;

        text-align: center !important;

        padding: 10px 8px !important;

        font-size: 11.5px !important;

        white-space: nowrap !important;

    }



    .card-plans-mini-bar {

        width: 100%;

        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;

    }



    .plan-mini-pill-btn,

    .mini-plan-pill {

        width: 100%;

        justify-content: center;

        padding: 7px 6px;

        font-size: 11px;

    }



    .btn-buy-skin,

    .card-action-group .btn-row-action {

        width: 100%;

        justify-content: center;

        text-align: center;

        white-space: normal;

        padding: 11px 12px;

        font-size: 12px;

        line-height: 1.35;

    }



    .product-features-bar {

        grid-template-columns: 1fr 1fr;

        padding: 10px 12px;

        gap: 8px;

    }



    .feature-item {

        font-size: 11px;

    }



    /* Section Banners & Fragzone Header Strip */

    .section-banner-header,

    .fragzone-header-strip {

        padding: 14px 14px;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

    }



    .header-strip-right,

    .header-strip-search-form,

    .header-strip-search-wrap {

        width: 100%;

    }



    .header-strip-search-input {

        width: 100% !important;

    }



    .section-main-title {

        font-size: 18px;

    }



    .section-meta-badge {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 10px 14px;

    }



    /* Inventory MMO Layout */

    .mmo-dashboard-wrapper {

        padding: 14px 12px 20px 12px;

    }



    .mmo-char-hud-bar {

        padding: 12px;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

    }



    .mmo-hud-player-info {

        flex-wrap: wrap;

    }



    .mmo-hud-stats-group {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;

        width: 100%;

    }



    .mmo-hud-stat-box {

        min-width: 0;

        padding: 8px 10px;

    }



    .mmo-slots-section,

    .mmo-vault-section {

        padding: 12px 10px;

    }



    .mmo-slots-grid-horizontal {

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;

        max-width: 100% !important;

    }



    .mmo-filter-controls-row {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

    }



    .mmo-filter-pills {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 6px;

        width: 100%;

    }



    .mmo-filter-btn,

    .mmo-filter-pill {

        width: 100%;

        justify-content: center;

        text-align: center;

        padding: 8px 8px;

        font-size: 11px;

    }



    .mmo-filter-search {

        width: 100% !important;

    }



    .mmo-inventory-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;

    }



    /* Servers Page */

    .server-players-table {

        display: block;

        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }



    .server-features-grid,

    .server-rules-grid {

        grid-template-columns: 1fr !important;

    }



    .server-actions-row-main {

        flex-direction: column;

        align-items: stretch;

    }



    .btn-hero-connect,

    .btn-hero-copy,

    .btn-hero-refresh {

        width: 100%;

        justify-content: center;

    }



    /* Purchase Modal */

    .buy-modal-backdrop {

        padding: 12px;

    }



    .buy-modal-box {

        padding: 20px 16px;

    }



    .buy-modal-title {

        font-size: 19px;

        padding-right: 28px;

    }



    .buy-summary-card {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }



    /* Footer */

    .footer-cs {

        padding: 24px 14px;

        margin-top: 30px;

    }



    .footer-links {

        gap: 12px;

        flex-wrap: wrap;

    }

}



/* 4. Small Phones (max-width: 480px) */

@media (max-width: 480px) {

    .mobile-quick-user span {

        max-width: 82px;

        overflow: hidden;

        text-overflow: ellipsis;

    }



    .site-header-container.is-mobile-menu-open .top-actions,

    .site-header-container.is-mobile-menu-open .nav-pill-bar {

        grid-template-columns: 1fr;

    }



    .welcome-quick-actions {

        grid-template-columns: 1fr !important;

    }



    .card-index-actions {

        grid-template-columns: 1fr !important;

    }



    .product-features-bar {

        grid-template-columns: 1fr;

    }



    .card-plans-mini-bar {

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    }



    .mmo-hud-stats-group {

        grid-template-columns: 1fr;

    }



    .mmo-slots-grid-horizontal {

        grid-template-columns: 1fr !important;

    }



    .mmo-inventory-grid {

        grid-template-columns: 1fr;

    }

}







/* Global VIP Plan Card & Promo Card Styling */
.vip-plan-card {
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.vip-plan-card:hover {
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
    transform: translateY(-3px);
}
.vip-plan-card .card-header-v3 {
    margin: 0 !important;
    width: 100% !important;
    padding: 13px 18px !important;
    box-sizing: border-box !important;
    border-radius: 13px 13px 0 0 !important;
}
.vip-card-bottom-row {
    margin-top: auto;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 13px 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
@media (max-width: 640px) {
    .vip-plan-card .card-header-v3 {
        flex-wrap: wrap !important;
    }
}

/* КАЗИНО CSTRIKE 777 - 4 ПОРТАЛНИ КАРТИ */
.casino-card-banner-link {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    background: #090e18;
    text-decoration: none;
}
.casino-card-banner-link:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.25);
    border-color: rgba(251, 191, 36, 0.5);
}
.casino-card-banner-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
@media (max-width: 900px) {
    .casino-portal-grid-v2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}
@media (max-width: 480px) {
    .casino-portal-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}


/* --- Hero Split Layout (Left Branding Logo & Right Features) --- */
.hero-artwork-section {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: clamp(580px, 42vw, 760px) !important;
    margin-top: -95px !important;
    background: url('img/hero_banner.jpg?v=12') no-repeat center top !important;
    background-size: cover !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 105px 32px 55px 32px !important;
    box-sizing: border-box !important;
}

.hero-split-brand-wrap {
    position: relative !important;
    z-index: 5 !important;
    max-width: 1360px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 36px !important;
    box-sizing: border-box !important;
}

@media (max-width: 1180px) {
    .hero-split-brand-wrap {
        flex-direction: column !important;
        align-items: center !important;
        gap: 28px !important;
    }
}

/* Left Column: Logo & Tagline */
.hero-split-left {
    flex: 0 0 380px !important;
    max-width: 440px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

@media (max-width: 1180px) {
    .hero-split-left {
        flex: 1 !important;
        max-width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }
}

.hero-split-logo {
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    display: block !important;
    filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.95)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.85)) !important;
    transition: transform 0.3s ease !important;
}
.hero-split-logo:hover {
    transform: scale(1.02) !important;
}

.hero-split-tagline {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #e2e8f0 !important;
    letter-spacing: 0.6px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95) !important;
}

@media (max-width: 1180px) {
    .hero-split-tagline {
        justify-content: center !important;
    }
}

.hero-split-sub {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.hero-live-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #34d399 !important;
    background: rgba(16, 185, 129, 0.16) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: 0.4px !important;
}

.hero-engine-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.16) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: 0.4px !important;
}

/* Right Column: Glassmorphism Card */
.hero-split-right {
    flex: 1 !important;
    max-width: 780px !important;
    min-width: 0 !important;
}

@media (max-width: 1180px) {
    .hero-split-right {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.hero-features-glass-card {
    background: rgba(8, 13, 24, 0.82) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(56, 189, 248, 0.08) !important;
}

.hero-features-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    padding-bottom: 7px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.hero-features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 0 !important;
}

@media (max-width: 820px) {
    .hero-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 500px) {
    .hero-features-grid {
        grid-template-columns: 1fr !important;
    }
}

.hero-features-grid .server-feature-item {
    padding: 8px 10px !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
}

.hero-features-grid .server-feature-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

.hero-features-grid .server-feature-title {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.2 !important;
}

.hero-features-grid .server-feature-desc {
    font-size: 9.5px !important;
    color: #94a3b8 !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
}

.hero-rules-wrap {
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.hero-rules-title {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 6px !important;
}
.hero-rules-title i {
    color: #38bdf8 !important;
}

.hero-rules-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 5px !important;
    margin-top: 0 !important;
}

@media (max-width: 820px) {
    .hero-rules-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 500px) {
    .hero-rules-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.hero-rules-grid .server-rule-card {
    padding: 5px 3px !important;
    text-align: center !important;
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
}

.hero-rules-grid .server-rule-key {
    font-size: 8px !important;
    color: #94a3b8 !important;
    font-family: monospace !important;
    display: block !important;
}

.hero-rules-grid .server-rule-value {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #38bdf8 !important;
    display: block !important;
    margin-top: 1px !important;
}



/* ==========================================================================
   CUSTOM HERO SECTION & SPECIFICATIONS HUD (FRAGZONE REDESIGN)
   ========================================================================== */
.hero-tag-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #e2e8f0 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    transition: all 0.22s ease !important;
}

.hero-tag-pill:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    background: rgba(15, 23, 42, 0.9) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.hero-features-glass-card {
    background: linear-gradient(180deg, rgba(13, 20, 36, 0.88) 0%, rgba(8, 13, 24, 0.94) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-top: 2px solid rgba(56, 189, 248, 0.6) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(56, 189, 248, 0.1) !important;
}

.hero-features-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.hero-spec-header-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.hero-spec-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(245, 158, 11, 0.18) 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #38bdf8 !important;
    font-size: 16px !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.28) !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease !important;
}

.hero-features-glass-card:hover .hero-spec-icon-box {
    transform: rotate(5deg) scale(1.05) !important;
}

.hero-spec-text-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.hero-spec-kicker {
    font-size: 9px !important;
    font-weight: 800 !important;
    color: #38bdf8 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.hero-spec-main-title {
    margin: 0 !important;
    font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #ffffff 30%, #e2e8f0 70%, #94a3b8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15) !important;
}

.hero-spec-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #34d399 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 5px 11px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2) !important;
    white-space: nowrap !important;
}

.hero-spec-pulse-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 8px #10b981 !important;
    animation: pulseDotLive 1.8s infinite !important;
}

@keyframes pulseDotLive {
    0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.hero-features-grid .server-feature-item {
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

.hero-features-grid .server-feature-item:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    background: rgba(15, 23, 42, 0.85) !important;
}


/* ==========================================================================
   HERO TACTICAL DECK / SYSTEM MATRIX (REPLACES HERO-FEATURES-GLASS-CARD)
   Seamlessly integrated with the hero video arena, no clunky glass card
   ========================================================================== */
.hero-tactical-deck {
    position: relative !important;
    background: linear-gradient(135deg, rgba(8, 14, 26, 0.75) 0%, rgba(13, 22, 40, 0.62) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    padding: 22px 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Futuristic corner reticles */
.hero-tactical-deck::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-top: 2px solid #38bdf8;
    border-left: 2px solid #38bdf8;
    pointer-events: none;
}
.hero-tactical-deck::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid #38bdf8;
    border-right: 2px solid #38bdf8;
    pointer-events: none;
}

/* Glowing Top Circuit Accent */
.hero-tactical-top-bar {
    position: absolute;
    top: 0;
    left: 25px;
    right: 25px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38bdf8 20%, #818cf8 50%, #34d399 80%, transparent);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

/* Header within Tactical Deck */
.hero-tactical-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.hero-tactical-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.hero-tactical-reticle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #38bdf8 !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease !important;
}

.hero-tactical-deck:hover .hero-tactical-reticle {
    transform: rotate(5deg) scale(1.05) !important;
}

.hero-tactical-kicker {
    font-size: 10px !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    letter-spacing: 1.2px !important;
    color: #38bdf8 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
}

.hero-tactical-heading {
    font-family: 'Orbitron', -apple-system, sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.hero-tactical-telemetry {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #34d399 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}

.hero-tactical-pulse-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 8px #10b981 !important;
    animation: tacticalPulse 1.8s infinite !important;
}

@keyframes tacticalPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.4; }
}

/* Tactical Feature Grid & Items */
.hero-tactical-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.hero-tactical-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-left: 3px solid #38bdf8 !important;
    transition: all 0.22s ease !important;
}

.hero-tactical-item:hover {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    border-left-color: #38bdf8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

.hero-tactical-item.item-gold { border-left-color: #fbbf24 !important; }
.hero-tactical-item.item-gold:hover { border-color: rgba(251, 191, 36, 0.4) !important; border-left-color: #fbbf24 !important; }

.hero-tactical-item.item-green { border-left-color: #34d399 !important; }
.hero-tactical-item.item-green:hover { border-color: rgba(52, 211, 153, 0.4) !important; border-left-color: #34d399 !important; }

.hero-tactical-item.item-purple { border-left-color: #c084fc !important; }
.hero-tactical-item.item-purple:hover { border-color: rgba(192, 132, 252, 0.4) !important; border-left-color: #c084fc !important; }

.hero-tactical-icon-mini {
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.hero-tactical-item-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hero-tactical-item-desc {
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #94a3b8 !important;
}

/* Tactical CVAR Strip */
.hero-tactical-cvar-strip {
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.hero-tactical-cvar-label {
    font-size: 10px !important;
    font-family: 'JetBrains Mono', monospace !important;
    color: #64748b !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hero-tactical-cvar-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.hero-tactical-chip {
    padding: 3px 8px !important;
    border-radius: 4px !important;
    background: rgba(2, 6, 23, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10.5px !important;
    color: #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.hero-tactical-chip .chip-key {
    color: #64748b !important;
}
.hero-tactical-chip .chip-val {
    color: #38bdf8 !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .hero-tactical-deck {
        padding: 16px 14px !important;
    }
    .hero-tactical-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .hero-tactical-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
}

/* ==========================================================================
   КАЗИНО CSTRIKE 777 - 4 ИНТЕРАКТИВНИ КАРТИ С КАРТИНКИ И ИСТИНСКИ БУТОНИ
   ========================================================================== */
.mobile-casino-featured-wrap {
    display: none !important;
}
.desktop-casino-featured-wrap {
    display: block !important;
}

@media (max-width: 992px) {
    .mobile-casino-featured-wrap {
        display: block !important;
        margin-bottom: 18px !important;
    }
    .desktop-casino-featured-wrap {
        display: none !important;
    }
}

.casino-portal-grid-v2 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 1200px) {
    .casino-portal-grid-v2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 580px) {
    .casino-portal-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

.casino-portal-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 215px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55) !important;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    background: #090e18 !important;
    box-sizing: border-box !important;
}

.casino-portal-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.75) !important;
}

.casino-portal-card.card-weapons:hover { 
    border-color: rgba(245, 158, 11, 0.7) !important; 
    box-shadow: 0 14px 32px rgba(245, 158, 11, 0.28) !important; 
}
.casino-portal-card.card-players:hover { 
    border-color: rgba(192, 132, 252, 0.7) !important; 
    box-shadow: 0 14px 32px rgba(192, 132, 252, 0.28) !important; 
}
.casino-portal-card.card-vip:hover { 
    border-color: rgba(251, 191, 36, 0.8) !important; 
    box-shadow: 0 14px 32px rgba(251, 191, 36, 0.32) !important; 
}
.casino-portal-card.card-casino:hover { 
    border-color: rgba(236, 72, 153, 0.7) !important; 
    box-shadow: 0 14px 32px rgba(236, 72, 153, 0.28) !important; 
}

/* Background image filling the whole card */
.casino-portal-card-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    z-index: 1 !important;
}

.casino-portal-card:hover .casino-portal-card-img {
    transform: scale(1.06) !important;
}

/* Subtle overlay: artwork visible, bottom content readable */
.casino-portal-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        180deg, 
        rgba(5, 8, 18, 0.40) 0%, 
        rgba(5, 8, 18, 0.10) 30%, 
        rgba(5, 8, 18, 0.72) 62%, 
        rgba(4, 7, 15, 0.98) 100%
    ) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

.casino-portal-card:hover .casino-portal-card-overlay {
    background: linear-gradient(
        180deg, 
        rgba(5, 8, 18, 0.30) 0%, 
        rgba(5, 8, 18, 0.06) 30%, 
        rgba(5, 8, 18, 0.68) 62%, 
        rgba(4, 7, 15, 0.96) 100%
    ) !important;
}

/* Top Badge inside the card */
.casino-portal-card-top {
    position: relative !important;
    z-index: 3 !important;
    padding: 10px 10px 0 10px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.casino-portal-card-badge {
    padding: 2.5px 7px !important;
    border-radius: 5px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-family: 'JetBrains Mono', monospace !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.badge-amber  { background: rgba(245, 158, 11, 0.3) !important; color: #fbbf24 !important; border: 1px solid rgba(245, 158, 11, 0.6) !important; }
.badge-purple { background: rgba(168, 85, 247, 0.3) !important; color: #e9d5ff !important; border: 1px solid rgba(168, 85, 247, 0.6) !important; }
.badge-gold   { background: rgba(234, 179, 8, 0.3) !important;  color: #fef08a !important; border: 1px solid rgba(234, 179, 8, 0.7) !important; }
.badge-pink   { background: rgba(236, 72, 153, 0.3) !important; color: #fbcfe8 !important; border: 1px solid rgba(236, 72, 153, 0.6) !important; }

/* Content block in the bottom portion inside the card */
.casino-portal-card-content {
    position: relative !important;
    z-index: 3 !important;
    padding: 8px 10px 10px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: auto !important;
}

.casino-portal-card-title {
    font-family: 'Orbitron', -apple-system, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    color: #ffffff !important;
    margin: 0 0 2px 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

.casino-portal-card-desc {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    color: #cbd5e1 !important;
    margin: 0 0 4px 0 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* REAL BUTTONS INSIDE CARD - SINGLE LINE, NO WRAP */
.casino-portal-card-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.22s ease !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45) !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.casino-portal-card-btn span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.casino-portal-card-btn i {
    flex-shrink: 0 !important;
}

.casino-portal-card:hover .casino-portal-card-btn {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6) !important;
}

.btn-weapons {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(251, 191, 36, 0.5) !important;
}
.btn-weapons:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.5) !important;
}

.btn-players {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(192, 132, 252, 0.5) !important;
}
.btn-players:hover {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
    box-shadow: 0 5px 15px rgba(168, 85, 247, 0.5) !important;
}

.btn-vip {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
    color: #0f172a !important;
    border: 1px solid rgba(254, 240, 138, 0.7) !important;
    font-weight: 800 !important;
}
.btn-vip:hover {
    background: linear-gradient(135deg, #fef08a 0%, #f59e0b 100%) !important;
    box-shadow: 0 5px 15px rgba(251, 191, 36, 0.6) !important;
}

.btn-casino {
    background: linear-gradient(135deg, #db2777 0%, #9333ea 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(244, 114, 182, 0.6) !important;
}
.btn-casino:hover {
    background: linear-gradient(135deg, #f43f5e 0%, #c026d3 100%) !important;
    box-shadow: 0 5px 15px rgba(236, 72, 153, 0.55) !important;
}

@media (max-width: 580px) {
    .casino-portal-card {
        min-height: 195px !important;
    }
}

/* ==========================================================================
   HERO ARTWORK SECTION — TACTICAL HUD CYBER MATRIX FRAME (PERMANENT)
   ========================================================================== */
.hero-artwork-section {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: clamp(580px, 42vw, 760px) !important;
    margin-top: -95px !important;
    margin-bottom: 20px !important;
    background: url('img/hero_banner.jpg?v=12') no-repeat center top !important;
    background-size: cover !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 105px 32px 55px 32px !important;
    box-sizing: border-box !important;

    /* TACTICAL HUD MATRIX BORDERS & NEON SHADOW */
    border-top: 2px solid #38bdf8 !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.55) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85), inset 0 0 50px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(56, 189, 248, 0.18) !important;
}

/* Tactical HUD Corner Reticles [ ] */
.hero-artwork-section::before {
    content: '' !important;
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-top: 3px solid #38bdf8 !important;
    border-left: 3px solid #38bdf8 !important;
    z-index: 6 !important;
    pointer-events: none !important;
}

.hero-artwork-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-bottom: 3px solid #38bdf8 !important;
    border-right: 3px solid #38bdf8 !important;
    z-index: 6 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   FRAGZONE STATS, LEADERBOARD & PLAYER DOSSIER STYLES
   ========================================================================== */

.stats-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

/* Hero Banner */
.stats-hero-banner {
    background: linear-gradient(135deg, rgba(20, 27, 41, 0.95) 0%, rgba(10, 15, 26, 0.98) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 32px 36px;
    margin-bottom: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(245, 158, 11, 0.08);
    position: relative;
    overflow: hidden;
}

.stats-hero-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.stats-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.stats-hero-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
}

.stats-hero-desc {
    color: #94a3b8;
    font-size: 1.05rem;
    max-width: 800px;
    margin: 0;
    line-height: 1.6;
}

/* Events Showcase */
.events-showcase-box {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.events-showcase-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.events-showcase-header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fbbf24;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.events-sub {
    font-size: 0.9rem;
    color: #94a3b8;
}

.events-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.event-milestone-card {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.event-milestone-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 158, 11, 0.6);
}

.event-card-type-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.event-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
}

.event-card-target, .event-card-winners {
    font-size: 0.88rem;
    color: #94a3b8;
    margin-bottom: 4px;
}

.event-card-target strong, .event-card-winners strong {
    color: #e2e8f0;
}

.event-card-reward {
    font-size: 0.92rem;
    color: #e2e8f0;
    margin: 8px 0;
    padding: 6px 10px;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #fbbf24;
    border-radius: 4px;
}

.event-card-reward span {
    color: #fbbf24;
    font-weight: 800;
}

/* Controls Bar */
.leaderboard-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.stats-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 280px;
    max-width: 440px;
}

.search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.search-input-wrap i.fa-magnifying-glass {
    position: absolute;
    left: 14px;
    color: #64748b;
}

.clear-search-btn {
    position: absolute;
    right: 12px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 13px;
}

.stats-search-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 10px 36px 10px 38px;
    border-radius: 10px;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s;
}

.stats-search-input:focus {
    border-color: #fbbf24;
}

.btn-stats-search {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    font-weight: 800;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    transition: transform 0.2s;
}

.btn-stats-search:hover {
    transform: translateY(-1px);
}

.stats-filter-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.stats-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.stats-tab:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.stats-tab.active {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

/* Leaderboard Table */
.leaderboard-table-card {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.fz-stats-table {
    width: 100%;
    border-collapse: collapse;
    color: #cbd5e1;
    font-size: 13px;
}

.fz-stats-table th {
    background: rgba(10, 15, 26, 0.95);
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fz-stats-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.leaderboard-row:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.pos-cell {
    font-weight: 900;
    font-size: 14px;
    text-align: center;
}

.crown-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 6px;
}

.crown-icon.gold {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.crown-icon.silver {
    color: #cbd5e1;
    background: rgba(203, 213, 225, 0.12);
    border: 1px solid rgba(203, 213, 225, 0.3);
}

.crown-icon.bronze {
    color: #cd7f32;
    background: rgba(205, 127, 50, 0.12);
    border: 1px solid rgba(205, 127, 50, 0.3);
}

.flag-icon {
    width: 22px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.flag-icon-small {
    width: 18px;
    height: 12px;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 2px;
}

.player-entry {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-mini-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #090d16;
}

.player-info-wrap {
    display: flex;
    flex-direction: column;
}

.player-link-name {
    color: #fff;
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
    transition: color 0.15s;
}

.player-link-name:hover {
    color: #fbbf24;
}

.player-auth-sub {
    font-size: 11px;
    color: #64748b;
    font-family: monospace;
}

.table-rank-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-rank-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.table-rank-name {
    display: block;
    font-weight: 700;
    color: #e2e8f0;
    font-size: 12.5px;
}

.table-rank-xp {
    font-size: 10.5px;
    color: #fbbf24;
}

.kd-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.kd-pill.kd-high {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.kd-pill.kd-low {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.btn-view-profile {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-view-profile:hover {
    background: #38bdf8;
    color: #000;
}

/* Pagination */
.stats-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.page-link {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    text-decoration: none;
    font-weight: 700;
}

.page-link:hover, .page-link.active {
    background: #fbbf24;
    color: #000;
    border-color: #fbbf24;
}

/* ==========================================================================
   PLAYER PROFILE DOSSIER STYLES
   ========================================================================== */
.player-dossier-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.btn-back-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-back-stats:hover {
    color: #fbbf24;
    border-color: #fbbf24;
}

.player-hero-card {
    background: linear-gradient(135deg, rgba(20, 27, 41, 0.98) 0%, rgba(10, 15, 26, 0.99) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 28px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    flex-wrap: wrap;
}

.player-hero-avatar-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.player-hero-avatar {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    object-fit: cover;
    border: 3px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.25);
    background: #090d16;
}

.player-steam-badge {
    margin-top: -12px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.badge-steam {
    background: #0284c7;
    color: #fff;
}

.badge-nonsteam {
    background: #475569;
    color: #cbd5e1;
}

.player-hero-details {
    flex: 1;
    min-width: 280px;
}

.player-hero-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.player-hero-name {
    margin: 0;
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
}

.player-hero-pos-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.player-hero-sub {
    display: flex;
    gap: 18px;
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.player-hero-sub span i {
    color: #fbbf24;
    margin-right: 5px;
}

.player-rank-bar-wrap {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.player-rank-badge-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rank-badge-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.rank-title {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}

.rank-subtitle {
    color: #fbbf24;
    font-size: 12px;
    font-weight: 700;
}

.rank-progress-details {
    flex: 1;
    min-width: 200px;
}

.rank-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 6px;
}

.rank-progress-text strong {
    color: #fff;
}

.rank-progress-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.rank-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    transition: width 0.4s ease;
}

/* Metric Cards Grid */
.stats-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.metric-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.metric-card.gold { border-left: 4px solid #f59e0b; }
.metric-card.red { border-left: 4px solid #ef4444; }
.metric-card.cyan { border-left: 4px solid #06b6d4; }
.metric-card.orange { border-left: 4px solid #f97316; }
.metric-card.purple { border-left: 4px solid #a855f7; }
.metric-card.emerald { border-left: 4px solid #10b981; }

.metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fbbf24;
}

.metric-value {
    display: block;
    font-size: 1.45rem;
    font-weight: 900;
    color: #fff;
}

.metric-label {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
}

/* Dossier Cards */
.dossier-section-card {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dossier-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.dossier-section-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dossier-count-badge {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
}

.dossier-admin-badge {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
}

.dossier-empty-hint {
    color: #64748b;
    font-size: 13.5px;
    font-style: italic;
    padding: 10px 0;
}

/* Weapons Grid */
.weapons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.weapon-stat-card {
    background: rgba(10, 15, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.weapon-visual-holder {
    height: 100px;
    background: radial-gradient(circle at center, rgba(245, 158, 11, 0.08) 0%, rgba(9, 13, 22, 0.95) 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.weapon-silhouette {
    max-height: 70px;
    max-width: 90%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}

.weapon-stat-content {
    padding: 14px;
}

.weapon-name {
    font-size: 14px;
    font-weight: 800;
    color: #fbbf24;
    margin-bottom: 10px;
}

.weapon-metrics {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.w-metric {
    display: flex;
    flex-direction: column;
}

.w-val {
    font-weight: 800;
    color: #fff;
    font-size: 13px;
}

.w-lbl {
    font-size: 10.5px;
    color: #94a3b8;
}

/* Aliases & IP Tables */
.fz-stats-table.mini th {
    padding: 10px 14px;
    font-size: 11px;
}

.fz-stats-table.mini td {
    padding: 9px 14px;
    font-size: 12.5px;
}

.admin-ip-code {
    background: rgba(0, 0, 0, 0.4);
    color: #38bdf8;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 700;
}

.ip-privacy-shield {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 16px 20px;
    color: #94a3b8;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ip-privacy-shield i {
    font-size: 20px;
    color: #38bdf8;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .stats-hero-banner { padding: 20px 16px; }
    .stats-hero-title { font-size: 1.6rem; }
    .leaderboard-controls-bar { flex-direction: column; align-items: stretch; }
    .stats-search-form { max-width: 100%; }
    .stats-filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
    .player-hero-card { flex-direction: column; text-align: center; padding: 20px 16px; }
    .player-hero-name-row { justify-content: center; }
    .player-hero-sub { justify-content: center; }
    .player-rank-bar-wrap { flex-direction: column; text-align: center; }
    .rank-progress-details { width: 100%; }
    .stats-metric-grid { grid-template-columns: 1fr 1fr; }
}