.hud-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.hud-panel{background:#0006;border-radius:12px;padding:12px 16px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.score-container{position:absolute;top:env(safe-area-inset-top,20px);left:env(safe-area-inset-left,10px);margin-top:20px;margin-left:10px}.score-value{font-size:32px;font-weight:700;color:#fff;line-height:1;margin-bottom:8px;transition:transform .2s ease}.score-value.pop{animation:value-pop .3s ease}.score-label{font-size:11px;font-weight:600;color:#ffffff80;text-transform:uppercase;letter-spacing:.5px}.flow-bar{margin-top:12px;width:120px}.flow-bar-track{height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.flow-bar-fill{height:100%;border-radius:2px;transition:width .3s ease,background-color .3s ease}.flow-low{background:#64b5f6}.flow-medium{background:#66bb6a}.flow-high{background:#ffa726}.flow-max{background:#ffd54f}.timer-container{position:absolute;top:env(safe-area-inset-top,20px);left:50%;transform:translate(-50%);margin-top:20px;background:linear-gradient(135deg,#5e72e4,#825ee4);border-radius:12px;padding:12px 24px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 4px 12px #5e72e44d;transition:all .3s ease}.timer-value{font-size:28px;font-weight:700;color:#fff;line-height:1;text-align:center;font-variant-numeric:tabular-nums}.timer-container.timer-warning{background:linear-gradient(135deg,#f5a623,#f76b1c);box-shadow:0 4px 12px #f5a62366}.timer-container.timer-critical{background:linear-gradient(135deg,#ff6b6b,#ee5a24);box-shadow:0 4px 12px #ff6b6b66;animation:timer-pulse .5s ease-in-out infinite}@keyframes timer-pulse{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.05)}}.height-container{position:absolute;top:env(safe-area-inset-top,20px);right:env(safe-area-inset-right,10px);margin-top:20px;margin-right:10px;text-align:right}.height-value{font-size:28px;font-weight:700;color:#fff;line-height:1}.height-unit{font-size:18px;font-weight:400;color:#ffffffb3;margin-left:2px}.height-record{font-size:12px;color:#fff6;margin-top:6px}.zone-badge{display:inline-block;margin-top:10px;padding:4px 10px;border-radius:12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#fff;transition:background-color .3s ease}.zone-gym{background:#757575}.zone-rooftops{background:#ab47bc}.zone-clouds{background:#42a5f5}.zone-stratosphere{background:#1e88e5}.zone-space{background:#5e35b1}.energy-display{position:fixed;bottom:max(env(safe-area-inset-bottom),100px);left:50%;transform:translate(-50%);background:#0009;border-radius:24px;padding:8px 20px;display:flex;align-items:center;gap:8px;transition:transform .2s ease,opacity .2s ease}.energy-icon{width:20px;height:20px;background:currentColor;border-radius:50%;opacity:.8}.energy-value{font-size:20px;font-weight:600;color:#fff}.energy-low{color:#64b5f6}.energy-medium{color:#66bb6a}.energy-high{color:#ffb74d}.combo-display{position:absolute;left:env(safe-area-inset-left,20px);top:140px;margin-left:20px;font-size:24px;font-weight:700;color:#ffd54f;animation:combo-bounce .3s ease}.trick-hints{position:absolute;bottom:max(env(safe-area-inset-bottom),160px);left:env(safe-area-inset-left,20px);margin-left:20px;background:#0009;border-radius:8px;padding:8px 12px;max-width:200px}.trick-hint{font-size:12px;color:#ffffffb3;line-height:1.5;display:flex;align-items:center;gap:6px}.trick-hint+.trick-hint{margin-top:4px}.trick-hint-icon{flex-shrink:0;opacity:.6}.timing-feedback{position:fixed;top:15%;left:50%;transform:translate(-50%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:32px;font-weight:900;pointer-events:none;z-index:200;animation:score-pop 1.2s ease-out}@media (min-width: 769px){.timing-feedback{top:calc(15% + 40px)}}@keyframes value-pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes combo-bounce{0%{transform:scale(.8) translateY(10px);opacity:0}50%{transform:scale(1.1) translateY(-5px)}to{transform:scale(1) translateY(0);opacity:1}}@keyframes score-pop{0%{transform:translate(-50%) translateY(10px) scale(.5);opacity:0}20%{transform:translate(-50%) translateY(-5px) scale(1.15);opacity:1}40%{transform:translate(-50%) translateY(0) scale(1);opacity:1}70%{transform:translate(-50%) translateY(0) scale(1);opacity:1}to{transform:translate(-50%) translateY(-15px) scale(.95);opacity:0}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@media (max-width: 768px){.hud-panel{padding:8px 12px}.score-value{font-size:24px}.height-value{font-size:20px}.height-unit{font-size:14px}.timer-value{font-size:22px}.timer-container{padding:8px 16px}.score-label{font-size:10px}.height-record{font-size:11px}.flow-bar{width:90px;margin-top:8px}.zone-badge{font-size:9px;padding:3px 6px}.combo-display{font-size:18px;top:120px}.trick-hints{bottom:max(env(safe-area-inset-bottom),140px);font-size:11px;max-width:160px}.energy-display{bottom:max(env(safe-area-inset-bottom),80px);padding:6px 16px}.energy-value{font-size:18px}}@media (max-width: 380px){.score-container{top:env(safe-area-inset-top,10px);left:env(safe-area-inset-left,10px);margin-top:10px}.height-container{top:env(safe-area-inset-top,10px);right:env(safe-area-inset-right,10px);margin-top:10px}.score-value{font-size:24px}.height-value{font-size:20px}.trick-hints{display:none}}@media (pointer: coarse){.hud-container{position:fixed;top:0;right:0;bottom:0;left:0}}.leaderboard-container{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;padding:30px;color:#fff;max-width:500px;width:100%;max-height:600px;display:flex;flex-direction:column}.leaderboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.leaderboard-header h2{margin:0;font-size:28px}.close-btn{background:none;border:none;color:#fff;font-size:32px;cursor:pointer;opacity:.8;transition:opacity .2s;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.close-btn:hover{opacity:1}.leaderboard-tabs{display:flex;gap:10px;margin-bottom:20px}.tab-btn{flex:1;padding:10px;background:#ffffff1a;border:2px solid transparent;border-radius:10px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s}.tab-btn:hover{background:#fff3}.tab-btn.active{background:#ffffff4d;border-color:#fff}.leaderboard-content{flex:1;overflow-y:auto;background:#0006;border-radius:10px;padding:15px;isolation:isolate;position:relative;z-index:0}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:20px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{text-align:center;padding:40px 20px}.error button{margin-top:20px;padding:10px 20px;background:#fff3;border:2px solid white;border-radius:10px;color:#fff;font-size:16px;cursor:pointer;transition:background .3s}.error button:hover{background:#ffffff4d}.empty{text-align:center;padding:60px 20px}.empty-subtitle{opacity:.7;font-size:14px;margin-top:10px}.leaderboard-list{display:flex;flex-direction:column;gap:10px;contain:layout paint;position:relative;z-index:0}.leaderboard-entry{display:flex;align-items:center;gap:15px;padding:12px;background:#ffffff26;border-radius:10px;transition:background-color .2s ease;color:#fff!important;will-change:transform,opacity;transform:translateZ(0);backface-visibility:hidden;position:relative;z-index:1;mix-blend-mode:normal;-webkit-font-smoothing:antialiased}.rank,.player-name,.score{position:relative;z-index:2;mix-blend-mode:normal}.leaderboard-entry:hover{background:#ffffff2e}.leaderboard-entry.current-player{background:#ffd70033;border:2px solid gold;animation:glow 2s ease-in-out infinite}@keyframes glow{0%,to{box-shadow:0 0 10px #ffd70080}50%{box-shadow:0 0 20px #ffd700cc}}.rank{font-size:20px;font-weight:700;min-width:35px;text-align:center;color:#fff!important;opacity:1!important}.player-info{flex:1;display:flex;flex-direction:column;gap:2px}.player-name{font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px;color:#fff!important;opacity:1!important}.you-badge{background:gold;color:#333;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:700}.player-stats{font-size:12px;opacity:.85;color:#ffffffe6!important}.score{font-size:20px;font-weight:700;color:gold!important;opacity:1!important}.player-rank-footer{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);text-align:center}.rank-badges{display:flex;gap:10px;justify-content:center;margin-top:10px}.rank-badge{background:#fff3;padding:5px 10px;border-radius:15px;font-size:14px}@media (max-width: 768px){.leaderboard-container{padding:20px;max-height:80vh}.leaderboard-header h2{font-size:24px}.tab-btn{font-size:14px;padding:8px}.leaderboard-entry{padding:10px}.player-name{font-size:16px}.score{font-size:18px}}.end-screen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease-in-out}.end-screen.visible{opacity:1}.end-screen-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.end-screen-content{position:relative;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;padding:40px;max-width:500px;width:90%;box-shadow:0 20px 60px #00000080;text-align:center;color:#fff;animation:slideUp .5s ease-out}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.score-grade{font-size:120px;font-weight:700;line-height:1;margin-bottom:20px;text-shadow:0 4px 8px rgba(0,0,0,.3);animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.game-over-text{font-size:24px;margin:0 0 20px;text-transform:uppercase;letter-spacing:2px;opacity:.9}.final-score{display:flex;flex-direction:column;margin-bottom:30px}.final-score .score-label{font-size:18px;opacity:.8;margin-bottom:10px}.final-score .score-value{font-size:48px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:30px 0;padding:20px;background:#ffffff1a;border-radius:10px}.stat-item{display:flex;flex-direction:column}.stat-label{font-size:14px;opacity:.8;margin-bottom:5px}.stat-value{font-size:24px;font-weight:700}.name-input-section{margin:20px 0}.name-input-section input{width:100%;padding:15px;font-size:18px;border:none;border-radius:10px;background:#ffffffe6;color:#333;text-align:center}.name-input-section input:focus{outline:none;background:#fff;box-shadow:0 0 0 3px #ffffff4d}.name-input-section input.error{border:2px solid #ff4444;animation:shake .3s ease}.name-error{color:#fcc;font-size:14px;margin-top:10px;font-weight:600;background:#f443;padding:8px 12px;border-radius:5px}.name-hint{color:#ffffffb3;font-size:12px;margin-top:8px}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.action-buttons{display:flex;gap:15px;justify-content:center;margin-top:30px}.btn{padding:15px 30px;font-size:18px;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-primary{background:#4caf50;color:#fff;box-shadow:0 4px 6px #4caf504d}.btn-primary:hover{background:#45a049;transform:translateY(-2px);box-shadow:0 6px 8px #4caf5066}.btn-secondary{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3)}.btn-secondary:hover{background:#ffffff4d;transform:translateY(-2px)}.btn-tertiary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:2px solid rgba(255,255,255,.3)}.btn-tertiary:hover{transform:translateY(-2px);box-shadow:0 6px 8px #667eea66;border-color:#fff}.submit-status{text-align:center;padding:15px;margin:20px 0;font-size:16px;color:#ffffffe6;background:#ffffff1a;border-radius:10px}.submit-status.success{color:#4ade80;font-weight:700;background:#4ade8033}.highscore-teaser{margin-top:30px;font-size:16px;opacity:.8;font-style:italic}@media (max-width: 768px){.end-screen-content{padding:30px 20px}.score-grade{font-size:80px}.final-score .score-value{font-size:36px}.action-buttons{flex-direction:column}.btn{width:100%}}.tutorial-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .3s ease-out}.tutorial-overlay.visible{opacity:1;pointer-events:auto}.tutorial-content{display:flex;flex-direction:column;align-items:center;gap:30px;padding:20px}.tutorial-hint{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.hint-text{font-size:24px;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5);animation:fadeInUp .5s ease-out}.hint-subtext{font-size:16px;color:#fffc;text-shadow:1px 1px 2px rgba(0,0,0,.5);animation:fadeInUp .5s ease-out .2s both}.swipe-animation{position:relative;width:60px;height:100px;display:flex;align-items:center;justify-content:center}.hand-icon{position:absolute;animation:swipeUp 2s ease-in-out infinite;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.3))}@keyframes swipeUp{0%,to{transform:translateY(20px);opacity:.3}20%{opacity:1}50%{transform:translateY(-20px);opacity:1}80%{opacity:.3}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.hint-text{font-size:20px}.hint-subtext{font-size:14px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:linear-gradient(135deg,#5b3aa8,#2a1054);min-height:100vh}.app{width:100vw;height:100vh;position:relative;background:transparent}button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none}button:active{transform:scale(.95)}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px)}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:linear-gradient(135deg,#5b3aa8,#2a1054)}#root{width:100%;height:100%;background:linear-gradient(135deg,#5b3aa8,#2a1054)}@media (pointer: coarse){.game-viewport{box-sizing:border-box;width:100%;height:100vh;height:100dvh;height:var(--app-height, 100dvh);margin:0;overflow:hidden;position:relative;background:#000}.game-viewport canvas{display:block;width:100%;height:100%}}