/* =====================================================================
   Red Horizon - Design „schlicht & modern“ (24.10.2026, Basti)

   Die letzte Stilschicht über allen Spielseiten. Sie ändert, wie die
   Bausteine AUSSEHEN (Flächen, Linien, Schrift, Knöpfe, Reiter,
   Eingaben), nicht wie sie ANGEORDNET sind - die Seitenaufbauten aus
   app.css und den Seitendateien bleiben.

   Grundsätze:
   - Ein Rot als einziger Akzent; Grün/Gelb nur für Zustände.
     Die Rohstofffarben bleiben (Basti: „die gefallen mir“).
   - Ruhige, flache Flächen in drei Stufen statt Verläufen.
   - Kein Leuchten, keine Schrägschnitte, keine Zierlinien.
   - Eine Schrift (Inter), Zahlen in fester Breite.

   Alles hängt an #rh (der Rahmen der Spielseiten): Portal, HQ und die
   kleinen Serverseiten bleiben unberührt. Die Regeln brauchen oft
   !important, weil die älteren Dateien selbst damit arbeiten.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Farben und Maße
   --------------------------------------------------------------------- */

#rh {
    --d-bg: #0b0d10;
    --d-s1: #111418;
    --d-s2: #161a1f;
    --d-s3: #1c2127;
    --d-s4: #242a32;
    --d-line: rgba(255, 255, 255, 0.07);
    --d-line2: rgba(255, 255, 255, 0.11);
    --d-line3: rgba(255, 255, 255, 0.18);
    --d-text: #e8ecf1;
    --d-text2: #b9c1cb;
    --d-muted: #8a939e;
    --d-faint: #5f6873;
    --d-red: #e5483b;
    --d-red-h: #f25c4f;
    --d-red-d: #b8352b;
    --d-red-soft: rgba(229, 72, 59, 0.12);
    --d-red-line: rgba(229, 72, 59, 0.5);
    --d-ok: #3fb27f;
    --d-warn: #e0a33a;
    --d-r: 12px;
    --d-r-s: 8px;
    --d-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --d-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 26px rgba(0, 0, 0, 0.32);

    /* Die dezente Tiefe (Basti: „nicht zu schlicht“): Licht von oben,
       eine hellere Oberkante, ein weicher Schatten nach unten. */
    --d-licht: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 38%, rgba(0, 0, 0, 0.08) 100%);
    --d-knopf: linear-gradient(180deg, #2c3138 0%, #1e2228 52%, #15181d 100%);
    --d-knopf-h: linear-gradient(180deg, #353b43 0%, #262b32 52%, #1b1f25 100%);
    --d-knopf-rot: linear-gradient(180deg, #f2604f 0%, #e0453a 50%, #c2352b 100%);
    --d-knopf-rot-h: linear-gradient(180deg, #f8705f 0%, #ea5245 50%, #cc3c31 100%);
    --d-knopf-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.35);
    --d-knopf-schatten-rot: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 6px 16px rgba(229, 72, 59, 0.28);
    --d-r-k: 11px;

    /* Die alten Namen zeigen auf die neuen Werte - so ziehen auch
       Regeln mit, die hier nicht einzeln stehen. */
    --ui-color: var(--d-red);
    --ui-glow: rgba(229, 72, 59, 0.16);
    --ui-highlight: var(--d-red);
    --ui-highlight-dark: var(--d-red-d);
    --ui-highlight-dark-glow: rgba(229, 72, 59, 0.16);
    --ui-info: var(--d-text);
    --ui-info-dark: var(--d-s4);
    --ui-info-dark-glow: transparent;
    --ui-danger: #ef4444;
    --ui-danger-light: #f87171;
    --ui-bg: var(--d-bg);
    --ui-bg-soft: var(--d-s1);
    --ui-panel: var(--d-s1);
    --ui-panel-strong: var(--d-s1);
    --ui-panel-line: var(--d-line2);
    --ui-panel-line-soft: var(--d-line);
    --ui-text-muted: var(--d-muted);
    --ui-text-soft: var(--d-text2);
    --rh-bg: var(--d-bg);
    --rh-bg-2: var(--d-s1);
    --rh-panel: var(--d-s1);
    --rh-panel-2: var(--d-s2);
    --rh-line: var(--d-line);
    --rh-line-strong: var(--d-line2);
    --rh-amber: var(--d-red);
    --rh-red: var(--d-red);
    --rh-cyan: var(--d-text);
    --rh-text: var(--d-text);
    --rh-muted: var(--d-muted);
    --rh-shadow: var(--d-shadow);
    --rh-inset: none;

    background: var(--d-bg) !important;
    color: var(--d-text);
}

body:has(#rh) {
    background: var(--d-bg, #0b0d10) !important;
}

/* ---------------------------------------------------------------------
   2. Schrift
   --------------------------------------------------------------------- */

#rh,
#rh *:not(svg):not(svg *) {
    font-family: var(--d-font) !important;
    text-shadow: none !important;
}

#rh {
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}

#rh :is(strong, b, .rh-wert, [class*="value"], [class*="-zahl"], [class*="count"], td, time) {
    font-variant-numeric: tabular-nums;
}

#rh :is(h1, h2, h3, h4) {
    color: var(--d-text) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    font-weight: 700 !important;
}

#rh :is(h1, h2, h3, h4)::before,
#rh :is(h1, h2, h3, h4)::after {
    display: none !important;
}

/* Kleine Überschriften über Titeln - die einzigen Großbuchstaben. */
#rh :is([class*="kicker"], [class*="eyebrow"], [class$="-label"], [class*="-label "], .command-nav-section-head span):not([class*="map-"]) {
    color: var(--d-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

#rh :is(small, .klein, em) {
    color: var(--d-muted);
    letter-spacing: 0 !important;
}

#rh p {
    color: var(--d-text2);
}

#rh a {
    color: inherit;
}

/* ---------------------------------------------------------------------
   3. Flächen: Panels und Karten
   --------------------------------------------------------------------- */

#rh :is(.panel, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], .view-section, .rangkopf) {
    background-color: var(--d-s1) !important;
    background-image: var(--d-licht) !important;
    border: 1px solid var(--d-line) !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--d-r) !important;
    box-shadow: var(--d-shadow) !important;
    clip-path: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Karte in der Karte: eine Stufe heller, ohne Schatten. */
#rh :is(.panel, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], .view-section)
    :is(.panel, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "]) {
    background-color: var(--d-s2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

#rh :is(.panel, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "])
    :is(.panel, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "])
    :is(.panel, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "]) {
    background-color: var(--d-s3) !important;
}

/* Zierflächen der alten Karten (Lichtkegel, Scanlinien, Ecken) weg. */
#rh :is(.panel, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], .view-section, .rahmen, .buehne, .inhalt)::before,
#rh :is(.panel, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], .view-section, .rahmen, .buehne, .inhalt)::after {
    display: none !important;
}

#rh :is(.buehne, .inhalt, .spalte-links) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Hinweise und Meldungen */
#rh :is(.hinweis, .rh-meldung, .rh-quick-hint, .rh-general-note) {
    background: var(--d-s2) !important;
    border: 1px solid var(--d-line) !important;
    border-left: 3px solid var(--d-line3) !important;
    border-radius: var(--d-r-s) !important;
    box-shadow: none !important;
    clip-path: none !important;
    color: var(--d-text2) !important;
}

#rh :is(.hinweis.warnung, .rh-meldung.fehler, .rh-meldung.bad, .warnung) {
    border-left-color: var(--d-red) !important;
}

#rh :is(.rh-meldung.ok, .rh-meldung.gut) {
    border-left-color: var(--d-ok) !important;
}

/* ---------------------------------------------------------------------
   4. Knöpfe
   --------------------------------------------------------------------- */

#rh :is(button, .btn, [class$="-btn"], [class*="-btn "], [class$="-button"], [class*="-button "], .btn-hq-upgrade):not(.map-tile, [class*="map-"], .rh-basiswahl-kapsel, .rh-basiswahl-pfeil, .v-menu-btn, .command-nav-item, .rh-base-tab, .rh-military-tab, .rh-system-tab, [role="tab"]) {
    background: var(--d-knopf) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top-color: rgba(255, 255, 255, 0.16) !important;
    border-radius: var(--d-r-k) !important;
    box-shadow: var(--d-knopf-schatten) !important;
    clip-path: none !important;
    color: var(--d-text) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    transition: filter 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease !important;
    animation: none !important;
}

#rh :is(button, .btn, [class$="-btn"], [class*="-btn "], [class$="-button"], [class*="-button "], .btn-hq-upgrade):not(.map-tile, [class*="map-"], .rh-basiswahl-kapsel, .rh-basiswahl-pfeil, .v-menu-btn, .command-nav-item, .rh-base-tab, .rh-military-tab, .rh-system-tab, [role="tab"]):hover:not(:disabled) {
    background: var(--d-knopf-h) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    transform: translateY(-1px) !important;
}

#rh :is(button, .btn, [class$="-btn"], [class*="-btn "], [class$="-button"], [class*="-button "], .btn-hq-upgrade, .rh-base-tab, .rh-military-tab, .rh-system-tab, .command-nav-item):active:not(:disabled) {
    transform: translateY(1px) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Hauptaktion: Rot gefüllt. */
#rh :is(button, a, [class$="-btn"], [class*="-btn "]):is(.primary, [class*="-primary"], .tech-card-btn, .claim, .btn-hq-upgrade, .rh-full-action:not(.danger-soft), [type="submit"]):not(.map-tile) {
    background: var(--d-knopf-rot) !important;
    border-color: #c2352b !important;
    border-top-color: #f58a7c !important;
    box-shadow: var(--d-knopf-schatten-rot) !important;
    color: #fff !important;
}

#rh :is(button, a, [class$="-btn"], [class*="-btn "]):is(.primary, [class*="-primary"], .tech-card-btn, .claim, .btn-hq-upgrade, .rh-full-action:not(.danger-soft), [type="submit"]):not(.map-tile):hover:not(:disabled) {
    background: var(--d-knopf-rot-h) !important;
}

/* Gefährliche Aktion: rote Kontur. */
#rh :is(button, a, [class$="-btn"], [class*="-btn "]):is(.danger, [class*="-danger"], .danger-soft):not(.map-tile) {
    background: var(--d-knopf) !important;
    border-color: var(--d-red-line) !important;
    color: #ff8f86 !important;
}

#rh :is(button, a, [class$="-btn"], [class*="-btn "]):is(.danger, [class*="-danger"], .danger-soft):not(.map-tile):hover:not(:disabled) {
    background: var(--d-red-soft) !important;
}

#rh :is(button, [class$="-btn"], [class*="-btn "]):disabled {
    opacity: 0.45 !important;
    filter: none !important;
    cursor: not-allowed !important;
}

#rh :is(button, a, [tabindex]):focus-visible {
    outline: 2px solid var(--d-red) !important;
    outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------
   5. Reiter
   --------------------------------------------------------------------- */

#rh :is(.rh-base-tabs, .rh-military-tabs, .rh-system-tabs, .rh-general-tabbar) {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--d-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#rh :is(.rh-base-tab, .rh-military-tab, .rh-system-tab, [role="tab"]) {
    background: var(--d-knopf) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top-color: rgba(255, 255, 255, 0.13) !important;
    border-radius: var(--d-r-k) !important;
    box-shadow: var(--d-knopf-schatten) !important;
    clip-path: none !important;
    color: var(--d-text2) !important;
}

#rh :is(.rh-base-tab, .rh-military-tab, .rh-system-tab, [role="tab"]):hover {
    background: var(--d-knopf-h) !important;
    color: var(--d-text) !important;
}

#rh :is(.rh-base-tab, .rh-military-tab, .rh-system-tab, [role="tab"]):is(.active, [aria-selected="true"], [aria-current="page"]) {
    background: linear-gradient(180deg, rgba(229, 72, 59, 0.24) 0%, rgba(229, 72, 59, 0.1) 100%), var(--d-knopf) !important;
    border-color: var(--d-red-line) !important;
    border-top-color: rgba(245, 138, 124, 0.7) !important;
    color: #fff !important;
}

#rh :is(.rh-base-tab, .rh-military-tab, .rh-system-tab)::before,
#rh :is(.rh-base-tab, .rh-military-tab, .rh-system-tab)::after {
    display: none !important;
}

/* Das kleine Zeichen links im Reiter */
#rh :is(.rh-base-tab, .rh-military-tab, .rh-system-tab) > span:first-child {
    background: linear-gradient(180deg, #2a2f36, #1a1e23) !important;
    border: 1px solid var(--d-line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--d-text2) !important;
}

#rh :is(.rh-base-tab, .rh-military-tab, .rh-system-tab).active > span:first-child {
    background: var(--d-knopf-rot) !important;
    box-shadow: var(--d-knopf-schatten-rot) !important;
    border-color: var(--d-red) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------
   6. Eingaben
   --------------------------------------------------------------------- */

#rh :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
    background: var(--d-bg) !important;
    border: 1px solid var(--d-line2) !important;
    border-radius: var(--d-r-s) !important;
    box-shadow: none !important;
    clip-path: none !important;
    color: var(--d-text) !important;
}

#rh :is(input, select, textarea):focus {
    border-color: var(--d-red-line) !important;
    box-shadow: 0 0 0 3px var(--d-red-soft) !important;
    outline: none !important;
}

#rh :is(input, textarea)::placeholder {
    color: var(--d-faint) !important;
}

#rh :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--d-red);
}

/* ---------------------------------------------------------------------
   7. Tabellen, Listen, Plaketten
   --------------------------------------------------------------------- */

#rh table {
    border-collapse: collapse;
}

#rh :is(th) {
    background: transparent !important;
    border-bottom: 1px solid var(--d-line2) !important;
    color: var(--d-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

#rh :is(td) {
    border-color: var(--d-line) !important;
}

#rh tbody tr:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Nur die Pillen selbst - nicht ihre Behälter (…-chipset, …-badges,
   …-pills, …-tags), die würden sonst zu runden Blasen um mehrere Zeilen. */
#rh :is([class*="-chip"], [class*="-badge"]:not(.commander-badge):not(.commander-badge-wrapper), [class*="-pill"], [class*="-tag"]:not([class*="map-tag"])):not(:is([class*="chipset"], [class*="-badges"], [class*="-pills"], [class*="-tags"], [class*="badge-wrap"], [class*="badge-progress"], [class*="badge-compare"])) {
    background: var(--d-s3) !important;
    border: 1px solid var(--d-line) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    clip-path: none !important;
    color: var(--d-text2) !important;
    letter-spacing: 0.02em !important;
}

/* Mehrzeilige „Chips“ sind Kästchen, keine Pillen - mit 999px würden
   sie zu Kreisen (Berichtskopf, Event-Buffs, Versorgungsserie). */
#rh#rh :is(.rh-report-summary-chip, .event-buff-chip, .rh-daily-streak-badge) {
    border-radius: var(--d-r-k) !important;
    background: var(--d-licht), var(--d-s2) !important;
    border: 1px solid var(--d-line2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    padding: 10px 12px !important;
    align-content: start;
}

#rh#rh .rh-report-summary-chip small {
    color: var(--d-muted) !important;
    font: 600 0.66rem/1.2 var(--d-font) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

#rh#rh .rh-report-summary-chip strong {
    color: var(--d-text) !important;
    font: 600 0.9rem/1.35 var(--d-font) !important;
}

#rh#rh :is(.rh-report-summary-chip.combat, .rh-report-summary-chip.danger) { border-left: 3px solid var(--d-red) !important; }
#rh#rh :is(.rh-report-summary-chip.loot, .rh-report-summary-chip.success) { border-left: 3px solid var(--d-ok) !important; }
#rh#rh :is(.rh-report-summary-chip.coord, .rh-report-summary-chip.transport, .rh-report-summary-chip.intel) { border-left: 3px solid var(--d-line3) !important; }

/* Fortschrittsbalken (außer Rohstoffen): Grau mit rotem Stand. */
#rh :is([class*="progress"], [class*="-track"], [class*="balken"]:not(.rh-balken)) {
    box-shadow: none !important;
}

#rh :is([class*="progress-fill"], [class*="-fill"]:not(.res-bar-fill), .rangbalken-fuellung, .commander-xp-fill) {
    background: var(--d-red) !important;
    box-shadow: none !important;
}

/* Bildlaufleisten */
#rh * {
    scrollbar-width: thin;
    scrollbar-color: var(--d-s4) transparent;
}

#rh *::-webkit-scrollbar { width: 8px; height: 8px; }
#rh *::-webkit-scrollbar-thumb { background: var(--d-s4); border-radius: 8px; }
#rh *::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
   8. Überschriften in Kopfbereichen der Seiten
   --------------------------------------------------------------------- */

#rh :is([class*="title"], [class*="headline"], [class*="-head"], [class*="header"], [class*="-hero"])
    :is(strong, h1, h2, h3, h4, span:not([class*="kicker"]):not([class*="label"]):not([class*="chip"]):not([class*="badge"])) {
    text-transform: none !important;
    letter-spacing: -0.01em !important;
}

#rh .rh-submenu-header {
    gap: 14px !important;
}

#rh .rh-submenu-copy strong {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

#rh .rh-submenu-copy em {
    color: var(--d-muted) !important;
    font-size: 0.9rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#rh .rh-submenu-copy :is(small, span[class*="kicker"]),
#rh .rh-submenu-header > small,
#rh [class*="kicker"] {
    color: var(--d-red) !important;
}

/* Zeichen-Kästchen vor Überschriften */
#rh :is(.rh-submenu-icon, [class*="-icon"]:not(.score-icon):not(.res-icon)) {
    background: var(--d-s3) !important;
    border: 1px solid var(--d-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    clip-path: none !important;
}

/* ---------------------------------------------------------------------
   9. Kopf
   --------------------------------------------------------------------- */

#rh .kopf.top-bar-container {
    background: var(--d-s1) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--d-line) !important;
    box-shadow: none !important;
}

#rh .kopf::before,
#rh .kopf::after,
#rh .top-bar-header::before,
#rh .top-bar-header::after {
    display: none !important;
}

#rh .marke {
    color: var(--d-text) !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-decoration: none !important;
}

#rh .marke-zusatz {
    color: var(--d-muted) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.06em !important;
}

/* Basiswahl */
#rh .rh-basiswahl-kapsel,
#rh .rh-basiswahl > button:not(.rh-basiswahl-kapsel),
#rh .rh-basiswahl > a {
    background: var(--d-knopf) !important;
    border: 1px solid var(--d-line2) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    clip-path: none !important;
    color: var(--d-text2) !important;
}

#rh .rh-basiswahl-kapsel:hover,
#rh .rh-basiswahl > button:not(.rh-basiswahl-kapsel):hover {
    background: var(--d-s3) !important;
    border-color: var(--d-line3) !important;
}

#rh .rh-basiswahl-text strong {
    color: var(--d-text) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

#rh .rh-basiswahl-text small {
    color: var(--d-muted) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em !important;
}

#rh .rh-basiswahl-nummer {
    background: var(--d-knopf-rot) !important;
    border-radius: 7px !important;
    clip-path: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 700 !important;
}

#rh .rh-basiswahl-nummer::before,
#rh .rh-basiswahl-nummer::after {
    display: none !important;
}

/* Kommandant: HQ-Stufe und Kommandorang */
#rh .commander-container {
    background: var(--d-licht), var(--d-s2) !important;
    border: 1px solid var(--d-line) !important;
    border-radius: var(--d-r) !important;
    box-shadow: none !important;
    clip-path: none !important;
    filter: none !important;
}

#rh .commander-container::before,
#rh .commander-container::after {
    display: none !important;
}

#rh .commander-level-group {
    border-right: 1px solid var(--d-line) !important;
}

#rh .commander-badge {
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(180deg, rgba(229, 72, 59, 0.3), rgba(229, 72, 59, 0.1)), var(--d-s2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--d-red-line) !important;
    border-radius: 10px !important;
    clip-path: none !important;
}

#rh .commander-badge::before {
    display: none !important;
}

#rh .commander-badge span {
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

#rh .commander-cost,
#rh .commander-cost span {
    color: var(--d-muted) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em !important;
}

#rh .commander-cost strong {
    color: var(--d-text) !important;
}

#rh .commander-name {
    color: var(--d-text) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

#rh .commander-xp-track {
    background: var(--d-s4) !important;
    border: 0 !important;
    height: 5px !important;
}

#rh .commander-xp-text {
    color: var(--d-muted) !important;
    font-size: 0.72rem !important;
}

#rh .commander-path-display::before {
    display: none !important;
}

/* Punkte */
#rh :is(.score-module-container, .rh-score-kopf) {
    background: var(--d-licht), var(--d-s2) !important;
    border: 1px solid var(--d-line) !important;
    border-radius: var(--d-r) !important;
    box-shadow: none !important;
    clip-path: none !important;
    filter: none !important;
}

#rh :is(.score-module-container, .rh-score-kopf)::before,
#rh :is(.score-module-container, .rh-score-kopf)::after {
    display: none !important;
}

#rh .rh-score-kopf .score-value {
    color: var(--d-text) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

#rh .rh-score-kopf .score-icon {
    filter: none !important;
}

/* ---------------------------------------------------------------------
   10. Rohstoffleiste - die Farben je Rohstoff bleiben
   --------------------------------------------------------------------- */

#rh .res-item-hud {
    background: var(--d-licht), var(--d-s1) !important;
    border-style: solid !important;
    border-width: 2px 1px 1px 1px !important;
    border-right-color: var(--d-line) !important;
    border-bottom-color: var(--d-line) !important;
    border-left-color: var(--d-line) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 16px rgba(0, 0, 0, 0.3) !important;
    clip-path: none !important;
    filter: none !important;
}

#rh .res-item-hud::before,
#rh .res-item-hud::after {
    display: none !important;
}

#rh .res-item-hud.critical {
    border-right-color: var(--d-red-line) !important;
    border-bottom-color: var(--d-red-line) !important;
    border-left-color: var(--d-red-line) !important;
    background: linear-gradient(0deg, var(--d-red-soft), var(--d-red-soft)), var(--d-s1) !important;
}

#rh .res-header,
#rh .res-name {
    color: var(--d-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
}

#rh .res-values strong {
    color: var(--d-text) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

#rh .res-cap,
#rh .res-rate {
    color: var(--d-faint) !important;
    font-size: 0.72rem !important;
}

#rh .res-bar-container {
    height: 4px !important;
    background: var(--d-s4) !important;
    box-shadow: none !important;
}

#rh .res-bar-container::after {
    display: none !important;
}

#rh .res-item-hud.diamond .res-bar-fill { background: var(--res-diamond) !important; }
#rh .res-item-hud.ore .res-bar-fill { background: var(--res-ore) !important; }
#rh .res-item-hud.oil .res-bar-fill { background: var(--res-oil) !important; }
#rh .res-item-hud.fuel .res-bar-fill { background: var(--res-fuel) !important; }
#rh .res-item-hud.food .res-bar-fill { background: var(--res-food) !important; }
#rh .res-item-hud.power .res-bar-fill { background: var(--res-power) !important; }
#rh .res-item-hud.power.critical .res-bar-fill { background: var(--d-red) !important; }
#rh .res-item-hud .res-bar-fill { box-shadow: none !important; opacity: 0.9; }

#rh .res-item-hud.power .res-name {
    color: var(--d-muted) !important;
}

/* ---------------------------------------------------------------------
   11. Kommando-Menü
   --------------------------------------------------------------------- */

#rh .command-nav-panel {
    padding: 14px 12px !important;
}

#rh .command-nav-title {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    padding: 2px 6px 10px !important;
}

#rh .command-nav-title::before,
#rh .command-nav-title::after {
    display: none !important;
}

#rh .command-nav-title strong {
    color: var(--d-text) !important;
    font-size: 1rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#rh .command-nav-title small {
    color: var(--d-faint) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#rh .command-nav-kicker {
    color: var(--d-red) !important;
}

#rh .command-nav-section {
    border-color: var(--d-line) !important;
}

#rh .command-nav-section-head {
    border: 0 !important;
    background: transparent !important;
    padding-left: 6px !important;
}

#rh .command-nav-section-head::before,
#rh .command-nav-section-head::after {
    display: none !important;
}

#rh .command-nav-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.008) 100%), var(--d-s2) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--d-r-k) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 3px 8px rgba(0, 0, 0, 0.28) !important;
    clip-path: none !important;
    filter: none !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    transform: none !important;
}

#rh .command-nav-item::before,
#rh .command-nav-item::after {
    display: none !important;
}

#rh .command-nav-item:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%), var(--d-s3) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

#rh .command-nav-item.active {
    background: linear-gradient(180deg, rgba(229, 72, 59, 0.22) 0%, rgba(229, 72, 59, 0.08) 100%), var(--d-s2) !important;
    border-color: var(--d-red-line) !important;
    border-top-color: rgba(245, 138, 124, 0.6) !important;
}

#rh .command-nav-item .nav-ico {
    background: linear-gradient(180deg, #2a2f36, #1a1e23) !important;
    border: 1px solid var(--d-line) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    clip-path: none !important;
    color: var(--d-text2) !important;
}

#rh .command-nav-item.active .nav-ico {
    background: var(--d-knopf-rot) !important;
    box-shadow: var(--d-knopf-schatten-rot) !important;
    border-color: var(--d-red) !important;
    color: #fff !important;
}

#rh .command-nav-item .nav-copy strong {
    color: var(--d-text) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#rh .command-nav-item .nav-copy small {
    color: var(--d-faint) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#rh .nav-badge {
    background: var(--d-red) !important;
    border-color: var(--d-red) !important;
    color: #fff !important;
}

/* Fußzeile */
#rh .fuss {
    border-top: 1px solid var(--d-line) !important;
    color: var(--d-faint) !important;
}

/* Reiter-Beschriftung ohne Großbuchstaben */
#rh :is(.rh-base-tab, .rh-military-tab, .rh-system-tab) :is(strong, b) {
    color: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#rh :is(.rh-base-tab, .rh-military-tab, .rh-system-tab) :is(small, em) {
    color: var(--d-faint) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* ---------------------------------------------------------------------
   12. Großbuchstaben und Sperrschrift nur noch für kleine Etiketten
   (#rh#rh: zählt doppelt, damit es die vielen Einzelregeln der älteren
   Dateien schlägt)
   --------------------------------------------------------------------- */

#rh#rh *:not(svg):not(svg *) {
    text-transform: none !important;
    letter-spacing: normal !important;
}

#rh#rh :is([class*="kicker"], [class*="eyebrow"], [class$="-label"], [class*="-label "], th, .res-header, .res-name, .command-nav-kicker, .command-nav-section-head span, .rh-auftrag-art, .rh-wartung-band):not([class*="map-"]) {
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
}

#rh#rh .marke {
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
}

#rh#rh .res-header .res-rate {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------------
   13. Leisten und schwebende Teile
   --------------------------------------------------------------------- */

/* Auftragsleiste über dem Radar */
#rh .rh-auftrag-spalte {
    background: var(--d-s1) !important;
    background-image: none !important;
    border: 1px solid var(--d-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    clip-path: none !important;
}

#rh .rh-auftrag-spalte::before,
#rh .rh-auftrag-spalte::after {
    display: none !important;
}

/* Event-Anzeige unten rechts */
#rh .event-ops-hud {
    background: var(--d-s1) !important;
    background-image: none !important;
    border: 1px solid var(--d-line2) !important;
    border-radius: var(--d-r) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
    clip-path: none !important;
}

#rh .event-ops-hud::before,
#rh .event-ops-hud::after {
    display: none !important;
}

/* Einsatzprotokoll und eingeklappte Leiste */
#rh #rhTutorialPanel {
    background: var(--d-s1) !important;
    border: 1px solid var(--d-line2) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

#rh #rhTutorialCollapsed {
    background: var(--d-s2) !important;
    border: 1px solid var(--d-line2) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
    color: var(--d-text) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

#rh :is(.rh-tutorial-progress-bg) {
    background: var(--d-s4) !important;
    border: 0 !important;
}

#rh .rh-tutorial-progress-fill {
    background: var(--d-red) !important;
}

#rh .rh-tutorial-objective {
    background: var(--d-s2) !important;
    border: 1px solid var(--d-line) !important;
    border-left: 3px solid var(--d-red) !important;
    border-radius: 8px !important;
}

/* Fenster (Versorgung, Bestätigungen, Berichte) */
#rh :is(.rh-daily-reward-modal, .rh-confirm-box, .mean-neighbor-map-dialog, .rh-general-sub-modal, .rh-consent-modal-box) {
    background: var(--d-s1) !important;
    background-image: none !important;
    border: 1px solid var(--d-line2) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
    clip-path: none !important;
}

#rh :is(.rh-daily-reward-modal, .rh-confirm-box, .mean-neighbor-map-dialog, .rh-general-sub-modal, .rh-consent-modal-box)::before,
#rh :is(.rh-daily-reward-modal, .rh-confirm-box, .mean-neighbor-map-dialog, .rh-general-sub-modal, .rh-consent-modal-box)::after {
    display: none !important;
}

#rh :is(.rh-confirm-overlay, .rh-daily-reward-overlay, .mean-neighbor-map-backdrop, .rh-general-sub-overlay, .redeploy-modal-overlay, .rh-quick-settings-overlay) {
    background: rgba(5, 6, 8, 0.72) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

#rh .rh-daily-streak-badge {
    background: var(--d-red-soft) !important;
    border: 1px solid var(--d-red-line) !important;
    border-radius: 12px !important;
}

/* Leere Zustände */
#rh :is([class*="empty"], .rh-reiter-leer, [class*="-leer"]) {
    background: transparent !important;
    background-image: none !important;
    border-color: var(--d-line) !important;
    box-shadow: none !important;
    color: var(--d-muted) !important;
}

/* ---------------------------------------------------------------------
   14. Einzelne Ausreißer
   --------------------------------------------------------------------- */

/* Kennzahlen dürfen umbrechen statt abgeschnitten zu werden. */
#rh .rh-military-stat :is(small, em) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Kopfbereiche mit Lichtkegel (Events, Handel, General …) flach. */
#rh :is([class*="-hero"]:not(.rh-daily-hero), .event-command-hero, .tradepost-hero) {
    background-color: var(--d-s1) !important;
    background-image: none !important;
    border-color: var(--d-line) !important;
    box-shadow: none !important;
}

#rh :is([class*="-hero"], .event-command-hero)::before,
#rh :is([class*="-hero"], .event-command-hero)::after {
    display: none !important;
}

/* Was das Einsatzprotokoll gerade zeigt: rote Kontur statt Leuchten. */
#rh#rh .rh-tutorial-highlight {
    outline: 2px solid var(--d-red) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px var(--d-red-soft) !important;
}

/* ---------------------------------------------------------------------
   15. Karte: Unbekanntes Gelände als dunkelgrau-roter Schleier
   (Basti, 24.10.2026 - statt Schwarz). Nebel (in Reichweite, nicht
   aufgeklärt) dazu passend rötlich schraffiert, Chunkgrenzen rot.
   --------------------------------------------------------------------- */

#rh .map-container .map-tile.locked,
#rh .map-container .map-tile.locked:hover {
    background:
        radial-gradient(circle at 50% 40%, rgba(120, 28, 22, 0.16), transparent 70%),
        linear-gradient(160deg, #1b1516 0%, #120e0f 100%) !important;
    border: 1px solid rgba(70, 24, 22, 0.35) !important;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.45) !important;
}

#rh .map-container .map-tile.fog,
#rh .map-container .map-tile.fog:hover {
    background:
        repeating-linear-gradient(45deg, rgba(229, 72, 59, 0.09) 0 1px, transparent 1px 7px),
        rgba(22, 14, 14, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

#rh .map-container .map-tile.fog:hover {
    background:
        repeating-linear-gradient(45deg, rgba(240, 100, 86, 0.2) 0 1px, transparent 1px 7px),
        rgba(30, 18, 18, 0.55) !important;
    border-color: rgba(229, 72, 59, 0.55) !important;
}

#rh .map-container .map-tile.chunk-edge-r { border-right: 1px dashed rgba(229, 72, 59, 0.32) !important; }
#rh .map-container .map-tile.chunk-edge-b { border-bottom: 1px dashed rgba(229, 72, 59, 0.32) !important; }
#rh .map-container .map-tile.chunk-edge-l { border-left: 1px dashed rgba(229, 72, 59, 0.32) !important; }
#rh .map-container .map-tile.chunk-edge-u { border-top: 1px dashed rgba(229, 72, 59, 0.32) !important; }


/* ---------------------------------------------------------------------
   16. Tooltip (js/tipp.js) - statt der weißen Browser-Blase
   Hängt am <body>, also außerhalb von #rh: Werte stehen direkt hier.
   --------------------------------------------------------------------- */

#rh-tipp {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483000;
    max-width: min(360px, calc(100vw - 20px));
    padding: 9px 12px 10px 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid #e5483b;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(0, 0, 0, 0.1) 100%),
        #161a1f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.55);
    color: #e8ecf1;
    font: 500 12.5px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: pre-line;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

#rh-tipp.an {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
    #rh-tipp,
    #rh-tipp.an {
        transition: none;
    }
}

/* Karten mit Tooltip verraten es am Zeiger. */
#rh .res-item-hud[data-tipp]:not([data-tipp=""]) {
    cursor: help;
}

/* ---------------------------------------------------------------------
   17. Karte: Felder (Nodes) und Namensschilder (Plates)
   Rebuild 24.10.2026 (Basti: „alle Nodes und Plates überarbeiten“).
   Inhalt und Klassen bleiben wie live, nur das Aussehen ist neu:
   Kacheln mit Inhalt sind kleine Marker (runde Ecken, Tönung, feiner
   Rand), Namen stehen auf Schildern, Rohstofffelder zeigen ein Symbol in
   ihrer Rohstofffarbe statt eines Leuchtflecks.
   --------------------------------------------------------------------- */

#rh .map-container {
    --k-r: 8px;
    --k-ore: #f0a040;
    --k-oil: #a2a2cc;
    --k-food: #5fd36a;
    --k-diamond: #3ee8f0;
    --k-own: #e5483b;
    --k-enemy: #f0b54a;
    --k-vac: #3fd6f0;
}

/* Gemeinsam: Marker-Kacheln */
#rh .map-container .map-tile:is(.base, .own-bg-base, .enemy-bg-attackable, .enemy-bg-vacation, .warlord-base, .camp-guardian, .salvage-cache, .event-marker-tile, [class*="node-"]) {
    border-radius: var(--k-r) !important;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* Leere Felder: Koordinaten nur als Hauch, beim Überfahren lesbar */
#rh .map-container .map-coord-label {
    color: rgba(232, 236, 241, 0.3);
    font: 500 clamp(6px, 0.56vw, 8px)/1 var(--d-font);
    letter-spacing: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
    transform: none;
}

#rh .map-container .map-tile:hover .map-coord-label {
    color: rgba(255, 255, 255, 0.92);
}

/* Überfahren und Ziel in Rot statt Grün/Orange */
#rh .map-container .map-tile:hover:not(.locked):not(.fog) {
    background-color: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

#rh .map-container .map-tile:hover::after {
    --ui-highlight: rgba(255, 255, 255, 0.85);
}

/* Doppelte Klasse: das Ziel schlägt auch Felder, Basen und Lager. */
#rh .map-container .map-tile.target-locked.target-locked,
#rh .map-container .map-tile.target-locked.target-locked:hover {
    z-index: 95;
    background-color: rgba(229, 72, 59, 0.22) !important;
    border-color: #ff5a4a !important;
    box-shadow: inset 0 0 0 2px #ff5a4a, inset 0 0 14px rgba(229, 72, 59, 0.45), 0 0 12px rgba(229, 72, 59, 0.55) !important;
}

#rh .map-container .map-tile.target-locked::after,
#rh .map-container .map-tile.target-locked:hover::after {
    background:
        linear-gradient(to right, #ff5a4a 2px, transparent 2px) 0 0,
        linear-gradient(to bottom, #ff5a4a 2px, transparent 2px) 0 0,
        linear-gradient(to left, #ff5a4a 2px, transparent 2px) 100% 0,
        linear-gradient(to bottom, #ff5a4a 2px, transparent 2px) 100% 0,
        linear-gradient(to right, #ff5a4a 2px, transparent 2px) 0 100%,
        linear-gradient(to top, #ff5a4a 2px, transparent 2px) 0 100%,
        linear-gradient(to left, #ff5a4a 2px, transparent 2px) 100% 100%,
        linear-gradient(to top, #ff5a4a 2px, transparent 2px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 8px 8px;
}

/* --- Rohstofffelder -------------------------------------------------- */

#rh .map-container .map-tile[class*="node-"] {
    --n: var(--k-ore);
    justify-content: center;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--n) 30%, transparent) 0%, transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.12)),
        rgba(12, 14, 17, 0.78) !important;
    border: 1px solid color-mix(in srgb, var(--n) 60%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 9px color-mix(in srgb, var(--n) 26%, transparent) !important;
    color: #fff !important;
}

#rh .map-container .map-tile.node-oil { --n: var(--k-oil); }
#rh .map-container .map-tile.node-food { --n: var(--k-food); }
#rh .map-container .map-tile.node-diamond { --n: var(--k-diamond); }

/* Das Symbol: Erz als Brocken, Öl als Tropfen, Farm als Blatt, Diamant als
   Stein - mittig und gedämpft HINTER der Koordinate (Basti: „Koordinaten
   lesbar hinter die Symbole, untereinander sieht komisch aus“). */
#rh .map-container .map-tile[class*="node-"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    opacity: 0.62;
    background: linear-gradient(150deg, color-mix(in srgb, var(--n) 35%, #fff) 0%, var(--n) 45%, color-mix(in srgb, var(--n) 55%, #000) 100%);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--n) 70%, transparent)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

#rh .map-container .map-tile.node-ore::before {
    clip-path: polygon(30% 4%, 72% 0%, 100% 38%, 88% 86%, 44% 100%, 6% 78%, 0% 34%);
}

#rh .map-container .map-tile.node-oil::before {
    width: 48%;
    border-radius: 0 50% 50% 50%;
    transform: translate(-50%, -40%) rotate(45deg);
}

#rh .map-container .map-tile.node-food::before {
    border-radius: 85% 0 85% 0;
    transform: translate(-50%, -50%) rotate(-8deg);
}

#rh .map-container .map-tile.node-diamond::before {
    clip-path: polygon(22% 0%, 78% 0%, 100% 30%, 50% 100%, 0% 30%);
}

#rh .map-container .map-tile[class*="node-"] .map-coord-label {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.7);
}

/* Bergungslager (Warlord-Beute): Erzfeld-Form, eigenes Schild */
#rh .map-container .map-tile.salvage-cache {
    --n: #ffd36a;
    justify-content: center;
}

#rh .map-container .map-tile.salvage-cache::before {
    display: none;
}

/* --- Namensschilder ------------------------------------------------- */

#rh .map-container .rh-map-tag-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: calc(100% - 4px);
    overflow: hidden;
    padding: 2px 4px 2px;
    border-radius: 4px;
    font: 700 clamp(7px, 0.62vw, 9.5px)/1 var(--d-font);
    letter-spacing: 0.02em;
    text-overflow: clip;
    text-shadow: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

#rh .map-container .map-tag-own {
    background: linear-gradient(180deg, #f2604f 0%, #d63e32 100%);
    color: #fff;
}

#rh .map-container .map-tag-attackable {
    background: linear-gradient(180deg, #f6c463 0%, #d9962c 100%);
    color: #1d1405;
}

#rh .map-container .map-tag-vacation {
    background: rgba(8, 30, 36, 0.92);
    border: 1px solid rgba(63, 214, 240, 0.7);
    color: #c5f6ff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

#rh .map-container .rh-map-salvage-tag {
    background: rgba(30, 20, 8, 0.92);
    border: 1px solid rgba(255, 211, 106, 0.7);
    color: #ffe3a3;
    font-size: clamp(6.5px, 0.56vw, 8.5px);
}

/* „UM“-Fähnchen (Urlaub) in der Ecke */
#rh .map-container .rh-map-flag {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 1px 2px;
    border-radius: 3px;
    background: var(--k-vac);
    color: #04171b;
    font: 800 6px/1 var(--d-font);
    font-style: normal;
    letter-spacing: 0.02em;
}

/* Gebäudesymbol hinter dem Schild (Basen) */
#rh .map-container .map-tile:is(.base, .enemy-bg-attackable, .enemy-bg-vacation):not(.camp-idle):not(.camp-working):not(.camp-foreign)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    aspect-ratio: 1.15;
    transform: translate(-50%, -54%);
    opacity: 0.5;
    clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 64% 100%, 64% 66%, 36% 66%, 36% 100%, 0% 100%, 0% 38%);
    background: var(--b, #fff);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

/* --- Eigene Basis ---------------------------------------------------- */

#rh .map-container .map-tile.base.own-bg-base {
    --b: linear-gradient(180deg, #fff 0%, #f3b2aa 100%);
    background:
        radial-gradient(circle at 50% 35%, rgba(229, 72, 59, 0.38) 0%, transparent 70%),
        rgba(24, 12, 12, 0.86) !important;
    border: 1px solid rgba(229, 72, 59, 0.8) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 10px rgba(229, 72, 59, 0.3) !important;
}

#rh .map-container .map-tile.heimat,
#rh .map-container .map-tile.base.own-bg-base.heimat {
    z-index: 6;
    border-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 12px rgba(255, 255, 255, 0.35), 0 0 18px rgba(229, 72, 59, 0.35) !important;
}

/* --- Fremde Basen ---------------------------------------------------- */

#rh .map-container .map-tile.enemy-bg-attackable {
    --b: linear-gradient(180deg, #ffe6a8 0%, #f0b54a 100%);
    background:
        radial-gradient(circle at 50% 35%, rgba(240, 181, 74, 0.26) 0%, transparent 70%),
        rgba(22, 17, 9, 0.86) !important;
    border: 1px solid rgba(240, 181, 74, 0.75) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 8px rgba(240, 181, 74, 0.2) !important;
}

#rh .map-container .map-tile.enemy-bg-vacation {
    --b: linear-gradient(180deg, #e6fbff 0%, #3fd6f0 100%);
    background:
        radial-gradient(circle at 50% 35%, rgba(63, 214, 240, 0.18) 0%, transparent 70%),
        rgba(8, 18, 22, 0.86) !important;
    border: 1px dashed rgba(63, 214, 240, 0.75) !important;
    box-shadow: inset 0 0 10px rgba(63, 214, 240, 0.12) !important;
}

#rh .map-container .map-tile.warlord-base {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 48, 36, 0.5) 0%, rgba(60, 6, 6, 0.9) 70%),
        #160606 !important;
    border: 1px solid rgba(255, 70, 58, 0.9) !important;
    box-shadow: inset 0 0 10px rgba(255, 40, 30, 0.35), 0 0 12px rgba(255, 40, 30, 0.4) !important;
    font-size: clamp(11px, 1.05vw, 17px);
    animation: none;
}

/* --- Feldlager (MC) -------------------------------------------------- */

#rh .map-container .map-tile:is(.camp-working, .camp-idle) {
    justify-content: center;
    background:
        radial-gradient(circle at 50% 32%, rgba(229, 72, 59, 0.24) 0%, transparent 66%),
        rgba(18, 14, 15, 0.84) !important;
    border: 1px solid rgba(229, 72, 59, 0.6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#rh .map-container .map-tile.camp-idle {
    border-color: rgba(240, 181, 74, 0.85) !important;
    box-shadow: inset 0 0 10px rgba(240, 181, 74, 0.25) !important;
}

#rh .map-container .map-tile:is(.camp-working, .camp-idle) .camp-status-icon {
    top: 50%;
    z-index: 0;
    font-size: clamp(12px, 1.25vw, 20px);
    opacity: 0.55;
}

#rh .map-container .map-tile.enemy-bg-attackable .camp-status-icon {
    display: none;
}

/* --- Lager mit Wächtern (W1 … WX) ------------------------------------ */

#rh .map-container .map-tile.camp.camp-guardian {
    --w: #9aa3ad;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px),
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--w) 28%, transparent) 0%, transparent 72%),
        rgba(14, 12, 12, 0.88) !important;
    border: 1px solid color-mix(in srgb, var(--w) 80%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 8px color-mix(in srgb, var(--w) 22%, transparent) !important;
    outline: 0 !important;
}

#rh .map-container .map-tile.camp.camp-guardian::before {
    inset: 2px;
    border: 1px solid color-mix(in srgb, var(--w) 30%, transparent);
    border-radius: calc(var(--k-r) - 3px);
}

#rh .map-container .map-tile.camp.camp-guardian.camp-guardian-unknown { --w: #6f7883; border-style: dashed !important; }
#rh .map-container .map-tile.camp.camp-guardian.camp-guardian-low { --w: #b8c0c9; border-style: dotted !important; }
#rh .map-container .map-tile.camp.camp-guardian.camp-guardian-medium { --w: #e0a33a; border-style: dashed !important; }
#rh .map-container .map-tile.camp.camp-guardian.camp-guardian-high { --w: #f07a2e; }
#rh .map-container .map-tile.camp.camp-guardian.camp-guardian-very-high { --w: #ff5a4a; }

#rh .map-container .map-tile.camp.camp-guardian.camp-guardian-very-high::before {
    border-width: 1px;
    border-color: rgba(255, 90, 74, 0.6);
}

#rh .map-container .map-tile.camp.camp-guardian.camp-guardian-warlord {
    --w: #ff2a1f;
    border: 2px double rgba(255, 70, 58, 0.95) !important;
    box-shadow: inset 0 0 10px rgba(255, 40, 30, 0.35), 0 0 12px rgba(255, 40, 30, 0.45) !important;
}

#rh .map-container .map-guardian-marker {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

#rh .map-container .map-guardian-marker b {
    color: #fff;
    font: 800 clamp(8px, 0.82vw, 13px)/1 var(--d-font);
    letter-spacing: 0;
}

#rh .map-container .map-guardian-marker small {
    margin-top: 1px;
    color: color-mix(in srgb, var(--w) 70%, #fff);
    font: 700 clamp(5px, 0.4vw, 6.5px)/1 var(--d-font);
    letter-spacing: 0.08em;
}

/* --- Event-Ziele ----------------------------------------------------- */

#rh .map-container .map-tile.event-marker-tile {
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 190, 80, 0.26) 0%, transparent 70%),
        rgba(20, 15, 8, 0.88) !important;
    border: 1px solid rgba(255, 190, 80, 0.7) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 8px rgba(255, 190, 80, 0.22) !important;
}

#rh .map-container .map-tag-event {
    min-width: 0;
    min-height: 0;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(10, 8, 4, 0.9);
    font: 700 clamp(7px, 0.62vw, 9px)/1 var(--d-font);
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-shadow: none;
}

/* --- Handy: Kacheln um 20 px - Symbol statt Schrift ------------------ */

@media (max-width: 760px) {
    #rh .map-container {
        --k-r: 4px;
    }

    #rh .map-container .map-tile.leer .map-coord-label,
    #rh .map-container .map-tile[class*="node-"] .map-coord-label {
        display: none;
    }

    #rh .map-container .map-tile[class*="node-"]::before {
        top: 50%;
        width: 52%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    #rh .map-container .map-tile.node-oil::before {
        width: 42%;
        transform: translate(-50%, -40%) rotate(45deg);
    }

    #rh .map-container .map-tile.node-food::before {
        transform: translate(-50%, -50%) rotate(-8deg);
    }

    /* Basen: nur das Gebäude, das Schild steht im Tooltip */
    #rh .map-container .map-tile:is(.base, .enemy-bg-attackable, .enemy-bg-vacation, .camp-working, .camp-idle) .rh-map-tag-label {
        display: none;
    }

    #rh .map-container .map-tile:is(.base, .enemy-bg-attackable, .enemy-bg-vacation):not(.camp-idle):not(.camp-working):not(.camp-foreign)::before {
        width: 56%;
        opacity: 1;
    }

    #rh .map-container .map-tile:is(.camp-working, .camp-idle) .camp-status-icon {
        top: 50%;
        font-size: 10px;
        opacity: 1;
    }

    #rh .map-container .rh-map-flag {
        top: 1px;
        right: 1px;
        padding: 0 1px;
        font-size: 4.5px;
    }

    #rh .map-container .map-guardian-marker small {
        display: none;
    }

    #rh .map-container .map-guardian-marker b {
        font-size: 8px;
    }
}


/* ---------------------------------------------------------------------
   18. Karten: Tooltip auf Bild und Kopf, Transportzeile (24.10.2026)
   --------------------------------------------------------------------- */

#rh :is(.rh-building-media, .rh-research-media, .rh-unit-media, .rh-building-head, .rh-research-head, .rh-unit-head)[data-tipp] {
    cursor: help;
}

#rh .rh-unit-transport {
    margin: 2px 0 6px;
    padding: 6px 10px;
    border: 1px solid var(--d-line2);
    border-left: 3px solid var(--d-red);
    border-radius: 8px;
    background: var(--d-licht), var(--d-s2);
    color: var(--d-text);
    font: 600 0.78rem/1.35 var(--d-font);
}

/* Alien-Seite: Fraktionsverhalten als Gegner (24.10.2026) */
#rh .al-fraktion .al-verhalten {
    margin: -2px 0 10px;
    padding: 6px 10px;
    border-left: 3px solid var(--d-red);
    border-radius: 6px;
    background: var(--d-red-soft);
    color: var(--d-text2);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------
   19. Kommandorang: die Zweige als Karten (24.10.2026)
   --------------------------------------------------------------------- */

#rh .rh-zweige {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 14px 0 16px;
}

#rh .rh-zweig {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
    border: 1px solid var(--d-line2);
    border-radius: var(--d-r);
    background: var(--d-licht), var(--d-s1);
    box-shadow: var(--d-shadow);
}

#rh .rh-zweig.aktiv {
    border-color: rgba(229, 72, 59, 0.35);
}

#rh .rh-zweig.voll {
    border-color: rgba(229, 72, 59, 0.6);
    background: radial-gradient(circle at 100% 0%, rgba(229, 72, 59, 0.12), transparent 55%), var(--d-licht), var(--d-s1);
}

#rh .rh-zweig header {
    display: flex;
    align-items: center;
    gap: 10px;
}

#rh .rh-zweig-zeichen {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--d-line2);
    border-radius: 9px;
    background: var(--d-knopf);
    box-shadow: var(--d-knopf-schatten);
    font-size: 16px;
    line-height: 1;
}

#rh .rh-zweig header strong {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--d-text);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
}

#rh .rh-zweig-stufe {
    flex: 0 0 auto;
    padding: 3px 8px;
    border: 1px solid var(--d-line2);
    border-radius: 999px;
    background: var(--d-s3);
    color: var(--d-text2);
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#rh .rh-zweig.voll .rh-zweig-stufe {
    border-color: var(--d-red-line);
    background: var(--d-red-soft);
    color: #ffb3ab;
}

#rh .rh-zweig p {
    flex: 1 1 auto;
    margin: 0;
    color: var(--d-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

#rh .rh-zweig-leiste {
    display: flex;
    align-items: center;
    gap: 8px;
}

#rh .rh-zweig-segmente {
    display: flex;
    flex: 1 1 auto;
    gap: 3px;
}

#rh .rh-zweig-segmente i {
    flex: 1 1 0;
    height: 6px;
    border-radius: 3px;
    background: var(--d-s4);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
}

#rh .rh-zweig-segmente i.an {
    background: linear-gradient(180deg, #f2604f, #c2352b);
    box-shadow: 0 0 6px rgba(229, 72, 59, 0.35);
}

#rh .rh-zweig footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

#rh .rh-zweig-wert {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

#rh .rh-zweig-wert b {
    color: var(--d-text);
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}

#rh .rh-zweig.aktiv .rh-zweig-wert b {
    color: #ff8a7d;
}

#rh .rh-zweig-wert small {
    color: var(--d-muted);
    font-size: 0.74rem;
    white-space: nowrap;
}

#rh .rh-zweig-knopf {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 6px 12px !important;
    line-height: 1.15;
}

#rh .rh-zweig-knopf:not(:disabled) {
    background: var(--d-knopf-rot) !important;
    border-color: transparent !important;
    box-shadow: var(--d-knopf-schatten-rot) !important;
    color: #fff !important;
}

#rh .rh-zweig-knopf span {
    font-weight: 800;
}

#rh .rh-zweig-knopf small {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

#rh .rh-zweig-knopf:disabled small {
    color: var(--d-muted) !important;
}

@media (max-width: 560px) {
    #rh .rh-zweige {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================
   20. Plünderzug: Kartell-Aufmerksamkeit im Marschbefehl (25.10.2026)
   ==================================================================== */
#rh .rh-travel-chip.red {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.35);
    background: rgba(255, 107, 107, 0.08);
}

#rh .rh-kartell-brief {
    border-color: rgba(252, 139, 126, 0.28);
}

#rh .rh-kartell-brief .rh-travel-chip {
    white-space: normal;
    text-align: right;
}

#rh .rh-quick-risk {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

#rh .rh-quick-risk select {
    width: 100%;
}