diff --git a/src/engine/battle.js b/src/engine/battle.js
index d7602e5..b10d84e 100644
--- a/src/engine/battle.js
+++ b/src/engine/battle.js
@@ -1,7 +1,7 @@
 import { ENEMIES } from "../data/enemies.js";
 import { RELICS } from "../data/relics.js";
 import { CARDS } from "../data/cards.js";
-import { draw, endTurnDiscard, clamp, cloneCard } from "./core.js";
+import { draw, endTurnDiscard, clamp, cloneCard, shuffle } from "./core.js";
 
 export function createBattle(ctx, enemyId) {
     const enemyData = ENEMIES[enemyId];
@@ -10,6 +10,11 @@ export function createBattle(ctx, enemyId) {
     ctx.flags = {};
     ctx.lastCard = null;
 
+    // Initialize draw pile from current deck for the battle
+    ctx.player.draw = shuffle(ctx.player.deck.slice());
+    ctx.player.discard = [];
+    ctx.player.hand = [];
+
 
     const relicCtx = { 
         ...ctx, 
diff --git a/style.css b/style.css
index 792e9e1..d9437c2 100644
--- a/style.css
+++ b/style.css
@@ -286,7 +286,7 @@ h3 {
     border: 2px solid #5a4a2a;
     border-radius: 6px;
     padding: 12px 20px;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .health-section {
@@ -307,9 +307,9 @@ h3 {
     max-width: 300px;
     height: 30px;
     background: linear-gradient(135deg, #2a1a0a 0%, #1a0f08 100%);
-  
+
     overflow: hidden;
-    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
 .health-bar {
@@ -319,7 +319,7 @@ h3 {
     background: linear-gradient(135deg, #2a1a0a 0%, #1a0f08 100%);
     border: 2px solid #4a3a2a;
     overflow: hidden;
-    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .health-fill-large {
@@ -366,13 +366,19 @@ h3 {
     gap: 15px;
 }
 
-.energy-section, .gold-section, .block-section, .relics-section {
+.energy-section,
+.gold-section,
+.block-section,
+.relics-section {
     display: flex;
     align-items: center;
     gap: 4px;
 }
 
-.energy-label, .gold-icon, .block-icon, .relics-label {
+.energy-label,
+.gold-icon,
+.block-icon,
+.relics-label {
     font-size: 14px;
 }
 
@@ -412,7 +418,7 @@ h3 {
     width: 24px;
     height: 24px;
     object-fit: contain;
-    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
+    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
     display: block;
     margin: 0 auto;
 }
@@ -474,16 +480,17 @@ h3 {
     opacity: 0.4;
 }
 
-.gold-amount, .block-amount {
+.gold-amount,
+.block-amount {
     font-weight: bold;
     font-size: 14px;
     color: #d4af37;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 }
 
 .block-amount {
     color: #8a9ba8;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 }
 
 .relics-top {
@@ -504,9 +511,9 @@ h3 {
     width: 100%;
     height: 100%;
     background: radial-gradient(2px 2px at 20px 30px, rgba(110, 168, 254, 0.3), transparent),
-                radial-gradient(2px 2px at 40px 70px, rgba(255, 193, 7, 0.2), transparent),
-                radial-gradient(1px 1px at 90px 40px, rgba(220, 53, 69, 0.3), transparent),
-                radial-gradient(1px 1px at 130px 80px, rgba(110, 168, 254, 0.2), transparent);
+        radial-gradient(2px 2px at 40px 70px, rgba(255, 193, 7, 0.2), transparent),
+        radial-gradient(1px 1px at 90px 40px, rgba(220, 53, 69, 0.3), transparent),
+        radial-gradient(1px 1px at 130px 80px, rgba(110, 168, 254, 0.2), transparent);
     animation: sparkle 3s ease-in-out infinite alternate;
 }
 
@@ -522,13 +529,27 @@ h3 {
 }
 
 @keyframes sparkle {
-    0% { opacity: 0.3; }
-    100% { opacity: 0.8; }
+    0% {
+        opacity: 0.3;
+    }
+
+    100% {
+        opacity: 0.8;
+    }
 }
 
 @keyframes pulse {
-    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.1; }
-    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }
+
+    0%,
+    100% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0.1;
+    }
+
+    50% {
+        transform: translate(-50%, -50%) scale(1.1);
+        opacity: 0.2;
+    }
 }
 
 
@@ -595,7 +616,7 @@ h3 {
     height: 120px;
     border-radius: 50%;
     overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 20px rgba(220, 53, 69, 0.5);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(220, 53, 69, 0.5);
     animation: enemyIdle 2s ease-in-out infinite alternate;
     position: relative;
     z-index: 2;
@@ -644,23 +665,53 @@ h3 {
 }
 
 @keyframes enemyIdle {
-    0% { transform: translateY(0px) scale(1); }
-    100% { transform: translateY(-10px) scale(1.02); }
+    0% {
+        transform: translateY(0px) scale(1);
+    }
+
+    100% {
+        transform: translateY(-10px) scale(1.02);
+    }
 }
 
 @keyframes shadowPulse {
-    0% { transform: scaleX(1); opacity: 0.3; }
-    100% { transform: scaleX(1.1); opacity: 0.2; }
+    0% {
+        transform: scaleX(1);
+        opacity: 0.3;
+    }
+
+    100% {
+        transform: scaleX(1.1);
+        opacity: 0.2;
+    }
 }
 
 @keyframes shieldGlow {
-    0%, 100% { transform: scale(1); opacity: 0.8; }
-    50% { transform: scale(1.2); opacity: 1; }
+
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+
+    50% {
+        transform: scale(1.2);
+        opacity: 1;
+    }
 }
 
 @keyframes debuffPulse {
-    0%, 100% { transform: scale(1); opacity: 0.7; }
-    50% { transform: scale(1.1); opacity: 1; }
+
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 0.7;
+    }
+
+    50% {
+        transform: scale(1.1);
+        opacity: 1;
+    }
 }
 
 
@@ -676,7 +727,7 @@ h3 {
     height: 120px;
     border-radius: 50%;
     overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 20px rgba(40, 167, 69, 0.5);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(40, 167, 69, 0.5);
     animation: playerIdle 2s ease-in-out infinite alternate;
     position: relative;
     z-index: 2;
@@ -702,8 +753,13 @@ h3 {
 }
 
 @keyframes playerIdle {
-    0% { transform: translateY(0px) scale(1); }
-    100% { transform: translateY(-10px) scale(1.02); }
+    0% {
+        transform: translateY(0px) scale(1);
+    }
+
+    100% {
+        transform: translateY(-10px) scale(1.02);
+    }
 }
 
 
@@ -730,16 +786,19 @@ h3 {
         scale: 0.5;
         transform: translate(-50%, -50%) translateY(0px);
     }
+
     15% {
         opacity: 1;
         scale: 1.4;
         transform: translate(-50%, -50%) translateY(-10px);
     }
+
     30% {
         opacity: 1;
         scale: 1.2;
         transform: translate(-50%, -50%) translateY(-20px);
     }
+
     100% {
         opacity: 0;
         scale: 0.8;
@@ -768,7 +827,7 @@ h3 {
     font-size: 24px;
     font-weight: bold;
     margin: 0;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .player-level {
@@ -780,7 +839,7 @@ h3 {
     font-weight: bold;
     display: inline-block;
     margin-top: 8px;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 }
 
 .player-health-section {
@@ -861,8 +920,8 @@ h3 {
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
-                radial-gradient(circle at 40% 80%, rgba(212, 175, 55, 0.06) 0%, transparent 50%);
+        radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
+        radial-gradient(circle at 40% 80%, rgba(212, 175, 55, 0.06) 0%, transparent 50%);
 }
 
 .event-background .bg-glow {
@@ -891,7 +950,7 @@ h3 {
     background: linear-gradient(135deg, #3a2f1f 0%, #2c1810 100%);
     border: 3px solid #d4af37;
     border-radius: 15px;
-    box-shadow: 
+    box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.6),
         inset 0 2px 8px rgba(212, 175, 55, 0.2),
         0 0 20px rgba(212, 175, 55, 0.3);
@@ -902,7 +961,7 @@ h3 {
     font-size: 2.5rem;
     font-weight: 700;
     color: #d4af37;
-    text-shadow: 
+    text-shadow:
         0 0 10px rgba(212, 175, 55, 0.6),
         2px 2px 4px rgba(0, 0, 0, 0.8);
     margin: 0;
@@ -931,7 +990,7 @@ h3 {
     border-radius: 15px;
     padding: 30px;
     margin-bottom: 40px;
-    box-shadow: 
+    box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.6),
         inset 0 2px 8px rgba(212, 175, 55, 0.1);
 }
@@ -949,7 +1008,7 @@ h3 {
     border-radius: 12px;
     background: linear-gradient(135deg, #2c1810 0%, #1a0f08 100%);
     padding: 15px;
-    box-shadow: 
+    box-shadow:
         0 4px 16px rgba(0, 0, 0, 0.6),
         0 0 20px rgba(212, 175, 55, 0.2);
 }
@@ -1006,7 +1065,7 @@ h3 {
     padding: 20px;
     position: relative;
     overflow: hidden;
-    box-shadow: 
+    box-shadow:
         0 4px 16px rgba(0, 0, 0, 0.4),
         inset 0 1px 4px rgba(212, 175, 55, 0.1);
 }
@@ -1093,14 +1152,14 @@ h3 {
 
 .event-choice-card:hover .choice-frame {
     border-color: #d4af37;
-    box-shadow: 
+    box-shadow:
         0 6px 24px rgba(0, 0, 0, 0.6),
         inset 0 1px 4px rgba(212, 175, 55, 0.2),
         0 0 20px rgba(212, 175, 55, 0.2);
 }
 
 .event-choice-card:hover .choice-icon-img {
-    box-shadow: 
+    box-shadow:
         0 2px 8px rgba(0, 0, 0, 0.6),
         0 0 12px rgba(212, 175, 55, 0.3);
 }
@@ -1112,15 +1171,15 @@ h3 {
         text-align: center;
         gap: 20px;
     }
-    
+
     .event-title {
         font-size: 2rem;
     }
-    
+
     .event-description {
         font-size: 1.1rem;
     }
-    
+
     .choice-frame {
         flex-direction: column;
         text-align: center;
@@ -1152,8 +1211,13 @@ h3 {
 }
 
 @keyframes scanline {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(100%);
+    }
 }
 
 .enemy-nameplate {
@@ -1218,7 +1282,7 @@ h3 {
     transform: translate(-50%, -50%);
     font-weight: bold;
     color: white;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
     font-size: 12px;
 }
 
@@ -1229,14 +1293,25 @@ h3 {
     border: 2px solid;
 }
 
-.intent-danger { 
-    border-color: #dc3545; 
-    background: rgba(220, 53, 69, 0.1); 
+.intent-danger {
+    border-color: #dc3545;
+    background: rgba(220, 53, 69, 0.1);
     margin-top: 10px;
 }
-.intent-info { border-color: #17a2b8; background: rgba(23, 162, 184, 0.1); }
-.intent-warning { border-color: #ffc107; }
-.intent-success { border-color: #28a745; background: rgba(40, 167, 69, 0.1); }
+
+.intent-info {
+    border-color: #17a2b8;
+    background: rgba(23, 162, 184, 0.1);
+}
+
+.intent-warning {
+    border-color: #ffc107;
+}
+
+.intent-success {
+    border-color: #28a745;
+    background: rgba(40, 167, 69, 0.1);
+}
 
 .intent-icon {
     font-size: 24px;
@@ -1277,7 +1352,8 @@ h3 {
     margin-bottom: 5px;
 }
 
-.player-shield, .player-debuff {
+.player-shield,
+.player-debuff {
     position: absolute;
     font-size: 16px;
     top: -5px;
@@ -1296,13 +1372,15 @@ h3 {
     align-items: center;
 }
 
-.player-health-display, .player-energy-display {
+.player-health-display,
+.player-energy-display {
     display: flex;
     align-items: center;
     gap: 10px;
 }
 
-.health-icon, .energy-label {
+.health-icon,
+.energy-label {
     font-size: 16px;
 }
 
@@ -1508,7 +1586,8 @@ h3 {
     opacity: 0.8;
 }
 
-.battle-tips, .battle-tips-bottom {
+.battle-tips,
+.battle-tips-bottom {
     display: flex;
     flex-direction: column;
     gap: 5px;
@@ -1568,7 +1647,7 @@ h3 {
 
 .card:hover {
     transform: translateY(-8px);
-    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 
 .card.attack {
@@ -1613,14 +1692,45 @@ h3 {
 }
 
 
-.battle-card:nth-child(1) { transform: rotate(-8deg); z-index: 1; }
-.battle-card:nth-child(2) { transform: rotate(-4deg); z-index: 2; }
-.battle-card:nth-child(3) { transform: rotate(-2deg); z-index: 3; }
-.battle-card:nth-child(4) { transform: rotate(0deg); z-index: 4; }
-.battle-card:nth-child(5) { transform: rotate(2deg); z-index: 5; }
-.battle-card:nth-child(6) { transform: rotate(4deg); z-index: 6; }
-.battle-card:nth-child(7) { transform: rotate(8deg); z-index: 7; }
-.battle-card:nth-child(8) { transform: rotate(12deg); z-index: 8; }
+.battle-card:nth-child(1) {
+    transform: rotate(-8deg);
+    z-index: 1;
+}
+
+.battle-card:nth-child(2) {
+    transform: rotate(-4deg);
+    z-index: 2;
+}
+
+.battle-card:nth-child(3) {
+    transform: rotate(-2deg);
+    z-index: 3;
+}
+
+.battle-card:nth-child(4) {
+    transform: rotate(0deg);
+    z-index: 4;
+}
+
+.battle-card:nth-child(5) {
+    transform: rotate(2deg);
+    z-index: 5;
+}
+
+.battle-card:nth-child(6) {
+    transform: rotate(4deg);
+    z-index: 6;
+}
+
+.battle-card:nth-child(7) {
+    transform: rotate(8deg);
+    z-index: 7;
+}
+
+.battle-card:nth-child(8) {
+    transform: rotate(12deg);
+    z-index: 8;
+}
 
 
 .battle-card.playable:hover {
@@ -1630,7 +1740,7 @@ h3 {
     margin-right: 40px;
 }
 
-.battle-card.playable:hover ~ .battle-card {
+.battle-card.playable:hover~.battle-card {
     transform: translateX(20px);
 }
 
@@ -1654,18 +1764,18 @@ h3 {
     font-size: 16px;
     cursor: pointer;
     transition: all 0.15s ease;
-    box-shadow: 0 4px 16px rgba(90, 138, 58, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
+    box-shadow: 0 4px 16px rgba(90, 138, 58, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
     display: flex;
     align-items: center;
     gap: 8px;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 }
 
 .end-turn-btn:hover {
     background: linear-gradient(135deg, #6a9a4a, #5a8a3a);
     border-color: #7aaa5a;
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(90, 138, 58, 0.6), inset 0 1px 0 rgba(255,255,255,0.3);
+    box-shadow: 0 6px 20px rgba(90, 138, 58, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
 }
 
 .end-turn-btn:active {
@@ -1742,7 +1852,7 @@ h3 {
     margin-right: 40px;
 }
 
-.battle-card.card-selected ~ .battle-card {
+.battle-card.card-selected~.battle-card {
     transform: translateX(20px);
 }
 
@@ -1766,7 +1876,7 @@ h3 {
     position: relative;
     width: 100%;
     height: 100%;
-    background: 
+    background:
         linear-gradient(135deg, #4a3428 0%, #2a1f18 100%),
         radial-gradient(ellipse at center, rgba(139, 115, 85, 0.3) 0%, transparent 70%);
     border-radius: 16px;
@@ -1774,12 +1884,12 @@ h3 {
     padding: 8px;
     display: flex;
     flex-direction: column;
-    box-shadow: 
+    box-shadow:
         0 8px 24px rgba(0, 0, 0, 0.4),
-        inset 0 2px 0 rgba(255,255,255,0.15),
-        inset 0 -2px 0 rgba(0,0,0,0.4),
-        inset 2px 0 0 rgba(255,255,255,0.1),
-        inset -2px 0 0 rgba(0,0,0,0.3);
+        inset 0 2px 0 rgba(255, 255, 255, 0.15),
+        inset 0 -2px 0 rgba(0, 0, 0, 0.4),
+        inset 2px 0 0 rgba(255, 255, 255, 0.1),
+        inset -2px 0 0 rgba(0, 0, 0, 0.3);
     transition: all 0.4s ease;
     overflow: hidden;
 }
@@ -1821,16 +1931,16 @@ h3 {
     color: #ffffff;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
     text-align: center;
-    background: 
+    background:
         linear-gradient(135deg, #8b7355 0%, #6b5a45 50%, #4a3428 100%);
     padding: 6px 12px;
     margin: 0 8px;
     border-radius: 12px;
     border: 2px solid #a68b6b;
-    box-shadow: 
-        0 2px 4px rgba(0,0,0,0.4),
-        inset 0 1px 0 rgba(255,255,255,0.2),
-        inset 0 -1px 0 rgba(0,0,0,0.3);
+    box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
     position: relative;
     z-index: 5;
 }
@@ -1839,7 +1949,7 @@ h3 {
     width: 36px;
     height: 36px;
     border-radius: 50%;
-    background: 
+    background:
         radial-gradient(circle at 30% 30%, #ff6b35, #d4af37, #8b4513),
         linear-gradient(135deg, #ff6b35 0%, #d4af37 50%, #8b4513 100%);
     color: #fff;
@@ -1848,11 +1958,11 @@ h3 {
     justify-content: center;
     font-weight: bold;
     font-size: 16px;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
-    box-shadow: 
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+    box-shadow:
         0 4px 12px rgba(212, 175, 55, 0.6),
-        inset 0 2px 0 rgba(255,255,255,0.3),
-        inset 0 -2px 0 rgba(0,0,0,0.3);
+        inset 0 2px 0 rgba(255, 255, 255, 0.3),
+        inset 0 -2px 0 rgba(0, 0, 0, 0.3);
     border: 2px solid #8b4513;
     position: absolute;
     top: -8px;
@@ -1874,14 +1984,14 @@ h3 {
     justify-content: center;
     position: relative;
     margin: 8px 4px;
-    background: 
+    background:
         linear-gradient(135deg, #2a1f18 0%, #1a0f08 100%),
         radial-gradient(ellipse at center, rgba(139, 115, 85, 0.2) 0%, transparent 70%);
     border: 2px solid #4a3428;
     border-radius: 8px;
-    box-shadow: 
-        inset 0 2px 4px rgba(0,0,0,0.5),
-        inset 0 -1px 0 rgba(255,255,255,0.1);
+    box-shadow:
+        inset 0 2px 4px rgba(0, 0, 0, 0.5),
+        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
     overflow: hidden;
 }
 
@@ -1947,10 +2057,10 @@ h3 {
     border-radius: 12px;
     text-transform: uppercase;
     border: 2px solid;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
-    box-shadow: 
-        0 2px 4px rgba(0,0,0,0.4),
-        inset 0 1px 0 rgba(255,255,255,0.2);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+    box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .card-type-badge.attack {
@@ -1972,16 +2082,16 @@ h3 {
 }
 
 .card-description-box {
-    background: 
+    background:
         linear-gradient(135deg, rgba(26, 15, 8, 0.9) 0%, rgba(42, 31, 24, 0.7) 100%);
     border: 1px solid #4a3428;
     border-radius: 8px;
     padding: 10px;
     margin: 4px;
     margin-bottom: 8px;
-    box-shadow: 
-        inset 0 1px 2px rgba(0,0,0,0.5),
-        0 1px 0 rgba(255,255,255,0.1);
+    box-shadow:
+        inset 0 1px 2px rgba(0, 0, 0, 0.5),
+        0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .card-text {
@@ -1989,7 +2099,7 @@ h3 {
     line-height: 1.4;
     color: #e8e8e8;
     text-align: center;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
     font-weight: 500;
 }
 
@@ -2068,7 +2178,7 @@ h3 {
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0,0,0,0.8);
+    background: rgba(0, 0, 0, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -2139,7 +2249,8 @@ h3 {
     padding: 40px;
 }
 
-.block-display, .debuff-display {
+.block-display,
+.debuff-display {
     display: inline-block;
     background: rgba(110, 168, 254, 0.2);
     padding: 4px 8px;
@@ -2219,20 +2330,20 @@ h3 {
     font-weight: bold;
     cursor: pointer;
     transition: all 0.2s ease;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 }
 
 .btn-reset-top:hover {
     background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
     border-color: #d32f2f;
     transform: translateY(-2px);
-    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
 }
 
 .btn-reset-top:active {
     transform: translateY(0);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .btn-reset-status {
@@ -2245,8 +2356,8 @@ h3 {
     font-weight: bold;
     cursor: pointer;
     transition: all 0.2s ease;
-    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     margin-left: auto;
 }
 
@@ -2254,12 +2365,12 @@ h3 {
     background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
     border-color: #d32f2f;
     transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
 }
 
 .btn-reset-status:active {
     transform: translateY(0);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .player-status {
@@ -2268,13 +2379,13 @@ h3 {
     display: flex;
     gap: 30px;
     align-items: center;
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
         linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
     border: 2px solid #3a3a4a;
     border-radius: 6px;
     padding: 10px 20px;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .status-item {
@@ -2298,7 +2409,7 @@ h3 {
     font-weight: bold;
     font-size: 18px;
     color: #f0e68c;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 }
 
 .relics-inline {
@@ -2330,10 +2441,10 @@ h3 {
 
 
 .kreon-logo {
-  font-family: "Kreon", serif;
-  font-optical-sizing: auto;
-  font-weight: 700;
-  font-style: normal;
+    font-family: "Kreon", serif;
+    font-optical-sizing: auto;
+    font-weight: 700;
+    font-style: normal;
 }
 
 
@@ -2346,17 +2457,17 @@ h3 {
     font-size: 16px;
     line-height: 1.6;
     color: #f0e68c;
-    box-shadow: 
-        0 12px 32px rgba(0,0,0,0.8),
+    box-shadow:
+        0 12px 32px rgba(0, 0, 0, 0.8),
         0 0 20px rgba(212, 175, 55, 0.3),
-        inset 0 1px 0 rgba(255,255,255,0.1),
-        inset 0 -1px 0 rgba(0,0,0,0.3);
+        inset 0 1px 0 rgba(255, 255, 255, 0.1),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
     z-index: 10000;
     display: none;
     max-width: 380px;
     min-width: 260px;
     pointer-events: none;
-    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     font-weight: 400;
 }
@@ -2372,7 +2483,7 @@ h3 {
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
     border-right: 10px solid #d4af37;
-    filter: drop-shadow(-2px 0 4px rgba(0,0,0,0.5));
+    filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.5));
 }
 
 .custom-tooltip::after {
@@ -2402,10 +2513,10 @@ h3 {
     border-radius: 50%;
     overflow: hidden;
     border: 3px solid #d4af37;
-    box-shadow: 
-        0 4px 12px rgba(0,0,0,0.6),
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.6),
         0 0 15px rgba(212, 175, 55, 0.4),
-        inset 0 2px 0 rgba(255,255,255,0.2);
+        inset 0 2px 0 rgba(255, 255, 255, 0.2);
     position: relative;
 }
 
@@ -2423,8 +2534,13 @@ h3 {
 }
 
 @keyframes avatarGlow {
-    0% { opacity: 0.6; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 0.6;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }
 
 .tooltip-avatar-img {
@@ -2445,7 +2561,7 @@ h3 {
     border-radius: 6px;
     padding: 20px;
     margin-bottom: 20px;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .relics-grid {
@@ -2482,18 +2598,14 @@ h3 {
 }
 
 .relic-title-logo svg {
-    filter: 
-        drop-shadow(0 0 20px rgba(255, 215, 0, 0.4))
-        drop-shadow(0 0 40px rgba(255, 140, 0, 0.3))
-        drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.6));
+    filter:
+        drop-shadow(0 0 20px rgba(255, 215, 0, 0.4)) drop-shadow(0 0 40px rgba(255, 140, 0, 0.3)) drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.6));
     transition: all 0.3s ease;
 }
 
 .relic-title-logo:hover svg {
-    filter: 
-        drop-shadow(0 0 30px rgba(255, 215, 0, 0.6))
-        drop-shadow(0 0 60px rgba(255, 140, 0, 0.4))
-        drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.6));
+    filter:
+        drop-shadow(0 0 30px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 60px rgba(255, 140, 0, 0.4)) drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.6));
     transform: scale(1.05);
 }
 
@@ -2520,8 +2632,8 @@ h3 {
     color: #d4af37;
     margin: 20px 0 12px 0;
     font-weight: bold;
-    text-shadow: 
-        2px 2px 4px rgba(0,0,0,0.8),
+    text-shadow:
+        2px 2px 4px rgba(0, 0, 0, 0.8),
         0 0 20px rgba(212, 175, 55, 0.3);
     font-family: 'Kreon', serif;
 }
@@ -2530,7 +2642,7 @@ h3 {
     font-size: 18px;
     color: #e0d0b0;
     margin: 0;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
     font-style: italic;
 }
 
@@ -2546,7 +2658,7 @@ h3 {
 .relic-option {
     display: flex;
     align-items: center;
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
         linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
     border: 2px solid #3a3a4a;
@@ -2554,7 +2666,7 @@ h3 {
     padding: 30px;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 
+    box-shadow:
         0 6px 25px rgba(0, 0, 0, 0.4),
         inset 0 2px 4px rgba(255, 255, 255, 0.05),
         inset 0 -2px 4px rgba(0, 0, 0, 0.4);
@@ -2576,11 +2688,11 @@ h3 {
 
 .relic-option:hover {
     border-color: #4a4a5a;
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
         linear-gradient(135deg, #3a3a4a 0%, #2a2a3a 100%);
     transform: translateY(-2px) scale(1.02);
-    box-shadow: 
+    box-shadow:
         0 8px 30px rgba(0, 0, 0, 0.5),
         inset 0 2px 4px rgba(255, 255, 255, 0.08),
         inset 0 -2px 4px rgba(0, 0, 0, 0.4);
@@ -2592,7 +2704,7 @@ h3 {
 
 .relic-option:active {
     transform: translateY(0px) scale(1.01);
-    box-shadow: 
+    box-shadow:
         0 2px 15px rgba(0, 0, 0, 0.4),
         inset 0 2px 4px rgba(0, 0, 0, 0.3);
 }
@@ -2600,7 +2712,7 @@ h3 {
 .relic-portrait {
     width: 100px;
     height: 100px;
-    background: 
+    background:
         linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
     border: 2px solid #3a3a4a;
     border-radius: 12px;
@@ -2609,7 +2721,7 @@ h3 {
     justify-content: center;
     margin-right: 24px;
     flex-shrink: 0;
-    box-shadow: 
+    box-shadow:
         0 4px 12px rgba(0, 0, 0, 0.4),
         inset 0 1px 2px rgba(255, 255, 255, 0.05),
         inset 0 -1px 2px rgba(0, 0, 0, 0.4);
@@ -2637,7 +2749,7 @@ h3 {
 
 .relic-option:hover .relic-portrait {
     border-color: #4a4a5a;
-    box-shadow: 
+    box-shadow:
         0 6px 18px rgba(0, 0, 0, 0.5),
         inset 0 2px 4px rgba(255, 255, 255, 0.08),
         inset 0 -2px 4px rgba(0, 0, 0, 0.4);
@@ -2649,8 +2761,13 @@ h3 {
 }
 
 @keyframes relicGlow {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 .relic-portrait .relic-icon {
@@ -2679,8 +2796,8 @@ h3 {
     font-weight: bold;
     color: #f0e68c;
     margin-bottom: 8px;
-    text-shadow: 
-        2px 2px 4px rgba(0,0,0,0.8),
+    text-shadow:
+        2px 2px 4px rgba(0, 0, 0, 0.8),
         0 0 20px rgba(240, 230, 140, 0.4);
     font-family: 'Kreon', serif;
     letter-spacing: 0.8px;
@@ -2690,7 +2807,7 @@ h3 {
     font-size: 16px;
     color: #e0d0b0;
     line-height: 1.5;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
     font-style: italic;
 }
 
@@ -2698,7 +2815,7 @@ h3 {
     text-align: center;
     margin-top: 50px;
     padding: 20px;
-    background: 
+    background:
         linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
     border-radius: 15px;
     border: 1px solid rgba(212, 175, 55, 0.1);
@@ -2708,7 +2825,7 @@ h3 {
     font-size: 16px;
     color: #c0b090;
     font-style: italic;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
     letter-spacing: 0.3px;
 }
 
@@ -2723,14 +2840,14 @@ h3 {
 }
 
 .map-section {
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
         linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
     border: 2px solid #3a3a4a;
     border-radius: 6px;
     padding: 20px;
     margin-bottom: 20px;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 
@@ -2742,16 +2859,16 @@ h3 {
 }
 
 .birthday-message {
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
         linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
     border: 3px solid #d4af37;
     border-radius: 16px;
     padding: 25px 13px;
     text-align: center;
-    box-shadow: 
+    box-shadow:
         0 8px 24px rgba(0, 0, 0, 0.4),
-        inset 0 2px 0 rgba(255,255,255,0.15),
+        inset 0 2px 0 rgba(255, 255, 255, 0.15),
         0 0 20px rgba(212, 175, 55, 0.3);
 }
 
@@ -2771,15 +2888,15 @@ h3 {
 }
 
 .map-instructions {
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
         linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
     border: 2px solid #3a3a4a;
     border-radius: 12px;
     padding: 20px;
-    box-shadow: 
+    box-shadow:
         0 4px 16px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255,255,255,0.1);
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .map-instructions h3 {
@@ -2924,7 +3041,7 @@ h3 {
     background: linear-gradient(180deg, #C8B99C 0%, #A0927A 50%, #8B7D6B 100%);
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: inset 0 0 50px rgba(0,0,0,0.2);
+    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.2);
 }
 
 
@@ -3008,7 +3125,7 @@ h3 {
     background: #5A5A5A;
     border: 3px solid #3A3A3A;
     border-radius: 50%;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
     transition: all 0.3s ease;
 }
 
@@ -3056,7 +3173,7 @@ h3 {
 
 .spire-node .node-icon {
     font-size: 24px;
-    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
+    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
 }
 
 .current-indicator {
@@ -3074,13 +3191,13 @@ h3 {
     font-size: 12px;
     font-weight: bold;
     z-index: 3;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 
 .spire-node.current .node-background {
     border-color: #FFD700 !important;
-    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
+    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
 }
 
 .spire-node.available {
@@ -3092,7 +3209,7 @@ h3 {
 }
 
 .spire-node.available:hover .node-background {
-    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 4px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
+    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
     border-color: #FFF !important;
 }
 
@@ -3124,13 +3241,16 @@ h3 {
 }
 
 @keyframes currentPulse {
-    0%, 100% { 
-        transform: scale(1); 
-        opacity: 1; 
+
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 1;
     }
-    50% { 
-        transform: scale(1.2); 
-        opacity: 0.3; 
+
+    50% {
+        transform: scale(1.2);
+        opacity: 0.3;
     }
 }
 
@@ -3144,13 +3264,13 @@ h3 {
     cursor: pointer;
     transition: all 0.15s ease;
     position: relative;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .map-node.current {
     border-color: #d4af37;
     background: linear-gradient(135deg, #5a4a2a 0%, #4a3a1a 100%);
-    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
+    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .map-node.available {
@@ -3161,7 +3281,7 @@ h3 {
 
 .map-node.available:hover {
     transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(90, 138, 58, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
+    box-shadow: 0 6px 16px rgba(90, 138, 58, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
     border-color: #6a9a4a;
 }
 
@@ -3273,17 +3393,14 @@ h3 {
 
 
 .deck-stack:hover .deck-stack-card {
-    transform: 
-        translateX(calc(var(--card-index) * -140px))
-        translateY(calc(var(--card-index) * -30px));
+    transform:
+        translateX(calc(var(--card-index) * -140px)) translateY(calc(var(--card-index) * -30px));
     z-index: calc(30 + var(--card-index));
 }
 
 .deck-stack:hover .deck-stack-card:hover {
-    transform: 
-        translateX(calc(var(--card-index) * -140px))
-        translateY(calc(var(--card-index) * -30px - 15px))
-        scale(1.05);
+    transform:
+        translateX(calc(var(--card-index) * -140px)) translateY(calc(var(--card-index) * -30px - 15px)) scale(1.05);
     z-index: 100;
 }
 
@@ -3292,7 +3409,7 @@ h3 {
     position: relative;
     width: 100%;
     height: 100%;
-    background: 
+    background:
         linear-gradient(135deg, #4a3428 0%, #2a1f18 100%),
         radial-gradient(ellipse at center, rgba(139, 115, 85, 0.3) 0%, transparent 70%);
     border-radius: 16px;
@@ -3300,12 +3417,12 @@ h3 {
     padding: 8px;
     display: flex;
     flex-direction: column;
-    box-shadow: 
+    box-shadow:
         0 8px 24px rgba(0, 0, 0, 0.4),
-        inset 0 2px 0 rgba(255,255,255,0.15),
-        inset 0 -2px 0 rgba(0,0,0,0.4),
-        inset 2px 0 0 rgba(255,255,255,0.1),
-        inset -2px 0 0 rgba(0,0,0,0.3);
+        inset 0 2px 0 rgba(255, 255, 255, 0.15),
+        inset 0 -2px 0 rgba(0, 0, 0, 0.4),
+        inset 2px 0 0 rgba(255, 255, 255, 0.1),
+        inset -2px 0 0 rgba(0, 0, 0, 0.3);
     transition: all 0.4s ease;
     overflow: hidden;
 }
@@ -3322,16 +3439,16 @@ h3 {
     color: #ffffff;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
     text-align: center;
-    background: 
+    background:
         linear-gradient(135deg, #8b7355 0%, #6b5a45 50%, #4a3428 100%);
     padding: 6px 12px;
     margin: 0 8px;
     border-radius: 12px;
     border: 2px solid #a68b6b;
-    box-shadow: 
-        0 2px 4px rgba(0,0,0,0.4),
-        inset 0 1px 0 rgba(255,255,255,0.2),
-        inset 0 -1px 0 rgba(0,0,0,0.3);
+    box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
     position: relative;
     z-index: 5;
 }
@@ -3340,7 +3457,7 @@ h3 {
     width: 36px;
     height: 36px;
     border-radius: 50%;
-    background: 
+    background:
         radial-gradient(circle at 30% 30%, #ff6b35, #d4af37, #8b4513),
         linear-gradient(135deg, #ff6b35 0%, #d4af37 50%, #8b4513 100%);
     color: #fff;
@@ -3349,11 +3466,11 @@ h3 {
     justify-content: center;
     font-weight: bold;
     font-size: 16px;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
-    box-shadow: 
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+    box-shadow:
         0 4px 12px rgba(212, 175, 55, 0.6),
-        inset 0 2px 0 rgba(255,255,255,0.3),
-        inset 0 -2px 0 rgba(0,0,0,0.3);
+        inset 0 2px 0 rgba(255, 255, 255, 0.3),
+        inset 0 -2px 0 rgba(0, 0, 0, 0.3);
     border: 2px solid #8b4513;
     position: absolute;
     top: -8px;
@@ -3369,14 +3486,14 @@ h3 {
     justify-content: center;
     position: relative;
     margin: 8px 4px;
-    background: 
+    background:
         linear-gradient(135deg, #2a1f18 0%, #1a0f08 100%),
         radial-gradient(ellipse at center, rgba(139, 115, 85, 0.2) 0%, transparent 70%);
     border: 2px solid #4a3428;
     border-radius: 8px;
-    box-shadow: 
-        inset 0 2px 4px rgba(0,0,0,0.5),
-        inset 0 -1px 0 rgba(255,255,255,0.1);
+    box-shadow:
+        inset 0 2px 4px rgba(0, 0, 0, 0.5),
+        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
     overflow: hidden;
 }
 
@@ -3388,16 +3505,16 @@ h3 {
 }
 
 .deck-stack-card .card-description-box {
-    background: 
+    background:
         linear-gradient(135deg, rgba(26, 15, 8, 0.9) 0%, rgba(42, 31, 24, 0.7) 100%);
     border: 1px solid #4a3428;
     border-radius: 8px;
     padding: 10px;
     margin: 4px;
     margin-bottom: 8px;
-    box-shadow: 
-        inset 0 1px 2px rgba(0,0,0,0.5),
-        0 1px 0 rgba(255,255,255,0.1);
+    box-shadow:
+        inset 0 1px 2px rgba(0, 0, 0, 0.5),
+        0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .deck-stack-card .card-text {
@@ -3405,7 +3522,7 @@ h3 {
     line-height: 1.4;
     color: #e8e8e8;
     text-align: center;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
     font-weight: 500;
 }
 
@@ -3440,7 +3557,7 @@ h3 {
     font-size: 8px;
     font-weight: bold;
     border: 1px solid #fff;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
 
@@ -3516,7 +3633,7 @@ h3 {
     font-size: 12px;
     font-weight: bold;
     border: 2px solid #fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
     z-index: 10;
 }
 
@@ -3644,8 +3761,8 @@ h3 {
     font-size: 36px;
     color: #d4af37;
     margin: 0 0 15px 0;
-    text-shadow: 
-        2px 2px 4px rgba(0,0,0,0.8),
+    text-shadow:
+        2px 2px 4px rgba(0, 0, 0, 0.8),
         0 0 20px rgba(212, 175, 55, 0.3);
     font-weight: bold;
 }
@@ -3654,7 +3771,7 @@ h3 {
     font-size: 18px;
     color: #e8e8e8;
     margin: 0;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 }
 
 .rest-options {
@@ -3668,7 +3785,7 @@ h3 {
 .rest-option {
     display: flex;
     align-items: center;
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
         linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
     border: 2px solid #3a3a4a;
@@ -3676,7 +3793,7 @@ h3 {
     padding: 30px;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 
+    box-shadow:
         0 6px 25px rgba(0, 0, 0, 0.4),
         inset 0 2px 4px rgba(255, 255, 255, 0.05),
         inset 0 -2px 4px rgba(0, 0, 0, 0.4);
@@ -3686,10 +3803,10 @@ h3 {
 
 .rest-option:hover {
     border-color: #4a4a5a;
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
         linear-gradient(135deg, #3a3a4a 0%, #2a2a3a 100%);
-    box-shadow: 
+    box-shadow:
         0 8px 30px rgba(0, 0, 0, 0.5),
         inset 0 2px 4px rgba(255, 255, 255, 0.08),
         inset 0 -2px 4px rgba(0, 0, 0, 0.4);
@@ -3783,7 +3900,7 @@ h3 {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 300px; 
+    width: 300px;
     padding-left: 120px;
 }
 
@@ -3900,7 +4017,8 @@ h3 {
     font-weight: bold;
 }
 
-.gold-icon, .price-icon {
+.gold-icon,
+.price-icon {
     width: 24px;
     height: 24px;
     object-fit: contain;
@@ -4381,7 +4499,7 @@ h3 {
         flex-direction: column;
         text-align: center;
     }
-    
+
     .player-status-inline {
         flex-direction: column;
         gap: 15px;
@@ -4433,11 +4551,14 @@ h3 {
 }
 
 @keyframes defeatPulse {
-    0%, 100% { 
+
+    0%,
+    100% {
         transform: scale(1);
         filter: drop-shadow(0 0 20px rgba(139, 69, 19, 0.6));
     }
-    50% { 
+
+    50% {
         transform: scale(1.05);
         filter: drop-shadow(0 0 30px rgba(139, 69, 19, 0.8));
     }
@@ -4508,8 +4629,15 @@ h3 {
 }
 
 @keyframes defeatFloat {
-    0%, 100% { transform: translateY(0px) rotate(0deg); }
-    50% { transform: translateY(-10px) rotate(2deg); }
+
+    0%,
+    100% {
+        transform: translateY(0px) rotate(0deg);
+    }
+
+    50% {
+        transform: translateY(-10px) rotate(2deg);
+    }
 }
 
 .defeat-stats {
@@ -4591,7 +4719,7 @@ h3 {
     gap: 20px;
     justify-content: center;
     flex-wrap: wrap;
-    margin-top:30px;
+    margin-top: 30px;
 }
 
 .defeat-btn {
@@ -4764,8 +4892,15 @@ h3 {
 }
 
 @keyframes victoryGlow {
-    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
-    100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
+    0% {
+        opacity: 0.5;
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    100% {
+        opacity: 0.8;
+        transform: translate(-50%, -50%) scale(1.1);
+    }
 }
 
 .victory-stats {
@@ -4950,15 +5085,15 @@ h3 {
         grid-template-columns: 1fr;
         gap: 30px;
     }
-    
+
     .stats-grid {
         grid-template-columns: 1fr;
     }
-    
+
     .victory-header h1 {
         font-size: 32px;
     }
-    
+
     .victory-trophy {
         width: 150px;
         height: 150px;
@@ -4969,8 +5104,8 @@ h3 {
     font-size: 36px;
     color: #d4af37;
     margin: 0 0 15px 0;
-    text-shadow: 
-        2px 2px 4px rgba(0,0,0,0.8),
+    text-shadow:
+        2px 2px 4px rgba(0, 0, 0, 0.8),
         0 0 20px rgba(212, 175, 55, 0.3);
     font-weight: bold;
 }
@@ -4979,7 +5114,7 @@ h3 {
     font-size: 18px;
     color: #e8e8e8;
     margin: 0;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 }
 
 .upgrade-options {
@@ -4992,7 +5127,7 @@ h3 {
 }
 
 .upgrade-option {
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
         linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
     border: 2px solid #3a3a4a;
@@ -5000,7 +5135,7 @@ h3 {
     padding: 30px;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 
+    box-shadow:
         0 6px 25px rgba(0, 0, 0, 0.4),
         inset 0 2px 4px rgba(255, 255, 255, 0.05),
         inset 0 -2px 4px rgba(0, 0, 0, 0.4);
@@ -5008,10 +5143,10 @@ h3 {
 
 .upgrade-option:hover {
     border-color: #4a4a5a;
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
         linear-gradient(135deg, #3a3a4a 0%, #2a2a3a 100%);
-    box-shadow: 
+    box-shadow:
         0 8px 30px rgba(0, 0, 0, 0.5),
         inset 0 2px 4px rgba(255, 255, 255, 0.08),
         inset 0 -2px 4px rgba(0, 0, 0, 0.4);
@@ -5031,9 +5166,9 @@ h3 {
     border-radius: 12px;
     padding: 20px;
     width: 280px;
-    box-shadow: 
+    box-shadow:
         0 4px 16px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255,255,255,0.1);
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .upgrade-card.before {
@@ -5042,9 +5177,9 @@ h3 {
 
 .upgrade-card.after {
     border-color: #d4af37;
-    box-shadow: 
+    box-shadow:
         0 4px 16px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255,255,255,0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1),
         0 0 20px rgba(212, 175, 55, 0.3);
 }
 
@@ -5086,7 +5221,7 @@ h3 {
     border: 1px solid #4a3428;
     border-radius: 8px;
     padding: 15px;
-    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
 .upgrade-card-art img {
@@ -5131,7 +5266,7 @@ h3 {
 }
 
 .upgrade-skip {
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
         linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
     border: 2px solid #3a3a4a;
@@ -5143,20 +5278,20 @@ h3 {
     cursor: pointer;
     transition: all 0.3s ease;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
-    box-shadow: 
+    box-shadow:
         0 4px 16px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255,255,255,0.1);
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .upgrade-skip:hover {
     border-color: #4a4a5a;
-    background: 
+    background:
         radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
         linear-gradient(135deg, #3a3a4a 0%, #2a2a3a 100%);
     transform: translateY(-1px);
-    box-shadow: 
+    box-shadow:
         0 6px 20px rgba(0, 0, 0, 0.4),
-        inset 0 1px 0 rgba(255,255,255,0.15);
+        inset 0 1px 0 rgba(255, 255, 255, 0.15);
 }
 
 
@@ -5174,7 +5309,7 @@ h3 {
     color: var(--accent);
     font-size: 2.5rem;
     margin-bottom: 40px;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .reward-cards-container {
@@ -5223,7 +5358,7 @@ h3 {
     bottom: 10px;
     left: 50%;
     transform: translateX(-50%);
-    background: rgba(0,0,0,0.8);
+    background: rgba(0, 0, 0, 0.8);
     color: var(--accent);
     padding: 4px 8px;
     border-radius: 4px;
@@ -5252,7 +5387,7 @@ h3 {
 
 .skip-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 /* Birthday Countdown Styles */
@@ -5357,40 +5492,55 @@ h3 {
 }
 
 .dev-hint code {
-    background: rgba(0,0,0,0.3);
+    background: rgba(0, 0, 0, 0.3);
     padding: 2px 6px;
     border-radius: 4px;
     font-family: 'JetBrains Mono', monospace;
 }
 
 @keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0.3; }
+
+    0%,
+    50% {
+        opacity: 1;
+    }
+
+    51%,
+    100% {
+        opacity: 0.3;
+    }
 }
 
 @keyframes float {
-    0%, 100% { transform: translateY(0px); }
-    50% { transform: translateY(-10px); }
+
+    0%,
+    100% {
+        transform: translateY(0px);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
 }
 
 @media (max-width: 768px) {
     .countdown-display {
         gap: 10px;
     }
-    
+
     .time-unit {
         min-width: 80px;
         padding: 15px;
     }
-    
+
     .time-number {
         font-size: 2em;
     }
-    
+
     .countdown-message h2 {
         font-size: 1.8em;
     }
-    
+
     .preview-icons {
         letter-spacing: 10px;
     }
@@ -5439,8 +5589,8 @@ h3 {
     color: white;
     font-size: 12px;
     font-weight: bold;
-    min-width: 20px;
-    height: 20px;
+    min-width: 25px;
+    height: 25px;
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -5451,11 +5601,14 @@ h3 {
 }
 
 @keyframes badgePulse {
-    0%, 100% {
+
+    0%,
+    100% {
         transform: scale(1);
     }
+
     50% {
-        transform: scale(1.1);
+        transform: scale(1.3);
     }
 }
 
@@ -5481,8 +5634,13 @@ h3 {
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
 .messages-modal {
@@ -5502,6 +5660,7 @@ h3 {
         opacity: 0;
         transform: scale(0.9) translateY(-20px);
     }
+
     to {
         opacity: 1;
         transform: scale(1) translateY(0);
@@ -5582,7 +5741,8 @@ h3 {
     color: var(--text);
     line-height: 1.6;
     font-size: 1.05em;
-    white-space: pre-wrap; /* Preserve line breaks */
+    white-space: pre-wrap;
+    /* Preserve line breaks */
 }
 
 /* No Messages Placeholder */
@@ -5633,7 +5793,7 @@ h3 {
         padding: 10px 16px;
         font-size: 14px;
     }
-    
+
     .message-count-badge {
         top: -6px;
         right: -6px;
@@ -5641,26 +5801,26 @@ h3 {
         height: 18px;
         font-size: 11px;
     }
-    
+
     .messages-modal {
         width: 95%;
         margin: 20px;
         max-height: 85vh;
     }
-    
+
     .messages-modal-header {
         padding: 15px;
     }
-    
+
     .messages-modal-header h2 {
         font-size: 1.3em;
     }
-    
+
     .messages-modal-content {
         padding: 15px;
         max-height: 65vh;
     }
-    
+
     .message-item {
         padding: 15px;
     }