:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0a0a0a;color:#fafafa;overflow:hidden}.game-container{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)}.hud{display:flex;justify-content:space-between;align-items:center;width:min(800px,95vw);padding:.75rem 1.5rem;margin-bottom:.5rem;background:#0006;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hud-left,.hud-center,.hud-right{display:flex;flex-direction:column;align-items:center;gap:.15rem}.hud-label{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#fff6;font-weight:600}.hud-value{font-size:1.4rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff}.arena{position:relative;width:min(800px,95vw);height:400px;background:linear-gradient(180deg,#1a1a2e,#16213e,#0f3460);border:1px solid rgba(255,255,255,.1);border-radius:1rem;overflow:hidden;user-select:none;-webkit-user-select:none}.bg-layer{position:absolute;bottom:100px;left:0;width:200%;height:100%;pointer-events:none}.bg-far{background:repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(255,255,255,.02) 80px,rgba(255,255,255,.02) 82px);animation:scroll-bg 20s linear infinite}.bg-mid{bottom:100px;background:repeating-linear-gradient(90deg,transparent,transparent 120px,rgba(100,100,255,.04) 120px,rgba(100,100,255,.04) 125px);animation:scroll-bg 12s linear infinite}.bg-near{bottom:100px;height:50px;background:repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,.03) 60px,rgba(255,255,255,.03) 64px);animation:scroll-bg 6s linear infinite}@keyframes scroll-bg{0%{transform:translate(0)}to{transform:translate(-50%)}}.ground{position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(180deg,#1a3a2a,#0d1f15);border-top:2px solid #2ecc71}.ground:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2ecc71,#27ae60,#2ecc71);box-shadow:0 0 10px #2ecc714d}.ground-line{position:absolute;left:0;right:0;height:1px;background:#2ecc7126;pointer-events:none}.player{position:absolute;z-index:10;transition:height .1s ease}.player-body{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#3498db,#2980b9);border-radius:4px 4px 2px 2px;box-shadow:0 0 15px #3498db66}.player-head{position:absolute;top:-12px;left:50%;transform:translate(-50%);width:18px;height:18px;background:linear-gradient(135deg,#3498db,#2980b9);border-radius:50%;box-shadow:0 0 8px #3498db4d}.duck-head{top:-8px;width:14px;height:14px}.player-leg{position:absolute;bottom:-8px;width:6px;height:12px;background:#2980b9;border-radius:0 0 2px 2px}.leg-run{left:6px;animation:leg-run .2s steps(2) infinite}.leg-run:after{content:"";position:absolute;bottom:0;left:12px;width:6px;height:12px;background:#2980b9;border-radius:0 0 2px 2px;animation:leg-run-alt .2s steps(2) infinite}.leg-jump{left:50%;transform:translate(-50%) rotate(-20deg);bottom:-4px}@keyframes leg-run{0%,to{transform:rotate(-15deg)}50%{transform:rotate(15deg)}}@keyframes leg-run-alt{0%,to{transform:rotate(15deg)}50%{transform:rotate(-15deg)}}.player.jumping .player-body{box-shadow:0 0 25px #3498db99}.player.ducking .player-body{border-radius:6px}.obstacle{position:absolute;z-index:5}.obstacle-hurdle{background:linear-gradient(135deg,#e74c3c,#c0392b);border-radius:3px 3px 0 0;box-shadow:0 0 10px #e74c3c4d}.obstacle-hurdle:before{content:"";position:absolute;top:0;left:-3px;right:-3px;height:4px;background:#e74c3c;border-radius:2px}.obstacle-barrier{background:linear-gradient(135deg,#f39c12,#e67e22);border-radius:3px;box-shadow:0 0 10px #f39c124d}.obstacle-barrier:before{content:"";position:absolute;top:50%;left:4px;right:4px;height:2px;background:#0003;transform:translateY(-50%)}.obstacle-spike{background:linear-gradient(to top,#9b59b6,#8e44ad);clip-path:polygon(50% 0%,0% 100%,100% 100%);box-shadow:0 0 10px #9b59b64d}.obstacle-gap{background:transparent;border-left:3px solid #e74c3c;border-right:3px solid #e74c3c;box-shadow:inset 0 0 20px #000c}.obstacle-gap:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(231,76,60,.1) 5px,rgba(231,76,60,.1) 10px)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay-card{text-align:center;padding:2.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:340px}.overlay-card h1{font-size:1.8rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.02em;background:linear-gradient(135deg,#3498db,#2ecc71);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.overlay-card p{color:#fff9;font-size:.85rem;margin-bottom:1.5rem;line-height:1.5}.controls-info{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}.control-row{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.8rem;color:#ffffff80}kbd{display:inline-block;padding:.15rem .5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:4px;color:#ffffffb3}.control-row span{margin-left:.5rem;color:#fff6}.btn{padding:.75rem 2rem;font-size:.95rem;font-weight:600;border:none;border-radius:.5rem;cursor:pointer;background:linear-gradient(135deg,#3498db,#2ecc71);color:#fff;letter-spacing:.02em;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 4px 15px #3498db4d}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3498db66}.btn:active{transform:translateY(0)}.stats{display:flex;gap:1.5rem;justify-content:center;margin:1.25rem 0 1.5rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.2rem}.stat-label{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:#fff6}.stat-value{font-size:1.5rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff}.mobile-controls{display:none;gap:1rem;margin-top:.75rem}.mobile-btn{padding:1rem 2.5rem;font-size:.9rem;font-weight:700;letter-spacing:.1em;border:1px solid rgba(255,255,255,.15);border-radius:.75rem;background:#ffffff14;color:#fffc;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background .15s ease}.mobile-btn:active{background:#ffffff26}@media(max-width:768px){.mobile-controls{display:flex}}@media(max-width:500px){.arena{height:300px}.hud-value{font-size:1.1rem}.overlay-card{padding:1.5rem}.overlay-card h1{font-size:1.4rem}}