/*
 * Schmuggelroute: oben der Stammtisch mit Frachtbriefen, Ware, Stapel und Auslage (js/kulisse.js) und einem Schild je
 * Platz, darunter die drei Routenknöpfe mit ihrer Warnung, die Zeilen zum Zug und die Steuerleiste mit Razzienzeile,
 * Weiterziehen und Beute sichern. Anzeigeleiste, Brettrand, Abzeichen und Tafel stehen als Rahmen des Spielfelds in
 * css/arena.css; ein Wasserzeichen trägt dieses Brett nicht mehr, sein Grund ist der Stammtisch.
 *
 * Ein Feld des Frachtbriefs ist gesichert gefüllt in der Farbe des Platzes, unterwegs blass mit gestrichelter Kante, frei
 * leer — nie nur ein Farbton. Die Griffe messen mindestens 44 Pixel; was auf dem Tisch liegt, ist nur zum Ansehen da.
 * Rund geschnitten sind allein die Karten (README Abschnitt 8.13). Jede Regel auf der gemeinsamen Fläche hängt an
 * [data-ar-spiel='schmuggelroute'] oder an einer Klasse dieses Spiels.
 *
 * Auf dem Tisch bewegt nur die Bühne etwas: Karten fliegen und schlagen um, Ware rückt vor, fällt zurück und hüpft. Dazu
 * kreist der Suchscheinwerfer der Razzia in zwölf Stufen je Umlauf über dem Stapel, und bei einer Razzia blitzt der Rand
 * des Bretts ein Bild lang auf. Wann was wo steht, sagt die Serverzeit.
 */

/*
 * Auf dem Telefon nimmt das Brett seine Breite, bis es sechsunddreißig Geviert hat, und steht in einer Spalte: Tisch,
 * Routenknöpfe, Zeilen, Steuerleiste. Ab dem Tablet nimmt es die ganze Bühne, mit dem Tisch über die volle Breite.
 */
.ar-spielfeld[data-ar-spiel='schmuggelroute'] {
  --ar-brettbreite: min(36rem, 100vw - 2 * var(--ar-luft));
  --ar-einheit: calc(var(--ar-brettbreite) / 6);
}

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

/* Im flachen Querformat steht die Anzeigeleiste links neben dem Brett und braucht ihre 15rem, sonst stünden die Namen
   der Plaketten Buchstabe für Buchstabe untereinander. */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld[data-ar-spiel='schmuggelroute'] {
    --ar-brettbreite: min(30rem, 100vw - 2 * var(--ar-luft) - var(--ar-seite));
  }

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

/* Ab dem Tablet nimmt das Brett die volle Bühne: Hochkant auf dem Tablet stünde der Tisch sonst auf den 36rem des Telefons. */
@media (min-width: 48rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='schmuggelroute'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/*
 * Außen um das Raster: Nach der Breite des BRETTS fragen die Regeln darin, und ein Raster kann nicht nach seiner
 * eigenen fragen.
 */
.ar-sr-mass {
  container: ar-sr-mass / inline-size;
}

.ar-sr {
  display: grid;
  gap: 0.5rem;
  width: 100%;
}

/* Ein Fach, das noch nichts trägt, soll auch keine Lücke reißen: Wer zuschaut, hat keine Routenknöpfe. */
.ar-sr [data-ar-sr-teil]:empty {
  display: none;
}

/*
 * DAS AUFBLITZEN DER RAZZIA liegt innen an der Kante des Bretts: im Polster zwischen Brettrand und Inhalt, also nie auf
 * dem Rand selbst, der die Farbe dessen trägt, der dran ist. Die erste Razzia gestrichelt in Senf, die zweite
 * durchgezogen in Rot — die Form sagt die Stufe ein zweites Mal. Ein hartes Bild, kein Übergang (brett.js, `blitz()`).
 */
.ar-sr[data-ar-sr-blitz] {
  outline: 4px solid var(--ar-rot);
  outline-offset: calc(var(--ar-brettluft) - 4px);
}

.ar-sr[data-ar-sr-blitz='warnung'] {
  outline: 4px dashed var(--ar-funke);
}

/* ------------------------------------------------------------ Der Tisch */

/*
 * DER TISCH IST DIE BÜHNE: Frachtbriefe, Ware und Karten liegen auf dem gemalten Stammtisch (js/kulisse.js), und über ihm
 * liegen der Kegel des Suchscheinwerfers und die Schilder der Plätze.
 *
 * AUF DEM TELEFON NIMMT ER, WAS ÜBRIG IST: Zu Beginn eines Zugs müssen die drei Routenknöpfe über dem klebenden Dock
 * stehen, auch auf 320 × 640 (dev/arena-bretter.mjs, „Mobilschliff“). Der Tisch ist deshalb so hoch, wie das Fenster nach
 * Spieltisch, Rändern (`--ar-reserve`), Routenknöpfen und Dock hergibt, mindestens 13,5 und höchstens 24 Rem; ab dem
 * Tablet steht er quer und ganz (unten bei den Breiten).
 */
.ar-sr__buehne {
  position: relative;
}

.ar-sr__buehne > .ar-kulisse {
  width: 100%;
  height: clamp(13.5rem, 100svh - var(--ar-reserve) - var(--ar-hauskopf) - 16rem, 24rem);
  border: 2px solid var(--ar-kante);
}

.ar-sr__buehne > [data-ar-sr-teil='tisch'] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ar-sr__plaetze {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ein Frachtbrief füllt seine Platte: Das Blatt ist eine Zeichnung, so groß, wie die Bühne die Platte stellt. */
.ar-sr__brief {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * EINE KARTE AUF DEM TISCH ist ein Stück Pappe mit runden Ecken und einer Kreidekante, die mit ihrer Breite wächst
 * (`--ar-ku-karte-breite`, js/kulisse.js): auf dem Telefon sonst dicker als die Zahl darauf. Die Zahl steht in der
 * Plakatschrift, denn sie ist ein Aufdruck und kein Zähler; das Bild ihrer Route sitzt unten rechts. Die Razzia trägt
 * statt der Kreide eine rote Kante, und das Bild sagt es ohnehin. Der Rücken ist die Zeichnung des Stapels.
 */
.ar-sr__seite {
  --ar-sr-b: var(--ar-ku-karte-breite, 3rem);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: max(1px, calc(var(--ar-sr-b) * 0.035)) solid var(--ar-kreide);
  border-radius: 9% / 6%;
  background: var(--ar-noir-3);
}

.ar-sr__seite--razzia {
  border: max(2px, calc(var(--ar-sr-b) * 0.06)) solid var(--ar-rot);
}

.ar-sr__seite--ruecken {
  border: 0;
  background: var(--ar-noir);
}

.ar-sr__tischbild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ar-sr__seite--razzia > .ar-sr__tischbild {
  width: 82%;
  height: auto;
  aspect-ratio: 1;
}

.ar-sr__tischwert {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: calc(var(--ar-sr-b) * 0.42);
  line-height: 1;
}

.ar-sr__tischroute {
  position: absolute;
  right: 6%;
  bottom: 4%;
  display: block;
  width: 36%;
  height: auto;
  aspect-ratio: 1;
}

/* Der Schatten einer Karte trägt ihre Rundung; der der Ware bleibt eckig wie die Kiste. */
.ar-sr .ar-kulisse__karte-schatten:not([data-ar-ku-art='fest'], [data-ar-ku-art='unterwegs']) {
  border-radius: 9% / 6%;
}

/* Die neue Karte trägt, solange sie frisch ist, die Senfkante außen herum: So findet man sie in einer langen Auslage. */
.ar-kulisse__karte[data-ar-ku-marke='neu'] > .ar-kulisse__karte-seite:first-child .ar-sr__seite {
  box-shadow: 0 0 0 max(2px, calc(var(--ar-sr-b) * 0.05)) var(--ar-funke);
}

/*
 * DIE WARE ist die Kiste aus dem Warensack: dieselbe Zeichnung wie auf dem Knopf „Beute sichern“. Unterwegs trägt sie
 * einen gestrichelten Kreidering mit etwas Luft, gesichert keinen — der Ring sagt, was die Farbe der Felder darunter
 * auch sagt.
 */
.ar-sr__ware {
  display: block;
  width: 100%;
  height: 100%;
}

.ar-kulisse__karte[data-ar-ku-art='unterwegs'] .ar-sr__ware {
  outline: max(2px, calc(var(--ar-ku-karte-breite) * 0.07)) dashed var(--ar-kreide);
  outline-offset: max(1px, calc(var(--ar-ku-karte-breite) * 0.05));
}

/*
 * DER RAZZIA-ALARM: ein Suchscheinwerfer, der über den Tisch kreist, solange die zweite Razzia steht. Seine Lampe sitzt
 * über dem Stapel (brett.js setzt die Stelle), und auf welcher der zwölf Stufen er steht, rechnet das Brett aus der
 * Serverzeit — vier Schirme schauen in denselben Winkel.
 *
 * ER LIEGT UNTER DEN SCHILDERN UND NICHT DARAUF. Licht, das auf einen Namen fällt, hellt seinen Grund auf und nimmt ihm
 * Kontrast; auf dem Filz ist es Licht auf dem Tisch. Die Deckung von rund einem Fünftel im Kern ist gerechnet und nicht
 * gewählt: Die Zahl einer Karte darunter hält dort noch 6,9 : 1.
 *
 * ER IST HÖCHSTENS 36 REM GROSS. In der Breite der Bühne stand seine Lampe auf dem Schreibtisch als Kasten von 170
 * Pixeln über dem Stapel; so reicht der Kegel über den Tisch, und die Lampe bleibt eine Lampe.
 */
.ar-sr__alarm {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Ursprung und Versatz zeigen beide auf die Lampe (acht Hundertstel der Kachel, dort steht sie in der Zeichnung): Dreht
   sich der Kegel um einen anderen Punkt, wandert die Lampe mit. */
.ar-sr__strahl {
  position: absolute;
  display: block;
  width: min(100%, 36rem);
  translate: -50% -8%;
  rotate: var(--ar-sr-winkel, 0deg);
  transform-origin: 50% 8%;
  aspect-ratio: 1;
}

/* `hidden` versteckt über das Stilblatt des Browsers, und das verliert gegen `display: block`. */
.ar-sr__strahl[hidden] {
  display: none;
}

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

/*
 * DIE SCHILDER DER PLÄTZE liegen je eines am Rand seines Frachtbriefs (brett.js rechnet die Stelle aus der Bühne): Marke,
 * Name und Abzeichen in einer Zeile. Ein Schild ist eine Fläche in der Palette der Arena auf dem Bild, und seine Schrift
 * hält dort ihren Kontrast. Was auf dem Brief liegt, sagt es dem Screenreader in ganzen Sätzen.
 */
.ar-sr__platz[data-ar-farbe='rot'] { --ar-sr-farbe: var(--ar-rot); }
.ar-sr__platz[data-ar-farbe='blau'] { --ar-sr-farbe: var(--ar-blau); }
.ar-sr__platz[data-ar-farbe='gelb'] { --ar-sr-farbe: var(--ar-gelb); }
.ar-sr__platz[data-ar-farbe='gruen'] { --ar-sr-farbe: var(--ar-gruen); }

.ar-sr__platz {
  position: absolute;
  max-width: 46%;
  padding: 0.12rem 0.35rem 0.15rem 0.3rem;
  border: 1px solid var(--ar-kante-griff);
  border-left: var(--ar-farbkante) solid var(--ar-sr-farbe);
  background: var(--ar-noir-2);
  font-size: 0.74rem;
  line-height: 1.2;
  translate: -50% -50%;
}

.ar-sr__platz[data-ar-sr-seite^='fern'] {
  max-width: 33.3%;
  padding-inline: 0.25rem 0.2rem;
}

/* Wer dran ist, trägt die Kreidekante: Das Licht auf seinem Platz sagt es auch, aber nicht jedem. */
.ar-sr__platz[data-ar-dran] {
  border-color: var(--ar-kreide);
  border-left-color: var(--ar-sr-farbe);
  outline: 2px solid var(--ar-kreide);
  outline-offset: 1px;
}

.ar-sr__platz[data-ar-weg] {
  border-style: dashed;
  border-left-style: dashed;
  opacity: 0.72;
}

.ar-sr__kopf {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
}

.ar-sr__marke {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}

/* Ein langer Name endet mit Auslassung und nie mitten im Wort; ganz steht er in der Zeile darunter, sobald er dran ist. */
.ar-sr__name {
  min-width: 0;
  overflow: hidden;
  color: var(--ar-kreide);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-sr__zusatz {
  flex: none;
  padding: 0 0.2rem;
  border: 1px solid var(--ar-kante-griff);
  color: var(--ar-kreide-2);
  font-size: 0.6rem;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ Die Zeilen zum Zug */

.ar-sr__lage {
  display: grid;
  gap: 0.25rem;
}

.ar-sr__wer,
.ar-sr__satz,
.ar-sr__razzia-zahl,
.ar-sr__razzia-zusatz,
.ar-sr__stapel {
  margin: 0;
}

/* „… ist dran.“ und der Satz darunter tragen einen Namen von bis zu zwanzig Zeichen, und ein breiter ohne Leerzeichen passt
   nicht in jede Zeile: Er bricht dann im Wort, statt über das Brett hinauszulaufen. */
.ar-sr__wer {
  color: var(--ar-kreide);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ar-sr__stapel {
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/*
 * Die Warnung steht im Senf der Funken und trägt dazu ihre eigene Kante: Farbe allein sagte es nicht.
 *
 * DER SATZ HÄLT ZWEI ZEILEN, auch leer, und Polster und Kante stehen immer da, die Kante nur ohne Farbe: Er kam mit einer
 * Razzia oder dem Sichern und ging nach dem Griff wieder, und jedes Mal rückte, was darunter stand.
 */
.ar-sr__satz {
  min-height: calc(2.7em + 0.4rem + 4px);
  padding: 0.2rem 0.4rem;
  border: 2px solid transparent;
  color: var(--ar-kreide);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ar-sr__satz[data-ar-warnung] {
  border-color: var(--ar-funke);
}

/*
 * DIE RAZZIENZEILE: eine feste Zeile über den beiden Knöpfen der Steuerleiste, in der Plakatschrift, denn sie trägt eine
 * Zahl, die man beim Hinsehen lesen soll und nicht zählt: „Razzien: 1 von 2“. Der Zusatz darunter steht nur, wenn die
 * nächste Razzia etwas nimmt; sein Platz ist immer da, damit die Knöpfe darunter mit der ersten Razzia nicht nach unten
 * rutschen.
 *
 * Die Kante links wechselt nur die Farbe, nicht die Breite: Sonst zuckte die Schrift bei jeder Razzia um vier Pixel. Die
 * Farbe trägt die Stufe nie allein — sie steht als Zahl in der Zeile und als Zusatz darunter.
 */
.ar-sr__razzia {
  display: grid;
  gap: 0.2rem;
  padding-left: 0.5rem;
  border-left: 6px solid var(--ar-kante-griff);
}

.ar-sr__razzia[data-ar-gefahr='warnung'] {
  border-left-color: var(--ar-funke);
}

.ar-sr__razzia[data-ar-gefahr='aus'] {
  border-left-color: var(--ar-rot);
}

.ar-sr__razzia-zahl {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 1.25rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* 0,78rem hält den Zusatz samt Warndreieck auf 375 Pixeln in seiner einen Zeile; in 0,85rem brach er dort knapp um,
   und die Steuerleiste wuchs mit der Warnung um eine Zeile. Ganz schmal reichen zwei (unten). */
.ar-sr__razzia-zusatz {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  min-height: 1.3em;
  color: var(--ar-kreide);
  font-size: 0.78rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Das Warndreieck steht am Zusatz der Razzienzeile und an der Grenze der Dächer: Das Wort sagt es, die Form sagt es ein zweites Mal. */
.ar-sr__warnzeichen {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

/* Im Zusatz so hoch wie seine Zeile: Mit 1,1rem stand das Dreieck anderthalb Pixel über der Reserve, und die
   Steuerleiste wuchs mit der Warnung. */
.ar-sr__razzia-zusatz > .ar-sr__warnzeichen {
  width: 1.3em;
  height: 1.3em;
}

/* ------------------------------------------------------------ Steuerleiste und Routenknöpfe */

/*
 * DIE STEUERLEISTE: Razzienzeile, darunter Weiterziehen und Beute sichern nebeneinander. Auf dem Telefon klebt sie als
 * Daumendock (`.ar-dock` im Rahmen) am unteren Rand der Bühne; Grund, Kante und Innenabstand bringt das Dock mit.
 */
.ar-sr__steuer {
  display: grid;
  gap: 0.4rem;
}

/* Zwei Spalten, solange je Knopf siebeneinhalb Rem bleiben; darunter stehen sie untereinander. Auf 320 Pixeln bleiben es
   zwei, und das Wort trägt dort erst mit dem knapperen Polster unter 20rem (weiter unten). */
.ar-sr__zugknoepfe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: calc(0.4rem + var(--ar-tusche));
  min-width: 0;
}

/*
 * Die beiden Knöpfe messen drei Rem: Sie sind die Bedienung des Zugs und keine Fußnote. Weiterziehen ist der starke, wie
 * die Routenknöpfe — dieselbe Handlung, nur ohne neue Wahl —, und Beute sichern der stille. Der Pfeil und der Warensack
 * sind Zeichnungen und keine Zeichen im Text.
 */
.ar-sr__aktion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.ar-sr__aktion-bild {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
}

.ar-sr__aktion[aria-disabled='true'] .ar-sr__aktion-bild {
  opacity: 0.5;
}

/*
 * Die starken Knöpfe tragen ihre Tuschkante als Umriss außerhalb des Kastens. Bei einer Fuge von 0,4rem blieben zwischen
 * „Ziehen: Hafen“ und „Ziehen: Tunnel“ 0,4 Pixel, und still lasen sich beide als ein Block; die Fuge rechnet beide
 * Umrisse dazu.
 *
 * Hier stehen die drei Routen, jede mit der Razzia darunter, bei der die Ware dort weg ist. Die Warnung steht unter dem
 * Knopf und nicht auf ihm: Auf der Hafenkarte hinter dem Wort läge sie auf einem Muster, und ein Satz auf einem Muster
 * hält seine Kontraste nicht.
 */
.ar-sr__griffe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(0.4rem + 2 * var(--ar-tusche));
}

.ar-sr__weg {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.45rem;
  min-width: 0;
}

/*
 * Die Grenze jeder Route: Wort, bei den Dächern dazu das Warndreieck und eine gestrichelte Kante in Senf — dieselbe
 * gestrichelte Kante, die ihre freien Felder auf dem Frachtbrief tragen. Hafen und Tunnel stehen ruhig, mit dünner
 * durchgezogener Kante. Der Unterschied liegt in Wort, Zahl, Zeichen und Kantenform, nicht in einem Farbton allein.
 */
.ar-sr__grenze {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  margin: 0;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font-size: 0.75rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ar-sr__grenze[data-ar-risiko] {
  border: 2px dashed var(--ar-funke);
}

/*
 * DIE HAFENKARTE HINTER DEM WORT. Der Knopf misst dafür vier Rem statt drei: Die Kachel ist 64 Pixel hoch, und eine
 * Zeichnung, die höher ist als ihr Knopf, ist eine halbe Zeichnung. Geschnitten wird sie am Knopfrand (overflow), und
 * das Wort liegt darüber.
 *
 * WIE KRÄFTIG SIE STEHT, ENTSCHEIDET DER KNOPF UND NICHT DAS MUSTER. Musterinhalt erbt keine Custom Property von der
 * Fläche, auf der er liegt (grafik.js); die Deckung des ganzen SVG erbt sie sehr wohl. Auf dem starken Knopf steht die
 * Karte gegen Senf, auf dem stillen gegen Tiefschwarz — dort blasser, damit „Ziehen: Hafen“ in Kreide-2 darüber seine
 * 4,5 : 1 behält.
 */
.ar-sr__griff {
  position: relative;
  min-height: 4rem;
  padding-inline: 0.4rem;
  overflow: hidden;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.ar-sr__plan {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 64px;
  opacity: 0.8;
  pointer-events: none;
}

.ar-sr__griff[aria-disabled='true'] .ar-sr__plan {
  opacity: 0.38;
}

.ar-sr__wort {
  position: relative;
}

/* Still heißt: Der Knopf bleibt, sagt beim Tippen, warum nicht, und sieht nicht aus, als wäre er gedrückt. */
.ar-sr__griff[aria-disabled='true'],
.ar-sr__aktion[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: default;
}

.ar-sr__griff[data-ar-nein],
.ar-sr__aktion[data-ar-nein] {
  outline: 3px solid var(--ar-kreide);
}

/* ------------------------------------------------------------ Breiten */

/*
 * UNTER 20REM BRETT STEHEN DIE DREI ROUTEN WEITER IN EINER REIHE, und die Steuerleiste darunter rückt zusammen. Die
 * Dächer standen dort in einer zweiten Reihe, und auf 320 × 640 deckte das klebende Dock zu Beginn eines Zugs „Ziehen:
 * Dächer“ ganz und Hafen und Tunnel halb — ausgerechnet die drei Knöpfe, mit denen ein Zug anfängt. Ein Knopf von 83
 * Pixeln trägt „Ziehen: Tunnel“ in zwei Zeilen, auch „Draw: Rooftops“. Das Dock verliert dafür gut zwanzig Pixel:
 * kleinere Razzienzeile, niedrigere Knöpfe.
 */
@container ar-sr-mass (max-width: 19.99rem) {
  .ar-sr__griff {
    min-height: 3.5rem;
    padding-block: 0.3rem;
  }

  .ar-sr__steuer {
    gap: 0.25rem;
  }

  .ar-sr__razzia-zahl {
    font-size: 1.05rem;
  }

  .ar-sr__razzia-zusatz {
    min-height: 2.6em;
    font-size: 0.7rem;
  }

  /* Weiterziehen und Sichern bleiben nebeneinander: Mit knapperem Polster und kleinerem Bild bleiben dem Wort rund hundert
     Pixel, „Weiterziehen“ braucht gut neunzig. Vorher brach es als „Weiterziehe / n“. */
  .ar-sr__aktion {
    gap: 0.25rem;
    min-height: 2.75rem;
    padding-inline: 0.3rem;
    font-size: 0.85rem;
  }

  .ar-sr__aktion-bild {
    width: 1.2rem;
    height: 1.2rem;
  }
}

/*
 * AB DEM TABLET STEHT DER TISCH QUER UND GANZ über die volle Breite, darunter links die drei Routenknöpfe samt den Zeilen
 * zum Zug und rechts die Steuerleiste. Die Routenknöpfe bleiben eine Reihe; in der Spalte der Steuerleiste stünden sie
 * auf 1024 Pixeln zu je rund 65 Pixeln, und „Ziehen: Tunnel“ bräche mitten im Wort.
 *
 * DER TISCH NIMMT DIE HÖHE, DIE ÜBRIG IST: Was das Fenster nach Spielleiste, Anzeigeleiste und Rändern (`--ar-reserve`),
 * dem klebenden Kopf, den Knöpfen und den Zeilen übrig lässt, mal seinem Format ist seine größte Breite. Wächst das Brett
 * aus dem Fenster, zoomt es der Rahmen klein (js/spielfeld.js, `einpassen()`), und mit ihm jeden Knopf unter seine 44
 * Pixel; mit vierzehn statt fünfzehn Rem geschah das auf 1366 × 657.
 *
 * HOCHKANT STEHT ER FAST QUADRATISCH. Quer zeigt die Bühne den ganzen Tisch, und auf einem Tablet im Hochformat war er
 * mit 2,4 : 1 ein flacher Streifen über zwanzig Zentimetern Leere. Mit 1,2 : 1 zeigt sie den Filz nah wie auf dem
 * Telefon (js/kulisse.js schaltet unter 1,45 : 1 um), und die Frachtbriefe liegen doppelt so groß.
 *
 * JEDER BENANNTE BEREICH TRÄGT SEINEN ELTERNTEIL IM SELEKTOR. Ein blankes `grid-area: lage` träfe jedes Element dieses
 * Namens im ganzen Haus, auch in einem Raster, das den Bereich gar nicht kennt (CLAUDE.md, Abschnitt 10).
 */
@container ar-sr-mass (min-width: 38.5rem) {
  .ar-sr {
    --ar-sr-format: 2.4;
    grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr);
    grid-template-areas:
      'buehne buehne'
      'griffe steuer'
      'lage steuer';
    align-items: start;
    gap: 0.6rem 1rem;
  }

  @media (orientation: portrait) {
    .ar-sr {
      --ar-sr-format: 1.2;
    }
  }

  .ar-sr > .ar-sr__buehne {
    grid-area: buehne;
    justify-self: center;
    width: min(100%, (100svh - var(--ar-reserve) - var(--ar-hauskopf) - 15rem) * var(--ar-sr-format));
  }

  .ar-sr__buehne > .ar-kulisse {
    height: auto;
    aspect-ratio: var(--ar-sr-format);
  }

  .ar-sr > [data-ar-sr-teil='griffe'] {
    grid-area: griffe;
  }

  .ar-sr > [data-ar-sr-teil='lage'] {
    grid-area: lage;
  }

  .ar-sr > [data-ar-sr-teil='steuer'] {
    grid-area: steuer;
  }

  /* In der Spalte der Steuerleiste stehen die beiden Knöpfe erst ab zehn Rem je Knopf nebeneinander: Auf dem Tablet im
     Hochformat hat die Spalte gut 280 Pixel, und „Weiterziehen auf Dächer“ brach dort als „Weiterziehe / n“. */
  .ar-sr__zugknoepfe {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

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

.ar-g-welle { fill: none; stroke: var(--ar-kreide-2); stroke-width: 4; }
.ar-g-welle-dick { fill: none; stroke: var(--ar-noir-3); stroke-width: 8; }
.ar-g-anker { fill: none; stroke: var(--ar-kreide); stroke-width: 7; stroke-linecap: square; }
.ar-g-gleis { fill: none; stroke: var(--ar-noir); stroke-width: 4; }
.ar-g-sr-scheinwerfer { fill: var(--ar-noir-3); }
.ar-g-kran { fill: var(--ar-noir-3); }
.ar-g-becken { fill: var(--ar-noir-2); }
.ar-g-karten-zahl { fill: none; stroke: var(--ar-noir); stroke-width: 5; }
/*
 * Die drei Ebenen der Hafenkarte: Nahes kräftig, Fernes blasser, Nebel als flache Fläche. Der Nebel ist deshalb kein
 * Weichzeichner und kein Verlauf, sondern ein Band mit niedriger Deckung — dieselbe Machart wie der Lichtkegel des
 * Fluchtwegs. Das Grau der Griffkante trägt auf Senf wie auf Tiefschwarz; eine der beiden Tinten des Hauses täte das nicht.
 */
.ar-g-sr-nah { fill: var(--ar-kante-griff); opacity: 0.45; }
.ar-g-sr-fern { fill: var(--ar-kante-griff); opacity: 0.3; }
.ar-g-sr-nebel { fill: var(--ar-kante-griff); opacity: 0.2; }
.ar-g-sr-strich { fill: none; stroke: var(--ar-kante-griff); stroke-width: 2; opacity: 0.4; }
.ar-g-sr-kegel { fill: var(--ar-kreide); opacity: 0.12; }
.ar-g-sr-kegel-kern { fill: var(--ar-kreide); opacity: 0.1; }
.ar-g-sr-lampe { fill: var(--ar-kreide-2); }
.ar-g-ruecken-linie { fill: none; stroke: var(--ar-kante-griff); stroke-width: 2; }
.ar-g-ruecken-rahmen { fill: none; stroke: var(--ar-kreide-2); stroke-width: 2; }
/*
 * DER FRACHTBRIEF ist Papier im Elfenbein der Würfel mit einer Tuschkante, und darauf liegen dunkle Kästen: frei leer,
 * gesichert in der Farbe des Platzes, unterwegs dieselbe Farbe blass mit gestrichelter Kreide, auf den Dächern frei mit
 * gestrichelter Senfkante (brett.js, `briefBild()`).
 */
.ar-g-sr-papier { fill: var(--ar-ku-elfenbein); stroke: var(--ar-noir); stroke-width: 4; }
.ar-g-sr-band { stroke: var(--ar-noir); stroke-width: 2; }
.ar-g-sr-feld { fill: var(--ar-noir-2); stroke: var(--ar-noir); stroke-width: 3; }
.ar-g-sr-blass { fill-opacity: 0.4; }
.ar-g-sr-unterwegs { fill: none; stroke: var(--ar-kreide); stroke-width: 4; stroke-dasharray: 9 6; }
.ar-g-sr-risiko { fill: none; stroke: var(--ar-funke); stroke-width: 4; stroke-dasharray: 9 6; }