/* TRENCHES Stage 2 — lobby (server list), killfeed, hit feedback, death screen, scoreboard, chat extras (NET agent) */
#serverSel{position:fixed;inset:0;z-index:92;display:none;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(8,10,7,.82) 0,rgba(8,10,7,.96) 100%)}
#serverSel.on{display:flex}
#serverSel .gt,#connecting .gt{font-size:46px;font-weight:700;letter-spacing:.3em;text-indent:.3em}
#serverSel .gs,#connecting .gs{font-size:13px;letter-spacing:.3em;color:var(--olive);margin:6px 0 22px}
.nrow{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-bottom:20px;width:640px}
.nrow label{font-size:13px;letter-spacing:.34em;color:var(--olive)}
#nameIn{width:100%;box-sizing:border-box;background:rgba(10,12,9,.92);border:2px solid var(--olive);color:var(--bone);font:700 24px var(--font);letter-spacing:.16em;padding:12px 16px;outline:none;text-transform:none;-webkit-user-select:text;user-select:text}
#nameIn::placeholder{color:rgba(233,236,223,.35);letter-spacing:.14em}
#nameIn:focus{border-color:var(--bone);box-shadow:0 0 0 3px rgba(150,170,100,.25)}
#nameIn:placeholder-shown{animation:nickpulse 1.4s ease-in-out infinite}
@keyframes nickpulse{0%,100%{border-color:var(--olive)}50%{border-color:var(--bone)}}
.nhint{font-size:11px;letter-spacing:.18em;opacity:.6}
#nameMsg,#srvMsg,#gangMsg{font-size:12px;letter-spacing:.2em;color:var(--red)}
#srvList{display:flex;flex-direction:column;gap:6px;width:640px}
.srv{display:grid;grid-template-columns:120px 1fr 64px 128px 74px;align-items:center;gap:16px;text-align:left;color:var(--bone);background:rgba(14,17,12,.9);border:0;border-left:5px solid var(--olive2);padding:14px 18px;font-family:var(--font);cursor:pointer;transition:.12s}
.srv:hover:not(:disabled){background:var(--olive);color:#0a0c09;border-left-color:var(--bone);transform:translateX(4px)}
.srv b{font-size:18px;letter-spacing:.16em}
.srv .sbar{height:6px;background:rgba(233,236,223,.14);display:block}
.srv .sbar i{display:block;height:100%;background:var(--olive)}
.srv:hover:not(:disabled) .sbar i{background:#0a0c09}
.srv em{font-style:normal;font-size:16px;font-weight:700;letter-spacing:.08em;text-align:right}
.srv .dots{display:flex;gap:6px}
.srv .dots i{font-style:normal;font-size:12px;font-weight:700;min-width:36px;text-align:center;padding:3px 0;background:var(--gc);color:#0a0c09;opacity:.92}
.srv .dots i.f{opacity:.4;text-decoration:line-through}
.srv u{text-decoration:none;font-size:12px;letter-spacing:.18em;text-align:right;opacity:.75}
.srv.full{opacity:.4;cursor:default;border-left-color:var(--red)}
.srv.full u{color:var(--red);opacity:1}
.srvfoot,.gfoot{display:flex;align-items:center;gap:20px;margin-top:20px;width:640px}
.gfoot{width:auto;margin-top:26px}
#gangSel .gcard.full{opacity:.4;cursor:default;border-top-color:#555;filter:grayscale(.7)}
#gangSel .gcard.full:hover{background:rgba(14,17,12,.9);color:var(--bone);transform:none}
.gcard .gslots{display:flex;justify-content:space-between;align-items:baseline;margin:-6px 0 14px;font-size:11px;letter-spacing:.24em;opacity:.85}
.gcard .gslots b{font-size:20px;letter-spacing:.06em}
#connecting{background:rgba(8,10,7,.96);z-index:93}
#connBar{transition:width .5s}

/* in-game network layer */
#netfx{position:fixed;inset:0;pointer-events:none;z-index:24}
#dmgVig{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,rgba(120,10,6,0) 42%,rgba(150,12,8,.62) 100%)}
#dmgDirs .dd{position:absolute;left:50%;top:50%;width:300px;height:300px;display:none;transform:translate(-50%,-50%)}
#dmgDirs .dd i{position:absolute;left:50%;top:-6px;width:92px;height:34px;margin-left:-46px;background:radial-gradient(ellipse at 50% 100%,rgba(235,40,24,.95),rgba(235,40,24,0) 70%)}
#killfeed{position:absolute;right:26px;top:164px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.kf{display:flex;gap:10px;align-items:baseline;background:rgba(10,12,9,.62);border-right:3px solid rgba(233,236,223,.35);padding:4px 12px;font-size:14px;letter-spacing:.14em;animation:fin .2s;transition:opacity .6s;text-shadow:0 1px 0 #000}
.kf i{font-style:normal;font-size:11px;letter-spacing:.2em;opacity:.7}
.kf.mine{border-right-color:var(--olive);background:rgba(50,59,36,.78)}
.kf.dead{border-right-color:var(--red);background:rgba(60,14,10,.7)}
.kf.out{opacity:0}
#killconf{position:absolute;left:50%;top:34%;transform:translateX(-50%);text-align:center;opacity:0;display:flex;flex-direction:column;align-items:center;gap:2px;text-shadow:0 3px 0 #000,0 0 18px rgba(0,0,0,.7)}
#killconf.on{animation:kc 2.1s ease-out forwards}
#killconf small{font-size:13px;letter-spacing:.5em;color:var(--red)}
#killconf b{font-size:36px;letter-spacing:.14em}
#killconf em{font-style:normal;font-size:16px;letter-spacing:.3em;color:var(--olive)}
#killconf em.z{color:var(--amber);font-size:12px}
@keyframes kc{0%{opacity:0;transform:translateX(-50%) scale(1.3)}12%{opacity:1;transform:translateX(-50%) scale(1)}78%{opacity:1}100%{opacity:0}}
#netlost{background:rgba(8,10,7,.9);z-index:100;pointer-events:auto}
#netlost .nl-t{font-size:56px;font-weight:700;letter-spacing:.24em;text-indent:.24em;color:#d6574a}
#netlost .nl-s{font-size:13px;letter-spacing:.3em;opacity:.75;margin-bottom:14px}

/* death screen (online) */
#dead.net.on{pointer-events:auto}
#dead.net .kl{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:2px}
#dead.net .kl b{font-size:40px;letter-spacing:.14em}
#dead.net .kl small{font-size:11px;letter-spacing:.34em;opacity:.7}
#dead .lost{margin-top:8px;font-size:12px;letter-spacing:.2em;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:620px;align-items:center}
#dead .lost small{opacity:.7;letter-spacing:.3em}
#dead .lost span{background:rgba(201,70,47,.25);border:1px solid rgba(201,70,47,.6);padding:2px 9px}
#dead .rsp{margin-top:18px;text-align:center}
#dead .rsp .rl{font-size:11px;letter-spacing:.3em;opacity:.7;margin-bottom:6px}
#dead .rsp .seg{justify-content:center}
#dead .rbtns{display:flex;gap:14px;margin-top:20px;align-items:center}
#dead .rbtns .mbtn:disabled{opacity:.5;cursor:default}
#dead .rbtns .mbtn:disabled:hover{background:rgba(10,12,9,.55);color:var(--bone);padding-left:22px;border-left-color:var(--olive2)}

/* scoreboard (hold L) */
#score{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:45;pointer-events:none;background:rgba(6,8,5,.5)}
#score.on{display:flex}
.sbox{width:640px;background:rgba(12,15,11,.94);border:1px solid rgba(233,236,223,.25);border-top:4px solid var(--olive);padding:20px 26px 14px}
.sbox .sh{display:flex;justify-content:space-between;align-items:baseline;font-size:26px;font-weight:700;letter-spacing:.28em;margin-bottom:12px}
.sbox .sh small{font-size:11px;letter-spacing:.24em;opacity:.7;font-weight:400}
.sbox .gangs{display:flex;gap:8px;margin-bottom:14px}
.sbox .gr{flex:1;border-top:4px solid var(--gc);background:rgba(233,236,223,.06);padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.sbox .gr b{font-size:15px;letter-spacing:.12em;color:var(--gc)}.sbox .gr span{font-size:11px;letter-spacing:.2em;opacity:.8}
.sbox table{width:100%;border-collapse:collapse;font-size:14px;letter-spacing:.1em}
.sbox th{font-size:10px;letter-spacing:.3em;opacity:.55;text-align:right;padding:3px 8px;font-weight:400}.sbox th:nth-child(2){text-align:left}
.sbox td{padding:5px 8px;text-align:right;border-top:1px solid rgba(233,236,223,.08)}.sbox td:nth-child(2){text-align:left;font-weight:700}.sbox td:first-child{width:30px;opacity:.55;text-align:left}
.sbox tr.me{background:rgba(151,165,106,.16)}
.sbox .sf{margin-top:12px;font-size:10px;letter-spacing:.24em;opacity:.55}.sbox .sf b{color:var(--olive)}

/* chat extras */
.cl.team{border-left:3px solid var(--olive)}
.cl u{text-decoration:none;color:var(--olive);font-size:11px;letter-spacing:.14em;font-weight:700}
#chat.teamIn #chatIn{border-color:#e8c23a;box-shadow:0 0 0 1px rgba(232,194,58,.4)}

/* ================= Stage 3: events, popups, polish ================= */
#evfx{position:fixed;inset:0;pointer-events:none;z-index:26}
#evStrip{position:absolute;left:24px;top:14px;display:none;flex-direction:column;gap:5px;align-items:flex-start}
.ev{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 12px;background:rgba(10,12,9,.72);border:1px solid rgba(233,236,223,.18);border-left:4px solid #e0b020;font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 0 #000;white-space:nowrap}
.ev b{font-weight:700}.ev u{text-decoration:none;font-weight:700}.ev span{font-variant-numeric:tabular-nums;font-weight:700;opacity:.9;min-width:34px;text-align:right}
.ev.double{border-left-color:#f0cf5a}.ev.double b{color:#f0cf5a}
.ev.war{border-left-color:#ffd34a}.ev.war b{color:#ffd34a}
.ev.war em{display:flex;gap:4px;font-style:normal}
.ev.war em i{font-style:normal;min-width:28px;text-align:center;padding:1px 6px;background:var(--gc);color:#0a0c09;font-weight:700}
.ev.war em i.me{outline:2px solid #f5f3e8;outline-offset:0}
.ev.wanted{border-left-color:#d6332a}.ev.wanted b{color:#ff6a5a}.ev.wanted.me{background:rgba(70,14,10,.82);animation:evme 1s steps(2) infinite}
.ev .sk{width:16px;height:16px;fill:#e84a3c;flex:none}
@keyframes evme{50%{border-color:#ff6a5a}}
#evBanner{position:absolute;left:50%;top:122px;transform:translateX(-50%);min-width:440px;max-width:90vw;text-align:center;padding:11px 36px 12px;background:rgba(10,12,9,.84);border:1px solid rgba(233,236,223,.16);border-top:4px solid var(--bc,#e0b020);display:none;text-shadow:0 2px 0 #000}
#evBanner .eb-t{font-size:30px;font-weight:700;letter-spacing:.3em;text-indent:.3em;color:var(--bc);white-space:nowrap}
#evBanner .eb-s{font-size:13px;letter-spacing:.26em;margin-top:3px;text-transform:uppercase;white-space:nowrap}
#evBanner .eb-s:empty{display:none}
#evBanner.k-double{--bc:#f0cf5a}#evBanner.k-war{--bc:#ffd34a}#evBanner.k-wanted{--bc:#ff6a5a}#evBanner.k-attack{--bc:#ff3a2a;background:rgba(48,10,8,.9)}#evBanner.k-law{--bc:#7da6ff;min-width:300px}
#evBanner.k-law .eb-t{font-size:22px}
@keyframes ebin{0%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(1.08)}5%{opacity:1;transform:translateX(-50%)}90%{opacity:1}100%{opacity:0}}
#evFlash{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 120px 24px rgba(255,40,24,.5)}
@keyframes evflash{0%{opacity:0}8%{opacity:1}22%{opacity:.1}36%{opacity:1}50%{opacity:.1}64%{opacity:.9}100%{opacity:0}}
#crPop{position:absolute;right:236px;top:20px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cp{font-size:26px;font-weight:700;letter-spacing:.06em;text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.7);animation:cpf 1.5s ease-out forwards}
.cp.up{color:#b8e07a}.cp.down{color:#ff7a68}
@keyframes cpf{0%{opacity:0;transform:translateY(12px) scale(1.3)}12%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
#wmark{position:fixed;display:none;flex-direction:column;align-items:center;transform:translate(-50%,-50%);text-shadow:0 1px 0 #000,0 0 6px #000;animation:wpulse 1s ease-in-out infinite}
#wmark .sk{width:32px;height:32px;fill:#ff5a4a;filter:drop-shadow(0 0 5px rgba(0,0,0,.9))}
#wmark.friend .sk{fill:#97a56a}
#wmark b{font-size:13px;letter-spacing:.14em;color:#f5f3e8}
#wmark small{white-space:nowrap;font-size:10px;letter-spacing:.24em;font-weight:700;color:#ff8a7a}
#wmark.friend small{color:#b8c98a}
#wmark .arr{position:absolute;left:50%;top:50%;width:0;height:0;border-left:13px solid #ff5a4a;border-top:8px solid transparent;border-bottom:8px solid transparent;margin:-8px 0 0 -6px;filter:drop-shadow(0 0 3px #000)}
#wmark.friend .arr{border-left-color:#97a56a}
@keyframes wpulse{50%{opacity:.7}}
/* top-left column: event strip first, then the toasts */
#feed{left:24px !important;top:132px !important;transform:none !important;align-items:flex-start !important}
/* wanted stars: readable at a glance, pop when the level rises */
#stars{gap:5px;padding:4px 6px;background:rgba(10,12,9,.45);border:1px solid rgba(233,236,223,.14)}
#stars i{background:rgba(233,236,223,.26) !important;opacity:1 !important}
#stars i.on{background:#f0c64a !important;filter:drop-shadow(0 0 5px rgba(240,198,74,.8))}
#stars.up i.on{animation:starpop .45s ease-out 3}
@keyframes starpop{0%{transform:scale(1.8);background:#fff}100%{transform:scale(1)}}
/* killfeed polish */
.kf.note{border-right-color:#e0b020;background:rgba(44,36,12,.78);font-size:12px}
.kf.note.wanted{border-right-color:#d6332a;background:rgba(64,14,10,.8)}
.kf .hs{width:13px;height:13px;color:#ff7a68;fill:currentColor;align-self:center}
#zstrip .zc.war{border-color:#ffd34a;animation:warchip .9s steps(2) infinite}
@keyframes warchip{50%{background:rgba(255,211,74,.28)}}
/* scoreboard: gang leaderboard cards + streak columns */
.sbox{width:720px}
.sbox .gr{gap:3px}.sbox .gr b{display:flex;align-items:baseline;gap:8px}.sbox .gr b em{font-style:normal;font-size:11px;opacity:.6}
.sbox .gr span u{text-decoration:none;font-weight:700;font-size:15px;color:var(--bone);margin-right:4px}
.sbox .gr.mine{background:rgba(233,236,223,.1)}
.sbox td.st.hot{color:#ff7a68;font-weight:700}
/* UI scale: the HUD grows with the screen (set by events.js: 1.0 at 1280x720 up to 1.4 at 1920x1080) */
#hud,#chat,#netfx,#evStrip,#evBanner,#crPop,#score .sbox,.invbox,#dead,#zb{zoom:var(--uis,1)}
#hud #zb{zoom:1}
/* street name sits ABOVE the minimap, chat above that */
#street{bottom:284px}
#chat{bottom:316px}
#killconf em.bn{color:#ff9a5a}#killconf em.ks{color:#e0b020;font-size:12px}