:root{--mint:#45d6c3;--orange:#ff8a3d;--warn:#ff5a36;--cream:#fff3d6;--ink:#1b1530;--panel:#16122cd1;--font:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;font-family:var(--font);color:var(--cream);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;background:#0d1033;margin:0;overflow:hidden}canvas#game{width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui .screen{pointer-events:auto;display:none;position:absolute;inset:0}#ui .screen.show{display:flex}.btn{font-family:var(--font);color:var(--ink);background:var(--cream);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);cursor:pointer;pointer-events:auto;border-radius:14px;padding:.55em 1.4em;font-size:clamp(16px,2.2vw,22px);font-weight:800;transition:transform 60ms,background .12s}.btn:hover,.btn.focus{background:#ffe39a;transform:translateY(-2px)}.btn:active{box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}.btn.mint{background:var(--mint)}.btn.small{box-shadow:0 3px 0 var(--ink);border-radius:10px;padding:.35em .9em;font-size:15px}.btn.ghost{color:var(--cream);box-shadow:none;background:#fff3d61f;border-color:#fff3d680}.btn.sel{background:var(--mint)}#title{background:radial-gradient(#0d103300 30%,#0d103399 100%);flex-direction:column;justify-content:center;align-items:center;gap:2.2vh}.logo{letter-spacing:.04em;color:#ffd23f;-webkit-text-stroke:clamp(3px, .5vw, 7px) var(--ink);paint-order:stroke fill;text-shadow:0 .08em 0 var(--ink), 0 .12em .3em #0006;font-size:clamp(44px,9vw,110px);font-weight:900;animation:2.4s ease-in-out infinite logoBob;transform:rotate(-3deg)}.logo .bang{color:var(--warn);animation:.9s ease-in-out infinite bang;display:inline-block}@keyframes logoBob{50%{transform:rotate(-1deg)translateY(-6px)}}@keyframes bang{50%{transform:scale(1.25)rotate(8deg)}}.subtitle{opacity:.9;background:var(--panel);border-radius:99px;padding:.4em 1em;font-size:clamp(14px,2vw,20px)}.menu{flex-direction:column;align-items:stretch;gap:1.4vh;min-width:min(320px,70vw);display:flex}.footer{opacity:.7;text-align:center;padding:0 1em;font-size:13px;position:absolute;bottom:2vh}#select{background:#0d10338c;flex-direction:column;justify-content:center;align-items:center;gap:2vh}#select h2{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;margin:0;font-size:clamp(22px,3.4vw,36px)}.cols{align-items:stretch;gap:3vw;display:flex}.col{background:var(--panel);border:3px solid #ffffff14;border-radius:18px;flex-direction:column;align-items:center;gap:1vh;padding:1.4vh 1.4vw;display:flex}.col h3{margin:0;font-size:18px}.col.p1 h3{color:var(--mint)}.col.p2 h3{color:var(--orange)}.cards{gap:1vw;display:flex}.card{cursor:pointer;text-align:center;background:#2a2350;border:3px solid #0000;border-radius:14px;width:clamp(110px,15vw,190px);padding:8px;transition:transform .1s,border-color .1s}.card img{aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#4a4380,#221c44);border-radius:10px;width:100%;display:block}.card .nm{margin-top:4px;font-size:clamp(14px,1.8vw,19px);font-weight:900}.card .ds{opacity:.8;min-height:3em;margin-top:2px;font-size:12px;line-height:1.35}.card:hover{transform:translateY(-3px)}.col.p1 .card.sel{border-color:var(--mint);box-shadow:0 0 18px #45d6c380}.col.p2 .card.sel{border-color:var(--orange);box-shadow:0 0 18px #ff8a3d80}.diff{gap:8px;display:flex}.row{align-items:center;gap:12px;display:flex}#hud{pointer-events:none;display:none;position:absolute;inset:0}#hud.show{display:block}.top{top:max(10px, env(safe-area-inset-top));justify-content:center;align-items:flex-start;gap:1.2vw;padding:0 2vw;display:flex;position:absolute;left:0;right:0}.side{flex:1;align-items:center;gap:8px;max-width:42vw;display:flex}.side.p2{flex-direction:row-reverse}.portrait{border:3px solid var(--mint);width:clamp(46px,6.2vw,72px);height:clamp(46px,6.2vw,72px);box-shadow:0 3px 0 var(--ink);background:#2a2350;border-radius:50%;flex:none;overflow:hidden}.p2 .portrait{border-color:var(--orange)}.portrait img{width:100%;height:100%;display:block}.p2 .portrait img{transform:scaleX(-1)}.bars{flex-direction:column;flex:1;gap:3px;display:flex}.p2 .bars{align-items:flex-end}.nameRow{text-shadow:0 2px 0 var(--ink);justify-content:space-between;width:100%;font-size:clamp(12px,1.5vw,16px);font-weight:900;display:flex}.p2 .nameRow{flex-direction:row-reverse}.pips{gap:4px;display:flex}.pip{border:2px solid var(--cream);background:0 0;border-radius:50%;width:12px;height:12px}.pip.on{background:#ffd23f;box-shadow:0 0 8px #ffd23f}.hp{border:3px solid var(--ink);background:#3a1830;border-radius:6px;width:100%;height:clamp(14px,2vw,20px);position:relative;overflow:hidden}.hp .trail,.hp .fill{position:absolute;top:0;bottom:0;left:0}.p2 .hp .trail,.p2 .hp .fill{left:auto;right:0}.hp .trail{background:#fff;transition:width .5s ease-in .35s}.hp .fill{background:linear-gradient(#ffe35a,#ffb22b)}.hp.low .fill{background:repeating-linear-gradient(135deg,#ff7a3a 0 8px,#ffb22b 8px 16px);animation:.6s linear infinite lowhp}@keyframes lowhp{50%{filter:brightness(1.3)}}.guard{background:#00000080;border-radius:3px;width:70%;height:6px;overflow:hidden}.guard .fill{background:var(--mint);height:100%;transition:width .1s}.p2 .guard .fill{margin-left:auto}.guard.lowg .fill{background:var(--warn)}.timer{text-align:center;background:var(--panel);border:3px solid var(--ink);min-width:clamp(56px,7vw,80px);text-shadow:0 3px 0 var(--ink);border-radius:14px;padding:6px 8px 8px;font-size:clamp(30px,4.6vw,52px);font-weight:900;line-height:1}.timer.hurry{color:var(--warn)}.bottom{bottom:max(10px, env(safe-area-inset-bottom));justify-content:space-between;align-items:flex-end;display:flex;position:absolute;left:2vw;right:2vw}.res{flex-direction:column;gap:6px;display:flex}.res.p2{align-items:flex-end}.meter{border:3px solid var(--ink);background:#0000008c;border-radius:8px;width:clamp(150px,22vw,280px);height:14px;position:relative;overflow:hidden}.meter .fill{background:linear-gradient(90deg,#b06cff,#ff6ad5);height:100%;transition:width .15s}.p2 .meter .fill{background:linear-gradient(270deg,#b06cff,#ff6ad5);margin-left:auto}.meter.full{animation:.5s ease-in-out infinite full}.meter.full .fill{background:repeating-linear-gradient(135deg,#ffd23f 0 8px,#ff6ad5 8px 16px)}@keyframes full{50%{box-shadow:0 0 14px #ffd23f}}.mlabel{text-shadow:0 2px 0 var(--ink);font-size:12px;font-weight:800}.skills{gap:6px;display:flex}.res.p2 .skills{flex-direction:row-reverse}.sk{border:3px solid var(--ink);width:clamp(40px,5vw,54px);height:clamp(40px,5vw,54px);box-shadow:0 3px 0 var(--ink);background:#2a2350;border-radius:12px;justify-content:center;align-items:center;font-size:clamp(12px,1.4vw,15px);font-weight:900;display:flex;position:relative;overflow:hidden}.sk .cd{background:conic-gradient(#000000a6 calc(var(--cd,0) * 1turn), transparent 0);position:absolute;inset:0}.sk .key{opacity:.8;font-size:10px;position:absolute;bottom:0;right:2px}.sk.ready{border-color:var(--mint)}.sk.ult{background:#4a2350}.sk.ult.ready{border-color:#ffd23f}.sk.ult .key{font-size:9px;right:1px}.combo{color:#ffd23f;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;opacity:0;font-size:clamp(22px,3.4vw,40px);font-weight:900;transition:opacity .2s;position:absolute;top:18vh}.combo.p1{left:3vw}.combo.p2{right:3vw}.combo.show{opacity:1}#announce{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#announce .txt{color:#ffd23f;-webkit-text-stroke:clamp(3px, .5vw, 7px) var(--ink);paint-order:stroke fill;text-shadow:0 .08em 0 var(--ink);white-space:nowrap;font-size:clamp(44px,10vw,120px);font-weight:900;animation:.35s cubic-bezier(.2,1.6,.4,1) both annIn}#announce .txt.red{color:var(--warn)}#announce .txt.out{animation:.25s ease-in both annOut}@keyframes annIn{0%{opacity:0;transform:scale(2.4)rotate(-8deg)}to{opacity:1;transform:scale(1)rotate(-3deg)}}@keyframes annOut{to{opacity:0;transform:scale(.6)rotate(4deg)}}#fx{pointer-events:none;position:absolute;inset:0;overflow:hidden}.float{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;white-space:nowrap;font-size:clamp(16px,2.2vw,26px);font-weight:900;animation:.9s ease-out forwards floatUp;position:absolute;transform:translate(-50%,-50%)}@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%)scale(.6)}15%{opacity:1;transform:translate(-50%,-60%)scale(1.15)}to{opacity:0;transform:translate(-50%,-160%)scale(1)}}.cardfx{transform:translate(-50%, -50%) rotate(var(--rot,-6deg));color:var(--ink);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);white-space:nowrap;background:#fff7d1;border-radius:12px;padding:.18em .5em;font-size:clamp(22px,3.6vw,44px);font-weight:900;animation:1.1s cubic-bezier(.2,1.5,.4,1) forwards cardPop;position:absolute}.cardfx.hot{background:#ffd23f}.cardfx.warn{background:#ff8a6a}@keyframes cardPop{0%{transform:translate(-50%, -50%) rotate(var(--rot)) scale(.2);opacity:0}18%{transform:translate(-50%, -50%) rotate(var(--rot)) scale(1.12);opacity:1}28%{transform:translate(-50%, -50%) rotate(calc(var(--rot) * -.6)) scale(1)}80%{opacity:1}to{transform:translate(-50%, -70%) rotate(var(--rot)) scale(.95);opacity:0}}#vignette{pointer-events:none;opacity:0;transition:opacity .15s;position:absolute;inset:0;box-shadow:inset 0 0 12vw #ff4628a6}#vignette.on{opacity:1}.modal{background:#0a081e99;justify-content:center;align-items:center}.panel{background:var(--panel);border:3px solid #ffffff1f;border-radius:22px;flex-direction:column;align-items:center;gap:1.6vh;max-width:92vw;max-height:92vh;padding:3vh 3vw;display:flex;overflow:auto}.panel h2{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;color:#ffd23f;margin:0;font-size:clamp(26px,4vw,44px)}.help table{border-collapse:collapse;font-size:clamp(12px,1.5vw,15px)}.help td,.help th{text-align:left;border-bottom:1px solid #ffffff1a;padding:4px 10px}.help th{color:var(--mint)}.help .note{opacity:.85;max-width:760px;font-size:13px;line-height:1.6}.kbd{text-align:center;border:2px solid #ffffff80;border-radius:6px;min-width:1.6em;margin:0 1px;padding:0 .35em;font-size:.9em;font-weight:800;display:inline-block}#training{background:var(--panel);pointer-events:auto;border-radius:14px;flex-direction:column;gap:6px;min-width:170px;padding:10px 12px;font-size:13px;display:none;position:absolute;top:15vh;right:1.5vw}#training.show{display:flex}#training .t{color:var(--mint);font-weight:900}#training .adv{font-size:22px;font-weight:900}#training .adv.pos{color:var(--mint)}#training .adv.neg{color:var(--warn)}#training select,#training label{font-family:var(--font);color:var(--cream);font-size:13px}#training select{background:#2a2350;border:1px solid #ffffff4d;border-radius:6px;padding:3px}#touch{pointer-events:none;display:none;position:absolute;inset:0}#touch.show{display:block}.tb{color:var(--cream);pointer-events:auto;text-shadow:0 2px 0 var(--ink);touch-action:none;background:#fff3d629;border:3px solid #fff3d68c;border-radius:50%;justify-content:center;align-items:center;font-size:15px;font-weight:900;display:flex;position:absolute}.tb.on{border-color:var(--mint);background:#45d6c380}.tb.big{background:#fff3d638;font-size:18px}#hud.touch .skills{display:none}#hud.touch .bottom{bottom:auto;top:calc(max(10px, env(safe-area-inset-top)) + clamp(50px, 6.6vw, 76px));left:2vw;right:2vw}#hud.touch .meter{width:clamp(110px,18vw,200px);height:10px}#hud.touch .mlabel{display:none}.tb .cd{background:conic-gradient(#0009 calc(var(--cd,0) * 1turn), transparent 0);pointer-events:none;border-radius:50%;position:absolute;inset:0}.tb.ult{border-color:#ffd23f}.tb.ult.ready{background:#ffd23f73}.tbpause{top:max(8px, env(safe-area-inset-top));pointer-events:auto;color:#fff;background:#00000059;border:2px solid #fff6;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-weight:900;display:none;position:absolute;left:50%;transform:translate(-50%,100%)}#touch.show .tbpause{display:flex}#rotate{z-index:10;text-align:center;background:#0d1033;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:2em;font-size:20px;display:none;position:fixed;inset:0}@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}#loading{z-index:20;background:#0d1033;justify-content:center;align-items:center;font-size:22px;font-weight:900;display:flex;position:fixed;inset:0}@media (max-height:520px){#title{justify-content:center;gap:1.4vh}.logo{font-size:min(15vh,9vw)}.subtitle{padding:.25em .9em;font-size:13px}.menu{gap:1.2vh;min-width:240px}.btn{box-shadow:0 3px 0 var(--ink);border-radius:11px;padding:.35em 1.1em;font-size:15px}.footer{display:none}#select{gap:1.2vh}#select h2{font-size:20px}.col{gap:.6vh;padding:1vh 1.2vw}.card{width:min(24vh,13vw);padding:5px}.card .ds{display:none}.card .nm{font-size:13px}.panel{gap:1.2vh;padding:2vh 2.4vw}.panel h2{font-size:24px}.help table{font-size:11px}.help td,.help th{padding:2px 6px}.help .note{font-size:11px;line-height:1.45}}body.inspect #ui,body.inspect #rotate{display:none!important}.insp-panel{color:#e8ecf4;box-sizing:border-box;z-index:20;background:#141824eb;width:360px;padding:10px 12px;font:12px/1.5 -apple-system,PingFang SC,sans-serif;position:fixed;top:0;bottom:0;right:0;overflow-y:auto}.insp-panel h2{margin:0 0 6px;font-size:16px}.insp-row{flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0;display:flex}.insp-k{color:#9fb0c8;flex:none;width:86px}.insp-panel button{color:#fff;cursor:pointer;background:#33415a;border:0;border-radius:4px;padding:3px 8px;font-size:12px}.insp-panel button:hover{background:#4a5d80}.insp-panel select{max-width:220px}.insp-panel input[type=range]{flex:1;min-width:120px}.insp-note{color:#ffd38a;margin:6px 0}.insp-readout{white-space:pre-wrap;color:#cfe3ff;margin-top:8px;font:11px/1.45 ui-monospace,Menlo,monospace}.insp-labels{pointer-events:none;z-index:10;position:fixed;inset:0}.insp-label{color:#fff;white-space:nowrap;background:#0000008c;border-radius:2px;padding:0 3px;font:10px ui-monospace,Menlo,monospace;position:absolute;top:0;left:0}.insp-label.box{color:#ffe08a}#debugPanel{left:50%;bottom:max(6px, env(safe-area-inset-bottom));z-index:30;pointer-events:auto;flex-direction:column-reverse;align-items:center;font:11px/1.45 ui-monospace,Menlo,monospace;position:fixed;transform:translate(-50%)}#debugPanel[style*=block]{display:flex!important}#debugPanel .dbg-toggle{color:#cfe3ff;cursor:pointer;background:#1418248c;border:1px solid #ffffff2e;border-radius:6px;padding:3px 9px;font-size:12px}#debugPanel .dbg-body{color:#dfe9ff;background:#0e121ee0;border-radius:8px;max-width:min(720px,92vw);max-height:46vh;margin-bottom:6px;padding:8px 10px;display:none;overflow:auto}#debugPanel.open .dbg-body{display:block}#debugPanel .dbg-btns{flex-wrap:wrap;gap:4px;margin-bottom:6px;display:flex}#debugPanel .dbg-btns button{color:#fff;cursor:pointer;background:#33415a;border:0;border-radius:4px;padding:3px 7px;font-size:11px}#debugPanel .dbg-text{white-space:pre-wrap;margin:0}body.inspect #debugPanel{display:none!important}