/* Cursores MU - archivos locales (sin base64) */
:root {
    --cursor-mu-default: url('../img/ui/cursor_default_webzen.png') 0 0, default;
    --cursor-mu-pointer: url('../img/ui/cursor_attack_webzen.png') 0 0, pointer;
    --cursor-mu-click: url('../img/ui/cursor_get_webzen.png') 4 4, pointer;
}


/* ==========================================================================
   MU Apocalipsis — EPIC CLASSIC THEME
   Season 6 · Episode 3 · Classic
   ========================================================================== */

/* === VARIABLES ============================================================= */
:root {
    --bg-deep:           #030407;
    --bg-panel:          rgba(10, 12, 18, 0.88);
    --bg-panel-hover:    rgba(16, 20, 30, 0.95);
    --bg-box:            rgba(8, 10, 16, 0.92);

    --border-gold:       #c5a059;
    --border-gold-dk:    #3a2a0f;
    --border-gold-bright:#ffd700;
    --border-blue:       #1b3a5c;
    --border-blue-lt:    #2a5090;
    --border-dark:       #221a0f;

    --text-main:         #c0cbdc;
    --text-gold:         #f3e5ab;
    --text-gold-lt:      #ffe88a;
    --text-muted:        #7b88a1;
    --text-bright:       #ffffff;
    --text-light:        #b0bcc8;
    --text-white:        #e8edf5;

    --glow-blue:         rgba(0, 140, 255, 0.35);
    --glow-gold:         rgba(197, 160, 89, 0.4);

    --accent-red:        #8b1a1a;
    --accent-green:      #1a6b2a;

    --font-gothic:       'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    --font-body:         'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-code:         'Courier New', Courier, monospace;

    --shadow-gold:       0 0 12px rgba(197,160,89,0.4);
    --shadow-blue:       0 0 12px rgba(0,140,255,0.3);
}

/* === RESET ================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }

a { color: var(--text-gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--text-gold-lt); text-decoration: underline; }
code {
    font-family: var(--font-code);
    color: var(--text-gold-lt);
    background: rgba(255,255,255,0.05);
    padding: 1px 5px;
    border-radius: 2px;
}

/* === BODY — Fondo atmosferico con textura ================================== */
body {
    background-color: var(--bg-deep);
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(26, 61, 109, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, rgba(3, 4, 7, 0.72) 0%, rgba(3, 4, 7, 0.92) 100%),
        url('../img/bg_lorencia.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

/* Imagenes y renders de MU Online */
.welcome-hero-img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 4px;
    border: 1px solid var(--border-gold);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85), 0 0 15px var(--gold-glow-soft);
    margin-bottom: 20px;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.welcome-hero-img:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.95), 0 0 25px var(--gold-glow);
    transform: scale(1.01);
}

.event-hero-img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 4px;
    border: 1px solid var(--border-gold);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8);
    margin-bottom: 18px;
    display: block;
}

/* Iconos de Joyas y Características de MU Online (Render 3D HD) */
.jewel-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 8px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.45));
    transition: transform 0.25s ease, filter 0.25s ease;
}
.srv-stat-item:hover .jewel-icon {
    transform: scale(1.2) rotate(4deg);
    filter: drop-shadow(0 0 10px rgba(255, 220, 50, 0.8));
}

.feature-icon-wrapper {
    width: 68px;
    height: 68px;
    margin: 0 auto 14px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(26, 34, 52, 0.95) 0%, rgba(9, 12, 18, 0.98) 70%, rgba(3, 4, 7, 1) 100%);
    border: 1px solid rgba(197, 160, 89, 0.4);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.95), 0 6px 18px rgba(0, 0, 0, 0.8), 0 0 12px rgba(197, 160, 89, 0.15);
    position: relative;
    transition: all 0.35s ease;
}

.feature-item:hover .feature-icon-wrapper {
    border-color: var(--border-gold-bright);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9), 0 8px 24px rgba(0, 0, 0, 0.95), 0 0 22px var(--glow-gold);
    transform: translateY(-3px);
}

.feature-emblem {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.45));
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.35s ease;
}

.feature-item:hover .feature-emblem {
    transform: scale(1.18);
}

.emblem-wings  { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); }
.emblem-swords { filter: drop-shadow(0 0 8px rgba(231, 76, 60, 0.6)); }
.emblem-chaos  { filter: drop-shadow(0 0 8px rgba(255, 190, 0, 0.7)); }
.emblem-shield { filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.6)); }

.feature-item:hover .emblem-wings  { filter: drop-shadow(0 0 18px rgba(255, 220, 50, 1)); }
.feature-item:hover .emblem-swords { filter: drop-shadow(0 0 18px rgba(255, 80, 80, 1)); }
.feature-item:hover .emblem-chaos  { filter: drop-shadow(0 0 18px rgba(255, 210, 30, 1)); }
.feature-item:hover .emblem-shield { filter: drop-shadow(0 0 18px rgba(80, 190, 255, 1)); }

.jewel-icon--lg {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    display: block;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.35s ease;
}

.jewel-bless { filter: drop-shadow(0 0 8px rgba(0, 150, 255, 0.65)); }
.jewel-soul  { filter: drop-shadow(0 0 8px rgba(255, 30, 90, 0.65)); }
.jewel-chaos { filter: drop-shadow(0 0 8px rgba(255, 195, 0, 0.7)); }
.jewel-life  { filter: drop-shadow(0 0 8px rgba(0, 220, 85, 0.65)); }

.feature-item:hover .jewel-bless {
    transform: scale(1.15) rotate(3deg);
    filter: drop-shadow(0 0 16px rgba(0, 210, 255, 0.95));
}
.feature-item:hover .jewel-soul {
    transform: scale(1.15) rotate(-3deg);
    filter: drop-shadow(0 0 16px rgba(255, 60, 120, 0.95));
}
.feature-item:hover .jewel-chaos {
    transform: scale(1.15) rotate(3deg);
    filter: drop-shadow(0 0 16px rgba(255, 220, 30, 0.95));
}
.feature-item:hover .jewel-life {
    transform: scale(1.15) rotate(-3deg);
    filter: drop-shadow(0 0 16px rgba(50, 255, 130, 0.95));
}

/* === WRAPPER =============================================================== */
#wrapper {
    max-width: 1240px;
    margin: 0 auto;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.95);
    border-left:  1px solid rgba(197, 160, 89, 0.2);
    border-right: 1px solid rgba(197, 160, 89, 0.2);
    background: rgba(3, 4, 7, 0.6);
}

/* === HEADER ================================================================ */
#site-header {
    background: linear-gradient(180deg, #0b0d14 0%, #050608 100%);
    border-bottom: 3px solid var(--border-gold);
    padding: 15px 25px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}
#site-header::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(197,160,89,0.04) 50%, transparent 100%);
    pointer-events: none;
}
#header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
#site-logo { display: flex; flex-direction: column; }

.logo-mu {
    font-size: 2.8rem;
    font-weight: 900;
    font-family: var(--font-gothic);
    background: linear-gradient(180deg, #ffffff 20%, #ffaa00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
    display: inline-block;
    line-height: 1;
}
.logo-brand-subtitle {
    font-size: 1rem;
    color: var(--text-gold);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: -6px;
    font-family: var(--font-gothic);
}
.logo-season {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Header user area */
#header-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hdr-welcome { color: var(--text-muted); font-size: 0.84rem; margin-right: 4px; }
.hdr-login-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.hdr-input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #332615;
    color: var(--text-bright);
    padding: 7px 12px;
    border-radius: 3px;
    font-size: 0.84rem;
    font-family: var(--font-body);
    width: 120px;
    outline: none;
    transition: all 0.3s ease;
}
.hdr-input:focus {
    border-color: var(--border-gold);
    box-shadow: 0 0 8px var(--glow-gold);
}
.hdr-input::placeholder { color: var(--text-muted); }

.btn-hdr {
    display: inline-block;
    background: linear-gradient(180deg, #2a2215 0%, #15110a 100%);
    border: 1px solid var(--border-gold);
    color: var(--text-gold);
    padding: 7px 14px;
    border-radius: 3px;
    cursor: var(--cursor-mu-pointer);
    font-weight: 600;
    font-size: 0.84rem;
    font-family: var(--font-gothic);
    text-decoration: none;
    transition: all 0.25s ease;
}
.btn-hdr:hover {
    background: linear-gradient(180deg, #3a2e1d 0%, #201910 100%);
    color: #fff;
    border-color: var(--border-gold-bright);
    box-shadow: 0 0 10px var(--glow-gold);
    transform: translateY(-1px);
    text-decoration: none;
}
.btn-hdr--gold {
    background: linear-gradient(180deg, #c5a059 0%, #8a6a28 100%);
    color: #000 !important;
    border-color: #ffd700;
}
.btn-hdr--gold:hover {
    background: linear-gradient(180deg, #dfbc71 0%, #a58032 100%);
    color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}
.btn-hdr--danger { border-color: #5a1a1a; color: #cc6666; }
.btn-hdr--danger:hover { border-color: #8b2222; color: #ff8888; box-shadow: none; }

/* === NAVEGACION ============================================================ */
#main-nav {
    background: linear-gradient(90deg, #07090f, #121824, #07090f);
    border-bottom: 2px solid #221c10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
#main-nav ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0; }
#main-nav li a {
    display: block;
    padding: 12px 24px;
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-gothic);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    position: relative;
}
#main-nav li.active a,
#main-nav li a:hover {
    color: var(--text-gold);
    background: rgba(197, 160, 89, 0.08);
    border-bottom-color: var(--border-gold);
    text-shadow: 0 0 8px var(--glow-gold);
    text-decoration: none;
}

/* === MAIN CONTAINER (grid 3 columnas) ====================================== */
#main-container {
    display: grid;
    grid-template-columns: 230px 1fr 230px;
    min-height: 600px;
    background: rgba(3, 4, 7, 0.75);
    gap: 0;
}

/* === SIDEBARS ============================================================== */
#sidebar-left  { grid-column: 1; border-right: 1px solid var(--border-gold-dk); }
#sidebar-right { grid-column: 3; border-left:  1px solid var(--border-gold-dk); }
#content-main  { grid-column: 2; background: rgba(5, 6, 10, 0.5); }

/* Side boxes — glassmorphism + borde dorado + hover lift */
.side-box {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-gold-dk);
    backdrop-filter: blur(5px);
    transition: background 0.3s ease;
}
.side-box:hover { background: var(--bg-panel-hover); }
.side-box--alert { background: rgba(139, 26, 26, 0.12); }

.side-box-title {
    background: linear-gradient(90deg, #18130a 0%, #292011 50%, #18130a 100%);
    border-bottom: 1px solid var(--border-gold);
    color: var(--text-gold);
    padding: 9px 13px;
    font-family: var(--font-gothic);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(197,160,89,0.4);
}
.side-box-body { padding: 10px 12px; }

/* Estado del servidor */
.server-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 3px;
    margin-bottom: 10px;
    font-weight: bold;
    border: 1px solid transparent;
}
.status-online  { background: rgba(0, 200, 83, 0.08);  border-color: rgba(0, 200, 83, 0.3);  }
.status-offline { background: rgba(231, 76, 60, 0.08); border-color: rgba(231, 76, 60, 0.3); }

.status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-online  .status-dot { background: #00e676; box-shadow: 0 0 10px #00e676; animation: pulse-glow 2s infinite; }
.status-offline .status-dot { background: #e74c3c; box-shadow: 0 0 8px #e74c3c; }
.status-online  .status-text { color: #00e676; letter-spacing: 1px; font-size: 0.82rem; }
.status-offline .status-text { color: #e74c3c; letter-spacing: 1px; font-size: 0.82rem; }

@keyframes pulse-glow {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 6px rgba(0, 230, 118, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}

.server-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
    font-size: 0.8rem;
}
.server-info-row:last-child { border-bottom: none; }
.srv-label {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
}
.srv-value {
    color: var(--text-bright);
    font-weight: 600;
    white-space: nowrap;
}

/* Top list sidebar */
.top-list { list-style: none; padding: 0; }
.top-list-item {
    display: flex;
    align-items: center;
    padding: 7px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.2s ease;
    gap: 6px;
    font-size: 0.75rem;
}
.top-list-item:hover { background: rgba(197, 160, 89, 0.07); border-radius: 3px; }
.top-rank {
    width: 20px; height: 20px;
    background: #151922;
    border: 1px solid #332615;
    color: var(--text-gold);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.68rem;
    flex-shrink: 0;
}
.top-name  { flex-grow: 1; color: var(--text-bright); font-weight: 600; }
.top-meta  { color: var(--text-muted); font-size: 0.68rem; }
.top-resets{ color: #ffaa00; font-weight: bold; font-size: 0.76rem; white-space: nowrap; }

.side-link-more { display: block; text-align: center; padding: 7px 0; font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; }
.side-link-more:hover { color: var(--text-gold); text-decoration: none; }
.side-empty { color: var(--text-muted); font-size: 0.78rem; text-align: center; padding: 10px 0; }

.quick-links { list-style: none; }
.quick-links li { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.quick-links a { color: var(--text-muted); font-size: 0.8rem; }
.quick-links a:hover { color: var(--text-gold); text-decoration: none; }

.event-list { list-style: none; }
.event-item { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.76rem; }
.event-name  { color: var(--text-muted); }
.event-time  { color: var(--text-gold-lt); }
.event-active .event-name { color: #00e676; }

/* === CONTENT BOXES ========================================================= */
.content-box {
    background: var(--bg-panel);
    border: 1px solid var(--border-gold-dk);
    border-radius: 4px;
    margin: 14px;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.content-box:hover {
    border-color: rgba(197, 160, 89, 0.45);
    box-shadow: 0 10px 28px rgba(0,0,0,0.8), 0 0 16px rgba(197,160,89,0.12);
    transform: translateY(-2px);
}

.content-box-title {
    background: linear-gradient(90deg, #18130a 0%, #252010 50%, #18130a 100%);
    border-bottom: 1px solid var(--border-gold);
    color: var(--text-gold);
    padding: 10px 16px;
    font-family: var(--font-gothic);
    font-size: 0.88rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(197,160,89,0.5);
    border-radius: 4px 4px 0 0;
    position: relative;
}
.content-box-title::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
    opacity: 0.4;
}
.content-box-body { padding: 18px; }

/* === HOME — BIENVENIDA ===================================================== */
.welcome-block {
    text-align: center;
    position: relative;
    overflow: hidden;
}
.welcome-block::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
}
.welcome-banner {
    background: linear-gradient(135deg, rgba(10,12,24,0.9) 0%, rgba(14,16,30,0.95) 100%);
    border: 1px solid var(--border-blue);
    padding: 28px 24px;
    text-align: center;
    margin-bottom: 22px;
    border-radius: 4px;
    box-shadow: inset 0 0 40px rgba(27,54,93,0.25);
}
.welcome-title {
    font-family: var(--font-gothic);
    font-size: 1.9rem;
    color: var(--text-bright);
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(197, 160, 89, 0.45);
}
.welcome-subtitle { color: var(--text-gold); font-size: 1rem; margin-bottom: 22px; }
.welcome-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Botones generales */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 11px 26px;
    border-radius: 3px;
    font-family: var(--font-gothic);
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: var(--cursor-mu-pointer);
}
.btn-primary {
    background: linear-gradient(180deg, #c5a059 0%, #8a6a28 100%);
    color: #000;
    border: 1px solid #ffd700;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.35);
}
.btn-primary:hover {
    background: linear-gradient(180deg, #dfbc71 0%, #a58032 100%);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.55);
    transform: translateY(-2px);
    color: #000;
    text-decoration: none;
}
.btn-secondary {
    background: linear-gradient(180deg, #1b2436 0%, #0d121c 100%);
    color: var(--text-bright);
    border: 1px solid #334466;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.btn-secondary:hover {
    background: linear-gradient(180deg, #25324d 0%, #121926 100%);
    border-color: #5577aa;
    box-shadow: 0 6px 20px rgba(0,140,255,0.3);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}
.btn-large { padding: 14px 36px; font-size: 1rem; }
.btn-danger {
    display: inline-block; padding: 8px 20px;
    background: linear-gradient(180deg, #1e0808 0%, #120404 100%);
    border: 1px solid #5a1a1a; color: #cc6666;
    font-family: var(--font-gothic); font-size: 0.84rem;
    border-radius: 3px; text-decoration: none;
    transition: all 0.2s;
}
.btn-danger:hover { border-color: #8b2222; color: #ff8888; text-decoration: none; }

/* Features grid: 4 columnas simetricas en una sola fila */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 24px;
}
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 520px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}
.feature-item {
    background: rgba(10, 14, 22, 0.7);
    border: 1px solid var(--border-gold-dk);
    padding: 18px 14px;
    border-radius: 4px;
    text-align: center;
    transition: all 0.3s ease;
}
.feature-item:hover {
    border-color: var(--border-gold);
    background: rgba(20, 26, 38, 0.85);
    box-shadow: 0 0 16px rgba(197, 160, 89, 0.18);
    transform: translateY(-3px);
}
.feature-icon {
    display: block;
    font-size: 1.9rem;
    color: var(--text-gold);
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(197,160,89,0.5);
}
.feature-item h3 {
    font-family: var(--font-gothic);
    font-size: 0.9rem;
    color: var(--text-bright);
    margin-bottom: 6px;
}
.feature-item p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }

/* Noticias */
.news-item { padding: 14px 0; }
.news-date { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 1px; margin-bottom: 4px; }
.news-title { font-family: var(--font-gothic); font-size: 1rem; color: var(--text-gold); margin-bottom: 8px; }
.news-body { font-size: 0.84rem; color: var(--text-light); line-height: 1.6; }
.news-body p { margin-bottom: 6px; }
.news-list { padding-left: 18px; font-size: 0.84rem; color: var(--text-light); }
.news-list li { margin-bottom: 4px; }
.news-divider { border: none; border-top: 1px solid rgba(197,160,89,0.1); margin: 6px 0; }

/* === RANKINGS ============================================================== */
.rank-tabs { display: flex; margin-bottom: 14px; border-bottom: 1px solid var(--border-gold-dk); }
.rank-tab {
    padding: 8px 20px;
    color: var(--text-muted);
    font-family: var(--font-gothic);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}
.rank-tab:hover, .rank-tab.active {
    color: var(--text-gold);
    border-bottom-color: var(--border-gold);
    text-decoration: none;
    text-shadow: 0 0 6px var(--glow-gold);
}

.rank-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.rank-table thead tr { background: linear-gradient(90deg, #100c05, #181306); }
.rank-table th {
    padding: 10px 12px;
    color: var(--text-gold);
    font-family: var(--font-gothic);
    font-size: 0.76rem;
    letter-spacing: 1px;
    text-align: left;
    border-bottom: 2px solid var(--border-gold);
    text-transform: uppercase;
}
.rank-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.rank-table tbody tr:hover td { background: rgba(197, 160, 89, 0.06); }

.rank-col   { width: 44px; text-align: center; color: var(--text-muted); }
.rank-name  { color: var(--text-white); font-weight: bold; }
.rank-class { color: #7a9fd4; font-size: 0.78rem; }
.rank-value { color: var(--text-gold); font-weight: bold; }
.rank-empty { text-align: center; color: var(--text-muted); padding: 28px; }
.rank-medal { font-size: 1.1rem; }

.rank-gold   td { color: #ffd700; font-weight: bold; background: rgba(197,160,89,0.07) !important; }
.rank-silver td { color: #e0e0e0; font-weight: bold; background: rgba(192,192,192,0.04) !important; }
.rank-bronze td { color: #cd7f32; font-weight: bold; background: rgba(160,82,45,0.04) !important; }

/* === REGISTRO — FORMULARIOS ================================================ */
.form-section-title {
    font-family: var(--font-gothic);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-gold-dk);
    padding-bottom: 6px;
    margin: 22px 0 14px;
}
.form-section-title:first-child { margin-top: 0; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; color: var(--text-gold); font-size: 0.84rem; margin-bottom: 5px; font-weight: 600; }
.required { color: #ff5555; }
.form-input {
    display: block;
    width: 100%;
    max-width: 440px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid #332615;
    color: var(--text-bright);
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 0.88rem;
    font-family: var(--font-body);
    outline: none;
    transition: all 0.3s ease;
}
.form-input:focus {
    border-color: var(--border-gold);
    box-shadow: 0 0 10px var(--glow-gold);
    background: rgba(5, 7, 12, 0.85);
}
.form-input::placeholder { color: var(--text-muted); font-size: 0.78rem; }
.password-input-wrap { position: relative; width: 100%; max-width: 440px; }
.password-input-wrap .form-input { max-width: none; padding-right: 78px; }
.password-toggle {
    position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
    border: 1px solid var(--border-gold-dk); border-radius: 3px;
    background: rgba(0,0,0,.72); color: var(--text-gold);
    padding: 6px 8px; font: inherit; font-size: .72rem; line-height: 1.2;
}
.password-toggle:hover, .password-toggle:focus-visible { border-color: var(--border-gold); color: var(--text-bright); outline: 2px solid var(--border-gold); outline-offset: 2px; }
.form-hint { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

.form-checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: var(--text-muted); cursor: var(--cursor-mu-pointer); line-height: 1.5; }
.form-checkbox-label input[type="checkbox"] { margin-top: 2px; accent-color: var(--border-gold); }
.form-checkbox-label a { color: var(--text-gold); }
.form-actions { margin: 22px 0 16px; }
.form-footer-info { font-size: 0.78rem; color: var(--text-muted); }
.form-footer-info a { color: var(--text-gold); }

/* Rules box */
.rules-box {
    margin-top: 24px;
    background: rgba(27, 54, 93, 0.08);
    border: 1px solid var(--border-blue);
    padding: 14px 18px;
    border-radius: 3px;
}
.rules-title {
    font-family: var(--font-gothic);
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #7a9fd4;
    margin-bottom: 10px;
}
.rules-list { padding-left: 18px; font-size: 0.8rem; color: var(--text-muted); }
.rules-list li { margin-bottom: 6px; }

/* Alerts */
.alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-left: 4px solid;
    font-size: 0.84rem;
    border-radius: 0 3px 3px 0;
}
.alert-success { background: rgba(46,204,113,0.08); border-color: #2ecc71; color: #7deba0; }
.alert-error   { background: rgba(231,76,60,0.08);  border-color: #e74c3c; color: #f1948a; }
.alert-mu {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 17px;
    border: 1px solid var(--border-gold-dk);
    border-left: 4px solid var(--border-gold);
    border-radius: 2px;
    background: linear-gradient(110deg, rgba(197,160,89,0.10), rgba(18,13,9,0.94) 58%);
    box-shadow: inset 0 0 18px rgba(197,160,89,0.035), 0 5px 16px rgba(0,0,0,0.20);
    color: var(--text-gold);
}
.alert-mu.alert-success { border-left-color: #45c978; color: #d7e8ce; }
.alert-mu.alert-error { border-left-color: #d56a4d; color: #f0c1a8; }
.alert-mu-icon {
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--text-gold-lt);
    font-size: 15px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255,211,112,0.45);
}
.alert-mu.alert-success .alert-mu-icon { color: #72e59c; }
.alert-mu.alert-error .alert-mu-icon { color: #ff9a76; }
.alert-mu-copy { display: grid; gap: 4px; padding-top: 1px; }
.alert-mu-copy strong {
    margin: 0;
    color: var(--text-gold-lt);
    font-family: var(--font-gothic);
    font-size: 0.98rem;
    letter-spacing: 0.035em;
}
.alert-mu-copy span { line-height: 1.55; }
.username-check { display: block; min-height: 1em; margin-top: 5px; }
.username-check--available { color: #42df92; }
.username-check--taken, .username-check--error { color: #ff8585; }
.username-check--checking { color: var(--text-muted); }
.alert strong  { display: block; margin-bottom: 4px; }
.alert-link    { color: var(--text-gold); margin-left: 8px; }
.error-list    { padding-left: 18px; margin-top: 6px; }
.error-list li { margin-bottom: 3px; }

/* === PANEL DE USUARIO ====================================================== */
.panel-section { margin-bottom: 24px; }
.panel-section-title {
    font-family: var(--font-gothic);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-gold);
    border-bottom: 1px solid var(--border-gold-dk);
    padding-bottom: 6px;
    margin-bottom: 14px;
}
.panel-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.panel-info-item {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-gold-dk);
    padding: 10px 14px;
    border-radius: 3px;
    transition: border-color 0.2s;
}
.panel-info-item:hover { border-color: rgba(197,160,89,0.35); }
.panel-info-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.panel-info-value { font-size: 0.9rem; color: var(--text-white); font-weight: bold; }
.status-ok  { color: #2ecc71 !important; }
.status-ban { color: #e74c3c !important; }
.panel-empty { color: var(--text-muted); font-size: 0.84rem; padding: 8px 0; }

.panel-char-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.panel-char-table th {
    padding: 9px 12px;
    color: var(--text-gold);
    font-family: var(--font-gothic);
    font-size: 0.74rem;
    letter-spacing: 1px;
    text-align: left;
    border-bottom: 2px solid var(--border-gold);
    background: linear-gradient(90deg, #100c05, #181306);
    text-transform: uppercase;
}
.panel-char-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.panel-char-table tbody tr:hover td { background: rgba(197,160,89,0.05); }
.char-name { color: var(--text-white); font-weight: bold; }
.panel-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-gold-dk); }

/* === DESCARGA ============================================================== */
.download-hero {
    text-align: center;
    padding: 18px 0 24px;
    border-bottom: 1px solid var(--border-gold-dk);
    margin-bottom: 22px;
}
.dl-title { font-family: var(--font-gothic); font-size: 1.4rem; color: var(--text-gold); margin-bottom: 6px; }
.dl-subtitle { color: var(--text-muted); font-size: 0.88rem; }

.dl-section { margin-bottom: 24px; }
.dl-section-title {
    font-family: var(--font-gothic);
    font-size: 0.78rem;
    letter-spacing: 2px;
    color: var(--text-gold);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-gold-dk);
    padding-bottom: 6px;
    margin-bottom: 14px;
}
.dl-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-gold-dk);
    padding: 14px 16px;
    margin-bottom: 10px;
    gap: 12px;
    flex-wrap: wrap;
    border-radius: 3px;
    transition: border-color 0.2s ease;
}
.dl-box:hover { border-color: rgba(197,160,89,0.4); }
.dl-info { display: flex; flex-direction: column; gap: 3px; }
.dl-name { color: var(--text-white); font-weight: bold; font-size: 0.88rem; }
.dl-size, .dl-version { font-size: 0.76rem; color: var(--text-muted); }
.btn-download {
    display: inline-block;
    padding: 10px 22px;
    background: linear-gradient(180deg, #c5a059 0%, #8a6a28 100%);
    border: 1px solid #ffd700;
    color: #000;
    font-family: var(--font-gothic);
    font-size: 0.82rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 3px;
    transition: all 0.25s ease;
    font-weight: bold;
}
.btn-download:hover {
    background: linear-gradient(180deg, #dfbc71 0%, #a58032 100%);
    box-shadow: 0 0 14px rgba(255,215,0,0.5);
    transform: translateY(-1px);
    text-decoration: none;
    color: #000;
}
.btn-download--alt {
    background: linear-gradient(180deg, #1b2436 0%, #0d121c 100%);
    border-color: #334466; color: #7a9fd4;
}
.btn-download--alt:hover { border-color: #5577aa; box-shadow: 0 0 12px rgba(0,140,255,0.3); color: #a0c0f0; }

.dl-instructions { padding-left: 20px; font-size: 0.84rem; color: var(--text-muted); line-height: 1.7; }
.dl-instructions li { margin-bottom: 4px; }
.dl-req-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.dl-req-table th {
    background: linear-gradient(90deg, #100c05, #181306);
    color: var(--text-gold);
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-gold-dk);
    font-family: var(--font-gothic);
    font-size: 0.74rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.dl-req-table td { padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-light); }
.dl-req-table td:first-child { color: var(--text-muted); }

/* === FOOTER ================================================================ */
#site-footer {
    background: linear-gradient(180deg, #050608 0%, #020305 100%);
    border-top: 3px solid var(--border-gold);
    padding: 25px;
    text-align: center;
}
#footer-inner { padding: 5px 0; }
.footer-ornament { color: var(--border-gold); font-size: 1rem; margin-bottom: 10px; letter-spacing: 8px; }
.footer-text { font-family: var(--font-gothic); font-size: 0.82rem; color: var(--text-muted); margin-bottom: 6px; }
.footer-text strong { color: var(--text-gold); }
.footer-disclaimer { font-size: 0.72rem; color: #444; margin-bottom: 10px; opacity: 0.8; }
.footer-links { font-size: 0.76rem; margin-top: 10px; }
.footer-links a { color: var(--text-muted); margin: 0 5px; transition: color 0.2s; }
.footer-links a:hover { color: var(--text-gold); text-decoration: underline; }

/* === RESPONSIVE ============================================================ */
@media (max-width: 1024px) {
    #main-container { grid-template-columns: 200px 1fr; }
    #sidebar-right { display: none; }
}
@media (max-width: 800px) {
    #main-container { grid-template-columns: 1fr; }
    #sidebar-left  { grid-column: 1; border-right: none; border-bottom: 1px solid var(--border-gold-dk); }
    #content-main  { grid-column: 1; }
    #sidebar-right { display: none; }
    .content-box { margin: 8px; }
}
@media (max-width: 600px) {
    #header-inner { flex-direction: column; align-items: flex-start; }
    .logo-mu { font-size: 2.2rem; }
    #main-nav ul { flex-wrap: wrap; }
    #main-nav li a { padding: 9px 14px; font-size: 0.76rem; }
    .features-grid { grid-template-columns: 1fr 1fr; }
    .hdr-input { width: 100px; }
    .welcome-title { font-size: 1.4rem; }
}




/* ==========================================================================
   MEJORAS VISUALES: CURSORES MU, MEDALLAS, BADGES DE CLASE Y SHIMMER FX
   ========================================================================== */

/* Cursores activos en toda la pagina */
html, body {
    cursor: var(--cursor-mu-default) !important;
}

a, button, [role="button"], input[type="submit"], input[type="button"], 
.btn-hdr, .btn-primary, .btn-secondary, .btn-download, .rank-tab, label, select, 
.side-link-more, .top-list-item, .alert-link, input[type="checkbox"], .btn-panel-action {
    cursor: var(--cursor-mu-pointer) !important;
}

/* Animación clásica de MU Online: la mano se abre al presionar el clic */
html:active, body:active,
body.mu-mouse-down,
body.mu-mouse-down *,
a:active, button:active, [role="button"]:active,
input[type="submit"]:active, input[type="button"]:active,
.btn-hdr:active, .btn-primary:active, .btn-secondary:active,
.btn-download:active, .rank-tab:active, select:active,
.side-link-more:active, .top-list-item:active, .btn-panel-action:active {
    cursor: var(--cursor-mu-click) !important;
}

input[type="text"], input[type="password"], input[type="email"] {
    cursor: text !important;
}

/* Efecto Shimmer en botones heroicos */
.btn-primary, .btn-download {
    position: relative;
    overflow: hidden;
}

.btn-primary::after, .btn-download::after {
    content: '';
    position: absolute;
    top: -50%; left: -60%;
    width: 40%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: rotate(25deg);
    transition: all 0.75s ease;
}

.btn-primary:hover::after, .btn-download:hover::after {
    left: 130%;
}

/* Medallas Top 3 del ranking */
.rank-gold td   { background: rgba(255, 215, 0, 0.09) !important; }
.rank-gold .rank-name { color: #ffe57f; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.rank-gold .rank-medal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #b3852e);
    color: #000; box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
    border: 1px solid #ffffff; font-weight: bold;
}

.rank-silver td { background: rgba(220, 220, 220, 0.05) !important; }
.rank-silver .rank-name { color: #ffffff; }
.rank-silver .rank-medal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #f0f0f0, #8c96a3);
    color: #000; border: 1px solid #ffffff;
    box-shadow: 0 0 8px rgba(220, 220, 220, 0.6);
}

.rank-bronze td { background: rgba(205, 127, 50, 0.05) !important; }
.rank-bronze .rank-medal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #cd7f32, #784212);
    color: #fff; border: 1px solid #ffd700;
    box-shadow: 0 0 8px rgba(205, 127, 50, 0.6);
}

/* Badges de Clases Season 6 — profesional unificado */
.class-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-muted);
    line-height: 1.4;
}
.class-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}
.class-dk  { color: #ff8787; border-color: rgba(255,135,135,.35); background: rgba(255,135,135,.07); }
.class-dw  { color: #b197fc; border-color: rgba(177,151,252,.35); background: rgba(177,151,252,.07); }
.class-elf { color: #69db7c; border-color: rgba(105,219,124,.32); background: rgba(105,219,124,.07); }
.class-mg  { color: #ffa94d; border-color: rgba(255,169,77,.35); background: rgba(255,169,77,.07); }
.class-dl  { color: #ffd43b; border-color: rgba(255,212,59,.45); background: rgba(255,212,59,.08); }
.class-sum { color: #e599f7; border-color: rgba(229,153,247,.35); background: rgba(229,153,247,.07); }
.class-rf  { color: #ff8787; border-color: rgba(255,135,135,.35); background: rgba(255,135,135,.07); }
.rank-class .class-badge, td .class-badge { min-width: 118px; justify-content: flex-start; }
/* Top 5 sidebar: pill compacto sin romper nombres */
.top-list-item { flex-wrap: nowrap; min-width: 0; }
.top-list-item .top-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-list-item .top-meta { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.top-list-item .class-badge { min-width: 0; padding: 2px 8px 2px 7px; font-size: 0.64rem; letter-spacing: 0.4px; }
.top-list-item .class-badge::before { width: 6px; height: 6px; }
.top-list-item .top-resets { flex-shrink: 0; }
/* Top 5 sidebar: top 3 oro/plata/bronce */
.top-rank.rank-1 { background: linear-gradient(135deg,#ffd700,#b3852e); color: #000; border-color: #fff; box-shadow: 0 0 8px rgba(255,215,0,.6); }
.top-rank.rank-2 { background: linear-gradient(135deg,#f0f0f0,#8c96a3); color: #000; border-color: #fff; }
.top-rank.rank-3 { background: linear-gradient(135deg,#cd7f32,#784212); color: #fff; border-color: #ffd700; }

/* Transicion de filas en rankings */
.rank-table tbody tr {
    transition: background 0.25s ease;
}
.rank-table tbody tr:hover {
    background: rgba(197,160,89,0.06);
}



/* ─── GALERIA DE SCREENSHOTS REALES DEL SERVIDOR ─────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 15px;
}

.gallery-item {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-gold-dk);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    aspect-ratio: 16 / 10;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-item:hover {
    border-color: var(--border-gold-bright);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9), 0 0 15px var(--gold-glow);
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 8px 10px;
    background: linear-gradient(180deg, transparent 0%, rgba(3, 4, 7, 0.92) 100%);
    font-size: 0.76rem;
    color: var(--text-bright);
    font-family: var(--font-gothic);
    text-shadow: 0 1px 3px #000;
}

/* ─── AVISO DE SEGURIDAD Y FALSOS POSITIVOS DE ANTIVIRUS ────────────────── */
.antivirus-warning-box {
    margin: 24px 0 16px 0;
    background: radial-gradient(circle at 10% 20%, rgba(35, 22, 10, 0.9) 0%, rgba(12, 14, 20, 0.95) 100%);
    border: 1px solid rgba(197, 160, 89, 0.5);
    border-left: 4px solid var(--border-gold-bright);
    border-radius: 4px;
    padding: 18px 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.antivirus-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    padding-bottom: 10px;
}

.antivirus-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
    flex-shrink: 0;
}

.antivirus-title {
    font-family: var(--font-gothic);
    font-size: 1.05rem;
    color: var(--text-gold);
    margin: 0 0 2px 0;
    letter-spacing: 0.5px;
}

.antivirus-subtitle {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin: 0;
}

.antivirus-body {
    font-size: 0.84rem;
    color: var(--text-light);
    line-height: 1.6;
}

.antivirus-body p {
    margin-bottom: 8px;
}

.antivirus-steps {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: 4px;
    padding: 12px 16px;
    margin-top: 10px;
}

.antivirus-steps strong {
    color: var(--text-gold-lt);
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.antivirus-steps ul {
    padding-left: 20px;
    margin: 0;
}

.antivirus-steps li {
    margin-bottom: 5px;
    font-size: 0.8rem;
    color: var(--text-white);
}

/* Logo oficial con imagen de Webzen */
.header-logo-image {
    max-height: 75px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(255, 180, 0, 0.45));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.header-logo-image:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 4px 18px rgba(255, 215, 0, 0.75));
}

/* ==========================================================================
   SISTEMA DE VISTAS DINAMICAS POR MODULO (SPA & PREVIEW)
   ========================================================================== */
.module-view {
    display: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.module-view.active-module {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInModule 0.28s ease-out forwards;
}

@keyframes fadeInModule {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   PANEL DE USUARIO / MI CUENTA
   ========================================================================== */
.panel-section {
    background: rgba(12, 16, 24, 0.65);
    border: 1px solid var(--border-gold-dk);
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.panel-section-title {
    font-family: var(--font-gothic);
    color: var(--text-gold);
    font-size: 0.96rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(197, 160, 89, 0.3);
    padding-bottom: 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.panel-info-item {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(197, 160, 89, 0.18);
    border-radius: 3px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.panel-info-label {
    font-size: 0.74rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-info-value {
    font-size: 0.92rem;
    color: var(--text-white);
    font-weight: 600;
}

.status-ok {
    color: #2ecc71;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

.status-ban {
    color: #e74c3c;
    text-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
}

.panel-empty {
    text-align: center;
    padding: 30px 15px;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.88rem;
}

/* Tabla de personajes en el panel */
.panel-char-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.85rem;
}

.panel-char-table th {
    background: linear-gradient(90deg, #100c05, #181306);
    color: var(--text-gold);
    font-family: var(--font-gothic);
    font-size: 0.76rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-gold-dk);
}

.panel-char-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-main);
    vertical-align: middle;
}

.panel-char-table tr:hover td {
    background: rgba(197, 160, 89, 0.06);
}

.char-name {
    color: var(--text-white);
    font-weight: bold;
    font-family: var(--font-body);
}

/* Tarjetas de Acciones Rápidas del Panel */
.panel-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.panel-action-card {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: 4px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    transition: all 0.25s ease;
}

.panel-action-card:hover {
    border-color: var(--border-gold-bright);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15);
    transform: translateY(-2px);
}

.panel-action-title {
    font-size: 0.88rem;
    color: var(--text-gold-lt);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-action-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.btn-panel-action {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 8px 12px;
    background: linear-gradient(180deg, #222b3d 0%, #131924 100%);
    border: 1px solid #3d4f6e;
    color: #9ab4db;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    cursor: var(--cursor-mu-pointer) !important;
}

.btn-panel-action:hover {
    background: linear-gradient(180deg, #c5a059 0%, #8a6a28 100%);
    border-color: #ffd700;
    color: #000;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
    text-decoration: none;
}

/* Notificación flotante de toast */
.mu-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(10, 14, 22, 0.95);
    border: 1px solid var(--border-gold-bright);
    color: var(--text-gold-lt);
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 0.86rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85), 0 0 15px rgba(255, 215, 0, 0.3);
    z-index: 1000000;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastSlideIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   TABLAS RESPONSIVAS & ACCESIBILIDAD MÓVIL
   ========================================================================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 14px;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--border-gold-dk);
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--border-gold);
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLETS & MÓVILES)
   ========================================================================== */
@media (max-width: 1080px) {
    #main-container {
        grid-template-columns: 210px 1fr;
    }
    #sidebar-right {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--border-gold-dk);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 0;
    }
}

@media (max-width: 768px) {
    #site-header {
        padding: 12px 16px;
    }
    #header-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }
    #header-user {
        width: 100%;
        justify-content: center;
    }
    .hdr-login-form {
        width: 100%;
        justify-content: center;
        gap: 6px;
    }
    .hdr-input {
        width: 130px;
    }
    #main-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    #main-nav li a {
        padding: 10px 14px;
        font-size: 0.78rem;
    }
    #main-container {
        display: flex;
        flex-direction: column;
    }
    #sidebar-left {
        order: 2;
        border-right: none;
        border-top: 1px solid var(--border-gold-dk);
    }
    #content-main {
        order: 1;
    }
    #sidebar-right {
        order: 3;
        display: block;
    }
    .panel-info-grid,
    .panel-actions-grid {
        grid-template-columns: 1fr;
    }
    .rank-table th, .rank-table td,
    .panel-char-table th, .panel-char-table td {
        padding: 8px 8px;
        font-size: 0.78rem;
    }
    .content-box {
        margin: 12px 10px;
    }
}

@media (max-width: 480px) {
    .logo-mu {
        font-size: 2.2rem;
    }
    .hdr-login-form {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }
    .hdr-input {
        width: 100%;
        max-width: 100%;
    }
    .btn-hdr {
        width: 100%;
        text-align: center;
    }
    #main-nav li {
        width: 50%;
        text-align: center;
    }
    #main-nav li a {
        padding: 10px 6px;
        font-size: 0.74rem;
    }
    .mu-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        font-size: 0.8rem;
        padding: 10px 14px;
    }
}

/* Revision visual 2026-10-01: jerarquia, legibilidad y movimiento discreto. */
:root {
    --text-muted: #a1aec2;
    --text-main: #d2d9e5;
    --border-gold: #b99a60;
    --cursor-mu-pointer: url('../img/ui/cursor_attack_webzen.png') 0 0, pointer;
    --gold-glow-soft: rgba(185,154,96,.12);
    --gold-glow: rgba(185,154,96,.2);
}
body { line-height: 1.65; }
#wrapper { box-shadow: 0 16px 50px #0008; }
#site-header { border-bottom-width: 1px; padding: 20px 26px; }
#site-logo { max-width: 100%; }
#site-logo img { max-width: 100%; height: auto !important; max-height: 88px; object-fit: contain; }
#main-nav { box-shadow: none; }
#main-nav li a { font-family: var(--font-body); font-size: .88rem; letter-spacing: .5px; padding: 14px 24px; }
#main-nav li.active a, #main-nav li a:hover { text-shadow: none; }
#main-container { grid-template-columns: 220px minmax(0,1fr) 220px; }
#content-main, #sidebar-left, #sidebar-right { min-width: 0; }
.content-box { margin: 18px 16px; box-shadow: none; }
.content-box-title, .side-box-title {
    background: linear-gradient(90deg,#191c22,#10131a);
    border-bottom-color: #b99a603b; text-shadow: none; letter-spacing: .6px;
}
.content-box-title { font-size: 1rem; padding: 12px 18px; }
.side-box-title { font-family: var(--font-body); font-size: .8rem; padding: 12px 14px; }
.side-box { backdrop-filter: none; }
.side-box-body { padding: 16px 14px; }
.server-info-row { font-size: .85rem; gap: 10px; align-items: center; }
.srv-value { text-align: right; overflow-wrap: anywhere; }
.top-list-item { gap: 5px; }
.top-name { overflow-wrap: anywhere; }
.event-item { gap: 8px; }
.event-time { white-space: nowrap; }
.welcome-hero-img { max-height: 300px; border-color: #b99a6059; box-shadow: none; }
.welcome-hero-img:hover { transform: none; box-shadow: none; }
.welcome-banner { padding: 24px 18px; }
.welcome-title { font-size: clamp(1.6rem,2.5vw,2.2rem); line-height: 1.3; text-shadow: none; }
.welcome-subtitle { color: var(--text-muted); font-size: 1rem; max-width: 52ch; margin: 12px auto 22px; }
.features-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.feature-item { padding: 20px 14px; }
.feature-item p { font-size: .9rem; }
.feature-item h3 { font-size: 1rem; }
.feature-item:hover { transform: none; box-shadow: none; }
.feature-icon-wrapper { box-shadow: none; }
.feature-item:hover .feature-icon-wrapper, .feature-item:hover .feature-emblem { transform: none; }
.feature-emblem, .jewel-icon { filter: none; }
.news-date { font-size: .82rem; letter-spacing: 0; }
.news-title { font-size: 1.15rem; }
.news-body { font-size: .96rem; }
.hdr-input, .btn-hdr, .form-input, .btn-panel-action { min-height: 42px; }
.btn-primary, .btn-secondary { min-height: 44px; padding: 12px 20px; font-size: .9rem; }
.btn-primary, .btn-hdr--gold { background: linear-gradient(180deg,#d9bd80,#b89a5f); border-color: #d9bd80; color: #17130c !important; }
.btn-primary::after, .btn-download::after { display: none; }
.status-online .status-dot { animation: none; box-shadow: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid #eed5a1; outline-offset: 3px;
}
.preview-notice { padding: 8px 16px; background: #172132; color: #c5d5eb; text-align: center; font-size: .85rem; }
a[aria-disabled="true"] { opacity: .65; cursor: not-allowed !important; }
@media (max-width:1080px) {
    #main-container { grid-template-columns: 210px minmax(0,1fr); }
    #sidebar-right { display:grid; grid-column:1/-1; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
}
@media (max-width:800px) {
    #main-container { display:flex; flex-direction:column; }
    #content-main { order:1; }
    #sidebar-left { order:2; border-right:0; }
    #sidebar-right { order:3; display:grid; }
    #header-inner { flex-direction:column; align-items:center; }
    #header-user { justify-content:center; }
    #main-nav li a { padding:12px 14px; }
}
@media (max-width:480px) {
    #site-header { padding:14px 16px; }
    .hdr-login-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; gap:8px; }
    .hdr-input, .btn-hdr { width:100%; min-width:0; }
    #main-nav li { width:auto; flex:1 1 33%; }
    #main-nav li a { font-size:.78rem; padding:12px 8px; }
    .content-box { margin:12px 8px; }
    .content-box-body { padding:14px; }
    .welcome-hero-img { max-height:210px; }
    .welcome-banner { padding:20px 12px; }
    .welcome-buttons { gap:10px; }
    .welcome-buttons a { width:100%; }
    .features-grid { grid-template-columns:1fr; }
    .panel-info-grid, .panel-actions-grid { grid-template-columns:minmax(0,1fr); }
    #sidebar-right { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* === PARCHE 2026-10-03: clasico mejorado (sin reescribir layout PHP) === */
:root {
    --cursor-mu-default: url('../img/ui/cursor_default_webzen.png') 0 0, default;
    --cursor-mu-pointer: url('../img/ui/cursor_attack_webzen.png') 0 0, pointer;
    --cursor-mu-click: url('../img/ui/cursor_get_webzen.png') 0 0, pointer;
    --gold-pure: var(--border-gold-bright);
    --gold-glow: rgba(185,154,96,.2);
    --gold-glow-soft: rgba(185,154,96,.12);
}
.gallery-item:hover { border-color: var(--border-gold-bright); }
#site-header { position: sticky; top: 0; z-index: 50; }
#site-logo img { max-width: min(100%, 320px); height: auto !important; max-height: 72px; }
.welcome-hero-img, .event-hero-img { background: #0a0d14; }
.welcome-hero-img:not([src]), .event-hero-img:not([src]) { min-height: 180px; }
img { max-width: 100%; }
img[src=""], img:not([src]) { visibility: hidden; }

/* === FASE 2 2026-10-03: unificar hero/nav/cards/tablas + responsive unico === */
#main-nav li a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
#main-nav li.active a { background: rgba(185,154,96,.12); border-bottom-color: var(--border-gold-bright); color: var(--text-gold-lt); }
.welcome-banner { border-radius: 6px; }
.welcome-buttons a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.content-box, .side-box { border-radius: 6px; }
.content-box { overflow: hidden; }
.rank-table th, .panel-char-table th, .dl-req-table th { white-space: nowrap; }
.rank-table td, .panel-char-table td, .dl-req-table td { overflow-wrap: anywhere; }
.table-responsive { border: 1px solid rgba(185,154,96,.18); }
@media (max-width: 1080px) {
    #main-container { grid-template-columns: 210px minmax(0,1fr); }
    #sidebar-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); border-left: 0; border-top: 1px solid var(--border-gold-dk); }
}
@media (max-width: 800px) {
    #main-container { display: flex; flex-direction: column; }
    #content-main { order: 1; min-width: 0; }
    #sidebar-left { order: 2; border-right: 0; border-top: 1px solid var(--border-gold-dk); }
    #sidebar-right { order: 3; display: grid; }
    #header-inner { flex-direction: column; align-items: center; text-align: center; }
    #header-user { justify-content: center; width: 100%; }
}
@media (max-width: 480px) {
    #site-header { padding: 14px 14px; position: static; }
    .welcome-hero-img { max-height: 200px; }
    .welcome-buttons a { width: 100%; }
    .features-grid { grid-template-columns: 1fr; }
    .rank-table th, .rank-table td { padding: 8px 8px; font-size: .78rem; }
}
/* === FASE 3: iconos SVG profesionales (sin PNG Webzen) === */
.feature-svg svg { display: block; }
.feature-icon-wrapper.feature-svg { display: flex; align-items: center; justify-content: center; }
.jewel-dot { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; margin-right: 7px; vertical-align: -3px; }
.jewel-dot svg { display: block; filter: drop-shadow(0 0 4px currentColor); }
.antivirus-svg { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(185,154,96,.4); background: rgba(0,0,0,.45); flex-shrink: 0; }
.antivirus-svg svg { display: block; }
/* === FASE 4: web total — hero, panel, medallas === */
.welcome-block { position: relative; }
.welcome-hero-img, .event-hero-img { background: #0a0d14 url('../img/bg_lorencia.jpg') center 25%/cover; }
.welcome-banner { position: relative; }
.panel-svg { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: var(--text-gold); }
.panel-action-title { display: flex; align-items: center; }
.rank-medal { font-size: .8rem; }
/* === FASE 5: charme — hero con overlay + badges + brillo sutil === */
.hero-wrap { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid rgba(185,154,96,.35); margin-bottom: 18px; }
.hero-wrap .welcome-hero-img { margin: 0; border: 0; border-radius: 0; max-height: 340px; }
.hero-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3,4,7,.55) 78%, rgba(3,4,7,.88) 100%); pointer-events: none; }
.hero-badges { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--text-gold-lt); background: rgba(8,10,16,.72); border: 1px solid rgba(217,189,128,.45); backdrop-filter: blur(4px); }
.hero-badge i { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 8px #2ecc71; }
.content-box-title { position: relative; overflow: hidden; }
.content-box-title::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255,235,180,.09), transparent); animation: titleShine 7s ease-in-out infinite; pointer-events: none; }
@keyframes titleShine { 0%,60% { left: -40%; } 100% { left: 130%; } }
.side-box-title { position: relative; }
.status-online { box-shadow: inset 0 0 18px rgba(46,204,113,.08); }
.gallery-item { position: relative; }
.gallery-item::after { content: ''; position: absolute; inset: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,235,180,0); transition: box-shadow .3s ease; pointer-events: none; }
.gallery-item:hover::after { box-shadow: inset 0 0 0 1px rgba(255,215,0,.45); }
@media (prefers-reduced-motion: reduce) { .content-box-title::before { display: none; } }
/* === FASE 6: lightbox galería === */
.gallery-item { cursor: zoom-in; }
.gallery-item:focus-visible { outline: 2px solid #eed5a1; outline-offset: 3px; }
.mu-lightbox[hidden] { display: none; }
.mu-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.mu-lightbox-backdrop { position: absolute; inset: 0; background: rgba(2,3,6,.88); backdrop-filter: blur(3px); }
.mu-lightbox-box { position: relative; max-width: min(920px, 94vw); width: 100%; margin: 0; background: #0a0d14; border: 1px solid rgba(217,189,128,.5); border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px #000; }
.mu-lightbox-img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #05070c; }
.mu-lightbox-cap { padding: 10px 16px; color: var(--text-gold-lt); font-size: .85rem; text-align: center; border-top: 1px solid rgba(217,189,128,.25); }
.mu-lightbox-btn { position: absolute; top: 10px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(217,189,128,.5); background: rgba(8,10,16,.8); color: var(--text-gold-lt); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mu-lightbox-close { right: 10px; }
.mu-lightbox-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.mu-lightbox-next { right: 10px; top: 50%; transform: translateY(-50%); }
.mu-lightbox-btn:hover { background: rgba(217,189,128,.2); }
.gallery-item img { background: #0a0d14; }
.srv-label { gap: 2px; }

/* Panels de juego: metal oscuro, reflejos de bronce y jerarquía de datos. */
.server-panel { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid #75502e; background: linear-gradient(160deg,#1b130e 0%,#100c0a 72%); }
.server-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 8% 0%,rgba(207,127,56,.16),transparent 46%), repeating-linear-gradient(135deg,rgba(255,224,174,.018) 0 1px,transparent 1px 9px); opacity: .7; }
.server-panel-title, .event-panel-title { display: flex; align-items: center; min-height: 42px; padding: 0 15px; color: #f1c58d; font-size: .67rem; font-weight: 700; letter-spacing: 1.35px; border-bottom: 1px solid rgba(203,147,85,.25); }
.server-panel-title::after { content: ""; width: 34px; height: 1px; margin-left: auto; background: linear-gradient(90deg,transparent,#e1ad70); }
.server-panel-body { display: grid; gap: 9px; padding: 11px 12px 13px; }
.server-connection { position: relative; display: grid; grid-template-columns: 10px minmax(0,1fr); align-items: center; gap: 11px; min-height: 64px; padding: 10px 13px; overflow: hidden; border: 1px solid rgba(142,112,69,.56); border-left: 3px solid #43d69a; border-radius: 4px; background: radial-gradient(ellipse at 92% 18%,rgba(62,191,132,.12),transparent 43%),linear-gradient(120deg,#17221a 0%,#111612 55%,#17130f 100%); box-shadow: inset 0 1px rgba(255,223,179,.11),inset 0 -12px 22px rgba(0,0,0,.16),0 5px 14px rgba(0,0,0,.2); }
.server-connection::after { content: ""; position: absolute; right: -9px; top: 50%; width: 48px; height: 48px; border: 1px solid rgba(215,174,115,.19); border-radius: 50%; box-shadow: 0 0 0 6px rgba(215,174,115,.035),0 0 0 13px rgba(215,174,115,.025); transform: translateY(-50%); pointer-events: none; }
.server-connection.is-disconnected { border-color: rgba(142,112,69,.56); border-left-color: #ed7661; background: radial-gradient(ellipse at 92% 18%,rgba(211,96,72,.13),transparent 43%),linear-gradient(120deg,#271814 0%,#17110f 58%,#17130f 100%); }
.server-connection-light { position: relative; z-index: 1; width: 9px; height: 9px; border: 1px solid rgba(211,255,231,.65); border-radius: 50%; background: #3ce29b; box-shadow: 0 0 0 4px rgba(57,227,154,.08),0 0 12px rgba(57,227,154,.78); }
.server-connection.is-disconnected .server-connection-light { border-color: rgba(255,226,215,.7); background: #ef7663; box-shadow: 0 0 0 4px rgba(239,118,99,.08),0 0 12px rgba(239,118,99,.68); }
.server-connection-copy { position: relative; z-index: 1; display: block; min-width: 0; padding-right: 24px; }
.server-stat-card small { color: #a9947d; font-size: .55rem; font-weight: 700; letter-spacing: 1.05px; }
.server-connection-copy strong { color: #86e6b0; font-size: .85rem; letter-spacing: 1.1px; text-transform: uppercase; text-shadow: 0 0 14px rgba(57,227,154,.2); }
.server-connection.is-disconnected .server-connection-copy strong { color: #f19784; text-shadow: 0 0 12px rgba(239,118,99,.17); }
.server-connection-code { padding: 4px 5px; border: 1px solid rgba(211,164,107,.24); border-radius: 2px; color: #d2aa7a; font-size: .53rem; font-weight: 700; letter-spacing: .8px; }
.server-player-card { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 73px; padding: 10px 12px; overflow: hidden; border: 1px solid rgba(210,162,103,.30); border-radius: 4px; background: linear-gradient(105deg,rgba(79,49,27,.68),rgba(30,21,15,.96) 54%,rgba(19,15,12,.98)); box-shadow: inset 0 1px rgba(255,224,174,.08),0 5px 14px rgba(0,0,0,.16); }
.server-player-card::after { content: ""; position: absolute; right: -18px; bottom: -34px; width: 100px; height: 76px; border: 1px solid rgba(222,167,99,.12); border-radius: 50%; box-shadow: 0 0 0 8px rgba(222,167,99,.025),0 0 0 18px rgba(222,167,99,.018); pointer-events: none; }
.server-player-copy { display: grid; gap: 5px; }
.server-player-copy small { color: #e0bd91; font-size: .57rem; font-weight: 700; letter-spacing: 1.05px; }
.server-player-copy span { color: #bca994; font-size: .65rem; }
.server-player-total { position: relative; z-index: 1; color: #ffe0ae; font-family: var(--font-gothic,Georgia,serif); font-size: 2rem; font-weight: 700; line-height: 1; text-shadow: 0 0 17px rgba(255,177,89,.23); font-variant-numeric: tabular-nums; }
.server-stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.server-stat-card { position: relative; display: grid; gap: 4px; min-width: 0; padding: 9px 9px 8px; border: 1px solid rgba(203,147,85,.22); border-radius: 3px; background: linear-gradient(150deg,rgba(47,33,23,.82),rgba(19,15,12,.98) 76%); }
.server-stat-card::before { content: ""; position: absolute; top: -1px; left: 10px; width: 24px; height: 1px; background: #d2a16a; box-shadow: 0 0 7px rgba(210,161,106,.35); }
.server-stat-card strong { color: #f5d2a1; font-size: 1rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.server-stat-card span { color: #a99783; font-size: .59rem; }

.event-panel .side-box-body { padding: 10px 11px 11px; background: linear-gradient(180deg,rgba(29,19,13,.9),rgba(16,12,10,.98)); }
.event-panel-title { justify-content: space-between; }
.event-panel-title::after { width: 24px; }
.event-list--countdown { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.event-countdown-card { position: relative; display: grid; gap: 5px; min-width: 0; padding: 8px 9px 7px 11px; overflow: hidden; border: 1px solid rgba(187,136,83,.19); border-radius: 3px; background: linear-gradient(110deg,rgba(49,34,23,.80),rgba(21,16,13,.96) 72%); box-shadow: inset 0 1px rgba(255,226,184,.035); }
.event-countdown-card::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; background: var(--event-accent,#d7a05d); box-shadow: 0 0 8px color-mix(in srgb,var(--event-accent,#d7a05d) 65%,transparent); }
.event-countdown-card--blood { --event-accent: #4bd99a; }
.event-countdown-card--devil { --event-accent: #bb9360; }
.event-countdown-card--chaos { --event-accent: #86a6db; }
.event-countdown-card--siege { --event-accent: #d69b57; }
.event-countdown-card.is-active { border-color: color-mix(in srgb,var(--event-accent) 43%,#493022); background: linear-gradient(110deg,color-mix(in srgb,var(--event-accent) 12%,#291e15),rgba(19,15,12,.98) 75%); }
.event-countdown-head, .event-countdown-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.event-countdown-card .event-name { min-width: 0; overflow: hidden; color: #f0d1a7; font-size: .70rem; font-weight: 700; letter-spacing: .15px; text-overflow: ellipsis; white-space: nowrap; }
.event-state { flex: 0 0 auto; color: #ab9274; font-size: .49rem; font-weight: 700; letter-spacing: .75px; }
.event-countdown-card.is-active .event-state { color: var(--event-accent); }
.event-countdown-line { padding-top: 3px; border-top: 1px solid rgba(216,170,116,.11); }
.event-count-label { color: #a9947d; font-size: .50rem; font-weight: 700; letter-spacing: .85px; }
.event-countdown-value { color: #ffe0ae; font-family: Consolas,Monaco,monospace; font-size: .77rem; font-weight: 700; letter-spacing: .55px; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 9px rgba(255,180,89,.19); }
.event-frequency { color: #9f8b75; font-size: .56rem; letter-spacing: .12px; }
.event-zone { margin: 9px 1px 0; color: #a99580; font-size: .58rem; text-align: right; }
.event-countdown-card.is-unavailable .event-countdown-value { color: #e8a878; font-size: .63rem; letter-spacing: 0; }
.local-clock-title { font-size: .67rem; letter-spacing: 1.2px; }

/* Compact language control for the public site. */
#main-nav { position: relative; }
.language-switch { position: absolute; right: 12px; top: 50%; display: flex; align-items: center; gap: 4px; transform: translateY(-50%); z-index: 2; }
.language-switch-label { margin-right: 3px; color: #a9947d; font-size: .56rem; font-weight: 700; letter-spacing: .8px; }
.language-switch a { min-width: 31px; padding: 6px 5px; border: 1px solid rgba(203,147,85,.25); border-radius: 2px; color: #d5b58a; font-size: .59rem; font-weight: 700; line-height: 1; text-align: center; text-decoration: none; }
.language-switch a:hover, .language-switch a[aria-current="true"] { border-color: #d8a45f; color: #ffe0ae; background: rgba(195,132,57,.17); }
@media (max-width: 1080px) { .language-switch { position: static; justify-content: center; padding: 0 0 8px; transform: none; } }
@media (max-width: 540px) { .language-switch-label { display: none; } .language-switch a { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; } }