.field-radio-hud {
  position: fixed;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 9;
  width: min(142px, 26vw);
  display: grid;
  gap: 8px;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.45));
}

.field-radio-hud.hidden {
  display: none;
}

.field-radio-device svg {
  display: block;
  width: 100%;
  height: auto;
}

.field-radio-device .radio-antenna {
  fill: none;
  stroke: #070906;
  stroke-width: 4;
  stroke-linecap: round;
}

.field-radio-device .radio-body {
  stroke: #070906;
  stroke-width: 3;
}

.field-radio-device .radio-screen {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 2;
}

.field-radio-device .radio-screen-text {
  fill: #172111;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.field-radio-device .radio-knob,
.field-radio-device .radio-speaker,
.field-radio-device .radio-ptt {
  fill: #10160d;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.field-radio-device .radio-led {
  fill: #ffd166;
  filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.85));
}

.field-radio-hud.transmitting .radio-led {
  animation: field-radio-blink 0.42s steps(2, start) infinite;
}

.field-radio-hud.failed .radio-led {
  fill: #ff6b5e;
}

.field-radio-hud.failed .field-radio-readout strong {
  color: #ff6b5e;
}

.field-radio-hud.failed .field-radio-readout em {
  background: #ff6b5e;
}

.field-radio-readout {
  display: grid;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 209, 102, 0.25);
  border-radius: 6px;
  background: rgba(8, 13, 11, 0.78);
  color: #edf4ef;
  font-size: 10px;
  font-weight: 900;
}

.field-radio-readout strong {
  color: #ffd166;
  font-size: 12px;
}

.field-radio-readout span {
  color: rgba(237, 244, 239, 0.74);
}

.field-radio-readout i {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(237, 244, 239, 0.13);
}

.field-radio-readout em {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd166, #8fded0);
}

@keyframes field-radio-blink {
  50% {
    opacity: 0.25;
  }
}