/* Hull Integrity UI (CC_044) — Seitenansicht mit Signalfarben */
.hull-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
.hull-display-wrapper { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem; }

/* ── Schema ─────────────────────────────────────────────────────────────── */
.hull-schematic-well { background: #0d1520; border: 1px solid #1f2d3d; border-radius: 6px; padding: 0.25rem; }
.hull-schematic { width: 100%; max-width: 1000px; height: auto; display: block; margin: 0 auto; }

.hs-meta path { fill: none; stroke: #374151; stroke-width: 1; }
.hs-meta .hs-meta-arrow { fill: #374151; stroke: none; }
.hs-meta text { fill: #6b7280; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.15em; }

.hs-nozzles path { fill: #111827; stroke: #374151; stroke-width: 1.2; }
.hs-exhaust path { fill: #06b6d4; opacity: 0.55; }
.hs-exhaust.is-out path { opacity: 0.08; }
.hs-mast path { fill: none; stroke: #374151; stroke-width: 1.5; }
.hs-outline path { fill: none; stroke: #e0e7ff; stroke-opacity: 0.22; stroke-width: 1; stroke-dasharray: 4 3; }
.hs-turrets path { fill: #111827; stroke: #4b5563; stroke-width: 1.2; stroke-linejoin: round; }

/* Sektionen: Umriss + leichte Füllung in der Signalfarbe */
.hs { stroke-width: 2; stroke-linejoin: round; transition: fill 0.4s, stroke 0.4s; }
.hs-ok   { fill: rgba(16, 185, 129, 0.10); stroke: #10b981; }
.hs-warn { fill: rgba(245, 158, 11, 0.14); stroke: #f59e0b; }
.hs-dmg  { fill: rgba(249, 115, 22, 0.18); stroke: #f97316; }
.hs-crit { fill: rgba(239, 68, 68, 0.24); stroke: #ef4444; }
/* Abgeschottet: Schotten zu, Bruch noch offen */
.hs-isolated { stroke-dasharray: 8 5; stroke-width: 2.5; }
/* Offener Bruch: Fläche pulsiert rot */
.hs-breach { stroke: #ef4444; animation: hs-breach 1s ease-in-out infinite alternate; }
@keyframes hs-breach { from { fill: rgba(239, 68, 68, 0.16); } to { fill: rgba(239, 68, 68, 0.40); } }

.hs-structure path { fill: none; stroke: #e0e7ff; stroke-opacity: 0.07; stroke-width: 1; }
.hs-windows * { fill: #e0e7ff; opacity: 0.35; }

.hs-pct { font-family: var(--font-mono, monospace); font-size: 26px; font-weight: bold; text-anchor: middle; }
.hs-name { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.14em; text-anchor: middle; fill: #9ca3af; }
.hs-t-ok   { fill: #10b981; }
.hs-t-warn { fill: #f59e0b; }
.hs-t-dmg  { fill: #f97316; }
.hs-t-crit { fill: #ef4444; }

/* Riss mit austretender Atmosphäre */
.hs-crack path { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linejoin: bevel; }
.hs-vent { fill: #e0e7ff; animation: hs-vent 1.4s ease-out infinite; }
.hs-vent-2 { animation-delay: 0.45s; }
.hs-vent-3 { animation-delay: 0.9s; }
@keyframes hs-vent { from { transform: translate(0, 0); opacity: 0.9; } to { transform: translate(16px, -34px); opacity: 0; } }

/* ── Draufsicht: Platten je Seite, Bauteile ───────────────────────────────── */
.ht-plate { stroke-width: 1.5; }
.ht-pct { font-family: var(--font-mono, monospace); font-size: 15px; font-weight: bold; text-anchor: middle; }
.ht-radiators path { fill: none; stroke: #374151; stroke-width: 1; stroke-dasharray: 3 3; }
.ht-module circle { stroke: #0d1520; stroke-width: 1.5; }
.ht-module path { stroke: #ffffff; stroke-width: 2; }
.ht-m-ok circle   { fill: #4b5563; }
.ht-m-warn circle { fill: #f59e0b; }
.ht-m-dmg circle  { fill: #f97316; }
.ht-m-crit circle { fill: #ef4444; }
.ht-module.is-destroyed circle { fill: #7f1d1d; }

/* ── Beschädigte Bauteile ───────────────────────────────────────────────── */
.hull-modules { list-style: none; margin: 0; padding: 0; display: grid;
                grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.3rem; }
.hull-module-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 0.35rem 0.7rem;
                    border: 1px solid #1f2d3d; border-left-width: 3px; border-radius: 4px;
                    font-family: var(--font-mono, monospace); font-size: 0.85rem; }
.hm-name { font-weight: bold; flex: 1 0 auto; }
.hm-where { color: #9ca3af; font-size: 0.75rem; }
.hm-state { font-weight: bold; }
.hl-crit .hm-state { color: #ef4444; }
.hl-dmg .hm-state { color: #f97316; }
.hl-warn .hm-state { color: #f59e0b; }

/* ── Sektionsliste ──────────────────────────────────────────────────────── */
.hull-legend { list-style: none; margin: 0; padding: 0; display: grid;
               grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.4rem; }
.hull-legend-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem;
                    padding: 0.45rem 0.7rem; border: 1px solid #1f2d3d; border-left-width: 3px; border-radius: 4px;
                    font-family: var(--font-mono, monospace); }
.hl-ok   { border-left-color: #10b981; }
.hl-warn { border-left-color: #f59e0b; }
.hl-dmg  { border-left-color: #f97316; }
.hl-crit { border-left-color: #ef4444; }
.hull-legend-item.is-breached { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.08); }
.hl-name { font-weight: bold; flex: 1 0 auto; }
.hl-pct { font-weight: bold; }
.hl-ok .hl-pct { color: #10b981; }
.hl-warn .hl-pct { color: #f59e0b; }
.hl-dmg .hl-pct { color: #f97316; }
.hl-crit .hl-pct { color: #ef4444; }
.hl-state { font-size: 0.7rem; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.1em;
            background: rgba(239, 68, 68, 0.3); }
.hl-state-isolated { background: rgba(245, 158, 11, 0.25); }
.hl-sides { display: flex; gap: 0.5rem; font-size: 0.75rem; flex-basis: 100%; }
.hl-side { padding: 1px 6px; border: 1px solid #1f2d3d; border-radius: 3px; }
.hl-t-ok { color: #10b981; }
.hl-t-warn { color: #f59e0b; border-color: rgba(245, 158, 11, 0.5); }
.hl-t-dmg { color: #f97316; border-color: rgba(249, 115, 22, 0.5); }
.hl-t-crit { color: #ef4444; border-color: rgba(239, 68, 68, 0.6); }
.hl-order { flex-basis: 100%; font-size: 0.75rem; color: #ffd98a; }
.hl-isolate { min-height: 36px; padding: 0.25rem 0.75rem; border: 1px solid #f59e0b; border-radius: 4px;
              background: rgba(245, 158, 11, 0.18); color: #ffd98a; font: inherit; font-size: 0.75rem;
              text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.hl-isolate:hover { background: rgba(245, 158, 11, 0.3); }

/* Breit (ab 1600 px, Full HD, 4K skaliert): Reparatur anfordern als Spalte rechts neben dem
   Rumpf statt darunter. Die Seite darf breiter werden als die übliche Stationsbreite (1400 px),
   wie die Reaktorkontrolle, und füllt die Bildschirmhöhe: Die Schemata wachsen bis an den unteren
   Rand (Abstand dort = Innenabstand von .station-main). Die Schemata werden nur so breit, dass
   Seitenansicht, Draufsicht und Sektionsliste übereinander in die Fensterhöhe passen
   (Seitenansicht + Draufsicht ≈ 0,58 × Breite). Ist der Inhalt höher als der Bildschirm, wächst
   die Seite wie bisher. */
@media (min-width: 1600px) {
    .station-main:has(.hull-layout) { max-width: min(2800px, 100%); display: flex; flex-direction: column; }
    .hull-layout {
        flex: 1 0 auto;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
        align-items: stretch;
        padding: 0;
    }
    .hull-display-area, .hull-request-area { display: flex; flex-direction: column; min-width: 0; margin: 0; }
    .hull-display-area > .station-panel, .hull-request-area > .station-panel { flex: 1 0 auto; }
    .hull-display-area #hull-display-container { flex: 1 0 auto; }
    .hull-schematic-well { flex: 1 0 auto; display: flex; align-items: center; }
    .hull-schematic { max-width: min(1000px, calc((100vh - 410px) * 1.7)); }
}
/* Sehr breit (4K skaliert): Seitenansicht und Draufsicht nebeneinander, Sektionsliste und
   beschädigte Bauteile darunter über beide — so werden die Schemata größer als übereinander. */
@media (min-width: 2200px) {
    .hull-display-wrapper {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        grid-template-rows: 1fr;
        grid-auto-rows: auto;
    }
    .hull-display-wrapper > .hull-modules,
    .hull-display-wrapper > .hull-legend { grid-column: 1 / -1; }
    .hull-schematic { max-width: 1200px; }
}

/* Handy: im Schema nur Prozentwerte, dafür größer; Namen stehen in der Liste */
@media (max-width: 600px) {
    .hs-name, .hs-meta text { display: none; }
    .hs-pct { font-size: 34px; }
    .ht-pct { font-size: 22px; }
    .hull-layout { padding: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-breach, .hs-vent { animation: none; }
}