#relaySurgeHud{position:fixed;top:100px;left:50%;transform:translateX(-50%);z-index:16;display:flex;align-items:center;gap:var(--hud-space-2);max-width:min(602px,70vw);padding:calc(var(--hud-space-1)*1.75) calc(var(--hud-space-2)*1.75);border:var(--hud-border-width) solid var(--hud-accent);border-radius:var(--hud-radius);background:var(--hud-surface-overlay);color:var(--hud-accent);font:calc(var(--hud-text-xs)*var(--hud-event-scale))/var(--hud-leading) var(--hud-font-body);letter-spacing:normal;pointer-events:none;overflow-wrap:anywhere}
#relaySurgeHud[hidden]{display:none}
#relaySurgeHud[data-phase="2"]{border-color:var(--hud-focus);color:var(--hud-focus)}
#relaySurgeHud[data-phase="urgent"]{border-color:var(--hud-danger);color:var(--hud-danger)}
/* Idle chip between objectives: no border, muted ink, smaller icon, single line. */
#relaySurgeHud[data-phase="idle"]{border-color:transparent;background:var(--hud-surface-glass);color:var(--hud-text-muted);padding:var(--hud-space-1) var(--hud-space-2);gap:var(--hud-space-1);font-size:var(--hud-text-xs)}
#relaySurgeHud[data-phase="idle"] .relay-surge-icon{flex-basis:20px;width:20px;height:20px;opacity:.7}
#relaySurgeHud[data-phase="idle"] strong{font-weight:600}
.relay-surge-label small:empty{display:none}
.relay-surge-label{display:flex;flex-direction:column;gap:var(--hud-space-1);min-width:0}
.relay-surge-label small{font-size:var(--hud-text-xs);color:var(--hud-text-muted)}
.relay-surge-icon{display:inline-block;flex:0 0 calc(30px*var(--hud-event-scale));width:calc(30px*var(--hud-event-scale));height:calc(30px*var(--hud-event-scale));image-rendering:pixelated}
@media(max-width:700px){#relaySurgeHud{top:88px;max-width:65vw;padding:var(--hud-space-1) var(--hud-space-2);font-size:calc(var(--hud-text-xs)*1.12)}.relay-surge-icon{flex-basis:calc(var(--hud-space-6)*var(--hud-event-scale));width:calc(var(--hud-space-6)*var(--hud-event-scale));height:calc(var(--hud-space-6)*var(--hud-event-scale))}}
@media(max-height:500px){#relaySurgeHud{top:48px;max-width:44vw;font-size:calc(var(--hud-text-xs)*1.12);padding:var(--hud-space-1) var(--hud-space-2)}.relay-surge-icon{flex-basis:calc(22px*var(--hud-event-scale));width:calc(22px*var(--hud-event-scale));height:calc(22px*var(--hud-event-scale))}}
@media(max-width:700px) and (max-height:500px){body.touch #relaySurgeHud{top:calc(var(--sat,0px) + 60px);left:calc(var(--sal,0px) + 200px);transform:none;max-width:calc(100vw - 310px - var(--sal,0px) - var(--sar,0px));box-sizing:border-box}}
@media(max-width:600px) and (min-height:501px){#relaySurgeHud{top:132px;left:8px;transform:none;max-width:calc(100vw - 166px);box-sizing:border-box}}