Improve combat UI to fit on screen with scrolling

- Make combat container scrollable (max-height: 90vh, overflow-y: auto)
- Reduce skill button size: 70px min-height, 8px padding, 28px icons
- Reduce combat log height from 100px to 70px
- Make flee button more compact with margin-top spacing
- Skill buttons now show icon on top, name below, MP cost at bottom
- All skills and flee button accessible via scrolling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

index.html

@@ -2413,9 +2413,11 @@
             background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
             border: 3px solid #e94560;
             border-radius: 20px;
-            padding: 25px 30px;
+            padding: 20px 24px;
             max-width: 480px;
             width: 95%;
+            max-height: 90vh;
+            overflow-y: auto;
             color: white;
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             box-shadow: 0 0 40px rgba(233, 69, 96, 0.4);
@@ -2495,12 +2497,12 @@
         }
         .combat-log {
             background: rgba(0, 0, 0, 0.5);
-            border-radius: 10px;
-            padding: 12px 15px;
-            height: 100px;
+            border-radius: 8px;
+            padding: 8px 12px;
+            height: 70px;
             overflow-y: auto;
-            margin-bottom: 18px;
-            font-size: 13px;
+            margin-bottom: 12px;
+            font-size: 12px;
             border: 1px solid #333;
         }
         .combat-log-entry {
@@ -2533,37 +2535,49 @@
         .combat-skills {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
-            gap: 10px;
-            margin-bottom: 12px;
+            gap: 8px;
+            margin-bottom: 10px;
         }
         .skill-btn {
             background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
             border: 2px solid #e94560;
             color: white;
-            padding: 14px 10px;
+            padding: 8px 6px;
             border-radius: 10px;
             cursor: pointer;
             transition: all 0.2s;
             text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 70px;
         }
         .skill-btn:hover:not(:disabled) {
             background: linear-gradient(135deg, #e94560 0%, #c73e54 100%);
-            transform: scale(1.03);
-            box-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
+            transform: scale(1.02);
+            box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
         }
         .skill-btn:disabled {
             opacity: 0.4;
             cursor: not-allowed;
             transform: none;
         }
+        .skill-btn .skill-icon-wrapper {
+            margin-bottom: 3px;
+        }
+        .skill-btn .skill-icon-wrapper img {
+            width: 28px;
+            height: 28px;
+        }
         .skill-btn .skill-name {
             font-weight: bold;
-            display: block;
-            font-size: 13px;
-            margin-bottom: 3px;
+            font-size: 11px;
+            margin-bottom: 2px;
+            line-height: 1.2;
         }
         .skill-btn .skill-cost {
-            font-size: 11px;
+            font-size: 10px;
             color: #4ecdc4;
         }
         .skill-btn .skill-cost.free {
@@ -2585,11 +2599,12 @@
             background: #333;
             border: 2px solid #555;
             color: #aaa;
-            padding: 12px;
+            padding: 10px;
             border-radius: 8px;
             cursor: pointer;
-            font-size: 14px;
+            font-size: 13px;
             transition: all 0.2s;
+            margin-top: 8px;
         }
         .combat-flee-btn:hover {
             background: #444;
@@ -14745,14 +14760,15 @@
                 if (baseSkill.type === 'utility') return;
 
                 const displayName = skillInfo?.displayName || hardcodedSkill?.name || dbSkill?.name || skillId;
-                const iconHtml = renderSkillIcon(skillId, 'class', playerStats.class, 20);
+                const iconHtml = renderSkillIcon(skillId, 'class', playerStats.class, 28);
                 const mpCost = hardcodedSkill?.mpCost || dbSkill?.mpCost || 0;
 
                 const btn = document.createElement('button');
                 btn.className = 'skill-btn';
                 btn.dataset.skillId = skillId;
                 btn.innerHTML = `
-                    <span class="skill-name">${iconHtml} ${displayName}</span>
+                    <span class="skill-icon-wrapper">${iconHtml}</span>
+                    <span class="skill-name">${displayName}</span>
                     <span class="skill-cost ${mpCost === 0 ? 'free' : ''}">${mpCost > 0 ? mpCost + ' MP' : 'Free'}</span>
                 `;
                 btn.onclick = () => executePlayerSkill(skillId);
@@ -14767,7 +14783,8 @@
                 btn.dataset.skillId = 'admin_banish';
                 btn.style.borderColor = '#ff6b35';
                 btn.innerHTML = `
-                    <span class="skill-name">${adminSkill.icon} ${adminSkill.name}</span>
+                    <span class="skill-icon-wrapper" style="font-size: 24px;">${adminSkill.icon}</span>
+                    <span class="skill-name">${adminSkill.name}</span>
                     <span class="skill-cost free">Admin</span>
                 `;
                 btn.onclick = () => executePlayerSkill('admin_banish');