@import"https://fonts.googleapis.com/css2?family=Bungee&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}#app{width:100vw;height:100vh;position:fixed;top:0;left:0}#game-container{position:relative;width:100vw;height:100vh;overflow:hidden}#gameCanvas{display:block;width:100vw;height:100vh}#ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.score-display{position:fixed;top:3.68%;left:20px;width:29.54%;max-width:300px;min-height:6.73%;background:#b34a42;padding:0;border-radius:24px;border:2px solid #000000;box-shadow:0 4px #000;font-family:Bungee,Arial Black,sans-serif;color:#fff;z-index:100;display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;gap:0;box-sizing:border-box;overflow:hidden;pointer-events:none;animation:slideInLeft .5s ease-out;transition:transform .2s ease,box-shadow .2s ease}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.score-display:hover{transform:translateY(-2px);box-shadow:0 6px #000}.score-label{font-size:.9rem;font-weight:400;text-transform:uppercase;letter-spacing:1px;padding:6px 12px;text-align:center;background:#e77575;transition:background .3s ease}.score-display:hover .score-label{background:#f08585}.score-value{font-size:1.8rem;font-weight:400;line-height:1;padding:6px 12px;text-align:center;display:block;transition:transform .2s ease,color .3s ease}.score-value.score-update{animation:scorePulse .4s ease-out;color:#ff0}@keyframes scorePulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.combo-display{position:fixed;top:3.68%;right:20px;width:20%;min-height:6.73%;background:#b34a42;padding:0;border-radius:24px;border:2px solid #000000;box-shadow:0 4px #000;font-family:Bungee,Arial Black,sans-serif;color:#fff;z-index:100;display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;gap:0;box-sizing:border-box;overflow:hidden;pointer-events:none;opacity:0;transform:translate(100%) scale(.8);transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}.combo-display:not(.hidden){opacity:1;transform:translate(0) scale(1);animation:comboSlideIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes comboSlideIn{0%{transform:translate(100%) scale(.8);opacity:0}to{transform:translate(0) scale(1);opacity:1}}.combo-display.hidden{display:none}.combo-label{font-size:.9rem;font-weight:400;text-transform:uppercase;letter-spacing:1px;padding:6px 12px;text-align:center;background:#e77575;transition:background .3s ease}.combo-display:hover .combo-label{background:#f08585}.combo-value{font-size:2rem;font-weight:400;line-height:1;padding:6px 12px;text-align:center;display:block;color:#ff0;text-shadow:2px 2px 0px #000;transition:transform .2s ease,color .3s ease}.combo-value.combo-update{animation:comboPulse .5s cubic-bezier(.34,1.56,.64,1)}@keyframes comboPulse{0%{transform:scale(1) rotate(0);color:#ff0}50%{transform:scale(1.3) rotate(5deg);color:#fa0}to{transform:scale(1) rotate(0);color:#ff0}}.dodged-display{position:fixed;top:12%;right:20px;width:20%;min-height:6.73%;background:#b34a42;padding:0;border-radius:24px;border:2px solid #000000;box-shadow:0 4px #000;font-family:Bungee,Arial Black,sans-serif;color:#fff;z-index:100;display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;gap:0;box-sizing:border-box;overflow:hidden;pointer-events:none}.dodged-label{font-size:.9rem;font-weight:400;text-transform:uppercase;letter-spacing:1px;padding:6px 12px;text-align:center;background:#e77575}.dodged-value{font-size:1.8rem;font-weight:400;line-height:1;padding:6px 12px;text-align:center;display:block}#startScreen,#gameOver{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;padding:40px;border-radius:15px;text-align:center;color:#fff;pointer-events:all;min-width:300px;opacity:0;scale:.9;transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}#startScreen:not(.hidden),#gameOver:not(.hidden){opacity:1;transform:translate(-50%,-50%) scale(1);animation:screenFadeIn .5s cubic-bezier(.34,1.56,.64,1)}@keyframes screenFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}#startScreen h1{font-size:36px;margin-bottom:20px;color:#ff6b6b;text-shadow:2px 2px 4px rgba(0,0,0,.5);animation:titleGlow 2s ease-in-out infinite}@keyframes titleGlow{0%,to{text-shadow:2px 2px 4px rgba(0,0,0,.5),0 0 10px rgba(255,107,107,.5)}50%{text-shadow:2px 2px 4px rgba(0,0,0,.5),0 0 20px rgba(255,107,107,.8)}}#startScreen p{margin:10px 0;font-size:16px;color:#e0e0e0;animation:fadeInUp .6s ease-out .2s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#startScreen p:nth-child(2){animation-delay:.3s}#startScreen p:nth-child(3){animation-delay:.4s}#startScreen p:nth-child(4){animation-delay:.5s}#startScreen button{animation:fadeInUp .6s ease-out .6s both}#gameOver h2{font-size:32px;margin-bottom:20px;color:#ff6b6b;animation:fadeInDown .5s ease-out}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}#gameOver p{font-size:20px;margin:10px 0;color:#e0e0e0;animation:fadeInUp .5s ease-out .2s both}#finalScore{color:#4ecdc4;font-weight:700;font-size:24px;display:inline-block;transition:transform .3s ease,color .3s ease}#finalScore.score-animate{animation:finalScorePulse .6s cubic-bezier(.34,1.56,.64,1)}@keyframes finalScorePulse{0%{transform:scale(1);color:#4ecdc4}50%{transform:scale(1.3);color:#ff0}to{transform:scale(1);color:#4ecdc4}}button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:15px 30px;font-size:18px;font-weight:700;border-radius:8px;cursor:pointer;margin-top:20px;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 15px #0003;position:relative;overflow:hidden}button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}button:hover:before{width:300px;height:300px}button:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #667eea66}button:active{transform:translateY(-1px) scale(1.02);transition:all .1s ease}.hidden{display:none!important;opacity:0;pointer-events:none}#startScreen,#gameOver,.countdown-overlay{will-change:opacity,transform}.countdown-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:50;pointer-events:all;opacity:0;transition:opacity .3s ease}.countdown-overlay:not(.hidden){opacity:1;animation:overlayFadeIn .3s ease}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.countdown-overlay.hidden{display:none}.countdown-number{font-family:Bungee,Arial Black,sans-serif;font-size:150px;font-weight:700;color:#fff;text-shadow:4px 4px 0px #000;animation:countdownPulse .5s cubic-bezier(.34,1.56,.64,1);transition:transform .3s ease,opacity .3s ease}@keyframes countdownPulse{0%{transform:scale(.3) rotate(-180deg);opacity:0}50%{transform:scale(1.2) rotate(10deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.play-again-btn{font-family:Bungee,Arial Black,sans-serif;font-size:1.5rem;padding:16px 40px;background:#b34a42;color:#fff;border:3px solid #000;border-radius:50px;box-shadow:0 4px #000;cursor:pointer;text-transform:uppercase;letter-spacing:2px;transition:all .3s cubic-bezier(.34,1.56,.64,1);margin-top:20px;position:relative;overflow:hidden}.play-again-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .5s,height .5s}.play-again-btn:hover:before{width:400px;height:400px}.play-again-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px #000;background:#c55a52}.play-again-btn:active{transform:translateY(1px) scale(1.02);box-shadow:0 2px #000;transition:all .1s ease}@media screen and (max-width: 768px){.countdown-number{font-size:100px}.play-again-btn{font-size:1.2rem;padding:14px 32px}.score-display{width:40%;top:2%;left:10px}.score-label{font-size:.75rem;padding:4px 8px}.score-value{font-size:1.4rem;padding:4px 8px}.combo-display,.dodged-display{width:35%;right:10px}.combo-value{font-size:1.5rem}.dodged-value{font-size:1.4rem}}