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

body{
background:linear-gradient(135deg,#071c3d,#0b2d5c,#102a43);
min-height:100vh;
overflow-x:hidden;
display:flex;
justify-content:center;
align-items:center;
padding:30px;
}

.background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:
radial-gradient(circle at 20% 20%,rgba(0,229,255,.15),transparent 25%),
radial-gradient(circle at 80% 30%,rgba(0,255,170,.15),transparent 25%),
radial-gradient(circle at 50% 80%,rgba(255,255,255,.08),transparent 30%);
animation:bgMove 12s linear infinite;
z-index:-1;
}

@keyframes bgMove{
0%{transform:scale(1) rotate(0deg);}
50%{transform:scale(1.08) rotate(2deg);}
100%{transform:scale(1) rotate(0deg);}
}

.container{
width:100%;
max-width:900px;
text-align:center;
}

h1{
color:#fff;
font-size:42px;
text-shadow:0 0 20px #00e5ff;
margin-bottom:10px;
}

.subtitle{
color:#9fefff;
font-size:18px;
margin-bottom:25px;
}

.glass{
background:rgba(255,255,255,.12);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.25);
border-radius:25px;
padding:30px;
box-shadow:0 0 30px rgba(0,229,255,.35);
}

.top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.badge{
background:#00e5ff;
color:#000;
padding:10px 20px;
border-radius:30px;
font-weight:bold;
}

.timer{
background:#ff5252;
color:#fff;
padding:10px 20px;
border-radius:30px;
font-weight:bold;
}

.progress{
width:100%;
height:10px;
background:rgba(255,255,255,.2);
border-radius:20px;
margin:20px 0;
overflow:hidden;
}

#progressBar{
width:10%;
height:100%;
background:#00e5ff;
border-radius:20px;
transition:.4s;
}

#questionNumber{
color:#00e5ff;
margin:20px 0 10px;
}

#question{
color:#fff;
font-size:24px;
margin-bottom:25px;
line-height:1.5;
}

#answers{
display:grid;
grid-template-columns:1fr;
gap:15px;
}

.answer{
padding:16px;
font-size:18px;
border:none;
border-radius:15px;
cursor:pointer;
background:rgba(255,255,255,.15);
color:white;
transition:.3s;
}

.answer:hover{
background:#00e5ff;
color:#000;
transform:scale(1.03);
}

.buttons{
display:flex;
justify-content:center;
gap:15px;
margin-top:25px;
flex-wrap:wrap;
}

#startBtn,#nextBtn{
padding:14px 30px;
font-size:18px;
font-weight:bold;
border:none;
border-radius:35px;
cursor:pointer;
background:#00e5ff;
color:#000;
box-shadow:0 0 15px #00e5ff;
transition:.3s;
}

#startBtn:hover,#nextBtn:hover{
transform:translateY(-3px);
box-shadow:0 0 25px #00e5ff;
}

.scoreCard{
margin-top:25px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(15px);
border-radius:20px;
padding:20px;
box-shadow:0 0 20px rgba(0,229,255,.3);
}

.scoreCard h2{
color:#fff;
}

#score{
font-size:60px;
color:#00ff99;
margin-top:10px;
text-shadow:0 0 15px #00ff99;
}

@media(max-width:600px){

h1{
font-size:30px;
}

#question{
font-size:20px;
}

.top{
flex-direction:column;
gap:15px;
}

}
.chapters{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:20px 0;
}

.chapter-btn{
    padding:15px;
    border:none;
    border-radius:15px;
    background:#00d4ff;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.chapter-btn:hover{
    transform:scale(1.05);
    background:#0099ff;
}
/* ===== Chapter Buttons ===== */

.chapters{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin:20px 0 30px;
}

.chapter-btn{
    background:linear-gradient(135deg,#00d4ff,#0099ff);
    color:#fff;
    border:none;
    border-radius:18px;
    padding:18px 12px;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 8px 20px rgba(0,212,255,.35);
    min-height:110px;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.chapter-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 25px rgba(0,212,255,.5);
}

.chapter-btn:active{
    transform:scale(.96);
}

.chapter-btn.selected{
    background:linear-gradient(135deg,#00ff88,#00c853);
    box-shadow:0 0 25px rgba(0,255,136,.7);
}

@media(max-width:600px){
    .chapters{
        grid-template-columns:1fr;
    }

    .chapter-btn{
        min-height:80px;
        font-size:16px;
    }
}