/* ==================================================================== 
   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;
    }