body {
    display: flex;
    justify-content: center; /* centra il contenitore orizzontalmente */
    margin: 5px;
    min-height: 90vh;
    max-height: 90vh;
    background-color: #ffffff;
}

#cornice {
    display: flex;
    flex-direction: column; /* disposizione verticale */
    width: 100%;
    max-width: 600px;
    height: 90vh; /* occupa quasi tutta la finestra */
    background-color: hsl(0, 6%, 85%);
    border-radius: 10%;
    box-shadow: 5px 5px 20px hsla(0, 0%, 0%, 0.47);
    padding: 20px;
    box-sizing: border-box;
    justify-content: flex-start; /* lascia spazio tra immagine e pulsanti */
}

#immagine {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 70%; /* occupa il 60% dell'altezza di #cornice */
    padding: 10px;
    overflow: hidden; /* evita che l'immagine esca */
}

#lucio {
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    border-radius: 30px;
    box-shadow: 4px 4px 10px hsla(0, 0%, 0%, 0.47);
    object-fit: fill;
}

.pulsantiera {
    display: flex;
    gap: 10px;
    flex: 0 0 20%; /* occupa il 20% dell'altezza di #cornice */
}

.pulsantiera button {
    flex: 1;
    font-size: 2rem;
    text-align: center;
    border-radius: 25%;
    border: none;
    box-shadow: 4px 4px 10px hsla(0, 0%, 0%, 0.47);
}

#X { background-color: hsl(0, 100%, 50%); }
#X:hover { background-color: hsl(0, 100%, 60%); box-shadow: 6px 6px 30px hsla(0, 95%, 45%, 0.676); }
#X:active { background-color: hsl(0, 100%, 65%); }

#O { background-color: hsl(120, 100%, 25%); }
#O:hover { background-color: hsl(120, 100%, 35%); box-shadow: 15px 15px 30px hsla(104, 95%, 45%, 0.676); }
#O:active { background-color: hsl(120, 100%, 40%); }

#friggi { background-color: hsl(51, 100%, 50%); }
#friggi:hover { background-color: hsl(51, 100%, 60%); box-shadow: 15px 15px 30px hsla(51, 100%, 60%, 0.676); }
#friggi:active { background-color: hsl(51, 100%, 65%); }

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

.bounce {
    animation: bounce 2s infinite;
}

/* ✅ Responsive */
@media (max-width: 500px) {
    #immagine { flex: 0 0 70%; }
    .pulsantiera { flex: 0 0 15%; }
    .pulsantiera button { font-size: 1.5rem; }
}