*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a12;color:#ddd;font-family:'Courier New',monospace;overflow:hidden;width:100vw;height:100vh}

/* Loading */
#screen-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:#050510}
.ld-title{font-size:48px;color:#e63946;text-shadow:0 0 20px #e63946;letter-spacing:4px}
.ld-sub{font-size:16px;color:#555;letter-spacing:10px;margin-top:6px}
.ld-bar{width:280px;height:4px;background:#222;margin-top:36px;overflow:hidden}
.ld-fill{width:0%;height:100%;background:linear-gradient(90deg,#e63946,#f4a261);transition:width .3s}
#ldText{margin-top:10px;color:#555;font-size:13px}

/* Menu */
#screen-menu{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:linear-gradient(180deg,#050510,#0d1117)}
.menu-title{font-size:50px;color:#e63946;text-shadow:0 0 30px #e63946;letter-spacing:5px}
.menu-sub{font-size:14px;color:#e63946;opacity:.5;letter-spacing:12px;margin-top:4px}
.menu-cash{margin-top:20px;font-size:22px;color:#4ade80}
.menu-auth{margin-top:16px}
.menu-stats{margin-top:8px;font-size:13px;color:#666}
.menu-btns{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.btn-raid{padding:14px 52px;font-size:17px;background:#e63946;color:#fff;border:none;cursor:pointer;font-family:inherit;font-weight:bold;letter-spacing:3px;transition:all .2s}
.btn-raid:hover{background:#ff4d5a;transform:scale(1.04)}
.btn-sec{padding:10px 36px;font-size:14px;background:transparent;color:#e63946;border:1px solid #e63946;cursor:pointer;font-family:inherit;letter-spacing:2px}
.btn-sec:hover{background:#e63946;color:#fff}
.btn-back{padding:8px 28px;font-size:13px;background:transparent;color:#666;border:1px solid #333;cursor:pointer;font-family:inherit;margin-top:16px}
.btn-back:hover{border-color:#e63946;color:#e63946}

/* Loadout */
#screen-loadout{display:flex;flex-direction:column;align-items:center;padding:40px 16px;height:100vh;background:#050510;overflow-y:auto}
.lo-title{font-size:28px;color:#e63946;letter-spacing:3px}
.lo-cash{margin-top:8px;font-size:18px;color:#4ade80}
.lo-section{width:100%;max-width:500px;margin-top:16px}
.lo-label{font-size:13px;color:#888;margin-bottom:6px;letter-spacing:2px}
.lo-grid{display:flex;flex-wrap:wrap;gap:6px}
.lo-card{padding:8px 12px;border:1px solid #333;cursor:pointer;min-width:90px;text-align:center;transition:all .15s;position:relative}
.lo-card:hover{border-color:#666}
.lo-card.selected{border-color:#e63946;background:rgba(230,57,70,.1)}
.lo-card.locked{opacity:.35;cursor:default}
.lo-card .lc-name{font-size:12px;color:#ccc}
.lo-card .lc-cost{font-size:11px;color:#4ade80;margin-top:2px}
.lo-card .lc-stat{font-size:10px;color:#666;margin-top:2px}
.lo-summary{margin-top:16px;font-size:13px;color:#888;text-align:center}
.lo-btns{margin-top:20px;display:flex;gap:10px}

/* Rank */
#screen-rank{display:flex;flex-direction:column;align-items:center;padding-top:50px;height:100vh;background:#050510}
.rk-title{font-size:28px;color:#22d3ee;letter-spacing:3px}
.rk-tabs{margin-top:14px;display:flex;gap:6px}
.rk-tab{padding:6px 16px;background:transparent;color:#555;border:1px solid #333;cursor:pointer;font-family:inherit;font-size:12px}
.rk-tab.active{color:#22d3ee;border-color:#22d3ee}
.rk-list{margin-top:14px;width:90%;max-width:400px}
.rk-row{display:flex;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #1a1a2e}
.rk-row .rr-i{color:#ffd700;width:28px}.rk-row .rr-n{flex:1;color:#aaa}.rk-row .rr-v{color:#4ade80}

/* Game HUD */
#screen-game{position:relative;width:100vw;height:100vh}
#gameCanvas{display:block;width:100%;height:100%}
#hud{position:absolute;top:8px;left:8px;display:flex;gap:10px;align-items:center;pointer-events:none;z-index:10}
#hudHP{width:110px;height:14px;background:#222;border:1px solid #444;position:relative}
#hudHPFill{height:100%;background:#e63946;transition:width .2s;width:100%}
#hudHPNum{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:10px;line-height:14px;color:#fff;text-shadow:1px 1px 0 #000}
#hudArmor,#hudWeapon,#hudAmmo,#hudTimer{font-size:12px;color:#aaa}
#hudTimer{color:#ffd700}

.lo-maps{display:flex;flex-wrap:wrap;gap:6px}
.lo-map-card{border-left:3px solid #555;min-width:120px;flex:1}
.lo-map-card .lc-stat{font-size:9px;color:#666;margin-top:2px}
.lo-map-card.selected .lc-stat{color:#aaa}

#hudInventory{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);display:flex;gap:3px;z-index:10}
.inv-slot{width:44px;height:44px;border:1px solid #333;background:rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;color:#aaa;cursor:pointer;position:relative;transition:border-color .15s}
.inv-slot:hover{border-color:#888}
.inv-slot.filled{border-color:#555}
.inv-slot.selected{border-color:#e63946;background:rgba(230,57,70,.15)}
.inv-slot .inv-icon{font-size:16px;line-height:1}
.inv-slot .inv-name{font-size:7px;color:#888;margin-top:1px;max-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-slot .inv-key{position:absolute;top:1px;left:3px;font-size:8px;color:#555}
.inv-slot .inv-val{position:absolute;bottom:1px;right:3px;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:48px;height:36px;background:rgba(0,0,0,.7);border:1px solid #444;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:#e63946;background:rgba(230,57,70,.15)}
.qb-btn:active{transform:scale(0.95)}
.qb-key{position:absolute;bottom:1px;right:3px;font-size:8px;color:#555}
.qb-count{position:absolute;top:1px;right:3px;font-size:9px;color:#4ade80}
.qb-drop{border-color:#555;opacity:.6}
.qb-drop:hover{opacity:1;border-color:#e63946}

#hudMinimap{position:absolute;top:8px;right:8px;border:1px solid #e63946;background:rgba(0,0,0,.7);z-index:10}

#hudExtract{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;text-align:center;z-index:20}
#hudExtractBar{height:6px;background:#333;margin-bottom:6px}
#hudExtractBar::after{content:'';display:block;height:100%;background:#4ade80;width:0%;transition:width .1s}
#hudExtractText{font-size:14px;color:#4ade80}

/* Mobile */
.joy{position:absolute;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);z-index:20;touch-action:none}
.joy-k{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#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,.08);border:1px solid rgba(255,255,255,.15);color:#fff;font-family:inherit;font-size:12px;border-radius:3px}
#btnMReload{bottom:170px;right:24px}
#btnMNade{bottom:170px;right:90px}
#btnMUse{bottom:170px;right:156px}

/* Result */
#screen-result{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:rgba(5,5,16,.95)}
.rs-title{font-size:40px;letter-spacing:4px}
.rs-title.survived{color:#4ade80;text-shadow:0 0 20px #4ade80}
.rs-title.dead{color:#e63946;text-shadow:0 0 20px #e63946}
.rs-body{margin-top:20px;text-align:center;line-height:2;font-size:15px;color:#888}
.rs-body span{color:#4ade80}
.rs-body .lost{color:#e63946}
#screen-result .btn-raid{margin-top:20px}
#screen-result .btn-sec{margin-top:8px}

/* Toast & Announce */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);padding:8px 20px;background:rgba(0,0,0,.85);border:1px solid #333;font-size:13px;z-index:50;pointer-events:none}
.announce{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:32px;z-index:40;pointer-events:none;animation:fadeOut 2s forwards}
@keyframes fadeOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}