/*
 * CC_081 P3 — Hazard Indicator Styles
 * Badge-Styling fuer aktive Umweltgefahren im globalen Header.
 */

/* ── Hazard Bar Container ──────────────────────────────────────────────── */
.hazard-bar {
    display: flex;
    gap: 8px;
    padding: 2px 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Hazard Badge Base ─────────────────────────────────────────────────── */
.hazard-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

/* ── Hazard Icon ───────────────────────────────────────────────────────── */
.hazard-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Type-specific Colour Schemes ──────────────────────────────────────── */
.hazard-nebula {
    background: #2244aa;
    color: #aaccff;
}

.hazard-ion-storm {
    background: #664400;
    color: #ffcc44;
    animation: hazard-flicker 0.5s infinite;
}

.hazard-gravity-well {
    background: #440066;
    color: #cc88ff;
}

.hazard-radiation {
    background: #446600;
    color: #ccff44;
}

.hazard-asteroids {
    background: #663300;
    color: #ffaa66;
}

.hazard-minefield {
    background: #660011;
    color: #ff6677;
}

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes hazard-flicker {
    50% { opacity: 0.6; }
}