/* @import DEBE ir primero — no mover */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ══���════════════════════════════════════════════════════════════════════════
   MUCORE — override.css  ·  Dark Fantasy Clásico
   Subir a: templates/Mythos3/css/override.css
   ═══════════════════════════════════════════════════════════════════════════

   ╔══════════════════════════════════════════════════════════════════╗
   ║  CONFIGURACIÓN EDITABLE — solo tocar esta sección               ║
   ╠══════════════════════════════════════════════════════════════════╣
   ║  Cambiar los valores de :root para personalizar todo el sitio   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ���═ CSS CUSTOM PROPERTY REGISTER ══���═══════════════════════════���═══════════ */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ══ VARIABLES EDITABLES ════════════════════════════════════════════════════ */
:root {
  /* ── PALETA DORADA CLÁSICA ──────────────────────────────────────── */
  --gold:         #c4a35a;   /* Dorado principal — cambiar para otro tono   */
  --gold-light:   #d4bb78;   /* Dorado hover/claro                          */
  --gold-dim:     #a8883c;   /* Dorado oscuro / sombra                      */
  --rose:         #a05060;   /* Rosa oscuro para víctimas / alertas         */
  --amber:        #c47820;   /* Ámbar para mapas / tiempos                  */
  --forest:       #4a9a60;   /* Verde oscuro para éxito                     */
  --purple:       #6b4e8a;   /* Púrpura para efectos mágicos                */

  /* ── FONDOS ─────────────────────────────────────────────────────── */
  --bg:           #07070b;   /* Fondo de página                             */
  --card-bg:      rgba(14,14,22,0.96); /* Fondo de cards                    */
  --card-bg2:     rgba(20,28,46,0.70); /* Fondo alternativo cards           */

  /* ── BORDES ─────────────────────────────────────────────────────── */
  --border:       rgba(196,163,90,0.15); /* Borde normal                    */
  --border-hover: rgba(196,163,90,0.38); /* Borde al hover                  */

  /* ── TEXTO ──────────────────────────────────────────────────────── */
  --text:         #d4d4d8;   /* Texto principal                             */
  --text-muted:   rgba(212,212,216,0.55); /* Texto secundario              */

  /* ── FUENTES ────────────────────────────────────────────────────── */
  --font-display: 'Cinzel', 'Times New Roman', serif; /* Títulos y labels   */
  --font-body:    'Inter', 'Segoe UI', sans-serif;     /* Texto general      */
  --font-text:    'Crimson Text', Georgia, serif;      /* Texto descriptivo  */

  /* ─�� DIMENSIONES ────────────────────────────────────────────────── */
  --radius:       14px;      /* Border-radius de cards                      */
  --radius-sm:    8px;       /* Border-radius pequeño (botones, badges)     */
  --shadow:       0 8px 32px rgba(0,0,0,0.50);
  --transition:   all 0.25s ease;

  /* ── INFO DEL SERVIDOR (para labels CSS) ───────────────────────── */
  /* Cambiar estos para actualizar stats en el CSS                    */
  --srv-exp:      '500x';
  --srv-drop:     '30%';
  --srv-season:   'S6 Ep3';
  --srv-maxlvl:   '400';

  /* ── ALIAS COMPATIBILIDAD ───────────────────────────────────────── */
  --mc-bg:        var(--bg);
  --mc-card:      var(--card-bg);
  --mc-border:    var(--border);
  --mc-blue:      var(--gold);
  --mc-pink:      var(--rose);
  --mc-purple:    var(--purple);
  --mc-yellow:    var(--amber);
  --mc-green:     var(--forest);
  --mc-text:      var(--text);
  --mc-muted:     var(--text-muted);
  --mc-radius:    var(--radius);
  --mc-transition:var(--transition);
  --mc-shadow:    var(--shadow);
  --color-blue:   var(--gold);
  --color-pink:   var(--rose);
  --color-purple: var(--purple);
  --color-yellow: var(--amber);
  --color-green:  var(--forest);
  --img-base:     ../img;
}

/* ══ RESET / BASE ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box !important; }

html, body {
  background-color: #07070b !important;
  color: #d4d4d8 !important;
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(196,163,90,0.35) rgba(255,255,255,0.04) !important;
}

body {
  padding-top: 64px !important;
  background-image:
    linear-gradient(to bottom, rgba(7,7,11,0.72) 0%, rgba(7,7,11,0.40) 30%, rgba(7,7,11,0.80) 70%, #07070b 100%),
    url('../img/fondobaires.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
}

::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03) !important; }
::-webkit-scrollbar-thumb { background: rgba(196,163,90,0.30) !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(196,163,90,0.55) !important; }

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

/* ══ @KEYFRAMES — Port exacto del reference template ════════════════════════ */

@keyframes mc-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float-up {
  0%  { opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer-sweep {
  0%  { left: -120%; }
  to  { left: 130%; }
}

@keyframes module-glow-border {
  0%, to { box-shadow: 0 0 0 1px rgba(196,163,90,0.06), 0 4px 24px rgba(0,0,0,0.40); }
  50%    { box-shadow: 0 0 0 1px rgba(196,163,90,0.18), 0 4px 32px rgba(0,0,0,0.50), 0 0 20px rgba(196,163,90,0.10); }
}

@keyframes glow-pulse {
  0%, to { box-shadow: 0 0 8px rgba(196,163,90,0.15),  0 0 0 1px rgba(196,163,90,0.08); }
  50%    { box-shadow: 0 0 24px rgba(196,163,90,0.35), 0 0 0 1px rgba(196,163,90,0.22); }
}

@keyframes glow-pulse-yellow {
  0%, to { box-shadow: 0 0 8px rgba(252,196,25,0.12),  0 0 0 1px rgba(252,196,25,0.07); }
  50%    { box-shadow: 0 0 24px rgba(252,196,25,0.32), 0 0 0 1px rgba(252,196,25,0.20); }
}

@keyframes glow-pulse-pink {
  0%, to { box-shadow: 0 0 8px rgba(240,101,149,0.12),  0 0 0 1px rgba(240,101,149,0.07); }
  50%    { box-shadow: 0 0 24px rgba(240,101,149,0.32), 0 0 0 1px rgba(240,101,149,0.20); }
}

@keyframes glow-pulse-green {
  0%, to { box-shadow: 0 0 8px rgba(105,219,124,0.12),  0 0 0 1px rgba(105,219,124,0.07); }
  50%    { box-shadow: 0 0 24px rgba(105,219,124,0.32), 0 0 0 1px rgba(105,219,124,0.20); }
}

@keyframes border-rotate {
  0%  { --angle: 0deg;   }
  to  { --angle: 360deg; }
}

@keyframes scanline {
  0%  { top: -15%; }
  to  { top: 110%; }
}

@keyframes rank-gold-pulse {
  0%, to { text-shadow: 0 0 6px rgba(255,215,0,0.40); }
  50%    { text-shadow: 0 0 15px rgba(255,215,0,0.85), 0 0 30px rgba(255,215,0,0.40); }
}

@keyframes pulse-green {
  0%, to { opacity: 1;   box-shadow: 0 0 5px #69db7c; }
  50%    { opacity: 0.7; box-shadow: 0 0 12px #69db7c, 0 0 24px rgba(105,219,124,0.40); }
}

@keyframes discord-pulse {
  0%, to { opacity: 0.7; transform: scale(1);   }
  50%    { opacity: 1;   transform: scale(1.10); }
}

@keyframes slideInRight {
  0%  { opacity: 0; transform: translateX(110%); }
  to  { opacity: 1; transform: translateX(0);    }
}

@keyframes nav-border-pulse {
  0%, to { box-shadow: 0 12px 50px rgba(0,0,0,0.55), inset 0 1px rgba(255,255,255,0.06), 0 0 28px rgba(196,163,90,0.05); }
  50%    { box-shadow: 0 12px 50px rgba(0,0,0,0.55), inset 0 1px rgba(255,255,255,0.10), 0 0 50px rgba(196,163,90,0.16), 0 0 80px rgba(204,93,232,0.06); }
}

@keyframes nav-sweep {
  0%   { opacity: 0; left: -70%; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  to   { opacity: 0; left: 140%; }
}

@keyframes nav-active-pulse {
  0%, to { box-shadow: 0 0 20px rgba(196,163,90,0.50), 0 2px 10px rgba(0,0,0,0.38); }
  50%    { box-shadow: 0 0 40px rgba(196,163,90,0.90), 0 2px 16px rgba(0,0,0,0.50), 0 0 0 2px rgba(196,163,90,0.22), 0 0 60px rgba(196,163,90,0.15); }
}

@keyframes nav-dot-float {
  0%  { opacity: 0.35; transform: translateY(0) scale(1); }
  40% { opacity: 1;    transform: translateY(-8px) scale(1.5); }
  to  { opacity: 0.35; transform: translateY(0) scale(1); }
}

@keyframes preloader-exit {
  0%   { opacity: 1; }
  80%  { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

@keyframes mc-spin {
  to { transform: rotate(360deg); }
}

@keyframes mc-ping {
  75%, to { opacity: 0; transform: scale(2); }
}

@keyframes mc-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes mc-scan {
  0%   { top: -12%; }
  100% { top: 112%; }
}

/* ══ LAUNCHER / PRELOADER ═════════════��════════════��════════════════════════ */

  /* ── Base overlay (modo pre y post apertura) ─────────────────────────────── */
  #page-loader {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    background: #07070b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    transition: opacity 0.7s ease !important;
    overflow: hidden !important;
  }

  /* Scanlines */
  #page-loader::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: repeating-linear-gradient(
      0deg,
      transparent, transparent 2px,
      rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 4px
    ) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* Fondo partículas radiales tenues */
  #page-loader::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at center, rgba(196,163,90,0.06) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* JS oculta con display:none cuando corresponde */
  #page-loader[style*="display: none"],
  #page-loader[style*="display:none"] {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* ── Contenedores de modo ────────────────────────────────────────────────── */
  .lnch-pre,
  .lnch-post {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.4rem !important;
    padding: 2rem 1.5rem !important;
    text-align: center !important;
    max-width: 480px !important;
    width: 100% !important;
  }

  /* ── Anillo logo ─────────────────────────────────────────────────────────── */
  .lnch-logo-wrap {
    position: relative !important;
    width: 160px !important;
    height: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  /* Anillo exterior */
  .lnch-ring {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(196,163,90,0.08) !important;
    border-top-color: #c4a35a !important;
    border-right-color: rgba(196,163,90,0.45) !important;
    animation: mc-spin 1.6s linear infinite !important;
    box-shadow: 0 0 28px rgba(196,163,90,0.22) !important;
  }

  /* Anillo interior */
  .lnch-ring-inner {
    position: absolute !important;
    inset: 18px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(196,163,90,0.05) !important;
    border-bottom-color: rgba(196,163,90,0.5) !important;
    animation: mc-spin-rev 2.2s linear infinite !important;
  }

  /* Logo */
  .lnch-logo {
    width: 88px !important;
    height: auto !important;
    position: relative !important;
    z-index: 2 !important;
    filter: drop-shadow(0 0 18px rgba(196,163,90,0.60)) !important;
    animation: float-up 0.7s ease-out both !important;
  }

  /* ── Nombre del servidor ─────────────────────────────────────────────────── */
  .lnch-name {
    font-family: 'Cinzel', serif !important;
    font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
    font-weight: 700 !important;
    color: #c4a35a !important;
    text-shadow: 0 0 24px rgba(196,163,90,0.50) !important;
    letter-spacing: 0.08em !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .lnch-subtitle {
    font-family: 'Cinzel', serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.35em !important;
    color: rgba(196,163,90,0.50) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
  }

  /* ── Pills de info (Season / EXP / Drop) ─────────────────────────────────── */
  .lnch-info-row {
    display: flex !important;
    gap: 0.6rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .lnch-info-pill {
    background: rgba(196,163,90,0.07) !important;
    border: 1px solid rgba(196,163,90,0.22) !important;
    border-radius: 6px !important;
    padding: 0.45rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.15rem !important;
    min-width: 70px !important;
  }

  .lnch-info-label {
    font-family: 'Cinzel', serif !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.2em !important;
    color: rgba(196,163,90,0.45) !important;
    text-transform: uppercase !important;
  }

  .lnch-info-val {
    font-family: 'Cinzel', serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #c4a35a !important;
    line-height: 1 !important;
  }

  /* ── Label APERTURA OFICIAL ───────────────────────────────────────────────── */
  .lnch-open-label {
    font-family: 'Cinzel', serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.3em !important;
    color: #c4a35a !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    opacity: 0.7 !important;
  }

  /* ── Countdown ───────────────────────────────────────────────────────────── */
  .lnch-countdown {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.3rem !important;
  }

  .lnch-cd-unit {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: rgba(196,163,90,0.06) !important;
    border: 1px solid rgba(196,163,90,0.20) !important;
    border-radius: 8px !important;
    padding: 0.6rem 0.9rem !important;
    min-width: 58px !important;
  }

  .lnch-cd-unit span {
    font-family: 'Cinzel', serif !important;
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
    font-weight: 700 !important;
    color: #c4a35a !important;
    text-shadow: 0 0 16px rgba(196,163,90,0.55) !important;
    line-height: 1 !important;
  }

  .lnch-cd-unit small {
    font-family: 'Cinzel', serif !important;
    font-size: 0.52rem !important;
    letter-spacing: 0.2em !important;
    color: rgba(196,163,90,0.40) !important;
    margin-top: 0.3rem !important;
  }

  .lnch-cd-sep {
    font-family: 'Cinzel', serif !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: rgba(196,163,90,0.30) !important;
    line-height: 1 !important;
    padding-top: 0.5rem !important;
    animation: mc-pulse 1s ease-in-out infinite !important;
  }

  /* ── Fecha de apertura ───────────────────────────────────────────────────── */
  .lnch-open-date {
    font-family: 'Cinzel', serif !important;
    font-size: 0.7rem !important;
    color: rgba(196,163,90,0.45) !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
  }

  /* ── Social / registro ─────────────────────────────────────��───────────��─── */
  .lnch-social {
    display: flex !important;
    gap: 0.8rem !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-top: 0.4rem !important;
  }

  .lnch-btn-social {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.55rem 1.2rem !important;
    border: 1px solid rgba(196,163,90,0.30) !important;
    border-radius: 6px !important;
    color: rgba(196,163,90,0.75) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    background: rgba(196,163,90,0.05) !important;
    transition: border-color 0.2s, color 0.2s !important;
  }

  .lnch-btn-social:hover {
    border-color: #c4a35a !important;
    color: #c4a35a !important;
  }

  .lnch-btn-register {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.55rem 1.6rem !important;
    background: linear-gradient(135deg, #c4a35a 0%, #a8883c 100%) !important;
    border-radius: 6px !important;
    color: #07070b !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 16px rgba(196,163,90,0.30) !important;
    transition: box-shadow 0.2s, filter 0.2s !important;
  }

  .lnch-btn-register:hover {
    filter: brightness(1.1) !important;
    box-shadow: 0 6px 22px rgba(196,163,90,0.45) !important;
  }

  /* ── Modo post-apertura: elapsed + tagline ───────────────────────────────── */
  .lnch-elapsed {
    font-family: 'Cinzel', serif !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.18em !important;
    color: rgba(196,163,90,0.45) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
  }

  .lnch-tagline {
    font-family: 'Cinzel', serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.25em !important;
    color: rgba(196,163,90,0.35) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    animation: mc-pulse 2s ease-in-out infinite !important;
  }

  /* ── Keyframe faltante ───────────────────────────────────────────────────── */
  @keyframes mc-spin-rev {
    to { transform: rotate(-360deg); }
  }

  
/* ══ NAVBAR / MAIN-NAV ═══════════════════════════════════════════════════════ */
#main-nav, .main-nav, nav.navbar, .navbar {
  background: linear-gradient(
    to bottom,
    rgba(7,7,11,0.98) 0%,
    rgba(10,10,16,0.96) 100%
  ) !important;
  border-bottom: 1px solid rgba(196,163,90,0.10) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.55), inset 0 1px rgba(255,255,255,0.06), 0 0 28px rgba(196,163,90,0.05) !important;
  animation: 6s ease-in-out infinite nav-border-pulse !important;
  position: relative !important;
  overflow: visible !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Sweep de luz en navbar */
#main-nav::before, .main-nav::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.04), transparent) !important;
  pointer-events: none !important;
  animation: nav-sweep 6s ease-in-out infinite !important;
}

/* Logo navbar */
.navbar-brand, .logo-nav, .site-logo {
  filter: drop-shadow(0 0 10px rgba(196,163,90,0.40)) !important;
  transition: filter 0.3s !important;
}
.navbar-brand:hover, .logo-nav:hover {
  filter: drop-shadow(0 0 18px rgba(196,163,90,0.65)) !important;
}

/* Links del nav */
.nav > li > a, .navbar-nav > li > a, .menu-item > a {
  color: rgba(212,212,216,0.80) !important;
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: color 0.2s !important;
  position: relative !important;
}

.nav > li > a:hover, .navbar-nav > li > a:hover,
.nav > li.active > a, .navbar-nav > li.active > a {
  color: #c4a35a !important;
  text-shadow: 0 0 12px rgba(196,163,90,0.50) !important;
}

/* Indicador activo */
.nav > li.active > a::after, .navbar-nav > li.active > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50% !important;
  height: 2px !important;
  background: #c4a35a !important;
  border-radius: 1px !important;
  box-shadow: 0 0 8px rgba(196,163,90,0.70) !important;
  animation: nav-active-pulse 2s ease-in-out infinite !important;
}

/* ══ SIDEBAR MODULES — Port exacto del reference ══════════════════════════��═ */
.sidebar-module {
  background:
    linear-gradient(105deg, rgba(30,50,80,0.55), rgba(20,30,50,0.40) 20%, rgba(13,13,20,0.92) 55%, rgba(10,10,16,0.98)),
    radial-gradient(ellipse at 0% 50%, rgba(196,163,90,0.10), transparent 55%) !important;
  border: 1px solid rgba(196,163,90,0.12) !important;
  border-left: 2px solid rgba(196,163,90,0.50) !important;
  border-radius: 14px !important;
  margin-bottom: 1rem !important;
  padding: 1.25rem !important;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.25s !important;
  animation: 4s ease-in-out infinite module-glow-border !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shimmer sweep en hover */
.sidebar-module::after {
  content: '' !important;
  pointer-events: none !important;
  z-index: 10 !important;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.06), transparent 75%) !important;
  width: 55% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
}

.sidebar-module:hover::after {
  animation: 0.7s forwards shimmer-sweep !important;
}

.sidebar-module:hover {
  animation-play-state: paused !important;
  transform: translateY(-3px) !important;
  background:
    linear-gradient(105deg, rgba(40,70,110,0.65), rgba(25,40,65,0.50) 20%, rgba(15,15,24,0.94) 55%, rgba(10,10,16,0.99)),
    radial-gradient(ellipse at 0% 50%, rgba(196,163,90,0.18), transparent 55%) !important;
  border-color: rgba(196,163,90,0.25) !important;
  box-shadow:
    0 8px 32px rgba(196,163,90,0.15),
    -4px 0 20px rgba(196,163,90,0.12),
    0 2px 8px rgba(0,0,0,0.50) !important;
}

/* Heading del módulo */
.sidebar-module > h3,
.sidebar-module h3.module-title,
.sidebar-module .module-heading {
  color: #c4a35a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  text-shadow: 0 0 12px rgba(196,163,90,0.40) !important;
  border-bottom: 1px solid rgba(196,163,90,0.10) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.7rem !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

.sidebar-module > h3 i,
.sidebar-module h3 i {
  font-size: 0.85rem !important;
  color: #c4a35a !important;
  filter: drop-shadow(0 0 5px rgba(196,163,90,0.55)) !important;
}

/* Scan line en módulos */
.sidebar-module.card-scanline::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 12% !important;
  background: linear-gradient(transparent, rgba(196,163,90,0.05), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: mc-scan 4s linear infinite !important;
}

/* ══ SIDEBAR: CARDS ESPECIALES (Castle, Server Info) ════════════════════════ */
.sidebar-module.cs-module > h3 i {
  color: #ffd700 !important;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.60)) !important;
}

.sidebar-module.card-glow-blue  { animation: 3.5s ease-in-out infinite glow-pulse !important; }
.sidebar-module.card-glow-yellow { animation: 3.5s ease-in-out infinite glow-pulse-yellow !important; }
.sidebar-module.card-glow-pink  { animation: 3.5s ease-in-out infinite glow-pulse-pink !important; }
.sidebar-module.card-glow-green { animation: 3.5s ease-in-out infinite glow-pulse-green !important; }

/* ══ SERVER INFO LIST ════════════════════════════════════════════════════════ */
.server-info-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}

.server-info-list li,
.server-info-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.5rem 0.75rem !important;
  background: rgba(255,255,255,0.025) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.2s !important;
  font-size: 0.84rem !important;
}

.server-info-list li:hover,
.server-info-item:hover {
  background: rgba(196,163,90,0.06) !important;
  border-color: rgba(196,163,90,0.12) !important;
}

.server-info-list .label-name, .info-key {
  color: rgba(212,212,216,0.65) !important;
  font-size: 0.78rem !important;
}

.server-info-list .label-val, .info-val {
  color: #c4a35a !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
}

/* ══ RANKING ITEMS (SIDEBAR WIDGETS) ═════════════════════════════════════════ */
  .ranking-item {
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.55rem 0.6rem !important;
    transition: background 0.2s, box-shadow 0.2s !important;
  }
  .ranking-item:hover {
    background: rgba(196,163,90,0.06) !important;
    border-color: rgba(196,163,90,0.12) !important;
    box-shadow: inset 0 0 12px rgba(196,163,90,0.05) !important;
  }
  .rank-name, .rank-char-name {
    color: #d4d4d8 !important;
    font-weight: 600 !important;
    font-size: 0.86rem !important;
    flex: 1 !important;
  }
  .rank-name a, .rank-char-name a {
    color: #d4d4d8 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
  }
  .rank-name a:hover { color: #c4a35a !important; }
  .rank-value, .rank-level {
    color: rgba(212,212,216,0.65) !important;
    font-size: 0.78rem !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
  }

  /* ══ SIMPLE RANK CARDS ═══════════════════════════════════════════════════════ */
  .simple-rank-card {
    background:
      linear-gradient(105deg, rgba(30,50,80,0.55), rgba(20,30,50,0.40) 20%, rgba(13,13,20,0.92) 55%, rgba(10,10,16,0.98)),
      radial-gradient(ellipse at 0% 50%, rgba(196,163,90,0.10), transparent 55%) !important;
    border: 1px solid rgba(196,163,90,0.12) !important;
    border-left: 2px solid rgba(196,163,90,0.50) !important;
    border-radius: 14px !important;
    padding: 1rem !important;
    transition: var(--mc-transition) !important;
    animation: 4s ease-in-out infinite module-glow-border !important;
  }
  .simple-rank-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(196,163,90,0.30) !important;
    box-shadow: 0 8px 28px rgba(196,163,90,0.15), -3px 0 16px rgba(196,163,90,0.10) !important;
  }

  /* ══ RANKINGS MENU TABS ══════════════════════════════════════════════════════ */
  .rankings-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
    margin-bottom: 1.75rem !important;
    padding: 14px 16px !important;
    background: linear-gradient(135deg, rgba(1,10,19,0.95) 0%, rgba(10,20,40,0.95) 100%) !important;
    border: 2px solid rgba(196,163,90,0.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.60), 0 0 40px rgba(196,163,90,0.06) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .rankings-menu::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(196,163,90,0.04), transparent) !important;
    animation: rankShine 4s infinite !important;
    pointer-events: none !important;
  }
  .rankings-menu a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0.5rem 1.15rem !important;
    border-radius: 10px !important;
    color: rgba(212,212,216,0.60) !important;
    font-family: var(--font-display) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1px solid rgba(196,163,90,0.14) !important;
    background: rgba(196,163,90,0.06) !important;
    transition: all 0.22s ease !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .rankings-menu a i { font-size: 0.88rem !important; transition: all 0.2s !important; }
  .rankings-menu a::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, #c89b3c 0%, #f0c75e 50%, #c89b3c 100%) !important;
    opacity: 0 !important;
    border-radius: 9px !important;
    transition: opacity 0.22s !important;
    z-index: -1 !important;
  }
  .rankings-menu a:hover {
    color: #0a0e17 !important;
    border-color: #c4a35a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(196,163,90,0.40) !important;
  }
  .rankings-menu a:hover::before { opacity: 1 !important; }
  .rankings-menu a.active {
    background: linear-gradient(135deg, rgba(196,163,90,0.18), rgba(196,163,90,0.08)) !important;
    border-color: rgba(196,163,90,0.50) !important;
    color: #c4a35a !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 16px rgba(196,163,90,0.30) !important;
    text-shadow: 0 0 10px rgba(196,163,90,0.45) !important;
  }

  /* ══ PAGE TITLE ══════════════════════════════════════════════════════════════ */
  .page-title {
    text-align: center !important;
    margin-bottom: 1.75rem !important;
    padding: 1.25rem 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .page-title::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 180px; height: 2px !important;
    background: linear-gradient(90deg, transparent, #c4a35a, transparent) !important;
    box-shadow: 0 0 20px rgba(196,163,90,0.50) !important;
  }
  .page-title span {
    font-family: var(--font-display) !important;
    font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #c89b3c 0%, #f0c75e 35%, #ffd966 50%, #f0c75e 65%, #c89b3c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    filter: drop-shadow(0 2px 8px rgba(200,155,60,0.30)) !important;
  }
  .page-title span i {
    font-size: 1.5rem !important;
    background: linear-gradient(135deg, #c89b3c 0%, #f0c75e 50%, #c89b3c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 8px rgba(200,155,60,0.5)) !important;
  }

  /* ══ CLASS FILTER FILTER ══════════════════════════════════════════════════════ */
  .rankings-class-filter {
    list-style: none !important;
    padding: 1rem !important;
    margin: 0 0 1.5rem 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
  }
  .rankings-class-filter-selection {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0.65rem 0.85rem !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    text-align: center !important;
    color: rgba(212,212,216,0.50) !important;
    font-family: var(--font-display) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    min-width: 65px !important;
  }
  .rankings-class-filter-selection:hover {
    background: rgba(196,163,90,0.06) !important;
    border-color: rgba(196,163,90,0.20) !important;
    color: rgba(212,212,216,0.85) !important;
  }
  .rankings-class-filter-selection.active {
    background: rgba(196,163,90,0.10) !important;
    border-color: rgba(196,163,90,0.42) !important;
    color: #c4a35a !important;
  }
  .rankings-class-filter-image {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    border: 2px solid rgba(196,163,90,0.18) !important;
    transition: all 0.2s !important;
    display: block !important;
    object-fit: cover !important;
    filter: brightness(0.75) saturate(0.6) !important;
  }
  .rankings-class-filter-grayscale .rankings-class-filter-image {
    filter: grayscale(100%) brightness(0.45) !important;
  }
  .rankings-class-filter-selection:hover .rankings-class-filter-image,
  .rankings-class-filter-selection.active .rankings-class-filter-image {
    border-color: rgba(196,163,90,0.60) !important;
    box-shadow: 0 0 14px rgba(196,163,90,0.28) !important;
    filter: brightness(1) saturate(1) !important;
    transform: scale(1.05) !important;
  }

  /* ══ TABLA DE RANKINGS — DISEÑO MUDAVION-INSPIRED ═══════════════════════════ */
  .rankings-table {
    width: 100% !important;
    background: linear-gradient(135deg, rgba(1,10,19,0.95) 0%, rgba(10,20,40,0.95) 100%) !important;
    border: 2px solid rgba(196,163,90,0.20) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.60), 0 0 40px rgba(196,163,90,0.06) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 1.25rem !important;
  }

  /* Header row */
  .rankings-table tr:first-child {
    background: linear-gradient(135deg, rgba(196,163,90,0.20) 0%, rgba(120,90,40,0.18) 100%) !important;
    border-bottom: 2px solid rgba(196,163,90,0.30) !important;
  }
  .rankings-table tr:first-child td,
  .rankings-table thead th {
    color: rgba(196,163,90,0.90) !important;
    font-family: var(--font-display) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    padding: 0.85rem 1rem !important;
    border: none !important;
    text-align: center !important;
    background: transparent !important;
  }

  /* Body rows */
  .rankings-table tbody td,
  .rankings-table tr:not(:first-child) td {
    padding: 0.65rem 1rem !important;
    color: #d4d4d8 !important;
    font-size: 0.88rem !important;
    vertical-align: middle !important;
    text-align: center !important;
    border-top: 1px solid rgba(196,163,90,0.06) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    transition: background 0.18s !important;
  }
  .rankings-table tbody tr,
  .rankings-table tr:not(:first-child) {
    border-bottom: 1px solid rgba(196,163,90,0.07) !important;
    transition: all 0.18s ease !important;
  }
  .rankings-table tbody tr:last-child,
  .rankings-table tr:last-child { border-bottom: none !important; }
  .rankings-table tbody tr:hover td,
  .rankings-table tr:not(:first-child):hover td {
    background: linear-gradient(135deg, rgba(196,163,90,0.09) 0%, rgba(120,90,40,0.05) 100%) !important;
  }
  .rankings-table tbody tr:hover,
  .rankings-table tr:not(:first-child):hover {
    transform: translateX(3px) !important;
    box-shadow: -3px 0 0 rgba(196,163,90,0.40) !important;
  }

  /* ══ POSICIÓN (rankings-table-place) ════════════════════════════════════════ */
  .rankings-table-place,
  .rankings-table tbody td:first-child:not(:only-child) {
    font-family: var(--font-display) !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    min-width: 55px !important;
  }
  /* Gold gradient text for all positions */
  .rankings-table-place {
    background: linear-gradient(135deg, #c89b3c 0%, #f0c75e 50%, #c89b3c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 6px rgba(196,163,90,0.40)) !important;
  }

  /* ══ TOP 3 ESPECIAL ══════════════════════════════════════════════════════════ */
  /* 1st — Champion (Gold) */
  .rankings-table tbody tr:nth-child(2) td,
  .rankings-table tr:nth-child(2) td {
    background: linear-gradient(90deg, rgba(255,215,0,0.08) 0%, rgba(196,163,90,0.04) 50%, transparent 100%) !important;
  }
  .rankings-table tbody tr:nth-child(2) .rankings-table-place {
    background: linear-gradient(135deg, #ffd700 0%, #ffa500 50%, #ffd700 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 1.35rem !important;
    filter: drop-shadow(0 0 12px rgba(255,215,0,0.80)) !important;
    animation: goldPulse 2s ease-in-out infinite !important;
  }
  /* 2nd — Silver */
  .rankings-table tbody tr:nth-child(3) td,
  .rankings-table tr:nth-child(3) td {
    background: linear-gradient(90deg, rgba(192,192,192,0.06) 0%, transparent 100%) !important;
  }
  .rankings-table tbody tr:nth-child(3) .rankings-table-place {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 8px rgba(192,192,192,0.60)) !important;
  }
  /* 3rd — Bronze */
  .rankings-table tbody tr:nth-child(4) td,
  .rankings-table tr:nth-child(4) td {
    background: linear-gradient(90deg, rgba(205,127,50,0.06) 0%, transparent 100%) !important;
  }
  .rankings-table tbody tr:nth-child(4) .rankings-table-place {
    background: linear-gradient(135deg, #cd7f32 0%, #e8a87c 50%, #cd7f32 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 8px rgba(205,127,50,0.60)) !important;
  }

  /* ══ AVATAR DE CLASE EN TABLA ════════════════════════════════════════════════ */
  .rankings-class-image,
  .rank-avatar {
    width: 46px !important;
    height: 46px !important;
    border-radius: 10px !important;
    border: 2px solid rgba(196,163,90,0.28) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.40) !important;
    transition: all 0.2s ease !important;
    object-fit: cover !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
  .rankings-table tr:hover .rankings-class-image,
  .rankings-table tr:hover .rank-avatar {
    border-color: rgba(196,163,90,0.65) !important;
    transform: scale(1.10) !important;
    box-shadow: 0 6px 16px rgba(196,163,90,0.40) !important;
  }

  /* ══ CHARACTER AVATAR WRAPPER (sidebar badges) ═══════════════════════════════ */
  .character-avatar-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: rgba(196,163,90,0.06) !important;
    border: 1px solid rgba(196,163,90,0.18) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30) !important;
  }
  .rank-index {
    background: rgba(196,163,90,0.14) !important;
    border: 1px solid rgba(196,163,90,0.30) !important;
    color: #c4a35a !important;
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
    padding: 2px 5px !important;
    min-width: 24px !important;
    text-align: center !important;
  }

  /* ══ PLAYER LINKS ════════════════════════════════════════════════════════════ */
  .rankings-table a,
  .rankings-table tbody td a {
    color: #d4bb78 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.18s !important;
    position: relative !important;
  }
  .rankings-table a::after,
  .rankings-table tbody td a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px; left: 0 !important;
    width: 0; height: 2px !important;
    background: linear-gradient(90deg, #c89b3c, #f0c75e) !important;
    transition: width 0.20s ease !important;
  }
  .rankings-table a:hover,
  .rankings-table tbody td a:hover {
    color: #f0c75e !important;
    text-shadow: 0 0 8px rgba(196,163,90,0.45) !important;
  }
  .rankings-table a:hover::after,
  .rankings-table tbody td a:hover::after { width: 100% !important; }

  /* ══ GENS IMAGES ══════════════════════════════════════════════════════════════ */
  .rankings-gens-img {
    width: 34px !important;
    height: 34px !important;
    filter: drop-shadow(0 2px 8px rgba(196,163,90,0.40)) !important;
    transition: all 0.2s !important;
  }
  .rankings-table tr:hover .rankings-gens-img {
    transform: scale(1.20) !important;
    filter: drop-shadow(0 4px 12px rgba(196,163,90,0.70)) !important;
  }

  /* ══ ONLINE STATUS ═══════════════════════════════════════════════════════════ */
  .online-status-indicator {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
    box-shadow: 0 0 7px currentColor !important;
  }

  /* ══ ONLINE INDICATOR (PING) ANIMATION (legacy) ══════════════════════════════ */
  .rk-online-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 8px rgba(34,197,94,0.70) !important;
    display: inline-block !important;
    position: relative !important;
  }
  .rk-online-ping {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: rgba(34,197,94,0.35) !important;
    animation: online-ping 1.5s ease-out infinite !important;
  }
  @keyframes online-ping {
    0%   { transform: scale(1);   opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0;   }
  }

  /* ══ UPDATE TIME ══════════════════════════════════════════════════════════════ */
  .rankings-update-time {
    display: block !important;
    text-align: center !important;
    margin-top: 1rem !important;
    padding: 0.55rem 1.2rem !important;
    color: rgba(196,163,90,0.45) !important;
    font-family: var(--font-display) !important;
    font-size: 0.70rem !important;
    font-style: italic !important;
    letter-spacing: 0.05em !important;
    background: transparent !important;
    border: 1px solid rgba(196,163,90,0.12) !important;
    border-radius: 10px !important;
  }
  .rankings-update-time i { margin-right: 5px !important; color: rgba(196,163,90,0.55) !important; }

  /* ══ PAGINATION ══════════════════════════════════════════════════════════════ */
  .rankings-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 1.5rem !important;
    padding: 0.85rem !important;
    background: linear-gradient(135deg, rgba(1,10,19,0.90) 0%, rgba(10,20,40,0.90) 100%) !important;
    border: 2px solid rgba(196,163,90,0.18) !important;
    border-radius: 14px !important;
  }
  .rankings-pagination a,
  .rankings-pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px; height: 38px !important;
    padding: 0 8px !important;
    background: rgba(196,163,90,0.06) !important;
    color: rgba(212,212,216,0.65) !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    border: 1px solid rgba(196,163,90,0.15) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
  }
  .rankings-pagination a:hover {
    background: linear-gradient(135deg, #c89b3c 0%, #f0c75e 100%) !important;
    color: #0a0e17 !important;
    border-color: #c4a35a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(196,163,90,0.40) !important;
  }
  .rankings-pagination .active, .rankings-pagination span.active {
    background: linear-gradient(135deg, #c89b3c 0%, #f0c75e 100%) !important;
    color: #0a0e17 !important;
    border-color: #c4a35a !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 16px rgba(196,163,90,0.45) !important;
  }
  .rankings-pagination .disabled { opacity: 0.35 !important; pointer-events: none !important; }

  /* ══ RANKINGS RESPONSIVE ════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    .rankings-table thead { display: none !important; }
    .rankings-table, .rankings-table tbody,
    .rankings-table tbody tr, .rankings-table tbody td {
      display: block !important;
    }
    .rankings-table tbody tr {
      margin-bottom: 10px !important;
      border: 1px solid rgba(196,163,90,0.18) !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      background: linear-gradient(135deg, rgba(1,10,19,0.95) 0%, rgba(10,20,40,0.95) 100%) !important;
      transform: none !important;
      box-shadow: none !important;
    }
    .rankings-table tbody td {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 0.55rem 0.9rem !important;
      border-bottom: 1px solid rgba(196,163,90,0.07) !important;
      background: transparent !important;
      text-align: right !important;
    }
    .rankings-table tbody td:last-child { border-bottom: none !important; }
    .rankings-table tbody td::before {
      content: attr(data-label) !important;
      color: rgba(196,163,90,0.65) !important;
      font-family: var(--font-display) !important;
      font-size: 0.68rem !important;
      font-weight: 800 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      text-align: left !important;
      flex-shrink: 0 !important;
    }
    .rankings-menu { gap: 5px !important; padding: 10px !important; }
    .rankings-menu a { font-size: 0.68rem !important; padding: 0.42rem 0.75rem !important; }
    .rankings-class-filter { gap: 6px !important; }
    .rankings-class-filter-image { width: 36px !important; height: 36px !important; }
    .rankings-class-filter-selection { min-width: 52px !important; padding: 0.5rem 0.55rem !important; }
  }

  
/* ══ DESCARGAS ═══════════════════════════════════════════════════════════════ */
.download-category-title {
  font-family: var(--font-display) !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #c4a35a !important;
  border-bottom: 1px solid rgba(196,163,90,0.20) !important;
  padding-bottom: 0.5rem !important;
  margin: 1.5rem 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.download-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.download-card {
  background:
    linear-gradient(105deg, rgba(30,50,80,0.55), rgba(20,30,50,0.40) 20%, rgba(13,13,20,0.92) 55%, rgba(10,10,16,0.98)) !important;
  border: 1px solid rgba(196,163,90,0.12) !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  transition: var(--mc-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.download-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(to bottom, rgba(196,163,90,0), #c4a35a, rgba(196,163,90,0)) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}

.download-card:hover {
  border-color: rgba(196,163,90,0.32) !important;
  transform: translateX(5px) !important;
  box-shadow: 0 6px 24px rgba(196,163,90,0.12), -2px 0 16px rgba(196,163,90,0.10) !important;
}

.download-card:hover::before { opacity: 1 !important; }

.download-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  margin-bottom: 3px !important;
}

.download-desc { color: rgba(212,212,216,0.60) !important; font-size: 0.85rem !important; }

.download-size {
  background: rgba(240,101,149,0.10) !important;
  border: 1px solid rgba(240,101,149,0.22) !important;
  color: #f06595 !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

.btn-download {
  background: linear-gradient(135deg, #2563eb, #c4a35a) !important;
  color: #fff !important;
  padding: 0.65rem 1.4rem !important;
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  box-shadow: 0 4px 16px rgba(196,163,90,0.35) !important;
  transition: var(--mc-transition) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.btn-download:hover {
  box-shadow: 0 6px 24px rgba(196,163,90,0.55) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ══ KILL FEED / PVP RECORD ══════════════════════════════════════════════════ */
.kill-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.5rem 0.9rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  font-size: 0.83rem !important;
  flex-wrap: wrap !important;
  transition: background 0.15s !important;
  animation: float-up 0.4s ease-out both !important;
}

.kill-item:hover  { background: rgba(196,163,90,0.04) !important; }
.kill-item:last-child { border-bottom: none !important; }

.ki-killer { color: #c4a35a !important; font-weight: 700 !important; }
.ki-killer a { color: #c4a35a !important; text-decoration: none !important; transition: text-shadow 0.2s !important; }
.ki-killer a:hover { text-shadow: 0 0 10px rgba(196,163,90,0.60) !important; }

.ki-victim { color: #f06595 !important; font-weight: 700 !important; }
.ki-victim a { color: #f06595 !important; text-decoration: none !important; }
.ki-victim a:hover { text-shadow: 0 0 10px rgba(240,101,149,0.60) !important; }

.ki-text, .ki-text2 { color: rgba(212,212,216,0.55) !important; font-size: 0.75rem !important; }
.ki-map  { color: #fcc419 !important; font-size: 0.75rem !important; display: flex !important; align-items: center !important; gap: 3px !important; }
.ki-time { color: rgba(212,212,216,0.45) !important; font-size: 0.70rem !important; margin-left: auto !important; }

/* ══ SOCIAL WIDGETS ═══════════════════════════════════════════════════════════ */
.social-widgets-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 12px !important;
}

.social-widget {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1rem 0.75rem !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: rgba(212,212,216,0.75) !important;
  transition: var(--mc-transition) !important;
}

.social-widget:hover {
  transform: translateY(-4px) !important;
  color: #fff !important;
}

.social-widget.discord:hover  { background: rgba(88,101,242,0.20) !important; border-color: rgba(88,101,242,0.40) !important; box-shadow: 0 8px 24px rgba(88,101,242,0.30) !important; }
.social-widget.facebook:hover { background: rgba(24,119,242,0.20) !important; border-color: rgba(24,119,242,0.40) !important; box-shadow: 0 8px 24px rgba(24,119,242,0.30) !important; }
.social-widget.youtube:hover  { background: rgba(255,0,0,0.18) !important;    border-color: rgba(255,0,0,0.35) !important;   box-shadow: 0 8px 24px rgba(255,0,0,0.25) !important; }
.social-widget.whatsapp:hover { background: rgba(37,211,102,0.18) !important; border-color: rgba(37,211,102,0.35) !important; box-shadow: 0 8px 24px rgba(37,211,102,0.25) !important; }
.social-widget.instagram:hover { background: rgba(225,48,108,0.18) !important; border-color: rgba(225,48,108,0.35) !important; box-shadow: 0 8px 24px rgba(225,48,108,0.25) !important; }

.social-widget i   { font-size: 1.4rem !important; }
.social-widget span { font-size: 0.72rem !important; font-weight: 700 !important; font-family: var(--font-display) !important; letter-spacing: 0.05em !important; }

/* Formato largo */
.social-widget-long {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.9rem 1rem !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: var(--mc-transition) !important;
}

.social-widget-long:hover { transform: translateX(3px) !important; }
.social-widget-long.discord:hover  { background: rgba(88,101,242,0.18) !important; border-color: rgba(88,101,242,0.35) !important; }
.social-widget-long.facebook:hover { background: rgba(24,119,242,0.18) !important; border-color: rgba(24,119,242,0.35) !important; }
.social-widget-long.youtube:hover  { background: rgba(255,0,0,0.15) !important; border-color: rgba(255,0,0,0.30) !important; }
.social-widget-long.whatsapp:hover { background: rgba(37,211,102,0.15) !important; border-color: rgba(37,211,102,0.28) !important; }

.sw-icon { width: 38px !important; height: 38px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,0.05) !important; font-size: 1.1rem !important; flex-shrink: 0 !important; }
.sw-text { display: flex !important; flex-direction: column !important; flex: 1 !important; }
.sw-title { font-size: 0.85rem !important; font-weight: 700 !important; color: #d4d4d8 !important; }
.sw-sub   { font-size: 0.70rem !important; color: rgba(212,212,216,0.55) !important; }
.sw-arrow { color: rgba(212,212,216,0.40) !important; transition: transform 0.2s, opacity 0.2s !important; transform: translateX(-5px) !important; }
.social-widget-long:hover .sw-arrow { opacity: 1 !important; transform: translateX(0) !important; }

/* Online dot */
.online-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #69db7c !important;
  box-shadow: 0 0 6px #69db7c !important;
  animation: pulse-green 2s ease-in-out infinite !important;
}

/* ══ CONTADOR CASTLE SIEGE ════════════════════════════════════════════════════ */
.cs-winner-card {
  padding: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background: rgba(255,255,255,0.025) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,215,0,0.12) !important;
  margin-bottom: 0.85rem !important;
  transition: background 0.2s !important;
}

.cs-winner-card:hover { background: rgba(255,215,0,0.05) !important; }

.cs-countdown-box {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,215,0,0.12) !important;
  border-radius: 10px !important;
  padding: 0.5rem 0.85rem !important;
  text-align: center !important;
  min-width: 48px !important;
}

.cs-countdown-box .cs-number {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 1.3rem !important;
  color: #fcc419 !important;
  text-shadow: 0 0 12px rgba(252,196,25,0.50) !important;
  display: block !important;
  line-height: 1 !important;
}

.cs-countdown-box .cs-label {
  font-size: 0.60rem !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: rgba(212,212,216,0.50) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ══ FORMULARIOS / AUTH ═══════════════════════════════════════════════════════ */
.auth-wrapper, .auth-page {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem 1rem !important;
}

.auth-card {
  background:
    linear-gradient(160deg, rgba(30,50,80,0.60) 0%, rgba(13,13,20,0.96) 100%),
    radial-gradient(ellipse at top left, rgba(196,163,90,0.10), transparent 60%) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  border-radius: 18px !important;
  padding: 2.25rem !important;
  width: 100% !important;
  max-width: 420px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.60), 0 0 0 1px rgba(196,163,90,0.08) !important;
  animation: float-up 0.45s ease-out both !important;
  position: relative !important;
  overflow: hidden !important;
}

.auth-card::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important;
  left: 10% !important;
  width: 80% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.50), transparent) !important;
}

.auth-card h1, .auth-card .auth-title, .auth-card h2 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 1.4rem !important;
  color: #fff !important;
  text-align: center !important;
  margin-bottom: 0.4rem !important;
}

.auth-card .auth-subtitle {
  text-align: center !important;
  color: rgba(212,212,216,0.55) !important;
  font-size: 0.85rem !important;
  margin-bottom: 1.75rem !important;
}

/* Inputs */
.input-group {
  position: relative !important;
  margin-bottom: 1rem !important;
}

.input-group i {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(212,212,216,0.40) !important;
  font-size: 0.9rem !important;
  pointer-events: none !important;
  transition: color 0.2s !important;
  z-index: 2 !important;
}

.input-group:focus-within i { color: #c4a35a !important; }

.input-group input,
.input-group select,
.login-form input,
.login-form select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select, textarea {
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(196,163,90,0.14) !important;
  border-radius: 10px !important;
  padding: 0.75rem 0.9rem 0.75rem 2.8rem !important;
  color: #d4d4d8 !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
  outline: none !important;
  box-shadow: none !important;
}

.input-group input:focus,
.input-group select:focus,
.login-form input:focus,
input:focus, select:focus, textarea:focus {
  border-color: rgba(196,163,90,0.45) !important;
  background: rgba(196,163,90,0.04) !important;
  box-shadow: 0 0 0 3px rgba(196,163,90,0.10), 0 0 16px rgba(196,163,90,0.06) !important;
  color: #fff !important;
}

.input-group input::placeholder,
.login-form input::placeholder,
input::placeholder { color: rgba(212,212,216,0.35) !important; }

/* Sin icono (inputs que no están en .input-group) */
input[type="text"]:not(.input-group input),
input[type="password"]:not(.input-group input),
input[type="email"]:not(.input-group input) {
  padding-left: 0.9rem !important;
}

/* ══ BOTONES ══════════════════════════════════════════════════════════════════ */
.btn-primary, .btn-login, .btn-register, input[type="submit"],
button[type="submit"], .submit-btn {
  background: linear-gradient(135deg, #c4a35a, #a8883c 60%, #8c6e2a) !important;
  color: #07070b !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.8rem 1.5rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  box-shadow: 0 4px 18px rgba(196,163,90,0.35), inset 0 1px rgba(255,255,255,0.20) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary:hover, .btn-login:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  box-shadow: 0 6px 28px rgba(196,163,90,0.55), inset 0 1px rgba(255,255,255,0.25) !important;
  transform: translateY(-2px) !important;
  color: #07070b !important;
}

.btn-secondary {
  background: rgba(196,163,90,0.10) !important;
  color: #c4a35a !important;
  border: 1px solid rgba(196,163,90,0.30) !important;
  border-radius: 10px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
  padding: 0.7rem 1.4rem !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.btn-secondary:hover {
  background: rgba(196,163,90,0.18) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(196,163,90,0.25) !important;
}

.btn-action {
  display: inline-block !important;
  padding: 5px 16px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #07070b !important;
  background: linear-gradient(135deg, #c4a35a, #8c6e2a) !important;
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  white-space: nowrap !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(196,163,90,0.30) !important;
}

.btn-action:hover {
  box-shadow: 0 4px 16px rgba(196,163,90,0.50) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* ══ USERCP ═══════════════════════════════════════════════════════════════════ */
.usercp-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
  font-size: 0.88rem !important;
}

.usercp-table td, .usercp-table th {
  background: rgba(255,255,255,0.025) !important;
  border: none !important;
  padding: 0.70rem 0.75rem !important;
  vertical-align: middle !important;
  transition: background 0.15s !important;
}

.usercp-table tr:first-child td, .usercp-table thead th {
  background: rgba(196,163,90,0.09) !important;
  color: #c4a35a !important;
  font-family: var(--font-display) !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
}

.usercp-table tbody tr:hover td { background: rgba(196,163,90,0.06) !important; }
.usercp-table tbody td:first-child { border-radius: 8px 0 0 8px !important; color: rgba(212,212,216,0.60) !important; }
.usercp-table tbody td:last-child  { border-radius: 0 8px 8px 0 !important; }

.usercp-character-card {
  background:
    linear-gradient(160deg, rgba(30,50,80,0.55) 0%, rgba(13,13,20,0.95) 100%),
    radial-gradient(ellipse at top left, rgba(196,163,90,0.10), transparent 60%) !important;
  border: 1px solid rgba(196,163,90,0.14) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  text-align: center !important;
  transition: var(--mc-transition) !important;
  margin-bottom: 18px !important;
  animation: 4s ease-in-out infinite module-glow-border !important;
}

.usercp-character-card:hover {
  border-color: rgba(196,163,90,0.35) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 32px rgba(196,163,90,0.15), 0 0 0 1px rgba(196,163,90,0.12) !important;
  animation-play-state: paused !important;
}

.usercp-character-img {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(196,163,90,0.22) !important;
  box-shadow: 0 0 14px rgba(196,163,90,0.18) !important;
  margin: 0 auto 1rem !important;
  display: block !important;
  transition: var(--mc-transition) !important;
}

.usercp-character-card:hover .usercp-character-img {
  border-color: rgba(196,163,90,0.55) !important;
  box-shadow: 0 0 22px rgba(196,163,90,0.35) !important;
}

.usercp-card-classname { color: #c4a35a !important; font-size: 0.82rem !important; font-weight: 700 !important; }
.usercp-card-level     { color: rgba(212,212,216,0.55) !important; font-size: 0.78rem !important; }
.usercp-card-name a    { color: #fff !important; text-decoration: none !important; }
.usercp-card-name a:hover { color: #c4a35a !important; }

/* Progress bars */
.stat-progress {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  height: 4px !important;
}

.stat-bar {
  height: 100% !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #2563eb, #c4a35a) !important;
  box-shadow: 0 0 8px rgba(196,163,90,0.45) !important;
  transition: width 0.6s ease-in-out !important;
}

/* ══ TICKER INFERIOR (server features bar) ════════════════════════════════════ */
.server-ticker, .features-ticker, .bottom-ticker,
.site-features, .ticker-wrap {
  background: rgba(7,7,11,0.95) !important;
  border-top: 1px solid rgba(196,163,90,0.14) !important;
  padding: 0.6rem 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.ticker-inner, .ticker-content {
  display: flex !important;
  gap: 3rem !important;
  animation: mc-ticker 30s linear infinite !important;
  white-space: nowrap !important;
}

.ticker-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(212,212,216,0.75) !important;
  white-space: nowrap !important;
}

.ticker-item i { color: #c4a35a !important; font-size: 0.85rem !important; }
.ticker-item.highlight { color: #fcc419 !important; }
.ticker-item.highlight i { color: #fcc419 !important; }

/* ══ ALERTAS Y MENSAJES ═══════════════════════════════════════════════════════ */
.alert, .message-box {
  border-radius: 10px !important;
  padding: 0.85rem 1.1rem !important;
  font-size: 0.88rem !important;
  border: 1px solid !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
  animation: float-up 0.35s ease-out both !important;
}

.alert-success, .message-success {
  background: rgba(105,219,124,0.08) !important;
  border-color: rgba(105,219,124,0.25) !important;
  color: #69db7c !important;
}

.alert-danger, .alert-error, .message-error {
  background: rgba(240,101,149,0.08) !important;
  border-color: rgba(240,101,149,0.25) !important;
  color: #f06595 !important;
}

.alert-warning, .message-warning {
  background: rgba(252,196,25,0.08) !important;
  border-color: rgba(252,196,25,0.22) !important;
  color: #fcc419 !important;
}

.alert-info, .message-info {
  background: rgba(196,163,90,0.08) !important;
  border-color: rgba(196,163,90,0.22) !important;
  color: #c4a35a !important;
}

/* ══ TABLAS GENÉRICAS (Bootstrap) ════════════════════════════════════════════ */
.table {
  color: #d4d4d8 !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
}

.table > thead > tr > th {
  background: rgba(196,163,90,0.08) !important;
  color: #c4a35a !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 0.65rem 0.9rem !important;
}

.table > tbody > tr > td {
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  padding: 0.6rem 0.9rem !important;
  vertical-align: middle !important;
  background: rgba(255,255,255,0.02) !important;
  transition: background 0.15s !important;
}

.table > tbody > tr:hover > td { background: rgba(196,163,90,0.05) !important; }

/* ══ PAGINACIÓN ═══════════════════════════════════════════════════════════════ */
.pagination { gap: 4px !important; display: flex !important; flex-wrap: wrap !important; }
.pagination > li > a,
.pagination > li > span {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(196,163,90,0.14) !important;
  color: rgba(212,212,216,0.70) !important;
  border-radius: 8px !important;
  padding: 6px 13px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  transition: var(--mc-transition) !important;
  text-decoration: none !important;
}

.pagination > li > a:hover,
.pagination > li.active > a,
.pagination > li.active > span {
  background: rgba(196,163,90,0.15) !important;
  border-color: rgba(196,163,90,0.38) !important;
  color: #c4a35a !important;
  box-shadow: 0 0 12px rgba(196,163,90,0.20) !important;
}

/* ══ BADGES Y LABELS ══════════════════════════════════════════════════════════ */
.badge, .label {
  border-radius: 6px !important;
  font-family: var(--font-display) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 3px 9px !important;
}

.label-primary, .badge-primary { background: rgba(196,163,90,0.18) !important; color: #c4a35a !important; border: 1px solid rgba(196,163,90,0.28) !important; }
.label-success, .badge-success { background: rgba(105,219,124,0.18) !important; color: #69db7c !important; border: 1px solid rgba(105,219,124,0.28) !important; }
.label-danger,  .badge-danger  { background: rgba(240,101,149,0.18) !important; color: #f06595 !important; border: 1px solid rgba(240,101,149,0.28) !important; }
.label-warning, .badge-warning { background: rgba(252,196,25,0.18) !important; color: #fcc419 !important; border: 1px solid rgba(252,196,25,0.28) !important; }
.label-info,    .badge-info    { background: rgba(204,93,232,0.18) !important; color: #cc5de8 !important; border: 1px solid rgba(204,93,232,0.28) !important; }

/* ══ FOOTER ═══════════════════════════════════════════════════════════════════ */
#footer, .site-footer, footer {
  background: rgba(7,7,11,0.98) !important;
  border-top: 1px solid rgba(196,163,90,0.10) !important;
  color: rgba(212,212,216,0.55) !important;
  font-size: 0.82rem !important;
  padding: 1.5rem 0 !important;
  text-align: center !important;
}

#footer a, .site-footer a, footer a {
  color: rgba(196,163,90,0.75) !important;
  transition: color 0.2s !important;
}

#footer a:hover, .site-footer a:hover, footer a:hover {
  color: #c4a35a !important;
}

/* ══ PAGE TITLE ═══════════════════════════════════════════════════════════════ */
.page-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 1.5rem !important;
  color: #fff !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.65rem !important;
  border-bottom: 1px solid rgba(196,163,90,0.14) !important;
  position: relative !important;
}

.page-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 50px !important;
  height: 1px !important;
  background: #c4a35a !important;
  box-shadow: 0 0 8px rgba(196,163,90,0.65) !important;
}

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .auth-card { padding: 1.75rem !important; }
  .sidebar-module { margin-bottom: 0.75rem !important; }
}

@media (max-width: 768px) {
  body { background-attachment: scroll !important; }
  .auth-card { padding: 1.5rem !important; max-width: 100% !important; }
  .download-card { flex-direction: column !important; align-items: flex-start !important; }
  .download-meta { flex-wrap: wrap !important; }
  .social-widgets-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ticker-inner { animation-duration: 18s !important; }
}

@media (max-width: 480px) {
  .rankings-class-filter { gap: 8px !important; }
  .rankings-class-filter-selection { min-width: 70px !important; padding: 0.65rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANELES Y PÁGINAS FALTANTES — Sección adicional
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ SIMPLE-RANK-CARDS (header / hero stats) ══════════════════════��═════════ */
.simple-rank-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.85rem 1rem !important;
  background: linear-gradient(105deg,rgba(30,50,80,.55),rgba(20,30,50,.40) 20%,rgba(13,13,20,.92) 55%,rgba(10,10,16,.98)),
              radial-gradient(ellipse at 0% 50%,rgba(196,163,90,.10),transparent 55%) !important;
  border: 1px solid rgba(196,163,90,.12) !important;
  border-left: 2px solid rgba(196,163,90,.50) !important;
  border-radius: 14px !important;
  min-width: 200px !important;
  transition: var(--mc-transition) !important;
  animation: 4s ease-in-out infinite module-glow-border !important;
}
.simple-rank-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(196,163,90,.30) !important;
  box-shadow: 0 8px 28px rgba(196,163,90,.15),-3px 0 16px rgba(196,163,90,.10) !important;
  animation-play-state: paused !important;
}

.card-image {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  position: relative !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

.rank-badge {
  position: absolute !important;
  bottom: -4px !important;
  right: -4px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 8px !important;
  color: #fff !important;
  border: 2px solid rgba(7,7,11,.95) !important;
}

.card-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.card-label {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,.80) !important;
  margin-bottom: 2px !important;
}

.player-name {
  font-size: 0.82rem !important;
  color: rgba(212,212,216,.75) !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.card-stat {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  color: #c4a35a !important;
  white-space: nowrap !important;
}

/* Estilos hero-stats-container */
.hero-stats-container {
  gap: 14px !important;
}

/* ��═ LOGIN SIDEBAR — FORM LINKS ══════════════════════════════════════════════ */
.form-links {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 0.65rem !important;
  gap: 0.5rem !important;
}
.form-links a {
  font-size: 0.75rem !important;
  color: rgba(212,212,216,.55) !important;
  text-decoration: none !important;
  transition: color .2s !important;
  font-family: var(--font-display) !important;
}
.form-links a:hover { color: #c4a35a !important; }

/* Panel usuario logueado */
.user-panel-widget {
  text-align: center !important;
}
.user-welcome {
  font-size: 0.85rem !important;
  color: rgba(212,212,216,.75) !important;
  margin-bottom: 0.85rem !important;
  padding: 0.55rem 0.75rem !important;
  background: rgba(196,163,90,.06) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(196,163,90,.12) !important;
}
.user-welcome strong {
  color: #c4a35a !important;
  font-family: var(--font-display) !important;
}

/* ══ RANKING AVATAR (sidebar) ════════════════════════════════════════════════ */
.rank-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(196,163,90,.22) !important;
  box-shadow: 0 0 8px rgba(196,163,90,.15) !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
}

.rank-first  .rank-avatar { border-color: rgba(255,215,0,.45) !important; box-shadow: 0 0 10px rgba(255,215,0,.30) !important; }
.rank-second .rank-avatar { border-color: rgba(192,192,192,.40) !important; }
.rank-third  .rank-avatar { border-color: rgba(205,127,50,.40) !important; }

/* ══ CASTLE SIEGE DETAILS ════════════════════════════════════════════════════ */
.cs-logo-container {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,215,0,.35) !important;
  box-shadow: 0 0 12px rgba(255,215,0,.20) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.cs-guild-logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.cs-details { flex: 1 !important; }
.cs-label {
  font-family: var(--font-display) !important;
  font-size: 0.60rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: rgba(252,196,25,.70) !important;
  text-transform: uppercase !important;
}
.cs-guild-name {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  color: #fcc419 !important;
  text-shadow: 0 0 10px rgba(252,196,25,.50) !important;
  line-height: 1.2 !important;
}
.cs-master {
  font-size: 0.78rem !important;
  color: rgba(212,212,216,.60) !important;
  margin-top: 2px !important;
}
.cs-master i { color: #c4a35a !important; margin-right: 4px !important; }

/* ══ MOBILE MENU TOGGLE ══════════════════════════════════════════════════════ */
.menu-toggle {
  display: none !important;
  width: 38px !important;
  height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(196,163,90,.10) !important;
  border: 1px solid rgba(196,163,90,.22) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #c4a35a !important;
  font-size: 1.1rem !important;
  transition: var(--mc-transition) !important;
}
.menu-toggle:hover {
  background: rgba(196,163,90,.20) !important;
  box-shadow: 0 0 12px rgba(196,163,90,.25) !important;
}
@media (max-width:768px) { .menu-toggle { display: flex !important; } }

/* ══ TIENDA / MARKET (deidad-marketplace-card) ═══════════════════════════════ */
.deidad-marketplace-card {
  background: linear-gradient(145deg,rgba(13,13,20,.90),rgba(7,7,11,.98)) !important;
  border: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 14px !important;
  padding: 1.1rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: var(--mc-transition) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.50) !important;
}
.deidad-marketplace-card:hover {
  border-color: rgba(196,163,90,.32) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 32px rgba(196,163,90,.15),0 0 0 1px rgba(196,163,90,.12) !important;
}

/* Item colors (MuOnline) */
.item-color-exc,  [class*="item-exc"]  { color: #2ff387 !important; }
.item-color-socket-opt { color: #cc33cc !important; }
.item-color-socket     { color: #cc66cc !important; }
.item-color-normal     { color: #ffffff !important; }
.item-color-life-opt   { color: #8cb0ea !important; }
.item-color-improved   { color: #f4cb3f !important; }
.item-color-anc        { color: #c4a35a !important; }
.item-color-anc-setopt { color: #ffcc66 !important; }
.item-color-fenrir     { color: #8cb0ea !important; }
.item-color-fenrir-gold { color: #f4cb3f !important; }
.item-color-errtel1    { color: #ff4444 !important; }
.item-color-errtel2    { color: #8cb0ea !important; }
.item-color-errtel3    { color: #e6bf3c !important; }
.item-color-errtel4    { color: #26e027 !important; }

/* Item tooltip / box */
.item-box {
  background: rgba(7,7,11,.92) !important;
  border: 1px solid rgba(196,163,90,.18) !important;
  border-radius: 10px !important;
  text-align: center !important;
  padding: 0.75rem !important;
  font-size: 0.78rem !important;
  min-width: 180px !important;
  max-width: 280px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.60),0 0 0 1px rgba(196,163,90,.08) !important;
}
.item-name {
  padding: 4px 8px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  display: inline-block !important;
}
.item-serial, .item-info { color: rgba(212,212,216,.90) !important; padding-top: 6px !important; font-size: 0.75rem !important; }
.item-info-section { padding-top: 8px !important; }
.item-class-req    { color: rgba(212,212,216,.90) !important; font-size: 0.75rem !important; }
.item-opt-jog      { color: #ff99cc !important; padding-top: 6px !important; font-size: 0.75rem !important; }
.item-opt-harmony  { color: #ffcc00 !important; padding-top: 6px !important; font-size: 0.75rem !important; }
.item-opt-skill, .item-opt-luck, .item-opt-life { color: #9aadd5 !important; font-size: 0.75rem !important; }
.item-opt-exc      { color: #2ff387 !important; padding-top: 6px !important; font-size: 0.75rem !important; }
.item-opt-anc      { color: #9aadd5 !important; padding-top: 6px !important; font-size: 0.75rem !important; }
.item-expiration   { color: #ff544f !important; padding-top: 6px !important; font-size: 0.75rem !important; }

/* ══ SHOP FILTER (selector de clase) ════════════════════════════════════════ */
.shopfilter {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  padding: 1rem 1.25rem !important;
  background: linear-gradient(105deg,rgba(30,50,80,.50),rgba(13,13,20,.90)) !important;
  border: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 14px !important;
  margin: 1.25rem 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.40) !important;
}
.shopfilter a {
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  border: 2px solid transparent !important;
  display: inline-block !important;
}
.shopfilter a:hover {
  transform: scale(1.10) translateY(-4px) !important;
  border-color: rgba(196,163,90,.45) !important;
  box-shadow: 0 8px 24px rgba(196,163,90,.25) !important;
}
.shopfilter img {
  width: 62px !important;
  height: 62px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.50) !important;
  transition: filter .3s !important;
}
.shopfilter a:hover img { filter: brightness(1.25) drop-shadow(0 0 10px rgba(196,163,90,.55)) !important; }

/* Item shop category tabs */
.item-shop-category {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 1rem 0 !important;
}
.item-shop-category a, .item-shop-category button {
  padding: 0.5rem 1rem !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 8px !important;
  color: rgba(212,212,216,.70) !important;
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
}
.item-shop-category a:hover,
.item-shop-category a.active,
.item-shop-category button:hover {
  background: rgba(196,163,90,.12) !important;
  border-color: rgba(196,163,90,.35) !important;
  color: #c4a35a !important;
  box-shadow: 0 0 14px rgba(196,163,90,.18) !important;
}

/* ══ SHOP DEIDAD BUTTONS ════════════════════════════════════��════════════════ */
.deidad-btn {
  background: none !important;
  border: none !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.80rem !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  color: rgba(212,212,216,.75) !important;
  width: 100% !important;
  border: 1px solid rgba(196,163,90,.12) !important;
}
.deidad-btn:hover {
  background: rgba(196,163,90,.10) !important;
  border-color: rgba(196,163,90,.30) !important;
  color: #c4a35a !important;
  box-shadow: 0 0 16px rgba(196,163,90,.20) !important;
}
.deidad-btn.active {
  background: rgba(196,163,90,.14) !important;
  border-color: rgba(196,163,90,.40) !important;
  color: #c4a35a !important;
}

.vs-btn.gradient-btn {
  display: inline-block !important;
  padding: 0.75rem 1.6rem !important;
  background: linear-gradient(135deg,rgba(13,13,20,.90),rgba(20,20,30,.95)) !important;
  border: 1px solid rgba(196,163,90,.25) !important;
  border-radius: 10px !important;
  color: rgba(212,212,216,.85) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.55) !important;
  position: relative !important;
  overflow: hidden !important;
}
.vs-btn.gradient-btn:hover {
  border-color: rgba(196,163,90,.50) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(196,163,90,.25) !important;
}

/* ══ DEIDADCREDITS (display de créditos) ════════════════════════════════════ */
.deidadcredits {
  background: linear-gradient(105deg,rgba(30,50,80,.55),rgba(13,13,20,.92)) !important;
  border: 1px solid rgba(196,163,90,.22) !important;
  border-radius: 14px !important;
  padding: 1rem 1.75rem !important;
  margin: 1.25rem auto !important;
  max-width: 480px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.45) !important;
  color: #d4d4d8 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}
.deidadcredits i {
  color: #fcc419 !important;
  font-size: 1.3rem !important;
  animation: rank-gold-pulse 2.5s ease-in-out infinite !important;
}
.deidadcredits span {
  color: #fcc419 !important;
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(252,196,25,.55) !important;
}

/* ══ DONACIONES MODULE (paneles de pago) ════════════════════════════════════ */
.donations-module .donation-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.donations-module .donation-tab-btn {
  padding: 0.75rem 1rem !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(204,93,232,.18) !important;
  border-radius: 10px !important;
  color: rgba(212,212,216,.70) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}
.donations-module .donation-tab-btn:hover,
.donations-module .donation-tab-btn.active {
  background: rgba(204,93,232,.12) !important;
  border-color: rgba(204,93,232,.40) !important;
  color: #cc5de8 !important;
  box-shadow: 0 0 16px rgba(204,93,232,.18) !important;
}
.donations-module .donation-content-wrapper {
  background: linear-gradient(160deg,rgba(30,50,80,.50),rgba(13,13,20,.95)) !important;
  border: 1px solid rgba(204,93,232,.14) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
}
/* Payment options */
.donation-package {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(204,93,232,.16) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  transition: var(--mc-transition) !important;
  cursor: pointer !important;
  text-align: center !important;
}
.donation-package:hover {
  background: rgba(204,93,232,.08) !important;
  border-color: rgba(204,93,232,.38) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(204,93,232,.18) !important;
}
.donation-package.popular {
  border-color: rgba(252,196,25,.35) !important;
  box-shadow: 0 0 0 1px rgba(252,196,25,.18) !important;
}
.donation-package .package-price {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 1.5rem !important;
  color: #cc5de8 !important;
  text-shadow: 0 0 12px rgba(204,93,232,.45) !important;
}
.donation-package .package-credits {
  font-size: 0.80rem !important;
  color: rgba(212,212,216,.65) !important;
  margin-top: 4px !important;
}

/* ══ SELL PRICE / MARKET INPUTS ══════════════════════════════════════════════ */
.sell-price-input {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(196,163,90,.18) !important;
  border-radius: 8px !important;
  padding: 0.65rem 0.9rem !important;
  color: #d4d4d8 !important;
  font-size: 0.9rem !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  width: 100% !important;
}
.sell-price-input:focus {
  border-color: rgba(196,163,90,.45) !important;
  box-shadow: 0 0 0 3px rgba(196,163,90,.10) !important;
}
.sell-price-input::placeholder { color: rgba(212,212,216,.35) !important; }

.dark-submit-btn {
  display: inline-block !important;
  padding: 0.65rem 1.25rem !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(196,163,90,.22) !important;
  border-radius: 8px !important;
  color: rgba(212,212,216,.85) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: .05em !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
}
.dark-submit-btn:hover {
  background: rgba(196,163,90,.12) !important;
  border-color: rgba(196,163,90,.38) !important;
  color: #c4a35a !important;
}

/* ══ FOOTER ══════════════════════════════════════════════════════════════════ */
#footer, .site-footer, footer {
  padding: 2rem 0 1.25rem !important;
}
.footer-links {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem 1.5rem !important;
  margin-bottom: 1rem !important;
}
.footer-links a {
  color: rgba(212,212,216,.50) !important;
  font-size: 0.80rem !important;
  transition: color .2s !important;
  text-decoration: none !important;
}
.footer-links a:hover { color: #c4a35a !important; }

.copy {
  color: rgba(212,212,216,.40) !important;
  font-size: 0.78rem !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ══ CONTENEDOR PRINCIPAL / LAYOUT ══════════════════════════════════════════ */
#wrapper, .main-wrapper, .cms-content-wrapper {
  min-height: calc(100vh - 120px) !important;
}

.cms-content {
  padding: 1.25rem 0 !important;
}

/* Separadores de sección */
.section-divider {
  height: 1px !important;
  background: linear-gradient(90deg,transparent,rgba(196,163,90,.22),transparent) !important;
  margin: 1.25rem 0 !important;
  border: none !important;
}

hr {
  border: none !important;
  height: 1px !important;
  background: rgba(255,255,255,.06) !important;
  margin: 1.25rem 0 !important;
}

/* ══ PANEL WELL (Bootstrap) ═════════════════════════════════════════════════ */
.well, .panel, .panel-default {
  background: linear-gradient(160deg,rgba(30,50,80,.50),rgba(13,13,20,.95)) !important;
  border: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.40) !important;
}
.panel-heading {
  background: rgba(196,163,90,.08) !important;
  border-bottom: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 14px 14px 0 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: #c4a35a !important;
  padding: 0.75rem 1rem !important;
}
.panel-body { padding: 1rem !important; }

/* ══ TABS (Bootstrap) ═══════════════════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 1px solid rgba(196,163,90,.14) !important;
  gap: 4px !important;
  display: flex !important;
  flex-wrap: wrap !important;
}
.nav-tabs > li > a {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(196,163,90,.12) !important;
  border-radius: 8px 8px 0 0 !important;
  color: rgba(212,212,216,.60) !important;
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  transition: var(--mc-transition) !important;
}
.nav-tabs > li > a:hover {
  background: rgba(196,163,90,.08) !important;
  border-color: rgba(196,163,90,.25) !important;
  color: #c4a35a !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  background: rgba(196,163,90,.14) !important;
  border-color: rgba(196,163,90,.35) !important;
  border-bottom-color: transparent !important;
  color: #c4a35a !important;
}
.tab-content { padding-top: 1rem !important; }

/* ══ DROPDOWN MENUS ══════════════════════════════════════════════════════════ */
.dropdown-menu {
  background: rgba(10,10,16,.97) !important;
  border: 1px solid rgba(196,163,90,.18) !important;
  border-radius: 12px !important;
  padding: 0.5rem 0 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.60) !important;
}
.dropdown-menu > li > a {
  color: rgba(212,212,216,.75) !important;
  font-size: 0.83rem !important;
  padding: 0.55rem 1rem !important;
  transition: background .15s, color .15s !important;
}
.dropdown-menu > li > a:hover {
  background: rgba(196,163,90,.10) !important;
  color: #c4a35a !important;
}
.dropdown-menu > li.divider {
  background: rgba(255,255,255,.06) !important;
  height: 1px !important;
  margin: 0.35rem 0 !important;
}

/* ══ MODAL ════════════════════════════════════════════════════════════════════ */
.modal-content {
  background: linear-gradient(160deg,rgba(20,30,50,.98),rgba(7,7,11,.99)) !important;
  border: 1px solid rgba(196,163,90,.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.70) !important;
}
.modal-header {
  border-bottom: 1px solid rgba(196,163,90,.14) !important;
  padding: 1rem 1.25rem !important;
}
.modal-header .modal-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-size: 1rem !important;
}
.modal-header .close {
  color: rgba(212,212,216,.55) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-size: 1.4rem !important;
}
.modal-header .close:hover { color: #f06595 !important; }
.modal-body  { padding: 1.25rem !important; }
.modal-footer {
  border-top: 1px solid rgba(196,163,90,.10) !important;
  padding: 0.85rem 1.25rem !important;
}
.modal-backdrop { background: rgba(7,7,11,.75) !important; }

/* ══ COUNTRY FLAG + ONLINE STATUS ════════════════════════════════════════════ */
.country-flag {
  border-radius: 3px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.40) !important;
  vertical-align: middle !important;
}
.online-status-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  background: #69db7c !important;
  box-shadow: 0 0 6px #69db7c !important;
  animation: pulse-green 2s ease-in-out infinite !important;
}

/* ══ MOBILE SOCIAL ONLY ══════════════════════════════════════════════════════ */
.mobile-social-only { display: none !important; }
@media (max-width: 768px) {
  .mobile-social-only { display: block !important; }
}

/* ══ SCROLLABLE TABLE WRAPPER ════════════════════════════════════════════════ */
.table-responsive {
  border: none !important;
  background: transparent !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* ══ LOADER SPINNER GLOBAL ═══════════════════════════════════════════════════ */
.fa-spin, .spinner { animation: mc-spin 0.8s linear infinite !important; }

/* ══ NOTIFICACIONES FLOTANTES ═══════════════════════════════���════════════════ */
.toast, .notification {
  background: linear-gradient(135deg,rgba(20,30,50,.98),rgba(10,10,16,.99)) !important;
  border: 1px solid rgba(196,163,90,.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.55) !important;
  color: #d4d4d8 !important;
  padding: 0.85rem 1.1rem !important;
  animation: slideInRight 0.35s ease-out both !important;
}


/* ════════════════════════════════���══════════════════════════════════════════
   PÁGINA: MARKET / TIENDA DE PERSONAJES
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Título sección haze-title — */
.haze-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #d4d4d8 !important;
  margin: 8px 0 10px !important;
}
.haze-title .ht-badge {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #c4a35a 0%, #8c6e2a 100%) !important;
  box-shadow: 0 6px 18px rgba(196,163,90,.35), inset 0 0 0 1px rgba(255,255,255,.18) !important;
  color: #07070b !important;
  flex-shrink: 0 !important;
  font-size: 1rem !important;
}
.haze-title .ht-text { line-height: 1.15 !important; }
.haze-title .ht-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-size: 1.2rem !important;
  color: #fff !important;
}
.haze-title .ht-sub {
  font-size: 0.72rem !important;
  color: rgba(212,212,216,.55) !important;
  margin-top: 2px !important;
}
.ht-divider {
  height: 2px !important;
  border-radius: 2px !important;
  margin: 8px 0 18px !important;
  background: linear-gradient(90deg, rgba(196,163,90,.70) 0%, rgba(196,163,90,.22) 50%, transparent 100%) !important;
  border: none !important;
}
.haze-title--market { width: fit-content !important; margin: 0 auto 6px !important; }
.haze-title--market .ht-badge {
  background: linear-gradient(135deg, #ffb84d 0%, #f06595 100%) !important;
  box-shadow: 0 6px 18px rgba(240,101,149,.30) !important;
}

/* — Panel Market Shell — */
.market-shell {
  max-width: 1400px !important;
  margin: 0 auto 2rem !important;
  padding: 1.1rem 1.1rem 1.5rem !important;
  border-radius: 18px !important;
  background:
    radial-gradient(120% 140% at 10% -10%, rgba(196,163,90,.06) 0%, transparent 42%),
    radial-gradient(120% 140% at 90% 110%, rgba(240,101,149,.05) 0%, transparent 42%),
    rgba(13,13,20,.95) !important;
  border: 1px solid rgba(196,163,90,.10) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* — Deidad Item Card (marketplace individual) — */
.deidad-item-card {
  background: linear-gradient(160deg, rgba(20,30,50,.80), rgba(7,7,11,.98)) !important;
  border: 1px solid rgba(196,163,90,.12) !important;
  border-radius: 14px !important;
  transition: var(--mc-transition) !important;
  overflow: hidden !important;
  position: relative !important;
  height: 300px !important;
}
.deidad-item-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(196,163,90,.30) !important;
  box-shadow: 0 12px 32px rgba(196,163,90,.18) !important;
}
.deidad-item-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #c4a35a, #f06595, #cc5de8, #fcc419, #c4a35a) !important;
  background-size: 200% !important;
  animation: shimmer-sweep 3s linear infinite !important;
}
.deidad-item-image-wrapper {
  height: 160px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.30) !important;
}
.deidad-item-image-wrapper img {
  max-height: 150px !important;
  object-fit: contain !important;
  transition: transform .3s !important;
  filter: drop-shadow(0 4px 12px rgba(196,163,90,.25)) !important;
}
.deidad-item-card:hover .deidad-item-image-wrapper img { transform: scale(1.08) !important; }
.deidad-item-btn {
  display: block !important;
  width: 100% !important;
  padding: 0.6rem 1rem !important;
  background: linear-gradient(135deg, #8c6e2a, #c4a35a) !important;
  border: none !important;
  border-radius: 0 0 14px 14px !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  text-align: center !important;
  text-decoration: none !important;
}
.deidad-item-btn:hover {
  background: linear-gradient(135deg, #c4a35a, #8c6e2a) !important;
  box-shadow: 0 4px 16px rgba(196,163,90,.45) !important;
  color: #fff !important;
}

/* — Market Pagination — */
.market-pagination { margin-top: 1.5rem !important; text-align: center !important; }
.market-pagination .pagination {
  display: inline-flex !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  gap: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.market-pagination .page-item .page-link {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 8px !important;
  color: rgba(212,212,216,.65) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  padding: 0.5rem 0.85rem !important;
  transition: var(--mc-transition) !important;
}
.market-pagination .page-item .page-link:hover {
  background: rgba(196,163,90,.12) !important;
  border-color: rgba(196,163,90,.35) !important;
  color: #c4a35a !important;
}
.market-pagination .page-item.active .page-link {
  background: rgba(196,163,90,.20) !important;
  border-color: rgba(196,163,90,.50) !important;
  color: #c4a35a !important;
  box-shadow: 0 0 12px rgba(196,163,90,.25) !important;
}
.market-pagination .page-item.disabled .page-link {
  color: rgba(212,212,216,.25) !important;
  pointer-events: none !important;
}

/* — My Vault (bóveda de personaje) — */
.my-vault, .my-vault-ext {
  background: linear-gradient(160deg, rgba(20,30,50,.80), rgba(7,7,11,.98)) !important;
  border: 1px solid rgba(196,163,90,.12) !important;
  border-radius: 14px !important;
  padding: 1rem !important;
}

/* — Mucms Item Tooltip — */
.mucms-item-tooltip {
  position: absolute !important;
  display: none !important;
  min-width: 220px !important;
  z-index: 9999 !important;
  padding: 4px !important;
}
.mucms-item-tooltip .item-box {
  box-shadow: 0 12px 32px rgba(0,0,0,.75), 0 0 0 1px rgba(196,163,90,.14) !important;
}

/* — Muun tooltip — */
.muun-name { color: #9aadd5 !important; font-size: 0.82rem !important; padding: 2px 0 !important; }
.muun-info { color: #9aadd5 !important; font-size: 0.75rem !important; }
.muun-opt-expiration { color: #ff7c3c !important; margin-top: 0.75rem !important; font-size: 0.75rem !important; }
.muun-opt-expiration-date { color: #9aadd5 !important; font-size: 0.75rem !important; }
.item-mastery-title { color: #cc66cc !important; font-weight: 700 !important; font-size: 0.75rem !important; }
.item-opt-mastery { color: #8cb0ea !important; padding-top: 4px !important; font-size: 0.75rem !important; }
.item-opt-socket { color: #cc66cc !important; padding-top: 6px !important; font-size: 0.75rem !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA: SHOP (Tienda de Sets por Clase)
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Botón filtro por clase — */
.vs-btn-filter.gradient-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0.75rem 1.2rem !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(196,163,90,.18) !important;
  border-radius: 10px !important;
  color: rgba(212,212,216,.75) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}
.vs-btn-filter.gradient-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,.15), transparent) !important;
  transition: left .5s !important;
}
.vs-btn-filter.gradient-btn:hover {
  background: rgba(196,163,90,.12) !important;
  border-color: rgba(196,163,90,.40) !important;
  color: #c4a35a !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 20px rgba(196,163,90,.20) !important;
}
.vs-btn-filter.gradient-btn:hover::before { left: 100% !important; }
.vs-btn-filter.gradient-btn img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.50)) !important;
  transition: filter .3s !important;
}
.vs-btn-filter.gradient-btn:hover img {
  filter: brightness(1.3) drop-shadow(0 0 8px rgba(196,163,90,.55)) !important;
  transform: scale(1.08) !important;
}

/* — Setshop (panel de set por clase) — */
.setshop {
  padding: 0.85rem !important;
  margin-bottom: 1.5rem !important;
  animation: slideInRight .4s ease-out both !important;
}
.setshop .panel {
  background: linear-gradient(160deg, rgba(20,30,50,.75), rgba(7,7,11,.97)) !important;
  border: 1px solid rgba(196,163,90,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.50) !important;
  overflow: hidden !important;
  transition: var(--mc-transition) !important;
  height: 100% !important;
}
.setshop .panel:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(196,163,90,.30) !important;
  box-shadow: 0 12px 36px rgba(196,163,90,.18) !important;
}
.setshop .panel-heading {
  background: rgba(196,163,90,.08) !important;
  border-bottom: 1px solid rgba(196,163,90,.14) !important;
  padding: 1.1rem !important;
  color: #c4a35a !important;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  text-shadow: 0 0 12px rgba(196,163,90,.40) !important;
}
.setshop .panel-body {
  padding: 1.5rem 1rem !important;
  text-align: center !important;
  background: rgba(0,0,0,.20) !important;
  min-height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.setshop .panel-body video {
  width: 130px !important;
  height: auto !important;
  border-radius: 10px !important;
  box-shadow: 0 0 20px rgba(196,163,90,.30) !important;
}
.setshop .panel-footer {
  padding: 1rem !important;
  background: rgba(0,0,0,.30) !important;
  border-top: 1px solid rgba(196,163,90,.10) !important;
  text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA: DONACIONES (Payment Module)
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Tab buttons donaciones — */
.donations-module .tab-button {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(204,93,232,.16) !important;
  border-left: 3px solid transparent !important;
  border-radius: 10px !important;
  padding: 0.85rem 1.25rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  color: rgba(212,212,216,.65) !important;
  text-align: left !important;
  text-decoration: none !important;
}
.donations-module .tab-button:hover,
.donations-module .tab-button.active {
  background: rgba(204,93,232,.10) !important;
  color: #cc5de8 !important;
  border-left-color: #cc5de8 !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 16px rgba(204,93,232,.15) !important;
}
.donations-module .tab-button-icon {
  font-size: 1.3rem !important;
  color: rgba(212,212,216,.55) !important;
  transition: color .2s !important;
  flex-shrink: 0 !important;
  width: 36px !important; height: 36px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
}
.donations-module .tab-button-icon img { width: 60px !important; height: auto !important; }
.donations-module .tab-button:hover .tab-button-icon,
.donations-module .tab-button.active .tab-button-icon { color: #cc5de8 !important; }
.donations-module .tab-button-text {
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  flex: 1 !important;
}
.donations-module .tab-button-badge {
  display: inline-block !important;
  font-size: 0.65rem !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.donations-module .badge-auto { background: rgba(204,93,232,.12) !important; color: #cc5de8 !important; }
.donations-module .badge-manual { background: rgba(240,101,149,.12) !important; color: #f06595 !important; }

/* — Donation Cards Container — */
.donations-module .donation-cards-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 1rem !important;
  padding: 0.5rem 0 !important;
}
.donations-module .donation-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(204,93,232,.16) !important;
  border-radius: 14px !important;
  padding: 1.25rem 0.85rem !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}
.donations-module .donation-card:hover {
  background: rgba(204,93,232,.08) !important;
  border-color: rgba(204,93,232,.38) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(204,93,232,.20) !important;
}
.donations-module .donation-card.popular {
  border-color: rgba(252,196,25,.35) !important;
  box-shadow: 0 0 0 1px rgba(252,196,25,.14) !important;
}
.donations-module .donation-card.popular::before {
  content: 'POPULAR' !important;
  position: absolute !important;
  top: 8px !important; right: -22px !important;
  background: linear-gradient(135deg, #fcc419, #f59f00) !important;
  color: #07070b !important;
  font-family: var(--font-display) !important;
  font-size: 0.55rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  padding: 2px 28px !important;
  transform: rotate(45deg) !important;
  transform-origin: top right !important;
}
.donations-module .donation-card-icon {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  margin: 0 auto 0.75rem !important;
  display: block !important;
  transition: transform .3s !important;
}
.donations-module .donation-card:hover .donation-card-icon { transform: scale(1.10) !important; }
.donations-module .donation-card-title {
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #cc5de8 !important;
  margin-bottom: 0.4rem !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.donations-module .donation-card-amount {
  background: linear-gradient(135deg, #cc5de8, #f06595) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  display: block !important;
}
.donations-module .donation-card-divider {
  height: 1px !important;
  background: rgba(204,93,232,.14) !important;
  margin: 0.75rem 0 !important;
  border: none !important;
}
.donations-module .donation-card-footer a,
.donations-module .donation-card-footer button {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem !important;
  background: linear-gradient(135deg, #cc5de8, #f06595) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
  text-decoration: none !important;
}
.donations-module .donation-card-footer a:hover,
.donations-module .donation-card-footer button:hover {
  box-shadow: 0 6px 18px rgba(204,93,232,.40) !important;
  transform: translateY(-1px) !important;
}

/* — Tab content panel — */
.donations-module .tab-content {
  display: none !important;
  animation: slideInRight .4s ease-out both !important;
}
.donations-module .tab-content.active { display: block !important; }
.donations-module .donation-content-wrapper {
  background: linear-gradient(160deg, rgba(20,30,50,.50), rgba(7,7,11,.95)) !important;
  border: 1px solid rgba(204,93,232,.12) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  min-height: 400px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA: USERCP — Panel Admin Estilo
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-wrapper {
  display: flex !important;
  min-height: 100vh !important;
  background: #07070b !important;
}
.admin-sidebar {
  width: 260px !important;
  background: rgba(13,13,20,.98) !important;
  border-right: 1px solid rgba(196,163,90,.10) !important;
  position: fixed !important;
  height: 100vh !important;
  left: 0 !important; top: 0 !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
  transition: transform .3s ease !important;
}
.admin-sidebar-header {
  padding: 1.25rem !important;
  border-bottom: 1px solid rgba(196,163,90,.10) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
}
.admin-sidebar-logo {
  width: 38px !important; height: 38px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
}
.admin-sidebar-title {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
}
.admin-sidebar-menu { padding: 0.75rem 0 !important; }
.admin-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.8rem 1.25rem !important;
  color: rgba(212,212,216,.60) !important;
  text-decoration: none !important;
  transition: var(--mc-transition) !important;
  border-left: 3px solid transparent !important;
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.admin-menu-item:hover,
.admin-menu-item.active {
  background: rgba(196,163,90,.08) !important;
  color: #c4a35a !important;
  border-left-color: #c4a35a !important;
}
.admin-menu-item-logout { color: rgba(240,101,149,.75) !important; border-left-color: transparent !important; }
.admin-menu-item-logout:hover {
  background: rgba(240,101,149,.08) !important;
  color: #f06595 !important;
  border-left-color: #f06595 !important;
}
.admin-menu-item i { width: 18px !important; text-align: center !important; }
.admin-menu-icon { width: 18px !important; height: 18px !important; object-fit: contain !important; }

.admin-main { flex: 1 !important; margin-left: 260px !important; display: flex !important; flex-direction: column !important; }
.admin-header {
  background: rgba(13,13,20,.95) !important;
  border-bottom: 1px solid rgba(196,163,90,.10) !important;
  padding: 0.9rem 1.5rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}
.admin-header-title {
  font-family: var(--font-display) !important;
  color: #fff !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
}
.admin-toggle-sidebar {
  display: none !important;
  background: transparent !important;
  border: none !important;
  color: #d4d4d8 !important;
  font-size: 1.3rem !important;
  cursor: pointer !important;
  padding: 0.4rem !important;
}

/* — Stat Cards — */
.admin-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}
.admin-stat-card {
  background: linear-gradient(160deg, rgba(20,30,50,.75), rgba(7,7,11,.97)) !important;
  border: 1px solid rgba(204,93,232,.18) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  transition: var(--mc-transition) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(74,29,150,.25) !important;
}
.admin-stat-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  border-color: rgba(204,93,232,.38) !important;
  box-shadow: 0 12px 32px rgba(74,29,150,.40) !important;
}
.admin-stat-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
}
.admin-stat-title {
  font-family: var(--font-display) !important;
  color: #cc5de8 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.admin-stat-icon {
  width: 44px !important; height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  font-size: 1.3rem !important;
}
.admin-stat-icon.primary { background: rgba(204,93,232,.12) !important; color: #cc5de8 !important; box-shadow: 0 0 16px rgba(204,93,232,.20) !important; }
.admin-stat-icon.success { background: rgba(105,219,124,.12) !important; color: #69db7c !important; box-shadow: 0 0 16px rgba(105,219,124,.20) !important; }
.admin-stat-icon.danger  { background: rgba(240,101,149,.12) !important; color: #f06595 !important; box-shadow: 0 0 16px rgba(240,101,149,.20) !important; }
.admin-stat-icon.info    { background: rgba(196,163,90,.12) !important; color: #c4a35a !important; box-shadow: 0 0 16px rgba(196,163,90,.20) !important; }
.admin-stat-value {
  background: linear-gradient(135deg, #cc5de8, #f06595) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}
.admin-stat-change { display: flex !important; align-items: center !important; gap: 0.4rem !important; font-size: 0.78rem !important; }
.admin-stat-change.positive { color: #69db7c !important; }
.admin-stat-change.negative { color: #f06595 !important; }

/* — Table Section — */
.admin-table-card {
  background: linear-gradient(160deg, rgba(20,30,50,.75), rgba(7,7,11,.97)) !important;
  border: 1px solid rgba(204,93,232,.16) !important;
  border-radius: 16px !important;
  padding: 1.25rem !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(74,29,150,.22) !important;
}
.admin-table-title {
  font-family: var(--font-display) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  margin-bottom: 1rem !important;
}
.admin-table { width: 100% !important; border-collapse: collapse !important; }
.admin-table thead { background: rgba(204,93,232,.08) !important; }
.admin-table th {
  padding: 0.75rem 1rem !important;
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #cc5de8 !important;
  border-bottom: 1px solid rgba(204,93,232,.14) !important;
  text-align: left !important;
}
.admin-table td {
  padding: 0.75rem 1rem !important;
  font-size: 0.83rem !important;
  color: rgba(212,212,216,.80) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.admin-table tr:hover td { background: rgba(204,93,232,.05) !important; }
.player-profile-link, .guild-profile-link {
  color: #c4a35a !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  transition: var(--mc-transition) !important;
}
.player-profile-link:hover, .guild-profile-link:hover {
  color: #fcc419 !important;
  text-shadow: 0 0 8px rgba(252,196,25,.40) !important;
}

/* — Charts Grid — */
.admin-charts-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}
.admin-chart-card {
  background: linear-gradient(160deg, rgba(20,30,50,.75), rgba(7,7,11,.97)) !important;
  border: 1px solid rgba(196,163,90,.12) !important;
  border-radius: 14px !important;
  padding: 1.25rem !important;
}
.admin-chart-title {
  font-family: var(--font-display) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.admin-chart-placeholder {
  height: 250px !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  color: rgba(212,212,216,.40) !important;
  border: 1px dashed rgba(255,255,255,.08) !important;
}

/* — Responsive UserCP — */
@media (max-width: 768px) {
  .admin-sidebar { transform: translateX(-100%) !important; }
  .admin-sidebar.active { transform: translateX(0) !important; }
  .admin-main { margin-left: 0 !important; }
  .admin-toggle-sidebar { display: block !important; }
  .admin-charts-grid { grid-template-columns: 1fr !important; }
  .admin-stats-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA: PERFILES DE PERSONAJE — FIX LAYOUT + DARK THEME
   ═══════════════════════════════════════════════════════════════════════════ */

/* Profile layout → manejado por JavaScript en header.php (DOM manipulation) */

/* ── Imagen de personaje (tarjeta izquierda) ── */
.profile-character-deidad .profile-video-container {
  border: 1px solid rgba(196,163,90,.25) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(7,7,11,.80) !important;
  height: 340px !important;
}
.profile-character-deidad .profile-video-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.profile-character-deidad .profile-video-overlay {
  background: linear-gradient(to top, rgba(7,7,11,.92) 0%, rgba(7,7,11,.20) 55%, transparent 100%) !important;
}
.profile-character-deidad .profile-character-name {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #c4a35a !important;
  text-shadow: 0 0 12px rgba(196,163,90,.50) !important;
  letter-spacing: .05em !important;
}
.profile-character-deidad .profile-character-class {
  font-size: .78rem !important;
  color: rgba(212,212,216,.60) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ── Contenedor de stats (derecha) ── */
.profile-character-deidad .profile-info-container {
  background: rgba(14,14,22,.90) !important;
  border: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  height: 340px !important;
  overflow-y: auto !important;
}
.profile-character-deidad .profile-info-col {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  padding: 0 0.4rem !important;
}

/* Labels de stats */
.profile-character-deidad .form-label {
  display: flex !important;
  align-items: center !important;
  gap: .35rem !important;
  font-family: var(--font-display) !important;
  font-size: .65rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,.65) !important;
  margin-bottom: .3rem !important;
  font-weight: 600 !important;
}
.profile-character-deidad .form-label i {
  color: rgba(196,163,90,.55) !important;
  font-size: .75rem !important;
}
.profile-character-deidad .profile-form-group-info { margin-bottom: .75rem !important; }

/* Inputs de stats */
.profile-character-deidad .profile-form-input {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(196,163,90,.12) !important;
  border-radius: 8px !important;
  padding: .55rem .75rem !important;
  color: var(--text) !important;
  font-size: .88rem !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
}
.profile-character-deidad .profile-form-input.blue-text {
  color: #c4a35a !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
}

/* ── Sección Gear / Deaths (fila inferior) ── */
.profile-character-deidad .profile-section-header { margin-bottom: 0.75rem !important; }
.profile-character-deidad .profile-section-header h2,
.profile-character-deidad .profile-section-title h2 {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #c4a35a !important;
  letter-spacing: .08em !important;
  text-shadow: 0 0 10px rgba(196,163,90,.30) !important;
  border-bottom: 1px solid rgba(196,163,90,.18) !important;
  padding-bottom: .6rem !important;
  margin-bottom: .75rem !important;
}

/* Contenedor del equipo */
.profile-character-deidad .profile-gear-container {
  background: rgba(14,14,22,.85) !important;
  border: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-height: 300px !important;
  overflow: hidden !important;
}

/* Grilla de equipo — respetar posiciones originales del CMS */
.profilechar {
  padding-top: 65px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.profile_item0, .profile_item1, .profile_item2, .profile_item3,
.profile_item4, .profile_item5, .profile_item6, .profile_item7,
.profile_item8, .profile_item9, .profile_item10, .profile_item11,
.profile_item12, .profile_item13, .profile_item14, .profile_item15 {
  /* NO sobreescribir posición — el CMS usa float+top+left específicos */
  cursor: pointer !important;
}

/* Contenedor de muertes */
.profile-character-deidad .profile-deaths-container {
  background: rgba(14,14,22,.85) !important;
  border: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  min-height: 300px !important;
  overflow-y: auto !important;
}
.profile-character-deidad .profile-death-entry {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(196,163,90,.10) !important;
  border-radius: 8px !important;
  margin-bottom: .5rem !important;
}
.profile-character-deidad .profile-death-entry:hover {
  border-color: rgba(196,163,90,.30) !important;
  background: rgba(196,163,90,.05) !important;
}
.profile-character-deidad .profile-killer-name { color: #c4a35a !important; }
.profile-character-deidad .profile-no-deaths {
  color: rgba(212,212,216,.40) !important;
  text-align: center !important;
  padding: 2rem !important;
}

/* Enlace "Volver al inicio" */
.profile-character-deidad .profile-footer-link { margin-top: 1rem !important; text-align: center !important; }
.profile-character-deidad .profile-footer-link a {
  color: rgba(196,163,90,.55) !important;
  font-size: .85rem !important;
  text-decoration: none !important;
  transition: color .2s !important;
}
.profile-character-deidad .profile-footer-link a:hover { color: #c4a35a !important; }

/* Responsive */
@media (max-width: 900px) {
  .register-form.profile-character-deidad {
    grid-template-columns: 1fr !important;
  }
  .profile-character-deidad > .profile-section-title,
  .profile-character-deidad > .profile-row:first-of-type,
  .profile-character-deidad > .profile-col-9,
  .profile-character-deidad > .profile-row:last-of-type {
    grid-column: 1 !important;
    grid-row: auto !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
  }
  .profile-character-deidad > .profile-row:last-of-type > .profile-col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Item name background */
.item-name-bg-color, [style*="item-name-bg-color"] { background: rgba(7,7,11,.90) !important; }

/* ══════════════════════════════════════════��════════════════════════════════
   PÁGINA: ALERTAS (alert.css override integration)
   ═══════════════════════════════════════════════════════════════════════════ */

.alert {
  position: relative !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.25rem !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  animation: slideInRight .3s ease-out both !important;
  backdrop-filter: blur(10px) !important;
}
.alert-header { display: flex !important; align-items: center !important; gap: 0.5rem !important; }
.alert-title { font-family: var(--font-display) !important; font-size: 0.9rem !important; font-weight: 800 !important; margin: 0 !important; text-transform: uppercase !important; letter-spacing: .05em !important; }
.alert-body { font-size: 0.85rem !important; line-height: 1.6 !important; margin: 0 !important; }
.alert-danger  { background: rgba(240,101,149,.10) !important; border-color: rgba(240,101,149,.30) !important; color: #ffb3cc !important; }
.alert-danger .alert-title { color: #f06595 !important; }
.alert-success { background: rgba(105,219,124,.10) !important; border-color: rgba(105,219,124,.30) !important; color: #b2f2bb !important; }
.alert-success .alert-title { color: #69db7c !important; }
.alert-warning { background: rgba(252,196,25,.10) !important; border-color: rgba(252,196,25,.30) !important; color: #ffe8a3 !important; }
.alert-warning .alert-title { color: #fcc419 !important; }
.alert-info    { background: rgba(196,163,90,.10) !important; border-color: rgba(196,163,90,.30) !important; color: #a5d8ff !important; }
.alert-info .alert-title { color: #c4a35a !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA: RANKINGS — Filtros de clase + tabla completa
   ═══════════════════════════════════════════════════════════════════════════ */

.rankings-class-filter {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 1rem 1.25rem !important;
  background: linear-gradient(105deg, rgba(30,50,80,.50), rgba(13,13,20,.90)) !important;
  border: 1px solid rgba(196,163,90,.12) !important;
  border-radius: 14px !important;
  margin-bottom: 1.25rem !important;
}
.rankings-class-filter a, .rankings-filter-btn {
  padding: 0.5rem 1.1rem !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 8px !important;
  color: rgba(212,212,216,.65) !important;
  font-family: var(--font-display) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: var(--mc-transition) !important;
}
.rankings-class-filter a:hover,
.rankings-class-filter a.active,
.rankings-filter-btn.active {
  background: rgba(196,163,90,.14) !important;
  border-color: rgba(196,163,90,.38) !important;
  color: #c4a35a !important;
  box-shadow: 0 0 12px rgba(196,163,90,.20) !important;
}

/* ════════════════════════════════════════════��══════════════════════════════
   INFORMACIÓN DEL SERVIDOR (página /info/)
   ═══════════════════════════════════════════════════════════════════════════ */

.info-card, .server-feature-card {
  background: linear-gradient(160deg, rgba(20,30,50,.70), rgba(7,7,11,.97)) !important;
  border: 1px solid rgba(196,163,90,.12) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  transition: var(--mc-transition) !important;
  text-align: center !important;
}
.info-card:hover, .server-feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(196,163,90,.28) !important;
  box-shadow: 0 10px 28px rgba(196,163,90,.14) !important;
}
.info-card-icon {
  font-size: 2rem !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}
.info-card-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #c4a35a !important;
  margin-bottom: 0.4rem !important;
}
.info-card-value {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIÓN HERO (Stats cards en header principal)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stats container y layout */
#hero-stats, .hero-stats, [class*="hero-stat"] {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RANKINGS TABLA — Columnas y clases especiales
   ═══════════════════════════════════════════════════════════════════════════ */

.table-responsive.rankings-table {
  border: 1px solid rgba(196,163,90,.10) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET BOOTSTRAP CONFLICTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure Bootstrap panels don't override dark theme */
.panel-default > .panel-heading { background-image: none !important; }
.panel { border: none !important; box-shadow: none !important; }
.well { box-shadow: none !important; }
a { color: #c4a35a !important; }
a:hover { color: #74c0fc !important; text-decoration: none !important; }

/* Keep anchor colors for specific elements */
.btn-more, .btn-more:hover,
.deidad-item-btn, .deidad-item-btn:hover,
.donations-module .donation-card-footer a,
.donations-module .tab-button,
.admin-menu-item, .admin-menu-item:hover,
.player-profile-link, .guild-profile-link { color: inherit !important; }
.btn-more { color: #fff !important; }
.btn-more:hover { color: #fff !important; }
.admin-menu-item { color: rgba(212,212,216,.60) !important; }
.admin-menu-item:hover, .admin-menu-item.active { color: #c4a35a !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile completo
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
  .admin-charts-grid { grid-template-columns: 1fr !important; }
  .donations-module.donation-container {
    grid-template-columns: 1fr !important;
  }
  .donations-module .donation-tabs { position: static !important; }
}

@media (max-width: 768px) {
  .haze-title .ht-title { font-size: 1rem !important; }
  .admin-main { margin-left: 0 !important; }
  .admin-sidebar { transform: translateX(-100%) !important; width: 240px !important; }
  .admin-sidebar.active { transform: translateX(0) !important; }
  .admin-toggle-sidebar { display: flex !important; align-items: center !important; }
  .setshop { padding: 0.5rem !important; }
  .shopfilter img { width: 48px !important; height: 48px !important; }
  .deidadcredits { font-size: 1rem !important; padding: 0.75rem 1.25rem !important; }
  .market-shell { padding: 0.75rem 0.75rem 1rem !important; border-radius: 14px !important; }
  .donations-module .donation-cards-container { grid-template-columns: repeat(2, 1fr) !important; }
  .admin-stats-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .donations-module .donation-cards-container { grid-template-columns: 1fr !important; }
  .simple-rank-card { min-width: 100% !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MUCORE — CLASSIC MODE
   Paleta clásica dark fantasy (menos neón, más dorado/sobrio)
   Reemplaza neon blue/pink/purple con gold/rose/deep-purple
   ══��════════════════════════════════════════════════════════════════════════ */

/* ══ VARIABLES — Paleta clásica ═════════════════════════════════════════════ */
:root {
  --mc-blue:     #c4a35a !important;
  --mc-pink:     #a05060 !important;
  --mc-purple:   #6b4e8a !important;
  --mc-yellow:   #c47820 !important;
  --mc-green:    #4a9a60 !important;
  --mc-border:   rgba(196,163,90,0.12) !important;
  --color-blue:   #c4a35a !important;
  --color-pink:   #a05060 !important;
  --color-purple: #6b4e8a !important;
  --color-yellow: #c47820 !important;
  --color-green:  #4a9a60 !important;
}

/* ══ FONDO — más oscuro/clásico, sin el gradient azul ══════════════════════ */
html, body {
  background-color: #050508 !important;
}
body {
  background-image:
    linear-gradient(to bottom, rgba(5,5,8,0.82) 0%, rgba(5,5,8,0.50) 30%, rgba(5,5,8,0.88) 70%, #050508 100%),
    url('../img/fondobaires.png') !important;
}

/* ══ ANIMACIONES — Reducir intensidad de glows ══════════════════════════════ */
@keyframes module-glow-border {
  0%, to { box-shadow: 0 0 0 1px rgba(196,163,90,0.05), 0 4px 20px rgba(0,0,0,0.50); }
  50%    { box-shadow: 0 0 0 1px rgba(196,163,90,0.12), 0 4px 28px rgba(0,0,0,0.60); }
}
@keyframes glow-pulse {
  0%, to { box-shadow: 0 0 6px rgba(196,163,90,0.10), 0 0 0 1px rgba(196,163,90,0.06); }
  50%    { box-shadow: 0 0 16px rgba(196,163,90,0.20), 0 0 0 1px rgba(196,163,90,0.14); }
}
@keyframes glow-pulse-yellow {
  0%, to { box-shadow: 0 0 6px rgba(196,120,32,0.10), 0 0 0 1px rgba(196,120,32,0.06); }
  50%    { box-shadow: 0 0 16px rgba(196,120,32,0.22), 0 0 0 1px rgba(196,120,32,0.14); }
}
@keyframes glow-pulse-pink {
  0%, to { box-shadow: 0 0 6px rgba(160,80,96,0.10), 0 0 0 1px rgba(160,80,96,0.06); }
  50%    { box-shadow: 0 0 16px rgba(160,80,96,0.22), 0 0 0 1px rgba(160,80,96,0.14); }
}
@keyframes glow-pulse-green {
  0%, to { box-shadow: 0 0 6px rgba(74,154,96,0.10), 0 0 0 1px rgba(74,154,96,0.06); }
  50%    { box-shadow: 0 0 16px rgba(74,154,96,0.22), 0 0 0 1px rgba(74,154,96,0.14); }
}
@keyframes nav-border-pulse {
  0%, to { box-shadow: 0 8px 40px rgba(0,0,0,0.65), inset 0 1px rgba(255,255,255,0.04); }
  50%    { box-shadow: 0 8px 40px rgba(0,0,0,0.65), inset 0 1px rgba(255,255,255,0.07), 0 0 30px rgba(196,163,90,0.06); }
}
@keyframes nav-active-pulse {
  0%, to { box-shadow: 0 0 12px rgba(196,163,90,0.30), 0 2px 8px rgba(0,0,0,0.40); }
  50%    { box-shadow: 0 0 24px rgba(196,163,90,0.55), 0 2px 12px rgba(0,0,0,0.50); }
}
@keyframes rank-gold-pulse {
  0%, to { text-shadow: 0 0 5px rgba(201,162,39,0.35); }
  50%    { text-shadow: 0 0 12px rgba(201,162,39,0.70); }
}

/* ══ NAVBAR — tono oscuro/clásico ═══════════════════════════════════════════ */
#main-nav, .main-nav, nav.navbar, .navbar {
  background: linear-gradient(to bottom, rgba(5,5,8,0.99), rgba(8,8,14,0.97)) !important;
  border-bottom: 1px solid rgba(196,163,90,0.12) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.65), inset 0 1px rgba(255,255,255,0.04) !important;
}
#main-nav::before, .main-nav::before {
  background: linear-gradient(105deg, transparent, rgba(196,163,90,0.03), transparent) !important;
}
.nav > li > a:hover, .navbar-nav > li > a:hover,
.nav > li.active > a, .navbar-nav > li.active > a {
  color: #c4a35a !important;
  text-shadow: 0 0 8px rgba(196,163,90,0.35) !important;
}
.nav > li.active > a::after, .navbar-nav > li.active > a::after {
  background: #c4a35a !important;
  box-shadow: 0 0 6px rgba(196,163,90,0.55) !important;
}

/* ══ SIDEBAR MODULES — clásico ══════════════════════════════════════════════ */
.sidebar-module {
  background:
    linear-gradient(105deg, rgba(30,25,15,0.55), rgba(20,18,12,0.40) 20%, rgba(13,12,10,0.92) 55%, rgba(10,10,8,0.98)),
    radial-gradient(ellipse at 0% 50%, rgba(196,163,90,0.07), transparent 55%) !important;
  border: 1px solid rgba(196,163,90,0.10) !important;
  border-left: 2px solid rgba(196,163,90,0.40) !important;
}
.sidebar-module:hover {
  background:
    linear-gradient(105deg, rgba(45,38,20,0.65), rgba(30,25,15,0.50) 20%, rgba(15,14,10,0.94) 55%, rgba(10,10,8,0.99)),
    radial-gradient(ellipse at 0% 50%, rgba(196,163,90,0.14), transparent 55%) !important;
  border-color: rgba(196,163,90,0.22) !important;
  box-shadow: 0 8px 28px rgba(196,163,90,0.08), -3px 0 16px rgba(196,163,90,0.06) !important;
}
.sidebar-module > h3,
.sidebar-module h3.module-title,
.sidebar-module .module-heading {
  color: #c4a35a !important;
  text-shadow: 0 0 8px rgba(196,163,90,0.25) !important;
  border-bottom: 1px solid rgba(196,163,90,0.10) !important;
}
.sidebar-module > h3 i, .sidebar-module h3 i {
  color: #c4a35a !important;
  filter: drop-shadow(0 0 4px rgba(196,163,90,0.40)) !important;
}

/* ══ SERVER INFO LIST ════════════════════════════════════════════════════════ */
.server-info-list .label-val, .info-val {
  color: #c4a35a !important;
}
.server-info-list li:hover, .server-info-item:hover {
  background: rgba(196,163,90,0.05) !important;
  border-color: rgba(196,163,90,0.10) !important;
}

/* ══ RANKING ITEMS ═══════════════════════════════════════════════════════════ */
.ranking-item:hover {
  background: rgba(196,163,90,0.05) !important;
  border-color: rgba(196,163,90,0.10) !important;
}
.rank-name a:hover { color: #c4a35a !important; }
.ranking-item:nth-child(1) .rank-position { color: #c9a227 !important; text-shadow: 0 0 8px rgba(201,162,39,0.40) !important; }

/* ══ TABLA RANKINGS ══════════════════════════════════════════════════════════ */
.rankings-table thead th {
  background: rgba(196,163,90,0.07) !important;
  color: #c4a35a !important;
}
.rankings-table tbody tr:hover td { background: rgba(196,163,90,0.05) !important; }
.rankings-table tbody tr:nth-child(1) td:first-child { color: #c9a227 !important; text-shadow: 0 0 6px rgba(201,162,39,0.40) !important; }

/* ══ ARTICULOS ═══════════════════════════════════════════════════════════════ */
.article {
  background:
    linear-gradient(105deg, rgba(30,25,15,0.55), rgba(20,18,12,0.40) 20%, rgba(13,12,10,0.92) 55%, rgba(10,10,8,0.98)),
    radial-gradient(ellipse at 0% 50%, rgba(196,163,90,0.07), transparent 55%) !important;
  border: 1px solid rgba(196,163,90,0.10) !important;
}
.article-title a { color: #c4a35a !important; }

/* ══ BOTONES ═════════════════════════════════════════��═══════════════════════ */
.btn-primary, .btn-login, .btn-register, input[type="submit"],
button[type="submit"], .submit-btn {
  background: linear-gradient(135deg, #c4a35a, #a8872e 60%, #8f6f1a) !important;
  color: #0a0a0f !important;
  box-shadow: 0 4px 16px rgba(196,163,90,0.25), inset 0 1px rgba(255,255,255,0.15) !important;
}
.btn-primary:hover, .btn-login:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  box-shadow: 0 6px 24px rgba(196,163,90,0.40), inset 0 1px rgba(255,255,255,0.20) !important;
  color: #0a0a0f !important;
}
.btn-secondary {
  background: rgba(196,163,90,0.08) !important;
  color: #c4a35a !important;
  border: 1px solid rgba(196,163,90,0.25) !important;
}
.btn-secondary:hover {
  background: rgba(196,163,90,0.15) !important;
  color: #e0c070 !important;
  box-shadow: 0 4px 14px rgba(196,163,90,0.15) !important;
}
.btn-action {
  background: linear-gradient(135deg, #c4a35a, #a8872e) !important;
  box-shadow: 0 2px 8px rgba(196,163,90,0.22) !important;
}
.btn-action:hover {
  box-shadow: 0 4px 14px rgba(196,163,90,0.38) !important;
  color: #0a0a0f !important;
}

/* ══ FORMULARIOS / INPUTS ════════════════════════════════════════════════════ */
.auth-card {
  background:
    linear-gradient(160deg, rgba(30,25,15,0.65) 0%, rgba(13,12,10,0.97) 100%),
    radial-gradient(ellipse at top left, rgba(196,163,90,0.07), transparent 60%) !important;
  border: 1px solid rgba(196,163,90,0.16) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.70), 0 0 0 1px rgba(196,163,90,0.06) !important;
}
.auth-card::before {
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.35), transparent) !important;
}
.input-group:focus-within i { color: #c4a35a !important; }
.input-group input,
.input-group select,
.login-form input,
input[type="text"],
input[type="password"],
input[type="email"],
select, textarea {
  border: 1px solid rgba(196,163,90,0.14) !important;
}
.input-group input:focus,
input:focus, select:focus, textarea:focus {
  border-color: rgba(196,163,90,0.40) !important;
  background: rgba(196,163,90,0.03) !important;
  box-shadow: 0 0 0 3px rgba(196,163,90,0.08) !important;
}

/* ══ TABLAS GENÉRICAS ════════════════════════════════════════════════════════ */
.table > thead > tr > th {
  background: rgba(196,163,90,0.07) !important;
  color: #c4a35a !important;
}
.table > tbody > tr:hover > td { background: rgba(196,163,90,0.04) !important; }

/* ══ PAGINACIÓN ══════════════════════════════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span {
  border: 1px solid rgba(196,163,90,0.14) !important;
}
.pagination > li > a:hover,
.pagination > li.active > a,
.pagination > li.active > span {
  background: rgba(196,163,90,0.12) !important;
  border-color: rgba(196,163,90,0.32) !important;
  color: #c4a35a !important;
  box-shadow: 0 0 10px rgba(196,163,90,0.15) !important;
}

/* ══ FOOTER ══════════════════════════════════════════════════════════════════ */
#footer, .site-footer, footer {
  border-top: 1px solid rgba(196,163,90,0.08) !important;
}
#footer a, .site-footer a, footer a { color: rgba(196,163,90,0.65) !important; }
#footer a:hover, .site-footer a:hover, footer a:hover { color: #c4a35a !important; }

/* ══ TICKER ══════════════════════════════════════════════════════════════════ */
.server-ticker, .features-ticker, .bottom-ticker, .site-features, .ticker-wrap {
  border-top: 1px solid rgba(196,163,90,0.12) !important;
}
.ticker-item i { color: #c4a35a !important; }

/* ══ BADGES ══════════════════════════════════════════════════════════════════ */
.label-primary, .badge-primary {
  background: rgba(196,163,90,0.15) !important;
  color: #c4a35a !important;
  border: 1px solid rgba(196,163,90,0.25) !important;
}
.label-success, .badge-success { background: rgba(74,154,96,0.15) !important; color: #4a9a60 !important; border: 1px solid rgba(74,154,96,0.25) !important; }
.label-danger,  .badge-danger  { background: rgba(160,80,96,0.15) !important; color: #a05060 !important; border: 1px solid rgba(160,80,96,0.25) !important; }
.label-warning, .badge-warning { background: rgba(196,120,32,0.15) !important; color: #c47820 !important; border: 1px solid rgba(196,120,32,0.25) !important; }
.label-info,    .badge-info    { background: rgba(107,78,138,0.15) !important; color: #6b4e8a !important; border: 1px solid rgba(107,78,138,0.25) !important; }

/* ══ USERCP ══════════════════════════════════════════════════════════════════ */
.usercp-table tr:first-child td, .usercp-table thead th {
  background: rgba(196,163,90,0.07) !important;
  color: #c4a35a !important;
}
.usercp-table tbody tr:hover td { background: rgba(196,163,90,0.05) !important; }
.usercp-character-card {
  background:
    linear-gradient(160deg, rgba(30,25,15,0.58) 0%, rgba(13,12,10,0.96) 100%),
    radial-gradient(ellipse at top left, rgba(196,163,90,0.08), transparent 60%) !important;
  border: 1px solid rgba(196,163,90,0.12) !important;
}
.usercp-character-card:hover {
  border-color: rgba(196,163,90,0.30) !important;
  box-shadow: 0 8px 28px rgba(196,163,90,0.10) !important;
}
.usercp-character-img {
  border: 2px solid rgba(196,163,90,0.20) !important;
  box-shadow: 0 0 12px rgba(196,163,90,0.12) !important;
}
.usercp-card-classname { color: #c4a35a !important; }
.usercp-card-name a:hover { color: #c4a35a !important; }
.stat-bar {
  background: linear-gradient(90deg, #8f6f1a, #c4a35a) !important;
  box-shadow: 0 0 6px rgba(196,163,90,0.30) !important;
}

/* ══ PAGE TITLE ══════════════════════════════════════════════════════════════ */
.page-title, h1.page-title { color: #c4a35a !important; text-shadow: 0 0 12px rgba(196,163,90,0.25) !important; }

/* ══ ONLINE DOT ══════════════════════════════════════════════════════════════ */
.online-dot {
  background: #4a9a60 !important;
  box-shadow: 0 0 5px #4a9a60 !important;
}

/* ══ SIMPLE RANK CARD ════════════════════════════════════════════════════════ */
.simple-rank-card {
  background:
    linear-gradient(105deg, rgba(30,25,15,0.55), rgba(20,18,12,0.40) 20%, rgba(13,12,10,0.92) 55%, rgba(10,10,8,0.98)),
    radial-gradient(ellipse at 0% 50%, rgba(196,163,90,0.07), transparent 55%) !important;
  border: 1px solid rgba(196,163,90,0.10) !important;
  border-left: 2px solid rgba(196,163,90,0.40) !important;
}
.simple-rank-card:hover {
  border-color: rgba(196,163,90,0.26) !important;
  box-shadow: 0 8px 24px rgba(196,163,90,0.08), -3px 0 14px rgba(196,163,90,0.06) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   PRELOADER — Dark Fantasy · Anillos + Logo + Barra de progreso
   ════════════════════════════════════════════════════════════════════════════ */

/* Quitar pseudo-elementos anteriores (ya no se usan) */
body::before, body::after { content: none !important; animation: none !important; background: none !important; }

/* ── Overlay principal ─────────────────────────────────────────────────────── */
#page-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: #07070b !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  overflow: hidden !important;
  transition: opacity 0.65s ease, visibility 0.65s ease !important;
}
/* Scanlines */
#page-loader::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.012) 2px,rgba(255,255,255,.012) 4px) !important;
  pointer-events: none !important; z-index: 0 !important;
}
/* Gold glow radial */
#page-loader::after {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: radial-gradient(ellipse 55% 60% at 50% 48%,rgba(196,163,90,.08) 0%,transparent 70%) !important;
  pointer-events: none !important; z-index: 0 !important;
}
/* Estado oculto (JS le agrega esta clase) */
#page-loader.pl-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Anillos concéntricos + logo ───────────────────────────────────────────── */
#pl-rings {
  position: relative !important; z-index: 1 !important;
  width: 168px !important; height: 168px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.pl-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border-style: solid !important;
}
.pl-ring-1 {
  inset: 0 !important;
  border-width: 2px !important;
  border-color: rgba(196,163,90,.10) !important;
  border-top-color: #c4a35a !important;
  border-right-color: rgba(196,163,90,.45) !important;
  animation: pl-spin 1.6s linear infinite !important;
  box-shadow: 0 0 28px rgba(196,163,90,.18), inset 0 0 28px rgba(196,163,90,.04) !important;
}
.pl-ring-2 {
  inset: 20px !important;
  border-width: 1.5px !important;
  border-color: rgba(196,163,90,.06) !important;
  border-bottom-color: rgba(196,163,90,.38) !important;
  border-left-color: rgba(196,163,90,.12) !important;
  animation: pl-spin-r 2.4s linear infinite !important;
}
.pl-ring-3 {
  inset: 40px !important;
  border-width: 1px !important;
  border-color: rgba(196,163,90,.04) !important;
  border-top-color: rgba(196,163,90,.22) !important;
  animation: pl-spin 3.8s linear infinite !important;
}
@keyframes pl-spin   { to { transform: rotate(360deg); } }
@keyframes pl-spin-r { to { transform: rotate(-360deg); } }

/* Logo centrado */
.pl-logo {
  position: relative !important; z-index: 2 !important;
  width: 76px !important; height: 76px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 12px rgba(196,163,90,.50)) drop-shadow(0 0 30px rgba(196,163,90,.22)) !important;
  animation: pl-pulse 2.6s ease-in-out infinite !important;
}
@keyframes pl-pulse {
  0%,100% { filter: drop-shadow(0 0 10px rgba(196,163,90,.40)) drop-shadow(0 0 22px rgba(196,163,90,.15)); }
  50%      { filter: drop-shadow(0 0 20px rgba(196,163,90,.75)) drop-shadow(0 0 44px rgba(196,163,90,.32)); }
}

/* ── Nombre del servidor ────────────────────────────────────────────────────── */
.pl-name {
  position: relative !important; z-index: 1 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 20px !important; font-weight: 900 !important;
  background: linear-gradient(135deg,#c4a35a,#d4bb78,#c4a35a) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  letter-spacing: .22em !important; text-transform: uppercase !important;
  margin: 0 !important;
}

/* ── Tagline + puntos animados ─────────────────────────────────────────────── */
.pl-tag {
  position: relative !important; z-index: 1 !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  color: rgba(196,163,90,.40) !important; margin: 0 !important;
}
.pl-dots::after {
  content: '' !important;
  display: inline-block !important;
  animation: pl-dots 1.5s steps(4,end) infinite !important;
  min-width: 1.2em !important;
}
@keyframes pl-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* ── Barra de progreso ──────────────────────────────────────────────────────── */
.pl-bar-wrap {
  position: relative !important; z-index: 1 !important;
  width: 200px !important; height: 2px !important;
  background: rgba(196,163,90,.10) !important;
  border-radius: 99px !important; overflow: hidden !important;
}
.pl-bar {
  height: 100% !important;
  background: linear-gradient(90deg,#a8883c,#c4a35a,#d4bb78) !important;
  border-radius: 99px !important;
  width: 0% !important;
  animation: pl-progress 2.0s cubic-bezier(.25,.8,.25,1) forwards !important;
  box-shadow: 0 0 10px rgba(196,163,90,.55) !important;
}
@keyframes pl-progress {
  0%   { width: 0%; }
  55%  { width: 82%; }
  85%  { width: 95%; }
  100% { width: 100%; }
}

/* ── #mc-loader (footer.php) ────────────────────────────────────────────────── */
@keyframes mc-spin       { to { transform: rotate(360deg); } }
@keyframes mc-preload-out { 0% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
#mc-loader {
  position: fixed !important; inset: 0 !important; z-index: 99998 !important;
  background: #07070b !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  animation: mc-preload-out 0.5s ease-out 2s forwards !important;
  pointer-events: all !important;
}
#mc-loader::after {
  content: '' !important; width: 50px !important; height: 50px !important;
  border: 2px solid rgba(196,163,90,.14) !important; border-top-color: #c4a35a !important;
  border-radius: 50% !important; animation: mc-spin 0.85s linear infinite !important;
  box-shadow: 0 0 16px rgba(196,163,90,.18) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   DISCORD FLOTANTE — Estilo clásico dark fantasy
   ════════════════════════════════════════════════════════════════════════════ */

/* Botón flotante real — se activa si el HTML agrega <a id="mc-discord-btn"> en el footer */
#mc-discord-btn {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: rgba(8,7,5,0.96) !important;
  border: 1px solid rgba(196,163,90,0.25) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.60), 0 0 0 1px rgba(196,163,90,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9990 !important;
  text-decoration: none !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s !important;
  cursor: pointer !important;
}

#mc-discord-btn i {
  color: #c4a35a !important;
  font-size: 1.2rem !important;
  transition: color 0.2s, filter 0.2s !important;
  filter: drop-shadow(0 0 4px rgba(196,163,90,0.30)) !important;
}

#mc-discord-btn:hover {
  border-color: rgba(196,163,90,0.55) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.70), 0 0 0 1px rgba(196,163,90,0.20), 0 0 16px rgba(196,163,90,0.12) !important;
  transform: translateY(-3px) !important;
}

#mc-discord-btn:hover i {
  color: #e0c070 !important;
  filter: drop-shadow(0 0 8px rgba(196,163,90,0.55)) !important;
}

/* Tooltip al hover */
#mc-discord-btn::before {
  content: 'Discord' !important;
  position: absolute !important;
  right: 54px !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(6px) !important;
  background: rgba(8,7,5,0.96) !important;
  border: 1px solid rgba(196,163,90,0.20) !important;
  color: rgba(212,212,216,0.80) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s, transform 0.2s !important;
}

#mc-discord-btn:hover::before {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   LOGIN · REGISTRO · INGRESO — WebEngine Mythos3
   ════════════════════════════════════════════════════════════════════════════ */

/* Contenedor de página de auth */
.login-page, .register-page, .recover-page,
#loginpage, #registerpage,
.page-login, .page-register {
  min-height: 80vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem 1rem !important;
}

/* Box principal */
.login-box, .register-box, .account-box,
.loginbox, .registerbox, .account-panel,
.login-container, .register-container,
.form-login, .form-register {
  background:
    linear-gradient(160deg, rgba(20,30,50,0.70) 0%, rgba(10,10,18,0.97) 100%),
    radial-gradient(ellipse at top, rgba(196,163,90,0.08), transparent 65%) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  border-radius: 18px !important;
  padding: 2.25rem 2rem !important;
  max-width: 440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.60), 0 0 0 1px rgba(196,163,90,0.06) !important;
  position: relative !important;
}

/* Línea dorada top */
.login-box::before, .register-box::before,
.account-box::before, .loginbox::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important; left: 15% !important;
  width: 70% !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.55), transparent) !important;
}

/* Título del form */
.login-box h1, .login-box h2, .login-box h3,
.register-box h1, .register-box h2, .register-box h3,
.account-box h1, .account-box h2, .account-box h3,
.loginbox h1, .loginbox h2, .loginbox .title,
.page-login h2, .page-register h2 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  color: #fff !important;
  text-align: center !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 1.5rem !important;
}

/* Bootstrap form-control dentro de login/register */
.form-control {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(196,163,90,0.16) !important;
  border-radius: 10px !important;
  color: #d4d4d8 !important;
  font-size: 0.9rem !important;
  padding: 0.70rem 1rem !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
}
.form-control:focus {
  border-color: rgba(196,163,90,0.45) !important;
  background: rgba(196,163,90,0.04) !important;
  box-shadow: 0 0 0 3px rgba(196,163,90,0.10), 0 0 16px rgba(196,163,90,0.06) !important;
  color: #fff !important;
  outline: none !important;
}
.form-control::placeholder { color: rgba(212,212,216,0.35) !important; }

/* Label */
.form-group label,
.login-box label, .register-box label, .account-box label {
  color: rgba(212,212,216,0.65) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.4rem !important;
}

/* Botones Bootstrap */
.btn { border-radius: 10px !important; font-weight: 700 !important; transition: all 0.2s !important; }
.btn-default {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(196,163,90,0.20) !important;
  color: rgba(212,212,216,0.75) !important;
}
.btn-default:hover {
  background: rgba(196,163,90,0.10) !important;
  border-color: rgba(196,163,90,0.35) !important;
  color: #c4a35a !important;
}
.btn-success {
  background: linear-gradient(135deg, #4a9a60, #3a7a4c) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(74,154,96,0.30) !important;
}
.btn-success:hover {
  box-shadow: 0 6px 22px rgba(74,154,96,0.50) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.btn-info {
  background: linear-gradient(135deg, #c4a35a, #a8883c) !important;
  border: none !important;
  color: #07070b !important;
  box-shadow: 0 4px 14px rgba(196,163,90,0.30) !important;
}
.btn-danger {
  background: linear-gradient(135deg, #a05060, #7a3040) !important;
  border: none !important;
  color: #fff !important;
}
.btn-warning {
  background: linear-gradient(135deg, #c47820, #a05a10) !important;
  border: none !important;
  color: #fff !important;
}

/* Input group addon */
.input-group-addon {
  background: rgba(196,163,90,0.08) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  color: rgba(196,163,90,0.65) !important;
  border-radius: 10px 0 0 10px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   RANKINGS — DataTables + WebEngine
   ════════════════════════════════════════════════════════════════════════════ */

/* DataTables wrapper */
.dataTables_wrapper {
  color: #d4d4d8 !important;
  font-size: 0.88rem !important;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  color: rgba(212,212,216,0.60) !important;
  font-size: 0.80rem !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  border-radius: 8px !important;
  color: #d4d4d8 !important;
  padding: 0.35rem 0.7rem !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: rgba(196,163,90,0.40) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(196,163,90,0.10) !important;
}
.dataTables_wrapper .dataTables_info {
  color: rgba(212,212,216,0.45) !important;
  font-size: 0.78rem !important;
}

/* DataTable tabla */
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
  width: 100% !important;
}
table.dataTable thead th,
table.dataTable thead td {
  background: rgba(196,163,90,0.08) !important;
  color: #c4a35a !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 0.70rem 1rem !important;
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  background: rgba(196,163,90,0.10) !important;
  color: #c4a35a !important;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  color: rgba(196,163,90,0.55) !important;
}
table.dataTable tbody tr {
  background: rgba(255,255,255,0.02) !important;
  transition: background 0.15s !important;
}
table.dataTable tbody tr:hover {
  background: rgba(196,163,90,0.06) !important;
}
table.dataTable tbody td {
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  padding: 0.65rem 1rem !important;
  vertical-align: middle !important;
  color: #d4d4d8 !important;
}
/* Top 3 dorado/plata/bronce */
table.dataTable tbody tr:nth-child(1) td:first-child { color: #ffd700 !important; font-weight: 900 !important; }
table.dataTable tbody tr:nth-child(2) td:first-child { color: #c0c0c0 !important; font-weight: 900 !important; }
table.dataTable tbody tr:nth-child(3) td:first-child { color: #cd7f32 !important; font-weight: 900 !important; }

/* DataTables paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(196,163,90,0.14) !important;
  border-radius: 8px !important;
  color: rgba(212,212,216,0.70) !important;
  padding: 5px 12px !important;
  margin: 0 2px !important;
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  transition: all 0.15s !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(196,163,90,0.12) !important;
  border-color: rgba(196,163,90,0.30) !important;
  color: #c4a35a !important;
  box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, #c4a35a, #a8883c) !important;
  border-color: transparent !important;
  color: #07070b !important;
  box-shadow: 0 0 12px rgba(196,163,90,0.35) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   INFO / SERVER INFO — página de información
   ════════════════════════════════════════════════════════════════════════════ */

/* Contenedor principal info */
.info-page, .server-info-page, .page-info,
#infopage, .content-info {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 2rem 1rem !important;
}

/* Tablas de rates/info */
.info-table, .rates-table, .server-rates {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
}
.info-table thead th, .rates-table thead th {
  background: rgba(196,163,90,0.09) !important;
  color: #c4a35a !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 0.65rem 0.9rem !important;
}
.info-table tbody td, .rates-table tbody td {
  background: rgba(255,255,255,0.025) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  padding: 0.60rem 0.9rem !important;
  color: #d4d4d8 !important;
  vertical-align: middle !important;
}
.info-table tbody tr:hover td, .rates-table tbody tr:hover td {
  background: rgba(196,163,90,0.05) !important;
}

/* WebEngine module output box */
.module-box, .content-box, .module-content,
.webengine-module, [class*="module-"] > div {
  background:
    linear-gradient(160deg, rgba(20,30,50,0.55), rgba(10,10,18,0.95)) !important;
  border: 1px solid rgba(196,163,90,0.13) !important;
  border-radius: 14px !important;
  padding: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
}

/* Títulos de módulos */
.module-title, .section-title, .content-title,
h3.title, .box-title, .widget-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.80rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #c4a35a !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid rgba(196,163,90,0.12) !important;
}

/* Override inline blue colors del info template */
[style*="color:#4dabf7"], [style*="color: #4dabf7"] { color: #c4a35a !important; }
[style*="color:#339af0"], [style*="color: #339af0"] { color: #a8883c !important; }
[style*="background:#4dabf7"], [style*="background: #4dabf7"] { background: rgba(196,163,90,0.10) !important; }
[style*="border-color:#4dabf7"] { border-color: rgba(196,163,90,0.25) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   MENSAJES · ALERTAS de WebEngine
   ════════════════════════════════════════════════════════════════════════════ */

.message, .webengine-message, .we-msg,
.notification-box, .error-box, .success-box {
  border-radius: 10px !important;
  padding: 0.85rem 1.1rem !important;
  font-size: 0.875rem !important;
  border-left: 3px solid !important;
  margin: 0.75rem 0 !important;
}
.message-success, .we-msg.success, .success-box {
  background: rgba(74,154,96,0.08) !important;
  border-color: rgba(74,154,96,0.35) !important;
  color: #69db7c !important;
}
.message-error, .we-msg.error, .error-box {
  background: rgba(160,80,96,0.08) !important;
  border-color: rgba(160,80,96,0.35) !important;
  color: #f06595 !important;
}
.message-warning, .we-msg.warning {
  background: rgba(196,120,32,0.08) !important;
  border-color: rgba(196,120,32,0.35) !important;
  color: #c47820 !important;
}
.message-info, .we-msg.info {
  background: rgba(196,163,90,0.07) !important;
  border-color: rgba(196,163,90,0.25) !important;
  color: #c4a35a !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   NAV-PILLS — Rankings tabs + cualquier pill nav de Bootstrap
   ════════════════════════════════════════════════════════════════════════════ */
.nav-pills > li > a {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(196,163,90,0.13) !important;
  border-radius: 10px !important;
  color: rgba(212,212,216,0.65) !important;
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 7px 16px !important;
  transition: all 0.2s !important;
}
.nav-pills > li > a:hover {
  background: rgba(196,163,90,0.10) !important;
  border-color: rgba(196,163,90,0.28) !important;
  color: #c4a35a !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: linear-gradient(135deg, rgba(196,163,90,0.22), rgba(168,136,60,0.18)) !important;
  border-color: rgba(196,163,90,0.45) !important;
  color: #c4a35a !important;
  box-shadow: 0 0 14px rgba(196,163,90,0.18), inset 0 1px rgba(255,255,255,0.08) !important;
  text-shadow: 0 0 8px rgba(196,163,90,0.35) !important;
}

/* ── Ranking tabs específicos de WebEngine ──────────────────────────────── */
.ranking-tabs a, .ranking-menu a,
.rankings-nav a, .rankings-tabs a,
a[href*="rankings/level"], a[href*="rankings/resets"],
a[href*="rankings/killers"], a[href*="rankings/guilds"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(196,163,90,0.12) !important;
  border-radius: 8px !important;
  color: rgba(212,212,216,0.65) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 6px 14px !important;
  display: inline-block !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}
.ranking-tabs a.active, .ranking-menu a.active,
.rankings-nav a.active, .rankings-tabs a.active,
.ranking-tabs a:hover, .ranking-menu a:hover {
  background: rgba(196,163,90,0.16) !important;
  border-color: rgba(196,163,90,0.42) !important;
  color: #c4a35a !important;
  box-shadow: 0 0 12px rgba(196,163,90,0.16) !important;
}

/* ── Botón "Acceder" / nav btn azul ─────────────────────────────────────── */
.navbar .btn, .navbar .btn-primary,
.navbar-form .btn, .nav-btn, .navbar-btn,
a.btn.btn-primary, button.btn.btn-primary {
  background: linear-gradient(135deg, #c4a35a, #a8883c) !important;
  border-color: transparent !important;
  color: #07070b !important;
  box-shadow: 0 3px 12px rgba(196,163,90,0.28) !important;
}
.navbar .btn:hover, .navbar .btn-primary:hover,
a.btn.btn-primary:hover {
  box-shadow: 0 5px 20px rgba(196,163,90,0.45) !important;
  transform: translateY(-1px) !important;
  color: #07070b !important;
}

/* ── Forzar color de cualquier fondo azul residual Bootstrap ─────────────── */
.label-primary, .badge-primary { background-color: #c4a35a !important; color: #07070b !important; }
.text-primary { color: #c4a35a !important; }
.bg-primary { background-color: rgba(196,163,90,0.15) !important; }
.border-primary { border-color: rgba(196,163,90,0.35) !important; }
a { color: #c4a35a !important; }
a:hover { color: #d4bb78 !important; }

/* Preservar colores de nav links y botones de acción que ya estaban bien */
.navbar-default .navbar-nav > li > a,
.site-nav a, .main-nav a,
.nav-link, header nav a {
  color: rgba(212,212,216,0.80) !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a {
  color: #c4a35a !important;
}

/* ── Clase filter images (ALL, WIZARDS, etc.) ───────────────────────────── */
.rankings-class-filter-selection {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(196,163,90,0.10) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
}
.rankings-class-filter-selection:hover,
.rankings-class-filter-selection.active {
  background: rgba(196,163,90,0.12) !important;
  border-color: rgba(196,163,90,0.40) !important;
  box-shadow: 0 0 14px rgba(196,163,90,0.15) !important;
}
.rankings-class-filter-image {
  filter: grayscale(0.4) brightness(0.85) !important;
  transition: filter 0.2s !important;
}
.rankings-class-filter-selection:hover .rankings-class-filter-image,
.rankings-class-filter-selection.active .rankings-class-filter-image {
  filter: grayscale(0) brightness(1.05) drop-shadow(0 0 5px rgba(196,163,90,0.30)) !important;
}

/* ── Sidebar login "INGRESAR" btn ────────────────────────────────────────── */
.sidebar .btn, .sidebar input[type="submit"],
#sidebar .btn, #sidebar input[type="submit"],
.login-sidebar .btn, .login-widget .btn,
.widget-login input[type="submit"] {
  background: linear-gradient(135deg, #c4a35a, #a8883c 60%, #8c6e2a) !important;
  color: #07070b !important;
  border: none !important;
  width: 100% !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  padding: 0.75rem !important;
  box-shadow: 0 4px 16px rgba(196,163,90,0.28) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.sidebar .btn:hover, .sidebar input[type="submit"]:hover {
  box-shadow: 0 6px 24px rgba(196,163,90,0.45) !important;
  transform: translateY(-1px) !important;
}

/* ── Rankings — filas top3 con estilo especial ───────────────────────────── */
.rankings-table tbody tr:nth-child(1) td,
table.dataTable tbody tr:nth-child(1) td {
  background: rgba(255,215,0,0.04) !important;
}
.rankings-table tbody tr:nth-child(2) td,
table.dataTable tbody tr:nth-child(2) td {
  background: rgba(192,192,192,0.03) !important;
}
.rankings-table tbody tr:nth-child(3) td,
table.dataTable tbody tr:nth-child(3) td {
  background: rgba(205,127,50,0.03) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   PVP RECORD · PVM RECORD · BOSSES · NOTICIAS — Centro de página
   ════════════════════════════════════════════════════════════════════════���═══ */

/* ── Card contenedor genérico del centro ─────────────────────────────────── */
.pvp-record, .pvm-record, .pvp-record-module, .pvm-record-module,
.boss-record, .boss-kills, .monster-kills,
.kill-feed-box, .kill-feed-container, .kill-feed-wrapper,
.news-box, .noticias-box, .latest-news, .news-module,
div[class*="pvp"], div[class*="pvm"], div[class*="boss"],
div[class*="kill-feed"], div[class*="news-module"] {
  background:
    linear-gradient(145deg, rgba(22,32,52,0.75) 0%, rgba(10,10,18,0.96) 100%),
    radial-gradient(ellipse at top left, rgba(196,163,90,0.07), transparent 60%) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(196,163,90,0.05) !important;
  position: relative !important;
  animation: module-glow-border 4s ease-in-out infinite !important;
}

/* Línea dorada decorativa en el tope del card */
.pvp-record::before, .pvm-record::before,
.boss-record::before, .news-box::before,
.noticias-box::before, .kill-feed-box::before,
div[class*="pvp"]::before, div[class*="pvm"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 10% !important;
  width: 80% !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.55), transparent) !important;
  pointer-events: none !important;
}

/* ── Header / título del box ─────────────────────────────────────────────── */
.pvp-record-header, .pvm-record-header,
.kill-feed-header, .kill-feed-title,
.boss-record-header, .module-header,
.box-header, .section-header, .widget-head {
  background: linear-gradient(90deg, rgba(196,163,90,0.10), rgba(196,163,90,0.04), transparent) !important;
  border-bottom: 1px solid rgba(196,163,90,0.15) !important;
  padding: 0.85rem 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}
.pvp-record-header h2, .pvp-record-header h3, .pvp-record-header .title,
.pvm-record-header h2, .pvm-record-header h3, .pvm-record-header .title,
.kill-feed-header h2, .kill-feed-header h3, .kill-feed-title,
.box-header h2, .box-header h3, .module-header h2 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #c4a35a !important;
  margin: 0 !important;
  text-shadow: 0 0 12px rgba(196,163,90,0.30) !important;
}
.pvp-record-header i, .pvm-record-header i,
.kill-feed-header i, .box-header i, .module-header i {
  color: #c4a35a !important;
  font-size: 0.85rem !important;
  filter: drop-shadow(0 0 5px rgba(196,163,90,0.45)) !important;
}

/* ── Filas de kill feed (tabla WebEngine) ────────────────────────────────── */
.pvp-record table, .pvm-record table,
.kill-feed-box table, .boss-record table,
div[class*="pvp"] table, div[class*="pvm"] table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.pvp-record table tr, .pvm-record table tr,
.kill-feed-box table tr, .boss-record table tr,
div[class*="pvp"] table tr, div[class*="pvm"] table tr {
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  transition: background 0.15s !important;
}
.pvp-record table tr:hover, .pvm-record table tr:hover,
.kill-feed-box table tr:hover, div[class*="pvp"] table tr:hover {
  background: rgba(196,163,90,0.04) !important;
}
.pvp-record table td, .pvm-record table td,
.kill-feed-box table td, .boss-record table td,
div[class*="pvp"] table td, div[class*="pvm"] table td {
  padding: 0.55rem 1rem !important;
  font-size: 0.83rem !important;
  color: rgba(212,212,216,0.80) !important;
  vertical-align: middle !important;
  border: none !important;
}

/* ── Colores de jugadores en kill feed ────────────────────────────────────── */
/* Atacante = dorado */
.pvp-record table td:first-child a,
.pvm-record table td:first-child a,
.kill-attacker, .killer-name, .char-killer,
div[class*="pvp"] .attacker a,
div[class*="pvp"] .killer a {
  color: #c4a35a !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: text-shadow 0.2s !important;
}
.pvp-record table td:first-child a:hover,
.pvm-record table td:first-child a:hover,
.kill-attacker a:hover { text-shadow: 0 0 10px rgba(196,163,90,0.60) !important; }

/* Víctima = rosa/muted */
.kill-victim, .victim-name, .char-victim,
div[class*="pvp"] .victim a {
  color: #a07880 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Mapa = ámbar cálido */
.kill-map, .map-name, .kill-location {
  color: #c47820 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* Tiempo */
.kill-time, .time-ago, .kill-date {
  color: rgba(212,212,216,0.40) !important;
  font-size: 0.70rem !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* ── Tabla sin class específica en el centro (WebEngine output genérico) ─── */
.col-content table, .content-middle table,
#main-content table:not(.dataTable):not(.rankings-table) {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
}

/* ── Panel central general (cualquier .panel en col central) ─────────────── */
.col-md-6 > .panel, .col-sm-6 > .panel,
.center-col > .panel, .main-col > .panel,
.content-center .panel {
  background:
    linear-gradient(145deg, rgba(22,32,52,0.72) 0%, rgba(10,10,18,0.95) 100%),
    radial-gradient(ellipse at top, rgba(196,163,90,0.06), transparent 65%) !important;
  border: 1px solid rgba(196,163,90,0.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45) !important;
  overflow: hidden !important;
  animation: module-glow-border 4s ease-in-out infinite !important;
}

/* ── Fondo del body / página (textura sutil) ─────────────────────────────── */
body {
  background-color: #07070b !important;
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(196,163,90,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(106,78,138,0.05) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c4a35a' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████  SECCIÓN CLÁSICA — PÁGINAS COMPLETAS
   ███████████████████████████████████████████████████████████████████████████
   Todo en estilo dark fantasy cálido: oro, piedra, sin neones.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   1. FUENTES CLÁSICAS — aplicar a todos los títulos
   ════════════════════════════════════════════════════════════════���═════════ */
h1, h2, h3, h4, h5, h6,
.panel-heading, .panel-title,
.sidebar-header, .module-title,
.page-header, .box-title {
  font-family: 'Cinzel', 'Times New Roman', serif !important;
  letter-spacing: 0.04em !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. SEPARADORES ORNAMENTALES
   ══════════════════════════════════════════════════════════════════════════
   Agrega un separador dorado bajo títulos de sección                       */
.panel-heading::after,
.sidebar-header::after,
.module-title::after,
.box-title::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 6px;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.55), transparent);
}

/* Divisor decorativo reutilizable — agregar class="mc-divider" en HTML */
.mc-divider {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 12px 0 !important;
  color: rgba(196,163,90,0.40) !important;
  font-size: 0.75rem !important;
}
.mc-divider::before,
.mc-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.25), transparent) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. TABLA DE EVENTOS CLÁSICA — mc-events-wrap
   ══════════���═══════════════════════════════════════════════════════════════
   HTML a pegar en footer.php o en la home — ver snippet mc-events.html     */

/* Contenedor principal */
.mc-events-wrap {
  background:
    linear-gradient(160deg, rgba(18,14,8,0.98) 0%, rgba(10,10,18,0.99) 100%) !important;
  border: 1px solid rgba(196,163,90,0.22) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin: 1.5rem 0 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(196,163,90,0.07) !important;
}

/* Cabecera de la tabla de eventos */
.mc-events-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  background: linear-gradient(90deg, rgba(196,163,90,0.10), rgba(196,163,90,0.04), transparent) !important;
  border-bottom: 1px solid rgba(196,163,90,0.18) !important;
}
.mc-events-head .mc-events-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #d4bb78 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.mc-events-head .mc-events-title i {
  color: #c4a35a !important;
  font-size: 0.80rem !important;
}
.mc-events-badge {
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  background: rgba(196,163,90,0.10) !important;
  border: 1px solid rgba(196,163,90,0.25) !important;
  color: rgba(196,163,90,0.70) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.08em !important;
}

/* Tabla de eventos */
.mc-events-tbl {
  width: 100% !important;
  border-collapse: collapse !important;
}
.mc-events-tbl thead tr {
  background: rgba(196,163,90,0.06) !important;
}
.mc-events-tbl thead th {
  font-family: 'Cinzel', serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.60) !important;
  padding: 10px 16px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(196,163,90,0.12) !important;
}
.mc-events-tbl tbody tr {
  border-bottom: 1px solid rgba(196,163,90,0.07) !important;
  transition: background 0.15s !important;
}
.mc-events-tbl tbody tr:last-child { border-bottom: none !important; }
.mc-events-tbl tbody tr:hover { background: rgba(196,163,90,0.04) !important; }
.mc-events-tbl td {
  padding: 10px 16px !important;
  font-size: 0.83rem !important;
  color: #d4d4d8 !important;
  vertical-align: middle !important;
}
/* Nombre del evento */
.mc-events-tbl td:first-child {
  font-weight: 600 !important;
  color: #d4bb78 !important;
}
/* Horario */
.mc-events-tbl td.mc-ev-time {
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  color: rgba(196,163,90,0.75) !important;
  white-space: nowrap !important;
}
/* Jugadores */
.mc-events-tbl td.mc-ev-players {
  font-size: 0.75rem !important;
  color: rgba(212,212,216,0.50) !important;
}
/* Icono de evento */
.mc-events-tbl .mc-ev-icon {
  margin-right: 7px !important;
  font-size: 0.78rem !important;
}
/* Fila especial — Castle Siege */
.mc-events-tbl tr.mc-ev-special {
  background: rgba(196,163,90,0.04) !important;
  border-bottom: 1px solid rgba(196,163,90,0.14) !important;
}
.mc-events-tbl tr.mc-ev-special td:first-child { color: #d4bb78 !important; }


/* ══════════════════════════════════════════════════════════════════════════
   4. ESTADÍSTICAS DEL SERVIDOR CLÁSICAS — mc-server-stats
   ═══════════════════════════════════════════════════��══════════════════════
   HTML a pegar encima de la tabla de eventos o en la sidebar               */
.mc-server-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 1px !important;
  background: rgba(196,163,90,0.10) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 1.5rem 0 !important;
}
.mc-stat-item {
  background: rgba(14,14,22,0.97) !important;
  padding: 16px 14px !important;
  text-align: center !important;
  transition: background 0.15s !important;
}
.mc-stat-item:hover { background: rgba(20,20,30,0.99) !important; }
.mc-stat-value {
  font-family: 'Cinzel', serif !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #c4a35a !important;
  line-height: 1 !important;
  text-shadow: 0 0 14px rgba(196,163,90,0.35) !important;
}
.mc-stat-label {
  font-family: 'Cinzel', serif !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.50) !important;
  margin-top: 4px !important;
}
.mc-stat-icon {
  font-size: 0.90rem !important;
  margin-bottom: 6px !important;
  display: block !important;
  opacity: 0.60 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. PÁGINA DE INFORMACIÓN CLÁSICA — tabs y tablas
   ══════════════════════════════════════════════════════════════════════════ */

/* Tabs de info (nav-pills / nav-tabs) */
.nav-pills.mc-info-tabs,
.nav-tabs.mc-info-tabs,
.info-tabs { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 !important; margin-bottom: 20px !important; border: none !important; }
.mc-info-tabs .nav-item > a,
.mc-info-tabs .nav-link,
.mc-info-tabs li > a {
  font-family: 'Cinzel', serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.65) !important;
  background: rgba(196,163,90,0.07) !important;
  border: 1px solid rgba(196,163,90,0.15) !important;
  border-radius: 8px !important;
  padding: 7px 16px !important;
  text-decoration: none !important;
  transition: all 0.20s !important;
}
.mc-info-tabs .nav-item > a:hover,
.mc-info-tabs .nav-link:hover {
  background: rgba(196,163,90,0.13) !important;
  color: #d4bb78 !important;
  border-color: rgba(196,163,90,0.30) !important;
}
.mc-info-tabs .active > a,
.mc-info-tabs .nav-link.active,
.mc-info-tabs li.active > a {
  background: rgba(196,163,90,0.16) !important;
  color: #d4bb78 !important;
  border-color: rgba(196,163,90,0.40) !important;
  box-shadow: 0 0 14px rgba(196,163,90,0.12) !important;
}

/* Tabla info general */
.mc-info-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: rgba(14,14,22,0.97) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 0 0 1.5rem !important;
}
.mc-info-table thead th {
  font-family: 'Cinzel', serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.55) !important;
  padding: 10px 16px !important;
  background: rgba(196,163,90,0.06) !important;
  border-bottom: 1px solid rgba(196,163,90,0.14) !important;
  text-align: left !important;
}
.mc-info-table tbody tr { border-bottom: 1px solid rgba(196,163,90,0.07) !important; transition: background 0.15s !important; }
.mc-info-table tbody tr:last-child { border-bottom: none !important; }
.mc-info-table tbody tr:hover { background: rgba(196,163,90,0.03) !important; }
.mc-info-table td { padding: 10px 16px !important; font-size: 0.83rem !important; color: #d4d4d8 !important; vertical-align: middle !important; }
.mc-info-table td:first-child { color: rgba(196,163,90,0.75) !important; font-family: 'Cinzel', serif !important; font-size: 0.78rem !important; }
.mc-info-table td.mc-val { font-weight: 700 !important; color: #d4bb78 !important; }

/* Badge de categoría en tablas de info */
.mc-cat-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.06em !important;
}

/* Clase de personaje badge */
.mc-class-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(196,163,90,0.15) !important;
  background: rgba(14,14,22,0.90) !important;
  margin: 4px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #d4d4d8 !important;
  transition: all 0.18s !important;
}
.mc-class-badge:hover { background: rgba(196,163,90,0.07) !important; border-color: rgba(196,163,90,0.30) !important; }
.mc-class-badge .mc-class-abbr {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: rgba(196,163,90,0.10) !important;
  color: #c4a35a !important;
  border: 1px solid rgba(196,163,90,0.20) !important;
}

/* Tabla de Chaos Machine */
.mc-chaos-tbl { width: 100% !important; border-collapse: collapse !important; }
.mc-chaos-tbl thead th { font-family: 'Cinzel', serif !important; font-size: 0.66rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(196,163,90,0.50) !important; padding: 8px 14px !important; border-bottom: 1px solid rgba(196,163,90,0.10) !important; text-align: left !important; }
.mc-chaos-tbl td { padding: 9px 14px !important; font-size: 0.82rem !important; color: #d4d4d8 !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; vertical-align: middle !important; }
.mc-chaos-tbl tr:last-child td { border-bottom: none !important; }
.mc-chaos-tbl td:first-child { font-weight: 600 !important; }
.mc-chaos-pct { font-family: 'Cinzel', serif !important; font-weight: 700 !important; font-size: 0.88rem !important; }

/* Tabla de Resets por tier */
.mc-reset-tbl { width: 100% !important; border-collapse: collapse !important; }
.mc-reset-tbl th { font-family: 'Cinzel', serif !important; font-size: 0.66rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(196,163,90,0.50) !important; padding: 9px 14px !important; border-bottom: 1px solid rgba(196,163,90,0.10) !important; text-align: left !important; background: rgba(196,163,90,0.04) !important; }
.mc-reset-tbl td { padding: 9px 14px !important; font-size: 0.82rem !important; color: #d4d4d8 !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; }
.mc-reset-tbl tr:last-child td { border-bottom: none !important; }
.mc-reset-tbl td:first-child { color: rgba(196,163,90,0.75) !important; font-family: 'Cinzel', serif !important; font-size: 0.78rem !important; }

/* Tabla de comandos */
.mc-cmd-tbl { width: 100% !important; border-collapse: collapse !important; }
.mc-cmd-tbl td { padding: 9px 14px !important; font-size: 0.83rem !important; color: #d4d4d8 !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; }
.mc-cmd-tbl tr:last-child td { border-bottom: none !important; }
.mc-cmd-tbl td:first-child { font-family: 'Courier New', monospace !important; font-size: 0.82rem !important; color: #c4a35a !important; background: rgba(196,163,90,0.06) !important; border-radius: 4px !important; white-space: nowrap !important; }
.mc-cmd-tbl tr:hover { background: rgba(196,163,90,0.03) !important; }

/* Tabla de mapas */
.mc-maps-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 10px !important;
}
.mc-map-card {
  background: rgba(14,14,22,0.95) !important;
  border: 1px solid rgba(196,163,90,0.13) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  color: #d4d4d8 !important;
  transition: all 0.18s !important;
}
.mc-map-card:hover { background: rgba(196,163,90,0.05) !important; border-color: rgba(196,163,90,0.25) !important; }
.mc-map-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; background: rgba(196,163,90,0.10) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-size: 0.78rem !important; }
.mc-map-type { font-size: 0.65rem !important; color: rgba(196,163,90,0.50) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; margin-top: 1px !important; }

/* Tabla de party bonus */
.mc-party-tbl { width: 100% !important; border-collapse: collapse !important; }
.mc-party-tbl th { font-family: 'Cinzel', serif !important; font-size: 0.66rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(196,163,90,0.50) !important; padding: 9px 14px !important; border-bottom: 1px solid rgba(196,163,90,0.10) !important; text-align: left !important; background: rgba(196,163,90,0.04) !important; }
.mc-party-tbl td { padding: 9px 14px !important; font-size: 0.82rem !important; color: #d4d4d8 !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; }
.mc-party-tbl tr:last-child td { border-bottom: none !important; }
.mc-party-tbl td:first-child { color: rgba(196,163,90,0.75) !important; font-weight: 600 !important; }
.mc-party-pct { font-family: 'Cinzel', serif !important; font-weight: 700 !important; color: #4a9a60 !important; }


/* ════════════════════════════���═════════════════════════════════════════════
   6. PÁGINA DE LOGIN CLÁSICA
   ══════════════════════════════════════════════════════════════════════════ */

/* Contenedor general del login */
.mc-login-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  max-width: 900px !important;
  margin: 40px auto !important;
  background: rgba(14,14,22,0.98) !important;
  border: 1px solid rgba(196,163,90,0.20) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.60), 0 0 0 1px rgba(196,163,90,0.06) !important;
}
@media (max-width: 700px) {
  .mc-login-wrap { grid-template-columns: 1fr !important; }
  .mc-login-art { display: none !important; }
}

/* Panel izquierdo — arte / beneficios */
.mc-login-art {
  background:
    linear-gradient(160deg, rgba(12,9,4,0.98) 0%, rgba(8,6,14,0.99) 100%) !important;
  border-right: 1px solid rgba(196,163,90,0.12) !important;
  padding: 40px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 28px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Resplandor de fondo en el panel arte */
.mc-login-art::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important;
  left: -60px !important;
  width: 260px !important;
  height: 260px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(196,163,90,0.07) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.mc-login-art-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.50rem !important;
  font-weight: 800 !important;
  color: #d4bb78 !important;
  line-height: 1.25 !important;
  text-shadow: 0 0 28px rgba(196,163,90,0.25) !important;
}
.mc-login-art-title span { color: #c4a35a !important; }
.mc-login-art-subtitle {
  font-size: 0.83rem !important;
  color: rgba(212,212,216,0.50) !important;
  line-height: 1.6 !important;
  font-family: 'Crimson Text', Georgia, serif !important;
}
.mc-login-perks { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.mc-login-perk {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: rgba(196,163,90,0.05) !important;
  border: 1px solid rgba(196,163,90,0.12) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.82rem !important;
  color: rgba(212,212,216,0.80) !important;
  transition: all 0.18s !important;
}
.mc-login-perk:hover { background: rgba(196,163,90,0.09) !important; border-color: rgba(196,163,90,0.22) !important; }
.mc-login-perk-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 0.78rem !important;
  background: rgba(196,163,90,0.10) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  color: #c4a35a !important;
}
.mc-login-art-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.25), transparent) !important;
}
.mc-login-register-link {
  font-size: 0.78rem !important;
  color: rgba(212,212,216,0.45) !important;
  text-align: center !important;
}
.mc-login-register-link a { color: #c4a35a !important; text-decoration: none !important; font-weight: 600 !important; }
.mc-login-register-link a:hover { text-decoration: underline !important; }

/* Panel derecho — formulario */
.mc-login-form-panel {
  padding: 40px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 20px !important;
}
.mc-login-form-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.20rem !important;
  font-weight: 700 !important;
  color: #d4bb78 !important;
  margin-bottom: 2px !important;
}
.mc-login-form-subtitle {
  font-size: 0.78rem !important;
  color: rgba(212,212,216,0.45) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   7. PÁGINA DE REGISTRO CLÁSICA
   ══════════════════════════════════════════════════════════════════════════ */

.mc-register-wrap {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  max-width: 960px !important;
  margin: 40px auto !important;
  background: rgba(14,14,22,0.98) !important;
  border: 1px solid rgba(196,163,90,0.20) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.60) !important;
}
@media (max-width: 700px) {
  .mc-register-wrap { grid-template-columns: 1fr !important; }
  .mc-register-benefits { display: none !important; }
}

/* Panel de beneficios (izquierdo) */
.mc-register-benefits {
  background: linear-gradient(155deg, rgba(12,9,4,0.98) 0%, rgba(8,6,14,0.99) 100%) !important;
  border-right: 1px solid rgba(196,163,90,0.12) !important;
  padding: 40px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  position: relative !important;
  overflow: hidden !important;
}
.mc-register-benefits::before {
  content: '' !important;
  position: absolute !important;
  bottom: -60px !important;
  right: -60px !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(106,78,138,0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.mc-register-benefits-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.55) !important;
  margin-bottom: 4px !important;
}
.mc-register-benefits-heading {
  font-family: 'Cinzel', serif !important;
  font-size: 1.30rem !important;
  font-weight: 800 !important;
  color: #d4bb78 !important;
  line-height: 1.30 !important;
}
.mc-register-benefits-heading span { color: #c4a35a !important; }
.mc-benefit-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.mc-benefit-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: rgba(196,163,90,0.04) !important;
  border: 1px solid rgba(196,163,90,0.10) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  transition: all 0.18s !important;
}
.mc-benefit-item:hover { background: rgba(196,163,90,0.08) !important; border-color: rgba(196,163,90,0.22) !important; }
.mc-benefit-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 0.85rem !important;
  background: rgba(196,163,90,0.10) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  color: #c4a35a !important;
}
.mc-benefit-title { font-family: 'Cinzel', serif !important; font-size: 0.82rem !important; font-weight: 700 !important; color: #d4bb78 !important; }
.mc-benefit-desc { font-size: 0.76rem !important; color: rgba(212,212,216,0.50) !important; margin-top: 2px !important; }

/* Panel de formulario de registro */
.mc-register-form-panel {
  padding: 40px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
.mc-register-form-title { font-family: 'Cinzel', serif !important; font-size: 1.15rem !important; font-weight: 700 !important; color: #d4bb78 !important; }
.mc-register-form-subtitle { font-size: 0.78rem !important; color: rgba(212,212,216,0.45) !important; margin-top: 2px !important; }


/* ══════════════════════════════════════════════════════════════════════════
   8. CAMPOS DE FORMULARIO CLÁSICOS (login / registro / cualquier form)
   ══════════════════════════════════════════════════════════════════════════ */
.mc-field-wrap { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.mc-field-label {
  font-family: 'Cinzel', serif !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.55) !important;
}
.mc-field-inner { position: relative !important; }
.mc-field-icon {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(196,163,90,0.40) !important;
  font-size: 0.78rem !important;
  pointer-events: none !important;
  transition: color 0.20s !important;
}
.mc-input {
  width: 100% !important;
  padding: 11px 14px 11px 38px !important;
  background: rgba(0,0,0,0.50) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  border-radius: 9px !important;
  color: #d4d4d8 !important;
  font-size: 0.85rem !important;
  font-family: 'Inter', sans-serif !important;
  outline: none !important;
  transition: all 0.22s !important;
}
.mc-input::placeholder { color: rgba(212,212,216,0.30) !important; }
.mc-input:focus {
  background: rgba(196,163,90,0.05) !important;
  border-color: rgba(196,163,90,0.42) !important;
  box-shadow: 0 0 0 3px rgba(196,163,90,0.08) !important;
}
.mc-input:focus + .mc-field-icon,
.mc-field-inner:focus-within .mc-field-icon { color: rgba(196,163,90,0.75) !important; }

/* Botón submit clásico */
.mc-btn-submit {
  width: 100% !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, rgba(196,163,90,0.20), rgba(168,136,60,0.14)) !important;
  border: 1px solid rgba(196,163,90,0.38) !important;
  border-radius: 10px !important;
  color: #d4bb78 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.22s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  text-shadow: 0 0 12px rgba(196,163,90,0.30) !important;
}
.mc-btn-submit:hover {
  background: linear-gradient(135deg, rgba(196,163,90,0.30), rgba(168,136,60,0.22)) !important;
  border-color: rgba(196,163,90,0.55) !important;
  box-shadow: 0 0 24px rgba(196,163,90,0.14) !important;
  transform: translateY(-1px) !important;
}
.mc-btn-submit:active { transform: translateY(0) !important; }

/* Mensajes de error y éxito */
.mc-msg-error {
  padding: 10px 14px !important;
  background: rgba(160,80,96,0.12) !important;
  border: 1px solid rgba(160,80,96,0.30) !important;
  border-radius: 8px !important;
  color: #e08090 !important;
  font-size: 0.80rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mc-msg-success {
  padding: 10px 14px !important;
  background: rgba(74,154,96,0.10) !important;
  border: 1px solid rgba(74,154,96,0.28) !important;
  border-radius: 8px !important;
  color: #7ac890 !important;
  font-size: 0.80rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   9. ACORDEÓN DE ACTUALIZACIONES CLÁSICO — mc-updates
   ══════════════════════════════════════════════════════════════════════════ */
.mc-updates-wrap {
  background: rgba(14,14,22,0.97) !important;
  border: 1px solid rgba(196,163,90,0.15) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin: 1.5rem 0 !important;
}

/* Cabecera del acordeón */
.mc-updates-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  background: linear-gradient(90deg, rgba(196,163,90,0.08), transparent) !important;
  border-bottom: 1px solid rgba(196,163,90,0.12) !important;
  cursor: pointer !important;
  user-select: none !important;
}
.mc-updates-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: #d4bb78 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.mc-updates-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #c4a35a !important;
  box-shadow: 0 0 8px rgba(196,163,90,0.70) !important;
  flex-shrink: 0 !important;
  animation: mc-pulse-gold 2s ease-in-out infinite !important;
}
@keyframes mc-pulse-gold {
  0%, 100% { box-shadow: 0 0 4px rgba(196,163,90,0.50); }
  50%       { box-shadow: 0 0 12px rgba(196,163,90,0.90); }
}

/* Fila de update individual */
.mc-update-row {
  border-bottom: 1px solid rgba(196,163,90,0.07) !important;
  transition: background 0.15s !important;
}
.mc-update-row:last-child { border-bottom: none !important; }
.mc-update-row-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 20px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.mc-update-row-head:hover { background: rgba(196,163,90,0.04) !important; }
.mc-update-date {
  font-size: 0.68rem !important;
  font-family: 'Cinzel', serif !important;
  color: rgba(196,163,90,0.50) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.mc-update-type {
  font-family: 'Cinzel', serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  flex-shrink: 0 !important;
}
.mc-update-count {
  font-size: 0.72rem !important;
  color: rgba(212,212,216,0.35) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.mc-update-body {
  padding: 0 20px 14px 20px !important;
  display: none !important;
}
.mc-update-row.mc-open .mc-update-body { display: block !important; }
.mc-update-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  font-size: 0.80rem !important;
  color: rgba(212,212,216,0.70) !important;
  line-height: 1.55 !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}
.mc-update-item:last-child { border-bottom: none !important; }
.mc-update-item-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(196,163,90,0.45) !important;
  flex-shrink: 0 !important;
  margin-top: 6px !important;
}
.mc-update-item strong { color: #d4d4d8 !important; font-weight: 600 !important; }
.mc-update-note {
  font-size: 0.74rem !important;
  color: rgba(212,212,216,0.40) !important;
  font-style: italic !important;
  font-family: 'Crimson Text', Georgia, serif !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  padding-top: 8px !important;
  margin-top: 6px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   10. KILL FEED CLÁSICO — mc-killfeed
   ══════════════════════════════════════════════════════════════════════════ */
.mc-killfeed-wrap {
  background: rgba(14,14,22,0.97) !important;
  border: 1px solid rgba(196,163,90,0.15) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 1.5rem 0 !important;
}
.mc-killfeed-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  background: linear-gradient(90deg, rgba(196,163,90,0.08), transparent) !important;
  border-bottom: 1px solid rgba(196,163,90,0.12) !important;
}
.mc-killfeed-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: #d4bb78 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mc-killfeed-scroll { height: 170px !important; overflow: hidden !important; position: relative !important; }
.mc-killfeed-list {
  position: absolute !important;
  inset: 0 !important;
  padding: 8px 0 !important;
  animation: mc-marquee 22s linear infinite !important;
}
@keyframes mc-marquee {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.mc-kill-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 18px !important;
  font-size: 0.82rem !important;
  border-bottom: 1px solid rgba(196,163,90,0.06) !important;
}
.mc-kill-row:hover { background: rgba(196,163,90,0.04) !important; }
.mc-kill-killer { font-weight: 700 !important; color: #d4bb78 !important; min-width: 100px !important; }
.mc-kill-sep { font-size: 0.70rem !important; color: rgba(212,212,216,0.35) !important; flex-shrink: 0 !important; }
.mc-kill-victim { font-weight: 600 !important; color: rgba(160,80,96,0.85) !important; min-width: 100px !important; }
.mc-kill-map { font-size: 0.70rem !important; color: rgba(196,163,90,0.45) !important; margin-left: auto !important; flex-shrink: 0 !important; }
.mc-kill-icon { font-size: 0.70rem !important; color: rgba(196,163,90,0.55) !important; flex-shrink: 0 !important; width: 16px !important; text-align: center !important; }


/* ══════════════════════════════════════════════════════════════════════════
   11. BOTONES CLÁSICOS GENERALES
   ══════════════════════════════════════════════════════════════════════════ */
.mc-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 20px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.22s !important;
  text-decoration: none !important;
}
/* Dorado primario */
.mc-btn-gold {
  background: linear-gradient(135deg, rgba(196,163,90,0.20), rgba(168,136,60,0.14)) !important;
  border: 1px solid rgba(196,163,90,0.38) !important;
  color: #d4bb78 !important;
}
.mc-btn-gold:hover {
  background: linear-gradient(135deg, rgba(196,163,90,0.30), rgba(168,136,60,0.22)) !important;
  border-color: rgba(196,163,90,0.55) !important;
  box-shadow: 0 0 22px rgba(196,163,90,0.15) !important;
  transform: translateY(-1px) !important;
  color: #d4bb78 !important;
}
/* Fantasma (transparente) */
.mc-btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(196,163,90,0.22) !important;
  color: rgba(196,163,90,0.65) !important;
}
.mc-btn-ghost:hover {
  background: rgba(196,163,90,0.06) !important;
  border-color: rgba(196,163,90,0.38) !important;
  color: #d4bb78 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   12. CONTADOR REGRESIVO CLÁSICO — mc-countdown
   ══════════════════════════════════════════════════════════════════════════ */
.mc-countdown-wrap {
  background: linear-gradient(155deg, rgba(18,14,8,0.98) 0%, rgba(10,10,18,0.99) 100%) !important;
  border: 1px solid rgba(196,163,90,0.20) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 1.5rem 0 !important;
}
.mc-countdown-label {
  font-family: 'Cinzel', serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.55) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mc-countdown-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.20rem !important;
  font-weight: 800 !important;
  color: #d4bb78 !important;
  text-shadow: 0 0 18px rgba(196,163,90,0.22) !important;
}
.mc-countdown-blocks {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}
.mc-countdown-block {
  background: rgba(196,163,90,0.07) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  border-radius: 10px !important;
  padding: 14px 8px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
.mc-countdown-num {
  font-family: 'Cinzel', serif !important;
  font-size: 1.70rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #c4a35a !important;
  text-shadow: 0 0 18px rgba(196,163,90,0.40) !important;
  font-variant-numeric: tabular-nums !important;
}
.mc-countdown-unit {
  font-family: 'Cinzel', serif !important;
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.45) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   FIN — SECCIÓN CLÁSICA
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   ██████  ESTILOS TEMPLATE REAL — clases exactas de Mythos3 WebEngine
   ███████████████████████████████████████████████████████████████████████████
   Detectadas inspeccionando el HTML vivo de mu-core.com
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   A. PÁGINA DE LOGIN / REGISTRO — .auth-*
   ══════════════════════════════════════════════════════════════════════════ */

/* Fondo de la página de auth */
body.auth-page,
.auth-wrapper ~ body,
body:has(.auth-wrapper) {
  background: #07070b !important;
}

/* Contenedor principal auth */
.auth-wrapper {
  min-height: 80vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 16px !important;
}

/* Tarjeta de auth */
.auth-card {
  background: linear-gradient(160deg, rgba(18,14,8,0.98) 0%, rgba(10,10,20,0.99) 100%) !important;
  border: 1px solid rgba(196,163,90,0.22) !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 1px rgba(196,163,90,0.06),
    0 24px 60px rgba(0,0,0,0.65),
    0 0 40px rgba(196,163,90,0.05) !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 480px !important;
  position: relative !important;
}
/* Línea decorativa dorada superior */
.auth-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.60), rgba(196,163,90,0.80), rgba(196,163,90,0.60), transparent) !important;
}

/* Cabecera de la tarjeta */
.auth-header {
  padding: 28px 32px 20px !important;
  border-bottom: 1px solid rgba(196,163,90,0.12) !important;
  background: linear-gradient(90deg, rgba(196,163,90,0.07), rgba(196,163,90,0.03), transparent) !important;
  text-align: center !important;
}
.auth-header h1,
.auth-header h2,
.auth-header h3,
.auth-header .title,
.auth-header p:first-child {
  font-family: 'Cinzel', 'Times New Roman', serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: #d4bb78 !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 20px rgba(196,163,90,0.25) !important;
  margin-bottom: 4px !important;
}
.auth-header p,
.auth-header .subtitle {
  font-size: 0.80rem !important;
  color: rgba(212,212,216,0.45) !important;
}

/* Cuerpo del formulario */
.auth-body-content,
.auth-form {
  padding: 28px 32px !important;
}

/* Labels */
.auth-form label,
.auth-body-content label {
  font-family: 'Cinzel', serif !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.55) !important;
  display: block !important;
  margin-bottom: 5px !important;
}

/* Inputs */
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="email"],
.auth-body-content input[type="text"],
.auth-body-content input[type="password"],
.auth-body-content input[type="email"] {
  width: 100% !important;
  background: rgba(0,0,0,0.50) !important;
  border: 1px solid rgba(196,163,90,0.20) !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
  color: #d4d4d8 !important;
  font-size: 0.85rem !important;
  outline: none !important;
  transition: all 0.22s !important;
  margin-bottom: 14px !important;
}
.auth-form input[type="text"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="email"]:focus,
.auth-body-content input[type="text"]:focus,
.auth-body-content input[type="password"]:focus,
.auth-body-content input[type="email"]:focus {
  background: rgba(196,163,90,0.05) !important;
  border-color: rgba(196,163,90,0.45) !important;
  box-shadow: 0 0 0 3px rgba(196,163,90,0.08) !important;
}

/* Input con ícono (.input-group) */
.auth-form .input-group,
.auth-body-content .input-group {
  position: relative !important;
  margin-bottom: 14px !important;
}
.auth-form .input-group i,
.auth-body-content .input-group i {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(196,163,90,0.40) !important;
  font-size: 0.78rem !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.auth-form .input-group input,
.auth-body-content .input-group input {
  padding-left: 38px !important;
  margin-bottom: 0 !important;
}

/* Botón submit */
.auth-form button[type="submit"],
.auth-form input[type="submit"],
.auth-body-content button[type="submit"],
.auth-body-content input[type="submit"] {
  width: 100% !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, rgba(196,163,90,0.22), rgba(168,136,60,0.15)) !important;
  border: 1px solid rgba(196,163,90,0.40) !important;
  border-radius: 10px !important;
  color: #d4bb78 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.22s !important;
  text-shadow: 0 0 12px rgba(196,163,90,0.25) !important;
  margin-top: 6px !important;
}
.auth-form button[type="submit"]:hover,
.auth-form input[type="submit"]:hover,
.auth-body-content button[type="submit"]:hover {
  background: linear-gradient(135deg, rgba(196,163,90,0.32), rgba(168,136,60,0.24)) !important;
  border-color: rgba(196,163,90,0.60) !important;
  box-shadow: 0 0 24px rgba(196,163,90,0.16) !important;
  transform: translateY(-1px) !important;
}

/* Footer de auth (links) */
.auth-footer-links {
  padding: 16px 32px 24px !important;
  border-top: 1px solid rgba(196,163,90,0.08) !important;
  text-align: center !important;
  font-size: 0.78rem !important;
  color: rgba(212,212,216,0.40) !important;
}
.auth-footer-links a {
  color: #c4a35a !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.auth-footer-links a:hover {
  text-decoration: underline !important;
  color: #d4bb78 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   B. PÁGINA DE INFORMACIÓN — .info-*, .custom-table, .page-title
   ══════════════════════════════════════════════════════════════════════════ */

/* Título de página */
.page-title {
  font-family: 'Cinzel', 'Times New Roman', serif !important;
  font-size: 1.40rem !important;
  font-weight: 800 !important;
  color: #d4bb78 !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 24px rgba(196,163,90,0.22) !important;
  border-bottom: 1px solid rgba(196,163,90,0.18) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
}
.page-title::after {
  content: '' !important;
  display: block !important;
  height: 1px !important;
  margin-top: 6px !important;
  background: linear-gradient(90deg, rgba(196,163,90,0.45), transparent) !important;
}

/* Grid de tarjetas de info */
.info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

/* Tarjeta de info individual */
.info-card {
  background: linear-gradient(145deg, rgba(18,14,8,0.97) 0%, rgba(10,10,20,0.98) 100%) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45) !important;
  transition: border-color 0.22s, box-shadow 0.22s !important;
}
.info-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(196,163,90,0.50), rgba(196,163,90,0.15), transparent) !important;
}
.info-card:hover {
  border-color: rgba(196,163,90,0.32) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 20px rgba(196,163,90,0.06) !important;
}

/* Labels y valores en info-card */
.info-label {
  font-family: 'Cinzel', serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.55) !important;
  margin-bottom: 4px !important;
}
.info-value {
  font-family: 'Cinzel', serif !important;
  font-size: 1.30rem !important;
  font-weight: 800 !important;
  color: #c4a35a !important;
  line-height: 1.2 !important;
  text-shadow: 0 0 16px rgba(196,163,90,0.30) !important;
}

/* Lista de info del servidor */
.server-info-list {
  background: linear-gradient(145deg, rgba(14,14,22,0.97) 0%, rgba(10,10,18,0.98) 100%) !important;
  border: 1px solid rgba(196,163,90,0.16) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
.server-info-list li,
.server-info-list .item,
.server-info-list tr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(196,163,90,0.07) !important;
  font-size: 0.83rem !important;
  transition: background 0.15s !important;
}
.server-info-list li:last-child,
.server-info-list tr:last-child { border-bottom: none !important; }
.server-info-list li:hover,
.server-info-list tr:hover { background: rgba(196,163,90,0.04) !important; }
.server-info-list .label,
.server-info-list td:first-child {
  font-family: 'Cinzel', serif !important;
  font-size: 0.75rem !important;
  color: rgba(196,163,90,0.65) !important;
  letter-spacing: 0.04em !important;
}
.server-info-list .value,
.server-info-list td:last-child {
  font-weight: 700 !important;
  color: #d4bb78 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.80rem !important;
}

/* Tabla custom (.custom-table) */
.custom-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: rgba(14,14,22,0.97) !important;
  border: 1px solid rgba(196,163,90,0.16) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
.custom-table thead tr {
  background: rgba(196,163,90,0.07) !important;
}
.custom-table thead th {
  font-family: 'Cinzel', serif !important;
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.55) !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid rgba(196,163,90,0.13) !important;
  text-align: left !important;
}
.custom-table tbody tr {
  border-bottom: 1px solid rgba(196,163,90,0.06) !important;
  transition: background 0.15s !important;
}
.custom-table tbody tr:last-child { border-bottom: none !important; }
.custom-table tbody tr:hover { background: rgba(196,163,90,0.04) !important; }
.custom-table td {
  padding: 10px 16px !important;
  font-size: 0.83rem !important;
  color: #d4d4d8 !important;
  vertical-align: middle !important;
}
.custom-table td:first-child {
  font-weight: 600 !important;
  color: #d4bb78 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   C. KILL FEED EN VIVO — .kill-line, .ki-*, #vertical-marquee-pvp/pvm
   ══════════════════════════════════════════════════════════════════════════ */

/* Contenedor del marquee */
#vertical-marquee-pvp,
#vertical-marquee-pvm,
.livekills-marquee {
  background: rgba(12,10,6,0.60) !important;
  border-top: 1px solid rgba(196,163,90,0.08) !important;
}

/* Fila individual de kill */
.kill-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  border-bottom: 1px solid rgba(196,163,90,0.06) !important;
  font-size: 0.82rem !important;
  transition: background 0.15s !important;
}
.kill-line:hover { background: rgba(196,163,90,0.04) !important; }

/* Nombre del asesino */
.ki-killer,
.kill-line .killer {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  color: #d4bb78 !important;
  min-width: 90px !important;
  text-shadow: 0 0 8px rgba(196,163,90,0.25) !important;
}

/* Separador "mató a" */
.ki-text,
.ki-text2,
.kill-sep,
.kill-line .sep {
  font-size: 0.68rem !important;
  color: rgba(212,212,216,0.35) !important;
  flex-shrink: 0 !important;
}

/* Nombre de la víctima */
.ki-victim,
.kill-line .victim {
  font-weight: 600 !important;
  color: rgba(160,80,96,0.90) !important;
  min-width: 90px !important;
}

/* Mapa */
.ki-map,
.kill-line .map {
  font-size: 0.68rem !important;
  color: rgba(196,163,90,0.45) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.04em !important;
}

/* Ícono de kill */
.ki-icon,
.kill-line i {
  font-size: 0.68rem !important;
  color: rgba(196,163,90,0.55) !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  text-align: center !important;
}

/* Tarjeta que envuelve el kill feed */
.rank-card--livekills {
  background: linear-gradient(160deg, rgba(16,12,6,0.97) 0%, rgba(10,10,20,0.98) 100%) !important;
  border: 1px solid rgba(196,163,90,0.18) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.rank-card--livekills .rank-card__header {
  background: linear-gradient(90deg, rgba(196,163,90,0.10), rgba(196,163,90,0.04), transparent) !important;
  border-bottom: 1px solid rgba(196,163,90,0.13) !important;
  padding: 12px 18px !important;
}
.rank-card--livekills .rank-card__title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: #d4bb78 !important;
  text-transform: uppercase !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   D. RANK CARDS — .rank-card, .simple-rank-card, .ranking-item
   ══════════════════════════════════════════════════════════════════════════ */

.rank-card,
.simple-rank-card {
  background: linear-gradient(145deg, rgba(16,12,6,0.97) 0%, rgba(10,10,20,0.98) 100%) !important;
  border: 1px solid rgba(196,163,90,0.16) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: border-color 0.20s, box-shadow 0.20s !important;
}
.rank-card:hover,
.simple-rank-card:hover {
  border-color: rgba(196,163,90,0.30) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.50), 0 0 16px rgba(196,163,90,0.07) !important;
}

.rank-card__header {
  background: linear-gradient(90deg, rgba(196,163,90,0.09), rgba(196,163,90,0.03), transparent) !important;
  border-bottom: 1px solid rgba(196,163,90,0.11) !important;
  padding: 12px 18px !important;
}
.rank-card__title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #d4bb78 !important;
}
.rank-card__subtitle {
  font-size: 0.68rem !important;
  color: rgba(196,163,90,0.45) !important;
  margin-top: 2px !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.06em !important;
}
.rank-card__divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.20), transparent) !important;
}

/* Item de ranking */
.ranking-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  border-bottom: 1px solid rgba(196,163,90,0.06) !important;
  transition: background 0.15s !important;
}
.ranking-item:last-child { border-bottom: none !important; }
.ranking-item:hover { background: rgba(196,163,90,0.04) !important; }

.rank-index {
  font-family: 'Cinzel', serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: rgba(196,163,90,0.45) !important;
  width: 24px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.rank-name,
.player-name {
  font-weight: 600 !important;
  color: #d4d4d8 !important;
  font-size: 0.83rem !important;
  flex: 1 !important;
}
.rank-value {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  color: #c4a35a !important;
  font-size: 0.82rem !important;
  text-shadow: 0 0 10px rgba(196,163,90,0.25) !important;
}
.rank-badge {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  background: rgba(196,163,90,0.10) !important;
  border: 1px solid rgba(196,163,90,0.22) !important;
  color: rgba(196,163,90,0.75) !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.06em !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   E. MÓDULO SIDEBAR — .sidebar-module
   ════════════════════════════════════════════��═════════════════════════════ */

.sidebar-module {
  background: linear-gradient(160deg, rgba(16,12,6,0.97) 0%, rgba(10,10,20,0.98) 100%) !important;
  border: 1px solid rgba(196,163,90,0.16) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.40) !important;
  position: relative !important;
}
/* Línea dorada superior en cada módulo */
.sidebar-module::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.55), transparent) !important;
}

/* Título del módulo sidebar */
.sidebar-module .module-title,
.sidebar-module > h3,
.sidebar-module > .title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #d4bb78 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(196,163,90,0.10) !important;
  background: linear-gradient(90deg, rgba(196,163,90,0.08), transparent) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   F. HERO STATS / HEADER — .hero-stats-container, .compact-header-wrapper
   ══════════════════════════════════════════════════════════════════════════ */

.hero-stats-container {
  background: rgba(14,14,22,0.80) !important;
  border: 1px solid rgba(196,163,90,0.14) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  backdrop-filter: blur(8px) !important;
}

/* Stat dentro del hero */
.hero-stats-container .card-stat,
.hero-stats-container .stat-value {
  font-family: 'Cinzel', serif !important;
  font-weight: 800 !important;
  color: #c4a35a !important;
  text-shadow: 0 0 14px rgba(196,163,90,0.30) !important;
}
.hero-stats-container .card-label,
.hero-stats-container .stat-label {
  font-family: 'Cinzel', serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.50) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   G. WIDGETS SOCIALES — .social-widget, .social-widgets-grid
   ══════════════════════════════════════════════════════════════════════════ */

.social-widgets-module,
.social-widgets-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}
.social-widget {
  background: linear-gradient(145deg, rgba(16,12,6,0.97) 0%, rgba(10,10,20,0.98) 100%) !important;
  border: 1px solid rgba(196,163,90,0.15) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  transition: all 0.20s !important;
  text-decoration: none !important;
}
.social-widget:hover {
  border-color: rgba(196,163,90,0.30) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.50) !important;
  transform: translateY(-2px) !important;
}

/* Discord widget */
.social-widget.discord {
  border-color: rgba(88,101,242,0.20) !important;
}
.social-widget.discord:hover {
  border-color: rgba(88,101,242,0.38) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.50), 0 0 16px rgba(88,101,242,0.07) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   I. BOTONES GENÉRICOS — .btn-more, .view-all-link
   ══════════════════════════════════════════════════════════════════════════ */

.btn-more,
.view-all-link {
  font-family: 'Cinzel', serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.70) !important;
  text-decoration: none !important;
  border: 1px solid rgba(196,163,90,0.22) !important;
  border-radius: 7px !important;
  padding: 6px 14px !important;
  background: rgba(196,163,90,0.06) !important;
  transition: all 0.20s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.btn-more:hover,
.view-all-link:hover {
  background: rgba(196,163,90,0.12) !important;
  border-color: rgba(196,163,90,0.38) !important;
  color: #d4bb78 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   J. CASTLE SIEGE — .cs-module, .cs-winner-card
   ════════���═════════════════════════════════════════════════════════════════ */

.cs-module {
  background: linear-gradient(160deg, rgba(18,14,8,0.98) 0%, rgba(10,10,20,0.99) 100%) !important;
  border: 1px solid rgba(196,163,90,0.20) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
}
.cs-module::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(196,163,90,0.65), rgba(196,163,90,0.85), rgba(196,163,90,0.65), transparent) !important;
}
.cs-winner-card {
  background: rgba(196,163,90,0.05) !important;
  border: 1px solid rgba(196,163,90,0.14) !important;
  border-radius: 10px !important;
  padding: 14px !important;
}
.cs-label {
  font-family: 'Cinzel', serif !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(196,163,90,0.50) !important;
}
.cs-guild-name,
.cs-master {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  color: #d4bb78 !important;
  font-size: 0.92rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   USERCP — PANEL DE CUENTAS
   Variables CSS + clases usadas por todos los módulos de usercp/
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Variables globales que los PHP del UserCP consumen ─────────────────── */
:root {
  --text-primary:              #e8dcc8;
  --text-secondary:            #666;
  --accent-color:              rgba(255,255,255,.03);
  --border-color:              rgba(196,163,90,.18);
  --gold-color:                #c4a35a;
  --blue-color:                #4dabf7;
  --primary-color:             #07070b;

  /* Botón dorado */
  --gradient-gold-button:       linear-gradient(135deg,#c4a35a,#a8883c);
  --gradient-gold-button-hover: linear-gradient(135deg,#d4bb78,#c4a35a);
  --shadow-gold-button:         0 4px 20px rgba(196,163,90,.28);
  --shadow-gold-button-hover:   0 8px 28px rgba(196,163,90,.42);

  /* Tonos dorado usados como "purple" en páginas secundarias (vote, market…) */
  --purple-800-30:            rgba(196,163,90,.22);
  --overlay-purple-light:     rgba(196,163,90,.10);
  --purple-400:               #c4a35a;
  --purple-rgb:               196,163,90;
  --gradient-purple-pink:       linear-gradient(135deg,rgba(196,163,90,.18),rgba(168,136,60,.08));
  --gradient-purple-pink-hover: linear-gradient(135deg,rgba(196,163,90,.30),rgba(168,136,60,.16));
}

/* ── Tarjeta contenedora principal (admin-table-card) ───────────────────── */
.admin-table-card {
  background: rgba(10,9,14,.80) !important;
  border: 1px solid rgba(196,163,90,.18) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.50) !important;
  backdrop-filter: blur(8px) !important;
}

/* ── Grid de stat-cards (admin-stats-grid) ──────────────────────────────── */
.admin-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr)) !important;
  gap: 1rem !important;
}

/* ── Tarjeta de stat individual (admin-stat-card) ──────────────────────── */
.admin-stat-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(196,163,90,.14) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.admin-stat-card:hover {
  border-color: rgba(196,163,90,.30) !important;
  box-shadow: 0 6px 24px rgba(196,163,90,.10) !important;
}

/* ── Cabecera de la stat-card ───────────────────────────────────────────── */
.admin-stat-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: .75rem !important;
}
.admin-stat-title {
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #555 !important;
}

/* ── Ícono de la stat-card (variantes de color) ─────────────────────────── */
.admin-stat-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}
.admin-stat-icon.primary {
  background: rgba(196,163,90,.14) !important;
  border: 1px solid rgba(196,163,90,.28) !important;
  color: #c4a35a !important;
}
.admin-stat-icon.success {
  background: rgba(105,219,124,.12) !important;
  border: 1px solid rgba(105,219,124,.24) !important;
  color: #69db7c !important;
}
.admin-stat-icon.info {
  background: rgba(77,171,247,.12) !important;
  border: 1px solid rgba(77,171,247,.24) !important;
  color: #4dabf7 !important;
}
.admin-stat-icon.danger {
  background: rgba(240,62,62,.12) !important;
  border: 1px solid rgba(240,62,62,.24) !important;
  color: #f03e3e !important;
}

/* ── Valor grande dentro de la tarjeta ──────────────────────────────────── */
.admin-stat-value {
  font-family: 'Cinzel', serif !important;
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1 !important;
  margin-bottom: .5rem !important;
}

/* ── Indicador de cambio (positive / danger) ────────────────────────────── */
.admin-stat-change {
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}
.admin-stat-change.positive { color: #69db7c !important; }
.admin-stat-change.danger   { color: #f06595 !important; }

/* ── Grid de 2 columnas de info de cuenta ───────────────────────────────── */
.account-info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
  margin-bottom: 2rem !important;
}
@media(max-width:800px) {
  .account-info-grid { grid-template-columns: 1fr !important; }
}

/* ── Tabla genérica del UserCP (admin-table) ────────────────────────────── */
.admin-table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.admin-table th {
  padding: 10px 16px !important;
  text-align: left !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: #555 !important;
  background: rgba(0,0,0,.35) !important;
  border-bottom: 1px solid rgba(196,163,90,.12) !important;
}
.admin-table td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #ccc !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.admin-table tr:hover td {
  background: rgba(255,255,255,.02) !important;
}

/* ── Inputs & formularios en las páginas UserCP ─────────────────────────── */
.main input[type="password"],
.main input[type="text"],
.main input[type="email"],
.main input[type="number"],
.main select,
.main textarea {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(196,163,90,.18) !important;
  border-radius: 8px !important;
  color: #e8dcc8 !important;
  font-family: inherit !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.main input:focus,
.main select:focus,
.main textarea:focus {
  border-color: #c4a35a !important;
  box-shadow: 0 0 0 3px rgba(196,163,90,.12) !important;
  outline: none !important;
}

/* ── Títulos h2 del UserCP ──────────────────────────────────────────────── */
main h2 {
  font-family: 'Cinzel', serif !important;
  font-weight: 900 !important;
  color: #e8dcc8 !important;
}


/* ══ NOTICIAS — recorte solo en vista de lista (homepage) ═════════════════ */
/* .mc-news-list es el wrapper del news.php override — NO aplica en /news/id/ */
.mc-news-list .news-item-content {
  max-height: 5.5rem !important;
  overflow: hidden !important;
  position: relative !important;
  -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, black 45%, transparent 100%) !important;
}
.mc-news-list .news-item-content img { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   FIN — ESTILOS TEMPLATE REAL
   ══════════════════════════════════════════════════════════════════════════ */