*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0d0f1a;font-family:Segoe UI,Hiragino Sans,sans-serif;color:#e8ecf4;-webkit-user-select:none;user-select:none}#app canvas{display:block}.hidden{display:none!important}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#hp-bars{position:absolute;top:18px;left:50%;transform:translate(-50%);display:flex;gap:40px}.hp-block{display:flex;flex-direction:column;gap:4px}.hp-label{font-size:11px;letter-spacing:2px;opacity:.7}.hp-bar{width:280px;height:12px;background:#ffffff14;border:1px solid rgba(255,255,255,.2);border-radius:6px;overflow:hidden}.hp-fill{height:100%;width:100%;border-radius:6px;transition:width .15s ease-out}.hp-fill.player{background:linear-gradient(90deg,#3a7bd5,#63b4ff)}.hp-fill.enemy{background:linear-gradient(90deg,#b03a3a,#ff7a5c)}#groove{position:absolute;left:22px;bottom:26px;display:flex;flex-direction:column;gap:4px}.groove-label{font-size:10px;letter-spacing:2px;opacity:.55}.groove-bar{width:160px;height:7px;background:#ffffff12;border:1px solid rgba(255,255,255,.15);border-radius:4px;overflow:hidden}#groove-fill{height:100%;width:0%;background:linear-gradient(90deg,#7f5bd5,#d56bff);border-radius:4px;transition:width .2s ease-out}#volume-panel{position:absolute;right:22px;bottom:22px;display:flex;flex-direction:column;gap:6px;padding:10px 14px;background:#0a0c188c;border:1px solid rgba(255,255,255,.12);border-radius:8px;pointer-events:auto}.vol-row{display:flex;align-items:center;gap:8px}.vol-row label{width:44px;font-size:11px;opacity:.7}.vol-row input[type=range]{width:110px;accent-color:#63b4ff}#float-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.float-text{position:absolute;transform:translate(-50%,-50%);font-weight:700;font-size:22px;text-shadow:0 2px 8px rgba(0,0,0,.7);animation:float-up .85s ease-out forwards}.float-text.perfect{color:#ffe08a;font-size:26px}.float-text.good{color:#8ad8ff}.float-text.miss{color:#8a8fa3}.float-text.info{color:#ff9d5c;font-size:24px}@keyframes float-up{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}to{opacity:0;transform:translate(-50%,-160%) scale(1)}}#damage-flash{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(255,40,40,.45) 100%);opacity:0;transition:opacity .12s ease-out}#damage-flash.active{opacity:1}#start-overlay,#result-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#080a14e0;z-index:10}#start-overlay h1,#result-overlay h1{font-size:40px;letter-spacing:4px}#result-text.win{color:#ffe08a}#result-text.lose{color:#ff7a5c}.controls{font-size:14px;opacity:.85}.hint{font-size:12px;opacity:.55}#start-button,#retry-button{margin-top:10px;padding:12px 36px;font-size:16px;font-weight:700;letter-spacing:1px;color:#0d0f1a;background:linear-gradient(90deg,#63b4ff,#8ad8ff);border:none;border-radius:24px;cursor:pointer}#start-button:hover,#retry-button:hover{filter:brightness(1.1)}#start-button:disabled{opacity:.6;cursor:wait}