/*
 * Schocken: die Anzeige mit dem Stock, der Stammtisch mit den Schildern der Plätze, das eigene Pult mit dem Dock, die
 * Mitte mit Vorleger und Wertung und die Rangleiste. Anzeigeleiste, Brettrand, Abzeichen und Tafel stehen als Rahmen des
 * Spielfelds in css/arena.css, die Bühne selbst ebenfalls (Die Tischbühne); hier steht nur, was diesem Brett gehört.
 *
 * NIE NUR EIN FARBTON: Wer dran ist, trägt eine Kreidekante um sein Schild und sitzt im Licht, wer gerettet ist, das Wort
 * „GERETTET“, wer gegangen ist, eine gestrichelte Kante und „WEG“, wer eine Hälfte verloren hat, das Wort „KNOLLE“, und
 * in der Wertung stehen „GEWINNT“ und „ZAHLT“ als Wort neben der Senf- und der Signalkante. Jede Tippfläche misst
 * mindestens 44 Pixel in beide Richtungen; die Bühne hat keine. Jede Regel auf der gemeinsamen Fläche hängt an
 * [data-ar-spiel='schocken'] oder an ar-sc.
 *
 * EIN RAUSGELEGTER WÜRFEL LIEGT IN DER ABLAGE: auf dem Tisch in der Ablage vor dem Platz, am eigenen Pult unter den
 * anderen, in „Wird behalten“, mit gestrichelter Kante, solange sie leer ist, und mit heller, sobald ein Würfel darin
 * liegt. Der Würfel wechselt dabei nur die Zeile des Rasters; er behält Spalte, Platz im Markup und Tippfläche, und die
 * Ablage hält ihre Höhe, damit die Knöpfe darunter beim Tippen nicht springen.
 *
 * DIE WÜRFEL BLEIBEN ECKIG. Rund sind nur die Bierdeckel auf dem Tisch, und die sind Gegenstände wie Jeton und Puck am
 * Craps-Tisch (README der Arena, Abschnitt 8, Ziffer 13).
 */

.ar-spielfeld[data-ar-spiel='schocken'] {
  --ar-brettbreite: min(34rem, 100vw - 2 * var(--ar-luft));
  --ar-einheit: calc(var(--ar-brettbreite) / 6);
}

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

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

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

/* Auf dem Schreibtisch nimmt das Brett die ganze Bühne: Anzeige, Tisch und Mitte links, das Pult rechts daneben. */
@media (min-width: 64rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='schocken'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/*
 * DIE FARBEN DER PAPPE STEHEN AUF :root UND NICHT AM BRETT. Das Sprite der Seite hängt im `<body>` und nicht im
 * Spielfeld; eine Farbe, die am Brett definiert wäre, fände dort nichts. Es ist dasselbe Vorgehen wie bei Filz und
 * Messing der Nachbartische.
 *
 * EIN BIERDECKEL IST NICHT SENF. Er stand in `--ar-funke`, und damit war er ein Jeton: dieselbe Farbe wie der Stock,
 * die Kante des Siegers und jedes Abzeichen. Pappe ist mattes Buff — 7,9:1 auf dem Brett, also lesbar, und trotzdem
 * kein Signal.
 */
:root {
  --ar-sc-pappe: #c9a86a;
  --ar-sc-pappe-tief: #8d7140;
  /* Die Prägung im Karton: eine Spur tiefer als die Kante, sonst verschwände die Ähre im Rand. */
  --ar-sc-praegung: #6f5729;
  /* Die Zipfel des Banners liegen hinter der Platte und müssen dunkler sein als der Senf darauf. */
  --ar-sc-band-tief: #a97d14;
}

/*
 * Außen um das Brett: Nach der Breite des BRETTS fragen alle Regeln darin, und ein Raster kann nicht nach seiner eigenen
 * fragen. Der Wagen misst die Außenkante, die Schwellen liegen deshalb um die Fugen höher als die Innenbreite, von der
 * die Kommentare sprechen.
 */
.ar-sc-mass {
  container: ar-sc-mass / inline-size;
}

.ar-sc {
  --ar-sc-luft: 0.5rem;
  /*
   * Was das Fenster diesem Brett lässt: die Reserve des Rahmens (Spielleiste, Präsenz, Anzeigeleiste, Brettrand), der
   * klebende Kopf des Hauses und die eigene Luft. Sie regelt allein die GRÖSSE DER WÜRFEL am Tisch — dieses Brett ist
   * eine Liste und kein Raster, seine Höhe ist sein Inhalt. Auf einem Telefon und im flachen Querformat stehen sie
   * deshalb am unteren Anschlag, auf dem Schreibtisch wachsen sie mit.
   */
  --ar-sc-hoehe: calc(100dvh - var(--ar-reserve) - var(--ar-hauskopf) - 2 * var(--ar-sc-luft));
  /* Fremde Becher sind zum Ansehen da, nicht zum Anfassen — trotzdem keine Krümel mehr: 25,6px war für ein Auge mit
     Pips kaum zu lesen. Der eigene Becher bleibt größer (data-ar-sc-gross unten), er bleibt der Blickfang. */
  --ar-sc-wuerfel: clamp(1.25rem, calc(var(--ar-sc-hoehe) / 20), 2.25rem);
  /* Wie tief ein rausgelegter Würfel vor den Becher fällt. */
  --ar-sc-fall: 0.4rem;
  --ar-sc-mitte: 7rem;
  display: grid;
  gap: 0.5rem;
  padding: var(--ar-sc-luft);
}

/* ------------------------------------------------------------ Das Ziel */

/*
 * DIE FESTE ZEILE ÜBER DEM TISCH sagt in einem Satz, worum es geht — und dass es das umgekehrte ist: Hier will niemand
 * Deckel. „Ziel:“ trägt der Rahmen (`copy.zielWort`); die Senfkante links ist ein zweiter Träger neben dem Wort. Der
 * Satz steht immer da und ändert sich nie, seine Höhe damit auch nicht.
 */
.ar-sc__ziel {
  min-width: 0;
  margin: 0;
  padding: 0.3rem 0.55rem;
  border: 2px solid var(--ar-kante);
  border-left: var(--ar-farbkante) solid var(--ar-funke);
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font-size: 0.8rem;
  line-height: 1.3;
  text-wrap: balance;
}

.ar-sc__ziel-wort {
  color: var(--ar-funke);
}

/* ------------------------------------------------------------ Die Anzeige */

.ar-sc__anzeige {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem 0.8rem;
  padding: 0.35rem 0.55rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

.ar-sc__lage,
.ar-sc__stock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
}

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

/*
 * Hälfte 1, Hälfte 2, Finale — als Wort, und je weiter die Runde ist, desto lauter. Die Kante ist ein ZWEITER Träger
 * neben dem Wort und nicht der einzige: Wer die Farbe nicht sieht, liest „Finale“.
 */
.ar-sc__halbzeit {
  padding: 0 0.35rem;
  border: 1px solid var(--ar-kante-griff);
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
}

.ar-sc__halbzeit[data-ar-sc-halbzeit='2'] {
  border-color: var(--ar-kreide-2);
  color: var(--ar-kreide);
}

.ar-sc__halbzeit[data-ar-sc-halbzeit='3'] {
  border-color: var(--ar-funke);
  color: var(--ar-funke);
}

/*
 * WOHER DIE DECKEL KOMMEN: „Stock“ leise wie die Hälfte daneben, „Austragen“ in Senf — dort kehrt sich die Regel um, und
 * Deckel gehen vom Gewinner weg statt aus der Mitte. Das Wort trägt die Auskunft, die Kante ist ein zweiter Träger.
 */
.ar-sc__woher {
  padding: 0 0.35rem;
  border: 1px solid var(--ar-kante-griff);
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
}

.ar-sc__woher[data-ar-sc-woher='austragen'] {
  border-color: var(--ar-funke);
  color: var(--ar-funke);
}

.ar-sc__stock-wort {
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
}

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

/* ------------------------------------------------------------ Die Rangleiste */

/*
 * DAS SPICKBLATT AM TRESEN. Fünf Klassen, in der Ordnung, in der der Tisch sie zählt, jede mit ihrer Nummer und ihrem
 * Muster. Sie steht die ganze Runde da und wechselt nichts als die Hervorhebung — wer zum ersten Mal schockt, hat
 * sonst fünf Namen im Kopf zu behalten, von denen zwei fast gleich heißen.
 *
 * SIE WÄCHST NICHT MIT: Auf 375 Pixeln stehen die Klassen in zwei Zeilen zu 0,64 rem, und mehr Platz bekommen sie
 * nicht. Was darunter steht, ist der Tisch, auf den alle schauen.
 */
.ar-sc__raenge {
  display: grid;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem 0.4rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-sc__raenge-kopf {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
}

.ar-sc__rangliste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-sc__rang {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--ar-kante);
  color: var(--ar-kreide-2);
  font-size: 0.64rem;
  hyphens: none;
  overflow-wrap: anywhere;
}

.ar-sc__rang-nr {
  color: var(--ar-kreide-2);
  font-variant-numeric: tabular-nums;
}

/* Was die eigene Hand gerade IST: Senfkante und Senfschrift, und darunter steht dasselbe noch einmal als Wort. */
.ar-sc__rang[data-ar-sc-hier] {
  border-color: var(--ar-funke);
  background: var(--ar-noir-3);
}

.ar-sc__rang[data-ar-sc-hier] .ar-sc__rang-nr,
.ar-sc__rang[data-ar-sc-hier] .ar-sc__badge-wort {
  color: var(--ar-funke);
}

.ar-sc__haelt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.4rem;
  min-height: 1.2rem;
  margin: 0;
}

.ar-sc__haelt-wort {
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
}

/* ------------------------------------------------------------ Das Blatt als Abzeichen */

/*
 * EIN BLATT IST EIN ABZEICHEN UND KEIN TEXTSCHNIPSEL. Name in Plakatschrift, daneben die Augen als echte Würfel —
 * dieselbe Zeichnung wie im Becher, nur klein. Vorher stand an vier Stellen „Schock 4“, „Straße 4-3-2“, „652“, und
 * jede setzte es ein bisschen anders; gemeinsam war ihnen nur, dass niemand die Augen sah.
 *
 * DIE GRÖSSE DER AUGEN STEHT ALS EIGENSCHAFT DA. Am Tisch sind sie klein, am Pult groß, in der Rangleiste am
 * kleinsten — und alle drei nehmen dieselbe Regel, nicht drei eigene.
 */
.ar-sc__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--ar-kante-griff);
  background: var(--ar-noir-3);
  hyphens: none;
}

.ar-sc__badge-wort {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.ar-sc__badge-augen {
  display: inline-flex;
  flex: none;
  gap: 0.12rem;
}

.ar-sc__badge-auge {
  display: block;
  width: var(--ar-sc-badge-auge, 0.95rem);
  height: var(--ar-sc-badge-auge, 0.95rem);
}

/* Der Schock Out bewegt als einziges Blatt alles, was da ist: Er trägt als einziges die Senfkante. */
.ar-sc__badge[data-ar-sc-art='schock_out'] {
  border-color: var(--ar-funke);
}

.ar-sc__badge[data-ar-sc-art='schock_out'] > .ar-sc__badge-wort {
  color: var(--ar-funke);
}

/* Wo bei „Du hältst“ noch kein Blatt liegt, steht der Satz an derselben Stelle. */
.ar-sc__badge-leer {
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
}

/* In der Rangleiste steht das Abzeichen ohne eigenen Kasten: Der Kasten ist die Zeile darum. */
.ar-sc__badge--rang {
  --ar-sc-badge-auge: 0.78rem;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
}

.ar-sc__badge--rang > .ar-sc__badge-wort {
  font-size: 0.68rem;
}

.ar-sc__badge--haelt {
  --ar-sc-badge-auge: 1.05rem;
}

/* ------------------------------------------------------------ Die Deckelstapel */

.ar-sc__stapel {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Das Fach hält seine Maße, auch wenn nichts darin liegt: eine gestrichelte Ablage statt eines Lochs in der Zeile. */
.ar-sc__stapel-fach {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.ar-sc__stapel[data-ar-leer] > .ar-sc__stapel-fach {
  border: 1px dashed var(--ar-kante-griff);
}

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

.ar-sc__stapel-zahl {
  min-width: 1ch;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ar-sc__stapel[data-ar-leer] > .ar-sc__stapel-zahl {
  color: var(--ar-kreide-2);
}

.ar-sc__stapel--stock > .ar-sc__stapel-fach {
  width: 2rem;
  height: 2rem;
}

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

/*
 * DER TISCH IST DIE BÜHNE: Becher, Würfel, Ablagen und Deckel stehen auf dem gemalten Stammtisch (js/kulisse.js), und
 * über ihm liegen die Schilder der Plätze. Hochkant steht er fast quadratisch, der Tisch läuft links und rechts aus dem
 * Bild; auf dem Schreibtisch steht er quer und ganz (unten bei den Breiten).
 */
.ar-sc__buehne {
  position: relative;
}

.ar-sc__buehne > .ar-kulisse {
  width: 100%;
  aspect-ratio: 8 / 7;
  border: 2px solid var(--ar-kante);
}

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

/*
 * DIE SCHILDER DER PLÄTZE liegen je eines an seinem Platz (brett.js rechnet die Stelle aus der Bühne): Marke und Name,
 * darunter der Deckelstapel mit seiner Zahl und die Marken des Platzes, und wo Platz ist, das Blatt in Klartext. Ein
 * Schild ist eine Fläche in der Palette der Arena auf dem Bild, und sein Text hält dort seinen Kontrast. Wer dran ist,
 * trägt eine Kreidekante; wer gerettet ist, eine helle, wer gegangen ist, eine gestrichelte.
 */
.ar-sc__plaetze {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-sc__platz {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.45rem;
  max-width: 34%;
  padding: 0.2rem 0.45rem 0.25rem 0.35rem;
  border: 1px solid var(--ar-kante-griff);
  border-left: var(--ar-farbkante) solid var(--ar-sc-farbe);
  background: var(--ar-noir-2);
  font-size: 0.8rem;
  line-height: 1.2;
  translate: -50% -50%;
}

/* Das eigene Schild steht unten auf der Holzkante und darf breiter sein; hochkant teilen sich drei die ferne Kante. */
.ar-sc__platz[data-ar-sc-seite='unten'] {
  max-width: 62%;
}

.ar-sc__platz[data-ar-sc-seite^='fern'] {
  max-width: 31%;
}

.ar-sc__platz[data-ar-farbe='rot'] { --ar-sc-farbe: var(--ar-rot); }
.ar-sc__platz[data-ar-farbe='blau'] { --ar-sc-farbe: var(--ar-blau); }
.ar-sc__platz[data-ar-farbe='gelb'] { --ar-sc-farbe: var(--ar-gelb); }
.ar-sc__platz[data-ar-farbe='gruen'] { --ar-sc-farbe: var(--ar-gruen); }

.ar-sc__platz[data-ar-dran] {
  border-color: var(--ar-kreide);
  border-left-color: var(--ar-sc-farbe);
  outline: 2px solid var(--ar-kreide);
  outline-offset: 1px;
}

/* Gerettet ist die gute Nachricht dieses Spiels: heller Rahmen, nicht blasser. Nur wer gegangen ist, tritt zurück. */
.ar-sc__platz[data-ar-sc-stand='frei'] {
  border-color: var(--ar-kreide-2);
  border-left-color: var(--ar-sc-farbe);
}

.ar-sc__platz[data-ar-sc-stand='weg'] {
  border-style: dashed;
  border-left-style: dashed;
  opacity: 0.72;
}

.ar-sc__platz[data-ar-sc-rolle='sieger'] {
  border-color: var(--ar-funke);
  border-left-color: var(--ar-sc-farbe);
  outline: 2px solid var(--ar-funke);
  outline-offset: 1px;
}

.ar-sc__platz[data-ar-sc-rolle='verlierer'] {
  border-color: var(--ar-rot);
  border-left-color: var(--ar-sc-farbe);
  outline: 2px solid var(--ar-rot);
  outline-offset: 1px;
}

.ar-sc__stand-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.3rem;
  margin: 0;
}

.ar-sc__stapel--platz > .ar-sc__stapel-fach {
  width: 1.15rem;
  height: 1.15rem;
}

.ar-sc__stapel--platz > .ar-sc__stapel-zahl {
  font-size: 0.9rem;
}

.ar-sc__platz > .ar-sc__klar {
  flex-basis: 100%;
  font-size: 0.72rem;
}

/*
 * DIE ABLAGE AUF DEM TISCH: eine flache Fläche vor jedem Platz, die die Nacht der Bühne trägt und eine Messingkante —
 * dort liegen die rausgelegten Würfel, gerade nebeneinander. Sie steht auch leer da, damit man weiß, wohin ein Würfel
 * geht, bevor er dort liegt.
 */
.ar-kulisse__platte[data-ar-ku-art='ablage'] {
  border: max(1px, calc(var(--ar-ku-wuerfel) * 0.035)) solid var(--ar-ku-messing);
  background: var(--ar-ku-nacht);
}

/* Die Kante eines Bierdeckels ist die geschnittene Pappe, eine Spur tiefer als seine Fläche (grafik.js). */
.ar-kulisse__scheibe-kante[data-ar-ku-art='deckel'] {
  background: var(--ar-sc-pappe-tief);
  box-shadow: inset 0 0 0 max(1px, calc(var(--ar-ku-wuerfel) * 0.025)) var(--ar-noir);
}

.ar-sc__name-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  margin: 0;
  min-width: 0;
}

.ar-sc__marke {
  display: block;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.ar-sc__name {
  min-width: 0;
  overflow: hidden;
  color: var(--ar-kreide);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ein Schild am Platz, wie in jedem anderen Spiel: Versalien bleiben hier, weil das Kästchen ein Schild ist und kein Satz. */
.ar-sc__zusatz {
  flex: none;
  padding: 0 0.3rem;
  border: 1px solid var(--ar-kante-griff);
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
  text-transform: uppercase;
}

/* Wer frei ist, sitzt diese Hälfte aus: Das Schild leuchtet wie GERETTET, der Rahmen bleibt, denn es geht weiter. */
.ar-sc__platz[data-ar-sc-rolle='sieger'] .ar-sc__zusatz,
.ar-sc__platz[data-ar-sc-stand='frei'] .ar-sc__zusatz,
.ar-sc__platz[data-ar-sc-stand='schneider'] .ar-sc__zusatz {
  border-color: var(--ar-kreide);
  color: var(--ar-kreide);
}

/*
 * DER ÜBERSETZER: das Blatt in Klartext samt Stärke, auf dem Schild und am eigenen Pult. Wo noch kein Blatt liegt,
 * steht an derselben Stelle ein leiserer Satz, bei einem blinden Becher in Senf, dass er verdeckt liegt. Ein Schock Out
 * trägt Senf und Fettdruck, aber nie als einziger Träger: „Höchster Rang!“ steht im Satz.
 */
.ar-sc__klar {
  min-width: 0;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  hyphens: none;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ar-sc__klar[data-ar-sc-art] {
  color: var(--ar-kreide);
}

.ar-sc__klar[data-ar-sc-art='schock_out'] {
  color: var(--ar-funke);
  font-weight: 700;
}

.ar-sc__klar[data-ar-sc-blind] {
  color: var(--ar-funke);
}

/* ------------------------------------------------------------ Becher und Würfel */

.ar-sc__bank {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
}

.ar-sc__becher {
  display: block;
  flex: none;
  width: calc(var(--ar-sc-wuerfel) * 1.4);
  height: calc(var(--ar-sc-wuerfel) * 1.4);
}

/*
 * Die drei Fächer und darunter die Platte. Die Reihe ist eine Zeile hoch und trotzdem höher als ein Würfel: Was im
 * Becher liegt, steht oben und hat die Luft unter sich, was rausgelegt ist, hat sie über sich und liegt auf der Kante.
 *
 * GEMESSEN WIRD DAS AN DER LUFT UND NICHT AN EINER ZEILENHÖHE. Beide Lagen tragen dieselben Ränder, also ist die Zeile
 * gleich hoch, ob etwas rausgelegt ist oder nicht — eine gerechnete Höhe müsste Rand, Polster und Ziffer nachrechnen
 * und ginge beim nächsten Pixel schief.
 */
.ar-sc__reihe {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: start;
  gap: 0 0.2rem;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--ar-kante-griff);
}

.ar-sc__wuerfel {
  display: grid;
  justify-items: center;
  gap: 1px;
  margin-bottom: var(--ar-sc-fall);
  padding: 1px;
  border: 2px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
}

.ar-sc__wuerfel[data-ar-sc-platz='0'] { grid-column: 1; }
.ar-sc__wuerfel[data-ar-sc-platz='1'] { grid-column: 2; }
.ar-sc__wuerfel[data-ar-sc-platz='2'] { grid-column: 3; }

/* Rausgelegt: liegt unten auf der Platte und hat seine eigene Kante — die Lage allein wäre zu leise. */
.ar-sc__wuerfel[data-ar-sc-fest] {
  margin-top: var(--ar-sc-fall);
  margin-bottom: 0;
  border-color: var(--ar-kreide);
  background: var(--ar-noir-3);
}

/*
 * EINE EINS IM BECHER TRÄGT GOLD. Sie ist die Währung dieses Spiels — zwei davon sind ein Schock, drei der ganze
 * Stock —, und wer sie sucht, soll sie finden, ohne drei Würfel zu vergleichen. Die Kante ist ein ZWEITER Träger neben
 * der Größe des Auges (grafik.js: die Eins ist größer als jedes andere) und neben der Ziffer darunter.
 *
 * SIE SAGT NICHT MEHR, WAS GEHT, SONDERN WAS ZÄHLT. Seit dem Kneipenschliff lässt sich jeder Würfel rauslegen und
 * wieder zurücknehmen; die Goldkante wäre als Erlaubnis gelesen eine Lüge und ist als Währung gemeint.
 */
.ar-sc__wuerfel[data-ar-sc-eins] {
  border-color: var(--ar-funke);
}

/* Der dritte Wurf liegt darunter: kein Auge, nur das Fragezeichen, und die Kante steht gestrichelt. */
.ar-sc__wuerfel[data-ar-sc-verdeckt] > .ar-sc__leer {
  display: grid;
  place-items: center;
  border-style: solid;
  border-color: var(--ar-kante-griff);
}

.ar-sc__frage {
  display: block;
  width: 92%;
  height: 92%;
}

.ar-sc__auge {
  display: block;
  width: var(--ar-sc-wuerfel);
  height: var(--ar-sc-wuerfel);
}

/* Die Augenzahl noch einmal als Ziffer: Die Größe der Eins ist ein zweiter Träger und nicht der einzige. */
.ar-sc__zahl {
  color: var(--ar-kreide-2);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Ein leeres Fach: Der Würfel ist im Becher. */
.ar-sc__leer {
  display: block;
  width: var(--ar-sc-wuerfel);
  height: var(--ar-sc-wuerfel);
  border: 1px dashed var(--ar-kante);
}

/*
 * GESTELLT WIRD AM ATTRIBUT UND NICHT AM MARKUP. Leeres Fach, Auge und Ziffer stehen alle drei im Dokument; welches
 * man sieht, sagt `data-ar-sc-wert`. Nur so lässt sich ein Würfel am eigenen Pult nachstellen, ohne ihn neu zu
 * schreiben — und nur dann behält der angetippte Würfel seinen Fokus, statt ihn an das Dokument zu verlieren.
 */
.ar-sc__wuerfel:not([data-ar-sc-wert='0']) > .ar-sc__leer,
.ar-sc__wuerfel[data-ar-sc-wert='0'] > .ar-sc__auge,
.ar-sc__wuerfel[data-ar-sc-wert='0'] > .ar-sc__zahl {
  display: none;
}

.ar-sc__wuerfel:not([data-ar-sc-verdeckt]) .ar-sc__frage {
  display: none;
}

/*
 * Am eigenen Pult sind die Würfel Griffe und messen ihre 44 Pixel in beide Richtungen — der Würfel selbst ist mit
 * 3,75rem (60px) größer als diese Tippfläche: Ein Würfel, der wie ein Krümel unter dem Daumen liegt, sieht nicht
 * nach einem Becherstoß aus, gleich wie sicher er sich treffen lässt.
 */
.ar-sc__bank[data-ar-sc-gross] {
  --ar-sc-wuerfel: 3.75rem;
  /* Die Würfel stehen in der ersten Zeile, die Ablage in der zweiten; deren Beschriftung hängt über ihrer Kante. */
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: end;
  gap: 0.65rem 0.2rem;
  /* Luft für das Mini-Badge der ersten Runde, das über der oberen Kante hängt. */
  margin-top: 0.3rem;
}

/*
 * AUF EINEM SCHMALEN TELEFON PASST DIE BANK NICHT MEHR IN DAS PULT, wenn die Würfel 60 Pixel messen: drei Würfel mit
 * Rand und die Fugen brauchen drei Würfelbreiten und rund 80 Pixel Luft.
 * Die Spur des ganzen Bretts wüchse dann mit und schöbe jede Zeile über den Rand — und die Ablage zeigte ihre Kante
 * gegen die des Pults. Der Würfel gibt deshalb nach, aber nie unter 2,5rem: Seine Tippfläche bleibt über 44 Pixeln.
 */
@supports (width: 1cqw) {
  .ar-sc__bank[data-ar-sc-gross] {
    --ar-sc-wuerfel: clamp(2.5rem, calc((100cqw - 82px) / 3), 3.75rem);
  }
}

.ar-sc__wuerfel--griff {
  min-width: 44px;
  min-height: 44px;
  padding: 3px;
  border-color: var(--ar-kante-griff);
  cursor: pointer;
}

.ar-sc__wuerfel--griff[aria-disabled='true'] {
  border-color: var(--ar-kante);
  cursor: default;
}

.ar-sc__wuerfel--griff[data-ar-sc-fest] {
  border-color: var(--ar-kreide);
}

.ar-sc__wuerfel--griff:not([aria-disabled='true']):hover {
  border-color: var(--ar-funke);
}

/*
 * DIE ABLAGE „WIRD BEHALTEN“. Die drei Würfel nebeneinander; wer rausgelegt ist, rückt in die zweite Zeile und behält
 * seine Spalte. Die Ablage steht immer da und hält ihre Höhe — die Würfelhöhe samt Rand und Ziffer
 * (2,25rem) —, damit die Knöpfe darunter beim Tippen nicht wandern. Leer ist ihre Kante gestrichelt, mit einem Würfel darin
 * hell und durchgezogen: die Lage allein wäre zu leise, und die Farbe trägt hier nie allein.
 *
 * SIE NIMMT KEINEN TIPP AN. Sie liegt über den Zellen der rausgelegten Würfel und würde ihnen sonst den Griff wegnehmen;
 * der Griff bleibt am Würfel, und dessen Tippfläche ändert sich mit der Zeile nicht.
 */
.ar-sc__bank[data-ar-sc-gross] > .ar-sc__wuerfel {
  grid-row: 1;
  margin: 0;
}

.ar-sc__bank[data-ar-sc-gross] > .ar-sc__wuerfel[data-ar-sc-platz='0'] { grid-column: 1; }
.ar-sc__bank[data-ar-sc-gross] > .ar-sc__wuerfel[data-ar-sc-platz='1'] { grid-column: 2; }
.ar-sc__bank[data-ar-sc-gross] > .ar-sc__wuerfel[data-ar-sc-platz='2'] { grid-column: 3; }

.ar-sc__bank[data-ar-sc-gross] > .ar-sc__wuerfel[data-ar-sc-fest] {
  grid-row: 2;
  margin: 0.6rem 0 0.3rem;
}

.ar-sc__ablage {
  position: relative;
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: stretch;
  min-height: calc(var(--ar-sc-wuerfel) + 2.25rem);
  border: 2px dashed var(--ar-kante-griff);
  pointer-events: none;
}

.ar-sc__ablage-wort {
  position: absolute;
  top: -0.55rem;
  left: 0.5rem;
  padding: 0 0.35rem;
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
  line-height: 1.1;
  white-space: nowrap;
}

.ar-sc__bank[data-ar-sc-gross]:has(> [data-ar-sc-fest]) > .ar-sc__ablage {
  border-style: solid;
  border-color: var(--ar-kreide);
}

.ar-sc__bank[data-ar-sc-gross]:has(> [data-ar-sc-fest]) .ar-sc__ablage-wort {
  color: var(--ar-kreide);
}

/* Ein Griff, der nicht ankommt, bekommt sein Kreuz — dasselbe Zeichen wie am Kartentisch. */
.ar-sc__wuerfel--griff[data-ar-nein],
.ar-sc__knopf[data-ar-nein] {
  outline: 3px solid var(--ar-kreide);
  outline-offset: 1px;
}

/* ------------------------------------------------------------ Die Mitte */

/*
 * Vorleger und Zug, in der Wertung die Zählung. Der Kasten hält seine Höhe über beide Lagen: Darunter steht das Pult,
 * und ein Kasten, der wächst, schöbe die Würfel unter dem Daumen weg.
 */
.ar-sc__mitte {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.2rem;
  min-height: var(--ar-sc-mitte);
  padding: 0.55rem 0.7rem;
  border: 2px solid var(--ar-kreide);
  background: var(--ar-noir);
  text-align: center;
}

.ar-sc__mitte[data-ar-sc-lage='wertung'] {
  border-color: var(--ar-funke);
}

.ar-sc__mitte-marke {
  margin: 0;
  color: var(--ar-funke);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.ar-sc__mitte-satz {
  margin: 0;
  color: var(--ar-kreide);
  text-wrap: balance;
}

.ar-sc__wer {
  min-height: 2.4rem;
  margin: 0;
  color: var(--ar-kreide);
  font-size: 0.88rem;
  text-wrap: balance;
}

/*
 * DIE TISCHFÜHRUNG: zwei Plaketten, wer führt und wer zahlen müsste. Beide tragen dieselben Kanten wie die Plätze in
 * der Wertung — Senf für den Sieger, Signal für den Zahler —, damit dasselbe Ereignis überall gleich aussieht. Die
 * Zeile hält ihre Höhe: Sie wechselt bei jedem Wurf, und darunter steht die Zeile, wer am Becher ist.
 */
.ar-sc__fuehrung {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 0.4rem;
  min-height: 1.7rem;
  margin: 0;
}

.ar-sc__fuehrung-teil {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--ar-kante-griff);
  border-left: var(--ar-farbkante) solid var(--ar-sc-fuehrung-farbe, var(--ar-kante-griff));
}

.ar-sc__fuehrung-teil[data-ar-farbe='rot'] { --ar-sc-fuehrung-farbe: var(--ar-rot); }
.ar-sc__fuehrung-teil[data-ar-farbe='blau'] { --ar-sc-fuehrung-farbe: var(--ar-blau); }
.ar-sc__fuehrung-teil[data-ar-farbe='gelb'] { --ar-sc-fuehrung-farbe: var(--ar-gelb); }
.ar-sc__fuehrung-teil[data-ar-farbe='gruen'] { --ar-sc-fuehrung-farbe: var(--ar-gruen); }

.ar-sc__fuehrung-teil[data-ar-sc-rolle='sieger']:not([data-ar-leer]) {
  border-color: var(--ar-funke);
  border-left-color: var(--ar-sc-fuehrung-farbe);
}

.ar-sc__fuehrung-teil[data-ar-sc-rolle='verlierer']:not([data-ar-leer]) {
  border-color: var(--ar-rot);
  border-left-color: var(--ar-sc-fuehrung-farbe);
}

.ar-sc__fuehrung-wort {
  color: var(--ar-kreide-2);
  font-size: 0.66rem;
}

.ar-sc__fuehrung-name {
  max-width: 9ch;
  overflow: hidden;
  color: var(--ar-kreide);
  font-size: 0.85rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wie viele Becher noch blind stehen: Ohne diese Angabe läse sich eine Führung aus zwei offenen wie eine Entscheidung. */
.ar-sc__verdeckt {
  padding: 0.1rem 0.3rem;
  border: 1px dashed var(--ar-kante-griff);
  color: var(--ar-kreide-2);
  font-size: 0.66rem;
}

.ar-sc__saetze {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  color: var(--ar-kreide);
  font-size: 0.88rem;
  list-style: none;
  text-wrap: balance;
}

/* ------------------------------------------------------------ Das Pult */

.ar-sc__pult {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 0.5rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

/* Gesperrt heißt still: Die Knöpfe bleiben stehen und sagen beim Tippen, warum nicht. */
.ar-sc__pult[data-ar-sc-gesperrt] {
  border-style: dashed;
  border-color: var(--ar-kante);
}

.ar-sc__pult-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  width: 100%;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
}

.ar-sc__wuerfe {
  color: var(--ar-kreide);
  font-variant-numeric: tabular-nums;
}

.ar-sc__pult-wer {
  display: inline-flex;
  align-items: center;
}

/* Der Übersetzer am Pult steht größer als am Platz: Er ist die Auskunft, nach der der Daumen sich richtet. */
.ar-sc__pult-blatt {
  display: grid;
  align-content: center;
  min-height: 1.9rem;
  font-size: 0.9rem;
  text-align: center;
  text-wrap: balance;
}

.ar-sc__pult-blatt[data-ar-sc-art] {
  font-size: 1rem;
}

.ar-sc__knoepfe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
}

/*
 * DER WENDEN-KNOPF STEHT NEBEN WÜRFELN, UND STEHEN RUTSCHT DARUNTER — nur solange es überhaupt etwas zu wenden gibt.
 * Ohne diese Regel ließe das zweispaltige Raster eine Lücke unter dem Wenden-Knopf, denn „Becher steht“ nimmt sonst
 * nur die erste Spalte der zweiten Zeile.
 */
.ar-sc__knoepfe:has([data-ar-sc-wenden]:not([hidden])) [data-ar-sc-stehen] {
  grid-column: 1 / -1;
}

.ar-sc__knopf {
  min-height: 3.25rem;
  padding: 0.55rem 0.6rem;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.ar-sc__knopf[aria-disabled='true'] {
  border-color: var(--ar-kante-griff);
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
  cursor: default;
}

/*
 * DIE ZEILE UNTER DEN KNÖPFEN. Sie sagt, wo man für das Rauslegen hinfasst, dass der nächste Wurf blind geht — und,
 * am lautesten, warum ein Griff eben nicht angekommen ist. Sie hält dafür ihre Höhe über alle drei Lagen: Ein Satz,
 * der die Knöpfe unter dem Daumen wegschöbe, käme am Tisch teurer als die zwei Zeilen, die er kostet.
 *
 * DER ABGEWIESENE GRIFF STEHT IN VERSALIEN NICHT GUT: Er ist ein Satz und keine Aufschrift, und in Versalien liest
 * ihn niemand in den vier Sekunden, die er steht.
 */
.ar-sc__hinweis {
  display: grid;
  align-content: center;
  min-height: 2.4rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
  text-align: center;
  text-wrap: balance;
}

.ar-sc__hinweis[data-ar-sc-blind] {
  color: var(--ar-funke);
}

.ar-sc__hinweis[data-ar-sc-nein] {
  color: var(--ar-kreide);
  font-size: 0.85rem;
}

/* Wer gerettet oder gegangen ist, bekommt an der Stelle des Pults seinen Satz; ein Kasten, der wegfällt, zöge alles hoch. */
.ar-sc__ruhe {
  display: grid;
  place-content: center;
  min-height: 4.5rem;
  margin: 0;
  padding: 0.6rem;
  border: 2px dashed var(--ar-kante-griff);
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  text-align: center;
  text-wrap: balance;
}

/* ------------------------------------------------------------ Das Dock */

/*
 * DIE KNÖPFE STEHEN IM DAUMENDOCK DES RAHMENS (`.ar-dock`): Auf dem Telefon im Hochformat kleben „Würfeln“ und
 * „Becher steht“ samt der Zeile darunter am unteren Rand der Bühne, solange die in sich rollt. Leer ist das Dock, wo
 * kein Pult steht — für Zuschauer, Gerettete und Gegangene —, und dann hat es keinen Kasten. Das Raster gibt den Knöpfen
 * ihre Breite.
 */
.ar-sc__dock {
  display: grid;
  gap: 0.35rem;
}

/*
 * PULT UND DOCK TEILEN SICH EINEN TRÄGER, UND DER HAT AUF DEM TELEFON KEINEN KASTEN. Dort muss das Dock ein Kind eines
 * Kastens sein, der über das ganze Brett geht, sonst klebt es nicht; auf dem Schreibtisch steht der Träger als rechte
 * Spalte, und das Dock direkt unter dem Pult. Als zwei Bereiche im Raster ('mitte pult' / 'mitte dock') begann das Dock
 * erst unter der ganzen linken Spalte: auf 1440 Pixeln zu zweit 150 Pixel unter den Würfeln, zu viert unter dem Falz.
 */
.ar-sc__rechts {
  display: contents;
}

.ar-sc__dock:empty {
  display: none;
}

/*
 * Im Dock stehen alle Knöpfe in EINER Zeile, auch wenn das Wenden dazukommt: Zwei Zeilen Knöpfe hoben das klebende Dock
 * genau nach dem Wurf mit den zwei Sechsen um eine Knopfhöhe über die Würfel, die man gerade umlegen will.
 */
@media (max-width: 47.99rem) and (min-height: 34rem) {
  .ar-sc__dock .ar-sc__knoepfe {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .ar-sc__dock .ar-sc__knoepfe:has([data-ar-sc-wenden]:not([hidden])) [data-ar-sc-stehen] {
    grid-column: auto;
  }

  /* Was klebt, deckt zu: Knöpfe und Zeile stehen hier knapper, zwei Zeilen Knopfschrift passen trotzdem hinein. */
  .ar-sc__dock .ar-sc__knopf {
    min-height: 2.9rem;
    padding: 0.35rem 0.4rem;
    font-size: 0.8rem;
    line-height: 1.15;
  }

  /* Zwei Zeilen Absage passen in die Reserve; in der Zeilenhöhe des Pults hob eine das klebende Dock um sieben Pixel. */
  .ar-sc__dock .ar-sc__hinweis {
    min-height: 2.1rem;
    line-height: 1.2;
  }
}

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

/*
 * AUF DEM TELEFON STEHEN DIE SCHILDER KNAPP: Marke und Name, darunter Deckel und Marken. Das Blatt in Klartext fällt
 * weg; es steht als Würfel auf dem Tisch, als Satz im Vorlesetext und in der Tischführung der Mitte.
 */
@container ar-sc-mass (max-width: 30.99rem) {
  .ar-sc__platz {
    padding: 0.12rem 0.3rem 0.15rem 0.25rem;
    font-size: 0.72rem;
  }

  .ar-sc__platz > .ar-sc__klar {
    display: none;
  }

  .ar-sc__platz .ar-sc__zusatz {
    padding: 0 0.2rem;
    font-size: 0.6rem;
  }

  .ar-sc__platz .ar-sc__marke {
    width: 0.9rem;
    height: 0.9rem;
  }

  .ar-sc__stapel--platz > .ar-sc__stapel-fach {
    width: 0.95rem;
    height: 0.95rem;
  }

  .ar-sc__stapel--platz > .ar-sc__stapel-zahl {
    font-size: 0.8rem;
  }
}

/*
 * AUF DEM SCHREIBTISCH STEHT DER TISCH ÜBER DIE GANZE BREITE und quer, mit dem ganzen Tisch im Bild; darüber Ziel und
 * Anzeige in einer Zeile, darunter links Mitte und Ränge, rechts das eigene Pult mit dem Dock. Die Schwelle liegt über
 * 37rem Innenbreite, und die erreicht nur ein Brett auf dem Schreibtisch; schmal und im flachen Querformat ist keines
 * breiter als 34rem.
 */
@container ar-sc-mass (min-width: 39rem) {
  .ar-sc {
    --ar-sc-mitte: 9rem;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.8fr);
    grid-template-areas:
      'ziel anzeige'
      'tisch tisch'
      'mitte pult'
      'raenge pult';
    align-items: start;
    column-gap: 1rem;
  }

  .ar-sc > .ar-sc__rechts {
    display: grid;
    grid-area: pult;
    align-content: start;
    gap: 0.5rem;
  }

  .ar-sc > .ar-sc__ziel {
    grid-area: ziel;
    align-self: stretch;
  }

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

  .ar-sc > .ar-sc__buehne {
    grid-area: tisch;
  }

  .ar-sc__buehne > .ar-kulisse {
    aspect-ratio: 2.3 / 1;
  }

  /* Alle Knöpfe in einer Zeile, auch mit dem Wenden: Eine zweite Zeile machte das Brett höher als den Schirm. */
  .ar-sc__knoepfe {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .ar-sc__knoepfe:has([data-ar-sc-wenden]:not([hidden])) [data-ar-sc-stehen] {
    grid-column: auto;
  }

  .ar-sc__platz {
    max-width: 24%;
    font-size: 0.88rem;
  }

  .ar-sc__platz[data-ar-sc-seite='unten'] {
    max-width: 40%;
  }

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

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

  .ar-sc__badge--rang {
    --ar-sc-badge-auge: 0.9rem;
  }

  .ar-sc__badge--rang > .ar-sc__badge-wort {
    font-size: 0.76rem;
  }

  .ar-sc > [data-ar-sc-teil='mitte'] {
    grid-area: mitte;
    align-self: stretch;
  }

  .ar-sc__bank[data-ar-sc-gross] {
    --ar-sc-wuerfel: 3.2rem;
  }
}

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

/*
 * Alle Becher des letzten Durchgangs nebeneinander, oben im Tableau der Abrechnung. Gezeichnet wird mit denselben
 * Teilen wie am Tisch — Becher, Würfel, Blattabzeichen —, hier nur dichter und ohne Deckelstapel: Was jede Farbe
 * hält, steht in der Tabelle darunter.
 */
.ar-sc__aufdeckung {
  display: grid;
  gap: 0.4rem;
}

.ar-sc__aufdeckung-kopf {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
}

.ar-sc__aufdeckung-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-sc__aufdeckung-platz {
  --ar-sc-wuerfel: 1.3rem;
  display: grid;
  justify-items: start;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 2px solid var(--ar-kante);
  border-left: var(--ar-farbkante) solid var(--ar-sc-farbe);
  background: var(--ar-noir-2);
}

.ar-sc__aufdeckung-platz[data-ar-farbe='rot'] { --ar-sc-farbe: var(--ar-rot); }
.ar-sc__aufdeckung-platz[data-ar-farbe='blau'] { --ar-sc-farbe: var(--ar-blau); }
.ar-sc__aufdeckung-platz[data-ar-farbe='gelb'] { --ar-sc-farbe: var(--ar-gelb); }
.ar-sc__aufdeckung-platz[data-ar-farbe='gruen'] { --ar-sc-farbe: var(--ar-gruen); }

.ar-sc__aufdeckung-platz[data-ar-sc-rolle='sieger'] {
  border-color: var(--ar-funke);
  border-left-color: var(--ar-sc-farbe);
}

.ar-sc__aufdeckung-platz[data-ar-sc-rolle='verlierer'] {
  border-color: var(--ar-rot);
  border-left-color: var(--ar-sc-farbe);
}

.ar-sc__aufdeckung-name {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  min-width: 0;
}

/*
 * DAS ABZEICHEN STEHT ÜBER DEM TISCH UND NICHT ÜBER DEM PULT. Der Rahmen legt es auf 45 Prozent der Bretthöhe, und dort
 * liegt bei vier Plätzen der letzte davon; auf 38 Prozent liegt es über den Plätzen, deren Deckel gerade wandern.
 */
.ar-spielfeld[data-ar-spiel='schocken'] .ar-abzeichen {
  top: 38%;
  width: min(86%, 20rem);
}

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

/*
 * Der Papp-Untersetzer: Deckfläche, Kante und Prägung. Die Kante ist die geschnittene Pappe von der Seite und trägt
 * deshalb keinen eigenen Umriss an den Innenkanten — der Stapel setzt seine Scheiben übereinander, und eine Linie je
 * Lage ist genau das, was man an einem Stapel Deckel sieht.
 */
.ar-g-sc-pappe { fill: var(--ar-sc-pappe); stroke: var(--ar-noir); stroke-width: 2.5; stroke-linejoin: miter; }
.ar-g-sc-pappe-kante { fill: var(--ar-sc-pappe-tief); stroke: var(--ar-noir); stroke-width: 2.5; stroke-linejoin: miter; }
.ar-g-sc-kerbe { fill: none; stroke: var(--ar-sc-pappe-tief); stroke-width: 3; }
.ar-g-sc-praegung { fill: none; stroke: var(--ar-sc-praegung); stroke-width: 3; }
/* Die Prägung auf der obersten Scheibe des Stapels: von schräg oben ist sie ein flacher Ring und keine Ähre. */
.ar-g-sc-praegung-flach { fill: none; stroke: var(--ar-sc-praegung); stroke-width: 2.5; }

/* Das Banner des Schock Out: Platte in Senf, Zipfel eine Stufe tiefer, zwei Prägelinien in Tusche. */
.ar-g-sc-band { fill: var(--ar-funke); stroke: var(--ar-noir); stroke-width: 5; stroke-linejoin: miter; }
.ar-g-sc-band-tief { fill: var(--ar-sc-band-tief); stroke: var(--ar-noir); stroke-width: 5; stroke-linejoin: miter; }
.ar-g-sc-band-linie { fill: none; stroke: var(--ar-noir); stroke-width: 2.5; }