/* HELLMODE concept expansion — does not alter the header or logo sizing. */

.hud-satellites {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.hud-mini {
    position: absolute;
    width: clamp(170px, 14vw, 250px);
    padding: 10px 12px;
    border: 1px solid rgba(255, 62, 20, 0.24);
    background: linear-gradient(135deg, rgba(255, 50, 14, 0.055), rgba(3, 3, 3, 0.72) 48%, rgba(3, 3, 3, 0.9));
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    box-shadow: inset 0 0 24px rgba(255, 40, 10, 0.025), 0 0 18px rgba(255, 42, 12, 0.035);
    color: rgba(255,255,255,.55);
    font-size: 8px;
    letter-spacing: .16em;
}

.hud-mini::before,
.hud-mini::after {
    content: "";
    position: absolute;
    background: var(--hm-red);
    box-shadow: var(--hm-glow);
}

.hud-mini::before { top: -1px; left: 10px; width: 34%; height: 1px; }
.hud-mini::after { right: -1px; bottom: 10px; width: 1px; height: 38%; }

.hud-mini header,
.hud-mini footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hud-mini header {
    padding-bottom: 7px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 72, 20, .13);
}

.hud-mini footer {
    margin-top: 8px;
    color: rgba(255,255,255,.38);
}

.hud-mini strong { color: var(--hm-orange); font-weight: 500; }

.hud-mini--upper-left { top: 7%; left: clamp(245px, 19vw, 360px); }
.hud-mini--upper-right { top: 7%; right: clamp(245px, 19vw, 360px); }
.hud-mini--lower-left { bottom: 9%; left: clamp(245px, 19vw, 360px); }
.hud-mini--lower-right { bottom: 9%; right: clamp(245px, 19vw, 360px); }

.hud-mini__bars {
    height: 42px;
    display: flex;
    align-items: end;
    gap: 5px;
}

.hud-mini__bars span {
    flex: 1;
    height: var(--level);
    min-height: 5px;
    background: repeating-linear-gradient(to top, var(--hm-red) 0 3px, transparent 3px 5px);
    filter: drop-shadow(0 0 4px rgba(255, 49, 17, .55));
}

.vector-grid {
    position: relative;
    height: 44px;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 4px;
    align-items: center;
}

.vector-grid i {
    height: 100%;
    border-left: 1px solid rgba(255, 76, 21, .18);
    transform: skewX(-14deg);
}

.vector-grid b {
    position: absolute;
    left: 12%; right: 6%; top: 50%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--hm-red), var(--hm-orange), transparent);
    box-shadow: 0 0 8px rgba(255, 60, 15, .7);
}

.queue-lines { display: grid; gap: 5px; }
.queue-lines span { display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: center; }
.queue-lines b { color: rgba(255,255,255,.28); font-weight: 400; }
.queue-lines i { color: var(--hm-red); font-style: normal; }

.power-routing {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    height: 34px;
}
.power-routing span {
    align-self: end;
    height: 70%;
    border: 1px solid rgba(255,62,18,.25);
    background: linear-gradient(to top, rgba(255,44,16,.42), rgba(255,99,20,.06));
}
.power-routing span:nth-child(2) { height: 100%; }
.power-routing span:nth-child(3) { height: 58%; }
.power-routing span:nth-child(4) { height: 84%; }

.hud-rail {
    position: absolute;
    top: 24%;
    bottom: 24%;
    width: 18px;
    display: grid;
    align-content: space-between;
}
.hud-rail--left { left: calc(50% - min(36vh, 340px, 24vw) - 38px); }
.hud-rail--right { right: calc(50% - min(36vh, 340px, 24vw) - 38px); }
.hud-rail span { height: 18%; border-left: 1px solid rgba(255,60,18,.28); border-top: 1px solid rgba(255,60,18,.18); }
.hud-rail--right span { border-left: 0; border-right: 1px solid rgba(255,60,18,.28); }

.hud-command-strip {
    position: absolute;
    left: 50%;
    bottom: 2.5%;
    transform: translateX(-50%);
    width: min(720px, 54vw);
    min-height: 44px;
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 7px 14px;
    border-top: 1px solid rgba(255,55,16,.25);
    border-bottom: 1px solid rgba(255,55,16,.12);
    background: linear-gradient(90deg, transparent, rgba(255,44,14,.035) 18%, rgba(255,44,14,.035) 82%, transparent);
    font-size: 8px;
    letter-spacing: .15em;
}
.hud-command-strip > div:not(.hud-command-strip__pulse) { display: grid; gap: 3px; }
.hud-command-strip span { color: rgba(255,255,255,.32); }
.hud-command-strip strong { color: var(--hm-orange); font-weight: 500; }
.hud-command-strip__pulse { height: 20px; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.hud-command-strip__pulse i { flex: 1; height: 1px; background: var(--hm-red); box-shadow: 0 0 6px rgba(255,47,14,.65); animation: hmStripPulse 1.8s ease-in-out infinite; }
.hud-command-strip__pulse i:nth-child(2) { animation-delay: .12s; }
.hud-command-strip__pulse i:nth-child(3) { animation-delay: .24s; }
.hud-command-strip__pulse i:nth-child(4) { animation-delay: .36s; }
.hud-command-strip__pulse i:nth-child(5) { animation-delay: .48s; }

@keyframes hmStripPulse {
    0%,100% { height: 1px; opacity: .22; }
    50% { height: 16px; opacity: .9; }
}

@media (max-width: 1320px) {
    .hud-mini { width: 165px; }
    .hud-mini--upper-left, .hud-mini--lower-left { left: 230px; }
    .hud-mini--upper-right, .hud-mini--lower-right { right: 230px; }
}

@media (max-width: 1100px), (max-height: 720px) {
    .hud-mini, .hud-rail { display: none; }
    .hud-command-strip { width: min(620px, 62vw); }
}