@import"https://fonts.googleapis.com/css2?family=Bungee&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #00d4ff;--primary-glow: rgba(0, 212, 255, .5);--secondary: #ff6b35;--accent: #ffd700;--dark: #333333;--darker: #90e0ff;--card-bg: rgba(255, 255, 255, .95);--text: #333333;--text-dim: rgba(0, 0, 0, .5);--game-red: #B34A42;--game-red-light: #E77575}body{font-family:Bungee,Rajdhani,sans-serif;background:var(--darker);overflow:hidden;-webkit-user-select:none;user-select:none}#game-container{position:relative;width:100dvw;height:100dvh;overflow:hidden}#game-canvas{display:block;width:100%;height:100%;touch-action:none}#hud{position:absolute;top:0;left:0;right:0;padding:20px;display:flex;flex-direction:column;gap:15px;pointer-events:none;z-index:10}.score-display{position:fixed;top:20px;left:20px;width:120px;background:var(--game-red);padding:0;border-radius:12px;border:2px solid #000000;box-shadow:0 4px #000;font-family:Bungee,sans-serif;color:#fff;z-index:100;display:flex;flex-direction:column;overflow:hidden}.score-label{font-size:.7rem;padding:4px 8px;text-align:center;background:var(--game-red-light)}.score-value{font-size:1.4rem;padding:4px 8px;text-align:center;display:block}#coins-container{position:fixed;top:20px;right:20px;width:100px;background:#4a90e2;border-radius:12px;border:2px solid #000000;box-shadow:0 4px #000;font-family:Bungee,sans-serif;color:#fff;display:flex;flex-direction:column;overflow:hidden}#coins-container .hud-label{font-size:.6rem;padding:4px 8px;text-align:center;background:#fff3;color:#fff}#coins{font-size:1.2rem;padding:4px 8px;text-align:center}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#90e0ffe6,#64c8fffa);z-index:100;transition:opacity .5s ease,visibility .5s ease}#game-over-screen{z-index:105}.screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.screen-content{text-align:center;padding:40px;background:#fff;border:4px solid #000;border-radius:32px;box-shadow:0 10px #000;max-width:90%;width:400px;pointer-events:auto}.game-btn{position:relative;font-family:Bungee,sans-serif;font-size:1.5rem;color:#fff;background:#4a90e2;border:3px solid #000;border-radius:20px;padding:15px 40px;cursor:pointer;transition:all .1s;box-shadow:0 6px #000;width:100%;text-transform:uppercase;letter-spacing:2px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:10}.game-btn:hover{transform:translateY(2px);box-shadow:0 4px #000}.game-btn:active{transform:translateY(6px);box-shadow:0 0 #000}.game-over-title{font-family:Bungee,sans-serif;font-size:3rem;color:var(--game-red);-webkit-text-stroke:2px #000;margin-bottom:30px}.final-stats{display:flex;flex-direction:column;gap:15px;margin-bottom:30px}.stat-item{display:flex;justify-content:space-between;align-items:center;background:#f0f0f0;border:2px solid #000;border-radius:16px;padding:10px 20px;box-shadow:0 4px #000}.stat-item.highlight{background:#fff9c4;border-color:gold}.stat-label{font-family:Bungee,sans-serif;font-size:.8rem;color:#666}.stat-value{font-family:Bungee,sans-serif;font-size:1.5rem;color:#000}#touch-indicator{position:fixed;bottom:40px;left:50%;transform:translate(-50%);z-index:50;pointer-events:none}#touch-indicator.hidden{display:none}.touch-ring{width:60px;height:60px;border:3px solid var(--primary);border-radius:50%;animation:touchPulse 1.5s ease-out infinite}@keyframes touchPulse{0%{transform:scale(.8);opacity:1}to{transform:scale(1.5);opacity:0}}.countdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:200;pointer-events:none}.countdown-overlay.hidden{display:none}.countdown-number{font-family:Bungee,sans-serif;font-size:150px;font-weight:700;color:#fff;text-shadow:4px 4px 0px #000;animation:countdownPulse .5s ease-out}@keyframes countdownPulse{0%{transform:scale(1.5);opacity:0}50%{opacity:1}to{transform:scale(1);opacity:1}}@media (max-width: 900px){.screen-content{padding:30px 20px;max-width:90%}.game-title{font-size:clamp(36px,10vw,60px);letter-spacing:2px}.game-title span{letter-spacing:8px}.subtitle{font-size:14px;margin-bottom:30px;letter-spacing:2px}.instructions{gap:15px;margin-bottom:35px}.instruction-item{padding:15px 20px;min-width:120px}.key-hint{font-size:10px}.key-action{font-size:14px}.game-btn{padding:15px 35px;font-size:14px;letter-spacing:2px}.floating-car{font-size:30px}.car-2{font-size:40px}}@media (max-width: 600px){#hud{padding:10px}.score-display{top:10px;left:10px;width:100px;border-radius:8px}#coins-container{top:10px;right:10px;width:90px;border-radius:8px}.score-label,#coins-container .hud-label{font-size:.6rem;padding:2px 4px}.score-value,#coins{font-size:1.2rem;padding:2px 4px}.screen-content{padding:20px 15px;max-width:95%}.game-title{font-size:clamp(28px,12vw,48px);letter-spacing:1px;margin-bottom:5px}.game-title span{font-size:.5em;letter-spacing:6px}.subtitle{font-size:12px;margin-bottom:25px;letter-spacing:2px}.instructions{flex-direction:column;align-items:center;gap:10px;margin-bottom:25px}.instruction-item{padding:12px 25px;min-width:150px;width:80%;max-width:200px}.key-hint{font-size:9px}.key-action{font-size:13px}.game-btn{padding:14px 30px;font-size:12px;letter-spacing:2px;border-radius:30px}.floating-cars{display:none}.game-over-title{font-size:clamp(28px,10vw,48px);margin-bottom:25px}.final-stats{gap:10px;margin-bottom:20px}.stat-item{padding:12px 15px;min-width:80px;border-radius:12px}.stat-label{font-size:9px}.stat-value{font-size:20px}.countdown-number{font-size:80px}}@media (max-width: 380px){.score-display,#coins-container{width:70px}.score-label,#coins-container .hud-label{font-size:.4rem}.score-value,#coins{font-size:.8rem}.game-over-title{font-size:2rem}.game-btn{padding:12px 25px;font-size:1.1rem}.stat-item{padding:10px 12px}.stat-value{font-size:1.2rem}.countdown-number{font-size:60px}}@keyframes coinCollect{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5)}to{transform:scale(0) translateY(-50px);opacity:0}}.coin-collected{animation:coinCollect .4s ease-out forwards}#drift-indicator{position:fixed;bottom:20px;right:20px;font-family:Orbitron,monospace;font-size:14px;color:var(--secondary);opacity:0;transition:opacity .2s ease;z-index:50}#drift-indicator.active{opacity:1;animation:driftPulse .3s ease-out infinite}@keyframes driftPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}#tap-hint{position:fixed;bottom:80px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:50;animation:tapHintPulse 1.5s ease-in-out infinite}#tap-hint.hidden{display:none}.tap-circle{width:60px;height:60px;border:3px solid rgba(255,255,255,.8);border-radius:50%;animation:tapRing 1.5s ease-in-out infinite}.tap-text{font-family:Bungee,sans-serif;font-size:.9rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);letter-spacing:2px}@keyframes tapHintPulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes tapRing{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}#milestone-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-family:Bungee,sans-serif;font-size:3rem;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.5),0 0 40px rgba(255,215,0,.5);z-index:100;pointer-events:none}#milestone-popup.show{animation:milestonePopIn 1.5s ease-out forwards}@keyframes milestonePopIn{0%{transform:translate(-50%,-50%) scale(0);opacity:0}20%{transform:translate(-50%,-50%) scale(1.2);opacity:1}40%{transform:translate(-50%,-50%) scale(1)}80%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}#coin-fly-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:90}.flying-coin{position:absolute;width:20px;height:20px;background:linear-gradient(135deg,gold,#fa0);border-radius:50%;box-shadow:0 0 10px #ffd700cc;animation:coinFly .6s ease-in forwards}@keyframes coinFly{0%{transform:scale(1);opacity:1}to{opacity:0}}.score-bump{animation:scoreBump .2s ease-out}@keyframes scoreBump{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.coin-bump{animation:coinBump .3s ease-out}@keyframes coinBump{0%{transform:scale(1)}30%{transform:scale(1.3);color:gold}to{transform:scale(1)}}.screen-shake{animation:screenShake .3s ease-out}@keyframes screenShake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}@media (max-width: 480px){#tap-hint{bottom:60px}.tap-circle{width:50px;height:50px}.tap-text{font-size:.75rem}#milestone-popup{font-size:2rem}}
