*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
html, body{height:100%; width:100%; overflow:hidden; background:#000;}
body{display:flex; justify-content:center; align-items:center; background: radial-gradient(circle at center, #0a0a4a 0%, #000 100%);}

.container{width:100%; height:100%; max-width:900px; display:flex; flex-direction:column; padding:10px;}
.quiz-box{flex:1; background: linear-gradient(180deg, #1a1a6d 0%, #0d0d3b 100%); border: 4px solid #ffd700; border-radius: 25px; padding: 15px; box-shadow: 0 0 50px #ffd700aa; display:flex; flex-direction:column; position:relative; overflow-y:auto;}

.header{text-align:center; margin-bottom:8px; flex-shrink:0;}
.header h1{color:yellow;font-size:22px; letter-spacing:2px; text-shadow:0 0 10px #ffd700;}
.timer{width:70px; height:70px; border:4px solid #ffd700; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; color:#ffd700; margin:5px auto; background:radial-gradient(circle, #220000 0%, #000 100%); box-shadow:0 0 20px #ffd700;}

/* 21px FONT SIZE */
.question-box{
  background: linear-gradient(180deg, #001a66 0%, #000d33 100%);
  border:3px solid #00aaff;
  border-radius:20px;
  padding:15px;
  font-size:24px;
  margin:10px 0;
  min-height:80px;
  line-height:1.7;
  display:flex;
  align-items:center;
  color:#fff;
  font-weight:600;
  box-shadow: inset 0 0 20px #00aaff55;
  flex-shrink:0;
}
.options{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0;}
.option{
  background: linear-gradient(180deg, #002b80 0%, #001a4d 100%);
  border:2px solid #00aaff;
  border-radius:15px;
  padding:15px 12px;
  cursor:pointer;
  font-size:22px;
  font-weight:600;
  line-height:1.6;
  display:flex;
  align-items:center;
  color:#fff;
}
.option span{color:#ffd700; font-weight:900; margin-right:8px;}
.option.correct{background:linear-gradient(180deg, #00cc00 0%, #009900 100%)!important; border-color:#00ff00;}
.option.wrong{background:linear-gradient(180deg, #cc0000 0%, #990000 100%)!important; border-color:#ff0000;}

.bottom-bar{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding:12px 5px; background:rgba(0,0,0,0.4); border-radius:15px; flex-shrink:0; position:relative; z-index:10;}
.btn{background:linear-gradient(180deg, #ffd700 0%, #ffaa00 100%); color:#000; padding:10px 14px; border:none; border-radius:12px; font-weight:900; cursor:pointer; border:2px solid #fff; font-size:12px; min-width:70px;}
#fifty{font-size:12px;}
#talkBtn{width:68px;height:68px;border-radius:50%;border:2px solid #fff;background:radial-gradient(circle,#ff4444,#990000);color:#fff;font-weight:900;font-size:10px;cursor:pointer;line-height:1.1;box-shadow:0 0 15px #ff0000aa;flex-shrink:0;}
#prevBtn{background:linear-gradient(180deg, #888 0%, #555 100%); color:#fff;}
#nextBtn{background:linear-gradient(180deg, #ffd700 0%, #ffaa00 100%); color:#000;}

.top-btns{position:absolute; top:10px; right:10px; z-index:20;}
.top-btn{background:#000; color:#ffd700; border:2px solid #ffd700; padding:5px 8px; border-radius:8px; cursor:pointer; font-size:11px;}

.result-box{flex:1; background: linear-gradient(180deg, #1a1a6d 0%, #0d0d3b 100%); border: 4px solid #ffd700; border-radius: 25px; padding: 20px; box-shadow: 0 0 50px #ffd700aa; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; overflow-y:auto;}
.result-box h1{color:#ffd700; font-size:24px; margin-bottom:15px;}
.result-stats{width:100%; max-width:400px;}
.stat{background:#000; border:2px solid #00aaff; border-radius:12px; padding:10px 15px; margin:8px 0; display:flex; justify-content:space-between; font-size:16px;}
.stat span{color:#aaa;}.stat b{color:#fff;}

@media(max-width:600px){
.options{grid-template-columns:1fr;}
.question-box{font-size:21px;}
.option{font-size:21px;}
.btn{padding:8px 10px; font-size:11px; min-width:60px;}
#talkBtn{width:60px;height:60px;font-size:9px;}
}