:root{color:#eff7ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#08111b;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at top,#5a91ff2e,#0000 35%),linear-gradient(#08111b 0%,#102235 100%)}canvas{display:block}#app{position:relative}#loading-screen,#start-screen{z-index:30;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:radial-gradient(circle,#64adff2e,#0000 35%),linear-gradient(#040a16b8 0%,#040a16e0 100%);place-items:center;padding:24px;display:grid;position:absolute;inset:0}#loading-screen.hidden,#start-screen.hidden{display:none}.loading-panel,.start-panel{text-align:center;width:min(520px,100vw - 36px);padding:28px 24px}.loading-panel{width:min(680px,100vw - 48px);padding:40px 36px}.loading-kicker,.start-kicker{letter-spacing:.35em;color:#9fddff;text-transform:uppercase;margin:0 0 10px}.loading-panel h1,.start-panel h1{letter-spacing:.08em;margin:0;font-size:clamp(36px,6vw,56px)}.loading-panel p,.start-panel p{color:#e8f4ffdb;margin:14px 0 0;line-height:1.7}.loading-progress{background:linear-gradient(#2c0808f2,#160404f2),#120505eb;border:2px solid #ff85856b;border-radius:999px;width:100%;height:24px;margin-top:26px;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0a,0 0 28px #ff42422e}.loading-progress-fill{transform-origin:0;background:linear-gradient(90deg,#7d0a0af5,#d61a1afa 48%,#ff6e6e);width:100%;height:100%;transition:transform .18s;transform:scaleX(0);box-shadow:inset 0 0 14px #ffdede38,0 0 22px #ff2e2e70}.loading-progress-meta{justify-content:space-between;align-items:center;gap:12px;margin-top:10px;display:flex}.loading-loading-label,.loading-loading-detail{color:#ffe0e0e6;margin:0;font-size:14px;line-height:1.5}.loading-loading-label{text-align:left}.loading-loading-detail{color:#ff9c9ceb;white-space:nowrap;font-weight:700}.start-field{color:#c6e3ffeb;letter-spacing:.08em;text-align:left;margin:18px 0 8px;font-size:13px;display:block}#player-name{color:#f4fbff;background:#0a1424c7;border:1px solid #ade4ff47;border-radius:14px;outline:none;width:100%;padding:12px 14px;font-size:15px;transition:border-color .12s,box-shadow .12s,background .12s}#player-name:focus{background:#0c182ce6;border-color:#ade4ff9e;box-shadow:0 0 0 3px #6ab4ff29}#player-name::placeholder{color:#c6e3ff73}#start-button{color:#f4fbff;letter-spacing:.08em;cursor:pointer;background:linear-gradient(#6cbfff47,#4078ff38);border:1px solid #ade4ff61;border-radius:999px;margin-top:22px;padding:12px 28px;font-size:16px;font-weight:700;transition:transform .12s,box-shadow .12s,border-color .12s;box-shadow:0 12px 28px #16387047}#start-button:hover{border-color:#d7f3ff94;transform:translateY(-2px);box-shadow:0 16px 34px #22489057}#start-button:active{transform:translateY(0)}#start-button:disabled{cursor:wait;color:#e4f2ffb8;background:linear-gradient(#466c9638,#2a405c38);border-color:#ade4ff2e;transform:none;box-shadow:0 8px 20px #08122442}#hud{pointer-events:none;z-index:10;flex-direction:column;justify-content:space-between;padding:18px;display:flex;position:absolute;inset:0}.panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#040c1894;border:1px solid #95d6ff38;border-radius:16px;width:fit-content;max-width:min(440px,100vw - 36px);padding:14px 16px;box-shadow:0 16px 40px #00000047}.title-panel h1,.overlay-panel h2{letter-spacing:.02em;margin:0;font-weight:700}.tips-panel p,.overlay-panel p{color:#e8f4ffdb;margin:6px 0 0;line-height:1.5}.stats-stack{pointer-events:none;flex-direction:column;align-items:center;gap:10px;width:min(620px,100vw - 120px);display:flex;position:absolute;top:18px;left:50%;transform:translate(-50%)}.stats-panel{grid-template-columns:repeat(4,minmax(118px,1fr));gap:12px;width:100%;display:grid}.audio-panel{pointer-events:auto;flex-direction:column;gap:10px;display:flex;position:absolute;top:18px;right:18px}.audio-controls{align-items:center;gap:10px;font-size:14px;display:flex}.audio-controls label{color:#c6e3ffe6;cursor:pointer;align-items:center;gap:5px;display:flex}.audio-controls input[type=range]{cursor:pointer;width:80px}.panel.skill-bar{pointer-events:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(560px,100vw - 36px);max-width:min(560px,100vw - 36px);padding:12px 14px;display:grid;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.skill-slot{color:#f3f9ff;opacity:.92;background:#0a1222b8;border:1px solid #a0d8ff2e;border-radius:14px;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;min-width:0;padding:10px 12px;transition:border-color .12s,background .12s,opacity .12s,transform .12s;display:grid}.skill-slot.active{background:#16223aeb;border-color:#ffffff6b;transform:translateY(-2px)}.skill-slot.empty{opacity:.42}.skill-icon{background:#ffffff14;border:1px solid #ffffff1f;border-radius:10px;place-items:center;width:34px;height:34px;font-size:17px;font-weight:700;display:inline-grid}.skill-icon.lightning{color:#f1d9ff;background:#9922ff3d;border-color:#cc88ff6b}.skill-icon.dash{color:#ffe7e5;background:#ff3b303d;border-color:#ff7a727a}.skill-icon.wall{color:#fff2d8;background:#eeaa223d;border-color:#ffcc886b}.skill-label{letter-spacing:.04em;white-space:nowrap;font-size:14px}.skill-slot strong{color:#fff;justify-self:end;font-size:18px}.stat{flex-direction:column;gap:6px;min-width:0;display:flex}.stat span{color:#c6e3ffb3;text-transform:uppercase;letter-spacing:.12em;font-size:12px}.stat strong{color:#f4fbff;font-size:18px}.tips-panel{pointer-events:auto;align-items:flex-start;gap:10px;width:fit-content;max-width:min(430px,100vw - 36px);transition:opacity .18s,width .18s,max-width .18s,height .18s,padding .18s,border-color .18s,background .18s,box-shadow .18s;display:flex;position:absolute;bottom:108px;right:18px;overflow:hidden}.defeat-feed{color:#fff;letter-spacing:.03em;white-space:nowrap;text-overflow:ellipsis;opacity:0;text-align:center;background:linear-gradient(#a8121cf0,#680810f0),radial-gradient(circle at top,#ffa8a833,#0000 60%);border:1px solid #ffc2c25c;border-radius:15px;justify-content:center;align-items:center;width:min(560px,100vw - 160px);min-height:0;padding:13px 20px;font-size:18px;font-weight:800;line-height:1.35;transition:opacity .12s,color .12s,transform .12s;display:flex;position:relative;overflow:hidden;transform:translateY(-4px);box-shadow:inset 0 0 0 1px #fff5f514,0 12px 24px #00000047,0 0 24px #ff585838}.defeat-feed:after{content:"";opacity:0;pointer-events:none;background:linear-gradient(90deg,#fff0,#ffffff14,#ffffff52,#fff0);width:28%;position:absolute;inset:-20% auto -20% -32%;transform:skew(-20deg)translate(0)}.defeat-feed:empty{opacity:0}.defeat-feed.visible{transform:translateY(0)}.defeat-feed.pulse{animation:.26s ease-out defeat-feed-pop}.defeat-feed.pulse:after{animation:.42s ease-out defeat-feed-sheen}.defeat-feed.accent{color:#fff;text-shadow:0 0 16px #ffffff2e;background:linear-gradient(#d21824f5,#840812f5),radial-gradient(circle at top,#ffd4d43d,#0000 60%);border-color:#ffe0e085;box-shadow:inset 0 0 0 1px #fff8f81a,0 16px 30px #0000004d,0 0 32px #ff484847}.defeat-feed-text{text-overflow:ellipsis;color:#fff;min-width:0;font-weight:800;overflow:hidden}@keyframes defeat-feed-pop{0%{transform:translateY(-8px)scale(.97)}55%{transform:translateY(0)scale(1.02)}to{transform:translateY(0)scale(1)}}@keyframes defeat-feed-sheen{0%{opacity:0;transform:skew(-20deg)translate(0)}20%{opacity:1}to{opacity:0;transform:skew(-20deg)translate(380%)}}.tips-toggle{color:#d8efff;cursor:pointer;pointer-events:auto;background:#081222d1;border:1px solid #95d6ff3d;border-radius:10px;flex:none;align-self:flex-start;width:28px;min-width:28px;height:34px;padding:0;font-size:14px;font-weight:700;line-height:1;transition:background .12s,border-color .12s,transform .12s}.tips-toggle:hover{background:#0e1c34eb;border-color:#c2eaff66;transform:translate(-1px)}.tips-content{opacity:1;flex:none;width:min(340px,100vw - 120px);min-width:0;max-width:min(340px,100vw - 120px);transition:width .18s,max-width .18s,opacity .14s;overflow:hidden}.tips-panel.collapsed{width:40px;min-width:40px;max-width:40px;height:var(--tips-panel-height,160px);flex-direction:column;justify-content:flex-start;align-items:center;gap:0;padding:8px 6px;display:flex}.tips-panel.collapsed:after{content:"游戏说明";color:#dff2ffc7;letter-spacing:.18em;writing-mode:vertical-rl;text-orientation:upright;-webkit-user-select:none;user-select:none;pointer-events:none;flex:auto;justify-content:center;align-items:center;margin-top:10px;font-size:12px;font-weight:700;line-height:1.15;display:flex}.tips-panel.collapsed .tips-content{opacity:0;visibility:hidden;pointer-events:none;flex-basis:0;width:0;max-width:0;height:0;max-height:0;position:absolute}#impact-flash{z-index:9;pointer-events:none;opacity:0;mix-blend-mode:screen;filter:blur(18px);background:radial-gradient(circle,#fff4d47a,#0000 24%),radial-gradient(circle,#ffa65947,#0000 52%),radial-gradient(circle,#9ddcff29,#0000 78%);transition:opacity 60ms linear,transform 60ms linear;position:absolute;inset:-8%;transform:scale(1)}.orb-legend{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.orb-chip{color:#eef8ff;background:#ffffff0f;border:1px solid #ffffff24;border-radius:999px;align-items:center;padding:5px 10px;font-size:13px;line-height:1;display:inline-flex}.orb-chip.blade{background:#5eb8ff1f;border-color:#5eb8ff6b}.orb-chip.dash{background:#ff3b3024;border-color:#ff706770}.orb-chip.heal{background:#ff73c729;border-color:#ff7ec975}.orb-chip.speed{background:#52d99b1f;border-color:#52d99b6b}#overlay,#pause-overlay{z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#02070e85;place-items:center;display:grid;position:absolute;inset:0}#overlay.hidden,#pause-overlay.hidden{display:none}.overlay-panel{text-align:center;min-width:min(460px,100vw - 32px)}.pause-panel{pointer-events:auto}.overlay-actions{justify-content:center;gap:12px;margin-top:20px;display:flex}.overlay-button{color:#f4fbff;letter-spacing:.08em;cursor:pointer;background:#0a1424c7;border:1px solid #ade4ff4d;border-radius:999px;min-width:120px;padding:11px 22px;font-size:15px;font-weight:700;transition:transform .12s,border-color .12s,background .12s}.overlay-button:hover{background:#101e34eb;border-color:#ade4ff8a;transform:translateY(-1px)}.overlay-button.primary{background:linear-gradient(#6cbfff47,#4078ff38)}.overlay-tip{color:#8fdcff;margin-top:14px}@media (width<=860px){#hud{gap:12px;padding:12px}.stats-stack{width:min(100vw - 24px,520px);top:12px}.stats-panel{grid-template-columns:repeat(3,minmax(96px,1fr))}.audio-panel{top:12px}.panel{max-width:calc(100vw - 24px)}.tips-panel{max-width:min(360px,100vw - 24px);bottom:104px;right:12px}.defeat-feed{width:min(460px,100vw - 24px);font-size:16px}.panel.skill-bar{grid-template-columns:1fr;width:calc(100vw - 24px);max-width:560px;display:grid;bottom:12px}.skill-slot{grid-template-columns:34px 1fr auto;min-width:0}}