/* ===========================
   ACTION OU VÉRITÉ
   style.css
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    min-height:100vh;
    background:linear-gradient(135deg,#4f46e5,#7c3aed,#ec4899);
    background-size:400% 400%;
    animation:gradient 12s ease infinite;
    color:white;
}

@keyframes gradient{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

.screen{
    display:none;
    width:100%;
    min-height:100vh;
    padding:40px 20px;
}

.screen.active{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

h1{
    font-size:3rem;
    margin-bottom:30px;
    text-align:center;
}

h2{
    margin:20px 0 10px;
}

.card{

    width:100%;
    max-width:650px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:25px;

    padding:35px;

    box-shadow:0 10px 35px rgba(0,0,0,.25);

}

select,
input{

    width:100%;

    padding:14px;

    margin-top:10px;

    margin-bottom:10px;

    border:none;

    border-radius:12px;

    font-size:16px;

}

input:focus,
select:focus{

    outline:3px solid white;

}

button{

    cursor:pointer;

    border:none;

    border-radius:14px;

    padding:16px;

    font-size:18px;

    font-weight:bold;

    transition:.25s;

}

button:hover{

    transform:scale(1.04);

}

#startGame{

    width:100%;

    margin-top:25px;

    background:#10b981;

    color:white;

}

#startGame:hover{

    background:#059669;

}

#playerInputs{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:10px;

}

/* =====================
      GAME
===================== */

#game{

    display:none;

    flex-direction:column;

    align-items:center;

    padding:25px;

}

.topBar{

    width:100%;

    max-width:900px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    font-size:20px;

    font-weight:bold;

}

.gameCard{

    width:100%;

    max-width:900px;

    background:rgba(255,255,255,.13);

    backdrop-filter:blur(14px);

    border-radius:25px;

    padding:35px;

    text-align:center;

    box-shadow:0 10px 35px rgba(0,0,0,.3);

}

#playerName{

    font-size:2rem;

    margin-bottom:10px;

}

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:35px 0;

    flex-wrap:wrap;

}

.action{

    background:#2563eb;

    color:white;

    width:220px;

}

.action:hover{

    background:#1d4ed8;

}

.truth{

    background:#ec4899;

    color:white;

    width:220px;

}

.truth:hover{

    background:#db2777;

}

#challengeBox{

    background:white;

    color:#111827;

    border-radius:20px;

    padding:30px;

    min-height:170px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

}

#challengeText{

    font-size:24px;

    line-height:1.6;

    font-weight:bold;

}

#finishTurn{

    width:100%;

    background:#22c55e;

    color:white;

}

#finishTurn:hover{

    background:#16a34a;

}

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

.scoreBoard{

    width:100%;

    max-width:900px;

    margin-top:30px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    border-radius:20px;

    padding:25px;

}

.scoreBoard h2{

    text-align:center;

    margin-bottom:20px;

}

#scoreList{

    list-style:none;

}

#scoreList li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(255,255,255,.08);

    margin:8px 0;

    padding:15px;

    border-radius:12px;

    font-size:18px;

}

/* =====================
      END GAME
===================== */

#endGame{

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

}

#ranking{

    margin:25px 0;

    font-size:22px;

    line-height:2;

}

#endGame button{

    width:100%;

    background:#f59e0b;

    color:white;

}

#endGame button:hover{

    background:#d97706;

}

/* =====================
      MOBILE
===================== */

@media(max-width:768px){

h1{

    font-size:2.2rem;

}

.gameCard{

    padding:20px;

}

#challengeText{

    font-size:20px;

}

.buttons{

    flex-direction:column;

}

.action,
.truth{

    width:100%;

}

.topBar{

    flex-direction:column;

    gap:10px;

    text-align:center;

}

#scoreList li{

    font-size:16px;

}

button{

    font-size:16px;

}

}
.back-button{

    background:#ef4444;

    color:white;

    padding:10px 20px;

    font-size:16px;

}

.back-button:hover{

    background:#dc2626;

}