@tailwind base;@tailwind components;@tailwind utilities;body{font-family:Arial,sans-serif;background-size:cover;color:#fff;margin:0;overflow:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;justify-content:center;align-items:center;min-height:100vh;position:fixed;top:0;left:0;right:0;bottom:0;transform:scale(1);transition:transform .3s ease}#app{max-width:600px;padding:20px;background:#000c;border-radius:10px;box-shadow:0 8px 20px #00000080;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}h1{font-size:2rem;margin-bottom:20px;color:#ff6b6b}#question{font-size:1.2rem;margin-bottom:20px}#answers{display:flex;flex-direction:column;align-items:center}#answers button{margin:5px;padding:10px 20px;background:#ff6b6b;color:#fff;border:none;cursor:pointer;border-radius:5px;transition:background .3s}#answers button:hover{background:#ff3b3b}@media (max-width: 48rem),(max-height: 30rem){body{transform:scale(.8)}}@media (max-width: 30rem),(max-height: 20rem){body{transform:scale(.6)}}@media (max-width: 25rem),(max-height: 18rem){body{transform:scale(.6)}}@media (max-width: 20rem),(max-height: 15rem){body{transform:scale(.5)}}@media (max-width: 10rem),(max-height: 8rem){body{transform:scale(.45)}}@media (max-width: 8rem),(max-height: 6rem){body{transform:scale(.4)}}@media (max-width: 6rem),(max-height: 5rem){body{transform:scale(.35)}}@media (max-width: 5rem),(max-height: 4rem){body{transform:scale(.3)}}@media (max-width: 4rem),(max-height: 3rem){body{transform:scale(.25)}}@media (max-height: 460px){body{transform:scale(.5)}}@media (max-height: 300px){body{transform:scale(.4)}}@media (max-height: 240px){body{transform:scale(.35)}}@media (max-height: 200px){body{transform:scale(.3)}}@media (max-height: 150px){body{transform:scale(.25)}}@media (max-height: 120px){body{transform:scale(.2)}}@media (max-width: 4rem),(max-height: 2rem){body{transform:scale(.2)}}@media (max-width: 2rem),(max-height: 1.5rem){body{transform:scale(.15)}}@media (max-width: 1.5rem),(max-height: 1rem){body{transform:scale(.1)}}body{font-family:Quicksand,sans-serif;background:url(../versus.webp) no-repeat center center fixed;background-size:cover;color:#fff;margin:0;overflow:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;touch-action:none;display:flex;justify-content:center;align-items:center;min-height:100vh;position:fixed;top:0;left:0;right:0;bottom:0;transform:scale(1);transition:transform .3s ease}#app{max-width:600px;padding:20px;background:linear-gradient(135deg,#2c3e50,#34495e);border-radius:10px;box-shadow:0 8px 20px #2c3e50cc,0 4px 15px #ffffff1a;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid #ecf0f1}h1{font-size:2.5rem;margin-bottom:1rem;color:#ecf0f1;text-transform:uppercase;font-family:Roboto,sans-serif;letter-spacing:1px;text-shadow:0 2px 5px rgba(255,255,255,.3),0 0 10px rgba(44,62,80,.6)}h2{font-size:1rem;margin-bottom:1rem;color:#ecf0f1;text-transform:uppercase;font-family:Roboto,sans-serif;letter-spacing:1px;text-shadow:0 2px 5px rgba(255,255,255,.3),0 0 10px rgba(44,62,80,.6)}#quiz-container{margin:20px 0}#question{font-size:1.5rem;margin-bottom:10px;color:#ecf0f1;font-family:Roboto,sans-serif;text-shadow:0 2px 5px rgba(255,255,255,.3);border-bottom:2px solid #ecf0f1;padding-bottom:10px}#answers{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-content:center;align-items:center;margin-top:20px}#answers button{margin:5px;padding:10px 20px;background:#0707d3;color:#fff;border:none;cursor:pointer;border-radius:5px;transition:background .3s;font-size:1.5rem}#answers button:hover{background:#696969}#next-button{margin-top:20px;padding:10px 20px;background:#44c767;color:#fff;border:none;cursor:pointer;border-radius:5px;transition:background .3s;display:block;margin-left:auto;margin-right:auto}#next-button:hover{background:#36a256}#restart-button{margin-top:20px;padding:10px 20px;background:#44c767;color:#fff;border:none;cursor:pointer;border-radius:5px;transition:background .3s;display:block;margin-left:auto;margin-right:auto}#restart-button:hover{background:#36a256}#score{margin-top:20px;font-size:1.2rem;color:#fff}#score span{font-weight:700;color:#ff6b6b}#answers button.selected{background:#9b59b6}#answers button.selected:hover{background:#8e44ad}.answer-button.correct{animation:blink-green 1s infinite}@keyframes blink-green{0%,to{background-color:green;color:#fff}50%{background-color:#90ee90;color:#fff}}@media (max-width: 64rem),(max-height: 40rem){body{transform:scale(.9)}}@media (max-width: 48rem),(max-height: 30rem){body{transform:scale(.9)}}@media (max-width: 30rem),(max-height: 20rem){body{transform:scale(.8)}}@media (max-width: 25rem),(max-height: 18rem){body{transform:scale(.7)}}@media (max-width: 20rem),(max-height: 15rem){body{transform:scale(.6)}}@media (max-width: 15rem),(max-height: 10rem){body{transform:scale(.5)}}@media (max-width: 8rem),(max-height: 8rem){body{transform:scale(.5)}}@media (max-height: 530px){body{transform:scale(.7)}}@media (max-height: 390px){body{transform:scale(.6)}}@media (max-height: 360px){body{transform:scale(.5)}}#music-control{width:1rem;height:1rem;display:flex;justify-content:center;transform:translateY(-50%);background:radial-gradient(circle,#b71d1d,#7a0b0b);color:#fdd835;font-size:2rem;padding:15px;border-radius:50%;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease,background .3s ease;box-shadow:0 0 15px #fdd835b3,0 0 30px #b71d1d80}#music-control:hover{background:radial-gradient(circle,#fdd835,#b71d1d);color:#000;transform:scale(1.2) rotate(5deg);box-shadow:0 0 35px #fdd835,0 0 50px #b71d1dcc}.icon{display:flex;justify-content:center;align-items:center;width:100%;height:100%;text-shadow:0 0 15px #fdd835,0 0 30px #b71d1d;font-family:Marvel,sans-serif}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 15px #fdd83580,0 0 25px #b71d1d66}50%{transform:scale(1.1);box-shadow:0 0 25px #fdd835cc,0 0 40px #b71d1d99}}#music-control{animation:pulse 1.5s infinite}#hint-control{width:2.5rem;height:2.5rem;background:radial-gradient(circle,#2c3e50,#34495e);border-radius:50%;display:flex;justify-content:center;align-items:center;color:#ecf0f1;font-family:Roboto,sans-serif;font-size:1.5rem;cursor:pointer;box-shadow:0 0 10px #2c3e50b3,0 0 15px #34495e80;transition:transform .3s ease,box-shadow .3s ease,background .3s ease;animation:pulse 1.5s infinite}#hint-control:hover{background:radial-gradient(circle,#ecf0f1,#2c3e50);color:#2c3e50;transform:scale(1.15);box-shadow:0 0 20px #ecf0f1,0 0 30px #2c3e50cc}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{position:relative;background:linear-gradient(145deg,#2c3e50,#34495e);border:2px solid #ecf0f1;padding:2rem;border-radius:.75rem;max-width:500px;width:100%;text-align:center;box-shadow:0 0 15px #ecf0f1,0 0 25px #2c3e50cc;font-family:Roboto,sans-serif;color:#ecf0f1;animation:modalOpen .5s ease-out,pulse 1.5s infinite}@keyframes modalOpen{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 10px #ecf0f1,0 0 20px #2c3e5099}50%{transform:scale(1.05);box-shadow:0 0 15px #ecf0f1,0 0 30px #2c3e50cc}}.modal-close{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.5rem;color:#ecf0f1;cursor:pointer;transition:transform .3s,color .3s}.modal-close:hover{transform:rotate(90deg);color:#bdc3c7}.modal-content h2{font-size:1.8rem;font-weight:700;margin-bottom:1rem;text-transform:uppercase;text-shadow:0 0 10px #ecf0f1,0 0 20px rgba(44,62,80,.8)}.modal-content p{font-size:1.2rem;color:#bdc3c7;margin-bottom:1.5rem;line-height:1.5}.modal-actions{display:flex;gap:1rem;justify-content:center}.modal-button{padding:.5rem 1.5rem;border-radius:.375rem;border:2px solid #ecf0f1;font-size:1rem;font-family:Roboto,sans-serif;cursor:pointer;background:#34495e;color:#ecf0f1;transition:background-color .3s,color .3s,transform .3s;text-shadow:0 0 10px #ecf0f1,0 0 20px rgba(44,62,80,.8);animation:pulse 1.5s infinite}.modal-button.cancel{background-color:#34495e;color:#ecf0f1}.modal-button.cancel:hover{background-color:#2c3e50;color:#bdc3c7}.modal-button.confirm{background-color:#34495e;color:#ecf0f1}.modal-button.confirm:hover{background-color:#27ae60;color:#fff}