...

` with overlay. Include explanation text and close/ok button.\n- add CSS for merge button and overlay.\n\nIn main.js:\n- add state: mergeMode: false, mergeSelected: [].\n- window.toggleMergeMode: if not mergeMode, set mergeMode true, mergeSelected=[], showMergeInfo(), update UI highlights. If already active, cancel merge mode: clear selection, hide overlay, update UI.\n- showMergeInfo/hideMergeInfo set display flex/none.\n- handleCardClick: if mergeMode and card.type==='big': handleMergeSelect(card, playerIdx); return; Also only allow own cards.\n- handleMergeSelect: toggle selection; if select first, add class selected; if second selected: if same color and not same id: perform merge; else show message \"Select same color\" and maybe deselect second? For simplicity, if second same color, merge; else show message and clear second selection? Better deselect all and reselect second as first.\n- mergeCards: playerIdx, c1, c2. Remove both from hand. Determine next color: cycleMap orange->blue, blue->magenta, magenta->orange. Choose random big card of that color from CARDS, create object with id. Add to hand. Show message. If hand big length 0 -> end game. End merge mode automatically? After merge, maybe keep merge mode active to allow multiple merges, or exit. Usually one merge per turn? Prompt doesn't specify. We can exit merge mode after successful merge. Maybe also consume turn? Should merging cost turn? It's a button during turn. Could allow merging anytime on your turn. To avoid abuse, maybe after merging end turn? But prompt only says merge similar coloured cards. We'll allow merge as action that ends turn? Actually if merge reduces cards, it might be strong; but as a game feature maybe just a mode to manage hand. Better not end turn; but could let player still play. However a turn should have one action. Let's make merge consume the turn: after successful merge, nextTurn. But then selecting two cards and merging ends turn. That seems like an action. Could also allow only if not yet played a card this turn. The gameState doesn't track actionDone; we can set turnAction flag. But to minimize complexity, when merge mode active and merging occurs, call nextTurn. Also if no valid merge, maybe just exit mode and no turn spent. Hmm.\n\nBut user says \"merge button in the bottom left that allows you to merge similar coloured cards... Explained when using merge mode.\" It sounds like an action during turn. We'll implement: toggling merge mode; selecting two same-color big cards merges them into next color and ends turn. That prevents spamming.\n\nNeed ensure bot doesn't use merge.\n\nNeed update CSS: selected class currently used for card selected. Use same. But in merge mode, selected means selected for merge. The .selected transform might overlap. Fine.\n\nNeed ensure handleCardClick for small cards does not fire if merge mode.\n\nAlso need to add to info overlay? Not necessary, but maybe add rule in info? User didn't ask. Could add a brief rule in info: \"Merge: combine two same-color big cards into next color.\" But user wants explanation when using merge mode, not necessarily in info. Could also add to rules. We'll add a rule item in info list.\n\nNeed ensure no base64 images. Use existing paths.\n\nLet's write SEARCH/REPLACE blocks for index.html and main.js.\n\nWe need be careful with exact text. Let's gather exact snippets.\n\nindex.html part where #game-screen contents. We will add merge button and merge info overlay before closing #game-container? The merge info overlay can be a sibling screen inside game-container.\n\nNeed exact search for adding merge button. The game-screen currently:\n```\n \n

Player 1 Turn

\n \n \n

\n \n

\n...\n

\n \n

\n```\nAdd `` before closing div. Add merge info overlay after #info-overlay maybe.\n\nCSS to add: .merge-btn, #merge-info styles. Could add after #turn-indicator.\n\nLet's decide CSS:\n```\n .merge-btn {\n position: absolute;\n left: 10px;\n bottom: 10px;\n min-width: 80px;\n padding: 10px 15px;\n font-size: 1rem;\n z-index: 50;\n }\n .merge-btn.active {\n background: #ffd32a;\n color: #222;\n }\n #merge-info {\n background: rgba(0,0,0,0.85);\n color: white;\n z-index: 200;\n padding: 20px;\n text-align: center;\n display: none;\n }\n #merge-info.active { display: flex; }\n .merge-info-content {\n background: #333;\n padding: 25px;\n border-radius: 15px;\n max-width: 90%;\n width: 320px;\n }\n```\nSince .screen.active already display:flex, but we toggle via class? We can set display none and use inline style or active. Better add screen class and toggle active class. But .screen.active display:flex. For overlays, okay. Add #merge-info.screen. But .screen has align-items center etc. Use same.\n\nIn JS, function toggleMergeMode uses classList.\n\nNeed modify screens array to include merge-info? Not needed if using inline class toggling. But showScreen maybe? We don't want to hide others? We'll toggle overlay only.\n\nIn main.js, update gameState initial with mergeMode and mergeSelected.\n\nChange handleCardClick to branch mergeMode.\n\nImplement functions.\n\nAlso update createCardElement to clear selected class on re-render? selected class added dynamically; updateUI calls renderHand clearing innerHTML, so selection lost. If merge mode persists and we re-render? We only call updateUI at start/end etc. During merge mode, we add selected class to elements; no re-render until action. Fine. But if we call updateUI while merge mode, selections lost. Avoid updateUI during selection except after merge/cancel.\n\nLet's implement handleMergeSelect to manage classes.\n\nNeed add window.toggleMergeMode, window.closeMergeInfo? Use functions.\n\nLet's craft code:\n\n```\nfunction handleMergeSelect(card, playerIdx) {\n const idx = gameState.mergeSelected.findIndex(c => c.id === card.id);\n if (idx >= 0) {\n gameState.mergeSelected.splice(idx, 1);\n // remove class\n const el = findCardElement(card);\n if (el) el.classList.remove('selected');\n return;\n }\n if (gameState.mergeSelected.length === 0) {\n gameState.mergeSelected.push(card);\n const el = findCardElement(card);\n if (el) el.classList.add('selected');\n } else {\n const first = gameState.mergeSelected[0];\n if (first.color === card.color) {\n // perform merge\n mergeCards(first, card, playerIdx);\n } else {\n showMessage(\"Colors must match to merge!\");\n // clear selection visual\n document.querySelectorAll('.card.selected').forEach(el=>el.classList.remove('selected'));\n gameState.mergeSelected = [card];\n const el = findCardElement(card);\n if (el) el.classList.add('selected');\n }\n }\n}\n\nfunction findCardElement(card) {\n // query by background url? Could add data-id.\n return document.querySelector(`.card[data-id=\"${card.id}\"]`);\n}\n```\n\nBetter add data-id to card elements for selection. In createCardElement, set el.dataset.id = card.id. Also hidden cards no id needed. Then findCardElement works.\n\nUpdate createCardElement: add `el.dataset.id = card.id;`\n\nThen handleCardClick normal uses data-id? It currently uses card object from closure.\n\nNeed mergeCards function:\n```\nfunction mergeCards(c1, c2, playerIdx) {\n const hand = gameState.hands[playerIdx].big;\n gameState.hands[playerIdx].big = hand.filter(c => c.id !== c1.id && c.id !== c2.id);\n const cycle = { orange: 'blue', blue: 'magenta', magenta: 'orange' };\n const nextColor = cycle[c1.color];\n const candidates = CARDS.filter(c => c.type === 'big' && c.color === nextColor);\n const newCard = { ...candidates[Math.floor(Math.random() * candidates.length)], id: Math.random() };\n gameState.hands[playerIdx].big.push(newCard);\n showMessage(`Merged into ${nextColor}!`);\n exitMergeMode();\n nextTurn(); // merging ends turn\n updateUI();\n}\n```\nBut note nextTurn toggles current player; after nextTurn updateUI. So mergeCards should call nextTurn and not separately updateUI (nextTurn calls updateUI). But also need check win before next turn? If player merges down to zero cards? But merge always creates a new card, so can't reach zero from merge? If they had exactly 2 big cards of same color, merge removes both and adds one, leaving 1. So no immediate win. Still okay.\n\nShould merging be allowed on opponent turn? only if currentPlayer matches. handleCardClick already checks.\n\nNeed toggleMergeMode checks if currentPlayer === 0 or local player? For local, maybe both can use. The button appears for current player; if currentPlayer is 1 and mode local, button should maybe work. Simpler: toggleMergeMode checks gameState.currentPlayer and only allows for human player. If bot turn, ignore. The button visible always but can check.\n\nImplementation:\n```\nwindow.toggleMergeMode = () => {\n if (gameState.mode === 'bot' && gameState.currentPlayer === 1) return;\n if (gameState.mergeMode) {\n exitMergeMode();\n } else {\n gameState.mergeMode = true;\n gameState.mergeSelected = [];\n document.getElementById('merge-btn').classList.add('active');\n showMergeInfo();\n document.getElementById('instruction-txt').innerText = \"Merge mode: tap two same-color BIG cards\";\n }\n};\n```\nBut if local, currentPlayer could be 1; the button works. Good.\n\n```\nfunction exitMergeMode() {\n gameState.mergeMode = false;\n gameState.mergeSelected = [];\n document.getElementById('merge-btn').classList.remove('active');\n document.querySelectorAll('.card.selected').forEach(el => el.classList.remove('selected'));\n document.getElementById('instruction-txt').innerText = \"Pick a card or draw\";\n}\n```\n\n```\nwindow.closeMergeInfo = () => {\n document.getElementById('merge-info').classList.remove('active');\n};\n```\n\nWhen entering merge mode, show overlay with explanation. The overlay should have OK button that closes it. Maybe also close automatically? We'll show and require OK.\n\nNeed showMergeInfo function:\n```\nfunction showMergeInfo() {\n document.getElementById('merge-info').classList.add('active');\n}\n```\n\nIn index.html, add overlay:\n```\n \n

Merge Mode

Select two same-color BIG cards from your hand to merge them.

They combine into one card of the next color in the cycle:

Orange → Blue → Purple/Pink → Orange (repeat).

This reduces your hand size. Merging ends your turn.

\n \n

\n```\n\nAdd to info overlay rules maybe:\n```\n

\n Merge: On your turn, tap Merge to combine two same-color BIG cards into the next color in the cycle: Orange → Blue → Purple/Pink → Orange.\n

\n```\nAdd in info overlay list before card list.\n\nNeed ensure .merge-info-content CSS.\n\nAlso need maybe disable end-turn button during merge mode? It remains visible if smallCardQueue. Could leave. If merge mode active and player clicks end turn, nextTurn will clear smallCardQueue; okay. But better to not allow other actions. The button will still work. To prevent confusion, maybe no issue.\n\nNeed update handleCardClick order: if mergeMode, handle merge. But also need to allow selecting only big cards. If small card clicked, show message.\n\nPotential issue: selected class used also for card selected to play (though code never adds selected class except CSS hover). It's fine.\n\nNeed update renderHand to include data-id. createCardElement sets dataset.id. For hidden opponent cards, don't set.\n\nNeed ensure after merge, exitMergeMode clears selected before nextTurn and updateUI (render removes elements anyway). fine.\n\nNow let's craft SEARCH/REPLACE blocks.\n\nFirst index.html: Add CSS after #turn-indicator block.\n\nSearch:\n```\n #turn-indicator {\n position: absolute;\n left: 10px;\n top: 10px;\n color: white;\n font-size: 1.2rem;\n }\n \n\n```\nReplace with including CSS.\n\nSecond index.html: Add merge button and overlay. Search near end before info-overlay? We need add button in game-screen and overlay after info-overlay. Let's do two separate blocks.\n\nBlock A: Add button in game-screen before closing . Search:\n```\n

\n \n

\n \n\n \n```\nReplace with button inserted before .\n\nBlock B: Add merge overlay after info-overlay. Search:\n```\n \n \n\n

\n```\nReplace with merge-info overlay.\n\nThird: add rule item in info-overlay. Search:\n```\n

\n Small Cards: Must be played together with a Big card. They have special powers!\n

\n```\nReplace with rule-item for merge inserted before info-card-list.\n\nNow main.js: multiple edits.\n\nBlock 1: gameState initial add mergeMode/mergeSelected.\nSearch:\n```\nlet gameState = {\n mode: 'bot',\n coins: 500,\n equippedMinis: [],\n currentPlayer: 0, // 0: Player 1, 1: Bot/Player 2\n hands: [[], []], // [bigs, smalls] for each player\n discardPile: [],\n turnLocked: false,\n smallCardQueue: null,\n protectionActive: [false, false],\n merchLocked: [false, false], // If true, can't play small cards\n statusTimeout: null,\n};\n```\nReplace adding mergeMode: false, mergeSelected: [].\n\nBlock 2: add dataset.id in createCardElement.\nSearch:\n```\nfunction createCardElement(card, playerIdx, hidden) {\n const el = document.createElement('div');\n el.className = `card ${card.type}`;\n if (!hidden) {\n el.style.backgroundImage = `url('${card.path}')`;\n el.onclick = () => handleCardClick(card, playerIdx);\n } else {\n el.style.backgroundColor = '#333';\n el.style.backgroundImage = 'none';\n }\n return el;\n}\n```\nReplace adding el.dataset.id.\n\nBlock 3: handleCardClick add merge branch.\nSearch:\n```\nfunction handleCardClick(card, playerIdx) {\n if (gameState.currentPlayer !== playerIdx) return;\n\n const top = gameState.discardPile[gameState.discardPile.length - 1];\n\n if (card.type === 'big') {\n```\nReplace with:\n```\nfunction handleCardClick(card, playerIdx) {\n if (gameState.currentPlayer !== playerIdx) return;\n\n if (gameState.mergeMode) {\n if (card.type === 'big') {\n handleMergeSelect(card, playerIdx);\n } else {\n showMessage(\"Only BIG cards can be merged!\");\n }\n return;\n }\n\n const top = gameState.discardPile[gameState.discardPile.length - 1];\n\n if (card.type === 'big') {\n```\n\nBlock 4: add merge functions after handleCardClick or near nextTurn. Need choose a unique location. We can add after nextTurn function. Search:\n```\nwindow.nextTurn = () => {\n gameState.smallCardQueue = null;\n gameState.currentPlayer = gameState.currentPlayer === 0 ? 1 : 0;\n gameState.merchLocked[gameState.currentPlayer] = false; // reset merch lock for them\n document.getElementById('end-turn-btn').style.display = 'none';\n document.getElementById('instruction-txt').innerText = \"Pick a card or draw\";\n \n updateUI();\n\n if (gameState.currentPlayer === 1 && gameState.mode === 'bot') {\n setTimeout(doBotTurn, 1000);\n }\n}\n```\nReplace with adding functions after it. But careful: we want to keep nextTurn code and then add new functions. Use REPLACE to insert following code after. The search includes function block; replacement includes same block plus appended new functions.\n\nNeed be precise with whitespace. In current main.js, nextTurn block ends with `}` then blank line then `function applyEffect...`. We'll replace that whole block including trailing newline? Better to search including the following `function applyEffect`? But that would duplicate. Let's search just nextTurn block and replace with nextTurn block + new functions. Ensure unique.\n\nThe nextTurn block as shown:\n```\nwindow.nextTurn = () => {\n gameState.smallCardQueue = null;\n gameState.currentPlayer = gameState.currentPlayer === 0 ? 1 : 0;\n gameState.merchLocked[gameState.currentPlayer] = false; // reset merch lock for them\n document.getElementById('end-turn-btn').style.display = 'none';\n document.getElementById('instruction-txt').innerText = \"Pick a card or draw\";\n \n updateUI();\n\n if (gameState.currentPlayer === 1 && gameState.mode === 'bot') {\n setTimeout(doBotTurn, 1000);\n }\n}\n\nfunction applyEffect(card, playerIdx) {\n```\nSearch includes `function applyEffect...` to anchor uniqueness? But replacement should include same `function applyEffect` after new functions? That would move applyEffect after new functions. Not ideal but order doesn't matter. But we want insert before applyEffect. Let's search including first line of applyEffect and replace with new functions + applyEffect. That works.\n\nSearch:\n```\nwindow.nextTurn = () => {\n gameState.smallCardQueue = null;\n gameState.currentPlayer = gameState.currentPlayer === 0 ? 1 : 0;\n gameState.merchLocked[gameState.currentPlayer] = false; // reset merch lock for them\n document.getElementById('end-turn-btn').style.display = 'none';\n document.getElementById('instruction-txt').innerText = \"Pick a card or draw\";\n \n updateUI();\n\n if (gameState.currentPlayer === 1 && gameState.mode === 'bot') {\n setTimeout(doBotTurn, 1000);\n }\n}\n\nfunction applyEffect(card, playerIdx) {\n```\nReplace with new functions + original applyEffect. We need include original applyEffect code exactly. That is large. Better to insert after nextTurn block but before applyEffect. We can search for `function applyEffect(card, playerIdx) {` alone? But not unique maybe. It appears once. We can replace that line with new functions + `function applyEffect...`. But we need the new functions to be defined before applyEffect, and also after nextTurn. Searching the line `function applyEffect(card, playerIdx) {` is unique. Replace it with:\n```\n// MERGE FEATURE\nwindow.toggleMergeMode = () => {\n if (gameState.mode === 'bot' && gameState.currentPlayer === 1) return;\n if (gameState.mergeMode) {\n exitMergeMode();\n } else {\n gameState.mergeMode = true;\n gameState.mergeSelected = [];\n document.getElementById('merge-btn').classList.add('active');\n document.getElementById('merge-info').classList.add('active');\n document.getElementById('instruction-txt').innerText = \"Merge mode: tap two same-color BIG cards\";\n }\n};\n\nwindow.closeMergeInfo = () => {\n document.getElementById('merge-info').classList.remove('active');\n};\n\nfunction exitMergeMode() {\n gameState.mergeMode = false;\n gameState.mergeSelected = [];\n document.getElementById('merge-btn').classList.remove('active');\n document.querySelectorAll('.card.selected').forEach(el => el.classList.remove('selected'));\n document.getElementById('instruction-txt').innerText = \"Pick a card or draw\";\n}\n\nfunction handleMergeSelect(card, playerIdx) {\n const existing = gameState.mergeSelected.findIndex(c => c.id === card.id);\n if (existing >= 0) {\n gameState.mergeSelected.splice(existing, 1);\n const el = document.querySelector(`.card[data-id=\"${card.id}\"]`);\n if (el) el.classList.remove('selected');\n return;\n }\n\n if (gameState.mergeSelected.length === 0) {\n gameState.mergeSelected.push(card);\n const el = document.querySelector(`.card[data-id=\"${card.id}\"]`);\n if (el) el.classList.add('selected');\n } else {\n const first = gameState.mergeSelected[0];\n if (first.color === card.color) {\n mergeCards(first, card, playerIdx);\n } else {\n showMessage(\"Pick the same color!\");\n document.querySelectorAll('.card.selected').forEach(el => el.classList.remove('selected'));\n gameState.mergeSelected = [card];\n const el = document.querySelector(`.card[data-id=\"${card.id}\"]`);\n if (el) el.classList.add('selected');\n }\n }\n}\n\nfunction mergeCards(c1, c2, playerIdx) {\n const hand = gameState.hands[playerIdx].big;\n gameState.hands[playerIdx].big = hand.filter(c => c.id !== c1.id && c.id !== c2.id);\n const cycle = { orange: 'blue', blue: 'magenta', magenta: 'orange' };\n const nextColor = cycle[c1.color];\n const candidates = CARDS.filter(c => c.type === 'big' && c.color === nextColor);\n const newCard = { ...candidates[Math.floor(Math.random() * candidates.length)], id: Math.random() };\n gameState.hands[playerIdx].big.push(newCard);\n showMessage(`Merged into ${nextColor}!`);\n exitMergeMode();\n nextTurn();\n}\n\nfunction applyEffect(card, playerIdx) {\n```\nThis inserts merge functions before applyEffect.\n\nNeed ensure window.closeMergeInfo accessible from HTML. Yes.\n\nNow we need add data-id. Also we might want to add rule item.\n\nLet's check index.html exact code for info overlay:\n\n```\n \n

Rules & Card Effects

\n Goal: Be the first to discard all BIG cards.\n

\n Big Cards: Must match color or drawing of the discard pile card.\n

\n Small Cards: Must be played together with a Big card. They have special powers!\n

\n \n

\n```\n\nAdd merge rule after small cards.\n\nNeed also add merge button in game screen exact. The game screen ends with mini-slots then

. We'll insert button before closing div. Ensure CSS positions it.\n\nLet's prepare CSS. Current #turn-indicator block is last in style before . We'll append merge styles after it.\n\nSearch:\n```\n #turn-indicator {\n position: absolute;\n left: 10px;\n top: 10px;\n color: white;\n font-size: 1.2rem;\n }\n \n\n```\nReplace:\n```\n #turn-indicator {\n position: absolute;\n left: 10px;\n top: 10px;\n color: white;\n font-size: 1.2rem;\n }\n\n .merge-btn {\n position: absolute;\n left: 10px;\n bottom: 10px;\n min-width: 80px;\n padding: 10px 16px;\n font-size: 1rem;\n z-index: 50;\n }\n\n .merge-btn.active {\n background: #ffd32a;\n color: #222;\n }\n\n #merge-info {\n background: rgba(0,0,0,0.85);\n color: white;\n z-index: 200;\n text-align: center;\n }\n\n .merge-info-content {\n background: #333;\n padding: 25px;\n border-radius: 15px;\n max-width: 90%;\n width: 320px;\n }\n\n .merge-info-content p {\n margin: 10px 0;\n line-height: 1.4;\n }\n \n\n```\n\nNow button insertion. Search:\n```\n

\n \n

\n \n\n \n```\nReplace:\n```\n

\n \n

\n\n \n \n\n \n```\n\nMerge overlay insertion. Search:\n```\n \n \n\n

\n```\nReplace:\n```\n \n \n\n \n

Merge Mode

Select two same-color BIG cards from your hand.

They combine into one card of the next color in the cycle:

Orange → Blue → Purple/Pink → Orange

This reduces your hand. Merging ends your turn.

\n \n

\n\n

\n```\n\nInfo rule insertion. Search:\n```\n

\n Small Cards: Must be played together with a Big card. They have special powers!\n

\n```\nReplace:\n```\n

\n Small Cards: Must be played together with a Big card. They have special powers!\n

\n Merge: Tap the Merge button to combine two same-color BIG cards into the next color: Orange → Blue → Purple/Pink → Orange.\n

\n```\n\nNow main.js blocks.\n\nGameState block exact as above. Replace.\n\ncreateCardElement block. Replace.\n\nhandleCardClick block. Replace.\n\napplyEffect anchor line replace.\n\nNeed verify after adding data-id, hidden opponent cards won't have dataset.id, but querySelector `.card[data-id]` only matches own visible. Fine.\n\nPotential issues:\n\n- In handleMergeSelect, when selecting a second card of same color, mergeCards calls exitMergeMode (which clears selected classes, instruction) then nextTurn (which calls updateUI). But mergeCards also calls nextTurn after showMessage. Since exitMergeMode clears instruction, nextTurn updates UI and instruction. Good.\n\n- When merge creates new card, new card id random. Good.\n\n- If no candidates for next color? cycle values all present. Good.\n\n- Merge button active class toggled. Good.\n\n- If player enters merge mode but has only one big card or none, selecting works but cannot merge. They can toggle off.\n\n- When merge mode active, the end-turn button might still be visible if smallCardQueue. Clicking it calls nextTurn and exits? It doesn't exit merge mode but current player changes; handleCardClick checks currentPlayer. The merge button remains active and selection remains. We should probably exit merge mode on turn change. Add exitMergeMode at start of nextTurn. Since nextTurn already resets some UI. Let's modify nextTurn to call exitMergeMode. Search nextTurn block. We can add `exitMergeMode();` at top. But we already replaced applyEffect anchor; we can also modify nextTurn separately. Let's do a separate SEARCH/REPLACE for nextTurn.\n\nSearch:\n```\nwindow.nextTurn = () => {\n gameState.smallCardQueue = null;\n gameState.currentPlayer = gameState.currentPlayer === 0 ? 1 : 0;\n```\nReplace:\n```\nwindow.nextTurn = () => {\n exitMergeMode();\n gameState.smallCardQueue = null;\n gameState.currentPlayer = gameState.currentPlayer === 0 ? 1 : 0;\n```\nThis ensures merge mode resets on turn change. But note in mergeCards, we call exitMergeMode before nextTurn; then nextTurn calls exit again, harmless.\n\n- Need ensure exitMergeMode doesn't error if elements missing.\n\n- In doBotTurn, no merge.\n\n- Potential bug: The game uses `gameState.hands[playerIdx][type]` in drawCard but initialized as objects. The comment says arrays. okay.\n\n- When `playBigCard` pushes to discardPile and sets smallCardQueue = true. In nextTurn sets null. Good.\n\n- In handleCardClick for small, canPlayFaceSpecial uses top. Good.\n\n- Merge button on mobile bottom left might overlap player hand if hand extends. Player hand is at bottom with min-height; merge button bottom 10px might cover cards. On mobile, hand has padding 10px and card height 120px, so hand height ~140px. Bottom 10px places button at very bottom, overlapping hand cards. Maybe position bottom: 120px? But mini-slots are below hand? Actually mini-slots are after hand in flow, so game screen flex column; player hand min-height 140, mini-slots height ~45. The bottom of screen is below mini slots. If position absolute bottom:10px, it will be at bottom of game-screen (which is flex container), possibly over mini slots. That's okay but might overlap. We can set bottom: 70px to sit above mini slots. But no precise. We can set bottom: 10px but z-index. Let's set bottom: 10px because mini slots are small and at bottom. Could overlap with player hand? The hand is above mini slots. With bottom 10px, button below hand? Let's calculate: game-screen height 100vh. opponent hand ~140, board center flex-grow, player hand ~140, mini slots ~50. Total non-center ~330. If viewport ~700, center ~370. Bottom 10px button is at bottom, after mini slots. Good. On small viewport ~600, still after mini slots? 140+140+50=330, center 270. Bottom 10px after mini slots. It might overlap mini slots a bit (mini slots margin-top 5). That's fine. The button is in bottom left.\n\n- Ensure merge info overlay display: it's a .screen with no active initially. We use classList active. Since .screen.active display:flex. Good.\n\n- Need maybe stop battle song? Not affected.\n\nNow implement edits.\n\nDouble-check main.js exact text for createCardElement:\n\nIn provided current_page main.js:\n```\nfunction createCardElement(card, playerIdx, hidden) {\n const el = document.createElement('div');\n el.className = `card ${card.type}`;\n if (!hidden) {\n el.style.backgroundImage = `url('${card.path}')`;\n el.onclick = () => handleCardClick(card, playerIdx);\n } else {\n el.style.backgroundColor = '#333';\n el.style.backgroundImage = 'none';\n }\n return el;\n}\n```\nAdd `el.dataset.id = card.id;` inside if (!hidden). Good.\n\nNow gameState exact:\n```\nlet gameState = {\n mode: 'bot',\n coins: 500,\n equippedMinis: [],\n currentPlayer: 0, // 0: Player 1, 1: Bot/Player 2\n hands: [[], []], // [bigs, smalls] for each player\n discardPile: [],\n turnLocked: false,\n smallCardQueue: null,\n protectionActive: [false, false],\n merchLocked: [false, false], // If true, can't play small cards\n statusTimeout: null,\n};\n```\nAdd mergeMode/mergeSelected before statusTimeout or after merchLocked.\n\nhandleCardClick exact:\n```\nfunction handleCardClick(card, playerIdx) {\n if (gameState.currentPlayer !== playerIdx) return;\n\n const top = gameState.discardPile[gameState.discardPile.length - 1];\n\n if (card.type === 'big') {\n // Can discard if color or drawing matches\n if (card.color === top.color || card.symbol === top.symbol) {\n playBigCard(card, playerIdx);\n } else {\n showMessage(\"Doesn't match top card!\");\n }\n } else {\n```\nWe will insert merge branch.\n\napplyEffect anchor exact line.\n\nLet's write all blocks. Then summary. Ensure description after changes includes actual modifications. Keep tweet length.\n\nLet's generate final with code blocks only.\n\nindex.html\n```index.html\n```\n\nindex.html\n```index.html\n```\n\nindex.html\n```index.html\n```\n\nindex.html\n```index.html\n```\n\nmain.js\n```main.js\n```\n\nmain.js\n```main.js\n```\n\nmain.js\n```main.js\n```\n\nmain.js\n```main.js\n```\n\nmain.js\n```main.js\n```\n\nSummary: Added a \"Merge\" button in the bottom-left of the game screen. Tapping it enters merge mode, shows an explanation popup, and lets you pick two same-color BIG cards to combine into one card of the next color in the Orange → Blue → Purple/Pink cycle. Merging ends your turn, and the rules also explain the feature in the Cards Info screen.","cursor","eyJpZCI6InZqM245eDF5dnIyeGtwbnJ4OWd2In0","token","included",[],"routes/browser/layout","actionData","errors"]

Cavino: card game