#gameContainer{background:linear-gradient(135deg,#e6f3fb,#faf7f5);display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;overflow-y:auto;position:relative;width:100vw}@media (max-width:768px){#gameContainer{padding-bottom:170px}}#topHud{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);box-shadow:0 4px 20px rgba(0,0,0,.1);display:flex;flex-shrink:0;justify-content:space-between;padding:20px 40px;z-index:100}@media (max-width:768px){#topHud{flex-wrap:wrap;padding:15px 20px}}#topHud .hud-center,#topHud .hud-left,#topHud .hud-right{align-items:center;display:flex;gap:30px}@media (max-width:768px){#topHud .hud-center,#topHud .hud-left,#topHud .hud-right{gap:15px}#topHud .hud-center{gap:8px;justify-content:space-around;margin-bottom:10px;order:-1;width:100%}}#topHud .hud-item{align-items:center;display:flex;gap:10px}@media (max-width:768px){#topHud .hud-item{gap:5px}}#topHud .hud-label{color:#666;font-size:14px;font-weight:500}@media (max-width:768px){#topHud .hud-label{font-size:12px}}#topHud .detected-note{color:#333;font-family:Poppins,sans-serif;font-size:28px;font-weight:700;min-width:60px;text-align:center;transition:color .2s}@media (max-width:768px){#topHud .detected-note{font-size:24px;min-width:50px}}#topHud .score-value{color:#007abc;font-family:Poppins,sans-serif;font-size:32px;font-weight:700}@media (max-width:768px){#topHud .score-value{font-size:20px}}#topHud .combo-value{color:#333;font-family:Poppins,sans-serif;font-size:28px;font-weight:700;transition:all .3s}@media (max-width:768px){#topHud .combo-value{font-size:18px}}#topHud .progress-value{color:#007abc;font-family:Poppins,sans-serif;font-size:24px;font-weight:600}@media (max-width:768px){#topHud .progress-value{font-size:16px}#topHud .progress-display i{display:none}}#topHud .level-value{color:#6f2b07;font-size:24px;font-weight:600}@media (max-width:768px){#topHud .level-value{font-size:20px}}#topHud .perfect-pitch-value{color:#00c853;font-size:22px;font-weight:600}@media (max-width:768px){#topHud .perfect-pitch-value{font-size:18px}}.mic-volume-warning{align-items:center;animation:slideDown .3s ease-out;background:linear-gradient(135deg,#ff5252,#ff1744);border-radius:12px;box-shadow:0 6px 24px rgba(255,23,68,.4);color:#fff;display:flex;flex-direction:column;gap:8px;left:50%;min-width:320px;padding:16px 24px;position:fixed;top:80px;transform:translateX(-50%);z-index:1000}@media (max-width:768px){.mic-volume-warning{display:none}}.mic-volume-warning i{animation:pulse 2s ease-in-out infinite;font-size:24px;margin-bottom:4px}.mic-volume-warning .warning-text{font-weight:600;line-height:1.4;text-align:center}.mic-volume-warning .signal-level{background:hsla(0,0%,100%,.2);border-radius:6px;font-family:monospace;font-size:14px;font-weight:500;padding:6px 12px}.mic-volume-warning .signal-level span{font-weight:700}@keyframes slideDown{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.mic-clipping-warning{align-items:center;animation:slideDown .3s ease-out;background:linear-gradient(135deg,#ff9800,#f57c00);border-radius:12px;box-shadow:0 6px 24px rgba(245,124,0,.4);color:#fff;display:flex;flex-direction:column;gap:8px;left:50%;min-width:320px;padding:16px 24px;position:fixed;top:80px;transform:translateX(-50%);z-index:1000}@media (max-width:768px){.mic-clipping-warning{display:none}}.mic-clipping-warning i{animation:shake .5s ease-in-out infinite;font-size:24px;margin-bottom:4px}.mic-clipping-warning .warning-text{font-weight:600;line-height:1.4;text-align:center}.mic-clipping-warning .signal-level{background:hsla(0,0%,100%,.2);border-radius:6px;font-family:monospace;font-size:14px;font-weight:500;padding:6px 12px}.mic-clipping-warning .signal-level span{font-weight:700}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}@keyframes dash{0%{stroke-dashoffset:0}to{stroke-dashoffset:20}}@keyframes levelUpPulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}#staffContainer{align-items:center;display:flex;flex:1 1 auto;justify-content:center;max-height:600px;min-height:400px;padding:40px 20px;position:relative}@media (max-width:768px){#staffContainer{flex:1;max-height:none;min-height:0;padding:10px}}#staffCanvas{height:300px;max-width:1400px;width:100%}@media (max-width:768px){#staffCanvas{height:450px}}.staff-line{stroke:#333;stroke-width:2}.treble-clef{fill:#333}.note{transition:opacity .1s,filter .2s}.note .notehead{fill:#000}.note .stem{stroke:#000;stroke-width:2}.note .note-label{fill:#007abc;font-family:Poppins,sans-serif;font-weight:700;text-anchor:middle}.note .ledger-line{stroke:#333;stroke-width:2}#burnLine{display:none}.burn-line{filter:drop-shadow(0 0 10px rgba(255,82,82,.6))}.fire-emoji{animation:fire-flicker-svg .5s ease-in-out infinite alternate;filter:drop-shadow(0 0 8px rgba(255,140,0,.8))}@keyframes fire-flicker-svg{0%{transform:scale(1) rotate(-5deg)}to{transform:scale(1.1) rotate(5deg)}}#bottomPanel{flex-shrink:0}@media (max-width:768px){#bottomPanel{bottom:0;box-shadow:0 -4px 20px rgba(0,0,0,.15);left:0;position:fixed;right:0;width:100%;z-index:100}}#pitchMeter{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border-top:1px solid rgba(0,0,0,.1);flex-shrink:0;padding:20px 40px}@media (max-width:768px){#pitchMeter{padding:15px 20px}}#pitchMeter .meter-label{color:#666;font-size:14px;font-weight:600;margin-bottom:10px;text-align:center}#pitchMeter .meter-container{margin:0 auto;max-width:600px}#pitchMeter .meter-scale{color:#999;display:flex;font-size:12px;justify-content:space-between;margin-bottom:8px}#pitchMeter .meter-scale .scale-mark.center{color:#00c853;font-weight:700}#pitchMeter .meter-bar{background:#ddd;border-radius:6px;height:12px;margin-bottom:10px;overflow:hidden;position:relative}#pitchMeter .meter-zones{display:flex;height:100%;position:absolute;width:100%}#pitchMeter .meter-zone{height:100%;opacity:.6;transition:opacity .2s}#pitchMeter .meter-zone.red-zone-left{background:#ff5252;width:30%}#pitchMeter .meter-zone.yellow-zone-left{background:#ffc107;width:10%}#pitchMeter .meter-zone.green-zone{background:#00c853;width:20%}#pitchMeter .meter-zone.yellow-zone-right{background:#ffc107;width:10%}#pitchMeter .meter-zone.red-zone-right{background:#ff5252;width:30%}#pitchMeter .meter-target{background:#333;border-radius:2px;height:20px;width:4px}#pitchMeter .meter-needle,#pitchMeter .meter-target{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}#pitchMeter .meter-needle{border-left:6px solid transparent;border-right:6px solid transparent;border-top:12px solid #fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));height:0;transition:left .1s;width:0}#pitchMeter .meter-value{color:#333;font-size:18px;font-weight:700;text-align:center}@media (max-width:768px){#pitchMeter .meter-value{font-size:16px}}#bottomControls{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.98);box-shadow:0 -4px 20px rgba(0,0,0,.1);display:flex;flex-shrink:0;gap:20px;justify-content:center;padding:20px 40px;z-index:100}@media (max-width:768px){#bottomControls{gap:10px;padding:15px}}.btn{align-items:center;border:none;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;font-weight:600;gap:8px;justify-content:center;padding:12px 24px;text-decoration:none;transition:all .3s}.btn:hover{box-shadow:0 8px 16px rgba(0,0,0,.2);transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn i{font-size:18px}.btn.btn-primary{background:linear-gradient(135deg,#007abc,#005989);box-shadow:0 4px 12px rgba(0,122,188,.3)}.btn.btn-primary:hover{box-shadow:0 8px 20px rgba(0,122,188,.4)}.btn.btn-secondary{background:linear-gradient(135deg,#6c757d,#545b62);box-shadow:0 4px 12px hsla(208,7%,46%,.3)}.btn.btn-secondary:hover{box-shadow:0 8px 20px hsla(208,7%,46%,.4)}.btn.btn-large{font-size:18px;padding:16px 32px}@media (max-width:768px){.btn.btn-large{font-size:16px;padding:14px 28px}}.btn.btn-game-control{min-width:120px}@media (max-width:768px){.btn.btn-game-control{min-width:60px;padding:12px 20px}.btn.btn-game-control .btn-text{display:none}.btn.btn-game-control .btn-icon,.btn.btn-game-control i{font-size:24px;margin:0}}.modal{align-items:center;backdrop-filter:blur(8px);background:rgba(0,0,0,.8);display:flex;height:100%;justify-content:center;left:0;padding:20px;position:fixed;top:0;width:100%;z-index:1000}.modal.hidden{display:none}.modal .modal-content{animation:modal-appear .3s ease-out;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;max-width:600px;overflow-y:auto;padding:40px;position:relative;width:100%}@media (max-width:768px){.modal .modal-content{max-width:95%;padding:30px 20px}}.modal .modal-content h2{color:#333;font-family:Poppins,sans-serif;font-size:28px;margin-bottom:20px;text-align:center}@media (max-width:768px){.modal .modal-content h2{font-size:24px}}.modal .modal-content h2 i{color:#007abc;margin-right:10px}.modal .modal-content p{color:#666;font-size:16px;line-height:1.6;margin-bottom:15px}.modal .modal-content p.privacy-note{background:#f0f9ff;border-left:4px solid #007abc;border-radius:8px;padding:12px 16px}.modal .modal-content p.privacy-note i{color:#00c853;margin-right:8px}.modal .modal-content .modal-icon{font-size:64px;margin-bottom:20px;text-align:center}.modal .close-btn{align-items:center;background:none;border:none;border-radius:50%;color:#999;cursor:pointer;display:flex;font-size:32px;height:40px;justify-content:center;position:absolute;right:15px;top:15px;transition:all .2s;width:40px}.modal .close-btn:hover{background:#f0f0f0;color:#333}@keyframes modal-appear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.instructions-modal .instructions-content{margin:30px 0}.instructions-modal .instruction-step{align-items:flex-start;display:flex;gap:20px;margin-bottom:25px}.instructions-modal .instruction-step .step-number{align-items:center;background:linear-gradient(135deg,#007abc,#005989);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:18px;font-weight:700;height:40px;justify-content:center;width:40px}.instructions-modal .instruction-step .step-text{flex:1}.instructions-modal .instruction-step .step-text h3{color:#333;font-size:18px;font-weight:600;margin-bottom:5px}.instructions-modal .instruction-step .step-text p{color:#666;font-size:14px;margin:0}.settings-modal .settings-content{margin:30px 0}.settings-modal .setting-item{margin-bottom:25px}.settings-modal .setting-item label{color:#333;display:block;font-size:14px;font-weight:600;margin-bottom:8px}.settings-modal .setting-item label i{color:#007abc;margin-right:8px}.settings-modal .setting-item .help-text{color:#666;display:block;font-size:12px;font-style:italic;margin-top:6px}.settings-modal .setting-item .note-range-preview{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:8px;margin-top:15px;padding:15px}.settings-modal .setting-item .note-range-preview svg{display:block;height:auto;margin:0 auto;max-width:100%}.settings-modal .setting-item .form-control,.settings-modal .setting-item .form-range{width:100%}.settings-modal .setting-item .form-control{border:2px solid #e0e0e0;border-radius:8px;font-size:16px;padding:10px 14px;transition:border-color .2s}.settings-modal .setting-item .form-control:focus{border-color:#007abc;outline:none}.settings-modal .setting-item .custom-range-inputs{display:flex;gap:15px;margin-top:10px}.settings-modal .setting-item .custom-range-inputs .range-input-group{flex:1}.settings-modal .setting-item .custom-range-inputs .range-input-group label{font-size:12px;font-weight:500;margin-bottom:4px}.settings-modal .setting-item.custom-range-settings{background:#f5f5f5;border-left:4px solid #007abc;border-radius:8px;padding:15px}.settings-modal .setting-item .form-range{background:#e0e0e0;border-radius:3px;cursor:pointer;height:6px;outline:none}.settings-modal .setting-item .form-range::-webkit-slider-thumb{background:#007abc;border-radius:50%;cursor:pointer;height:20px;transition:transform .2s;width:20px}.settings-modal .setting-item .form-range::-webkit-slider-thumb:hover{transform:scale(1.2)}.settings-modal .setting-item .form-range::-moz-range-thumb{background:#007abc;border:none;border-radius:50%;cursor:pointer;height:20px;width:20px}.settings-modal .setting-item.checkbox-item label{align-items:center;cursor:pointer;display:flex}.settings-modal .setting-item.checkbox-item label input[type=checkbox]{cursor:pointer;height:20px;margin-right:10px;width:20px}.settings-modal .setting-item.checkbox-item label span{font-weight:500}.settings-modal .premium-unlock-notice{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-radius:12px;margin-top:20px;padding:20px;text-align:center}.settings-modal .premium-unlock-notice i{color:#ffc107;font-size:32px;margin-bottom:10px}.settings-modal .premium-unlock-notice p{margin:8px 0}.settings-modal .premium-unlock-notice p strong{color:#333}.settings-modal .premium-unlock-notice .btn{margin-top:15px}#gameOverOverlay{align-items:center;animation:fade-in .5s ease-out;backdrop-filter:blur(12px);background:rgba(0,0,0,.9);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:999}#gameOverOverlay.hidden{display:none}#gameOverOverlay .game-over-content{animation:slide-up .5s ease-out;background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.5);max-width:600px;padding:50px;text-align:center;width:90%}@media (max-width:768px){#gameOverOverlay .game-over-content{padding:30px 20px}}#gameOverOverlay .game-over-content h2{color:#333;font-family:Poppins,sans-serif;font-size:32px;margin-bottom:30px}@media (max-width:768px){#gameOverOverlay .game-over-content h2{font-size:26px}}#gameOverOverlay .game-over-content h2 i{color:#007abc;margin-right:10px}#gameOverOverlay .final-stats{display:grid;gap:20px;grid-template-columns:repeat(2,1fr);margin:30px 0}@media (max-width:768px){#gameOverOverlay .final-stats{gap:15px;grid-template-columns:1fr}}#gameOverOverlay .final-stats .stat-item{align-items:center;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:12px;display:flex;gap:15px;padding:20px}#gameOverOverlay .final-stats .stat-item i{color:#007abc;font-size:32px}#gameOverOverlay .final-stats .stat-item .stat-text{flex:1;text-align:left}#gameOverOverlay .final-stats .stat-item .stat-label{color:#666;display:block;font-size:12px;font-weight:600;margin-bottom:4px;text-transform:uppercase}#gameOverOverlay .final-stats .stat-item .stat-value{color:#333;display:block;font-size:24px;font-weight:700}@media (max-width:768px){#gameOverOverlay .final-stats .stat-item .stat-value{font-size:20px}}#gameOverOverlay .save-progress-notice{background:#e8f5e9;border-radius:8px;color:#00c853;font-size:14px;font-weight:600;margin:20px 0;padding:12px 20px}#gameOverOverlay .save-progress-notice i{margin-right:8px}#gameOverOverlay .button-group{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-top:30px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.hidden{display:none!important}.text-center{text-align:center}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}