.app{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding:20px}.background-gradient{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#ff6ec4 0%,#d946ef 25%,#a855f7 50%,#d946ef 75%,#ff6ec4 100%);background-size:400% 400%;animation:gradientShift 15s ease infinite;z-index:-2}.background-rays{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:200%;height:200%;background:repeating-conic-gradient(from 0deg,transparent 0deg 2deg,rgba(255,255,255,.03) 2deg 4deg);animation:rotate 30s linear infinite;z-index:-1}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.container{max-width:700px;width:100%;z-index:1}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:20px}.title{font-size:3.5rem;font-weight:900;text-transform:uppercase;letter-spacing:2px;text-shadow:4px 4px 0px rgba(0,0,0,.3),-2px -2px 0px rgba(255,255,255,.1);transform:rotate(-5deg);display:flex;flex-direction:column;line-height:.9}.title-quiz{color:#fff;background:linear-gradient(180deg,#fff 0%,#ffd6f0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title-time{color:#fff;font-style:italic;margin-left:20px}.loading{font-size:2rem;font-weight:700;color:#fff;text-align:center}@media (max-width: 600px){.title{font-size:2.5rem}}.quiz-card{animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.question-box{background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,182,243,.95) 100%);border:5px solid #fff;border-radius:25px;padding:40px 30px;margin-bottom:30px;box-shadow:0 10px 30px #0000004d,inset 0 2px 10px #ffffff80;min-height:150px;display:flex;align-items:center;justify-content:center}.question-text{font-size:1.4rem;font-weight:700;color:#4a0e4e;text-align:center;line-height:1.5}.answers-container{display:flex;flex-direction:column;gap:20px;margin-bottom:20px}.answer-btn{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);border:4px solid rgba(255,255,255,.8);border-radius:20px;padding:20px 30px;font-size:1.1rem;font-weight:700;color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 20px #0000004d,inset 0 2px 5px #ffffff4d;text-align:left;position:relative;overflow:hidden}.answer-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.2);transform:translate(-50%,-50%);transition:width .6s,height .6s}.answer-btn:hover:not(:disabled):before{width:300px;height:300px}.answer-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 25px #0006,inset 0 2px 5px #ffffff4d}.answer-btn:active:not(:disabled){transform:translateY(-1px)}.answer-btn:disabled{cursor:not-allowed}.answer-btn.correct{background:linear-gradient(135deg,#10b981 0%,#34d399 100%);border-color:#6ee7b7;animation:pulse .5s ease}.answer-btn.incorrect{background:linear-gradient(135deg,#ef4444 0%,#f87171 100%);border-color:#fca5a5;animation:shake .5s ease}.answer-btn.correct-answer{background:linear-gradient(135deg,#10b981 0%,#34d399 100%);border-color:#6ee7b7}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.explanation-box{border-radius:20px;padding:25px;margin-top:20px;border:4px solid rgba(255,255,255,.8);animation:fadeIn .5s ease}.explanation-box.correct-bg{background:linear-gradient(135deg,rgba(16,185,129,.9) 0%,rgba(52,211,153,.9) 100%)}.explanation-box.incorrect-bg{background:linear-gradient(135deg,rgba(239,68,68,.9) 0%,rgba(248,113,113,.9) 100%)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.result-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.result-icon{font-size:2rem;font-weight:900}.result-text{font-size:1.3rem;font-weight:900;text-transform:uppercase}.explanation-text{font-size:1rem;line-height:1.6;margin-bottom:20px;color:#fff}.next-btn{background:white;color:#7c3aed;border:none;border-radius:15px;padding:15px 30px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 15px #0003;width:100%}.next-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000004d}.next-btn:active{transform:translateY(0)}@media (max-width: 600px){.question-text{font-size:1.1rem}.answer-btn{padding:15px 20px;font-size:1rem}}.scoreboard{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.score-display{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);border:4px solid #a3e635;border-radius:15px;padding:10px 25px;box-shadow:0 5px 15px #0006,inset 0 2px 5px #a3e6354d;min-width:100px;text-align:center}.score-number{font-size:2.5rem;font-weight:900;color:#a3e635;text-shadow:0 0 10px rgba(163,230,53,.5);font-family:Courier New,monospace}.question-counter{font-size:.9rem;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}@media (max-width: 600px){.score-number{font-size:2rem}}.result-modal{animation:modalSlideIn .6s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.8) translateY(50px)}to{opacity:1;transform:scale(1) translateY(0)}}.result-content{background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,182,243,.95) 100%);border:6px solid #fff;border-radius:30px;padding:50px 40px;box-shadow:0 20px 60px #0006,inset 0 2px 10px #ffffff80;text-align:center}.result-title{font-size:2.5rem;font-weight:900;color:#4a0e4e;margin-bottom:30px;text-transform:uppercase;text-shadow:2px 2px 0px rgba(255,255,255,.5)}.final-score{margin:30px 0;display:flex;justify-content:center}.score-circle{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);border:6px solid white;border-radius:50%;width:200px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 30px #0000004d,inset 0 5px 15px #fff3;animation:scoreReveal .8s ease-out .3s both}@keyframes scoreReveal{0%{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0)}}.score-value{font-size:4rem;font-weight:900;color:#fff;text-shadow:3px 3px 6px rgba(0,0,0,.3);line-height:1}.score-max{font-size:1.5rem;font-weight:700;color:#ffffffe6}.percentage-bar{background:rgba(124,58,237,.2);border:3px solid #7c3aed;border-radius:20px;height:40px;margin:30px 0;overflow:hidden;position:relative}.percentage-fill{background:linear-gradient(90deg,#10b981 0%,#34d399 100%);height:100%;display:flex;align-items:center;justify-content:center;transition:width 1s ease-out .5s;border-radius:17px;position:relative}.percentage-text{font-size:1.2rem;font-weight:900;color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,.3);position:absolute;left:50%;transform:translate(-50%)}.result-message{font-size:1.4rem;font-weight:700;color:#4a0e4e;margin:25px 0;line-height:1.5}.restart-btn{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);border:4px solid white;border-radius:20px;padding:18px 40px;font-size:1.3rem;font-weight:900;color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 20px #0000004d;text-transform:uppercase;margin-top:20px}.restart-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 30px #0006}.restart-btn:active{transform:translateY(-1px) scale(1.02)}@media (max-width: 600px){.result-content{padding:30px 20px}.result-title{font-size:1.8rem}.score-circle{width:150px;height:150px}.score-value{font-size:3rem}.score-max{font-size:1.2rem}.result-message{font-size:1.1rem}.restart-btn{font-size:1.1rem;padding:15px 30px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:#000;color:#fff;overflow-x:hidden}#root{min-height:100vh;display:flex;align-items:center;justify-content:center}