/* ===========================================================================
   Wuerfeltisch — Charakter, Aktion, Ziel, Kontext, Ausfuehren.

   Eigene Datei und kein Anhang an app.css: Der Bereich bringt genug eigene
   Bausteine mit, um sie beieinander zu halten. Dieselbe Entscheidung gilt
   bereits fuer Wizard, Charakterdetail und Lore (REQ-UX-019).

   Der Aufbau ist von character.css uebernommen — Bereich, Block, Karte, drei
   Ebenen statt einer. Die Klassen heissen trotzdem `dice-` und nicht `ch-`:
   Ein gemeinsamer Praefix haette bedeutet, dass jede Aenderung am
   Charakterdetail den Wuerfeltisch mitbewegt. Gleicher Aufbau, getrennte
   Herrschaft.

   ---------------------------------------------------------------------------
   WARUM DIESE FARBEN

   Tuerkis  Navigation, Auswahl, gelungene Probe — die Grundfarbe der Anwendung
   Gold     Macht, Zielzahl, kritischer Erfolg
   Violett  Magie
   Blau     Ziel und Gegenueber
   Orange   Vorschlag, Vorbehalt, geschlossenes Machtskalen-Tor
   Rot      ausschliesslich der Patzer

   Rot ist reserviert. Ein Fehlschlag ist kein Notfall, sondern der haeufigste
   Ausgang einer Probe — er bleibt matt und unaufgeregt. Wer Fehlschlaege rot
   faerbt, hat nach zehn Minuten eine rote Seite und kein Signal mehr.

   Und Farbe traegt nie allein (REQ-UX-015): Neben jedem eingefaerbten Ergebnis
   steht das Wort — „Kritischer Erfolg", „Patzer", „Fehlschlag". Wer die Farben
   nicht unterscheiden kann, liest dasselbe.

   ---------------------------------------------------------------------------
   BAUSTEINLISTE — verbindlich. Wer Markup fuer den Wuerfeltisch schreibt,
   benutzt diese Klassen und erfindet keine neuen. Fehlt ein Baustein, wird er
   hier ergaenzt und dokumentiert, nicht im Razor improvisiert.

   BEREICHE (Aufbau wie .ch-bereich)
     .dice-tisch               Stapel aller Bereiche, grosser Abstand dazwischen
     .dice-bereich             Ein Schritt: Akzentlinie oben, getoenter Kopf
     .dice-bereich--leise      Nebensache, tritt zurueck
     .dice-bereich__kopf       Kopfzeile
     .dice-bereich__nummer     Schrittnummer im Kopf
     .dice-bereich__titel      Ueberschrift
     .dice-bereich__zusatz     Zaehler oder Kurzhinweis neben dem Titel
     .dice-bereich__aktionen   Schaltflaechen rechts im Kopf
     .dice-bereich__inhalt     Inhaltsflaeche
     .dice-bereich__fuss       Abschlusszeile, leiser Grund

   AKZENTFARBEN — auf .dice-bereich, .dice-kennzahl oder .dice-ergebnis
     .dice-akzent--wurf        Tuerkis
     .dice-akzent--macht       Gold
     .dice-akzent--magie       Violett
     .dice-akzent--ziel        Blau
     .dice-akzent--vorbehalt   Orange
     .dice-akzent--patzer      Rot (nur der Patzer)

   AUSWAHL
     .dice-wahl                Auswahlfeld und Zustand nebeneinander
     .dice-wahl__feld          Das Auswahlfeld
     .dice-zustand             Marken des Charakterzustands
     .dice-filter              Filterzeile ueber der Aktionsliste

   AKTIONSLISTE
     .dice-aktionen            Raster der Aktionen
     .dice-aktion              Eine Aktion (immer ein <button>)
     .dice-aktion.is-gewaehlt  Die gewaehlte Aktion
     .dice-aktion.is-gesperrt  Nicht nutzbar — ausgegraut, mit Grund
     .dice-aktion__kopf        Name und Wuerfelangabe
     .dice-aktion__name        Der Name
     .dice-aktion__quelle      Woher die Aktion stammt
     .dice-aktion__marken      Merkmale und Kosten
     .dice-aktion__grund       Warum sie gesperrt ist
     .dice-gruppe              Ueberschrift einer Kategorie in der Liste

   KONTEXT
     .dice-kontext             Raster der Kontextfragen
     .dice-frage               Eine Frage
     .dice-frage__text         Die Frage selbst
     .dice-frage__hinweis      Erlaeuterung darunter

   VORSCHAU
     .dice-kennzahlen          Raster der Kennzahlen
     .dice-kennzahl            Eine Kennzahl
     .dice-kennzahl__marke     Beschriftung, klein darueber
     .dice-kennzahl__zahl      Die Zahl
     .dice-kennzahl__zusatz    Erlaeuterung darunter
     .dice-herleitung          Die Modifikatorliste
     .dice-herleitung__titel   Ueberschrift einer Gruppe
     .dice-herleitung__zeile   Eine Zeile: Quelle, Begruendung, Wert
     .dice-herleitung__quelle  Die Quelle
     .dice-herleitung__text    Beschriftung und Begruendung
     .dice-herleitung__grund   Die Begruendung, zweite Zeile
     .dice-herleitung__wert    Der Wert, rechtsbuendig
     .dice-herleitung__wert--plus | --minus | --null
     .dice-herleitung__summe   Abschlusszeile mit Trennlinie
     .dice-tor                 Hinweis zum Machtskalen-Tor

   ERGEBNIS
     .dice-ergebnis            Der Ergebnisblock
     .dice-ergebnis--krit | --patzer | --erfolg | --fehlschlag
     .dice-ergebnis__wurf      Die grosse Zahl
     .dice-ergebnis__seite     Text rechts der Zahl
     .dice-ergebnis__wort      Der Erfolgsgrad im Wortlaut
     .dice-ergebnis__rechnung  Wurf, Bonus, Gesamt gegen Zielzahl — im Vorrat: Erfolge gegen Erfolge
     .dice-ansage              Die Ansage vor dem Wurf: Vorrat gegen Vorrat, dazu der d20 (WW-005)
     .dice-vorrat              Die Aufstellung eines Vorrats, Posten fuer Posten
     .dice-altkern             Kern und Zielzahl als aufklappbare Herleitung
     .dice-ergebnis__meta      Charakter, Probe, Zeitpunkt
     .dice-schaden             Der Schadenswurf, in derselben Aufloesung
     .dice-schaden__wurf       Die kleinere Zahl des d10
     .dice-folge               Die vorgeschlagene Verletzungsfolge
     .dice-folge__marke        Die Marke „Vorschlag"
     .dice-stufen              Verletzungsleiter 0 bis 5
     .dice-stufe               Eine Stufe
     .dice-stufe__pip          Der Punkt
     .dice-stufe__text         Der Name der Stufe

   VERLAUF
     .dice-verlauf__filter     Filterzeile ueber dem Wurfverlauf
     .dice-verlauf__suche      Das Suchfeld darin, breiter als eine Auswahlliste
     .dice-verlauf__mehr       Unter der Liste: „Aeltere Wuerfe laden" und Auskunft

   WURFDETAIL (DICE-011) — das Detailfenster einer Verlaufszeile
     .dice-detail              Rumpf des Fensters
     .dice-detail__marken      Ausgang, Sichtbarkeit und Berichtigungsarten im Kopf
     .dice-detail__abschnitt   Ein Abschnitt: Herleitung, Bezug, Schnappschuss, Berichtigungen
     .dice-detail__titel       Seine Ueberschrift
     .dice-detail__liste       Die Berichtigungen, aelteste zuerst
     .dice-detail__eintrag     Eine Berichtigung
     .dice-detail__kopf        Art, Zeitpunkt und Urheber einer Berichtigung

   ALLGEMEIN
     .dice-leer                Leerzustand, hoechstens zwei Zeilen
   =========================================================================== */

/* ========================================================== Akzentfarben */

/* Eine Modifikatorklasse je Bedeutung, drei lokale Eigenschaften. Alle
   Bausteine darunter lesen diese und nicht die Grundtokens — ein einziges Wort
   am Bereich faerbt Linie, Kopf und Zahl. Gefaerbt werden Linie, Kopf und
   Zahl, niemals die ganze Flaeche. */

.dice-akzent--wurf {
    --dice-akzent: var(--sh-accent);
    --dice-akzent-weich: var(--sh-accent-soft);
    --dice-akzent-linie: var(--sh-accent-line);
}

.dice-akzent--macht {
    --dice-akzent: var(--sh-gold);
    --dice-akzent-weich: var(--sh-gold-soft);
    --dice-akzent-linie: color-mix(in srgb, var(--sh-gold) 34%, transparent);
}

.dice-akzent--magie {
    --dice-akzent: var(--sh-purple);
    --dice-akzent-weich: var(--sh-purple-soft);
    --dice-akzent-linie: color-mix(in srgb, var(--sh-purple) 34%, transparent);
}

.dice-akzent--ziel {
    --dice-akzent: var(--sh-blue);
    --dice-akzent-weich: var(--sh-blue-soft);
    --dice-akzent-linie: color-mix(in srgb, var(--sh-blue) 34%, transparent);
}

.dice-akzent--vorbehalt {
    --dice-akzent: var(--sh-warn);
    --dice-akzent-weich: var(--sh-warn-soft);
    --dice-akzent-linie: color-mix(in srgb, var(--sh-warn) 34%, transparent);
}

/* Rot ist reserviert: der Patzer und sonst nichts. */
.dice-akzent--patzer {
    --dice-akzent: var(--sh-danger);
    --dice-akzent-weich: var(--sh-danger-soft);
    --dice-akzent-linie: color-mix(in srgb, var(--sh-danger) 34%, transparent);
}

/* ================================================================ Bereiche */

/* Der Wuerfeltisch ist ein Weg, kein Formular: Charakter, Aktion, Ziel,
   Kontext, Vorschau, Ergebnis, Verlauf. Grosser Abstand zwischen den
   Schritten, kleiner darin — Naehe bedeutet Zusammengehoerigkeit. */
.dice-tisch {
    display: grid;
    gap: var(--sh-space-xl);
    align-content: start;
    min-width: 0;
}

.dice-bereich {
    min-width: 0;
    border: 1px solid var(--sh-border);
    /* 2px, weil 1px im dunklen Grund verschwindet und 4px eine Zierleiste
       waere. Ohne Akzentklasse bleibt die Linie neutral. */
    border-top: 2px solid var(--dice-akzent, var(--sh-border-strong));
    border-radius: var(--sh-radius-lg);
    background: var(--sh-surface);
    overflow: hidden;
}

.dice-bereich__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sh-space-xs) var(--sh-space-sm);
    padding: var(--sh-space-sm) var(--sh-space-lg);
    border-bottom: 1px solid var(--sh-border);
    /* Die Toenung liegt als Bildschicht ueber --sh-surface-2. Direkt als
       Hintergrundfarbe gesetzt saehe ein Bereich ohne Akzentklasse anders aus
       als einer mit — so bleibt der Grund derselbe, nur eingefaerbt. */
    background:
        linear-gradient(0deg, var(--dice-akzent-weich, transparent) 0 100%),
        var(--sh-surface-2);
}

/* Die Schrittnummer. Sie steht dort, weil der Ablauf vorgegeben ist und ein
   Benutzer wissen soll, wo er sich befindet — nicht als Zierde. */
.dice-bereich__nummer {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    border: 1px solid var(--dice-akzent-linie, var(--sh-border-strong));
    background: var(--dice-akzent-weich, transparent);
    color: var(--dice-akzent, var(--sh-text-dim));
    font-size: .7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    align-self: center;
}

.dice-bereich__titel {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dice-akzent, var(--sh-text));
}

.dice-bereich__zusatz {
    font-size: .72rem;
    color: var(--sh-text-faint);
    font-variant-numeric: tabular-nums;
}

.dice-bereich__aktionen {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs);
}

/* Ein Suchfeld im Kopf darf die Kopfzeile nicht sprengen: Es nimmt hoechstens
   220px und gibt nach, wenn der Titel Platz braucht. */
.dice-bereich__aktionen .sh-search {
    flex: 0 1 220px;
    min-width: 130px;
}

.dice-bereich__inhalt {
    padding: var(--sh-space-lg);
    display: grid;
    gap: var(--sh-space-md);
    align-content: start;
    min-width: 0;
}

.dice-bereich__fuss {
    padding: var(--sh-space-sm) var(--sh-space-lg);
    border-top: 1px solid var(--sh-border);
    background: var(--sh-surface-2);
    font-size: .76rem;
    color: var(--sh-text-dim);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-sm);
}

.dice-bereich--leise {
    border-top-color: var(--sh-border);
    background: var(--sh-bg-2);
}

.dice-bereich--leise .dice-bereich__kopf {
    background: transparent;
    border-bottom-color: var(--sh-border-soft);
}

.dice-bereich--leise .dice-bereich__titel {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

/* ================================================================= Auswahl */

.dice-wahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-sm) var(--sh-space-md);
    min-width: 0;
}

.dice-wahl__feld {
    flex: 1 1 240px;
    min-width: 0;
    max-width: 420px;
}

.dice-zustand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs);
    min-width: 0;
}

.dice-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs) var(--sh-space-sm);
    min-width: 0;
}

/* =========================================================== Aktionsliste */

.dice-aktionen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: var(--sh-space-sm);
    min-width: 0;
}

.dice-gruppe {
    grid-column: 1 / -1;
    margin: var(--sh-space-xs) 0 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.dice-gruppe:first-child { margin-top: 0; }

.dice-aktion {
    display: grid;
    gap: .25rem;
    align-content: start;
    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-left: 2px solid var(--sh-border-strong);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    color: var(--sh-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    min-width: 0;
    transition: border-color var(--sh-fast), background var(--sh-fast);
}

.dice-aktion:hover:not(.is-gesperrt) {
    border-color: var(--sh-border-strong);
    border-left-color: var(--sh-accent);
    background: var(--sh-surface-3);
}
.dice-aktion:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 1px; }

.dice-aktion.is-gewaehlt {
    border-color: var(--sh-accent-line);
    border-left-color: var(--sh-accent);
    background: var(--sh-accent-soft);
}

/* Nicht nutzbar heisst ausgegraut und mit Grund — nicht verschwunden
   (REQ-ACT-016). Wer eine Aktion sucht und nicht findet, sucht weiter; wer sie
   grau mit Begruendung sieht, weiss Bescheid. Der gestrichelte Rahmen
   unterscheidet die Sperre zusaetzlich zur Helligkeit. */
.dice-aktion.is-gesperrt {
    border-style: dashed;
    border-left-color: var(--sh-warn);
    background: transparent;
    color: var(--sh-text-faint);
    cursor: not-allowed;
}

.dice-aktion__kopf {
    display: flex;
    align-items: baseline;
    gap: var(--sh-space-xs);
    min-width: 0;
}

.dice-aktion__name {
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dice-aktion.is-gesperrt .dice-aktion__name { font-weight: 600; }

.dice-aktion__wuerfel {
    margin-left: auto;
    flex: 0 0 auto;
    font-family: var(--sh-font-mono);
    font-size: .7rem;
    color: var(--sh-text-faint);
    white-space: nowrap;
}

.dice-aktion__quelle {
    font-size: .72rem;
    color: var(--sh-text-faint);
}

.dice-aktion__marken {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-top: .1rem;
}

.dice-aktion__grund {
    margin-top: .15rem;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--sh-warn);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------ Bloecke im Bereich */

/* Untergliederung ohne eigenen Kasten — nur Haarlinie und Untertitel. Die
   erweiterten Optionen zerfallen in drei Gedanken (bedingte Modifikatoren,
   Lage am Tisch, Wurf und Sichtbarkeit). Drei Karten untereinander waeren
   wieder Gleichfoermigkeit, nur mit mehr Rahmen. */
.dice-block {
    display: grid;
    gap: var(--sh-space-sm);
    align-content: start;
    padding-top: var(--sh-space-md);
    border-top: 1px solid var(--sh-border-soft);
    min-width: 0;
}

/* Der erste Block braucht keine Trennlinie — darueber steht der Bereichskopf. */
.dice-block:first-child {
    padding-top: 0;
    border-top: 0;
}

.dice-block__titel {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--sh-text-dim);
}

/* ================================================================= Kontext */

/* Fachliche Fragen statt Zahlenfelder (REQ-ACT-014). Der Benutzer beschreibt
   die Lage — „Geruchsspur vorhanden?", „Deckung?" —, den Modifikator bestimmt
   der Regeldienst. Deshalb gibt es hier keine Eingabe fuer einen Wert. */
.dice-kontext {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--sh-space-md) var(--sh-space-lg);
    align-items: start;
    min-width: 0;
}

.dice-frage {
    display: grid;
    gap: .3rem;
    align-content: start;
    min-width: 0;
}

.dice-frage__text {
    font-size: .78rem;
    font-weight: 600;
    color: var(--sh-text-dim);
}

.dice-frage__hinweis {
    font-size: .72rem;
    line-height: 1.45;
    color: var(--sh-text-faint);
}

/* ================================================================ Vorschau */

.dice-kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: var(--sh-space-sm);
    min-width: 0;
}

.dice-kennzahl {
    display: grid;
    gap: .12rem;
    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    min-width: 0;
}

.dice-kennzahl__marke {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.dice-kennzahl__zahl {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--dice-akzent, var(--sh-text));
}

.dice-kennzahl__zusatz {
    font-size: .72rem;
    line-height: 1.4;
    color: var(--sh-text-dim);
}

/* ------------------------------------------------------------ Herleitung */

/* Jeder wirksame Modifikator ist eine eigene Zeile mit Quelle, Wert und
   Begruendung (REQ-DICE-008). Es gibt hier bewusst keinen Sammelposten und
   keine Zeile „sonstiges" — die Summe muss aus den sichtbaren Zeilen
   nachrechenbar sein, sonst waere sie ein versteckter Modifikator. */
.dice-herleitung {
    display: grid;
    gap: 0;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-bg-2);
    overflow: hidden;
    min-width: 0;
}

.dice-herleitung__titel {
    padding: .3rem var(--sh-space-md);
    border-bottom: 1px solid var(--sh-border);
    background: var(--sh-surface-2);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
}

.dice-herleitung__zeile {
    display: grid;
    grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto;
    gap: var(--sh-space-sm);
    align-items: baseline;
    padding: .3rem var(--sh-space-md);
    border-bottom: 1px solid var(--sh-border-soft);
    font-size: .8rem;
    min-width: 0;
}

.dice-herleitung__zeile:last-child { border-bottom: 0; }

.dice-herleitung__quelle {
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sh-text-faint);
    white-space: nowrap;
}

.dice-herleitung__text {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--sh-text);
}

.dice-herleitung__grund {
    display: block;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--sh-text-faint);
}

.dice-herleitung__wert {
    font-family: var(--sh-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.dice-herleitung__wert--plus { color: var(--sh-accent); }
.dice-herleitung__wert--minus { color: var(--sh-warn); }
.dice-herleitung__wert--null { color: var(--sh-text-faint); }

.dice-herleitung__summe {
    border-top: 1px solid var(--sh-border);
    border-bottom: 0;
    background: var(--sh-surface-2);
    font-weight: 700;
}

.dice-herleitung__summe .dice-herleitung__text { color: var(--sh-text); }

/* ------------------------------------------------------ Machtskalen-Tor */

/* Das Tor wird vor dem Wurf berechnet und vor dem Wurf angezeigt
   (REQ-ACT-024). Eine natuerliche 20 hebt es nicht auf — deshalb steht der
   Hinweis oberhalb der Schaltflaeche und nicht erst im Ergebnis. */
.dice-tor {
    display: flex;
    gap: var(--sh-space-sm);
    align-items: flex-start;
    padding: var(--sh-space-sm) var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-left: 3px solid var(--sh-warn);
    border-radius: var(--sh-radius);
    background: var(--sh-warn-soft);
    font-size: .8rem;
    line-height: 1.5;
    color: var(--sh-text);
    min-width: 0;
}

.dice-tor__icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-top: .15rem;
    color: var(--sh-warn);
}

/* ================================================================ Ergebnis */

/* Grosse Zahl, klare Kennzeichnung, keine stoerende Vollbildanimation
   (REQ-DICE-024). Der Wuerfeltisch wird waehrend einer Szene benutzt; alles,
   was den Blick zwingt, kostet dort Zeit. */
.dice-ergebnis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-lg);
    align-items: center;
    min-width: 0;
}

.dice-ergebnis__wurf {
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
    flex: 0 0 auto;
    border: 2px solid var(--dice-akzent, var(--sh-border-strong));
    border-radius: var(--sh-radius-lg);
    background: var(--dice-akzent-weich, var(--sh-surface-2));
    font-size: 3.1rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    color: var(--dice-akzent, var(--sh-text));
}

.dice-ergebnis__seite {
    display: grid;
    gap: .3rem;
    align-content: center;
    flex: 1 1 260px;
    min-width: 0;
}

/* Das Wort steht immer da, unabhaengig von der Farbe (REQ-UX-015). */
.dice-ergebnis__wort {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--dice-akzent, var(--sh-text));
}

.dice-ergebnis__rechnung {
    font-family: var(--sh-font-mono);
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
    color: var(--sh-text-dim);
    overflow-wrap: anywhere;
}

/* Die Ansage vor dem Wurf (WW-005, REQ-RULE-110): ein Satz, ein Textknoten. */
.dice-ansage {
    margin: var(--sh-space-sm) 0 0;
    font-size: .95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Kern und Zielzahl des alten Kerns: aufklappbar, damit sie nicht wie die Regel aussehen. */
.dice-altkern {
    margin-top: var(--sh-space-sm);
}

.dice-altkern > summary {
    cursor: pointer;
    padding: .2rem 0;
}

.dice-altkern[open] > summary {
    margin-bottom: var(--sh-space-sm);
}

.dice-ergebnis__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem var(--sh-space-sm);
    font-size: .76rem;
    color: var(--sh-text-faint);
    min-width: 0;
}

.dice-ergebnis--erfolg { --dice-akzent: var(--sh-accent); --dice-akzent-weich: var(--sh-accent-soft); }
.dice-ergebnis--krit { --dice-akzent: var(--sh-gold); --dice-akzent-weich: var(--sh-gold-soft); }
.dice-ergebnis--patzer { --dice-akzent: var(--sh-danger); --dice-akzent-weich: var(--sh-danger-soft); }

/* Der Fehlschlag ist der Normalfall einer Probe und bleibt deshalb matt: kein
   Akzent, kein Alarm, nur eine Zahl und das Wort. */
.dice-ergebnis--fehlschlag {
    --dice-akzent: var(--sh-text-dim);
    --dice-akzent-weich: var(--sh-surface-2);
}

/* Der kritische Erfolg bekommt einen Schimmer statt einer Animation: er faellt
   auf, ohne den Blick zu erzwingen. */
.dice-ergebnis--krit .dice-ergebnis__wurf {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sh-gold) 30%, transparent),
                0 4px 20px color-mix(in srgb, var(--sh-gold) 16%, transparent);
}

/* ---------------------------------------------------------- Schadenswurf */

/* Der d10 gehoert in dieselbe Aufloesung und nicht hinter einen zweiten Klick
   (REQ-ACT-009). Deshalb steht er als Block unter dem Aktionswurf, nicht als
   eigener Schritt. Er ist neutral gefaerbt: Schaden ist kein Erfolgssignal. */
.dice-schaden {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-md);
    align-items: center;
    padding: var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-2);
    min-width: 0;
}

.dice-schaden__wurf {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    border: 2px solid var(--sh-border-strong);
    border-radius: var(--sh-radius);
    background: var(--sh-surface-3);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--sh-text);
}

.dice-schaden__seite {
    display: grid;
    gap: .2rem;
    flex: 1 1 220px;
    min-width: 0;
}

/* ------------------------------------------------------------- Folge */

/* Die Verletzungsfolge ist ein Vorschlag und wird nie automatisch geschrieben
   (REQ-ACT-023). Orange, nicht rot: Es ist noch nichts passiert. Die eigene
   Schaltflaeche steht daneben, damit Uebernahme eine Entscheidung bleibt. */
.dice-folge {
    display: grid;
    gap: var(--sh-space-sm);
    padding: var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-left: 3px solid var(--sh-warn);
    border-radius: var(--sh-radius);
    background: var(--sh-warn-soft);
    min-width: 0;
}

.dice-folge--uebernommen {
    border-left-color: var(--sh-success);
    background: var(--sh-success-soft);
}

.dice-folge__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs) var(--sh-space-sm);
    min-width: 0;
}

.dice-folge__marke {
    flex: 0 0 auto;
    padding: .06rem .35rem;
    border: 1px solid color-mix(in srgb, var(--sh-warn) 45%, transparent);
    border-radius: var(--sh-radius);
    background: var(--sh-surface);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sh-warn);
}

.dice-folge--uebernommen .dice-folge__marke {
    border-color: color-mix(in srgb, var(--sh-success) 45%, transparent);
    color: var(--sh-success);
}

.dice-folge__text {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--sh-text);
    overflow-wrap: anywhere;
}

/* Die Uebernahme steht rechts aussen — deutlich getrennt vom Vorschlagstext,
   damit sie eine Entscheidung bleibt und kein Bestandteil des Satzes ist. */
.dice-folge__aktion {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs);
}

/* Die Verletzungsleiter. Sie zeigt sechs Stufen, weil es sechs gibt — keine
   Lebenspunkte, kein Balken, der sich leeren koennte. */
.dice-stufen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-xs) var(--sh-space-sm);
    min-width: 0;
}

.dice-stufe {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: var(--sh-text-faint);
    white-space: nowrap;
}

.dice-stufe__pip {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    border: 1px solid var(--sh-border-strong);
    background: transparent;
}

.dice-stufe.is-erreicht .dice-stufe__pip { background: var(--sh-border-strong); }

.dice-stufe.is-vorschlag {
    color: var(--sh-warn);
    font-weight: 700;
}

.dice-stufe.is-vorschlag .dice-stufe__pip {
    border-color: var(--sh-warn);
    background: var(--sh-warn);
}

/* ================================================================= Verlauf */

.dice-verlauf__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sh-space-sm) var(--sh-space-md);
    min-width: 0;
}

.dice-verlauf__filter > * { min-width: 0; }

/* Das Suchfeld (DICE-011) darf mehr Platz nehmen als eine Auswahlliste — ein
   Suchbegriff ist laenger als „Letzte 7 Tage". Auf dem Telefon bricht es wie
   jedes Feld in die eigene Zeile. */
.dice-verlauf__suche {
    flex: 1 1 14rem;
    max-width: 24rem;
}

/* Unter der Liste: der Knopf fuer die naechste Seite und der Satz, was geladen
   ist. Keine Gesamtzahl — sie verriete die verdeckten Wuerfe mit. */
.dice-verlauf__mehr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-sm) var(--sh-space-md);
    padding-top: var(--sh-space-sm);
    min-width: 0;
}

/* ============================================================ Wurfdetail */

/* DICE-011. Das Detailfenster einer Verlaufszeile: Ergebnis, Herleitung,
   Bezug, Schnappschuss, Berichtigungen. Die Bausteine darin sind die des
   Ergebnisses am Tisch (.dice-ergebnis, .dice-herleitung) — das Fenster
   bringt nur die Gliederung mit. */
.dice-detail {
    min-width: 0;
}

.dice-detail__marken {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
    min-width: 0;
}

.dice-detail__abschnitt {
    display: grid;
    gap: var(--sh-space-sm);
    min-width: 0;
}

.dice-detail__titel {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sh-text-dim);
}

.dice-detail__liste {
    display: grid;
    gap: var(--sh-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dice-detail__eintrag {
    display: grid;
    gap: .2rem;
    padding: .45rem var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-bg-2);
    min-width: 0;
    overflow-wrap: anywhere;
}

.dice-detail__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

/* ============================================================ Leerzustand */

.dice-leer {
    display: grid;
    gap: .2rem;
    padding: var(--sh-space-md) 0;
    font-size: .82rem;
    color: var(--sh-text-dim);
}

.dice-leer__hinweis {
    font-size: .74rem;
    color: var(--sh-text-faint);
}

/* ========================================================= Wurfvorlagen */

/* DICE-008. Eine Vorlage stellt Aktion, Lageantworten und Sichtbarkeit mit
   einem Klick ein. Sie sitzt zwischen Bereichskopf und Aktionsliste und
   traegt bewusst keine eigene Schrittnummer: Sie ist eine Abkuerzung in
   Schritt 2, keine weitere Station des Weges.

   Kein Eingabefeld fuer einen Wert — nicht aus Platzgruenden, sondern weil
   es keinen gibt (REQ-ACT-004). */
.dice-vorlagen {
    display: grid;
    gap: var(--sh-space-sm);
    padding: var(--sh-space-md) var(--sh-space-lg);
    border-bottom: 1px solid var(--sh-border-soft);
    min-width: 0;
}

.dice-vorlagen__liste {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
}

/* Ruf und Entfernen liegen in einer Huelle: Sie gehoeren zu derselben
   Vorlage und sollen sich beim Umbruch nicht voneinander loesen. */
.dice-vorlage {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--sh-border);
    border-radius: 999px;
    background: var(--sh-surface-2);
}

.dice-vorlage.is-gesperrt {
    opacity: .5;
}

.dice-vorlage__ruf {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    padding: .25rem .65rem;
    border: 0;
    background: transparent;
    color: var(--sh-text);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.dice-vorlage__ruf:hover:not(:disabled) {
    background: var(--sh-surface-3);
}
.dice-vorlage__ruf:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: -2px; }

.dice-vorlage__ruf:disabled {
    cursor: default;
}

/* Ein langer Name kuerzt sich, statt die Leiste zu sprengen. Der volle Name
   steht im Titel der Schaltflaeche. */
.dice-vorlage__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dice-vorlage__weg {
    display: inline-flex;
    align-items: center;
    padding: .25rem .45rem;
    border: 0;
    border-left: 1px solid var(--sh-border-soft);
    background: transparent;
    color: var(--sh-text-faint);
    cursor: pointer;
}

.dice-vorlage__weg:hover:not(:disabled) {
    color: var(--sh-danger);
}
.dice-vorlage__weg:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: -2px; }

.dice-vorlagen__sichern {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-sm);
    min-width: 0;
}

.dice-vorlagen__sichern .sh-input {
    max-width: 18rem;
}

/* ============================================================== Schmal */

@media (max-width: 700px) {
    .dice-bereich__inhalt { padding: var(--sh-space-md); }
    .dice-bereich__kopf { padding: var(--sh-space-sm) var(--sh-space-md); }
    .dice-bereich__fuss { padding: var(--sh-space-sm) var(--sh-space-md); }

    .dice-ergebnis__wurf {
        width: 92px;
        height: 92px;
        font-size: 2.5rem;
    }

    .dice-herleitung__zeile {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    /* Die Quelle rutscht auf eine eigene Zeile, statt die Begruendung auf zwei
       Buchstaben zusammenzudruecken. */
    .dice-herleitung__quelle {
        grid-column: 1 / -1;
        white-space: normal;
    }
}

/* ============================================================== Bewegung */

@media (prefers-reduced-motion: reduce) {
    .dice-aktion { transition: none; }
}

/* Laufende Zustaende der Figur (WW-003, REQ-RPC-006): Chips neben der Auswahl, Setzen nur mit Recht */
.dice-zustaende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs);
    min-width: 0;
    margin-top: var(--sh-space-xs);
}
.dice-zustand-loesen {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: .8rem;
    line-height: 1;
    padding: 0 .1rem;
    cursor: pointer;
    opacity: .7;
}
.dice-zustand-loesen:hover:not(:disabled) { opacity: 1; }
.dice-zustand-loesen:focus-visible { opacity: 1; outline: 2px solid var(--sh-accent); outline-offset: 1px; }
.dice-zustand-setzen {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sh-space-xs);
}
.dice-zustand-setzen .sh-select,
.dice-zustand-setzen .sh-input { min-height: 26px; padding: .1rem .4rem; font-size: .78rem; }
.dice-zustand-setzen .sh-input { width: 180px; }

/* ============================================ Probenvorschau (WW-009)

   .dice-vorschau          Der Baustein Wuerfel/Probenvorschau: Probentyp, Kacheln, Grade, Herleitung
   .dice-probentyp         Der Probentyp, klein ueber den Kacheln
   .dice-grade             Die vier Erfolgsgrade mit ihrer Chance, eine Zeile
   .dice-grad              Ein Grad: Name und Prozent
   .dice-aussicht          Der Randhinweis „nahezu sicher" / „nahezu aussichtslos"
   .dice-machthinweis      Wie die Machtstufe in dieser Probe zaehlt
   .dice-regelhinweis      Die Gradschwellen aus der Regelquelle
   .dice-ergebnis__regel   Die Schwellen des Regelstands am gefallenen Wurf */

.dice-vorschau {
    display: grid;
    gap: var(--sh-space-sm);
    min-width: 0;
}

.dice-probentyp {
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dice-grade {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem var(--sh-space-md);
    padding: var(--sh-space-xs, .35rem) var(--sh-space-md);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-bg-2);
    min-width: 0;
}

.dice-grad {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    font-size: .8rem;
}

.dice-grad__name {
    color: var(--sh-text-dim);
}

.dice-grad__wert {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sh-text);
}

.dice-aussicht,
.dice-machthinweis,
.dice-regelhinweis,
.dice-ergebnis__regel {
    margin: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.dice-machthinweis {
    color: var(--sh-text-dim);
}