<section id="sistema-juego" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
  <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🎮 Sistema de Juego</h2>
  <p class="text-slate-200">
    El sistema de juego de Amayo incluye <strong class="text-white">HP (puntos de vida)</strong>, <strong class="text-white">estadísticas de combate</strong>, <strong class="text-white">niveles de progresión</strong> y más.
  </p>

  <div class="grid gap-6 md:grid-cols-2">
    <div class="space-y-3 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white">⚔️ Estadísticas de Combate</h3>
      <ul class="list-disc space-y-1 pl-5 text-sm text-slate-200">
        <li><strong class="text-white">HP (Vida):</strong> Tus puntos de vida actuales y máximos</li>
        <li><strong class="text-white">ATK (Ataque):</strong> Daño que infliges a los enemigos</li>
        <li><strong class="text-white">DEF (Defensa):</strong> Reduce el daño recibido</li>
        <li><strong class="text-white">Bonos de Equipo:</strong> Las armas, armaduras y capas mejoran tus stats</li>
      </ul>
    </div>
    <div class="space-y-3 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white">📊 Ver tus Estadísticas</h3>
      <div class="space-y-2 text-sm">
        <div class="flex flex-col gap-1">
          <code class="rounded bg-indigo-500/15 px-2 py-1 font-mono text-indigo-200 w-fit">!player</code>
          <p class="text-slate-300">Vista general de tu perfil</p>
        </div>
        <div class="flex flex-col gap-1">
          <code class="rounded bg-indigo-500/15 px-2 py-1 font-mono text-indigo-200 w-fit">!stats</code>
          <p class="text-slate-300">Estadísticas detalladas de todas tus actividades</p>
        </div>
      </div>
    </div>
  </div>

  <div class="rounded-2xl border border-amber-500/30 bg-amber-500/10 p-5 text-sm text-amber-100">
    <strong class="block text-base font-semibold text-amber-200 mb-2">💡 Consejo:</strong>
    <p>Equipa mejores armas y armaduras para aumentar tus estadísticas y tener más éxito en los minijuegos de combate.</p>
  </div>
</section>
