Modify keybinds so that single number press is raise card, double press is play card

src/engine/battle.js

@@ -28,6 +28,9 @@ export function startPlayerTurn(ctx) {
     ctx.flags.nextTurnEnergyPenalty = 0;
     draw(ctx.player, 5 - ctx.player.hand.length);
 
+    // Clear card selection when new turn starts
+    ctx.selectedCardIndex = null;
+
     const relicCtx = { ...ctx, draw: (n) => draw(ctx.player, n) };
     for (const r of ctx.relicStates) r.hooks?.onTurnStart?.(relicCtx, r.state);
     ctx.log(`Your turn begins. You have ${ctx.player.energy} energy to spend.`);

src/ui/render.js

@@ -230,6 +230,9 @@ export async function renderBattle(root) {
             const card = p.hand[index];
             if (p.energy >= card.cost) {
                 root.play(index);
+                // Clear selection when card is played via mouse
+                root.selectedCardIndex = null;
+                updateCardSelection(root);
             }
         });
     });
@@ -247,20 +250,36 @@ export async function renderBattle(root) {
         });
     }
     
+    // Initialize card selection state if not exists
+    if (!root.selectedCardIndex) {
+        root.selectedCardIndex = null;
+    }
+
     window.onkeydown = (e) => {
         if (e.key.toLowerCase() === "e") {
-
             try {
                 root.end();
             } catch (error) {
                 console.error("Error ending turn via keyboard:", error);
             }
         }
+        
         const n = parseInt(e.key, 10);
         if (n >= 1 && n <= p.hand.length) {
-            const card = p.hand[n - 1];
+            const cardIndex = n - 1;
-            if (p.energy >= card.cost) {
+            const card = p.hand[cardIndex];
-                root.play(n - 1);
+            
+            if (root.selectedCardIndex === cardIndex) {
+                // Second press of same key - play the card
+                if (p.energy >= card.cost) {
+                    root.play(cardIndex);
+                    root.selectedCardIndex = null; // Clear selection
+                    updateCardSelection(root);
+                }
+            } else {
+                // First press or different key - select the card
+                root.selectedCardIndex = cardIndex;
+                updateCardSelection(root);
             }
         }
     };
@@ -270,6 +289,9 @@ export async function renderBattle(root) {
   if (logContent) {
     logContent.scrollTop = logContent.scrollHeight;
     }
+    
+    // Apply initial card selection visual state
+    updateCardSelection(root);
 }
 
 export async function renderMap(root) {
@@ -1009,6 +1031,21 @@ export function renderShop(root) {
     });
 }
 
+function updateCardSelection(root) {
+    // Remove selection from all cards
+    root.app.querySelectorAll('.battle-card').forEach(card => {
+        card.classList.remove('card-selected');
+    });
+    
+    // Add selection to currently selected card
+    if (root.selectedCardIndex !== null) {
+        const selectedCard = root.app.querySelector(`[data-play="${root.selectedCardIndex}"]`);
+        if (selectedCard) {
+            selectedCard.classList.add('card-selected');
+        }
+    }
+}
+
 function updateShopAffordability(root) {
     // Update card affordability
     root.app.querySelectorAll("[data-buy-card]").forEach(btn => {

style.css

@@ -1739,6 +1739,27 @@ h3 {
     box-shadow: 0 0 15px rgba(111, 66, 193, 0.3);
 }
 
+.battle-card.card-selected {
+    transform: translateY(-80px) scale(1.15) rotate(0deg) !important;
+    z-index: 300;
+    margin-left: -60px;
+    margin-right: 40px;
+}
+
+.battle-card.card-selected ~ .battle-card {
+    transform: translateX(20px);
+}
+
+.battle-card.card-selected .card-glow {
+    opacity: 0.8;
+    filter: blur(6px);
+    transform: scale(1.05);
+}
+
+.battle-card.card-selected .card-frame {
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
+}
+
 .battle-card.playable:hover .card-glow {
     opacity: 0.8;
     filter: blur(6px);