/* ==========================================================================
   Mu Manager PRO - Design System & Variables (theme.css)
   Stitch Approved Ironforge — Atmósfera Artística y Legendaria MU Online
   ========================================================================== */

:root {
  /* 1. Paleta Canónica Ironforge (DESIGN.md) */
  --bg-deep: #0B0C0B;            /* Deep Forge: ranuras profundas, fondo sombrío */
  --bg-canvas: #111211;          /* Charcoal Canvas: fondo global de la aplicación */
  --bg-surface-low: #181918;     /* Iron Low: placa oscura de control, fondos secundarios */
  --bg-surface-panel: #1D1E1D;   /* Iron Panel: paneles principales y contenedores */
  --bg-surface-high: #262726;    /* Raised Iron: cabeceras activas, controles elevados */

  /* 2. Biseles Metálicos Chiseled 3D */
  --bevel-light: #3E3F3E;        /* Bright Steel: resalte superior e izquierdo */
  --border-structural: #4C463A;  /* Structural Outline: marco de hierro de paneles */
  --border-subtle: #2E2F2E;      /* Borde interno atenuado */

  /* 3. Texturas Auténticas y Arte de MU Online */
  --bg-stone: url('../assets/ui/mu_stone_pavement.jpg');
  --divider-gold: url('../assets/ui/mu_gold_divider.png');
  --header-gold: url('../assets/ui/header_cornisa_gold.png');
  --footer-gothic: url('../assets/ui/gothic_bottom_footer.png');
  --slot-box: url('../assets/ui/mu_slot_box.png');

  /* Sprites de Botones Nativos */
  --btn-big-normal: url('../assets/ui/btn_big_normal.png');
  --btn-big-pressed: url('../assets/ui/btn_big_pressed.png');
  --btn-med-normal: url('../assets/ui/btn_medium_normal.png');
  --btn-med-pressed: url('../assets/ui/btn_medium_pressed.png');
  --btn-small-normal: url('../assets/ui/btn_small_normal.png');
  --btn-small-pressed: url('../assets/ui/btn_small_pressed.png');
  --tab-active: url('../assets/ui/mu_tab_active.png');
  --tab-inactive: url('../assets/ui/mu_tab_inactive.png');

  /* 4. Acentos de Oro Restringido (DESIGN.md) */
  --gold-radiant: #FEDF99;       /* Oro Radiante: texto de botones activos, pestañas */
  --gold-primary: #EFD28D;       /* Oro Primario: títulos ceremoniales y foco */
  --gold-antique: #E0C380;       /* Oro Antiguo: marcos y detalles de jerarquía */
  --gold-pressed: #D2B674;       /* Oro Presionado: estados activos secundarios */
  --gold-dark: #A68028;          /* Oro Sombra: borde de relieve oscuro */
  --gold-glow: rgba(239, 210, 141, 0.35);

  /* 5. Acentos de Estado y Lore de MU */
  --green-online: #62E642;       /* Verde Servidor / Conectado */
  --mu-excellent: #3FCF8E;       /* Verde Ítem Excelente clásico MU */
  --mu-harmony: #EFD28D;         /* Amarillo Opción Harmony */
  --mu-luck: #7FA8F5;            /* Azul Celeste Luck */
  --danger-iron: #7A2E28;        /* Rojo Destructivo controlado */
  --error-text: #FFDAD6;

  /* 6. Tipografía Canónica de Ultra Alto Contraste (WCAG AAA) */
  --text-ivory: #F5F3F0;         /* Texto Principal: marfil de máxima nitidez */
  --text-silver: #DDD7CB;        /* Texto Secundario: plata/acero claro luminoso */
  --text-dimmed: #B5ACA0;        /* Texto Terciario: legible y claro sobre piedra oscura */

  --font-display: 'Domine', Georgia, serif;
  --font-body: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* 7. Sombras y Profundidad Táctil */
  --shadow-chiseled: inset 1px 1px 0 rgba(239, 210, 141, 0.22), inset -1px -1px 0 rgba(0, 0, 0, 0.88);
  --shadow-recessed: inset 1px 1px 3px rgba(0, 0, 0, 0.9), inset -1px -1px 1px rgba(255, 255, 255, 0.05);
  --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.8), inset 1px 1px 0 rgba(239, 210, 141, 0.18);
  --shadow-gold: 0 6px 24px rgba(239, 210, 141, 0.3);

  /* 8. Radios Góticos Rígidos (0 a 3px máx) */
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 3px;

  /* 9. Transiciones */
  --trans-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset y Normalización */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Cursor Legendario de Webzen MU Online */
html, body {
  cursor: url('../assets/art/cursor_default_webzen.png'), default;
  scroll-behavior: smooth;
  color-scheme: dark;
  font-size: 16px;
  background-color: var(--bg-deep);
}

a, button, [role="button"], input[type="range"], .device-tab-btn, .apk-nav-item, .faq-question, .hero-class-btn {
  cursor: url('../assets/art/cursor_attack_webzen.png'), pointer !important;
}

body {
  font-family: var(--font-body);
  color: var(--text-ivory);
  background-color: var(--bg-deep);
  background-image: 
    radial-gradient(circle at 50% 12%, rgba(239, 210, 141, 0.08) 0%, transparent 65%),
    linear-gradient(180deg, rgba(11, 12, 11, 0.35) 0%, rgba(8, 9, 8, 0.7) 100%),
    var(--bg-stone);
  background-repeat: repeat;
  background-size: auto, auto, 480px 480px;
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Selección de Texto */
::selection {
  background: rgba(239, 210, 141, 0.35);
  color: var(--gold-radiant);
}

/* Scrollbar Gótico MU */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #080808;
}
::-webkit-scrollbar-thumb {
  background: #252625;
  border: 1px solid var(--border-structural);
  border-radius: var(--radius-xs);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dark);
}

/* Elementos Básicos */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--trans-fast);
}

button {
  border: none;
  background: none;
  font-family: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ==========================================================================
   ANIMACIONES ARTÍSTICAS (Chispas, Joyas Flotantes y Auras de MU)
   ========================================================================== */
@keyframes floatJewel {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

@keyframes jewelGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(239, 210, 141, 0.5)) drop-shadow(0 0 20px rgba(239, 210, 141, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(239, 210, 141, 0.85)) drop-shadow(0 0 35px rgba(239, 210, 141, 0.4));
  }
}

@keyframes chaosGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255, 120, 20, 0.6)) drop-shadow(0 0 22px rgba(255, 80, 0, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 140, 30, 0.95)) drop-shadow(0 0 40px rgba(255, 90, 0, 0.5));
  }
}

@keyframes soulGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(80, 160, 255, 0.6)) drop-shadow(0 0 22px rgba(40, 120, 255, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(100, 180, 255, 0.95)) drop-shadow(0 0 40px rgba(50, 140, 255, 0.5));
  }
}

@keyframes lifeGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(60, 220, 140, 0.6)) drop-shadow(0 0 22px rgba(40, 180, 100, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(80, 240, 160, 0.95)) drop-shadow(0 0 40px rgba(50, 200, 120, 0.5));
  }
}

@keyframes pulseGoldDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

.fx-float-jewel {
  animation: floatJewel 4s ease-in-out infinite;
}

.fx-gold-pulse {
  animation: pulseGoldDot 2.4s ease-in-out infinite;
}