/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Pixelify Sans", sans-serif; /* estilo arcade */
}

/* FONDO GLOBAL */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(circle at top, #0f2027, #203a43, #2c5364);
    color: #fff;
}

/* CONTENEDOR PRINCIPAL */
.wrapper {
    width: 70vmin;
    height: 80vmin;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: #1a1d23;
    border: 2px solid #00ff66;
    box-shadow: 0 0 25px rgba(0, 255, 102, 0.6);
}

/* PUNTUACIONES */
.game-details {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #00ffcc;
    background: #111;
    border: 2px solid #00ff66;
    border-bottom: 1px solid #00ff66;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* TEXTO CON BRILLO SUAVE */
.score, 
.high-score {
    color: #00ffcc;
    text-shadow: 0 0 3px #00ffcc;
}


/* TABLERO */
.play-board {
    flex: 1;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: repeat(30, 1fr) / repeat(30, 1fr);
    background: #0d1013;
    border: 2px solid #00ff66;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* COMIDA */
.play-board .food {
    background: #ff003d;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff003d, 0 0 20px #ff003d;
}

/* SERPIENTE */
.play-board .head {
    background: #00e1ff;
    border-radius: 4px;
    box-shadow: 0 0 10px #00e1ff, 0 0 20px #00e1ff;
}