/* Approved mobile reference: same layout is available on every device. */
#hud.touch-hud {
  --tu: clamp(0.4px, min(0.0542299vw, 0.1172333vh), 2px);
  --hu: var(--tu);
}

#hud.touch-hud .hud-map {
  left: max(env(safe-area-inset-left), calc(40 * var(--tu)));
  top: max(env(safe-area-inset-top), calc(31 * var(--tu)));
  width: calc(222 * var(--tu));
  height: calc(192 * var(--tu));
}

#hud.touch-hud .hud-team {
  left: calc(40 * var(--tu));
  top: calc(242 * var(--tu));
  width: calc(222 * var(--tu));
  translate: 0 calc(192 * var(--tu) * (var(--hud-scale) - 1));
}

#hud.touch-hud .hud-compass {
  top: calc(12 * var(--tu));
  left: 50%;
  right: auto;
  width: calc(710 * var(--tu));
  transform: translateX(-50%) scale(var(--hud-scale));
  transform-origin: top center;
}

#hud.touch-hud .hud-bottom-left {
  display: block;
  left: calc(44 * var(--tu));
  bottom: max(env(safe-area-inset-bottom), calc(35 * var(--tu)));
  width: calc(266 * var(--tu));
}

#hud.touch-hud #hud-health-panel .health-row {
  display: grid;
}

#hud.touch-hud .input-hints,
#hud.touch-hud #hud-equipment-panel,
#hud.touch-hud .hud-bottom-right,
#hud.touch-hud .hud-quick-pause {
  display: none;
}

#hud.touch-hud #kill-feed {
  left: calc(40 * var(--tu));
  right: auto;
  top: calc(325 * var(--tu));
  max-width: calc(260 * var(--tu));
  align-items: flex-start;
}

#hud.touch-hud .hud-loadout {
  left: 40.2%;
  right: auto;
  bottom: max(env(safe-area-inset-bottom), calc(51 * var(--tu)));
  width: calc(400 * var(--tu));
  height: calc(120 * var(--tu));
  transform: scale(var(--hud-scale));
  transform-origin: bottom left;
}

#hud.touch-hud .weapon-slot {
  min-width: 0;
  min-height: 0;
  padding: 0;
}

#hud.touch-hud #primary-slot {
  width: calc(185 * var(--tu));
  height: calc(64 * var(--tu));
}

#hud.touch-hud #primary-slot > svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: calc(42 * var(--tu));
}

#hud.touch-hud #primary-slot > b {
  left: 0;
  top: calc(46 * var(--tu));
  bottom: auto;
  width: 100%;
  font:
    clamp(9px, calc(17 * var(--tu)), 24px)/1 Barlow,
    sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
}

#hud.touch-hud .ammo-counter {
  left: 0;
  top: calc(70 * var(--tu));
  width: calc(146 * var(--tu));
  height: calc(50 * var(--tu));
}

#hud.touch-hud .ammo-counter > b {
  font-size: calc(49 * var(--tu));
}

#hud.touch-hud .ammo-counter > span {
  font-size: calc(26 * var(--tu));
}

#hud.touch-hud #ammo-shells {
  right: calc(-5 * var(--tu));
  top: calc(8 * var(--tu));
}

#hud.touch-hud #secondary-slot {
  left: calc(270 * var(--tu));
  top: calc(48 * var(--tu));
  width: calc(120 * var(--tu));
  height: calc(68 * var(--tu));
  border: 0;
}

#hud.touch-hud #secondary-slot > svg {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(40 * var(--tu));
}

#hud.touch-hud #secondary-slot > b {
  left: 0;
  top: calc(44 * var(--tu));
  bottom: auto;
  width: 100%;
  text-align: center;
  font:
    clamp(9px, calc(14 * var(--tu)), 22px)/1 Barlow,
    sans-serif;
}

#hud.touch-hud #fire-mode,
#hud.touch-hud .reload-hint,
#hud.touch-hud #secondary-slot > small {
  display: none;
}

#hud.touch-hud #touch-controls {
  display: block;
}

#hud:not(.touch-hud) #touch-controls {
  display: none;
}

#hud.touch-hud #touch-look {
  inset: 11% 0 13% 30%;
  cursor: grab;
}

#hud.touch-hud #touch-look:active {
  cursor: grabbing;
}

.touch-look-hint {
  display: none;
}

#hud.touch-hud .touch-look-hint {
  display: flex;
  position: absolute;
  left: 46.65%;
  top: 56.8%;
  translate: -50% 0;
  flex-direction: column;
  align-items: center;
  gap: calc(25 * var(--tu));
  font:
    calc(19 * var(--tu)) Barlow,
    sans-serif;
  color: #f2f2ef80;
  pointer-events: none;
  white-space: nowrap;
}

.touch-look-hint > i {
  width: calc(18 * var(--tu));
  height: calc(18 * var(--tu));
  rotate: 45deg;
  border-right: calc(5 * var(--tu)) solid currentColor;
  border-bottom: calc(5 * var(--tu)) solid currentColor;
}

#hud.touch-hud #touch-stick {
  --stick-size: max(98px, calc(236 * var(--tu)));
  left: calc(11.01% - var(--stick-size) / 2);
  top: calc(70.46% - var(--stick-size) / 2);
  right: auto;
  bottom: auto;
  width: var(--stick-size);
  height: var(--stick-size);
  aspect-ratio: 1;
  border: 1px solid #f2f2efdc;
  background: #20262c26;
  border-radius: 50%;
  box-shadow: none;
  opacity: var(--control-opacity, var(--touch-opacity));
  scale: var(--control-scale, var(--touch-scale));
  transform: none;
  transform-origin: top left;
}

#hud.touch-hud #touch-stick:before {
  inset: 25%;
  border: 1px solid #f2f2ef40;
}

#hud.touch-hud #stick-knob {
  width: 32%;
  height: 32%;
  background: #f2f2ef99;
  border: 1px solid #f2f2efdc;
  box-shadow: none;
  pointer-events: none;
}

#hud.touch-hud .stick-direction {
  position: absolute;
  width: 0;
  height: 0;
  border-left: calc(8 * var(--tu)) solid transparent;
  border-right: calc(8 * var(--tu)) solid transparent;
  border-bottom: calc(12 * var(--tu)) solid #f2f2ef80;
  pointer-events: none;
}

#hud.touch-hud .stick-direction.north {
  left: 50%;
  top: 7%;
  translate: -50% 0;
}

#hud.touch-hud .stick-direction.west {
  left: 7%;
  top: 50%;
  translate: 0 -50%;
  rotate: -90deg;
}

#hud.touch-hud .stick-direction.east {
  right: 7%;
  top: 50%;
  translate: 0 -50%;
  rotate: 90deg;
}

#hud.touch-hud #touch-controls button {
  --button-size: max(44px, calc(var(--diameter, 110) * var(--tu)));
  left: calc(var(--x) * 1% - var(--button-size) / 2);
  top: calc(var(--y) * 1% - var(--button-size) / 2);
  right: auto;
  bottom: auto;
  width: var(--button-size) !important;
  height: var(--button-size) !important;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0;
  border: max(1px, calc(1.5 * var(--tu))) solid #f2f2efdc !important;
  border-radius: 50%;
  background: #20262c24;
  box-shadow: none;
  color: #f2f2ef;
  opacity: var(--control-opacity, var(--touch-opacity));
  scale: var(--control-scale, var(--touch-scale));
  transform: none;
  transform-origin: top left;
  text-shadow: 0 1px 2px #0005;
}

#hud.touch-hud #touch-controls button svg {
  position: absolute;
  left: 22%;
  top: 15%;
  width: 56% !important;
  height: 56% !important;
  transform: none;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px #0002);
}

#hud.touch-hud .touch-label {
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 100%;
  text-align: center;
  font:
    clamp(8px, calc(17 * var(--tu)), 24px)/1 Barlow,
    sans-serif;
  pointer-events: none;
  letter-spacing: 0.01em;
}

#hud.touch-hud #touch-stick .touch-label {
  bottom: 8%;
  font-size: clamp(9px, calc(18 * var(--tu)), 25px);
}

#hud.touch-hud #touch-controls button.is-held,
#hud.touch-hud #touch-controls button:active {
  background: #f2f2ef36;
  border-color: #fff !important;
}

#hud.touch-hud #touch-controls button.is-active {
  background: #f2f2ef22;
}

#hud.touch-hud #touch-controls button.cooling-down {
  filter: opacity(0.65);
}

#hud.touch-hud #touch-controls button.is-available {
  box-shadow: 0 0 0 1px #f2f2ef88;
}

#hud.touch-hud #touch-fire-left {
  --x: 18.98;
  --y: 14.77;
  --diameter: 114;
}

#hud.touch-hud #touch-sprint {
  --x: 10.52;
  --y: 48.77;
  --diameter: 100;
}

#hud.touch-hud #touch-fire {
  --x: 88.61;
  --y: 41.74;
  --diameter: 164;
}

#hud.touch-hud #touch-aim {
  --x: 78.58;
  --y: 22.98;
  --diameter: 112;
}

#hud.touch-hud #touch-melee {
  --x: 95.01;
  --y: 24.5;
  --diameter: 110;
}

#hud.touch-hud #touch-interact {
  --x: 61.93;
  --y: 54.04;
  --diameter: 98;
}

#hud.touch-hud #touch-interact:not(.is-available) {
  visibility: hidden;
  pointer-events: none;
}

.layout-editor #hud.touch-hud #touch-interact:not(.is-available) {
  visibility: visible;
  pointer-events: auto;
}

#hud.touch-hud #touch-recon {
  --x: 24.57;
  --y: 66.82;
  --diameter: 100;
}

#hud.touch-hud #touch-reload {
  --x: 78.52;
  --y: 64.83;
  --diameter: 110;
}

#hud.touch-hud #touch-jump {
  --x: 94.9;
  --y: 64.48;
  --diameter: 126;
}

#hud.touch-hud #touch-grenade {
  --x: 74.57;
  --y: 83.24;
  --diameter: 112;
}

#hud.touch-hud #touch-switch {
  --x: 83.3;
  --y: 83.24;
  --diameter: 112;
}

#hud.touch-hud #touch-crouch {
  --x: 92.9;
  --y: 83.24;
  --diameter: 110;
}

#hud.touch-hud #touch-scoreboard {
  --x: 85.96;
  --y: 8;
  --diameter: 94;
}

#hud.touch-hud #touch-pause {
  --x: 95.44;
  --y: 8.1;
  --diameter: 94;
}

#hud.touch-hud #touch-scoreboard .touch-label,
#hud.touch-hud #touch-pause .touch-label {
  bottom: calc(-27 * var(--tu));
  font-size: clamp(9px, calc(23 * var(--tu)), 28px);
}

#hud.touch-hud #touch-scoreboard svg,
#hud.touch-hud #touch-pause svg {
  left: 27.5%;
  top: 27.5%;
  width: 45% !important;
  height: 45% !important;
}

#hud.touch-hud #touch-grenade svg {
  left: 22%;
  width: 48% !important;
}

#hud.touch-hud .touch-count {
  position: absolute;
  right: 13%;
  top: 32%;
  font:
    clamp(12px, calc(26 * var(--tu)), 32px) Barlow,
    sans-serif;
  pointer-events: none;
}

#hud.touch-hud #touch-fire svg,
#hud.touch-hud #touch-fire-left svg {
  top: 18%;
  left: 27%;
  width: 46% !important;
  height: 48% !important;
}

#hud.touch-hud #interaction-prompt {
  font-size: clamp(9px, calc(14 * var(--tu)), 18px);
}

#hud.touch-hud #interaction-prompt kbd {
  display: none;
}

/* Editor uses the actual current variant, with independent saved positions. */
.layout-editor #hud:not(.touch-hud) #touch-controls {
  display: none !important;
}

.layout-editor #hud .hud-compass {
  display: block;
}

.layout-editor #hud:not(.touch-hud) .hud-map {
  top: calc(31 * var(--hu));
}

.layout-editor #hud:not(.touch-hud) .hud-team {
  top: calc(257 * var(--hu));
}

.layout-editor #hud:not(.touch-hud) .hud-loadout {
  left: auto;
  right: calc(43 * var(--hu));
  bottom: calc(39 * var(--hu));
}

.layout-editor #hud:not(.touch-hud) .hud-bottom-right {
  display: flex;
}

.layout-editor #hud:not(.touch-hud) .hud-quick-pause {
  display: flex;
}

.layout-editor #hud.touch-hud #hud-equipment-panel {
  display: none;
}

.layout-editor #hud.touch-hud .hud-map {
  top: calc(31 * var(--tu));
}

.layout-editor #hud.touch-hud .hud-team {
  top: calc(242 * var(--tu));
}

.layout-editor #hud.touch-hud .hud-loadout {
  left: 40.2%;
  right: auto;
  bottom: calc(51 * var(--tu));
  width: calc(400 * var(--tu));
}

.layout-editor #hud.touch-hud .touch-look-hint {
  display: none;
}

.layout-editor #hud .hud-editable {
  min-width: 0;
}

@media (max-width: 1000px) {
  .layout-editor .hud-editor-footer {
    left: 2%;
    right: 2%;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px;
  }

  .layout-editor .hud-editor-footer > span {
    display: none;
  }

  .layout-editor .hud-editor-footer > select {
    font-size: 10px;
    padding: 7px;
    max-width: 170px;
  }

  .layout-editor .hud-editor-footer > button {
    font-size: 11px;
    padding: 8px 10px;
  }

  .layout-editor .hud-editor-panel {
    left: 32%;
    top: 22%;
    width: 260px;
    max-height: 56vh;
    overflow: auto;
  }

  .layout-editor .hud-editor-body {
    padding: 10px 14px;
  }

  .layout-editor .hud-editor-body input[type="range"] {
    margin-bottom: 11px;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #hud.touch-hud {
    --tu: 0.5px;
  }

  #hud.touch-hud .hud-map {
    left: 16px;
    top: max(16px, env(safe-area-inset-top));
    width: 110px;
    height: 100px;
  }

  #hud.touch-hud .hud-team {
    left: 16px;
    top: 128px;
    width: 110px;
    translate: none;
  }

  #hud.touch-hud .hud-compass {
    top: 182px;
    left: 50%;
    width: min(70vw, 280px);
  }

  #hud.touch-hud .hud-bottom-left {
    left: 18px;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 133px;
  }

  #hud.touch-hud .hud-loadout {
    left: calc(100% - 220px);
    right: auto;
    bottom: max(22px, env(safe-area-inset-bottom));
    width: 200px;
  }

  #hud.touch-hud #kill-feed {
    top: 220px;
    left: 16px;
  }

  #hud.touch-hud #touch-stick {
    --stick-size: 116px;
    left: 24px;
    top: auto;
    bottom: 100px;
  }

  #hud.touch-hud #touch-look {
    inset: 27% 0 20% 32%;
  }

  #hud.touch-hud .touch-look-hint {
    left: 51%;
    top: 46%;
    font-size: 9px;
  }

  #hud.touch-hud #touch-sprint {
    --x: 21;
    --y: 70;
    --diameter: 96;
  }

  #hud.touch-hud #touch-fire-left {
    --x: 16;
    --y: 33;
    --diameter: 108;
  }

  #hud.touch-hud #touch-fire {
    --x: 79;
    --y: 55;
    --diameter: 152;
  }

  #hud.touch-hud #touch-aim {
    --x: 67;
    --y: 39;
    --diameter: 108;
  }

  #hud.touch-hud #touch-melee {
    --x: 88;
    --y: 43;
    --diameter: 96;
  }

  #hud.touch-hud #touch-interact {
    --x: 54;
    --y: 58;
    --diameter: 96;
  }

  #hud.touch-hud #touch-recon {
    --x: 16;
    --y: 60;
    --diameter: 96;
  }

  #hud.touch-hud #touch-reload {
    --x: 67;
    --y: 68;
    --diameter: 96;
  }

  #hud.touch-hud #touch-jump {
    --x: 88;
    --y: 68;
    --diameter: 108;
  }

  #hud.touch-hud #touch-grenade {
    --x: 54;
    --y: 80;
    --diameter: 96;
  }

  #hud.touch-hud #touch-crouch {
    --x: 84;
    --y: 80;
    --diameter: 96;
  }

  #hud.touch-hud #touch-switch {
    --x: 68;
    --y: 87.5;
    --diameter: 96;
  }

  #hud.touch-hud #touch-scoreboard {
    --x: 75;
    --y: 5;
    --diameter: 88;
  }

  #hud.touch-hud #touch-pause {
    --x: 91;
    --y: 5;
    --diameter: 88;
  }

  #hud.touch-hud #touch-scoreboard .touch-label,
  #hud.touch-hud #touch-pause .touch-label {
    bottom: -15px;
  }

  .layout-editor #hud.touch-hud .hud-map {
    top: 16px;
  }

  .layout-editor #hud.touch-hud .hud-team {
    top: 128px;
  }

  .layout-editor #hud.touch-hud .hud-loadout {
    left: calc(100% - 220px);
    bottom: 22px;
    width: 200px;
  }

  .layout-editor .hud-editor-panel {
    left: 34%;
    top: 27%;
    width: 62%;
    max-height: 32vh;
  }
}