JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Qubic Chess 8x8 - Final Fix</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #111;
            perspective: 1500px;
            font-family: 'Courier New', Courier, monospace;
            color: #ccc;
            user-select: none;
            touch-action: none;
        }

        #ui-layer {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 100;
            display: flex; flex-direction: column; justify-content: space-between;
            padding: 10px; box-sizing: border-box;
        }

        .top-ui { display: flex; flex-direction: column; align-items: center; gap: 10px; }

        #legend {
            background: rgba(20,20,20,0.9); border: 1px solid #444; padding: 6px 12px;
            border-radius: 4px; font-size: 0.75rem; display: flex; gap: 15px;
            pointer-events: auto; text-transform: uppercase;
        }
        .box { width: 10px; height: 10px; display: inline-block; }
        .box.active { border: 2px solid #fff; }
        .box.valid { border: 2px solid lime; background: rgba(0,255,0,0.2); }
        .box.select { border: 2px solid gold; background: gold; }

        #status-bar {
            background: rgba(20,20,20,0.95); padding: 15px 25px;
            border: 1px solid #555; border-radius: 6px; pointer-events: auto;
            text-align: center; min-width: 300px;
        }
        .hl-active { color: #fff; text-shadow: 0 0 5px #fff; font-weight: 800; }
        
        #controls { position: absolute; bottom: 30px; right: 20px; pointer-events: auto; }
        button.btn {
            background: #222; color: #eee; border: 1px solid #555;
            padding: 15px 25px;...