*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}.app{min-height:100vh;width:100%;display:flex;justify-content:center;align-items:center;background-image:url(/assets/background-YPd1BqRQ.png);background-size:cover;background-position:calc(50% + var(--px)) calc(50% + var(--py));background-repeat:no-repeat}.hud{position:absolute;top:20px;left:16px;right:16px;display:flex;align-items:center;gap:12px}.progress{flex:1;height:12px;background:#ffffff26;border-radius:999px;overflow:hidden;position:relative}.progress-fill{height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#3cf2e3,#7b6cff,#3cf2e3);background-size:200% 100%;transition:transform .45s cubic-bezier(.22,1,.36,1),background-position 1.2s linear;animation:progressGlow 2s linear infinite}.score{font-weight:700;color:#fff;font-size:16px}.card{width:min(92vw,420px);padding:24px 20px 20px;background:#0a0a28d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;color:#fff;display:flex;flex-direction:column}.card h1{font-size:clamp(18px,4.5vw,22px);line-height:1.3;margin:12px 0 20px;text-align:center}.card button{height:56px;margin-top:12px;border:none;border-radius:16px;font-size:18px;font-weight:600;color:#fff;background:linear-gradient(90deg,#2ef2ff,#6c5cff);box-shadow:0 6px 16px #00000059;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}.card button:active{transform:scale(.97);box-shadow:0 3px 8px #0006}.footer{margin-top:18px;text-align:center;font-size:14px;opacity:.75}button.correct{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff}button.wrong{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff}.card button.correct,.card button.wrong{animation:hit .25s ease}@keyframes hit{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes progressGlow{0%{background-position:100% 50%}to{background-position:200% 50%}}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:10}.confetti span{position:absolute;top:-10px;width:8px;height:14px;background:red;opacity:.9;animation:confettiFall 2.8s linear forwards}.confetti span:nth-child(3n){background:#2ef2ff}.confetti span:nth-child(3n+1){background:#6c5cff}.confetti span:nth-child(3n+2){background:#2ecc71}.confetti span{--x: 0;--i: 0}@keyframes confettiFall{0%{transform:translateY(0) rotate(0)}to{transform:translateY(110vh) rotate(720deg)}}.card{width:min(92vw,420px);padding:20px 16px;border-radius:20px;background:linear-gradient(180deg,#14102dd9,#0a081ed9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 40px #0006,inset 0 0 0 1px #ffffff14;color:#fff}.app:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,#0000,#00000080 70%,#000000d9);pointer-events:none}.app{--px: 0px;--py: 0px;background-position:calc(50% + var(--px)) calc(50% + var(--py))}.card{transform:scale(.96);opacity:0;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease}.card-animate{transform:scale(1);opacity:1}.app{padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}button{transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}button:active{transform:scale(.96)}button:not(:disabled):hover{box-shadow:0 6px 16px #00000040}.card h1{line-height:1.25;text-shadow:0 2px 6px rgba(0,0,0,.35)}.card p{line-height:1.4}.brand{margin-top:16px;text-align:center;font-size:13px;opacity:.6}.time{margin-top:6px;height:6px;background:#ffffff2e;border-radius:999px;overflow:hidden}.hud{position:fixed;top:12px;left:12px;right:12px;z-index:10}.time{margin-top:6px;height:6px;background:#ffffff40;border-radius:999px;overflow:hidden}.time-fill{height:100%;width:100%;background:linear-gradient(90deg,#f1c40f,#f39c12);transform-origin:left;transition:transform .2s linear}.time-fill.danger{background:linear-gradient(90deg,#e74c3c,#c0392b);animation:pulse .6s infinite alternate}@keyframes pulse{0%{opacity:1}to{opacity:.5}}.progress-fill.danger{background:linear-gradient(90deg,#e74c3c,#c0392b);animation:pulse .6s infinite alternate}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:#050819b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-card{width:100%;max-width:420px;max-height:85vh;background:linear-gradient(180deg,#1e2346f2,#0f1228f2);border-radius:24px;padding:24px;color:#fff;box-shadow:0 20px 60px #000000b3,inset 0 0 0 1px #ffffff0d;display:flex;flex-direction:column}.modal-card h2{text-align:center;margin-bottom:12px;font-size:22px;font-weight:700}.modal-content{flex:1;overflow-y:auto;padding-right:6px;margin-bottom:16px;line-height:1.6;font-size:15px;opacity:.95;-webkit-overflow-scrolling:touch}.modal-content p{margin-bottom:12px}.modal-card button{margin-top:auto;padding:14px 0;border-radius:14px;background:linear-gradient(90deg,#4facfe,#7b6cf6);color:#fff;font-size:16px;font-weight:600;border:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.modal-card button:active{transform:scale(.97)}.modal-card button:hover{box-shadow:0 8px 20px #4facfe66}.menu-btn{width:100%;padding:14px 0;margin-top:12px;border-radius:16px;border:none;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(90deg,#4facfe,#7b6cf6);cursor:pointer;box-shadow:0 10px 30px #4facfe59,inset 0 0 0 1px #ffffff26;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.menu-btn:active{transform:scale(.97);box-shadow:0 6px 16px #4facfe40}.menu-btn.primary{font-size:18px;padding:16px 0;animation:pulseGlow 2.2s ease-in-out infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #7b6cf600,0 10px 30px #7b6cf666}50%{box-shadow:0 0 24px #7b6cf699,0 14px 40px #7b6cf699}to{box-shadow:0 0 #7b6cf600,0 10px 30px #7b6cf666}}