/* ============================================================
   BRICK OPS — minifig warfare UI
   ============================================================ */
@font-face{font-family:'Saira Stencil One';src:url('../fonts/sairastencilone-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('../fonts/rajdhani-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('../fonts/rajdhani-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('../fonts/rajdhani-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --olive:#39402a; --olive-2:#4c5436; --sand:#c9b47c; --sand-2:#a89258;
  --paper:#e8e2cf; --ink:#14170f;
  --accent:#ff9a1f; --accent-2:#ffc35e;
  --green:#7fb069; --green-deep:#4f7942; --tan:#d2a86a; --tan-deep:#a3762f;
  --danger:#e8483f;
  --hud:#e9f0e2;
  --stencil:'Saira Stencil One', 'Arial Narrow', Impact, sans-serif;
  --ui:'Rajdhani', 'Segoe UI', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#0d0f0a}
body{font-family:var(--ui);color:var(--paper);font-size:16px}
#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none !important}
.screen{position:fixed;inset:0;z-index:10}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ---------- shared chrome ---------- */
.cta{font-family:var(--stencil);font-size:22px;letter-spacing:2px;color:var(--ink);background:var(--accent);
  padding:12px 34px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:transform .08s ease, background .12s}
.cta:hover{background:var(--accent-2);transform:translateY(-1px)}
.ghost-btn{font-family:var(--ui);font-weight:600;font-size:15px;letter-spacing:2px;color:var(--sand);
  border:1px solid var(--sand-2);padding:10px 22px;background:rgba(0,0,0,.25)}
.ghost-btn:hover{color:var(--paper);border-color:var(--paper)}

/* ---------- boot ---------- */
#boot-screen,#gl-error{display:flex;align-items:center;justify-content:center;background:
  radial-gradient(1200px 700px at 30% 20%, #2a2f1e 0%, #14170f 60%, #0b0d08 100%)}
.boot-inner{text-align:center;width:min(480px,80vw)}
.boot-logo{font-family:var(--stencil);font-size:64px;letter-spacing:4px;color:var(--paper)}
.boot-logo span{color:var(--accent)}
.boot-sub{margin-top:6px;letter-spacing:4px;font-size:13px;color:var(--sand)}
.boot-bar{height:10px;margin:26px 0 10px;background:rgba(255,255,255,.08);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.boot-bar i{display:block;height:100%;width:0%;background:repeating-linear-gradient(45deg,var(--accent) 0 12px,var(--accent-2) 12px 24px);transition:width .2s}
#boot-msg{font-size:12px;letter-spacing:2px;color:var(--sand-2)}

/* ---------- main menu ---------- */
#menu-screen{display:flex;justify-content:space-between;padding:6vh 6vw;
  background:linear-gradient(90deg, rgba(10,12,7,.88) 0%, rgba(10,12,7,.55) 38%, rgba(10,12,7,0) 70%)}
.menu-left{display:flex;flex-direction:column;justify-content:space-between;height:88vh;max-width:520px}
.menu-title{font-family:var(--stencil);font-size:clamp(56px,9vw,110px);line-height:.9;letter-spacing:6px;color:var(--paper);text-shadow:0 4px 0 rgba(0,0,0,.45)}
.menu-title span{display:block;color:var(--accent)}
.menu-tag{margin-top:14px;letter-spacing:5px;font-size:13px;color:var(--sand);border-left:3px solid var(--accent);padding-left:12px}
.menu-nav{display:flex;flex-direction:column;gap:10px;margin:36px 0}
.menu-btn{position:relative;text-align:left;font-family:var(--stencil);font-size:26px;letter-spacing:3px;color:var(--paper);
  padding:10px 18px;border-left:4px solid transparent;transition:all .1s}
.menu-btn::before{content:'▸';position:absolute;left:-4px;top:50%;transform:translate(-100%,-50%);opacity:0;transition:all .1s}
.menu-btn:hover{color:var(--accent-2);border-left-color:var(--accent);background:linear-gradient(90deg,rgba(255,154,31,.12),transparent 70%);padding-left:26px}
.menu-btn:hover::before{opacity:1;left:8px;color:var(--accent)}
.menu-btn.danger:hover{color:var(--danger);border-left-color:var(--danger);background:linear-gradient(90deg,rgba(232,72,63,.12),transparent 70%)}
.menu-foot{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:2px;color:#8a8a74}
.menu-right{align-self:center}
.menu-card{width:300px;background:rgba(16,18,11,.82);border:1px solid rgba(201,180,124,.35);padding:18px 20px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.menu-card h3{font-family:var(--stencil);font-size:15px;letter-spacing:3px;color:var(--accent);margin-bottom:12px}
.mc-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;border-bottom:1px dashed rgba(201,180,124,.2)}
.mc-row span{color:var(--sand-2);letter-spacing:1px}
.mc-row b{color:var(--paper);font-weight:600;text-align:right}

/* help popout */
.help-popout{position:absolute;right:6vw;top:6vh;width:min(360px,86vw);max-height:78vh;overflow:auto;
  background:rgba(16,18,11,.92);border:1px solid rgba(201,180,124,.35);padding:18px 22px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.help-popout h3{font-family:var(--stencil);letter-spacing:2px;color:var(--accent);font-size:16px;margin-bottom:10px}
.help-popout h4{font-size:12px;letter-spacing:2px;color:var(--sand);margin:14px 0 6px}
.help-popout table{width:100%;border-collapse:collapse;font-size:13px}
.help-popout td{padding:3px 0}
.help-popout td:first-child{color:var(--sand-2);width:46%}
.help-popout td:last-child{font-weight:600}
.help-popout p{font-size:12.5px;color:#c9c4ad;line-height:1.5;margin:6px 0}

/* ---------- generic panel (loadout/settings/pause/scoreboard/summary) ---------- */
#loadout-screen,#settings-screen,#pause-screen,#scoreboard-screen,#summary-screen{display:flex;align-items:center;justify-content:center;background:rgba(8,10,5,.78)}
.panel{background:linear-gradient(160deg, rgba(24,27,16,.96), rgba(14,16,9,.96));border:1px solid rgba(201,180,124,.3);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  max-height:92vh;display:flex;flex-direction:column}
.panel-wide{width:min(1060px,94vw)}
.panel-slim{width:min(430px,90vw)}
.panel-head{display:flex;align-items:baseline;gap:16px;padding:20px 28px 12px;border-bottom:1px solid rgba(201,180,124,.25)}
.panel-head h2{font-family:var(--stencil);font-size:30px;letter-spacing:4px;color:var(--paper)}
.panel-sub{font-size:12px;letter-spacing:3px;color:var(--sand-2)}
.panel-close{margin-left:auto;font-size:18px;color:var(--sand-2);padding:4px 10px}
.panel-close:hover{color:var(--danger)}
.panel-foot{display:flex;gap:14px;align-items:center;padding:16px 28px;border-top:1px solid rgba(201,180,124,.25)}

/* ---------- loadout ---------- */
.loadout-body{display:flex;gap:22px;padding:20px 28px;overflow:auto}
.lo-col{flex:1;min-width:0}
.lo-col h3{font-size:12px;letter-spacing:3px;color:var(--sand);margin-bottom:10px;border-bottom:1px solid rgba(201,180,124,.2);padding-bottom:6px}
.lo-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.lo-item{padding:10px 14px;border:1px solid rgba(201,180,124,.22);background:rgba(255,255,255,.02);cursor:pointer;transition:all .1s}
.lo-item:hover{border-color:var(--sand);background:rgba(255,255,255,.05)}
.lo-item.sel{border-color:var(--accent);background:linear-gradient(90deg,rgba(255,154,31,.14),rgba(255,154,31,.02))}
.lo-item .li-name{font-family:var(--stencil);font-size:17px;letter-spacing:1px;color:var(--paper)}
.lo-item.sel .li-name{color:var(--accent-2)}
.lo-item .li-class{font-size:11px;letter-spacing:2px;color:var(--sand-2)}
.lo-detail-col{flex:1.25}
#lo-detail{border:1px solid rgba(201,180,124,.22);padding:14px 16px;background:rgba(0,0,0,.25);min-height:180px}
.lo-d-name{font-family:var(--stencil);font-size:24px;color:var(--paper)}
.lo-d-class{font-size:11px;letter-spacing:3px;color:var(--accent);margin-bottom:8px}
.lo-d-desc{font-size:13px;color:#c9c4ad;line-height:1.45;margin-bottom:12px}
.lo-stat{display:flex;align-items:center;gap:10px;margin:6px 0}
.lo-stat label{width:88px;font-size:11px;letter-spacing:1px;color:var(--sand-2)}
.lo-stat .bar{flex:1;height:8px;background:rgba(255,255,255,.07)}
.lo-stat .bar i{display:block;height:100%;background:var(--accent)}
.lo-gear{margin-top:14px}
.lo-gear h4{font-size:11px;letter-spacing:3px;color:var(--sand);margin-bottom:8px}
.gear-row{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;border-bottom:1px dashed rgba(201,180,124,.15)}
.gear-row span{color:var(--sand-2)}
.gear-row b{font-weight:600;color:var(--paper)}
.gear-row i{font-style:normal;color:var(--accent)}

/* ---------- settings ---------- */
.settings-body{display:flex;gap:26px;padding:20px 28px;overflow:auto}
.set-col{flex:1;min-width:0}
.set-col h3{font-size:12px;letter-spacing:3px;color:var(--sand);margin:6px 0 10px;border-bottom:1px solid rgba(201,180,124,.2);padding-bottom:6px}
.set-col h3 small{float:right;color:#8a8a74;letter-spacing:1px;font-size:10px}
.set-row{display:flex;align-items:center;gap:12px;padding:7px 0}
.set-row label{width:170px;font-size:13px;letter-spacing:1px;color:var(--paper)}
.set-row input[type=range]{flex:1;accent-color:var(--accent);height:4px}
.set-row output{width:46px;text-align:right;font-weight:700;color:var(--accent-2);font-size:14px}
.toggle{font-family:var(--ui);font-weight:700;letter-spacing:2px;font-size:13px;padding:5px 16px;border:1px solid var(--sand-2);color:var(--sand)}
.toggle.on{border-color:var(--accent);color:var(--ink);background:var(--accent)}
#keybind-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:16px}
.kb-row{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;border:1px solid rgba(201,180,124,.18);background:rgba(255,255,255,.02)}
.kb-row span{font-size:12.5px;color:var(--sand-2);letter-spacing:1px}
.kb-key{min-width:64px;text-align:center;font-weight:700;font-size:12.5px;letter-spacing:1px;color:var(--paper);
  border:1px solid var(--sand-2);padding:3px 8px;background:rgba(0,0,0,.35);cursor:pointer}
.kb-key:hover{border-color:var(--accent);color:var(--accent-2)}
.kb-key.listening{border-color:var(--accent);color:var(--accent);animation:blink .5s infinite alternate}
@keyframes blink{from{background:rgba(255,154,31,.05)}to{background:rgba(255,154,31,.25)}}

/* ---------- pause / death ---------- */
#pause-screen .menu-nav{margin:18px 28px 26px}
#pause-screen .menu-btn{font-size:20px}
.death-inner{position:absolute;left:50%;top:58%;transform:translateX(-50%);text-align:center}
#killcam-tag{position:absolute;left:50%;top:9%;transform:translateX(-50%);font-family:var(--stencil);font-size:22px;
  letter-spacing:6px;color:var(--danger);border:1px solid var(--danger);padding:4px 18px;background:rgba(0,0,0,.5)}
#death-cause{font-size:15px;letter-spacing:2px;color:#d8d3bc;background:rgba(8,10,5,.75);padding:8px 18px;display:inline-block}
#death-cause b{color:var(--tan)}
#death-weapon{color:var(--sand)}
#respawn-row{margin-top:16px;font-size:16px;letter-spacing:3px;color:var(--paper)}
#respawn-count{font-family:var(--stencil);font-size:44px;color:var(--accent);display:inline-block;min-width:90px}
#respawn-hint{font-size:11px;letter-spacing:2px;color:var(--sand-2);margin-top:4px}

/* ---------- scoreboard ---------- */
.sb-body{display:flex;gap:26px;padding:18px 28px}
.sb-team{flex:1}
.sb-team h3{font-family:var(--stencil);font-size:17px;letter-spacing:2px;margin-bottom:8px}
.sb-green{color:var(--green)} .sb-tan{color:var(--tan)}
.sb-team table{width:100%;border-collapse:collapse;font-size:13.5px}
.sb-team th{font-size:10.5px;letter-spacing:2px;color:var(--sand-2);text-align:left;padding:4px 6px;border-bottom:1px solid rgba(201,180,124,.3)}
.sb-team td{padding:5px 6px;border-bottom:1px dashed rgba(201,180,124,.14)}
.sb-team tr.me td{color:var(--accent-2);font-weight:700}
.sb-team td:nth-child(n+2),.sb-team th:nth-child(n+2){text-align:right}

/* ---------- summary ---------- */
.sum-body{padding:18px 28px;display:flex;flex-direction:column;gap:18px}
.sum-score{display:flex;align-items:center;justify-content:center;gap:34px}
.sum-team{text-align:center}
.sum-team span{display:block;font-size:12px;letter-spacing:3px}
.sum-team b{font-family:var(--stencil);font-size:56px}
.sum-team.green b{color:var(--green)} .sum-team.tan b{color:var(--tan)}
.sum-vs{font-family:var(--stencil);font-size:26px;color:var(--sand-2)}
.sum-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.sum-stat{border:1px solid rgba(201,180,124,.25);padding:10px 12px;text-align:center;background:rgba(255,255,255,.02)}
.sum-stat b{display:block;font-family:var(--stencil);font-size:24px;color:var(--paper)}
.sum-stat span{font-size:10.5px;letter-spacing:2px;color:var(--sand-2)}
.sum-ribbons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ribbon{font-size:12px;letter-spacing:2px;font-weight:700;color:var(--ink);background:var(--accent);padding:4px 14px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
#sum-result.victory{color:var(--green)} #sum-result.defeat{color:var(--danger)} #sum-result.draw{color:var(--sand)}

/* ---------- click to play ---------- */
#click-catch-screen{display:flex;align-items:center;justify-content:center;background:rgba(8,10,5,.55);cursor:pointer}
.cc-inner{text-align:center;animation:pulse 1.6s infinite}
.cc-title{font-family:var(--stencil);font-size:44px;letter-spacing:6px;color:var(--paper);text-shadow:0 3px 0 rgba(0,0,0,.5)}
.cc-sub{font-size:13px;letter-spacing:3px;color:var(--sand);margin-top:8px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ============================================================
   HUD
   ============================================================ */
#hud{pointer-events:none;z-index:5}
#hud *{position:absolute}

/* crosshair */
#crosshair{left:50%;top:50%;width:0;height:0}
.ch-line{background:var(--hud);box-shadow:0 0 3px rgba(0,0,0,.9);position:absolute}
.ch-t,.ch-b{width:2px;height:9px;left:-1px}
.ch-l,.ch-r{height:2px;width:9px;top:-1px}
.ch-t{bottom:var(--gap,6px)} .ch-b{top:var(--gap,6px)}
.ch-l{right:var(--gap,6px)} .ch-r{left:var(--gap,6px)}
.ch-dot{width:2px;height:2px;left:-1px;top:-1px;background:var(--hud);box-shadow:0 0 3px rgba(0,0,0,.9)}
#crosshair.hidden-ch{visibility:hidden}
.ch-hit{position:absolute;left:-14px;top:-14px;width:28px;height:28px;opacity:0;
  background:
   linear-gradient(45deg,transparent 44%,var(--hm-color,#fff) 44%,var(--hm-color,#fff) 56%,transparent 56%),
   linear-gradient(-45deg,transparent 44%,var(--hm-color,#fff) 44%,var(--hm-color,#fff) 56%,transparent 56%);
  transform:rotate(45deg) scale(.7)}
.ch-hit.pop{animation:hmpop .28s ease-out}
@keyframes hmpop{0%{opacity:1;transform:rotate(45deg) scale(.55)}70%{opacity:1;transform:rotate(45deg) scale(1)}100%{opacity:0;transform:rotate(45deg) scale(1.05)}}

/* compass */
#compass-wrap{left:50%;top:14px;transform:translateX(-50%)}
#compass-canvas{position:static;display:block}
#compass-bearing{top:34px;left:50%;transform:translateX(-50%);font-family:var(--stencil);font-size:13px;color:var(--accent-2);letter-spacing:2px;text-shadow:0 0 4px #000}

/* minimap */
#minimap-wrap{right:18px;top:64px;width:188px;height:188px;border:1px solid rgba(233,240,226,.35);background:rgba(10,12,7,.55);border-radius:50%;overflow:hidden}
#minimap-canvas{position:static;width:100%;height:100%}
#minimap-nm{top:2px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;color:var(--sand);letter-spacing:1px}

/* score / timer */
#score-panel{left:50%;top:66px;transform:translateX(-50%);display:flex;gap:14px;align-items:center;background:rgba(10,12,7,.6);padding:5px 16px;border:1px solid rgba(233,240,226,.25)}
.team-row{display:flex;align-items:center;gap:7px;font-family:var(--stencil);font-size:20px}
.team-dot{position:static;width:10px;height:10px;display:inline-block}
.team-green .team-dot{background:var(--green)} .team-tan .team-dot{background:var(--tan)}
#score-green{color:var(--green)} #score-tan{color:var(--tan)}
#match-timer{font-family:var(--ui);font-weight:700;font-size:19px;color:var(--paper);letter-spacing:1px;min-width:56px;text-align:center}
#match-timer.urgent{color:var(--danger)}
#score-target{left:50%;top:104px;transform:translateX(-50%);font-size:9.5px;letter-spacing:2.5px;color:var(--sand-2)}

/* objective tracker */
#objective-tracker{left:18px;top:64px;display:flex;flex-direction:column;gap:8px}
.obj{display:flex;align-items:center;gap:8px}
.obj-letter{position:static;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-family:var(--stencil);font-size:15px;color:var(--ink);background:#777;box-shadow:0 0 0 2px rgba(0,0,0,.45)}
.obj.green .obj-letter{background:var(--green)}
.obj.tan .obj-letter{background:var(--tan)}
.obj.contest .obj-letter{background:repeating-linear-gradient(45deg,var(--green) 0 6px,var(--tan) 6px 12px)}
.obj-bar{position:static;width:60px;height:5px;background:rgba(0,0,0,.5);display:none}
.obj.capture .obj-bar{display:block}
.obj-bar i{display:block;height:100%;width:0;background:var(--accent)}

/* killfeed */
#killfeed{right:18px;top:270px;display:flex;flex-direction:column;gap:5px;align-items:flex-end;max-width:420px}
.kf-row{font-size:13.5px;font-weight:600;letter-spacing:.5px;background:rgba(10,12,7,.62);padding:3px 10px;border-right:2px solid transparent;animation:kfin .18s ease-out}
.kf-row.me{border-right-color:var(--accent);background:rgba(30,22,6,.75)}
@keyframes kfin{from{transform:translateX(14px);opacity:0}to{transform:none;opacity:1}}
.kf-a{color:var(--green)} .kf-a.enemy{color:var(--tan)} .kf-v{color:var(--green)} .kf-v.enemy{color:var(--tan)}
.kf-w{color:var(--sand-2);margin:0 7px;font-weight:500}
.kf-row.feat{color:var(--accent-2)}

/* toasts / center notices */
#toasts{left:50%;top:38%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.toast{font-family:var(--stencil);font-size:17px;letter-spacing:2px;color:var(--accent-2);text-shadow:0 2px 3px #000;animation:toastup 1.4s ease-out forwards}
.toast.big{font-size:26px;color:var(--paper)}
@keyframes toastup{0%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
#center-notice{left:50%;top:26%;transform:translateX(-50%);font-family:var(--stencil);font-size:30px;letter-spacing:4px;color:var(--paper);text-shadow:0 3px 4px #000}
#center-notice.bad{color:var(--danger)} #center-notice.good{color:var(--green)}
#capture-hint{left:50%;top:58%;transform:translateX(-50%);font-size:14px;letter-spacing:2px;color:var(--paper);background:rgba(10,12,7,.6);padding:5px 14px;border:1px solid rgba(233,240,226,.3)}

/* killstreak panel */
#streak-panel{right:18px;bottom:150px;display:flex;flex-direction:column;gap:6px}
.streak{display:flex;align-items:center;gap:8px;opacity:.45}
.streak.ready{opacity:1}
.streak-key{position:static;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--ink);background:var(--sand);border:1px solid rgba(0,0,0,.4)}
.streak.ready .streak-key{background:var(--accent)}
.streak-name{font-size:11.5px;letter-spacing:1.5px;font-weight:700;color:var(--paper)}
.streak-charge{position:static;width:52px;height:4px;background:rgba(0,0,0,.5)}
.streak-charge i{display:block;height:100%;width:0;background:var(--sand)}
.streak.ready .streak-charge i{background:var(--accent);width:100%}
.streak.ready{animation:streakblink 1s infinite alternate}
@keyframes streakblink{from{filter:brightness(1)}to{filter:brightness(1.35)}}

/* ammo */
#ammo-panel{right:24px;bottom:26px;text-align:right;min-width:210px}
#weapon-name{font-family:var(--stencil);font-size:19px;letter-spacing:2px;color:var(--paper);text-shadow:0 2px 3px #000}
#fire-mode{font-size:10.5px;letter-spacing:3px;color:var(--sand-2);margin:1px 0 3px}
#ammo-count{font-family:var(--ui);font-weight:700;font-size:34px;color:var(--paper);text-shadow:0 2px 4px #000;line-height:1}
#ammo-mag.low{color:var(--danger)}
#ammo-sep,#ammo-reserve{font-size:19px;color:var(--sand-2)}
#ammo-pips{display:flex;gap:2px;justify-content:flex-end;margin-top:5px;height:7px}
#ammo-pips i{width:5px;height:100%;background:var(--paper);box-shadow:0 0 2px rgba(0,0,0,.6)}
#ammo-pips i.off{background:rgba(255,255,255,.16)}
#ammo-pips.i31 i{width:3px}
#reload-bar{right:24px;bottom:96px;width:190px;height:5px;background:rgba(0,0,0,.55);display:none}
#reload-bar.on{display:block}
#reload-bar i{display:block;height:100%;width:0;background:var(--accent)}
#reload-bar span{position:static;display:block;text-align:right;font-size:9px;letter-spacing:2px;color:var(--accent-2);margin-top:3px}
#low-ammo-hint{right:24px;bottom:110px;font-size:13px;letter-spacing:2px;color:var(--danger);opacity:0;transition:opacity .15s}
#low-ammo-hint.on{opacity:1;animation:blink2 .8s infinite alternate}
#low-ammo-hint b{color:var(--paper)}
@keyframes blink2{from{opacity:.5}to{opacity:1}}

/* health */
#health-panel{left:24px;bottom:26px;width:240px}
#health-bar{position:static;width:100%;height:12px;background:rgba(0,0,0,.55);border:1px solid rgba(233,240,226,.3);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
#health-fill{display:block;height:100%;width:100%;background:var(--hud);transition:width .12s}
#health-chip{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,rgba(232,72,63,.85) 0 6px,rgba(232,72,63,.45) 6px 12px)}
#health-num{font-family:var(--stencil);font-size:16px;color:var(--paper);margin-top:3px;text-shadow:0 1px 2px #000}
#stamina-bar{position:static;width:62%;height:4px;background:rgba(0,0,0,.5);margin-top:4px}
#stamina-fill{display:block;height:100%;width:100%;background:var(--sand)}
#stamina-fill.tired{background:var(--danger)}
#stance-icon{left:0;bottom:-20px;font-size:10px;letter-spacing:2px;color:var(--sand-2)}

/* grenades */
#grenade-panel{right:24px;bottom:210px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.nade{display:flex;align-items:center;gap:7px;background:rgba(10,12,7,.55);padding:3px 8px;border:1px solid rgba(233,240,226,.22)}
.nade svg{position:static;width:15px;height:15px;fill:var(--sand)}
.nade-frag svg{fill:var(--green-deep)} .nade-stun svg{fill:var(--sand)}
.nade span{font-weight:700;font-size:14px;color:var(--paper)}
.nade-key{font-size:9.5px;color:var(--sand-2);border:1px solid var(--sand-2);padding:0 4px}
.nade.cooking{border-color:var(--accent);box-shadow:0 0 8px rgba(255,154,31,.5)}
.nade.empty{opacity:.35}

/* damage direction */
#dmg-indicators{left:50%;top:50%;width:0;height:0}
.dmg-arc{width:120px;height:120px;left:-60px;top:-60px;border-radius:50%;
  border:5px solid transparent;border-top-color:var(--danger);
  animation:dmghost 1s ease-out forwards;opacity:.95}
@keyframes dmghost{0%{opacity:.95;transform:rotate(var(--rot,0deg)) scale(.9)}100%{opacity:0;transform:rotate(var(--rot,0deg)) scale(1.25)}}
#hit-dir{left:50%;top:50%;width:0;height:0}
.hit-arc{width:90px;height:90px;left:-45px;top:-45px;border-radius:50%;border:4px solid transparent;border-top-color:var(--accent-2);animation:dmghost .5s ease-out forwards}

/* grenade warning */
#grenade-warning{left:50%;top:68%;transform:translateX(-50%);display:flex;flex-direction:column;gap:4px;align-items:center}
.gw-row{display:flex;align-items:center;gap:8px;background:rgba(120,20,10,.7);padding:4px 12px;border:1px solid var(--danger);animation:blink2 .5s infinite alternate}
.gw-row svg{position:static;width:14px;height:14px;fill:#fff}
.gw-row span{font-size:12px;letter-spacing:2px;font-weight:700;color:#fff}

/* overlays */
#scope-overlay{inset:0;display:none}
#scope-overlay.on{display:block}
.scope-circle{left:50%;top:50%;width:min(86vh,86vw);height:min(86vh,86vw);transform:translate(-50%,-50%);border-radius:50%;
  box-shadow:0 0 0 3000px rgba(4,6,3,.97), inset 0 0 60px rgba(0,0,0,.85), inset 0 0 6px rgba(0,0,0,.9);border:3px solid #0a0c07}
.scope-cross-h{left:0;right:0;top:50%;height:1.5px;background:rgba(10,12,7,.9)}
.scope-cross-v{top:0;bottom:0;left:50%;width:1.5px;background:rgba(10,12,7,.9)}
.scope-mildot{left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(200,40,30,.9)}
#visor-overlay{inset:0;opacity:0;background:
  radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(140,10,10,.55) 100%),
  radial-gradient(circle at 30% 60%, rgba(140,10,10,.35) 0 4%, transparent 5%) ,
  radial-gradient(circle at 68% 30%, rgba(140,10,10,.3) 0 3%, transparent 4%)}
#visor-overlay.crack{background:
  radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(140,10,10,.6) 100%),
  conic-gradient(from 20deg at 46% 44%, transparent 0 8deg, rgba(255,255,255,.25) 8deg 9deg, transparent 9deg 24deg),
  conic-gradient(from 80deg at 52% 50%, transparent 0 6deg, rgba(255,255,255,.18) 6deg 7deg, transparent 7deg 30deg),
  conic-gradient(from 160deg at 48% 56%, transparent 0 10deg, rgba(255,255,255,.22) 10deg 11deg, transparent 11deg 26deg)}
#flash-overlay{inset:0;background:#fff;opacity:0}
#stun-overlay{inset:0;opacity:0;background:radial-gradient(circle at 50% 50%, rgba(255,220,120,.7), rgba(255,240,200,.95) 80%)}
#sprint-overlay{inset:0;opacity:0;background:radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(10,12,7,.5) 100%)}
#vignette{inset:0;opacity:.55;background:radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(8,10,5,.5) 100%)}
#low-health-pulse{inset:0;opacity:0;background:radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(160,20,10,.55) 100%)}
#low-health-pulse.on{animation:healthpulse 1.1s infinite alternate}
@keyframes healthpulse{from{opacity:.25}to{opacity:.8}}

/* responsive */
@media (max-width:900px){
  .menu-title{font-size:56px}
  #minimap-wrap{width:130px;height:130px}
  #score-panel{top:56px}
  #killfeed{top:210px;max-width:300px}
  #grenade-panel{bottom:180px}
}
@media (max-height:600px){
  #compass-wrap{display:none}
  #score-panel{top:10px}
}