:root{
  --lime:#d8ff39; --ink:#071018; --glass:rgba(9,15,20,.72); --line:rgba(255,255,255,.13);
  --danger:#ff5a64; --cyan:#6ce7ff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#05070a;color:#eef4f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
button,input,select{font:inherit}
.hidden{display:none!important}
#boot{position:fixed;inset:0;display:grid;place-content:center;text-align:center;background:
radial-gradient(circle at 50% 40%,#193443 0,#091117 35%,#05070a 75%);z-index:50;padding:24px}
.brand,.lobby-panel h1{font-weight:900;letter-spacing:.04em}.brand{font-size:clamp(36px,11vw,72px)}.brand span,.lobby-panel h1 span{color:var(--lime)}
.sub,.eyebrow{font-size:11px;letter-spacing:.26em;color:#97a9b3;font-weight:800}
#loadText{margin-top:32px;color:#b9c7ce}.bar{width:min(72vw,420px);height:5px;background:#202a31;border-radius:99px;margin:12px auto}.bar i{display:block;width:4%;height:100%;background:var(--lime);border-radius:inherit;box-shadow:0 0 20px #bfff48}
.screen{position:fixed;inset:0}
#lobby{background:#081018;overflow:auto}
.lobby-bg{position:absolute;inset:0;background:
linear-gradient(90deg,rgba(5,10,14,.97) 0%,rgba(5,10,14,.77) 46%,rgba(5,10,14,.28) 100%),
radial-gradient(circle at 78% 28%,rgba(183,255,70,.28),transparent 20%),
linear-gradient(145deg,#243843 0%,#10202a 32%,#19231a 50%,#070a0c 100%)}
.lobby-bg:after{content:"";position:absolute;right:-8%;bottom:-10%;width:70%;height:75%;opacity:.75;
background:
linear-gradient(90deg,transparent 48%,rgba(255,255,255,.05) 49%,transparent 50%),
linear-gradient(0deg,transparent 48%,rgba(255,255,255,.05) 49%,transparent 50%);
background-size:80px 80px;transform:perspective(500px) rotateX(65deg) rotateZ(-12deg);filter:drop-shadow(0 -20px 50px #2b4938)}
.lobby-panel{position:relative;z-index:2;width:min(650px,100%);min-height:100%;padding:calc(50px + env(safe-area-inset-top)) 26px 30px;display:flex;flex-direction:column;justify-content:center}
.lobby-panel h1{font-size:clamp(44px,12vw,82px);line-height:.9;margin:8px 0 15px}
.lead{max-width:560px;color:#c0ccd2;line-height:1.55;margin:0 0 20px}
.chars{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:8px 0 18px}
.char{border:1px solid var(--line);border-radius:14px;padding:8px 6px;background:rgba(255,255,255,.045);text-align:center;color:#d5dde1}
.char.active{outline:2px solid var(--lime);background:rgba(216,255,57,.12)}
.char .portrait{height:72px;border-radius:10px;margin-bottom:7px;background:
radial-gradient(circle at 50% 22%,#d1a17e 0 12%,transparent 13%),
linear-gradient(150deg,var(--c1),var(--c2));position:relative;overflow:hidden}
.char .portrait:after{content:"";position:absolute;left:24%;right:24%;top:26%;bottom:-6%;border-radius:45% 45% 15% 15%;background:linear-gradient(160deg,#161d23,#303941)}
.char b{font-size:11px;letter-spacing:.06em}
.lobby-row{display:grid;grid-template-columns:1.3fr .7fr;gap:12px}
label{font-size:10px;letter-spacing:.14em;color:#8ea0aa;font-weight:800}
input,select{width:100%;display:block;margin-top:6px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;padding:14px}
select option{color:#111}
.primary,.secondary{border:0;border-radius:13px;padding:16px 18px;margin-top:14px;font-weight:900;letter-spacing:.08em}
.primary{background:var(--lime);color:#071018;box-shadow:0 12px 35px rgba(181,255,33,.15)}
.secondary{background:transparent;color:#fff;border:1px solid var(--line)}
.fine{font-size:10px;color:#71818b;line-height:1.45;margin-top:12px}

#game,#c{position:fixed;inset:0;width:100%;height:100%}
#c{display:block;touch-action:none;background:#7fb1c8}
#hud{position:fixed;inset:0;pointer-events:none;user-select:none}
.top-left{position:absolute;left:14px;top:calc(14px + env(safe-area-inset-top));display:flex;gap:8px}
.chip{background:var(--glass);border:1px solid var(--line);padding:8px 12px;border-radius:12px;min-width:72px;backdrop-filter:blur(10px)}
.chip small,.weapon small{display:block;color:#98aab4;font-weight:800;font-size:9px;letter-spacing:.12em}
.chip b{font-size:18px}
.top-mid{position:absolute;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translateX(-50%)}
.compass{font-size:10px;letter-spacing:.1em;background:linear-gradient(90deg,transparent,rgba(0,0,0,.35),transparent);padding:8px 22px;white-space:nowrap;text-shadow:0 1px 4px #000}
.top-right{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top))}
.minimap{width:92px;height:92px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.55);box-shadow:0 5px 25px rgba(0,0,0,.35);background:#253c2a}
#mapCanvas{width:100%;height:100%}
.crosshair{position:absolute;left:50%;top:48%;width:40px;height:40px;transform:translate(-50%,-50%)}
.crosshair i{position:absolute;background:#fff;border-radius:2px;box-shadow:0 0 4px #000}
.crosshair i:nth-child(1){width:8px;height:2px;left:2px;top:19px}.crosshair i:nth-child(2){width:8px;height:2px;right:2px;top:19px}
.crosshair i:nth-child(3){height:8px;width:2px;left:19px;top:2px}.crosshair i:nth-child(4){height:8px;width:2px;left:19px;bottom:2px}
.crosshair em{position:absolute;width:4px;height:4px;border:1px solid #fff;border-radius:50%;left:18px;top:18px}
.status{position:absolute;left:18px;bottom:calc(18px + env(safe-area-inset-bottom));width:min(42vw,310px)}
.hp,.armor{display:grid;grid-template-columns:42px 1fr 36px;align-items:center;gap:7px;margin-top:6px;font-size:9px;font-weight:900;text-shadow:0 1px 2px #000}
.hp>div,.armor>div{height:9px;border-radius:99px;background:rgba(0,0,0,.45);overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.hp i,.armor i{display:block;height:100%;width:100%;background:var(--lime)}.armor i{background:var(--cyan)}
.weapon{position:absolute;right:92px;bottom:calc(18px + env(safe-area-inset-bottom));min-width:108px;background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:10px 12px;backdrop-filter:blur(10px)}
.weapon b{display:block;font-size:18px}.weapon strong{font-size:15px;font-weight:700}

.joystick{position:absolute;left:24px;bottom:calc(105px + env(safe-area-inset-bottom));width:122px;height:122px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.09),rgba(0,0,0,.14));pointer-events:auto;touch-action:none}
#stick{position:absolute;width:56px;height:56px;left:33px;top:33px;border-radius:50%;background:rgba(224,255,96,.55);border:1px solid rgba(255,255,255,.55);box-shadow:0 0 30px rgba(198,255,54,.22)}
.aimpad{position:absolute;right:0;top:18%;bottom:18%;width:55%;pointer-events:auto;touch-action:none}
.fire{position:absolute;right:26px;bottom:calc(76px + env(safe-area-inset-bottom));width:82px;height:82px;border-radius:50%;pointer-events:auto;border:1px solid rgba(255,100,110,.85);background:rgba(20,5,8,.42);color:#ff9ba2;font-weight:900;font-size:16px;letter-spacing:.08em;backdrop-filter:blur(5px)}
.round{position:absolute;width:54px;height:54px;border-radius:50%;pointer-events:auto;border:1px solid var(--line);background:rgba(8,13,17,.58);color:#fff;font-weight:900;backdrop-filter:blur(7px)}
.round small{display:block;font-size:6px;letter-spacing:.05em;color:#b9c5ca}.reload{right:120px;bottom:calc(115px + env(safe-area-inset-bottom))}
.jump{right:28px;bottom:calc(174px + env(safe-area-inset-bottom))}.crouch{right:95px;bottom:calc(178px + env(safe-area-inset-bottom))}
.notice{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:9px;color:#cfdbdf;background:rgba(0,0,0,.38);border-radius:99px;padding:7px 12px;opacity:.8}
.killfeed{position:absolute;right:14px;top:calc(118px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.killfeed div{background:rgba(0,0,0,.48);padding:6px 9px;border-radius:6px;font-size:9px}
@media(min-width:900px){
  .joystick{width:140px;height:140px}.fire{width:90px;height:90px}.top-right .minimap{width:120px;height:120px}
}

.buildmark{position:fixed;left:10px;bottom:10px;z-index:9999;padding:5px 8px;border-radius:7px;
background:rgba(0,0,0,.65);color:#d8ff39;font:800 10px/1.2 system-ui;letter-spacing:.08em;pointer-events:none}