* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #fcf5f5;
font-family: Arial;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

/* =========================
   LOGO
   ========================= */
#logo {
position: fixed;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 160px;
}

/* =========================
   SCORE
   ========================= */
#scoreBox {
    position: fixed;
    top: 20px;
    left: 20px;
    background: #ffe600;
    border: 2px solid black;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}


#scoreLine {
    font-size: 16px;
}

/* =========================
   VIES
   ========================= */
#lives {
display: none;
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
text-align: left;
}

/* =========================
   CONTAINER
   ========================= */
#gameContainer {
width: 90%;
max-width: 700px;
background: #e9f7e6;
border: 2px solid black;
border-radius: 26px;
padding: 30px;
text-align: center;
animation: containerPop 0.6s ease;
}

/* =========================
   MENU
   ========================= */
#menu {
display: flex;
flex-direction: column;
gap: 3px;
animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
from {opacity:0; transform:translateY(20px);}
to {opacity:1; transform:translateY(0);}
}

.choiceRow {
display:flex;

justify-content:center;
gap:10px;
flex-wrap:wrap;
}

/* =========================
   BOUTONS
   ========================= */
.choiceBtn {
padding:12px;
border:2px solid black;
border-radius:12px;
background:white;
cursor:pointer;
transition: 0.2s;
}

.choiceBtn:hover {
transform: scale(1.05);
}

.choiceBtn.active {
background:#ffe600;
font-weight:bold;
}

/* =========================
   BLOCS DIFFICULTÉ (IMPORTANT)
   ========================= */
.difficultyBox {
display: none;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 8px;
}

.difficultyBox.active {
display: flex;
}

/* boutons difficulté */
.difficultyBox .choiceBtn {
background: #fff;
}

/* =========================
   GAME AREA
   ========================= */
#gameArea {
display:none;
}

/* =========================
   IMAGE
   ========================= */
#photo {
width:100%;
max-width:380px;
height:480px;
object-fit:cover;
border:2px solid black;
border-radius:16px;
margin:20px auto;
display:block;
}

/* =========================
   INPUT
   ========================= */
#answer {
width: 100%;
padding: 12px;
margin-top: 10px;
margin-bottom: 10px;
border: 2px solid black;
border-radius: 12px;
font-size: 16px;
outline: none;
background: white;
transition: 0.2s;
}

#answer:focus {
border-color: #2e2e2a;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

/* =========================
   RESULT
   ========================= */
#result {
min-height:40px;
font-weight:bold;
}

/* =========================
   BUTTONS GLOBAL
   ========================= */
button {
padding: 12px 16px;
border: 2px solid black;
border-radius: 12px;
background: #f7ed98;
cursor: pointer;
font-weight: bold;
margin-top: 8px;
transition: 0.2s;
}

button:hover {
transform: scale(1.05);
}



#nextBtn,
#validateBtn {
    min-width: 180px;
    height: 52px;
    font-size: 18px;
    font-weight: bold;
}

#buttonZone {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================
   ANIMATIONS PHOTO
   ========================= */
.winAnim {
animation: win 0.5s ease;
}

@keyframes win {
0% { transform: scale(1); }
40% { transform: scale(1.08); }
100% { transform: scale(1); }
}

.loseAnim {
animation: shakePhoto 0.4s ease;
}

@keyframes shakePhoto {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}

/* =========================
   SHAKE CADRE
   ========================= */
.containerShake {
animation: shakeContainer 0.45s ease;
}

@keyframes shakeContainer {
0% { transform: translateX(0); }
20% { transform: translateX(-12px); }
40% { transform: translateX(12px); }
60% { transform: translateX(-10px); }
80% { transform: translateX(10px); }
100% { transform: translateX(0); }
}


/* =========================
   DIFFICULTÉ DYNAMIQUE
========================= */

#difficultyBox {
    position: fixed;
    top: 20px;
    right: 20px;

    background: white;
    border: 2px solid black;
    border-radius: 12px;

    padding: 10px 16px;

    font-weight: bold;
    font-size: 16px;

    min-width: 140px;
    text-align: center;

    box-shadow:
        0 4px 10px rgba(0,0,0,0.08);
}

/* montée de niveau */

.levelUp {
    animation: levelUpAnim 0.8s ease;
}

@keyframes levelUpAnim {

    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.25);
        background: #b8ffc4;
    }

    100% {
        transform: scale(1);
        background: white;
    }
}

/* descente de niveau */

.levelDown {
    animation: levelDownAnim 0.8s ease;
}

@keyframes levelDownAnim {

    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.15);
        background: #ffbcbc;
    }

    100% {
        transform: scale(1);
        background: white;
    }
}


#difficultyBox {
    display: none;
}






#difficultyPreview {
    width: 120px;
    height: 120px;
    background: white;
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}


/* =========================
   NOM DE LA PERSONNE
========================= */

#nameReveal {
    width: fit-content;
    min-width: 280px;

    margin: 10px auto 15px auto;
    padding: 10px 18px;

    background: rgb(243, 241, 230);
    border: 2px solid black;
    border-radius: 12px;

    font-size: 20px;
    font-weight: bold;
    text-align: center;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.nameGood {
    color: #1f9d3a;
    border-color: #1f9d3a !important;
}

.nameBad {
    color: #d62828;
    border-color: #d62828 !important;
}


/* =========================
   BONUS VIE
   ========================= */
.lifeGain {
animation: pop 0.4s ease;
}

@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}

/* =========================
   APPARITION BLOCS DIFFICULTÉ
   ========================= */

.diff-block {
    display: none;
    padding: 12px;
    margin-top: 8px;
    border-radius: 16px;
    background: rgba(255,255,255,0.55);
    border: 2px solid rgba(0,0,0,0.08);
    animation: popIn 0.35s ease;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   APPARITION PHOTO
   ========================= */

.photoAppear {
    animation: photoAppear 0.45s ease;
}

@keyframes photoAppear {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================
   BONNE REPONSE
   ========================= */

.goodFlash {
    animation: goodFlash 0.6s ease;
}

@keyframes goodFlash {

    0% {
        background: #e9f7e6;
    }

    30% {
        background: #b8ffc4;
    }

    100% {
        background: #e9f7e6;
    }
}

/* =========================
   MAUVAISE REPONSE
   ========================= */

.badFlash {
    animation: badFlash 0.6s ease;
}

@keyframes badFlash {

    0% {
        background: #e9f7e6;
    }

    30% {
        background: #ffbcbc;
    }

    100% {
        background: #e9f7e6;
    }
}

/* =========================
   SCORE
   ========================= */

.scorePop {
    animation: scorePop 0.4s ease;
}

@keyframes scorePop {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

/* =========================
   BOUTON JOUER
   ========================= */

#playBtn {
    font-size: 18px;
    padding: 14px 26px;
}

/* =========================
   INPUT
   ========================= */

#answer {
    transition: all 0.25s ease;
}

#answer:focus {
    transform: scale(1.02);
}

/* =========================
   RESULTAT
   ========================= */

#result {
    min-height: 45px;
    margin-top: 10px;
    font-size: 18px;
}

/* =========================
   CARTE PRINCIPALE
   ========================= */

#gameContainer {
    box-shadow:
        0 12px 30px rgba(0,0,0,0.08),
        0 2px 8px rgba(0,0,0,0.06);
}



#shopButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;

    background: #ffe600;
    border: 2px solid black;
    padding: 12px 16px;
    border-radius: 12px;

    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
}

#shopPanel {
    position: fixed;
    right: -300px;
    bottom: 80px;

    width: 150px;
    background: white;
    border: 2px solid black;
    border-radius: 12px;

    padding: 15px;
    transition: right 0.3s ease;

    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
}

#shopPanel.open {
    right: 20px;
}

.shopBtn {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 8px;
}

/* =========================
   ARRIVÉE CADRE
   ========================= */
@keyframes containerPop {
0% {
opacity: 0;
transform: scale(0.85) translateY(25px);
filter: blur(2px);
}
60% {
opacity: 1;
transform: scale(1.02) translateY(0);
filter: blur(0px);
}
100% {
transform: scale(1);
}

}