*{margin:0;padding:0;box-sizing:border-box}body{font-family:Andy Bear,sans-serif;overflow:hidden;background:#0a0015}#app{width:100vw;height:100vh;position:relative}#game-canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:1;touch-action:none;-webkit-tap-highlight-color:transparent}#game-ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;color:#fff;z-index:10}#score,#distance,#speed{position:absolute;top:20px;font-size:24px;font-weight:700;background:#00000080;padding:10px 20px;border-radius:10px;text-shadow:2px 2px 4px rgba(0,0,0,.8)}#score{left:20px}#distance{left:20px;top:120px}#speed{left:20px;top:70px}.pause-button{position:absolute;top:20px;right:20px;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#8b008be6,#ff1fcee6);border:3px solid rgba(255,255,255,.3);color:#fff;font-size:24px;display:none;align-items:center;justify-content:center;cursor:pointer;pointer-events:all;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 20px #ff1fce66;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:50}.pause-button:hover{transform:scale(1.1);box-shadow:0 6px 30px #ff1fce99}.pause-button:active{transform:scale(.95)}.pause-button.active{display:flex}#mcdonalds-destination{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;z-index:50;pointer-events:none}.destination-icon{font-size:100px;filter:drop-shadow(0 0 20px rgba(255,204,0,.8)) drop-shadow(0 0 40px rgba(255,31,206,.6));animation:logoGlow 5s ease-in-out infinite alternate,iconBounce 1s ease-in-out infinite;position:relative;z-index:0;display:block;-webkit-user-select:none;user-select:none}.mcdonalds-logo-icon{width:70px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 0 20px rgba(255,204,0,.8)) drop-shadow(0 0 40px rgba(255,31,206,.6));animation:logoGlow 4s ease-in-out infinite alternate,iconBounce 1s ease-in-out infinite;will-change:transform,filter;transform:translateZ(0)}.mcdonalds-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(255,204,0,.4),transparent 70%);animation:pulseGlow 2s ease-in-out infinite;z-index:1}.destination-text{margin-top:10px;font-size:18px;font-weight:900;letter-spacing:3px;color:#fc0;text-shadow:0 0 10px rgba(255,204,0,.8),0 0 20px rgba(255,31,206,.6),2px 2px 4px rgba(0,0,0,.8);animation:textPulse 1.5s ease-in-out infinite}.destination-arrow{font-size:32px;color:#2c0030;margin-top:5px;animation:bounceArrow 1s ease-in-out infinite;text-shadow:0 0 10px rgba(255,31,206,.8)}@keyframes floatDestination{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-10px)}}@keyframes logoGlow{0%{filter:drop-shadow(0 0 20px rgba(255,204,0,.6)) drop-shadow(0 0 40px rgba(255,31,206,.4))}to{filter:drop-shadow(0 0 30px rgba(255,204,0,1)) drop-shadow(0 0 60px rgba(255,31,206,.8))}}@keyframes pulseGlow{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.4}50%{transform:translate(-50%,-50%) scale(1.3);opacity:.7}}@keyframes textPulse{0%,to{opacity:.8}50%{opacity:1}}@keyframes bounceArrow{0%,to{transform:translateY(0)}50%{transform:translateY(10px)}}@keyframes iconBounce{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1) rotate(0)}}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0a0015fa,#1a0025f2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:1000;opacity:0;transition:opacity .5s ease}.loading-screen.active{display:flex;opacity:1}.loading-screen.fade-out{opacity:0;pointer-events:none}.loading-content{text-align:center;padding:40px;max-width:600px;width:90%}.loading-title{font-size:72px;margin:0 0 10px;color:#fc0;text-shadow:0 0 20px rgba(255,204,0,.8),0 0 40px rgba(255,31,206,.6),3px 3px 0 #8B008B,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;letter-spacing:6px;font-weight:900;animation:titlePulse 3s ease-in-out infinite}.loading-subtitle{font-size:24px;color:#ff1fce;margin-bottom:40px;letter-spacing:4px;text-shadow:0 0 10px rgba(255,31,206,.8);font-weight:700;animation:textPulse 1.5s ease-in-out infinite}.loading-bar-container{margin:30px 0;position:relative}.loading-bar-background{width:100%;height:30px;background:#0009;border-radius:15px;border:2px solid rgba(255,31,206,.4);overflow:hidden;position:relative;box-shadow:0 0 20px #ff1fce4d,inset 0 2px 10px #000c}.loading-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#8b008b,#ff1fce,#fc0);border-radius:15px;transition:width .3s ease;position:relative;box-shadow:0 0 20px #ff1fcecc,0 0 40px #fc09;animation:loadingPulse 2s ease-in-out infinite}.loading-bar-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:loadingShine 2s ease-in-out infinite}.loading-percentage{margin-top:15px;font-size:28px;font-weight:700;color:#fc0;text-shadow:0 0 10px rgba(255,204,0,.8),0 0 20px rgba(255,31,206,.6);letter-spacing:2px}.loading-status{margin-top:20px;font-size:18px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);opacity:.8;font-weight:600;min-height:24px}@keyframes loadingPulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}@keyframes loadingShine{0%{left:-100%}to{left:200%}}@media screen and (max-width: 768px){.loading-title{font-size:48px;letter-spacing:3px}.loading-subtitle{font-size:18px;letter-spacing:2px}.loading-percentage{font-size:22px}.loading-status{font-size:16px}.loading-bar-background{height:25px}}@media screen and (max-width: 480px){.loading-title{font-size:36px;letter-spacing:2px}.loading-subtitle{font-size:16px}.loading-percentage{font-size:20px}.loading-status{font-size:14px}.loading-bar-background{height:20px}}.menu-container{position:absolute;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .5s ease;z-index:100}.menu-container.active{display:flex;pointer-events:all;opacity:1;animation:fadeIn .5s ease}.menu-content{background:linear-gradient(135deg,#1a0025f2,#8b008beb);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid rgba(255,31,206,.3);border-radius:20px;padding:60px 80px;box-shadow:0 20px 60px #000c,0 0 100px #ff1fce4d,inset 0 0 60px #ff1fce0d;text-align:center;min-width:500px;max-height:100vh;overflow-y:auto;animation:slideIn .6s cubic-bezier(.34,1.56,.64,1)}.menu-content::-webkit-scrollbar{width:10px}.menu-content::-webkit-scrollbar-track{background:#0000004d;border-radius:5px}.menu-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#fc0,#ff1fce);border-radius:5px}.menu-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ff1fce,#fc0)}.game-title{font-size:72px;margin:0 0 10px;color:#fc0;text-shadow:0 0 20px rgba(255,204,0,.8),0 0 40px rgba(255,31,206,.6),3px 3px 0 #8B008B,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;letter-spacing:6px;font-weight:900;animation:titlePulse 3s ease-in-out infinite}.glow-text{animation:glowPulse 2s ease-in-out infinite alternate}.menu-subtitle{font-size:20px;color:#2c0030;margin-bottom:40px;letter-spacing:4px;text-shadow:0 0 10px rgba(255,31,206,.8);font-weight:700}.menu-title{font-size:48px;color:#fc0;margin-bottom:40px;letter-spacing:4px;text-shadow:0 0 20px rgba(255,204,0,.8),2px 2px 4px rgba(0,0,0,.8)}.pause-title{animation:pauseBlink 1.5s ease-in-out infinite}.menu-buttons{display:flex;flex-direction:column;gap:20px;margin:30px 0;align-items:center;width:100%}.menu-button{font-family:Andy Bear,sans-serif;position:relative;font-size:24px;padding:18px 40px;background:linear-gradient(135deg,#8b008bcc,#ff1fce99);border:2px solid rgba(255,204,0,.6);border-radius:15px;cursor:pointer;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);box-shadow:0 4px 15px #ff1fce66,inset 0 1px #fff3;letter-spacing:2px;transition:all .3s cubic-bezier(.34,1.56,.64,1);overflow:visible;display:flex;align-items:center;justify-content:center;gap:12px;will-change:transform;backface-visibility:hidden;width:100%;max-width:400px;transform-style:preserve-3d}.menu-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.menu-button:hover:before{left:100%}.menu-button:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 8px 25px #ff1fce99,0 0 40px #fc06,inset 0 1px #ffffff4d;border-color:#fc0}.menu-button:active{transform:translateY(-2px) scale(1.02)}.primary-button{background:linear-gradient(135deg,#fc0,#2c0030);border-color:#fff;font-size:28px;padding:22px 50px;animation:primaryButtonGlow 2s ease-in-out infinite alternate}.primary-button:hover{box-shadow:0 10px 40px #fc0c,0 0 60px #ff1fce99}.danger-button{background:linear-gradient(135deg,#b40000cc,#ff323299);border-color:#ff646499}.back-button{margin-top:20px;background:linear-gradient(135deg,#323232cc,#64646499)}.instructions-box{margin:30px 0;padding:25px;background:#0006;border-radius:15px;border:1px solid rgba(255,31,206,.3)}.instruction-item{display:flex;align-items:center;justify-content:center;gap:15px;margin:12px 0;font-size:18px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8)}.instruction-item i{font-size:24px;color:#2c0030;text-shadow:0 0 10px rgba(255,31,206,.8)}.settings-grid{display:grid;gap:30px;margin:30px 0}.setting-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px;background:#0000004d;border-radius:10px;border:1px solid rgba(255,31,206,.2)}.setting-item label{display:flex;align-items:center;gap:10px;font-size:18px;color:#fff;font-weight:600}.setting-item i{color:#2c0030;font-size:20px}.slider-container{display:flex;align-items:center;gap:15px;flex:1;justify-content:flex-end}.settings-slider{width:200px;height:8px;border-radius:5px;background:#fff3;outline:none;transition:all .3s;cursor:pointer}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#fc0,#2c0030);cursor:pointer;box-shadow:0 0 10px #ff1fcecc;transition:all .3s}.settings-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 20px #ff1fce}.slider-value{min-width:50px;color:#fc0;font-weight:700;text-shadow:0 0 10px rgba(255,204,0,.8)}.settings-select{font-family:Andy Bear,sans-serif;padding:10px 15px;background:#8b008b99;border:2px solid rgba(255,31,206,.4);border-radius:8px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.settings-select:hover{border-color:#fc0;box-shadow:0 0 15px #ff1fce80}.toggle-switch{position:relative;width:60px;height:30px;display:inline-block;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;left:0;right:0;bottom:0;background:#64646499;border-radius:30px;transition:all .3s;border:2px solid rgba(255,31,206,.3)}.toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:all .3s;box-shadow:0 0 5px #00000080}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,#fc0,#2c0030);border-color:#fc0}.toggle-switch input:checked+.toggle-slider:before{transform:translate(30px);box-shadow:0 0 10px #ff1fcecc}.credits-content{margin:30px 0;padding:30px;background:#0000004d;border-radius:15px;border:1px solid rgba(255,31,206,.2)}.credit-section{margin:25px 0;padding:20px;background:#8b008b33;border-radius:10px}.credit-section h3{color:#fc0;font-size:24px;margin-bottom:10px;text-shadow:0 0 10px rgba(255,204,0,.8)}.credit-section p{color:#fff;font-size:16px;margin:5px 0;text-shadow:0 2px 4px rgba(0,0,0,.8)}.game-end-screen{z-index:150}.game-end-title{font-size:64px;margin-bottom:30px;letter-spacing:6px;animation:titleBounce .6s cubic-bezier(.34,1.56,.64,1)}.game-over-title{color:#f44;text-shadow:0 0 20px rgba(255,68,68,.8),0 0 40px rgba(255,68,68,.4),2px 2px 4px rgba(0,0,0,.8);animation:shakeTitle .5s ease}.victory-title{color:#4f4;text-shadow:0 0 20px rgba(68,255,68,.8),0 0 40px rgba(68,255,68,.4),2px 2px 4px rgba(0,0,0,.8)}.victory-subtitle{font-size:24px;color:#fc0;margin-bottom:20px;text-shadow:0 0 10px rgba(255,204,0,.8)}.final-score-text{font-size:28px;color:#fff;margin:25px 0;padding:20px;background:#0006;border-radius:10px;text-shadow:0 2px 4px rgba(0,0,0,.8)}.leaderboard-content{max-width:700px;width:90vw}.leaderboard-display{margin:30px 0;padding:20px;background:#0006;border-radius:15px;border:1px solid rgba(255,31,206,.3);max-height:500px;overflow-y:auto}.leaderboard-display::-webkit-scrollbar{width:10px}.leaderboard-display::-webkit-scrollbar-track{background:#0000004d;border-radius:5px}.leaderboard-display::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#fc0,#ff1fce);border-radius:5px}.leaderboard-display::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ff1fce,#fc0)}.leaderboard-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#8b008b33;border:2px solid rgba(255,31,206,.3);border-radius:10px;margin-bottom:10px;color:#fff;transition:all .3s}.leaderboard-item:hover{background:#8b008b4d;border-color:#ff1fce80;transform:translate(5px)}.leaderboard-item.rank-1{border-color:gold;background:#ffd70026}.leaderboard-item.rank-2{border-color:silver;background:#c0c0c026}.leaderboard-item.rank-3{border-color:#cd7f32;background:#cd7f3226}.leaderboard-rank{font-weight:700;font-size:20px;min-width:50px;color:#fc0;text-shadow:0 0 10px rgba(255,204,0,.5)}.leaderboard-username{flex:1;font-size:18px;margin:0 15px}.leaderboard-score{font-weight:700;color:#ff1fce;font-size:18px;min-width:100px;text-align:right}.leaderboard-distance{font-size:16px;color:#fc0;min-width:80px;text-align:right}.loading{text-align:center;color:#fff;padding:40px;font-size:20px}.js-tilt-glare{border-radius:inherit}.menu-button .js-tilt-glare-inner{background:linear-gradient(135deg,#fc06,#ff1fce66)}.menu-content .js-tilt-glare-inner{background:linear-gradient(135deg,#fc03,#ff1fce33)}.instructions-box,.setting-item,.credit-section{transform-style:preserve-3d;position:relative}.menu-particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}.menu-particle{position:absolute;background:radial-gradient(circle,#ff1fcecc,#fc06);border-radius:50%;animation:floatParticle linear infinite;filter:blur(2px)}@keyframes floatParticle{0%{transform:translateY(100vh) translate(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-10vh) translate(50px) rotate(360deg);opacity:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes titlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes glowPulse{0%{text-shadow:0 0 20px rgba(255,204,0,.6),0 0 40px rgba(255,31,206,.4),3px 3px 0 #8B008B}to{text-shadow:0 0 30px rgba(255,204,0,1),0 0 60px rgba(255,31,206,.8),3px 3px 0 #8B008B}}@keyframes pauseBlink{0%,to{opacity:1}50%{opacity:.7}}@keyframes primaryButtonGlow{0%{box-shadow:0 4px 15px #ff1fce66,inset 0 1px #fff3}to{box-shadow:0 4px 25px #fc09,inset 0 1px #ffffff4d}}@keyframes titleBounce{0%{transform:scale(.5) translateY(-100px);opacity:0}70%{transform:scale(1.1) translateY(0)}to{transform:scale(1) translateY(0);opacity:1}}@keyframes shakeTitle{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.mobile-controls{position:fixed;bottom:40px;left:50%;transform:translate(-50%);display:none;gap:40px;z-index:100;pointer-events:all}.mobile-btn{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#8b008be6,#ff1fcee6);border:3px solid rgba(255,255,255,.3);color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px #ff1fce66;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mobile-btn:active{transform:scale(.9);box-shadow:0 2px 10px #ff1fce99}.mobile-btn i{pointer-events:none}@media (hover: none) and (pointer: coarse){.mobile-controls{display:flex}#score,#distance,#speed{font-size:18px;padding:8px 15px}}@media screen and (max-width: 768px){#mcdonalds-destination{top:10px}.destination-icon{font-size:80px;animation:none}.mcdonalds-logo-icon{width:50px;animation:none;filter:drop-shadow(0 0 10px rgba(255,204,0,.6))}.mcdonalds-glow{display:none}.destination-text{font-size:14px;letter-spacing:2px}.destination-arrow{font-size:24px}.menu-particles{display:none}.menu-content{min-width:auto;width:90vw;max-width:500px;padding:40px 30px}.game-title{font-size:48px;letter-spacing:3px}.menu-subtitle{font-size:16px;letter-spacing:2px}.menu-title{font-size:36px;margin-bottom:30px}.menu-button{font-size:20px;padding:15px 30px}.primary-button{font-size:24px;padding:18px 40px}.instruction-item{font-size:16px;flex-direction:column;gap:8px}.setting-item{flex-direction:column;align-items:flex-start;gap:15px}.slider-container{width:100%;justify-content:space-between}.settings-slider{flex:1;min-width:150px}.credits-content{padding:20px}.credit-section{padding:15px}.credit-section h3{font-size:20px}.credit-section p{font-size:14px}.game-end-title{font-size:42px}.final-score-text{font-size:20px}.victory-subtitle{font-size:18px}}@media screen and (max-width: 480px){.destination-icon{font-size:60px}.destination-text{font-size:12px;letter-spacing:1px}.destination-arrow{font-size:20px}.menu-content{padding:30px 20px}.game-title{font-size:36px;letter-spacing:2px}.menu-title{font-size:28px}.menu-button{font-size:18px;padding:12px 25px}.primary-button{font-size:20px;padding:15px 35px}.instruction-item{font-size:14px}.setting-item label{font-size:16px}.game-end-title{font-size:32px}}
