@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap";:root{--bg-dark:#0a0a0f;--bg-card:#ffffff0d;--accent-primary:#fc0;--accent-secondary:#a0f;--text-main:#fff;--text-dim:#a0a0b0;--glass-border:#ffffff20;--neon-glow:0 0 20px #fc06;color:var(--text-main);background-color:var(--bg-dark);font-family:Outfit,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}body{background:radial-gradient(circle,#1a1a2e 0%,#0a0a0f 100%);place-items:center;min-width:320px;min-height:100vh;margin:0;padding:0;display:flex;overflow:hidden}#app{text-align:center;box-sizing:border-box;flex-direction:column;justify-content:space-between;width:100%;max-width:500px;height:100vh;margin:0 auto;padding:2rem;display:flex;position:relative}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:24px;padding:1.5rem;box-shadow:0 8px 32px #0000005e}.meter-container{justify-content:center;align-items:center;width:280px;height:280px;margin:2rem auto;display:flex;position:relative}.speed-value{color:var(--accent-primary);text-shadow:var(--neon-glow);font-variant-numeric:tabular-nums;margin:0;font-size:4.5rem;font-weight:800}.speed-unit{color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;font-size:1rem}.meter-svg{width:100%;height:100%;position:absolute;top:0;left:0;transform:rotate(-90deg)}.meter-bg{fill:none;stroke:var(--bg-card);stroke-width:12px}.meter-fill{fill:none;stroke:var(--accent-primary);stroke-width:12px;stroke-linecap:round;stroke-dasharray:753.6;stroke-dashoffset:753.6px;filter:drop-shadow(0 0 8px var(--accent-primary));transition:stroke-dashoffset .1s ease-out}.hud-top{justify-content:space-between;align-items:center;width:100%;display:flex}.mode-select-dropdown{background:var(--bg-card);color:var(--text-main);border:1px solid var(--glass-border);cursor:pointer;border-radius:8px;outline:none;padding:.4rem .8rem;font-family:inherit;font-size:.9rem}.mode-select-dropdown:focus{border-color:var(--accent-primary);box-shadow:0 0 5px #ffcc004d}.label-group{text-align:left}.combo-hud{width:100%;margin-top:1rem}.combo-stats{justify-content:space-around;padding:1rem;display:flex}.stat-item{flex-direction:column;display:flex}.stat-label{color:var(--text-dim);letter-spacing:2px;font-size:.6rem}.stat-value{color:var(--accent-primary);font-size:1.5rem;font-weight:800}.sport-tabs{justify-content:center;gap:.5rem;margin:1.5rem 0;display:flex}.sport-tab{background:var(--bg-card);color:var(--text-dim);border:1px solid var(--glass-border);cursor:pointer;border-radius:50px;padding:.5rem 1rem;font-size:.8rem;transition:all .3s}.sport-tab.active{background:var(--accent-primary);color:#000;border-color:var(--accent-primary);box-shadow:0 0 15px #fc06}.clickable{cursor:pointer}.clickable:hover{color:var(--accent-primary)}.mode-container{margin-bottom:1rem}.neon-input{border:1px solid var(--glass-border);color:#fff;text-align:center;background:#ffffff0d;border-radius:8px;outline:none;width:100%;margin:1rem 0;padding:.8rem;font-family:inherit}.neon-input:focus{border-color:var(--accent-primary)}.modal-actions{justify-content:center;gap:1rem;display:flex}.modal-card h3{color:var(--accent-primary);margin-bottom:.5rem}.label-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-size:.75rem}.label-value{color:var(--text-main);font-size:1.25rem;font-weight:600}.btn-primary{background:linear-gradient(135deg, var(--accent-primary) 0%, #f90 100%);color:#000;cursor:pointer;text-transform:uppercase;letter-spacing:1px;border:none;border-radius:50px;width:100%;padding:1.25rem 2.5rem;font-size:1.25rem;font-weight:800;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 15px #ffcc004d}.btn-primary:active{transform:scale(.95)}.btn-secondary{background:var(--bg-card);color:var(--text-dim);border:1px solid var(--glass-border);cursor:pointer;border-radius:50px;padding:.5rem 1rem;transition:all .3s}.btn-secondary:hover{border-color:var(--accent-primary);color:var(--text-main)}.ranking-card{width:90%;max-width:400px;max-height:80vh;overflow-y:auto}.ranking-list{text-align:left;margin-top:1.5rem}.ranking-item{border-bottom:1px solid var(--glass-border);justify-content:space-between;padding:.8rem;font-size:.9rem;display:flex}.ranking-item:last-child{border-bottom:none}.rank-num{color:var(--accent-primary);width:30px;font-weight:800}.rank-score{color:var(--text-main);font-weight:600}.rank-user{color:var(--text-dim);font-size:.8rem}.btn-primary.recording{background:var(--accent-secondary);color:#fff;box-shadow:0 0 20px #a0f6}.feedback-msg{opacity:0;margin-top:1rem;font-size:1.5rem;font-weight:800;transition:all .5s ease-out;transform:translateY(10px)}.feedback-msg.show{opacity:1;transform:translateY(0)}.overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000d9;justify-content:center;align-items:center;padding:2rem;display:flex;position:fixed;inset:0}.warning-card{text-align:center;max-width:400px}.warning-icon{color:var(--accent-primary);margin-bottom:1rem;font-size:3rem}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.recording-pulse{animation:1s ease-in-out infinite pulse}.visualizer-canvas{z-index:-1;pointer-events:none;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.impact-flash{animation:.3s ease-out flash}@keyframes flash{0%{filter:brightness(3)saturate(2)}to{filter:brightness()saturate()}}.sonic-boom{border:2px solid var(--accent-primary);pointer-events:none;border-radius:50%;animation:.5s ease-out forwards boom;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes boom{0%{opacity:1;width:0;height:0}to{opacity:0;border-width:10px;width:400px;height:400px}}