#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)}
.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));background-image:url('../assets/relay-surges/relay-states.png');background-size:300% 100%;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:600px) and (min-height:501px){#relaySurgeHud{top:132px;left:8px;transform:none;max-width:calc(100vw - 166px);box-sizing:border-box}}