/* /minijuegos/juegos/pacman/pacman-style.css */

/* === 1. Reset Específico del Juego (Mantenido) === */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* === 2. Contenedor de Juego (Añadido) === */
/* Asegura que el canvas y los controles se centren en la plantilla juego.php */
#canvas-container { 
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
}

/* === 3. Canvas (Corregido) === */
#canvas {
    border: 2px solid black;
    display: block; /* Importante para centrar */
    margin: 20px auto; /* Centra el canvas dentro del contenedor principal */
    background-color: #000; /* Fondo negro para el juego */
}

/* === 4. Botones Globales de Pac-Man === */
button {
    /* ADVERTENCIA: Este selector 'button' puede afectar los botones de tu web */
    /* Se recomienda usar una clase específica si fuera necesario */
    width: 320px;
    height: 45px;
    border-radius: 0.15em;
    font-size: 24px;
    font-weight: 700;
    color: #FFFFEE; 
    background-color: #FF3010;
    box-shadow: inset 0 -0.5em 0 -0.35em rgba(0, 0, 0, 0.17);
    text-align: center;
    cursor: pointer;
    position: relative;
    margin: 5px; /* Añade margen para evitar que se peguen */
}

button:active {
    top: 0.1em;
}

.botonControles {
    width: 104px;
    height: 50px;
    border-radius: 0.15em;
    font-size: 24px;
    font-weight: 700;
    color: #101010;
    background-color: #909090;
    box-shadow: inset 0 -0.5em 0 -0.35em rgba(0, 0, 0, 0.17);
    text-align: center;
    cursor: pointer;
    position: relative;
}

.botonControles:active {
    top: 0.1em;
}