*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a1a;color:#fff;font-family:'PingFang SC','Microsoft YaHei',-apple-system,sans-serif;overflow:hidden;width:100vw;height:100vh}

/* ===== Loading ===== */
#screen-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:radial-gradient(ellipse at center,#0d1117 0%,#050510 100%)}
.ld-title{font-size:42px;font-weight:900;background:linear-gradient(135deg,#e63946,#ff6b6b,#ffa500);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradShift 3s ease infinite;letter-spacing:4px}
.ld-sub{font-size:13px;color:rgba(255,255,255,.3);letter-spacing:10px;margin-top:6px}
.ld-spinner{margin-top:28px;display:flex;gap:8px}
.ld-dot{width:8px;height:8px;border-radius:50%;background:#e63946;animation:ldBounce .6s ease-in-out infinite}
.ld-dot:nth-child(2){animation-delay:.1s}.ld-dot:nth-child(3){animation-delay:.2s}.ld-dot:nth-child(4){animation-delay:.3s}.ld-dot:nth-child(5){animation-delay:.4s}
@keyframes ldBounce{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-12px);opacity:1}}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.ld-bar{width:260px;height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:24px;overflow:hidden}
.ld-fill{width:0%;height:100%;background:linear-gradient(90deg,#e63946,#ffa500);border-radius:2px;transition:width .3s}
#ldText{margin-top:12px;color:rgba(255,255,255,.3);font-size:12px}

/* ===== Menu ===== */
#screen-menu{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:radial-gradient(ellipse at 50% 30%,rgba(230,57,70,.08) 0%,#0a0a1a 70%)}
.menu-title{font-size:44px;font-weight:900;background:linear-gradient(135deg,#e63946,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:5px;text-shadow:none}
.menu-sub{font-size:12px;color:rgba(230,57,70,.4);letter-spacing:12px;margin-top:4px}
.menu-cash{margin-top:20px;font-size:24px;font-weight:700;color:#4ade80}
.menu-auth{margin-top:16px}
.menu-stats{margin-top:8px;font-size:13px;color:rgba(255,255,255,.35)}
.menu-btns{margin-top:28px;display:flex;flex-direction:column;gap:10px;align-items:center}
.btn-raid{padding:14px 52px;font-size:16px;font-weight:700;background:linear-gradient(135deg,#e63946,#ff4d5a);color:#fff;border:none;border-radius:12px;cursor:pointer;font-family:inherit;letter-spacing:3px;transition:all .25s;box-shadow:0 4px 20px rgba(230,57,70,.3)}
.btn-raid:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 30px rgba(230,57,70,.4)}
.btn-raid:active{transform:scale(.97)}
.btn-sec{padding:10px 36px;font-size:14px;background:rgba(230,57,70,.08);color:#e63946;border:1px solid rgba(230,57,70,.25);border-radius:10px;cursor:pointer;font-family:inherit;letter-spacing:2px;transition:all .2s;backdrop-filter:blur(8px)}
.btn-sec:hover{background:rgba(230,57,70,.15);border-color:#e63946}
.btn-back{padding:8px 28px;font-size:13px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;font-family:inherit;margin-top:16px;transition:all .2s}
.btn-back:hover{border-color:rgba(230,57,70,.5);color:#e63946}

/* ===== Loadout ===== */
#screen-loadout{display:flex;flex-direction:column;align-items:center;padding:36px 16px;height:100vh;background:radial-gradient(ellipse at 50% 20%,rgba(230,57,70,.06) 0%,#0a0a1a 70%);overflow-y:auto}
#screen-loadout::-webkit-scrollbar{width:4px}
#screen-loadout::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.lo-title{font-size:26px;font-weight:800;background:linear-gradient(135deg,#e63946,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px}
.lo-cash{margin-top:8px;font-size:20px;font-weight:700;color:#4ade80}
.lo-section{width:100%;max-width:500px;margin-top:18px}
.lo-label{font-size:12px;color:rgba(255,255,255,.35);margin-bottom:8px;letter-spacing:2px;text-transform:uppercase}
.lo-grid{display:flex;flex-wrap:wrap;gap:8px}
.lo-card{padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer;min-width:90px;text-align:center;transition:all .2s;position:relative;background:rgba(255,255,255,.03);backdrop-filter:blur(6px)}
.lo-card:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.lo-card.selected{border-color:#e63946;background:rgba(230,57,70,.1);box-shadow:0 0 16px rgba(230,57,70,.15)}
.lo-card.locked{opacity:.3;cursor:default}
.lo-card .lc-name{font-size:13px;font-weight:600;color:#eee}
.lo-card .lc-cost{font-size:12px;color:#4ade80;margin-top:3px}
.lo-card .lc-stat{font-size:10px;color:rgba(255,255,255,.35);margin-top:3px}
.lo-summary{margin-top:18px;font-size:13px;color:rgba(255,255,255,.4);text-align:center}
.lo-btns{margin-top:22px;display:flex;gap:10px}

.lo-maps{display:flex;flex-wrap:wrap;gap:8px}
.lo-map-card{border-left:3px solid #555;min-width:120px;flex:1;border-radius:10px}
.lo-map-card .lc-stat{font-size:10px;color:rgba(255,255,255,.3);margin-top:3px}
.lo-map-card.selected .lc-stat{color:rgba(255,255,255,.5)}

/* ===== Rank ===== */
#screen-rank{display:flex;flex-direction:column;align-items:center;padding-top:50px;height:100vh;background:radial-gradient(ellipse at 50% 20%,rgba(34,211,238,.06) 0%,#0a0a1a 70%)}
.rk-title{font-size:26px;font-weight:800;background:linear-gradient(135deg,#22d3ee,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px}
.rk-tabs{margin-top:16px;display:flex;gap:6px}
.rk-tab{padding:7px 18px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;font-family:inherit;font-size:12px;transition:all .2s}
.rk-tab.active{color:#22d3ee;border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.08)}
.rk-tab:hover{border-color:rgba(255,255,255,.2)}
.rk-list{margin-top:16px;width:90%;max-width:400px;max-height:60vh;overflow-y:auto}
.rk-list::-webkit-scrollbar{width:4px}
.rk-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.rk-row{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s}
.rk-row:hover{background:rgba(255,255,255,.03)}
.rk-row .rr-i{color:#ffd700;width:32px;font-weight:700}.rk-row .rr-n{flex:1;color:rgba(255,255,255,.6)}.rk-row .rr-v{color:#4ade80;font-weight:600}

/* ===== Game HUD ===== */
#screen-game{position:relative;width:100vw;height:100vh}
#gameCanvas{display:block;width:100%;height:100%}
#hud{position:absolute;top:10px;left:10px;display:flex;gap:10px;align-items:center;pointer-events:none;z-index:10}
#hudHP{width:120px;height:16px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);border-radius:8px;position:relative;overflow:hidden}
#hudHPFill{height:100%;background:linear-gradient(90deg,#e63946,#ff6b6b);transition:width .2s;width:100%;border-radius:7px}
#hudHPNum{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:10px;line-height:16px;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.8);font-weight:700}
#hudArmor,#hudWeapon,#hudAmmo,#hudTimer{font-size:12px;color:rgba(255,255,255,.6);text-shadow:1px 1px 2px rgba(0,0,0,.8)}
#hudTimer{color:#ffd700;font-weight:700}

#hudInventory{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:10}
.inv-slot{width:46px;height:46px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;color:rgba(255,255,255,.5);cursor:pointer;position:relative;transition:all .15s}
.inv-slot:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
.inv-slot.filled{border-color:rgba(255,255,255,.2)}
.inv-slot.selected{border-color:#e63946;background:rgba(230,57,70,.15);box-shadow:0 0 10px rgba(230,57,70,.2)}
.inv-slot .inv-icon{font-size:16px;line-height:1}
.inv-slot .inv-name{font-size:7px;color:rgba(255,255,255,.4);margin-top:1px;max-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-slot .inv-key{position:absolute;top:2px;left:4px;font-size:8px;color:rgba(255,255,255,.25)}
.inv-slot .inv-val{position:absolute;bottom:2px;right:4px;font-size:7px;color:#4ade80}

#hudQuickBar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}
.qb-btn{width:50px;height:38px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;font-size:16px;cursor:pointer;font-family:inherit;position:relative;display:flex;align-items:center;justify-content:center;transition:all .15s}
.qb-btn:hover{border-color:rgba(230,57,70,.4);background:rgba(230,57,70,.1)}
.qb-btn:active{transform:scale(0.93)}
.qb-key{position:absolute;bottom:2px;right:4px;font-size:8px;color:rgba(255,255,255,.25)}
.qb-count{position:absolute;top:2px;right:4px;font-size:9px;color:#4ade80;font-weight:600}
.qb-drop{opacity:.5}
.qb-drop:hover{opacity:1;border-color:rgba(230,57,70,.4)}

#hudMinimap{position:absolute;bottom:110px;left:10px;border:1px solid rgba(230,57,70,.3);border-radius:8px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:10;overflow:hidden}

#hudExtract{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;text-align:center;z-index:20}
#hudExtractBar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;margin-bottom:8px;overflow:hidden}
#hudExtractFill{height:100%;background:linear-gradient(90deg,#4ade80,#22d3ee);width:0%;transition:width .1s;border-radius:3px}
#hudExtractText{font-size:14px;color:#4ade80;font-weight:600;text-shadow:0 0 10px rgba(74,222,128,.3)}

/* ===== Mobile Controls ===== */
.joy{position:absolute;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.1);z-index:20;touch-action:none}
.joy-k{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);backdrop-filter:blur(4px)}
#joyL{bottom:36px;left:24px}
#joyR{bottom:36px;right:24px}
.m-btn{position:absolute;z-index:20;padding:8px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;font-family:inherit;font-size:12px;backdrop-filter:blur(4px)}
#btnMReload{bottom:170px;right:24px}
#btnMNade{bottom:170px;right:90px}
#btnMUse{bottom:170px;right:156px}
#btnMWeapon{bottom:220px;right:24px}
#btnMSprint{bottom:170px;left:24px}
#btnMSecure{bottom:220px;left:24px}
#btnMAir{bottom:270px;left:24px;font-size:10px}
#btnMSupply{bottom:270px;left:90px;font-size:10px}

/* ===== Result ===== */
#screen-result{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:radial-gradient(ellipse at center,rgba(10,10,26,.98) 0%,#050510 100%)}
.rs-title{font-size:36px;font-weight:900;letter-spacing:4px}
.rs-title.survived{background:linear-gradient(135deg,#4ade80,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rs-title.dead{background:linear-gradient(135deg,#e63946,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rs-body{margin-top:22px;text-align:center;line-height:2.2;font-size:15px;color:rgba(255,255,255,.45)}
.rs-body span{color:#4ade80;font-weight:600}
.rs-body .lost{color:#e63946;font-weight:600}
#screen-result .btn-raid{margin-top:24px}
#screen-result .btn-sec{margin-top:10px}

/* ===== Landscape Mode ===== */
body.landscape-mode{transform-origin:top left}
@media screen and (orientation: portrait) {
  body.landscape-mode{width:100vh;height:100vw;transform:rotate(90deg) translateY(-100vw);overflow:hidden}
  body.landscape-mode #gameCanvas{width:100vh!important;height:100vw!important}
}

/* ===== Toast & Announce ===== */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);padding:10px 24px;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:10px;font-size:13px;z-index:50;pointer-events:none}
.announce{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:32px;font-weight:900;z-index:40;pointer-events:none;animation:fadeOut 2s forwards;text-shadow:0 0 20px currentColor}
@keyframes fadeOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}

/* ===== Raid Loading Overlay ===== */
#raidLoading{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:radial-gradient(ellipse at center,#0d1117,#050510);z-index:100;flex-direction:column;align-items:center;justify-content:center}
.rl-box{text-align:center}
.rl-title{font-size:28px;font-weight:800;background:linear-gradient(135deg,#e63946,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:4px}
.rl-map{font-size:18px;color:#ffd700;margin-top:12px;letter-spacing:2px}
.rl-box .ld-spinner{justify-content:center;margin-top:24px}
.rl-tip{margin-top:18px;font-size:12px;color:rgba(255,255,255,.25)}