.ha-board {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: #eef2f7;
    border-radius: 16px;
    box-shadow: 0 12px 32px var(--shadow);
    border: 1px solid var(--light-quaternary);
}

.ha-hit {
    position: absolute;
    cursor: pointer;
    border-radius: 6px;
    z-index: 3;
}
.ha-hit:hover { background: rgba(37, 99, 235, 0.08); }

.ha-bridge {
    position: absolute;
    background: #2563eb;
    border-radius: 3px;
    z-index: 1;
    pointer-events: none;
}

.ha-island {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    border: 3px solid #1e293b;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: 'Orbitron', monospace;
    z-index: 4;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ha-island span { font-size: clamp(0.8rem, 3.5vw, 1.2rem); }

.ha-island.ha-done {
    border-color: #10b981;
    background: #10b981;
    color: #fff;
}

.ha-island.ha-over {
    border-color: #ef4444;
    color: #ef4444;
}

.ha-hit.ha-shake { animation: ha-shake 0.32s ease; }
@keyframes ha-shake {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    25% { transform: translateY(-50%) translateX(-4px); }
    75% { transform: translateY(-50%) translateX(4px); }
}

@media (max-width: 480px) {
    .ha-board { max-width: 340px; }
}