/* assets/css/hud.css
   Spiel-HUD im Design „Taktische Konsole", Variante B „Konsole"
   (docs/37_HUD_Bedienelemente_Konzept.md Kapitel 2, Mockup docs/mockups/hud/).

   Dasselbe Markup für alle Lagen: HUDTopBar setzt am Container `hud-pos-bottom|top|left|right`,
   seitlich zusätzlich `hud-side`. Der Container ist nur der Rahmen für Lage und Einklappen; Glas,
   abgeschrägte Innenecken und Leitlinie trägt `.hud-content` – `clip-path` am Container würde die
   Lasche abschneiden. Keine Rundungen (Guideline 3.3 „Formen").

   Alle Maße stehen als Tokens am HUD-Container und nicht in `:root`: Dialoge und Menü behalten
   so die globalen Tokens aus `global.css`. Einheiten: rem für Abstände und Größen, em nur für
   Schrift, die mit ihrer Umgebung skalieren soll, px für Rahmenlinien und Schatten. Alle Zahlen
   sind Beispielwerte (Konzept 37). */

/* ==========================================================================
   Container und Tokens
   ========================================================================== */

.hud-container {
    --hud-size: 15.5rem;
    --hud-size-side: 24rem;
    --hud-max-width: 93.75rem;
    --hud-bevel: 1.4rem;
    --hud-gap: 0.5rem;
    --hud-gap-tight: 0.3rem;
    --hud-pad-x: 1rem;
    --hud-divider: 1px solid var(--clr-border-light);
    --hud-slot-size: 5.35rem;
    --hud-slot-size-side: 5rem;
    --hud-slot-frame: 2px;
    --hud-line-label: 8.5rem;
    /* Zeitsteuerungsleiste: Anteil an Breite bzw. Höhe des HUD, Dicke unten/oben und seitlich */
    --hud-timebar-share: 50%;
    --hud-timebar-size: 1.75rem;
    --hud-timebar-size-side: 2.5rem;
    --hud-timebar-bevel: 0.7rem;

    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    font-family: var(--font-regular);
    color: var(--clr-text-primary);
    transition: transform 0.2s ease-out;
}

/* `hidden` muss auch gegen `display: grid/flex` der Klassen gewinnen */
.hud-container [hidden] {
    display: none !important;
}

/* --- Unten (Standard): Band über die Breite --- */

.hud-container.hud-pos-bottom {
    bottom: 0;
    left: 50%;
    width: var(--hud-max-width);
    max-width: 95vw;
    height: var(--hud-size);
    transform: translateX(-50%);
}

.hud-container.hud-pos-bottom.collapsed {
    transform: translate(-50%, 100%);
}

/* --- Oben: wie unten, gespiegelt --- */

.hud-container.hud-pos-top {
    top: 0;
    left: 50%;
    width: var(--hud-max-width);
    max-width: 95vw;
    height: var(--hud-size);
    transform: translateX(-50%);
}

.hud-container.hud-pos-top.collapsed {
    transform: translate(-50%, -100%);
}

/* --- Seitlich links oder rechts: volle Höhe, so breit wie unten ein Seitenpanel --- */

.hud-container.hud-side {
    top: 0;
    width: var(--hud-size-side);
    max-width: 95vw;
    height: 100vh;
}

.hud-container.hud-pos-left {
    left: 0;
}

.hud-container.hud-pos-right {
    right: 0;
}

.hud-container.hud-pos-left.collapsed {
    transform: translateX(-100%);
}

.hud-container.hud-pos-right.collapsed {
    transform: translateX(100%);
}

/* ==========================================================================
   Zeitsteuerungsleiste an der Innenkante (docs/39_Zeitsteuerung.md, Kapitel 5): Trapez mit der
   Lasche zum Ein- und Ausklappen (Pfeil), Pause, Geschwindigkeit, dem Schalter „Zeitraffer endet
   beim Treffer" und dem Verlauf des Levels. Sie nimmt `--hud-timebar-share` der Breite (unten/oben) bzw. der Höhe (seitlich) des
   HUD ein; die Progressbar füllt den Rest. Bei eingeklapptem HUD bleibt sie sichtbar.
   Der Pfeil der Lasche kommt als Klasse aus HUDPosition.ANCHOR_ICONS.
   ========================================================================== */

.hud-anchor {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    box-sizing: border-box;
    background: var(--clr-surface-main);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--clr-text-primary);
    font-size: 0.75rem;
}

/* Knöpfe der Leiste sind Schlicht-Buttons; hier nur Maß und Farbe auf dem Glas. Tasten stehen
   nicht als Kappe daneben, sondern im Tooltip (HUDKeyHints, `data-hotkey-title`). */
.hud-anchor .btn-plain {
    flex: 0 0 auto;
    min-width: 1.5rem;
    min-height: 1.5rem;
    color: var(--clr-text-primary);
    font-size: inherit;
}

.hud-anchor .btn-plain:hover:not(:disabled),
.hud-anchor .btn-plain.is-active {
    color: var(--clr-primary-main);
}

/* Aktuelle Geschwindigkeit (Klick: zurück auf 1x); feste Breite, damit die Leiste nicht springt */
.hud-anchor .hud-speed-value {
    min-width: 2.1rem;
    font-family: var(--font-narrow);
    font-size: 0.95rem;
    font-weight: 700;
}

/* Schalter „Zeitraffer endet beim Treffer" (Einstellung `speedResetOnHit`): Wecker neben der
   Schiene, vor dem Verlauf; die Erklärung steht im Tooltip. An ist der Wecker orange wie ein
   gedrückter Knopf der Leiste. */
.hud-anchor .switch {
    flex: 0 0 auto;
    gap: 0.35rem;
    margin: 0 0.25rem;
}

.hud-anchor .switch-label {
    overflow: visible;
}

.hud-anchor .switch:hover .switch-label,
.hud-anchor .switch input:checked ~ .switch-label {
    color: var(--clr-primary-main);
}

/* Verlauf des Levels: ohne Zahl; grau, wenn er sich für das Level nicht bestimmen lässt.
   Den Wert (0..1) schreibt HUDTimeBar als `--hud-progress` an das Element. */
.hud-progress {
    flex: 1 1 auto;
    min-width: 0;
    height: 0.4rem;
    overflow: hidden;
    background: var(--clr-secondary-subtle);
}

.hud-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--clr-primary-main);
    transform: scaleX(var(--hud-progress));
    transform-origin: left center;
    transition: transform 0.25s linear;
}

.hud-progress.is-unavailable {
    background: var(--clr-shade-15);
}

.hud-progress.is-unavailable .hud-progress-fill {
    visibility: hidden;
}

.hud-pos-bottom .hud-anchor,
.hud-pos-top .hud-anchor {
    left: 50%;
    width: var(--hud-timebar-share);
    height: var(--hud-timebar-size);
    padding: 0 calc(var(--hud-timebar-bevel) + 0.5rem);
    transform: translateX(-50%);
}

.hud-pos-bottom .hud-anchor {
    top: calc(-1 * var(--hud-timebar-size));
    clip-path: polygon(var(--hud-timebar-bevel) 0, calc(100% - var(--hud-timebar-bevel)) 0, 100% 100%, 0 100%);
}

.hud-pos-top .hud-anchor {
    bottom: calc(-1 * var(--hud-timebar-size));
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--hud-timebar-bevel)) 100%, var(--hud-timebar-bevel) 100%);
}

/* Seitlich: Leiste hochkant und breiter, damit Knöpfe und Wert hineinpassen; der Verlauf läuft
   von oben nach unten */
.hud-side .hud-anchor {
    top: 50%;
    flex-direction: column;
    width: var(--hud-timebar-size-side);
    height: var(--hud-timebar-share);
    padding: calc(var(--hud-timebar-bevel) + 0.5rem) 0;
    transform: translateY(-50%);
}

/* Seitlich steht der Wecker über der Schiene */
.hud-side .hud-anchor .switch {
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.25rem 0;
}

.hud-side .hud-progress {
    width: 0.4rem;
    height: auto;
    min-height: 0;
}

.hud-side .hud-progress-fill {
    transform: scaleY(var(--hud-progress));
    transform-origin: center top;
}

.hud-pos-right .hud-anchor {
    left: calc(-1 * var(--hud-timebar-size-side));
    clip-path: polygon(0 var(--hud-timebar-bevel), 100% 0, 100% 100%, 0 calc(100% - var(--hud-timebar-bevel)));
}

.hud-pos-left .hud-anchor {
    right: calc(-1 * var(--hud-timebar-size-side));
    clip-path: polygon(0 0, 100% var(--hud-timebar-bevel), 100% calc(100% - var(--hud-timebar-bevel)), 0 100%);
}

/* ==========================================================================
   Glasfläche: abgeschrägte Innenecken, Leitlinie Orange → Petrol an der Innenkante
   (wie unter der Kopfleiste des Menüs). Drei Panels nebeneinander (unten/oben) bzw.
   untereinander (seitlich).
   ========================================================================== */

.hud-content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    height: 100%;
    padding: 0.8rem 0 0.65rem;
    box-sizing: border-box;
    background: var(--clr-surface-main);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hud-content::before {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.hud-pos-bottom .hud-content {
    clip-path: polygon(var(--hud-bevel) 0, calc(100% - var(--hud-bevel)) 0, 100% var(--hud-bevel), 100% 100%, 0 100%, 0 var(--hud-bevel));
}

.hud-pos-top .hud-content {
    padding: 0.65rem 0 0.8rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hud-bevel)), calc(100% - var(--hud-bevel)) 100%, var(--hud-bevel) 100%, 0 calc(100% - var(--hud-bevel)));
}

.hud-pos-bottom .hud-content::before,
.hud-pos-top .hud-content::before {
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--clr-primary-main), var(--clr-secondary-main));
}

.hud-pos-bottom .hud-content::before {
    top: 0;
}

.hud-pos-top .hud-content::before {
    bottom: 0;
}

.hud-pos-right .hud-content {
    clip-path: polygon(var(--hud-bevel) 0, 100% 0, 100% 100%, var(--hud-bevel) 100%, 0 calc(100% - var(--hud-bevel)), 0 var(--hud-bevel));
}

.hud-pos-left .hud-content {
    clip-path: polygon(0 0, calc(100% - var(--hud-bevel)) 0, 100% var(--hud-bevel), 100% calc(100% - var(--hud-bevel)), calc(100% - var(--hud-bevel)) 100%, 0 100%);
}

.hud-side .hud-content::before {
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--clr-primary-main), var(--clr-secondary-main));
}

.hud-pos-right .hud-content::before {
    left: 0;
}

.hud-pos-left .hud-content::before {
    right: 0;
}

/* Panels: gleicher Innenabstand, die Trennlinie gehört zum Panel */
.hud-panel {
    display: flex;
    flex-direction: column;
    gap: var(--hud-gap);
    min-width: 0;
    min-height: 0;
    padding: 0 var(--hud-pad-x);
}

.hud-panel + .hud-panel {
    border-left: var(--hud-divider);
}

/* Ansichten des Hauptpanels: genau eine ist aktiv (HUDController.showMainView) */
.hud-view {
    display: none;
    flex-direction: column;
    gap: var(--hud-gap);
    flex: 1;
    min-height: 0;
}

.hud-view.active {
    display: flex;
}

/* ==========================================================================
   Bausteine aus dem Menü: Beschriftung, großer Titel, Kennung, Tasten, Werte-Kästchen, Segmente
   ========================================================================== */

.hud-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hud-gap);
    flex-shrink: 0;
    min-height: 1.2rem;
}

/* Bereichs-Beschriftung wie `.menu-tile-label` */
.hud-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--clr-secondary-main);
}

.hud-label::before {
    content: '';
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.45rem;
    background: var(--clr-primary-main);
    vertical-align: 0.05rem;
}

.hud-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    white-space: nowrap;
    color: var(--clr-text-muted);
}

.hud-head-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--hud-gap-tight);
}

.hud-big {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-family: var(--font-narrow);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--clr-secondary-main);
}

.hud-head .hud-big {
    font-size: 1.5rem;
}

.hud-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hud-title-text.is-boss {
    color: var(--clr-primary-main);
}

/* Kopf eines Inspektors: Bild, Name, Kennung */
.hud-sector {
    display: flex;
    align-items: center;
    gap: var(--hud-gap);
    min-width: 0;
}

.tower-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    overflow: hidden;
}

.tower-icon:empty {
    display: none;
}

.tower-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Kennung wie `.menu-code` (Stufe des Turms, Turm-Auftrag) */
.hud-code {
    flex-shrink: 0;
    padding: 0 0.3rem;
    border: 2px solid var(--clr-secondary-main);
    font-family: var(--font-narrow);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--clr-secondary-main);
}

/* Taste aus der Belegung (HUDKeyHints); leer = nicht belegt, dann ausgeblendet */
.hud-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    border: 1px solid var(--clr-border-light);
    border-bottom-width: 2px;
    border-radius: 3px;
    background: var(--clr-surface-subcard);
    font-family: var(--font-regular);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    color: var(--clr-text-muted);
}

.hud-key:empty {
    display: none;
}

/* Taste auf einem farbigen Knopf: hell */
.hud-container .btn .hud-key {
    border-color: var(--clr-surface-border);
    background: transparent;
    color: var(--clr-text-light);
}

/* Werte-Kästchen wie `.menu-readout` */
.hud-reads {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

.hud-reads.hud-reads-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
}

.hud-read {
    min-width: 0;
    padding: 0.3rem 0.5rem 0.35rem;
    box-sizing: border-box;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-dark);
}

.hud-read > small {
    display: block;
    overflow: hidden;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--clr-text-muted);
}

.hud-read > b {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.6rem;
    overflow: hidden;
    font-family: var(--font-narrow);
    font-size: 1.45rem;
    line-height: 1;
    white-space: nowrap;
}

/* Zusatz im Kästchen (Gesamtschaden über alle Level): kürzt sich, die volle Angabe steht im
   Tooltip des Werts */
.hud-read > b .stat-info {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-regular);
    font-size: 0.7rem;
    font-weight: 600;
    text-overflow: ellipsis;
    color: var(--clr-text-muted);
}

.hud-read-detail {
    font-family: var(--font-regular);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--clr-text-muted);
}

.hud-read-act {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.hud-credits {
    color: var(--clr-primary-text);
}

.hud-credits i {
    font-size: 0.75em;
}

.hud-lp {
    color: var(--clr-status-success-text);
}

/* Wertepaar HP/SP in einem Kästchen (Creep-Inspektor) */
.hud-pair-key {
    font-family: var(--font-regular);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--clr-text-muted);
}

.hud-pair-key:not(:first-child) {
    margin-left: 0.35rem;
}

/* Level als Segmente: geschafft Petrol, aktuell Orange, offen grau */
.hud-level {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.hud-level b {
    font-family: var(--font-narrow);
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--clr-text-primary);
}

.hud-segs {
    display: flex;
    gap: 0.2rem;
}

.hud-segs span {
    flex: 1;
    height: 0.4rem;
    background: var(--clr-shade-15);
}

.hud-segs .is-done {
    background: var(--clr-secondary-main);
}

.hud-segs .is-now {
    background: var(--clr-primary-main);
}

.hud-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

.hud-foot b {
    font-family: var(--font-narrow);
    font-size: 0.95rem;
    color: var(--clr-text-primary);
}

.hud-container .stat-info {
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.8;
}

/* Werte, auf die ein Modul oder ein Event wirkt (Entscheidung F3.2). Der Tooltip mit der
   Aufschlüsselung hängt am selben Element, deshalb der Hilfe-Zeiger. */
.hud-container .stat-modified {
    color: var(--clr-primary-text);
    cursor: help;
}

.hud-value-detail {
    font-size: 0.85em;
    font-weight: normal;
}

/* ==========================================================================
   Baumenü: acht Turm-Slots (4 × 2), abgesetzt daneben zwei Skill-Slots, dann Module,
   Turmplätze, Build Ships
   ========================================================================== */

.hud-build-layout {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "towers skills info";
    gap: 0.8rem;
    flex: 1;
    min-height: 0;
}

.build-grid {
    grid-area: towers;
    display: grid;
    grid-template-columns: repeat(4, var(--hud-slot-size));
    grid-auto-rows: var(--hud-slot-size);
    gap: var(--hud-gap-tight);
    align-content: center;
}

.build-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 80ms linear, box-shadow 80ms linear;
}

/* Klicks sollen am Slot ankommen, nicht an Bild oder Balken (Ausnahme: .slot-info) */
.build-slot * {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.build-slot img {
    max-width: 58%;
    max-height: 58%;
    object-fit: contain;
}

.build-slot .slot-bar {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    line-height: 1;
}

/* Oben: Taste links, Info-Knopf rechts */
.build-slot .slot-bar-top {
    top: 0.2rem;
    padding: 0 0.25rem 0 0.2rem;
    font-size: 0.72rem;
    color: var(--clr-text-muted);
}

/* Unten: Preis bzw. Sperrhinweis. Farbe (Konzept 37, 2.3): grün = verfügbar und leistbar,
   rot = verfügbar, aber zu teuer, grau = noch nicht verfügbar. Um die Rahmenstärke eingerückt:
   Der orange Rahmen (Hover, gewählt) ist ein innerer Schatten und läge sonst unter dem Balken. */
.build-slot .slot-bar-bottom {
    left: var(--hud-slot-frame);
    right: var(--hud-slot-frame);
    bottom: var(--hud-slot-frame);
    justify-content: center;
    gap: 0.25rem;
    padding: 0.1rem 0;
    background: var(--clr-surface-main);
    font-family: var(--font-narrow);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--clr-status-success-text);
}

.build-slot .slot-bar-bottom i {
    font-size: 0.75em;
}

/* Info-Knopf eines Bau-Slots (Schlicht-Button) braucht als einziges Element die Klicks selbst */
.build-slot .slot-info {
    padding: 0;
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
}

.build-slot .slot-info:hover:not(:disabled) {
    color: var(--clr-primary-main);
}

.build-slot:not(.locked):not(.empty):hover,
.build-slot.active {
    background: var(--clr-surface-input);
    box-shadow: inset 0 0 0 var(--hud-slot-frame) var(--clr-primary-main);
}

/* Gewählter Turm: orange Ecke oben rechts */
.build-slot.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1rem;
    height: 1rem;
    background: linear-gradient(225deg, var(--clr-primary-main) 50%, transparent 50%);
}

.build-slot.unaffordable {
    cursor: not-allowed;
    pointer-events: none;
}

.build-slot.unaffordable img {
    opacity: 0.35;
    filter: grayscale(1);
}

.build-slot.unaffordable .slot-bar-bottom {
    color: var(--clr-status-danger);
}

.build-slot.locked {
    cursor: not-allowed;
}

.build-slot.locked img {
    opacity: 0.25;
    filter: grayscale(1);
}

.build-slot.locked .slot-bar-bottom {
    color: var(--clr-text-muted);
}

.build-slot.empty {
    border-style: dashed;
    background: transparent;
    cursor: default;
}

/* Skills: zwei eigene Slots neben den Türmen, noch ohne Funktion. Sie sehen vorerst aus wie
   leere Bau-Slots, haben aber eigene Regeln – nichts hier hängt an `.build-slot`. */
.skill-grid {
    grid-area: skills;
    display: grid;
    grid-template-columns: var(--hud-slot-size);
    grid-auto-rows: var(--hud-slot-size);
    gap: var(--hud-gap-tight);
    align-content: center;
}

.skill-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
    user-select: none;
    -webkit-user-select: none;
}

.skill-slot.empty {
    border-style: dashed;
    background: transparent;
    cursor: default;
}

.hud-info-area {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--hud-gap-tight);
    min-width: 0;
}

.hud-info-area .hud-read > b {
    min-height: 1.35rem;
    font-size: 1.2rem;
}

/* ==========================================================================
   Inspektoren (Turm und Creep)
   ========================================================================== */

.hud-inspector-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.hud-inspector-layout > * {
    min-width: 0;
}

.hud-inspector-layout > * + * {
    padding-left: 1rem;
    border-left: var(--hud-divider);
}

.hud-inspector-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--hud-gap-tight);
}

.hud-inspector-main .hud-read > b {
    min-height: 1.35rem;
    font-size: 1.2rem;
}

/* Zeile: Beschriftung · Regler bzw. Auswahl · Wert */
.hud-line {
    display: grid;
    grid-template-columns: var(--hud-line-label) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    min-height: 1.45rem;
}

.hud-line > .label {
    overflow: hidden;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--clr-text-muted);
}

.hud-line > .value {
    font-family: var(--font-narrow);
    font-size: 1rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.hud-line > .hud-select-trigger {
    grid-column: 2 / -1;
}

.hud-slider {
    min-width: 3rem;
    margin: 0 0.3rem;
}

/* Auswahlfeld des Zielmodus (öffnet das Kontextmenü des Turms) */
.hud-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 1.6rem;
    padding: 0 0.5rem;
    box-sizing: border-box;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
    color: var(--clr-text-primary);
    font-family: var(--font-narrow);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

.hud-select-trigger i {
    font-size: 0.8em;
    color: var(--clr-text-muted);
}

.hud-select-trigger:hover,
.hud-select-trigger:focus-visible {
    box-shadow: inset 0 0 0 2px var(--clr-primary-main);
    outline: none;
}

/* Aktionen am Turm: Upgrade mit Kosten, Downgrade und Move mit Taste, Sell mit Erstattung */
.hud-acts {
    display: flex;
    align-items: center;
    gap: var(--hud-gap-tight);
}

.hud-acts .btn {
    flex: 1 1 auto;
    height: 1.9rem;
    padding: 0 0.45rem;
    font-size: 0.85rem;
}

.hud-cost {
    font-family: var(--font-regular);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0.9;
}

.hud-cost:empty {
    display: none;
}

/* Beschriftung, die nur seitlich Platz hat */
.hud-side-only {
    display: none;
}

.hud-order-status {
    flex: 1 1 100%;
    font-family: var(--font-narrow);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--clr-primary-text);
}

/* Modul-Sockel: je Typ eine beschriftete Reihe mit 5 Spalten, mehr Sockel brechen um */
.hud-modules {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    min-height: 0;
}

.hud-sock-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.module-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--hud-gap-tight);
}

.module-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
    font-size: 0.9rem;
    cursor: pointer;
}

.module-slot.module-offensive {
    color: var(--clr-primary-main);
}

.module-slot.module-utility {
    color: var(--clr-secondary-main);
}

/* Bestückter Sockel: Unterkante in der Farbe des Typs */
.module-slot.module-offensive:has(img) {
    box-shadow: inset 0 -3px 0 var(--clr-primary-main);
}

.module-slot.module-utility:has(img) {
    box-shadow: inset 0 -3px 0 var(--clr-secondary-main);
}

.module-slot:hover {
    border-color: var(--clr-primary-main);
}

.module-slot img {
    width: 100%;
    height: 100%;
    padding: 10%;
    box-sizing: border-box;
    object-fit: contain;
}

/* Creep: Balken gleich lang, Werte darunter (Konzept 37, 2.4). HP rot und SP blau wie über den
   Creeps (`--clr-creep-hp/-sp`), Fortschritt grün */
.hud-meters {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-content: center;
    align-items: start;
    gap: 0.55rem 0.6rem;
}

/* Zeile aus Beschriftung und Balken; `hidden` blendet beide aus */
.hud-meter-row {
    display: contents;
}

.hud-meter-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 0.45rem;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.hud-meter {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.hud-bar {
    position: relative;
    display: block;
    height: 0.45rem;
    background: var(--clr-shade-15);
}

.hud-bar b {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--clr-creep-hp);
}

.hud-bar.is-sp b {
    background: var(--clr-creep-sp);
}

.hud-bar.is-progress b {
    background: var(--clr-status-success);
}

.hud-meter-values {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    font-family: var(--font-narrow);
    font-size: 1rem;
    line-height: 1.1;
    white-space: nowrap;
}

.hud-meter-extra {
    color: var(--clr-text-muted);
}

.hud-meter-extra b {
    color: var(--clr-text-primary);
}

/* ==========================================================================
   Panel Befehle: Welle, Auto-Send, Overlays, System
   ========================================================================== */

.hud-cmd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.4rem;
}

.hud-cmd .btn {
    width: 100%;
    height: 2.7rem;
    padding: 0 0.5rem;
    font-size: 1.05rem;
    white-space: nowrap;
}

.hud-panel-right .switch {
    font-size: 0.82rem;
    color: var(--clr-text-muted);
}

.hud-switch-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--hud-gap-tight) 1rem;
    padding-top: var(--hud-gap);
    border-top: var(--hud-divider);
}

/* Rahmen-Knöpfe in Steuerknopf-Größe */
.hud-tools {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
}

.hud-tools .btn-icon {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1rem;
}

.hud-tools .btn-icon i {
    color: var(--clr-secondary-main);
}

.hud-tools .btn-icon:hover:not(:disabled) {
    border-color: var(--clr-border-light);
    background: var(--clr-surface-input);
    box-shadow: inset 0 0 0 2px var(--clr-primary-main);
}

.hud-tools .btn-icon.is-active i {
    color: var(--clr-primary-main);
}

.hud-tools-gap {
    flex: 1;
}

/* ==========================================================================
   Seitlich (links oder rechts, Konzept 37, 2.6): dasselbe Markup, Panels untereinander.
   Mission und Befehle bleiben gleich; reicht die Höhe nicht, scrollt nur das Hauptpanel.
   ========================================================================== */

.hud-side .hud-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0 1.1rem;
}

.hud-side .hud-panel {
    padding: 0.9rem 0;
}

.hud-side .hud-panel + .hud-panel {
    border-left: 0;
    border-top: var(--hud-divider);
}

.hud-side .hud-panel-main {
    overflow-y: auto;
}

.hud-side .hud-view {
    flex: 0 0 auto;
    gap: 0.7rem;
}

/* Bauen: links die Türme in vier Reihen zu zwei, darunter abgesetzt die beiden Skills;
   rechts daneben die Info-Werte untereinander */
.hud-side .hud-build-layout {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "towers info"
        "skills info";
    flex: 0 0 auto;
    gap: 0.6rem;
}

.hud-side .build-grid {
    grid-template-columns: repeat(2, var(--hud-slot-size-side));
    grid-auto-rows: var(--hud-slot-size-side);
}

.hud-side .skill-grid {
    grid-template-columns: repeat(2, var(--hud-slot-size-side));
    grid-auto-rows: var(--hud-slot-size-side);
}

.hud-side .hud-info-area {
    justify-content: flex-start;
}

/* Inspektoren: Spalten untereinander, Turm-Aktionen als 2 × 2 mit Beschriftung */
.hud-side .hud-inspector-layout {
    grid-template-columns: minmax(0, 1fr);
    flex: 0 0 auto;
    gap: 0.7rem;
}

.hud-side .hud-inspector-layout > * + * {
    padding-left: 0;
    padding-top: 0.7rem;
    border-left: 0;
    border-top: var(--hud-divider);
}

.hud-side .hud-acts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hud-side .hud-order-status {
    grid-column: 1 / -1;
}

.hud-side .hud-side-only {
    display: inline;
}

/* ==========================================================================
   Schmalere Fenster, Lage unten bzw. oben (Beispielwerte)
   ========================================================================== */

@media (max-width: 1500px) {
    .hud-container {
        --hud-slot-size: 4.6rem;
        --hud-pad-x: 0.8rem;
    }
}

@media (max-width: 1250px) {
    .hud-container {
        --hud-slot-size: 4rem;
        --hud-line-label: 7rem;
    }

    .hud-cmd .btn {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Modul-Dialog am Sockel (#game-dialog-module-shop) und Auslöser der Kontextmenüs
   ========================================================================== */

.module-dialog {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 25rem;
    overflow-y: auto;
}

.module-dialog-title {
    margin: 0 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--clr-border-light);
    font-family: var(--font-narrow);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clr-secondary-main);
}

.module-dialog-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.context-menu-trigger {
    display: none;
    position: absolute;
    width: 1px;
    height: 1px;
}

/* ==========================================================================
   Dialoge und Menüs des Spiels (außerhalb des HUD-Containers)
   ========================================================================== */

/* Pause-Knopf in der Titelleiste der Modul-Dialoge (HUDFormBuilder.attachDialogPauseButton).
   Aussehen: `.btn-plain` in der Titelleiste (jquery_ui_theme.css); hier nur die Lage neben dem
   Schließen-Knopf. */
.dialog-pause-btn {
    margin: 0 0.4rem 0 0;
}

/* Einträge im Modul-Dialog am Sockel: Shop, Inventar, „Kein Modul" */
.module-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
}

.module-item.is-dashed {
    border-style: dashed;
}

.module-item.is-inactive {
    opacity: 0.6;
}

.module-item-main {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.module-item-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

i.module-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--clr-text-muted);
}

.module-item-name {
    font-family: var(--font-narrow);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--clr-text-primary);
}

.module-item-desc {
    font-size: 0.85em;
    color: var(--clr-text-muted);
}

.module-item-note {
    margin-top: 0.25rem;
    font-size: 0.8em;
    color: var(--clr-primary-text);
}

.module-item-btn {
    flex-shrink: 0;
    width: 6.5rem;
}

.module-empty-notice {
    padding: 0.5rem;
    font-size: 0.9em;
    font-style: italic;
    color: var(--clr-text-muted);
}

/* Modul-Inventar (HUDModuleInventory): Symbol, Name und Beschreibung in einer Zelle, der Sockel in
   eigener Spalte in der Farbe des Typs (wie die Unterkante der Sockel im Turm-Inspektor) */
.module-inventory-entry {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 16rem;
    /* Die Tabelle bricht sonst nicht um (`.shared-table`): Die Beschreibung darf mehrzeilig sein */
    white-space: normal;
}

.module-inventory-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

.module-inventory-socket {
    font-family: var(--font-narrow);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.module-inventory-socket.is-offensive {
    color: var(--clr-primary-text);
}

.module-inventory-socket.is-utility {
    color: var(--clr-secondary-main);
}

/* Auftragsübersicht der Build Ships: Turm-Icon und Name in einer Zeile (docs/30_Ships_Konzept.md, 8.3) */
.tower-orders-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Kontextmenüs (Turm-Zielmodus): Symbolspalte, Häkchen, gedämpfter Hinweis. Fläche und Einträge
   kommen aus jquery_ui_theme.css */
.hud-ctx-icon {
    display: inline-block;
    width: 1.2em;
    margin-right: 0.5em;
    text-align: center;
}

.hud-ctx-check {
    color: var(--clr-status-success);
}

.hud-ctx-muted {
    opacity: 0.6;
    font-style: italic;
}

/* ==========================================================================
   Hervorhebung durch Map-Events (MessageHighlight)
   Das Popup eines Events kann HUD-Elemente hervorheben (IDs aus data/constants/highlights.json)
   und setzt dafür eine Klasse `highlight_<GUID>`; der Attribut-Selektor trifft jede davon.
   ========================================================================== */

[class^="highlight_"],
[class*=" highlight_"] {
    outline: 2px solid var(--clr-primary-main);
    outline-offset: 2px;
    animation: hud-highlight-pulse 1.2s ease-in-out infinite;
}

@keyframes hud-highlight-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--clr-primary-subtle);
    }
    50% {
        box-shadow: 0 0 12px 6px var(--clr-primary-main);
    }
}