/* === Contenedor principal === */
#vm-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px;
    overscroll-behavior: contain; /* evita rebote dentro del contenedor */
    /* touch-action: none;  <-- quitado para no bloquear toda la página */
}

/* === Canvas del juego === */
#vm-canvas {
    border: 2px solid #04AAFF;
    background-color: black;
    margin-bottom: 20px;
    touch-action: none; /* evita scroll con el dedo en móviles sobre el canvas */
}
#vm-canvas:focus { outline: none; }

/* === Usuario === */
#vm-username {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    color: #04AAFF;
    margin-bottom: 10px;
}

/* === Botones === */
#vm-start, 
#vm-restart {
    background-color: #04AAFF;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    touch-action: manipulation; /* mejora respuesta táctil */
}
#vm-start:hover, 
#vm-restart:hover { background-color: #0294d4; }

/* === Leaderboard (tabla de puntajes) === */
#vm-scores table { margin: 0 auto; border-collapse: collapse; }
#vm-scores th, 
#vm-scores td {
    padding: 8px 12px;
    text-align: center;
    color: black;
}
#vm-scores th { font-weight: bold; font-size: 16px; }
#vm-scores td { font-size: 14px; }

/* === Controles móviles === */
.vm-grid {
    display: grid;
    grid-template-columns: 80px 80px 80px;
    grid-template-rows: 80px 80px;
    gap: 10px;
    margin-top: 20px;
    overscroll-behavior: contain; /* evita rebote dentro de la grid */
    /* ya no se pone touch-action:none aquí */
}
.vm-grid button {
    background-color: #04AAFF;
    color: white;
    border: none;
    font-size: 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    touch-action: manipulation; /* permite tap rápido sin delay */
}
.vm-grid button:active { background-color: #0294d4; }

.vm-grid .up    { grid-column: 2 / 3; grid-row: 1 / 2; }
.vm-grid .left  { grid-column: 1 / 2; grid-row: 2 / 3; }
.vm-grid .down  { grid-column: 2 / 3; grid-row: 2 / 3; }
.vm-grid .right { grid-column: 3 / 4; grid-row: 2 / 3; }