body{
    background: radial-gradient(circle,#001f4d,#000814);
    color:white;
    font-family:Arial;
    margin:0;
    display:flex;
}

/* RULES SCREEN */
#rulesScreen{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:black;
    padding:40px 20px;
    overflow-y:auto;
}
#rulesScreen h1{
    text-align:center;
    margin-bottom:30px;
}
#rulesScreen ul{
    max-width:900px;
    width:100%;
    text-align:left;
    padding:30px 40px;
    background:#001f4d;
    border:3px solid gold;
    border-radius:15px;
    box-shadow:0 0 20px gold;
    line-height:1.7;
    animation:ruleGlow 3s infinite;
}
#rulesScreen > ul > li{
    margin-bottom:22px;
    font-size:18px;
}
#rulesScreen ul ul{
    margin-top:8px;
}
#rulesScreen ul ul li{
    font-size:16px;
    margin:6px 0;
    line-height:1.6;
}
#rulesScreen b{
    color:gold;
    font-size:19px;
}
#rulesScreen button{
    margin-top:30px;
    padding:12px 35px;
    font-size:18px;
    cursor:pointer;
}

/* LOGIN SCREEN */
#loginScreen{
    position:absolute;
    width:100%;
    height:100%;
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:black;
}
#loginScreen input, #loginScreen select{
    padding:10px;
    margin:5px;
    font-size:18px;
    border-radius:5px;
    border:none;
}
#loginScreen button{
    padding:10px 20px;
    margin-top:10px;
    font-size:18px;
    cursor:pointer;
}

/* GAME SCREEN */
#gameScreen{
    width:65%;
    padding:40px;
    display:none;
}
.topBar{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.playerName{
    font-size:20px;
    font-weight:bold;
    color:gold;
    background:#002f6c;
    padding:10px 20px;
    border-radius:10px;
    border:2px solid gold;
}
.timer{
    border:3px solid red;
    padding:10px 20px;
    font-size:22px;
    border-radius:10px;
}
#timeBarContainer{
    width:100%;
    background:gray;
    height:10px;
    margin-top:5px;
    border-radius:5px;
    overflow:hidden;
}
#timeBar{
    width:100%;
    height:100%;
    background:red;
    transition:width 1s linear;
}
.questionBox{
    background:#0b3d91;
    padding:25px;
    border-radius:10px;
    margin-top:20px;
}
.options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-top:20px;
}
.option{
    padding:15px;
    background:#002f6c;
    border:2px solid gold;
    color:white;
    border-radius:30px;
    cursor:pointer;
}
.option.selected{background:orange;color:black;}
.option.correct{background:green;}
.option.wrong{background:red;}
.buttonContainer{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:20px;
}
.buttonContainer button{
    padding:15px 35px;
    font-size:20px;
    font-weight:bold;
    border:none;
    border-radius:50px;
    cursor:pointer;
    color:white;
    background:linear-gradient(135deg,#ff9900,#ffcc00);
}

/* LADDER */
.ladder{
    width:25%;
    background:#111;
    padding:20px;
}
.ladder li{
    padding:8px;
    border-bottom:1px solid gray;
}
.ladder li.active{
    background:gold;
    color:black;
}

/* LIFELINES */
.lifelines button{
    background:none;
    border:none;
    cursor:pointer;
    margin-left:-15px;
}
.lifelines button img{
    width:60px;
    height:60px;
}
.lifelines button.used{
    opacity:0.4;
    cursor:not-allowed;
    transform: scale(0.85);
    transition: opacity 0.5s, transform 0.5s;
}

/* CONFETTI */
#confettiContainer{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
}

/* WINNING AMOUNT */
#winningAmount{
    margin-top:20px;
    font-size:20px;
    font-weight:bold;
}

/* POLL */
#pollChart div{
    height:30px;
    background: linear-gradient(90deg, #ff9900, #ffcc00);
    margin: 5px 0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    position: relative;
    transition: width 1s ease-out;
}
#pollChart div span{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 14px;
    pointer-events: none;
}

/* GLOW ANIMATION */
@keyframes glow{
0%{box-shadow:0 0 5px gold;}
50%{box-shadow:0 0 20px gold;}
100%{box-shadow:0 0 5px gold;}
}

/* RULES PANEL GLOW */
@keyframes ruleGlow{
0%{box-shadow:0 0 10px gold;}
50%{box-shadow:0 0 25px gold;}
100%{box-shadow:0 0 10px gold;}
}

/* END SCREEN */
#endScreen{
    position:absolute;
    width:100%;
    height:100%;
    background:black;
    color:white;
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:30px;
}
#endScreen button{
    margin-top:30px;
    padding:15px 40px;
    font-size:20px;
    cursor:pointer;
    border:none;
    border-radius:10px;
    background:gold;
}