:root{
  --bg:#080a0d;--fg:#f5f3ed;--muted:#a7adb4;--accent:#ffc15c;--accent2:#ff6842;--ok:#7ee787;--bad:#ff4d4d;
  --panel:rgba(8,11,15,.76);--line:rgba(255,255,255,.16);--shadow:0 12px 34px rgba(0,0,0,.38);
  --font:'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;
  --mono:'Consolas','Cascadia Mono','Menlo',monospace;
}

@media (prefers-color-scheme: light){:root{--bg:#0a0b0d;--fg:#f2f2f2}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);overflow:hidden;user-select:none}
canvas#gl{position:fixed;inset:0;display:block;background:#7894ae}
.layer{position:fixed;inset:0;pointer-events:none}
.hidden{display:none!important}
.up{text-transform:uppercase;letter-spacing:.14em}
/* ---------- MENU ---------- */
#menu{pointer-events:auto;background:radial-gradient(ellipse at 50% 28%,rgba(255,150,70,.13),transparent 52%),linear-gradient(180deg,rgba(9,12,16,.38),rgba(6,8,11,.9));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;z-index:20}
#menu h1{font-size:clamp(48px,8vw,104px);font-weight:900;letter-spacing:.18em;line-height:.9;background:linear-gradient(180deg,#fff 20%,#ffb347 55%,#b35a1e);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 6px 22px rgba(255,120,40,.35))}
#menu .sub{color:var(--muted);letter-spacing:.35em;font-size:14px;margin-top:-16px}
.cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:1100px}
.card{width:240px;background:linear-gradient(145deg,rgba(25,29,34,.88),rgba(7,9,12,.86));border:1px solid var(--line);border-radius:6px;padding:16px;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;position:relative;overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card:focus-visible,.btn:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset,0 12px 30px rgba(255,150,60,.18)}
.card .num{position:absolute;top:8px;right:12px;font-size:40px;font-weight:900;color:rgba(255,255,255,.06)}
.card h3{font-size:18px;letter-spacing:.12em;color:var(--accent)}
.card .role{font-size:11px;color:var(--muted);letter-spacing:.2em;margin-bottom:10px}
.card .gun{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-top:1px solid var(--line)}
.card .gun span:last-child{color:var(--muted);font-size:11px}
.card .stat{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted);margin-top:6px;letter-spacing:.1em}
.card .bar{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.card .bar i{display:block;height:100%;background:var(--accent)}
.btn{pointer-events:auto;background:linear-gradient(180deg,#ffbf5f,#e07a20);color:#1a0d02;border:0;border-radius:4px;padding:14px 46px;font-size:18px;font-weight:800;letter-spacing:.2em;cursor:pointer;box-shadow:0 8px 26px rgba(255,140,40,.35)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line);box-shadow:none;font-weight:600}
.settings{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--muted);letter-spacing:.1em}
.settings label{display:flex;flex-direction:column;gap:6px;align-items:center}
.settings input[type=range]{width:150px;accent-color:var(--accent)}
.settings select{background:#111;color:var(--fg);border:1px solid var(--line);padding:4px 8px}
.controls{color:var(--muted);font-size:12px;letter-spacing:.08em;display:grid;grid-template-columns:repeat(4,auto);gap:6px 28px;text-align:center}
.controls b{color:var(--fg);font-family:var(--mono);background:rgba(255,255,255,.06);padding:1px 6px;border-radius:3px;margin-right:6px}
.notice{color:var(--muted);font-size:11px;max-width:760px;text-align:center;line-height:1.5}
/* ---------- HUD ---------- */
#hud{z-index:5;font-variant-numeric:tabular-nums;text-shadow:0 2px 5px rgba(0,0,0,.85)}
#hud .corner{position:absolute}
#grade{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 52%,rgba(4,7,10,.17) 82%,rgba(2,4,6,.35) 100%),linear-gradient(180deg,rgba(34,55,78,.06),transparent 28%,transparent 72%,rgba(102,55,22,.05));mix-blend-mode:multiply}
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0}
#crosshair i{position:absolute;background:#fff;box-shadow:0 0 2px #000,0 0 3px rgba(0,0,0,.8);transition:transform .06s}
#crosshair .t{width:2px;height:8px;left:-1px;bottom:0}
#crosshair .b{width:2px;height:8px;left:-1px;top:0}
#crosshair .l{height:2px;width:8px;top:-1px;right:0}
#crosshair .r{height:2px;width:8px;top:-1px;left:0}
#crosshair .dot{width:2px;height:2px;left:-1px;top:-1px;border-radius:50%}
#hitmarker{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;transition:opacity .12s}
#hitmarker i{position:absolute;width:2px;height:9px;background:#fff;box-shadow:0 0 3px #000}
#hitmarker.hs i{background:#ff4d4d}
#hitmarker .a{transform:translate(-9px,-15px) rotate(45deg)}#hitmarker .b{transform:translate(7px,-15px) rotate(-45deg)}
#hitmarker .c{transform:translate(-9px,6px) rotate(-45deg)}#hitmarker .d{transform:translate(7px,6px) rotate(45deg)}
#hitmarker.show{opacity:1}
/* bottom-left health */
#hp{left:30px;bottom:28px;display:flex;flex-direction:column;gap:6px;width:320px;padding:12px 15px 13px;background:linear-gradient(90deg,rgba(5,8,11,.76),rgba(5,8,11,.12));border-left:2px solid rgba(255,193,92,.7);border-radius:3px}
#hp .row{display:flex;align-items:baseline;gap:10px}
#hp .label{font-size:11px;letter-spacing:.3em;color:var(--muted)}
#hp .val{font-size:30px;font-weight:800;text-shadow:0 2px 6px #000}
#hpbar{height:8px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);border-radius:2px;overflow:hidden;position:relative}
#hpbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#e8ffe8,#7ee787);transition:width .12s,background .2s}
#hpbar.low i{background:linear-gradient(90deg,#ff8a80,#ff3b3b)}
#nade{font-size:13px;color:var(--muted);letter-spacing:.14em;display:flex;align-items:center;gap:8px}
#nade b{color:var(--fg);font-size:16px}
#nade svg{filter:drop-shadow(0 1px 2px #000)}
/* bottom-right ammo */
#ammo{right:30px;bottom:28px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:12px 15px 11px 34px;background:linear-gradient(270deg,rgba(5,8,11,.76),rgba(5,8,11,.12));border-right:2px solid rgba(255,193,92,.7);border-radius:3px}
#wname{font-size:16px;letter-spacing:.3em;color:var(--accent);font-weight:700;text-shadow:0 2px 6px #000}
#fmode{font-size:10px;letter-spacing:.3em;color:var(--muted)}
#ammoRow{display:flex;align-items:baseline;gap:8px}
#mag{font-size:56px;font-weight:900;line-height:1;text-shadow:0 3px 10px #000}
#mag.low{color:var(--bad)}
#res{font-size:22px;color:var(--muted);font-weight:600}
#slots{display:flex;gap:10px;margin-top:6px}
#slots .slot{padding:4px 10px;border:1px solid var(--line);border-radius:3px;font-size:11px;letter-spacing:.14em;color:var(--muted);background:rgba(0,0,0,.45)}
#slots .slot.act{border-color:var(--accent);color:var(--fg)}
#slots .slot b{color:var(--accent);margin-right:6px}
#reloadHint{font-size:12px;letter-spacing:.24em;color:var(--accent2);height:16px;margin-top:4px;font-weight:700}
/* top-left minimap */
#mapWrap{left:26px;top:26px;width:210px}
#minimap{width:210px;height:210px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.32);box-shadow:0 0 0 5px rgba(4,7,10,.5),0 10px 30px rgba(0,0,0,.55);display:block}
#mapScore{margin-top:10px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:8px 10px;font-size:12px}
#mapScore .r{display:flex;justify-content:space-between;padding:2px 0;letter-spacing:.06em}
#mapScore .r.me{color:var(--accent);font-weight:700}
#mapScore .r span:last-child{font-family:var(--mono)}
/* top center */
#top{left:50%;top:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
#timer{font-size:26px;font-weight:800;letter-spacing:.1em;text-shadow:0 2px 8px #000;font-family:var(--mono)}
#objective{font-size:10px;letter-spacing:.3em;color:var(--muted)}
#compass{width:420px;height:22px;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
#compassStrip{position:absolute;top:0;left:0;height:100%;white-space:nowrap;font-size:11px;letter-spacing:.1em;color:#ddd}
#compassStrip span{position:absolute;top:2px;transform:translateX(-50%)}
#compassStrip span.card{color:var(--accent);font-weight:800;font-size:13px;background:none;border:0;padding:0;width:auto}
#compassStrip span.tick{width:1px;height:6px;background:#888;top:14px}
#compassMark{position:absolute;left:50%;top:0;width:2px;height:100%;background:var(--accent);transform:translateX(-50%)}
/* killfeed */
#killfeed{right:26px;top:26px;display:flex;flex-direction:column;gap:5px;align-items:flex-end;width:380px}
#killfeed .kf{background:rgba(0,0,0,.6);border-inline-end:3px solid var(--line);padding:5px 10px;font-size:13px;letter-spacing:.04em;animation:kfin .25s ease-out;display:flex;gap:8px;align-items:center}
#killfeed .kf.me{border-color:var(--accent);background:rgba(60,35,5,.7)}
#killfeed .kf.dead{border-color:var(--bad);background:rgba(70,10,10,.7)}
#killfeed .kf .w{color:var(--muted);font-size:11px}
#killfeed .kf .hs{color:var(--bad);font-weight:800}
@keyframes kfin{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
/* center popups */
#center{left:50%;top:58%;transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.pop{font-size:14px;letter-spacing:.3em;font-weight:800;text-shadow:0 2px 8px #000;animation:popin .5s ease-out forwards;opacity:0}
.pop.big{font-size:34px;color:var(--accent);letter-spacing:.25em}
.pop.pts{color:#fff;font-size:18px}
@keyframes popin{0%{transform:translateY(12px) scale(.9);opacity:0}15%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
#announce{position:absolute;left:50%;top:30%;transform:translateX(-50%);font-size:44px;font-weight:900;letter-spacing:.3em;color:var(--accent);text-shadow:0 4px 20px rgba(0,0,0,.9);opacity:0;transition:opacity .3s}
#announce.show{opacity:1}
/* damage vignette + indicators */
#vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(190,0,0,.55) 100%);opacity:0;transition:opacity .15s}
#lowhp{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(120,0,0,.7) 100%);opacity:0;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.75}}
#dmgdir{position:absolute;left:50%;top:50%}
.ind{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.ind i{position:absolute;left:-40px;top:-140px;width:80px;height:26px;border-radius:40px 40px 0 0/26px 26px 0 0;background:linear-gradient(180deg,rgba(255,40,40,.9),transparent);opacity:0;transition:opacity .2s}
.ind i.show{opacity:1}
/* Optics: screen-space reticles guarantee a readable aiming point while the
   procedural glass remains genuinely transparent. */
#opticReticle{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:opacity .1s,transform .1s;filter:drop-shadow(0 0 2px #000)}
#opticReticle.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#opticReticle.dot::before{content:'';position:absolute;left:9px;top:9px;width:4px;height:4px;border-radius:50%;background:#ff3b21;box-shadow:0 0 3px #ff2a16,0 0 7px rgba(255,40,20,.8)}
#opticReticle.chevron::before{content:'';position:absolute;left:6px;top:5px;width:9px;height:9px;border-left:2px solid #ffb341;border-top:2px solid #ffb341;transform:rotate(45deg);filter:drop-shadow(0 0 2px rgba(255,100,20,.9))}
#opticReticle.chevron::after{content:'';position:absolute;left:10px;top:13px;width:1px;height:7px;background:#ffb341}
#scope{--sr:min(44vh,44vw);position:absolute;inset:0;opacity:0;transition:opacity .1s}
#scope.on{opacity:1}
#scope .blk{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0,transparent calc(var(--sr) - 1px),rgba(2,4,7,.94) calc(var(--sr) + 2px),#010203 100%)}
#scope .ring{position:absolute;left:50%;top:50%;width:calc(var(--sr)*2);height:calc(var(--sr)*2);transform:translate(-50%,-50%);border-radius:50%;box-shadow:inset 0 0 24px 8px rgba(0,0,0,.52),inset 0 0 0 3px rgba(12,15,18,.92),0 0 0 2px #000;background:radial-gradient(circle at 38% 32%,rgba(180,220,255,.055),transparent 32%),linear-gradient(145deg,rgba(70,120,155,.035),transparent 48%,rgba(245,185,95,.025))}
#scope .ring::after{content:'';position:absolute;inset:3%;border-radius:50%;box-shadow:inset 0 0 18px rgba(95,155,195,.12);border:1px solid rgba(170,215,240,.08)}
#scope .h,#scope .v{position:absolute;background:rgba(8,10,11,.88);box-shadow:0 0 1px rgba(255,255,255,.45)}
#scope .h{left:calc(50% - var(--sr));width:calc(var(--sr)*2);top:50%;height:1.5px;margin-top:-.75px}
#scope .v{top:calc(50% - var(--sr));height:calc(var(--sr)*2);left:50%;width:1.5px;margin-left:-.75px}
#scope .h::before,#scope .h::after,#scope .v::before,#scope .v::after{content:'';position:absolute;background:#000}
#scope .h::before{left:calc(50% - 26px);width:52px;height:1.5px;top:0}
#scope .gap{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);background:radial-gradient(circle,transparent 45%,transparent 100%)}
#scope .mil{position:absolute;left:50%;top:50%;width:2px;height:2px;background:#000;border-radius:50%}
#scope .rf{position:absolute;left:calc(50% + var(--sr) - 120px);top:calc(50% + var(--sr) - 40px);font-family:var(--mono);font-size:11px;color:#8fd0ff;text-shadow:0 0 6px #000;letter-spacing:.1em}
/* sprint / state */
#state{left:50%;bottom:34px;transform:translateX(-50%);font-size:10px;letter-spacing:.35em;color:var(--muted)}
#fps{right:26px;bottom:8px;font-size:10px;color:var(--muted);font-family:var(--mono)}
@media (max-width:800px){
  #mapWrap{transform:scale(.76);transform-origin:top left}
  #killfeed{width:280px;font-size:11px}
  #compass{width:300px}
  #hp{left:12px;bottom:12px;width:250px}
  #ammo{right:12px;bottom:12px}
  #mag{font-size:44px}
}
@media (max-width:600px){
  #menu{justify-content:flex-start;gap:16px;padding:24px 12px calc(92px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #menu h1{font-size:clamp(38px,13vw,54px);letter-spacing:.1em}
  #menu .sub{font-size:10px;letter-spacing:.18em;margin-top:4px}
  #menuCards,#deathCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;padding:0}
  #menu .card,#death .card{width:auto;min-width:0;padding:11px}
  #menu .card h3,#death .card h3{font-size:15px}
  #menu .card .role,#death .card .role{font-size:9px;letter-spacing:.12em}
  #menu .card .gun,#death .card .gun{gap:5px;font-size:11px}
  #menu .card .gun span,#death .card .gun span{min-width:0;overflow-wrap:anywhere}
  #menu .card .gun span:last-child,#death .card .gun span:last-child{font-size:9px;text-align:right}
  #menu .card .stat,#death .card .stat{font-size:9px}
  #menu .settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
  #menu .settings input[type=range]{width:min(150px,100%)}
  #deploy{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:22;width:calc(100% - 24px);padding:13px}
  #menu .controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;width:100%;font-size:10px;text-align:left}
  #menu .notice{font-size:10px}
  #death{justify-content:flex-start;gap:12px;padding:24px 12px;overflow-y:auto}
  #death h2{font-size:32px}
  #death .cnt{font-size:44px}
  #mapWrap{left:10px;top:10px;transform:scale(.5)}
  #mapScore{display:none}
  #top{top:10px}
  #timer{font-size:20px}
  #objective{font-size:8px;letter-spacing:.18em}
  #compass{width:190px}
  #killfeed{right:8px;top:74px;width:210px}
  #killfeed .kf{font-size:10px;padding:4px 6px}
  #hp{left:10px;bottom:10px;width:142px;padding:8px 9px;gap:4px}
  #hp .label{font-size:9px;letter-spacing:.18em}
  #hp .val{font-size:24px}
  #hpbar{height:6px}
  #nade{font-size:10px;gap:4px}
  #ammo{right:10px;bottom:10px;width:184px;padding:8px 9px;gap:2px}
  #wname{max-width:164px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;letter-spacing:.18em}
  #fmode{font-size:8px;letter-spacing:.2em}
  #mag{font-size:36px}
  #res{font-size:14px}
  #reloadHint{font-size:9px;height:12px}
  #slots{gap:5px;margin-top:3px}
  #slots .slot{padding:3px 5px;font-size:9px;letter-spacing:.08em}
  #state{bottom:112px;max-width:180px;text-align:center}
  #fps{right:8px;bottom:2px;font-size:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* scoreboard */
#scoreboard{pointer-events:none;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:8}
.board{width:620px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px 26px;backdrop-filter:blur(8px)}
.board h2{font-size:14px;letter-spacing:.3em;color:var(--muted);margin-bottom:14px;display:flex;justify-content:space-between}
.board table{width:100%;border-collapse:collapse;font-size:15px}
.board th{font-size:10px;letter-spacing:.24em;color:var(--muted);text-align:start;padding:6px 8px;border-bottom:1px solid var(--line);font-weight:600}
.board td{padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--mono)}
.board td:first-child{font-family:var(--font);font-weight:700;letter-spacing:.05em}
.board tr.me td{color:var(--accent)}
.board td.r,.board th.r{text-align:end}
.dotc{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:10px;vertical-align:middle}
/* overlays */
#pause,#death,#end{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:rgba(4,5,8,.78);backdrop-filter:blur(6px);z-index:10}
#pause h2,#death h2,#end h2{font-size:42px;letter-spacing:.3em;font-weight:900}
#death h2{color:var(--bad)}
#death .by{color:var(--muted);letter-spacing:.2em;font-size:13px}
#death .cnt{font-size:64px;font-weight:900;font-family:var(--mono);color:var(--accent)}
#death .cards .card{width:200px;padding:12px}
#end .stats{display:grid;grid-template-columns:repeat(4,140px);gap:14px;text-align:center}
#end .stats div{background:var(--panel);border:1px solid var(--line);padding:14px 8px;border-radius:4px}
#end .stats b{display:block;font-size:30px;font-weight:900;color:var(--accent)}
#end .stats span{font-size:10px;letter-spacing:.24em;color:var(--muted)}
#end h2.win{color:var(--ok)}
#end h2.lose{color:var(--bad)}
.row{display:flex;gap:14px}
#loading{position:fixed;inset:0;background:#07080a;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:30;color:var(--muted);letter-spacing:.3em;font-size:12px}
#loading .barw{width:280px;height:3px;background:rgba(255,255,255,.1)}
#loading .barw i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}

/* Rust reconstruction: scene-led armoury, restrained tactical HUD. */
:root{--accent:#d5bd80;--accent2:#d79462;--fg:#eeeae1;--muted:#b4b6ac;--font:'Bahnschrift','Segoe UI',sans-serif;--panel:rgba(16,21,20,.65)}
#menu{display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto auto auto auto;align-content:stretch;align-items:end;justify-content:stretch;gap:16px 32px;padding:40px 5vw 22px;background:linear-gradient(90deg,rgba(13,19,19,.76),rgba(12,18,18,.05) 72%),linear-gradient(0deg,rgba(10,15,14,.96),rgba(10,15,14,.05) 70%);overflow:auto;min-height:100%}
#menu .menu-title{grid-column:1;align-self:start;position:relative;z-index:2}
.brand-mark{font:600 15px var(--font);letter-spacing:.08em;color:#dfd8c4;border-left:4px solid var(--accent);padding:3px 12px;margin-bottom:30px}
#menu h1{font-family:'Impact','Bahnschrift Condensed',sans-serif;font-size:clamp(54px,6.1vw,104px);font-weight:400;letter-spacing:.025em;background:none;color:var(--fg);filter:none;line-height:.95}
.map-title{font-family:'Impact','Bahnschrift Condensed',sans-serif;font-size:clamp(72px,9.8vw,164px);color:transparent;-webkit-text-stroke:1px #dfdac7;line-height:1.04;letter-spacing:.02em}
#menu .sub{margin:16px 0 0;letter-spacing:.16em;font-size:11px;color:var(--accent);display:flex;gap:22px}
#menu .sub span{color:#dddcd0;letter-spacing:.08em}
.armoury-stage{position:absolute;right:3vw;top:9%;width:50vw;height:38vh;pointer-events:none}
#weapon-preview{width:100%;height:100%;display:block}
.preview-info{position:absolute;bottom:-14px;right:6%;text-align:right;z-index:1;text-shadow:0 2px 12px #121a16}
.preview-info span{font-size:9px;letter-spacing:.2em;color:var(--accent)}
.preview-info h2{font:500 23px var(--font);letter-spacing:.04em;margin:6px 0}.preview-info p{color:#cecec1;font-size:11px}
.loadout-label{grid-column:1/-1;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.13em;color:#d3d2c4;align-self:end;margin-top:10px}.loadout-label span{font-size:10px;color:#a7aa9f}
#menuCards{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:8px;width:100%}
#menu .card{width:auto;min-width:0;padding:17px 18px;background:rgba(20,27,26,.74);border:1px solid #6b726354;border-radius:0;box-shadow:none;backdrop-filter:blur(12px);transition:background .18s,border-color .18s;min-height:145px}
#menu .card:hover{transform:none;background:rgba(59,65,53,.85);border-color:#b2b8a6}
#menu .card.sel{background:linear-gradient(135deg,rgba(99,98,73,.85),rgba(40,47,39,.85));border-color:var(--accent);box-shadow:inset 0 3px var(--accent)}
#menu .card h3{font-size:16px;font-weight:600;letter-spacing:.07em;color:#eeeadd;margin:1px 0 5px}
#menu .card .role{font-size:9px;letter-spacing:.14em;margin-bottom:13px;color:#b9bcae}
#menu .card .num{font-size:19px;top:16px;right:16px;color:#aeb39f;font-weight:400}
#menu .card.sel .num{color:var(--accent)}
#menu .card .gun{font-size:11px;padding:5px 0;border-color:#aeb09e25}
#menu .card .gun span:last-child{font-size:9px;color:#aaafa1}
#menu .card .stat{display:none}
#menu .card>div:last-child{display:none}
#menu>.settings{grid-column:1;grid-row:4;display:flex;justify-content:flex-start;gap:24px;margin:6px 0}
#menu .settings label{align-items:flex-start;font-size:9px;letter-spacing:.08em;gap:6px}
#menu .settings input[type=range]{width:100px;height:10px}
#menu .settings select{font:10px var(--font);padding:7px 10px;background:#202723;border-color:#8086755e}
#menu .settings label span{display:none}
#menu #deploy{grid-column:2;grid-row:4;padding:18px 24px;font:600 13px var(--font);letter-spacing:.12em;border-radius:0;background:#d2c393;box-shadow:none;min-width:242px;text-align:left;color:#20251d}
#deploy span{float:right;margin-left:45px;font-size:20px;line-height:12px}
#menu .controls{grid-column:1/-1;display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap;font-size:9px;color:#aeb4a4;letter-spacing:0;margin-top:4px}
#menu .controls b{padding:2px 3px;background:none;color:#e1e3d4;margin-right:4px;font-size:9px}
#menu .notice{grid-column:1/-1;text-align:left;max-width:none;color:#929b8b;font-size:9px;letter-spacing:.04em;display:flex;gap:12px}
.notice a{color:inherit;text-decoration:none}.notice a:hover{text-decoration:underline}
#mapWrap{left:30px;top:30px;width:164px}#minimap{width:164px;height:164px;border-radius:2px;border:1px solid #a7b0a780;box-shadow:0 4px 20px #0003}
#mapScore{margin-top:8px;border:0;background:linear-gradient(90deg,#17211faa,#17211f00);font-size:11px;border-radius:0;padding:7px 9px}
#top{top:25px;gap:5px}#timer{font:500 24px var(--font);letter-spacing:.05em}#objective{font-size:9px;letter-spacing:.12em;color:#dedeca}
#hp{left:32px;bottom:38px;width:210px;border-left:0;background:linear-gradient(90deg,#10201ca6,transparent);border-radius:0;padding:8px 12px}
#hp .label{font-size:9px;letter-spacing:.16em}#hp .val{font-size:24px;font-weight:500}#hpbar{height:4px;border:0;border-radius:0;margin:3px 0 7px}#hpbar i{background:#dce9c9}
#nade{font-size:10px;letter-spacing:.05em}#nade b{font-size:12px}
#ammo{right:34px;bottom:34px;border:0;border-radius:0;background:linear-gradient(270deg,#12201ca6,transparent);padding:12px 14px 12px 50px}
#wname{font-size:13px;letter-spacing:.11em;color:#f1eddc}#fmode{font-size:9px;letter-spacing:.08em}#mag{font-size:47px;font-weight:500}#res{font-size:19px;font-weight:400}
#slots .slot{font-size:9px;border-radius:0;border-color:#c8d0ba40;background:#13201966;padding:4px 7px}#slots .slot.act{border-color:#d5d5b8aa}#slots .slot b{color:#d5d5b8}
#grade{background:radial-gradient(ellipse at center,transparent 55%,rgba(6,13,12,.15));mix-blend-mode:multiply}
#location-name{position:absolute;left:32px;top:206px;font:10px var(--font);letter-spacing:.17em;color:#e6e9d7;display:none}
#killfeed{top:32px;right:32px;font-size:11px}
#scope .rf{left:calc(50% + var(--sr) - 150px);top:calc(50% + var(--sr) - 80px);color:#b3c2aa;font-size:10px}
#telemetry{position:absolute;right:30px;top:15px;font:11px Consolas,monospace;background:#000b;padding:8px;color:#eee;z-index:99}
#pause,#death,#end{background:rgba(15,22,20,.84);backdrop-filter:blur(9px)}.btn{border-radius:0;background:#d2c393;box-shadow:none;color:#20251d}.btn.ghost{background:none;color:#e8e9db;border-color:#90978377}
#pause h2,#death h2,#end h2{font-family:Impact,'Bahnschrift Condensed',sans-serif;font-weight:400;letter-spacing:.05em;font-size:58px}
#scoreboard .board{border-radius:0;background:#15221ee8;border:1px solid #8b998380}
@media(max-height:780px) and (min-width:1000px){#menu{padding-top:24px;gap:10px 20px}.brand-mark{margin-bottom:16px}#menu h1{font-size:66px}.map-title{font-size:94px}#menu .card{min-height:128px;padding:12px 15px}.armoury-stage{top:4%;height:36vh}#menu .sub{margin-top:8px}}
@media(max-width:1050px){#menu{padding:24px 4vw 18px;gap:12px 16px;grid-template-rows:minmax(260px,1fr) auto auto auto auto}.armoury-stage{right:0;top:9%;width:50%;height:28vh}#menu h1{font-size:54px}.map-title{font-size:90px}#menu>.settings{gap:12px}#menu .settings input[type=range]{width:70px}#menu #deploy{min-width:200px;padding:16px}#menu .card{padding:13px 12px}#menu .card .gun span:last-child{display:none}#menu .sub{display:block;line-height:2}#menu .sub span{display:block}.preview-info h2{font-size:18px}}
@media(max-width:700px){#menu{display:flex;align-items:stretch;justify-content:flex-start;padding:24px 20px}.armoury-stage{display:none}#menuCards{grid-template-columns:repeat(2,minmax(0,1fr))}#menu>.settings{flex-wrap:wrap}#menu .card{min-height:130px}#menu .controls{line-height:1.8}.loadout-label span{display:none}#menu .notice{flex-wrap:wrap}.map-title{font-size:70px}}

#interaction{position:absolute;left:50%;top:65%;transform:translateX(-50%);font:12px var(--font);letter-spacing:.13em;color:#eee7cd;text-shadow:0 2px 5px #000} #scope .h{box-shadow:0 1px #aaa3} #scope .v{box-shadow:1px 0 #aaa3}