.hud {
    visibility: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 999;
    bottom: 0;
    position: absolute;
    height: 320px;
    width: 100%;
    background: linear-gradient(to top, rgba(0,8,0,0.85) 0%, transparent 100%);
}

.hud-container {
    display: flex;
    flex-direction: row;
    width: 85%;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 12px;
    gap: 10px;
}

/* ── Imperial panel base ── */
.panel {
    background: #050d05;
    border: 1px solid #1a3a1a;
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    padding: 10px 16px;
    flex: 1;
    font-family: 'Courier New', monospace;
    position: relative;
}

.panel-title {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    color: #3a7a3a;
    margin-bottom: 8px;
    text-align: center;
    border-bottom: 1px solid #1a3a1a;
    padding-bottom: 5px;
    text-shadow: 0 0 6px #1a5a1a;
}

/* ── Segmented bars ── */
.bar-label {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #3a7a3a;
    margin-bottom: 3px;
    text-align: center;
}

.segmented-bar {
    display: flex;
    flex-direction: row;
    gap: 2px;
    margin-bottom: 6px;
}

.segment {
    flex: 1;
    height: 10px;
    background-color: #0d1a0d;
    border: 1px solid #1a3a1a;
    transition: background-color 0.2s ease;
}

/* Shields – blue */
#shield-bar .segment.active,
#target-shield-bar .segment.active {
    background-color: #00aaff;
    border-color: #00aaff;
    box-shadow: 0 0 4px #00aaff;
}

/* Hull – green → amber → red */
#hull-bar .segment.active {
    background-color: #00cc44;
    border-color: #00cc44;
    box-shadow: 0 0 4px #00cc44;
}

#hull-bar .segment.active.warning {
    background-color: #aacc00;
    border-color: #aacc00;
    box-shadow: 0 0 4px #aacc00;
}

#hull-bar .segment.active.critical {
    background-color: #cc2200;
    border-color: #cc2200;
    box-shadow: 0 0 6px #cc2200;
    animation: flicker 0.7s infinite alternate;
}

/* Target hull */
#target-hull-bar .segment.active {
    background-color: #cc6600;
    border-color: #cc6600;
    box-shadow: 0 0 4px #cc6600;
}

#target-hull-bar .segment.active.warning {
    background-color: #aacc00;
    border-color: #aacc00;
}

#target-hull-bar .segment.active.critical {
    background-color: #cc2200;
    border-color: #cc2200;
    animation: flicker 0.7s infinite alternate;
}

#target-shield-bar .segment,
#target-hull-bar .segment {
    height: 18px;
}

#target-shield-bar,
#target-hull-bar {
    gap: 3px;
}
.segmented-bar.hit .segment.active {
    animation: flash-hit 0.25s ease-out;
}

@keyframes flash-hit {
    0%   { filter: brightness(4); }
    100% { filter: brightness(1); }
}

@keyframes flicker {
    0%   { opacity: 1; }
    100% { opacity: 0.3; }
}

/* ── Shields panel ── */
.shields {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 120px;
}

/* ── Target computer ── */
.target-computer-wrapper {
    position: relative;
    flex: 1.8;
    display: flex;
    flex-direction: column;
}

.targetComputer {
    width: 100%;
    height: 150px;
    background-color: #030d06;
    border: 1px solid #1a3a1a;
    margin-bottom: 6px;
    display: block;
}

.target-hud-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

#target-name {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    color: #cc6600;
    text-shadow: 0 0 6px #cc6600;
    margin-bottom: 4px;
    text-align: center;
}

/* ── Hull panel ── */
.hull {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 120px;
}

/* ── Readout line ── */
.panel-readout {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    color: #3a7a3a;
    text-align: center;
    margin-top: 4px;
}

.panel-readout span {
    color: #00cc44;
}

/* ── Mission toast (objective updates) ── */
.mission-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1500;
    background: #050d05;
    border: 1px solid #00cc44;
    box-shadow: 0 0 12px rgba(0,204,68,0.4);
    color: #00cc44;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 10px 24px;
    text-align: center;
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.mission-toast.visible {
    opacity: 1;
}

/* ── Dock prompt ── */
.dock-prompt {
    position: fixed;
    bottom: 340px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1500;
    background: #050d05;
    border: 1px solid #cc6600;
    box-shadow: 0 0 12px rgba(204,102,0,0.5);
    color: #cc6600;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 8px 20px;
    text-align: center;
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    animation: pulse-dock 1.5s infinite;
}

.dock-prompt .key {
    display: inline-block;
    border: 1px solid #cc6600;
    padding: 1px 6px;
    margin: 0 3px;
    color: #ffcc66;
    text-shadow: 0 0 6px #cc6600;
}

@keyframes pulse-dock {
    0%, 100% { box-shadow: 0 0 12px rgba(204,102,0,0.5); }
    50%      { box-shadow: 0 0 20px rgba(204,102,0,0.9); }
}