*{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;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#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}#top-banner{position:absolute;top:62px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}#guard-hint{padding:6px 18px;background:#66ccff1f;border:1px solid rgba(102,204,255,.5);border-radius:20px;font-size:13px;font-weight:700;letter-spacing:1px;color:#6cf;white-space:nowrap}#lesson-panel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 20px;background:#8ad8ff1a;border:1px solid rgba(138,216,255,.4);border-radius:12px;max-width:min(90vw,520px);text-align:center;pointer-events:auto}#lesson-instruction{font-size:13px;font-weight:700;color:#8ad8ff}#lesson-progress-row{display:flex;align-items:center;gap:12px}#lesson-progress{font-size:12px;opacity:.8}#lesson-exit-button{padding:3px 12px;font-size:11px;color:#e8ecf4;background:#ffffff14;border:1px solid rgba(255,255,255,.25);border-radius:14px;cursor:pointer}#lesson-exit-button:hover{background:#ffffff2e}#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}#touch-controls{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}#touch-stick{position:absolute;left:28px;bottom:28px;width:140px;height:140px;border-radius:50%;background:#ffffff14;border:1px solid rgba(255,255,255,.25);touch-action:none;pointer-events:auto}#touch-stick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin-left:-28px;margin-top:-28px;border-radius:50%;background:#ffffff47;border:1px solid rgba(255,255,255,.4);transition:transform .05s linear}#touch-buttons{position:absolute;right:20px;bottom:24px;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.touch-row{display:flex;gap:12px}.touch-btn{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;background:#ffffff1a;border:1px solid rgba(255,255,255,.25);touch-action:none;pointer-events:auto}.touch-btn.touch-guard{font-size:24px}.touch-btn.pressed{background:#ffffff52}.touch-btn.touch-follow{border-color:#ffe08a99}#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,#battle-select-overlay,#lesson-select-overlay,#result-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;gap:18px;background:#080a14e0;z-index:10;overflow-y:auto;padding:40px 20px}#start-overlay,#result-overlay{justify-content:center}#battle-select-overlay,#lesson-select-overlay{justify-content:flex-start}#start-overlay h1,#battle-select-overlay h1,#lesson-select-overlay h1,#result-overlay h1{font-size:40px;letter-spacing:4px}.select-list{display:flex;flex-direction:column;gap:12px;width:min(90vw,420px)}.select-item{display:flex;flex-direction:column;gap:4px;padding:14px 20px;text-align:left;color:#e8ecf4;background:#ffffff0f;border:1px solid rgba(255,255,255,.2);border-radius:12px;cursor:pointer;width:min(90vw,420px)}.select-item:hover{background:#ffffff24;border-color:#8ad8ff80}.select-item-name{font-size:16px;font-weight:700;letter-spacing:1px}.select-item-desc{font-size:12px;opacity:.7}.back-link{margin-top:4px;padding:8px 22px;font-size:13px;letter-spacing:1px;color:#e8ecf4;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:18px;cursor:pointer}.back-link:hover{background:#ffffff1a}#result-text.win{color:#ffe08a}#result-text.lose{color:#ff7a5c}.controls{font-size:14px;opacity:.85}.hint{font-size:12px;opacity:.55}.primary-button,.secondary-button{margin-top:10px;padding:12px 36px;font-size:16px;font-weight:700;letter-spacing:1px;border-radius:24px;cursor:pointer}.primary-button{color:#0d0f1a;background:linear-gradient(90deg,#63b4ff,#8ad8ff);border:none}.primary-button:hover{filter:brightness(1.1)}.primary-button:disabled{opacity:.6;cursor:wait}.secondary-button{color:#e8ecf4;background:#ffffff14;border:1px solid rgba(255,255,255,.3)}.secondary-button:hover{background:#ffffff29}.help-button{padding:8px 22px;font-size:13px;letter-spacing:1px;color:#e8ecf4;background:#ffffff14;border:1px solid rgba(255,255,255,.25);border-radius:18px;cursor:pointer}.help-button:hover{background:#ffffff29}#help-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#04050abf}#help-panel{position:relative;width:min(92vw,640px);max-height:85vh;overflow-y:auto;background:#14172a;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:30px 32px 26px;scrollbar-width:thin;scrollbar-color:rgba(138,216,255,.45) rgba(255,255,255,.06)}#help-panel::-webkit-scrollbar{width:8px}#help-panel::-webkit-scrollbar-track{background:#ffffff0f;border-radius:8px}#help-panel::-webkit-scrollbar-thumb{background:#8ad8ff73;border-radius:8px}#help-panel::-webkit-scrollbar-thumb:hover{background:#8ad8ffb3}#help-panel h2{font-size:16px;letter-spacing:1px;margin:22px 0 10px;color:#8ad8ff}.help-note{font-size:13px;line-height:1.7;opacity:.85;margin-bottom:4px}.help-table-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(138,216,255,.45) rgba(255,255,255,.06)}.help-table-wrap::-webkit-scrollbar{height:8px}.help-table-wrap::-webkit-scrollbar-track{background:#ffffff0f;border-radius:8px}.help-table-wrap::-webkit-scrollbar-thumb{background:#8ad8ff73;border-radius:8px}.help-table{width:100%;min-width:480px;border-collapse:collapse;font-size:13px;margin:6px 0 12px}.help-table th,.help-table td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.1)}.help-table th{opacity:.6;font-weight:500;font-size:11px;letter-spacing:1px}#help-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:#e8ecf4;font-size:18px;line-height:1;cursor:pointer}#help-close:hover{background:#ffffff29}@media (pointer: coarse){#groove{left:50%;bottom:auto;top:74px;transform:translate(-50%)}#top-banner{top:108px}#volume-panel{right:12px;bottom:auto;top:118px}}