/* Approved 25 Oct 2026 desktop HUD. Touch controls retain their current layout. */
.desktop-only {
  display: none;
}

#hud.desktop-hud {
  --hu: clamp(0.7px, min(0.0598086vw, 0.10627vh), 1.8px);
  --hud-white: #f2f2ef;
  --hud-gray: #bcbdbb;
  --accent: #f2f2ef;
  color: var(--hud-white);
  text-shadow: 0 1px 3px #0007;
}

.desktop-hud .desktop-only {
  display: block;
}

.generated-hud-icon {
  overflow: hidden;
}

.desktop-hud button:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

.desktop-hud kbd {
  border: 1px solid #ececebbb;
  border-radius: 1px;
  min-width: calc(17 * var(--hu));
  min-height: calc(19 * var(--hu));
  padding: 0 calc(4 * var(--hu));
  font:
    calc(14 * var(--hu)) Barlow,
    sans-serif;
  color: var(--hud-white);
}

.desktop-hud .hud-map {
  left: calc(44 * var(--hu));
  top: calc(31 * var(--hu));
  right: auto;
  width: calc(216 * var(--hu));
  height: calc(212 * var(--hu));
  border: 1px solid #f2f2efd9;
  background: #202328ba;
  box-shadow: none;
  transform: scale(var(--hud-scale));
  transform-origin: top left;
}

.desktop-hud .hud-map canvas {
  width: 100%;
  height: 100%;
  opacity: 1;
}

.desktop-hud .map-top {
  display: none;
}

.desktop-hud .map-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: calc(21 * var(--hu));
  padding: calc(1 * var(--hu)) calc(4 * var(--hu));
  background: linear-gradient(90deg, #202328c9, #20232840);
  border-top: 1px solid #ddd6;
}

.desktop-hud .map-bottom > span {
  font:
    calc(14 * var(--hu)) Barlow,
    sans-serif;
  letter-spacing: 0.02em;
  color: var(--hud-white);
}

.desktop-hud #fps-counter {
  display: none;
}

.desktop-hud .hud-team {
  left: calc(44 * var(--hu));
  top: calc(257 * var(--hu));
  width: calc(216 * var(--hu));
  height: calc(72 * var(--hu));
  display: block;
  background: none;
  border: 0;
  padding: 0;
  transform: scale(var(--hud-scale));
  transform-origin: top left;
  translate: 0 calc(212 * var(--hu) * (var(--hud-scale) - 1));
}

.desktop-hud .hud-emblem,
.desktop-hud #score-limit {
  display: none;
}

.desktop-hud .score-stack {
  width: 100%;
  height: calc(54 * var(--hu));
  display: flex;
  justify-content: space-between;
}

.desktop-hud .score-stack > div {
  position: relative;
  width: calc(77 * var(--hu));
  height: 100%;
  display: block;
  color: var(--hud-white);
}

.desktop-hud .score-stack b {
  display: block;
  width: auto;
  font:
    calc(29 * var(--hu))/1 Barlow,
    sans-serif;
  color: var(--hud-white);
}

.desktop-hud .score-stack .team-red {
  text-align: right;
  color: var(--hud-gray);
}

.desktop-hud .team-red b {
  color: var(--hud-gray);
}

.desktop-hud .score-stack > div > span {
  width: 100%;
  height: calc(3 * var(--hu));
  margin-top: calc(3 * var(--hu));
  background: #ffffff28;
}

.desktop-hud .score-stack i {
  background: currentColor;
  min-width: calc(2 * var(--hu));
}

.desktop-hud .score-team-name {
  margin-top: calc(4 * var(--hu));
  font:
    calc(13 * var(--hu)) Barlow,
    sans-serif;
  letter-spacing: 0.04em;
  font-style: normal;
}

.desktop-hud .match-clock {
  left: 50%;
  top: calc(6 * var(--hu));
  translate: -50% 0;
  background: none;
  min-width: 0;
  padding: 0;
  text-align: center;
}

.desktop-hud .match-clock > span {
  font:
    calc(20 * var(--hu)) Barlow,
    sans-serif;
  color: var(--hud-white);
  font-variant-numeric: tabular-nums;
}

.desktop-hud #match-status {
  display: none;
}

.desktop-hud .match-mode {
  position: absolute;
  top: calc(56 * var(--hu));
  width: 100%;
  text-align: center;
  font:
    calc(14 * var(--hu)) Barlow,
    sans-serif;
  letter-spacing: 0.045em;
  color: var(--hud-gray);
}

.desktop-hud .hud-compass {
  left: 50%;
  top: calc(12 * var(--hu));
  width: calc(750 * var(--hu));
  height: calc(75 * var(--hu));
  transform: translateX(-50%) scale(var(--hud-scale));
  transform-origin: top center;
  overflow: visible;
}

.desktop-hud #compass-numbers {
  display: none;
}

.desktop-hud #compass-ruler {
  position: absolute;
  top: calc(13 * var(--hu));
  width: 100%;
  height: calc(42 * var(--hu));
  filter: drop-shadow(0 1px 2px #0004);
}

.desktop-hud .hud-compass > span {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  font-size: 0;
  width: 0;
  height: 0;
  border-left: calc(7 * var(--hu)) solid transparent;
  border-right: calc(7 * var(--hu)) solid transparent;
  border-top: calc(12 * var(--hu)) solid var(--hud-white);
}

.desktop-hud .hud-compass small {
  position: absolute;
  top: calc(55 * var(--hu));
  width: 100%;
  margin: 0;
  font:
    calc(15 * var(--hu)) Rajdhani,
    sans-serif;
  letter-spacing: 0.1em;
  color: var(--hud-white);
}

.desktop-hud .hud-bottom-right {
  left: auto;
  right: calc(100 * var(--hu));
  top: calc(29 * var(--hu));
  bottom: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(27 * var(--hu));
  font:
    calc(14 * var(--hu)) Barlow,
    sans-serif;
  letter-spacing: 0.045em;
  color: var(--hud-gray);
  transform: scale(var(--hud-scale));
  transform-origin: top right;
}

.desktop-hud .hud-bottom-right i,
.desktop-hud .legacy-match-hints {
  display: none;
}

.desktop-hud #hud-score-button {
  pointer-events: auto;
  font: inherit;
  padding: 0;
  letter-spacing: inherit;
  color: var(--hud-gray);
  white-space: nowrap;
}

.desktop-hud .hud-quick-pause {
  left: auto;
  right: calc(25 * var(--hu));
  top: calc(25 * var(--hu));
  width: calc(53 * var(--hu));
  height: calc(27 * var(--hu));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--hu));
  border: 0;
  background: none;
  padding: 0;
  transform: scale(var(--hud-scale));
  transform-origin: top right;
}

.desktop-hud .hud-quick-pause > svg {
  width: calc(25 * var(--hu));
  height: calc(26 * var(--hu));
  border: 0;
  stroke-width: 3;
}

.desktop-hud .hud-quick-pause > span {
  font:
    calc(14 * var(--hu)) Barlow,
    sans-serif;
}

.desktop-hud #kill-feed {
  left: auto;
  right: calc(43 * var(--hu));
  top: calc(78 * var(--hu));
  max-width: calc(360 * var(--hu));
  gap: calc(3 * var(--hu));
  align-items: flex-end;
  transform: scale(var(--hud-scale));
  transform-origin: top right;
}

.desktop-hud .feed-entry {
  border: 0;
  background: linear-gradient(90deg, transparent, #282b302b, transparent);
  font:
    calc(15 * var(--hu)) Barlow,
    sans-serif;
  gap: calc(12 * var(--hu));
  padding: calc(4 * var(--hu)) 0;
  letter-spacing: 0.02em;
}

.desktop-hud .feed-entry b,
.desktop-hud .feed-entry > span:last-child {
  color: #dededb;
}

.desktop-hud .feed-entry svg {
  width: calc(64 * var(--hu));
  height: calc(19 * var(--hu));
  color: var(--hud-white);
  stroke-width: 1;
}

.desktop-hud .hud-bottom-left {
  left: calc(44 * var(--hu));
  bottom: calc(30 * var(--hu));
  width: calc(250 * var(--hu));
  transform: scale(var(--hud-scale));
  transform-origin: bottom left;
}

.desktop-hud .hud-brand,
.desktop-hud #stance-label,
.desktop-hud .legacy-grenade-hint {
  display: none;
}

.desktop-hud #hud-stance-icon {
  position: absolute;
  left: 0;
  top: calc(1 * var(--hu));
  width: calc(34 * var(--hu));
  height: calc(57 * var(--hu));
  color: var(--hud-white);
  stroke-width: 1.2;
}

.desktop-hud .health-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: calc(43 * var(--hu)) calc(6 * var(--hu)) auto;
  column-gap: calc(6 * var(--hu));
  row-gap: calc(8 * var(--hu));
  margin: 0;
  padding-left: calc(54 * var(--hu));
}

.desktop-hud .health-row > b {
  grid-area: 1/1;
  align-self: center;
  font:
    calc(38 * var(--hu))/1 Barlow,
    sans-serif;
  color: var(--hud-white);
}

.desktop-hud .health-row > span {
  grid-area: 1/2;
  align-self: end;
  margin-bottom: calc(5 * var(--hu));
  font:
    calc(17 * var(--hu)) Barlow,
    sans-serif;
  letter-spacing: 0;
  color: var(--hud-gray);
}

.desktop-hud .health-row > div {
  grid-area: 2/1/3/3;
  width: 100%;
  height: calc(6 * var(--hu));
  border: 0;
  background: #ffffff26;
  transform: none;
  box-shadow: none;
}

.desktop-hud .health-row i {
  background: var(--hud-white);
}

.desktop-hud .health-row > small {
  grid-area: 3/1/4/3;
  align-self: start;
  margin: 0;
  font:
    calc(14 * var(--hu))/1.4 Rajdhani,
    sans-serif;
  letter-spacing: 0.1em;
  color: var(--hud-gray);
  white-space: nowrap;
  display: block;
}

.desktop-hud .health-row > small:after {
  content: none;
}

.desktop-hud .input-hints {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--hu));
  margin-top: calc(18 * var(--hu));
  font:
    calc(14 * var(--hu)) Barlow,
    sans-serif;
  white-space: nowrap;
  color: var(--hud-gray);
}

.desktop-hud .input-hints > span:not(.legacy-grenade-hint) {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--hu));
}

.desktop-hud .input-hints kbd {
  min-height: calc(26 * var(--hu));
  margin: 0;
  font-size: calc(15 * var(--hu));
}

.desktop-hud #hud-equipment-panel {
  position: absolute;
  right: calc(32 * var(--hu));
  top: 44.5%;
  width: calc(45 * var(--hu));
  height: calc(239 * var(--hu));
  transform: scale(var(--hud-scale));
  transform-origin: top right;
}

.desktop-hud .ability-slots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(19 * var(--hu));
  margin: 0;
  position: relative;
}

.desktop-hud .ability-slots:after {
  content: "";
  position: absolute;
  right: calc(-16 * var(--hu));
  top: 0;
  height: 65%;
  width: 1px;
  background: #e5e5e54d;
}

.desktop-hud .ability-slots > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(7 * var(--hu));
  width: calc(45 * var(--hu));
  height: calc(63 * var(--hu));
  padding: 0;
  border: 0;
  background: none;
  clip-path: none;
}

.desktop-hud .ability-slots svg {
  width: calc(35 * var(--hu));
  height: calc(35 * var(--hu));
  color: var(--hud-white);
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 2px #0004);
}

.desktop-hud #grenade-slot svg {
  width: calc(28 * var(--hu));
  fill: #f2f2ef24;
  stroke-width: 1.6;
}

.desktop-hud #melee-slot svg {
  fill: #f2f2ef;
  stroke-width: 0.7;
}

.desktop-hud .ability-slots kbd {
  min-width: calc(16 * var(--hu));
  min-height: calc(18 * var(--hu));
  font-size: calc(13 * var(--hu));
  padding: 0 calc(3 * var(--hu));
}

.desktop-hud .ability-slots > button > span {
  display: none;
}

.desktop-hud #grenade-count {
  display: block;
  position: absolute;
  left: calc(38 * var(--hu));
  top: calc(6 * var(--hu));
  font:
    calc(20 * var(--hu)) Barlow,
    sans-serif;
}

.desktop-hud #uav-button:not([data-state="ready"]) > span {
  display: block;
  position: absolute;
  right: calc(49 * var(--hu));
  top: calc(9 * var(--hu));
  font:
    calc(13 * var(--hu)) Barlow,
    sans-serif;
  white-space: nowrap;
  color: var(--hud-gray);
}

.desktop-hud .hud-loadout {
  left: auto;
  right: calc(43 * var(--hu));
  bottom: calc(39 * var(--hu));
  width: calc(160 * var(--hu));
  height: calc(188 * var(--hu));
  transform: scale(var(--hud-scale));
  transform-origin: bottom right;
}

.desktop-hud .weapon-slots {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.desktop-hud .weapon-slot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(50 * var(--hu));
  min-height: 0;
  min-width: 0;
  display: block;
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none;
  text-align: left;
}

.desktop-hud .weapon-slot.active {
  border: 0;
  box-shadow: none;
}

.desktop-hud #primary-slot > svg {
  width: 100%;
  height: calc(37 * var(--hu));
  stroke-width: 1.15;
  color: var(--hud-white);
}

.desktop-hud #primary-slot > small {
  display: none;
}

.desktop-hud .weapon-slot > b {
  position: absolute;
  left: 0;
  bottom: 0;
  font:
    calc(14 * var(--hu)) Barlow,
    sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--hud-white);
}

.desktop-hud .ammo-counter {
  position: absolute;
  top: calc(56 * var(--hu));
  left: 0;
  width: 100%;
  height: calc(76 * var(--hu));
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  white-space: nowrap;
}

.desktop-hud .ammo-counter > b {
  font:
    calc(49 * var(--hu))/0.95 Barlow,
    sans-serif;
  letter-spacing: -0.015em;
  color: var(--hud-white);
  font-variant-numeric: tabular-nums;
}

.desktop-hud .ammo-counter > span {
  font:
    calc(26 * var(--hu)) Barlow,
    sans-serif;
  letter-spacing: -0.035em;
  color: var(--hud-gray);
  margin-left: calc(3 * var(--hu));
}

.desktop-hud #fire-mode {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(10 * var(--hu));
  font:
    calc(14 * var(--hu)) Barlow,
    sans-serif;
  letter-spacing: 0.035em;
  color: var(--hud-gray);
}

.desktop-hud .reload-hint {
  position: absolute;
  right: calc(-10 * var(--hu));
  bottom: calc(10 * var(--hu));
  font:
    calc(13 * var(--hu)) Barlow,
    sans-serif;
  letter-spacing: 0.015em;
  color: var(--hud-gray);
  pointer-events: auto;
  padding: 0;
}

.desktop-hud #ammo-shells {
  position: absolute;
  right: calc(2 * var(--hu));
  top: calc(14 * var(--hu));
  display: flex;
  gap: calc(4 * var(--hu));
  height: calc(27 * var(--hu));
  align-items: end;
}

.desktop-hud #ammo-shells i {
  display: block;
  width: calc(7 * var(--hu));
  height: 100%;
  background: var(--hud-white);
  border-top: calc(2 * var(--hu)) solid #c9c9c6;
  border-bottom: calc(3 * var(--hu)) solid #c9c9c6;
  opacity: 0.2;
}

.desktop-hud #ammo-shells i.loaded {
  opacity: 1;
}

.desktop-hud #ammo-shells[data-type="magazine"] i {
  width: calc(4 * var(--hu));
  height: calc(18 * var(--hu));
  border-radius: calc(3 * var(--hu)) calc(3 * var(--hu)) 0 0;
}

.desktop-hud #secondary-slot {
  left: calc(63 * var(--hu));
  top: calc(138 * var(--hu));
  width: calc(100 * var(--hu));
  height: calc(42 * var(--hu));
  border-top: 1px solid #ddd7;
}

.desktop-hud #secondary-slot > svg {
  position: absolute;
  top: calc(8 * var(--hu));
  left: 0;
  width: calc(78 * var(--hu));
  height: calc(36 * var(--hu));
  stroke-width: 1.1;
}

.desktop-hud #secondary-slot > b {
  left: calc(50 * var(--hu));
  bottom: calc(-2 * var(--hu));
  font-size: calc(13 * var(--hu));
}

.desktop-hud #secondary-slot > small {
  left: auto;
  right: calc(-1 * var(--hu));
  top: calc(10 * var(--hu));
  font:
    calc(15 * var(--hu)) Barlow,
    sans-serif;
  padding: 0 calc(4 * var(--hu));
  background: #53555770;
  color: var(--hud-white);
}

.desktop-hud #crosshair i,
.desktop-hud #crosshair b {
  background: var(--hud-white);
}

.desktop-hud #crosshair i {
  width: 1px;
  height: calc(7 * var(--hu));
}

.desktop-hud #crosshair i:nth-child(3),
.desktop-hud #crosshair i:nth-child(4) {
  height: 1px;
  width: calc(7 * var(--hu));
}

.desktop-hud #reload-label,
.desktop-hud #kill-confirmation,
.desktop-hud #medal svg,
.desktop-hud #hit-marker.head i,
.desktop-hud #grenade-warning {
  color: var(--hud-white);
}

.desktop-hud #hit-marker.head i {
  background: var(--hud-white);
}

.desktop-hud #reload-label {
  font-size: calc(14 * var(--hu));
}

.desktop-hud #kill-confirmation {
  font-size: calc(24 * var(--hu));
}

.desktop-hud #kill-confirmation small {
  color: var(--hud-gray);
}

.desktop-hud #damage-arrow {
  border-top-color: #efefec;
}

.desktop-hud .soldier-tag {
  color: #d0d0ce;
}

.desktop-hud .soldier-tag.friendly {
  color: #f2f2ef;
}

.desktop-hud .soldier-tag:not(.friendly) > span:before {
  content: "◇ ";
  font-size: 0.9em;
}

.desktop-hud .soldier-tag.friendly > span:before {
  content: "• ";
  font-size: 0.9em;
}

.colorblind .desktop-hud .soldier-tag {
  color: #edb35f;
}

.colorblind .desktop-hud .soldier-tag.friendly {
  color: #8daeff;
}

/* Keep independent panels editable after separating health and equipment. */
.layout-editor .desktop-hud #hud-health-panel {
  display: block;
}

.layout-editor .desktop-hud #hud-equipment-panel {
  top: 34%;
  right: 4%;
  display: block;
}

.layout-editor .desktop-hud .hud-map {
  top: 16%;
}

.layout-editor .desktop-hud .hud-team {
  top: 45%;
  translate: none;
}

.layout-editor .desktop-hud .hud-loadout {
  left: auto;
  right: 5%;
  bottom: 5%;
  width: calc(160 * var(--hu));
  transform: none;
}

.layout-editor .desktop-hud .hud-quick-pause {
  display: none;
}

@media (max-width: 1000px) {
  .desktop-hud .hud-compass {
    width: calc(550 * var(--hu));
  }

  .desktop-hud .hud-bottom-right {
    gap: calc(15 * var(--hu));
  }
}

@media (max-width: 650px) and (orientation: portrait) {
  .desktop-hud .hud-compass {
    top: calc(12 * var(--hu));
    left: auto;
    right: calc(15 * var(--hu));
    width: calc(230 * var(--hu));
    transform: scale(var(--hud-scale));
    transform-origin: top right;
  }

  .desktop-hud .hud-bottom-right {
    top: calc(96 * var(--hu));
    right: calc(25 * var(--hu));
    flex-direction: column;
    align-items: flex-end;
  }

  .desktop-hud .hud-quick-pause {
    top: calc(63 * var(--hu));
  }
}