@tailwind base;@tailwind components;@tailwind utilities;*{user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-khtml-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:Comic Sans MS,sans-serif;background:linear-gradient(135deg,#c9462f,#ad7015,#be4e0c);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:20px;box-shadow:0 10px 40px #00c85380;text-align:center;background-size:400% 400%;animation:gradientBG 10s ease infinite;color:#fff;margin:0;overflow:hidden;user-select:none;-khtml-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;-html-user-select:none;-moz-user-select:none;-ms-user-select:none;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}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#app{max-width:700px;padding:30px;background:#ffe4b54d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:20px;box-shadow:0 10px 40px #ffa50066;text-align:center}h1{font-size:2.8rem;margin-bottom:20px;background:linear-gradient(135deg,#ff8c00,#ff4500,red);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 4px 12px rgba(255,69,0,.9),0 0 10px rgba(255,140,0,.8);letter-spacing:4px;font-weight:700;animation:glow 1.5s infinite alternate}@keyframes glow{0%{text-shadow:0 4px 12px rgba(255,69,0,.8),0 0 10px rgba(255,140,0,.8)}to{text-shadow:0 6px 15px rgba(255,69,0,1),0 0 15px rgba(255,140,0,1)}}h2{font-size:1rem;margin-bottom:20px;color:#09080c;text-shadow:0 4px 12px rgba(255,69,0,.8),0 0 6px #fff;letter-spacing:3px}#question{font-size:1.8rem;margin-bottom:20px;color:#09080c;ext-shadow:0 4px 12px rgba(255,69,0,.8),0 0 6px #fff;font-weight:700}#quiz-container{margin:20px 0}#answers{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;justify-content:center;align-items:center;margin-top:20px}#answers button{padding:15px 25px;background:linear-gradient(135deg,#fc0,#f60);color:#fff;border:none;cursor:pointer;border-radius:15px;transition:transform .3s,box-shadow .3s,background .3s;font-size:1.3rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.5);box-shadow:0 5px 15px #0006}#answers button:hover{transform:scale(1.1);box-shadow:0 10px 25px #000000b3,0 0 10px #f39c12}#next-button,#restart-button{margin-top:20px;padding:15px 30px;background:linear-gradient(135deg,#00cec9,#74b9ff);color:#fff;border:none;cursor:pointer;border-radius:15px;transition:transform .3s,box-shadow .3s;font-size:1.3rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.5);box-shadow:0 4px 15px #00000080}#next-button:hover,#restart-button:hover{transform:scale(1.1);box-shadow:0 10px 25px #000000b3,0 0 10px #55efc4}#score{margin-top:20px;font-size:1.5rem;color:#ffeaa7;text-shadow:0 3px 6px rgba(0,0,0,.5),0 0 5px #fff}.answer-button.correct{animation:blink-yellow 1.5s infinite}@keyframes blink-yellow{0%,to{background-color:#f9ca24;color:#fff}50%{background-color:#f6e58d;color:#222}}#answers button[data-category=brand]{background:linear-gradient(135deg,#2980b9,#6dd5fa)}#answers button[data-category=food]{background:linear-gradient(135deg,#e67e22,#f39c12)}#answers button[data-category=drink]{background:linear-gradient(135deg,#2ecc71,#27ae60)}#answers button.selected{background:linear-gradient(135deg,#ff9ff3,#e84393);color:#fff}#answers button.selected:hover{transform:scale(1.1);box-shadow:0 8px 20px #000c,0 0 10px #e84393}@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:Kaushan Script,cursive;background:url(../versus.webp) no-repeat center center fixed;background-size:cover;color:#fff;margin:0;overflow:hidden;-webkit-touch-callout:none;-webkit-user-select:none;-html-user-select:none;-moz-user-select:none;-ms-user-select:none;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:30px;background:linear-gradient(145deg,#ff009d,#008cff);border-radius:20px;box-shadow:0 10px 30px #00000080,0 0 15px #ffa500cc;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:5px solid rgba(255,223,186,.9)}@media (max-width: 768px){#app{padding:20px;font-size:.9rem}h1{font-size:2rem}#answers button{font-size:1rem;padding:10px 15px}}@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:linear-gradient(145deg,#ff009d,#008cff);border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-family:Roboto,sans-serif;font-size:1.5rem;cursor:pointer;box-shadow:0 0 15px #ff6b81,0 0 25px #ff9ff3;transition:transform .3s ease,box-shadow .3s ease,background .3s ease;animation:pulse 1.5s infinite}#hint-control:hover{background:radial-gradient(circle,#ff6b81,#ff9ff3);color:#ffe4e1;transform:scale(1.15);box-shadow:0 0 20px #ffe4e1,0 0 30px #ff6b81}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{position:relative;background:linear-gradient(145deg,#ff9ff3,#f368e0);border:3px solid #ffe4e1;padding:2rem;border-radius:1rem;max-width:500px;width:100%;text-align:center;box-shadow:0 0 20px #ffe4e1,0 0 30px #ff6b81;font-family:Roboto,sans-serif;color:#ffe4e1;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 15px #ffe4e1,0 0 30px #ff6b81}50%{transform:scale(1.05);box-shadow:0 0 20px #ffe4e1,0 0 40px #f368e0}}.modal-close{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.8rem;color:#ffe4e1;cursor:pointer;transition:transform .3s,color .3s}.modal-close:hover{transform:rotate(90deg);color:#ff6b81}.modal-content h2{font-size:2rem;font-weight:700;margin-bottom:1rem;text-transform:uppercase;color:#ffe4e1;text-shadow:0 0 10px #ff6b81,0 0 20px #f368e0}.modal-content p{font-size:1.2rem;color:#ffe4e1;margin-bottom:1.5rem;line-height:1.6}.modal-actions{display:flex;gap:1rem;justify-content:center}.modal-button{padding:.5rem 1.5rem;border-radius:.5rem;border:2px solid #ffe4e1;font-size:1rem;font-family:Roboto,sans-serif;cursor:pointer;background:#ff6b81;color:#ffe4e1;transition:background-color .3s,color .3s,transform .3s;text-shadow:0 0 10px #ffe4e1,0 0 20px #ff9ff3}.modal-button.cancel{background-color:#f368e0;color:#ffe4e1}.modal-button.cancel:hover{background-color:#ff9ff3;color:#fff}.modal-button.confirm{background-color:#6c5ce7;color:#ffe4e1}.modal-button.confirm:hover{background-color:#00cec9;color:#fff}