/* Warhammer AoS Army Builder – dark, tile-based UI, mobile first */

/* GLOBALE [hidden]-Regel: viele Author-CSS-Regeln (`.btn { display: inline-flex }`,
   `.seg { display: inline-flex }` etc.) überschreiben sonst das UA-Default
   `[hidden] { display: none }`, weil sie dieselbe Specificity haben und später
   in der Kaskade kommen. Mit `!important` ziehen wir das HTML-Default-Verhalten
   wieder vor – wer ein Element verstecken will, kann sich auf das Attribut verlassen. */
[hidden] { display: none !important; }

:root {
    --bg: #0b0f1a;
    --bg-2: #111827;
    --surface: #141b2d;
    --surface-2: #1c2540;
    --surface-3: #242d4e;
    --border: #273049;
    --border-soft: #1f2740;
    --text: #e7ecf7;
    --text-dim: #9aa4bd;
    --text-mute: #6b7490;
    --accent: #6aa9ff;
    --accent-2: #7c5cff;
    /* `--accent-strong` ist die Button-/Active-Pill-Farbe. Dunkler als der
       Highlight-Akzent, damit weißer Text WCAG-AA-Kontrast hat (~5.9:1).
       `--accent` bleibt für Borders, Icons, Links – also dort wo der Akzent
       FARBE statt Fläche ist. */
    --accent-strong: #2563eb;
    --accent-strong-hover: #3b82f6;
    --good: #53d39d;
    --warn: #ffb454;
    --bad: #ff6b8a;
    --army-a: #6aa9ff;
    --army-b: #ff8e4a;
    --alliance-order: #3da0ff;
    --alliance-chaos: #e0505a;
    --alliance-death: #8a5cff;
    --alliance-destruction: #f59e1e;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 8px 32px rgba(0,0,0,0.35);
    --ff: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(1200px 600px at 10% -10%, #1b2446 0%, transparent 60%),
        radial-gradient(1200px 800px at 100% 100%, #2a1546 0%, transparent 55%),
        var(--bg);
    color: var(--text);
    font-family: var(--ff);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Top bar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(10,14,24, 0.72);
    border-bottom: 1px solid var(--border-soft);
}
.topbar__inner {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(14px, 3vw, 24px);
}
.topbar__brand { display: flex; gap: 14px; align-items: center; }
.topbar__logo {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    font-size: 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2d3a66, #5636a8);
    box-shadow: var(--shadow-1);
}
.topbar h1 { margin: 0; font-size: 17px; letter-spacing: 0.3px; }
.topbar__sub { margin: 2px 0 0; font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.topbar__actions { display: flex; gap: 8px; }
.edition-sub { color: var(--text-mute); }

/* Edition-Switch im Topbar: schmale Pill-Gruppe für 3.0/4.0 */
.edition-switch {
    display: inline-flex;
    margin-top: 6px;
    padding: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    gap: 2px;
}
.edition-tab {
    padding: 4px 12px;
    border: none;
    background: transparent;
    color: var(--text-mute);
    border-radius: 999px;
    cursor: pointer;
    font: 700 11px var(--ff);
    letter-spacing: 0.3px;
    transition: background .15s ease, color .15s ease;
}
.edition-tab:hover { color: var(--text); }
.edition-tab.is-active {
    background: var(--accent-strong);
    color: #fff;
}
.edition-tab.is-active:hover { background: var(--accent-strong-hover); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    font: 500 14px/1 var(--ff);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.btn:hover { background: #232d50; }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn--primary {
    background: var(--accent-strong);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.btn--primary:hover { background: var(--accent-strong-hover); }
.btn--mini {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 8px;
}
.btn--ghost { background: transparent; }
/* Quadratisches Chevron-Mini-Button: nur das Symbol, kein Wort-Label.
   Dezent für Toggle-Aktionen (z. B. Fraktionsliste auf/zu). */
.btn--chev {
    width: 28px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

/* ---------- Custom Select (ui-select) ----------
   Ersatz für <select> in Dialogen – passt zum dunklen UI. Wert steht in data-value
   am Container, Label im .ui-select__label. JS: bindUiSelect() / setUiSelectOptions(). */
.ui-select { position: relative; display: inline-block; }
.ui-select.is-fluid { display: block; width: 100%; }
.ui-select__trigger {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 12px 0 14px;
    font: 500 14px/1 var(--ff);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease;
}
.ui-select__trigger:hover { background: #232d50; }
.ui-select__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-select__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select__caret { color: var(--text-dim); font-size: 11px; transition: transform .15s ease; }
.ui-select.is-open .ui-select__caret { transform: rotate(180deg); }
.ui-select.is-open .ui-select__trigger { border-color: var(--accent); }
.ui-select__menu {
    /* position: fixed lässt das Menü aus Containern mit overflow:auto (z.B. Dialog) rausragen.
       Die genauen Koordinaten setzt JS beim Öffnen anhand der Trigger-BoundingRect. */
    position: fixed;
    z-index: 10000;
    max-height: 260px;
    overflow-y: auto;
    /* Verhindert dass das Mausrad am oberen/unteren Listen-Ende auf den Dialog
       durchrutscht (Scroll-Chaining). Sonst würde der Modal-Hintergrund scrollen
       UND der Scroll-Close-Handler das Menü zumachen. */
    overscroll-behavior: contain;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    padding: 4px;
}
.ui-select__option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text);
    font: 500 13.5px/1.3 var(--ff);
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
}
.ui-select__option:hover { background: var(--surface-2); }
.ui-select__option.is-selected {
    background: rgba(106,169,255,0.22);
    color: #fff;
}
.ui-select__option.is-selected:hover { background: rgba(106,169,255,0.3); }

/* ---------- Style-Dreieck (Ternary-Mixer für Auto-Build) ----------
   Drei Ecken = Magie (oben), Nahkampf (unten-links), Fernkampf (unten-rechts).
   Punkt drinnen verschieben = Mischung. Barycentric-Koordinaten in JS. */
.style-triangle {
    position: relative;
    width: 100%;
    max-width: 240px;
    aspect-ratio: 100 / 92;
    margin: 0 auto;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    padding: 0;
}
.style-triangle__svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}
.style-triangle__corner-tint {
    position: absolute;
    width: 55%; height: 55%;
    border-radius: 999px;
    filter: blur(18px);
    opacity: 0.45;
    pointer-events: none;
}
.style-triangle__corner-tint--top    { top: -10%; left: 20%;        background: var(--accent-2); }
.style-triangle__corner-tint--bl     { bottom: -10%; left: -15%;    background: #ff6b8a; }
.style-triangle__corner-tint--br     { bottom: -10%; right: -15%;   background: #53d39d; }
.style-triangle__label {
    position: absolute;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text);
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.style-triangle__label--top { top: -2px; left: 50%; transform: translateX(-50%); }
.style-triangle__label--bl  { bottom: 0; left: -4px; }
.style-triangle__label--br  { bottom: 0; right: -4px; }
.style-triangle__dot {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #fff, var(--accent) 55%, var(--accent-2));
    border: 2px solid rgba(255,255,255,0.85);
    box-shadow: 0 3px 10px rgba(106,169,255,0.55);
    transform: translate(-50%, -50%);
    cursor: grab;
    pointer-events: none;
    transition: box-shadow .15s ease;
}
.style-triangle.is-dragging .style-triangle__dot {
    cursor: grabbing;
    box-shadow: 0 6px 22px rgba(106,169,255,0.85);
}

/* Slider („Magie") */
.style-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.style-slider__label {
    color: var(--text-mute);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 50px;
}
.style-slider input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
    height: 4px;
}
.style-slider__value {
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    min-width: 40px;
    text-align: right;
}

/* ---------- Liste-sperren-Modus (pro Armee) ----------
   In diesem Modus werden nur gewählte Einheiten angezeigt; Suche, Filter,
   Fraktionswechsel, Mengen-Buttons und Bild-Editor sind gesperrt.
   Der Modus läuft pro Armee – die jeweilige .army bekommt die Klasse,
   nicht der body, damit man eine fertige Armee sperren kann während man
   an der anderen weiterarbeitet. */
.army.is-review .unit-toolbar,
/* Im Review-Modus nur den Chevron + Action-Buttons ausblenden – Titel-Wrap
   (Label + Fraktionsname) bleibt sichtbar, damit man weiterhin sieht WAS
   gerade gesperrt ist. */
.army.is-review .picker-head .picker-head__chev,
.army.is-review .picker-head [data-action="auto-build-one"],
.army.is-review .picker-head [data-action="reset-army"],
.army.is-review .faction-pane,
.army.is-review .tile__qty-btn { display: none !important; }
/* Verstärkt-Indikator („↑ ×2") bleibt sichtbar im gelockten Modus, aber
   nicht mehr klickbar — die Speerspitzen-Aufstellung ist fix. */
.army.is-review .tile__reinforce { pointer-events: none; cursor: default; }
/* Speerspitze-Lock: Box-Picker (faction-pane) ist toggleable, anders als bei
   onlySelected/externalLock. Chevron und Title-Click bleiben aktiv, damit der
   User die Box wechseln kann. Wichtig: `[hidden]`-Attribut respektieren, sonst
   bleibt der Picker sichtbar auch wenn er zugeklappt sein soll. */
/* WICHTIG: `display: flex !important` (nicht `block`), damit die ursprüngliche
   flex-column-Anordnung mit `gap: 10px` zwischen Allianz-Pills und Tile-Grid
   erhalten bleibt. `block` würde den gap entfernen → Tiles kleben an den Pills. */
.army.is-spearhead-locked.is-review .faction-pane:not([hidden]) { display: flex !important; }
.army.is-spearhead-locked.is-review .picker-head .picker-head__chev { display: inline-flex !important; }
.army.is-spearhead-locked.is-review .picker-head__title {
    pointer-events: auto;
    cursor: pointer;
}
/* Titel-Wrap im Review-Modus: nicht mehr klickbar (Faction-Auswahl gesperrt),
   aber sichtbar bleiben + Hover-Effekt deaktivieren. */
.army.is-review .picker-head__title {
    pointer-events: none;
    cursor: default;
}
.army.is-review .picker-head__title:hover { background: transparent; }

.army.is-review .tile              { cursor: default; }
.army.is-review .tile:hover        { transform: none; background: var(--surface-2); border-color: var(--border); }
.army.is-review .tile__add         { cursor: default; pointer-events: none; }

/* Mengenanzeige im gesperrten Modus: nur „× N", kein farbiger Hintergrund –
   passt zum allgemein minimalistischen Qty-Style. */
.army.is-review .tile__qty {
    pointer-events: none;
    background: none;
    border: none;
    padding: 0;
}
.army.is-review .tile__qty-val { padding: 0 2px; }
.army.is-review .tile__qty-val::before {
    content: "× ";
    color: var(--accent);
    font-weight: 800;
    margin-right: 1px;
}
.army.is-review .tile.is-selected .tile__points { padding-right: 70px; }

/* Toggle-Buttons („📦 Nur Besitz", „🔒 Liste sperren") als On/Off-Pill –
   inaktiv = normaler Ghost-Button, aktiv = gleicher Look wie .seg.is-active
   (Akzent-Gradient, weißer Text, transparenter Border). Kein extra Dot mehr. */
.toggle-only.is-active {
    background: var(--accent-strong);
    border-color: transparent;
    color: #fff;
}
.toggle-only.is-active:hover { background: var(--accent-strong-hover); }

/* SVG-Icon-System (Lucide). Sprite liegt unter icons.svg, eingebunden als
   inline <svg> direkt nach <body> – damit funktioniert <use href="#name"/>
   ohne Extra-HTTP-Request. currentColor lässt Icons die Schriftfarbe erben. */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    /* Default: Abstand zum nachfolgenden Text. Greift überall (Pillen, Tile-
       Buttons, Dialog-Titel, Filter, ...). Wird in icon-only-Kontexten unten
       wieder zurückgesetzt. */
    margin-right: 0.4em;
}
/* Icon-only Container (kein Text neben dem Icon): kein Abstand nötig.
   ACHTUNG: `:only-child` würde hier falsch greifen, weil ein SVG mit
   benachbartem Text-Node trotzdem als „only-child" zählt (Text-Nodes
   sind keine Element-Geschwister). Daher per Klasse explizit auflisten. */
.btn--gear .icon,
.tile__own .icon,
.tile__info .icon,
.tile__edit-fac .icon,
.te-edit .icon,
.dlg__close .icon,
.search-icon .icon,
.search-clear .icon { margin-right: 0; }
/* In Topbar-Gear-Buttons (rein-Icon): etwas größer, kein vertical-align-Hack nötig. */
.btn--gear .icon { width: 18px; height: 18px; vertical-align: middle; }
.btn--mini .icon { width: 14px; height: 14px; }

/* Notification-Dot: roter Punkt oben rechts auf Topbar-Buttons und Dialog-Tabs.
   Klasse wird von notifications.js gesetzt, sobald ein Notification-Typ > 0
   ist. Read-Receipt-Logik: Beim Öffnen des passenden Bereichs ruft das JS
   markSeen → Dot verschwindet, bis etwas Neues hereinkommt. */
.has-notification { position: relative; }
.has-notification::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--bg, #0f1115);
    box-sizing: content-box;
    pointer-events: none;
    z-index: 2;
}
/* Auf Tab-Segmenten kleiner und ohne Border – sitzt im Button-Body. */
.seg.has-notification::after {
    top: 4px;
    right: 6px;
    width: 6px;
    height: 6px;
    border: 0;
}

/* ---------- Pill (chip) ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-dim);
    font: 500 12.5px/1 var(--ff);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
    white-space: nowrap;
}
.pill:hover { background: var(--surface-3); color: var(--text); }
.pill:active { transform: scale(0.97); }
/* Filter-Row mit drei visuell getrennten Gruppen.
   Trenner als linkes Border + Padding, damit die Gruppen ohne Labels
   erkennbar zusammengehören. Mobile: Trenner verschwinden, wir nutzen
   nur Wrap. */
.filter-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin-top: 6px;
}
.filter-group {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    padding-left: 14px;
    border-left: 1px solid var(--border);
}
.filter-group:first-child { padding-left: 0; border-left: none; }
.filter-group[data-filter-group="alliance"] { margin-left: auto; }
@media (max-width: 720px) {
    .filter-group { padding-left: 0; border-left: none; }
    .filter-group[data-filter-group="alliance"] { margin-left: 0; }
}

.pill.is-active {
    background: var(--accent-strong);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}
.pill.is-active:hover { background: var(--accent-strong-hover); color: #fff; }
.pill--sm { height: 28px; padding: 0 10px; font-size: 11.5px; }
.pill--ghost { background: transparent; border-style: dashed; }
.pill--order.is-active    { background: var(--alliance-order); }
.pill--chaos.is-active    { background: var(--alliance-chaos); }
.pill--death.is-active    { background: var(--alliance-death); }
.pill--destruction.is-active { background: var(--alliance-destruction); }
/* Allianz-Hover behält die eigene Allianzfarbe (sonst überschreibt
   `.pill.is-active:hover` mit dem Standard-Akzent). Heller mischen für
   Hover-Feedback via color-mix. */
.pill--order.is-active:hover       { background: color-mix(in srgb, var(--alliance-order) 80%, white); }
.pill--chaos.is-active:hover       { background: color-mix(in srgb, var(--alliance-chaos) 80%, white); }
.pill--death.is-active:hover       { background: color-mix(in srgb, var(--alliance-death) 80%, white); }
.pill--destruction.is-active:hover { background: color-mix(in srgb, var(--alliance-destruction) 80%, white); }
.pill--order, .pill--chaos, .pill--death, .pill--destruction { border-color: var(--border); }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }


/* ---------- Shell ---------- */
.shell {
    /* Volle Browserbreite – keine zentrierte 1400-px-Insel mehr. */
    padding: clamp(14px, 3vw, 28px);
    padding-bottom: 180px;
}

.card.warn {
    padding: 22px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
}

/* ---------- Cap bar (minimalistisch) ---------- */
/* Head und Pane liegen jetzt in EINER Zeile (flex-row + wrap). Spart vertikalen
   Platz – auf schmalen Viewports bricht der Pane in eine zweite Zeile um. */
.capbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
    padding: 8px 10px;
    margin-bottom: 18px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}

.capbar__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.capbar__label {
    font-size: 10.5px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
}

/* Einheitliche Pill-Höhe über Segmented, Chips und Inline-Fields hinweg.
   Alles, was in der Capbar als Pill sichtbar ist, hat exakt dieselbe Höhe. */
:root { --pill-h: 32px; }

.segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    gap: 2px;
}
.seg {
    height: var(--pill-h);
    padding: 0 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-mute);
    border-radius: 999px;
    cursor: pointer;
    font: 600 12.5px var(--ff);
    line-height: 1;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}
.seg:hover { color: var(--text); }
.seg.is-active {
    background: var(--accent-strong);
    color: #fff;
}
.seg.is-active:hover { background: var(--accent-strong-hover); color: #fff; }
/* `display: inline-flex` oben überschreibt sonst das UA-Default für [hidden].
   Explizit zurückholen, sonst bleiben Stormbringer/Spearhead in beiden Editionen sichtbar. */
.seg[hidden] { display: none !important; }

/* Pane = die zweite Zeile, nur sichtbar wenn Mode gewählt.
   Wichtig: display:flex würde [hidden] überschreiben – deshalb explizit. */
.capbar__pane {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.capbar__pane[hidden] { display: none !important; }

.preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Chips für Presets: klein, klar, mit Active-State */
.chip {
    height: var(--pill-h);
    padding: 0 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-dim);
    border-radius: 999px;
    cursor: pointer;
    font: 600 12.5px var(--ff);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.chip:hover { background: var(--surface-3); color: var(--text); }
.chip:active { transform: scale(0.97); }
.chip.is-active {
    background: var(--accent-strong);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
}
.chip.is-active:hover { background: var(--accent-strong-hover); color: #fff; }

/* Inline-Field für kompakte Eingaben in Manuell/Punkte-Custom */
.inline-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.inline-field {
    height: var(--pill-h);
    padding: 0 12px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    transition: border-color .15s ease, background .15s ease;
    line-height: 1;
}
.inline-field:focus-within {
    border-color: var(--accent);
    background: var(--surface-3);
}
.inline-field span {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    white-space: nowrap;
}
.inline-field input {
    width: 60px;
    height: 100%;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text);
    font: 600 13px var(--ff);
    font-variant-numeric: tabular-nums;
    outline: none;
    text-align: center;
}
.inline-field input::placeholder { color: var(--text-mute); font-weight: 500; }

/* ---------- Dialog-Form-Felder (E-Mail, Name etc.) – im Gegensatz zu .inline-field
   sind das volle Form-Inputs mit Label oben + großem Eingabefeld darunter.   ---------- */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 0;
}
/* Zwei Form-Felder direkt untereinander brauchen keinen doppelten Margin */
.form-field + .form-field { margin-top: 4px; }
.form-field > span {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.form-field > input,
.form-field > textarea,
.form-field > select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: 500 14px/1.3 var(--ff);
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.form-field > input:focus,
.form-field > textarea:focus,
.form-field > select:focus {
    border-color: var(--accent);
    background: var(--surface-3);
}
.form-field > input::placeholder,
.form-field > textarea::placeholder {
    color: var(--text-mute);
    font-weight: 400;
}

/* Standalone-Inputs in Dialogen (außerhalb von .form-field) bekommen das
   gleiche dunkle Theme. Verhindert weiße Browser-Defaults wenn Inputs
   direkt in einem <div> stehen wie im Freund-einladen-Tab. */
dialog.dlg input[type="text"],
dialog.dlg input[type="email"],
dialog.dlg input[type="search"],
dialog.dlg input[type="number"],
dialog.dlg input[type="date"],
dialog.dlg input[type="datetime-local"],
dialog.dlg select,
dialog.dlg textarea {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: 500 14px/1.3 var(--ff);
    outline: none;
    padding: 9px 12px;
    transition: border-color .15s ease, background .15s ease;
}
dialog.dlg select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238b9aba' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}
dialog.dlg input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}
dialog.dlg input[type="text"]:focus,
dialog.dlg input[type="email"]:focus,
dialog.dlg input[type="search"]:focus,
dialog.dlg input[type="number"]:focus,
dialog.dlg input[type="date"]:focus,
dialog.dlg input[type="datetime-local"]:focus,
dialog.dlg select:focus,
dialog.dlg textarea:focus {
    border-color: var(--accent);
    background: var(--surface-3);
}
dialog.dlg input::placeholder { color: var(--text-mute); font-weight: 400; }

/* <code> inline in Beschreibungstexten: gleiches Lineheight wie der Absatz,
   nur Hintergrund + Monospace – kein eigener Zeilenumbruch. */
dialog.dlg p code,
dialog.dlg .dlg__sub code {
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    line-height: inherit;
    vertical-align: baseline;
    color: var(--accent);
}

/* ---------- Auth-Gating: Sichtbarkeit per body[data-user-state] -----------
   Mögliche Werte:
     anonymous       – nicht eingeloggt
     user            – eingeloggt, kein Admin
     admin           – eingeloggt mit is_admin=1
   Elemente markieren sich mit:
     data-requires-user   – sichtbar nur wenn eingeloggt (user oder admin)
     data-requires-admin  – sichtbar nur wenn admin
     data-requires-anonymous – sichtbar nur wenn NICHT eingeloggt
*/
body[data-user-state="anonymous"] [data-requires-user],
body[data-user-state="anonymous"] [data-requires-admin],
body[data-user-state="user"]      [data-requires-admin] {
    display: none !important;
}
body[data-user-state="user"]   [data-requires-anonymous],
body[data-user-state="admin"]  [data-requires-anonymous] {
    display: none !important;
}

@media (max-width: 640px) {
    /* Auf Mobile zurück zu Stapel-Layout: Spielmodus oben, Presets darunter */
    .capbar { flex-direction: column; align-items: stretch; }
    .segmented { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
    .seg { padding: 6px 4px; font-size: 11.5px; text-align: center; }
    .capbar__label { flex-basis: 100%; }
}

/* ---------- Slot chips in army footer ---------- */
.army__slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    border: none;
    background: var(--surface-3);
    font-size: 11px;
    letter-spacing: 0.3px;
    line-height: 1.15;
}
.slot-chip__lbl { color: rgba(255,255,255,0.75); text-transform: uppercase; font-weight: 600; }
.slot-chip__val { font-variant-numeric: tabular-nums; font-weight: 800; color: #fff; }
.slot-chip.is-full { background: #1e5a42; }
.slot-chip.is-full .slot-chip__lbl, .slot-chip.is-full .slot-chip__val { color: #fff; }
.slot-chip.is-over { background: #8e2e44; }
.slot-chip.is-over .slot-chip__lbl, .slot-chip.is-over .slot-chip__val { color: #fff; }

/* General-Pille im Footer: grün mit Haken wenn gesetzt, orange als Erinnerung wenn fehlt. */
.slot-chip--general {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 10.5px;
}
.slot-chip--general.is-set { background: #1e5a42; color: #fff; }
.slot-chip--general.is-missing { background: #b4661e; color: #fff; }

/* ---------- Armies grid ---------- */
.armies {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 1020px) {
    .armies { grid-template-columns: 1fr 1fr; gap: 22px; }
}

.army {
    background: linear-gradient(180deg, var(--surface) 0%, #111729 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-1);
    position: relative;
    overflow: hidden;
}
.army::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--army-a);
    opacity: 0.9;
}
.army[data-army="B"]::before { background: var(--army-b); }

.army__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.army__name {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font: 600 19px var(--ff);
    padding: 4px 2px;
    border-bottom: 1px dashed transparent;
    outline: none;
    min-width: 0;
}
.army__name:hover { border-bottom-color: var(--border); }
.army__name:focus { border-bottom-color: var(--accent); }
.army__points { text-align: right; font-variant-numeric: tabular-nums; }
.army__points-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.army[data-army="A"] .army__points-value { color: var(--army-a); }
.army[data-army="B"] .army__points-value { color: var(--army-b); }
.army__points-cap { color: var(--text-mute); font-size: 15px; margin-left: 2px; }
.army__points.is-over .army__points-value { color: var(--bad) !important; }
.army__points.is-over .army__points-cap { color: var(--bad); }

/* ---------- Pickers section ---------- */
.pickers { display: flex; flex-direction: column; gap: 12px; }
.picker-head {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
}
/* Wenn direkt darunter eine offene Fraktions-Auswahl steht, verschmelzen picker-head
   und faction-pane optisch zu einem Kasten – obere Rundung am Kopf, untere am Pane. */
.picker-head:has(+ .faction-pane:not([hidden])) {
    border-radius: 12px 12px 0 0;
    border-bottom-color: transparent;
}
/* Klickbarer Titel-Bereich: Label + Name. Triggert die gleiche Auf-/Zu-Aktion
   wie der Chevron rechts. Hover hebt den Bereich leicht hervor, damit man sieht
   dass er klickbar ist. */
.picker-head__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    user-select: none;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 6px;
    transition: background .12s;
}
.picker-head__title:hover { background: rgba(255,255,255,0.04); }
.picker-head__title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.picker-head__lbl {
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.picker-head__value {
    flex: 1;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Chevron als Inline-SVG-Symbol – kein Button-Look, deutlich sichtbar.
   SVG (statt Text-Glyph) damit die Rotation wirklich um den geometrischen
   Mittelpunkt läuft – das `›`-Zeichen hat intrinsisch asymmetrische Kerning-
   Räume und springt beim Drehen sichtbar aus der Mitte. */
.picker-head__chev {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mute);
    cursor: pointer;
    user-select: none;
    transition: color .12s, transform .25s ease;
    transform-origin: 50% 50%;
    /* Sitzt ganz rechts in der Leiste (letztes Element nach allen Buttons) */
}
.picker-head__chev svg {
    width: 24px;
    height: 24px;
    display: block;
}
.picker-head__chev:hover { color: var(--accent); }
/* Default-Icon (im SVG) zeigt nach unten = zu. Wenn offen: 180° flippen. */
.picker-head__chev[aria-expanded="true"]  { transform: rotate(180deg); }
.picker-head__chev[aria-expanded="false"] { transform: rotate(0deg); }
.picker-head__chev:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.faction-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    padding: 12px;
    /* Negativer Margin schluckt den `gap: 12px` des Elterns `.pickers`, damit
       der untere Kasten flush an den picker-head andockt. */
    margin-top: -12px;
}
.faction-pane[hidden] { display: none !important; }

.ally-info {
    font-size: 12px;
    color: var(--text-dim);
    background: rgba(124,92,255,0.08);
    border-left: 3px solid var(--accent-2);
    padding: 8px 10px;
    border-radius: 8px;
}
.ally-info .tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.ally-info .ally-note {
    font-style: italic;
    line-height: 1.35;
}

/* ---------- Unit toolbar ---------- */
.unit-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.search-icon {
    position: absolute;
    left: 10px;
    font-size: 14px;
    opacity: 0.6;
    pointer-events: none;
}
.search-wrap input {
    flex: 1;
    height: 38px;
    padding: 0 34px 0 30px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    font: 500 14px var(--ff);
}
/* Nativen Clear-Button von type="search" ausblenden – wir haben einen eigenen. */
.search-wrap input::-webkit-search-cancel-button,
.search-wrap input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-wrap input::-ms-clear { display: none; }
.search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(106,169,255,0.18); }
.search-clear {
    position: absolute;
    right: 4px;
    background: transparent;
    border: none;
    color: var(--text-mute);
    font-size: 20px;
    cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 8px;
}
.search-clear:hover { color: var(--bad); background: rgba(255,107,138,0.1); }

.role-filter { justify-content: flex-start; }
.ally-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 8px;
    user-select: none;
}
.ally-toggle input { accent-color: var(--accent); }

/* ---------- Tile grid ---------- */
.tile-grid {
    display: grid;
    gap: 10px;
}
.tile-grid--factions {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.tile-grid--units {
    /* Bei voller Browserbreite möglichst viele Kacheln nebeneinander.
       Einheitenkacheln brauchen nicht mehr als 150 px für gute Lesbarkeit. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    min-height: 40px;
}

/* Manifestations (Endless Spells / Faction Terrain) – eigene Sektion unterhalb
   der regulären Einheiten, mit Trennlinie und kleinerem Header. */
.manifest-section {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.manifest-section[hidden] { display: none; }
.manifest-section__h3 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.tile {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    transition: transform .08s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
    overflow: hidden;
    min-height: 120px;
    /* Eigener Stacking-Kontext, damit interne z-indexes (Qty-Control, Badge)
       nicht aus der Kachel ausbrechen und über sticky-Elemente drüber liegen. */
    isolation: isolate;
}
.tile:hover { background: var(--surface-3); border-color: #344071; transform: translateY(-1px); }
.tile:active { transform: translateY(0) scale(0.98); }
.tile.is-selected {
    border-color: var(--accent);
}
.tile.is-disabled:hover { transform: none; background: var(--surface-2); }
/* Verbündete bekommen nur noch die Pille „Verbündet" – kein Border-Akzent mehr. */

.tile__add {
    all: unset;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    color: inherit;
    flex: 1;
}

.tile__img {
    width: auto;
    aspect-ratio: 16/9;
    /* Bündig an den oberen Rand der Kachel: negative Margins fressen das
       tile-padding an top + Seiten, untere Kante bekommt wieder Platz. */
    margin: -10px -10px 4px;
    border-radius: 14px 14px 0 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(106,169,255,0.18), transparent 60%),
        linear-gradient(135deg, #1b2142, #111629);
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}
.tile__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Einheiten-Kachel ohne eigenes Bild fällt auf Fraktionswappen zurück –
   das zeigen wir gedämpft (Graustufe + halbtransparent), damit „Bild fehlt"
   sofort erkennbar ist. */
.tile.is-faction-fallback .tile__photo {
    filter: grayscale(100%);
    opacity: 0.5;
}
/* display:block würde das native [hidden] überschreiben → explizit ausblenden */
.tile__photo[hidden] { display: none !important; }
/* Tile-Icon-Container: Flexbox-Anordnung oben links bzw. oben rechts.
   Fehlende Icons (z.B. tile__edit für Non-Admins) verschieben die Reihenfolge
   nicht – die anderen rücken automatisch nach. */
.tile__icons {
    position: absolute;
    top: 6px;
    z-index: 3;
    display: flex;
    gap: 6px;
    pointer-events: none;            /* Wrapper soll Klicks durchlassen */
}
.tile__icons--start { left: 6px; }
.tile__icons--end   { right: 6px; }
.tile__icons > * { pointer-events: auto; }

/* Legends-Pille – flache Hintergrundfarbe, weiße Schrift, sonst nichts.
   Dunkleres Gold (Dark Goldenrod-Bereich), damit weiße Schrift gut lesbar
   bleibt und es auf dem dunkelblauen Tile als Gold erkennbar ist. */
.tile__roles .role-pill--legends { background: #a87a0d; color: #fff; }

/* tile__edit (Unit-Tile) wurde entfernt – Bild-Bearbeiten liegt jetzt im
   Info-Modal (ℹ → „🖼 Bild bearbeiten"). Übersetzungen via ✎-Stifte im Modal.
   Faction-Tiles haben kein Info-Modal, dort sitzt der Bild-Edit weiterhin
   direkt auf der Kachel als tile__edit-fac. */
.tile__edit-fac {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    background: rgba(17,22,38,0.85);
    backdrop-filter: blur(4px);
    color: var(--text-dim);
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.tile:hover .tile__edit-fac,
.tile:focus-within .tile__edit-fac { opacity: 1; }
.tile__edit-fac:hover { color: var(--text); background: rgba(30,40,80,0.95); }
@media (hover: none) { .tile__edit-fac { opacity: 0.85; } }

/* „Bild bearbeiten"-Textlink neben dem ✎-Stift im Warscroll-Modal-Header.
   Bewusst kein Button-Look – dezent, mit etwas Abstand zum Stift. */
.ws-edit-image-link {
    margin-left: 14px;
    font-size: 11px;
    color: var(--text-mute);
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}
.ws-edit-image-link:hover { color: var(--accent); text-decoration: underline; }

/* Besitz-Haken: oben rechts, sichtbar NUR bei Hover (sonst versteckt –
   sonst sieht es aus als wären alle besessenen Kacheln „ausgewählt").
   Nicht-besessen = outline, besessen = grün gefüllt. */
.tile__own {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1.5px solid var(--border);
    background: rgba(17,22,38,0.8);
    backdrop-filter: blur(4px);
    color: var(--text-mute);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
}
.tile:hover .tile__own,
.tile:focus-within .tile__own { opacity: 1; }
.tile__own:hover { color: #2a7c58; border-color: #2a7c58; }
.tile.is-owned .tile__own {
    background: #1e5a42;
    border-color: #1e5a42;
    color: #fff;
    /* Platz für Zahl bei Mehrfach-Besitz, bleibt aber kompakt */
    min-width: 26px;
    padding: 0 6px;
    width: auto;
    font-size: 12px;
}
.tile.is-owned .tile__own:hover { background: #175138; }
/* Touch-Geräte ohne Hover: dauerhaft sichtbar, sonst nicht erreichbar. */
@media (hover: none) {
    .tile__own { opacity: 0.85; }
}

/* Im Übersichts-Modus die meisten Editier-Controls ausblenden – der
   General-Marker bleibt nutzbar, damit man auch in der Review-Ansicht
   noch einen General bestimmen kann. */
.army.is-review .tile__own,
.army.is-review .tile__reinforce { display: none !important; }

/* General-Marker: teilt sich die Position mit Verstärken (unten links) –
   Generäle sind praktisch immer „Nicht verstärkbar", die beiden Buttons
   schließen sich also gegenseitig aus. */
.tile__general {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: rgba(17,22,38,0.88);
    color: var(--text-dim);
    font: 700 10px var(--ff);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.15;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tile__general:hover { color: #ffd36b; border-color: #ffd36b; }
.tile__general.is-active {
    background: #d4a13a;
    border-color: #ffd36b;
    color: #2a1f08;
    box-shadow: 0 0 0 2px rgba(255,211,107,0.22);
}
.tile__general.is-active:hover { background: #e7b347; color: #2a1f08; }
.tile__general.is-disabled,
.tile__general:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: auto; /* damit der title-Tooltip erscheint */
}
.tile__general.is-disabled:hover {
    color: var(--text-dim);
    border-color: var(--border);
}

/* Verstärken-Toggle: unten links, kompakt – auf schmalen Kacheln nur das
   Icon + Multiplier sichtbar, damit das Qty-Control rechts Platz hat. */
.tile__reinforce {
    position: absolute;
    bottom: 8px;
    left: 10px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(17,22,38,0.85);
    color: var(--text-dim);
    font: 700 10px/1.1 var(--ff);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    /* Maximal so breit wie nötig – NIE bis in die Qty-Zone ragen. */
    max-width: calc(100% - 76px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tile__reinforce:hover { color: var(--accent); border-color: var(--accent); }
.tile__reinforce.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.tile--faction .tile__img { aspect-ratio: 1/1; max-height: 110px; }

/* „Keine Fraktion"-Kachel im Faction-Picker: visuelle Reset-Aktion mit dem
   gleichen Aufbau wie reguläre Faction-Tiles – ✕-Icon oben (wo sonst das
   Faction-Bild ist), Name + Meta unten im Content-Bereich.
   Roter, gedämpfter Look macht klar dass es eine destruktive Aktion ist. */
.tile--clear .tile__photo { display: none !important; }
.tile--clear .tile__bg {
    /* Etwas mehr rote Tönung als Standard-Faction-bg */
    background:
        radial-gradient(circle at 50% 35%, rgba(220,100,100,0.18), transparent 60%),
        linear-gradient(135deg, #1f1820, #14111a);
}
.tile--clear .tile__overlay {
    /* Sanfter Gradient, damit der Untertitel unten lesbar bleibt */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(20,10,10,0.55) 75%,
        rgba(20,10,10,0.88) 100%
    );
}
.tile--clear .tile__bg .tile__emoji {
    font-size: 54px;
    color: #e07676;
    opacity: 0.9;
    /* etwas nach oben drücken, damit es nicht mit dem Bottom-Content kollidiert */
    margin-bottom: 40px;
}
/* Content unten halten – wir haben keine alliance-pill als margin-bottom:auto-
   Spacer, also pushen wir den ganzen Content per justify-content. */
.tile--clear .tile__content { justify-content: flex-end; }
.tile--clear .tile__name {
    color: #f5b5b5;
    text-shadow: 0 2px 6px rgba(0,0,0,0.65);
}
.tile--clear .tile__meta { color: rgba(245, 181, 181, 0.75); }
.tile--clear:hover .tile__bg {
    background:
        radial-gradient(circle at 50% 35%, rgba(220,100,100,0.28), transparent 60%),
        linear-gradient(135deg, #2a1820, #1b1118);
}

/* ---------- Fraktions-Kachel: Bild als Hintergrund mit Gradient-Overlay ---------- */
.tile--faction {
    padding: 0;
    aspect-ratio: 3/4;
    min-height: 180px;
    overflow: hidden;
    border-top: none;
}
.tile--faction .tile__add {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
}
.tile--faction .tile__bg {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(106,169,255,0.22), transparent 60%),
        linear-gradient(135deg, #1b2142, #111629);
}
.tile--faction .tile__bg .tile__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tile--faction .tile__bg .tile__emoji {
    font-size: 54px;
    line-height: 1;
    filter: saturate(1.2);
}
.tile--faction .tile__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(10,14,24,0.15) 35%,
        rgba(10,14,24,0.72) 75%,
        rgba(10,14,24,0.92) 100%
    );
}
.tile--faction .tile__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px 12px;
    gap: 3px;
}
.tile--faction .tile__alliance-pill {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    font: 700 9.5px var(--ff);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(10,14,24,0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.14);
    margin-bottom: auto; /* drückt Name/Meta nach unten */
}
.tile--faction.alliance--order .tile__alliance-pill       { background: var(--alliance-order); }
.tile--faction.alliance--chaos .tile__alliance-pill       { background: var(--alliance-chaos); }
.tile--faction.alliance--death .tile__alliance-pill       { background: var(--alliance-death); }
.tile--faction.alliance--destruction .tile__alliance-pill { background: var(--alliance-destruction); }
.tile--faction .tile__name {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0,0,0,0.55);
    word-break: break-word;
}
.tile--faction .tile__meta {
    color: rgba(255,255,255,0.82);
    font-size: 11px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
/* Tile-Content explizit am Top-Anker halten + freien Platz am Ende sammeln.
   Sonst verteilt sich Whitespace seltsam zwischen den Items, wenn der Box-
   Name kürzer ist als bei anderen Tiles in derselben Reihe.
   `:not(.tile--clear)` damit die Spezial-Layout-Regel für die Clear-Kachel
   (Content am Bottom, X-Icon oben) nicht überschrieben wird. */
.tile--faction:not(.tile--clear) .tile__content { justify-content: flex-start; }
/* Keine Top-Akzentlinie mehr – das macht jetzt die Allianz-Pille */
.tile--faction.alliance--order,
.tile--faction.alliance--chaos,
.tile--faction.alliance--death,
.tile--faction.alliance--destruction { border-top: 1px solid var(--border); }
/* Selected-Zustand: stärkerer Akzentrand */
.tile--faction.is-selected { border-width: 2px; }

@media (max-width: 520px) {
    .tile--faction { min-height: 150px; }
    .tile--faction .tile__bg .tile__emoji { font-size: 42px; }
    .tile--faction .tile__name { font-size: 13px; }
}
.tile__emoji {
    font-size: 32px;
    filter: saturate(1.15);
    line-height: 1;
}
.tile--faction .tile__emoji { font-size: 38px; }

.tile__name {
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.2;
    word-break: break-word;
}
/* Sub-Title über dem eigentlichen Box-/Unit-Namen (z.B. Fraktion einer
   Speerspitzen-Box). Optisch identisch zur Meta-Zeile darunter (gleicher
   Farbton, gleiche Größe + Text-Shadow), damit die Tile-Hierarchie aufgeräumt
   wirkt. Umbrechen erlaubt – lange Fraktionsnamen sollen nicht abgeschnitten
   werden. */
.tile__subname {
    display: block;
    color: rgba(255,255,255,0.82);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
    word-break: break-word;
}
.tile__meta { font-size: 11px; color: var(--text-dim); }
.tile__roles { display: flex; flex-wrap: wrap; gap: 3px; }
.tile__roles .role-pill {
    font-size: 9px;
    /* Kompakteres Padding (vorher 3 8 → jetzt 2 6), damit zwei Pills wie
       „ANFÜHRER" + „VERBÜNDET" auf schmalen Tiles nebeneinander passen. */
    padding: 2px 6px;
    /* Kein 999px-Radius – bei umgebrochenen Pills sieht das gequetscht aus.
       6 px liefert eine sanfte Rundung, die bei 1 wie 3 Zeilen gleich wirkt. */
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--text);
    border: none;
    /* letter-spacing reduziert – schafft weiteren Platz */
    letter-spacing: 0.2px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.15;
}
/* Farb-Varianten: alle gefüllt, weiße Schrift, kein Outline.
   Dunklere Sättigung für besseren Kontrast zur weißen Schrift auf dunklem
   Tile-Hintergrund (vorher waren manche Töne zu hell). */
.tile__roles .role-pill--rule   { background: #3463b8; color: #fff; }
.tile__roles .role-pill--ally   { background: #5d40d4; color: #fff; }
.tile__roles .role-pill--hero   { background: #b0701f; color: #fff; }
.tile__roles .role-pill--wizard { background: #6541c4; color: #fff; }
.tile__roles .role-pill--priest { background: #2a8862; color: #fff; }
/* Slot-Rollen – jede Rolle ihre eigene Farbe, damit sie auf dem dunklen
   Tile-Hintergrund nicht in der Standard-surface-3-Pille untergeht. */
.tile__roles .role-pill--leader     { background: #a8442f; color: #fff; }
.tile__roles .role-pill--battleline { background: #36588a; color: #fff; }
.tile__roles .role-pill--behemoth   { background: #8c3535; color: #fff; }
.tile__roles .role-pill--artillery  { background: #a06832; color: #fff; }
.tile__roles .role-pill--spell      { background: #564396; color: #fff; }
.tile__roles .role-pill--invocation { background: #426d96; color: #fff; }
.tile__roles .role-pill--terrain    { background: #3f6b3f; color: #fff; }
/* Bedingungs-Pills: Volle Kachelbreite, kleiner Font, damit längere Texte lesbar bleiben. */
.tile__roles .role-pill--requires,
.tile__roles .role-pill--conditional {
    flex-basis: 100%;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 10.5px;
    line-height: 1.25;
    text-align: left;
    padding: 4px 8px;
    white-space: normal;
}
.tile__roles .role-pill--requires.is-met     { background: rgba(62,174,130,0.18); color: #3eae82; border-left: 3px solid #3eae82; border-radius: 4px; }
.tile__roles .role-pill--requires.is-unknown { background: rgba(124,92,255,0.12); color: #b8a5ff; border-left: 3px solid #7c5cff; border-radius: 4px; }
.tile__roles .role-pill--requires.is-unmet   { background: rgba(220,80,80,0.14); color: #e07676; border-left: 3px solid #c84242; border-radius: 4px; }
.tile__roles .role-pill--conditional         { background: rgba(180,180,180,0.10); color: var(--text-mute); border-left: 3px solid #666; border-radius: 4px; }
.tile__roles .role-pill--conditional.is-met  { background: rgba(62,174,130,0.18); color: #3eae82; border-left-color: #3eae82; }

/* Kachel ist nicht verfügbar (requires not met). Soft-Dim, nicht vollständig ausblenden. */
.tile.is-requires-unmet:not(.is-selected) {
    filter: grayscale(70%);
    opacity: 0.55;
}
.tile.is-requires-unmet:not(.is-selected):hover {
    opacity: 0.85;
}
.tile__sizeline { font-size: 11px; color: var(--text-mute); }
.tile__points {
    margin-top: auto;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.tile__points-lbl { color: var(--text-mute); font-weight: 500; font-size: 13px; }

/* Minimalistisches „– 2 +" ohne Pill, ohne Hintergrund – nur Text.
   Gleiche Baseline wie der Verstärken-Button links, damit die beiden als
   Zeile wirken und nicht gegeneinander drücken. */
.tile__qty {
    position: absolute;
    bottom: 8px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: none;
    z-index: 2;
}
/* Native display: inline-flex würde sonst [hidden] überschreiben. */
.tile__qty[hidden] { display: none !important; }
/* Wenn die Kachel ausgewählt ist, reservieren wir rechts unten etwas Platz,
   damit Punktwert & Qty-Controls sich nicht überlappen. */
.tile.is-selected .tile__add { padding-bottom: 26px; }
.tile.is-selected .tile__points { padding-right: 70px; }
.tile__qty-btn {
    width: auto;
    height: auto;
    padding: 0 2px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease;
}
.tile__qty-btn:hover { background: none; color: var(--accent); }
.tile__qty-val {
    min-width: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 13px;
    color: var(--accent);
}

.tile__badge-ally {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    font-weight: 700;
    background: rgba(124,92,255,0.18);
    color: #c4b4ff;
    border: 1px solid rgba(124,92,255,0.4);
}
/* „Slot voll" / „über Limit" als volles Banner am oberen Rand – liegt nicht mehr
   über dem Punktwert und ist auf schmalen Kacheln deutlich lesbar. */
.tile__badge-over {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 3;
    text-align: center;
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 800;
    background: rgba(255,107,138,0.3);
    color: #ffd4dc;
    border-bottom: 1px solid rgba(255,107,138,0.5);
    border-radius: 14px 14px 0 0;
    backdrop-filter: blur(2px);
}
/* Stärkeres Dimmen, damit gesperrte Kacheln (Slot voll, über Limit) klar als
   "nicht wählbar" erkennbar sind – auch für Verbündete. */
.tile.is-disabled {
    opacity: 0.4;
    filter: grayscale(0.55);
}

/* Faction tile alliance tinting */
.tile.alliance--order    { border-top: 3px solid var(--alliance-order); }
.tile.alliance--chaos    { border-top: 3px solid var(--alliance-chaos); }
.tile.alliance--death    { border-top: 3px solid var(--alliance-death); }
.tile.alliance--destruction { border-top: 3px solid var(--alliance-destruction); }

/* Empty hint */
.no-units {
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
}
.no-units__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
}
.no-units__filters[hidden] { display: none; }
.no-units__filter {
    background: rgba(37, 99, 235, 0.16);
    color: var(--accent);
    border: 1px solid rgba(37, 99, 235, 0.35);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
/* E-Mail-Notification-Prefs im Account-Dialog */
.email-prefs { display: flex; flex-direction: column; gap: 10px; }
.email-prefs__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    line-height: 1.4;
}
.email-prefs__row input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--accent-strong);
    margin-top: 1px;
    flex: 0 0 auto;
    cursor: pointer;
}
.email-prefs__row select {
    flex: 1;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
}
.email-prefs__row small { color: var(--text-dim); font-size: 11px; }
.email-prefs__lbl {
    flex: 0 0 130px;
    color: var(--text-mute);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-top: 6px;
}
.email-prefs__row--master {
    padding: 10px 12px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 10px;
}
.email-prefs__group {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 14px 10px;
    margin: 6px 0 0;
}
.email-prefs__group legend {
    padding: 0 6px;
    color: var(--text-mute);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Cross-Faction-Hint: dezenter, in Akzent-Gelb, damit der „in einer anderen
   Fraktion gefunden"-Hinweis vom Filter-Hinweis unterscheidbar bleibt. */
.no-units__filter--foreign {
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
    text-transform: none;
    letter-spacing: 0;
}

/* ---------- Army footer ---------- */
.army__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-dim);
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}
.army__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-soft);
    font-size: 11px;
    letter-spacing: 0.3px;
}
.army__purity {
    font-weight: 600;
    color: var(--text-dim);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-soft);
    max-width: 100%;
    text-align: right;
}
.army__purity.pure  { color: var(--good); border-color: rgba(83,211,157,0.3); background: rgba(83,211,157,0.08); }
.army__purity.mixed { color: var(--warn); border-color: rgba(255,180,84,0.3); background: rgba(255,180,84,0.08); }
.army__purity.over  { color: var(--bad);  border-color: rgba(255,107,138,0.35); background: rgba(255,107,138,0.1); }

/* ---------- Compare bar ---------- */
.compare {
    position: sticky;
    bottom: 0;
    z-index: 20; /* über Kacheln & deren internen Controls */
    margin-top: 22px;
    background: rgba(13,18,32,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    box-shadow: 0 -6px 30px rgba(0,0,0,0.45);
}
.compare__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 10px;
}
.compare__side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.compare__side--a { text-align: left; color: var(--army-a); }
.compare__side--b { text-align: right; color: var(--army-b); }
.compare__side--b .compare__top { justify-content: flex-end; }
.compare__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.compare__label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare__val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

.compare__slots { display: flex; flex-wrap: wrap; gap: 4px; }
.compare__side--b .compare__slots { justify-content: flex-end; }
.compare__purity {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface-3);
    border: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
}
.compare__side--b .compare__purity { align-self: flex-end; }
.compare__purity.pure  { background: #1e5a42; }
.compare__purity.mixed { background: #8a5a1e; }
.compare__purity.over  { background: #8e2e44; }
.compare__purity:empty { display: none; }
.compare__mid { text-align: center; }
.compare__diff {
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.compare__diff-lbl { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.5px; }
.compare__bar {
    display: flex;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
}
.compare__bar-a { background: var(--army-a); transition: width .3s ease; }
.compare__bar-b { background: var(--army-b); transition: width .3s ease; }
.compare__actions {
    display: flex;
    /* Speichern-Buttons links/rechts (Slot A und B), Center-Gruppe in der Mitte
       (Teilen + Spiel starten). Ohne Save-Buttons (anonym) fällt die Center-
       Gruppe automatisch zentriert (margin auto). */
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.compare__actions-center { display: flex; gap: 8px; margin: 0 auto; }

/* ---------- Page footer ---------- */
.pagefoot {
    padding: 18px clamp(14px, 3vw, 24px) 26px;
    color: var(--text-mute);
    font-size: 11.5px;
    text-align: center;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 520px) {
    .topbar h1 { font-size: 15px; }
    .topbar__sub { font-size: 11px; }
    .army__points-value { font-size: 22px; }
    .army { padding: 14px; border-radius: 18px; }
    .shell { padding-bottom: 200px; }
    .compare { border-radius: 16px; padding: 12px 14px; }
    .compare__val { font-size: 18px; }
    .compare__diff { font-size: 17px; }
    .tile-grid--factions { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .tile-grid--units    { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .tile__name { font-size: 13px; }
    .tile__img  { aspect-ratio: 16/10; }
    .tile--faction .tile__img { max-height: 74px; }
}

/* ---------- Bild-Editor Dialog ---------- */
.dlg {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    padding: 0;
    width: min(560px, 92vw);
    max-height: 92vh;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    /* Wichtig: Dialog selbst NICHT scrollen lassen, sonst hat das Modal
       zwei verschachtelte Scrollbalken (Dialog + .dlg__inner). Nur
       .dlg__inner scrollt. */
    overflow: hidden;
}
.dlg::backdrop {
    background: rgba(6,9,18,0.72);
    backdrop-filter: blur(6px);
}
.dlg__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 16px;
    max-height: 92vh;
    overflow: auto;
    /* Dialog-Breite kommt vom <dialog> selbst (min(560px, 92vw)).
       Der innere <form> soll diese einfach voll nutzen. */
    width: 100%;
    box-sizing: border-box;
}
.dlg__message { margin: 0; color: var(--text); line-height: 1.45; }
.btn--danger {
    background: #9a2c40;
    border-color: transparent;
    color: #fff;
    font-weight: 700;
}
.btn--danger:hover { background: #b3354d; }

/* Erfolg/„go"-Variante – grün, signalisiert „alles passt, klick mich". */
.btn--success {
    background: #16a34a;
    border-color: transparent;
    color: #fff;
    font-weight: 700;
}
.btn--success:hover { background: #15803d; }
.btn--success:disabled {
    background: #2a3340;
    color: #6b7280;
    cursor: not-allowed;
}

/* Vollbreite Buttons im Settings-Dialog. */
.btn--fluid {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 14px;
}

/* Gear-Button in der Topbar – quadratisch, gleiche Höhe wie die anderen .btn. */
.btn--gear {
    font-size: 18px;
    line-height: 1;
    width: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Gruppen im Settings-Dialog – Label + Stack aus Buttons. */
.settings-group { display: flex; flex-direction: column; gap: 6px; }
.settings-group + .settings-group { margin-top: 4px; }

/* Profil-Card im Account-Dialog: Name, Email + Pillen-Reihe (Badges/Tokens) */
.account-profile {
    background: linear-gradient(135deg, rgba(106,169,255,0.08), rgba(124,92,255,0.08));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.account-profile__name { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.account-profile__email { color: var(--text-mute); font-size: 12px; margin-bottom: 10px; }
.account-profile__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.account-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600;
    color: var(--text);
}
.account-chip--admin   { background: var(--accent-strong); color: #fff; border-color: transparent; }
.account-chip--premium { background: #d99a1c; color: #1a1a1a; border-color: transparent; }
.account-chip--tokens  { color: var(--accent); }

/* Friend-Code: monospace Anzeige + Copy-Button */
.friend-code-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.friend-code {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 14px;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 18px; font-weight: 700; letter-spacing: 2px;
    color: var(--accent);
}

/* Token-Ledger: kompakte Liste der Token-Bewegungen */
.account-ledger {
    list-style: none; margin: 0; padding: 0;
    max-height: 140px; overflow-y: auto;
    font-size: 12px;
}
.account-ledger li {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 0; border-bottom: 1px solid var(--border-soft);
}
.account-ledger li:last-child { border-bottom: none; }
.account-ledger__delta { font-weight: 700; }
.account-ledger__delta.is-positive { color: #6acf85; }
.account-ledger__delta.is-negative { color: #ff8888; }
.account-ledger__when { color: var(--text-mute); font-size: 11px; }
.account-ledger__empty { color: var(--text-mute); font-style: italic; }
.settings-group__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-mute);
    padding: 0 2px 2px;
}
.dlg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.dlg__title { margin: 0; font-size: 17px; font-weight: 700; }
.dlg__close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}
.dlg__close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.dlg__sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-dim);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.dlg__sub b { color: var(--text); }
.dlg__hint {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 11px;
    color: var(--text-mute);
    background: rgba(255,255,255,0.04);
    padding: 2px 6px;
    border-radius: 6px;
}
/* Vertikaler Layout-Container im Bild-Editor-Modal: Preview-Rahmen,
   Google-Bild-Suche-Button und Strg+V-Hinweis als gleich breite Stapel-
   Elemente mit konsistentem Abstand. */
.dlg__img-body { display: flex; flex-direction: column; gap: 14px; }

.dlg__preview { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

/* Crop-Rahmen. aspect-ratio wird dynamisch per data-aspect gesetzt.
   Querformat (16/9, Default für Einheiten) nimmt die volle Containerbreite
   – so ist der Frame gleich breit wie die Buttons darunter. Bei 1x1 und 3x4
   (Faction/Hochformat) wird der Frame absichtlich schmaler gehalten, damit
   er nicht überproportional dominiert. */
.crop-frame {
    width: 100%;
    aspect-ratio: 16/9;
    margin: 0 auto;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 20%, rgba(106,169,255,0.15), transparent 60%),
        linear-gradient(135deg, #1b2142, #111629);
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.crop-frame[data-aspect="1x1"] { aspect-ratio: 1/1; max-width: 320px; }
.crop-frame[data-aspect="3x4"] { aspect-ratio: 3/4; max-width: 300px; }
.crop-frame.is-empty { cursor: default; }
.crop-frame.is-dragging { cursor: grabbing; }

.crop-img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    -webkit-user-drag: none;
    pointer-events: none;
}
.crop-img[hidden] { display: none !important; }

.crop-empty, .crop-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-mute);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}
.crop-empty { top: 50%; transform: translate(-50%, -50%); max-width: 80%; white-space: normal; text-align: center; }
.crop-hint  { bottom: 6px; font-size: 10.5px; letter-spacing: 0.3px; opacity: 0.55; }
.crop-frame.is-empty .crop-hint { display: none; }
.crop-frame:not(.is-empty) .crop-empty { display: none; }

/* Overlay mit Raster-Andeutung, damit man sieht wie der Ausschnitt wirkt */
.crop-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}

.crop-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.crop-controls__lbl {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-mute);
    letter-spacing: 0.5px;
    font-weight: 600;
}
.crop-controls input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
    height: 20px;
    cursor: pointer;
}

.dlg__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dlg__actions .btn { flex: 1; min-width: 180px; text-decoration: none; }

/* Prominenter Google-Button: CTA-Style mit Icon, Text, Pfeil */
.google-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    text-decoration: none;
    color: #fff;
    background: var(--accent-strong);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: 0 6px 22px rgba(37,99,235,0.28);
}
.google-btn:hover {
    background: var(--accent-strong-hover);
    box-shadow: 0 8px 26px rgba(37,99,235,0.4);
}
.google-btn:active { transform: scale(0.985); }
.google-btn__icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.16);
    border-radius: 10px;
    font-size: 20px;
    flex: 0 0 auto;
}
.google-btn__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}
.google-btn__text b { font-size: 15px; font-weight: 700; }
.google-btn__text small { font-size: 11.5px; opacity: 0.85; font-weight: 500; }
.google-btn__arrow { font-size: 18px; opacity: 0.75; }

.dlg__tip--paste {
    text-align: center;
    padding: 10px 12px;
    background: rgba(106,169,255,0.08);
    border: 1px dashed rgba(106,169,255,0.4);
    border-radius: 10px;
    margin: 0;
    color: var(--text-dim);
}
.dlg__tip--paste kbd {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 6px;
    font: 600 11.5px ui-monospace, monospace;
    color: var(--text);
}

.dlg__field { display: flex; flex-direction: column; gap: 4px; }
.dlg__field > span {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.dlg__field input {
    height: 40px;
    padding: 0 12px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    font: 500 14px var(--ff);
}
.dlg__field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(106,169,255,0.15); }
.dlg__tip { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.dlg__tip b { color: var(--text); }
.dlg__status {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
}
.dlg__status.is-ok  { color: var(--good); background: rgba(83,211,157,0.08);  border-color: rgba(83,211,157,0.35); }
.dlg__status.is-err { color: var(--bad);  background: rgba(255,107,138,0.08); border-color: rgba(255,107,138,0.35); }
.dlg__foot {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}
.dlg__foot .spacer { flex: 1; }

/* Gespeicherte Aufstellungen */
.saves-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Kein eigener Scrollbalken hier – das Modal-Inner (.dlg__inner) scrollt
       schon; eine zweite Scrollbox würde verschachtelte Scrollbalken erzeugen. */
}
.saves-section-h3 {
    margin: 12px 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.saves-section-h3:first-child { margin-top: 0; }
.save-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.save-item__info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.save-item__name {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.save-item__meta { font-size: 11px; color: var(--text-mute); }
.saves-input {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.saves-input input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    font: 500 14px var(--ff);
}
.saves-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(106,169,255,0.15); }
.saves-empty {
    padding: 18px 14px;
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
    border: 1px dashed var(--border);
    border-radius: 10px;
}

/* Spielverlauf (pro Save inline) */
.save-item-wrap { display: flex; flex-direction: column; }
.save-item-wrap + .save-item-wrap { margin-top: 8px; }
.save-item-wrap.is-open .save-item {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
/* Match-host hat im match-dialog KEINEN eigenen Rahmen mehr – der Dialog ist
   selbst der Rahmen. Border + Hintergrund-Fill sind Altlasten aus der Zeit, als
   der Editor inline unter der Listenzeile als Akkordeon aufklappte. */
.match-host { overflow: visible; }
/* Match-block-inner braucht im Dialog auch kein zusätzliches Padding – das
   gibt dem Dialog selbst schon das .dlg__inner. Doppelter Innenabstand vermieden. */
.match-host > .match-block__inner { padding: 0; }
/* Spiele-Liste im Sozial-Dialog: flex column mit Gap, sonst kein Abstand
   zwischen den Spiel-Wraps (die saves-list hat den Gap schon, dieser Container
   nicht). */
[data-field="social-games-list"] { display: flex; flex-direction: column; gap: 8px; }
.social-games-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.social-games-head__actions { display: flex; gap: 8px; }

/* Hero-Action-Leiste oben im Spiele-Dialog: primärer „Neues Spiel"-Einstieg
   plus erklärender Sub-Text. Ersetzt sowohl die alte Tab-Bar als auch den
   versteckten Footer-Button-Approach. */
.games-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(37,99,235,0.02));
    border: 1px solid var(--border);
}
.games-hero .btn { flex: 0 0 auto; }
.games-hero__sub {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.45;
}
@media (max-width: 520px) {
    .games-hero { flex-direction: column; align-items: stretch; gap: 8px; }
    .games-hero .btn { width: 100%; justify-content: center; }
}

/* Status-Pillen rechts in den Listen-Items (eingehende/versandte Einladungen,
   Match-Status). Erweitert die bestehende `.match-badge`-Familie um die
   Einladungs-Varianten. */
.match-badge--invite-in {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.match-badge--invite-out {
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-dim);
    border: 1px solid rgba(148, 163, 184, 0.30);
}
.match-badge--invite-declined {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.30);
}

/* Inline-Aktionen für Einladungs-Items (Annehmen/Ablehnen). Schiebt die
   Buttons in eine eigene Zeile unterhalb des Item-Headers, damit sie
   auch auf Smartphones nicht in den Title-Bereich quetschen. */
.save-item__invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 12px;
    margin-top: -4px;
}
.save-item-wrap--invite { border-left: 3px solid var(--accent-strong); }

/* Konsolidierter „Spiel anlegen"-Dialog (new-game-dialog) */

/* Leer-Hinweis wenn die Builder-Armee nicht spielbar ist. Wird statt
   des Formulars angezeigt und führt den User zurück zum Builder. */
.ng-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    text-align: center;
}
.ng-empty[hidden] { display: none; }
.ng-empty__icon { width: 40px; height: 40px; color: var(--accent); opacity: 0.6; }
.ng-empty__text { display: flex; flex-direction: column; gap: 6px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.ng-empty__text strong { color: var(--text); font-size: 15px; }

/* Builder-Summary: was wird gerade verschickt (eine Zeile, kompakt). */
.ng-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 4px 0 14px;
    background: var(--surface-2);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.ng-summary .icon { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; }
.ng-summary > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ng-summary strong { color: var(--text); font-size: 14px; }
.ng-summary__meta { color: var(--text-dim); font-size: 12px; }

/* Gegner-Picker: Fieldset mit Radio-Choices + dynamische Detail-Felder. */
.ng-opp {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px 12px;
    margin: 0 0 12px;
}
.ng-opp legend {
    padding: 0 6px;
    color: var(--text-mute);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.ng-opp__choice {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    border-bottom: 1px dashed var(--border);
}
.ng-opp__choice:last-child { border-bottom: none; }
.ng-opp__choice input[type="radio"] {
    grid-row: 1; grid-column: 1;
    accent-color: var(--accent-strong);
    width: 18px; height: 18px; cursor: pointer;
}
.ng-opp__label {
    grid-row: 1; grid-column: 2;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
}
.ng-opp__detail {
    grid-row: 2; grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.ng-opp__detail[hidden] { display: none; }
.ng-opp__detail input,
.ng-opp__detail select {
    flex: 1 1 200px;
    min-width: 0;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
}
.ng-opp__detail input:focus,
.ng-opp__detail select:focus { outline: none; border-color: var(--accent); }

/* ---------- Einheitliches Übersetzungs-Modal ---------- */
.te-input-row { display: flex; flex-direction: column; gap: 4px; }
.te-label { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.6px; }
#te-de-input {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}
#te-de-input:focus { outline: none; border-color: var(--accent); }
.te-suggestions {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(212,165,90,0.06);
    border: 1px solid rgba(212,165,90,0.25);
    border-radius: 8px;
}
.te-suggestions[hidden] { display: none; }

/* Legends-Hinweis im Übersetzungs-Modal: erklärt warum kein PDF-Match
   erwartbar ist (Einheit nicht mehr in aktiven Schlachtprofilen). */
.te-legends-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(245, 196, 82, 0.08);
    border: 1px solid rgba(245, 196, 82, 0.35);
    border-radius: 8px;
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.45;
}
.te-legends-info[hidden] { display: none; }
.te-legends-info__icon { font-size: 18px; flex-shrink: 0; }
.te-legends-info b { color: #f5c452; }

/* Manuelle Verify-Checkbox: dezent, aber sichtbar als Quality-Gate. */
.te-verify {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(74, 222, 128, 0.06);
    border: 1px dashed rgba(74, 222, 128, 0.35);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.te-verify input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4ade80;
    cursor: pointer;
}
.te-verify b { color: #4ade80; }

/* EN-Begriff im Modal: <q> rendert Anführungszeichen automatisch.
   Akzent-Farbe + leichter Hintergrund hebt den Begriff hervor. */
.te-en {
    background: var(--surface-2);
    padding: 1px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    color: var(--accent);
    font-style: normal;
    quotes: '„' '"' '‚' '\'';
}
/* Kontext-Anzeige („aus Einheit X") nur bei Waffen sichtbar */
.te-context[hidden] { display: none; }
.te-context b {
    color: var(--text);
    font-weight: 600;
}

/* Research-Helfer (Google-AI-Link) im Translate-Modal */
.te-research {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.te-research__hint {
    font-size: 11px;
    color: var(--text-mute);
}
.te-sug-list { display: flex; flex-direction: column; gap: 4px; }
.te-sug-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.te-sug-item:hover { background: var(--surface-3); border-color: var(--accent); }
.te-sug-item__name { font-weight: 600; color: var(--text); }
.te-sug-item__meta { font-size: 11px; color: var(--text-mute); }
.te-sug-item__score {
    font-size: 11px;
    color: #f0c97a;
    background: rgba(212,165,90,0.15);
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 700;
}
.te-sug-exact {
    padding: 8px 10px;
    background: rgba(60, 160, 90, 0.12);
    border: 1px solid rgba(60, 160, 90, 0.4);
    border-radius: 6px;
    color: #6cd095;
    font-size: 13px;
}
.te-sug-exact b { color: #b9efcb; }

/* Prominenter Status oberhalb der Vorschläge, wenn der eingegebene DE-Wert
   exakt einem freien PDF-Namen entspricht. Großer grüner Haken-Block, weil
   das genau der gewünschte Endzustand ist (saubere Punkte-Zuordnung). */
.te-pdf-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(60, 160, 90, 0.15);
    border: 1px solid rgba(60, 160, 90, 0.55);
    border-radius: 8px;
    color: #b9efcb;
}
.te-pdf-status__icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2a7c58;
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
}
.te-pdf-status__text { font-weight: 700; font-size: 14px; color: #d4f5e0; }
.te-pdf-status__meta { font-size: 12px; color: #8acba0; margin-left: auto; }

/* ---------- Edit-Stift-Icon neben Übersetzungen ---------- */
/* Sitzt direkt nach einem Text. Beispiele: Faction-Name, Modell-Name,
   Waffennamen, Keyword-Pills. Klick öffnet das einheitliche Modal. */
.te-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-mute);
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity .12s, color .12s, background .12s, border-color .12s;
    vertical-align: middle;
}
.te-edit:hover {
    opacity: 1;
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(122,165,255,0.10);
}
/* Keine eigenen Scroll-Balken in den Sozial-Panes – Scrolling übernimmt
   der Dialog selbst. */
.social-dialog [data-social-pane] { overflow: visible; }
.match-block__inner {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.match-dot {
    color: var(--accent);
    font-size: 8px;
    margin-left: 4px;
    vertical-align: middle;
}
.match-table { display: flex; flex-direction: column; gap: 4px; }
.match-table__empty {
    padding: 14px;
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
    border: 1px dashed var(--border);
    border-radius: 8px;
}
.match-row {
    display: grid;
    grid-template-columns: 28px 1fr 1fr 1fr 28px;
    gap: 6px;
    align-items: center;
}
.match-row--head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-mute);
    padding-bottom: 2px;
}
.match-cell { display: flex; align-items: center; }
.match-cell--rd {
    justify-content: center;
    color: var(--text-mute);
    font-weight: 600;
    font-size: 12px;
}
.match-cell--first { gap: 4px; }
.match-cell--score { min-width: 0; }
.match-cell--score input {
    width: 100%;
    height: 32px;
    padding: 0 6px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font: 600 13px var(--ff);
    text-align: center;
    outline: none;
}
.match-cell--score input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(106,169,255,0.18);
}
.match-first-btn {
    flex: 1;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-mute);
    font: 700 12px var(--ff);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.match-first-btn:hover { color: var(--text); border-color: var(--accent); }
.match-first-btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #0d1226;
}
.match-rm-btn {
    width: 24px; height: 24px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-mute);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}
.match-rm-btn:hover { background: rgba(255,80,80,0.18); color: #ff8080; }
.match-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.match-winner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
}
.match-winner__lbl {
    font-size: 12px;
    color: var(--text-mute);
    font-weight: 600;
}
.match-winner__opts { display: flex; gap: 12px; flex-wrap: wrap; }
.match-winner__opts label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}
.match-totals {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    padding: 6px 8px;
    background: var(--surface);
    border-radius: 6px;
    text-align: center;
}

/* ── Erweiterter Match-Editor: Toolbar oben, Live-Timer, Sieger-Card, Footer ── */
.match-toptools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--border);
}
/* „Armeen laden"-Button im match-toptools nach rechts schieben. Erstes Kind
   (Datum-Label) bleibt links, das zweite Kind bekommt margin-left:auto und
   schiebt sich (samt etwaiger Folge-Items) an die rechte Kante. */
.match-toptools > *:nth-child(2) { margin-left: auto; }
/* Rundentabelle mit Dauer-Spalte (zusätzliche Grid-Spalte) */
.match-table--with-time .match-row {
    grid-template-columns: 28px 1fr 1fr 1fr 90px 28px;
}
/* Gelockte Tabelle: keine Dauer-/Aktions-Spalten – Grid bekommt nur 4 Cols,
   damit die Score-Inputs den freigewordenen Platz nutzen statt eine optische
   Lücke rechts zu lassen. */
.match-table--locked .match-row {
    grid-template-columns: 28px 1fr 1fr 1fr;
}
.match-cell--time-h {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-mute);
    justify-content: center;
}
.match-cell--time {
    gap: 4px;
    justify-content: center;
}
.match-time {
    font: 600 12px var(--ff);
    min-width: 48px;
    text-align: center;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}
.match-time--live {
    color: #ff7e6e;
    text-shadow: 0 0 8px rgba(255,126,110,0.35);
    animation: matchTimePulse 1.2s ease-in-out infinite;
}
.match-time--done { color: var(--text); }
@keyframes matchTimePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.match-time-btn {
    width: 22px; height: 22px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 11px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.match-time-btn:hover { border-color: var(--accent); }
.match-time-btn--start { background: rgba(106,169,255,0.18); border-color: var(--accent); color: var(--accent); }
.match-time-btn--stop  { background: rgba(255,126,110,0.18); border-color: #ff7e6e; color: #ff7e6e; }

/* Sieger-Card: prominenter Punktestand + Krone + kompakte Radios darunter */
.match-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 10px;
    background: linear-gradient(135deg, rgba(106,169,255,0.07), rgba(124,92,255,0.07));
    border: 1px solid var(--border);
    border-radius: 12px;
}
.match-summary__scores {
    display: grid;
    grid-template-columns: 1fr 32px 1fr;
    align-items: center;
    gap: 10px;
}
.match-summary__side {
    text-align: center;
    padding: 10px 8px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform .2s, border-color .2s, background .2s;
}
.match-summary__side.is-winner {
    background: linear-gradient(135deg, rgba(245,196,82,0.18), rgba(245,196,82,0.06));
    border-color: #f5c452;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(245,196,82,0.18);
}
.match-summary__crown {
    height: 22px;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.match-summary__crown .icon { width: 20px; height: 20px; margin-right: 0; }
.match-summary__name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-summary__pts {
    font: 800 28px var(--ff);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-top: 4px;
}
.match-summary__side.is-winner .match-summary__pts { color: #f5c452; }
.match-summary__vs {
    font: 700 22px var(--ff);
    color: var(--text-mute);
    text-align: center;
}
.match-summary__meta {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.match-summary__controls {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
}
.match-summary__lbl {
    color: var(--text-mute);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 11px;
}
.match-summary__opts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.match-summary__opts label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--text);
}

/* Footer unten im Match-Editor: Löschen-Button rechtsbündig, deutlich abgesetzt */
.match-foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    margin-top: 4px;
}

/* Lock-Banner wenn beide Spieler das Ergebnis verifiziert haben */
.match-lock-banner {
    padding: 10px 14px;
    background: rgba(106, 207, 133, 0.12);
    border: 1px solid rgba(106, 207, 133, 0.4);
    border-radius: 8px;
    color: #8ddf9c;
    font-size: 13px;
    line-height: 1.4;
}
.match-lock-banner b { color: #aef0bb; }
/* Wenn der ganze Editor read-only ist (Match gelockt): Eingaben deaktivieren */
.match-block__inner.is-readonly input,
.match-block__inner.is-readonly select,
.match-block__inner.is-readonly textarea,
.match-block__inner.is-readonly button:not([data-act]) {
    pointer-events: none;
    opacity: 0.6;
}

/* Pending-Accept-Banner: Gegner muss Match annehmen. Initiator und Gegner
   sehen denselben Block, Buttons nur für den Gegner gerendert. */
.match-accept-banner {
    padding: 10px 14px;
    background: rgba(106, 169, 255, 0.12);
    border: 1px solid rgba(106, 169, 255, 0.4);
    border-radius: 8px;
    color: #c5d9f5;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.match-accept-banner b { color: #e1ecff; }
.match-accept-banner em { color: #8eb9ff; font-style: normal; }
.match-accept-banner__btns {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* Reschedule-Banner: visuell analog zum Accept-Banner, etwas anderer Akzent
   damit beide Banner gleichzeitig sichtbar unterscheidbar bleiben. */
.match-reschedule-banner {
    padding: 10px 14px;
    background: rgba(244,180,80,0.10);
    border: 1px solid rgba(244,180,80,0.4);
    border-radius: 8px;
    color: #f0d3a3;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.match-reschedule-banner b { color: #ffe2b8; }

/* Wenn ein Builder-Slot extern gesperrt ist (Gegner-Slot eines geladenen
   Matches): subtiler Banner-Hinweis am Header + leichte Hintergrundtönung,
   damit auf einen Blick klar ist „hier nichts ändern". Der is-review-Look
   versteckt die Edit-Buttons bereits, das hier ist nur das Erkennungs-Signal. */
.army.is-external-locked {
    background: linear-gradient(180deg, rgba(106, 169, 255, 0.06), transparent 80px);
}
.army.is-external-locked .picker-head {
    border-bottom: 1px solid rgba(106, 169, 255, 0.3);
}
.army.is-external-locked .picker-head__title::after {
    content: '🔒 Gegner-Aufstellung – nur Ansicht';
    margin-left: auto;
    font-size: 11px;
    color: #8eb9ff;
    background: rgba(106, 169, 255, 0.18);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
}

/* Vorschlag-Hinweis am Gegner-Slot (vor Annahme). Subtil dargestellt, damit
   klar ist: noch nicht final. */
.match-armies__card.is-suggestion {
    border-style: dashed;
    background: rgba(106, 169, 255, 0.06);
}
.match-armies__suggestion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #8eb9ff;
    background: rgba(106, 169, 255, 0.18);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    white-space: nowrap;
}

/* Verify-Block am Ende des Match-Editors */
.match-verify {
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.match-verify__head {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
}
.match-verify__row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.match-verify__tick {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-mute);
    font-weight: 700;
    font-size: 14px;
}
/* SVG-Icons im Tick-Kreis sauber zentrieren: kein margin-right (sonst nach
   links versetzt), feste Größe statt 1em (sonst zu klein im 26px-Kreis). */
.match-verify__tick .icon {
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
}
.match-verify__tick.is-ok {
    background: rgba(106,207,133,0.2);
    color: #8ddf9c;
}
.match-verify__lbl {
    flex: 1;
    color: var(--text);
    font-weight: 600;
}
.match-verify__hint {
    color: var(--text-mute);
    font-size: 12px;
    font-style: italic;
}
.match-verify__note {
    margin: 0;
    font-size: 11px;
    color: var(--text-mute);
    font-style: italic;
}

/* Confirmed-Badge im Match-Titel: zeigt dass beide Seiten registrierte User sind */
.match-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: rgba(106,169,255,0.18);
    border: 1px solid rgba(106,169,255,0.5);
    border-radius: 999px;
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
    white-space: nowrap;
}
.match-badge--confirmed {
    background: rgba(106,207,133,0.16);
    border-color: rgba(106,207,133,0.5);
    color: #8ddf9c;
}
.match-badge--locked {
    background: rgba(245,196,82,0.16);
    border-color: rgba(245,196,82,0.5);
    color: #f5c452;
}
/* Subtiler Verknüpfungs-Indikator hinter dem Gegnernamen: Handshake-Icon,
   dezent eingefärbt. Signalisiert „Gegner ist registrierter User, sieht das
   Match in seiner Liste". */
.match-linked {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: #8ddf9c;
    opacity: 0.85;
}
.match-linked .icon { width: 14px; height: 14px; margin: 0; }
/* Army-Ready-Badge: vor dem Spiel signalisieren dass die Aufstellung steht.
   „beide bereit" prominent grün, einseitig dezenter (cyan/blau) damit klar ist
   dass die andere Seite noch nicht fertig ist. */
.match-badge--ready {
    background: rgba(106,207,133,0.16);
    border-color: rgba(106,207,133,0.5);
    color: #8ddf9c;
}
.match-badge--ready-half {
    background: rgba(106,169,255,0.12);
    border-color: rgba(106,169,255,0.4);
    color: #9dc1ff;
}
/* Accept-Badge: zwischen Annahme und Army-Ready, neutral-grün. */
.match-badge--accepted {
    background: rgba(106,207,133,0.10);
    border-color: rgba(106,207,133,0.4);
    color: #8ddf9c;
}

/* Gelockte Runden-Tabelle soll optisch IDENTISCH zur aktiven Tabelle aussehen
   – die Inputs und Beginnt-Buttons werden via .is-readonly bereits nicht-
   interaktiv (pointer-events: none), aber die generische opacity:0.6-Regel
   dimmt sie. Für die Match-Row stellen wir die volle Opacity wieder her. */
.match-block__inner.is-readonly .match-row input,
.match-block__inner.is-readonly .match-row .match-first-btn {
    opacity: 1;
}

/* Match-Status-Optik in der Liste:
   - pending: Annahme steht aus → leichter Akzentstreifen links (blau)
   - active : läuft / vor Spiel → Standardlook
   - done   : finalisiert       → gedämpfter, schmaler, geringe Sättigung */
.save-item--pending {
    border-left: 3px solid var(--accent-strong);
    padding-left: 11px;
}
.save-item--done {
    opacity: 0.78;
    filter: saturate(0.85);
}
.save-item--done .save-item__name { font-weight: 500; }
.save-item--done .match-badge { opacity: 0.85; }

/* Archiv-Block: abgeschlossene Matches älter als 14 Tage, collapsible. */
.games-archive {
    margin-top: 16px;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
}
.games-archive__summary {
    cursor: pointer;
    user-select: none;
    color: var(--text-dim);
    font-size: 13px;
    padding: 6px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
}
.games-archive__summary:hover { background: var(--surface-2); color: var(--text); }
.games-archive__summary .icon { width: 14px; height: 14px; opacity: 0.75; }
.games-archive[open] .games-archive__summary { color: var(--text); margin-bottom: 6px; }
.games-archive > .save-item-wrap { opacity: 0.85; }

/* Spielregeln-Lock bei geladenem Match: Modus-Segmented, Punkte-Cap,
   Punkte-Presets, Stormbringer-Chips, Slot-Cap-Inputs, Edition-Switch werden
   alle non-interactive. Diese Settings stehen im Match fest – Änderungen
   brauchen ein neues Match (über „Neue Aufstellung" → frischer Builder).
   Optisch: ausgegraut + lock-Cursor. */
.capbar.is-match-locked .segmented,
.capbar.is-match-locked [data-field="points-cap"],
.capbar.is-match-locked [data-points-cap],
.capbar.is-match-locked [data-preset],
.capbar.is-match-locked [data-field^="slot-"],
body.has-loaded-match .edition-switch {
    pointer-events: none;
    opacity: 0.55;
    filter: grayscale(0.25);
    cursor: not-allowed;
}

/* Spielregeln-Info als Sub-Header im Match-Editor: zeigt feste Settings
   (Edition + Spielmodus + Punkte/Stufe). Dezent, nicht-interaktiv. */
.match-rules-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 4px;
}
.match-rules-info b { color: var(--text); }
.match-rules-info__sep { opacity: 0.5; }
.match-rules-info .icon { width: 14px; height: 14px; opacity: 0.7; }

/* Auto-Save-Sync-Status im Compare-Bar. Dezent rechts neben den Buttons,
   blendet sich automatisch aus nach Erfolgs-Anzeige. */
.match-sync-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: 999px;
}
.match-sync-status[data-state="saving"] {
    color: #9dc1ff;
}
.match-sync-status[data-state="saved"] {
    color: #8ddf9c;
}
.match-sync-status[data-state="error"] {
    background: rgba(154,44,64,0.18);
    color: #ff9aae;
}
/* Highlight wenn beide Seiten ihre Aufstellung finalisiert haben. */
.match-armyready {
    background: linear-gradient(135deg, rgba(106,207,133,0.08), rgba(106,207,133,0.02));
    border-color: rgba(106,207,133,0.35);
}

/* Klickbarer Header eines Save-Items (Akkordeon-Toggle). Cursor + Hover, aber
   visuell nahe am Original – nicht wie ein „Button" aussehen. */
.save-item--clickable {
    cursor: pointer;
    user-select: none;
    transition: background .12s, border-color .12s;
}
.save-item--clickable:hover {
    background: var(--surface-3, var(--surface-2));
    border-color: var(--accent);
}
.save-item--clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Chevron als „weiter zum Spiel"-Indikator: typografisch, schmal, dezent.
   › statt ⌄ – der Klick öffnet einen neuen Dialog, nicht ein Akkordeon. */
.save-chev {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    color: var(--text-mute);
    font-size: 18px;
    line-height: 1;
    transition: color .12s, transform .15s ease;
}
.save-item--clickable:hover .save-chev { color: var(--accent); transform: translateX(2px); }

/* Status-Pillen rechtsbündig in der Listen-Zeile (separate Flex-Spalte).
   Wrappt bei Bedarf, behält aber den rechten Anschlag bei. */
.save-item__badges {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

/* Toolbar-Variante für DB-Matches: enthält das Datums-Feld statt Aktions-Buttons */
.match-toptools--db {
    justify-content: flex-start;
    align-items: center;
}
.match-date-lbl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.match-date-lbl input[type="date"] {
    /* erbt das gestylte dialog.dlg input[type="date"] */
    font: 500 13px var(--ff);
    padding: 6px 10px;
}

/* Leerer Zustand mit Call-to-Action („Spiel jetzt starten") */
.match-table__empty--with-cta {
    text-align: center;
    padding: 20px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(106,169,255,0.05), rgba(124,92,255,0.05));
}
.match-table__empty--with-cta p {
    color: var(--text-mute);
    font-size: 13px;
}

/* Welche Armeen wurden gespielt – zwei Karten nebeneinander, eine pro Slot. */
.match-armies {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.match-armies__card {
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.match-armies__card--empty {
    opacity: 0.65;
    text-align: center;
    align-items: center;
    justify-content: center;
}
/* Card finalisiert: grün eingefärbt – signalisiert „Aufstellung steht". */
.match-armies__card.is-ready {
    background: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(74,222,128,0.02));
    border-color: rgba(74,222,128,0.45);
}
/* Card des Gegners: leicht ausgegraut + Lock-Icon-Vorschau im Hintergrund.
   Im aktuellen UI nur visueller Hinweis „nicht deine Seite zum Bearbeiten". */
.match-armies__card.is-locked {
    opacity: 0.85;
}
.match-armies__card.is-locked.is-ready { opacity: 1; }
/* Status-Zeile am unteren Card-Rand: kleiner Tick/Circle + Text. */
.match-armies__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-mute);
    padding-top: 4px;
    border-top: 1px dashed var(--border);
    margin-top: 2px;
}
.match-armies__card.is-ready .match-armies__status {
    color: #8ddf9c;
    border-top-color: rgba(74,222,128,0.35);
}
.match-armies__status .icon { width: 14px; height: 14px; margin: 0; }
/* Eigener Bestätigen-Toggle direkt in der Card. Volle Breite + zentriert. */
.match-armies__card > .btn { align-self: stretch; justify-content: center; margin-top: 4px; }
.match-armies__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.match-armies__name {
    color: var(--text);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-armies__fac {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 60%;
}
.match-armies__meta {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.match-armies__details summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-mute);
    padding: 2px 0;
    user-select: none;
}
.match-armies__details summary:hover { color: var(--text); }
.match-armies__units {
    margin: 6px 0 0;
    padding: 0 0 0 18px;
    font-size: 12.5px;
    color: var(--text);
    list-style: '· ';
    line-height: 1.45;
}
.match-armies__units li b { color: var(--accent); font-weight: 700; }
.match-armies__empty {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-mute);
    font-style: italic;
}

/* Match-Summary mit den neuen Pill-Segmented-Controls.
   Layout: Label oben, darunter die Pills in voller Breite. */
.match-summary__controls {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.match-summary__lbl {
    font-size: 11px;
    color: var(--text-mute);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Outcome-Pills: full-width Container. Bewusst KEIN 999px-Container-Radius
   (sieht zweizeilig wie eine seltsame Mega-Pill aus). Stattdessen leichtes
   10px-Radius, Pillen selbst bleiben rund. */
.match-outcome {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 10px;
}
.match-outcome .seg {
    flex: 1 1 auto;
    padding: 8px 14px;
    height: auto;
    min-height: 32px;
    white-space: normal;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.25;
}
/* Spezielle Hervorhebung für ausgewählte Vernichtung/Aufgabe-Pills.
   Destruction: kräftiges Rot, Concession: warmes Gelb mit dunklem Text. */
.match-outcome .seg.is-active[data-wtype="destruction"] { background: #c93a2a; }
.match-outcome .seg.is-active[data-wtype="destruction"]:hover { background: #e9533e; }
.match-outcome .seg.is-active[data-wtype="concession"] {
    background: #d99a1c;
    color: #1a1a1a;
}
.match-outcome .seg.is-active[data-wtype="concession"]:hover { background: #f5c452; color: #1a1a1a; }

@media (max-width: 540px) {
    .match-armies { grid-template-columns: 1fr; }
    .match-outcome .seg { flex-basis: 100%; }
}

/* Schmaler Bildschirm: Sieger-Card stapelt Radios untereinander */
@media (max-width: 540px) {
    .match-summary__controls {
        grid-template-columns: 1fr;
    }
    .match-summary__pts { font-size: 22px; }
    .match-table--with-time .match-row {
        grid-template-columns: 24px 1fr 1fr 1fr 70px 24px;
    }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a3354; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #3a4473; }

/* Info-Button: dauerhaft sichtbar (gedimmt), beim Tile-Hover voll opaque.
   Position liegt am Flex-Container `.tile__icons--start` – hier nur Styling. */
.tile__info {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    background: rgba(17,22,38,0.8);
    backdrop-filter: blur(4px);
    color: var(--text-dim);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.tile:hover .tile__info,
.tile:focus-within .tile__info { opacity: 1; }
.tile__info:hover {
    opacity: 1;
    color: var(--text);
    background: rgba(30,40,80,0.95);
}

/* ---------- Warscroll-Modal (Warhammer-Stil: Pergament-Akzent) ---------- */
.warscroll { width: min(820px, 96vw); }
.warscroll__inner {
    /* Warhammer-Style: dunkler Hintergrund mit gold-orangem Pergament-Akzent oben.
       Wir bleiben in der Dark-Theme-Palette, der Gold-Akzent ist sparsam. */
    background:
        linear-gradient(180deg, rgba(212, 165, 90, 0.10) 0%, transparent 80px),
        var(--surface);
    padding: 18px 20px 16px;
}
.warscroll__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}
.warscroll__head {
    border-bottom: 2px solid #d4a55a;
    padding-bottom: 8px;
    margin-bottom: 12px;
    padding-right: 36px; /* Platz für den absoluten Close-Button */
}
.warscroll__name {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #f0c97a;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.warscroll__sub {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--text-dim);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
}
.warscroll__sep { color: var(--text-mute); }
.warscroll__body {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    align-items: start;
}
/* GW-Style Warscroll-Kompass: runder Behälter mit 4 Sektoren (N/O/S/W).
   Sektoren visuell durch ein X (diagonale Linien) getrennt. Schutz-Sektor (O) ist
   leicht grün getönt – wie auf den AoS-4.0-Warscrolls. */
.warscroll__compass {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, rgba(212,165,90,0.10), transparent 70%),
        conic-gradient(
            from 45deg,
            rgba(50, 110, 75, 0.20)  0deg  90deg,
            rgba(17, 22, 38, 0.55)  90deg 180deg,
            rgba(17, 22, 38, 0.55) 180deg 270deg,
            rgba(17, 22, 38, 0.40) 270deg 360deg
        );
    border: 3px solid #d4a55a;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.5) inset,
        0 4px 14px rgba(0,0,0,0.4);
}
/* Zwei diagonale Linien durch das Zentrum (das X) */
.warscroll__compass::before,
.warscroll__compass::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 6%;
    right: 6%;
    height: 1px;
    background: rgba(212,165,90,0.45);
    transform-origin: center;
}
.warscroll__compass::before { transform: translateY(-50%) rotate(45deg); }
.warscroll__compass::after  { transform: translateY(-50%) rotate(-45deg); }
.ws-quad {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
}
.ws-quad--n { top: 16px;     left: 50%; transform: translateX(-50%); }
.ws-quad--e { top: 50%; right: 16px;    transform: translateY(-50%); }
.ws-quad--s { bottom: 16px;  left: 50%; transform: translateX(-50%); }
.ws-quad--w { top: 50%; left: 16px;     transform: translateY(-50%); }
.ws-q-lbl {
    font-size: 9.5px;
    color: #cfd6e8;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    white-space: nowrap;
}
.ws-q-val {
    font-size: 26px;
    font-weight: 800;
    color: #f0c97a;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    margin-top: 2px;
}
/* Ward als rote Kugel oben rechts ÜBER dem Kompass-Kreis – analog zur
   offiziellen AoS-Warscroll. Sitzt absolut relativ zum gesamten Compass-
   Container (.warscroll__compass hat position: relative), nicht im Save-
   Sektor – so verschiebt sie nichts und nutzt den ungenutzten Außenbereich. */
.ws-q-ward {
    position: absolute;
    top: -10px;
    right: -10px;
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: radial-gradient(circle at 30% 30%, #f87171 0%, #b91c1c 70%, #7f1d1d 100%);
    color: #fff;
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.35),
        0 2px 6px rgba(0,0,0,0.55);
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    white-space: nowrap;
    cursor: help;
    z-index: 2;
}
.ws-q-ward[hidden] { display: none; }

/* Krit-Pille inline neben Waffennamen im Warscroll-Modal. Manuell gepflegt
   pro Waffe (BSData liefert keine Crit-Daten) – Admin sieht zusätzlich ein
   Flame-Icon zum Bearbeiten. */
.crit-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fdba74;
    background: rgba(251,146,60,0.15);
    border: 1px solid rgba(251,146,60,0.4);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    vertical-align: middle;
}

.warscroll__main { grid-column: 2 / 3; display: flex; flex-direction: column; gap: 14px; }
.warscroll__h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #f0c97a;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid rgba(212, 165, 90, 0.25);
    padding-bottom: 3px;
}
.ws-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    /* table-layout: fixed sorgt dafür, dass beide Tabellen (Nahkampf/Fernkampf)
       identische Spaltenbreiten haben – sonst rechnen die Browser pro Tabelle
       eigenständig nach Content, und die Spalten springen zwischen den Tabellen. */
    table-layout: fixed;
}
.ws-tbl th {
    text-align: left;
    color: var(--text-mute);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
}
.ws-tbl td {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ws-tbl td:first-child { color: var(--text); font-weight: 600; }
.ws-tbl tr:last-child td { border-bottom: none; }
/* Spaltenbreiten: Spalte 1 (Waffe) nimmt den Rest, Stat-Spalten je 52px.
   So sind beide Tabellen pixel-genau aligned. */
.ws-tbl th:first-child,
.ws-tbl td:first-child  { width: auto; }
.ws-tbl th:not(:first-child),
.ws-tbl td:not(:first-child) { width: 52px; text-align: center; }
.ws-tbl td:not(:first-child) { color: var(--text-dim); }

.warscroll__notes,
.warscroll__keywords { grid-column: 1 / -1; }
/* ✱-Marker für Stat-Werte, die in der DB als "*", "See Below" oder "⟝See …"
   hinterlegt sind. Zeigt dem User, dass eine Spezialregel im Warscroll greift. */
.ws-variable {
    color: #f0c97a;
    cursor: help;
    font-weight: 700;
}
.warscroll__variable-hint {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--text-mute);
    line-height: 1.5;
}
.warscroll__variable-hint[hidden] { display: none; }
.warscroll__notes p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.ws-kw-list { display: flex; flex-wrap: wrap; gap: 4px; }
.ws-kw {
    display: inline-block;
    padding: 3px 8px;
    background: rgba(212, 165, 90, 0.08);
    color: var(--text-dim);
    border: 1px solid rgba(212, 165, 90, 0.2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

@media (max-width: 720px) {
    .warscroll__body { grid-template-columns: 1fr; }
    .warscroll__main { grid-column: 1 / 2; }
    .ws-tbl { font-size: 12px; }
    .ws-tbl th, .ws-tbl td { padding: 4px 4px; }
}