:root{--ink:#33203f;--paper:#fff8e7;--gold:#ffcf3f;--red:#ff4d6d;--blue:#3fb8ff;--font:ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;font-family:var(--font);color:var(--ink);-webkit-user-select:none;user-select:none;background:#8fd3ff;margin:0;overflow:hidden}#app{position:fixed;inset:0}#c{cursor:crosshair;width:100%;height:100%;display:block}.hidden{display:none!important}#hud{pointer-events:none;font-weight:800;position:absolute;inset:0}#hud>div{position:absolute}#dmg-layer{inset:0;overflow:hidden}.dmg{color:#fff;white-space:nowrap;will-change:transform;text-shadow:-2px 0 var(--ink), 2px 0 var(--ink), 0 -2px var(--ink), 0 2px var(--ink), 0 3px 0 var(--ink);font-size:20px;font-weight:900;position:absolute;top:0;left:0}.dmg.crit{color:#ffe14d;font-size:30px}.dmg.hurt{color:#ff6b6b;font-size:26px}.dmg.heal{color:#7dff9b;font-size:24px}#vignette{opacity:0;transition:opacity .35s;inset:0;box-shadow:inset 0 0 160px 40px #ff283cbf}#vignette.on{opacity:1;transition:none}#vignette.low{opacity:.45;animation:.9s infinite alternate pulse}@keyframes pulse{to{opacity:.15}}#top-left{align-items:center;gap:10px;display:flex;top:16px;left:18px}#level-badge{background:var(--gold);border:4px solid var(--ink);width:68px;height:68px;box-shadow:0 4px 0 var(--ink);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;line-height:1;display:flex}#level-badge small{font-size:12px}#level-badge span{font-size:28px;font-weight:900}.stat-col{flex-direction:column;gap:6px;display:flex}.chip{background:var(--paper);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:999px;align-items:center;gap:6px;padding:2px 12px 2px 8px;font-size:16px;display:flex}#top-center{text-align:center;width:min(520px,60vw);top:12px;left:50%;transform:translate(-50%)}#timer{color:#fff;text-shadow:-3px 0 var(--ink), 3px 0 var(--ink), 0 -3px var(--ink), 0 3px var(--ink), 0 6px 0 var(--ink);letter-spacing:2px;font-size:38px;font-weight:900}#next-boss{color:#fff;text-shadow:-1.5px 0 var(--ink), 1.5px 0 var(--ink), 0 -1.5px var(--ink), 0 2px var(--ink);margin-top:2px;font-size:14px}#boss-bar{margin-top:8px}#boss-name{color:#ffd9ff;text-shadow:-2px 0 var(--ink), 2px 0 var(--ink), 0 -2px var(--ink), 0 3px var(--ink);margin-bottom:4px;font-size:18px}#boss-bar .bar{height:22px}#boss-fill{background:linear-gradient(#e58bff,#b657e8)}.bar{border:4px solid var(--ink);height:26px;box-shadow:0 4px 0 var(--ink);background:#4a3558;border-radius:999px;position:relative;overflow:hidden}.bar i{transform-origin:0;border-radius:999px;width:100%;position:absolute;top:0;bottom:0;left:0}.bar span{color:#fff;text-shadow:0 2px 0 var(--ink), -1px 0 var(--ink), 1px 0 var(--ink);justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;inset:0}#hp-fill{background:linear-gradient(#ff8fa3,#ff4d6d)}#hp-lag{background:#fff;transition:transform .5s .15s}.bar.xp{border-width:3px;height:14px;margin-top:8px}#xp-fill{background:linear-gradient(#8ff7ff,#3fb8ff)}#top-right{border:3px solid var(--ink);width:190px;box-shadow:0 4px 0 var(--ink);background:#fff8e7eb;border-radius:16px;padding:8px 10px;top:16px;right:18px}#equip-title{opacity:.7;margin-bottom:4px;font-size:13px}#equip-list{flex-direction:column;gap:3px;font-size:14px;display:flex}#equip-list .row{justify-content:space-between;gap:6px;display:flex}#equip-list .row b{color:#d6336c}#equip-list .empty{opacity:.5;font-size:13px;font-weight:600}#buffs{flex-direction:column;gap:8px;display:flex;top:100px;left:18px}.buff{background:var(--paper);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:14px;align-items:center;gap:8px;padding:4px 12px 4px 6px;font-size:15px;display:flex;position:relative;overflow:hidden}.buff .ic{font-size:22px}.buff i{transform-origin:0;width:100%;height:4px;position:absolute;bottom:0;left:0}#toasts{flex-direction:column;align-items:flex-end;gap:8px;display:flex;top:50%;right:18px;transform:translateY(-50%)}.toast{background:var(--ink);color:#fff;border:3px solid #fff;border-radius:14px;align-items:center;gap:8px;padding:6px 14px 6px 8px;font-size:15px;animation:.25s cubic-bezier(.2,1.6,.4,1) toast-in,.4s 2.6s forwards toast-out;display:flex}.toast .ic{font-size:22px}.toast span:last-child{opacity:.85;font-weight:700}.toast.r1{border-color:#59c2ff}.toast.r2{border-color:#ffb938;box-shadow:0 0 18px #ffb938}@keyframes toast-in{0%{opacity:0;transform:translate(60px)scale(.8)}}@keyframes toast-out{to{opacity:0;transform:translate(40px)}}#banner{text-align:center;white-space:nowrap;top:24%;left:50%;transform:translate(-50%)}.banner-text{color:var(--gold);text-shadow:-4px 0 var(--ink), 4px 0 var(--ink), 0 -4px var(--ink), 0 4px var(--ink), 0 8px 0 var(--ink);font-size:46px;font-weight:900;animation:1.8s forwards banner}.banner-text.warn{color:#ff9d6c;font-size:36px}.banner-text.boss{color:#f0a8ff;font-size:52px}@keyframes banner{0%{opacity:0;transform:scale(.3)}12%{opacity:1;transform:scale(1.15)}20%{transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.1)translateY(-20px)}}#bottom{width:min(560px,80vw);bottom:56px;left:50%;transform:translate(-50%)}#skillbar{justify-content:center;align-items:flex-end;gap:10px;margin-top:14px;display:flex}.slot{border:4px solid var(--ink);background:var(--paper);width:62px;height:62px;box-shadow:0 4px 0 var(--ink);border-radius:16px;justify-content:center;align-items:center;display:flex;position:relative}.slot .nm{white-space:nowrap;color:#fff;text-shadow:0 1px 0 var(--ink), -1px 0 var(--ink), 1px 0 var(--ink), 0 -1px var(--ink);margin-top:7px;font-size:11px;font-style:normal;position:absolute;top:100%}.slot svg{width:40px;height:40px}.slot .cd{background:conic-gradient(#33203fc7 var(--p,0%), transparent 0);border-radius:11px;position:absolute;inset:0}.slot .num{color:#fff;text-shadow:0 2px 0 var(--ink), -2px 0 var(--ink), 2px 0 var(--ink), 0 -2px var(--ink);justify-content:center;align-items:center;font-size:22px;display:flex;position:absolute;inset:0}.slot .key{background:var(--ink);color:#fff;z-index:2;border-radius:6px;padding:0 5px;font-size:12px;position:absolute;top:1px;left:3px}.slot.ready{animation:.35s ready}.slot.form{border-radius:50%;width:74px;height:74px;margin-right:8px}.slot.form .cd{border-radius:50%}.slot.form.melee{background:#ffd0d8}.slot.form.ranged{background:#cfeeff}.slot.form svg{width:46px;height:46px}.slot.sep{margin-right:14px}@keyframes ready{0%{transform:scale(1)}40%{background:#fff3b0;transform:scale(1.18)}to{transform:scale(1)}}#hint{text-align:center;color:#fff;opacity:.9;text-shadow:0 1px 0 var(--ink), -1px 0 var(--ink), 1px 0 var(--ink), 0 -1px var(--ink);font-size:12px;font-weight:700;bottom:10px;left:0;right:0}.screen{background:#33203f73;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#screen-title{background:linear-gradient(#3f9ff526,#33203f73)}.panel{background:var(--paper);border:5px solid var(--ink);box-shadow:0 10px 0 var(--ink);text-align:center;border-radius:28px;max-width:min(560px,92vw);padding:28px 40px 32px;animation:.35s cubic-bezier(.2,1.5,.4,1) pop}.panel.small{min-width:340px}@keyframes pop{0%{opacity:0;transform:scale(.7)}}h1{color:var(--red);letter-spacing:4px;text-shadow:-3px 0 var(--ink), 3px 0 var(--ink), 0 -3px var(--ink), 0 3px var(--ink), 0 8px 0 var(--ink);margin:0;font-size:64px;font-weight:900}h1 span{color:var(--gold)}h2{color:var(--gold);text-shadow:-3px 0 var(--ink), 3px 0 var(--ink), 0 -3px var(--ink), 0 3px var(--ink), 0 6px 0 var(--ink);margin:0 0 8px;font-size:44px;font-weight:900}.sub{margin:14px 0 16px;font-size:17px;font-weight:700}.keys{justify-items:start;gap:8px;width:-moz-fit-content;width:fit-content;margin:0 auto 14px;font-size:15px;font-weight:700;display:grid}.keys div{align-items:center;gap:6px;display:flex}.keys span{margin:0 8px 0 4px}kbd{border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);background:#fff;border-radius:9px;padding:1px 9px;font-family:inherit;font-size:14px;font-weight:800}.tip{opacity:.85;margin:0 0 18px;font-size:14px;font-weight:600;line-height:1.7}.tip b{color:#d6336c}.btn{width:100%;color:var(--ink);background:var(--gold);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);cursor:pointer;border-radius:18px;margin-top:12px;padding:10px 0;font-family:inherit;font-size:24px;font-weight:900;transition:transform 80ms,box-shadow 80ms;display:block}.btn:hover:not(:disabled){box-shadow:0 8px 0 var(--ink);transform:translateY(-2px)}.btn:active:not(:disabled){box-shadow:0 2px 0 var(--ink);transform:translateY(4px)}.btn:disabled{opacity:.6;cursor:default}.btn.ghost{background:#fff;font-size:18px}#end-stats{grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 6px;display:grid}#end-stats div{border:3px solid var(--ink);background:#fff;border-radius:14px;padding:8px;font-size:13px;font-weight:700}#end-stats b{color:#d6336c;font-size:24px;font-weight:900;display:block}