/*
 * Schwarzmarkt: der Casinotisch mit der Kiste in der Mitte, die Kiste in Worten, die Vermögenszeile, die Umschläge je
 * Farbe und die Gebotsbank. Anzeigeleiste, Brettrand, Abzeichen und Tafel stehen als Rahmen des Spielfelds in
 * css/arena.css, der Tisch selbst als Bühne (js/kulisse.js); hier steht nur, was diesem Brett gehört.
 *
 * NIE NUR EIN FARBTON. Ein offener Umschlag trägt ein anderes BILD als ein verschlossener, dazu seine Zahl statt des
 * Fragezeichens; der Zuschlag hat eine Senfkante UND einen Haken im Bild. Jede Tippfläche misst mindestens 44 Pixel
 * — in beide Richtungen.
 *
 * DAS GEBOT STELLT DAS WETT-BAUTEIL DES HAUSES (Schieber, Zahlenfeld, vier Pillen, css/arena.css). Hier stand einmal
 * ein eigener, hakeliger Schieber und danach fünf Scheinknöpfe; was von beiden blieb, steht unten bei der Bank.
 *
 * DEN ZOLLSTEMPEL GIBT ES NICHT MEHR: Der Zweitplatzierte zahlt nichts, also steht auch nichts quer über seiner
 * Zeile. Was blieb, ist die Senfkante des Zuschlags.
 *
 * VIER BEWEGUNGEN GIBT ES, UND JEDE SPRINGT IN EINZELBILDERN: das Petschaft, das ins Wachs geht, die Kiste, die auf den
 * Tisch fällt, ihr Deckel, der aufspringt, und die Splitter, die der Rahmen darüber zeichnet. Keine `transition`, kein
 * Federn, kein Nachwippen — und mit `prefers-reduced-motion` bleibt jede davon stehen, ohne dass etwas fehlt. Was auf
 * dem Tisch fliegt und umschlägt, rechnet die Bühne und legt es dort ebenso sofort hin.
 *
 * DAS WASSERZEICHEN IST MIT DEM TISCH GEFALLEN. Hinter dem Brett lag ein Bild der Laderampe; seit die Kiste den ganzen
 * Abend auf einem Tisch steht, sagte es nichts mehr, was nicht schon dasteht.
 */

/*
 * Das Brett nimmt seine Breite bis 48 Geviert: So steht es auf einem Tablet hochkant in zwei Spalten — der Tisch links,
 * das Pult rechts — und passt ins Fenster, statt einspaltig auf Zoom 0,6 zu schrumpfen (`einpassen()` in
 * js/spielfeld.js). Auf dem Telefon steht alles untereinander.
 */
.ar-spielfeld[data-ar-spiel='schwarzmarkt'] {
  --ar-brettbreite: min(48rem, 100vw - 2 * var(--ar-luft));
  --ar-einheit: calc(var(--ar-brettbreite) / 6);
}

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

/* Im flachen Querformat steht der Spieltisch als Spalte neben dem Brett. */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld[data-ar-spiel='schwarzmarkt'] {
    --ar-brettbreite: min(30rem, 100vw - 2 * var(--ar-luft) - var(--ar-seite));
  }

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

/* Auf dem Schreibtisch nimmt das Brett die volle Bühne; die beiden Spalten darin begrenzen Tisch und Pult von selbst. */
@media (min-width: 64rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='schwarzmarkt'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/*
 * DIE TÖNE DIESES TISCHES STEHEN AN DER WURZEL UND NICHT AN .ar-sm: Kiste, Umschlag und Schein stehen auch im
 * Regelblatt, in der Einweisung und im Bild über der Abrechnung, also AUSSERHALB des Bretts; ein Symbol, dessen fill
 * auf eine Variable von .ar-sm zeigt, fiele dort auf Schwarz zurück. Der Präfix --ar-sm- hält sie trotzdem für sich.
 *
 * Das Braun der Kiste ist Ladung und keine Spielfarbe: --ar-rot gehört dem Sitz Rot, und eine Kiste in der Farbe
 * einer Person wäre eine Auskunft, die es nicht gibt. Kreide hält darauf 7,4 : 1.
 */
:root {
  /*
   * Zwei Hölzer statt eines: der Verlauf der Kiste. Er ist die Schattierung eines GEGENSTANDS und keine Fläche unter
   * Schrift (README, Abschnitt 8, Ziffer 16) — eine Kiste aus einem einzigen Braun stand auf der Rampe wie ein Karton.
   */
  --ar-sm-holz-hoch: #4b3b2b;
  --ar-sm-holz-tief: #241c14;
  --ar-sm-papier: #2a2a26;
  --ar-sm-bohle: #2b241c;
  --ar-sm-halle: #191b1d;
  /*
   * Siegelwachs. Es ist NICHT --ar-rot: Rot gehört dem Sitz Rot, und ein Siegel in der Farbe einer Person stünde
   * neben ihrer Marke wie eine Auskunft, die es nicht gibt — dieselbe Regel wie beim Braun der Kiste. Auf dem Papier
   * des Umschlags hält es 2,9 : 1 und trägt zusätzlich seine Tuschkante und seine eingedrückte Prägung.
   */
  --ar-sm-wachs: #c04a3c;
}

/*
 * Außen um das Raster: Nach der Breite des BRETTS fragen die Spalten darin. Eine namenlose Abfrage träfe für das Brett
 * selbst den nächsten Vorfahren — die Bühne des Rahmens —, während dieselbe Abfrage für seine Kinder das Brett misst.
 */
.ar-sm-mass {
  container: ar-sm-mass / inline-size;
}

.ar-sm {
  position: relative;
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

.ar-sm__links,
.ar-sm__seite {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-width: 0;
}

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

/* ------------------------------------------------------------------ Der Casinotisch */

/*
 * DER CASINOTISCH STEHT 1,4 : 1, die breiteste Bühne, auf der er noch nah steht (js/kulisse.js): Breiter zeigte sie den
 * ganzen Tisch, und der Wert im Schild der Kiste stünde auf dem Telefon kleiner als die Schrift daneben. Auf dem
 * Schreibtisch steht er links, höchstens so hoch, dass die Kiste in Worten darunter ins Fenster passt (unten bei den
 * Breiten).
 */
.ar-sm__buehne {
  position: relative;
  min-width: 0;
}

.ar-sm__buehne > .ar-kulisse {
  width: 100%;
  aspect-ratio: 1.4;
  border: 2px solid var(--ar-kante);
}

/*
 * DIE KISTE IST EIN AUFSTELLER (`kisteBild()` in brett.js): ein Kasten, darin das Bild aus dem Regelblatt und im Schild
 * ihr Wert. Bewegt wird der Kasten und nie eine Form im SVG — die malte Chrome im Raum der Bühne nicht neu
 * (knack/brett.css, „UND WAS BRICHT“).
 */
.ar-sm__ladung,
.ar-sm__ladung > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Der Wert im Schild: Plakatschrift in Kreide auf dem schwarzen Schild, so groß, wie das Schild hoch ist. */
.ar-g-sm-kistenwert {
  fill: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 22px;
  text-anchor: middle;
  dominant-baseline: central;
}

/*
 * DIE KISTE FÄLLT AUF DEN TISCH, wenn ihre Auktion beginnt, in vier harten Bildern und schneller werdend, wie etwas
 * fällt; aufgebrochen ruckt sie zweimal. Wann, sagt die Bühne: Der Aufsteller erscheint zur Zeit seiner Auktion, und wer
 * später kommt, steigt mit `--ar-ku-verzug` weiter hinten ein — eine Kiste, die längst steht, steht.
 */
@media (prefers-reduced-motion: no-preference) {
  .ar-sm__ladung[data-ar-sm-ankunft] {
    animation: ar-sm-ankunft calc(4 * var(--ar-bild)) step-end var(--ar-ku-verzug, 0ms) both;
  }

  .ar-sm__ladung[data-ar-sm-auf] {
    animation: ar-sm-brechen calc(2 * var(--ar-bild)) step-end var(--ar-ku-verzug, 0ms);
  }
}

@keyframes ar-sm-ankunft {
  0% { translate: 0 -45%; }
  25% { translate: 0 -42%; }
  50% { translate: 0 -33%; }
  75% { translate: 0 -19%; }
  100% { translate: 0 0; }
}

@keyframes ar-sm-brechen {
  0% { translate: -4px 3px; }
  50% { translate: 3px -2px; }
  100% { translate: 0 0; }
}

/* Der Schatten der Kiste: eine Fläche ohne Unschärfe auf dem Filz, so eckig wie die Kiste. */
.ar-sm__schatten {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ar-ku-schlagschatten);
}

/* Umschläge und Frachtbriefe sind Karten der Bühne (`karte()` in js/kulisse.js): Ihr Bild füllt die Karte. */
.ar-sm__karte {
  display: block;
  width: 100%;
  height: 100%;
}

/* Das Gebot auf dem Blatt eines offenen Umschlags: Tusche auf Kreide, so groß, wie das Blatt es trägt. */
.ar-g-sm-gebot {
  fill: var(--ar-noir);
  font-family: var(--ar-schrift-mono);
  font-size: 34px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Der Zuschlag am offenen Umschlag: eine Senfkante samt Haken, bei geteiltem Zuschlag gestrichelt in Blau. */
.ar-g-sm-kaufkante {
  fill: none;
  stroke: var(--ar-funke);
  stroke-width: 4;
}

.ar-g-sm-kaufkante[data-ar-sm-art='geteilt'] {
  stroke: var(--ar-blau);
  stroke-dasharray: 7 4;
}

/* Der Frachtbrief: ein Zettel aus Elfenbein, darauf die Kiste und ihr Anteil in Tusche. */
.ar-g-sm-brief {
  fill: var(--ar-ku-elfenbein);
  stroke: var(--ar-noir);
  stroke-width: 2.5;
}

.ar-g-sm-briefwert {
  fill: var(--ar-noir);
  font-family: var(--ar-schrift-mono);
  font-size: 36px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

/*
 * DAS SCHILD EINES PLATZES (`.ar-ku-schild` in css/arena.css) trägt hier zwei Zahlen: links das Bargeld, das gleich
 * darüber als Jetons liegt, und rechts außen die Fracht mit der Kiste davor. Das Zeichen ist ein Umriss in der Schrift
 * des Schilds — das Bild der Kiste aus dem Regelblatt stünde auf vierzehn Pixeln als brauner Fleck da.
 */
.ar-sm__schild-fracht {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
  padding-left: 0.3rem;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ar-sm__schild-fracht > .ar-ku-schild__zeichen {
  color: var(--ar-kreide-2);
}

.ar-g-sm-zeichen {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
}

/* ------------------------------------------------------------------ Vermögen */

/*
 * DAS KONTOTABLEAU IST DIE RECHNUNG DES SPIELS. Bargeld, ersteigerte Fracht und die Summe daraus — die Summe eine Spur
 * größer und in Senf, weil sie entscheidet.
 *
 * ES WAR EINE ZEILE UND IST JETZT EIN TABLEAU. Als flache Reihe von Textspans las der Playtest es gar nicht: „Man
 * weiß nicht, wie viel Bargeld man noch hat, wie viel Frachtwert man besitzt." Drei abgesetzte Felder mit Kante,
 * Marke oben und Zahl darunter sind drei Auskünfte statt einer Zeile, die man überliest.
 */
.ar-sm__geld {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.ar-sm__geld-teil {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  padding: 0.4rem 0.5rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
  text-align: center;
}

.ar-sm__geld-marke {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--ar-kreide-2);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Zwei zu eins, wie der Schein im Symbol: Ein quadratischer Kasten ließe von ihm einen Fleck übrig. */
.ar-sm__geld-bild {
  flex: none;
  width: 1.5rem;
  height: 0.75rem;
}

.ar-sm__geld-wert {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  hyphens: none;
}

/* Das Gesamtvermögen entscheidet die Runde: eigene Kante, eigener Ton, größte Ziffer. */
.ar-sm__geld-teil--gesamt {
  border-color: var(--ar-funke);
}

.ar-sm__geld-teil--gesamt .ar-sm__geld-wert {
  color: var(--ar-funke);
  font-size: 1.6rem;
}

/*
 * Abgebucht wird erst beim Aufdecken: Solange ein Gebot im Umschlag liegt, gilt das Tableau für den Stand davor. Die
 * Zeile steht immer da und ist nur sichtbar, solange sie gilt — kam sie erst mit dem Gebot, rückte die Bank darunter um
 * 22 Pixel, genau unter dem Daumen, der gerade geboten hatte.
 */
.ar-sm__geld-hinweis {
  grid-column: 1 / -1;
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
  text-align: center;
}

.ar-sm__geld-hinweis[data-ar-sm-still] {
  visibility: hidden;
}

/* ------------------------------------------------------------------ Auslage */

/*
 * DIE KISTE IN WORTEN, unter dem Tisch: links ihr Wert, groß und mit seiner Einheit, rechts ihr Name und die wievielte
 * Auktion läuft. Auf dem Tisch steht der Wert im Schild der Kiste; hier steht er so groß, dass niemand ihn suchen muss.
 *
 * HIER STAND DIE KISTE SELBST, auf einer gezeichneten Laderampe, und auf dem Schreibtisch nahm sie die halbe Bühne. Seit
 * sie auf dem Tisch steht, stünde sie hier ein zweites Mal.
 *
 * Oben steht etwas mehr Polster als unten, auch in der schmalen Fassung: An der Oberkante hängt in der ersten Runde
 * die Nummer des Rahmens, und sie berührte die Kuppe des großen Werts.
 */
.ar-sm__auslage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'wert name'
    'wert auktion';
  align-items: center;
  gap: 0.05rem 0.85rem;
  padding: 0.5rem 0.75rem 0.35rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

.ar-sm__auslage > .ar-sm__wert {
  grid-area: wert;
}

.ar-sm__auslage > .ar-sm__kiste-name {
  grid-area: name;
}

.ar-sm__auslage > .ar-sm__auktion {
  grid-area: auktion;
}

.ar-sm__auktion {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

/*
 * DER WERT DER KISTE STEHT GROSS UND MIT SEINER EINHEIT. Er stand als Ziffer im Schild der Kiste — 2,2 rem auf einem
 * Telefon, kaum größer als die Zahlen im Tableau — und ohne ein Wort daneben. Die Zahl ist die Auskunft, nach der der
 * Tisch bietet. Plakatschrift, weil es eine große Zahl ist und sie sich innerhalb einer Auktion nicht ändert (die Mono
 * gehört dem, was tickt). Beide Teile bleiben in einer Zeile: zwei Ziffern und „Punkte“ messen rund 140 Pixel.
 */
.ar-sm__wert {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  white-space: nowrap;
}

.ar-sm__wert-zahl {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 2.6rem;
  line-height: 1;
  hyphens: none;
}

.ar-sm__wert-einheit {
  color: var(--ar-kreide-2);
  font-size: 1rem;
  font-weight: 600;
}

/* Der Name der Kiste: „die Siebzehn" merkt sich niemand, „Dose Kaviar" schon. */
.ar-sm__kiste-name {
  margin: 0;
  color: var(--ar-kreide);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Die Kiste und die Rampe stehen im Regelblatt, in der Einweisung und auf dem Banner: dort als Bild, hier als Tisch. */
.ar-g-sm-holz-hoch {
  stop-color: var(--ar-sm-holz-hoch);
}

.ar-g-sm-holz-tief {
  stop-color: var(--ar-sm-holz-tief);
}

.ar-g-sm-kiste {
  fill: url(#ar-g-sm-holz-grad);
  stroke: var(--ar-kreide-2);
  stroke-width: 3;
}

/* Die Fugen zwischen den fünf Brettern des Korpus. */
.ar-g-sm-fuge {
  fill: none;
  stroke: var(--ar-noir);
  stroke-width: 2.5;
}

.ar-g-sm-deckel,
.ar-g-sm-deckel-bruch {
  fill: var(--ar-sm-holz-hoch);
  stroke: var(--ar-kreide-2);
  stroke-width: 3;
  stroke-linejoin: miter;
}

/* Was unter dem abgehebelten Deckel zu sehen ist: nichts. */
.ar-g-sm-innen {
  fill: var(--ar-noir);
}

.ar-g-sm-band {
  stroke: var(--ar-funke);
  stroke-width: 4;
}

.ar-g-sm-schild {
  fill: var(--ar-noir);
  stroke: var(--ar-kreide);
  stroke-width: 2;
}

/* Das Frachtsiegel: die Aufschrift einer Ladung, in Kreide durch eine Schablone. Es sagt nichts über den Spielstand. */
.ar-g-sm-frachtsiegel {
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 2;
  stroke-linecap: square;
}

.ar-g-sm-nagel {
  stroke: var(--ar-kreide-2);
  stroke-width: 4;
  stroke-linecap: round;
}

.ar-g-sm-splitter {
  fill: var(--ar-sm-holz-hoch);
  stroke: var(--ar-noir);
  stroke-width: 1.5;
  stroke-linejoin: miter;
}

.ar-g-sm-eisen {
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 9;
  stroke-linecap: square;
}

.ar-g-sm-klaue {
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 8;
  stroke-linecap: round;
}

.ar-g-sm-kerbe {
  fill: none;
  stroke: var(--ar-noir);
  stroke-width: 3;
  stroke-linecap: square;
}

/* Die Laderampe: Bohlen, ihre Fugen, die Stahlkante vorn und die Stapel, die links und rechts darauf stehen. */
.ar-g-sm-bohlen {
  fill: var(--ar-sm-bohle);
}

.ar-g-sm-bohlenfuge {
  fill: none;
  stroke: var(--ar-noir);
  stroke-width: 2;
}

.ar-g-sm-stapel {
  fill: var(--ar-sm-holz-tief);
  stroke: var(--ar-noir);
  stroke-width: 2;
}

.ar-g-sm-halle {
  fill: var(--ar-sm-halle);
}

.ar-g-sm-kante {
  stroke: var(--ar-funke);
  stroke-width: 3;
}

/* ------------------------------------------------------------------ Umschläge */

.ar-sm__umschlaege {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Der Beschnitt stand hier für den Zollstempel, der quer über der Zeile lag — den gibt es nicht mehr. Er bleibt, weil
 * eine Zeile mit Bild, Zahl und Fracht nichts über ihre Kante hinausschieben soll.
 */
.ar-sm__umschlag {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

/* Der Zuschlag steht in Senf und rückt vor. */
.ar-sm__umschlag[data-ar-sm-kauf] {
  border-color: var(--ar-funke);
  box-shadow: inset 4px 0 0 0 var(--ar-funke);
}

.ar-sm__umschlag[data-ar-sm-weg] {
  opacity: 0.55;
}

.ar-sm__marke {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
}

.ar-sm__umschlag-bild {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
}

.ar-sm__umschlag-zahl {
  min-width: 2ch;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  hyphens: none;
}

/*
 * Ein abgegebener Umschlag liegt auf dem Tisch: Senfkante UND ein abgehaktes Kästchen statt des Fragezeichens. Ohne
 * das sah der Tisch drei verschlossene Umschläge und wusste nicht, auf wen er noch wartet — und genau das ist die
 * eine Auskunft, die eine verdeckte Auktion offen geben MUSS.
 */
.ar-sm__umschlag[data-ar-sm-liegt] {
  border-color: var(--ar-funke);
}

/*
 * DAS PETSCHAFT GEHT IN VIER HARTEN BILDERN INS WACHS und ist danach weg. Kein Übergang, kein Nachwippen — was sich in
 * diesem Haus bewegt, springt. Es bleibt dabei innerhalb der Zeile: Die trägt `overflow: hidden`, und ein Stempel, der
 * von weit oben käme, wäre auf halbem Weg abgeschnitten.
 *
 * Die 2,3rem links sind das Polster der Zeile, die Marke und ihre Fuge: Darunter liegt das Bild des Umschlags, und
 * genau darüber gehört der Stempel.
 */
.ar-sm__petschaft {
  position: absolute;
  left: 2.3rem;
  width: 1.9rem;
  height: 1.9rem;
  pointer-events: none;
  animation: ar-sm-siegeln calc(4 * var(--ar-bild)) step-end both;
}

@keyframes ar-sm-siegeln {
  0% { scale: 1.35; translate: 0 -20%; }
  25% { scale: 1.18; translate: 0 -10%; }
  50% { scale: 1.06; translate: 0 -4%; }
  75% { scale: 1; translate: 0 0; }
  100% { opacity: 0; }
}

.ar-sm__haken {
  width: 1.1rem;
  height: 1.1rem;
}

/*
 * DIE FRACHT AM RECHTEN RAND — MIT MARKE UND SUMME. Hier stand „11 · 4“ und sonst nichts: keine Beschriftung, keine
 * Einheit, keine Summe. Der Playtest hat es als „kryptische Zahlen“ gemeldet, und zu Recht — der Mittelpunkt las
 * sich als Bindestrich, und wonach am Ende gewertet wird (die SUMME), stand nirgends. Jetzt steht die Summe groß,
 * die Einzelkisten klein darunter, und darüber das Wort.
 */
.ar-sm__fracht {
  display: grid;
  justify-items: end;
  margin-left: auto;
  gap: 0.05rem;
  color: var(--ar-kreide-2);
  text-align: right;
}

.ar-sm__fracht-marke {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.ar-sm__fracht-summe {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  hyphens: none;
}

.ar-sm__fracht-teile {
  font-family: var(--ar-schrift-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  hyphens: none;
}

/*
 * DER ZUSCHLAG AM UMSCHLAG. Wer die Kiste bekommt, trug nur eine Senfkante; bei Gleichstand stand die Regel als
 * Fließtext unter der Rampe, und im Playtest war „was passiert bei Gleichstand?“ die offene Frage. Jetzt steht das
 * Wort am Umschlag — und wo geteilt wurde, steht es als eigenes, lauteres Wort mit dem Anteil daneben.
 */
.ar-sm__zuschlag {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  padding: 0.15rem 0.4rem;
  border: 2px solid var(--ar-funke);
  color: var(--ar-funke);
  text-align: center;
}

.ar-sm__zuschlag[data-ar-sm-art='geteilt'] {
  border-style: dashed;
  border-color: var(--ar-blau);
  color: var(--ar-blau);
}

.ar-sm__zuschlag-wort {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ar-sm__zuschlag-anteil {
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  hyphens: none;
}

.ar-g-sm-umschlag {
  fill: var(--ar-sm-papier);
  stroke: var(--ar-kreide-2);
  stroke-width: 3;
}

.ar-g-sm-lasche {
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 3;
}

/* Das Siegelwachs samt der Prägung, die hineingedrückt ist. */
.ar-g-sm-wachs {
  fill: var(--ar-sm-wachs);
  stroke: var(--ar-noir);
  stroke-width: 2;
  stroke-linejoin: miter;
}

.ar-g-sm-praegung {
  fill: none;
  stroke: var(--ar-noir);
  stroke-width: 2.5;
  stroke-linecap: square;
}

/* Das Petschaft: ein hölzerner Griff, eine Zwinge aus Messing und die Platte, die ins Wachs geht. */
.ar-g-sm-petschaft-griff {
  fill: var(--ar-sm-holz-hoch);
  stroke: var(--ar-noir);
  stroke-width: 2.5;
  stroke-linejoin: miter;
}

.ar-g-sm-petschaft-zwinge,
.ar-g-sm-petschaft-platte {
  fill: var(--ar-kreide-2);
  stroke: var(--ar-noir);
  stroke-width: 2.5;
}

.ar-g-sm-blatt {
  fill: var(--ar-kreide);
  stroke: var(--ar-noir);
  stroke-width: 2;
}

.ar-g-sm-schein {
  fill: var(--ar-sm-papier);
  stroke: var(--ar-kreide-2);
  stroke-width: 2;
}

/* Der Schein am Bargeld des Tableaus: Papier mit Rosette, gezeichnet gegen das dunkle Feld. */
.ar-g-sm-scheinblatt {
  fill: var(--ar-sm-papier);
  stroke: var(--ar-noir);
  stroke-width: 3;
}

.ar-g-sm-scheinlinie {
  stroke: var(--ar-noir);
  stroke-width: 2;
}

.ar-g-sm-rosette {
  fill: none;
  stroke: var(--ar-noir);
  stroke-width: 3;
}

/* ------------------------------------------------------------------ Befund */

.ar-sm__befund {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ Bank */

.ar-sm__bank {
  container: ar-sm-bank / inline-size;
  display: grid;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

/*
 * DIE BUDGETZEILE STEHT ÜBER DEM REGLER. Wer hier alles setzt, hat für die folgenden Kisten nichts mehr — das steht als
 * Kasten vor dem Gebot und nicht erst in der Regel. Drei Zeilen: welche Auktion, wie viel Bargeld noch für alle bleibt
 * und, nur bei einem Gebot über der Hälfte, der Satz, der es sagt. In einer schmalen Bank stehen sie untereinander, ab
 * 26 Geviert Bankbreite die ersten beiden in einer Zeile — gefragt wird die Bank und nicht das Fenster, denn auf dem
 * Schreibtisch steht sie in einer Spalte. Die Senfkante links trägt nichts allein: Die Auskunft steht als Wort da.
 *
 * DER SATZ BELEGT SEINE ZEILE IMMER UND BRICHT NIE UM. Er kommt und geht, während der Daumen am Regler zieht; hinge die
 * Höhe daran, spränge der Regler unter dem Daumen weg. Er schrumpft deshalb mit dem Fenster, statt in zwei Zeilen zu
 * brechen (das Fenster als Maß und nicht die Bank, weil `clamp` nur Fenster kennt), und schneidet als Rückfall mit
 * Auslassungspunkten — dieselbe Regel wie die Zugzeile des Rahmens.
 */
.ar-sm__budget {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0.35rem 0.6rem;
  border: 2px solid var(--ar-kante-griff);
  border-left: var(--ar-farbkante) solid var(--ar-funke);
  background: var(--ar-noir);
  font-size: 0.85rem;
  line-height: 1.3;
}

.ar-sm__budget[hidden] {
  display: none;
}

.ar-sm__budget-auktion {
  color: var(--ar-kreide-2);
  font-weight: 600;
}

.ar-sm__budget-rest {
  color: var(--ar-kreide);
  font-weight: 700;
}

.ar-sm__budget-halb {
  min-height: 1.3em;
  overflow: hidden;
  color: var(--ar-funke);
  font-size: clamp(0.68rem, 3.2vw, 0.85rem);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container ar-sm-bank (min-width: 26rem) {
  .ar-sm__budget {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .ar-sm__budget-halb {
    grid-column: 1 / -1;
  }
}

/*
 * Das Wort über dem Schieber. Darunter bleibt die Höhe des Hilfestreifchens frei, das über dem Schieber hängt („2 Gebot
 * wählen“); mehr Luft als die bekommt es nicht — es stand mit den Rändern eines Absatzes da, gut zwei Zeilen hoch, die
 * dem Pult auf dem Telefon unter dem Falz fehlten.
 */
.ar-sm__bank-kopf {
  margin: 0 0 0.3rem;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

/*
 * HIER STANDEN FÜNF SCHEINKNÖPFE UND EINE ZAHL VON 2,2 REM. „Nichts“, „+1“, „+5“, „+10“, „Alles“ — jeder brav
 * vierundvierzig Pixel breit, und zusammen eine zweite Bedienart für dieselbe Frage, die das Haus längst mit einem
 * Schieber beantwortet. Was hier bleibt, ist die Kante um das Bauteil und der Sendeknopf darunter; der Rest steht
 * als `.ar-wetten` in css/arena.css und gilt für jedes Spiel mit freiem Einsatz.
 */
.ar-sm__senden {
  width: 100%;
}

/*
 * EIN KNOPF, DER GERADE NICHT GINGE, SIEHT AUCH SO AUS. Der Rahmen setzt auf `aria-disabled` nur den Mauszeiger —
 * wer seinen Umschlag abgegeben hat oder mitten in der Enthüllung steht, sah sonst eine Bank in voller Lautstärke.
 */
.ar-sm__senden[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;
}

/* Ein Griff, der nicht ankäme, ruckt einmal — ein Bild lang, ohne Übergang. */
.ar-sm__senden[data-ar-nein] {
  translate: 3px 0;
  border-color: var(--ar-rot);
}

/*
 * Wer wenig Bewegung bestellt hat, sieht dasselbe Pult ohne Ruck: Das Petschaft liegt seine paar Bilder lang auf dem
 * Umschlag, ohne hineinzufahren, und die Kiste steht einfach da, zu oder offen. Die Splitter fallen ganz weg — sie
 * tragen keine Auskunft, und brett.js zeichnet sie dort erst gar nicht.
 */
@media (prefers-reduced-motion: reduce) {
  .ar-sm__petschaft {
    animation: none;
  }
}

/* ------------------------------------------------------------------ Abrechnung */

/* Im Bild über der Abrechnung stehen dieselben Umschläge, offen und mit dem Zuschlag markiert. */
.ar-sm__umschlaege--abrechnung {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

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

/*
 * AUF DEM TELEFON STEHT ALLES UNTEREINANDER: oben die Kiste in Worten, darunter der Tisch, der Befund, die Bank und
 * zuletzt das Tableau. Beide Spalten lösen sich dafür auf (`display: contents`). Solange geboten wird, klebt die Bank
 * unten und deckt gut 250 Pixel; darüber stehen dann Wert und Name der Kiste und der ganze Tisch samt Schildern. Das
 * Tableau steht unter der Bank, weil eine klebende Bank sonst mitten durch seine drei Felder schnitte — sein Bargeld
 * nennt die Budgetzeile in der Bank, das Vermögen die Anzeigeleiste, und beides steht auf dem Schild des Platzes.
 *
 * DIE UMSCHLÄGE STEHEN DORT NUR FÜR DEN SCHIRMLESER. Was die Liste sagt, sagt auf dem Telefon der Tisch darüber: wer
 * versiegelt hat (sein Umschlag liegt), was geboten wurde (das Blatt im offenen Umschlag), wer den Zuschlag hat (Senfkante
 * und Haken, der Frachtbrief) und wie viel Fracht jeder hat (das Schild). Untereinander nahm sie zu viert gut 160 Pixel,
 * die dem Pult unter dem Falz fehlten. Gelesen wird sie weiter, Zeile für Zeile, samt Zuschlag und Fracht.
 */
@container ar-sm-mass (max-width: 39.99rem) {
  .ar-sm {
    gap: 0.4rem;
  }

  .ar-sm__links,
  .ar-sm__seite {
    display: contents;
  }

  .ar-sm__auslage {
    order: -2;
  }

  .ar-sm__buehne {
    order: -1;
  }

  .ar-sm__geld {
    order: 1;
  }

  .ar-sm__umschlaege {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ar-sm__auslage {
    padding-block: 0.4rem 0.2rem;
  }

  .ar-sm__wert-zahl {
    font-size: 2rem;
  }

  .ar-sm__kiste-name {
    font-size: 0.95rem;
  }

  .ar-sm__auktion {
    font-size: 0.72rem;
  }
}

/*
 * AUF DEM TELEFON NENNT DIE BUDGETZEILE NUR DAS GELD. Welche Auktion läuft, steht dort schon in der Kiste in Worten,
 * eine Handbreit darüber — dieselbe Zeile zweimal kostete das Pult eine Zeile Höhe, und die fehlte ihm unter dem Falz.
 * Aus demselben Grund rücken Polster und Fugen der Bank etwas zusammen.
 *
 * SOLANGE MAN BIETEN KANN, KLEBT DIE BANK ALS DOCK am unteren Rand (`.ar-dock`, gesetzt in brett.js). Ihr Polster ist
 * deshalb genau das des Docks und ihre Kante gleich breit: Beginnt sie zu kleben, wechseln nur Grund und Kantenfarbe,
 * und kein Pixel darunter rückt.
 *
 * UNTER 48REM HÖHE KLEBT SIE NICHT. Das Dock des Rahmens ist für eine Leiste gebaut, die Bank ist gut 250 Pixel hoch:
 * Auf 375 × 667 lag sie zu viert über dem Tisch, und wer bieten wollte, sah nicht mehr, worauf. Dort bleibt sie an ihrem
 * Platz und trägt nur den Ton des Docks.
 */
@media (max-width: 47.99rem) {
  .ar-sm__bank {
    gap: 0.3rem;
    padding: 0.45rem;
  }

  .ar-sm__budget {
    padding-block: 0.25rem;
  }

  .ar-sm__budget-auktion {
    display: none;
  }
}

@media (max-width: 47.99rem) and (max-height: 47.99rem) {
  .ar-brett .ar-sm__bank.ar-dock {
    position: static;
  }
}

/*
 * AB 40 GEVIERT BRETTBREITE STEHEN ZWEI SPALTEN: links der Tisch, darunter die Kiste in Worten und das Tableau, rechts
 * Umschläge, Befund und Bank. Die rechte Spalte nimmt höchstens zwei Fünftel und nie mehr als 25 Geviert; was übrig ist,
 * bekommt der Tisch. Er steht so breit wie seine Spalte und höchstens so hoch, dass Kiste in Worten und Tableau darunter
 * noch ins Fenster passen.
 */
@container ar-sm-mass (min-width: 40rem) {
  .ar-sm {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, min(25rem, 40%));
    align-items: start;
    gap: 0.75rem 1.25rem;
  }

  .ar-sm__buehne {
    justify-self: center;
    width: min(100%, (100svh - var(--ar-reserve) - var(--ar-hauskopf) - 11rem) * 1.4);
  }
}