/* Quiet combat readouts share the HUD's ivory strokes and condensed type. */
#toast {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f2f2ef;
  box-shadow: 0 6px 22px #0002;
}

#toast > svg {
  width: 27px;
  height: 27px;
  flex: none;
  stroke-width: 1.2;
  color: #e0e3db;
}

#toast > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#toast small {
  font:
    500 9px/1 Barlow,
    sans-serif;
  letter-spacing: 0.18em;
  color: #b4bdb7;
}

#toast span {
  font:
    500 13px/1.35 Rajdhani,
    sans-serif;
  overflow-wrap: anywhere;
}

#toast[data-context="combat"] {
  --notice-unit: clamp(0.7px, min(0.0598086vw, 0.10627vh), 1.8px);
  right: max(env(safe-area-inset-right), calc(43 * var(--notice-unit)));
  bottom: max(
    env(safe-area-inset-bottom),
    calc(242 * var(--notice-unit) * var(--hud-scale))
  );
  width: min(320px, calc(100vw - 40px));
  background: linear-gradient(
    90deg,
    #20232814,
    #202328c9 16%,
    #202328b8 90%,
    #20232800
  );
  box-shadow: none;
  padding: 11px 12px;
  text-shadow: 0 1px 3px #0007;
}

#toast[data-context="combat"]::after {
  content: "";
  width: 3px;
  height: 3px;
  align-self: flex-start;
  background: #f2f2ef99;
  flex: none;
  margin: 3px 0 0 auto;
}

#hud.desktop-hud {
  --feedback-unit: clamp(0.75px, var(--hu), 1.6px);
  --feedback-offset: calc(48 * var(--feedback-unit));
}

#hud.desktop-hud #medal {
  top: 15%;
  width: max-content;
  max-width: calc((100vw - 32px) / var(--hud-scale));
  flex-direction: row;
  align-items: center;
  gap: calc(11 * var(--feedback-unit));
  padding: 0 0 calc(9 * var(--feedback-unit));
  color: var(--hud-white);
  text-align: left;
  background: none;
  border: 0;
  filter: none;
  transform: translateX(-50%) scale(var(--hud-scale));
  transform-origin: top center;
}

#medal::after {
  content: "";
  position: absolute;
  left: calc(43 * var(--feedback-unit));
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, #f2f2ef99, #f2f2ef20);
}

#hud.desktop-hud #medal > svg {
  flex: none;
  width: calc(32 * var(--feedback-unit));
  height: calc(32 * var(--feedback-unit));
  filter: drop-shadow(0 1px 2px #0006);
  rotate: 0deg;
}

#medal .medal-copy {
  display: grid;
  gap: calc(4 * var(--feedback-unit));
  min-width: 0;
}

#hud.desktop-hud #medal strong {
  font:
    500 calc(18 * var(--feedback-unit))/1 Barlow,
    sans-serif;
  letter-spacing: 0.045em;
}

#medal .medal-copy > small {
  color: var(--hud-gray);
  font:
    500 calc(10 * var(--feedback-unit))/1.1 Rajdhani,
    sans-serif;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

#medal .medal-reward {
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--feedback-unit));
  padding-left: calc(12 * var(--feedback-unit));
  border-left: 1px solid #f2f2ef4d;
  white-space: nowrap;
}

#medal .medal-reward > b {
  font:
    400 calc(28 * var(--feedback-unit))/0.95 Barlow,
    sans-serif;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

#medal .medal-reward > small {
  color: var(--hud-gray);
  font:
    400 calc(12 * var(--feedback-unit))/1 Barlow,
    sans-serif;
  letter-spacing: 0.02em;
}

#hud.desktop-hud :is(#hit-score, #kill-confirmation) {
  position: absolute;
  left: calc(50% + var(--feedback-offset));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--feedback-unit));
  max-width: min(
    330px,
    calc((50vw - var(--feedback-offset) - 14px) / var(--hud-scale))
  );
  color: var(--hud-white);
  background: none;
  border: 0;
  padding: 0;
  text-shadow: 0 1px 3px #0007;
  transform: scale(var(--hud-scale));
  transform-origin: left center;
  pointer-events: none;
}

#hud.desktop-hud #kill-confirmation {
  top: 48%;
}

#hud.desktop-hud #hit-score {
  top: 55%;
  opacity: 0;
}

#hud :is(#hit-score, #kill-confirmation)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-6 * var(--feedback-unit));
  height: 1px;
  background: linear-gradient(90deg, #f2f2ef66, #f2f2ef00);
}

.score-amount {
  display: flex;
  align-items: baseline;
  gap: calc(3 * var(--feedback-unit));
  padding-right: calc(10 * var(--feedback-unit));
  border-right: 1px solid #f2f2ef4d;
  white-space: nowrap;
}

#kill-confirmation .kill-points {
  color: var(--hud-white);
  font:
    400 calc(34 * var(--feedback-unit))/0.95 Barlow,
    sans-serif;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

#hit-score strong {
  font:
    400 calc(27 * var(--feedback-unit))/0.95 Barlow,
    sans-serif;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.score-unit {
  color: var(--hud-gray);
  font:
    400 calc(11 * var(--feedback-unit))/1 Barlow,
    sans-serif;
  letter-spacing: 0.02em;
}

#kill-confirmation .kill-copy {
  display: grid;
  gap: calc(3 * var(--feedback-unit));
  min-width: 0;
}

#kill-confirmation .kill-copy > strong,
#hit-score > small {
  color: var(--hud-white);
  font:
    400 calc(13 * var(--feedback-unit))/1 Barlow,
    sans-serif;
  letter-spacing: 0.035em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#hud.desktop-hud #kill-confirmation .kill-copy > small {
  color: var(--hud-gray);
  font:
    500 calc(11 * var(--feedback-unit))/1.1 Rajdhani,
    sans-serif;
  margin: 0;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#hud.desktop-hud #reload-label {
  top: 65%;
  display: flex;
  align-items: center;
  gap: calc(11 * var(--feedback-unit));
  width: max-content;
  max-width: calc((100vw - 32px) / var(--hud-scale));
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--hud-white);
  text-shadow: 0 1px 3px #0007;
  transform: translateX(-50%) scale(var(--hud-scale));
  transform-origin: top center;
  pointer-events: none;
}

#reload-label[hidden] {
  display: none !important;
}

.reload-dial {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(44 * var(--feedback-unit));
  height: calc(44 * var(--feedback-unit));
  filter: drop-shadow(0 1px 2px #0006);
}

.reload-dial > .reload-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-width: 1.6;
}

.reload-ring-track {
  stroke: #f2f2ef3d;
}

.reload-ring-value {
  stroke: var(--hud-white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc((1 - var(--reload-progress, 0)) * 100px);
}

.reload-dial > .reload-symbol {
  width: 48%;
  height: 48%;
  filter: none;
}

.reload-copy {
  display: grid;
  gap: calc(4 * var(--feedback-unit));
  min-width: 0;
}

.reload-state {
  font:
    500 calc(16 * var(--feedback-unit))/1 Barlow,
    sans-serif;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.reload-time {
  color: var(--hud-gray);
  font:
    500 calc(13 * var(--feedback-unit))/1 Rajdhani,
    sans-serif;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

#reload-label:not([data-state="reloading"]) .reload-ring {
  display: none;
}

#reload-label:not([data-state="reloading"]) .reload-dial > .reload-symbol {
  width: 65%;
  height: 65%;
}

/* Bold inward arrow strokes, dark edges and an open center for the shot. */
#hud.desktop-hud #crosshair {
  filter: drop-shadow(0 1px 1px #0006);
}

#hud.desktop-hud #crosshair i {
  width: 5px;
  height: 11px;
  background: #0a1012e6;
  border: 0;
}

#hud.desktop-hud #crosshair i::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: #f2f2ef;
  clip-path: inherit;
}

#hud.desktop-hud #crosshair i:nth-child(1) {
  left: -2.5px;
  top: auto;
  right: auto;
  bottom: var(--gap);
  clip-path: polygon(0 0, 50% 12%, 100% 0, 100% 65%, 50% 100%, 0 65%);
}

#hud.desktop-hud #crosshair i:nth-child(2) {
  left: -2.5px;
  top: var(--gap);
  right: auto;
  bottom: auto;
  height: 8px;
  clip-path: polygon(50% 0, 100% 35%, 100% 100%, 50% 82%, 0 100%, 0 35%);
}

#hud.desktop-hud #crosshair i:nth-child(3) {
  left: auto;
  top: -2.5px;
  right: var(--gap);
  bottom: auto;
  width: 11px;
  height: 5px;
  clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%, 12% 50%);
}

#hud.desktop-hud #crosshair i:nth-child(4) {
  left: var(--gap);
  top: -2.5px;
  right: auto;
  bottom: auto;
  width: 11px;
  height: 5px;
  clip-path: polygon(100% 0, 35% 0, 0 50%, 35% 100%, 100% 100%, 88% 50%);
}

#hud.desktop-hud #crosshair b {
  width: 5px;
  height: 5px;
  border: 1px solid #0a1012e6;
  border-radius: 50%;
  rotate: 0deg;
  background: #f2f2ef;
  left: -2.5px;
  top: -2.5px;
}

#hud.touch-hud #touch-aim > svg {
  stroke-width: 1.2;
  fill: none;
  overflow: visible;
}

#hud.touch-hud #touch-aim.is-active > svg {
  stroke-width: 1.7;
  filter: drop-shadow(0 0 3px #fff4);
}

@media (max-width: 700px) {
  #toast {
    right: 16px;
    bottom: 20px;
    padding: 12px 14px;
    gap: 10px;
  }

  #toast[data-context="combat"] {
    right: 16px;
    bottom: 170px;
    width: min(280px, calc(100vw - 32px));
  }

  #hud.desktop-hud {
    --feedback-offset: 26px;
  }

  #hud.desktop-hud #medal {
    gap: calc(8 * var(--feedback-unit));
  }

  #medal .medal-reward {
    padding-left: calc(8 * var(--feedback-unit));
  }
}

@media (max-height: 550px) and (orientation: landscape) {
  #toast[data-context="combat"] {
    bottom: 145px;
    width: 250px;
  }

  #hud.desktop-hud #medal {
    top: 17%;
  }

  #hud.desktop-hud #reload-label {
    top: 63%;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  #hud.touch-hud #medal {
    top: 29%;
  }

  #hud.touch-hud #reload-label {
    top: 59.5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #toast {
    transition: none;
  }
}

/* Health alone carries a progressive white -> amber -> red damage signal. */
#hud .health-row i {
  transition:
    width 0.18s ease-out,
    background-color 0.2s ease-out;
}

#hud .health-row > b {
  color: var(--health-color, #f2f2ef);
  transition: color 0.2s ease-out;
}

#hud .health-row[data-health="critical"] > small,
#hud .health-row[data-health="warning"] > small {
  color: var(--health-color, #f2f2ef);
}

@media (prefers-reduced-motion: reduce) {
  #hud .health-row i,
  #hud .health-row > b {
    transition: none;
  }
}