/* /Components/ConfirmDialog.razor.rz.scp.css */
.overlay[b-xolbjjou0w] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 20, 30, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog[b-xolbjjou0w] {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    max-width: 26rem;
    width: calc(100% - 2rem);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.dialog h2[b-xolbjjou0w] {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}

.dialog p[b-xolbjjou0w] {
    margin: 0 0 1rem;
    color: #374151;
}

.buttons[b-xolbjjou0w] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.buttons button[b-xolbjjou0w] {
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.cancel[b-xolbjjou0w] {
    border: 1px solid #d6dbe3;
    background: #fff;
    color: #374151;
}

.cancel:hover[b-xolbjjou0w] { background: #eef1f6; }

.confirm[b-xolbjjou0w] {
    border: none;
    background: #b3261e;
    color: #fff;
}

.confirm:hover[b-xolbjjou0w] { background: #932019; }
/* /Components/ReicheOverlay.razor.rz.scp.css */
/* Vollbild über dem Spielbildschirm. Dieselbe Ebene wie der Bestätigungsdialog, damit eine
   Rückfrage aus der Übersicht heraus über ihr landen kann. */
.overlay[b-8errgylx6x] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 20, 30, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

/* Feste Höhe, eigener Rollbereich in der Tabelle: die Kopf- und Fußzeile bleiben stehen,
   während die Zeilen rollen — sonst wanderte „Weitere laden" beim Nachladen aus dem Bild. */
.sheet[b-8errgylx6x] {
    display: flex;
    flex-direction: column;
    width: min(56rem, 100%);
    height: min(44rem, 100%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

header[b-8errgylx6x] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

header h2[b-8errgylx6x] {
    margin: 0;
    font-size: 1.15rem;
}

header .total[b-8errgylx6x] {
    color: #6b7280;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

header .search[b-8errgylx6x] {
    flex: 1 1 auto;
    min-width: 6rem;
    margin-left: auto;
    border: 1px solid #d6dbe3;
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    font-size: 0.88rem;
}

header .ghost[b-8errgylx6x] {
    flex: 0 0 auto;
    border: none;
    border-radius: 8px;
    background: #e5e7eb;
    color: #374151;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

header .ghost:hover[b-8errgylx6x] { background: #d1d5db; }
header .ghost:disabled[b-8errgylx6x] { opacity: 0.5; cursor: not-allowed; }

header .close[b-8errgylx6x] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #4b5563;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
}

header .close:hover[b-8errgylx6x] { color: #1f2937; }

/* Das eigene Reich steht über der Tabelle und nicht in ihr — es soll auffindbar sein, ohne
   dass jemand danach blättert. */
.mine[b-8errgylx6x] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fffbeb;
    font-size: 0.88rem;
}

.mine .label[b-8errgylx6x] {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #92710a;
}

.mine .name[b-8errgylx6x] { font-weight: 600; }
.mine .stat[b-8errgylx6x] { color: #4b5563; font-variant-numeric: tabular-nums; }
.mine .stat b[b-8errgylx6x] { color: #1f2937; }

.swatch[b-8errgylx6x] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    vertical-align: -1px;
    margin-right: 0.4rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.mine .swatch[b-8errgylx6x] { margin-right: 0; }

.table-wrap[b-8errgylx6x] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

table[b-8errgylx6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

thead th[b-8errgylx6x] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    text-align: left;
}

thead th.num[b-8errgylx6x] { text-align: right; }

/* Ein Kopf ohne Knopf trägt seine Beschriftung selbst und muss ihre Polsterung mitbringen. */
thead th.plain[b-8errgylx6x] {
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

thead th button[b-8errgylx6x] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    text-align: inherit;
    cursor: pointer;
}

thead th button:hover[b-8errgylx6x] { color: #1f2937; background: #f3f4f6; }

/* Die aktive Spalte trägt ihre Richtung als Pfeil — die Ansage steht in aria-sort am <th>,
   das hier ist ihr sichtbares Gegenstück. */
thead th[aria-sort="descending"] button[b-8errgylx6x]::after { content: " ▾"; }
thead th[aria-sort="ascending"] button[b-8errgylx6x]::after { content: " ▴"; }

tbody td[b-8errgylx6x] {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #f1f3f6;
    white-space: nowrap;
}

tbody td.num[b-8errgylx6x] { text-align: right; font-variant-numeric: tabular-nums; }

/* Da, aber nicht im Bild: ein Name für die Vorlesehilfe, kein Wort für das Auge. Nicht
   display:none und nicht visibility:hidden — beides nähme ihn auch der Vorlesehilfe. */
.sr-only[b-8errgylx6x] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Feste Breite, damit die Spalte nicht springt, sobald eine Zeile ihren Knopf verliert — und
   das tut die Zeile, der man gerade beigetreten ist. */
th.action[b-8errgylx6x], td.action[b-8errgylx6x] {
    width: 7rem;
    text-align: right;
    padding-right: 0.75rem;
}

.join[b-8errgylx6x] {
    border: 1px solid #d6dbe3;
    border-radius: 6px;
    background: #fff;
    color: #1f2937;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.join:hover[b-8errgylx6x] { background: #eef1f6; border-color: #b9c2ce; }
.join:disabled[b-8errgylx6x] { opacity: 0.5; cursor: not-allowed; }

tbody tr:hover td[b-8errgylx6x] { background: #f8fafc; }

/* Dasselbe Gelb wie die Anheftung: das eigene Reich ist an beiden Stellen dasselbe Reich. */
tbody tr.mine-row td[b-8errgylx6x] { background: #fffbeb; font-weight: 600; }
tbody tr.mine-row:hover td[b-8errgylx6x] { background: #fef6d8; }

.npc[b-8errgylx6x] {
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #eef1f6;
    color: #6b7280;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.empty[b-8errgylx6x] {
    margin: 0;
    padding: 1.5rem 1rem;
    color: #6b7280;
    text-align: center;
}

footer[b-8errgylx6x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
}

footer .shown[b-8errgylx6x] {
    color: #6b7280;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

footer .ghost[b-8errgylx6x] {
    border: none;
    border-radius: 8px;
    background: #1f2937;
    color: #fff;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    cursor: pointer;
}

footer .ghost:hover[b-8errgylx6x] { background: #374151; }
footer .ghost:disabled[b-8errgylx6x] { opacity: 0.5; cursor: not-allowed; }
/* /Layout/GameLayout.razor.rz.scp.css */
/* Eine feste Bühne: die Höhe kommt vom Fenster, nicht vom Inhalt.
 *
 * Das ist keine Kosmetik. Im alten Aufbau stand die Chronik ÜBER der Karte, im selben Fluss —
 * eine Zeile, die mitten in einer Bedienung eintraf, schob die Karte um ihre Zeilenhöhe nach
 * unten, und ein Klick, der auf Großfeld X zielte, landete auf dessen Nachbarn. Deshalb steht
 * hier alles Wachsende außerhalb des Kartenflusses: der Kopfstreifen und die Werkzeugleiste
 * sind in der Höhe fest, Chronik und Spielerliste sitzen in einer eigenen Spalte fester Breite
 * mit eigenem Rollbereich, und die Statusanzeigen schweben absolut über der Karte. Was sich in
 * ihnen ändert, kann die Karte weder verschieben noch in der Größe ändern. */
.game-shell[b-vxz23l9j8p] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.game-head[b-vxz23l9j8p] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 3rem;
    padding: 0 1rem;
    background: #1f2937;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.back[b-vxz23l9j8p] {
    color: #cbd5e1;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.back:hover[b-vxz23l9j8p], .back:focus[b-vxz23l9j8p] {
    color: #f4c542;
}

.game-head h1[b-vxz23l9j8p] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-head h1:focus[b-vxz23l9j8p] {
    outline: none;
}

/* min-height: 0 ist der Punkt, an dem eine Flex-Spalte überhaupt erst schrumpfen darf; ohne
   das wächst die Seite über das Fenster hinaus, statt die Karte zu begrenzen. */
.game-body[b-vxz23l9j8p] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-no45n362n1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Die Hülle borgt sich die Farben des Spielbildschirms (#1f2937 / #374151, siehe
   Pages/Myra.razor.css), damit die Navigation nicht wie eine fremde Vorlage um die Karte
   herum steht. */
.topbar[b-no45n362n1] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 3.5rem;
    padding: 0 1.5rem;
    background: #1f2937;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Schiebt alles Nachfolgende — die Navigation — an den rechten Rand. */
.brand[b-no45n362n1] {
    margin-right: auto;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.brand:hover[b-no45n362n1], .brand:focus[b-no45n362n1] {
    color: #f4c542;
}

.content[b-no45n362n1] {
    flex: 1;
    padding: 1.25rem 1.5rem 2rem;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.topnav[b-dvi411v9tw] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* NavLink rendert sein eigenes <a>, das die Bereichsmarke dieser Datei nicht trägt — daher
   ::deep für alles, was aus der Komponente kommt. */
.topnav[b-dvi411v9tw]  .topnav-link {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #d1d5db;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.topnav[b-dvi411v9tw]  .topnav-link:hover,
.topnav[b-dvi411v9tw]  .topnav-link:focus-visible {
    background: #374151;
    color: #fff;
}

/* Die aktuelle Seite ist an Fläche *und* Strich zu erkennen, nicht nur an der Helligkeit. */
.topnav[b-dvi411v9tw]  .topnav-link.active {
    background: #374151;
    color: #fff;
    box-shadow: inset 0 -2px 0 #f4c542;
}

/* Ein langer Anzeigename kürzt sich, statt die Leiste umbrechen zu lassen. Der zugängliche
   Name bleibt davon unberührt — das Kürzen ist reine Darstellung. */
.topnav[b-dvi411v9tw]  .topnav-link.account {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Map/HexMap.razor.rz.scp.css */
.map-root[b-pr6e8djm3a] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 20rem;
    overflow: hidden;
    background: #eef2f7;
    touch-action: none; /* sonst schwenkt der Browser die Seite statt der Karte */
    cursor: grab;
}

.map-root:active[b-pr6e8djm3a] { cursor: grabbing; }

/* Zwei Leinwände: die eine zeichnet der Maler mit WebGL, die andere trägt die Zähler als Text.
   Keine von beiden nimmt Zeigerereignisse an — alle steigen zur Wurzel auf, deren Handler
   rechnen den Treffer gegen die Geometrie. */
.map-gl[b-pr6e8djm3a],
.map-overlay[b-pr6e8djm3a] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.map-overlay[b-pr6e8djm3a] { z-index: 1; }

/* Die Beschriftung am Zeiger. Sie ersetzt die <title>-Elemente des SVG-Baums: die Karte ist
   jetzt eine Leinwand und hat keine Knoten mehr, an denen ein Browser-Tooltip hängen könnte.
   Der Maler setzt Ort und Inhalt, der Versatz hält die Blase aus dem Zeiger heraus. */
.map-tooltip[b-pr6e8djm3a] {
    position: absolute;
    z-index: 2;
    transform: translate(0.75rem, 0.9rem);
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: rgba(20, 24, 32, 0.88);
    color: #f4f6f9;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}

.map-tooltip[hidden][b-pr6e8djm3a] { display: none; }

/* Ohne WebGL2 bleibt die Fläche leer, und eine leere Fläche sieht aus wie eine Karte ohne Welt. */
.map-notice[b-pr6e8djm3a] {
    position: absolute;
    inset: 0;
    z-index: 3;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
    text-align: center;
    line-height: 1.5;
    background: #eef2f7;
    color: #47505f;
}

.map-controls[b-pr6e8djm3a] {
    position: absolute;
    /* Über dem Fangblatt der Heeresbedienung — siehe .unit-scrim. */
    z-index: 6;
    right: 0.6rem;
    top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.map-controls button[b-pr6e8djm3a] {
    border: 1px solid #d6dbe3;
    background: #fff;
    color: #1f2937;
    border-radius: 7px;
    min-width: 1.9rem;
    height: 1.9rem;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.map-controls button:hover[b-pr6e8djm3a] { background: #eef1f6; }

.map-controls button.fit[b-pr6e8djm3a] {
    min-width: auto;
    padding: 0 0.5rem;
    font-size: 0.78rem;
}

/* Unten links, die freie Ecke: oben links stehen die Statusanzeigen, oben rechts die
   Zoomsteuerung. Dieselbe Aufmachung wie diese, weil beides dasselbe ist — Bedienung, die auf
   der Karte schwebt, statt neben ihr Platz zu nehmen. */
.view-switcher[b-pr6e8djm3a] {
    position: absolute;
    z-index: 6;
    left: 0.6rem;
    bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.view-switcher button[b-pr6e8djm3a] {
    border: 1px solid #d6dbe3;
    background: #fff;
    color: #1f2937;
    border-radius: 7px;
    min-width: 1.9rem;
    height: 1.9rem;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.view-switcher button:hover[b-pr6e8djm3a] { background: #eef1f6; }

/* Welche Ansicht gilt, muss ohne Überfahren ablesbar sein — der Umschalter ist die einzige
   Anzeige dafür. */
.view-switcher button.active[b-pr6e8djm3a] {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

/* Das angeheftete Blatt der Heeresbedienung: ein Stapel wird aufgeblättert, ein Heer angesehen
   oder ausgehoben. Es steht dort, wo getippt wurde — deshalb setzt Blazor left/top und der Rest
   ist Aufmachung. Der Versatz hält es aus dem Zeiger heraus, wie beim Tooltip; `translate` und
   nicht `margin`, damit die Ankerpunkte des Malers unverändert Weltpunkte bleiben. */
.unit-sheet[b-pr6e8djm3a] {
    position: absolute;
    /* Über dem Fangblatt *und* über den Bedienstreifen: es ist das Oberste, solange es offen ist. */
    z-index: 7;
    transform: translate(var(--dx, 0.75rem), var(--dy, 0.75rem));
    min-width: 13rem;
    max-width: min(20rem, 80%);
    padding: 0.5rem 0.6rem 0.6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.24);
    color: #1f2937;
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Zur näheren Kante hin aufklappen: sonst läge das Blatt am rechten Rand halb aus dem Bild — und
   mitten im Bild über genau den Gemarken, die als Nächstes angetippt werden wollen. Prozente in
   `translate` beziehen sich auf die eigene Größe, also braucht das keine gemessene Breite. */
.unit-sheet.flip-x[b-pr6e8djm3a] { --dx: calc(-100% - 0.75rem); }
.unit-sheet.flip-y[b-pr6e8djm3a] { --dy: calc(-100% - 0.75rem); }

/* Das Befehlsblatt bleibt stehen, während weitergetippt wird — angeheftet läge es genau über den
   Gemarken, die als Nächstes gemeint sind. Die freie Ecke ist unten rechts: links oben stehen die
   Statusanzeigen, rechts oben die Zoomsteuerung, links unten der Ansichtsstreifen. */
.unit-sheet.docked[b-pr6e8djm3a] {
    right: 0.6rem;
    bottom: 0.6rem;
    transform: none;
}

/* Ein durchsichtiges Blatt fängt den Klick daneben — unsichtbar, aber genau so nötig wie der
   Schleier der Reiche-Übersicht.

   Es liegt über der **Karte** und unter den **Bedienstreifen**, und diese Reihenfolge ist keine
   Kosmetik: ein Fangblatt über den Streifen macht Zoomen, Einpassen und den Ansichtswechsel
   unbedienbar, solange irgendein Blatt offen ist — und das offene Blatt ist genau der Moment, in
   dem man näher heranfahren will. */
.unit-scrim[b-pr6e8djm3a] {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.unit-sheet header[b-pr6e8djm3a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.unit-sheet .sheet-title[b-pr6e8djm3a] {
    flex: 1;
    font-weight: 600;
}

.unit-sheet .sheet-close[b-pr6e8djm3a] {
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.unit-sheet .sheet-close:hover[b-pr6e8djm3a] { color: #1f2937; }

.unit-list[b-pr6e8djm3a] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 14rem;
    overflow-y: auto;
}

.unit-row[b-pr6e8djm3a] {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.35rem;
    border: 1px solid #e3e7ee;
    border-radius: 7px;
    background: #fff;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.unit-row:hover[b-pr6e8djm3a] { background: #eef1f6; }

/* Das Reich einer Zeile steht unter den drei Angaben, die ein Heer unterscheiden — es ist die
   Auskunft, nicht das Unterscheidungsmerkmal: in einem Stapel steht meist nur eines. */
.unit-row .urealm[b-pr6e8djm3a] {
    grid-column: 2 / -1;
    color: #6b7280;
}

.unit-row .swatch[b-pr6e8djm3a] {
    grid-row: span 2;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    background: var(--faction-color, #888);
}

.unit-facts[b-pr6e8djm3a] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.1rem 0.6rem;
    margin: 0 0 0.4rem;
}

.unit-facts dt[b-pr6e8djm3a] { color: #6b7280; }
.unit-facts dd[b-pr6e8djm3a] { margin: 0; font-variant-numeric: tabular-nums; }

.unit-sheet .sheet-note[b-pr6e8djm3a] {
    margin: 0 0 0.4rem;
    color: #4b5563;
}

/* Ein Grund, kein Fehler: das Spiel ist pausiert, die Obergrenze ist erreicht. Er steht da,
   damit der gesperrte Knopf daneben nicht rätselhaft bleibt. */
.unit-sheet .sheet-note.blocked[b-pr6e8djm3a] { color: #b45309; }

.sheet-actions[b-pr6e8djm3a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sheet-actions .action[b-pr6e8djm3a] {
    border: 1px solid #d6dbe3;
    border-radius: 7px;
    background: #fff;
    color: #1f2937;
    padding: 0.25rem 0.6rem;
    font: inherit;
    cursor: pointer;
}

.sheet-actions .action:hover:not(:disabled)[b-pr6e8djm3a] { background: #eef1f6; }

.sheet-actions .action.primary[b-pr6e8djm3a] {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

.sheet-actions .action.primary:hover:not(:disabled)[b-pr6e8djm3a] { background: #374151; }

.sheet-actions .action:disabled[b-pr6e8djm3a] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Die Karte nimmt den Fokus von selbst, damit sie ihre Zifferntasten hört — ein Rahmen um die
   halbe Seite wäre dafür der falsche Preis. Nur dieser Fall wird still gestellt: wer mit der
   Tabulatortaste herkommt, bekommt seinen Rahmen, sonst wäre die Karte die eine Station der
   Tastaturreise, die nicht zu sehen ist. */
.map-root:focus:not(:focus-visible)[b-pr6e8djm3a] { outline: none; }

/* Die Zoomanzeige bleibt im DOM, aber nicht mehr auf dem Bildschirm: „NN px“ war eine Zahl für
   Entwickler, nicht für Spieler. Tests und Werkzeuge lesen sie weiter über textContent
   (tests/e2e/support/map.ts, TC-01) — deshalb versteckt, nicht entfernt. */
.zoom-readout[b-pr6e8djm3a] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* /Pages/Home.razor.rz.scp.css */
h2[b-14tijxiff8] {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.75rem;
}

.game-list[b-14tijxiff8] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    max-width: 40rem;
}

.game-row[b-14tijxiff8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.game-name[b-14tijxiff8] {
    flex: 1 1 auto;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-zug[b-14tijxiff8] {
    color: #6b7280;
    font-size: 0.85rem;
    white-space: nowrap;
}
/* /Pages/Myra.razor.rz.scp.css */
/* Der Bildschirm ist eine Spalte im Layout-Rahmen: Werkzeugleiste fest, Bühne nimmt den Rest.
   Keine Breitenbegrenzung mehr und keine 65vh — die Karte bekommt, was übrig ist. */
.myra[b-92qnralq61] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.loading[b-92qnralq61] {
    color: #6b7280;
    padding: 2rem 1.5rem;
    font-size: 1.05rem;
}

/* Feste Höhe und kein Umbruch: eine Werkzeugleiste, die in die zweite Zeile rutscht, verschöbe
   die Karte unter dem Zeiger. Das hält weiterhin die Höhe zusammen mit flex-wrap: nowrap —
   overflow ist nur deshalb sichtbar, damit die Pinsel-Auswahl unter der Leiste hervorschauen
   darf. Seit der Chip die Pillenleiste ersetzt, wächst hier ohnehin nichts mehr mit der Zahl
   der Reiche. */
.toolbar[b-92qnralq61] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 3.25rem;
    padding: 0 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
    overflow: visible;
}

.realm[b-92qnralq61] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tools[b-92qnralq61] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Der Chip: Farbe, Name, eigene Großfelder — und ein Weg in die Übersicht, aus der er kommt.
   Seine Breite hängt am Namen, nicht an der Zahl der Reiche; der Name wird gekürzt, damit auch
   ein sehr langer die Leiste nicht auseinanderzieht. */
.realm-chip[b-92qnralq61] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 22rem;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    padding: 0.3rem 0.7rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.05s;
}

.realm-chip:hover[b-92qnralq61] { transform: translateY(-1px); }

.realm-chip .rname[b-92qnralq61] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* Ungebunden ist kein Fehlerzustand, sondern ein Anfang: gedämpft statt gewarnt. */
.realm-chip.none[b-92qnralq61] {
    background: #f3f4f6;
    box-shadow: none;
}

.realm-chip.none .rname[b-92qnralq61] { font-weight: 500; color: #4b5563; }

.realm-chip .pick[b-92qnralq61] { font-size: 0.8rem; color: #6b7280; }

.swatch[b-92qnralq61] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--faction-color);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}

.swatch.erase[b-92qnralq61] {
    background: repeating-linear-gradient(45deg, #d1d5db, #d1d5db 3px, #f3f4f6 3px, #f3f4f6 6px);
}

/* Die Zahl sitzt als gefüllter Chip in der Fraktionsfarbe; ihre Schriftfarbe rechnet die Seite
   aus der Helligkeit (TextOn), weil NPC-Farben beliebig sein können. */
.num[b-92qnralq61] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}

.glyph[b-92qnralq61] { font-size: 0.8rem; color: #6b7280; }

/* Der Pinsel: ein Knopf mit dem gewählten Reich, darunter eine Suche. Die Auswahl schwebt, damit
   die Leiste ihre feste Höhe behält. */
.brush[b-92qnralq61] { position: relative; }

.brush-open[b-92qnralq61] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 14rem;
}

.brush-open .brush-name[b-92qnralq61] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brush-open .caret[b-92qnralq61] { color: #6b7280; }

/* Unsichtbar und über allem außer der Auswahl selbst: der Klick daneben schließt sie, statt sie
   über der Karte stehen zu lassen, wo sie Klicks schluckte. */
.brush-scrim[b-92qnralq61] {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.brush-menu[b-92qnralq61] {
    position: absolute;
    z-index: 21;
    top: calc(100% + 0.35rem);
    right: 0;
    width: 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.brush-search[b-92qnralq61] {
    border: 1px solid #d6dbe3;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
}

/* Fest gedeckelt und mit eigenem Bildlauf: was der RealmPicker abschneidet, sagt brush-more —
   und was er zeigt, darf die Auswahl nicht über den Bildschirm hinauswachsen lassen. */
.brush-list[b-92qnralq61] {
    max-height: 14rem;
    overflow-y: auto;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.brush-option[b-92qnralq61] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    border: 2px solid transparent;
    border-radius: 6px;
    background: transparent;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.brush-option:hover[b-92qnralq61] { background: #f3f4f6; }

/* Der Rückfall ist die Farbe von Neutral (Myra.razor: NeutralColor) — der einzige Eintrag ohne
   eigene Reichsfarbe. */
.brush-option.active[b-92qnralq61] {
    border-color: var(--faction-color, #3a3f4b);
    background: #f9fafb;
}

.brush-option .fname[b-92qnralq61] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brush-option .npc[b-92qnralq61] {
    margin-left: auto;
    font-size: 0.7rem;
    color: #6b7280;
}

.brush-empty[b-92qnralq61],
.brush-more[b-92qnralq61] {
    margin: 0;
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.action[b-92qnralq61] {
    border: none;
    border-radius: 8px;
    background: #1f2937;
    color: #fff;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

.action:hover[b-92qnralq61] { background: #374151; }

.action.ghost[b-92qnralq61] {
    background: #e5e7eb;
    color: #374151;
}

.action.ghost:hover[b-92qnralq61] { background: #d1d5db; }

.action.ghost.danger[b-92qnralq61] { color: #9f1d16; }
.action.ghost.danger:hover[b-92qnralq61] { background: #f4d5d3; }

.action.small[b-92qnralq61] { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

.action:disabled[b-92qnralq61] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Ein Schalter mit sichtbarem Zustand statt eines Knopfes, dessen Beschriftung mal „aus“ und
   mal „an“ heißt. Der Name steht am <label>, die Rolle am Kästchen. */
.admin-switch[b-92qnralq61] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.25rem 0.5rem 0.25rem 0.3rem;
    border-radius: 999px;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

/* Das Kästchen liegt unsichtbar genau über seiner Kulisse, nicht darunter: so trifft ein Klick
   (und die Trefferprüfung eines Testlaufs) das Bedienelement selbst und nicht die Dekoration. */
.admin-switch input[b-92qnralq61] {
    position: absolute;
    z-index: 1;
    left: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 1.2rem;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-switch .track[b-92qnralq61] {
    position: relative;
    width: 2.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.15s;
}

.admin-switch .track[b-92qnralq61]::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: transform 0.15s;
}

.admin-switch input:checked ~ .track[b-92qnralq61] { background: #f4c542; }
.admin-switch input:checked ~ .track[b-92qnralq61]::after { transform: translateX(1rem); }
.admin-switch input:focus-visible ~ .track[b-92qnralq61] { outline: 2px solid #258cfb; outline-offset: 2px; }
.admin-switch input:checked ~ .switch-label[b-92qnralq61] { font-weight: 600; color: #1f2937; }

.switch-label[b-92qnralq61] { color: #4b5563; }

/* Die Bühne: Karte links, Seitenspalte rechts, beide in fester Höhe. Was in der Spalte wächst,
   rollt dort — die Karte behält Lage und Größe. */
.stage[b-92qnralq61] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.map-wrap[b-92qnralq61] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    overflow: hidden;
}

/* Schwebt über der Karte, spiegelbildlich zur Kartensteuerung rechts oben. pointer-events: none
   ist hier keine Feinheit: sonst entstünde links oben ein totes Eck, in dem Klicks auf die Karte
   verschwinden. */
.hud[b-92qnralq61] {
    position: absolute;
    left: 0.6rem;
    top: 0.6rem;
    z-index: 2;
    max-width: 22rem;
    pointer-events: none;
}

.hud .chips[b-92qnralq61] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.hud .chip[b-92qnralq61] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    font-size: 0.78rem;
    color: #374151;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hud .chip.zug[b-92qnralq61] { font-weight: 700; color: #1f2937; }
.hud .chip.ok[b-92qnralq61] { color: #2f7a4d; font-weight: 600; }
.hud .chip.bad[b-92qnralq61] { color: #b3261e; font-weight: 600; }

.hud .hint[b-92qnralq61] {
    margin: 0.35rem 0 0;
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.8);
    font-size: 0.75rem;
    color: #4b5563;
}

/* Feste Breite und eigener Rollbereich — deshalb kann keine Chronikzeile und kein Spieler die
   Karte auch nur um ein Pixel bewegen. */
.panel[b-92qnralq61] {
    flex: 0 0 19rem;
    width: 19rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid #e5e7eb;
    background: #fafbfc;
}

.panel h2[b-92qnralq61] {
    margin: 0;
    padding: 0.5rem 0.75rem 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.players[b-92qnralq61] {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

.player-list[b-92qnralq61] {
    min-height: 0;
    overflow-y: auto;
    padding: 0 0.75rem;
}

/* Name, Punkt und Entfernen bleiben zusammen: eine Zeile, die nie zwischen Punkt und Name
   umbricht. */
.player[b-92qnralq61] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    font-size: 0.85rem;
    white-space: nowrap;
}

.player .name[b-92qnralq61] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player .dot.on[b-92qnralq61] { color: #16a34a; }
.player .dot.off[b-92qnralq61] { color: #9ca3af; }

/* Rechtsbündig hinter dem Namen und schmal gehalten: die Spalte hat feste Breite, und der Name
   des Spielers ist die Hauptsache. */
.player .allegiance[b-92qnralq61] {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.player .allegiance .rname[b-92qnralq61] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player .remove[b-92qnralq61] {
    flex: 0 0 auto;
    border: 1px solid #e0b4b1;
    background: #fff;
    color: #9f1d16;
    border-radius: 6px;
    padding: 0 0.4rem;
    font-size: 0.72rem;
    line-height: 1.4rem;
    cursor: pointer;
}

.player .remove:hover[b-92qnralq61] { background: #f9e9e8; }

.npc-add[b-92qnralq61] {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem 0;
}

.npc-name[b-92qnralq61] {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #d6dbe3;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.npc-error[b-92qnralq61] {
    margin: 0.35rem 0 0;
    padding: 0 0.75rem;
    font-size: 0.78rem;
}

.chronik[b-92qnralq61] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.feed[b-92qnralq61] {
    list-style: none;
    margin: 0;
    padding: 0 0.75rem 0.75rem;
    min-height: 0;
    overflow-y: auto;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #6b7280;
}

.feed li[b-92qnralq61] { padding: 0.15rem 0; border-bottom: 1px solid #eef1f5; }

/* Die Leiste steht immer, ob die Spalte offen ist oder nicht — auch der Umschalter darf seinen
   Platz nicht wechseln. */
.rail[b-92qnralq61] {
    flex: 0 0 1.6rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
    border-left: 1px solid #e5e7eb;
    background: #f3f4f6;
}

.panel-toggle[b-92qnralq61] {
    position: relative;
    border: none;
    background: transparent;
    color: #4b5563;
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem 0.1rem;
    cursor: pointer;
}

.panel-toggle:hover[b-92qnralq61] { color: #1f2937; }

.unread[b-92qnralq61] {
    position: absolute;
    top: -0.35rem;
    left: 50%;
    transform: translateX(-50%);
    min-width: 1.05rem;
    padding: 0 0.15rem;
    border-radius: 999px;
    background: #b3261e;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.05rem;
    font-variant-numeric: tabular-nums;
}