<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Realm Grinder Ascended</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      ::-webkit-scrollbar-track {
        background: #111827; 
      }
      ::-webkit-scrollbar-thumb {
        background: #374151; 
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #4b5563; 
      }

      /* --- Combat Animations --- */
      
      /* Hero Lunge - More impactful, overlapping */
      @keyframes attack-lunge-right {
        0% { transform: translateX(0) rotate(0deg) scale(1); z-index: 10; }
        20% { transform: translateX(-30px) rotate(-10deg) scale(0.9); } /* Wind up */
        40% { transform: translateX(120px) rotate(5deg) scale(1.1); } /* Impact */
        60% { transform: translateX(120px) rotate(5deg) scale(1.1); } /* Hold briefly */
        100% { transform: translateX(0) rotate(0deg) scale(1); z-index: 10; }
      }
      
      /* Monster Lunge */
      @keyframes attack-lunge-left {
        0% { transform: translateX(0) scaleX(-1) rotate(0deg) scale(1); z-index: 10; }
        20% { transform: translateX(30px) scaleX(-1) rotate(10deg) scale(0.9); } /* Wind up (reversed dir) */
        40% { transform: translateX(-120px) scaleX(-1) rotate(-5deg) scale(1.1); } /* Impact */
        60% { transform: translateX(-120px) scaleX(-1) rotate(-5deg) scale(1.1); }
        100% { transform: translateX(0) scaleX(-1) rotate(0deg) scale(1); z-index: 10; }
      }

      /* Hit Shake & Flash */
      @keyframes damage-shake {
        0%, 100% { transform: translateX(0); filter: brightness(1); }
        10% { transform: translateX(-10px); filter: brightness(3) sepia(1) hue-rotate(-50deg) saturate(5); } /* Flash Red/White */
        30% { transform: translateX(8px); }
        50% { transform: translateX(-6px); filter: brightness(1); }
        70% { transform: translateX(4px); }
      }

      /* Weapon Arm Swing (Chop) */
      @keyframes swing-sword {
         0% { transform: rotate(10deg); }
         30% { transform: rotate(-80deg); } /* Wind up */
         60% { transform: rotate(120deg); } /* Strike */
         100% { transform: rotate(10deg); } /* Return */
      }
      
      .animate-attack-right {
        animation: attack-lunge-right 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .animate-attack-left {
        animation: attack-lunge-left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .animate-hit {
        animation: damage-shake 0.4s ease-in-out;
      }
      .animate-swing-sword {
        animation: swing-sword 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      
      /* Visual Slash Effect */
      @keyframes slash-fade {
        0% { opacity: 0; transform: scale(0.5) rotate(-10deg); }
        30% { opacity: 1; transform: scale(1.5) rotate(0deg); }
        100% { opacity: 0; transform: scale(1.8) rotate(10deg); }
      }
      .animate-slash {
        animation: slash-fade 0.3s ease-out forwards;
      }

      /* Spell Effects */
      
      /* Fireball: Moves Left to Right */
      @keyframes spell-fireball {
        0% { left: 20%; opacity: 0; transform: scale(0.5) rotate(0deg); }
        10% { opacity: 1; }
        80% { left: 75%; opacity: 1; transform: scale(1.2) rotate(360deg); }
        100% { left: 80%; opacity: 0; transform: scale(2); }
      }

      /* Heal: Rising particles */
      @keyframes spell-heal {
        0% { opacity: 0; transform: translateY(20px) scale(0.5); }
        50% { opacity: 1; transform: translateY(-20px) scale(1.2); }
        100% { opacity: 0; transform: translateY(-60px) scale(1); }
      }

      /* Smite: Lightning/Beam from top */
      @keyframes spell-smite {
        0% { height: 0%; opacity: 0; }
        10% { height: 100%; opacity: 1; }
        50% { width: 60px; opacity: 1; box-shadow: 0 0 50px white; }
        100% { height: 100%; width: 0px; opacity: 0; }
      }

      .animate-fireball {
        animation: spell-fireball 0.8s linear forwards;
      }
      .animate-heal {
        animation: spell-heal 1s ease-out forwards;
      }
      .animate-smite {
        animation: spell-smite 0.6s ease-out forwards;
      }

      /* Damage Numbers Float Up */
      @keyframes float-up {
        0% { opacity: 0; transform: translateY(0) scale(0.5); }
        20% { opacity: 1; transform: translateY(-20px) scale(1.3); }
        100% { opacity: 0; transform: translateY(-80px) scale(1); }
      }
      .animate-float-up {
        animation: float-up 0.8s ease-out forwards;
      }
    </style>

<link rel="stylesheet" href="/index.css">
  <script type="importmap">
{
  "imports": {
    "react/": "https://esm.sh/react@^19.2.3/",
    "react": "https://esm.sh/react@^19.2.3",
    "react-dom": "https://esm.sh/react-dom@^19.2.3",
    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
    "lucide-react": "https://esm.sh/lucide-react@^0.561.0"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-B_8rNFyi.js"></script>
</head>
  <body class="bg-gray-950 text-white overflow-hidden">
    <div id="root"></div>
</body>
</html>