/* ==================================================================== 
   EMUPLAYERS CMS - BLIZZARD WOW NATIVE STYLE
   ==================================================================== */

:root {
    --blz-blue-500: #ffec71;
    --blz-blue-600: #ffc107;
    --wow-gold-500: #c76700;
    --wow-gold-600: #f8b700;
    --wow-gold-700: #ffec71;
    --wow-red-700: #ff2b00;

    --bg-base: #000000;
    --bg-panel-1: #0a0d15;
    --bg-panel-2: #111218;
    --bg-glass: rgba(21, 23, 30, 0.8);

    --text-main: #e0e0e0;
    --text-muted: #8c8c8c;

    --font-title: 'Cinzel Decorative', serif;
    --font-body: 'Montserrat', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-base);
    background-image: radial-gradient(circle at 50% 0%, #15171e 0%, #000000 80%);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    transition: 0.2s;
}

/* --- SITE NAV (HEADER) --- */
.SiteNav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.SiteNav.scrolled {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand img {
    height: 45px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--wow-gold-600);
}

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

/* --- BLZ BUTTONS --- */
.blz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.blz-btn.primary {
    background: var(--blz-blue-600);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 116, 224, 0.4);
}

.blz-btn.primary:hover {
    background: var(--blz-blue-500);
    transform: translateY(-2px);
}

.blz-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.blz-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* --- MASTHEAD (HERO) --- */
.blz-masthead {
    width: 100%;
    height: 85vh;
    min-height: 600px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.masthead-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    z-index: 1;
}

.masthead-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to top, var(--bg-base) 0%, transparent 100%);
}

.masthead-content {
    position: relative;
    z-index: 5;
    max-width: 800px;
    padding: 0 20px;
}

.masthead-logo {
    max-width: 400px;
    margin-bottom: 30px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8));
}

.masthead-title {
    font-family: var(--font-title);
    font-size: 42px;
    color: #fff;
    margin: 0 0 15px;
    font-weight: normal;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
}

.masthead-desc {
    font-size: 18px;
    color: var(--text-main);
    margin: 0 0 40px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

.masthead-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* --- BLZ SECTION & FEATURE PANELS --- */
.divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 40px 0;
}

.blz-section {
    padding: 40px 20px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* FEATURE A ANCHO COMPLETO (BREAKOUT SECTION) */
.blz-section-full {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    margin-bottom: 40px;
}

.feature-panel {
    display: flex;
    align-items: center;
    min-height: 500px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 40px;
    background-size: cover;
    background-position: center;
}

.blz-section-full .feature-panel {
    border-radius: 0;
    margin-bottom: 0;
}

.feature-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
}

.feature-panel.right::before {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
}

.feature-content {
    position: relative;
    z-index: 2;
    padding: 60px;
    max-width: 500px;
}

.feature-panel.right .feature-content {
    margin-left: auto;
}

.f-sub {
    color: var(--wow-gold-600);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: 1px;
}

.f-title {
    color: #fff;
    font-family: var(--font-title);
    font-size: 38px;
    margin: 0 0 20px;
    line-height: 1.1;
    font-weight: normal;
}

.f-desc {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 30px;
}

/* --- BLZ NEWS (CARDS) --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}

.section-header h2 {
    font-family: var(--font-title);
    font-size: 32px;
    color: #fff;
    margin: 0;
    font-weight: normal;
}

.section-header .link {
    color: var(--blz-blue-600);
    font-weight: 700;
}

.section-header .link:hover {
    color: #fff;
}

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

.blz-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blz-card:hover {
    transform: translateY(-5px);
    border-color: rgba(248, 183, 0, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.card-media {
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
}

.card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px;
    line-height: 1.3;
}

.blz-card:hover .card-title {
    color: var(--wow-gold-600);
}

.card-date {
    margin-top: auto;
    color: #525e6e;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- RANKINGS (TWO-PANEL HIGHLIGHTS) --- */
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.highlight-card {
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    min-height: 400px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.highlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    padding: 40px;
    display: flex;
    flex-direction: column;
}

/* REPARACIÓN Y AJUSTE DE LA TABLA DE RANKINGS (Para 10 items) */
.lb-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    table-layout: fixed;
    /* Fuerza a respetar los anchos de las columnas */
}

.lb-table td {
    padding: 8px 0;
    /* Espaciado reducido para los 10 items */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
}

.lb-table tr:last-child td {
    border: none;
}

/* Tamaños y límites de columnas para evitar desbordamientos */
.lb-table td:nth-child(1) {
    width: 35px;
}

.lb-table td:nth-child(2) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.lb-table td:nth-child(3) {
    width: 90px;
    text-align: right;
}

.lb-pos {
    font-family: var(--font-title);
    font-size: 18px;
    color: var(--text-muted);
    font-weight: bold;
}

.lb-table tr:nth-child(1) .lb-pos {
    color: var(--wow-gold-600);
}

.lb-table tr:nth-child(2) .lb-pos {
    color: #c0c0c0;
}

.lb-table tr:nth-child(3) .lb-pos {
    color: #cd7f32;
}

.lb-name {
    font-size: 14px;
    font-weight: 600;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-sub {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: normal;
    margin-top: 2px;
}

.lb-val {
    color: var(--blz-blue-500);
    font-weight: 700;
    font-size: 14px;
}

/* ==================================================================== 
   BLIZZARD EPIC FOOTER
   ==================================================================== */

.blz-footer {
    background: var(--bg-panel-2);
    margin-top: 80px;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ornamento Superior (Línea dorada o borde con estilo) */
.footer-ornament {
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--wow-gold-600), transparent);
    box-shadow: 0 0 15px rgba(248, 183, 0, 0.4);
}

/* Sección de Redes Sociales */
.footer-socials {
    text-align: center;
    padding: 40px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
}

.socials-title {
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
    font-weight: 700;
}

.socials-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.socials-icons a {
    display: block;
}

.social-png {
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: 0.3s cubic-bezier(0.5, 0, 0.5, 1);
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5)) grayscale(30%);
    opacity: 0.8;
}

.socials-icons a:hover .social-png {
    transform: translateY(-5px) scale(1.1);
    filter: drop-shadow(0 10px 15px rgba(248, 183, 0, 0.4)) grayscale(0%);
    opacity: 1;
}

/* Grid Principal del Footer */
.blz-footer-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 30px;
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1.5fr;
    gap: 50px;
}

.f-col-epic h4 {
    color: #fff;
    font-family: var(--font-title);
    font-size: 18px;
    margin: 0 0 25px;
    font-weight: normal;
    letter-spacing: 1px;
}

/* Columna 1: Brand & Rating */
.f-brand p {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 20px 0;
}

.footer-logo {
    height: 50px;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
}

.footer-rating {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.rating-img {
    width: auto;
    height: 45px;
    object-fit: contain;
}

.footer-rating span {
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.4;
}

/* Enlaces */
.f-links-epic {
    list-style: none;
    padding: 0;
    margin: 0;
}

.f-links-epic li {
    margin-bottom: 12px;
}

.f-links-epic a {
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: 0.2s;
}

.f-links-epic a i {
    margin-right: 8px;
    font-size: 10px;
    color: var(--wow-gold-600);
    opacity: 0;
    transform: translateX(-5px);
    transition: 0.2s;
}

.f-links-epic a:hover {
    color: #fff;
}

.f-links-epic a:hover i {
    opacity: 1;
    transform: translateX(0);
}

/* Métodos de Pago */
.footer-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-payments img {
    height: 25px;
    object-fit: contain;
    opacity: 0.4;
    transition: 0.3s;
    filter: grayscale(100%);
}

.footer-payments img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* Columna 4: Server Info & Time */
.f-server-info {
    text-align: right;
}

.server-status-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 8px 15px;
    border-radius: 4px;
    margin-bottom: 25px;
}

.server-status-box span {
    color: #34d399;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: blzPulse 2s infinite;
}

.server-time-box {
    text-align: right;
}

.time-label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 5px;
}

.time-display {
    font-family: var(--font-title);
    font-size: 38px;
    color: var(--wow-gold-600);
    text-shadow: 0 0 15px rgba(248, 183, 0, 0.3);
}

.time-display .sec {
    font-size: 20px;
    opacity: 0.7;
}

/* Bottom (Copyright) */
.footer-bottom-epic {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright-text {
    color: #666;
    font-size: 12px;
    line-height: 1.6;
}

.blz-logo-mini {
    color: #555;
    font-size: 18px;
    font-weight: 900;
    font-family: var(--font-title);
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .blz-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .f-server-info {
        text-align: left;
    }

    .server-time-box {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .blz-footer-grid {
        grid-template-columns: 1fr;
    }

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

    .footer-socials {
        padding: 30px 10px;
    }
}

/* --- RESPONSIVE --- */
@media(max-width: 1024px) {
    .nav-menu {
        display: none;
    }

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

    .highlights-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .feature-panel::before,
    .feature-panel.right::before {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
    }

    .feature-panel.right .feature-content {
        margin-left: 0;
    }
}

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

    .masthead-title {
        font-size: 32px;
    }

    .feature-content {
        padding: 30px;
    }
}

/* ==================================================================== 
   BLIZZARD SUB-PAGES & RANKINGS COMPONENTS
   ==================================================================== */

/* --- ENCABEZADOS DE PÁGINA (HERO PEQUEÑO) --- */
.blz-page-header {
    width: 100vw;
    height: 350px;
    margin-left: calc(-50vw + 50%);
    margin-bottom: 40px;
    background-size: cover;
    background-position: center 20%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.blz-page-header .header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    background: linear-gradient(to top, var(--bg-base) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.blz-page-header .header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-bottom: 50px;
}

.page-title {
    font-family: var(--font-title);
    font-size: 48px;
    color: #fff;
    margin: 0 0 10px;
    font-weight: normal;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
}

.page-subtitle {
    color: var(--wow-gold-600);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    margin: 0;
}

/* --- TABS DE NAVEGACIÓN --- */
.blz-tabs-container {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 30px;
}

.blz-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.blz-tabs a {
    display: block;
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    transition: 0.2s;
}

.blz-tabs a i {
    margin-right: 8px;
    font-size: 16px;
    opacity: 0.7;
}

.blz-tabs a:hover {
    color: #fff;
}

.blz-tabs a.active {
    color: #fff;
}

.blz-tabs a.active i {
    color: var(--wow-gold-600);
    opacity: 1;
}

.blz-tabs a.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--wow-gold-600);
    box-shadow: 0 -2px 10px rgba(248, 183, 0, 0.5);
}

/* --- TABLAS INMERSIVAS (DATA TABLES) --- */
.blz-table-wrapper {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.blz-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.blz-table th {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.blz-table td {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    transition: 0.2s;
}

.blz-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.blz-table tr:last-child td {
    border-bottom: none;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

/* ESTILOS DE RANKING DENTRO DE LA TABLA */
.rank-num {
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: bold;
}

.rank-num.top-1 {
    color: #f8b700;
    text-shadow: 0 0 10px rgba(248, 183, 0, 0.5);
    font-size: 26px;
}

.rank-num.top-2 {
    color: #d1d1d1;
    text-shadow: 0 0 10px rgba(209, 209, 209, 0.3);
}

.rank-num.top-3 {
    color: #cd7f32;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.3);
}

.rank-num.top-regular {
    color: #555;
}

.rank-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.rank-name:hover {
    color: var(--wow-gold-600);
}

.rank-name.top-1 {
    color: #f8b700;
}

.class-tag {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.rank-score {
    font-size: 16px;
    font-weight: 700;
}

.rank-score.highlight {
    color: var(--wow-gold-600);
}

.rank-score.danger {
    color: #ff2b00;
}

.rank-meta {
    color: #666;
    font-size: 12px;
}

.rank-meta i {
    margin-right: 5px;
    opacity: 0.7;
}

/* ESTADO VACÍO */
.blz-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.blz-empty-state i {
    font-size: 40px;
    color: #333;
    margin-bottom: 15px;
}

.blz-empty-state p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

/* RESPONSIVE TABS & TABLE */
@media(max-width: 768px) {
    .blz-tabs {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
        padding-bottom: 10px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .blz-tabs a {
        padding: 10px 15px;
    }

    .page-title {
        font-size: 32px;
    }

    /* En móviles forzamos un scroll horizontal para la tabla si es muy ancha */
    .blz-table-wrapper {
        overflow-x: auto;
    }
}

/* ==================================================================== 
   BLIZZARD DOWNLOADS COMPONENTS
   ==================================================================== */

/* --- AVISO ANTI-HACK --- */
.blz-alert-warn {
    display: flex;
    gap: 25px;
    background: rgba(199, 103, 0, 0.08);
    border-left: 4px solid var(--wow-gold-500);
    padding: 30px;
    border-radius: 4px;
    margin-bottom: 50px;
    align-items: flex-start;
}

.blz-alert-warn .alert-icon i {
    font-size: 35px;
    color: var(--wow-gold-500);
    text-shadow: 0 0 15px rgba(199, 103, 0, 0.4);
}

.blz-alert-warn .alert-content strong {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blz-alert-warn .alert-content p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* --- TABS CONTENT --- */
.dl-tab-content {
    display: none;
    animation: fadeInBlz 0.4s ease forwards;
}

.dl-tab-content.active {
    display: block;
}

@keyframes fadeInBlz {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* --- DOWNLOAD CARDS --- */
.blz-dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.blz-dl-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 40px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Efecto de aura al hacer hover en la tarjeta */
.blz-dl-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, rgba(20, 142, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}

.blz-dl-card:hover {
    transform: translateY(-5px);
    border-color: rgba(20, 142, 255, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

.blz-dl-card:hover::before {
    opacity: 1;
}

.dl-card-icon {
    font-size: 50px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
}

.dl-card-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 15px;
    position: relative;
    z-index: 2;
}

.dl-card-meta {
    display: flex;
    gap: 20px;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.dl-card-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dl-card-meta i {
    opacity: 0.6;
}

.dl-btn {
    width: 100%;
    padding: 18px !important;
    font-size: 14px !important;
    position: relative;
    z-index: 2;
}

/* --- REQUISITOS DEL SISTEMA --- */
.blz-req-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.blz-req-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.blz-req-box.recommended {
    background: rgba(248, 183, 0, 0.02);
    border-color: rgba(248, 183, 0, 0.2);
}

.blz-req-box .req-header {
    padding: 20px;
    text-align: center;
    font-family: var(--font-title);
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

.blz-req-box.recommended .req-header {
    color: var(--wow-gold-600);
    border-bottom-color: rgba(248, 183, 0, 0.1);
}

.req-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.req-list li {
    padding: 16px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
}

.req-list li:last-child {
    border-bottom: none;
}

.req-list li span {
    color: #fff;
    width: 80px;
    font-weight: 600;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .blz-req-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .blz-alert-warn {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ==================================================================== 
   BLIZZARD ABOUT / INFO COMPONENTS
   ==================================================================== */

/* --- STATS HUD --- */
.blz-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.blz-stat-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.blz-stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.stat-label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
    font-weight: 700;
}

.stat-value {
    display: block;
    font-size: 36px;
    font-weight: normal;
    color: #fff;
    font-family: var(--font-title);
}

.blz-stat-card.is-online::after {
    background: #00ff00;
    box-shadow: 0 0 15px #00ff00;
}

.blz-stat-card.is-online .stat-value {
    color: #00ff00;
    text-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
}

.pulse-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #00ff00;
    font-size: 10px;
    animation: blzPulse 2s infinite;
}

@keyframes blzPulse {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 10px #00ff00;
    }

    100% {
        opacity: 0.3;
    }
}

/* --- CASTLE SIEGE STATS (DENTRO DEL FEATURE PANEL) --- */
.blz-cs-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.cs-tax-info p {
    margin: 0 0 5px 0;
    font-size: 13px;
    color: #d1d1d1;
}

.cs-tax-info p:last-child {
    margin: 0;
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
}

.cs-owner-box {
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
}

.cs-owner-box span {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.owner-name {
    font-family: var(--font-title);
    font-size: 20px;
    color: var(--wow-gold-600);
}

.owner-name.none {
    color: #555;
}

/* --- RATES GRID --- */
.blz-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.blz-info-card {
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 30px 20px;
    text-align: center;
    transition: 0.3s;
}

.blz-info-card:hover {
    background: rgba(25, 25, 25, 0.8);
    border-color: rgba(248, 183, 0, 0.3);
    transform: translateY(-3px);
}

.blz-info-card i {
    font-size: 32px;
    color: var(--wow-gold-600);
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(248, 183, 0, 0.3));
}

.blz-info-card h4 {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
}

.blz-info-card span {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.blz-info-card small {
    font-size: 14px;
    color: #888;
    font-weight: normal;
}

/* --- CHAOS MACHINE GRID --- */
.blz-chaos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.blz-chaos-item {
    background: linear-gradient(90deg, var(--bg-panel-1), transparent);
    border-left: 3px solid var(--blz-blue-600);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 4px 4px 0;
}

.chaos-label {
    color: #ccc;
    font-size: 14px;
    font-weight: 600;
}

.chaos-val {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 116, 224, 0.5);
}

.chaos-val small {
    color: #666;
    font-size: 13px;
    font-weight: normal;
}

/* --- VIP TABLE OVERRIDES --- */
.vip-table th.col-gold {
    background: linear-gradient(to bottom, rgba(248, 183, 0, 0.15), rgba(248, 183, 0, 0.05));
    color: var(--wow-gold-600);
    border-bottom-color: var(--wow-gold-600);
}

.vip-table td.col-gold {
    background: rgba(248, 183, 0, 0.05);
    color: #fff;
    font-weight: bold;
    border-left: 1px solid rgba(248, 183, 0, 0.1);
    border-right: 1px solid rgba(248, 183, 0, 0.1);
}

.vip-table tr:last-child td.col-gold {
    border-bottom: 2px solid var(--wow-gold-600);
}

/* --- JUMBO CALL TO ACTION --- */
.blz-cta-container {
    text-align: center;
    padding: 60px 0 20px;
}

.cta-heading {
    font-family: var(--font-title);
    font-size: 36px;
    color: #fff;
    margin-bottom: 30px;
    font-weight: normal;
}

.jumbo-btn {
    padding: 20px 40px;
    font-size: 18px;
    letter-spacing: 1px;
}

.jumbo-btn i {
    margin-right: 10px;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .blz-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blz-cs-stats {
        flex-direction: column;
        text-align: center;
    }

    .cs-owner-box {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-left: 0;
        padding-top: 15px;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .blz-stats-grid {
        grid-template-columns: 1fr;
    }

    .page-title {
        font-size: 36px;
    }
}

/* ==================================================================== 
   BLIZZARD ACCOUNT PANEL & MODALS
   ==================================================================== */

.blz-account-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- CABECERA USUARIO --- */
.blz-user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 4px;
    margin-bottom: 40px;
}

.user-identity {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--wow-gold-600);
    box-shadow: 0 0 15px rgba(248, 183, 0, 0.2);
}

.user-titles h2 {
    margin: 0 0 5px;
    color: #fff;
    font-family: var(--font-title);
    font-size: 26px;
    font-weight: normal;
}

.user-titles span {
    color: var(--wow-gold-600);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.blz-btn-logout {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 12px 25px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.2s;
}

.blz-btn-logout:hover {
    background: #ef4444;
    color: #fff;
    transform: translateY(-2px);
}

/* --- BILLETERA / CURRENCY --- */
.blz-currency-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.currency-box {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 20px;
    text-align: center;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.currency-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.currency-box.wcoinc::after {
    background: #f8b700;
    box-shadow: 0 0 10px #f8b700;
}

.currency-box.wcoinp::after {
    background: #00aeff;
    box-shadow: 0 0 10px #00aeff;
}

.currency-box.goblin::after {
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

.currency-box.web::after {
    background: #c76700;
    box-shadow: 0 0 10px #c76700;
}

.currency-box h4 {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.currency-box span {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-title);
}

/* --- ALERTAS --- */
.blz-alert {
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 30px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.blz-alert.success {
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid #10b981;
    color: #34d399;
}

.blz-alert.error {
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
    color: #fca5a5;
}

/* --- BOTONES PEQUEÑOS Y DE TABLA --- */
.blz-btn-sm {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 15px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s;
    font-family: var(--font-body);
}

.blz-btn-sm:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

.blz-btn-sm.gold {
    background: rgba(248, 183, 0, 0.1);
    color: var(--wow-gold-600);
    border-color: rgba(248, 183, 0, 0.3);
}

.blz-btn-sm.gold:hover {
    background: var(--wow-gold-600);
    color: #000;
}

/* --- SERVICIOS GRID --- */
.blz-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 50px;
}

.blz-service-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 15px;
    border-radius: 4px;
    text-align: center;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.blz-service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 116, 224, 0.4);
    background: rgba(0, 116, 224, 0.05);
}

.blz-service-card span {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.2s;
}

.blz-service-card:hover span {
    color: var(--blz-blue-500);
}

/* --- MODALES BLIZZARD --- */
.blz-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9998;
}

.blz-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    width: 450px;
    max-width: 90%;
    border-radius: 4px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9);
}

.blz-modal.show,
.blz-modal-overlay.show {
    display: block;
    animation: blzFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes blzFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.blz-modal-overlay.show {
    animation: blzFade 0.3s ease;
    transform: none;
}

@keyframes blzFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.blz-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: 0.2s;
}

.blz-modal-close:hover {
    color: #ef4444;
    transform: scale(1.1);
}

.blz-modal-header {
    text-align: center;
    margin-bottom: 30px;
}

.blz-modal-header i {
    font-size: 40px;
    color: var(--wow-gold-600);
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(248, 183, 0, 0.3));
}

.blz-modal-header h3 {
    margin: 0;
    font-family: var(--font-title);
    font-size: 22px;
    color: #fff;
    font-weight: normal;
}

/* FORMULARIOS BLIZZARD */
.blz-form .form-group {
    margin-bottom: 20px;
}

.blz-form label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.blz-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 3px;
    outline: none;
    font-family: var(--font-body);
    font-size: 14px;
    transition: 0.2s;
}

.blz-form input:focus {
    border-color: var(--blz-blue-500);
    box-shadow: 0 0 10px rgba(0, 116, 224, 0.2);
    background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
    .blz-user-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

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

    .blz-table th,
    .blz-table td {
        padding: 10px;
        font-size: 12px;
    }
}

/* ==================================================================== 
   BLIZZARD ADD STATS COMPONENTS
   ==================================================================== */

/* --- ROSTER DE HÉROES (SELECCIÓN) --- */
.blz-hero-roster {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
    /* Custom Scrollbar para que se vea elegante */
    scrollbar-width: thin;
    scrollbar-color: var(--wow-gold-600) var(--bg-panel-1);
}

.blz-hero-roster::-webkit-scrollbar {
    height: 6px;
}

.blz-hero-roster::-webkit-scrollbar-track {
    background: var(--bg-panel-1);
    border-radius: 4px;
}

.blz-hero-roster::-webkit-scrollbar-thumb {
    background: var(--wow-gold-600);
    border-radius: 4px;
}

.blz-hero-card {
    min-width: 220px;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s ease;
    padding: 30px 20px;
    text-align: center;
}

/* Efecto hover y activo (iluminación de la carta) */
.blz-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, rgba(248, 183, 0, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: 0.3s;
}

.blz-hero-card:hover {
    transform: translateY(-5px);
    border-color: rgba(248, 183, 0, 0.3);
}

.blz-hero-card:hover::before {
    opacity: 1;
}

.blz-hero-card.active {
    border-color: var(--wow-gold-600);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(248, 183, 0, 0.3);
    transform: translateY(-5px);
    background: linear-gradient(to bottom, #111218, #0a0d15);
}

.blz-hero-card.active::before {
    opacity: 1;
    background: radial-gradient(circle at top, rgba(248, 183, 0, 0.2) 0%, transparent 80%);
}

.hero-card-content {
    position: relative;
    z-index: 2;
}

.hero-name {
    margin: 0 0 5px;
    color: #fff;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: normal;
}

.hero-class {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.hero-level {
    background: rgba(0, 0, 0, 0.5);
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-level strong {
    color: var(--wow-gold-600);
}

/* --- DASHBOARD DE ESTADÍSTICAS --- */
.blz-stats-dashboard {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 50px;
    margin-top: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
    border-top: 3px solid var(--blz-blue-600);
    animation: fadeInBlz 0.4s ease forwards;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 50px;
}

.dashboard-header h3 {
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 15px;
}

.points-orb {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(248, 183, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
    border: 2px solid rgba(248, 183, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(248, 183, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.5);
}

.points-orb span {
    font-family: var(--font-title);
    font-size: 38px;
    color: var(--wow-gold-600);
    text-shadow: 0 0 10px rgba(248, 183, 0, 0.5);
    transition: color 0.3s;
}

.cost-text {
    margin: 20px 0 0;
    color: #888;
    font-size: 13px;
}

.cost-text strong {
    color: #fff;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/* Lista de Stats Actuales */
.col-title {
    color: #fff;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: normal;
    margin: 0 0 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.current-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.current-stats-list li {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.current-stats-list li span {
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

.current-stats-list li strong {
    color: #fff;
    font-size: 18px;
    font-family: monospace;
}

/* Grid de Inputs (Asignación) */
.blz-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.blz-stat-input-group {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    padding: 15px 20px;
}

.blz-stat-input-group label {
    display: block;
    color: #ccc;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}

.blz-stat-input-group input {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--blz-blue-500);
    font-size: 24px;
    font-family: monospace;
    font-weight: bold;
    text-align: right;
    padding: 5px 0;
    outline: none;
    transition: 0.3s;
}

.blz-stat-input-group input:focus {
    border-bottom-color: var(--blz-blue-600);
    text-shadow: 0 0 10px rgba(0, 116, 224, 0.4);
}

/* Bóton inactivo de Blizzard */
.blz-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #333 !important;
    box-shadow: none !important;
    color: #888 !important;
    transform: none !important;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .blz-stats-dashboard {
        padding: 30px;
    }
}

/* ==================================================================== 
   BLIZZARD ACCOUNT SERVICES (CLEAR) COMPONENTS
   ==================================================================== */

/* --- ALERTA PK (HUD ASESINO) --- */
.blz-pk-hud {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 20px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.1);
}

.blz-pk-hud .pk-icon i {
    font-size: 30px;
    color: #ef4444;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
}

.blz-pk-hud .pk-info h3 {
    margin: 0 0 5px;
    color: #ef4444;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blz-pk-hud .pk-info span {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

/* --- GRID DE SERVICIOS (TARJETAS SELECCIONABLES) --- */
.blz-svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.blz-svc-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.blz-svc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, rgba(248, 183, 0, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: 0.3s;
}

.blz-svc-card:hover {
    background: rgba(255, 255, 255, 0.02);
    transform: translateY(-3px);
    border-color: rgba(248, 183, 0, 0.3);
}

.blz-svc-card:hover::before {
    opacity: 1;
}

.blz-svc-card.selected {
    background: linear-gradient(to bottom, rgba(248, 183, 0, 0.1), rgba(0, 0, 0, 0.8));
    border-color: var(--wow-gold-600);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(248, 183, 0, 0.1);
    transform: translateY(-5px);
}

.blz-svc-card i {
    font-size: 36px;
    color: var(--text-muted);
    margin-bottom: 15px;
    transition: 0.3s;
    position: relative;
    z-index: 2;
}

.blz-svc-card:hover i {
    color: #fff;
}

.blz-svc-card.selected i {
    color: var(--wow-gold-600);
    filter: drop-shadow(0 0 10px rgba(248, 183, 0, 0.4));
}

.blz-svc-card h4 {
    color: #fff;
    font-size: 15px;
    margin: 0 0 10px 0;
    position: relative;
    z-index: 2;
}

.blz-svc-card span {
    display: block;
    color: var(--wow-gold-600);
    font-size: 13px;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .blz-svc-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================== 
   BLIZZARD RESET & VIP SHOP COMPONENTS
   ==================================================================== */

/* --- TABS CONTENT HANDLER --- */
.blz-tab-content {
    display: none;
    animation: fadeInBlz 0.4s ease forwards;
}

.blz-tab-content.active {
    display: block;
}

/* --- BARRA DE PROGRESIÓN (LEVEL HUD) --- */
.blz-level-hud {
    margin-bottom: 30px;
    text-align: center;
}

.blz-level-hud h4 {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.level-bar-bg {
    width: 100%;
    height: 25px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.level-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blz-blue-600), #00aeff);
    transition: width 0.5s cubic-bezier(0.5, 0, 0.5, 1);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Estados de la Barra */
.level-bar-fill.error {
    background: linear-gradient(90deg, #b91c1c, #ef4444);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.level-bar-fill.vip {
    background: linear-gradient(90deg, #c76700, var(--wow-gold-600));
    box-shadow: 0 0 15px rgba(248, 183, 0, 0.5);
}

.level-warning {
    display: none;
    margin-top: 10px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

/* --- MARCADORES VIP ACTIVOS --- */
.blz-stats-dashboard.is-vip {
    border-top-color: var(--wow-gold-600);
    box-shadow: inset 0 0 40px rgba(248, 183, 0, 0.05), 0 20px 40px rgba(0, 0, 0, 0.7);
}

.blz-vip-tag {
    background: rgba(248, 183, 0, 0.1);
    border-left: 4px solid var(--wow-gold-600);
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.blz-vip-tag strong {
    color: var(--wow-gold-600);
    font-size: 14px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

.blz-vip-tag span {
    color: #fff;
    font-size: 13px;
}

/* --- TIENDA VIP (PAQUETES) --- */
.blz-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.blz-pack-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.blz-pack-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, rgba(248, 183, 0, 0.15) 0%, transparent 60%);
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}

.blz-pack-card:hover {
    transform: translateY(-5px);
    border-color: rgba(248, 183, 0, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

.blz-pack-card:hover::before {
    opacity: 1;
}

.pack-name {
    color: #fff;
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 5px;
    position: relative;
    z-index: 2;
}

.pack-duration {
    display: block;
    color: var(--wow-gold-600);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.pack-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
    flex-grow: 1;
    position: relative;
    z-index: 2;
}

.pack-features li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-size: 13px;
}

.pack-features li strong {
    color: #fff;
}

.pack-features li strong.highlight {
    color: #10b981;
}

.pack-buy-section {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
    position: relative;
    z-index: 2;
}

.pack-price {
    display: block;
    color: var(--wow-gold-600);
    font-size: 32px;
    font-weight: 700;
    font-family: var(--font-title);
    margin-bottom: 20px;
}

.pack-price small {
    font-size: 14px;
    font-family: var(--font-body);
    font-weight: normal;
    color: #888;
}

.shop-btn {
    width: 100%;
    padding: 15px !important;
    font-size: 14px !important;
}

@media (max-width: 768px) {
    .blz-shop-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================== 
   BLIZZARD WARP / UNSTUCK COMPONENTS
   ==================================================================== */

/* --- ALERTA DE MAPA (MAP HUD) --- */
.blz-map-hud {
    display: flex;
    align-items: center;
    gap: 25px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.05);
}

.map-icon-box {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #10b981;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}

.map-icon-box i {
    font-size: 28px;
    color: #10b981;
}

.map-info-box h3 {
    margin: 0 0 10px;
    color: #10b981;
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: normal;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.map-info-box p {
    margin: 0;
    color: #d1d1d1;
    font-size: 14px;
    line-height: 1.6;
}

.map-info-box strong {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: monospace;
}

@media (max-width: 768px) {
    .blz-map-hud {
        flex-direction: column;
        text-align: center;
    }
}

/* ==================================================================== 
   BLIZZARD DONATION SHOP & CHECKOUT COMPONENTS
   ==================================================================== */

/* --- GRID DE PAQUETES --- */
.blz-donation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.blz-donation-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: 0.3s cubic-bezier(0.5, 0, 0.5, 1);
    display: flex;
    flex-direction: column;
}

/* Efecto de luz desde arriba */
.blz-donation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--wow-gold-600), transparent);
}

/* Aura interactiva */
.blz-donation-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, rgba(248, 183, 0, 0.1) 0%, transparent 60%);
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}

.blz-donation-card:hover {
    transform: translateY(-8px);
    border-color: rgba(248, 183, 0, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
}

.blz-donation-card:hover::after {
    opacity: 1;
}

/* Cinta de Bonus (Ribbon) */
.blz-ribbon {
    position: absolute;
    top: 20px;
    right: -40px;
    background: #e11d48;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 45px;
    transform: rotate(45deg);
    box-shadow: 0 5px 15px rgba(225, 29, 72, 0.5);
    z-index: 10;
}

.donation-icon {
    font-size: 55px;
    color: var(--wow-gold-600);
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(248, 183, 0, 0.4));
    position: relative;
    z-index: 2;
}

.donation-title {
    color: #fff;
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: normal;
    margin: 0 0 10px;
    position: relative;
    z-index: 2;
}

.donation-reward {
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.donation-reward .amount {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--wow-gold-600);
    line-height: 1;
    font-family: var(--font-title);
}

.donation-reward .type {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.donation-buy-section {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
    position: relative;
    z-index: 2;
}

.donation-price {
    display: block;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.donation-price small {
    color: #888;
    font-size: 14px;
    font-weight: normal;
}

/* --- BOTONES DE PASARELAS DE PAGO --- */
.blz-gateway-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    padding: 18px;
    margin-bottom: 15px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.2s;
    font-family: var(--font-body);
}

.blz-gateway-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.blz-gateway-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.blz-gateway-btn i {
    font-size: 22px;
}

.gw-paypal:hover {
    border-color: #0070ba;
    box-shadow: 0 0 15px rgba(0, 112, 186, 0.2);
}

.gw-paypal i {
    color: #0070ba;
}

.gw-binance:hover {
    border-color: #F3BA2F;
    box-shadow: 0 0 15px rgba(243, 186, 47, 0.2);
}

.gw-binance i {
    color: #F3BA2F;
}

.gw-manual:hover {
    border-color: #10b981;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

.gw-manual i {
    color: #10b981;
}

/* --- INSTRUCCIONES MANUALES Y BINANCE --- */
.blz-gateway-form {
    animation: fadeInBlz 0.3s ease;
}

.gateway-instructions {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid #ccc;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 25px;
    text-align: center;
}

.gateway-instructions h4 {
    margin: 0 0 10px;
    font-size: 16px;
    text-transform: uppercase;
}

.gateway-instructions p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.gateway-instructions pre {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 4px;
    color: #ccc;
    font-family: monospace;
    font-size: 13px;
    white-space: pre-wrap;
    text-align: left;
    margin: 15px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    .blz-donation-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================== 
   BLIZZARD MARKETPLACE & VAULT COMPONENTS
   ==================================================================== */

/* --- BARRA DE FILTROS --- */
.blz-market-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    background: var(--bg-panel-1);
    padding: 25px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 40px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.blz-market-filters .filter-group {
    flex: 1;
    min-width: 200px;
}

.blz-market-filters label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

/* Controles de Formulario Blizzard */
.blz-form-control {
    width: 100%;
    height: 45px;
    padding: 0 15px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 3px;
    outline: none;
    transition: 0.2s;
    font-family: var(--font-body);
}

.blz-form-control:focus {
    border-color: var(--blz-blue-600);
    box-shadow: 0 0 10px rgba(0, 116, 224, 0.2);
}

select.blz-form-control {
    appearance: auto;
}

select.blz-form-control option {
    background: var(--bg-panel-1);
    color: #fff;
}

/* Checkboxes Custom */
.checkbox-group {
    display: flex;
    align-items: center;
    height: 45px;
}

.blz-checkbox-label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: none !important;
}

.blz-checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: -2px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.blz-checkbox-label input:checked~.checkmark.exc-check {
    background-color: #10b981;
    border-color: #10b981;
}

.blz-checkbox-label input:checked~.checkmark.sock-check {
    background-color: #c084fc;
    border-color: #c084fc;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.blz-checkbox-label input:checked~.checkmark:after {
    display: block;
}

/* --- CARTAS DEL MARKET --- */
.blz-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.blz-market-card {
    background: linear-gradient(to bottom, var(--bg-panel-1), #050505);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    position: relative;
}

.blz-market-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

.mc-seller {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.mc-img-box {
    position: relative;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    cursor: help;
}

.mc-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8));
}

.mc-name {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    margin: 0 0 15px;
    font-family: var(--font-title);
}

.mc-lvl {
    color: var(--wow-gold-600);
    font-weight: bold;
}

.mc-badges {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
    min-height: 20px;
}

.badge-exc {
    font-size: 10px;
    color: #10b981;
    font-weight: bold;
    text-transform: uppercase;
    background: rgba(16, 185, 129, 0.1);
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-sock {
    font-size: 10px;
    color: #c084fc;
    font-weight: bold;
    text-transform: uppercase;
    background: rgba(192, 132, 252, 0.1);
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid rgba(192, 132, 252, 0.2);
}

.mc-price-box {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 4px;
    margin-top: auto;
    margin-bottom: 20px;
}

.mc-price {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
    font-family: var(--font-title);
}

.mc-currency {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.mc-btn {
    width: 100%;
    padding: 15px !important;
}

.mc-btn.bid {
    background: rgba(248, 183, 0, 0.1);
    color: var(--wow-gold-600);
    border: 1px solid rgba(248, 183, 0, 0.3);
}

.mc-btn.bid:hover {
    background: var(--wow-gold-600);
    color: #000;
}

/* --- TOOLTIP MU ONLINE ORIGINAL (ADAPTADO A BLIZZARD) --- */
.mu-tooltip {
    display: none;
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    background: rgba(5, 5, 5, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 4px;
    z-index: 999;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    pointer-events: none;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);
}

.mc-img-box:hover .mu-tooltip,
.mu-vault-item-block:hover .mu-tooltip {
    display: block;
    animation: ttFade 0.2s;
}

@keyframes ttFade {
    from {
        opacity: 0;
        bottom: 100%;
    }

    to {
        opacity: 1;
        bottom: 110%;
    }
}

.mu-tt-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.mu-tt-blue {
    color: #60a5fa;
}

.mu-tt-exc {
    color: #10b981;
}

.mu-tt-harmony {
    color: #facc15;
    margin-top: 6px;
}

.mu-tt-socket {
    color: #c084fc;
}

/* --- BAÚL VIRTUAL (TETRIS INVENTORY) --- */
.mu-vault-wrapper {
    text-align: center;
    margin-bottom: 50px;
}

.mu-vault-container {
    display: inline-block;
    background: #000;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.mu-vault-grid {
    display: grid;
    grid-template-columns: repeat(8, 45px);
    grid-template-rows: repeat(15, 45px);
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
}

.mu-vault-slot {
    background: rgba(15, 15, 15, 0.8);
    width: 100%;
    height: 100%;
}

.mu-vault-item-block {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(20, 142, 255, 0.15) 0%, rgba(10, 10, 10, 0.8) 100%);
    border: 1px solid rgba(20, 142, 255, 0.3);
    cursor: pointer;
    transition: 0.2s;
}

.mu-vault-item-block:hover {
    background: radial-gradient(circle, rgba(20, 142, 255, 0.3) 0%, rgba(10, 10, 10, 0.9) 100%);
    box-shadow: inset 0 0 15px rgba(20, 142, 255, 0.5), 0 0 10px rgba(20, 142, 255, 0.3);
    border-color: rgba(20, 142, 255, 0.8);
    z-index: 10;
}

.mu-vault-item-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.9));
    pointer-events: none;
}

@media (max-width: 992px) {
    .blz-market-filters {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==================================================================== 
   BLIZZARD WIKI & GUIDES COMPONENTS
   ==================================================================== */

/* --- ESTRUCTURA HORIZONTAL DE CATEGORÍAS --- */
.blz-wiki-module {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Columna Izquierda: La Categoría Visual */
.wiki-cat-visual {
    width: 300px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wiki-cat-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(20, 142, 255, 0.15) 0%, rgba(10, 10, 10, 0.9) 100%);
}

.wiki-cat-visual::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--blz-blue-600);
    box-shadow: 0 0 15px var(--blz-blue-600);
}

.wiki-cat-content {
    position: relative;
    z-index: 2;
    padding: 40px 20px;
}

.wiki-cat-icon {
    font-size: 60px;
    color: var(--wow-gold-600);
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(248, 183, 0, 0.4));
    display: block;
}

.wiki-cat-img {
    max-width: 140px;
    max-height: 140px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8));
    transition: transform 0.4s ease;
}

.blz-wiki-module:hover .wiki-cat-img {
    transform: scale(1.1);
}

.wiki-cat-content h3 {
    color: #fff;
    font-size: 22px;
    font-family: var(--font-title);
    font-weight: normal;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.article-count {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 11px;
    color: var(--wow-gold-600);
    text-transform: uppercase;
    font-weight: 700;
}

/* Columna Derecha: Tarjetas de Guías */
.wiki-articles-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    align-content: start;
}

.blz-article-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 20px;
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.blz-article-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(20, 142, 255, 0.1) 0%, transparent 60%);
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}

.blz-article-card:hover {
    transform: translateY(-3px);
    border-color: rgba(20, 142, 255, 0.4);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.blz-article-card:hover::before {
    opacity: 1;
}

.article-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.article-card-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.article-card-icon i {
    font-size: 20px;
    color: var(--wow-gold-600);
}

.article-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

.article-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    transition: 0.3s;
}

.blz-article-card:hover .article-title {
    color: var(--blz-blue-500);
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
    position: relative;
    z-index: 2;
}

.article-meta span {
    color: var(--text-muted);
    font-size: 12px;
}

.article-meta span i {
    color: var(--blz-blue-600);
    margin-right: 5px;
    opacity: 0.5;
    transition: 0.3s;
}

.blz-article-card:hover .article-meta span i {
    opacity: 1;
}

.btn-read-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    transition: 0.3s;
}

.btn-read-more i {
    margin: 0;
}

.blz-article-card:hover .btn-read-more {
    background: var(--blz-blue-600);
    color: #fff;
    transform: translateX(5px);
}


/* --- ENTORNO DE LECTURA DE LA GUÍA (READER) --- */
.blz-guide-reader {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 40px;
}

.reader-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 30px;
    margin-bottom: 40px;
}

.reader-title {
    color: #fff;
    font-family: var(--font-title);
    font-size: 48px;
    font-weight: normal;
    margin: 0 0 15px 0;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
    line-height: 1.1;
}

.reader-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reader-meta i {
    color: var(--wow-gold-600);
    margin-right: 5px;
}

/* El contenido libre del administrador */
.reader-content {
    font-size: 16px;
    color: #d1d1d1;
    line-height: 1.8;
}

/* Aseguramos que las imágenes que suba el Admin no rompan la web */
.reader-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    margin: 20px 0;
}

/* Estilizamos tablas y títulos dentro del contenido libre para que encajen con Blizzard */
.reader-content h2,
.reader-content h3 {
    color: var(--wow-gold-600);
    font-family: var(--font-title);
    font-weight: normal;
    margin-top: 40px;
}

.reader-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.reader-content th {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    color: #fff;
    border-bottom: 2px solid var(--blz-blue-600);
}

.reader-content td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reader-actions {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 40px;
}

@media (max-width: 900px) {
    .blz-wiki-module {
        flex-direction: column;
    }

    .wiki-cat-visual {
        width: 100%;
    }

    .reader-title {
        font-size: 36px;
    }
}

/* ==================================================================== 
   BLIZZARD WEBSHOP & ITEM FORGE (MAKER)
   ==================================================================== */

/* --- TOASTS GLOBALES --- */
.blz-toast {
    position: fixed;
    top: 80px;
    right: 30px;
    z-index: 99999;
    background: var(--bg-panel-2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--wow-gold-600);
    border-radius: 4px;
    padding: 15px 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    animation: slideInRightBlz 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, fadeOutBlz 0.5s ease 4.5s forwards;
}

.blz-toast.error {
    border-left-color: #ef4444;
}

.blz-toast.error i {
    color: #ef4444;
}

.blz-toast.success i {
    color: var(--wow-gold-600);
}

.blz-toast i {
    font-size: 24px;
}

@keyframes slideInRightBlz {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

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

@keyframes fadeOutBlz {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* --- PESTAÑAS PROMOCIONALES VIP --- */
.blz-promo-tab {
    color: #ef4444 !important;
}

.blz-promo-tab i {
    color: #ef4444 !important;
}

/* --- SHOP CARDS --- */
.blz-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.blz-shop-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: 0.3s;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.blz-shop-card:hover {
    transform: translateY(-5px);
    border-color: rgba(20, 142, 255, 0.4);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8);
}

.flash-ribbon {
    position: absolute;
    top: 15px;
    right: -35px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 35px;
    transform: rotate(45deg);
    box-shadow: 0 5px 10px rgba(239, 68, 68, 0.5);
    z-index: 10;
    letter-spacing: 1px;
}

.sc-img-box {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.sc-img-box img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.8));
    transition: 0.3s;
}

.blz-shop-card:hover .sc-img-box img {
    transform: scale(1.1);
    filter: drop-shadow(0 10px 20px rgba(20, 142, 255, 0.5));
}

.sc-info {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sc-title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-title);
}

.sc-price-box {
    margin-bottom: 20px;
}

.sc-old-price {
    font-size: 12px;
    color: #ef4444;
    text-decoration: line-through;
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.sc-final-price {
    color: var(--wow-gold-600);
    font-size: 18px;
    font-weight: 900;
    font-family: var(--font-title);
}

.sc-final-price.flash {
    color: #10b981;
}

.sc-btn {
    width: 100%;
    padding: 15px;
    font-size: 13px;
}


/* --- ITEM MAKER (FORGE) --- */
.blz-maker-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
    align-items: start;
}

/* Panel Izquierdo (Preview) */
.blz-maker-preview {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
    position: sticky;
    top: 100px;
}

.img-showcase {
    background: rgba(0, 0, 0, 0.5);
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 25px;
    transition: 0.3s;
}

.img-showcase.is-exc {
    border-color: #10b981;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(0, 0, 0, 0.5) 80%);
    box-shadow: inset 0 0 30px rgba(16, 185, 129, 0.1);
}

.img-showcase img {
    max-width: 85%;
    max-height: 85%;
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.8));
    transition: 0.3s;
}

.live-title {
    font-family: var(--font-title);
    font-size: 22px;
    color: #fff;
    margin-bottom: 15px;
}

.live-title .lvl {
    color: var(--wow-gold-600);
}

/* Etiquetas JavaScript Generadas */
.badge-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 25px;
    min-height: 24px;
}

.opt-tag {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
}

.opt-tag.exc {
    color: #10b981;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.opt-tag.anc {
    color: #60a5fa;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.opt-tag.sck {
    color: #c084fc;
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
}

.price-calc {
    background: rgba(248, 183, 0, 0.05);
    border-left: 3px solid var(--wow-gold-600);
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: left;
}

.price-calc small {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.flash-alert {
    font-size: 12px;
    color: #ef4444;
    font-weight: bold;
    margin-bottom: 10px;
}

.price-calc .total {
    color: var(--wow-gold-600);
    font-size: 32px;
    font-weight: 900;
    font-family: var(--font-title);
    text-shadow: 0 0 15px rgba(248, 183, 0, 0.3);
}

/* Panel de Promo */
.promo-box {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 25px;
    text-align: left;
}

.promo-box label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}

.promo-input-group {
    display: flex;
    gap: 10px;
}

.promo-input-group input {
    flex: 1;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px 15px;
    border-radius: 3px;
    outline: none;
    text-transform: uppercase;
    font-family: var(--font-body);
}

.promo-input-group input:focus {
    border-color: var(--wow-gold-600);
}

.promo-input-group button {
    background: var(--wow-gold-600);
    color: #000;
    border: none;
    padding: 0 20px;
    border-radius: 3px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.promo-input-group button:hover {
    background: #fff;
}

.promo-msg {
    font-size: 12px;
    margin-top: 10px;
    font-weight: 600;
    display: none;
}

.maker-btn {
    width: 100%;
    padding: 20px;
    font-size: 15px;
    letter-spacing: 1px;
}

/* Panel Derecho (Controles) */
.blz-maker-controls {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.maker-control-group {
    margin-bottom: 30px;
}

.ctrl-label {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Slider Nativo */
.slider-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.slider-wrap input[type=range] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    border-radius: 3px;
    -webkit-appearance: none;
}

.slider-wrap input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blz-blue-500);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 116, 224, 0.5);
    transition: 0.2s;
}

.slider-wrap input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.slider-display {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 3px;
    font-weight: 900;
    color: var(--blz-blue-500);
    min-width: 70px;
    text-align: center;
    font-size: 16px;
}

/* Custom Checkboxes Blizzard */
.chk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.blz-chk-box {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
}

.blz-chk-box:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.blz-chk-box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.blz-chk-box .checkmark {
    height: 20px;
    width: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    margin-right: 15px;
    position: relative;
    transition: 0.2s;
}

.blz-chk-box input:checked~.checkmark {
    background-color: var(--wow-gold-600);
    border-color: var(--wow-gold-600);
}

.blz-chk-box input:checked~.checkmark.exc-check {
    background-color: #10b981;
    border-color: #10b981;
}

.blz-chk-box .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.blz-chk-box input:checked~.checkmark:after {
    display: block;
}

.blz-chk-box .lbl {
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
}

.socket-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.socket-seed {
    flex: 2;
}

.socket-lvl {
    flex: 1;
}

@media (max-width: 992px) {
    .blz-maker-grid {
        grid-template-columns: 1fr;
    }

    .blz-maker-preview {
        position: relative;
        top: 0;
        margin-bottom: 30px;
    }

    .chk-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================== 
   PARCHES DE CORRECCIÓN: WEBSHOP Y BOTONES
   ==================================================================== */

/* 1. CORRECCIÓN DEL BOTÓN DESBORDADO EN LAS TARJETAS */
.blz-btn {
    box-sizing: border-box !important;
    /* Obliga al botón a no salirse de la tarjeta */
}

/* 2. REORGANIZACIÓN DEL MENÚ DE CATEGORÍAS (ESTILO PASTILLAS/PILLS BLIZZARD) */
.shop-categories {
    display: flex !important;
    flex-wrap: wrap !important;
    /* Arregla la línea recta que se sale de la pantalla */
    justify-content: center !important;
    gap: 12px !important;
    /* Espaciado uniforme */
    margin: 0;
    padding: 0;
}

.shop-categories li {
    list-style: none;
}

.shop-categories a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 20px !important;
    border-radius: 30px !important;
    /* Diseño de pastilla ovalada */
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.2s !important;
}

.shop-categories a::after {
    display: none !important;
    /* Quitamos la línea inferior dorada que usan otras tabs */
}

.shop-categories a i {
    font-size: 14px;
    display: inline-block;
    text-align: center;
}

/* Efectos al pasar el ratón */
.shop-categories a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Categoría Activa */
.shop-categories a.active {
    background: rgba(0, 116, 224, 0.15) !important;
    border-color: var(--blz-blue-500) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(0, 116, 224, 0.4) !important;
}

.shop-categories a.active i {
    color: var(--blz-blue-500) !important;
    text-shadow: 0 0 10px rgba(0, 116, 224, 0.5);
}

/* Botón especial de Promociones */
.shop-categories a.blz-promo-tab {
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
}

.shop-categories a.blz-promo-tab:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
}

/* ==================================================================== 
   BLIZZARD PROMOTIONAL PACKS COMPONENTS
   ==================================================================== */

/* --- GRID DE PAQUETES --- */
.blz-packs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* --- CARTAS ÉPICAS DE COLECCIONISTA --- */
.blz-pack-card-epic {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: 0.3s cubic-bezier(0.5, 0, 0.5, 1);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
    position: relative;
}

.blz-pack-card-epic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(248, 183, 0, 0.1) 0%, transparent 60%);
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}

.blz-pack-card-epic:hover {
    transform: translateY(-5px);
    border-color: rgba(248, 183, 0, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
}

.blz-pack-card-epic:hover::after {
    opacity: 1;
}

/* Etiqueta de Oferta Especial */
.pack-badge-special {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--wow-gold-600);
    color: var(--wow-gold-600);
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
    padding: 6px 15px;
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(248, 183, 0, 0.3);
    z-index: 10;
    letter-spacing: 1px;
}

/* Portada del Paquete (Zoom In Hover) */
.pack-cover-img {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
    background: #000;
    border-bottom: 2px solid var(--wow-gold-600);
}

.pack-cover-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.blz-pack-card-epic:hover .pack-cover-img img {
    opacity: 1;
    transform: scale(1.05);
    filter: brightness(1.2);
}

/* Detalles del Paquete */
.pack-details {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 2;
}

.pack-title-epic {
    font-family: var(--font-title);
    font-size: 26px;
    font-weight: normal;
    color: #fff;
    margin: 0 0 20px 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

/* Lista de ítems (El Botín) */
.pack-contents-box {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 25px;
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.contents-header {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
    letter-spacing: 1px;
}

.contents-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.contents-list li {
    font-size: 13px;
    color: #ccc;
    display: flex;
    align-items: center;
}

.contents-list li i {
    color: var(--wow-gold-600);
    margin-right: 8px;
    font-size: 10px;
    opacity: 0.8;
}

/* Costo y Botón de Acción */
.pack-footer-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
}

.pack-cost-info {
    display: flex;
    flex-direction: column;
}

.currency-label {
    font-size: 11px;
    color: var(--wow-gold-600);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 3px;
}

.price-val {
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: normal;
    color: #fff;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.epic-buy-btn {
    padding: 15px 35px !important;
    font-size: 14px !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .blz-packs-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .pack-footer-action {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .epic-buy-btn {
        width: 100%;
    }
}

/* ==================================================================== 
   BLIZZARD AUTHENTICATION (REGISTRO & LOGIN)
   ==================================================================== */

.blz-auth-section {
    display: flex;
    justify-content: center;
    padding: 40px 20px 80px;
}

.blz-auth-container {
    width: 100%;
    max-width: 550px;
}

/* Tarjeta Central (Estilo Battle.net) */
.blz-auth-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 50px 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    border-top: 3px solid var(--blz-blue-600);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blz-auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, rgba(20, 142, 255, 0.1) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.auth-title {
    color: #fff;
    font-family: var(--font-title);
    font-size: 32px;
    font-weight: normal;
    margin: 0 0 10px;
    position: relative;
    z-index: 2;
}

.auth-desc {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 30px;
    position: relative;
    z-index: 2;
}

/* Controles de Formulario e Iconos */
.blz-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.blz-form .input-icon-wrapper {
    position: relative;
    width: 100%;
    z-index: 2;
    text-align: left;
}

.blz-form .input-icon-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    transition: 0.3s;
    font-size: 16px;
    pointer-events: none;
}

.blz-form .blz-form-control.has-icon {
    padding-left: 45px;
}

/* Efecto Neón al enfocar el input */
.blz-form .blz-form-control.has-icon:focus+i,
.blz-form .input-icon-wrapper:focus-within i {
    color: var(--blz-blue-500);
    filter: drop-shadow(0 0 5px rgba(20, 142, 255, 0.5));
}

.auth-btn {
    width: 100%;
    padding: 18px;
    font-size: 16px;
    margin-top: 15px;
    position: relative;
    z-index: 2;
    letter-spacing: 1px;
}

@media (max-width: 600px) {
    .blz-auth-card {
        padding: 40px 20px;
    }

    .blz-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ==================================================================== 
   BLIZZARD AUTH LINKS (LOGIN EXTRAS)
   ==================================================================== */

.auth-links {
    margin-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    font-size: 13px;
}

.auth-links .recovery-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: 0.2s;
    display: block;
    margin-bottom: 15px;
}

.auth-links .recovery-link:hover {
    color: #fff;
    text-decoration: underline;
}

.auth-links .register-link {
    color: var(--wow-gold-600);
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s;
    margin-left: 5px;
}

.auth-links .register-link:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(248, 183, 0, 0.5);
}

/* ==================================================================== 
   BLIZZARD NEWS READER COMPONENTS
   ==================================================================== */

.blz-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* Colores Dinámicos según el tipo de noticia */
.blz-news-badge.type-default {
    background: rgba(20, 142, 255, 0.1);
    color: var(--blz-blue-500);
    border: 1px solid rgba(20, 142, 255, 0.3);
}

.blz-news-badge.type-ann {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.blz-news-badge.type-evt {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.blz-news-badge.type-upd {
    background: rgba(248, 183, 0, 0.1);
    color: var(--wow-gold-600);
    border: 1px solid rgba(248, 183, 0, 0.3);
}

/* ==================================================================== 
   BLIZZARD NEWS INDEX (PORTADA DE NOTICIAS)
   ==================================================================== */

.blz-news-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.blz-news-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    transition: 0.3s cubic-bezier(0.5, 0, 0.5, 1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Aura Azul al hacer hover */
.blz-news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(20, 142, 255, 0.1) 0%, transparent 60%);
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
    z-index: 2;
}

.blz-news-card:hover {
    transform: translateY(-5px);
    border-color: rgba(20, 142, 255, 0.4);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8);
}

.blz-news-card:hover::before {
    opacity: 1;
}

/* Imagen de portada de la noticia */
.news-card-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--blz-blue-600);
}

/* Sombra interior para que el texto resalte */
.news-card-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.8) 100%);
    transition: 0.3s;
}

.blz-news-card:hover .news-card-img::after {
    opacity: 0.5;
}

/* Badges sobre la imagen */
.news-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 3;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.news-badge.type-default {
    background: var(--blz-blue-600);
}

.news-badge.type-ann {
    background: #ef4444;
}

.news-badge.type-evt {
    background: #10b981;
    color: #000;
}

.news-badge.type-upd {
    background: var(--wow-gold-600);
    color: #000;
}

/* Cuerpo de la tarjeta */
.news-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    z-index: 3;
}

.news-card-title {
    color: #fff;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: normal;
    margin: 0 0 10px;
    line-height: 1.3;
    transition: 0.3s;
}

.blz-news-card:hover .news-card-title {
    color: var(--blz-blue-500);
}

.news-card-excerpt {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 20px;
    flex-grow: 1;
}

/* Footer de la tarjeta */
.news-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
    color: #666;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.news-card-meta i {
    margin-right: 5px;
}

.read-more {
    color: var(--blz-blue-600);
    transition: 0.3s;
    display: flex;
    align-items: center;
}

.read-more i {
    margin-left: 5px;
    margin-right: 0;
    transition: transform 0.3s;
}

.blz-news-card:hover .read-more {
    color: #fff;
}

.blz-news-card:hover .read-more i {
    transform: translateX(5px);
    color: var(--wow-gold-600);
}

@media (max-width: 768px) {
    .blz-news-index-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================== 
   BLIZZARD EPIC HOME COMPONENTS
   ==================================================================== */

/* --- SERVER HUD (FLOTANTE SOBRE EL MASTHEAD) --- */
.blz-server-hud {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background: rgba(10, 13, 21, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 15px 30px;
    gap: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hud-item i {
    color: var(--wow-gold-600);
    font-size: 16px;
}

/* Status Dot Animation */
.hud-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #555;
}

.hud-item.online .hud-dot {
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: hudPulse 2s infinite;
}

.hud-item.offline .hud-dot {
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
}

@keyframes hudPulse {
    0% {
        opacity: 0.5;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
        box-shadow: 0 0 15px #10b981;
    }

    100% {
        opacity: 0.5;
        transform: scale(0.9);
    }
}

/* --- CASTLE SIEGE FULL PANEL --- */
.blz-siege-panel {
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    border-top: 2px solid var(--wow-gold-600);
    border-bottom: 2px solid var(--wow-gold-600);
}

.siege-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(10, 13, 21, 0.9) 100%);
}

.siege-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;
}

.siege-sub {
    color: #ef4444;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0 0 10px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.siege-title {
    color: #fff;
    font-family: var(--font-title);
    font-size: 42px;
    font-weight: normal;
    margin: 0 0 30px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
}

.siege-guild-info {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 40px;
    border-radius: 8px;
    backdrop-filter: blur(5px);
}

.guild-mark-container {
    width: 80px;
    height: 80px;
    background: url('/assets/emucms/images/guild-shield-bg.png') center/contain no-repeat;
    /* Opcional: un escudo base */
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 15px rgba(248, 183, 0, 0.4));
}

.guild-mark-container canvas {
    image-rendering: pixelated;
    width: 64px;
    height: 64px;
}

/* Mantiene el logo nítido (8-bit style) */

.guild-details {
    text-align: left;
}

.guild-label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 5px;
}

.guild-name {
    display: block;
    color: var(--wow-gold-600);
    font-size: 24px;
    font-family: var(--font-title);
    font-weight: normal;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    margin-bottom: 10px;
}

.guild-stats {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #ccc;
}

.guild-stats span i {
    color: var(--wow-gold-600);
    margin-right: 5px;
}


/* --- HERO CARDS (RANKINGS REWORK) --- */
.blz-rankings-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.hero-col-title {
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.hero-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.blz-hero-stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 15px;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.blz-hero-stat-card:hover {
    transform: translateX(10px);
    border-color: rgba(248, 183, 0, 0.3);
    background: rgba(255, 255, 255, 0.02);
}

.blz-hero-stat-card.killer-card:hover {
    border-color: rgba(239, 68, 68, 0.3);
}

.hero-avatar {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rank-badge {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #f8b700, #c76700);
    color: #000;
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #e0e0e0, #808080);
    color: #000;
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #8b4513);
    color: #fff;
}

.hero-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.h-name {
    margin: 0 0 5px;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.h-name.rank-1 {
    color: var(--wow-gold-600);
}

.h-class {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 10px;
}

.h-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 12px;
    border-radius: 4px;
}

.stat-highlight {
    font-size: 14px;
    font-weight: 900;
}

.stat-minor {
    font-size: 11px;
    color: #888;
    font-weight: 700;
    text-transform: uppercase;
}

/* Ajustes Mini-Cartas Noticias */
.blz-news-card-mini .card-body {
    padding: 15px;
}

.blz-news-card-mini .card-title {
    font-size: 15px;
}

.blz-news-card-mini .card-date {
    font-size: 11px;
}

@media (max-width: 992px) {
    .blz-rankings-hero-grid {
        grid-template-columns: 1fr;
    }

    .blz-server-hud {
        flex-wrap: wrap;
        justify-content: center;
        width: 90%;
        border-radius: 8px;
        bottom: -50px;
    }

    .blz-masthead {
        margin-bottom: 80px;
    }

    /* Espacio para el HUD en móvil */
}

@media (max-width: 600px) {
    .siege-guild-info {
        flex-direction: column;
        text-align: center;
    }

    .guild-details {
        text-align: center;
    }
}

/* ==================================================================== 
   BLIZZARD VIP MEMBERSHIPS (PRICING CARDS)
   ==================================================================== */

.blz-vip-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    align-items: center;
}

.blz-vip-card {
    width: 320px;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: 0.3s cubic-bezier(0.5, 0, 0.5, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.blz-vip-card:hover {
    transform: translateY(-10px);
}

/* --- COLORES Y TIER LIST --- */

/* Tier 1: Bronce / Cobre */
.blz-vip-card.tier-1 {
    border-top: 3px solid #cd7f32;
}

.blz-vip-card.tier-1:hover {
    border-color: #cd7f32;
    box-shadow: 0 15px 30px rgba(205, 127, 50, 0.2);
}

.blz-vip-card.tier-1 .vip-tier-name {
    color: #cd7f32;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.3);
}

.blz-vip-card.tier-1 .vip-icon-default {
    color: #cd7f32;
    filter: drop-shadow(0 0 10px rgba(205, 127, 50, 0.3));
}

.blz-vip-card.tier-1 .vip-benefits li i {
    color: #cd7f32;
}

/* Tier 2: Plata / Hielo */
.blz-vip-card.tier-2 {
    border-top: 3px solid #94a3b8;
}

.blz-vip-card.tier-2:hover {
    border-color: #94a3b8;
    box-shadow: 0 15px 30px rgba(148, 163, 184, 0.2);
}

.blz-vip-card.tier-2 .vip-tier-name {
    color: #94a3b8;
    text-shadow: 0 0 10px rgba(148, 163, 184, 0.3);
}

.blz-vip-card.tier-2 .vip-icon-default {
    color: #94a3b8;
    filter: drop-shadow(0 0 10px rgba(148, 163, 184, 0.3));
}

.blz-vip-card.tier-2 .vip-benefits li i {
    color: #94a3b8;
}

/* Tier 3: Oro / Épico (Carta Destacada) */
.blz-vip-card.is-featured {
    border-top: 3px solid var(--wow-gold-600);
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(248, 183, 0, 0.15);
    z-index: 2;
    background: linear-gradient(to bottom, #111218, #000);
}

.blz-vip-card.is-featured:hover {
    transform: scale(1.05) translateY(-10px);
    border-color: var(--wow-gold-600);
    box-shadow: 0 20px 50px rgba(248, 183, 0, 0.4);
}

.blz-vip-card.is-featured .vip-tier-name {
    color: var(--wow-gold-600);
    text-shadow: 0 0 15px rgba(248, 183, 0, 0.5);
}

.blz-vip-card.is-featured .vip-icon-default {
    color: var(--wow-gold-600);
    filter: drop-shadow(0 0 15px rgba(248, 183, 0, 0.5));
}

.blz-vip-card.is-featured .vip-benefits li i {
    color: var(--wow-gold-600);
}

.blz-vip-card.is-featured .vip-buy-btn {
    background: var(--wow-gold-600);
    color: #000;
    border-color: var(--wow-gold-600);
}

.blz-vip-card.is-featured .vip-buy-btn:hover {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 20px rgba(248, 183, 0, 0.6);
}

/* --- ESTRUCTURA INTERNA DE LA TARJETA --- */
.vip-card-header {
    padding: 40px 20px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.vip-icon-default {
    font-size: 60px;
    margin-bottom: 20px;
}

.vip-icon-img {
    height: 70px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8));
}

.vip-tier-name {
    font-family: var(--font-title);
    font-size: 26px;
    font-weight: normal;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.vip-duration {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.vip-price-box {
    padding: 25px 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.price-amount {
    font-family: var(--font-title);
    font-size: 48px;
    font-weight: normal;
    color: #fff;
    line-height: 1;
    display: block;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.price-currency {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
}

.vip-benefits {
    padding: 30px;
    flex-grow: 1;
}

.vip-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vip-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: #ccc;
    margin-bottom: 15px;
    line-height: 1.5;
}

.vip-benefits li i {
    margin-top: 3px;
    font-size: 12px;
}

.vip-card-action {
    padding: 25px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.vip-buy-btn {
    width: 100%;
    padding: 18px !important;
    font-size: 14px !important;
    letter-spacing: 1px;
}

@media (max-width: 1024px) {
    .blz-vip-card.is-featured {
        transform: scale(1);
    }

    .blz-vip-card.is-featured:hover {
        transform: translateY(-10px);
    }
}

/* ==================================================================== 
   BLIZZARD EXCHANGE HOUSE (CASA DE CAMBIO)
   ==================================================================== */

.blz-exchange-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 992px) {
    .blz-exchange-grid {
        grid-template-columns: 1fr;
    }
}

.exchange-col-title {
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    margin: 0 0 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.exchange-col-title i {
    color: var(--wow-gold-600);
    margin-right: 8px;
}

/* Lista de Rutas */
.blz-rates-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.blz-rate-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 25px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 0.3s cubic-bezier(0.5, 0, 0.5, 1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.rate-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(248, 183, 0, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}

.blz-rate-card:hover {
    transform: translateY(-5px);
    border-color: rgba(248, 183, 0, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.blz-rate-card:hover .rate-card-bg {
    opacity: 1;
}

.blz-rate-card.selected {
    border-color: var(--wow-gold-600);
    background: rgba(20, 20, 25, 1);
    box-shadow: 0 0 20px rgba(248, 183, 0, 0.2);
    transform: translateY(-5px);
}

.blz-rate-card.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--wow-gold-600);
    box-shadow: 0 0 15px var(--wow-gold-600);
}

.rate-name {
    display: block;
    color: #fff;
    font-family: var(--font-title);
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: normal;
}

.rate-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.flow-item {
    text-align: center;
    flex: 1;
}

.flow-item small {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 700;
    letter-spacing: 1px;
}

.flow-item strong {
    display: block;
    font-size: 14px;
}

.flow-item strong.highlight {
    text-shadow: 0 0 10px currentColor;
    font-size: 15px;
}

.flow-arrow {
    color: #555;
    font-size: 20px;
}

.blz-rate-card.selected .flow-arrow {
    color: var(--wow-gold-600);
}

/* Colores Temáticos de Monedas */
.curr-color-zen {
    color: #fbbf24;
}

.curr-color-wcoinc {
    color: #3b82f6;
}

.curr-color-wcoinp {
    color: #c084fc;
}

.curr-color-goblin {
    color: #10b981;
}

.curr-color-web_credits {
    color: var(--wow-gold-600);
}

/* Panel Derecho Sticky */
.blz-action-panel {
    background: var(--bg-panel-2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 30px;
    position: sticky;
    top: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.panel-title {
    color: #fff;
    font-family: var(--font-title);
    font-size: 18px;
    margin: 0 0 25px;
    font-weight: normal;
}

.panel-title i {
    color: var(--wow-gold-600);
    margin-right: 8px;
}

/* Custom Select en el Front-End */
select.blz-form-control {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px auto;
}

select.blz-form-control option {
    background: #000;
    color: #fff;
}

.exchange-summary-box {
    background: rgba(0, 0, 0, 0.5);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 20px;
    margin: 25px 0;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.summary-item.total {
    margin-bottom: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    font-weight: 700;
}

.blz-exchange-btn {
    width: 100%;
    padding: 15px !important;
    font-size: 14px !important;
}

.blz-exchange-btn:disabled {
    opacity: 0.3;
    filter: grayscale(100%);
    cursor: not-allowed;
    box-shadow: none;
}

.panel-footer-note {
    margin-top: 20px;
    font-size: 11px;
    color: #666;
    text-align: center;
    line-height: 1.5;
}

.panel-footer-note i {
    color: #888;
}

/* ==================================================================== 
   BLIZZARD RANKINGS (SALÓN DE LA FAMA)
   ==================================================================== */

/* Navegación de Categorías */
.blz-rankings-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.blz-pill {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    padding: 12px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blz-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.blz-pill.active {
    background: rgba(248, 183, 0, 0.1);
    color: var(--wow-gold-600);
    border-color: rgba(248, 183, 0, 0.3);
    box-shadow: 0 0 15px rgba(248, 183, 0, 0.2);
}

/* Tabla Principal */
.blz-ranking-table-wrapper {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.blz-ranking-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.blz-ranking-table th {
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 20px 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
    text-align: left;
}

.blz-ranking-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    vertical-align: middle;
    transition: 0.2s;
}

.blz-ranking-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Badges de Top (1, 2, 3) */
.blz-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-family: var(--font-title);
    font-weight: bold;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.05);
    color: #888;
}

.blz-rank-badge.rank-1 {
    background: linear-gradient(135deg, #f8b700, #c76700);
    color: #000;
    box-shadow: 0 0 15px rgba(248, 183, 0, 0.5);
    font-size: 18px;
}

.blz-rank-badge.rank-2 {
    background: linear-gradient(135deg, #e2e8f0, #94a3b8);
    color: #000;
    box-shadow: 0 0 15px rgba(226, 232, 240, 0.3);
}

.blz-rank-badge.rank-3 {
    background: linear-gradient(135deg, #d97706, #92400e);
    color: #fff;
    box-shadow: 0 0 15px rgba(217, 119, 6, 0.3);
}

/* Identidad (Avatar + Nombre) */
.blz-rank-identity {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rank-avatar {
    width: 45px;
    height: 45px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.rank-guild-icon {
    width: 45px;
    height: 45px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-muted);
}

.rank-name {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.rank-name:hover {
    color: var(--blz-blue-600);
}

.rank-name.rank-1 {
    color: var(--wow-gold-600);
}

/* Clases y Etiquetas */
.blz-class-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
}

.ranking-empty {
    text-align: center;
    padding: 60px !important;
    color: #666;
    font-size: 15px;
}

.ranking-empty i {
    font-size: 40px;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* ==================================================================== 
   FRENTE DE BATALLA - MISSION CARDS BLIZZARD
   ==================================================================== */
/* Efecto Fade In para cuando cambias de Tab */
#events-campaign-board {
    animation: fadeInTabs 0.3s ease-in-out;
}

@keyframes fadeInTabs {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Rediseño de las Misiones (Quest Log Style) */
.blz-event-card {
    display: flex;
    align-items: center;
    padding: 22px 25px;
    background: linear-gradient(135deg, rgba(16, 20, 25, 0.95), rgba(5, 7, 10, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-left: 4px solid #555;
    border-radius: 4px;
    gap: 20px;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

/* Aura mágica sutil a la derecha */
.blz-event-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* ESTADO 1: EN CURSO (Active) */
.blz-event-card.active {
    border-left-color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    border-left-width: 4px;
    background: linear-gradient(135deg, rgba(30, 10, 10, 0.95), rgba(5, 5, 5, 0.98));
    animation: eventPulseRed 2.5s infinite;
}

/* ESTADO 2: ABRIENDO (Opening) */
.blz-event-card.opening {
    border-left-color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.2);
    border-left-width: 4px;
    background: linear-gradient(135deg, rgba(30, 20, 5, 0.95), rgba(5, 5, 5, 0.98));
}

/* ESTADO 3: EN ESPERA (Upcoming) */
.blz-event-card.upcoming {
    opacity: 0.8;
    filter: grayscale(30%);
}

.blz-event-card:hover {
    transform: translateY(-3px);
    filter: grayscale(0%);
    opacity: 1;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
}

/* Contenedor del Icono (Rúnico) */
.ev-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 2;
}

.active .ev-icon-wrapper {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5), inset 0 0 10px rgba(239, 68, 68, 0.5);
}

.opening .ev-icon-wrapper {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.upcoming .ev-icon-wrapper {
    color: #888;
}

.ev-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.ev-name {
    margin: 0 0 6px 0;
    color: #fff;
    font-size: 17px;
    font-family: var(--font-title);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: 1px;
}

.ev-meta {
    color: #aaa;
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.ev-countdown {
    text-align: right;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.ev-timer {
    font-family: 'Cinzel Decorative', monospace;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}

.ev-timer.opening {
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.ev-timer.upcoming {
    color: #888;
}

.ev-live-text {
    color: #ef4444;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
    animation: flash 1s infinite alternate;
}

@keyframes eventPulseRed {
    0% {
        box-shadow: 0 10px 30px rgba(239, 68, 68, 0.15), inset 0 0 20px rgba(239, 68, 68, 0.05);
    }

    50% {
        box-shadow: 0 10px 40px rgba(239, 68, 68, 0.3), inset 0 0 30px rgba(239, 68, 68, 0.2);
    }

    100% {
        box-shadow: 0 10px 30px rgba(239, 68, 68, 0.15), inset 0 0 20px rgba(239, 68, 68, 0.05);
    }
}

@keyframes flash {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.6;
    }
}

.blz-armory-hero {
    position: relative;
    padding: 50px var(--blz-padding, 4%);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.hero-blur-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 50%, rgba(10, 13, 21, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.hero-profile-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 30px;
}

.hero-avatar-box {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background: #000;
    border: 2px solid rgba(255, 255, 255, 0.1);
    padding: 5px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.hero-avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.status-indicator-glow {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #000;
}

.status-indicator-glow.is-online {
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

.status-indicator-glow.is-offline {
    background: #6b7280;
}

.hero-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.identity-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.char-name {
    margin: 0;
    font-family: var(--font-title);
    font-size: 32px;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.char-class-sub {
    margin: 0;
    color: var(--wow-gold-600);
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status-text {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-status-text.is-online {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-status-text.is-offline {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.char-guild-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.02);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: fit-content;
}

.guild-name-text {
    font-size: 13px;
    color: #ccc;
}

.guild-name-text strong {
    color: #fff;
}

.blz-armory-hero {
    position: relative;
    padding: 50px 4%;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.hero-blur-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 50%, rgba(10, 13, 21, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.hero-profile-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 30px;
}

.hero-avatar-box {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background: #000;
    border: 2px solid rgba(255, 255, 255, 0.1);
    padding: 5px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.hero-avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.status-indicator-glow {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #000;
}

.status-indicator-glow.is-online {
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

.status-indicator-glow.is-offline {
    background: #6b7280;
}

.hero-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.identity-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.char-name {
    margin: 0;
    font-family: var(--font-title);
    font-size: 32px;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.char-class-sub {
    margin: 0;
    color: var(--wow-gold-600);
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status-text {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-status-text.is-online {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-status-text.is-offline {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.char-guild-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.02);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: fit-content;
}

.guild-name-text {
    font-size: 13px;
    color: #ccc;
}

.guild-name-text strong {
    color: #fff;
}

.blz-armory-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    margin-top: 40px;
    align-items: start;
}

.armory-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 25px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.panel-title {
    margin: 0 0 25px 0;
    font-family: var(--font-title);
    font-size: 18px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.panel-title i {
    color: var(--wow-gold-600);
    margin-right: 8px;
}

.inventory-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    background: rgba(0, 0, 0, 0.4);
    padding: 20px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    position: relative;
}

.eq-slot-box {
    position: relative;
    height: 95px;
    background: linear-gradient(135deg, rgba(20, 25, 35, 0.6), rgba(5, 8, 12, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
    cursor: pointer;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.eq-slot-box.is-normal {
    border-color: rgba(255, 255, 255, 0.15);
}

.eq-slot-box.is-leveled {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.15);
}

.eq-slot-box.is-excellent {
    border-color: rgba(16, 185, 129, 0.5);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(5, 8, 12, 0.8));
    box-shadow: inset 0 0 15px rgba(16, 185, 129, 0.15);
}

.eq-slot-box.is-ancient {
    border-color: rgba(168, 85, 247, 0.5);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(5, 8, 12, 0.8));
    box-shadow: inset 0 0 15px rgba(168, 85, 247, 0.15);
}

.eq-slot-box:hover {
    transform: scale(1.03);
    border-color: var(--wow-gold-600);
    box-shadow: 0 0 15px rgba(248, 183, 0, 0.15);
}

.item-render-img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8));
}

.slot-placeholder {
    text-align: center;
    color: #444;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.slot-placeholder i {
    font-size: 20px;
}

.slot-placeholder span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.blz-armory-tooltip {
    display: none;
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #43434b;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9);
    z-index: 999;
    text-align: left;
    pointer-events: none;
    box-sizing: border-box;
}

.eq-slot-box:hover .blz-armory-tooltip {
    display: block;
}

.tt-name {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.tt-blue {
    color: #60a5fa;
    font-size: 12px;
    margin-bottom: 2px;
}

.tt-green {
    color: #10b981;
    font-size: 12px;
    margin-bottom: 2px;
}

.tt-purple {
    color: #c084fc;
    font-size: 12px;
    margin-bottom: 2px;
}

.armory-privacy-lock {
    text-align: center;
    padding: 50px 20px;
    color: #555;
}

.armory-privacy-lock h4 {
    color: #ef4444;
    margin: 15px 0 5px 0;
    font-family: var(--font-title);
    font-size: 16px;
}

.armory-privacy-lock p {
    margin: 0;
    font-size: 13px;
    color: #888;
}

.stats-glass-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-glass-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    backdrop-filter: blur(5px);
}

.stat-glass-row.entry-highlight {
    border-left: 3px solid var(--wow-gold-600);
    background: linear-gradient(90deg, rgba(248, 183, 0, 0.03) 0%, transparent 100%);
}

.stat-glass-row.entry-highlight strong {
    color: var(--wow-gold-600);
    font-size: 16px;
}

.stat-glass-row.entry-killer {
    border-left: 3px solid #ef4444;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.03) 0%, transparent 100%);
}

.stat-glass-row.entry-killer strong {
    color: #ef4444;
    font-weight: bold;
}

.stat-divider {
    margin: 15px 0 5px 0;
    font-family: var(--font-title);
    font-size: 12px;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lbl-attribute {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: #aaa;
    font-size: 13px;
}

.val-attribute {
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

@media (max-width: 850px) {
    .blz-armory-grid {
        grid-template-columns: 1fr;
    }
}

/* Aseguramos que el contenido del editor visual no rompa la caja */
.reader-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
}

.reader-content iframe {
    max-width: 100% !important;
}

.reader-content table {
    width: 100% !important;
    border-collapse: collapse;
}

.reader-content a {
    color: var(--wow-gold-600);
    text-decoration: none;
}

.reader-content a:hover {
    text-decoration: underline;
}

/* ==================================================================== 
       DISEÑO ÉPICO NATIVO BLIZZARD (WOW STYLE)
       ==================================================================== */
.epic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.epic-card {
    background: linear-gradient(180deg, #11141d 0%, #080a0f 100%);
    border: 1px solid #2a2e38;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.epic-card:hover {
    transform: translateY(-5px);
    border-color: var(--wow-gold-600);
    box-shadow: 0 15px 40px rgba(248, 183, 0, 0.15), inset 0 0 20px rgba(248, 183, 0, 0.05);
}

.epic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--wow-gold-600), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.epic-card:hover::before {
    opacity: 1;
}

.epic-header {
    padding: 25px 25px 20px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    z-index: 2;
}

.epic-header.pvp {
    background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.12), transparent 70%);
}

.epic-header.guild {
    background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 70%);
}

.epic-icon-bg {
    position: absolute;
    right: -15px;
    top: -10px;
    font-size: 130px;
    opacity: 0.03;
    z-index: -1;
    transform: rotate(-15deg);
    color: #fff;
}

.epic-title {
    color: #fff;
    margin: 10px 0 0 0;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    font-family: var(--font-title);
}

.epic-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.epic-badge.pvp {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.epic-badge.guild {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.epic-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.epic-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #a3a3a3;
    font-size: 13px;
    line-height: 1.4;
}

.epic-stat i {
    color: var(--wow-gold-600);
    font-size: 18px;
    width: 24px;
    text-align: center;
    text-shadow: 0 0 10px rgba(248, 183, 0, 0.3);
}

.epic-stat strong {
    color: #e5e5e5;
    font-size: 15px;
    font-weight: 600;
}

.epic-prize-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(248, 183, 0, 0.15);
    border-radius: 4px;
    padding: 15px;
    margin-top: auto;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.epic-prize-title {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.epic-prize-value {
    color: #ffd700;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.epic-footer {
    padding: 15px 20px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.status-0 {
    background: rgba(255, 255, 255, 0.02);
    color: #888;
}

.status-1 {
    background: linear-gradient(90deg, rgba(248, 183, 0, 0.05), rgba(248, 183, 0, 0.15), rgba(248, 183, 0, 0.05));
    color: var(--wow-gold-600);
    border-top: 1px solid rgba(248, 183, 0, 0.2);
}

.status-2 {
    background: rgba(16, 185, 129, 0.05);
    color: #10b981;
    border-top: 1px solid rgba(16, 185, 129, 0.15);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.7;
    }
}

.animate-pulse {
    animation: pulse-glow 2s infinite;
}

/* Estilos del Cronograma */
.epic-dates-box {
    background: rgba(0, 0, 0, 0.2);
    border-left: 2px solid var(--wow-gold-600);
    padding: 10px 15px;
    margin-top: 5px;
    border-radius: 0 4px 4px 0;
}

.epic-dates-title {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.epic-date-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    padding-bottom: 4px;
}

.epic-date-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.epic-date-item span {
    color: #888;
    font-weight: normal;
}

/* Estilos del Grid de Premios */
.epic-prizes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.prize-item {
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 5px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.prize-item.gold {
    border-color: rgba(255, 215, 0, 0.2);
}

.prize-item.silver {
    border-color: rgba(192, 192, 192, 0.2);
}

.prize-item.bronze {
    border-color: rgba(205, 127, 50, 0.2);
}

.prize-item.gold i {
    color: #ffd700;
    font-size: 16px;
    margin-bottom: 5px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.prize-item.silver i {
    color: #c0c0c0;
    font-size: 16px;
    margin-bottom: 5px;
}

.prize-item.bronze i {
    color: #cd7f32;
    font-size: 16px;
    margin-bottom: 5px;
}

.prize-val {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}

.prize-lbl {
    font-size: 9px;
    color: #888;
    text-transform: uppercase;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

/* ==================================================================== 
   ARENA DE CAMPEONES - LIENZO ÉPICO BLIZZARD
   ==================================================================== */

/* --- 1. EL LIENZO Y LA NIEBLA DE GUERRA --- */
.arena-canvas {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 800px;
    background-image: url('/assets/default_assets/images/arena.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
    /* Efecto difuminado interno con el color de fondo del body */
    box-shadow: inset 0 0 150px 10px var(--bg-base), inset 0 0 20px 30px rgba(0, 0, 0, 0.8);
}

/* --- 2. EVOLUCIÓN ÉPICA DE LAS LETRAS POR RONDA --- */
.bracket-slot {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 120px;
    /* Ajusta según el ancho de la casilla en tu imagen */
    transition: all 0.3s ease;
    z-index: 10;
}

/* Octavos: Letra normal, color acero */
.bracket-slot.r16 {
    font-size: 13px;
    color: #b0b0b0;
    text-shadow: 1px 1px 3px #000, -1px -1px 3px #000;
}

/* Cuartos: Ligeramente más grande, brillo blanco sutil */
.bracket-slot.r8 {
    font-size: 14px;
    color: #e0e0e0;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 1px 1px 3px #000;
    font-weight: bold;
}

/* Semifinal: Más grande, brillo azul mágico / hielo */
.bracket-slot.r4 {
    font-size: 16px;
    color: #fff;
    text-shadow: 0 0 12px rgba(59, 130, 246, 0.8), 2px 2px 4px #000;
    font-weight: bold;
    width: 140px;
}

/* La Gran Final: Fuente épica (Cinzel), gigante, brillo dorado fuego */
.bracket-slot.r2 {
    font-size: 22px;
    color: var(--wow-gold-700);
    font-family: var(--font-title);
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(248, 183, 0, 0.9), 2px 2px 5px #000;
    font-weight: bold;
    width: 160px;
    /* Casilla más ancha para la final */
}

/* Colores de estado dinámicos */
.bracket-slot.winner {
    filter: brightness(1.3);
    color: var(--wow-gold-600) !important;
}

.bracket-slot.loser {
    filter: grayscale(1) opacity(0.4);
}

.bracket-slot.disqualified {
    color: var(--wow-red-700) !important;
    text-decoration: line-through;
    opacity: 0.6;
}

.bracket-slot .score {
    font-family: monospace;
    color: var(--wow-gold-600);
    margin-left: 5px;
}

/* --- 3. CABECERA ÉPICA --- */
.epic-tour-header {
    position: relative;
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 40px;
    background: linear-gradient(0deg, rgba(10, 13, 21, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%), url('/assets/emucms/images/bg-noise.png');
    border: 1px solid #2a2e38;
    border-bottom: 3px solid var(--wow-gold-600);
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.epic-tour-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(248, 183, 0, 0.15) 0%, transparent 70%);
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}

.epic-tour-header h2 {
    position: relative;
    z-index: 1;
    font-family: var(--font-title);
    font-size: 42px;
    color: #fff;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* --- 4. PANEL INFERIOR Y CARTA DEL CAMPEÓN --- */
.epic-bottom-panel {
    margin-top: -5px;
    /* Sube un poco para superponerse al lienzo */
    position: relative;
    z-index: 10;
    background: linear-gradient(180deg, #11141d 0%, #080a0f 100%);
    border: 1px solid #2a2e38;
    border-top: 2px solid var(--wow-gold-600);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9);
}

.champion-card {
    background: radial-gradient(circle at center, rgba(248, 183, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 100%);
    border: 1px solid var(--wow-gold-600);
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: inset 0 0 30px rgba(248, 183, 0, 0.1), 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: pulse-glow 3s infinite;
}

.champion-card h3 {
    color: var(--wow-gold-600);
    font-family: var(--font-title);
    font-size: 14px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.champion-card .champion-name {
    font-size: 48px;
    color: #fff;
    font-family: var(--font-title);
    text-shadow: 0 0 25px rgba(248, 183, 0, 0.8), 2px 2px 5px #000;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 2px;
}

/* Grid de Premios y Fechas */
.epic-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.epic-info-block h4 {
    font-family: var(--font-title);
    color: var(--wow-gold-600);
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
    margin-top: 0;
}

.epic-req-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #ccc;
    font-size: 14px;
    line-height: 1.8;
}

.epic-req-list i {
    color: var(--wow-gold-600);
    width: 20px;
}

/* Posiciones de las 4 Fechas (Escudos de la imagen) */
.date-slot {
    position: absolute;
    color: var(--wow-gold-600);
    font-size: 15px;
    font-family: monospace;
    text-shadow: 1px 1px 2px #000;
}

.date-r16 {
    top: 760px;
    left: 300px;
}

.date-r8 {
    top: 760px;
    left: 460px;
}

.date-r4 {
    top: 760px;
    left: 650px;
}

.date-r2 {
    top: 760px;
    left: 810px;
}

/* =========================================================
   INSTRUCCIONES DE POSICIONAMIENTO:
   Modifica el "top" y "left" en vivo con F12 en tu navegador.
   Cuando encajen en tu imagen arena.png, pégalos aquí.
   ========================================================= */
/* OCTAVOS */
.r16-m0-p1 {
    top: 110px;
    left: 80px;
}

.r16-m0-p2 {
    top: 180px;
    left: 80px;
}

.r16-m1-p1 {
    top: 255px;
    left: 80px;
}

.r16-m1-p2 {
    top: 325px;
    left: 80px;
}

.r16-m2-p1 {
    top: 400px;
    left: 80px;
}

.r16-m2-p2 {
    top: 470px;
    left: 80px;
}

.r16-m3-p1 {
    top: 555px;
    left: 80px;
}

.r16-m3-p2 {
    top: 625px;
    left: 80px;
}

.r16-m4-p1 {
    top: 110px;
    left: 1060px;
}

.r16-m4-p2 {
    top: 180px;
    left: 1060px;
}

.r16-m5-p1 {
    top: 255px;
    left: 1060px;
}

.r16-m5-p2 {
    top: 325px;
    left: 1060px;
}

.r16-m6-p1 {
    top: 400px;
    left: 1060px;
}

.r16-m6-p2 {
    top: 470px;
    left: 1060px;
}

.r16-m7-p1 {
    top: 555px;
    left: 1060px;
}

.r16-m7-p2 {
    top: 625px;
    left: 1060px;
}

/* CUARTOS */
.r8-m0-p1 {
    top: 220px;
    left: 325px;
}

.r8-m0-p2 {
    top: 245px;
    left: 325px;
}

.r8-m1-p1 {
    top: 510px;
    left: 325px;
}

.r8-m1-p2 {
    top: 533px;
    left: 325px;
}

.r8-m2-p1 {
    top: 220px;
    left: 835px;
}

.r8-m2-p2 {
    top: 245px;
    left: 835px;
}

.r8-m3-p1 {
    top: 510px;
    left: 835px;
}

.r8-m3-p2 {
    top: 533px;
    left: 835px;
}

/* SEMIFINALES */
.r4-m0-p1 {
    top: 378px;
    left: 420px;
}

.r4-m0-p2 {
    top: 400px;
    left: 420px;
}

.r4-m1-p1 {
    top: 378px;
    left: 740px;
}

.r4-m1-p2 {
    top: 400px;
    left: 740px;
}

/* LA GRAN FINAL */
.r2-m0-p1 {
    top: 350px;
    left: 580px;
}

.r2-m0-p2 {
    top: 375px;
    left: 580px;
}

/* ==================================================================== 
   MÓDULO: EL BASTIÓN DE LOREN (CASTLE SIEGE)
   ==================================================================== */
.cs-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* HERO BANNER - ESTANDARTE DEL SOBERANO */
.cs-hero {
    position: relative;
    background: url('/assets/emucms/images/bg-noise.png'), #0a0d15;
    border: 1px solid var(--accent);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    min-height: 200px;
}

.cs-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    z-index: 2;
}

.cs-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 50%, rgba(248, 183, 0, 0.15) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
}

.cs-sovereign-box {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 40px;
    position: relative;
    z-index: 3;
}

/* Emblema Canvas */
.cs-emblem-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    padding: 10px;
    background: #000;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cs-emblem-wrap.is-occupied {
    border-color: var(--accent);
    box-shadow: 0 0 25px rgba(248, 183, 0, 0.4);
}

.cs-emblem-wrap.is-empty {
    border-color: #333;
    filter: grayscale(100%);
}

.mu-guild-shield {
    border-radius: 4px;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.9));
}

/* Info del Rey */
.cs-king-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cs-badge-status {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 3px;
    display: inline-block;
    width: fit-content;
    letter-spacing: 1px;
}

.cs-badge-status.occupied {
    background: rgba(248, 183, 0, 0.15);
    color: var(--accent);
    border: 1px solid rgba(248, 183, 0, 0.3);
}

.cs-badge-status.empty {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    border: 1px solid #444;
}

.cs-king-name {
    margin: 10px 0 5px 0;
    font-family: 'Cinzel', serif, var(--font-title);
    font-size: 38px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    line-height: 1;
    text-transform: uppercase;
}

.cs-king-name.abandoned {
    color: #888;
    text-shadow: none;
}

.cs-alliance-name {
    color: #ccc;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.cs-alliance-name strong {
    color: var(--accent);
    font-size: 16px;
}

.cs-king-class {
    font-size: 12px;
    color: #aaa;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #222;
    display: inline-block;
    width: fit-content;
    margin-top: 5px;
}

/* Decoración Derecha (Corona/NPC) */
.cs-hero-decor {
    position: relative;
    z-index: 3;
    padding-right: 50px;
    opacity: 0.6;
}

.cs-hero-decor i {
    font-size: 100px;
    color: var(--accent);
    text-shadow: 0 0 30px rgba(248, 183, 0, 0.3);
}

.cs-hero-decor i.fa-ghost {
    color: #444;
    text-shadow: none;
}

/* ==================================================================== 
   FASE 3: RELOJ DE GUERRA & ARENA DE FACCIONES
   ==================================================================== */

/* --- LÍNEA DE TIEMPO (TIMELINE) --- */
.cs-timeline-wrapper {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 40px;
    text-align: center;
}

.cs-timeline-title {
    color: var(--wow-gold-600);
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: normal;
    margin: 0 0 10px 0;
}

.cs-timer-box {
    font-family: monospace;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    margin-bottom: 40px;
}

.cs-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.cs-timeline::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 5%;
    width: 90%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.cs-time-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 20%;
    gap: 15px;
}

.cs-node-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #111;
    border: 2px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #666;
    transition: 0.3s;
}

.cs-node-name {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Fase Activa (Fuego y Sangre) */
.cs-time-node.active .cs-node-dot {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, #111 100%);
    border-color: #ef4444;
    color: #fff;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.8), inset 0 0 10px rgba(239, 68, 68, 0.5);
    animation: csPulseBlood 2s infinite;
}

.cs-time-node.active .cs-node-name {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

@keyframes csPulseBlood {
    0% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    }

    50% {
        box-shadow: 0 0 25px rgba(239, 68, 68, 1);
    }

    100% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    }
}

/* Fases Pasadas */
.cs-time-node.passed .cs-node-dot {
    background: var(--wow-gold-600);
    border-color: var(--wow-gold-600);
    color: #000;
    box-shadow: 0 0 10px rgba(248, 183, 0, 0.4);
}

.cs-time-node.passed .cs-node-name {
    color: #ccc;
}

/* --- ARENA DE FACCIONES --- */
.cs-arena-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.cs-arena-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Lado Defensor */
.cs-defender-side {
    width: 40%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.cs-def-shield {
    width: 140px;
    height: 140px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #3b82f6;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3), inset 0 0 20px rgba(59, 130, 246, 0.2);
}

.cs-def-shield.empty {
    border-color: #555;
    box-shadow: none;
}

.cs-def-shield canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.9));
}

.cs-def-title {
    font-size: 12px;
    color: #3b82f6;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
}

.cs-def-name {
    font-family: var(--font-title);
    font-size: 28px;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

/* VS Badge Central */
.cs-vs-badge {
    width: 10%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.cs-vs-circle {
    width: 60px;
    height: 60px;
    background: #000;
    border: 2px solid var(--text-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

/* Lado Atacante */
.cs-attacker-side {
    width: 40%;
    position: relative;
    z-index: 2;
}

.cs-atk-title {
    text-align: center;
    font-size: 12px;
    color: #ef4444;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.cs-atk-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cs-atk-card {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    padding: 10px 15px;
    transition: 0.3s;
}

.cs-atk-card:hover {
    transform: translateX(-5px);
    border-color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.cs-atk-mark {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: #000;
    padding: 2px;
    margin-right: 15px;
}

.cs-atk-mark canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.cs-atk-info {
    flex-grow: 1;
}

.cs-atk-name {
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
}

.cs-atk-signs {
    display: block;
    color: #aaa;
    font-size: 11px;
    margin-top: 3px;
}

.cs-atk-signs strong {
    color: var(--wow-gold-600);
}

.cs-atk-empty {
    text-align: center;
    color: #666;
    font-size: 13px;
    font-style: italic;
    padding: 30px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border: 1px dashed #333;
}

@media (max-width: 900px) {
    .cs-arena-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .cs-arena-wrapper::before {
        display: none;
    }

    .cs-defender-side,
    .cs-attacker-side {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .cs-time-node {
        width: auto;
        flex: 1;
    }

    .cs-node-name {
        display: none;
    }
}

/* ==================================================================== 
   FASE 4: TESORERÍA Y BESTIARIO (LAND OF TRIALS)
   ==================================================================== */

/* --- TESORERÍA (ECONOMÍA) --- */
.cs-treasury-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    margin-bottom: 40px;
}

.cs-treasure-box {
    background: radial-gradient(circle at top right, rgba(248, 183, 0, 0.15) 0%, rgba(0, 0, 0, 0.8) 80%);
    border: 1px solid var(--wow-gold-600);
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: inset 0 0 30px rgba(248, 183, 0, 0.1), 0 15px 30px rgba(0, 0, 0, 0.5);
}

.cs-treasure-box i {
    font-size: 50px;
    color: var(--wow-gold-600);
    margin-bottom: 15px;
    filter: drop-shadow(0 0 15px rgba(248, 183, 0, 0.5));
}

.cs-treasure-title {
    color: #ccc;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 5px;
}

.cs-treasure-amount {
    color: #fff;
    font-family: var(--font-title);
    font-size: 36px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.cs-treasure-amount span {
    color: var(--wow-gold-600);
    font-size: 16px;
}

.cs-taxes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cs-tax-card {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.cs-tax-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.cs-tax-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.02);
}

.cs-tax-card:hover::before {
    background: var(--wow-gold-600);
    box-shadow: 0 0 15px var(--wow-gold-600);
}

.cs-tax-icon {
    font-size: 30px;
    color: #666;
    margin-bottom: 15px;
    transition: 0.3s;
}

.cs-tax-card:hover .cs-tax-icon {
    color: #fff;
}

.cs-tax-name {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.cs-tax-rate {
    display: block;
    color: #10b981;
    font-family: var(--font-title);
    font-size: 28px;
}

/* --- BESTIARIO (LAND OF TRIALS) --- */
.cs-lot-wrapper {
    background: url('/assets/emucms/images/bg-land-of-trials.png'), linear-gradient(180deg, #11141d 0%, #05070a 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 40px;
}

.cs-lot-header {
    text-align: center;
    margin-bottom: 40px;
}

.cs-lot-header h3 {
    color: #fff;
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: normal;
    margin: 0 0 10px 0;
}

.cs-lot-header p {
    color: #aaa;
    font-size: 14px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.cs-monster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 3px;
}

.cs-monster-card {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.cs-monster-card:hover {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(239, 68, 68, 0.1);
    transform: translateY(-5px);
    z-index: 2;
}

/* Ajustes para las Imágenes PNG de los Monstruos */
.cs-monster-img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.cs-monster-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.9));
    transition: 0.3s;
}

.cs-monster-card:hover .cs-monster-img img {
    transform: scale(1.1);
    filter: drop-shadow(0 10px 20px rgba(239, 68, 68, 0.5));
}

.cs-monster-card.boss:hover .cs-monster-img img {
    filter: drop-shadow(0 10px 20px rgba(248, 183, 0, 0.6));
}

.cs-monster-name {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

.cs-monster-card.boss .cs-monster-name {
    color: var(--wow-gold-600);
    font-family: var(--font-title);
    font-size: 20px;
}

.cs-monster-lvl {
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 15px;
    display: block;
    font-weight: bold;
}

.cs-monster-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 4px;
}

.cs-m-stat {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    padding-bottom: 4px;
}

.cs-m-stat:last-child {
    border: none;
    padding: 0;
}

.cs-m-stat span {
    color: #888;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
}

.cs-m-stat strong {
    color: #d1d1d1;
    font-family: monospace;
    font-size: 13px;
}

.cs-monster-card.boss .cs-m-stat strong {
    color: #ef4444;
}

/* ==================================================================== 
   FASE 5: CÓDICE DEL ASEDIO (GUÍAS Y HABILIDADES)
   ==================================================================== */
.cs-codex-wrapper {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Pestañas de Navegación */
.cs-tab-nav {
    display: flex;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cs-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
}

.cs-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.02);
}

.cs-tab-btn.active {
    color: var(--wow-gold-600);
    background: rgba(248, 183, 0, 0.05);
}

.cs-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--wow-gold-600);
    box-shadow: 0 0 15px var(--wow-gold-600);
}

/* Contenedores de Pestañas */
.cs-tab-content {
    padding: 40px;
}

.cs-tab-pane {
    display: none;
    animation: fadeInTabs 0.4s ease;
}

.cs-tab-pane.active {
    display: block;
}

/* Cuadrículas Internas (Habilidades y Pociones) */
.cs-skill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cs-skill-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 6px;
    transition: 0.3s;
}

.cs-skill-card:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(59, 130, 246, 0.3);
}

.cs-skill-icon {
    width: 50px;
    height: 50px;
    background: #111;
    border: 1px solid #333;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--wow-gold-600);
    flex-shrink: 0;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.cs-skill-info {
    flex-grow: 1;
}

.cs-s-name {
    margin: 0 0 5px 0;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

.cs-s-class {
    display: block;
    color: var(--blz-blue-500);
    font-size: 11px;
    margin-bottom: 10px;
    font-weight: bold;
}

.cs-s-req {
    display: inline-block;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 10px;
}

.cs-s-stats {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #aaa;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
}

.cs-s-stats strong {
    color: #fff;
    font-family: monospace;
    font-size: 13px;
}

/* Explicaciones de Texto (Pociones/Reglas) */
.cs-text-block {
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--wow-gold-600);
    padding: 20px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 20px;
}

.cs-text-block h4 {
    margin: 0 0 10px 0;
    color: var(--wow-gold-600);
    font-size: 16px;
    text-transform: uppercase;
}

.cs-text-block p {
    margin: 0;
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
}

.cs-text-block ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
    color: #ccc;
    font-size: 13px;
    line-height: 1.6;
}

.cs-text-block li strong {
    color: #fff;
}

/* ==================================================================== 
   FASE 6: RESPONSIVIDAD Y OPTIMIZACIÓN MÓVIL
   ==================================================================== */
@media (max-width: 1024px) {
    .cs-treasury-wrapper {
        grid-template-columns: 1fr;
    }

    .cs-taxes-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cs-skill-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cs-hero {
        flex-direction: column;
        text-align: center;
    }

    .cs-sovereign-box {
        flex-direction: column;
        padding: 30px;
    }

    .cs-hero-decor {
        display: none;
    }

    .cs-king-info {
        align-items: center;
    }

    .cs-badge-status {
        margin: 0 auto;
    }

    .cs-taxes-grid {
        grid-template-columns: 1fr;
    }

    .cs-tab-nav {
        flex-direction: column;
    }

    .cs-tab-btn {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .cs-tab-btn.active::after {
        width: 3px;
        height: 100%;
        top: 0;
        left: 0;
        bottom: auto;
    }

    .cs-tab-content {
        padding: 20px;
    }
}

/* ==================================================================== 
   MÓDULO: WEBTV FLOTANTE (ARRIBA A LA IZQUIERDA)
   ==================================================================== */
.webtv-floating-widget {
    position: fixed;
    top: 90px;
    left: 20px;
    z-index: 9990;
    width: 320px;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(239, 68, 68, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
    animation: fadeInBlz 0.5s ease-out forwards;
}

.webtv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(30, 10, 10, 0.95), rgba(5, 5, 5, 0.98));
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.webtv-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: 0 0 8px #ef4444;
    animation: pulseRed 1.5s infinite;
}

.webtv-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.webtv-controls button,
.webtv-controls a {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
    outline: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.webtv-controls button:hover,
.webtv-controls a:hover {
    color: #fff;
    transform: scale(1.1);
}

.webtv-body {
    position: relative;
    width: 100%;
    background: #000;
}

/* Sobrescribiendo el color base de Video.js para que combine con Blizzard */
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.video-js .vjs-play-progress {
    background-color: #ef4444 !important;
}

/* Responsive para Móviles: Pasarlo abajo al centro para no tapar el menú */
@media(max-width: 768px) {
    .webtv-floating-widget {
        top: auto;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        z-index: 9999;
    }
}

.casino-header {
    text-align: center;
    padding: 50px 20px;
    background: radial-gradient(circle at 50% 50%, rgba(199, 103, 0, 0.15) 0%, rgba(0, 0, 0, 0.8) 100%);
    border-bottom: 2px solid var(--wow-gold-600);
    margin-bottom: 40px;
}

.casino-header h1 {
    font-family: var(--font-title);
    color: var(--wow-gold-500);
    font-size: 3rem;
    text-shadow: 0 0 20px rgba(199, 103, 0, 0.8);
    margin-bottom: 10px;
}

.casino-header p {
    color: var(--text-muted);
    font-size: 1.2rem;
}

.casino-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 80px 20px;
}

.casino-card {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(15, 15, 15, 0.95) 100%);
    border: 1px solid rgba(199, 103, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.casino-card:hover {
    transform: translateY(-15px);
    border-color: var(--wow-gold-600);
    box-shadow: 0 20px 50px rgba(199, 103, 0, 0.4);
}

.casino-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: radial-gradient(circle at center, rgba(199, 103, 0, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
}

.casino-card:hover::before {
    opacity: 1;
}

.casino-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: skewX(-25deg);
    transition: 0.6s ease;
}

.casino-card:hover::after {
    left: 200%;
}

.casino-card-icon {
    padding: 50px 0 20px 0;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.casino-card-icon img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s;
    filter: drop-shadow(0 0 15px rgba(248, 183, 0, 0.3));
}

.casino-card:hover .casino-card-icon img {
    transform: scale(1.15) translateY(-5px);
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 10px var(--wow-gold-500));
}

.casino-card-title {
    font-family: var(--font-title);
    color: #fff;
    font-size: 1.8rem;
    margin: 0 0 15px 0;
    position: relative;
    z-index: 2;
    letter-spacing: 1px;
}

.casino-card-desc {
    color: #aaa;
    font-size: 0.95rem;
    padding: 0 30px 30px 30px;
    line-height: 1.6;
    flex-grow: 1;
    position: relative;
    z-index: 2;
}

.casino-limits {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-top: 1px solid rgba(199, 103, 0, 0.2);
    color: var(--wow-gold-500);
    font-size: 0.9rem;
    font-weight: bold;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.casino-card:hover .casino-limits {
    background: rgba(199, 103, 0, 0.1);
    border-top-color: rgba(199, 103, 0, 0.5);
}

.disabled-card {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.disabled-card:hover {
    transform: none;
    border-color: rgba(199, 103, 0, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.disabled-card:hover .casino-card-icon img {
    transform: none;
    filter: grayscale(100%);
}

.badge-soon {
    position: absolute;
    top: 25px;
    right: -35px;
    background: #b91c1c;
    color: white;
    padding: 5px 40px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(45deg);
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

.casino-game-header {
    text-align: center;
    padding: 30px;
    border-bottom: 1px solid rgba(199, 103, 0, 0.3);
    margin-bottom: 30px;
}

.casino-game-header h2 {
    font-family: var(--font-title);
    color: var(--wow-gold-500);
    margin: 0 0 10px 0;
    font-size: 2.5rem;
}

.casino-game-header p {
    color: var(--text-muted);
    margin: 0;
}

.casino-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
    padding: 0 20px;
}

/* ROULETTE WHEEL 3D */
.roulette-container {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #5a3a1f, #2a1a0f);
    border: 15px solid #3e2211;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.roulette-wheel {
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background: #000;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    transition: transform 5s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
}

.wheel-slot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 10%;
    height: 50%;
    margin-left: -5%;
    transform-origin: bottom center;
    display: flex;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.wheel-num {
    position: absolute;
    top: 10px;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
}

.roulette-center {
    position: absolute;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, #facc15, #ca8a04);
    border-radius: 50%;
    border: 3px solid #854d0e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: 3rem;
    color: #000;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}

.roulette-pointer {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 25px solid #fff;
    z-index: 3;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
}

/* CASINO BOARD (FELT) */
.roulette-board {
    background: #0b5c22;
    border: 15px solid #3e2211;
    border-radius: 20px;
    padding: 30px;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8), 0 20px 40px rgba(0, 0, 0, 0.6);
    user-select: none;
    overflow-x: auto;
}

.board-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    background: transparent;
}

.board-main {
    display: flex;
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.zero-zone {
    flex: 0 0 60px;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.numbers-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.columns-grid {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
}

.board-bottom {
    display: flex;
    flex-direction: column;
    margin-left: 60px;
    /* offset for zero */
    margin-right: 80px;
    /* offset for columns */
}

.dozens {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-top: none;
}

.halves {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-top: none;
}

/* ZONES */
.bet-zone {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.2s;
    min-height: 50px;
}

.bet-zone:hover {
    background: rgba(255, 255, 255, 0.2);
}

.bet-zone.red {
    background: #e11d48;
}

.bet-zone.black {
    background: #1f2937;
}

.bet-zone.green {
    background: #16a34a;
}

.red-diamond {
    width: 30px;
    height: 30px;
    background: #e11d48;
    transform: rotate(45deg);
}

.black-diamond {
    width: 30px;
    height: 30px;
    background: #1f2937;
    transform: rotate(45deg);
}

/* CHIPS */
.chip-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.placed-chip {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px dashed #fff;
    color: #000;
    font-weight: bold;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
    margin-top: -20px;
    /* stack effect */
}

/* CHIP SELECTOR */
.controls {
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.chip-selector {
    display: flex;
    gap: 15px;
}

.chip-option {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px dashed rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    color: #000;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.chip-option.selected {
    transform: scale(1.2);
    border-color: #fff;
}

.chip-1 {
    background: radial-gradient(circle, #cbd5e1, #94a3b8);
}

.chip-10 {
    background: radial-gradient(circle, #60a5fa, #2563eb);
}

.chip-50 {
    background: radial-gradient(circle, #f87171, #dc2626);
}

.chip-100 {
    background: radial-gradient(circle, #34d399, #059669);
}

.chip-500 {
    background: radial-gradient(circle, #c084fc, #7e22ce);
}

.chip-1000 {
    background: radial-gradient(circle, #facc15, #ca8a04);
}

.play-btn {
    padding: 15px 40px;
    background: linear-gradient(to bottom, var(--wow-gold-600), var(--wow-gold-500));
    color: #000;
    font-weight: bold;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.clear-btn {
    padding: 15px 20px;
    background: #e11d48;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.bet-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    margin-bottom: 20px;
}

/* --- BIG SIX STYLES --- */
.bigsix-container {
    flex: 1;
    min-width: 300px;
    background: transparent;
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bigsix-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 10px solid var(--wow-gold-600);
    box-shadow: 0 0 50px rgba(199, 103, 0, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.8);
    transition: transform 6s cubic-bezier(0.1, 0.7, 0.1, 1);
    position: relative;
    overflow: hidden;
}

.bigsix-pointer {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 40px solid #fff;
    z-index: 3;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.8));
}

.bigsix-center {
    position: absolute;
    width: 20%;
    height: 20%;
    background: var(--wow-gold-600);
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-family: var(--font-title);
    font-size: 2rem;
    color: #000;
    font-weight: bold;
}

.bigsix-slot {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    font-family: var(--font-title);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

.bigsix-slot span {
    display: inline-block;
    padding-top: 25px;
}

.bet-panel {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    margin: 0 auto;
    background: var(--bg-panel-1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 25px;
}

.bet-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bet-info div {
    text-align: center;
}

.bet-info span {
    display: block;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.bet-info strong {
    color: var(--wow-gold-500);
    font-size: 1.2rem;
    font-family: var(--font-title);
}

.bet-input {
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(199, 103, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    outline: none;
    margin-bottom: 20px;
}

.bigsix-container {
    flex: 1.5;
    max-width: 600px;
    margin: 0 auto;
}

/* --- DADOS DE NORIA STYLES --- */
.dados-board {
    background: url('/assets/default_assets/images/board-bg.jpg') center/cover;
    background-color: #0b2211;
    border-radius: 10px;
    border: 2px solid var(--wow-gold-600);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(199, 103, 0, 0.3);
    padding: 40px 20px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.dice-scene {
    width: 100%;
    height: 150px;
    perspective: 800px;
    display: flex;
    justify-content: center;
    gap: 40px;
    align-items: center;
    margin-bottom: 20px;
}

.dice {
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 3s cubic-bezier(0.1, 0.7, 0.1, 1);
    transform: rotateX(-15deg) rotateY(15deg);
}

.dice .face {
    position: absolute;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at center, #fff 0%, #e5e5e5 100%);
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.5);
    display: flex;
}

.dice .face.front {
    transform: translateZ(40px);
}

.dice .face.back {
    transform: rotateY(180deg) translateZ(40px);
}

.dice .face.right {
    transform: rotateY(90deg) translateZ(40px);
}

.dice .face.left {
    transform: rotateY(-90deg) translateZ(40px);
}

.dice .face.top {
    transform: rotateX(90deg) translateZ(40px);
}

.dice .face.bottom {
    transform: rotateX(-90deg) translateZ(40px);
}

.dot-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 10px;
    box-sizing: border-box;
}

.dot {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 3px 3px, #444, #000);
    box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    align-self: center;
    justify-self: center;
}

/* Face specific dot placements */
.face-1 .dot:nth-child(1) {
    grid-column: 2;
    grid-row: 2;
}

.face-2 .dot:nth-child(1) {
    grid-column: 3;
    grid-row: 1;
}

.face-2 .dot:nth-child(2) {
    grid-column: 1;
    grid-row: 3;
}

.face-3 .dot:nth-child(1) {
    grid-column: 3;
    grid-row: 1;
}

.face-3 .dot:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
}

.face-3 .dot:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

.face-4 .dot:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.face-4 .dot:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}

.face-4 .dot:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

.face-4 .dot:nth-child(4) {
    grid-column: 3;
    grid-row: 3;
}

.face-5 .dot:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.face-5 .dot:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}

.face-5 .dot:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.face-5 .dot:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}

.face-5 .dot:nth-child(5) {
    grid-column: 3;
    grid-row: 3;
}

.face-6 .dot:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.face-6 .dot:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.face-6 .dot:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

.face-6 .dot:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
}

.face-6 .dot:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}

.face-6 .dot:nth-child(6) {
    grid-column: 3;
    grid-row: 3;
}

.dados-bet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .dados-bet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bet-card {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(199, 103, 0, 0.3);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    color: var(--text-muted);
}

.bet-card.selected,
.bet-card:hover {
    background: rgba(199, 103, 0, 0.2);
    border-color: var(--wow-gold-500);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.bet-card h4 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    font-family: var(--font-title);
    color: var(--wow-gold-500);
}

.bet-card span {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.bet-card .payout-badge {
    display: inline-block;
    background: #e11d48;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* --- BLACKJACK DEL TABERNERO STYLES --- */
.blackjack-board {
    background: url('/assets/default_assets/images/board-bg.jpg') center/cover;
    background-color: #1a472a;
    border-radius: 10px;
    border: 3px solid #8b5a2b;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.9), 0 0 20px rgba(139, 90, 43, 0.3);
    padding: 30px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bj-area-title {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.bj-hand-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 140px;
    position: relative;
}

/* CSS PLAYING CARDS */
.playing-card {
    width: 100px;
    height: 140px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), left 0.5s;
    transform-origin: center center;
}

.playing-card.card-red {
    color: #d32f2f;
}

.playing-card.card-black {
    color: #000;
}

.playing-card .card-value-top {
    text-align: left;
    line-height: 1;
}

.playing-card .card-suit-center {
    text-align: center;
    font-size: 2.5rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playing-card .card-value-bottom {
    text-align: right;
    line-height: 1;
    transform: rotate(180deg);
}

.playing-card.card-back {
    background: repeating-linear-gradient(45deg,
            #8b0000,
            #8b0000 10px,
            #b22222 10px,
            #b22222 20px);
    border: 3px solid #fff;
}

.playing-card.card-back .card-value-top,
.playing-card.card-back .card-suit-center,
.playing-card.card-back .card-value-bottom {
    display: none;
}

.bj-score {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--wow-gold-500);
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid var(--wow-gold-600);
    font-weight: bold;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.bj-score.visible {
    opacity: 1;
}

.bj-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 20px 40px;
    border: 2px solid var(--wow-gold-500);
    border-radius: 10px;
    font-size: 2rem;
    font-family: var(--font-title);
    text-shadow: 0 0 10px var(--wow-gold-600);
    z-index: 10;
    text-align: center;
    display: none;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}
/* --- TRAGAMONEDAS GOBLIN STYLES --- */
.slots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px auto;
    position: relative;
    max-width: 800px;
}

.slots-machine {
    background: linear-gradient(180deg, #3a2b18 0%, #1a120a 100%);
    border: 8px solid #b38b36;
    border-radius: 30px 30px 10px 10px;
    box-shadow: 
        inset 0 0 50px rgba(0,0,0,0.8), 
        0 20px 40px rgba(0,0,0,0.8),
        0 0 10px #b38b36;
    padding: 30px;
    position: relative;
    width: 600px;
}

.slots-header {
    text-align: center;
    margin-bottom: 20px;
    background: #000;
    border: 3px solid #b38b36;
    border-radius: 10px;
    padding: 15px;
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.2);
}
.slots-header h2 {
    margin: 0;
    color: var(--wow-gold-500);
    font-family: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 10px var(--wow-gold-600);
}

.slots-reels-window {
    background: #000;
    border: 5px solid #222;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-shadow: inset 0 0 30px rgba(0,0,0,1);
    position: relative;
    overflow: hidden;
}
/* Grid lines over the reels */
.slots-reels-window::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
}

.slot-reel {
    width: 130px;
    height: 150px;
    background: #fff;
    border-radius: 8px;
    border: 2px solid #555;
    overflow: hidden;
    position: relative;
}

.slot-strip {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Transition is added dynamically via JS */
}

.slot-symbol {
    width: 100%;
    height: 150px; /* same as reel height */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    background: radial-gradient(circle, #f0f0f0, #ccc);
    border-bottom: 1px solid #aaa;
    box-sizing: border-box;
}
.slot-symbol img {
    max-width: 80%;
    max-height: 80%;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
}

/* LEVER */
.slot-lever-base {
    width: 60px;
    height: 120px;
    background: linear-gradient(90deg, #333, #555, #222);
    border-radius: 0 15px 15px 0;
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    border: 3px solid #111;
    border-left: none;
    display: flex;
    align-items: center;
    box-shadow: 10px 0 20px rgba(0,0,0,0.5);
}

.slot-lever-stick {
    width: 15px;
    height: 150px;
    background: linear-gradient(90deg, #ccc, #fff, #999);
    position: absolute;
    bottom: 50%;
    left: 20px;
    transform-origin: bottom center;
    border-radius: 10px 10px 0 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.slot-lever-stick::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -17px;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 15px 15px, #ff4d4d, #990000);
    border-radius: 50%;
    box-shadow: inset -5px -5px 10px rgba(0,0,0,0.5), 0 5px 10px rgba(0,0,0,0.5);
}

.slot-lever-stick.pulled {
    transform: rotateX(180deg) scaleY(0.8);
}

/* Animations & Results */
.slot-result-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-size: 3rem;
    font-family: var(--font-title);
    text-shadow: 0 0 20px #000;
    text-align: center;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
}

.slot-result-overlay.show {
    opacity: 1;
    animation: popScale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.win-text { color: var(--wow-gold-500); }
.lose-text { color: #ff3333; }

.slots-jackpot-lights {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
.jackpot-light {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #333;
    border: 2px solid #111;
    box-shadow: inset 0 0 5px #000;
    transition: 0.3s;
}
.jackpot-light.active-win {
    background: #4caf50;
    box-shadow: 0 0 20px #4caf50, inset 0 0 10px #fff;
}
.jackpot-light.active-lose {
    background: #f44336;
    box-shadow: 0 0 20px #f44336, inset 0 0 10px #fff;
}
/* --- SLOTS DASHBOARD REALISTA --- */
.slots-dashboard {
    background: linear-gradient(180deg, #444 0%, #1a1a1a 100%);
    border-top: 3px solid #666;
    border-bottom: 5px solid #0a0a0a;
    border-left: 3px solid #333;
    border-right: 3px solid #333;
    border-radius: 10px;
    padding: 20px 15px;
    margin-top: 35px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    box-shadow: inset 0 15px 15px rgba(0,0,0,0.6), 0 15px 30px rgba(0,0,0,0.9);
    transform: perspective(600px) rotateX(15deg);
    position: relative;
    z-index: 2;
}

.dashboard-display, .dashboard-input-group, .dashboard-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #000;
    border: 3px solid #222;
    border-top: 3px solid #050505;
    border-bottom: 3px solid #333;
    padding: 10px;
    border-radius: 8px;
    min-width: 140px;
    box-shadow: inset 0 0 15px rgba(0,0,0,1);
}

.display-label {
    color: #ff3333;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-shadow: 0 0 5px #ff0000;
    text-transform: uppercase;
}

.display-value {
    color: #00ffcc;
    font-size: 1.6rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc;
}

.dashboard-input {
    background: transparent;
    color: #ffcc00;
    font-size: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    border: none;
    text-align: center;
    width: 100%;
    text-shadow: 0 0 10px #ffcc00;
    outline: none;
}
.dashboard-input:focus {
    color: #fff;
    text-shadow: 0 0 10px #fff;
}

.slots-payouts-info {
    text-align: center;
    color: var(--wow-gold-500);
    font-size: 0.8rem;
    margin-top: 15px;
    background: rgba(0,0,0,0.8);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #b38b36;
    box-shadow: inset 0 0 10px rgba(179, 139, 54, 0.2);
}
/* --- VIDEO POKER (Arcade CRT Style) --- */
.videopoker-machine {
    background: #111;
    border: 10px solid #2a2a2a;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,1);
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* CRT Screen */
.videopoker-crt {
    background: #000033;
    border: 20px solid #1a1a1a;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    padding: 20px;
    min-height: 400px;
    box-shadow: inset 0 0 30px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.crt-scanlines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 6px 100%;
    z-index: 10;
    pointer-events: none;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
}

.vp-paytable {
    display: flex;
    flex-direction: column;
    z-index: 5;
    background: rgba(0,0,50,0.5);
    border: 2px solid #0055ff;
    border-radius: 8px;
    padding: 10px;
}

.vp-row {
    display: flex;
    justify-content: space-between;
    color: #00ccff;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 1rem;
    padding: 2px 10px;
    border-radius: 4px;
    text-shadow: 0 0 5px #0055ff;
}

.vp-row-active {
    background: #ffcc00;
    color: #000;
    text-shadow: none;
    box-shadow: 0 0 15px #ffcc00;
}

.vp-message-box {
    text-align: center;
    color: #ff3333;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    font-weight: bold;
    margin: 20px 0;
    text-shadow: 0 0 10px #ff3333;
    z-index: 5;
    animation: vp-blink 1s infinite alternate;
}

@keyframes vp-blink {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

.vp-cards-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    z-index: 5;
}

.vp-card-slot {
    width: 100px;
    height: 140px;
    position: relative;
    cursor: pointer;
}

.vp-card-placeholder {
    width: 100%;
    height: 100%;
    border: 2px dashed #0055ff;
    border-radius: 8px;
    background: rgba(0,0,255,0.1);
}

.vp-hold-indicator {
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #ffcc00;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 1.2rem;
    display: none;
    text-shadow: 0 0 10px #ffcc00;
}

/* 3D Dashboard */
.videopoker-dashboard {
    background: linear-gradient(180deg, #444 0%, #1a1a1a 100%);
    border-top: 3px solid #666;
    border-bottom: 5px solid #0a0a0a;
    border-left: 3px solid #333;
    border-right: 3px solid #333;
    border-radius: 10px;
    padding: 20px;
    margin-top: -10px;
    transform: perspective(600px) rotateX(20deg);
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 30px rgba(0,0,0,0.8);
}

.vp-dash-top {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.vp-dash-display {
    background: #000;
    border: 3px solid #222;
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,1);
}

.vp-dash-label {
    display: block;
    color: #ff3333;
    font-size: 0.8rem;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}

.vp-dash-val {
    color: #00ffcc;
    font-size: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-shadow: 0 0 10px #00ffcc;
}

.vp-input, .vp-select {
    background: transparent;
    border: none;
    color: #ffcc00;
    font-size: 1.2rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-align: center;
    outline: none;
    text-shadow: 0 0 10px #ffcc00;
}

.vp-dash-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.vp-btn {
    background: linear-gradient(180deg, #dd0000 0%, #880000 100%);
    border: 2px solid #ff3333;
    border-bottom: 6px solid #440000;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 10px 20px;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    transition: all 0.1s;
    font-family: 'Courier New', Courier, monospace;
}
.vp-btn:active {
    transform: translateY(4px);
    border-bottom: 2px solid #440000;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.vp-dash-action {
    text-align: center;
}

.vp-btn-deal {
    background: linear-gradient(180deg, #00dd00 0%, #008800 100%);
    border: 2px solid #33ff33;
    border-bottom: 8px solid #004400;
    border-radius: 15px;
    color: #fff;
    font-weight: bold;
    font-size: 2rem;
    padding: 15px 50px;
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(0,0,0,0.5);
    transition: all 0.1s;
    font-family: 'Courier New', Courier, monospace;
}
.vp-btn-deal:active {
    transform: translateY(6px);
    border-bottom: 2px solid #004400;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.vp-btn-deal:disabled {
    background: #555;
    border-color: #777;
    border-bottom-color: #333;
    cursor: not-allowed;
}
/* --- DUELO DE ELFAS (BACCARAT) --- */
.baccarat-table {
    background: #4a2118; /* Borde madera */
    padding: 20px;
    border-radius: 150px; /* Mesa ovalada */
    box-shadow: 0 30px 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,1);
    position: relative;
    border: 15px solid #2a110a;
}

.table-felt {
    background: radial-gradient(circle, #008844 0%, #004422 100%);
    border-radius: 130px;
    padding: 30px 50px;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
    position: relative;
}

.table-logo {
    text-align: center;
    color: rgba(255, 215, 0, 0.5);
    margin-bottom: 20px;
}
.table-logo h2 {
    font-size: 2.5rem;
    letter-spacing: 5px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.table-logo p {
    font-size: 0.9rem;
    margin: 5px 0 0 0;
    font-weight: bold;
}

.baccarat-cards-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    min-height: 200px;
}

.hand-zone {
    width: 350px;
    border: 2px dashed rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.1);
}

.hand-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    margin-bottom: 10px;
}

.hand-score {
    background: rgba(0,0,0,0.6);
    color: #ffd700;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 5px 20px;
    border-radius: 20px;
    border: 1px solid #ffd700;
    margin-bottom: 20px;
    min-width: 60px;
    text-align: center;
}

.cards-display {
    display: flex;
    justify-content: center;
    gap: -30px; /* Overlap cards slightly */
}
.cards-display .bj-card {
    margin-left: -20px; /* Negative margin to stack them */
    transform: scale(0.9);
}
.cards-display .bj-card:first-child {
    margin-left: 0;
}

.vs-badge {
    background: radial-gradient(circle, #ff3333 0%, #aa0000 100%);
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #ffd700;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    z-index: 2;
}

.betting-layout {
    display: flex;
    justify-content: center;
    gap: 20px;
    perspective: 800px;
}

.baccarat-table .bet-zone {
    border: 3px solid rgba(255, 215, 0, 0.4);
    border-radius: 15px;
    width: 250px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.baccarat-table .bet-zone h3 {
    margin: 0;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.baccarat-table .bet-zone span {
    display: block;
    color: #ffd700;
    font-size: 0.9rem;
    margin-top: 10px;
    font-weight: bold;
}

.baccarat-table .bet-zone:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
    border-color: rgba(255, 215, 0, 0.8);
}

.bz-player h3 { color: #00ccff; }
.bz-tie h3 { color: #00ff66; }
.bz-banker h3 { color: #ff3333; }

.bz-active {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), inset 0 0 20px rgba(255, 215, 0, 0.5);
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    transform: scale(1.05);
}

.bz-winner {
    animation: bz-pulse 1s infinite alternate;
}

@keyframes bz-pulse {
    0% { box-shadow: 0 0 10px #ffd700; background: rgba(255, 215, 0, 0.2); }
    100% { box-shadow: 0 0 30px #ffd700, inset 0 0 30px #ffd700; background: rgba(255, 215, 0, 0.5); }
}

.baccarat-controls {
    background: linear-gradient(180deg, #222 0%, #111 100%);
    border-top: 3px solid #444;
    border-radius: 15px;
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.8);
}

.bc-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.bc-action-row {
    justify-content: center;
    gap: 30px;
    align-items: flex-end;
}

.bc-info {
    display: flex;
    flex-direction: column;
    color: #aaa;
    font-size: 0.9rem;
}
.bc-info strong {
    color: #fff;
    font-size: 1.5rem;
}
.bc-select {
    background: #000;
    color: #fff;
    padding: 8px;
    border: 1px solid #444;
    border-radius: 5px;
    outline: none;
}

.bc-bet-input {
    display: flex;
    flex-direction: column;
}
.bc-bet-input label {
    color: #ffd700;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 5px;
}
.bc-bet-input input {
    background: #000;
    border: 2px solid #555;
    color: #fff;
    font-size: 1.5rem;
    padding: 10px;
    border-radius: 8px;
    width: 150px;
    text-align: center;
    outline: none;
    font-weight: bold;
}
.bc-bet-input input:focus {
    border-color: #ffd700;
}

.btn-deal-baccarat {
    background: linear-gradient(180deg, #ffcc00 0%, #b38000 100%);
    border: 2px solid #fff;
    color: #000;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 15px 40px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: all 0.2s;
}
.btn-deal-baccarat:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 204, 0, 0.4);
}
.btn-deal-baccarat:active {
    transform: scale(0.95);
}
.btn-deal-baccarat:disabled {
    background: #555;
    border-color: #333;
    color: #222;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.baccarat-msg {
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 20px;
    padding: 10px;
    background: rgba(0,0,0,0.5);
    border-radius: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
/* --- BACCARAT 3D CARDS & ANIMATIONS --- */
.baccarat-shoe {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 60px;
    background: linear-gradient(180deg, #111 0%, #000 100%);
    border: 3px solid #333;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffd700;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    z-index: 10;
}
.baccarat-shoe::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 10px;
    background: #444;
    bottom: -5px;
    border-radius: 5px;
}

.bac-card {
    width: 90px;
    height: 130px;
    perspective: 1000px;
    margin: 0 -15px; /* Overlap */
    opacity: 0;
    transform: translateY(-100px) scale(0.5);
    animation: bac-deal 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes bac-deal {
    0% { opacity: 0; transform: translateY(-100px) scale(0.5) rotateY(180deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotateY(0deg); }
}

.bac-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.bac-card-front, .bac-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.bac-card-front {
    background: #fff;
    border: 2px solid #ddd;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
}
.bac-card-front.red { color: #ff0000; }
.bac-card-front.black { color: #000000; }

.bac-card-val {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
}
.bac-card-suit {
    font-size: 2rem;
    text-align: center;
    line-height: 1;
}

/* Squeeze effect for the third card */
.bac-card.squeeze {
    animation: bac-squeeze 2s ease-in-out both;
}

@keyframes bac-squeeze {
    0% { opacity: 0; transform: translateY(-100px) scale(0.5) rotateX(180deg); }
    40% { opacity: 1; transform: translateY(0) scale(1) rotateX(180deg); }
    70% { transform: translateY(0) scale(1.1) rotateX(90deg); opacity: 1; } /* Squeezing */
    100% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; }
}

/* --- CHARACTER PROFILE ARMORY CSS --- */
/* CORRECCIÓN: Padding top ajustado a 130px para que el menú fijo no monte el contenido */
    .blz-armory-hero { position: relative; padding: 130px 4% 50px; background-size: cover; background-position: center; border-bottom: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
    
    .hero-blur-bg { position: absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle at 10% 50%, rgba(10,13,21,0.9) 0%, rgba(0,0,0,0.4) 100%); z-index: 1; }
    .hero-profile-content { position: relative; z-index: 2; display: flex; align-items: center; gap: 30px; }
    .hero-avatar-box { position: relative; width: 100px; height: 100px; border-radius: 8px; background: #000; border: 2px solid rgba(255,255,255,0.1); padding: 5px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
    .hero-avatar-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
    .status-indicator-glow { position: absolute; bottom: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #000; }
    .status-indicator-glow.is-online { background: #10b981; box-shadow: 0 0 10px #10b981; }
    .status-indicator-glow.is-offline { background: #6b7280; }
    .hero-identity { display: flex; flex-direction: column; gap: 4px; }
    .identity-row { display: flex; align-items: center; gap: 15px; }
    .char-name { margin: 0; font-family: var(--font-title); font-size: 32px; color: #fff; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
    .char-class-sub { margin: 0; color: var(--wow-gold-600); font-weight: bold; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
    .badge-status-text { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: bold; text-transform: uppercase; }
    .badge-status-text.is-online { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
    .badge-status-text.is-offline { background: rgba(255,255,255,0.05); color: #888; border: 1px solid rgba(255,255,255,0.1); }
    .char-guild-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; background: rgba(255,255,255,0.02); padding: 4px 10px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.05); width: fit-content; }
    .guild-name-text { font-size: 13px; color: #ccc; }
    .guild-name-text strong { color: #fff; }

    .blz-armory-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-top: 40px; align-items: start; }
    .armory-card { background: var(--bg-panel-1); border: 1px solid rgba(255,255,255,0.03); border-radius: 6px; padding: 25px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
    .panel-title { margin: 0 0 25px 0; font-family: var(--font-title); font-size: 18px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 12px; }
    .panel-title i { color: var(--wow-gold-600); margin-right: 8px; }

    .inventory-grid-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; background: rgba(0,0,0,0.4); padding: 20px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.02); position: relative; }
    .eq-slot-box { position: relative; height: 95px; background: linear-gradient(135deg, rgba(20,25,35,0.6), rgba(5,8,12,0.8)); border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: 0.25s; cursor: pointer; box-shadow: inset 0 0 15px rgba(0,0,0,0.6); }
    .eq-slot-box.is-normal { border-color: rgba(255,255,255,0.15); }
    .eq-slot-box.is-leveled { border-color: rgba(59,130,246,0.4); box-shadow: inset 0 0 15px rgba(59,130,246,0.15); }
    .eq-slot-box.is-excellent { border-color: rgba(16,185,129,0.5); background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(5,8,12,0.8)); box-shadow: inset 0 0 15px rgba(16,185,129,0.15); }
    .eq-slot-box.is-ancient { border-color: rgba(168,85,247,0.5); background: linear-gradient(135deg, rgba(168,85,247,0.05), rgba(5,8,12,0.8)); box-shadow: inset 0 0 15px rgba(168,85,247,0.15); }
    .eq-slot-box:hover { transform: scale(1.03); border-color: var(--wow-gold-600); box-shadow: 0 0 15px rgba(248,183,0,0.15); }

    .item-render-img { max-width: 85%; max-height: 85%; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.8)); }
    .slot-placeholder { text-align: center; color: #444; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
    .slot-placeholder i { font-size: 20px; }
    .slot-placeholder span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; }

    .blz-armory-tooltip { display: none; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); width: 260px; background: rgba(0,0,0,0.95); border: 2px solid #43434b; border-radius: 4px; padding: 15px; box-shadow: 0 15px 35px rgba(0,0,0,0.9); z-index: 999; text-align: left; pointer-events: none; box-sizing: border-box; }
    .eq-slot-box:hover .blz-armory-tooltip { display: block; }
    .tt-name { font-size: 15px; font-weight: bold; margin-bottom: 6px; letter-spacing: 0.5px; }
    .tt-blue { color: #60a5fa; font-size: 12px; margin-bottom: 2px; }
    .tt-green { color: #10b981; font-size: 12px; margin-bottom: 2px; }
    .tt-purple { color: #c084fc; font-size: 12px; margin-bottom: 2px; }

    .armory-privacy-lock { text-align: center; padding: 50px 20px; color: #555; }
    .armory-privacy-lock h4 { color: #ef4444; margin: 15px 0 5px 0; font-family: var(--font-title); font-size: 16px; }
    .armory-privacy-lock p { margin: 0; font-size: 13px; color: #888; }

    .stats-glass-container { display: flex; flex-direction: column; gap: 10px; }
    .stat-glass-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.03); border-radius: 4px; backdrop-filter: blur(5px); }
    .stat-glass-row.entry-highlight { border-left: 3px solid var(--wow-gold-600); background: linear-gradient(90deg, rgba(248,183,0,0.03) 0%, transparent 100%); }
    .stat-glass-row.entry-highlight strong { color: var(--wow-gold-600); font-size: 16px; }
    .stat-glass-row.entry-killer { border-left: 3px solid #ef4444; background: linear-gradient(90deg, rgba(239,68,68,0.03) 0%, transparent 100%); }
    .stat-glass-row.entry-killer strong { color: #ef4444; font-weight: bold; }
    .stat-divider { margin: 15px 0 5px 0; font-family: var(--font-title); font-size: 12px; color: #666; letter-spacing: 1px; text-transform: uppercase; }
    .lbl-attribute { display: flex; align-items: center; gap: 10px; font-weight: bold; color: #aaa; font-size: 13px; }
    .val-attribute { font-family: monospace; font-size: 16px; font-weight: bold; color: #fff; }

    @media (max-width: 850px) { .blz-armory-grid { grid-template-columns: 1fr; } }

/* MOBILE MENU ADDITIONS */
.nav-actions { display: flex; align-items: center; gap: 15px; }
#mobile-menu-btn { display: none; background: transparent; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 10px; }