{/* Clean Header */}

🧩

GROUP NAME CROSSWORD

{solvedCount}/{(allWords || []).length} Words Solved

{/* Active Clue Banner + Hint Button */}

#{activeWord.num} {activeWord.dir} ({(activeWord.answer || []).length} LETTERS)

{activeWord.clue}

{/* COMPACT 7x7 CROSSWORD BOARD */}

{Array.from({ length: 49 }).map((_, idx) => { const r = Math.floor(idx / 7); const c = idx % 7; const k = `${r}_${c}`; const cell = cellMap[k]; if (!cell) { return (

); } const inActiveWord = (cell.wordIds || []).includes(activeWord.id); const isCursor = currentTarget && currentTarget.r === r && currentTarget.c === c; const val = gridLetters[k] || ''; const isCorrect = val && val === cell.expected; return ( ); })}

{/* COMPACT QWERTY KEYBOARD — Safely above 112px bottom overlay! */}

{['QWERTYUIOP', 'ASDFGHJKL', 'ZXCVBNM'].map((rowStr, rIdx) => (

{rIdx === 2 && ( )} {rowStr.split('').map((ch) => ( ))} {rIdx === 2 && ( )}

))}

{/* Add Name Modal */} {showAddModal && (

setShowAddModal(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(3, 7, 18, 0.85)', zIndex: 70, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '18px', }} >

e.stopPropagation()} style={{ width: '100%', maxWidth: '340px', background: '#1E293B', borderRadius: '20px', padding: '16px', display: 'flex', flexDirection: 'column', gap: '10px', }} >

🧩 Add Your Name to the Board

setCustomName(e.target.value)} placeholder="First Name (up to 7 letters)" style={{ padding: '10px', borderRadius: '10px', border: '1px solid #475569', background: '#0F172A', color: '#FFF', fontSize: '13px', }} /> setCustomClue(e.target.value)} placeholder="Fun clue about you..." style={{ padding: '10px', borderRadius: '10px', border: '1px solid #475569', background: '#0F172A', color: '#FFF', fontSize: '13px', }} />

)}

); }