:root{--accent:#66e6ff;--accent-rgb:102,230,255;--accent-dark:#14718a;--panel:rgba(12,18,31,.78);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#f7fbff;background:#111521;user-select:none;-webkit-user-select:none;touch-action:none}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#game{width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 50% 30%,#314052,#10131c 70%)}button{border:0;color:inherit;font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #fff;outline-offset:3px}#game canvas{display:block;width:100%;height:100%}#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle,transparent 50%,rgba(7,8,15,.35) 100%);transition:.08s}.hidden{display:none!important}
.screen{position:fixed;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}.screen.visible{opacity:1;visibility:visible}#start-screen{background:radial-gradient(circle at 50% 46%,rgba(35,60,84,.12),rgba(5,9,17,.86) 73%);text-align:center}.title-lockup{text-shadow:0 6px 24px #000}.eyebrow{display:block;margin-bottom:7px;color:#ffd67a;font:700 11px/1 "Arial Narrow",sans-serif;letter-spacing:.34em}h1{margin:0;font:900 clamp(43px,8vw,82px)/.92 "Arial Narrow","Microsoft YaHei",sans-serif;letter-spacing:.01em}h1 span{color:#ffd16d}.title-lockup p{margin:12px 0 20px;color:#cad7e5;font-size:clamp(11px,1.8vw,15px)}.hero-preview{display:flex;gap:9px;width:min(520px,88vw);margin-bottom:22px}.preview-card{position:relative;flex:1;min-width:0;padding:11px 8px 10px;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));box-shadow:inset 0 1px rgba(255,255,255,.16)}.preview-card:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--card);box-shadow:0 0 18px var(--card)}.preview-card b{display:block;font:900 22px/1 "Arial Narrow";letter-spacing:.09em}.preview-card span{color:#aab8c9;font-size:10px}.preview-card.gun{--card:#5ee6ff}.preview-card.blade{--card:#ffb34e}.preview-card.magic{--card:#b279ff}.primary-button{min-width:210px;padding:14px 24px;border-radius:9px;background:linear-gradient(135deg,#ffd977,#f49d45);color:#33200f;box-shadow:0 7px 25px rgba(246,168,67,.25),inset 0 1px rgba(255,255,255,.55);font-weight:800;transition:transform .15s}.primary-button:active{transform:scale(.96)}.primary-button i{margin-left:25px;font-size:23px;font-style:normal;line-height:0}.start-tip{margin-top:12px;color:#778598;font-size:9px;letter-spacing:.1em}
#hud{position:fixed;inset:0;z-index:5;pointer-events:none;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.topbar{display:flex;align-items:flex-start;justify-content:space-between}.status-card{display:flex;width:clamp(220px,34vw,350px);padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:linear-gradient(120deg,var(--panel),rgba(15,25,40,.48));box-shadow:0 8px 30px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(8px)}.avatar{display:grid;place-content:center;flex:0 0 48px;height:48px;margin-right:9px;border:2px solid var(--accent);border-radius:9px;background:linear-gradient(150deg,rgba(var(--accent-rgb),.48),rgba(8,20,28,.8));box-shadow:0 0 16px rgba(var(--accent-rgb),.2);font:900 26px/1 "Arial Narrow";transform:skew(-3deg)}.status-main{flex:1;min-width:0}.name-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px}.name-row strong{font:900 18px/1 "Arial Narrow";letter-spacing:.08em}.name-row span{color:#9fb2c6;font-size:9px}.bar{position:relative;height:11px;margin-top:5px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(0,0,0,.45);box-shadow:inset 0 1px 4px #000}.bar i{display:block;width:100%;height:100%;border-radius:inherit;transition:width .2s}.bar.health i{background:linear-gradient(90deg,#d82d4b,#ff6a72);box-shadow:0 0 8px #ff5367}.bar.energy{height:6px}.bar.energy i{background:linear-gradient(90deg,var(--accent-dark),var(--accent));box-shadow:0 0 8px var(--accent)}.bar em{position:absolute;inset:-1px 5px auto auto;font:700 8px/11px sans-serif;font-style:normal;text-shadow:0 1px #000}.mission-card{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;min-width:110px;padding:7px 18px 8px;transform:translateX(-50%);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);background:var(--panel);text-align:center;backdrop-filter:blur(8px)}.mission-card span{display:block;color:#9eb1c5;font-size:9px}.mission-card span b{color:#fff}.mission-card strong{display:block;color:#ffd577;font:900 22px/.9 "Arial Narrow";letter-spacing:.08em}.mission-card small{color:#6f7c8b;font-size:7px}.icon-button{pointer-events:auto;width:39px;height:39px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:var(--panel);color:#bdcbd9;font:800 14px/1 sans-serif;backdrop-filter:blur(8px)}
#hero-switcher{position:absolute;top:50%;left:max(12px,env(safe-area-inset-left));display:grid;gap:6px;transform:translateY(-50%);pointer-events:auto}.hero-chip{position:relative;display:grid;grid-template-columns:22px 1fr;grid-template-rows:1fr 1fr;align-items:center;width:88px;height:45px;padding:5px 8px;border:1px solid rgba(255,255,255,.11);border-radius:9px;background:rgba(10,15,25,.63);opacity:.62;text-align:left;backdrop-filter:blur(7px);transition:.2s}.hero-chip.active{width:96px;border-color:var(--accent);background:linear-gradient(90deg,rgba(var(--accent-rgb),.2),rgba(9,16,27,.8));box-shadow:0 0 18px rgba(var(--accent-rgb),.16),inset 3px 0 var(--accent);opacity:1}.hero-chip b{align-self:end;font:900 14px/1 "Arial Narrow";letter-spacing:.08em}.hero-chip small{align-self:start;color:#8798ab;font-size:8px}.chip-key{grid-row:1/3;display:grid;place-content:center;width:18px;height:24px;border-radius:5px;background:rgba(255,255,255,.09);color:#aebdca;font:700 10px/1 sans-serif}
.boss-bar{position:absolute;top:84px;left:50%;width:min(330px,48vw);transform:translateX(-50%);text-align:center}.boss-bar span{display:flex;justify-content:space-between;margin-bottom:3px;padding:0 6px;font:700 9px/1 sans-serif;letter-spacing:.12em;text-shadow:0 1px 3px #000}.boss-bar span em{color:#ff92ab;font-style:normal}.boss-bar>i{display:block;height:7px;padding:1px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(0,0,0,.7)}.boss-bar u{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9c1555,#ff4e7d);box-shadow:0 0 10px #ff3972;transition:width .2s}#wave-banner{position:absolute;top:36%;left:50%;display:grid;grid-template-columns:auto auto;padding:8px 28px 10px;transform:translate(-50%,-50%) scale(.75);border-top:1px solid rgba(255,214,120,.7);border-bottom:1px solid rgba(255,214,120,.7);background:linear-gradient(90deg,transparent,rgba(8,12,20,.82),transparent);opacity:0;text-align:center;transition:.35s}#wave-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}#wave-banner small{align-self:end;margin-right:8px;color:#ffd778;font:700 9px/1 sans-serif;letter-spacing:.2em}#wave-banner b{grid-row:1/3;grid-column:2;color:#fff1ca;font:900 40px/.7 "Arial Narrow"}#wave-banner span{grid-column:1/3;margin-top:8px;color:#ced9e5;font-size:9px;letter-spacing:.16em}#combo{position:absolute;top:24%;right:6%;transform:rotate(-4deg);text-align:right;text-shadow:0 3px 8px #000}#combo b{display:block;color:var(--accent);font:italic 900 44px/.7 "Arial Narrow"}#combo span{color:#fff;font:700 9px/1 sans-serif;letter-spacing:.24em}#message-toast{position:absolute;bottom:24%;left:50%;padding:7px 15px;transform:translate(-50%,10px);border-radius:20px;background:rgba(8,13,22,.65);color:#dbe6f2;font-size:10px;opacity:0;transition:.25s}#message-toast.show{opacity:1;transform:translate(-50%,0)}
.controls{position:absolute;inset:auto 0 max(15px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:space-between;padding:0 max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left))}.joystick{position:relative;width:112px;height:112px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.045) 0 33%,transparent 34%),rgba(8,13,22,.25);box-shadow:inset 0 0 25px rgba(0,0,0,.3);pointer-events:auto}.joystick:before,.joystick:after{content:"";position:absolute;background:rgba(255,255,255,.08)}.joystick:before{top:10%;bottom:10%;left:50%;width:1px}.joystick:after{left:10%;right:10%;top:50%;height:1px}#joystick-knob{position:absolute;top:50%;left:50%;width:51px;height:51px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.24),rgba(47,67,87,.5));box-shadow:0 5px 16px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.18);transform:translate(-50%,-50%)}.joystick>span{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.28);font-size:8px;letter-spacing:.2em}.action-cluster{position:relative;display:flex;align-items:flex-end;gap:10px;height:124px;pointer-events:auto}.action{position:relative;display:grid;place-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:radial-gradient(circle at 33% 26%,rgba(255,255,255,.2),rgba(var(--accent-rgb),.12) 45%,rgba(8,14,25,.72));box-shadow:0 5px 20px rgba(0,0,0,.34),inset 0 0 13px rgba(var(--accent-rgb),.14);text-align:center;transition:transform .08s,filter .08s}.action:active,.action.pressed{transform:scale(.9);filter:brightness(1.4)}.action span{position:relative;z-index:2;font:700 25px/1 sans-serif;text-shadow:0 0 12px var(--accent)}.action small{position:relative;z-index:2;margin-top:3px;color:#aab9c8;font-size:8px}.action.attack{align-self:flex-start;width:88px;height:88px;border-color:rgba(var(--accent-rgb),.65);box-shadow:0 0 22px rgba(var(--accent-rgb),.19),inset 0 0 17px rgba(var(--accent-rgb),.2)}.action.attack span{color:var(--accent);font-size:34px}.action.special{width:65px;height:65px;margin-bottom:2px}.action.dash{width:54px;height:54px}.action.dash span{color:#f7e6ad;font-size:22px}.action>i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--charge,100)*1%),transparent 0);opacity:.35;mask:radial-gradient(circle,transparent 63%,#000 64%);-webkit-mask:radial-gradient(circle,transparent 63%,#000 64%)}
.modal-screen{background:rgba(5,8,14,.72);backdrop-filter:blur(8px)}.modal{width:min(360px,85vw);padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(150deg,rgba(28,40,57,.96),rgba(11,17,29,.96));box-shadow:0 18px 70px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.1);text-align:center}.modal h2{margin:5px 0 10px;font:900 29px/1.1 "Arial Narrow","Microsoft YaHei"}.modal p{margin:0 0 20px;color:#9dafc1;font-size:11px;line-height:1.7}.modal .primary-button{width:100%;margin-top:8px}.text-button{margin-top:13px;background:transparent;color:#8fa2b5;font-size:10px}.result-score{margin:20px 0 14px}.result-score small{display:block;color:#8fa2b5;font-size:9px}.result-score b{color:#ffd26d;font:900 44px/1 "Arial Narrow"}
#rotate-hint{display:none;position:fixed;inset:0;z-index:50;place-content:center;justify-items:center;background:#0c111d}.phone-icon{display:grid;place-content:center;width:36px;height:57px;margin-bottom:15px;border:2px solid #8ca0b6;border-radius:7px;color:#ffd270;font-size:20px;animation:rotatePhone 2s infinite}#rotate-hint b{font-size:16px}#rotate-hint span{margin-top:5px;color:#78899d;font-size:10px}#landscape-button{min-width:150px;margin-top:18px;padding:11px 20px}@keyframes rotatePhone{0%,20%{transform:rotate(0)}55%,85%{transform:rotate(90deg)}100%{transform:rotate(0)}}body.hit #vignette{background:radial-gradient(circle,transparent 35%,rgba(255,25,62,.42) 100%)}body.flash #vignette{background:rgba(var(--accent-rgb),.18)}
@media (orientation:portrait) and (max-width:700px){#rotate-hint{display:grid}html.force-landscape body{position:fixed;top:0;left:0;width:100vh;height:100vw;transform:rotate(90deg) translateY(-100%);transform-origin:top left}html.force-landscape #rotate-hint{display:none}}@media (max-height:470px){.status-card{transform:scale(.86);transform-origin:top left}.mission-card{transform:translateX(-50%) scale(.86);transform-origin:top center}#hero-switcher{gap:4px}.hero-chip{height:38px;transform:scale(.9);transform-origin:left center;margin-bottom:-2px}.joystick{width:92px;height:92px}.joystick>span{display:none}#joystick-knob{width:44px;height:44px}.action-cluster{height:105px}.action.attack{width:76px;height:76px}.action.special{width:57px;height:57px}.action.dash{width:48px;height:48px}.boss-bar{top:63px}}@media (max-width:620px){.hero-preview{width:94vw}.title-lockup p{margin-bottom:13px}}