/* =======================================================================
 * 2) REEMPLAZA — Estilos Estáticos Optimizados para Cero Uso de CPU
 * -----------------------------------------------------------------------
 * Se eliminan por completo los @keyframes y animaciones infinitas.
 * Los colores se mantienen fijos y solo reaccionan al :hover del usuario.
 * ======================================================================= */

/* --- CONFIGURACIÓN BASE PARA WIDGETS --- */
.runica-vip-box, 
.runica-craft-box, 
.runica-link-discord {
  animation: none !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease !important;
  border-width: 2px !important;
  border-style: solid !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important; /* Sombra estática básica (fácil de renderizar) */
}

/* Efecto de elevación ligera al pasar el mouse (usa la GPU mediante transform) */
.runica-vip-box:hover, 
.runica-craft-box:hover, 
.runica-link-discord:hover {
  transform: translateY(-2px);
}

.runica-vip-title, 
.runica-craft-title, 
.runica-discord-title {
  animation: none !important;
  text-shadow: 1px 1px 2px #000 !important; /* Texto nítido y estático */
}

/* --- ESTILOS ESPECÍFICOS POR TEMÁTICA --- */

/* 1. Widget VIP (Dorado Elegante) */
.runica-vip-box {
  border-color: #bf9456 !important;
  background: linear-gradient(135deg, #1a1a21 0%, #101014 100%) !important;
}
.runica-vip-box:hover {
  border-color: #ffd700 !important;
}
.runica-vip-title {
  color: #ffd700 !important;
}

/* 2. Widget de Craft (Naranja Forja) */
.runica-craft-box {
  border-color: #d14917 !important;
  background: linear-gradient(135deg, #1f1f26 0%, #0f0f12 100%) !important;
}
.runica-craft-box:hover {
  border-color: #ff6600 !important;
}
.runica-craft-title {
  color: #ff6600 !important;
}

/* 3. Widget de Discord (Azul Blur) */
.runica-link-discord {
  border-color: #5865f2 !important;
  background: linear-gradient(135deg, #1e1e24 0%, #0e0f14 100%) !important;
}
.runica-link-discord:hover {
  border-color: #7289da !important;
}
/* En lugar de animar Discord, añadimos una transición simple al botón interno */
.discord-custom-button {
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  animation: none !important;
}
.discord-custom-button:hover {
  background-color: #4752c4 !important;
  transform: scale(1.02);
}