/*!
 * NEXORIAMU - REDESIGN COMPLET REZISTMU CLONE
 */

/* =========================================
   HEADER & NAVBAR
========================================= */
/* Eliminare border alb (outline) la click pe butoane si linkuri */
a:focus, button:focus, .btn-rh:focus, .rezist-menu li a:focus, input:focus, select:focus {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.rezist-header { 
    background: #080808; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    padding: 12px 0; 
    position: relative; /* VITAL: Tine header-ul la suprafata */
    z-index: 9999;      /* VITAL: Tine header-ul deasupra tuturor elementelor */
}
.rezist-header-inner { display: flex; justify-content: space-between; align-items: center; }

.rh-left { display: flex; align-items: center; }
.logo-dropdown-wrapper { position: relative; cursor: pointer; display: inline-block; z-index: 1000; }
.game-version-badge { background: #111; border: 1px solid rgba(255,255,255,0.08); padding: 6px 18px; border-radius: 4px; text-align: center; transition: 0.3s; position: relative; z-index: 2;}
.game-version-badge span { display: block; font-size: 8px; color: #666; text-transform: uppercase; letter-spacing: 0.5px;}
.game-version-badge strong { display: block; font-size: 13px; color: #fff; letter-spacing: 1px; }
.logo-dropdown-wrapper:hover .game-version-badge { border-color: rgba(255,255,255,0.3); background: #1a1a1a; }

/* Am centrat cardul sub buton si i-am adaugat animatie de culisare */
.logo-dropdown-card {
    position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%) translateY(10px); width: 240px;
    background: #0d0d0d; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    padding: 25px; text-align: center; opacity: 0; visibility: hidden; transition: 0.3s;
    box-shadow: 0 15px 40px rgba(0,0,0,0.9); z-index: 1;
}
/* Sageata mica care indica in sus catre buton */
.logo-dropdown-card::before {
    content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.1); border-left: 1px solid rgba(255,255,255,0.1);
}
.logo-dropdown-wrapper:hover .logo-dropdown-card { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.logo-dropdown-card img { max-width: 140px; margin-bottom: 15px; filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.4)); }
.logo-dropdown-card h3 { margin: 0; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 1px; }
.logo-dropdown-card p { margin: 5px 0 0; color: #888; font-size: 10px; text-transform: uppercase; }

.rh-center { margin: 0 auto;}
.rezist-menu { display: flex; gap: 25px; list-style: none; margin: 0; padding: 0; }
.rezist-menu li a { display: flex; flex-direction: column; text-decoration: none; text-align: left; }
.rezist-menu li a strong { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.5px; transition: 0.2s; }
.rezist-menu li a span { color: #666; font-size: 10px; transition: 0.2s; }
.rezist-menu li:hover a strong, .rezist-menu li.active a strong { color: #dc2626; }

.rh-right { display: flex; align-items: center; gap: 12px; }
.btn-rh { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; text-decoration: none !important; transition: 0.2s; }
.btn-rh-gold { background: #eab308; color: #000 !important; }
.btn-rh-gold:hover { background: #facc15; }
.btn-rh-red { background: #dc2626; color: #fff !important; }
.btn-rh-red:hover { background: #ef4444; }
.btn-rh-dark { background: transparent; border: 1px solid rgba(220, 38, 38, 0.4); color: #dc2626 !important; }
.btn-rh-dark:hover { border-color: #dc2626; color: #fff !important; background: rgba(220, 38, 38, 0.1); }

/* Selectorul de limbă fixat pe fundal negru */
.rh-lang .we-lang-dropdown-toggle { background: transparent !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #fff !important; padding: 6px 12px !important; border-radius: 4px !important; box-shadow: none !important; }
.rh-lang .we-lang-dropdown-menu { 
    background: #0d0d0d !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 6px !important; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.9) !important; padding: 8px !important; top: calc(100% + 15px) !important; left: auto !important; right: 0 !important; min-width: 160px;
}
.rh-lang .we-lang-dropdown-option { color: #888 !important; background: transparent !important; border: none !important; border-radius: 4px !important; margin-bottom: 2px !important; padding: 8px 12px !important; transition: 0.2s !important; }
.rh-lang .we-lang-dropdown-option:hover { background: rgba(220, 38, 38, 0.1) !important; color: #fff !important; }
.rh-lang .we-lang-option-active { background: rgba(220, 38, 38, 0.15) !important; color: #dc2626 !important; border-left: 2px solid #dc2626 !important; }

/* =========================================
   HERO SECTION WIDGETS
========================================= */
.rezist-hero { background-size: cover; background-position: center; min-height: 800px; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 60px 0; }
.rezist-hero::before { content: ''; position: absolute; inset: 0; background: rgba(5, 2, 2, 0.2); }
.hero-widgets-container { position: relative; z-index: 10; display: flex; gap: 30px; margin-top: 40px; }

.rh-widget { background: rgba(12, 10, 10, 0.95); border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; padding: 25px; width: 330px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.rh-widget-title { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1px; margin-bottom: 25px; }
.rh-widget-title::before, .rh-widget-title::after { content: ''; height: 1px; background: #dc2626; flex: 1; max-width: 35px; }

.rh-cs-inner { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
.rh-cs-logo { width: 75px; height: 75px; background: #050505; border: 1px solid rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; }
.cs-logo-inner { width: 30px; height: 30px; background: #dc2626; }
.rh-cs-details { flex: 1; text-align: center; }
.rh-cs-details p { margin: 0 0 4px; font-size: 9px; color: #888; font-weight: bold; letter-spacing: 0.5px; }
.rh-cs-details h4 { margin: 0 0 12px; color: #dc2626; font-size: 13px; font-weight: bold;}
.rh-cs-details h3 { margin: 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: 1px;}
.rh-cs-stages { display: flex; gap: 10px; margin-bottom: 15px; }
.rh-stage { flex: 1; background: #111; border: 1px solid rgba(255,255,255,0.03); padding: 12px 5px; text-align: center; border-radius: 4px; }
.rh-stage span { display: block; margin-bottom: 4px; font-size: 8px; color: #666; }
.rh-stage strong { font-size: 11px; color: #fff; }
.rh-btn-full { display: block; width: 100%; text-align: center; padding: 12px; background: rgba(255,255,255,0.02); color: #fff !important; font-size: 11px; font-weight: 800; border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; transition: 0.2s; text-decoration: none !important; }
.rh-btn-full:hover { background: #dc2626; border-color: #dc2626; }

.rh-timer-blocks { display: flex; gap: 10px; justify-content: center; margin-bottom: 25px; }
.rh-timer-box { background: #050505; border: 1px solid rgba(255,255,255,0.03); border-radius: 6px; width: 60px; height: 65px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rh-timer-box strong { color: #fff; font-size: 24px; line-height: 1; margin-bottom: 2px;}
.rh-timer-box span { color: #666; font-size: 8px; letter-spacing: 1px; }
.rh-timer-date { text-align: center; color: #555; font-size: 11px; }

.rh-quick-links { position: relative; z-index: 10; display: flex; justify-content: center; gap: 15px; margin-top: 100px; flex-wrap: wrap; }
.rh-ql-card { display: flex; align-items: center; gap: 15px; background: rgba(15, 12, 12, 0.85); border: 1px solid rgba(255,255,255,0.05); padding: 15px; border-radius: 6px; width: 220px; text-decoration: none !important; transition: 0.3s; }
.rh-ql-card:hover { border-color: #dc2626; transform: translateY(-4px); background: rgba(20, 15, 15, 0.95); }
.rh-ql-icon { width: 35px; height: 35px; background: rgba(255,255,255,0.03); border-radius: 6px; display:flex; align-items:center; justify-content:center; font-size: 16px; }
.rh-ql-card h4 { margin: 0 0 2px; color: #fff; font-size: 12px; font-weight: 800; }
.rh-ql-card p { margin: 0; color: #888; font-size: 10px; }

.float-banner { position: fixed; top: 40%; z-index: 100; background: #dc2626; color: #fff !important; text-decoration: none !important; font-size: 11px; font-weight: bold; letter-spacing: 1px; padding: 8px 20px; border-radius: 0 4px 4px 0; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); transition: 0.3s; border: 1px solid #7f1d1d; border-left: none; }
.float-banner.float-left { left: 0; }
.float-banner.float-right { right: 0; left: auto; transform: none; border-radius: 4px 0 0 4px; border: 1px solid #7f1d1d; border-right: none; background: #eab308; color: #000 !important; border-color: #ca8a04; }
.float-banner:hover { filter: brightness(1.2); padding-top: 25px; }

/* =========================================
   LAYOUT PAGINA PRINCIPALĂ (HOME.PHP)
========================================= */
.custom-home-layout { display: flex; gap: 30px; margin-top: 20px; position: relative; z-index: 20; }
.custom-home-main { flex: 1; min-width: 0; }
.custom-home-sidebar { width: 330px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }

.main-slider { position: relative; height: 420px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 40px; background: #050505; }
.slider-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 1 !important; }
.main-slider::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%) !important; z-index: 1; }
.slider-content { position: relative; z-index: 2; padding: 70px 40px; max-width: 450px; }
.badge-season { display: inline-block; background: #dc2626; color: #fff; padding: 4px 12px; font-size: 11px; font-weight: bold; border-radius: 12px; margin-bottom: 15px; letter-spacing: 1px; }
.slider-content h2 { color: #ffffff !important; font-size: 32px; font-weight: 800; margin: 0 0 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.slider-content h2 span { color: #ef4444 !important; }
.slider-content p { color: #f8fafc !important; font-size: 14px; line-height: 1.6; margin-bottom: 25px; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
.btn-slider { display: inline-block; background: linear-gradient(135deg, #dc2626, #7f1d1d); color: #ffffff !important; font-weight: bold; padding: 12px 30px; border-radius: 4px; font-size: 13px; text-decoration: none !important; transition: 0.3s; }
.btn-slider:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(220, 38, 38, 0.4); color: #ffffff !important; }

.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 35px; height: 35px; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; font-size: 12px; border: 1px solid rgba(255,255,255,0.1); }
.slider-arrow.arrow-left { left: 20px; }
.slider-arrow.arrow-right { right: 20px; }
.slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.slider-dots span { width: 8px; height: 8px; background: rgba(255,255,255,0.3); border-radius: 50%; cursor: pointer; }
.slider-dots span.active { background: #dc2626; }

/* LATEST NEWS - NOU DESIGN */
.section-title { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; margin: 0 0 20px; position: relative; text-transform: uppercase;}
.section-title::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 60px; height: 2px; background: #dc2626; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-card { background: #080808; border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none !important; transition: 0.3s; }
.news-card:hover { border-color: rgba(220, 38, 38, 0.5); transform: translateY(-5px); }
.news-thumb { height: 140px; background-size: cover; background-position: center; position: relative; }
.news-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; font-size: 10px; font-weight: bold; color: #000; border-radius: 4px; z-index: 2; }
.news-badge.video { background: #eab308; }
.news-badge.news { background: #eab308; }
.news-badge.update { background: #3b82f6; color:#fff; }
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: rgba(220, 38, 38, 0.9); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; z-index: 2; }
.news-info { padding: 15px; flex: 1; }
.news-info h4 { margin: 0; color: #fff; font-size: 14px; font-weight: bold; line-height: 1.4; }
.news-excerpt { color: #888; font-size: 11px; margin-top: 10px; line-height: 1.5; }
.news-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-top: 1px solid rgba(255,255,255,0.05); }
.news-date { color: #666; font-size: 11px; }
.btn-readmore { background: linear-gradient(135deg, #dc2626, #7f1d1d); color: #fff !important; padding: 6px 12px; border-radius: 4px; font-weight: bold; font-size: 10px; text-transform: uppercase; }

.news-pagination { display: flex; justify-content: center; gap: 5px; margin-top: 30px; }
.news-pagination a { background: #111; border: 1px solid rgba(255,255,255,0.1); color: #888 !important; padding: 8px 12px; border-radius: 4px; font-size: 12px; font-weight: bold; text-decoration: none !important; }
.news-pagination a:hover, .news-pagination a.active { background: #dc2626; color: #fff !important; border-color: #dc2626; }

/* SIDEBAR & WIDGETS */
.sidebar-widget { background: #080505; border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 20px; margin-bottom: 20px;}
.widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.widget-header h3 { margin: 0; color: #fff; font-size: 13px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.status-online { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #4ade80; font-size: 9px; padding: 3px 8px; border-radius: 20px; display: flex; align-items: center; gap: 5px; font-weight: bold; letter-spacing: 1px; }
.status-online .dot { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 5px #4ade80;}
.status-players { margin-bottom: 20px; }
.status-players p { margin: 0 0 5px; color: #888; font-size: 12px; }
.players-count { font-size: 14px; color: #888; }
.players-count strong { font-size: 28px; color: #fff; font-weight: 800; line-height: 1; margin-right: 5px; }
.status-rates { display: flex; gap: 10px; margin-bottom: 20px; }
.rate-box { flex: 1; background: #111; border: 1px solid rgba(255,255,255,0.05); padding: 10px 5px; text-align: center; border-radius: 6px; }
.rate-box strong { display: block; color: #fff; font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.rate-box span { color: #888; font-size: 9px; text-transform: uppercase; }
.status-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.status-badges span { font-size: 10px; color: #aaa; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 4px; }
.status-times { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 15px; }
.status-times div { color: #666; font-size: 10px; }
.status-times strong { color: #aaa; font-weight: bold; margin-left: 5px; font-size: 11px; }

.rank-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
.rank-table th { color: #666; font-size: 10px; text-align: left; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); text-transform: uppercase; }
.rank-table th:last-child, .rank-table td:last-child, .rank-table th:nth-child(3), .rank-table td:nth-child(3) { text-align: right; }
.rank-table td { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.02); color: #fff; font-size: 12px; font-weight: bold; }
.rank-num { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #888; background: #111; border-radius: 3px; }
.rank-num.gold { background: #ca8a04; color: #fff; box-shadow: 0 0 5px rgba(202, 138, 4, 0.5);}
.rank-num.silver { background: #94a3b8; color: #fff; }
.rank-num.bronze { background: #b45309; color: #fff; }
.player-name { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none !important;}
.player-name:hover { color: #dc2626; }
.player-name img { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; }
.btn-full-rank { display: block; width: 100%; text-align: center; background: rgba(255,255,255,0.03); color: #fff !important; font-size: 11px; font-weight: bold; padding: 12px; border-radius: 4px; transition: 0.3s; text-decoration: none !important; }
.btn-full-rank:hover { background: var(--we-primary); }

/* =========================================
   FOOTER NOU
========================================= */
.rezist-footer { border-top: 1px solid #dc2626; background: #050505; position: relative; margin-top: 50px; font-family: 'Inter', sans-serif;}
.footer-to-top { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; background: #050505; border: 1px solid #dc2626; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #dc2626; cursor: pointer; transition: 0.3s; }
.footer-to-top:hover { background: #dc2626; color: #fff; }
.rf-container { display: flex; justify-content: space-between; padding: 50px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

.rf-left { max-width: 350px; }
.rf-left img { max-width: 200px; margin-bottom: 15px; filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.4));}
.rf-disclaimer { background: #0d0d0d; border: 1px solid rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; color: #666; font-size: 11px; line-height: 1.6; }

.rf-right { display: flex; gap: 80px; }
.rf-col h4 { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 1px; margin: 0 0 20px; text-transform: uppercase;}
.rf-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rf-col ul li a { color: #888 !important; font-size: 13px; text-decoration: none !important; transition: 0.2s; }
.rf-col ul li a:hover { color: #dc2626 !important; }

.rf-bottom { text-align: center; padding: 20px 0; color: #fff; font-size: 12px; font-weight: bold; }

@media (max-width: 1024px) {
    .custom-home-layout { flex-direction: column; }
    .custom-home-sidebar { width: 100%; }
    .news-grid { grid-template-columns: 1fr 1fr; }
    .rf-container { flex-direction: column; gap: 40px; align-items: center; text-align: center; }
    .rf-right { flex-direction: column; gap: 30px; text-align: center; }
}
@media (max-width: 768px) {
    .news-grid { grid-template-columns: 1fr; }
    .slider-content h2 { font-size: 24px; }
}

/* =========================================
   FIX LANGUAGE SELECTOR DROPDOWN
========================================= */
.rh-lang { position: relative; }
.rh-lang .we-lang-dropdown-menu {
    background: #0d0d0d !important;
    border: 1px solid rgba(220, 38, 38, 0.4) !important;
    border-radius: 6px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.9) !important;
    padding: 8px !important;
    min-width: 180px !important;
    top: calc(100% + 10px) !important;
}
.rh-lang .we-lang-dropdown-option {
    color: #888 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    margin-bottom: 2px !important;
    padding: 8px 12px !important;
    transition: 0.2s !important;
}
.rh-lang .we-lang-dropdown-option:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #fff !important;
}
.rh-lang .we-lang-option-active {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
    border-left: 2px solid #dc2626 !important;
}

/* =========================================
   EFECTE ANIMATE: BUTOANE, MENIU & SLIDER
========================================= */

/* 1. Sclipire (Shine Effect) pentru Butoanele din Header, Slider si Stiri */
.btn-rh, .btn-slider, .btn-readmore, .btn-full-rank, .rh-btn-full {
    position: relative;
    overflow: hidden;
}

.btn-rh::after, .btn-slider::after, .btn-readmore::after, .btn-full-rank::after, .rh-btn-full::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    z-index: 1;
    transition: left 0s; /* Reset instant la ieșirea cursorului */
}

/* Cand pui mouse-ul, sclipirea traverseaza butonul */
.btn-rh:hover::after, .btn-slider:hover::after, .btn-readmore:hover::after, .btn-full-rank:hover::after, .rh-btn-full:hover::after {
    left: 200%;
    transition: left 0.7s ease-in-out;
}

/* Ne asiguram ca textul/iconitele raman mereu deasupra sclipirii */
.btn-rh *, .btn-slider *, .btn-readmore *, .btn-full-rank *, .rh-btn-full * {
    position: relative;
    z-index: 2;
}

/* 2. Animatie Meniu Header (Linie rosie extinsa + Neon text) */
.rezist-menu li a {
    position: relative;
    padding-bottom: 5px; 
}

.rezist-menu li a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #dc2626;
    box-shadow: 0 0 10px #dc2626;
    transition: width 0.3s ease-in-out;
}

.rezist-menu li:hover a::before, .rezist-menu li.active a::before {
    width: 80%; /* Linia se extinde sub text */
}

.rezist-menu li:hover a strong, .rezist-menu li.active a strong {
    text-shadow: 0 0 15px rgba(220, 38, 38, 0.6);
}

/* 3. Slider Arrows (Sageti) Hover Effect */
.slider-arrow {
    transition: all 0.3s ease;
}
.slider-arrow:hover {
    background: rgba(220, 38, 38, 0.9);
    border-color: #dc2626;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.6);
    transform: translateY(-50%) scale(1.15); /* Se mareste usor */
}

/* 4. Quick Links (Lag, Guide, Discord etc) - Extindere Glow */
.rh-ql-icon {
    transition: all 0.3s ease;
}
.rh-ql-card:hover .rh-ql-icon {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
}

/* =========================================
   EFECTE PREMIUM DIN VIDEO (BORDER, FULGER, SLIDER SHINE)
========================================= */

/* 1. BORDER ROTATIV PE BUTONUL REGISTER (.btn-rh-red) */
.btn-rh-red {
    position: relative;
    background: transparent !important; /* Ascundem fundalul pentru a lasa borderul sa se vada */
    overflow: hidden;
    z-index: 1;
    border: none !important;
}

/* Gradientul care se invarte in spate */
.btn-rh-red::before {
    content: ''; 
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(255, 255, 255, 0.9) 100%);
    animation: spinBorder 2s linear infinite;
    z-index: -2;
}

/* Interiorul rosu al butonului (cu 2px mai mic pt a crea borderul) */
.btn-rh-red::after {
    content: ''; 
    position: absolute;
    inset: 2px; /* Grosimea borderului care se invarte (2px) */
    background: #dc2626 !important; 
    border-radius: 2px;
    z-index: -1;
    transition: 0.3s;
    /* Suprascriem efectul de shine vechi doar pt butonul asta */
    width: auto; height: auto; transform: none; left: 2px; 
}
.btn-rh-red:hover::after {
    background: #ef4444 !important;
}

@keyframes spinBorder {
    100% { transform: rotate(360deg); }
}


/* 2. FULGERARE IN NORI (Peste fundal, zona Castle Siege) */
.rezist-hero::after {
    content: ''; 
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Creem o pata de lumina alba/albastruie in partea stanga-sus */
    background: radial-gradient(ellipse at 25% 20%, rgba(200, 220, 255, 0.35) 0%, transparent 50%);
    opacity: 0; 
    z-index: 1; /* Il tinem in spate, sub widget-uri */
    pointer-events: none;
    animation: fulgerareNori 9s infinite; /* Fulgera o data la 9 secunde */
}

@keyframes fulgerareNori {
    0%, 91%, 93%, 95%, 97%, 100% { opacity: 0; }
    92% { opacity: 0.9; } /* Prima fulgerare puternica */
    96% { opacity: 0.4; } /* A doua fulgerare mai slaba, ca un ecou */
}


/* 3. SHINE AUTOMAT PE SLIDER */
.main-slider::after {
    content: ''; 
    position: absolute;
    top: 0; left: -100%; 
    width: 50%; height: 100%;
    /* O dunga oblica de lumina care traverseaza imaginea */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    z-index: 3; /* Peste fundal, dar sub text */
    pointer-events: none;
    animation: sliderShineAuto 6s infinite;
}

@keyframes sliderShineAuto {
    0%, 70% { left: -100%; } /* Sta ascuns 70% din timp */
    100% { left: 200%; }     /* Traverseaza imaginea in ultimele secunde */
}

/* =========================================
   RE-DESIGN COMPLET: QUICK LINKS (CLARITATE PREMIUM)
========================================= */

/* 1. Anulam absolut orice efect vechi de pe toate cardurile */
.rh-ql-card::before, .rh-ql-card::after { display: none !important; animation: none !important; }

/* 2. Design-ul de baza pentru carduri (Mat, curat, elegant) */
.rh-ql-card {
    background: #0c0c0c !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    transition: transform 0.3s, background 0.3s, border-color 0.3s !important;
    overflow: hidden;
}

/* 3. Iconita (Casuta separata, sobra, clara) */
.rh-ql-icon {
    background: #151515 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 6px !important;
    color: #aaa !important; /* Iconita alba-gri */
    transition: all 0.3s ease !important;
}

/* 4. Hover pe cardurile normale */
.rh-ql-card:hover {
    background: #111 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-3px);
}

/* La hover, iconita NU se mai face rosie toata. Prinde doar un contur fin si iconita se aprinde */
.rh-ql-card:hover .rh-ql-icon {
    background: #1a1a1a !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.15) !important;
}

/* =========================================
   EFECT BORDER ROTATIV DOAR PE "REGISTER" (FIXAT)
========================================= */
/* Selectam automat ultimul buton (Register) pentru a fi special */
.rh-quick-links a:last-child {
    border: none !important; 
    background: transparent !important;
    isolation: isolate !important; /* MAGIA: Tine fundalul negru strict inauntrul butonului! */
    position: relative !important;
}

.rh-quick-links a:last-child::before {
    display: block !important;
    content: ''; 
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    /* Gradient rosu si alb stralucitor */
    background: conic-gradient(from 0deg, transparent 60%, rgba(220, 38, 38, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    animation: spinBorder 2.5s linear infinite !important;
    z-index: -2;
}

.rh-quick-links a:last-child::after {
    display: block !important;
    content: ''; 
    position: absolute;
    inset: 1px; /* Grosimea border-ului (1 pixel) */
    background: #0c0c0c !important; 
    border-radius: 7px;
    z-index: -1;
    transition: 0.3s;
}

/* Hover special pentru butonul de Register */
.rh-quick-links a:last-child:hover::after {
    background: #111 !important;
}

@keyframes spinBorder {
    100% { transform: rotate(360deg); }
}

/* =========================================
   LINIE DESPARTITOARE & ICONITE VECTORIALE ALBE
========================================= */

/* Linia de separare (Glow rosu orizontal) */
.rezist-separator-line {
    width: 100%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(220, 38, 38, 0.7) 0%, rgba(220, 38, 38, 0) 75%);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
    margin: 0;
    position: relative;
    z-index: 10;
}

/* Containerul de jos pentru butoane (le coboram sub linie, deasupra sliderului) */
.rh-quick-links-bottom {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
}

/* Setari pentru noile iconite vectoriale (SVG) pur albe */
.rh-ql-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rh-ql-icon svg {
    width: 22px;
    height: 22px;
    color: #ffffff !important; /* Fortam albul pur */
    transition: all 0.3s ease;
}

/* La hover, iconita alba se transforma in rosu aprins si se mareste subtil */
.rh-ql-card:hover .rh-ql-icon svg {
    color: #ef4444 !important;
    transform: scale(1.15);
}

/* =========================================
   REPARARE BUTOANE HEADER (LOG OUT / REGISTER)
========================================= */
/* Izolam strict butoanele din colțul dreapta-sus */
.rh-right .btn-rh-red {
    background: #dc2626 !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important; /* Tine sclipirea strict in interiorul butonului */
    z-index: 1 !important;
}

.rh-right .btn-rh-red:hover {
    background: #ef4444 !important;
}

/* Anulam gradientul care se invartea */
.rh-right .btn-rh-red::before {
    display: none !important;
    animation: none !important;
}

/* Rescriem strict efectul de SCLIPIRE (Shine) curat pe ::after */
.rh-right .btn-rh-red::after {
    display: block !important;
    content: '';
    position: absolute !important;
    inset: auto !important; /* Anulam 'inset: 1px' ramas de la borderul de jos */
    top: 0 !important; 
    left: -150% !important; 
    width: 50% !important; 
    height: 100% !important;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%) !important;
    transform: skewX(-25deg) !important;
    z-index: 2 !important;
    border-radius: 0 !important;
    transition: left 0s !important;
}

/* Traversarea sclipirii la hover */
.rh-right .btn-rh-red:hover::after {
    left: 200% !important;
    transition: left 0.7s ease-in-out !important;
}

/* =========================================
   USER CONTROL PANEL (UCP) REDESIGN (NEXORIA PREMIUM)
========================================= */

/* 1. Eliminarea generala a culorii mov/purple din template */
.profiles_guild_card, .profiles_player_card, .panel, .we-sidebar .panel {
    border-color: rgba(220, 38, 38, 0.15) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
    background: #0a0a0a !important; /* Fundal dark pt panouri */
}

/* 2. Redesign Tabele "My Account" */
.we-layout-usercp table {
    background: transparent !important;
    width: 100% !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
}
.we-layout-usercp table td, .we-layout-usercp table th {
    background: #080808 !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.03) !important;
    color: #ccc !important;
    padding: 15px !important;
    vertical-align: middle !important;
}
.we-layout-usercp table tr:nth-child(odd) td { background-color: #0d0d0d !important; }
.we-layout-usercp table tr:hover td { background-color: #111 !important; color: #fff !important; }

/* Butoanele de CHANGE din tabele */
.we-layout-usercp .btn {
    background: transparent !important;
    border: 1px solid rgba(220, 38, 38, 0.5) !important;
    color: #dc2626 !important;
    border-radius: 4px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: 0.3s !important;
}
.we-layout-usercp .btn:hover {
    background: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.4) !important;
}

/* 3. Caracterele Mele (Avatare) - adaugam efect Hover */
.we-layout-usercp img {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    background: #000 !important;
    transition: all 0.3s ease !important;
}
.we-layout-usercp img:hover {
    border-color: #dc2626 !important;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.4) !important;
    transform: scale(1.05);
}

/* 4. MENIUL DIN DREAPTA (Sa arate IDENTIC cu Quick Links-urile) */
.we-sidebar .list-group-item,
.we-sidebar a[class*="usercp"],
.we-usercp-card {
    background: #0c0c0c !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    margin: 0 10px 10px 10px !important; /* Spatiere intre butoane */
    padding: 12px 15px !important;
    display: flex !important;
    align-items: center !important;
    transition: transform 0.3s, background 0.3s, border-color 0.3s !important;
    text-decoration: none !important;
}

/* Anulam background-urile gri/mov vechi */
.we-sidebar .list-group-item::before, .we-sidebar .list-group-item::after,
.we-usercp-card::before, .we-usercp-card::after {
    display: none !important;
}

/* Hover-ul Meniului UCP */
.we-sidebar .list-group-item:hover,
.we-sidebar a[class*="usercp"]:hover,
.we-usercp-card:hover {
    background: #111 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(5px); /* Se misca usor la dreapta la hover */
}

/* Iconita din meniul UCP (o izolam intr-o caseta de styling identica cu headerul) */
.we-sidebar .list-group-item i,
.we-sidebar .list-group-item .icon,
.we-usercp-card-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    background: #151515 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 6px !important;
    color: #aaa !important;
    margin-right: 15px !important;
    transition: all 0.3s ease !important;
}

/* Iconita la hover -> Se aprinde Rosu */
.we-sidebar .list-group-item:hover i,
.we-sidebar .list-group-item:hover .icon,
.we-usercp-card:hover .we-usercp-card-icon {
    background: #1a1a1a !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.15) !important;
    transform: scale(1.1);
}

/* Textele din butoanele UCP */
.we-usercp-card-title, .we-sidebar .list-group-item strong {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: block !important;
}
.we-usercp-card-desc, .we-sidebar .list-group-item span {
    color: #666 !important;
    font-size: 11px !important;
    display: block !important;
    margin-top: 2px !important;
}

/* Ascundem eventualele sageti inestetice din dreapta butoanelor in tema originala */
.we-usercp-card-arrow { display: none !important; }

/* =========================================
   STIRI (NEWS) REDESIGN - MUREZIST STYLE
========================================= */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 stiri pe un rand */
    gap: 25px;
    margin-bottom: 40px;
}

.rezist-news-card {
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.rezist-news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.8);
    border-color: rgba(220,38,38,0.4);
}

.r-news-thumb {
    width: 100%;
    height: 190px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 2px solid #dc2626; /* Linia rosie sub imagine */
}

/* Badge-ul Galben/Auriu */
.r-news-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #eab308;
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    z-index: 2;
}

/* Butonul de Play pt stiri Video */
.r-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 55px; height: 55px;
    background: rgba(220, 38, 38, 0.9);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 3px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 20px rgba(220,38,38,0.8);
    padding-left: 4px; /* Centrare optica pt iconita play */
    z-index: 2;
}

/* Texte */
.r-news-text {
    padding: 25px 20px 20px 20px;
    flex-grow: 1;
}
.r-news-text h3 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.r-news-text p {
    color: #888;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* Subsol (Data + Buton) */
.r-news-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0a0a0a;
}
.r-news-date {
    color: #666;
    font-size: 11px;
    font-weight: 600;
}

/* Responsive pt Telefoane/Tablete */
@media (max-width: 991px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .news-grid { grid-template-columns: 1fr; }
}

/* =========================================
   FOOTER PREMIUM & PARTICULE (SCANTEI)
========================================= */

/* 1. Setari Generale Footer */
.we-footer {
    background: #050505 !important;
    position: relative;
    padding: 60px 0 40px 0 !important;
    margin-top: 50px !important;
    border: none !important;
    overflow: hidden; /* Tine particulele in interior */
}

.footer-top-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(220, 38, 38, 0.7) 50%, transparent 100%);
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

.scroll-to-top {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 40px;
    background: #0a0a0a;
    border: 1px solid rgba(220, 38, 38, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    transition: all 0.3s ease;
    z-index: 10;
}
.scroll-to-top:hover {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.8);
    transform: translateX(-50%) translateY(-3px);
}

/* 2. Grid-ul pe Coloane (Flex) */
.rezist-footer-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2; /* Peste particule */
}

/* 3. Logo & Disclaimer (Zona Stanga) */
.rf-brand {
    flex: 1.5;
    min-width: 300px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.rf-logo {
    max-width: 140px;
    filter: drop-shadow(0 0 15px rgba(220, 38, 38, 0.3));
}
.rf-copyright {
    background: #0c0c0c;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    font-size: 11px;
    color: #666;
    line-height: 1.6;
}
.webzen-mark {
    display: inline-block;
    color: #444;
    font-weight: 800;
    letter-spacing: 1px;
    margin-left: 5px;
}

/* 4. Coloanele cu Linkuri (Dreapta) */
.rf-links {
    flex: 1;
    min-width: 130px;
}
.rf-links h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 20px;
}
.rf-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rf-links ul li {
    margin-bottom: 12px;
}
.rf-links ul li a {
    color: #999;
    font-size: 13px;
    text-decoration: none;
    transition: 0.2s;
}
.rf-links ul li a:hover {
    color: #ef4444;
    padding-left: 5px; /* Animatie fina de miscare la dreapta */
}

/* 5. PARTICULELE DE FOC (EMBERS) */
.mu-ember {
    position: absolute;
    bottom: -10px;
    background: #ff5722; /* Portocaliu aprins */
    border-radius: 50%;
    box-shadow: 0 0 6px #ff2a00, 0 0 10px #ffeb3b; /* Efect de glow (foc) */
    opacity: 0;
    pointer-events: none; /* Mouse-ul trece prin ele */
    z-index: 1; /* Sub continut, peste background */
    animation: floatEmber linear infinite;
}

/* Animatia de ridicare si stingere treptata */
@keyframes floatEmber {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.5; }
    100% { transform: translateY(-150px) scale(0.3); opacity: 0; }
}

/* Repozitionare Footer pe telefoane */
@media (max-width: 768px) {
    .rf-brand { flex-direction: column; text-align: center; }
    .rf-links { text-align: center; }
}
/* Fix pentru sageata taiata din footer */
.we-footer {
    overflow: visible !important;
}
/* =========================================
   USER CP REDESIGN (LEGENDARY DARK-RED)
========================================= */

/* 1. Header-ul UCP (Sus - Eliminam Movul) */
.we-usercp-hero {
    background: linear-gradient(135deg, rgba(15, 10, 10, 0.95), rgba(5, 5, 5, 0.98)) !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(220, 38, 38, 0.05) !important;
    border-radius: 8px !important;
}

/* Avatarul/Iconita din Header */
.we-usercp-hero-avatar {
    background: rgba(220, 38, 38, 0.1) !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
    color: #ef4444 !important;
}
.we-usercp-hero-glow { display: none !important; } /* Ascundem reflexia mov default */

/* 2. Containerul General al Sectiunilor (Scoatem Verde/Albastru/Portocaliu) */
.we-usercp-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 40px !important;
    padding: 0 !important;
}

/* 3. Bannerul Titlurilor de Sectiune */
.we-usercp-section-banner {
    background: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: 3px solid #dc2626 !important; /* O dunga rosie eleganta pe stanga */
    border-radius: 6px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
    margin-bottom: 20px !important;
}

/* Titlurile din banner (Alb, Uppercase) */
.we-usercp-section-title {
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
.we-usercp-section-desc { color: #888 !important; }

/* Iconitele de langa titluri */
.we-usercp-section-icon {
    background: #111 !important;
    color: #ef4444 !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
}

/* Ascundem acel "Emoji" default care apare in stanga */
.we-usercp-section-emoji { display: none !important; }

/* =========================================
   NEXORIA LEGENDARY UCP CARDS REDESIGN
========================================= */

/* 1. Noul Layout - Grid Dinamic si Aerisit */
.we-usercp-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    padding: 10px 0 !important;
}

/* 2. Design-ul de Baza al Cardului (Premium Dark) */
.we-usercp-grid .we-usercp-card {
    background: linear-gradient(to right, #0d0d0d, #050505) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 4px !important; /* Margini mai ascutite, de gaming */
    display: flex !important;
    align-items: center !important;
    padding: 18px 15px !important;
    margin: 0 !important; /* Anulam marginile vechi */
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Animatie elastica (bounce fin) */
}

/* 3. UCIDEM GLOW-UL MOV DEFAULT DIN TEMA */
.we-usercp-card-glow { display: none !important; }

/* 4. Caseta Iconitei (Stand-out in stanga) */
.we-usercp-grid .we-usercp-card-icon {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    background: #111 !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
    color: #666 !important;
    transition: all 0.4s ease !important;
    z-index: 2;
}

/* 5. Textele - Clasic si elegant */
.we-usercp-grid .we-usercp-card-body {
    z-index: 2;
    flex-grow: 1;
}
.we-usercp-grid .we-usercp-card-title {
    color: #ccc !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: 0.3s !important;
}
.we-usercp-grid .we-usercp-card-desc {
    color: #555 !important;
    font-size: 11px !important;
    margin-top: 4px !important;
    transition: 0.3s !important;
}

/* =========================================
   HOVER LEGENDAR (Animația la trecerea mouse-ului)
========================================= */

/* 6. Efectul pe intreg cardul */
.we-usercp-grid .we-usercp-card:hover {
    transform: translateY(-5px) scale(1.02) !important;
    border-color: #dc2626 !important;
    background: linear-gradient(to right, #1a0505, #0a0000) !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.8), 0 0 15px rgba(220, 38, 38, 0.15) !important;
}

/* 7. Iconita prinde viata (se face rosie si se invarte subtil) */
.we-usercp-grid .we-usercp-card:hover .we-usercp-card-icon {
    background: #dc2626 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6) !important;
    transform: rotate(8deg) scale(1.1) !important;
}

/* 8. Textul se lumineaza */
.we-usercp-grid .we-usercp-card:hover .we-usercp-card-title {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(220, 38, 38, 0.5) !important;
}
.we-usercp-grid .we-usercp-card:hover .we-usercp-card-desc {
    color: #aaa !important;
}

/* 9. DETALIUL SUPREM: Dunga rosie care gliseaza din stanga cardului */
.we-usercp-grid .we-usercp-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #dc2626;
    transform: scaleY(0);
    transition: transform 0.3s ease;
    transform-origin: center;
    z-index: 1;
    box-shadow: 0 0 10px #dc2626;
}
.we-usercp-grid .we-usercp-card:hover::before {
    transform: scaleY(1);
}
/* =========================================
   CONTAINER PRINCIPAL & GRILA STIRI (Murezist Style)
========================================= */

/* 1. Chenarul Principal care inglobeaza Slider-ul si Stirile */
.nexoria-main-box {
    background: #080808 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
}

/* 2. Rotunjim marginile Slider-ului ca sa se potriveasca perfect in chenar */
.main-slider {
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 35px !important; /* Spatiu curat pana la titlul Latest News */
}

/* 3. Fortam Stirile sa se aseze pe 2 COLOANE (cum e in poza) */
.news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}
/* =========================================
   TIMER DROPDOWN (LIPIT DE HEADER)
========================================= */

.top-timer-wrapper {
    position: absolute;
    top: 100%; /* Pica exact sub bara neagra */
    left: 50%;
    transform: translateX(-50%);
    background: #080808;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-top: none; /* Creeaza iluzia ca face parte din meniu */
    border-radius: 0 0 12px 12px;
    padding: 15px 30px 15px 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.9), 0 5px 20px rgba(220, 38, 38, 0.15);
    min-width: 400px;
    text-align: center;
    z-index: 99;
    /* Optional: Un mic efect de intrare */
    animation: dropDownTimer 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dropDownTimer {
    0% { transform: translate(-50%, -20px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

.tt-title {
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Liniile rosii cu glow pe lateralele titlului */
.tt-title::before, .tt-title::after {
    content: '';
    height: 1px;
    width: 35px;
    background: #dc2626;
    margin: 0 12px;
    box-shadow: 0 0 8px #dc2626;
}

.tt-blocks {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 10px;
}

.tt-box {
    background: #111;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 8px 15px;
    min-width: 60px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
.tt-box strong {
    display: block;
    font-size: 24px;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.tt-box span {
    display: block;
    font-size: 9px;
    color: #888;
    margin-top: 4px;
    text-transform: uppercase;
    font-weight: 700;
}

.tt-date {
    font-size: 11px;
    color: #555;
}

/* =========================================
   MESAJUL MARQUEE LA DESCHIDEREA SERVERULUI
========================================= */
.server-open-state {
    padding: 10px 0;
}
.server-open-state h3 {
    color: #ef4444;
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 12px 0;
    text-shadow: 0 0 15px rgba(220, 38, 38, 0.6);
    animation: pulseText 1.5s infinite alternate; /* Textul pulseaza luminos */
}
.server-open-state marquee {
    color: #ddd;
    font-size: 13px;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.2);
    padding: 7px 15px;
    border-radius: 4px;
    font-weight: 500;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

@keyframes pulseText {
    0% { text-shadow: 0 0 10px rgba(220, 38, 38, 0.4); transform: scale(1); }
    100% { text-shadow: 0 0 20px rgba(220, 38, 38, 0.9); transform: scale(1.02); }
}
/* =========================================
   MENIU SEPARATOARE & SPATIERE FOOTER
========================================= */

/* 1. Meniul Principal: Spatiere mai mare intre butoane */
.rezist-menu {
    display: flex !important;
    gap: 15px !important; /* Spatiul intre elemente */
    align-items: center !important;
}

.rezist-menu li {
    position: relative !important;
    padding-right: 15px !important; /* Facem loc pentru linia despartitoare */
}

/* 2. Efectul de Bara Despartitoare (Gradient Rosu) */
.rezist-menu li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 35px; /* Inaltimea barei despartitoare */
    width: 1px;
    /* Gradient: Transparent sus -> Rosu aprins la mijloc -> Transparent jos */
    background: linear-gradient(to bottom, transparent 0%, rgba(220, 38, 38, 0.8) 50%, transparent 100%);
    box-shadow: 0 0 5px rgba(220, 38, 38, 0.5);
    pointer-events: none; /* Nu interactioneaza cu mouse-ul */
}

/* 3. Spatiu suplimentar intre Chenarul de continut si Footer */
.nexoria-main-box {
    margin-bottom: 70px !important; /* Impingem footer-ul mai jos */
}
/* =========================================
   1. MENIU SEPARATOARE & SPATIERE
========================================= */
.rezist-menu {
    display: flex !important;
    gap: 25px !important; /* Spatiu marit intre butoane */
    align-items: center !important;
}

.rezist-menu li {
    position: relative !important;
    padding-right: 25px !important; /* Facem loc pentru linia despartitoare */
}

/* Bara Despartitoare (Gradient Rosu Laser) */
.rezist-menu li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 35px;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, rgba(220, 38, 38, 0.8) 50%, transparent 100%);
    box-shadow: 0 0 5px rgba(220, 38, 38, 0.5);
    pointer-events: none;
}

/* =========================================
   2. TIMER DROPDOWN & MARQUEE ANIMATION
========================================= */
.top-timer-wrapper {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #080808;
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 15px 30px 15px 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.9), 0 5px 20px rgba(220, 38, 38, 0.15);
    min-width: 400px;
    text-align: center;
    z-index: 99;
    animation: dropDownTimer 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dropDownTimer {
    0% { transform: translate(-50%, -20px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

.tt-title {
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-title::before, .tt-title::after {
    content: ''; height: 1px; width: 35px; background: #dc2626; margin: 0 12px; box-shadow: 0 0 8px #dc2626;
}

.tt-blocks { display: flex; gap: 12px; justify-content: center; margin-bottom: 10px; }
.tt-box { background: #111; border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; padding: 8px 15px; min-width: 60px; box-shadow: inset 0 0 15px rgba(0,0,0,0.5); }
.tt-box strong { display: block; font-size: 24px; color: #fff; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.tt-box span { display: block; font-size: 9px; color: #888; margin-top: 4px; text-transform: uppercase; font-weight: 700; }
.tt-date { font-size: 11px; color: #555; }

/* Mesaj Server Deschis */
.server-open-state { padding: 10px 0; }
.server-open-state h3 { color: #ef4444; font-size: 19px; font-weight: 800; margin: 0 0 12px 0; text-shadow: 0 0 15px rgba(220, 38, 38, 0.6); animation: pulseText 1.5s infinite alternate; }
.server-open-state marquee { color: #ddd; font-size: 13px; background: rgba(220, 38, 38, 0.1); border: 1px solid rgba(220, 38, 38, 0.2); padding: 7px 15px; border-radius: 4px; font-weight: 500; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
@keyframes pulseText { 0% { text-shadow: 0 0 10px rgba(220, 38, 38, 0.4); transform: scale(1); } 100% { text-shadow: 0 0 20px rgba(220, 38, 38, 0.9); transform: scale(1.02); } }

/* =========================================
   3. SPATIERE FOOTER
========================================= */
.nexoria-main-box, .we-content {
    margin-bottom: 80px !important;
}
/* =========================================
   CASTLE SIEGE - SLIDING FLOATING WIDGET
========================================= */
.cs-floating-left {
    position: fixed;
    /* Latimea continutului e de 330px. Tragandu-l la -330px il ascundem perfect */
    left: -330px; 
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex; /* Aliniaza continutul si tab-ul rosu unul langa altul */
    align-items: center;
    /* Animatie lina cand iese si intra */
    transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Magia de deschidere: Cand pui mouse-ul pe orice parte a lui, il trage la 0 */
.cs-floating-left:hover {
    left: 0;
}

/* 1. Continutul Principal (Care sta ascuns) */
.cs-float-content {
    width: 330px; /* Latime fixa */
    background: rgba(8, 8, 8, 0.95);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-left: none; 
    border-radius: 0 12px 12px 0; 
    padding: 20px;
    box-shadow: 10px 0 30px rgba(0,0,0,0.8), inset 0 0 15px rgba(220, 38, 38, 0.1);
    transition: border-color 0.3s ease;
}

.cs-floating-left:hover .cs-float-content {
    border-color: rgba(220, 38, 38, 0.8);
    box-shadow: 15px 0 40px rgba(0,0,0,0.9), inset 0 0 20px rgba(220, 38, 38, 0.2);
}

/* 2. Eticheta Rosie Verticala (Care ramane mereu pe ecran) */
.cs-float-tab {
    width: 42px;
    background: #dc2626;
    color: #fff;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0 8px 8px 0;
    box-shadow: 5px 0 15px rgba(220, 38, 38, 0.4);
    cursor: pointer;
    border: 1px solid #ef4444;
    border-left: none;
    transition: background 0.3s ease;
}

.cs-float-tab:hover {
    background: #ef4444;
}

.cs-float-tab svg {
    width: 20px;
    height: 20px;
    margin-bottom: 15px;
}

.cs-float-tab span {
    writing-mode: vertical-rl; /* Intoarce textul vertical */
    text-orientation: mixed;
    transform: rotate(180deg); /* Face textul sa se citeasca de jos in sus */
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* Textele si butoanele din widgetul propriu-zis (la fel ca inainte) */
.cs-float-title {
    color: #fff; font-size: 14px; font-weight: 800; text-align: center; letter-spacing: 2px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cs-float-title::before, .cs-float-title::after {
    content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 1px; background: #dc2626; margin: 0 10px; box-shadow: 0 0 5px #dc2626;
}
.cs-float-inner { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.cs-float-logo img { width: 65px; height: 65px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: #000; padding: 2px; }
.cs-float-details p { color: #888; font-size: 9px; text-transform: uppercase; margin: 0 0 2px 0; font-weight: 700; }
.cs-float-details h4 { color: #dc2626; font-size: 15px; font-weight: bold; margin: 0 0 8px 0; }
#cs_live_timer_float { color: #fff; font-size: 16px; font-weight: 800; margin: 0; letter-spacing: 1px; }
.cs-float-stages { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.cs-stage { flex: 1; background: #111; border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; padding: 8px; text-align: center; }
.cs-stage span { display: block; color: #666; font-size: 9px; text-transform: uppercase; margin-bottom: 4px; }
.cs-stage strong { display: block; color: #ccc; font-size: 11px; }
.cs-float-btn { display: block; width: 100%; background: rgba(220, 38, 38, 0.1); border: 1px solid rgba(220, 38, 38, 0.4); color: #ef4444; text-align: center; padding: 10px 0; border-radius: 6px; font-size: 12px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; }
.cs-float-btn:hover { background: #dc2626; color: #fff; text-decoration: none; box-shadow: 0 0 15px rgba(220, 38, 38, 0.5); }

@media (max-width: 991px) { .cs-floating-left { display: none !important; } }
/* =========================================
   REPARARE BANNER & SPATIU MENIU (LOGGED IN)
========================================= */

/* 1. Redam inaltimea superba a bannerului (acum ca e gol pe centru) */
.rezist-hero {
    min-height: 650px !important; /* Il fortam sa stea deschis */
    background-position: center top !important; /* Centram personajul perfect */
}

/* 2. Marim "cutia" invizibila a headerului pentru a face loc butoanelor suplimentare */
.rezist-header .we-container {
    max-width: 1550px !important;
    width: 96% !important;
}

/* 3. Reducem usor acel spatiu urias dintre liniile despartitoare din meniu */
.rezist-menu {
    gap: 12px !important;
}
.rezist-menu li {
    padding-right: 14px !important;
}

/* 4. Ajustam subtil butoanele contului ca sa incapa relaxat pe orice ecran */
.rezist-header .btn-rh {
    padding: 7px 10px !important;
    font-size: 11px !important;
}

/* =========================================
   FUNDAL PERFECT CONTINUU & FARA SPECIAL OFFERS
========================================= */

/* 1. Ascundem definitiv vechiul buton de oferte */
.float-banner.float-left {
    display: none !important;
}

/* 2. Curatam fundalul temei din spate ca sa oprim "dublarea" */
body, html, .we-body, .we-body-home {
    background-image: none !important;
    background-color: #080808 !important;
}

/* 3. Lasam bannerul (.rezist-hero) sa isi incarce imaginea lui curata */
.rezist-hero {
    /* Setarile corecte pentru a intinde imaginea pe banner */
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    border-bottom: none !important;
    /* Efect de fade (topire) la baza bannerului ca sa se imbine perfect cu negrul de jos */
    box-shadow: inset 0 -80px 80px -20px #080808 !important;
}

/* 4. Anulam tenta intunecata (gri) pusa de tema peste imagine ca sa ii redam culorile vii */
.rezist-hero::before {
    display: none !important;
}
/* =========================================
   DOWNLOADS PREMIUM REDESIGN (COMPLETE)
========================================= */

/* 1. Titluri si sectiuni */
.nexoria-downloads { width: 100%; animation: fadeInDownloads 0.6s ease; }
@keyframes fadeInDownloads { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.n-page-title { color: #fff; font-size: 32px; font-weight: 800; margin-bottom: 30px; letter-spacing: 1px; }
.ndl-subtitle { color: #fff; font-size: 14px; font-weight: 800; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); text-transform: uppercase; }
.ndl-group { margin-bottom: 40px; width: 100%; }

/* 2. Cardurile de Download (Luminate + Efecte) */
.ndl-card { background: #111111 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; padding: 16px 20px !important; display: flex !important; align-items: center !important; gap: 18px !important; margin-bottom: 12px !important; transition: all 0.3s ease !important; width: 100% !important; }
.ndl-card:hover { background: #181818 !important; border-color: rgba(220, 38, 38, 0.5) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.6), inset 0 0 20px rgba(220, 38, 38, 0.05) !important; transform: translateY(-2px) !important; }
.ndl-icon { width: 45px !important; height: 45px !important; min-width: 45px !important; background: #080808 !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #666 !important; transition: 0.3s !important; }
.ndl-card:hover .ndl-icon { color: #ef4444 !important; border-color: rgba(220, 38, 38, 0.3) !important; box-shadow: 0 0 10px rgba(220, 38, 38, 0.2) !important; }
.ndl-icon svg { width: 22px !important; height: 22px !important; }
.ndl-info { flex: 1 !important; }
.ndl-info h4 { color: #fff !important; font-size: 15px !important; font-weight: 700 !important; margin: 0 0 4px 0 !important; }
.ndl-info span { color: #888 !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.ndl-size-badge { background: transparent !important; border: 1px solid rgba(255,255,255,0.15) !important; color: #bbb !important; padding: 6px 14px !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; white-space: nowrap !important; margin-right: 15px !important; }
.ndl-action { text-align: right !important; }
.btn-dl { position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important; color: #fff !important; padding: 10px 22px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; border: 1px solid #ef4444 !important; box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2) !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
.btn-dl::before { content: '' !important; position: absolute !important; top: 0 !important; left: -150% !important; width: 50% !important; height: 100% !important; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent) !important; transform: skewX(-25deg) !important; transition: left 0s !important; z-index: 1 !important; }
.btn-dl:hover::before { left: 200% !important; transition: left 0.7s ease-in-out !important; }
.btn-dl:hover { transform: scale(1.05) !important; box-shadow: 0 5px 25px rgba(220, 38, 38, 0.7) !important; background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important; }
.btn-dl svg { width: 16px !important; height: 16px !important; transition: 0.3s !important; position: relative !important; z-index: 2 !important; }
.btn-dl:hover svg { transform: translateY(3px) !important; }
.btn-dl span, .btn-dl::after { position: relative !important; z-index: 2 !important; }

/* 3. Cerinte de Sistem */
.sys-req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sys-req-box { background: #080808; border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; padding: 25px; }
.srb-header { margin-bottom: 20px; }
.badge-min, .badge-rec { display: inline-block; font-size: 10px; font-weight: 800; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; }
.badge-min { background: transparent; border: 1px solid #555; color: #888; }
.badge-rec { background: transparent; border: 1px solid #dc2626; color: #ef4444; box-shadow: inset 0 0 10px rgba(220,38,38,0.1); }
.sys-req-box ul { list-style: none; padding: 0; margin: 0; }
.sys-req-box ul li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.03); color: #ccc; font-size: 13px; }
.sys-req-box ul li:last-child { border-bottom: none; padding-bottom: 0; }
.sys-req-box ul li span { color: #666; font-weight: 700; }
.sys-req-box ul li strong { color: #fff; font-weight: 600; }

/* 4. Ping Reducers */
.ping-desc { color: #888; font-size: 13px; margin-bottom: 20px; }
.ping-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ping-card { background: #080808; border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; padding: 25px; transition: 0.3s; }
.ping-card:hover { border-color: rgba(220,38,38,0.4); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.6); }
.ping-card h4 { color: #fff; font-size: 18px; font-weight: 800; margin: 0 0 10px 0; }
.ping-card p { color: #888; font-size: 12px; line-height: 1.5; margin: 0 0 20px 0; min-height: 36px; }
.btn-ping { background: #dc2626; color: #fff !important; padding: 8px 20px; border-radius: 4px; font-size: 11px; font-weight: 800; text-decoration: none !important; display: inline-block; transition: 0.3s; }
.btn-ping:hover { background: #ef4444; box-shadow: 0 0 15px rgba(220,38,38,0.5); }

/* 5. F.A.Q. Accordion */
.faq-container { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #080808; border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; overflow: hidden; transition: border-color 0.3s; }
.faq-item.active { border-color: rgba(220,38,38,0.4); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.faq-header { padding: 18px 25px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: transparent; transition: 0.3s; }
.faq-header:hover { background: rgba(255,255,255,0.02); }
.faq-header strong { color: #fff; font-size: 14px; font-weight: 700; }
.faq-toggle { color: #dc2626; font-size: 20px; font-weight: 800; width: 20px; text-align: center; transition: 0.3s; }
.faq-content { display: none; padding: 20px 25px; border-top: 1px solid rgba(255,255,255,0.05); background: #0a0a0a; }
.faq-content p { color: #fff; font-size: 13px; margin: 0 0 10px 0; font-weight: 700; }
.faq-content ul { padding-left: 20px; margin: 0; color: #aaa; font-size: 13px; line-height: 1.8; }
.faq-content ul li { margin-bottom: 5px; }
.faq-link { color: #dc2626; text-decoration: none; font-weight: bold; }
.faq-link:hover { text-decoration: underline; color: #ef4444; }

/* Responsive pt Telefoane */
@media (max-width: 768px) {
    .ndl-card { flex-direction: column !important; text-align: center !important; gap: 10px !important; }
    .ndl-icon { margin: 0 auto !important; }
    .ndl-size-badge { margin: 10px 0 !important; }
    .ndl-action { width: 100% !important; }
    .btn-dl { width: 100% !important; justify-content: center !important; }
    .sys-req-grid, .ping-grid { grid-template-columns: 1fr; }
}

/* =========================================
   PREMIUM LIST RANKINGS (eSports Style)
========================================= */

/* 1. Meniul Principal (Top Resets, Top Guilds etc) */
.rankings-nav-main {
    display: flex; gap: 10px; margin-bottom: 20px;
    justify-content: center;
}
.btn-rank-main {
    background: transparent;
    color: #888 !important;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: 0.3s;
}
.btn-rank-main:hover { color: #fff !important; border-color: rgba(220,38,38,0.4); }
.btn-rank-main.active { border-color: #dc2626; color: #fff !important; }

/* 2. Filtrul de Clase (COMMON, WIZARDS etc) */
.rankings-class-filter {
    display: flex; flex-wrap: wrap; gap: 5px;
    background: #080808;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 8px 15px;
    margin-bottom: 25px;
    justify-content: center;
}
.btn-class-filter {
    color: #666 !important;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 5px 12px;
    border-radius: 15px;
    transition: 0.3s;
}
.btn-class-filter:hover { color: #ccc !important; }
.btn-class-filter.active { background: #1a1a1a; color: #dc2626 !important; border-bottom: 2px solid #dc2626; }

/* 3. Tabelul Premium */
.rankings-premium-box {
    background: #080808;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px;
}
.premium-rank-table { width: 100%; border-collapse: collapse; }
/* Styling pentru capetele de tabel (#, CTRY, CLASS, VIP, etc) */
.premium-rank-table th {
    padding: 15px 10px; 
    color: #ef4444 !important; /* Culoarea Rosie */
    font-size: 11px; 
    text-transform: uppercase; 
    font-weight: 800;
    border-bottom: 1px solid rgba(220, 38, 38, 0.3); 
    letter-spacing: 1px;
}

/* Badge VIP Free si VIP Gold */
.vip-badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.vip-free { background: #111; color: #666; border-color: rgba(255,255,255,0.05); }
.vip-silver { background: linear-gradient(to bottom, #94a3b8, #475569); color: #fff; border-color: #cbd5e1; }
.vip-gold { background: linear-gradient(to bottom, #ca8a04, #854d0e); color: #fff; border-color: #fef08a; text-shadow: 0 1px 2px rgba(0,0,0,0.8); box-shadow: 0 0 10px rgba(202, 138, 4, 0.3); }

/* Sigla Breslei (Guild Box) */
.t-guild-box { display: flex; align-items: center; gap: 10px; }
.t-guild-box span { color: #ccc; font-size: 12px; font-weight: 600; }

/* =========================================
   REPARARE IMAGINI CARACTERE SI COROANE
========================================= */

/* Setari generale pentru celulele tabelului */
.premium-rank-table td {
    padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.02);
    vertical-align: middle;
}
.premium-rank-table tr:hover td { background: #0c0c0c; }
.top-3-row td { background: rgba(255,255,255,0.01); border-bottom: 1px solid rgba(255,255,255,0.04); }

/* Coloana Rank (#) cu Coroana */
.td-rank { text-align: center; position: relative; width: 50px; }
.rank-crown { width: 18px; height: 18px; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); }

/* Fortam culorile de Aur, Argint, Bronz peste griul temei */
.rank-crown.c-gold { fill: #facc15 !important; filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.7)); }
.rank-crown.c-silver { fill: #94a3b8 !important; filter: drop-shadow(0 0 5px rgba(148, 163, 184, 0.7)); }
.rank-crown.c-bronze { fill: #d97706 !important; filter: drop-shadow(0 0 5px rgba(217, 119, 6, 0.7)); }

.t-rank-num { font-size: 18px; font-weight: 800; color: #fff; display: block; margin-top: 12px; }
.td-flag img { width: 16px; border-radius: 2px; opacity: 0.8; }

/* REPARARE: Fortam cutia imaginii sa ramana in format patrat si o facem vizibila! */
.t-player-box { display: flex; align-items: center; gap: 12px; text-decoration: none !important; }
.t-class-cc {
    width: 36px !important; 
    height: 36px !important;
    min-width: 36px !important; 
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
    object-fit: cover;
    background: #050505;
    display: block !important;
}

/* Texte Nume si Valori */
.t-name { color: #fff; font-size: 13px; font-weight: 700; transition: 0.2s; }
.t-player-box:hover .t-name { color: #dc2626; }
.t-val { color: #fff; font-size: 14px; font-weight: 800; }

/* =========================================
   LEGENDARY RANKINGS (PODIUM 3D & eSPORTS TABLE)
========================================= */

/* Navigatie Generala */
.rankings-nav-main { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; }
.btn-rank-main { background: transparent; color: #888 !important; border: 1px solid rgba(255,255,255,0.1); padding: 10px 20px; border-radius: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; text-decoration: none !important; transition: 0.3s; }
.btn-rank-main:hover { color: #fff !important; border-color: rgba(220,38,38,0.4); }
.btn-rank-main.active { border-color: #dc2626; color: #fff !important; }

/* Filtru Clase */
.rankings-class-filter { display: flex; flex-wrap: wrap; gap: 5px; background: #080808; border: 1px solid rgba(255,255,255,0.05); border-radius: 20px; padding: 8px 15px; margin-bottom: 25px; justify-content: center; }
.btn-class-filter { color: #666 !important; font-size: 10px; font-weight: 800; text-transform: uppercase; text-decoration: none !important; padding: 5px 12px; border-radius: 15px; transition: 0.3s; }
.btn-class-filter:hover { color: #ccc !important; }
.btn-class-filter.active { background: #1a1a1a; color: #dc2626 !important; border-bottom: 2px solid #dc2626; }

/* =========================================
   EPIC PODIUM 3D
========================================= */
.podium-container { display: flex; justify-content: center; align-items: flex-end; gap: 20px; margin-bottom: 50px; margin-top: 50px; position: relative;}
.podium-container::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 100px; background: radial-gradient(ellipse, rgba(220, 38, 38, 0.15) 0%, transparent 70%); z-index: -1; filter: blur(20px); pointer-events: none; }

.pod-box { 
    background: linear-gradient(180deg, rgba(20,24,32,0.95) 0%, rgba(5,6,10,0.98) 100%); 
    border: 1px solid #333; border-top: 2px solid #555; border-bottom: 4px solid #222;
    border-radius: 8px; padding: 25px 20px; text-align: center; position: relative; width: 240px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.9); display: flex; flex-direction: column; align-items: center; transition: 0.4s;
}
.pod-box:hover { transform: translateY(-5px); box-shadow: 0 25px 50px rgba(0,0,0,0.9), 0 0 15px rgba(220,38,38,0.2); }

.pod-1 { width: 300px; border-color: #8a6d3b; border-top-color: #d4af37; border-bottom-color: #8a6d3b; background: linear-gradient(180deg, rgba(35,30,20,0.95) 0%, rgba(10,10,12,0.98) 100%); box-shadow: 0 25px 50px rgba(0,0,0,0.9), 0 0 30px rgba(212, 175, 55, 0.15); transform: translateY(-20px); z-index: 3;}
.pod-1:hover { transform: translateY(-25px); box-shadow: 0 30px 60px rgba(0,0,0,0.9), 0 0 30px rgba(212, 175, 55, 0.3); }
.pod-2 { border-top-color: #c0c0c0; border-bottom-color: #777; z-index: 2;}
.pod-3 { border-top-color: #cd7f32; border-bottom-color: #8B4513; z-index: 1;}

.pod-rank { position: absolute; top: -15px; left: -15px; width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(180deg, #222, #050505); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; border: 2px solid; box-shadow: 0 10px 20px rgba(0,0,0,0.9); z-index: 50; color: #fff;}
.pod-1 .pod-rank { top: -20px; left: -20px; width: 55px; height: 55px; border-color: #d4af37; color: #fff2a8; box-shadow: 0 0 20px #8a6d3b; }
.pod-2 .pod-rank { border-color: #c0c0c0; text-shadow: 0 0 5px #fff;}
.pod-3 .pod-rank { border-color: #cd7f32; color: #ffd700; }

.pod-avatar { width: auto; height: 180px; object-fit: contain; border: none !important; background: transparent !important; margin-top: -30px; margin-bottom: 10px; position: relative; z-index: 10; box-shadow: none !important; filter: drop-shadow(0 15px 10px rgba(0,0,0,0.8)); transition: 0.3s; }
.pod-1 .pod-avatar { height: 240px; margin-top: -45px; filter: drop-shadow(0 20px 15px rgba(0,0,0,0.9)) drop-shadow(0 0 20px rgba(212,175,55,0.6)); }

.pod-guild-mark-wrap img { width: 90px; height: 90px; border-radius: 12px; border: 2px solid #555; margin-top: -15px; margin-bottom: 15px; box-shadow: 0 15px 25px rgba(0,0,0,0.9); }
.pod-1 .pod-guild-mark-wrap img { width: 120px; height: 120px; border-color: #fff2a8; box-shadow: 0 20px 40px rgba(0,0,0,0.9), 0 0 25px rgba(212,175,55,0.5); margin-top: -25px; }

.pod-pedestal { width: 100px; height: 15px; background: radial-gradient(ellipse, rgba(255,255,255,0.2) 0%, transparent 70%); margin-top: -20px; margin-bottom: 15px; border-radius: 50%; pointer-events: none;}
.pod-1 .pod-pedestal { width: 130px; background: radial-gradient(ellipse, rgba(212,175,55,0.5) 0%, transparent 70%); height: 25px; margin-top:-25px;}

.pod-name { font-size: 16px; color: #fff; margin: 0 0 5px 0; text-shadow: 0 2px 4px #000; font-weight: 800;}
.pod-1 .pod-name { font-size: 20px; color: #fff2a8; text-shadow: 0 0 15px #8a6d3b; }
.pod-score { background: rgba(0,0,0,0.6); padding: 8px 20px; border-radius: 30px; color: #ef4444; font-weight: 900; font-size: 14px; border: 1px solid #333; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); }
.pod-1 .pod-score { border-color: #8a6d3b; color: #fff2a8; text-shadow: 0 0 10px #d4af37; box-shadow: inset 0 0 15px rgba(212,175,55,0.2), 0 5px 15px rgba(0,0,0,0.8);}

/* =========================================
   TABLE eSPORTS PREMIUM (Fara Border la Imagini)
========================================= */
.rank-table-wrap { 
    background: rgba(10, 12, 16, 0.85); border: 1px solid #222; border-radius: 8px; overflow: hidden; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.9), inset 0 0 20px rgba(0,0,0,0.5); position: relative;
}
.rank-table-wrap::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #dc2626, transparent); }

.rk-table { width: 100%; border-collapse: collapse; text-align: left; }
.rk-table th { 
    background: linear-gradient(90deg, rgba(15,18,24,0.9) 0%, rgba(20,24,32,0.9) 50%, rgba(15,18,24,0.9) 100%); 
    color: #ef4444 !important; font-size: 11px; padding: 18px 15px; 
    text-transform: uppercase; border-bottom: 2px solid #555; letter-spacing: 2px; font-weight: 800;
}
.rk-table td { padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,0.03); color: #b0b8d0; font-size: 14px; transition: 0.2s; height: 60px; vertical-align: middle;}

.rk-table tr { transition: all 0.3s ease; }
.rk-table tr:hover { background: linear-gradient(90deg, transparent, rgba(220,38,38,0.08), transparent) !important; transform: scale(1.005); box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 10; position: relative;}
.rk-table tr:hover td { color: #fff; }

/* Highlight-uri de TOP 3 pe tabel */
.row-gold td { border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important; background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%); }
.row-silver td { border-bottom: 1px solid rgba(192, 192, 192, 0.15) !important; background: linear-gradient(90deg, rgba(192, 192, 192, 0.05) 0%, transparent 100%); }
.row-bronze td { border-bottom: 1px solid rgba(205, 127, 50, 0.15) !important; background: linear-gradient(90deg, rgba(205, 127, 50, 0.05) 0%, transparent 100%); }

/* Coroane vectoriale in tabel */
.rank-icon { width: 22px; height: 22px; margin: 0 auto; display: block; }
.rank-icon.gold { fill: #ffd700; filter: drop-shadow(0 0 5px rgba(255,215,0,0.8)); }
.rank-icon.silver { fill: #e0e0e0; filter: drop-shadow(0 0 5px rgba(224,224,224,0.6)); }
.rank-icon.bronze { fill: #cd7f32; filter: drop-shadow(0 0 5px rgba(205,127,50,0.6)); }
.t-rank-num { font-size: 16px; font-weight: 800; color: #fff; }

/* =========================================
   IMAGINI CARACTERE - MARITE & FARA BORDER
========================================= */
.t-player-box { display: flex; align-items: center; gap: 15px; text-decoration: none !important; }
.av-mini { 
    width: auto !important; 
    height: 55px !important; /* IMAGINI MULT MAI MARI */
    object-fit: contain; 
    border: none !important; /* FARA BORDER */
    background: transparent !important; /* FARA FUNDAL NEGRU */
    box-shadow: none !important; 
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.7)); /* Doar o umbra eleganta pe conturul caracterului */
    transition: 0.3s;
    transform: scale(1.1); /* Efect de zoom nativ */
}
.rk-table tr:hover .av-mini { transform: scale(1.25); filter: drop-shadow(0 5px 12px rgba(220, 38, 38, 0.5)); }

/* Nume Jucator */
.name-link { color: #fff; font-weight: bold; text-decoration: none; transition: 0.3s; font-size: 14px; letter-spacing: 1px;}
.rk-table tr:hover .name-link { color: #ef4444; text-shadow: 0 0 10px rgba(220,38,38,0.5); }

/* Resets Value (Evidentiat) */
.col-resets { color: #ef4444; font-weight: 900; font-size: 16px; text-shadow: 0 0 10px rgba(220,38,38,0.3); }

/* VIP Badges */
.vip-badge { display: inline-block; padding: 6px 15px; border-radius: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; border: 1px solid; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.vip-free { background: #111; color: #666; border-color: rgba(255,255,255,0.05); }
.vip-silver { background: linear-gradient(to bottom, #94a3b8, #475569); color: #fff; border-color: #cbd5e1; }
.vip-gold { background: linear-gradient(to bottom, #ca8a04, #854d0e); color: #fff; border-color: #fef08a; text-shadow: 0 1px 2px rgba(0,0,0,0.8); box-shadow: 0 0 10px rgba(202, 138, 4, 0.3); }

/* Guild Box in tabel */
.t-guild-box { display: flex; align-items: center; gap: 10px; }
.t-guild-box img { border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); }
.g-name-text { color: #ccc; font-size: 12px; font-weight: 600; }

@media (max-width: 850px) { .podium-container { flex-direction: column; align-items: center; gap: 60px; margin-top:40px; } .pod-1 { transform: none; order: -1; margin-top: 50px; } .pod-1:hover { transform: translateY(-5px); } }
@media (max-width: 991px) { .rankings-class-filter { display: none; } .rk-table th:nth-child(2), .rk-table td:nth-child(2), .rk-table th:nth-child(4), .rk-table td:nth-child(4) { display: none; } }

/* Responsive pt Telefoane */
@media (max-width: 991px) {
    .legendary-podium { flex-direction: column; align-items: center; min-height: auto; margin-top: 20px; }
    .podium-step { width: 100%; max-width: 300px; margin-bottom: 30px; }
    .podium-visual { margin-bottom: -15px; }
    .char-podium-img { height: 200px !important; }
    .step-1 { order: -1; /* Pune locul 1 mereu primul sus pe mobil */ }
}
/* =========================================
   SLIDE-OUT VOTE PANEL (DREAPTA)
========================================= */
/* Ne asiguram ca vechiul buton nu se suprapune in caz ca a ramas undeva */
.float-banner.float-right { display: none !important; }

/* Containerul principal fixat pe dreapta */
.vote-sidebar-container {
    position: fixed;
    right: -290px; /* Ascunde panoul intunecat scotandu-l in afara ecranului */
    top: 40%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 9999;
    transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animatie "Bounce" lina */
}

/* Cand pui mouse-ul oriunde pe el, trage panoul pe ecran (right: 0) */
.vote-sidebar-container:hover {
    right: 0;
}

/* Tab-ul galben/auriu "VOTE FOR US" */
.vs-tab {
    background: linear-gradient(to bottom, #d4af37, #b8860b);
    color: #111;
    padding: 20px 8px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    border: 1px solid #eab308;
    border-right: none;
}
.vs-tab i { font-size: 14px; color: #111; }
.vs-tab span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 2px;
}

/* Panoul intunecat cu bannere */
.vs-panel {
    width: 290px;
    background: #111;
    border: 1px solid #d4af37;
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 15px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
}

/* Grila 2x2 pentru carduri */
.vs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Cardurile individuale pentru site-uri */
.vs-card {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 15px 10px;
    text-align: center;
    text-decoration: none !important;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Efect Hover pe Card */
.vs-card:hover {
    border-color: #d4af37;
    background: #222;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Imagine Banner */
.vs-card img {
    width: 80px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

/* Text Banner */
.vs-card span {
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    transition: 0.2s;
}
.vs-card:hover span { color: #d4af37; }

/* Text special Rosu pt ultima varianta */
.vs-card span.v-red { color: #dc2626; }
.vs-card:hover span.v-red { color: #ef4444; }

/* Pe telefoane il ascundem complet pt ca deranjeaza ecranul mic */
@media (max-width: 991px) {
    .vote-sidebar-container { display: none !important; }
}
/* =========================================
   1. FIX JITTER SCROLLBAR (PARTICULE FOC)
========================================= */
/* Reparare sageata footer si oprirea tremuratului */
.we-footer {
    overflow: visible !important;
}
.mu-ember {
    bottom: 30px !important; /* Trage scanteile mai in interior ca sa nu atinga marginea de jos */
}
html, body {
    overflow-x: hidden;
}

/* =========================================
   2. CULORI SPECIFICE CATEGORII STIRI
========================================= */
.r-news-badge {
    background: #eab308; /* Default Galben */
    color: #000;
}
/* Culori personalizate bazate pe cuvant */
.r-news-badge.b-updates { background: #3b82f6 !important; color: #fff !important; }
.r-news-badge.b-announcements { background: #a855f7 !important; color: #fff !important; }
.r-news-badge.b-info { background: #06b6d4 !important; color: #fff !important; }
.r-news-badge.b-gifts { background: #10b981 !important; color: #fff !important; }
.r-news-badge.b-special-offers { background: #f43f5e !important; color: #fff !important; }
.r-news-badge.b-events { background: #f97316 !important; color: #fff !important; }

/* =========================================
   CHENAR GRADIENT LEGENDAR PENTRU QUICK LINKS
========================================= */
.rh-quick-links {
    background: linear-gradient(135deg, rgba(12, 12, 14, 0.95) 0%, rgba(5, 5, 7, 0.98) 100%) !important;
    border-radius: 14px !important;
    padding: 22px 25px !important;
    max-width: 1240px !important;
    margin: 40px auto 20px auto !important; /* Centrează perfect panoul pe ecran */
    position: relative !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), inset 0 0 30px rgba(220, 38, 38, 0.04) !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

/* Chenarul exterior cu gradient fin (Roșu aprins & Auriu subtil) */
.rh-quick-links::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 14px !important;
    padding: 1px !important; /* Grosimea fină a chenarului */
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.8), rgba(212, 175, 55, 0.5), rgba(220, 38, 38, 0.8)) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.2);
}

/* =========================================
   SLIDER CINEMATIC PERFECT (Separare Imagine / Text)
========================================= */
#homeSlider {
    position: relative !important;
    height: 440px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #000000 !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.9) !important;
    margin-bottom: 35px !important;
}

/* Containerele individuale pentru fiecare slide */
.slide-item {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease-in-out !important;
    z-index: 1 !important;
}

.slide-item.active-slide {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* 1. DOAR IMAGINEA SE MĂREȘTE (Efectul Ken Burns izolat) */
.slider-bg {
    position: absolute !important;
    inset: -15px !important; /* Putin mai mare ca sa ascunda marginile in timpul animatiei */
    background-size: cover !important;
    background-position: center !important;
    animation: cinematicZoom 14s infinite alternate ease-in-out !important;
    z-index: 1 !important;
}

@keyframes cinematicZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* 2. GRADIENT LATERAL PENTRU CONTRAST (Nu afectează claritatea textului) */
.slider-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.1) 75%, transparent 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* 3. TEXTUL - FIX, ALB PUR, COMPLET OPAC ȘI FĂRĂ CASETĂ */
.slider-content {
    position: absolute !important;
    left: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    max-width: 480px !important;
    width: 100% !important;
}

.slider-mini-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    padding: 5px 14px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    border-radius: 20px !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.8) !important;
}

.slider-content h2,
.slider-content h2 * {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 900 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.15 !important;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1), 0 0 20px rgba(0, 0, 0, 0.9) !important;
}

.slider-content h2 span {
    color: #fbbf24 !important;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1), 0 0 20px rgba(251, 191, 36, 0.9) !important;
}

.slider-content p {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.9) !important;
}

.btn-slider-epic {
    display: inline-block !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    padding: 12px 28px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1px solid #ef4444 !important;
    box-shadow: 0 5px 20px rgba(220, 38, 38, 0.6) !important;
    transition: 0.3s ease !important;
}

.btn-slider-epic:hover {
    background: #ef4444 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.9) !important;
}

/* Navigație Săgeți & Puncte */
.slider-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 4 !important; width: 40px !important; height: 40px !important; background: rgba(10, 10, 10, 0.7) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; cursor: pointer !important; font-size: 14px !important; border: 1px solid rgba(255,255,255,0.15) !important; transition: all 0.3s ease !important; }
.slider-arrow.arrow-left { left: 20px !important; }
.slider-arrow.arrow-right { right: 20px !important; }
.slider-arrow:hover { background: #dc2626 !important; border-color: #ef4444 !important; }
.slider-counter { position: absolute; top: 20px; right: 25px; z-index: 4; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: bold; color: #aaa; letter-spacing: 1px; }
.slider-dots { position: absolute !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important; display: flex !important; gap: 8px !important; z-index: 4 !important; }
.slider-dots span { width: 10px !important; height: 10px !important; background: rgba(255,255,255,0.3) !important; border-radius: 50% !important; cursor: pointer !important; transition: 0.3s !important; }
.slider-dots span.active { background: #dc2626 !important; width: 25px !important; border-radius: 5px !important; }

/* =========================================
   NEXORIAMU PREMIUM WEBSHOP
========================================= */
.shop-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
}

.shop-btn {
    background: #111 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #aaa !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    transition: 0.3s !important;
}

.shop-btn:hover, .shop-btn.active {
    background: #dc2626 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.4) !important;
}

/* Cardurile Itemelor */
.premium-shop-card {
    background: linear-gradient(180deg, #16161a 0%, #0d0d0f 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.premium-shop-card:hover {
    transform: translateY(-5px);
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 15px 30px rgba(0,0,0,0.8), 0 0 20px rgba(220, 38, 38, 0.15);
}

.shop-card-category {
    background: #050505;
    color: #888;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}

.shop-card-img {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(40,40,50,0.5) 0%, transparent 70%);
    margin: 15px;
}

.shop-card-img img {
    max-height: 100%;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.8));
    transition: 0.3s;
}

.premium-shop-card:hover .shop-card-img img { transform: scale(1.1); }

.shop-card-info {
    padding: 15px;
    text-align: center;
    flex-grow: 1;
}

.shop-card-title {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 5px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.9);
}

.shop-card-desc { color: #888; font-size: 12px; line-height: 1.4; }

.shop-card-action {
    padding: 15px;
    background: rgba(0,0,0,0.4);
    border-top: 1px solid rgba(255,255,255,0.05);
}

.btn-buy-item {
    background: #dc2626 !important;
    color: #fff !important;
    width: 100% !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 10px !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3) !important;
}
.btn-buy-item:hover { background: #ef4444 !important; }

/* Configurarea Itemului (Pagina interioara) */
.shop-item-config {
    background: #0f0f13;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 25px;
}

.config-price-box {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.config-price-box h2 { color: #facc15; font-weight: 900; margin: 0; font-size: 28px; }
.config-price-box span { color: #888; font-size: 12px; text-transform: uppercase; font-weight: 700; }


/* ==========================================
   MOBILE & TABLET RESPONSIVE FIXES (Global)
   ========================================== */

@media (max-width: 991px) {
    /* 1. Header Flexbox Fix (Rearanjare Meniu Sus) */
    .rezist-header-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 10px !important;
    }

    /* 2. Badge-ul Season 6 centrat sus */
    .rh-left {
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
    }

    /* 3. Meniul (Home, Game Info...) transformat in slider orizontal SWIPE */
    .rh-center {
        width: 100% !important;
        overflow: hidden !important;
    }
    
    .rezist-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scroll pe iOS */
        justify-content: flex-start !important;
        gap: 15px !important;
        padding-bottom: 5px !important; /* Spatiu pentru scrollbar */
        /* Ascunde scrollbarul vizual, dar pastreaza functionalitatea */
        scrollbar-width: none !important; /* Firefox */
    }
    .rezist-menu::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }
    
    .rezist-menu li {
        padding-right: 15px !important;
        white-space: nowrap !important; /* Impiedica textul sa se rupa */
    }

    /* 4. Butoanele de Actiune (My Account, Log Out, Lang) centrate pe un rand nou */
    .rh-right {
        width: 100% !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .rh-right .btn-rh {
        flex: 1 1 auto !important; /* Se intind egal pe ecran */
        text-align: center !important;
        justify-content: center !important;
        padding: 10px !important;
    }

    /* 5. Selectorul de Limba repozitionat ca sa nu iasa din ecran */
    .rh-lang .we-lang-dropdown-menu {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    /* 6. Butonul GRAND OPENING fixat la latimea ecranului */
    .go-drop-bar {
        min-width: 90% !important;
        width: 90% !important;
        padding: 12px 20px !important;
    }
    
    /* 7. Dropdown-ul Grand Opening adaptat */
    .go-drop-content {
        width: 95% !important;
        padding: 15px !important;
    }
    
    .go-blocks {
        flex-wrap: wrap !important; /* Daca nu incap, cad pe rândul de jos */
    }

    /* 8. Fix profil Player pe mobil (Panoul de echipament cade sub cel de status) */
    .nx-profile-container {
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px !important; /* Reducem spatiile pe ecran mic */
        gap: 30px !important;
    }

    .nx-stats-panel, .nx-inv-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Redimensionare Inventar (Scalare pt ecrane mici) */
    .nx-inv-wrapper {
        transform: scale(0.85); /* Micsoram vizual sa incapa perfect */
        transform-origin: top center;
        height: 380px !important; /* Ajustam inaltimea la noul scale */
    }
    
    /* Repozitionare Tooltips (sa nu iasa in stanga/dreapta ecranului) */
    .nx-tooltip {
        /* Mutam tooltip-urile din exterior catre interior pt a nu iesi in afara ecranului */
        left: 50% !important;
        transform: translateX(-50%) translateY(10px) !important;
        min-width: 220px !important;
        white-space: normal !important; /* Pe telefon e ok sa treaca pe randul 2 pt ca e ingust ecranul */
    }
    
    /* Sloturile laterale (Weapon/Shield) isi arunca tooltipul spre centru */
    .slot-0:hover .nx-tooltip, .slot-1:hover .nx-tooltip {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ==========================================
   SMARTPHONE RESPONSIVE (< 576px)
   ========================================== */
@media (max-width: 576px) {
    /* Butoanele de cont devin blocuri (pe tot randul) daca ecranul e f. mic */
    .rh-right .btn-rh {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Micsoram și mai mult inventarul ca sa incapa pe verticala pe telefoane vechi */
    .nx-inv-wrapper {
        transform: scale(0.75);
        height: 330px !important;
    }
}

/* ==========================================
   MOBILE RESPONSIVE FIX PENTRU RANKINGS
   ========================================== */
@media (max-width: 850px) {
    /* 1. Meniul cu butoane de Rankings (Resets, Level, etc) se aranjeaza pe randuri */
    .rankings-nav-main {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 20px;
    }
    .rankings-nav-main .btn-rank-main {
        flex: 1 1 calc(33.333% - 8px); /* 3 butoane pe rand */
        text-align: center;
        font-size: 11px;
        padding: 10px 5px;
        white-space: nowrap;
    }

    /* 2. Containerul tabelului primeste scroll orizontal (Swipe) */
    .rank-table-wrap, 
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Scroll fin pe iOS */
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* 3. Fortam tabelul sa nu se striveasca (pastreaza un minim de latime) */
    .rk-table, 
    .rank-table {
        min-width: 600px; 
        font-size: 12px;
    }

    /* 4. Micsoram fonturile din tabel pe mobil pentru a incapea mai bine */
    .rk-table th, .rank-table th { padding: 10px; font-size: 11px; }
    .rk-table td, .rank-table td { padding: 8px 10px; }
    
    .t-player-box .name-link { font-size: 13px; }
    .gens-emblem-img { width: 30px; height: 35px; }
    .gens-title-text { font-size: 11px; }

    /* 5. Ajustam Bannerul Gens pe mobil */
    .gens-banner-container {
        padding: 0 10px;
        margin-bottom: 25px;
    }
    .g-score-box {
        font-size: 11px !important;
        bottom: 5% !important;
    }
    .g-score-duprian { left: 21% !important; }
    .g-score-vanert { right: 20% !important; }
}

/* Pentru ecrane si mai mici (telefoane foarte inguste in mod portret) */
@media (max-width: 480px) {
    .rankings-nav-main .btn-rank-main {
        flex: 1 1 calc(50% - 8px); /* 2 butoane pe rand ca sa nu fie ingramadite */
    }
    .g-score-box {
        font-size: 9px !important; /* Scris mai mic pe bannere sa incapa in lemn */
    }
}

/* ==========================================
   MOBILE RANKINGS FIX - SWIPEABLE TABLES
   ========================================== */
@media (max-width: 850px) {
    /* 1. Fortam TOATE coloanele sa apara (anulam regula temei de a le ascunde) */
    .we-content table th, 
    .we-content table td,
    .rk-table th, .rk-table td,
    .rank-table th, .rank-table td {
        display: table-cell !important;
    }

    /* 2. Transformam zona tabelului intr-un container cu Swipe (Scroll Orizontal) */
    .we-content .table-responsive,
    .rank-table-wrap {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Scroll fin pentru iPhone/Android */
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        margin-bottom: 20px;
    }

    /* 3. Fortam tabelul sa ramana lat ca sa putem da scroll pe el */
    .we-content table, 
    .rk-table, 
    .rank-table {
        min-width: 650px !important; /* Tabelul refuza sa se micsoreze sub aceasta valoare */
        width: 100% !important;
        table-layout: auto !important;
    }

    /* 4. Ajustari fine ale textului pentru a arata curat pe telefon */
    .we-content table th { font-size: 11px !important; padding: 12px 8px !important; }
    .we-content table td { font-size: 12px !important; padding: 10px 8px !important; }
    
    /* 5. Butoanele de navigare (Top Resets, Level etc) pe randuri multiple */
    .rankings-nav-main { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
    .rankings-nav-main .btn-rank-main { flex: 1 1 calc(33.33% - 8px); padding: 10px 5px; font-size: 10px; white-space: nowrap; text-align: center; }
}

/* Pentru telefoanele foarte mici (mod portret) */
@media (max-width: 480px) {
    .rankings-nav-main .btn-rank-main { flex: 1 1 calc(50% - 8px); } /* 2 butoane pe rand */
}