/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700;800&display=swap');

:root{

    --bg:#09070a;

    --card:#181317;

    --rose:#ff5c8a;

    --rose-dark:#a71d49;

    --gold:#ffd8a8;

    --white:#fff7f3;

}

/* ===========================
   RESET
=========================== */

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

body{

font-family:"Poppins",sans-serif;

background:var(--bg);

overflow-x:hidden;

color:var(--white);

}

/* ===========================
   ANIMATED BACKGROUND
=========================== */

#background{

position:fixed;

inset:0;

background:

radial-gradient(circle at 15% 20%,rgba(255,92,138,.18),transparent 30%),

radial-gradient(circle at 85% 80%,rgba(167,29,73,.18),transparent 35%),

radial-gradient(circle at 50% 50%,rgba(255,216,168,.05),transparent 60%),

linear-gradient(180deg,#09070a,#12090d);

z-index:-1;

animation:bgMove 20s ease-in-out infinite alternate;

}

@keyframes bgMove{

from{

transform:scale(1);

}

to{

transform:scale(1.1);

}

}

/* ===========================
   APP
=========================== */

#app{

    max-width:1100px;

    margin:auto;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

/* ===========================
   HEADER
=========================== */

header{

text-align:center;

margin-bottom:40px;

}

header h1{

font-family:"Playfair Display", serif;

font-size:72px;

font-weight:700;

letter-spacing:-1px;

color:white;

text-shadow:
    0 0 20px rgba(255,92,138,.35),
    0 0 50px rgba(255,92,138,.15);

}

header p{

margin-top:15px;

font-size:18px;

opacity:.8;

}

header span{

color:var(--gold);

font-weight:bold;

}

/* ===========================
   HOME
=========================== */

.home{

display:flex;

flex-direction:column;

align-items:center;

gap:38px;

}

/* ===========================
   BUTTONS
=========================== */

.menuButton{

width:520px;

height:85px;

font-size:32px;

border-radius:24px;

padding:22px;

font-weight:700;

border:none;

border-radius:18px;

cursor:pointer;

color:white;

background:linear-gradient(135deg,var(--rose),var(--rose-dark));

transition:.30s;

box-shadow:
0 0 25px rgba(255,92,138,.35);

}

.menuButton:hover{

transform:translateY(-8px) scale(1.04);

filter:brightness(1.08);

box-shadow:
0 15px 40px rgba(0,0,0,.45),

0 0 30px rgba(255,92,138,.18);

}

.menuButton:active{

transform:scale(.96);

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:700px){

header h1{

font-size:42px;

}

.menuButton{

width:100%;

font-size:22px;

}

}

/* ===== LOBBY ===== */

.lobby{
    max-width:700px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.playerInput input:focus{

border-color:var(--rose);

box-shadow:0 0 20px rgba(255,92,138,.4);

}

.playerList{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.playerCard{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 16px;

    min-height:60px;

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

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

    border-radius:16px;

    transition:.25s;

}

.playerCard:hover{
    transform:translateX(5px);
}

.deleteBtn{
    background:#ff4a4a;
    width:34px;
    height:34px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    color:white;
    font-size:18px;
    transition:.2s;

}

.startButton{
    margin-top:15px;
    background:linear-gradient(135deg,var(--rose),var(--rose-dark));
    font-size:24px;
}

.playerCount{
    opacity:.7;
    text-align:center;
}

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

.game{

display:flex;

flex-direction:column;

gap:30px;

}

.score{

text-align:center;

}

.progress{

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

    height:16px;

    margin:20px auto;

    background:#1b1b1b;

    border-radius:50px;

    overflow:hidden;

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

}

.progressFill{

    height:100%;

    width:0;

    background:linear-gradient(90deg,var(--rose),var(--gold));

    border-radius:50px;

    transition:width .4s ease;

    box-shadow:0 0 20px rgba(255,92,138,.45);

}

.difficultyGrid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:15px;

    margin-top:25px;
    

}

.difficulty{

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

    backdrop-filter:blur(12px);

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

    border-radius:18px;

    padding:18px;

    color:white;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    transition:.25s;

    min-height:150px;

    font-size:30px;

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

    backdrop-filter:blur(18px);

    overflow:hidden;

    position:relative;

}

.difficulty::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.06),
transparent
);

transform:translateX(-120%);

transition:.8s;

}

.difficulty:hover::before{

transform:translateX(120%);

}

.difficulty:hover{

    transform:translateY(-8px) scale(1.03);

    border-color:var(--rose);

    box-shadow:

    0 0 25px rgba(255,92,138,.45),

    0 0 60px rgba(255,92,138,.18);

}

.difficulty span{

    font-size:20px;

    font-weight:700;

}

.difficulty small{

opacity:.7;

}

/* ===== CURRENT PLAYER ===== */

.currentPlayer{

    text-align:center;

    margin-bottom:40px;

}

.currentPlayer h2{

    font-size:48px;

    color:var(--gold);

    text-shadow:0 0 20px rgba(255,216,168,.4);
}

.currentPlayer p{

    opacity:.7;

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:10px;

}

/* ===== CHALLENGE POPUP ===== */

.overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.7);

display:flex;

justify-content:center;

align-items:center;

backdrop-filter:blur(5px);

}

.challengeCard{

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

border:2px solid var(--rose);

border-radius:20px;

padding:40px;

width:90%;

max-width:500px;

text-align:center;

animation:popup .25s ease;

box-shadow:0 0 30px rgba(255,120,0,.4);

backdrop-filter:blur(18px);

box-shadow:

0 20px 40px rgba(0,0,0,.45),

0 0 25px rgba(255,92,138,.08);

}

.challengeCard p{

font-size:24px;

margin:30px 0;

}

.challengeButtons{

display:flex;

gap:20px;

justify-content:center;

margin-top:30px;

}

.challengeButtons button{

padding:15px 25px;

border:none;

border-radius:12px;

cursor:pointer;

font-size:18px;

font-weight:bold;

}

@keyframes popup{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

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

.gameSettings{

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

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

padding:20px;

border-radius:16px;

backdrop-filter:blur(18px);

box-shadow:

0 20px 40px rgba(0,0,0,.45),

0 0 25px rgba(255,92,138,.08);

}

.gameSettings h2{

margin-bottom:15px;

text-align:center;

}

.scoreOptions{

display:flex;

justify-content:space-around;

flex-wrap:wrap;

gap:15px;

}

.scoreOptions label{

cursor:pointer;

font-weight:600;

}

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

.gameLayout{

display:grid;

grid-template-columns:1fr 280px;

gap:30px;

align-items:start;

}

.sidebar{

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

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

border-radius:20px;

padding:25px;

backdrop-filter:blur(10px);

position:sticky;

top:20px;

backdrop-filter:blur(18px);

box-shadow:

0 20px 40px rgba(0,0,0,.45),

0 0 25px rgba(255,92,138,.08);

}

.sidebar h2{

text-align:center;

margin-bottom:20px;

}

.scoreCard{

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

padding:12px;

border-radius:15px;

margin-bottom:12px;

transition:.25s;

}

.activePlayer{

border:2px solid var(--rose);

box-shadow:0 0 25px rgba(255,92,138,.35);

}

.scoreHeader{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-weight:bold;

}

.miniProgress{

height:8px;

background:#222;

border-radius:20px;

overflow:hidden;

}

.miniProgressFill{

height:100%;

background:linear-gradient(90deg,#ff6b00,#ffd000);

}

@media(max-width:900px){

.gameLayout{

grid-template-columns:1fr;

}

.sidebar{

position:static;

}

}

/* ===== SETTINGS ===== */

.settingsGrid{

    width:100%;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));


    gap:24px;

}

.settingsBack{

    margin-top:35px;

    width:280px;

}

.difficultySettings{

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

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

    border-radius:26px;

    min-height:190px;

    width:100%;

    min-width:280px;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.35s;

    backdrop-filter:blur(18px);

}

.difficultySettings:hover{

    transform:

        translateY(-10px)

        scale(1.03);

    border-color:var(--rose);

    box-shadow:

        0 0 30px rgba(255,92,138,.35);

}

.difficultySettings h2{

    font-family:"Bodoni Moda",serif;

    font-size:36px;

    margin-bottom:12px;

}

.difficultySettings p{

margin-bottom:20px;

opacity:.7;

}

/* ===== EDITOR ===== */

.editor{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:20px;

}

.challengeItem{

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

padding:20px;

border-radius:15px;

display:flex;

flex-direction:column;

gap:15px;

backdrop-filter:blur(18px);

box-shadow:

0 20px 40px rgba(0,0,0,.45),

0 0 25px rgba(255,92,138,.08);

}

.challengeItem textarea{

width:100%;

min-height:90px;

background:#1a1a1a;

color:white;

border:none;

padding:15px;

border-radius:10px;

resize:vertical;

font-family:inherit;

font-size:16px;

}

.challengeItem label{

display:flex;

align-items:center;

gap:10px;

}

.challengeItem button{

background:#d63b3b;

border:none;

color:white;

padding:12px;

border-radius:10px;

cursor:pointer;

}

.phaseProgress{

    margin:25px 0;

}

.phaseBar{

    height:8px;

    background:#333;

    border-radius:20px;

    overflow:hidden;

}

.phaseFill{

    height:100%;

    width:0;

    background:linear-gradient(
        90deg,
        #6ee7b7,
        #f472b6,
        #ef4444
    );

    transition:width .5s;
}

.phaseIcons{

    margin-top:6px;

    display:flex;

    justify-content:space-between;

    font-size:26px;

}

.save-buttons{

    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:35px;

}

.save-btn{

    background:linear-gradient(135deg,var(--rose),var(--rose-dark));
    color:white;

    border:none;
    border-radius:12px;

    padding:14px 26px;

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

    cursor:pointer;

    transition:.25s;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

}

.save-btn:hover{

    transform:translateY(-3px) scale(1.03);

    box-shadow:0 12px 28px rgba(255,120,50,.45);

}

.save-btn:active{

    transform:scale(.97);

}

.main-btn{

    width:560px;

    height:92px;

    background:

    linear-gradient(

    180deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.03)

    );

    backdrop-filter:blur(18px);

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

    border-radius:24px;

    color:white;

    font-size:30px;

    font-weight:700;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    transition:.35s;

    box-shadow:

        0 20px 45px rgba(0,0,0,.45);

}

.main-btn:hover{

    background:

    linear-gradient(

    180deg,

    rgba(255,255,255,.12),

    rgba(255,255,255,.05)

    );

    transform:

        translateY(-8px)

        scale(1.03);

    border-color:

        rgba(255,92,138,.55);

    box-shadow:

        0 25px 60px rgba(0,0,0,.45),

        0 0 30px rgba(255,92,138,.2);

}

.main-btn:active{

    transform:scale(.97);

}

.home-buttons{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    margin-top:35px;

}

.save-buttons{

    display:flex;
    gap:20px;
    justify-content:center;
    margin-top:25px;

}

.menu-btn{

    position:fixed;

    top:22px;
    left:22px;

    padding:10px 18px;

    border:none;

    border-radius:14px;

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

    backdrop-filter:blur(18px);

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

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    z-index:1000;

}

.menu-btn:hover{

    transform:translateY(-3px);

    border-color:var(--rose);

    box-shadow:

        0 0 18px rgba(255,92,138,.25);

}

.timerBox{

    margin-top:20px;

    padding:12px;

    border-radius:12px;

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

    font-size:28px;

    font-weight:bold;

    text-align:center;

}

@keyframes popupIn {

    from{
        opacity:0;
        transform:translateY(20px) scale(.95);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

.challengeCard{

    animation:popupIn .35s ease;

}

.progressFill,
.phaseFill,
.miniProgressFill{

    transition:width .6s ease;

}

.activePlayer{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%,100%{
        box-shadow:0 0 0 rgba(255,140,0,0);
    }

    50%{
        box-shadow:0 0 20px rgba(255,92,138,.45);
    }

}

button{

    transition:.2s;

}

button:hover{

    transform:translateY(-3px);

}

button:active{

    transform:scale(.96);

}

/* ===========================
   HOME SCREEN
=========================== */

.home{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:28px;

    position:relative;

}

.home h1{

    font-family:"Bodoni Moda",serif;

    font-size:95px;

    font-weight:800;

    letter-spacing:-3px;

    line-height:.82;

    text-align:center;

    background:linear-gradient(

        180deg,

        #ffffff,

        #ffe5ee,

        #ffc5d7

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    color:transparent;

    text-shadow:

        0 0 40px rgba(255,92,138,.18);

}

.home h1{

    animation:logoFloat 6s ease-in-out infinite;

}

@keyframes logoFloat{

    0%,100%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-6px);

    }

}

.home .main-btn{

    opacity:0;

    transform:translateY(40px);

    animation:appear .8s forwards;

}

.home .main-btn:nth-child(2){

animation-delay:.25s;

}

.home .main-btn:nth-child(3){

animation-delay:.40s;

}

.home .main-btn:nth-child(4){

animation-delay:.55s;

}

.home .main-btn:nth-child(5){

animation-delay:.70s;

}

@keyframes appear{

    to{

        opacity:1;

        transform:none;

    }

}

/* ===========================
   LOBBY HERO
=========================== */

.lobbyHero{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-bottom:45px;
    margin-top:20px;

}

.heroIcon{

    font-size:54px;

    margin-bottom:12px;

    filter:drop-shadow(0 0 18px rgba(255,92,138,.35));

    animation:floatHeart 5s ease-in-out infinite;

}

.lobbyHero h1{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    font-family:"Bodoni Moda",serif;

    font-weight:700;

    line-height:1;

    margin:0;

}

.lobbyHero h1 span{

    font-family:"Poppins",sans-serif;

    font-size:20px;

    font-weight:600;

    letter-spacing:8px;

    color:var(--gold);

}

.lobbyHero h1{

    font-size:72px;

}

@keyframes floatHeart{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/* ===========================
   LOBBY REDESIGN
=========================== */

.lobby{

    width:100%;

    max-width:520px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.lobbyCard{

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

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

    border-radius:22px;

    backdrop-filter:blur(18px);

    padding:20px;

    min-height:auto;

    box-shadow:

        0 15px 35px rgba(0,0,0,.35);

}

.inputLabel{

    display:block;

    margin-bottom:15px;

    font-size:18px;

    font-weight:600;

    color:var(--gold);

}

.playerInput{

    display:flex;

    flex-direction:column;

    gap:14px;
    
    margin-top:8px;


}

.addPlayerBtn{

    width:100%;

    height:72px;

    font-size:24px;

}

.startGameBtn{

    width:100%;

    height:90px;

    font-size:36px;

    margin-top:12px;

    border-radius:20px;


}

.lobbyPage{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.lobbyCard h2{

    text-align:center;

    font-size:40px;

    margin-bottom:22px;

    font-family:"Bodoni Moda",serif;

    font-weight:700;

}

.inputLabel{

    display:block;

    text-align:center;

    margin-bottom:18px;

    font-family:"Bodoni Moda",serif;

    font-size:32px;

    color:white;

}

.playerInput input{

    width:100%;

    height:52px;

    padding:0 18px;

    border-radius:14px;

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

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

    color:white;

    font-size:17px;

}

.playerInput input::placeholder{

    color:rgba(255,255,255,.45);

}

.playerInput input:focus{

    border-color:var(--rose);

    box-shadow:

        0 0 18px rgba(255,92,138,.35);

}

.addPlayerBtn{

    margin-top:8px;

    height:54px;

    border-radius:18px;

    font-size:20px;

}

.playerList{

    display:flex;

    flex-direction:column;

    gap:10px;

    min-height:0;

}

.playerCount{

    margin-bottom:10px;

}

.playersCard{

    padding:1px;

}

.playersCard h2{

    font-size:30px;

    margin-bottom:10px;

}

.playersCard .playerCount{

    margin:0;

    opacity:.6;

    font-size:18px;

}

.playerInfo{

    display:flex;

    align-items:center;

    gap:12px;

}

.playerIcon{

    font-size:22px;

}

.playerCard h3{

    font-size:22px;

    font-weight:600;

    margin:0;

}

.gameContainer{

    width:100%;

    max-width:900px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.currentPlayerHero{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin:20px 0 35px;

    font-family:"Bodoni Moda",serif;

    font-size:52px;

    font-weight:700;

}

.currentPlayerHero span{

    font-size:48px;

}

.journey{

    width:100%;

    max-width:700px;

    margin-bottom:50px;

}


.journeyIcons span{

    position:absolute;

    transform:translateX(-50%);

    font-size:34px;

}

.progressFill{

    height:100%;

    background:linear-gradient(
        90deg,
        var(--rose),
        var(--gold)
    );

    border-radius:50px;

}

.journey p{

    text-align:center;

    margin-top:16px;

    font-size:24px;

    font-weight:600;

}

.journey{

    width:100%;

    max-width:720px;

    margin-bottom:55px;

}

.journeyLine{

    position:relative;

    height:70px;

}

.journeyLine::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    transform:translateY(-50%);

    height:12px;

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

    border-radius:30px;

}

.journeyLine .progressFill{

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    height:12px;

    background:linear-gradient(
        90deg,
        #ff5c8a,
        #ffd48d
    );

    border-radius:30px;

}

.journeyLine span{

    position:absolute;

    top:50%;

    transform:translate(-50%,-50%);

    width:54px;

    height:54px;

    border-radius:50%;

    background:#22181b;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    box-shadow:

        0 0 15px rgba(0,0,0,.45);

}

/* ===========================
   SETTINGS REDESIGN
=========================== */

.settingsPage{

    width:100%;

    max-width:1200px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.settingsHero{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-bottom:55px;

}

.settingsIcon{

    font-size:48px;

    margin-bottom:8px;

    filter:drop-shadow(
        0 0 12px
        rgba(255,92,138,.25)
    );

}

.settingsHero h1{

    font-family:"Bodoni Moda",serif;

    font-size:58px;

    margin:0;

}

.settingsHero p{

    margin-top:10px;

    opacity:.65;

    font-size:17px;

}

.settingsLevelIcon{

    font-size:42px;

    margin-bottom:12px;

}

.settingsCount{

    font-size:58px;

    font-weight:700;

    color:var(--gold);

    line-height:1;

}

.difficultySettings small{

    margin-top:8px;

    opacity:.65;

    font-size:18px;

    text-transform:uppercase;

    letter-spacing:2px;

}

/* ===========================
   ANIMATION D'APPARITION
=========================== */

.fadeUp{

    opacity:0;

    transform:translateY(35px);

    animation:fadeUp .6s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(35px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}