/* Bunker Breach interface: dark industrial, hazard yellow.
   All sizes are multiples of --u, which scales with the window (800x500 up to 4K). */

#ui {
  --u: clamp(6px, min(0.9vw, 1.5vh), 40px);
  --yellow: #ffc400;
  --yellow-dim: rgba(255, 196, 0, 0.5);
  --red: #ff3b30;
  --green: #3ddc84;
  --panel: rgba(6, 8, 11, 0.66);
  --line: rgba(255, 196, 0, 0.28);
  --text: #e9edf0;
  --dim: #8b969e;
  --f-head: Impact, Haettenschweiler, "Bahnschrift", "DIN Condensed", "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --f-cond: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Courier New", monospace;
  font-family: var(--f-cond);
  font-size: var(--u);
  line-height: 1.15;
  color: var(--text);
}
#ui *, #ui *::before, #ui *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ HUD */
.bb-hud, .bb-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.bb-hud[data-state="playing"] { opacity: 1; }
.bb-hud[data-state="paused"] { opacity: 0.2; }
.bb-fx[data-state="playing"], .bb-fx[data-state="dead"] { opacity: 1; }

.bb-lbl {
  font-size: calc(var(--u) * 1);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--yellow);
}

/* health, bottom left */
.bb-health {
  position: absolute;
  left: calc(var(--u) * 2.2);
  bottom: calc(var(--u) * 2.2);
  width: calc(var(--u) * 20);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4) calc(var(--u) * 1.1);
  background: var(--panel);
  border-left: calc(var(--u) * 0.35) solid var(--yellow);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--u)), calc(100% - var(--u)) 100%, 0 100%);
}
.bb-hp-num {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: calc(var(--u) * 3.8);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.bb-bar {
  position: relative;
  height: calc(var(--u) * 0.9);
  margin-top: calc(var(--u) * 0.5);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.bb-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.bb-bar .trail { background: rgba(255, 255, 255, 0.4); transition: width 0.8s ease 0.25s; }
.bb-bar .fill { transition: width 0.18s ease-out; }
.bb-health.low { animation: bb-lowpulse 0.9s ease-in-out infinite; }
.bb-health.low .bb-hp-num { color: var(--red); }

/* weapon and ammo, bottom right */
.bb-ammo {
  position: absolute;
  right: calc(var(--u) * 2.2);
  bottom: calc(var(--u) * 2.2);
  min-width: calc(var(--u) * 17);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4) calc(var(--u) * 1.1);
  text-align: right;
  background: var(--panel);
  border-right: calc(var(--u) * 0.35) solid var(--yellow);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--u) 100%, 0 calc(100% - var(--u)));
}
.bb-ammo-line { line-height: 1.05; white-space: nowrap; }
.bb-mag {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: calc(var(--u) * 5.2);
  font-variant-numeric: tabular-nums;
}
.bb-slash, .bb-res {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: calc(var(--u) * 2.4);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.bb-slash { margin: 0 0.25em; }
.bb-ammo.empty .bb-mag { color: var(--red); animation: bb-blink 0.6s linear infinite; }
.bb-reload {
  height: calc(var(--u) * 1.9);
  padding-top: calc(var(--u) * 0.35);
  font-size: calc(var(--u) * 1.15);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--yellow);
  visibility: hidden;
}
.bb-reload.on { visibility: visible; }
.bb-rl-bar { height: calc(var(--u) * 0.25); margin-top: calc(var(--u) * 0.3); background: rgba(255, 255, 255, 0.1); }
.bb-rl-bar i { display: block; height: 100%; width: 0; background: var(--yellow); }
.bb-slots { display: flex; justify-content: flex-end; gap: calc(var(--u) * 0.5); margin-top: calc(var(--u) * 0.5); }
.bb-slots b {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.2);
  font-family: var(--f-mono);
  font-size: calc(var(--u) * 1.2);
  color: rgba(255, 255, 255, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.2);
}
.bb-slots b.on { color: var(--text); border: 1px solid rgba(255, 255, 255, 0.5); }
.bb-slots b.sel { color: #0a0a0a; background: var(--yellow); border-color: var(--yellow); }

/* crosshair and hit marker, center */
.bb-cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --spread: 0; }
.bb-cross i {
  position: absolute;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.bb-cross .t, .bb-cross .b { width: max(2px, calc(var(--u) * 0.2)); margin-left: calc(max(2px, var(--u) * 0.2) / -2); height: calc(var(--u) * 0.95); }
.bb-cross .l, .bb-cross .r { height: max(2px, calc(var(--u) * 0.2)); margin-top: calc(max(2px, var(--u) * 0.2) / -2); width: calc(var(--u) * 0.95); }
.bb-cross .t { bottom: calc(var(--u) * (0.45 + var(--spread) * 1.7)); }
.bb-cross .b { top: calc(var(--u) * (0.45 + var(--spread) * 1.7)); }
.bb-cross .l { right: calc(var(--u) * (0.45 + var(--spread) * 1.7)); }
.bb-cross .r { left: calc(var(--u) * (0.45 + var(--spread) * 1.7)); }
.bb-cross .dot { left: -1px; top: -1px; width: 2px; height: 2px; opacity: 0.7; }

.bb-hit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
.bb-hit i {
  position: absolute;
  left: calc(var(--u) * -0.15);
  bottom: 0;
  width: calc(var(--u) * 0.3);
  height: calc(var(--u) * 1.1);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 100%;
}
.bb-hit i:nth-child(1) { transform: rotate(45deg) translateY(calc(var(--u) * -0.9)); }
.bb-hit i:nth-child(2) { transform: rotate(135deg) translateY(calc(var(--u) * -0.9)); }
.bb-hit i:nth-child(3) { transform: rotate(225deg) translateY(calc(var(--u) * -0.9)); }
.bb-hit i:nth-child(4) { transform: rotate(315deg) translateY(calc(var(--u) * -0.9)); }
.bb-hit.kill i { background: var(--red); width: calc(var(--u) * 0.5); left: calc(var(--u) * -0.25); height: calc(var(--u) * 1.5); }

/* enemies counter and score, top center */
.bb-top {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 1.6);
  transform: translateX(-50%);
  min-width: calc(var(--u) * 19);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 3) calc(var(--u) * 0.8);
  text-align: center;
  white-space: nowrap;
  background: var(--panel);
  border-bottom: calc(var(--u) * 0.3) solid var(--yellow);
  clip-path: polygon(calc(var(--u) * 1.2) 0, calc(100% - var(--u) * 1.2) 0, 100% 100%, 0 100%);
}
.bb-en { font-family: var(--f-mono); font-weight: 700; font-size: calc(var(--u) * 2.4); font-variant-numeric: tabular-nums; }
.bb-en .bb-lbl { font-family: var(--f-cond); font-size: calc(var(--u) * 1.2); margin-right: 0.6em; }
.bb-en .of { color: var(--dim); }
.bb-sc { margin-top: calc(var(--u) * 0.2); font-size: calc(var(--u) * 1.1); letter-spacing: 0.22em; color: var(--dim); }
.bb-sc b { color: var(--text); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* minimap and small indicators, top right */
.bb-tr {
  position: absolute;
  right: calc(var(--u) * 2.2);
  top: calc(var(--u) * 2.2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 0.8);
}
.bb-mini {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
  border-radius: 50%;
  border: calc(var(--u) * 0.3) solid var(--yellow-dim);
  background: rgba(4, 6, 8, 0.72);
  box-shadow: 0 0 0 calc(var(--u) * 0.2) rgba(0, 0, 0, 0.6), inset 0 0 calc(var(--u) * 2) rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.bb-mini canvas { display: block; width: 100%; height: 100%; }
.bb-mini.off { display: none; }
.bb-tag {
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9);
  font-size: calc(var(--u) * 1.05);
  font-weight: 700;
  letter-spacing: 0.2em;
  background: var(--panel);
  color: var(--dim);
}
.bb-tag.mute { color: var(--red); }
.bb-tag[hidden] { display: none; }

/* toasts, above the weapon panel */
.bb-toasts {
  position: absolute;
  right: calc(var(--u) * 2.2);
  bottom: calc(var(--u) * 17);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 0.5);
}
.bb-toast {
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.4);
  font-size: calc(var(--u) * 1.6);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(6, 8, 11, 0.8);
  border-right: calc(var(--u) * 0.3) solid var(--yellow);
  animation: bb-toast 2.3s ease forwards;
}
.bb-toast.health { border-color: var(--green); color: #b8f5d0; }
.bb-toast.weapon { color: var(--yellow); font-size: calc(var(--u) * 1.9); }
.bb-toast.gone { animation: bb-toast-out 0.25s ease forwards; }

/* damage feedback */
.bb-flash, .bb-low {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(160, 0, 0, 0) 32%, rgba(190, 10, 10, 0.5) 72%, rgba(110, 0, 0, 0.92) 100%);
}
.bb-low.on { animation: bb-lowvig 1.1s ease-in-out infinite; }
.bb-dir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
.bb-dir i {
  position: absolute;
  left: calc(var(--u) * -2.6);
  top: calc(var(--u) * -17);
  width: calc(var(--u) * 5.2);
  height: calc(var(--u) * 5.2);
  background: linear-gradient(to top, rgba(255, 40, 30, 0), rgba(255, 60, 45, 0.95));
  clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
}

.bb-fps {
  position: absolute;
  left: calc(var(--u) * 1);
  top: calc(var(--u) * 1);
  font: 700 calc(var(--u) * 1.1) var(--f-mono);
  color: rgba(255, 255, 255, 0.55);
}

@keyframes bb-lowpulse { 50% { border-left-color: var(--red); background: rgba(60, 4, 4, 0.7); } }
@keyframes bb-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
@keyframes bb-lowvig { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } }
@keyframes bb-toast {
  0% { opacity: 0; transform: translateX(calc(var(--u) * 1.5)); }
  8% { opacity: 1; transform: none; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--u) * -0.6)); }
}
@keyframes bb-toast-out { to { opacity: 0; } }

/* -------------------------------------------------------------- Screens */
.bb-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(3, 4, 6, 0.5) 0%, rgba(2, 3, 4, 0.88) 100%);
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.bb-screen.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease;
}
.bb-screen[data-mode="paused"] { cursor: pointer; }
.bb-screen[data-mode="dead"] { background: radial-gradient(ellipse at 50% 45%, rgba(80, 0, 0, 0.55) 0%, rgba(22, 0, 0, 0.93) 100%); }
.bb-screen[data-mode="dead"].on { transition: opacity 1.3s ease; }
.bb-screen[data-mode="won"] { background: radial-gradient(ellipse at 50% 45%, rgba(0, 45, 22, 0.45) 0%, rgba(2, 10, 6, 0.92) 100%); }
/* scanlines */
.bb-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.2) 3px);
}

.bb-panel {
  display: none;
  position: relative;
  width: min(94vw, calc(var(--u) * 64));
  max-height: 96vh;
  padding: calc(var(--u) * 3.6) calc(var(--u) * 4) calc(var(--u) * 3.2);
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(15, 18, 22, 0.93), rgba(6, 8, 10, 0.96));
  border: 1px solid var(--line);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) #000, 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, 0.6);
  transition: opacity 0.8s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bb-panel::before, .bb-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--u) * 1.1);
  background: repeating-linear-gradient(-45deg, var(--yellow) 0, var(--yellow) calc(var(--u) * 1.4), #0b0d10 calc(var(--u) * 1.4), #0b0d10 calc(var(--u) * 2.8));
}
.bb-panel::before { top: 0; }
.bb-panel::after { bottom: 0; }
.bb-screen[data-mode="menu"] .bb-panel.menu,
.bb-screen[data-mode="paused"] .bb-panel.paused,
.bb-screen[data-mode="dead"] .bb-panel.dead,
.bb-screen[data-mode="won"] .bb-panel.won { display: block; }
.bb-screen:not(.on) .bb-panel { transform: translateY(calc(var(--u) * 1.5)) scale(0.98); }
.bb-screen.delayed .bb-panel { opacity: 0; transform: translateY(calc(var(--u) * 1.5)); pointer-events: none; }

.bb-title {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: calc(var(--u) * 7);
  line-height: 1;
  letter-spacing: 0.07em;
  white-space: nowrap;
  color: var(--text);
  text-shadow: 0 0 calc(var(--u) * 2) rgba(255, 196, 0, 0.22), calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 #000;
}
.bb-title em { font-style: normal; color: var(--yellow); }
.bb-sub { margin: calc(var(--u) * 1) 0 0; font-size: calc(var(--u) * 2); letter-spacing: 0.24em; color: var(--dim); text-transform: uppercase; }
.bb-result {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: calc(var(--u) * 7);
  line-height: 1;
  letter-spacing: 0.07em;
  text-shadow: 0 0 calc(var(--u) * 3) currentColor, calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 #000;
}
.bb-panel.dead .bb-result { color: var(--red); }
.bb-panel.won .bb-result { color: #ffd43b; }
.bb-panel.paused .bb-result { color: var(--text); text-shadow: calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 #000; }

.bb-btn-wrap { display: inline-block; margin-top: calc(var(--u) * 2.6); filter: drop-shadow(0 0 calc(var(--u) * 1.2) rgba(255, 196, 0, 0.4)); animation: bb-glow 2.2s ease-in-out infinite; }
.bb-btn {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  margin: 0;
  border: 0;
  cursor: pointer;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 5.5);
  font-family: var(--f-head);
  font-size: calc(var(--u) * 3);
  letter-spacing: 0.14em;
  color: #0a0a0a;
  background: var(--yellow);
  clip-path: polygon(calc(var(--u) * 1.2) 0, 100% 0, calc(100% - var(--u) * 1.2) 100%, 0 100%);
  transition: transform 0.12s ease, background 0.12s ease;
}
.bb-btn:hover { background: #ffd84a; transform: scale(1.04); }
.bb-btn:active { transform: scale(0.97); }
.bb-btn:focus { outline: none; }
.bb-btn:focus-visible { background: #fff; }

.bb-hint { margin-top: calc(var(--u) * 1.5); font-size: calc(var(--u) * 1.5); letter-spacing: 0.05em; color: var(--dim); }
.bb-err { min-height: calc(var(--u) * 2); margin-top: calc(var(--u) * 0.8); font-size: calc(var(--u) * 1.6); font-weight: 700; color: #ff8a80; opacity: 0; transition: opacity 0.2s; }
.bb-err.on { opacity: 1; animation: bb-shake 0.35s ease; }

.bb-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 0.6) calc(var(--u) * 3);
  margin: calc(var(--u) * 2.6) 0 0;
  padding: calc(var(--u) * 1.6) 0 0;
  list-style: none;
  text-align: left;
  font-size: calc(var(--u) * 1.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.bb-controls li { display: flex; align-items: center; gap: calc(var(--u) * 0.9); color: var(--dim); }
.bb-controls kbd {
  flex: none;
  min-width: calc(var(--u) * 4.6);
  padding: calc(var(--u) * 0.25) calc(var(--u) * 0.7);
  text-align: center;
  font: 700 calc(var(--u) * 1.3) var(--f-mono);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom-width: calc(var(--u) * 0.25);
}

.bb-stats { width: calc(var(--u) * 34); max-width: 100%; margin: calc(var(--u) * 2.6) auto 0; text-align: left; font-size: calc(var(--u) * 1.9); }
.bb-stats .row {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 0.6) 0;
  color: var(--dim);
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.bb-stats .row b { color: var(--text); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.bb-rank { display: none; margin-top: calc(var(--u) * 1.6); align-items: baseline; justify-content: center; gap: calc(var(--u) * 1.4); }
.bb-panel.won .bb-rank { display: flex; }
.bb-rank span { font-size: calc(var(--u) * 1.5); letter-spacing: 0.3em; color: var(--dim); }
.bb-rank b { font: 400 calc(var(--u) * 9) / 1 var(--f-head); text-shadow: 0 0 calc(var(--u) * 2.5) currentColor; }
.bb-rank b.S { color: #ffd43b; }
.bb-rank b.A { color: var(--green); }
.bb-rank b.B { color: #4fc3f7; }
.bb-rank b.C { color: var(--dim); }

@keyframes bb-glow { 50% { filter: drop-shadow(0 0 calc(var(--u) * 2.2) rgba(255, 196, 0, 0.7)); } }
@keyframes bb-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

@media (max-height: 470px) {
  .bb-controls { margin-top: calc(var(--u) * 1.6); padding-top: calc(var(--u) * 1); }
  .bb-btn-wrap { margin-top: calc(var(--u) * 1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .bb-health.low, .bb-low.on, .bb-btn-wrap, .bb-ammo.empty .bb-mag { animation: none; }
  .bb-low.on { opacity: 0.6; }
}