:root {
    --bg-main: #070707; --bg-secondary: #120909; --bg-card: #1B1212; --bg-hover: #271313;
    --red-dark: #4A1515; --red-primary: #C91414; --red-bright: #F52A1B; --red-glow: #FF4433;
    --gold-dark: #8D5415; --gold-primary: #D89B22; --gold-light: #FFC84A;
    --text-primary: #F5EDE0; --text-secondary: #B9AAA0; --text-muted: #716865;
    --success: #31C56A; --danger: #E33A32;
    --border-dark: #351313; --border-red: #742020; --border-gold: #A66A19;
    --mudream-primary: var(--red-primary); --mudream-secondary: var(--gold-primary);
    --mudream-gold: var(--gold-light); --mudream-dark: var(--bg-secondary); --mudream-darker: var(--bg-main);
    --mudream-text: var(--text-primary); --mudream-text-secondary: var(--text-secondary);
    --mudream-border: rgba(116,32,32,.62);
    --mudream-blue-gradient: linear-gradient(135deg,var(--red-dark),var(--red-primary) 58%,var(--red-bright));
    --mudream-orange-gradient: linear-gradient(135deg,var(--gold-dark),var(--gold-primary) 58%,var(--gold-light));
    --mudream-shadow: 0 12px 34px rgba(0,0,0,.55); --mudream-glow: 0 0 24px rgba(255,68,51,.38);
    --primary-color: var(--red-primary);
}
html, body, .new-landing-main-wrapper { background-color: var(--bg-main) !important; color: var(--text-primary); }
.header-logo {
    display: block;
    width: 3cm !important;
    height: 3cm !important;
    max-width: none !important;
    object-fit: contain;
    margin: 0 auto;
}
.header-content {
    width: 100%;
    max-width: none;
    padding-left: 14px;
    padding-right: 14px;
    gap: 14px;
}
.header-navigation-wrap {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}
.header-navigation-nav {
    justify-content: space-evenly;
    gap: clamp(8px, 1.1vw, 18px);
}
.header-navigation-main-item {
    flex: 0 0 auto;
    font-size: clamp(.78rem, .9vw, .9rem);
}
.header-navigation-name-wrap {
    gap: 6px;
}
.header-right-buttons {
    gap: 8px;
}
.header-right-buttons-text-btn {
    padding-left: 12px;
    padding-right: 12px;
}
.footer-title {
    display: flex;
    align-items: center;
    gap: 9px;
}
.footer-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Panel social compacto: 40% menor que sus 600x400 px originales. */
.app-socials-wrapper {
    right: 0 !important;
    width: min(360px, 90vw) !important;
    height: auto !important;
    min-height: 140px;
    max-height: 80vh;
    transform: translateY(-50%) translateX(calc(100% - 50px)) !important;
}
.app-socials-wrapper:hover,
.app-socials-wrapper.hover-active,
.app-socials-wrapper.active {
    transform: translateY(-50%) translateX(0) !important;
}
.app-socials-content-wrapper {
    padding: 18px !important;
    height: auto !important;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.app-socials-content {
    height: auto !important;
    gap: 18px !important;
}
.app-socials-main-btn,
.app-socials-main-btn:hover {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    color: var(--gold-light) !important;
}
.app-socials-main-btn > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.page-navigation-wrap { background: rgba(7,7,7,.94); border-bottom-color: var(--border-red); }
.page-navigation-link { color: var(--text-secondary); }
.page-navigation-link:hover, .page-navigation-link.active {
    color: var(--text-primary); background: linear-gradient(135deg,var(--red-dark),var(--red-primary));
    box-shadow: 0 0 18px rgba(255,68,51,.28);
}
.landing-top-section::before { background: radial-gradient(circle at 50% 44%,rgba(201,20,20,.22),transparent 68%); }
.landing-title-block h1 {
    background: linear-gradient(135deg,var(--text-primary),var(--red-glow) 52%,var(--gold-light));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 50px rgba(245,42,27,.45);
}
.hero-main-logo {
    display: block;
    width: min(95%, 1040px);
    max-height: 520px;
    height: auto;
    object-fit: contain;
    margin: 0 auto 24px;
}
.landing-title-block h2, .timer-msg, .time-item b, .section-title, .range-number, .stat-number { color: var(--gold-light); }
.registration-bonuses-wrap, .time-item, .feature-card, .range-item, .stat-card, .info-card,
.news-card, .content-box, .panel, .card {
    background: linear-gradient(145deg,rgba(27,18,18,.96),rgba(18,9,9,.96)) !important;
    border-color: var(--border-red) !important; box-shadow: var(--mudream-shadow);
}
#main .registration-bonuses-wrap,
#main .server-start-timer-block {
    background: linear-gradient(145deg, rgba(74, 32, 32, .90), rgba(43, 22, 22, .90)) !important;
    border: 1px solid rgba(201, 20, 20, .52);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#main .server-start-timer-block {
    padding: 32px;
}
#main .time-item {
    background: rgba(92, 43, 43, .72) !important;
    border-color: rgba(255, 68, 51, .48) !important;
}
.feature-card:hover, .range-item:hover, .stat-card:hover, .info-card:hover, .news-card:hover, .card:hover {
    background: var(--bg-hover) !important; border-color: var(--border-gold) !important;
    box-shadow: 0 12px 32px rgba(201,20,20,.22);
}
.reward-item-card, .btn-primary, .server-cta-btn {
    background: linear-gradient(135deg,var(--red-dark),var(--red-primary) 55%,var(--red-bright));
    border-color: var(--red-bright); color: var(--text-primary);
}
.btn-secondary, .reward-badge {
    background: linear-gradient(135deg,var(--gold-dark),var(--gold-primary),var(--gold-light));
    border-color: var(--border-gold); color: var(--bg-main);
}
.btn:hover, .server-cta-btn:hover { border-color: var(--gold-light); box-shadow: 0 0 24px rgba(255,200,74,.34); }
.landing-cards-section, .landing-register-section, .landing-cta { background-color: var(--bg-main); }
#about.landing-cards-section {
    background-color: rgba(18, 9, 9, .72) !important;
    background-image: linear-gradient(180deg, rgba(74, 21, 21, .16), rgba(18, 9, 9, .58)) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.landing-features-section, .landing-stats-footer {
    background: linear-gradient(180deg,var(--bg-main),var(--bg-secondary),var(--bg-main));
}
p, .card-subtitle, .card-small, .stat-label, .range-label, .cta-description { color: var(--text-secondary); }
a { color: var(--gold-primary); } a:hover { color: var(--gold-light); }
input, select, textarea, .form-control {
    color: var(--text-primary) !important; background: var(--bg-card) !important; border-color: var(--border-dark) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--red-bright) !important; box-shadow: 0 0 0 2px rgba(245,42,27,.2) !important;
}
.online, .status-online, .text-success { color: var(--success) !important; }
.error, .alert-danger, .text-danger { color: var(--danger) !important; }
.app-socials-soc-link.whatsapp:hover, .social-link.whatsapp:hover {
    background: rgba(37,211,102,.16) !important; border-color: #25D366 !important; color: #7ff0a8 !important;
}
.app-socials-soc-link.youtube:hover, .social-link.youtube:hover {
    background: rgba(255,0,0,.16) !important; border-color: #ff3838 !important;
}
.app-socials-soc-link.twitter:hover, .social-link.twitter:hover {
    background: rgba(29,161,242,.16) !important; border-color: #1da1f2 !important;
}

/* Informacion del servidor: limita el contenido dinamico cargado desde JSON. */
#rewards .rewards-table-wrap {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-color: var(--red-primary) var(--bg-secondary);
    scrollbar-width: thin;
}
#rewards .rewards-info-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
#rewards .rewards-info-table thead th {
    background: var(--bg-secondary);
    box-shadow: 0 1px 0 var(--border-red);
}
#rewards .rewards-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
#rewards .rewards-table-wrap::-webkit-scrollbar-track { background: var(--bg-secondary); }
#rewards .rewards-table-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--red-dark), var(--red-primary));
    border: 2px solid var(--bg-secondary);
    border-radius: 10px;
}
#rewards .rewards-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--red-bright); }

#streamers .streamers-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#streamers .streamers-image > .streamers-logo {
    display: block;
    width: min(100%, 520px);
    height: auto;
    margin: 0 auto 18px;
    object-fit: contain;
}
#streamers .streamers-image > .live-indicator {
    position: static;
    display: inline-flex;
    width: max-content;
    margin: 0 auto;
}

.content-item.fair-play.range-item {
    width: 400px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
}

/* Rankings: estilo inspirado en el template Landing. */
.page-rankings .layouts-page-content {
    padding: 38px clamp(14px, 3vw, 42px);
    overflow-x: auto;
}
.page-rankings .page-title {
    position: relative;
    margin: 0 auto 24px;
    padding-bottom: 18px;
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}
.page-rankings .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 150px;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    box-shadow: 0 0 12px rgba(255, 200, 74, .45);
}
.page-rankings .rankings_menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    max-width: 1180px;
    margin: 0 auto 28px;
}
.page-rankings .rankings_menu a {
    padding: 10px 17px;
    color: var(--text-secondary);
    background: linear-gradient(180deg, rgba(39, 19, 19, .9), rgba(18, 9, 9, .94));
    border: 1px solid var(--border-red);
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.page-rankings .rankings_menu a:hover {
    color: var(--gold-light);
    background: var(--bg-hover);
    border-color: var(--border-gold);
    box-shadow: 0 6px 18px rgba(201, 20, 20, .22);
    transform: translateY(-2px);
}
.page-rankings .rankings_menu a.active {
    color: #130b05;
    background: linear-gradient(180deg, var(--gold-light), var(--gold-primary));
    border-color: var(--gold-light);
    box-shadow: 0 7px 20px rgba(216, 155, 34, .3);
}
.page-rankings table.general-rank {
    width: 100% !important;
    max-width: 1180px;
    margin: 0 auto !important;
    overflow: hidden;
    color: var(--text-primary);
    background: linear-gradient(145deg, rgba(27, 18, 18, .97), rgba(7, 7, 7, .98));
    border: 1px solid var(--border-red);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .46);
}
.page-rankings table.general-rank thead {
    background: transparent !important;
}
.page-rankings table.general-rank thead th,
.page-rankings table.general-rank thead td {
    padding: 15px 16px !important;
    color: var(--gold-light) !important;
    background: linear-gradient(180deg, rgba(74, 21, 21, .92), rgba(27, 18, 18, .96)) !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(216, 155, 34, .42) !important;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700 !important;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}
.page-rankings table.general-rank tbody td {
    padding: 13px 16px !important;
    color: var(--text-primary);
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(216, 155, 34, .11) !important;
    vertical-align: middle;
}
.page-rankings table.general-rank tbody tr {
    background: transparent;
    transition: background .18s ease, transform .18s ease;
}
.page-rankings table.general-rank tbody tr:nth-child(even) {
    background: rgba(245, 237, 224, .018);
}
.page-rankings table.general-rank tbody tr:hover {
    background: rgba(201, 20, 20, .11);
}
.page-rankings table.general-rank tbody tr:nth-child(1) {
    background: linear-gradient(90deg, rgba(255, 200, 74, .15), transparent 72%);
}
.page-rankings table.general-rank tbody tr:nth-child(2) {
    background: linear-gradient(90deg, rgba(216, 216, 224, .10), transparent 68%);
}
.page-rankings table.general-rank tbody tr:nth-child(3) {
    background: linear-gradient(90deg, rgba(205, 133, 63, .11), transparent 68%);
}
.page-rankings table.general-rank tbody tr:nth-child(1) .rankings-table-place {
    color: var(--gold-light);
    text-shadow: 0 0 14px rgba(255, 200, 74, .5);
}
.page-rankings table.general-rank tbody tr:nth-child(2) .rankings-table-place {
    color: #d8d8e0;
}
.page-rankings table.general-rank tbody tr:nth-child(3) .rankings-table-place {
    color: #cd853f;
}
.page-rankings .rankings-table-place {
    min-width: 64px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    text-align: center;
}
.page-rankings .rankings-class-image {
    width: 38px;
    height: 38px;
    margin-right: 9px;
    object-fit: cover;
    border: 1px solid var(--border-gold);
    box-shadow: 0 0 12px rgba(216, 155, 34, .18);
    vertical-align: middle;
}
.page-rankings .rankings-update-time {
    max-width: 1180px;
    margin: 14px auto 0;
    color: var(--text-muted);
    font-size: 12px;
    text-align: right;
}

/* VIP /info: tarjetas inspiradas en el template Landing. */
.page-vip-info .layouts-page-content {
    padding: 38px clamp(14px, 3vw, 42px);
}
.page-vip-info .page-title {
    position: relative;
    margin: 0 auto 24px;
    padding-bottom: 18px;
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}
.page-vip-info .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 150px;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    box-shadow: 0 0 12px rgba(255, 200, 74, .45);
}
.page-vip-info .vip-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    max-width: 1080px;
    margin: 0 auto;
    padding: 25px 10px;
}
.page-vip-info .vip-card {
    position: relative;
    width: calc(50% - 20px);
    min-width: 210px;
    max-width: 360px;
    margin: 10px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(39, 19, 19, .98), rgba(18, 9, 9, .99));
    border: 1px solid var(--border-red);
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .5);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.page-vip-info .vip-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-gold);
    box-shadow: 0 18px 48px rgba(201, 20, 20, .22);
}
.page-vip-info .vip-card-inner {
    position: relative;
    z-index: 1;
}
.page-vip-info .vip-card-header {
    position: relative;
    padding: 20px 12px 14px;
    text-align: center;
    background: linear-gradient(180deg, rgba(74, 21, 21, .38), rgba(7, 7, 7, .08));
}
.page-vip-info .vip-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    margin: 0 auto 10px;
    padding: 8px;
    background: radial-gradient(circle, rgba(255, 200, 74, .15), transparent 70%);
    border-radius: 50%;
}
.page-vip-info .vip-image {
    width: 118px;
    height: 118px;
    max-width: 118px;
    max-height: 118px;
    object-fit: contain;
    filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .58));
    animation: vip-float 3s ease-in-out infinite;
}
@keyframes vip-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.page-vip-info .vip-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
}
.page-vip-info .vip-card-title {
    margin: 0;
    color: var(--gold-light);
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.page-vip-info .vip-card-body {
    padding: 16px 15px;
    background: rgba(7, 7, 7, .24);
}
.page-vip-info .vip-package-info {
    margin-bottom: 11px;
    text-align: center;
}
.page-vip-info .vip-days {
    display: inline-block;
    padding: 6px 15px;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(116, 32, 32, .54), rgba(53, 19, 19, .62));
    border: 1px solid var(--border-red);
    border-radius: 25px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.page-vip-info .vip-price-container {
    margin: 12px 0;
    padding: 13px 0;
    text-align: center;
    border-top: 1px solid rgba(216, 155, 34, .2);
    border-bottom: 1px solid rgba(216, 155, 34, .2);
}
.page-vip-info .vip-price {
    display: block;
    color: var(--gold-light);
    font-family: 'Orbitron', sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 20px rgba(255, 200, 74, .35);
}
.page-vip-info .vip-currency {
    display: block;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.page-vip-info .vip-benefits-mini {
    margin-top: 12px;
}
.page-vip-info .vip-benefit-item {
    display: flex;
    align-items: center;
    column-gap: 8px;
    padding: 5px 0;
    color: var(--text-primary);
    font-size: 11px;
}
.page-vip-info .vip-benefit-item i {
    flex-shrink: 0;
    color: var(--success);
    font-size: 12px;
}
.page-vip-info .vip-benefit-more {
    padding: 7px 0;
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
    text-align: center;
}
.page-vip-info .vip-card-footer {
    padding: 13px;
    text-align: center;
    background: rgba(7, 7, 7, .3);
}
.page-vip-info .btn-vip-buy {
    display: inline-block;
    width: 100%;
    padding: 11px 15px;
    color: var(--text-primary) !important;
    background: linear-gradient(135deg, var(--red-dark), var(--red-primary), var(--red-bright));
    border: 1px solid var(--red-bright);
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(201, 20, 20, .3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.page-vip-info .btn-vip-buy:hover {
    color: #160d05 !important;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold-primary), var(--gold-light));
    border-color: var(--gold-light);
    box-shadow: 0 8px 28px rgba(255, 200, 74, .3);
    transform: translateY(-2px);
}
.page-vip-info .vip-type-1 { border-top: 4px solid #cd7f32; }
.page-vip-info .vip-type-1 .vip-card-title { color: #e9a56b; }
.page-vip-info .vip-type-2 { border-top: 4px solid #c0c0c0; }
.page-vip-info .vip-type-2 .vip-card-title { color: #dedee5; }
.page-vip-info .vip-type-3 { border-top: 4px solid var(--gold-light); }
.page-vip-info .vip-type-3 .vip-card-title { color: var(--gold-light); }
.page-vip-info .vip-type-4 { border-top: 4px solid var(--success); }
.page-vip-info .vip-type-4 .vip-card-title { color: #63ff9e; }

@media (max-width: 768px) {
    .countdown-timer { gap: 10px; }
    .time-item { min-width: 72px; padding: 14px 8px; }
    .time-item b { font-size: 2rem; }
    .page-rankings .layouts-page-content { padding: 24px 10px; }
    .page-rankings .rankings_menu { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
    .page-rankings .rankings_menu a { flex: 0 0 auto; }
    .page-rankings table.general-rank { min-width: 680px; }
    .page-vip-info .layouts-page-content { padding: 24px 8px; }
    .page-vip-info .vip-container { padding: 18px 2px; }
    .page-vip-info .vip-card { width: calc(50% - 10px); min-width: 145px; max-width: 180px; margin: 5px; }
    .page-vip-info .vip-card-header { padding: 13px 6px 9px; }
    .page-vip-info .vip-image-container { width: 88px; height: 88px; padding: 5px; }
    .page-vip-info .vip-image { width: 78px; height: 78px; max-width: 78px; max-height: 78px; }
    .page-vip-info .vip-card-title { font-size: 12px; letter-spacing: 1px; }
    .page-vip-info .vip-card-body { padding: 10px 8px; }
    .page-vip-info .vip-price { font-size: 21px; }
    .page-vip-info .vip-benefit-item { font-size: 10px; }
    .page-vip-info .btn-vip-buy { padding: 9px 8px; font-size: 10px; }
}