* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', sans-serif; }
body { background: linear-gradient(135deg, #1a1a2e, #0f3460); color: white; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.quiz-app { width: 90%; max-width: 700px; background: rgba(22, 33, 62, 0.9); padding: 20px; border-radius: 15px; box-shadow: 0 0 30px rgba(0,245,212,0.3); }
h1 { text-align: center; color: #00f5d4; margin-bottom: 20px; }
#musicBtn { width: 100%; padding: 10px; background: #e94560; border: none; border-radius: 8px; color: white; cursor: pointer; margin-bottom: 15px; }
.difficulty button { width: 100%; padding: 15px; margin: 10px 0; background: #0f3460; color: white; border: none; border-radius: 8px; font-size: 18px; cursor: pointer; transition: 0.3s; }
.difficulty button:hover { background: #00f5d4; color: #1a1a2e; transform: scale(1.05); }
.quiz-info { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 14px; }
.timer { background: #0f3460; padding: 10px; border-radius: 8px; margin-bottom: 15px; position: relative; overflow: hidden; }
.time-bar { position: absolute; top: 0; right: 0; height: 100%; background: #e94560; width: 100%; transition: width 1s linear; }
.question { margin-bottom: 20px; font-size: 22px; min-height: 60px; }
.answer { background: #0f3460; padding: 15px; margin: 10px 0; border-radius: 8px; cursor: pointer; transition: 0.3s; border: 2px solid transparent; }
.answer:hover { background: #16213e; }
.answer.selected { border-color: #00f5d4; }
.answer.correct { background: #2ecc71!important; border-color: #2ecc71!important; }
.answer.wrong { background: #e94560!important; border-color: #e94560!important; }
.submit-btn { width: 100%; padding: 15px; background: #00f5d4; color: #1a1a2e; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 15px; }
.bullets { display: flex; gap: 5px; justify-content: center; margin-top: 15px; }
.bullets span { width: 20px; height: 20px; border-radius: 50%; background: #0f3460; transition: 0.3s; }
.bullets span.on { background: #00f5d4; transform: scale(1.2); }
.result-screen { text-align: center; }
#restartBtn { padding: 15px 30px; background: #00f5d4; border: none; border-radius: 8px; font-size: 18px; cursor: pointer; margin-top: 20px; }