Fix Spire Mode UI issues: HP bar live updates and casting progress overflow

Task 7 (2c): HP Bar Live Updates
- Sync floorHP state with enemy HP after damage is applied
- This ensures the HP bar updates in real-time as damage lands
- Applied fix in main spell casting, equipment spell processing, and golem attacks

Task 8 (2d): Casting Progress Overflow
- Reset castProgress to 0 when mana is insufficient (instead of keeping accumulated progress)
- Added similar fix for equipment spell casting progress
- Prevents progress bar from showing >100% when out of mana

Files modified:
- src/lib/game/store.ts (added floorHP sync and progress reset logic)
- src/components/game/SpireTab.tsx (UI component using store state)
- src/components/game/tabs/SpireTab.tsx (UI component using store state)

src/components/game/tabs/SpireTab.tsx

@@ -6,12 +6,12 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
-import { TooltipProvider } from '@/components/ui/tooltip';
-import { BookOpen, ChevronUp, ChevronDown, RotateCcw, X, Mountain } from 'lucide-react';
+import { TooltipProvider, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { BookOpen, ChevronUp, ChevronDown, RotateCcw, X, Mountain, Skull, Zap, Wind, Shield } from 'lucide-react';
 import type { GameStore } from '@/lib/game/types';
-import { ELEMENTS, GUARDIANS, SPELLS_DEF, SKILLS_DEF } from '@/lib/game/constants';
+import { ELEMENTS, GUARDIANS, SPELLS_DEF, SKILLS_DEF, ROOM_TYPE_LABELS } from '@/lib/game/constants';
 import { GOLEMS_DEF, getGolemDamage, getGolemAttackSpeed } from '@/lib/game/data/golems';
-import { fmt, fmtDec, getFloorElement, canAffordSpellCost } from '@/lib/game/store';
+import { fmt, fmtDec, getFloorElement, canAffordSpellCost, getEnemyName } from '@/lib/game/store';
 import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
 import { formatSpellCost, getSpellCostColor, formatStudyTime } from '@/lib/game/formatting';
 import { CraftingProgress, StudyProgress } from '@/components/game';
@@ -27,6 +27,15 @@ const canEnterSpireMode = (store: GameStore): boolean => {
   return !store.spireMode; // Can enter if not already in Spire Mode
 };
 
+// Room type configurations for display
+const ROOM_TYPE_CONFIG: Record<string, { label: string; icon: string; color: string }> = {
+  combat: { label: 'Combat', icon: '⚔️', color: '#EF4444' },
+  swarm: { label: 'Swarm', icon: '🐝', color: '#F59E0B' },
+  speed: { label: 'Speed', icon: '💨', color: '#3B82F6' },
+  guardian: { label: 'Guardian', icon: '🛡️', color: '#EF4444' },
+  puzzle: { label: 'Puzzle', icon: '🧩', color: '#8B5CF6' },
+};
+
 export function SpireTab({ store, simpleMode = false }: SpireTabProps) {
   const floorElem = getFloorElement(store.currentFloor);
   const floorElemDef = ELEMENTS[floorElem];
@@ -34,10 +43,15 @@ export function SpireTab({ store, simpleMode = false }: SpireTabProps) {
   const currentGuardian = GUARDIANS[store.currentFloor];
   const climbDirection = store.climbDirection || 'up';
   const clearedFloors = store.clearedFloors || {};
+  const currentRoom = store.currentRoom;
   
   // Check if current floor is cleared (for respawn indicator)
   const isFloorCleared = clearedFloors[store.currentFloor];
   
+  // Get room type info
+  const roomType = currentRoom?.roomType || 'combat';
+  const roomConfig = ROOM_TYPE_CONFIG[roomType] || ROOM_TYPE_CONFIG.combat;
+  
   // Get active equipment spells
   const activeEquipmentSpells = getActiveEquipmentSpells(store.equippedInstances, store.equipmentInstances);
   
@@ -52,6 +66,25 @@ export function SpireTab({ store, simpleMode = false }: SpireTabProps) {
     return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
   };
 
+  // Get enemy display info
+  const getEnemyDisplayInfo = () => {
+    if (!currentRoom || !currentRoom.enemies || currentRoom.enemies.length === 0) {
+      return { primaryEnemy: null, swarmEnemies: [] };
+    }
+    
+    const enemies = currentRoom.enemies;
+    const primaryEnemy = enemies[0];
+    
+    // For swarm rooms, return all enemies
+    if (roomType === 'swarm') {
+      return { primaryEnemy: null, swarmEnemies: enemies };
+    }
+    
+    return { primaryEnemy, swarmEnemies: [] };
+  };
+  
+  const { primaryEnemy, swarmEnemies } = getEnemyDisplayInfo();
+
   return (
     <TooltipProvider>
       <div className={`grid gap-4 ${simpleMode ? 'grid-cols-1' : 'grid-cols-1 lg:grid-cols-2'}`}>
@@ -104,7 +137,19 @@ export function SpireTab({ store, simpleMode = false }: SpireTabProps) {
         {simpleMode && (
           <Card className="bg-gray-900/80 border-gray-700">
             <CardHeader className="pb-2">
-              <CardTitle className="text-amber-400 game-panel-title text-xs">Current Floor</CardTitle>
+              <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center justify-between">
+                <span>Current Floor</span>
+                <Badge 
+                  className="ml-2" 
+                  style={{ 
+                    backgroundColor: `${roomConfig.color}20`, 
+                    color: roomConfig.color,
+                    borderColor: `${roomConfig.color}60`
+                  }}
+                >
+                  {roomConfig.icon} {roomConfig.label}
+                </Badge>
+              </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
               <div className="flex items-baseline gap-2">
@@ -120,30 +165,151 @@ export function SpireTab({ store, simpleMode = false }: SpireTabProps) {
                 )}
               </div>
             
+              {/* Guardian Name */}
               {isGuardianFloor && currentGuardian && (
                 <div className="text-sm font-semibold game-panel-title" style={{ color: floorElemDef?.color }}>
                   ⚔️ {currentGuardian.name}
                 </div>
               )}
-            
-              {/* HP Bar */}
-              <div className="space-y-1">
-                <div className="h-3 bg-gray-800 rounded-full overflow-hidden">
-                  <div
-                    className="h-full rounded-full transition-all duration-300"
-                    style={{
-                      width: `${Math.max(0, (store.floorHP / store.floorMaxHP) * 100)}%`,
-                      background: `linear-gradient(90deg, ${floorElemDef?.color}99, ${floorElemDef?.color})`,
-                      boxShadow: `0 0 10px ${floorElemDef?.glow}`,
-                    }}
-                  />
+              
+              {/* Single Enemy Display (Combat/Speed/Guardian) */}
+              {!isGuardianFloor && primaryEnemy && roomType !== 'swarm' && (
+                <div className="p-3 bg-gray-800/50 rounded border border-gray-700">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <Skull className="w-4 h-4 text-red-400" />
+                      <span className="text-sm font-semibold text-gray-200">
+                        {primaryEnemy.name || 'Unknown Enemy'}
+                      </span>
+                    </div>
+                    <Badge variant="outline" className="text-xs">
+                      {ELEMENTS[primaryEnemy.element]?.sym} {ELEMENTS[primaryEnemy.element]?.name}
+                    </Badge>
+                  </div>
+                  
+                  {/* Enemy HP Bar */}
+                  <div className="space-y-1 mb-2">
+                    <div className="h-2 bg-gray-800 rounded-full overflow-hidden">
+                      <div
+                        className="h-full rounded-full transition-all duration-300"
+                        style={{
+                          width: `${Math.max(0, (primaryEnemy.hp / primaryEnemy.maxHP) * 100)}%`,
+                          background: `linear-gradient(90deg, ${floorElemDef?.color}99, ${floorElemDef?.color})`,
+                        }}
+                      />
+                    </div>
+                    <div className="flex justify-between text-xs text-gray-400 game-mono">
+                      <span>{fmt(primaryEnemy.hp)} / {fmt(primaryEnemy.maxHP)} HP</span>
+                    </div>
+                  </div>
+                  
+                  {/* Enemy Properties */}
+                  <div className="flex flex-wrap gap-2 text-xs">
+                    {primaryEnemy.armor > 0 && (
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <Badge variant="outline" className="text-xs py-0">
+                            <Shield className="w-3 h-3 mr-1" />
+                            {(primaryEnemy.armor * 100).toFixed(0)}% Armor
+                          </Badge>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>Reduces incoming damage by {(primaryEnemy.armor * 100).toFixed(0)}%</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    )}
+                    {primaryEnemy.dodgeChance > 0 && (
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <Badge variant="outline" className="text-xs py-0">
+                            <Wind className="w-3 h-3 mr-1" />
+                            {(primaryEnemy.dodgeChance * 100).toFixed(0)}% Dodge
+                          </Badge>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>Chance to dodge attacks and reduce progress</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    )}
+                  </div>
                 </div>
-                <div className="flex justify-between text-xs text-gray-400 game-mono">
-                  <span>{fmt(store.floorHP)} / {fmt(store.floorMaxHP)} HP</span>
-                  <span>DPS: {store.currentAction === 'climb' && activeEquipmentSpells.length > 0 ? fmtDec(totalDPS) : '—'}</span>
+              )}
+              
+              {/* Swarm Enemies Display */}
+              {roomType === 'swarm' && swarmEnemies.length > 0 && (
+                <div className="space-y-2">
+                  <div className="text-xs text-gray-400 font-semibold">
+                    Swarm Enemies ({swarmEnemies.length})
+                  </div>
+                  {swarmEnemies.map((enemy, index) => (
+                    <div key={enemy.id || `swarm-${index}`} className="p-2 bg-gray-800/50 rounded border border-gray-700">
+                      <div className="flex items-center justify-between mb-1">
+                        <div className="flex items-center gap-2">
+                          <Skull className="w-3 h-3 text-red-400" />
+                          <span className="text-xs font-semibold text-gray-300">
+                            {enemy.name || `Enemy ${index + 1}`}
+                          </span>
+                        </div>
+                        <Badge variant="outline" className="text-xs py-0">
+                          {ELEMENTS[enemy.element]?.sym} {fmt(enemy.hp)}/{fmt(enemy.maxHP)} HP
+                        </Badge>
+                      </div>
+                      <div className="h-1.5 bg-gray-800 rounded-full overflow-hidden">
+                        <div
+                          className="h-full rounded-full transition-all duration-300"
+                          style={{
+                            width: `${Math.max(0, (enemy.hp / enemy.maxHP) * 100)}%`,
+                            background: `linear-gradient(90deg, ${ELEMENTS[enemy.element]?.color}99, ${ELEMENTS[enemy.element]?.color})`,
+                          }}
+                        />
+                      </div>
+                    </div>
+                  ))}
                 </div>
-              </div>
-            
+              )}
+              
+              {/* Puzzle Room Display */}
+              {roomType === 'puzzle' && (
+                <div className="p-3 bg-purple-900/20 rounded border border-purple-700">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="text-lg">🧩</span>
+                    <span className="text-sm font-semibold text-purple-300">
+                      {currentRoom.puzzleId ? currentRoom.puzzleId.replace(/_/g, ' ').toUpperCase() : 'Puzzle Room'}
+                    </span>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="flex justify-between text-xs text-gray-400">
+                      <span>Progress</span>
+                      <span>{((currentRoom.puzzleProgress || 0) * 100).toFixed(0)}%</span>
+                    </div>
+                    <Progress 
+                      value={Math.min(100, (currentRoom.puzzleProgress || 0) * 100)} 
+                      className="h-2 bg-gray-800" 
+                    />
+                  </div>
+                </div>
+              )}
+              
+              {/* Floor HP Bar (for non-swarm, non-puzzle) */}
+              {roomType !== 'swarm' && roomType !== 'puzzle' && (
+                <div className="space-y-1">
+                  <div className="h-3 bg-gray-800 rounded-full overflow-hidden">
+                    <div
+                      className="h-full rounded-full transition-all duration-300"
+                      style={{
+                        width: `${Math.max(0, (store.floorHP / store.floorMaxHP) * 100)}%`,
+                        background: `linear-gradient(90deg, ${floorElemDef?.color}99, ${floorElemDef?.color})`,
+                        boxShadow: `0 0 10px ${floorElemDef?.glow}`,
+                      }}
+                    />
+                  </div>
+                  <div className="flex justify-between text-xs text-gray-400 game-mono">
+                    <span>{fmt(store.floorHP)} / {fmt(store.floorMaxHP)} HP</span>
+                    <span>DPS: {store.currentAction === 'climb' && activeEquipmentSpells.length > 0 ? fmtDec(totalDPS) : '—'}</span>
+                  </div>
+                </div>
+              )}
+              
               <div className="text-sm text-gray-400">
                 Best: Floor <strong className="text-gray-200">{store.maxFloorReached}</strong> • 
                 Pacts: <strong className="text-amber-400">{store.signedPacts.length}</strong>