*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a1a;color:#fff;font-family:'PingFang SC','Microsoft YaHei',sans-serif;overflow:hidden;width:100vw;height:100vh}
#screen-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:radial-gradient(ellipse at center,#0d1117,#050510)}
.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}
@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),#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}
.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-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}
.btn-sec:hover{background:rgba(230,57,70,.15)}
.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}

/* 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),#0a0a1a 70%);overflow-y:auto}
.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;background:rgba(255,255,255,.03)}
.lo-card.selected{border-color:#e63946;background:rgba(230,57,70,.1);box-shadow:0 0 16px rgba(230,57,70,.15)}
.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-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-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}

/* 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),#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}
.rk-tab.active{color:#22d3ee;border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.08)}
.rk-list{margin-top:16px;width:90%;max-width:400px;max-height:60vh;overflow-y:auto}
.rk-row{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.05)}
.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}
#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}
#hudMinimap{position:absolute;bottom:110px;left:10px;border:1px solid rgba(230,57,70,.3);border-radius:8px;background:rgba(0,0,0,.6);z-index:10;overflow:hidden}
#hudInventory{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:10}
#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:rgba(255,255,255,.6);pointer-events:none;z-index:10;text-shadow:0 0 4px rgba(0,0,0,.8)}

/* 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),#050510)}
.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}

/* Blocker */
#blocker{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.7);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.blocker-text{font-size:28px;font-weight:700;color:#e63946}
.blocker-sub{font-size:13px;color:rgba(255,255,255,.4);margin-top:12px}

/* Toast */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);padding:10px 24px;background:rgba(0,0,0,.85);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)}}

/* Mobile Controls */
.joy{position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);z-index:20;touch-action:none;display:none}
.joy-k{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.2);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#joyL{bottom:30px;left:20px}
#joyR{bottom:30px;right:20px}
.m-btn{position:absolute;z-index:20;padding:10px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;font-family:inherit;font-size:13px;touch-action:none;display:none;user-select:none}
#btnMFire{bottom:170px;right:20px;background:rgba(230,57,70,.2);border-color:rgba(230,57,70,.4);font-size:14px;padding:14px 20px}
#btnMReload{bottom:170px;right:110px}
#btnMUse{bottom:230px;right:20px}
body.mobile .joy,body.mobile .m-btn{display:block}
body.mobile #crosshair{display:none}
body.mobile #blocker{display:none!important}

/* Reload bar */
#hudReload{position:absolute;top:48px;left:50%;transform:translateX(-50%);width:80px;height:6px;background:rgba(0,0,0,.5);border-radius:3px;z-index:12}
#hudReloadFill{height:100%;background:#4ade80;border-radius:3px;width:0;transition:width 0.1s}

/* Extract progress */
#hudExtract{position:absolute;top:60%;left:50%;transform:translateX(-50%);width:200px;height:20px;background:rgba(0,0,0,.6);border-radius:10px;z-index:12;text-align:center;line-height:20px;font-size:12px;color:#4ade80}
#hudExtractFill{position:absolute;top:0;left:0;height:100%;background:rgba(74,222,128,.3);border-radius:10px}

/* Extract direction indicator */
#hudExtDir{position:absolute;bottom:140px;left:50%;transform:translateX(-50%);color:#4ade80;font-size:12px;z-index:12;text-shadow:0 0 4px rgba(0,0,0,.8);white-space:nowrap}

/* Inventory panel */
#invPanel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:280px;background:rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:16px;z-index:30;color:#fff;font-size:13px}
.inv-title,.inv-sep{font-size:14px;font-weight:700;margin-bottom:8px;color:#ccc}
.inv-sep{margin-top:12px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
#invSlots,#secSlots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.inv-slot{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 4px;text-align:center;font-size:11px;cursor:pointer;min-height:40px}
.inv-slot:hover{background:rgba(255,255,255,.12)}
.inv-slot .iv-name{color:#ddd;margin-bottom:2px}
.inv-slot .iv-val{color:#4ade80;font-size:10px}
.inv-hint{font-size:10px;color:rgba(255,255,255,.3);margin-top:8px;text-align:center}

/* Damage flash */
#dmgFlash{position:fixed;top:0;left:0;width:100vw;height:100vh;background:radial-gradient(ellipse at center,transparent 50%,rgba(230,57,70,.4));z-index:15;pointer-events:none;opacity:0;transition:opacity 0.15s}

/* Kill toast */
.kill-toast{position:fixed;top:35%;left:50%;transform:translate(-50%,-50%);color:#e63946;font-size:18px;font-weight:700;z-index:16;pointer-events:none;text-shadow:0 0 6px rgba(0,0,0,.8);animation:killPop 1.2s forwards}
@keyframes killPop{0%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}60%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}

#btnMBag{bottom:110px;right:110px}
#btnMNade{bottom:230px;right:110px}