/* Container Principale della Console - Stile Bianco Panna / Avorio */
.retro-console-container {
    background: #fdfbf7; /* Bianco panna/avorio caldissimo */
    border: 6px solid #d4af37; /* Oro metallico per i bordi esterni */
    border-radius: 24px;
    padding: 24px;
    max-width: 500px;
    margin: 30px auto;
    font-family: 'Press Start 2P', monospace;
    box-shadow: 0px 12px 0px #b5942b, 0px 15px 25px rgba(0,0,0,0.1); /* Ombra oro scuro + morbida */
    color: #4a4a4a;
}

/* Lo Schermo - Cornice Argento e Sfondo Azzurro Sofisticato o Grigio-Verde LCD Elegante */
.retro-screen {
    background: #f0f4f8; /* Azzurrino chiarissimo/grigio LCD pulito */
    border: 6px solid #c0c0c0; /* Cornice Argento */
    border-radius: 12px;
    padding: 18px;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.08);
}

/* Titolo - Oro con ombra Azzurra (o viceversa) */
.retro-title {
    text-align: center;
    font-size: 18px;
    color: #d4af37; /* Oro */
    text-shadow: 2px 2px 0px #8bb2cb; /* Ombra azzurro polvere */
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* Classifica Scrollabile */
.leaderboard-container {
    max-height: 160px;
    overflow-y: auto;
    border: 3px solid #8bb2cb; /* Bordi azzurro polvere */
    background: #ffffff; /* Sfondo bianco pulito per contrasto */
    margin-bottom: 25px;
    padding: 8px;
    border-radius: 4px;
}

/* Personalizzazione Scrollbar in tema */
.leaderboard-container::-webkit-scrollbar {
    width: 8px;
}
.leaderboard-container::-webkit-scrollbar-track {
    background: #f0f4f8;
}
.leaderboard-container::-webkit-scrollbar-thumb {
    background: #8bb2cb;
    border: 2px solid #ffffff;
}

/* Tabella Classifica Elegante */
.retro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    color: #4a4a4a; /* Testo scuro leggibile */
}

.retro-table th, .retro-table td {
    padding: 10px 6px;
    text-align: left;
}

.retro-table th {
    color: #d4af37; /* Oro per i titoli delle colonne */
    border-bottom: 2px dashed #8bb2cb;
    font-size: 11px;
}

.retro-table td {
    border-bottom: 1px solid #f0f4f8;
}

/* Messaggio INSERT COIN / CHOOSE YOUR GAME */
.no-data {
    color: #a0a0a0;
    text-align: center;
    font-size: 9px;
}

.retro-prompt {
    text-align: center;
    font-size: 11px;
    color: #6a7b83; /* Grigio-azzurro discreto */
    margin-bottom: 18px;
    animation: blink 1.2s infinite;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Selezione Giochi / Card */
.game-icons-grid {
    display: flex;
    justify-content: space-around;
    gap: 15px;
}

.game-card {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border: 3px solid #8bb2cb; /* Azzurro Polvere */
    border-radius: 8px;
    padding: 12px;
    width: 45%;
    box-shadow: 0 4px 0px #7094ad;
    transition: all 0.1s ease;
}

.game-card:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0px #7094ad;
    border-color: #d4af37; /* Diventa oro al passaggio */
}

.game-label {
    font-size: 9px;
    color: #4a4a4a;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
}

/* Controlli inferiori (D-Pad e Bottoni) */
.console-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding: 0 15px;
    align-items: center;
}

/* D-Pad in Grigio Argento Opaco */
.d-pad {
    width: 55px;
    height: 55px;
    background: #c0c0c0;
    box-shadow: 0px 4px 0px #a8a8a8;
    clip-path: polygon(33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%, 33% 33%);
}

.action-buttons {
    display: flex;
    gap: 15px;
    transform: rotate(-10deg); /* Inclinazione tipica del Game Boy */
}

/* Bottoni di colore Azzurro Polvere (stesso azzurro della pagina) */
.btn-retro {
    background: #8bb2cb; /* Azzurro ripreso dal tuo header */
    border: 3px solid #6a7b83;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0px 4px 0px #5a7b91;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
}

.btn-b {
    background: #a2c4da; /* Una sfumatura leggermente diversa per spezzare */
    box-shadow: 0px 4px 0px #769cb4;
}