/* ============================================================
   Snake — Game Styles
   ============================================================ */

.game-container {
    position: relative;
    padding-top: var(--space-md);
}

#gameCanvas {
    background: var(--color-surface);
    border: 2px solid var(--color-surface-2);
    border-radius: var(--radius-lg);
    max-width: 95vw;
    max-height: calc(100dvh - 160px);
    touch-action: none;
}

/* ---- D-Pad (mobile) ---- */
.dpad {
    display: none; /* hidden on desktop */
    position: relative;
    width: 160px;
    height: 160px;
    margin-top: var(--space-md);
}

.dpad-btn {
    position: absolute;
    width: 48px;
    height: 48px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-surface-3);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.dpad-btn:active {
    background: var(--color-primary);
    color: var(--color-bg);
}

.dpad-btn svg {
    width: 20px;
    height: 20px;
}

.dpad-up    { top: 0;   left: 56px; }
.dpad-down  { bottom: 0; left: 56px; }
.dpad-left  { top: 56px; left: 0; }
.dpad-right { top: 56px; right: 0; }

/* Show d-pad on touch devices */
@media (pointer: coarse) {
    .dpad {
        display: block;
    }
}