/* ═══════════════════════════════════════════════════
   NavalStrike – Design System
   Funkspruch: abgenutzte Funkbrücke statt Glas-Sci-Fi.
   Messing/Oliv/Dunkelholz statt Cyan/Ocean – dieselben
   Variablennamen wie zuvor, damit kein Komponenten-CSS
   (ships.css, audio-ui.css, index.html-Inline-Styles)
   angefasst werden muss, nur ihre Werte ändern sich.
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

/* ─── CSS Variables ──────────────────────────────── */
:root {
    /* Ocean Palette: Marineblau der nächtlichen See, von der Tiefe (900)
       bis zur Gischt (100). Die Namen bezeichnen Oberflächenstufen
       ("dunkelste bis hellste"), nicht einen bestimmten Farbton – sie
       bleiben deshalb über Themenwechsel hinweg stabil. */
    --ocean-900: #070d17;
    --ocean-800: #0c1522;
    --ocean-700: #121f31;
    --ocean-600: #1b2c43;
    --ocean-500: #253a56;
    --ocean-400: #34506f;
    --ocean-300: #4d6d92;
    --ocean-200: #7593b8;
    --ocean-100: #aec4dd;

    /* Akzente: Messinggold trägt die Marke und alle Hauptaktionen, ein
       kühles Signalblau die zweite Ebene. Gold auf Marineblau ist der
       Kontrast, von dem die Oberfläche lebt. */
    --accent-brass: #d4a53f;
    --accent-brass-glow: rgba(212, 165, 63, 0.3);
    --accent-gold: #f0c368;
    --accent-gold-glow: rgba(240, 195, 104, 0.3);
    --accent-steel: #5b8fc7;
    --accent-steel-glow: rgba(91, 143, 199, 0.3);
    /* Aufgehellt gegenüber einem satteren Rot: Als Textfarbe auf dunklem
       Grund (Schwierigkeits-Stempel "Unfair") blieb der dunklere Ton
       unter dem Kontrastminimum von 4,5:1. */
    --accent-red: #d96852;
    --accent-red-glow: rgba(217, 104, 82, 0.3);
    --accent-green: #5a9e6f;
    --accent-green-glow: rgba(90, 158, 111, 0.3);
    --accent-orange: #d2853a;

    /* Surfaces */
    --surface-glass: rgba(12, 21, 34, 0.75);
    --surface-card: rgba(18, 31, 49, 0.88);
    --surface-elevated: rgba(27, 44, 67, 0.65);
    --surface-overlay: rgba(7, 13, 23, 0.92);

    /* Borders */
    --border-subtle: rgba(140, 175, 215, 0.16);
    --border-glow: rgba(212, 165, 63, 0.4);

    /* Text */
    --text-primary: #e8eef7;
    --text-secondary: #9fb3cc;
    --text-muted: #6b7f99;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Radii: minimal reduziert und leicht unregelmäßig gehalten (siehe
       .card/.modal weiter unten) statt der cleanen großen Rundungen. */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* ─── Messing ──────────────────────────────────────
       Beschläge, Rahmen und Embleme sind Metall, keine Farbfläche: Der
       Verlauf läuft von dunkel angelaufen über den Glanzpunkt zurück ins
       Dunkle. Deshalb eine eigene Skala statt einer einzelnen Goldfarbe –
       nur so wirken Kanten plastisch. */
    --brass-dark: #6b4f17;
    --brass: #a67c26;
    --brass-light: #d4a53f;
    --brass-shine: #f7e2a8;

    /* Gedrehtes Messing für Flächen (Emblem, Beschlag). */
    --brass-plate: linear-gradient(145deg,
        var(--brass-dark) 0%,
        var(--brass) 28%,
        var(--brass-shine) 48%,
        var(--brass-light) 62%,
        var(--brass) 82%,
        var(--brass-dark) 100%);

    /* Schmale Kante mit Glanzpunkt in der Mitte – für Trennlinien und
       Rahmenoberkanten. */
    --brass-edge: linear-gradient(to right,
        transparent,
        var(--brass) 20%,
        var(--brass-shine) 50%,
        var(--brass) 80%,
        transparent);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow-cyan: 0 0 20px rgba(201, 162, 39, 0.18), 0 0 60px rgba(201, 162, 39, 0.08);
    --shadow-glow-gold: 0 0 20px rgba(232, 182, 79, 0.2), 0 0 60px rgba(232, 182, 79, 0.1);

    /* Transitions */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Font: Schreibmaschine für Überschriften/Akzente, Outfit bleibt für
       Fließtext/Formulare (Lesbarkeit in kleinen UI-Größen geht vor Stil). */
    --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Special Elite', 'Courier New', monospace;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ─── Reset & Base ───────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    background: var(--ocean-900);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── App Container ──────────────────────────────── */
#app {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── Screen System ──────────────────────────────── */
.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: var(--space-lg);
    position: relative;
    z-index: 1;
}

.screen.active {
    display: flex;
    animation: screenFadeIn 0.5s var(--ease-out);
}

@keyframes screenFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Typography ─────────────────────────────────── */
.title-xl {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.title-lg {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

.title-md {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.3vw, 1.5rem);
    font-weight: 400;
    line-height: 1.35;
}

.title-sm {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.text-gradient {
    background: linear-gradient(135deg, var(--accent-brass), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-glow {
    text-shadow: 0 0 20px var(--accent-brass-glow), 0 0 40px var(--accent-brass-glow);
}

/* ─── Card (Funkspruch-Papier statt Glas) ────────── */
.card {
    background: var(--surface-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    position: relative;
    isolation: isolate; /* eigener Stacking-Context für ::before, ohne z-index-Kaskaden anzustoßen */
}

/* Feines Korn wie beim Funkspruch-Banner (css/audio-ui.css .transmission::before) –
   dieselbe Technik (zwei überlagerte Radial-Gradients), damit Karten und
   Funkspruch als ein Material wirken statt als zwei Stile nebeneinander. */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 2px;
    mix-blend-mode: overlay;
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card--glass {
    background: var(--surface-glass);
    border-color: var(--border-glow);
}

/* ─── Buttons ────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 14px 28px;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn:active {
    transform: scale(0.97);
}

.btn--primary {
    background: linear-gradient(135deg, #7a6320, var(--accent-brass));
    color: var(--ocean-900);
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.35);
}

.btn--primary:hover {
    box-shadow: 0 6px 25px rgba(201, 162, 39, 0.5);
    transform: translateY(-2px);
}

.btn--secondary {
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

.btn--secondary:hover {
    border-color: var(--accent-brass);
    box-shadow: var(--shadow-glow-cyan);
}

.btn--gold {
    background: linear-gradient(135deg, #9c6f1f, var(--accent-gold));
    color: var(--ocean-900);
    box-shadow: 0 4px 15px rgba(232, 182, 79, 0.3);
}

.btn--gold:hover {
    box-shadow: var(--shadow-glow-gold);
    transform: translateY(-2px);
}

.btn--private {
    background: linear-gradient(135deg, #3d3220, #5c4a30);
    color: var(--text-primary);
    box-shadow: 0 4px 15px rgba(92, 74, 48, 0.35);
}

.btn--private:hover {
    box-shadow: 0 6px 25px rgba(92, 74, 48, 0.5);
    transform: translateY(-2px);
}

.btn--danger {
    background: linear-gradient(135deg, #7a2c1f, var(--accent-red));
    color: var(--text-primary);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: 10px 16px;
}

.btn--ghost:hover {
    color: var(--text-primary);
    background: var(--surface-elevated);
}

.btn--lg {
    padding: 18px 40px;
    font-size: 1.15rem;
    border-radius: var(--radius-lg);
}

.btn--full {
    width: 100%;
}

.btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-md);
    font-size: 1.2rem;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* ─── Inputs ─────────────────────────────────────── */
.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.input-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.input {
    padding: 14px 18px;
    background: var(--ocean-800);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 1rem;
    transition: all 0.3s var(--ease-out);
    outline: none;
}

.input:focus {
    border-color: var(--accent-brass);
    box-shadow: 0 0 0 3px var(--accent-brass-glow);
}

.input::placeholder {
    color: var(--text-muted);
}

.input--code {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    padding: 18px;
}

/* ─── Badge ──────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge--host {
    background: var(--accent-gold-glow);
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold);
}

.badge--ready {
    background: var(--accent-green-glow);
    color: var(--accent-green);
}

.badge--waiting {
    background: var(--surface-elevated);
    color: var(--text-secondary);
}

.badge--registered {
    background: rgba(120, 100, 255, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(120, 100, 255, 0.4);
}

/* ─── Player List ────────────────────────────────── */
.player-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

.player-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    transition: all 0.3s var(--ease-out);
}

.player-item--ready {
    border-color: var(--accent-green);
    box-shadow: inset 0 0 20px var(--accent-green-glow);
}

.player-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.player-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--ocean-400), var(--accent-brass));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

/* ─── Lobby Code Display ─────────────────────────── */
.lobby-code {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.4em;
    color: var(--accent-brass);
    text-shadow: 0 0 30px var(--accent-brass-glow);
    padding: var(--space-lg) var(--space-xl);
    background: var(--surface-glass);
    border: 2px solid var(--border-glow);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
    text-align: center;
}

.lobby-code:hover {
    background: rgba(0, 229, 255, 0.05);
    box-shadow: var(--shadow-glow-cyan);
}

.lobby-code:active {
    transform: scale(0.98);
}

/* ─── Timer ──────────────────────────────────────── */
.timer {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-brass);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.timer__icon {
    width: 1.25em;
    height: 1.25em;
    object-fit: contain;
}

.timer--warning {
    color: var(--accent-orange);
    animation: timerPulse 1s ease-in-out infinite;
}

.timer--danger {
    color: var(--accent-red);
    animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ─── Turn Indicator ─────────────────────────────── */
.turn-indicator {
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.turn-indicator--active {
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.15), rgba(0, 229, 255, 0.15));
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
    animation: turnGlow 2s ease-in-out infinite;
}

.turn-indicator--waiting {
    background: var(--surface-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

@keyframes turnGlow {
    0%, 100% { box-shadow: 0 0 10px var(--accent-green-glow); }
    50% { box-shadow: 0 0 30px var(--accent-green-glow), 0 0 60px var(--accent-green-glow); }
}

/* ─── Toast / Notifications ──────────────────────── */
.toast-container {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.toast {
    padding: var(--space-md) var(--space-lg);
    background:
        radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 3px 3px,
        radial-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1px) 1px 2px / 5px 5px,
        var(--surface-card);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-brass);
    box-shadow: var(--shadow-lg);
    animation: toastSlideIn 0.4s var(--ease-spring);
    max-width: 380px;
    font-size: 0.9rem;
}

.toast--error { border-left-color: var(--accent-red); }
.toast--success { border-left-color: var(--accent-green); }
.toast--warning { border-left-color: var(--accent-orange); }

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

.toast--exit {
    animation: toastSlideOut 0.3s var(--ease-out) forwards;
}

@keyframes toastSlideOut {
    to { opacity: 0; transform: translateX(100px); }
}

/* ─── Modal / Dialog ─────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    backdrop-filter: blur(8px);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    animation: fadeIn 0.3s var(--ease-out);
}

.modal {
    background:
        radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 3px 3px,
        radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px) 1px 2px / 5px 5px,
        var(--ocean-700);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    animation: modalPop 0.4s var(--ease-spring);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: var(--space-md);
}

.modal-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

/* ─── Loading Spinner ────────────────────────────── */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent-brass);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ─── Build Info ─────────────────────────────────── */
.build-info {
    position: fixed;
    bottom: var(--space-sm);
    right: var(--space-md);
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    opacity: 0.5;
    z-index: 5;
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 768px) {
    .screen {
        padding: var(--space-md);
    }

    .card {
        padding: var(--space-lg);
    }

    .btn--lg {
        padding: 16px 28px;
        font-size: 1rem;
    }

    .modal {
        padding: var(--space-xl);
    }

    .modal-actions {
        flex-direction: column;
    }

    .toast-container {
        left: var(--space-md);
        right: var(--space-md);
    }

    .toast {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    :root {
        --space-lg: 16px;
        --space-xl: 24px;
    }
}

/* ═══ GEFECHTS-KOPFZEILE ═══════════════════════════════
   Die Kopfzeile (.battle-header/.battle-players/.battle-player/
   .battle-vs/.battle-portrait) ist seit der Umstellung auf die
   Sprite-Rahmen-Optik der Demo (demo_battle.html) im <style>-Block von
   index.php definiert, zusammen mit dem restlichen Battle-Screen-CSS
   (Panel, Plakette, Signalanlage, Boards-Rahmen, Sicherheitsabfrage) –
   dort liegt bereits das gesamte übrige Screen-spezifische CSS.
   ══════════════════════════════════════════════════════ */

/* ═══ GEGNERAUSWAHL (Einzelspieler) ═══════════════════
   Jede Karte trägt die Akzentfarbe ihres Charakters über --accent /
   --accent-glow (gesetzt in SingleplayerManager.renderOpponents). Die Farbe
   steht dauerhaft in Name, Spruch und Kennwerten – sie gehört zur Figur und
   ist kein Hover-Effekt. Hover und Auswahl verstärken sie nur.
   ══════════════════════════════════════════════════════ */

/* Kopfzeile des Auswahlbildschirms. Der Kicker ordnet den Screen in den
   Spielfluss ein (Einzelspieler → Besprechung → Gefecht), die Unterzeile
   erklärt in einem Satz, wie die Karten zu lesen sind – mehr Anleitung
   braucht der Bildschirm nicht. */
.opponent-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

.opponent-header__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-light);
}

/* Messingkanten statt eines weiteren Kastens: rahmen den Kicker, ohne ein
   neues UI-Element einzuführen. Gleiche Kante wie am Konsolenkopf der
   Startmaske – nur zur Mitte hin gespiegelt. */
.opponent-header__kicker::before,
.opponent-header__kicker::after {
    content: '';
    width: 42px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--brass));
}
.opponent-header__kicker::after {
    background: linear-gradient(to left, transparent, var(--brass));
}

/* Die Überschrift steht frei auf dem Nachtbild – ohne Schattenkante
   verliert sie über hellen Wolken den Halt. */
.opponent-header .title-lg {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.opponent-header__sub {
    max-width: 52ch;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

/* Drei Karten nebeneinander – eine je Charakter. minmax(0, 1fr) statt einer
   festen Mindestbreite: So teilen sich die Spalten den Platz gleichmäßig,
   ohne dass ein längerer Text eine Spalte breiter zieht. Damit die Karten
   auf großen Bildschirmen nicht ins Plakathafte wachsen, ist die Reihe
   zusätzlich in der Breite begrenzt und mittig gesetzt. */
.opponent-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    /* stretch (Standard) statt start: alle Karten einer Reihe sind so hoch
       wie die höchste – sie stehen unten wie oben auf einer Linie. */
    align-items: stretch;
    max-width: 940px;
    margin: 0 auto var(--space-lg);
}

@media (max-width: 820px) {
    .opponent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .opponent-list { grid-template-columns: minmax(0, 1fr); }
    /* Einspaltig füllt eine Karte die Bildschirmbreite – im 4:3-Schnitt würde
       allein das Portrait fast den ganzen Sichtbereich einnehmen. Flacher
       geschnitten bleiben Name, Kennwerte und Knopf ohne Scrollen erreichbar. */
    .opponent-card__frame { aspect-ratio: 16 / 9; }
}

.opponent-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Volle Zellhöhe: die Karte füllt den von der höchsten Karte gesetzten
       Rahmen, damit der Aktionsknopf unten bündig steht. */
    height: 100%;
    padding: 0;
    text-align: left;
    font: inherit;
    color: var(--text-primary);
    /* Deckender als eine normale Karte und mit Unschärfe dahinter: Die
       Akten liegen auf dem Nachtbild und müssen ohne Mühe lesbar sein –
       dieselbe Behandlung wie die Einsatzkonsole der Startmaske. */
    background: rgba(9, 17, 28, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition:
        transform 0.35s var(--ease-out),
        border-color 0.35s var(--ease-out),
        box-shadow 0.35s var(--ease-out),
        opacity 0.35s var(--ease-out),
        filter 0.35s var(--ease-out);
    /* Karten treten beim Öffnen nacheinander an (--i wird beim Rendern je
       Karte gesetzt). backwards hält sie während der eigenen Wartezeit
       unsichtbar, statt sie erst sichtbar stehen zu lassen. */
    animation: opponent-deal 0.5s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes opponent-deal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.opponent-card:hover,
.opponent-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 26px var(--accent-glow);
    outline: none;
}

/* ─── Aktenkopf ──────────────────────────────────────
   Die Karte ist als Personalakte gerahmt: laufende Nummer links, dahinter
   eine punktierte Führungslinie wie auf einem Formular. Rein dekorativ
   (aria-hidden im Markup) – die eigentliche Information steht auf Portrait
   und Textteil. Der Profilschlüssel stand früher am rechten Ende der Zeile;
   er wiederholte nur den Namen darunter in Großbuchstaben. */
.opponent-card__file {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px var(--space-md) 5px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-elevated);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

/* Messingkante über dem Aktenkopf – dieselbe Signatur wie an der
   Oberkante der Einsatzkonsole. */
.opponent-card__file::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--brass-edge);
    opacity: 0.7;
    transition: opacity 0.35s var(--ease-out);
    pointer-events: none;
}

.opponent-card:hover .opponent-card__file::before,
.opponent-card:focus-visible .opponent-card__file::before {
    opacity: 1;
}

/* Läuft bis zum rechten Rand aus, seit der Profilschlüssel dort entfallen
   ist – die Linie endet damit offen statt an einer zweiten Beschriftung. */
.opponent-card__file-line {
    flex: 1;
    border-bottom: 1px dotted rgba(180, 150, 95, 0.28);
}

/* ─── Portraitrahmen ─────────────────────────────────
   Drei Ebenen: Bild, Abblendung nach unten (::before) und Eckwinkel
   (::after), die bei Hover nach außen wandern. */
.opponent-card__frame {
    position: relative;
    /* Etwas breiter als hoch: bei vier Spalten nebeneinander bliebe ein
       hochformatiger Rahmen sonst überproportional groß. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ocean-800);
    flex-shrink: 0;
}

.opponent-card__portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    filter: saturate(0.8) contrast(1.02) brightness(0.92);
    transform: scale(1.02);
    transition: filter 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}

.opponent-card:hover .opponent-card__portrait,
.opponent-card:focus-visible .opponent-card__portrait {
    filter: saturate(1.05) contrast(1.06) brightness(1);
    transform: scale(1.06);
}

/* Platzhalter, solange ein Charakter kein Artwork hat. */
.opponent-card__portrait--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 3.2rem;
    color: var(--accent);
    background: radial-gradient(circle at 50% 35%, var(--ocean-600), var(--ocean-800) 70%);
    filter: none;
    transform: none;
}

/* Abblendung trägt den Übergang ins Textfeld. */
.opponent-card__frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 45%,
        rgba(9, 17, 28, 0.6) 78%,
        rgba(9, 17, 28, 0.92) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Eckwinkel als Zielsucher-Anmutung: ein Element, acht Gradienten. */
.opponent-card__frame::after {
    content: '';
    position: absolute;
    inset: 10px;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(var(--accent), var(--accent)) left  top    / 14px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left  top    / 1px 14px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right top    / 14px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right top    / 1px 14px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left  bottom / 14px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left  bottom / 1px 14px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right bottom / 14px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right bottom / 1px 14px no-repeat;
    opacity: 0.5;
    transition: inset 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}

.opponent-card:hover .opponent-card__frame::after,
.opponent-card:focus-visible .opponent-card__frame::after {
    inset: 5px;
    opacity: 1;
}

/* Ein einzelner Lichtstreifen wandert bei Hover über das Portrait. Dezent
   gehalten – der Charakter soll wirken, nicht der Effekt. */
.opponent-card__scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 34%;
    top: -34%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--accent-glow) 48%,
        var(--accent-glow) 52%,
        transparent
    );
    opacity: 0;
}

.opponent-card:hover .opponent-card__scan,
.opponent-card:focus-visible .opponent-card__scan {
    opacity: 1;
    animation: opponent-scan 2.6s var(--ease-out) infinite;
}

@keyframes opponent-scan {
    0%   { top: -34%; }
    70%  { top: 100%; }
    100% { top: 100%; }
}

/* Schwierigkeitsgrad oben rechts im Rahmen, als Aktenstempel: Schreib-
   maschinenschrift, leicht verkantet aufgeschlagen. Die Farbe hängt am Grad,
   nicht an der Figur – derselbe Grad sieht auf jeder Karte gleich aus, auch
   wenn später weitere Gegner dazukommen. */
.opponent-card__level {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: 3;
    padding: 3px 8px;
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    background: rgba(14, 11, 8, 0.82);
    backdrop-filter: blur(2px);
    transform: rotate(-2deg);
}

/* Ränder in derselben Farbe wie die Schrift, nur durchscheinend: So
   bleiben Rand und Text bei jeder Palettenänderung gekoppelt. */
.opponent-card__level--easy {
    color: var(--accent-green);
    border: 1px solid color-mix(in srgb, var(--accent-green) 55%, transparent);
}
.opponent-card__level--medium {
    color: var(--accent-gold);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 55%, transparent);
}
/* Stahlblau statt des früheren Orange: Es ist zugleich die Charakterfarbe
   von Admiral Thorne, sodass Stempel und Kartenrahmen auf seiner Karte
   zusammenklingen. Über alle vier Grade bleibt die Skala trotzdem
   unterscheidbar – grün, gold, blau, rot. */
.opponent-card__level--hard {
    color: var(--accent-steel);
    border: 1px solid color-mix(in srgb, var(--accent-steel) 60%, transparent);
}
.opponent-card__level--impossible {
    color: var(--accent-red);
    border: 1px solid color-mix(in srgb, var(--accent-red) 65%, transparent);
}

/* Namensschild über dem unteren Bildrand. */
.opponent-card__ident {
    position: absolute;
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: 6px;
    z-index: 3;
}

.opponent-card__name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.08rem;
    line-height: 1.15;
    color: var(--text-primary);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* Der Dienstgrad steht als stille Unterzeile unter dem Namen – ohne Kasten:
   Die Abblendung des Rahmens (::before) trägt die Lesbarkeit, ein zweiter
   Rahmen neben dem Stempel würde das Portrait zustellen. */
.opponent-card__rank {
    display: block;
    margin-top: 2px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* ─── Textteil ─────────────────────────────────────
   Füllt die Resthöhe der Karte. Die Kennwerte bekommen margin-top:auto und
   werden dadurch samt Knopf an den unteren Rand geschoben – so liegen sie
   über alle Karten hinweg auf einer Linie, obwohl die Beschreibungen
   unterschiedlich lang sind. */
.opponent-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md) var(--space-md);
}

/* Der Spruch trägt den Charakter – deshalb vor den Zahlen und in der
   Akzentfarbe der Figur. */
.opponent-card__quote {
    position: relative;
    padding-left: var(--space-sm);
    font-style: italic;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--accent);
}

.opponent-card__quote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    border-radius: 2px;
}

.opponent-card__description {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* margin-top:auto drückt Kennwerte und Knopf an den unteren Kartenrand –
   der Grund, warum sie über alle Karten hinweg auf einer Linie liegen. */
.opponent-card__traits {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-subtle);
}

.opponent-trait {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Feste Meterbreite statt fester Pip-Breite: Die Segmente teilen sich die
   Strecke und alle Meter enden über alle Karten hinweg an derselben Kante –
   die Werte lassen sich so direkt zwischen den Gegnern vergleichen. */
.opponent-trait__meter {
    display: flex;
    gap: 3px;
    width: 96px;
}

.opponent-trait__pip {
    flex: 1;
    height: 5px;
    border-radius: 1px;
    background: var(--ocean-600);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.3s var(--ease-out);
}

/* Gefüllte Segmente tragen die Charakterfarbe dauerhaft; Hover ergänzt nur
   das Leuchten. */
.opponent-trait__pip--on {
    background: var(--accent);
}

.opponent-card:hover .opponent-trait__pip--on,
.opponent-card:focus-visible .opponent-trait__pip--on {
    box-shadow: 0 0 7px var(--accent-glow);
}

.opponent-card__cta {
    margin-top: var(--space-sm);
    padding: 9px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    /* Kantiger als die Karte selbst: Der Knopf ist Befehlszeile, kein
       weiteres Kärtchen. */
    border-radius: var(--radius-sm);
    transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

/* Richtungspfeil als Guillemet – passt zur Schreibmaschinenschrift und
   rückt bei Hover an, als Hinweis: Hier geht es weiter. */
.opponent-card__cta::after {
    content: ' »';
    display: inline-block;
    transition: transform 0.3s var(--ease-out);
}

.opponent-card:hover .opponent-card__cta::after,
.opponent-card:focus-visible .opponent-card__cta::after {
    transform: translateX(3px);
}

.opponent-card:hover .opponent-card__cta,
.opponent-card:focus-visible .opponent-card__cta {
    background: var(--accent);
    color: var(--ocean-900);
}

/* ─── Auswahlbestätigung ───────────────────────────
   Der Klick wechselt nicht hart den Bildschirm: Die gewählte Karte rastet
   sichtbar ein, die übrigen treten zurück (SingleplayerManager.selectOpponent
   setzt die Klassen und wartet den Moment ab). So bekommt die Entscheidung
   eine Bestätigung, bevor es weitergeht. */
.opponent-list--locked .opponent-card {
    pointer-events: none;
}

.opponent-list--locked .opponent-card:not(.opponent-card--engaged) {
    opacity: 0.3;
    filter: saturate(0.4);
    transform: scale(0.97);
}

.opponent-card--engaged {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 34px var(--accent-glow);
}

.opponent-card--engaged .opponent-card__cta {
    background: var(--accent);
    color: var(--ocean-900);
}

.opponent-card--engaged .opponent-card__frame::after {
    inset: 5px;
    opacity: 1;
}

.opponent-card--engaged .opponent-card__file::before {
    opacity: 1;
}

/* Wer Bewegung reduziert haben will, bekommt die Karten ohne Scan, ohne
   Zoom und ohne Versatz – die Auswahl bleibt voll bedienbar. */
@media (prefers-reduced-motion: reduce) {
    .opponent-card,
    .opponent-card__portrait,
    .opponent-card__frame::after,
    .opponent-trait__pip {
        transition: none;
        animation: none;
    }
    .opponent-card:hover,
    .opponent-card:focus-visible { transform: none; }
    .opponent-card:hover .opponent-card__portrait,
    .opponent-card:focus-visible .opponent-card__portrait { transform: none; }
    .opponent-card__scan { display: none; }
    .opponent-card__cta::after { transition: none; }
    /* Die Auswahl wechselt hier sofort den Bildschirm (siehe selectOpponent) –
       die Rückzieh-Optik der übrigen Karten wäre nur ein Aufblitzen. */
    .opponent-list--locked .opponent-card:not(.opponent-card--engaged) {
        opacity: 1;
        filter: none;
        transform: none;
    }
}