/* Estilos personalizados y animaciones místicas */
    body {
      font-family: 'Montserrat', sans-serif;
      background-color: #060608;
      color: #e5e7eb;
      overflow-x: hidden;
    }

    .font-title {
      font-family: 'Cinzel', serif;
    }

    /* Brillo de oro rúnico */
    .gold-glow {
      text-shadow: 0 0 10px rgba(197, 160, 89, 0.6), 0 0 20px rgba(197, 160, 89, 0.3);
    }
    
    .gold-border-glow {
      box-shadow: 0 0 25px rgba(239, 68, 68, 0.4), inset 0 0 15px rgba(197, 160, 89, 0.1);
    }

    /* Partículas de Gracia en suspensión */
    @keyframes floatParticles {
      0% {
        transform: translateY(100vh) translateX(0px) scale(0.5);
        opacity: 0;
      }
      50% {
        opacity: 0.8;
      }
      100% {
        transform: translateY(-10vh) translateX(100px) scale(1.2);
        opacity: 0;
      }
    }

    .grace-particle {
      position: absolute;
      background: radial-gradient(circle, rgba(229,193,125,0.8) 0%, rgba(197,160,89,0) 70%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
    }

    /* Animación de niebla de las Tierras Intermedias */
    @keyframes fogMovement {
      0% { transform: translateX(0%) translateY(0%); }
      50% { transform: translateX(-10%) translateY(5%); }
      100% { transform: translateX(0%) translateY(0%); }
    }
    .fog-bg {
      animation: fogMovement 30s ease-in-out infinite;
      filter: blur(40px);
    }

    /* Bordes ornamentados al estilo de interfaz de Elden Ring */
    .elden-border {
      position: relative;
      border: 1px solid rgba(197, 160, 89, 0.3);
    }
    .elden-border::before, .elden-border::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border: 1.5px solid #c5a059;
    }
    /* Top-left */
    .elden-border::before {
      top: -3px;
      left: -3px;
      border-right: none;
      border-bottom: none;
    }
    /* Bottom-right */
    .elden-border::after {
      bottom: -3px;
      right: -3px;
      border-left: none;
      border-top: none;
    }

    /* Transición suave para gráficos de barra de atributos */
    .attribute-bar {
      transition: width 0.3s ease;
    }

    /* Efecto de desintegración dorada (Gracia divina) */
    .hover-gold-card {
      transition: all 0.4s ease;
    }
    .hover-gold-card:hover {
      border-color: #c5a059;
      box-shadow: 0 0 25px rgba(197, 160, 89, 0.25);
      transform: translateY(-4px);
    }