:root{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#fff;background:#06162f;font-weight:700;--blue:#068de8;--yellow:#ffd755;--navy:#172b4d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}
button{font:inherit;color:inherit;border:0;cursor:pointer}
button:active{transform:translateY(2px) scale(.985)}
.screen{position:absolute;inset:0;display:none;overflow:hidden}.screen.active{display:block}
#app{position:relative;max-width:560px;margin:auto;background:#087be3;box-shadow:0 0 80px #0008}
#home{background:radial-gradient(circle at 50% 44%,#2bbcf6 0,#087ee4 42%,#0455bf 100%)}
#home:before{content:"";position:absolute;inset:-20%;background:repeating-radial-gradient(circle at 50% 45%,transparent 0 48px,#a3eaff1c 51px 55px,transparent 58px 91px);animation:spin 30s linear infinite}
#home:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff6 1px,transparent 2px);background-size:38px 42px;opacity:.25}
.topbar{position:absolute;z-index:5;left:16px;right:16px;top:max(16px,env(safe-area-inset-top));display:flex;align-items:center;gap:9px}.avatar{width:46px;height:46px;background:linear-gradient(#fff,#d9e4ef);border:3px solid #253c58;border-radius:7px;box-shadow:0 3px 7px #002a6a88}.avatar span{display:block;width:18px;height:18px;border-radius:50%;background:#aab8c2;margin:4px auto 0;box-shadow:0 14px 0 5px #aab8c2}.currency{height:26px;min-width:76px;padding:0 6px 0 28px;background:#132d53dd;border-radius:14px;display:flex;align-items:center;gap:5px;font-size:13px;box-shadow:inset 0 -2px #061b38}.currency i{position:absolute;margin-left:-27px;width:23px;height:23px;border-radius:50%}.coin i{background:radial-gradient(circle at 35% 30%,#fff6 0 10%,#ffd33c 15% 62%,#d98200 66%);border:2px solid #fff3a0}.gem i{background:linear-gradient(135deg,#ff83f4,#a91fd7);clip-path:polygon(50% 0,95% 28%,82% 85%,50% 100%,18% 85%,5% 28%)}.currency em{font-style:normal;background:#3cc646;border-radius:50%;width:17px;height:17px;text-align:center;line-height:16px}.round-btn{margin-left:auto;width:40px;height:29px;background:#1f5ca8aa;border-radius:18px;font-size:18px}
.home-title{position:absolute;z-index:2;top:12%;width:100%;text-align:center;text-shadow:0 3px 0 #074a9d}.home-title small{letter-spacing:5px;color:#a5ecff}.home-title h1{margin:2px;font-size:35px;letter-spacing:3px}
.planet{position:absolute;z-index:2;left:50%;top:43%;width:min(82vw,420px);height:min(82vw,420px);transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(145deg,#8ed87b,#e3c274 48%,#866447 49% 58%,#4b2d32 59%);box-shadow:0 24px 35px #00377699,inset -18px -18px 28px #382b5666}.planet:before{content:"";position:absolute;inset:22%;border-radius:50%;background:#050713;box-shadow:0 0 0 8px #263cf5,0 0 0 14px #72e4ff,0 0 34px 20px #772cff;animation:pulse 1.6s ease-in-out infinite}.home-hole{position:absolute;inset:25%;border-radius:50%;background:radial-gradient(circle,#000 0 58%,#17102a 64%,#0000 66%)}.home-hole span{position:absolute;inset:-8%;border-radius:50%;border:3px solid #a2ffff;border-left-color:#7a31ff;animation:spin 2.6s linear infinite}.orbit{position:absolute;border:2px dashed #fff4;border-radius:50%;inset:-7%}.o2{inset:-20%;transform:rotate(40deg)}.mini-building{position:absolute;width:34px;height:68px;background:linear-gradient(90deg,#ed8d74,#ffd2a7);border:3px solid #fff8;border-radius:6px;box-shadow:0 7px #984b4b}.b1{left:10%;top:28%;transform:rotate(-24deg)}.b2{right:10%;top:22%;height:86px;background:linear-gradient(90deg,#7cd8ce,#d6ffdc);transform:rotate(27deg)}.b3{right:16%;bottom:12%;height:48px;background:#ffd157;transform:rotate(50deg)}
.mode-actions{position:absolute;z-index:4;left:22px;right:22px;bottom:94px;display:flex;gap:14px}.mode{position:relative;flex:1;height:70px;border-radius:14px;border:3px solid #fff9;text-shadow:0 2px #0005;box-shadow:0 7px 0 #103e7e,0 10px 18px #003a8d88}.ranked{background:linear-gradient(#ffe273,#f0a620);color:#6b3500}.stage{background:linear-gradient(#b3edff,#4abce9);color:#14517d}.mode strong{display:block;font-size:22px}.mode small{font-size:11px}.mode-icon{position:absolute;left:8px;top:-16px;font-size:34px;color:#b24c2d}.chapter{position:absolute;right:6px;top:-27px;background:#236da9;color:#fff;padding:4px 13px;border-radius:12px;font-size:12px}
.bottom-nav{position:absolute;z-index:6;bottom:0;left:0;right:0;height:72px;padding-bottom:env(safe-area-inset-bottom);display:flex;background:#15243e;border-top:4px solid #2d5181}.bottom-nav button{flex:1;background:transparent;font-size:10px;color:#bfd0e5;display:grid;place-items:center;gap:1px}.bottom-nav .selected{height:82px;margin-top:-14px;background:linear-gradient(#ffd856,#dc8d16);border-radius:16px 16px 0 0;color:white;font-size:12px}.nav-shape{width:30px;height:27px;display:block;border-radius:7px;background:linear-gradient(#5fd6ff,#1b76d2);border:3px solid #d9f8ff}.hole-shape{border-radius:50%;background:#02030a;box-shadow:0 0 0 4px #624dff}.battle-shape{background:linear-gradient(45deg,transparent 43%,#fff 44% 54%,transparent 55%),linear-gradient(-45deg,transparent 43%,#fff 44% 54%,transparent 55%);border:0}.nav-lock{width:21px;height:17px;background:#9ba9bd;border-radius:3px;position:relative}.nav-lock:before{content:"";position:absolute;width:12px;height:12px;border:3px solid #9ba9bd;border-bottom:0;border-radius:8px 8px 0 0;left:2px;top:-10px}
#skins{overflow-y:auto;background:linear-gradient(155deg,#5478ff 0,#315bdf 50%,#456ee9 100%);padding-bottom:170px;scrollbar-width:none}#skins::-webkit-scrollbar{display:none}#skins:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 22% 12%,#fff2 0 2px,transparent 3px),repeating-radial-gradient(circle at 72% 18%,transparent 0 42px,#b6c8ff0b 44px 47px,transparent 49px 79px)}
.skin-topbar{position:sticky;z-index:8;top:0;height:76px;padding:max(14px,env(safe-area-inset-top)) 15px 8px;display:flex;align-items:center;gap:10px;background:linear-gradient(#5478fff2,#5478ffdf)}.skin-topbar .currency{position:relative;min-width:104px;height:34px;font-size:17px}.skin-topbar .skin-back{width:34px;height:34px;background:#294cbeaa;border-radius:50%;position:relative}.skin-back:before{content:"";position:absolute;width:12px;height:12px;border-left:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(45deg);left:12px;top:9px}.skin-more{margin-left:auto;padding:7px 13px;border-radius:20px;background:#3156bddd;color:#e9eeff;font-size:17px;white-space:nowrap}
.skin-tabs{position:sticky;z-index:7;top:76px;height:74px;display:grid;grid-template-columns:1fr 1fr;align-items:end;border-bottom:4px solid #2749b6;background:#4b70eff0;padding:0 24px}.skin-tabs button{height:58px;border:3px solid #718bf0;border-bottom:0;border-radius:16px 16px 0 0;background:#3458c6;color:#91a9ff;font-size:22px;text-shadow:0 2px #10256f}.skin-tabs button small{display:block;font-size:13px}.skin-tabs button.active{height:64px;background:linear-gradient(#ffe138,#ffbd13);color:#8c3200;border-color:#ffe762;box-shadow:0 5px 0 #f18b15;text-shadow:0 2px #fff6;position:relative}.skin-tabs button.active:after{content:"";position:absolute;left:50%;bottom:-18px;width:24px;height:24px;background:#ffb817;transform:translateX(-50%) rotate(45deg)}
.skin-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px;padding:38px 18px 14px}.skin-card{height:158px;padding:10px 5px;border-radius:19px;background:linear-gradient(145deg,#626982,#454a63);border:4px solid #333a61;box-shadow:inset 0 2px #8a91a8,0 7px 0 #25356d,0 11px 18px #14255c66;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative}.skin-card strong{font-size:16px;text-shadow:0 2px 1px #17203d,-1px -1px #17203d;margin-bottom:17px;white-space:nowrap}.skin-card.selected{background:linear-gradient(145deg,#fff,#dfe9f6);border-color:#a8c8e5;color:#14254c;box-shadow:inset 0 2px #fff,0 7px 0 #83a4d3,0 0 0 4px #ffe246}.skin-card.selected strong{text-shadow:0 2px #fff}.skin-card.selected:after{content:"使用中";position:absolute;right:5px;bottom:5px;background:#38c871;color:#fff;border-radius:9px;padding:3px 7px;font-size:10px}.skin-card.locked{filter:saturate(.58);color:#e2e7f5}.skin-card.locked:after{content:"锁定";position:absolute;right:7px;bottom:7px;padding:3px 7px;border-radius:8px;background:#222a49cc;font-size:10px}.skin-art{--ring:#2aaeff;position:relative;width:84px;height:58px;border-radius:50%;background:linear-gradient(150deg,#fff9 0 7%,var(--ring) 18% 72%,#162854 74%);box-shadow:0 5px 0 #1b264a,0 7px 12px #10173188,inset -7px -7px 8px #0004;transform:perspective(100px) rotateX(12deg)}.skin-art:before{content:"";position:absolute;inset:12px 13px 10px;border-radius:50%;background:radial-gradient(ellipse at 45% 43%,#010106 0 60%,#12213a 65%,#000 70%);box-shadow:inset 0 5px 8px #000}.skin-art:after{content:"";position:absolute;left:16px;right:16px;top:7px;height:6px;border-radius:50%;background:#fff7;filter:blur(1px)}
.skin-spinner{--ring:#ff3524;border-radius:42%}.skin-spinner{box-shadow:-24px 18px 0 -12px #ff3524,24px 18px 0 -12px #ff3524,0 -19px 0 -12px #ff3524,0 5px #751b20,0 8px 13px #10173199}.skin-shark{--ring:#397ba7;clip-path:polygon(50% 0,72% 14%,92% 43%,100% 67%,78% 63%,74% 88%,26% 88%,20% 62%,0 68%,9% 42%,28% 13%)}.skin-vortex{--ring:#8f31dc;box-shadow:0 0 0 7px #5b159d,0 0 20px #c960ff,0 6px #2b134a}.skin-zombie{--ring:#64ad32;box-shadow:-22px -13px 0 -13px #82359b,21px -12px 0 -13px #86bd43,0 6px #31571b}.skin-spiral{--ring:#9a4ab8;background:repeating-radial-gradient(ellipse,#0a0925 0 10px,#184e9a 12px 16px,#8f4abd 18px 23px)}.skin-storm{--ring:#9da4aa;clip-path:polygon(15% 74%,5% 57%,17% 35%,36% 31%,48% 11%,68% 14%,76% 33%,93% 42%,98% 64%,86% 82%)}.skin-storm:after{left:39px;top:44px;width:12px;height:28px;background:#ffe117;clip-path:polygon(42% 0,100% 0,65% 39%,100% 39%,20% 100%,38% 55%,0 55%);filter:none}.skin-dragon{--ring:#2465d9;clip-path:polygon(50% 0,59% 11%,70% 4%,76% 18%,90% 16%,91% 31%,100% 41%,91% 53%,97% 69%,81% 73%,74% 91%,60% 84%,50% 100%,39% 84%,25% 91%,19% 73%,3% 69%,9% 53%,0 41%,9% 31%,10% 16%,24% 18%,30% 4%,41% 11%)}.skin-heart{--ring:#ff7484;clip-path:polygon(50% 96%,7% 58%,3% 31%,17% 10%,38% 9%,50% 24%,62% 9%,83% 10%,97% 31%,93% 58%)}.skin-pig{--ring:#ff8c9e;box-shadow:-25px -11px 0 -15px #ff9cac,25px -11px 0 -15px #ff9cac,0 6px #a74159}.skin-whale{--ring:#209bd4;box-shadow:-28px 11px 0 -15px #209bd4,27px 12px 0 -15px #209bd4,0 -20px 0 -18px #209bd4,0 6px #12618d}.skin-gorilla{--ring:#46a91f;clip-path:polygon(50% 0,59% 12%,71% 3%,76% 17%,91% 12%,90% 31%,100% 38%,91% 51%,99% 66%,82% 72%,78% 90%,60% 84%,50% 100%,39% 84%,21% 91%,18% 72%,1% 66%,9% 51%,0 38%,10% 31%,9% 12%,24% 17%,29% 3%,41% 12%)}.skin-neon{--ring:#32ffd2;box-shadow:0 0 0 5px #1252ff,0 0 22px #31ffe4,0 6px #092c6b}.skin-lava{--ring:#ff6b1d;background:repeating-radial-gradient(ellipse,#020205 0 15px,#a50f09 17px 21px,#ff8d1f 23px 28px)}.skin-ice{--ring:#a9edff;box-shadow:0 0 0 5px #4bb7ee,0 0 18px #d9faff,0 6px #2879aa}.skin-galaxy{--ring:#753bd7;background:radial-gradient(circle at 28% 22%,#fff 0 2px,transparent 3px),radial-gradient(circle at 75% 30%,#5ff 0 2px,transparent 3px),repeating-radial-gradient(ellipse,#01010b 0 12px,#25249b 14px 18px,#9a3cd6 20px 25px)}.skin-crown{--ring:#ffc52b;box-shadow:-24px -15px 0 -15px #ffc52b,0 -24px 0 -17px #ffe96b,24px -15px 0 -15px #ffc52b,0 6px #a76c00}
.skin-actions{position:fixed;z-index:9;left:50%;bottom:76px;width:min(520px,calc(100% - 24px));transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr;gap:14px;pointer-events:none}.skin-actions button{pointer-events:auto;height:65px;border-radius:14px;border:3px solid #94efff;box-shadow:0 6px #176899;background:linear-gradient(#65e9ff,#15bfea);color:#12547a}.skin-actions button:last-child{background:linear-gradient(#fff168,#ffbe25);border-color:#fff9a4;box-shadow:0 6px #b66a13;color:#8a3800}.skin-actions strong,.skin-actions span,.skin-actions small{display:block}.skin-actions strong{font-size:21px}.skin-actions i{display:inline-block;width:17px;height:17px;border-radius:50%;background:#ffd735;border:2px solid #e49708;vertical-align:-3px}.skin-toast{position:fixed;z-index:12;left:50%;bottom:158px;transform:translate(-50%,20px);background:#102556eb;padding:10px 18px;border-radius:18px;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}.skin-toast.show{opacity:1;transform:translate(-50%,0)}.skin-nav{position:fixed;left:50%;width:min(560px,100%);transform:translateX(-50%)}
#match{background:linear-gradient(155deg,#0979e6,#1ac5f4);text-align:center;padding-top:max(70px,calc(env(safe-area-inset-top) + 60px))}#match:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(155deg,transparent 0 130px,#d8f7ff17 132px 160px,transparent 162px 260px)}#match>*{position:relative}.match-back{position:absolute!important;left:16px;top:max(18px,env(safe-area-inset-top));font-size:42px;background:none}.map-card{width:230px;margin:28px auto 8px;border:4px solid #fff;border-radius:14px;overflow:hidden;background:#183964;box-shadow:0 7px 0 #17416f}.map-card img{display:block;width:100%;height:130px;object-fit:cover}.map-card strong{display:block;padding:9px}.slots{display:flex;justify-content:center;gap:8px;margin:46px 14px 50px}.slot{width:58px;height:63px;border:2px solid #bdf4ff;border-radius:8px;background:#67bce8;display:grid;place-items:center;font-size:23px;transition:.3s}.slot.ready{background:linear-gradient(#fff,#bce3ef);color:#687e8c}.slot.ready:after{content:"";width:26px;height:20px;border-radius:50% 50% 35% 35%;background:#a5b8c4;box-shadow:0 -15px 0 -5px #a5b8c4}.loadbar{height:14px;margin:0 40px;background:#144b8c;border-radius:8px;overflow:hidden}.loadbar span{display:block;height:100%;width:0;background:#ffe257;transition:width .25s}.cancel{margin-top:52px;padding:13px 36px;border-radius:9px;background:linear-gradient(#ffd867,#f49a24);color:#6b3905;box-shadow:0 5px #b75d17}
#game{background:#20314a}#canvas{width:100%;height:100%;display:block;touch-action:none}.hud-gear{position:absolute;top:max(16px,env(safe-area-inset-top));left:14px;width:40px;height:40px;border-radius:50%;background:#ffffffdd;color:#3a5268;box-shadow:0 3px 0 #637389}.net{position:absolute;top:max(68px,calc(env(safe-area-inset-top) + 52px));left:16px;color:#6ee7a7;font-size:12px;text-shadow:0 1px #000}.timer{position:absolute;top:max(17px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#233045dd;border-radius:9px;padding:7px 12px 7px 34px;font-size:19px;text-shadow:0 2px #000}.clock{position:absolute;left:-3px;top:-3px;width:35px;height:35px;border:6px solid #ffb33c;border-radius:50%;background:#fff}.clock:after{content:"";position:absolute;width:2px;height:9px;background:#34445b;left:11px;top:4px;transform:rotate(22deg);transform-origin:bottom}.kills{position:absolute;right:17px;top:max(18px,env(safe-area-inset-top));background:#283348dd;padding:6px 11px;border-radius:8px;display:flex;gap:7px}.player-tag{position:absolute;left:50%;top:22%;transform:translateX(-50%);text-align:center;text-shadow:0 2px 2px #000,-1px -1px #000}.player-tag strong{display:block;font-size:22px}.player-tag small{font-size:13px}.player-tag>div{width:90px;height:12px;background:#131b25;border:2px solid #e7eef4;border-radius:9px;overflow:hidden}.player-tag>div span{display:block;height:100%;width:0;background:linear-gradient(90deg,#52d7ff,#6be784)}.quest{position:absolute;top:88px;left:50%;transform:translateX(-50%);width:72px;height:90px;border:3px solid #738091;border-radius:10px;background:#eff5fb;color:#1a2940;text-align:center;padding-top:6px;box-shadow:0 4px #29394b}.quest i{display:block;color:#ffc62c;font-size:25px}.quest b{font-size:11px}.quest span{display:block;margin:6px;height:9px;border-radius:6px;background:#25364c;overflow:hidden}.quest em{display:block;height:100%;background:#ffd344;width:0}.reward-banner{position:absolute;left:0;right:0;top:42%;height:70px;background:linear-gradient(90deg,#fff0,#fff5d9 20%,#fff 50%,#fff5d9 80%,#fff0);color:#71421b;text-align:center;padding:10px;transform:translateX(-120%);transition:.35s}.reward-banner.show{transform:translateX(0)}.reward-banner small,.reward-banner strong{display:block}.reward-banner strong{font-size:22px}.hidden{display:none!important}
#joystick{position:absolute;left:50%;bottom:58px;width:112px;height:112px;transform:translateX(-50%);border:3px solid #ffffff40;border-radius:50%;background:#ffffff10;pointer-events:none}#joystick span{position:absolute;left:29px;top:29px;width:52px;height:52px;background:#fff;border-radius:50%;box-shadow:0 4px 12px #0004;transform:translate(var(--jx,0),var(--jy,0))}
.modal{position:absolute;z-index:20;left:20px;right:20px;top:50%;transform:translateY(-50%);padding:34px 22px 24px;border-radius:22px;text-align:center;background:linear-gradient(#167ed8ee,#112f69f3);border:3px solid #a9efff;box-shadow:0 20px 70px #001027cc}.modal h2{font-size:34px;margin:4px 0;text-shadow:0 4px #06316d}.modal>button{display:block;width:80%;margin:12px auto 0;padding:13px;border-radius:10px;background:linear-gradient(#a5f46c,#51c94d);box-shadow:0 5px #238637;color:#174b25}.modal .secondary{background:#d8e6f3;color:#31506b;box-shadow:0 5px #829bb0}.modal.compact{top:45%}.result-stats{display:flex;gap:7px;margin:24px 0}.result-stats span{flex:1;background:#0b3265aa;border-radius:10px;padding:8px 3px;font-size:11px}.result-stats b{display:block;font-size:21px;color:#ffe76a}.next-map{background:#e9f6ff;color:#23486a;margin:5px auto 19px;padding:10px;border-radius:13px;width:180px}.next-map span,.next-map b{display:block}.next-map div{height:12px;background:#7a2cc7;border-radius:7px;margin:5px}.next-map i{display:block;width:25%;height:100%;background:#5be85d;border-radius:7px}.result-stats+.next-map{}#resultKicker{color:#57e8ff;margin:0}.result-fail{background:linear-gradient(#ad4c5bee,#3d183cf3)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 0 0 8px #263cf5,0 0 0 18px #72e4ff,0 0 45px 24px #772cff}}
@media(min-width:561px){body{background:#071225}#app{height:min(100vh,950px);top:50%;transform:translateY(-50%)}}

/* Code-native UI icons keep appearance stable across mobile systems. */
.round-btn{font-size:0}.round-btn span{position:relative;display:block;width:15px;height:15px;margin:auto;border:3px solid #e7f5ff;border-radius:50%;box-shadow:0 -7px 0 -5px #e7f5ff,0 7px 0 -5px #e7f5ff,7px 0 0 -5px #e7f5ff,-7px 0 0 -5px #e7f5ff}
.mode-icon{width:34px;height:40px;background:linear-gradient(#dd7444,#9b3928);clip-path:polygon(50% 0,92% 18%,82% 72%,50% 100%,18% 72%,8% 18%);filter:drop-shadow(0 3px #6f2f22)}.mode-icon:after{content:"";position:absolute;inset:9px;background:#ffd36a;clip-path:polygon(50% 0,100% 100%,0 100%)}
.match-back{width:36px;height:36px;font-size:0}.match-back:before{content:"";position:absolute;width:14px;height:14px;border-left:5px solid #fff;border-bottom:5px solid #fff;transform:rotate(45deg);left:12px;top:8px}
.hud-gear{display:flex;justify-content:center;align-items:center;gap:5px}.hud-gear span{display:block;width:4px;height:16px;border-radius:2px;background:#40536a}
.skull-icon{position:relative;width:16px;height:14px;margin-top:1px;background:#dce5ec;border-radius:8px 8px 5px 5px}.skull-icon:before{content:"";position:absolute;left:3px;top:4px;width:3px;height:3px;border-radius:50%;background:#283348;box-shadow:7px 0 #283348}.skull-icon:after{content:"";position:absolute;left:5px;bottom:-3px;width:6px;height:5px;background:#dce5ec;border-radius:0 0 2px 2px}
.quest i{display:block;width:27px;height:27px;margin:0 auto 3px;background:#ffc62c;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 94%,50% 72%,21% 94%,32% 56%,2% 35%,39% 35%)}