/* In-match HUD in vibe/vibe colours, always on screen: big chunky numbers on dark bevelled plates with lime
   edges. You bottom left (3D head, health, armor, powerups), the gun bottom right with your whole arsenal
   stacked above it. Overrides the base rules in game.css. */
#hud {
  --h-num: "Russo One", Impact, sans-serif;
  --h-lbl: Anton, Impact, "Arial Narrow", sans-serif;
  --h-plate: linear-gradient(180deg, rgba(30,34,16,.9) 0%, rgba(11,13,6,.9) 60%, rgba(5,6,3,.92) 100%);
  --h-bevel: inset 0 1px 0 rgba(223,249,2,.32), inset 0 -2px 0 rgba(0,0,0,.6), 0 4px 0 rgba(0,0,0,.45);
  --h-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  --h-cut: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  --h-cut-s: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
#hud > #status3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; zoom: 1; }

/* shared bars: segmented, like the old health blocks */
#hud .stat i, #hud .wep i { position: absolute; display: block; height: 7px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 10px, transparent 10px 13px); }
#hud .stat i u, #hud .wep i u { display: block; height: 100%; width: 0; background: currentColor; transition: width .2s;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 13px); mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 13px); }
#hud .stat small { font: 13px/1 var(--h-lbl); letter-spacing: .2em; text-transform: uppercase; color: #7d8c23; }
#hud .stat b { font-family: var(--h-num); font-weight: 400; font-variant-numeric: tabular-nums; color: #f4f6ea; text-shadow: 4px 4px 0 #000, 0 0 22px rgba(0,0,0,.6); }
#hud .stat { position: relative; min-width: 0; padding: 0; background: none; clip-path: none; box-shadow: none; }
#hud .stat::before { content: none; }

/* ── you: head · health · armor ── */
#vitals { position: absolute; left: 18px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#vitals .vit { display: flex; align-items: stretch; gap: 12px; padding: 8px 20px 10px 8px; background: var(--h-plate); box-shadow: var(--h-bevel); clip-path: var(--h-cut); border-left: 4px solid var(--lime); }
#st-head { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; color: var(--lime);
  background: radial-gradient(circle at 50% 60%, rgba(223,249,2,.2), rgba(223,249,2,0) 68%); }
#st-head .ic { width: 46px; height: 46px; }
#hud.m3d #st-head > * { display: none; }
#vitals .rows { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 176px; }
#hud #st-hp { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 12px; padding-bottom: 11px; color: var(--lime); }
#st-hp small { grid-column: 1 / 3; margin-bottom: 2px; }
#st-hp b { grid-column: 1 / 3; font-size: 64px; line-height: .86; color: var(--lime); }
#st-hp i { left: 0; right: 0; bottom: 0; }
#st-hp.over b { color: #6ff2ff; }
#st-hp.over { color: #6ff2ff; }
#st-hp.low b { color: var(--red); animation: hpPulse .5s ease-in-out infinite alternate; }
#st-hp.low { color: var(--red); }
@keyframes hpPulse { to { opacity: .55; } }
#hud #st-ar { display: grid; grid-template-columns: 30px auto 1fr; align-items: center; column-gap: 8px; padding-bottom: 9px; color: #ffd23a; }
#hud #st-ar .sic, #hud.m3d #st-ar .sic { margin: 0; grid-row: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #ffd23a; }
#st-ar .sic .ic { width: 22px; height: 22px; }
#hud.m3d #st-ar .sic > * { display: none; }
#st-ar small { grid-row: 1; }
#st-ar b { grid-row: 1; font-size: 32px; line-height: 1; text-align: right; }
#st-ar i { left: 38px; right: 0; bottom: 0; height: 5px; }
#st-ar.none b { color: #4d5340; text-shadow: 3px 3px 0 #000; }

/* powerups over your plate: name, seconds and a draining bar in their own colour */
#hud #pw { position: static; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; transform: none; }
#hud #pw > div { position: relative; display: flex; align-items: center; gap: 12px; min-width: 230px; padding: 8px 18px 12px 12px; background: var(--h-plate); box-shadow: var(--h-bevel); clip-path: var(--h-cut-s);
  border-left: 4px solid var(--c); color: var(--c); font: 18px var(--h-lbl); letter-spacing: .14em; text-transform: uppercase; }
#hud #pw > div .ic { width: 28px; height: 28px; }
#hud #pw > div span { display: flex; flex-direction: column; line-height: 1.05; }
#hud #pw > div em { font: 12px var(--h-lbl); letter-spacing: .16em; color: #c9d4cf; font-style: normal; }
#hud #pw > div b { margin-left: auto; font: 34px/1 var(--h-num); color: #f4f6ea; text-shadow: 3px 3px 0 #000; min-width: 0; }
#hud #pw > div > i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--c); box-shadow: 0 0 10px var(--c); transition: width .9s linear; }
#hud #pw > div.low b { color: var(--red); }
#hud #pw > div.jetpack { min-width: 270px; }

/* ── the gun in hand ── */
#arms { position: absolute; right: 18px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#hud #st-ammo { display: grid; grid-template-columns: 118px auto; grid-template-rows: auto auto; align-items: end; column-gap: 10px;
  padding: 8px 18px 17px 10px; background: var(--h-plate); box-shadow: var(--h-bevel); clip-path: var(--h-cut); border-right: 4px solid var(--lime); color: var(--lime); }
#hud #st-ammo .sic, #hud.m3d #st-ammo .sic { margin: 0; grid-row: 1 / 3; width: 118px; height: 72px; display: flex; align-items: center; justify-content: center; color: #e6eadb; }
#st-ammo .sic .ic.wi { width: 98px; height: 36px; }
#hud.m3d #st-ammo .sic > * { display: none; }
#st-ammo small { text-align: right; color: var(--lime); font-size: 14px; }
#st-ammo b { font-size: 64px; line-height: .86; text-align: right; min-width: 2.2ch; }
#st-ammo i { left: 10px; right: 18px; bottom: 7px; }
#st-ammo.inf b { color: #9aa184; }
#st-ammo.low b { color: var(--red); }
#st-ammo.low { color: var(--red); }

/* ── the arsenal: only the guns you carry, in a row along the bottom middle, the one in hand raised in lime ── */
#hud #weps { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; gap: 4px; opacity: 1; pointer-events: none; }
#hud .wep { position: relative; display: none; grid-template-rows: 26px 18px; align-items: center; justify-items: center; width: 70px; height: 54px; padding: 4px 4px 7px; gap: 0;
  background: var(--h-plate); box-shadow: var(--h-bevel); clip-path: var(--h-cut-s); color: #8d9476; transition: width .12s, height .12s; }
#hud .wep.has { display: grid; }
#hud .wep .ic.wi { width: 54px; height: 22px; }
#hud .wep .a { font: 15px/1 var(--h-num); color: #c4c9b3; text-shadow: 2px 2px 0 #000; }
#hud .wep i { left: 8px; right: 8px; bottom: 4px; height: 3px; color: #6d7442; }
#hud .wep.on { width: 84px; height: 64px; grid-template-rows: 32px 20px; color: var(--lime); border-bottom: 3px solid var(--lime);
  background: linear-gradient(0deg, rgba(223,249,2,.3), rgba(223,249,2,.06)), var(--h-plate); }
#hud .wep.on .ic.wi { width: 66px; height: 28px; }
#hud .wep.on .a { color: #fff; font-size: 17px; }
#hud .wep.on i { color: var(--lime); }
#hud .wep.empty { color: #4a4f3a; }
#hud .wep.empty .a { color: var(--red); }
/* narrower screens: tighter cells so the row fits between your plate and the gun */
@media (max-width: 1600px) {
  #hud #weps { gap: 3px; }
  #hud .wep { width: 56px; height: 48px; grid-template-rows: 22px 16px; }
  #hud .wep .ic.wi { width: 44px; height: 18px; }
  #hud .wep .a { font-size: 13px; }
  #hud .wep.on { width: 68px; height: 56px; grid-template-rows: 26px 18px; }
  #hud .wep.on .ic.wi { width: 54px; height: 22px; }
  #hud .wep.on .a { font-size: 15px; }
}

/* ── score and clock ── */
#topbar { top: 14px; gap: 6px; }
#topbar .sc, #topbar .clock { min-width: 112px; padding: 8px 20px 10px; background: var(--h-plate); box-shadow: var(--h-bevel); clip-path: var(--h-cut-s); }
#topbar .sc b { font: 46px/1 var(--h-num); text-shadow: 3px 3px 0 #000; }
#topbar .sc .lbl, #topbar .clock span { font: 14px var(--h-lbl); letter-spacing: .16em; color: #8a956a; }
#topbar .sc.me { background: linear-gradient(180deg, rgba(223,249,2,.34), rgba(223,249,2,.08) 70%, rgba(12,14,7,.92)); }
#topbar .clock { min-width: 148px; }
#topbar .clock b { font: 40px/1 var(--h-num); text-shadow: 3px 3px 0 #000; }
#place { top: 100px; font: 16px var(--h-lbl); letter-spacing: .2em; color: #a9b08c; text-shadow: var(--h-shadow); }

/* ── frag feed, pickups, speed in the same plates ── */
.kf { font: 16px var(--h-lbl); letter-spacing: .06em; text-transform: uppercase; background: var(--h-plate); box-shadow: var(--h-bevel); padding: 7px 14px; }
#pickups { left: 22px; bottom: auto; top: 46%; }
#speedo { font: 15px var(--h-lbl); letter-spacing: .12em; text-shadow: var(--h-shadow); }

/* the BOT tag next to a bot's name (frag feed, score) */
#hud em.bt { margin-left: 6px; padding: 1px 4px; font: 10px/1.2 var(--h-lbl); letter-spacing: .12em; font-style: normal; color: #c9ced2; background: #3a3f44; vertical-align: middle; text-shadow: none; }