@charset "UTF-8";
/* CSS Document */
:root {
    --rouge-mario: #e8100a;
    --bleu-mario: #1e88e5;
    --or-magique: #fdd835;
}

body {
    margin: 0;
    font-family: 'Trebuchet MS', sans-serif;
    background: url("assets/mario-bg-3.gif") center / cover no-repeat;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-container {
    position: relative;
    background: rgba(255,255,255,0.7);
    padding: 24px;
    border-radius: 18px;
    width: min(92vw, 380px);
    box-shadow: 0 15px 30px rgba(0,0,0,.3);
    text-align: center;
}

.sound-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    background: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

h1 { font-family: "Retro Mario"; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--rouge-mario); }
.story { font-weight: bold; margin-bottom: 15px; }
#level { font-weight: bold; color: var(--bleu-mario); margin-bottom: 10px; }

#pendu { position: relative; height: 80px; margin: 10px auto; }
#pendu div { display: none; position: absolute; background: #333; }
.tete { width: 28px; height: 28px; border-radius: 50%; top: 0; left: 56px; }
.corps { width: 6px; height: 50px; top: 28px; left: 67px; }
.bras.gauche { width: 35px; height: 6px; top: 40px; left: 35px; }
.bras.droit { width: 35px; height: 6px; top: 40px; left: 70px; }
.jambe.gauche { width: 35px; height: 6px; top: 80px; left: 35px; }
.jambe.droit { width: 35px; height: 6px; top: 80px; left: 70px; }

#mot { font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: 10px; margin: 20px 0; }

#indice { margin-bottom: 10px; }
#btnIndice { background: var(--bleu-mario); color: white; border: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
#texteIndice { margin-top: 8px; font-style: italic; display: none; }

#clavier { display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 6px; }
#clavier button { aspect-ratio: 1; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; background: #eee; }
#clavier button.correct { background: var(--or-magique); }
#clavier button.wrong { background: #444; color: white; }

#message { margin-top: 15px; font-size: 1.2rem; }

#animation { position: fixed; inset: 0; pointer-events: none; }
.etoile { position: absolute; font-size: 40px; animation: pop 1s ease-out forwards; }
@keyframes pop { from { transform: scale(0); opacity: 1; } to { transform: scale(3) rotate(360deg); opacity: 0; } }

@media (max-width: 480px) { .story { font-size: 0.9rem; } }