/* Das Web-Taktikboard (assets/board/board.js), Plan „Web-Taktikboard" AP4a
   und AP4b (Editor).

   Drei Teile:
     1. die Seite um das Werkzeug (site.js, taktikboardSeite) - Überschrift
        und Einleitung über dem Board, wie beim Spiel (practx-dark.css,
        .spiel-worte), darunter die Bühne;
     2. das Werkzeug selbst, ausschließlich unter .tb. Die Vorlage gibt jedem
        Knopf, jeder Überschrift und jedem Absatz eigene Maße
        (_build/template.html); hier steht deshalb für jeden Baustein, wie er
        im Werkzeug aussieht, statt sich auf das Erbe zu verlassen;
     3. der Editor (editor.js), ebenfalls unter .tb.

   Hausregeln der Website (Ralf): keine Rahmen um gefüllte Flächen, keine
   Symbole in Kreisen, keine Blocküberschriften, kein Farb- oder
   Gewichtswechsel innerhalb eines Satzes, Farben nur über die Variablen aus
   practx-dark.css. Die Zeichnung des Boards bringt ihre Farben aus dem Kern
   mit (kBoardStyleDark, die Tokens der App) - sie ist ein Bild, kein Text.

   Die Stilvorlage lädt mit demselben Fassungsanhang wie board.js
   (`?fassung=…`): Unter /assets/ liegt sie sonst einen Tag im
   Browserspeicher (vercel.json). */

/* ---------- 1. Die Seite ---------- */

.taktikboard-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,2.4vw,34px)}
.taktikboard-worte{min-width:0;width:100%;max-width:790px;margin-left:auto;margin-right:auto}
.taktikboard-worte h1{font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.1}
.taktikboard-worte .lede{margin-top:20px}
/* Die Bühne hält ihre Höhe frei, bis das Modul geladen hat (dynamischer
   Import) - sonst spränge alles darunter beim Aufbau um ein Board nach oben. */
.taktikboard-buehne{min-width:0;width:100%;max-width:720px;margin-left:auto;margin-right:auto;min-height:520px}
.taktikboard-buehne.ist-fehler{min-height:0;padding:24px 0;color:var(--muted)}
/* Der App-Abschnitt unter dem Werkzeug steht im vorgerenderten HTML; fehlt
   data/taktikboard-app.js, bleibt er leer und nimmt keinen Platz. */
.taktikboard-app:empty{display:none}

/* ---------- 2. Das Werkzeug ---------- */

.tb{position:relative;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:600;color:var(--ink);-webkit-font-smoothing:antialiased}
.tb[aria-busy="true"]{min-height:320px}

/* Knöpfe: Rechteck mit dem Radius der Seite, Großbuchstaben wie in der App.
   Gewählt (aria-pressed) und der Hauptknopf (.tb-hell) stehen hell auf
   dunkel - Fläche ohne Rahmen. */
.tb button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin:0;padding:0 16px;border:0;border-radius:var(--radius);background:var(--soft);color:var(--ink);font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1.1;text-transform:uppercase;cursor:pointer}
.tb button:hover{background:color-mix(in srgb,var(--soft) 82%,var(--ink))}
.tb button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.tb button:disabled{opacity:.38;cursor:default}
.tb button:disabled:hover{background:var(--soft)}
.tb button[aria-disabled="true"]{color:var(--muted);cursor:not-allowed}
.tb button[aria-pressed="true"],
.tb button.tb-hell{background:var(--ink);color:var(--page)}
.tb button[aria-pressed="true"]:hover,
.tb button.tb-hell:hover{background:color-mix(in srgb,var(--ink) 86%,var(--page))}
.tb-symbol{flex:0 0 auto;width:20px;height:20px}

.tb-meldung{margin:0 0 16px;padding:12px 14px;border-radius:var(--radius);background:var(--soft);color:var(--ink);font-size:18px;line-height:1.4}

/* Name des Spielzugs: groß und in Großbuchstaben wie in der App. Er ist die
   Überschrift des Werkzeugs (h2 unter dem h1 der Seite). */
.tb .tb-titel{font-size:clamp(1.6rem,4.2vw,2.2rem);font-weight:700;letter-spacing:.02em;line-height:1.05;text-transform:uppercase;color:var(--ink);overflow-wrap:anywhere}

.tb-lagen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:16px}

/* Abschnittsköpfe sind Beschriftungen, keine Blocküberschriften. */
.tb-kopf{display:flex;align-items:center;gap:10px;margin-top:22px}
.tb .tb-kopf h3{font-size:15px;font-weight:700;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;color:var(--muted)}
.tb-kopf-zahl{font-size:15px;color:var(--muted)}
.tb-kopf-rechts{display:flex;align-items:center;gap:4px;margin-left:auto}
/* Das „i" klappt seine Erklärung auf - ein schlichtes Zeichen, kein Kreis. */
.tb button.tb-info,
.tb button.tb-kopieren{min-width:44px;padding:0;background:transparent;color:var(--muted)}
.tb button.tb-info{font-size:19px;font-style:italic;letter-spacing:0;text-transform:none}
.tb button.tb-info:hover,
.tb button.tb-kopieren:hover,
.tb button.tb-info[aria-expanded="true"]{background:transparent;color:var(--ink)}
.tb .tb-info-text{max-width:62ch;margin-top:4px;font-size:17px;line-height:1.45;color:var(--muted)}

.tb-fokus{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tb-fokus button{min-width:44px;padding:0 12px}

.tb-lage{margin-top:16px}
.tb-brett{border-radius:var(--radius);overflow:hidden}
.tb-svg{display:block;width:100%;height:auto;max-height:72vh}
.tb-abspiel-zeile{display:flex;justify-content:center;margin-top:12px}
.tb button.tb-abspielen{min-width:180px}

/* SCHRITTE: alle Seiten untereinander (ansicht.js, schritteBauen) - je
   Seite die Zeile „Startaufstellung" bzw. „Schritt k von n", darunter der
   Block mit Board und dem Text dieses Blocks. Zwischen den Seiten steht so
   viel Luft, dass jede für sich zu lesen ist. */
.tb-seiten{margin:0;padding:0;list-style:none}
.tb-seite{margin:0;padding:0}
.tb-seite + .tb-seite{margin-top:30px}
.tb .tb-schritt-titel{font-size:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.tb-block{margin-top:10px;padding:14px;border-radius:var(--radius);background:var(--paper)}
.tb .tb-satz,
.tb .tb-satz-start{margin-top:12px;font-size:18px;line-height:1.45;color:var(--ink)}
.tb-zeile{display:flex;align-items:flex-start;gap:10px;margin-top:12px}
.tb-ordnung{min-width:18px;padding-top:5px;font-size:15px;color:var(--muted)}
/* Die Nummer eines Spielers: rund wie die Figur auf dem Board - eine Ziffer,
   kein Symbol. Angreifer orange, Gegenspieler weiß. */
.tb-nummer{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:30px;height:30px;padding:0 6px;border-radius:999px;background:var(--orange);color:var(--page);font-size:15px;font-weight:700}
.tb-nummer.ist-gegner{background:var(--ink)}
.tb-zeile-text{min-width:0;flex:1 1 auto}
.tb-zeile-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tb-zeile-satz{padding-top:4px;font-size:18px;line-height:1.35;color:var(--ink)}
.tb button.tb-begriff{min-height:36px;padding:0 10px;font-size:14px;letter-spacing:.06em;color:var(--teal)}
.tb .tb-zeile-notiz{margin-top:4px;font-size:17px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.tb .tb-zeile-hinweis{margin-top:4px;font-size:16px;line-height:1.4;color:var(--orange)}
.tb .tb-zeile-still{padding-top:4px;font-size:17px;color:var(--muted)}
.tb .tb-ziel-marke{margin-top:14px;font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--teal)}
.tb .tb-ziel{margin-top:2px;font-size:18px;line-height:1.4;color:var(--ink)}

.tb-infos{margin-top:18px}
.tb .tb-meta{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tb .tb-beschreibung{margin-top:6px;font-size:19px;line-height:1.45;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}

/* Ablauf: je Nummer eine Karte; die der laufenden Nummer ist hinterlegt. */
.tb-karten{display:grid;gap:6px;margin-top:8px}
.tb-karte{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--radius);background:var(--paper);transition:background-color .2s ease}
.tb-karte.ist-dran{background:var(--soft)}
.tb-karte-nummer{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:26px;height:26px;border-radius:999px;background:var(--ink);color:var(--page);font-size:14px;font-weight:700}
.tb-karte-zeilen{min-width:0}
.tb .tb-karte-satz{padding-top:2px;font-size:18px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.tb .tb-karte-satz + .tb-karte-satz{margin-top:4px}

.tb-prosa{margin-top:8px}
.tb .tb-prosa-titel{font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tb .tb-prosa-text{margin-top:4px;font-size:18px;line-height:1.5;color:var(--ink)}
.tb .tb-prosa-text + .tb-prosa-titel{margin-top:14px}

.tb-aktionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:26px}
@media(min-width:620px){.tb-aktionen{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Das Blatt „Begriff" (natives <dialog>). */
.tb .tb-dialog{width:min(480px,calc(100% - 32px));padding:24px;background:var(--paper);color:var(--ink);font-family:inherit}
.tb .tb-dialog-name{font-size:26px;font-weight:700;letter-spacing:.04em;line-height:1.1;text-transform:uppercase;color:var(--ink)}
.tb .tb-dialog-text{margin-top:10px;font-size:19px;line-height:1.5;color:var(--ink)}
.tb button.tb-dialog-ok{width:100%;margin-top:20px}

/* Rückmeldungen (kopiert, Fehler) unten am Rand, wie die Einblendung der
   App. Leer bleibt die Live-Region im Dokument - nur unsichtbar -, damit ein
   Bildschirmleser die nächste Meldung sicher vorliest. */
.tb-live{position:fixed;left:50%;bottom:24px;z-index:60;max-width:min(92vw,520px);margin:0;padding:12px 18px;border-radius:var(--radius);background:var(--ink);color:var(--page);font-size:17px;font-weight:600;line-height:1.35;text-align:center;transform:translateX(-50%);pointer-events:none}
.tb-live:empty{padding:0;background:transparent}

/* Das unsichtbare Textfeld des Kopier-Ersatzwegs (ansicht.js,
   inZwischenablage); es hängt kurz an <body>, nicht im Werkzeug. */
.tb-kopierfeld{position:fixed;top:0;left:0;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}

/* ---------- 3. Der Editor (editor.js, AP4b) ----------

   Wie der Bereich der App unter dem Brett (BoardEditorSheet): oben der Kopf
   mit Spieler, Aktionen und Hinweis, darunter Aufstellung oder Ablauf. Im
   Web steht beides im Fluss der Seite - kein Blatt zum Hochschieben. */

.tb-editor-inhalt{margin-top:14px}
/* Auf dem Brett gehört jede Geste dem Editor (Tippen, Ziehen); die Seite
   rollt dort nicht mit. */
.tb-editor-brett .tb-svg{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Etwas niedriger als in der Ansicht: Brett und Kopf (Spieler, Aktionen)
   sollen auf dem Desktop zusammen ins Fenster passen - gezeichnet wird im
   Wechsel zwischen beiden. */
.tb-editor-brett .tb-svg{max-height:62vh}
.tb-bereich{margin-top:12px}
/* Rückgängig steht oben rechts im Kopf (Runde 2, AP7 der App); nur die
   erste Zeile macht ihm Platz, alles darunter nutzt die volle Breite. */
.tb-bereich-kopf{position:relative;padding:12px 14px;border-radius:var(--radius);background:var(--paper)}
.tb-bereich-kopfinhalt{min-width:0}
.tb-bereich-kopfinhalt > :first-child{padding-right:46px}
.tb button.tb-rueckgaengig{position:absolute;top:6px;right:6px;min-width:44px;padding:0;background:transparent;color:var(--ink)}
.tb button.tb-rueckgaengig:hover{background:transparent;color:var(--teal)}
.tb button.tb-rueckgaengig:disabled:hover{background:transparent;color:var(--ink)}
.tb-kopf-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.tb .tb-wer{font-size:20px;font-weight:700;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:var(--ink)}
.tb .tb-ort{font-size:17px;line-height:1.3;color:var(--muted)}
.tb button.tb-ball{min-height:36px;padding:0 12px;font-size:14px}
.tb .tb-hinweis{margin-top:8px;font-size:17px;line-height:1.4;color:var(--muted)}
.tb .tb-bereich-kopfinhalt > .tb-hinweis:first-child{margin-top:0;min-height:20px;padding-top:2px}
.tb .tb-nachricht{margin-top:6px;font-size:17px;line-height:1.4;color:var(--orange)}
.tb .tb-grenze{margin-top:6px;font-size:16px;line-height:1.4;color:var(--muted)}
/* Die fünf Aktionen: je ein Knopf mit dem Linienbild der Aktion über dem
   Wort (BoardActionIconPainter), gewählt hell auf dunkel. */
.tb-wahlen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px}
.tb .tb-wahlen button.tb-wahl{flex-direction:column;gap:4px;min-height:58px;padding:6px 2px;font-size:13px;letter-spacing:.06em}
.tb-aktion-symbol{display:block;width:34px;height:14px}
.tb-wahl-wort{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ein Textknopf ohne Fläche (ENTFERNEN, WÄHLEN). */
.tb button.tb-textknopf{min-height:36px;padding:0 8px;background:transparent;color:var(--teal);font-size:14px}
.tb button.tb-textknopf:hover{background:transparent;color:var(--ink)}
.tb-kopf-zeile .tb-textknopf{margin-left:auto}
/* Reihenfolge, Begriff: links der Name, rechts die Werte. */
.tb-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.tb .tb-reihe-name{min-width:96px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tb-reihe-werte{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.tb button.tb-reihe-knopf{min-width:44px;padding:0;font-size:22px;letter-spacing:0}
/* Die Nummer rund wie die Figuren und die Karten - eine Ziffer, kein Symbol
   (_MoveHead: weißer Kreis, schwarze Ziffer). */
.tb .tb-reihe-nummer{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:999px;background:var(--ink);color:var(--page);font-size:18px;font-weight:700}
.tb .tb-reihe-text{font-size:17px;line-height:1.35;color:var(--muted)}
.tb .tb-begriff-marke{font-size:17px;font-weight:700;color:var(--teal)}
/* Eingaben: dunkle Fläche ohne Rahmen; der Fokus zeigt sich als Linie
   außen wie bei den Knöpfen. */
.tb .tb-notiz,
.tb .tb-feld{display:block;width:100%;margin:10px 0 0;padding:10px 12px;border:0;border-radius:var(--radius);background:var(--soft);color:var(--ink);font-family:inherit;font-size:18px;font-weight:600;line-height:1.4;resize:vertical}
.tb .tb-notiz::placeholder,
.tb .tb-feld::placeholder{color:var(--muted);opacity:1}
.tb .tb-notiz:focus-visible,
.tb .tb-feld:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.tb .tb-feld[aria-invalid="true"]{outline:3px solid var(--orange);outline-offset:3px}
.tb select.tb-feld{min-height:44px}

/* Aufstellung: Vorlagen als Chips, Gegenspieler und Spielfeld als Paar. */
.tb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tb button.tb-chip{min-height:40px;padding:0 14px;font-size:14px}
.tb-schalter{display:inline-grid;grid-template-columns:repeat(2,minmax(0,auto));gap:6px}
.tb-schalter button{min-height:40px;font-size:14px}
.tb button.tb-breit{width:100%;margin-top:16px}
.tb button.tb-aufklapper{width:100%;justify-content:flex-start;margin-top:14px;background:transparent;color:var(--muted)}
.tb button.tb-aufklapper::after{content:'';flex:0 0 auto;width:8px;height:8px;margin-left:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.tb button.tb-aufklapper[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.tb button.tb-aufklapper:hover{background:transparent;color:var(--ink)}
.tb-abschluss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}
/* Steht nur ein Knopf in der Reihe (FERTIG beim Zeichnen), nimmt er die
   ganze Breite. */
.tb-abschluss > :only-child{grid-column:1 / -1}
.tb .tb-leer{font-size:17px;line-height:1.4;color:var(--muted)}

/* Karten des Ablaufs im Editor: die Zeile wählt, der Griff ≡ zieht. Nur der
   Griff gehört dem Zeiger (touch-action:none) - auf der Zeile rollt ein
   Finger die Seite wie überall. */
.tb-kartenzeile{display:flex;align-items:center;gap:4px;border-radius:9px}
.tb-kartenzeile + .tb-kartenzeile{margin-top:2px}
.tb-kartenzeile.ist-gewaehlt{background:var(--soft)}
.tb-kartenzeile.ist-gezogen{opacity:.22}
.tb-kartenzeile.ist-davor{box-shadow:inset 0 3px 0 var(--pink)}
.tb-kartenzeile.ist-danach{box-shadow:inset 0 -3px 0 var(--pink)}
.tb .tb-kartenzeile button.tb-zeile-wahl{flex:1 1 auto;justify-content:flex-start;min-width:0;min-height:44px;padding:4px 8px;background:transparent;color:var(--ink);font-size:18px;font-weight:600;letter-spacing:0;line-height:1.35;text-align:left;text-transform:none;overflow-wrap:anywhere}
.tb .tb-kartenzeile button.tb-zeile-wahl:hover,
.tb .tb-kartenzeile button.tb-zeile-wahl[aria-pressed="true"]{background:transparent;color:var(--ink)}
.tb-griff{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;color:var(--muted);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.tb-griff:hover{color:var(--ink)}
.tb-karte-zeilen{flex:1 1 auto}
/* Zwischen den Karten: „als eigene Nummer" - zu, bis gezogen wird. */
.tb-luecke{display:flex;align-items:center;justify-content:center;min-height:32px;padding:0 10px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--muted);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tb-luecke[hidden]{display:none}
.tb-luecke.ist-ziel{background:color-mix(in srgb,var(--pink) 28%,transparent);color:var(--ink)}
/* Das Abbild der gezogenen Zeile folgt dem Zeiger; der Zeiger geht durch
   es hindurch auf die Ziele darunter. */
.tb-klon{position:fixed;z-index:70;display:flex;align-items:center;gap:4px;min-height:44px;padding:4px 0 4px 8px;border-radius:9px;background:var(--soft);color:var(--ink);font-size:18px;line-height:1.35;box-shadow:0 10px 24px rgba(0,0,0,.65);pointer-events:none}
.tb-klon-satz{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-klon .tb-symbol{margin:0 12px}

/* Das Blatt „Begriff". */
.tb-begriff-liste{display:grid;gap:6px;margin-top:16px;max-height:60vh;overflow:auto}
.tb .tb-begriff-liste button.tb-begriff-wahl{flex-direction:column;align-items:flex-start;gap:2px;min-height:48px;padding:8px 12px;text-align:left;text-transform:none;letter-spacing:0;font-size:17px}
.tb .tb-begriff-name{font-weight:700}
.tb .tb-begriff-text{font-size:15px;font-weight:600;line-height:1.35;opacity:.8}

/* Das Brett des Zeichnens. Nur dieses: Die Ansicht im Abspielen bringt
   ihre eigenen Abstände mit. */
.tb-editor-brett{margin-top:10px}

/* Abspielen im Editor: die Ansicht des Spielzugs (ansicht.js); ganz unten
   WEITER und darunter BEARBEITEN, beide über die volle Breite. */
.tb-abspiel-ansicht{margin-top:16px}
.tb-editor .tb-aktionen{grid-template-columns:minmax(0,1fr)}

/* Angaben: oben die Vorschau (antippen = zurück aufs Brett), darunter die
   Felder. */
.tb button.tb-vorschau{display:block;width:100%;min-height:0;padding:0;border-radius:var(--radius);background:transparent;overflow:hidden}
.tb button.tb-vorschau:hover{background:transparent}
.tb-vorschau .tb-svg{max-height:34vh}
.tb .tb-feldname{font-size:15px;font-weight:700;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;color:var(--muted)}
.tb .tb-feldzusatz{margin-top:6px;font-size:16px;color:var(--muted)}

@media(max-width:519px){
  .tb .tb-titel{font-size:1.7rem}
  .tb-block{padding:12px}
  .tb .tb-wahlen button.tb-wahl{font-size:12px;letter-spacing:.03em}
  .tb .tb-reihe-name{min-width:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .tb-karte{transition:none}
}