` : ''; const card = CARDS[enc.avatar]; const portrait = card ? avatarHTML(enc.avatar, enc.name, 'encounter-portrait') : ''; const body = card ? `${card.atk}/${card.hp}${card.tribes?.length ? ` ${card.tribes.map(t => t[0] + t.slice(1).toLowerCase()).join(' ')}` : ''} · ` : ''; const faction = enc.packageName ? ` · ${escapeHTML(enc.packageName)}` : ''; return `${portrait}

${Run.NODE_TYPES[enc.type]?.icon || '⚔️'} ${escapeHTML(enc.name)}

${body}❤️ ${enc.hp} · 🂠 ${enc.deckSize}${faction}

${counter}${ruleListHTML(enc.rules)}`; } // Enemy portrait from its avatar card: the card face, cropped to the artwork. function avatarHTML(cardId, alt, cls = 'card-portrait') { return ``; } function escapeHTML(text) { return String(text).replace(/[&<>"']/g, ch => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[ch]); } // ---------- map ---------- let mapSelection = null; async function showMap() { if (!arenaRun) return; if (arenaRun.deck.length > Run.deckLimit(arenaRun.pacts)) await trimDeckToLimit(); soundtrack.start('draft'); arenaRun.screen = 'map'; mapScrolled = false; hideRunScreens(); renderMeta(); $('map-modal').classList.remove('hidden'); renderMap(); } function renderMap() { const run = arenaRun, map = run.map, open = Run.reachable(map, run.pos); $('map-title').textContent = `🗺️ Act ${run.act} of ${run.acts}`; $('map-stats').innerHTML = runStatsHTML(run); const boss = Run.bossNode(map).encounter, lanes = map.lanes || 3, q = questDef(); $('map-hint').textContent = q ? `🧭 ${q.name}${save.pathQuest?.done ? ' ✅' : ''}` : ''; const grid = $('map-grid'); grid.replaceChildren(); grid.style.gridTemplateColumns = `repeat(${lanes}, 1fr)`; if (!open.some(n => n.id === mapSelection)) mapSelection = null; for (let f = map.floors.length - 1; f >= 0; f--) { for (let lane = 0; lane < lanes; lane++) { const node = Run.nodeAt(map, f, lane); if (!node) { if (map.floors[f].length > 1) grid.appendChild(document.createElement('span')); continue; } const meta = Run.NODE_TYPES[node.type]; const b = document.createElement('button'); b.type = 'button'; b.className = `map-node ${node.type}`; b.dataset.node = node.id; const available = open.includes(node); if (available) b.classList.add('available'); if (node.done) b.classList.add('done'); if (run.pos && run.pos.floor === f && run.pos.lane === lane) b.classList.add('current'); if (mapSelection === node.id) b.classList.add('selected'); const label = node.type === 'fight' || node.type === 'elite' || node.type === 'boss' ? (node.encounter?.name || meta.label) : meta.label; const avatar = node.encounter?.avatar && CARDS[node.encounter.avatar]; if (avatar) b.classList.add('has-portrait'); b.innerHTML = avatar ? `${avatarHTML(node.encounter.avatar, node.encounter.name, 'map-portrait')}` : `${escapeHTML(node.type === 'boss' ? 'Boss' : meta.label)}`; b.setAttribute('aria-label', `${meta.label}${label !== meta.label ? ': ' + label : ''}, floor ${f + 1}${node.done ? ', visited' : available ? ', available' : ''}`); b.onclick = () => { mapSelection = node.id; renderMap(); }; grid.appendChild(b); } } renderMapDetail(open); requestAnimationFrame(() => { drawMapLines(); // Longer acts scroll: keep the next choices in view. const next = grid.querySelector('.map-node.available'); if (next && !mapScrolled) { next.scrollIntoView({ block: 'center', behavior: 'instant' }); mapScrolled = true; } }); } let mapScrolled = false; function renderMapDetail