:root{color-scheme:dark;--glass:rgba(4,25,43,.64);--line:rgba(145,220,255,.16);--text:#f4fbff;--muted:#96bed2;--cyan:#4ed7ff;--mint:#5ef2c2}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#031725;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--text)}
button,input{font:inherit}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;background:linear-gradient(#075477,#042d4b 45%,#031a2d)}
.ocean-light{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% -12%,rgba(130,235,255,.24),transparent 45%),linear-gradient(90deg,rgba(0,0,0,.09),transparent 25%,transparent 75%,rgba(0,0,0,.09));mix-blend-mode:screen}
.screen{position:fixed;inset:0;z-index:20;display:none;place-items:center;padding:28px;background:radial-gradient(circle at 50% 30%,rgba(9,92,123,.18),rgba(1,12,23,.62));backdrop-filter:blur(7px)}
.screen.active{display:grid}
#startScreen{align-content:center;gap:40px}
.brand{text-align:center;animation:rise .6s ease both}
.brand-mark{position:relative;width:92px;height:58px;margin:0 auto 16px;filter:drop-shadow(0 12px 28px rgba(61,210,255,.28))}
.brand-mark i{position:absolute;height:13px;border-radius:100% 0 100% 0;background:linear-gradient(90deg,#83f3df,#2fc8fc);transform:rotate(-16deg)}
.brand-mark i:nth-child(1){width:78px;left:9px;top:20px}.brand-mark i:nth-child(2){width:55px;left:18px;top:7px;transform:rotate(-30deg)}.brand-mark i:nth-child(3){width:43px;left:32px;top:36px;transform:rotate(13deg)}
.eyebrow{margin:0 0 7px;color:#79dff8;font-size:11px;font-weight:800;letter-spacing:.28em}
h1{margin:0;font-family:STKaiti,KaiTi,"Microsoft YaHei",sans-serif;font-size:clamp(44px,7vw,74px);font-weight:800;letter-spacing:.12em;text-shadow:0 0 38px rgba(90,225,255,.28)}
.subtitle{margin:12px 0 18px;color:#acd1df;font-size:14px;letter-spacing:.06em}
.online-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(102,229,210,.2);border-radius:999px;background:rgba(7,41,57,.52);color:#b9e8df;font-size:12px}
.online-pill span{width:7px;height:7px;border-radius:50%;background:#55e7b4;box-shadow:0 0 14px #55e7b4;animation:pulse 1.8s infinite}.online-pill b{font-weight:600}
.join-card{width:min(520px,100%);padding:20px;border:1px solid var(--line);border-radius:22px;background:rgba(3,25,43,.7);box-shadow:0 28px 80px rgba(0,0,0,.3);backdrop-filter:blur(18px);animation:rise .65s .08s ease both}
.join-card label{display:block;margin:0 0 9px 2px;color:#b9d8e4;font-size:12px;font-weight:700}
.auth-tabs{display:flex;gap:5px;width:142px;margin:0 auto 18px;padding:4px;border:1px solid rgba(137,210,237,.12);border-radius:11px;background:rgba(0,14,26,.4)}.auth-tabs button{flex:1;height:29px;border:0;border-radius:8px;background:transparent;color:#729aac;font-size:11px;font-weight:750;cursor:pointer}.auth-tabs button.active{background:rgba(96,226,208,.14);color:#92f1dc;box-shadow:inset 0 0 0 1px rgba(103,235,215,.12)}
.auth-fields{display:grid;grid-template-columns:1fr 1fr auto;gap:9px}.auth-fields input{min-width:0;height:50px;padding:0 15px;border:1px solid rgba(137,210,237,.17);outline:none;border-radius:13px;background:rgba(1,15,27,.56);color:white}.auth-fields input:focus{border-color:rgba(78,215,255,.55);box-shadow:0 0 0 4px rgba(78,215,255,.07)}.auth-fields button{height:50px;padding:0 20px;border:0;border-radius:13px;background:linear-gradient(135deg,#5af0c2,#39bff8);color:#032238;font-weight:850;cursor:pointer}.auth-fields button:disabled{opacity:.55;cursor:wait}.auth-hint{margin:11px 2px 0;color:#638da0;font-size:9px;text-align:center}
.name-row{display:flex;gap:10px}.name-row input{min-width:0;flex:1;height:52px;padding:0 17px;border:1px solid rgba(137,210,237,.17);outline:none;border-radius:14px;background:rgba(1,15,27,.56);color:white}.name-row input:focus{border-color:rgba(78,215,255,.55);box-shadow:0 0 0 4px rgba(78,215,255,.07)}
.name-row button,.death-card>button:not(.ghost-button){height:52px;padding:0 25px;border:0;border-radius:14px;background:linear-gradient(135deg,#5af0c2,#39bff8);color:#032238;font-weight:850;cursor:pointer;box-shadow:0 10px 28px rgba(56,203,235,.2)}
.name-row button:disabled{opacity:.55;cursor:wait}.tips{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:15px;color:#6f9bb0;font-size:10px}.tips i{width:3px;height:3px;border-radius:50%;background:#527d91}
.hud{position:fixed;inset:0;z-index:10;pointer-events:none}.topbar{position:absolute;top:max(18px,env(safe-area-inset-top));left:18px;display:flex;gap:10px}.status-card{border:1px solid var(--line);border-radius:16px;background:var(--glass);box-shadow:0 12px 35px rgba(0,0,0,.17);backdrop-filter:blur(14px)}
.player-status{display:grid;grid-template-columns:42px 70px;gap:0 11px;min-width:178px;padding:10px 12px}.level-icon{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(109,226,255,.18);border-radius:13px;background:linear-gradient(145deg,rgba(77,215,255,.25),rgba(55,236,188,.08));color:#9cf6e0;font-weight:900}.status-card small{display:block;color:#8bb6c9;font-size:10px}.status-card strong{display:block;margin-top:1px;font-size:17px;font-variant-numeric:tabular-nums}.progress{grid-column:2;height:3px;margin-top:7px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}.progress span{display:block;width:20%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mint),var(--cyan));transition:width .3s}.score-status{min-width:90px;padding:10px 15px}.score-status strong{font-size:19px}
.rank-card{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;width:210px;padding:13px 14px 10px;border:1px solid var(--line);border-radius:17px;background:var(--glass);backdrop-filter:blur(14px)}.rank-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;font-weight:800}.rank-title b{color:#6d9db2;font-size:9px;font-weight:600}.rank-card ol{list-style:none;margin:0;padding:0}.rank-card li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;height:25px;color:#a9cbd9;font-size:10px}.rank-card li.self{color:#63e6cb;font-weight:800}.rank-card em{font-style:normal;color:#638da1;font-variant-numeric:tabular-nums}
.world-chat{position:absolute;top:max(88px,calc(env(safe-area-inset-top) + 88px));left:18px;width:310px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(3,24,40,.7);box-shadow:0 14px 38px rgba(0,0,0,.17);backdrop-filter:blur(15px);pointer-events:auto;transition:.25s}.chat-title{display:grid;grid-template-columns:1fr auto 12px;align-items:center;width:100%;height:38px;padding:0 12px;border:0;border-bottom:1px solid rgba(141,218,241,.1);background:transparent;color:#d9f0f7;text-align:left;cursor:pointer}.chat-title span{font-size:11px;font-weight:850}.chat-title b{color:#668fa2;font-size:8px;font-weight:600}.chat-title i{position:relative;width:7px;height:7px;margin-left:5px;border-right:1px solid #6f9daf;border-bottom:1px solid #6f9daf;transform:rotate(45deg) translateY(-2px);transition:.2s}.world-chat.collapsed .chat-title i{transform:rotate(-45deg) translate(-1px,-1px)}
.chat-messages{height:112px;padding:8px 11px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.chat-messages::-webkit-scrollbar{display:none}.chat-line{display:grid;grid-template-columns:auto 1fr;gap:6px;margin:0 0 6px;line-height:1.35;font-size:10px}.chat-line b{max-width:82px;overflow:hidden;color:#62dfc7;text-overflow:ellipsis;white-space:nowrap}.chat-line span{min-width:0;color:#b8d2dd;overflow-wrap:anywhere}.chat-line.self b{color:#ffd177}.chat-empty{margin:28px 0;text-align:center;color:#567e91;font-size:9px}.chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid rgba(141,218,241,.1)}.chat-form input{min-width:0;flex:1;height:32px;padding:0 10px;border:1px solid rgba(146,218,239,.13);outline:0;border-radius:9px;background:rgba(0,12,23,.5);color:#e9f8fc;font-size:10px}.chat-form input:focus{border-color:rgba(83,222,211,.4)}.chat-form button{width:50px;border:0;border-radius:9px;background:linear-gradient(135deg,#5ce7c2,#42bfea);color:#05233a;font-size:10px;font-weight:850;cursor:pointer}.chat-form button:disabled{opacity:.45}.world-chat.collapsed .chat-messages{height:42px;padding-top:7px}.world-chat.collapsed .chat-line{display:none}.world-chat.collapsed .chat-line:last-child{display:grid}.world-chat.collapsed .chat-empty{margin:8px 0}.world-chat.collapsed .chat-form{display:none}
.minimap{position:absolute;right:18px;bottom:max(18px,env(safe-area-inset-bottom));width:150px;height:150px;border:1px solid var(--line);border-radius:50%;overflow:hidden;background:rgba(1,19,33,.58);box-shadow:0 14px 40px rgba(0,0,0,.2)}.minimap canvas{width:100%;height:100%}.minimap span{position:absolute;bottom:15px;left:0;right:0;text-align:center;color:#6d9db2;font-size:8px;letter-spacing:.1em}
.warning{position:absolute;top:110px;left:50%;display:flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(255,105,86,.28);border-radius:999px;opacity:0;transform:translate(-50%,-8px);background:rgba(70,16,20,.72);box-shadow:0 0 32px rgba(255,55,76,.12);color:#ffc0ae;font-size:10px;transition:.25s}.warning b{padding:3px 6px;border-radius:6px;background:#ff5065;color:white;font-size:8px;letter-spacing:.12em}.warning.show{opacity:1;transform:translate(-50%,0);animation:dangerPulse 1.2s infinite}
.stage-banner{position:absolute;left:50%;top:22%;display:flex;flex-direction:column;align-items:center;min-width:250px;padding:18px 34px;border:1px solid rgba(121,240,218,.3);border-radius:18px;opacity:0;transform:translate(-50%,-8px) scale(.92);background:radial-gradient(circle at 50% 0,rgba(62,231,211,.24),rgba(3,24,40,.78));box-shadow:0 18px 70px rgba(0,0,0,.3),0 0 45px rgba(72,225,211,.12);backdrop-filter:blur(16px)}.stage-banner.show{animation:stageReveal 2.7s ease both}.stage-banner small{color:#69e8ce;font-size:8px;font-weight:900;letter-spacing:.3em}.stage-banner b{margin-top:6px;font-family:STKaiti,KaiTi,"Microsoft YaHei",sans-serif;font-size:27px;letter-spacing:.1em;text-shadow:0 0 22px rgba(112,249,218,.55)}.stage-banner span{margin-top:5px;color:#87adbe;font-size:9px;letter-spacing:.15em}
.controls-help{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(186,220,232,.42);font-size:10px;letter-spacing:.08em}.mobile-help{display:none}
.joystick{display:none;position:absolute;left:28px;bottom:max(28px,env(safe-area-inset-bottom));width:112px;height:112px;border:1px solid rgba(165,226,245,.14);border-radius:50%;background:rgba(3,26,43,.22)}.joystick:before{content:"";position:absolute;inset:16px;border:1px dashed rgba(165,226,245,.12);border-radius:50%}.stick{position:absolute;left:32px;top:32px;width:48px;height:48px;border:1px solid rgba(127,230,255,.25);border-radius:50%;background:rgba(51,191,229,.22);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.death-screen{background:rgba(1,10,18,.65)}.death-card{width:min(400px,100%);padding:32px;text-align:center;border:1px solid var(--line);border-radius:24px;background:rgba(3,25,43,.86);box-shadow:0 30px 90px rgba(0,0,0,.38);backdrop-filter:blur(20px)}.death-card h2{margin:8px 0 26px;font-size:23px}.death-card h2 span{color:#73e6d2}.death-stats{display:grid;grid-template-columns:1fr 1fr;margin-bottom:25px}.death-stats div+div{border-left:1px solid var(--line)}.death-stats b{display:block;font-size:25px}.death-stats span{display:block;margin-top:4px;color:#789fb1;font-size:10px}.death-card>button{width:100%;cursor:pointer}.ghost-button{height:42px;margin-top:10px;border:0;background:transparent;color:#7da6b8;font-size:12px}
.toast{position:fixed;z-index:50;left:50%;bottom:45px;max-width:calc(100% - 36px);padding:10px 16px;border:1px solid var(--line);border-radius:10px;opacity:0;transform:translate(-50%,12px);background:rgba(2,20,34,.88);color:#cbe7f1;font-size:12px;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes pulse{50%{opacity:.4;box-shadow:0 0 4px #55e7b4}}@keyframes dangerPulse{50%{box-shadow:0 0 42px rgba(255,55,76,.24)}}@keyframes stageReveal{0%{opacity:0;transform:translate(-50%,15px) scale(.88)}15%,72%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-12px) scale(1.04)}}
@media(max-width:700px),(pointer:coarse){.screen{padding:20px}.brand{margin-top:-32px}.subtitle{max-width:320px;margin-left:auto;margin-right:auto;line-height:1.7}.join-card{padding:16px;border-radius:19px}.auth-tabs{margin-bottom:14px}.auth-fields{display:block}.auth-fields input,.auth-fields button{width:100%}.auth-fields input+input,.auth-fields button{margin-top:8px}.tips{gap:7px;white-space:nowrap}.topbar{top:max(10px,env(safe-area-inset-top));left:10px}.player-status{min-width:158px;grid-template-columns:36px 74px;padding:7px 9px}.level-icon{width:36px;height:36px}.score-status{min-width:68px;padding:7px 9px}.world-chat{top:max(68px,calc(env(safe-area-inset-top) + 68px));left:10px;width:min(210px,calc(100vw - 165px));border-radius:13px}.world-chat:not(.expanded){max-height:82px}.world-chat:not(.expanded) .chat-messages{height:42px}.world-chat:not(.expanded) .chat-line{display:none}.world-chat:not(.expanded) .chat-line:last-child{display:grid}.world-chat:not(.expanded) .chat-form{display:none}.world-chat:not(.expanded) .chat-title i{transform:rotate(-45deg) translate(-1px,-1px)}.world-chat.expanded{width:min(285px,calc(100vw - 20px))}.chat-title{height:34px;padding:0 9px}.chat-messages{height:110px;padding:7px 9px}.chat-form{padding:6px}.chat-form input{height:31px}.rank-card{top:max(65px,calc(env(safe-area-inset-top) + 65px));right:10px;width:140px;padding:8px 9px}.rank-card li{height:20px}.rank-card li:nth-child(n+5){display:none}.rank-title b{display:none}.minimap{right:10px;bottom:max(12px,env(safe-area-inset-bottom));width:88px;height:88px}.minimap span{bottom:7px}.controls-help{bottom:126px}.desktop-help{display:none}.mobile-help{display:inline}.joystick{left:18px;bottom:max(18px,env(safe-area-inset-bottom));width:104px;height:104px}.stick{left:30px;top:30px;width:44px;height:44px}.warning{top:116px;max-width:calc(100% - 24px);white-space:nowrap}.stage-banner{top:24%;min-width:210px;padding:14px 24px}.brand-mark{transform:scale(.8);margin-bottom:5px}h1{font-size:45px}.death-card{padding:26px 22px}}
@media(max-width:380px){.tips span:nth-last-child(1),.tips i:nth-last-child(2){display:none}.rank-card{width:150px}.score-status{display:none}}
@media(max-width:380px){.rank-card{width:125px}.rank-card li:nth-child(n+4){display:none}.world-chat{width:calc(100vw - 150px)}.world-chat.expanded{width:calc(100vw - 20px)}.chat-title b{display:none}.minimap{width:78px;height:78px}.controls-help{display:none}}
@media(max-height:500px) and (orientation:landscape){.topbar{top:8px}.world-chat{top:64px;max-height:76px}.world-chat.expanded{max-height:170px}.world-chat.expanded .chat-messages{height:90px}.rank-card{top:8px}.rank-card li:nth-child(n+4){display:none}.minimap{width:72px;height:72px}.joystick{width:92px;height:92px}.stick{left:27px;top:27px;width:38px;height:38px}.warning{top:74px}.stage-banner{top:18%}}