:root{font-family:"Microsoft YaHei",sans-serif;color:#fff;background:#111827;touch-action:none}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#111827}canvas{image-rendering:auto}.hidden{display:none!important}.panel{position:fixed;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle,#34405cdd,#111827f5)}.brand{font-size:clamp(42px,8vw,82px);font-weight:1000;letter-spacing:-5px;color:#ffe16a;-webkit-text-stroke:3px #512b68;text-shadow:5px 6px 0 #f35c75}.panel p{margin:0;font-weight:800;font-size:20px}.panel small{opacity:.72}.panel button{border:4px solid #512b68;border-radius:14px;padding:13px 34px;background:#ffe16a;color:#372245;font-size:24px;font-weight:1000;box-shadow:0 7px 0 #b24361;cursor:pointer}.score{position:fixed;z-index:5;left:50%;top:10px;transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:6px 16px;border:3px solid #40294d;border-radius:15px;background:#171b2fd9;box-shadow:0 5px 0 #0a0b14}.score b{font-size:28px;color:#5cf2ff}.score b:last-child{color:#ff6c7e}.score span{font-size:13px;font-weight:900;color:#ffe16a}#restart{position:fixed;z-index:5;right:12px;top:12px;width:42px;height:42px;border:3px solid #40294d;border-radius:12px;background:#f1e7d2;color:#40294d;font-size:24px;font-weight:900}#stick{position:fixed;z-index:5;left:7vw;bottom:8vh;width:112px;height:112px;border:5px solid #e9f3ff88;border-radius:50%;background:#29365088;box-shadow:inset 0 0 0 8px #0a122233}#stick i{position:absolute;left:31px;top:31px;width:42px;height:42px;border-radius:50%;background:#eafaffcc;border:4px solid #54708e;box-shadow:0 5px 0 #263c58}#skills{position:fixed;z-index:5;right:4vw;bottom:6vh;display:flex;align-items:flex-end;gap:12px}#skills button{position:relative;width:72px;height:72px;border:5px solid #efe6cf;border-radius:50%;background:#44c9d7;color:white;box-shadow:0 6px 0 #28334e;font-weight:1000}#skills button:nth-child(2){background:#865de0}#skills .attack{width:92px;height:92px;background:#ed6b64}#skills span{display:block;font-size:27px;line-height:25px}#skills em{font-style:normal;font-size:12px}.cool{filter:grayscale(.8);opacity:.55}@media(max-height:460px){#stick{width:92px;height:92px}#stick i{left:25px;top:25px;width:34px;height:34px}#skills button{width:62px;height:62px}#skills .attack{width:78px;height:78px}}
#skills{right:3vw;bottom:5vh;gap:10px}#skills button{width:68px;height:68px;touch-action:none}#skills button:nth-child(2){background:#5f82d5}#skills button:nth-child(3){background:#865de0}#skills .attack{width:92px;height:92px;background:#ed6b64}.aiming{outline:7px solid #ff2d20;transform:translateY(-7px) scale(1.08);box-shadow:0 0 24px #ff2d20,0 6px 0 #641811!important}
.cd{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#161b2dbb;color:white;font:1000 25px/1 sans-serif;font-style:normal}.cd:empty{display:none}
#heroSelect{display:flex;align-items:center;gap:14px}#heroSelect button{width:52px;height:52px;padding:0;border-radius:50%;font-size:38px}.heroCard{width:220px;padding:15px;border:4px solid #fff8;border-radius:18px;background:#202942cc;text-align:center}.heroCard strong{display:block;font-size:28px;color:#ffe16a}.heroCard span{font-size:14px}.resource,#resource{position:fixed;z-index:6;left:50%;top:70px;transform:translateX(-50%);width:190px;padding:5px 9px;border:3px solid #4b2c31;border-radius:10px;background:#251d25cc;color:#fff}#resource b{display:block;font-style:normal;font-size:13px}#resource i{display:block;height:8px;margin-top:3px;border-radius:5px;background:linear-gradient(90deg,#ffc43d var(--energy,100%),#211d22 var(--energy,100%))}#combo{position:fixed;z-index:6;right:20px;top:90px;color:#ff3b30;font-size:28px;font-weight:1000;-webkit-text-stroke:1px #64151b;text-shadow:2px 3px 0 #fff}#combo b{font-size:52px}
#heroDots{font-size:15px;letter-spacing:7px;color:#ffe16a}.heroCard{min-height:92px;display:flex;flex-direction:column;justify-content:center}#mobileCombo{position:fixed;z-index:7;right:265px;bottom:7vh;width:118px;height:118px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px}#mobileCombo button{padding:0;border:2px solid #fff8;border-radius:10px;background:#25324dcc;color:#fff;font-weight:1000;touch-action:none}#mobileCombo button small{display:block;font-size:8px}#mobileCombo button[data-combo=up]{grid-area:1/2}#mobileCombo button[data-combo=left]{grid-area:2/1}#mobileCombo button[data-combo=down]{grid-area:2/2}#mobileCombo button[data-combo=right]{grid-area:2/3}#mobileCombo button.active{background:#ff3429;box-shadow:0 0 15px #ff2d20;transform:scale(1.08)}#toast{position:fixed;z-index:20;left:50%;top:22%;transform:translate(-50%,-50%);padding:10px 22px;border:3px solid #fff;border-radius:14px;background:#251b34dd;color:#ffe16a;font-size:21px;font-weight:1000;pointer-events:none;animation:toast .9s ease both}@keyframes toast{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}20%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(.9)}}
@media(max-width:760px),(max-height:500px){.brand{font-size:clamp(34px,11vw,58px)}.panel{gap:9px}.panel button{padding:9px 22px;font-size:19px}.heroCard{width:190px;min-height:72px;padding:8px}.heroCard strong{font-size:23px}.score{top:max(5px,env(safe-area-inset-top));padding:3px 10px;gap:8px}.score b{font-size:21px}#resource{top:48px;width:145px}#combo{top:55px;right:8px;font-size:18px}#combo b{font-size:34px}#restart{width:34px;height:34px;right:6px;top:6px;font-size:18px}#stick{left:max(16px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:94px;height:94px}#stick i{left:26px;top:26px;width:34px;height:34px}#skills{right:max(8px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));gap:5px;display:grid;grid-template-columns:repeat(2,58px);grid-template-rows:repeat(2,58px)}#skills button,#skills .attack{width:56px;height:56px;border-width:3px;padding:0;box-shadow:0 4px 0 #28334e}#skills .attack{grid-area:1/2;width:62px;height:62px}#skills span{font-size:21px;line-height:19px}#skills em{font-size:9px}#mobileCombo{right:140px;bottom:max(9px,env(safe-area-inset-bottom));width:94px;height:94px}.aiming{outline-width:4px;transform:scale(1.05)}}
@media(max-width:430px) and (orientation:portrait){#stick{width:82px;height:82px;bottom:22px}#stick i{left:22px;top:22px;width:30px;height:30px}#skills{grid-template-columns:repeat(2,52px);grid-template-rows:repeat(2,52px)}#skills button,#skills .attack{width:50px;height:50px}#mobileCombo{right:118px;width:82px;height:82px}.score span{font-size:10px}}
.lobby{justify-content:flex-start;padding:4vh 12px 12px;background:linear-gradient(90deg,#081322aa,#101122aa),url('assets/lobby-arena-v2.png') center/cover no-repeat}.lobby:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 42%,transparent 0 25%,#06111db8 85%)}.lobbyBadge{padding:5px 15px;border:1px solid #8ad8ff88;border-radius:999px;background:#071629bb;color:#8de8ff;font-size:12px;font-weight:900;letter-spacing:2px}.lobby .brand{margin-top:-4px;text-shadow:0 0 20px #ffde4d,5px 6px 0 #7c254f}.modeCard{display:flex;gap:10px;align-items:center;padding:7px 18px;border:1px solid #fff4;border-radius:10px;background:#071525aa}.modeCard b{color:#ffe363}.modeCard span{font-size:12px;color:#d7e8f8}.lobby>p{font-size:15px;color:#d9e9f5}.lobby #heroSelect{margin-top:-6px}.lobby .heroCard{width:min(430px,62vw);height:150px;min-height:0;display:grid;grid-template-columns:44% 1fr;align-items:center;padding:8px;background:linear-gradient(135deg,#0c213eea,#263452dd);box-shadow:0 14px 30px #0008,inset 0 0 28px #5aa8ff22}.lobby .heroCard>div:last-child{text-align:left;padding-left:8px}.lobby .heroCard strong{font-size:32px}.lobby .heroCard span{display:block;margin:6px 0;color:#d7e8ff}.lobby .heroCard small{display:inline-block;padding:3px 9px;border-radius:10px;background:#ffcc4d;color:#32203f;font-weight:900}#heroPreview{height:132px;background-repeat:no-repeat;background-size:300% 100%;background-position:left center;filter:drop-shadow(0 7px 8px #0008)}.lobbyActions{display:flex;gap:12px}.lobbyActions #helpBtn{background:#182a45;color:#d9ecff;border-color:#74b8e7;box-shadow:0 6px 0 #071426}.lobbyActions #startBtn{min-width:180px;background:linear-gradient(#fff46d,#ffb72d);box-shadow:0 7px 0 #a33c30,0 0 22px #ffd63a66}.help{z-index:30;background:#07111de8}.helpCard{width:min(520px,90vw);padding:24px;border:2px solid #79ceff;border-radius:20px;background:linear-gradient(145deg,#102a49,#161b35);box-shadow:0 20px 60px #000}.helpCard h2{margin:0 0 12px;color:#ffe46b}.helpCard p{margin:8px 0;font-size:15px;line-height:1.6}.helpCard button{display:block;margin:18px auto 0}button{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}#skills button,#stick,#mobileCombo button{touch-action:none}
@media(max-height:540px){.lobby{padding-top:7px;gap:5px}.lobby .brand{font-size:42px}.lobby .heroCard{height:112px}.lobby #heroPreview{height:98px}.lobby .heroCard strong{font-size:25px}.lobby .panel small{font-size:10px}.modeCard{padding:3px 12px}.lobbyActions button{padding:7px 20px!important}.lobbyBadge{padding:2px 10px}}
@media(max-width:430px) and (orientation:portrait){.lobby{padding-top:5vh}.lobby .heroCard{width:78vw;height:190px;grid-template-columns:52% 48%}.lobby #heroPreview{height:168px}.lobbyActions{flex-direction:column;gap:7px}.lobbyActions button{padding:8px 18px!important}.modeCard{font-size:13px}}