/*
 * Schatten-Express: Kopf mit Coup-Zähler, drei Gleise mit je einer Lok, das Cockpit aus Einsatzbank, Gold- und
 * Dynamit-Wahl und Abgabe, das Fahrtenbuch der gelaufenen Coups. Anzeigeleiste, Brettrand, Abzeichen und Tafel
 * stehen als Rahmen des Spielfelds in css/arena.css; hier steht, was nur dieses Spiel zeichnet.
 *
 * DIE WURZEL IST ZWEIGETEILT, WIE BEIM BUCHMACHER: `.ar-se-mass` außen als Maßcontainer, `.ar-se` innen als Raster
 * für die vier Teile (kopf, gleise, cockpit, buch), die brett.js als Geschwister darin schreibt. Ein Raster kann
 * nicht nach seiner eigenen Breite fragen — container und Rastereigenschaften standen früher auf demselben Element
 * ([data-ar-slot='flaeche']), und der Browser verwarf dabei `grid-template-areas` wortlos, während
 * `grid-template-columns` aus derselben Regel anstandslos griff: Kopf, Gleise, Cockpit und Fahrtenbuch fielen alle
 * auf dieselbe Rasterzelle zurück und lagen übereinander.
 */

.ar-spielfeld[data-ar-spiel='schattenexpress'] {
  --ar-brettbreite: min(36rem, 100vw - 2 * var(--ar-luft));
  --ar-einheit: calc(var(--ar-brettbreite) / 6);
  /*
   * DIE DREI GLEISFARBEN, UND KEINE DAVON IST EINE SITZFARBE. Jeder der bis zu vier Sitze darf Gold und Dynamit auf
   * JEDES der drei Gleise legen — eine Lok in --ar-rot würde neben der roten Sitzplakette im Kopf wie „das ist Rots
   * Gleis" aussehen, obwohl es keinem Sitz gehört. Gewählt sind drei Töne aus der Dampflok-Werkstatt: Kupfer, Petrol,
   * Rauchviolett — gegen --ar-noir-2 (Knopfgrund) und --ar-noir-3 (Gleisbett) halten alle drei über 3,9 : 1, dem
   * WCAG-1.4.11-Mindestmaß für eine Kante oder Fläche, die etwas aussagt.
   */
  --ar-se-lok-0: #cf6f34;
  /* Kupfer — 4,40 : 1 auf Noir-3, 5,95 : 1 auf Noir-2 */
  --ar-se-lok-1: #2f8f82;
  /* Petrol — 3,95 : 1 auf Noir-3, 5,43 : 1 auf Noir-2 */
  --ar-se-lok-2: #9678c2;
  /* Rauchviolett — 4,24 : 1 auf Noir-3, 5,76 : 1 auf Noir-2 */
}

@supports (width: 1cqw) {
  .ar-spielfeld[data-ar-spiel='schattenexpress'] {
    --ar-brettbreite: min(36rem, 100cqw);
  }
}

/* Im flachen Querformat steht die Anzeigeleiste links neben dem Brett und braucht ihre 15rem, sonst stehen die Namen
   der Plaketten Buchstabe für Buchstabe untereinander — dieselbe Reserve wie in jedem anderen Spiel des Pools. */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld[data-ar-spiel='schattenexpress'] {
    --ar-brettbreite: min(30rem, 100vw - 2 * var(--ar-luft) - var(--ar-seite));
  }

  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='schattenexpress'] {
      --ar-brettbreite: min(30rem, 100cqw);
    }
  }
}

/*
 * Auf dem Schreibtisch nimmt das Brett die ganze Bühne (--ar-feld): Drei Gleise samt Cockpit gewinnen mit der Breite
 * mehr als mit der Höhe, und das Cockpit bekommt daneben endlich eine eigene Spalte statt eines schmalen Streifens.
 */
@media (min-width: 64rem) and (min-height: 30.0625rem),
  (orientation: landscape) and (min-width: 48rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='schattenexpress'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/* ------------------------------------------------------------ Die vier Teile */

/*
 * MOBIL UNTEREINANDER, AB 38rem ZWEISPALTIG. Die Schwelle liegt an der BRETTBREITE und nicht am Fenster: Auf dem
 * Telefon deckelt der Grundwert oben bei 36rem, eine Handbreit unter der Schwelle — sie kann dort also nie versehentlich
 * greifen. Erst auf dem Schreibtisch, wo --ar-brettbreite auf --ar-feld wächst, liegt sie längst darüber.
 *
 * DER MASSCONTAINER LIEGT AUSSEN, DAS RASTER INNEN — dieselbe Trennung wie bei `.ar-bu-mass` / `.ar-bu` im
 * Buchmacher: Ein Raster kann nicht nach seiner eigenen Breite fragen.
 */
.ar-se-mass {
  container: ar-se-mass / inline-size;
}

.ar-se {
  display: grid;
  gap: 0.75rem;
}

@container ar-se-mass (min-width: 38rem) {
  .ar-se {
    grid-template-columns: minmax(0, 62fr) minmax(15rem, 38fr);
    grid-template-areas:
      'kopf   kopf'
      'gleise cockpit'
      'buch   buch';
    align-items: start;
    column-gap: 1rem;
  }

  .ar-se__kopf {
    grid-area: kopf;
  }

  .ar-se__gleise {
    grid-area: gleise;
  }

  .ar-se__cockpit {
    grid-area: cockpit;
  }

  .ar-se__buch {
    grid-area: buch;
  }
}

.ar-se__gleise,
.ar-se__cockpit {
  min-width: 0;
}

/* ------------------------------------------------------------ Kopf */

/* Wer schon geladen hat, sagt die Plakette der Anzeigeleiste (Rahmen); im Kopf steht nur der Coup. */
.ar-se__coup {
  margin: 0;
  color: var(--ar-kreide);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ------------------------------------------------------------ Gleise */

/*
 * DAS STELLWERK: Die drei Gleise stehen in einem Gehäuse aus Schwarz mit einem Rahmen aus Messing, und es wirft seinen
 * Schatten hart auf die Wand (`TISCHE.apparat`).
 */
.ar-se__gleise {
  display: grid;
  padding: 0.5rem;
  border: 3px solid var(--ar-ku-messing);
  background: var(--ar-noir);
  box-shadow: var(--ar-ku-schlag);
}

.ar-se__strecke {
  position: relative;
  display: grid;
  gap: 0.5rem;
}

.ar-se__spur {
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-se__spur-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 0;
}

.ar-se__spur-wort {
  color: var(--ar-kreide);
  font-weight: 600;
}

.ar-se__spur-quote {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

/*
 * DIE ZIELLINIE STEHT BEI 84 PROZENT DER BAHN UND NICHT AM RAND. Dahinter bleibt das Stück, auf dem der Sieger
 * ausrollt: Eine Linie am rechten Rand kann niemand überfahren, und genau das war der Befund — keine Lok kam je darüber.
 * Wie viele Felder bis dorthin gehen, rechnet brett.js je Fahrt (`linieVon()`), die Stelle bleibt dieselbe.
 *
 * SIE IST SO HOCH WIE EIN KNOPF, 44 PIXEL SAMT KANTE: Solange geladen wird, liegen Gold und Dynamit darauf (weiter
 * unten), und in der Fahrt bleibt sie gleich hoch — sonst spränge beim Pfiff jedes Gleis um den Unterschied.
 */
.ar-se__bahn {
  --ar-se-ziellinie: 84%;
  --ar-se-lokbreite: 2rem;
  position: relative;
  height: 2.75rem;
  border: 1px solid var(--ar-kante);
  background: var(--ar-noir-3);
}

/*
 * DER LADEPLATZ: Gold und Dynamit auf dem Gleis, zwischen der Lok am Start und der Ziellinie — beide bleiben zu sehen.
 * Er liegt über der Bahn und nimmt ihr keinen Platz; die Knöpfe sind so hoch wie sie und decken ihre Kante. Gewählt
 * heißt wie überall umgekehrt, Tinte auf Kreide (`.ar-knopf--wahl`), dazu `aria-pressed`.
 */
.ar-se__lade {
  position: absolute;
  inset-block: -1px;
  left: calc(var(--ar-se-lokbreite) + 0.4rem);
  right: calc(100% - var(--ar-se-ziellinie) + 0.4rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
}

.ar-se__lade-knopf {
  min-width: 0;
  padding: 0 0.3rem;
  overflow-wrap: anywhere;
}

/* Unter 360 Pixeln misst ein Ladeknopf 78 Pixel, und „Dynamite“ brauchte auf Englisch 82: Es brach mitten im Wort um.
   Etwas kleiner und mit schmalerem Polster steht es in einer Zeile, und die Tippfläche bleibt 44 hoch. */
@media (max-width: 22.49rem) {
  .ar-se__lade-knopf {
    padding-inline: 0.15rem;
    font-size: 0.82rem;
  }
}

/* Die Ziellinie: ein doppelter Strich, aria-hidden, weil sie nichts sagt, was die Lok-Position nicht ohnehin zeigt. */
.ar-se__ziel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ar-se-ziellinie);
  width: 0;
  border-left: 4px double var(--ar-kreide);
  opacity: 0.8;
}

/*
 * DIE LOK GLEITET, UND ZWAR ÜBER GENAU DEN TAKT, DEN SIE FÄHRT. Hier stand „ohne Übergang“, weil ein `transition` eine
 * Bewegung erfinde, die es nie gab; am Tisch las sich der Ruck je Takt als Diashow, dieselbe, die die Pferde des
 * Buchmachers und die Kugeln des Nagelbalkens schon einmal hatten. brett.js setzt die Weite AM ENDE des laufenden
 * Takts und dessen Restdauer (`--ar-se-gleiten`), die Lok kommt also an, wenn der Takt endet — linear, weil zwischen
 * zwei Takten nichts bremst. Die Nase der Lok steht bei `--ar-se-anteil` 1 genau auf der Linie; der Sieger fährt
 * ein halbes Feld darüber hinaus, und `min()` hält jede Lok innerhalb der Bahn.
 *
 * Drei Ausnahmen, alle über `data-ar-se-lauf`: `knall` fliegt an der Weiche in 240 ms zurück und läuft dabei aus
 * (`cubic-bezier(0.25, 1, 0.5, 1)`, dieselbe Kurve wie der Auslauf), `auslauf` rollt nach dem letzten Takt ans Ende der
 * Bahn, `stand` steht. `data-ar-se-sprung` an der Strecke setzt ohne Übergang — ein frisch gebautes Gleis und der
 * Rückweg an den Start sollen nicht rückwärts über die Bahn rollen.
 */
.ar-se__lok {
  position: absolute;
  top: 50%;
  left: min(
    calc(var(--ar-se-anteil, 0) * (var(--ar-se-ziellinie) - var(--ar-se-lokbreite))),
    calc(100% - var(--ar-se-lokbreite))
  );
  width: var(--ar-se-lokbreite);
  height: var(--ar-se-lokbreite);
  translate: 0 -50%;
  transition: left var(--ar-se-gleiten, 0ms) linear;
}

.ar-se__lok[data-ar-se-lauf='stand'] {
  transition: none;
}

.ar-se__lok[data-ar-se-lauf='knall'] {
  transition: left 240ms cubic-bezier(0.25, 1, 0.5, 1);
}

.ar-se__lok[data-ar-se-lauf='auslauf'] {
  left: calc(100% - var(--ar-se-lokbreite) - 0.2rem);
  transition: left 900ms cubic-bezier(0.25, 1, 0.5, 1);
}

.ar-se__strecke[data-ar-se-sprung] .ar-se__lok {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .ar-se__lok,
  .ar-se__lok[data-ar-se-lauf] {
    transition: none;
  }
}

/* Das Fach des Blitzes erzeugt keinen Kasten: Leer stünde es als vierte Zeile samt Abstand im Raster der Strecke. */
.ar-se__blitzfach {
  display: contents;
}

.ar-se__lok-bild {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * DER BLITZ: am Ziel ein Vollflächen-Schleier über allen drei Gleisen, mit Bild und Satz darauf, an der Weiche nur über
 * den gesprengten (weiter unten). brett.js schreibt und löscht das Element selbst im Redraw-Rhythmus der Fahrt — hier
 * steht deshalb keine eigene Ein-/Ausblendanimation, das wäre eine zweite Bewegung über einer, die längst vorbei ist,
 * wenn sie im Browser erscheint.
 */
.ar-se__blitz {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.4rem;
  padding: 0.75rem;
  background: var(--ar-schleier);
  text-align: center;
}

.ar-se__blitz-bild {
  width: 3rem;
  height: 3rem;
}

.ar-se__blitz-satz {
  margin: 0;
  max-width: 24rem;
  color: var(--ar-kreide);
  font-size: 1rem;
  font-weight: 700;
}

/*
 * DIE DETONATION DECKT NUR DIE GETROFFENEN SPUREN AB: drei Zeilen, so hoch wie die drei Gleise und mit derselben Fuge,
 * und nur eine gesprengte Spur trägt Schleier, Bild und Satz. Die anderen bleiben zu sehen. Das Signal ist die rote
 * Kante um die Zeile, der Satz steht in Kreide — Rot auf Schwarz ist ein Signal und kein Lesetext.
 */
.ar-se__blitz[data-ar-se-ereignis='detonation'] {
  grid-template-rows: repeat(3, minmax(0, 1fr));
  justify-items: stretch;
  align-content: stretch;
  gap: 0.5rem;
  padding: 0;
  background: none;
}

.ar-se__blitz-reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.2rem 0.6rem;
  padding: 0.3rem 0.6rem;
}

.ar-se__blitz-reihe[data-ar-se-getroffen] {
  border: 2px solid var(--ar-rot);
  background: var(--ar-schleier);
}

/* Die Detonation ist ein Schaden, das Zielfoto eine Spannung — zwei verschiedene Sätze tragen das ohnehin schon; die
   Farbe der Marke ist hier nur die zweite, nicht die einzige Auskunft. */
.ar-se__blitz[data-ar-se-ereignis='zielfoto'] .ar-se__blitz-satz {
  color: var(--ar-funke);
}

/*
 * DAS BEBEN AN DER WEICHE: eine kurze, harte Erschütterung, keine Feder. 400 ms, in Stufen und nicht linear — genau
 * die Dauer, die brett.js abwartet, bevor es die Klasse selbst wieder abräumt (bebenPruefen()). Reduzierte Bewegung
 * schaltet sie ganz ab, dieselbe Pflicht wie bei jeder der übrigen Bewegungsausnahmen der Arena.
 */
@keyframes ar-se-beben {
  0%,
  100% {
    translate: 0 0;
  }

  15% {
    translate: -4px 2px;
  }

  30% {
    translate: 3px -3px;
  }

  45% {
    translate: -3px 1px;
  }

  60% {
    translate: 2px -2px;
  }

  75% {
    translate: -2px 2px;
  }

  90% {
    translate: 1px -1px;
  }
}

.ar-se--beben {
  animation: ar-se-beben 400ms step-end;
}

@media (prefers-reduced-motion: reduce) {
  .ar-se--beben {
    animation: none;
  }
}

/* ------------------------------------------------------------ Cockpit */

.ar-se__cockpit {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

/*
 * Die drei Zonen des Cockpits — Einsatzbank, Spurwahl, Abgabe — sind je ein Kasten ohne eigene Positionierung und ohne
 * `overflow`: Der Rahmen legt seine Mini-Badges an ihre obere Kante (`data-ar-zone`) und braucht dafür Platz darüber.
 */
.ar-se__wahl,
.ar-se__abgabe {
  display: grid;
  gap: 0.6rem;
}

/* Der Merksatz eröffnet die Zone „Gold und Dynamit“, und an ihrer Oberkante hängt in der ersten Runde die Nummer des
   Rahmens, gut einen halben Rem tief in die Zone hinein. Ohne den Abstand deckte sie die obere Hälfte des Satzes. */
.ar-se__merksatz {
  margin: 0.4rem 0 0;
  padding-left: 0.5rem;
  border-left: 3px solid var(--ar-funke);
  color: var(--ar-kreide);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Sichtbare Beschriftung über jeder Reihe, und sie nennt die gewählte Spur: „Gold-Wette (Spur 2)“ sagt in einem Blick,
   was schon feststeht und was noch fehlt. Der Hinweis darunter sagt, WOFÜR die Reihe da ist: Wer Gold und Dynamit zum
   ersten Mal sieht, kennt den Unterschied nicht. */
.ar-se__wahl-wort,
.ar-se__wahl-hinweis {
  margin: 0;
  color: var(--ar-kreide-2);
}

.ar-se__wahl-wort {
  color: var(--ar-kreide);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ar-se__wahl-hinweis {
  font-size: 0.8rem;
  line-height: 1.35;
}

.ar-se__wahlreihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

/* Beschriftung und Hinweis gehören in keine der drei Spalten: Als erste und zweite Zelle im Raster besetzten sie zwei
   Spuren, und Spur 3 rutschte in die zweite Zeile. */
.ar-se__wahlreihe > .ar-se__wahl-wort,
.ar-se__wahlreihe > .ar-se__wahl-hinweis {
  grid-column: 1 / -1;
}

/*
 * DIE GEWÄHLTE SPUR TRÄGT EINEN BALKEN UND EINE KANTE IN --ar-se-farbe, nicht nur einen anderen Ton. aria-pressed
 * sagt es zusätzlich dem Screenreader.
 */
.ar-se__gleis-knopf {
  position: relative;
  padding-block: 0.5rem;
  text-align: center;
}

.ar-se__gleis-knopf[aria-pressed='true'] {
  border-color: var(--ar-se-farbe, var(--ar-funke));
  background: var(--ar-noir-3);
}

.ar-se__gleis-knopf[aria-pressed='true']::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--ar-se-farbe, var(--ar-funke));
}

/* Die Zusammenfassung hält ihre zwei Zeilen frei, auch leer: Erschiene sie erst mit der Wahl, spränge der Abgabe-Knopf
   dem Daumen unter der Hand weg. */
.ar-se__summe {
  margin: 0;
  min-height: 2.7em;
  color: var(--ar-kreide);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

button[data-ar-se-abgabe] {
  width: 100%;
  min-height: 3rem;
}

/* Nicht bereit heißt: derselbe Knopf, sichtbar still. Dieselbe Sprache wie der Wettschein des Buchmachers. */
button[data-ar-se-abgabe][aria-disabled='true'] {
  border-color: var(--ar-kante-griff);
  outline-color: var(--ar-kante-griff);
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
  cursor: not-allowed;
}

/* Die Absage: 260 ms Kreidekante, von nein() selbst wieder abgeräumt (brett.js). Kein Übergang — sie soll aufblitzen, nicht einblenden. */
button[data-ar-se-abgabe][data-ar-nein] {
  outline: 3px solid var(--ar-kreide);
  outline-offset: -3px;
}

.ar-se__live {
  margin: 0;
  min-height: 1.2em;
  color: var(--ar-kreide-2);
  font-size: 0.82rem;
}

/* Der Ersatz fürs Cockpit, solange nicht diese Person laden darf: Beleg der eigenen Ladung oder ein Wartesatz. */
.ar-se__stempel {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--ar-kreide);
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font-size: 0.9rem;
  line-height: 1.4;
  rotate: -1deg;
}

/* ------------------------------------------------------------ Fahrtenbuch */

.ar-se__buch {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  min-width: 0;
  padding-top: 0.6rem;
  border-top: 2px solid var(--ar-kante);
}

.ar-se__buch-titel {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ar-se__buch-leer {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

.ar-se__buch-liste {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-se__buch-zeile {
  display: grid;
  gap: 0.3rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-se__buch-kopf {
  margin: 0;
  color: var(--ar-kreide);
  font-size: 0.82rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ar-se__buch-posten {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Jede Zeile ist EIN Textknoten („Name: +25 Chips", schon verkettet in brett.js) und kein Flex-Paar aus Name und
 * Betrag — display:flex hätte hier nichts zum Verteilen. Das Vorzeichen steht bereits im Text (chips() in brett.js);
 * die Farbe ist die zweite Auskunft, nicht die einzige.
 */
.ar-se__buch-posten li {
  color: var(--ar-kreide-2);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ar-se__buch-posten li[data-ar-se-marke='gewinn'] {
  color: var(--ar-gruen);
}

.ar-se__buch-posten li[data-ar-se-marke='verlust'] {
  color: var(--ar-rot);
}

/* ------------------------------------------------------------ Abrechnungstafel */

/*
 * DAS BILD STEHT NICHT IN DER FLÄCHE DIESES SPIELS, SONDERN IN DER GETEILTEN TAFEL DES RAHMENS (tableau() in
 * js/spielfeld.js zeichnet, was abrechnungBild() liefert). Nur am Ende der vierten Fahrt gefüllt (sieg/verlust, je
 * nachdem, wer gerade zusieht) — deshalb reicht eine schlichte Größenregel, ohne eigenes Layout drumherum.
 */
.ar-se__abrechnung-bild {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--ar-kante);
}

/* ------------------------------------------------------------ Farben im SVG */

/*
 * Die Lok trägt ihre Gleisfarbe als Fläche und eine Kreidekontur darum — dieselbe Absicherung wie beim Rennpferd des
 * Buchmachers: Selbst ein Ton, der gegen ein einzelnes Gleisbett knapper hielte, bliebe an seiner Silhouette lesbar.
 * Ohne gesetzte Farbe (Banner, Schild) bleibt es bei Kreide.
 */
.ar-g-se-lok {
  fill: var(--ar-se-farbe, var(--ar-kreide));
  stroke: var(--ar-kreide);
  stroke-width: 3;
  stroke-linejoin: miter;
}