.hud {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Above the thumb layer (z-index 40) but below the upgrade panel (45).
       The joystick's drag zone is deliberately huge and invisible, so on
       short landscape screens it would otherwise overlap the top HUD and
       eat taps meant for the pause button and the minimap. The HUD layer
       itself is pointer-events: none, so only its own controls (pause
       button, minimap) capture input. */
    z-index: 42;
    display: none;
    overflow: hidden;
}

.hud.active {
    display: block;
}

/* The top HUD is a single flex column: status row first, then the
   stacked banners. Flow layout means banners can never overlap the row
   or each other, whatever the font scale or safe-area insets are. */
.hud-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.8vh, 8px);
    padding: calc(8px + var(--safe-t)) calc(8px + var(--safe-r)) 0 calc(8px + var(--safe-l));
    max-width: 100%;
}

.hud-top-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 6px;
    width: 100%;
    max-width: 100%;
}

.hud-top-left {
    justify-self: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: clamp(90px, 24vw, 210px);
    min-width: 0;
}

.hud-top-center {
    justify-self: center;
    text-align: center;
    min-width: 0;
}

.hud-top-right {
    justify-self: end;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    max-width: 40%;
    min-width: 0;
}

.hud-banners {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.8vh, 8px);
    width: 100%;
}

.hud-bottom {
    position: absolute;
    bottom: calc(10px + var(--safe-b));
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: min(220px, 42vw);
}

.hud-bar-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.hud-bar-label {
    font-size: clamp(8px, min(1.9vw, 1.1vh), 10px);
    letter-spacing: 2px;
    color: var(--text-dim);
    font-weight: 600;
    white-space: nowrap;
}

.hud-bar {
    width: 100%;
    height: clamp(10px, min(2.4vh, 1.5vw), 16px);
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.08);
}

.hud-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.2s ease;
    position: relative;
    min-width: 0;
}

.shield-fill {
    background: linear-gradient(90deg, #0066cc, var(--shield-color));
    box-shadow: 0 0 6px rgba(0, 170, 255, 0.4);
}

.health-fill {
    background: linear-gradient(90deg, #cc2244, var(--health-color));
    box-shadow: 0 0 6px rgba(255, 68, 102, 0.4);
}

.energy-fill {
    background: linear-gradient(90deg, #cc8800, var(--energy-color));
    box-shadow: 0 0 6px rgba(255, 204, 0, 0.4);
}

.hud-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(8px, min(1.7vw, 1.2vh), 10px);
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.hud-score, .hud-crystals, .hud-level, .hud-weapon {
    font-size: clamp(8px, min(1.9vw, 1.1vh), 11px);
    letter-spacing: 2px;
    color: var(--text-dim);
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
}

.hud-score span, .hud-crystals span, .hud-level span, .hud-weapon span {
    font-size: clamp(12px, min(4.4vw, 2.8vh), 22px);
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
}

.hud-crystals span {
    color: var(--crystal-color);
}

.hud-level span {
    color: var(--warning);
}

.hud-weapon span {
    color: var(--primary);
}

.hud-wave {
    font-size: clamp(8px, min(2.4vw, 1.4vh), 13px);
    letter-spacing: 3px;
    color: var(--primary);
    margin-top: 4px;
    font-weight: 600;
}

.hud-combo {
    font-size: clamp(9px, min(2.7vw, 1.6vh), 15px);
    letter-spacing: 2px;
    color: var(--warning);
    margin-top: 4px;
    font-weight: 700;
    animation: comboPulse 0.3s ease;
}

@keyframes comboPulse {
    0% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.hud-energy-label {
    font-size: clamp(8px, min(1.8vw, 1.1vh), 10px);
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-top: 3px;
    font-weight: 600;
}

.minimap {
    position: absolute;
    bottom: calc(12px + var(--safe-b));
    right: calc(12px + var(--safe-r));
    width: var(--minimap-size, 150px);
    height: var(--minimap-size, 150px);
    max-width: 40vw;
    max-height: 34vh;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: rgba(5, 8, 20, 0.7);
    pointer-events: auto;
}

.energy-bar {
    width: 100%;
    height: clamp(6px, min(1.6vh, 1.2vw), 10px);
}

.hud-objective {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: clamp(4px, 0.9vh, 7px) clamp(8px, 2.4vw, 16px);
    background: rgba(10, 14, 30, 0.75);
    border: 1px solid rgba(255, 221, 0, 0.3);
    border-radius: 6px;
    font-size: clamp(8px, min(2.2vw, 1.4vh), 12px);
    letter-spacing: 2px;
    color: #ffdd00;
    font-weight: 600;
    white-space: nowrap;
    max-width: min(86%, 560px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.hud-obj-icon {
    font-size: clamp(10px, min(2.6vw, 1.7vh), 15px);
    color: #ffdd00;
    text-shadow: 0 0 8px rgba(255, 221, 0, 0.5);
    flex: 0 0 auto;
}

.hud-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: clamp(4px, 0.9vh, 7px) clamp(8px, 2.4vw, 16px);
    background: rgba(255, 30, 30, 0.2);
    border: 1px solid rgba(255, 50, 50, 0.5);
    border-radius: 6px;
    font-size: clamp(8px, min(2.4vw, 1.5vh), 13px);
    letter-spacing: 3px;
    color: #ff4444;
    font-weight: 700;
    white-space: nowrap;
    max-width: min(86%, 560px);
    overflow: hidden;
    animation: alertPulse 0.6s ease infinite alternate;
}

.hud-alert-icon {
    font-size: clamp(10px, min(2.6vw, 1.7vh), 16px);
    font-weight: 900;
    color: #ff3333;
    flex: 0 0 auto;
}

@keyframes alertPulse {
    0% { background: rgba(255, 30, 30, 0.15); border-color: rgba(255, 50, 50, 0.4); }
    100% { background: rgba(255, 30, 30, 0.35); border-color: rgba(255, 50, 50, 0.8); }
}

/* Banners stack in normal flow, so no boss-active offsets are needed. */
.hud-ability-bar {
    position: absolute;
    bottom: calc(40px + var(--safe-b));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    pointer-events: auto;
    max-width: 96%;
    flex-wrap: nowrap;
}

.ability-slot {
    width: clamp(34px, min(9.5vw, 12vh), 62px);
    height: clamp(42px, min(12vw, 15vh), 74px);
    background: rgba(10, 14, 30, 0.8);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
    cursor: pointer;
    padding: 2px;
    flex: 0 0 auto;
}

.ability-slot:hover {
    border-color: rgba(255,255,255,0.3);
}

.ability-slot.on-cooldown {
    border-color: rgba(255,255,255,0.05);
    opacity: 0.6;
}

.ability-slot.no-energy {
    opacity: 0.35;
}

.ability-icon {
    font-size: clamp(9px, min(2.2vw, 1.3vh), 14px);
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 2;
    line-height: 1;
}

.ability-key {
    font-size: clamp(8px, min(1.8vw, 1.15vh), 10px);
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-top: 1px;
    z-index: 2;
}

.ability-cooldown {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.6);
    color: #ffffff;
    font-size: clamp(8px, min(2.1vw, 1.3vh), 12px);
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.1s;
    z-index: 1;
}

.ability-name {
    font-size: clamp(7px, min(1.4vw, 0.95vh), 9px);
    color: var(--text-dim);
    letter-spacing: 0.5px;
    margin-top: 2px;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    max-width: 100%;
    z-index: 2;
}

.ability-energy {
    font-size: clamp(7px, min(1.6vw, 1.05vh), 9px);
    color: var(--energy-color);
    letter-spacing: 0.5px;
    z-index: 2;
}