/*
 * Fluchtweg: Feldmaß, Raster, Wagen, Spuren, das Steuerkreuz, die Pfeile am Wagen, der Ring um den Koffer und der
 * Stadtplan, auf dem alles liegt. Anzeigeleiste, Brettrand, Knallbild, Abzeichen, Tafel und der Tisch darunter
 * (`TISCHE.plan`) stehen als Rahmen des Spielfelds in css/arena.css.
 *
 * Ein Feld ist so groß, wie Breite UND Höhe es erlauben. Die Untergrenze ist keine Tippfläche: Das Brett ist ein
 * einziger Knopf, und wer mit dem Finger spielt, fährt ohnehin über die Pfeile am Wagen oder das Steuerkreuz darunter
 * (die Pfeile sind auf 44 Pixel aufgeblasen und ragen dann über die Nachbarfelder). Neun Felder auf 375 Pixeln
 * sind rund 37 Pixel; unter 24 wird das Raster unleserlich, und dann scrollt lieber die Seite. Jede Regel hängt an
 * [data-ar-spiel='fluchtweg'].
 */

.ar-spielfeld[data-ar-spiel='fluchtweg'] {
  --ar-felder: 7;
  --ar-kreuz-hoehe: 0px;
  --ar-kreuz-breite: 0px;
  /* Der Rand des Plans um das Raster: Rahmenlinie und Reißnägel liegen darin. */
  --ar-fw-blatt: 0.9rem;
  /* Die Luft des Rahmens (--ar-brettluft) liegt innerhalb des Bretts und gehört in die Breite: Ohne sie ragte die letzte Spalte über die Kante des Bretts hinaus. */
  --ar-zelle: clamp(24px, min((100vw - 2 * var(--ar-luft) - 2 * (var(--ar-brettrand) + var(--ar-brettluft)) - var(--ar-kreuz-breite) - 2 * var(--ar-fw-blatt)) / var(--ar-felder), (100vh - var(--ar-reserve) - var(--ar-hauskopf) - var(--ar-kreuz-hoehe) - 2 * var(--ar-fw-blatt)) / var(--ar-felder)), 84px);
  --ar-brettbreite: calc(var(--ar-felder) * var(--ar-zelle) + 2 * var(--ar-fw-blatt) + 2 * (var(--ar-brettrand) + var(--ar-brettluft)) + var(--ar-kreuz-breite));
  --ar-einheit: var(--ar-zelle);
}

@supports (width: 1cqw) and (height: 1dvh) {
  .ar-spielfeld[data-ar-spiel='fluchtweg'] {
    --ar-zelle: clamp(24px, min((100cqw - 2 * (var(--ar-brettrand) + var(--ar-brettluft)) - var(--ar-kreuz-breite) - 2 * var(--ar-fw-blatt)) / var(--ar-felder), (100dvh - var(--ar-reserve) - var(--ar-hauskopf) - var(--ar-kreuz-hoehe) - 2 * var(--ar-fw-blatt)) / var(--ar-felder)), 84px);
  }

  /*
   * Auf dem Schreibtisch darf ein Feld bis 140 Pixel wachsen; --ar-feld ist die Breite der Bühne. Die Höhe bleibt der
   * Riegel, der Brett und Steuerkreuz über dem Falz hält. Auf Telefon und im flachen Querformat greift das nicht, dort
   * bleibt es bei 84.
   */
  @media (min-width: 64rem) and (min-height: 30.0625rem) {
    .ar-spielfeld[data-ar-spiel='fluchtweg'] {
      --ar-zelle: clamp(24px, min((var(--ar-feld) - 2 * (var(--ar-brettrand) + var(--ar-brettluft)) - 2 * var(--ar-fw-blatt)) / var(--ar-felder), (100dvh - var(--ar-reserve) - var(--ar-hauskopf) - var(--ar-kreuz-hoehe) - 2 * var(--ar-fw-blatt)) / var(--ar-felder)), 160px);
    }
  }

  /*
   * UND AUF EINEM GROSSBILD NOCH EINMAL HÖHER. Auf 2560 × 1440 deckelte die Zahl darüber das Brett, obwohl Bühne und
   * Höhe mehr hergaben; das min() darin bleibt der Riegel, der Deckel ist nur seine Obergrenze.
   *
   * DER DECKEL IST NICHT DER ENGPASS AUF EINEM BREITEN 16:9-SCHIRM (siehe derselbe Befund bei Käsekästchen): Ein
   * quadratisches Neun-mal-neun-Raster bleibt dort von der HÖHE begrenzt, nicht vom Deckel — angehoben ist die
   * Obergrenze trotzdem, für hohe oder quadratische Schirme.
   */
  @media (min-width: 100rem) and (min-height: 48rem) {
    .ar-spielfeld[data-ar-spiel='fluchtweg'] {
      --ar-zelle: clamp(24px, min((var(--ar-feld) - 2 * (var(--ar-brettrand) + var(--ar-brettluft)) - 2 * var(--ar-fw-blatt)) / var(--ar-felder), (100dvh - var(--ar-reserve) - var(--ar-hauskopf) - var(--ar-kreuz-hoehe) - 2 * var(--ar-fw-blatt)) / var(--ar-felder)), 290px);
    }
  }
}

/*
 * DER STADTPLAN IST EINE BLAUPAUSE DES VIERTELS: Preußischblau mit einer weißen Rahmenlinie um das Raster, ein
 * Reißnagel in jeder Ecke und ein harter Schatten auf dem Filz. Er liegt mitten auf dem Tisch, der den ganzen Rahmen
 * nimmt (`TISCHE.plan`). Hier lag ein Stadtplan als Wasserzeichen unter halb deckenden Feldern; jetzt ist der Plan das
 * Blatt selbst, und die Felder liegen voll deckend darauf.
 */
.ar-fw__blatt {
  position: relative;
  padding: var(--ar-fw-blatt);
  background: var(--ar-plan-blau);
  box-shadow:
    inset 0 0 0 0.4rem var(--ar-plan-blau),
    inset 0 0 0 calc(0.4rem + 1.5px) var(--ar-plan-weiss),
    0.3rem 0.4rem 0 var(--ar-ku-schlagschatten);
}

/* Das Steuerkreuz gibt es, wo ein Finger tippt. Eine Reihe zu 47 Pixeln, dazu der Abstand zum Brett. */
@media (any-pointer: coarse) {
  .ar-spielfeld[data-ar-spiel='fluchtweg'] {
    --ar-kreuz-hoehe: calc(47px + 0.6rem);
  }
}

.ar-fw {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
}

.ar-fw__flaeche {
  position: relative;
}

.ar-fw__brett {
  display: block;
  width: calc(var(--ar-felder) * var(--ar-zelle));
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  touch-action: manipulation;
}

/*
 * WER SPIELT, WISCHT ÜBER DAS BRETT, UND DIE BÜHNE ROLLT DABEI NICHT MIT (`wischen()` in brett.js). Mit einer Wischgeste
 * des Browsers käme ein senkrechter Wisch nie an: Er rollte die Bühne, und das Brett bekäme statt des Loslassens ein
 * pointercancel. Zoomen mit zwei Fingern bleibt erlaubt. Wer zuschaut, hat ein Bild ohne Griff und rollt darüber wie
 * überall.
 */
button.ar-fw__brett {
  cursor: pointer;
  touch-action: pinch-zoom;
}

.ar-fw__brett:focus-visible {
  outline-offset: -3px;
}

.ar-fw__bild {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * DIE SCHICHT ÜBER DEM BILD (`marken` in brett.js): die Pfeile am eigenen Wagen und der Ring um den Koffer. Sie deckt
 * genau das Bild ab und nimmt selbst keinen Tipp an, nur die Pfeile darin. Ein Feld rechnet sie in Bruchteilen der
 * Kantenlänge (`--ar-fx`, `--ar-fy` sind Spalte und Zeile), damit sie mit dem Bild wächst und schrumpft; absolut, damit
 * sie das Layout nicht anrührt.
 */
.ar-fw__marken {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ar-fw__antipp-gruppe {
  position: absolute;
  inset: 0;
}

/*
 * Der Ring um den Koffer ist ein Element, weil der Puls des Rahmens (`ar-puls`) ein Ring um ein Element ist. Das Element
 * steht 7 Pixel innerhalb des Feldes: 3 Pixel Ring plus 4 Pixel Abstand des Pulses, damit der Ring genau an der Kante
 * des Feldes liegt und nicht in die Nachbarn ragt.
 */
.ar-fw__beute {
  position: absolute;
  left: calc(var(--ar-fx) * 100% / var(--ar-felder) + 7px);
  top: calc(var(--ar-fy) * 100% / var(--ar-felder) + 7px);
  width: calc(100% / var(--ar-felder) - 14px);
  height: calc(100% / var(--ar-felder) - 14px);
}

/* Das Etikett sitzt auf der Oberkante des Feldes wie ein Reiter: Es deckt vom Feld darüber nur einen schmalen Streifen. */
.ar-fw__beute-etikett {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  padding: 0 0.3rem;
  border: 1px solid var(--ar-funke);
  background: var(--ar-noir-3);
  color: var(--ar-funke);
  font-family: var(--ar-schrift);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/*
 * DER PFEIL STEHT MITTEN AUF DEM NACHBARFELD UND IST MINDESTENS 44 PIXEL GROSS. Bleibt das Feld darunter, ragt er über die
 * Nachbarn hinaus und liegt dann ÜBER ihnen: Er ersetzt den Tipp aufs Feld nicht, sondern geht denselben Griff.
 */
.ar-fw__antipp {
  position: absolute;
  left: calc((var(--ar-fx) + 0.5) * 100% / var(--ar-felder));
  top: calc((var(--ar-fy) + 0.5) * 100% / var(--ar-felder));
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: max(calc(100% / var(--ar-felder)), 44px);
  height: max(calc(100% / var(--ar-felder)), 44px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ar-kreide);
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: pinch-zoom;
}

.ar-fw__antipp-bild {
  width: clamp(16px, 45%, 40px);
  height: clamp(16px, 45%, 40px);
}

/* Das Symbol zeigt nach oben; die anderen drei drehen sich daraus. */
.ar-fw__antipp[data-ar-richtung='rechts'] .ar-fw__antipp-bild {
  rotate: 90deg;
}

.ar-fw__antipp[data-ar-richtung='unten'] .ar-fw__antipp-bild {
  rotate: 180deg;
}

.ar-fw__antipp[data-ar-richtung='links'] .ar-fw__antipp-bild {
  rotate: 270deg;
}

/* Die Sackgasse: derselbe Pfeil, blasser. Das Feld darunter trägt die Schraffur (`.ar-fw-weg--eng`), er nur die Deckkraft. */
.ar-fw__antipp[data-ar-eng] .ar-fw__antipp-bild {
  opacity: 0.5;
}

/*
 * DAS KREUZ IST AUF DEM TELEFON EINE REIHE: links, oben, unten, rechts, vier Knöpfe zu 3,5 rem und 47 Pixeln.
 *
 * ES STAND IN ZWEI REIHEN, oben und unten in der Mitte, links und rechts über beide Reihen — 100 Pixel hoch, und jeder
 * davon fehlte dem Raster, wo die Höhe es begrenzt: auf 375 × 667 ein Raster von 244 Pixeln neben 79 Pixeln Leere. Eine
 * Reihe kostet 47, und dasselbe Raster misst dort 298. Wo die Breite das Raster begrenzt (375 × 812, 390 × 844), ändert
 * sie am Raster nichts, und das Brett wird 53 Pixel kürzer. Das Kreuz liegt UNTER dem Raster und deckt nichts zu;
 * halbdurchlässig über dem Raster hätte es Felder verdeckt und seinen eigenen Pfeilen den Kontrast genommen. Seit ein
 * Wisch über das Brett fährt, ist es der zweite Weg und nicht mehr der einzige.
 */
.ar-fw__kreuz {
  display: none;
  grid-template-columns: repeat(4, 3.5rem);
  grid-template-rows: 47px;
  gap: 0.4rem;
}

@media (any-pointer: coarse) {
  .ar-fw__kreuz {
    display: grid;
  }
}

.ar-fw__pfeil {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 3.5rem;
  min-height: 47px;
  padding: 0;
}

.ar-fw__pfeil[data-ar-pfeil='links'] {
  grid-area: 1 / 1;
}

.ar-fw__pfeil[data-ar-pfeil='oben'] {
  grid-area: 1 / 2;
}

.ar-fw__pfeil[data-ar-pfeil='unten'] {
  grid-area: 1 / 3;
}

.ar-fw__pfeil[data-ar-pfeil='rechts'] {
  grid-area: 1 / 4;
}

/* Über der Schraffur einer Sackgasse, die als Kasten darunter liegt. */
.ar-fw__pfeil-bild {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
}

/* Das Symbol zeigt nach oben; die anderen drei drehen sich daraus. */
.ar-fw__pfeil[data-ar-pfeil='rechts'] .ar-fw__pfeil-bild {
  rotate: 90deg;
}

.ar-fw__pfeil[data-ar-pfeil='unten'] .ar-fw__pfeil-bild {
  rotate: 180deg;
}

.ar-fw__pfeil[data-ar-pfeil='links'] .ar-fw__pfeil-bild {
  rotate: 270deg;
}

/* Gesperrt heißt still, nicht weg: Ein Tipp sagt, dass es dort nicht weitergeht. */
.ar-fw__pfeil[aria-disabled='true'] {
  border-color: var(--ar-kante);
  background: var(--ar-noir);
}

.ar-fw__pfeil[aria-disabled='true'] .ar-fw__pfeil-bild > use {
  opacity: 0.45;
}

/*
 * VERBAUT IST EINE FORM UND KEIN GRAUTON: ein Strich quer vor der Pfeilspitze, die Wand, gegen die der Pfeil läuft. Er
 * dreht mit dem Pfeil und steht in voller Deckung (Kreide-2 auf Noir 8,80 : 1), während der Pfeil dahinter verblasst.
 * Still allein hieße nur „jetzt nicht“: Außer der Reihe ist jeder Knopf still.
 */
.ar-fw__wand {
  display: none;
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 2.5;
  stroke-linecap: square;
}

.ar-fw__pfeil[data-ar-wand] .ar-fw__wand {
  display: inline;
}

/*
 * DIE SACKGASSE TRÄGT IM KREUZ DIESELBE SCHRAFFUR WIE AUF DEM BRETT (`.ar-fw-schraeg`): drei schräge Striche über den
 * Knopf, und der Pfeil verblasst wie der am Wagen. Man kann dorthin; danach geht es nicht weiter.
 */
.ar-fw__schraffur {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 3;
  stroke-linecap: square;
  opacity: 0.55;
  pointer-events: none;
}

.ar-fw__schraffur > path {
  vector-effect: non-scaling-stroke;
}

.ar-fw__pfeil[data-ar-eng] .ar-fw__schraffur {
  display: block;
}

.ar-fw__pfeil[data-ar-eng] .ar-fw__pfeil-bild > use {
  opacity: 0.5;
}

/*
 * IM QUERFORMAT STEHT DAS KREUZ NEBEN DEM BRETT, UND ZWAR IMMER — nicht nur im flachen Telefon-Querformat. Die Regel
 * stand hinter `max-height: 30rem` und griff deshalb nur bis knapp über Handyhöhe; auf einem Tablet quer (640 bis
 * 800 Pixel hoch) blieb es bei der Grundform, Kreuz UNTER dem Raster, und genau das darf im Querformat nie stehen —
 * ein Steuerkreuz unter einem Brett, das schon die ganze Höhe nimmt, verschwindet unter dem Falz.
 *
 * DAS BRETT IST DORT SO BREIT WIE RASTER UND KREUZ ZUSAMMEN. Es war nur so breit wie das Raster, und das Kreuz stand
 * daneben über seinem Rand: Auf 667 × 375 lag es mit 181 Pixeln rechts außerhalb des Fensters, die Seite lief 165 Pixel
 * seitwärts, und wer drücken wollte, musste erst scrollen. Neben der Anzeigeleiste ist dafür wenig Platz, und ein Kreuz
 * über drei Spalten nahm ihr so viel, dass vom eigenen Namen „A…“ blieb. Es steht deshalb in zwei Spalten: oben und
 * unten über die ganze Breite, links und rechts dazwischen. So bleiben der Leiste 272 Pixel.
 */
@media (orientation: landscape) {
  .ar-spielfeld[data-ar-spiel='fluchtweg'] {
    --ar-kreuz-hoehe: 0px;
  }

  .ar-fw {
    grid-template-columns: auto auto;
    align-items: center;
  }

  @media (any-pointer: coarse) {
    .ar-spielfeld[data-ar-spiel='fluchtweg'] {
      --ar-kreuz-breite: calc(2 * 44px + 0.4rem + 0.6rem);
    }

    .ar-fw__kreuz {
      grid-template-columns: repeat(2, 44px);
      grid-template-rows: repeat(3, 47px);
    }

    .ar-fw__pfeil {
      min-width: 44px;
    }

    .ar-fw__pfeil[data-ar-pfeil='oben'] {
      grid-area: 1 / 1 / 2 / 3;
    }

    .ar-fw__pfeil[data-ar-pfeil='links'] {
      grid-area: 2 / 1;
    }

    .ar-fw__pfeil[data-ar-pfeil='rechts'] {
      grid-area: 2 / 2;
    }

    .ar-fw__pfeil[data-ar-pfeil='unten'] {
      grid-area: 3 / 1 / 4 / 3;
    }

    /* Das Abzeichen gehört über das Raster und nicht über das Kreuz: Mittig über beidem ragte „KRACH!“ oben 11 Pixel über
       den Brettrand hinaus. */
    .ar-spielfeld[data-ar-spiel='fluchtweg'] .ar-abzeichen {
      left: calc((100% - var(--ar-kreuz-breite)) / 2);
      width: min(0.92 * (100% - var(--ar-kreuz-breite)), 22rem);
    }
  }
}

/*
 * Die Koffer im freien Platz der Leiste: ein Bild und eine Zahl je Farbe, nebeneinander. Sie stehen neben der
 * Standzeile und dürfen sie nicht drücken — auf 320 px bleibt links so wenig, dass vier Farben umbrechen müssten;
 * flex-wrap fängt das ab.
 */
[data-ar-spiel='fluchtweg'] .ar-fw__koffer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.4rem;
  margin-inline-end: 0.45rem;
}

[data-ar-spiel='fluchtweg'] .ar-fw__koffer-farbe {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--ar-kofferfarbe);
}

[data-ar-spiel='fluchtweg'] .ar-fw__koffer-farbe[data-ar-farbe='rot'] {
  --ar-kofferfarbe: var(--ar-rot);
}

[data-ar-spiel='fluchtweg'] .ar-fw__koffer-farbe[data-ar-farbe='blau'] {
  --ar-kofferfarbe: var(--ar-blau);
}

[data-ar-spiel='fluchtweg'] .ar-fw__koffer-farbe[data-ar-farbe='gelb'] {
  --ar-kofferfarbe: var(--ar-gelb);
}

[data-ar-spiel='fluchtweg'] .ar-fw__koffer-farbe[data-ar-farbe='gruen'] {
  --ar-kofferfarbe: var(--ar-gruen);
}

[data-ar-spiel='fluchtweg'] .ar-fw__koffer-bild {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
}

[data-ar-spiel='fluchtweg'] .ar-fw__koffer-zahl {
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Ein Feld ist ein Block des Viertels auf der Blaupause, seine Kante die Wand des Plans (3,16 : 1 gegen das Blau). */
.ar-fw-feld {
  fill: var(--ar-plan-blau);
  stroke: var(--ar-plan-wand);
  stroke-width: 2;
}

/* Wohin der eigene Wagen fahren darf: eine weiße Kante auf hellerem Blau, keine Farbe. */
.ar-fw-weg {
  fill: var(--ar-plan-blau-licht);
  stroke: var(--ar-plan-weiss);
  stroke-width: 4;
  stroke-dasharray: 12 8;
}

/*
 * Ein Feld, von dem der Wagen nicht mehr weiterkäme: feiner gestrichelt, blasser und schraffiert. Die Deckkraft allein
 * wäre keine Auskunft, die man ohne Farbe liest; Kante und Schraffur tragen sie. Das Weiß des Plans hält bei dieser
 * Deckkraft noch 4,21 : 1 auf dem Feld.
 */
.ar-fw-weg--eng {
  stroke-dasharray: 3 9;
  opacity: 0.6;
}

.ar-fw-schraeg {
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 4;
  stroke-linecap: square;
  opacity: 0.55;
}

/* Der Wisch hinter dem Wagen steht genau ein Bild lang; es gibt keine Transition. */
.ar-fw-wisch {
  fill: none;
  stroke: var(--ar-kreide);
  stroke-width: 10;
  stroke-dasharray: 16 12;
  stroke-linecap: square;
}

/* Ein Wrack trägt keine Farbe mehr: Die Farbtokens biegen im Bild auf Grau um, wie bei einer K.O.-Plakette. */
.ar-fw-wrack {
  --ar-rot: var(--ar-kante-griff);
  --ar-blau: var(--ar-kante-griff);
  --ar-gelb: var(--ar-kante-griff);
  --ar-gruen: var(--ar-kante-griff);
}

.ar-fw-nein {
  fill: none;
  stroke: var(--ar-kreide);
  stroke-width: 9;
  paint-order: stroke;
}

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

/*
 * DIE SPERRE IST EINE BEFAHRENE STRASSE: NACHT ALS GRUND, DIE FARBE GEDÄMPFT IN DEN REIFENSPUREN UND VOLL AUF DER
 * PLANKE DER BARRIKADE.
 *
 * Sie war eine Farbfläche, dann ein Stacheldraht mit Dornen, dann ein Straßenzug mit zwei Bordkanten. Jedes Mal ging
 * es um dieselbe Zahl: Am Ende einer Runde sind zwei Drittel des Bretts gesperrt — als Klötze wird das Brett steril,
 * als Zacken findet niemand mehr seinen eigenen Wagen. Es bleibt deshalb bei zwei Lautstärken je Feld.
 */
.ar-g-sperrgrund { fill: var(--ar-fw-sperrgrund, var(--ar-noir)); }

/*
 * AUF DEM PLAN IST DER GRUND EINER SPERRE DAS TIEFE BLAU DER BLAUPAUSE, in Schild und Bildkarten bleibt er Nacht. Die
 * Sperre steht über `<use>` im Bild, und ein Selektor wie `.ar-fw__bild .ar-g-sperrgrund` erreicht nichts, was dort
 * steht (README der Arena, Abschnitt 3): Das Bild setzt deshalb eine Eigenschaft, die in das Symbol hineinerbt.
 */
.ar-fw__bild { --ar-fw-sperrgrund: var(--ar-plan-blau-tief); }
.ar-g-fahrbahn { opacity: 0.3; }
.ar-g-fahrbahn-rot { fill: var(--ar-rot); }
.ar-g-fahrbahn-blau { fill: var(--ar-blau); }
.ar-g-fahrbahn-gelb { fill: var(--ar-gelb); }
.ar-g-fahrbahn-gruen { fill: var(--ar-gruen); }

/* Das Profil der Reifen: Quermarkierungen in der Spur, schwach genug, dass sie „Reifen“ sagen und nicht „Gitter“. */
.ar-g-fw-profil { fill: none; stroke: var(--ar-noir); stroke-width: 3; opacity: 0.55; }

/*
 * DER REGEN AUF DEM ASPHALT IST EINE KANTE UND KEIN SCHLEIER. Was nass glänzt, steht als unterbrochene Haarlinie da,
 * wo das Licht eine Kante findet: oben an der Reifenspur und quer durch den Scheinwerferkegel. Ein Weichzeichner wäre
 * der andere, verbotene Weg.
 */
.ar-g-fw-nass { fill: none; stroke: var(--ar-kreide); stroke-width: 1.5; stroke-dasharray: 11 9; opacity: 0.32; }

/* Die Barrikade: ein Bock hinter der Planke, die Planke in voller Farbe, oben ihre Lichtkante aus Blech. */
.ar-g-fw-bock { fill: none; stroke: var(--ar-kreide-2); stroke-width: 4; stroke-linecap: square; }
.ar-g-fw-planke { stroke: var(--ar-noir); stroke-width: 2.5; }
.ar-g-fw-planke-rot { fill: var(--ar-rot); }
.ar-g-fw-planke-blau { fill: var(--ar-blau); }
.ar-g-fw-planke-gelb { fill: var(--ar-gelb); }
.ar-g-fw-planke-gruen { fill: var(--ar-gruen); }
.ar-g-fw-planke-kante { fill: none; stroke: var(--ar-kreide-2); stroke-width: 2; }

/*
 * Der Oldtimer: dunkle Kotflügel über den Rädern, Trittbretter dazwischen, Kühlergrill aus Blech.
 *
 * DER KOTFLÜGEL BRAUCHT SEINE KANTE: Dunkelgrau auf dem dunklen Feld war ein Fleck, in dem Rad und Bogen dasselbe
 * waren. Die Griffkante zeichnet den Bogen nach, das Rad darin bleibt schwarz — so sitzt der Wagen auf Rädern und
 * hat nicht vier Klumpen an den Ecken.
 */
.ar-g-fw-kotfluegel { fill: var(--ar-noir-3); stroke: var(--ar-kante-griff); stroke-width: 1.5; }
.ar-g-fw-trittbrett { fill: var(--ar-noir-2); stroke: var(--ar-kante); stroke-width: 1.5; }
.ar-g-fw-grill { fill: var(--ar-kreide-2); }

/* Der Blechfalz an der rechten Flanke: eine flache Tiefe im Lack, Teil der Zeichnung und kein Verlauf (README 8.16). */
.ar-g-fw-blechfalz { fill: var(--ar-noir); opacity: 0.22; }

/* Die Scheinwerfer sitzen neben der Haube: zwei runde Gläser, an denen man vorn von hinten unterscheidet. */
.ar-g-scheinwerfer { fill: var(--ar-kreide); }

/* Der Geldkoffer in der Mitte: Senf, weil er der eine Gegenstand ist, um den es geht. */
.ar-g-beute { fill: var(--ar-funke); stroke: var(--ar-noir); stroke-width: 3; }

/*
 * DER SCHEINWERFERKEGEL. Eine harte Fläche mit niedriger Deckung, kein Weichzeichner und kein Verlauf — die
 * eisernen Verbote gelten hier wie überall, und ein Lichtkegel im Sin-City-Stil ist ohnehin eine Kante und kein
 * Nebel. Er ragt über die Kachel hinaus; das SVG des Bretts schneidet ihn am Rand sauber ab.
 *
 * DIE FARBE STEHT AN DER GRUPPE UND NICHT AM KEGEL: Im Licht liegt seit dem Regen ein zweites Bauteil, der Glanz auf
 * dem nassen Asphalt, und der braucht dieselbe Farbe als STRICH. Ein Token je Gruppe ist eine Tabelle statt zweier.
 */
.ar-fw-licht[data-ar-farbe='rot'] { --ar-lichtfarbe: var(--ar-rot); }
.ar-fw-licht[data-ar-farbe='blau'] { --ar-lichtfarbe: var(--ar-blau); }
.ar-fw-licht[data-ar-farbe='gelb'] { --ar-lichtfarbe: var(--ar-gelb); }
.ar-fw-licht[data-ar-farbe='gruen'] { --ar-lichtfarbe: var(--ar-gruen); }
.ar-fw-kegel { fill: var(--ar-lichtfarbe); opacity: 0.18; }
.ar-fw-glanz { fill: none; stroke: var(--ar-lichtfarbe); stroke-width: 5; stroke-dasharray: 13 10; opacity: 0.3; }
.ar-g-riss { fill: none; stroke: var(--ar-kreide); stroke-width: 6; stroke-linecap: square; }

/*
 * DER QUALM ÜBER EINEM WRACK: drei Schwaden, die in harten Bildern von 90 ms aufsteigen und dabei blasser werden.
 * Er steht so lange wie „KRACH!“ darüber (`QUALM_MS` in brett.js) und trägt keine Auskunft — was passiert ist, sagen
 * Abzeichen, Leiste und Tafel. Wer wenig Bewegung bestellt hat, bekommt gar keinen.
 */
.ar-g-fw-qualm { fill: var(--ar-noir-3); stroke: var(--ar-kreide-2); stroke-width: 3; }

.ar-fw-qualm {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ar-fw-qualm var(--ar-qualm, 900ms) steps(10) both;
}

@keyframes ar-fw-qualm {
  from {
    opacity: 0.55;
    translate: 0 0;
    scale: 0.55;
  }

  to {
    opacity: 0;
    translate: 0 calc(-1 * var(--ar-hoch));
    scale: 1.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-fw-qualm {
    display: none;
  }
}