/*
 * Tresorknacker: Kopf, Panzerschranktür, Schalttafel mit fünf Steckplätzen, Palette und „Prüfen“, der verdeckte Code
 * und die Tafel aller Versuche. Anzeigeleiste, Brettrand, Wasserzeichen, Abzeichen und Tafel stehen als Rahmen des
 * Spielfelds in css/arena.css; das Bild des Wasserzeichens trägt dieses Paket selbst ein.
 *
 * DIE TÜR IST AUFSCHRIFT. Sie trägt kein `data-ar-griff`, keinen Knopf und keine Auskunft, die nicht daneben stünde;
 * das Handrad zeigt, wie viele Steckplätze belegt sind, die Bolzen, dass jemand geknackt hat.
 *
 * Fünf Steckplätze messen auf 375 Pixeln rund sechzig breit und nie weniger als 44 in beide Richtungen. Eine
 * Zeile der Tafel passt mit fünf Symbolen und fünf Lampen auch auf 320 Pixeln in eine Reihe, der Satz dazu steht dort
 * darunter. Lampen sagen es über ihr Bild und den Satz, nie über den Ton allein. Jede Regel auf der gemeinsamen
 * Fläche hängt an [data-ar-spiel='tresorknacker'].
 */

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

@supports (width: 1cqw) {
  .ar-spielfeld[data-ar-spiel='tresorknacker'] {
    --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='tresorknacker'] {
    --ar-brettbreite: min(30rem, 100vw - 2 * var(--ar-luft) - 15rem);
  }

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

/*
 * Auf dem Schreibtisch nimmt das Brett die ganze Bühne (--ar-feld), so breit wie der Kopf des Hauses: Dort stehen
 * Schalttafel und Tafel der Versuche nebeneinander, und die Tafel läuft nicht unter der Schalttafel aus dem Bild.
 */
@media (min-width: 64rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='tresorknacker'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

body:has(.ar-spielfeld[data-ar-spiel='tresorknacker']:not([hidden]))::before,
.ar-spielfeld[data-ar-spiel='tresorknacker'] .ar-brett::before {
  background-image: url(assets/bg-tresorknacker.webp);
}

/*
 * Die Zeilen der Tafel messen das Brett und nicht die Bühne: Im flachen Querformat ist die Bühne breiter als das Brett.
 * Das Raster liegt eine Ebene tiefer, denn ein Maßcontainer kann sich nicht selbst abfragen.
 */
.ar-tk {
  container-type: inline-size;
}

.ar-tk__raster {
  display: grid;
  gap: 0.5rem;
}

.ar-tk__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.2rem 0.8rem;
}

.ar-tk__name,
.ar-tk__zaehler,
.ar-tk__wer,
.ar-tk__satz,
.ar-tk__code-wort,
.ar-tk__stellen {
  margin: 0;
}

/*
 * Der Name steht als leise Marke vor dem Zähler und darf ihn nicht überstimmen: dieselbe Kreide, aber kleiner und
 * gesperrt, und der Zähler schiebt mit seiner Endfuge alles Übrige an den rechten Rand. Wo die Zeile knapp wird — unter
 * 30rem am Container und im flachen Querformat —, fällt die Marke weg, damit der Kopf eine Zeile bleibt. **Die Schwelle
 * stand auf 19rem**, und gemessen brach der Kopf damit auf 340, 360 und 375 Pixeln zweizeilig um. Sie muss so hoch
 * liegen, weil der Satz „Du bist dran: Symbole stecken und prüfen“ mit dem Zähler zusammen schon rund 23rem braucht: Auf
 * jedem Telefon steht deshalb kein Name, und das ist richtig so — er ist Zierrat, und Zierrat bekommt nur Platz, wo
 * welcher ist. Der Satz selbst steht inzwischen in der Zugzeile des Rahmens und nicht mehr im Kopf; die Schwelle bleibt,
 * denn sie ist gemessen, und ein kürzerer Kopf ist noch kein Grund, sie ohne neue Messung zu senken.
 */
.ar-tk__name {
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@container (max-width: 29.99rem) {
  .ar-tk__name {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 30rem) {
  .ar-tk__name {
    display: none;
  }
}

.ar-tk__zaehler {
  margin-inline-end: auto;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.ar-tk__wer {
  min-width: 0;
  color: var(--ar-kreide);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/*
 * DER NACHSCHLAG NIMMT DIE GANZE ZWEITE ZEILE DES KOPFES.
 *
 * Er steht nur in dem einen Durchgang da, in dem der Tresor schon offen ist, und er ist die einzige Auskunft, die ein
 * Spieler dort braucht: dass dies sein letzter Zug ist. Senfkante links wie bei jedem Hinweis dieses Hauses, und
 * `flex-basis: 100%`, weil der Kopf eine umbrechende Reihe ist — ohne sie schöbe sich der Satz neben den Zähler und
 * risse ihn auf jedem Telefon in drei Zeilen.
 */
.ar-tk__nachschlag {
  flex-basis: 100%;
  margin: 0;
  padding-left: 0.5rem;
  border-left: 3px solid var(--ar-funke);
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  line-height: 1.4;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Schalttafel */

/*
 * DER DECKEL DER SCHALTTAFEL STEHT AN EINER STELLE. Er stand dreimal getippt da — an den Steckplätzen, an der Palette
 * und am Prüfknopf —, und der Kommentar darunter machte ihre Gleichheit zur Bedingung: Wer nur einen anfasst, zerlegt
 * die Schalttafel in drei verschieden breite Blöcke. Jetzt ist es eine Variable, und der Glyph hängt daneben, damit er
 * mit den Steckplätzen wächst statt als Bauteil eines kleineren Geräts stehen zu bleiben.
 */
.ar-tk__schalttafel {
  --ar-tk-tafel: 28.8rem;
  --ar-tk-glyph: 2.1rem;
  display: grid;
  gap: 0.45rem;
  padding: 0.45rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

/* ------------------------------------------------------------ Panzerschranktür */

/*
 * DIE TÜR IST AUFSCHRIFT UND KEIN BEDIENELEMENT: sechs Stahlbolzen und das Handrad darunter, das je belegtem
 * Steckplatz eine Kerbe weitersteht. Sie hängt über der Schalttafel UND über dem verdeckten Code, damit an beiden
 * Plätzen derselbe Schrank steht — wer zusieht, sieht dieselbe Tür wie der, der steckt.
 *
 * SIE MISST EINE FESTE HÖHE UND WÄCHST NICHT MIT `--ar-einheit`. Auf dem Breitbild ist die Einheit ein Sechstel der
 * ganzen Bühne; ein Rad, das daran hinge, stünde dort höher als die fünf Steckplätze darunter.
 */
.ar-tk__tuer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  width: 100%;
  /* Der Deckel steht nur an der Schalttafel; im verdeckten Code gilt der Rückfall. */
  max-width: var(--ar-tk-tafel, 28.8rem);
  height: 2.9rem;
  justify-self: center;
  border-block: 2px solid var(--ar-kante);
  background: var(--ar-noir-3);
  /* Im verdeckten Code liegt die Tür in einer umbrechenden Reihe und braucht ihre eigene Zeile. */
  flex-basis: 100%;
}

/* Drei Bolzen je Seite. Sie liegen heller als das Blech dahinter, und ihre Tuschkante trennt sie voneinander. */
/*
 * Sie wachsen zur Seite hin mit, aber nicht ohne Ende: Auf einem Deckel von 36,5rem wären zwei Bolzenfelder von je
 * 16rem ein Strichmuster und kein Riegelwerk.
 */
.ar-tk__riegel {
  display: grid;
  flex: 1 1 4rem;
  max-width: 9rem;
  gap: 0.2rem;
}

.ar-tk__riegel > i {
  display: block;
  height: 0.42rem;
  border: 1px solid var(--ar-noir);
  background: var(--ar-kante-griff);
}

.ar-tk__rad {
  display: block;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
}

/*
 * NACH DEM RICHTIGEN CODE GLEITEN DIE BOLZEN ZUR SEITE — in vier harten Bildern, einer nach dem anderen, und sie
 * bleiben draußen (`both`). Kein Übergang und kein Nachwippen: Was sich in diesem Haus bewegt, springt. Geklungen hat
 * das längst, denn `tresor` IST der Riegel, der zurückschlägt (klang.js).
 */
.ar-tk__tuer[data-ar-riegel] .ar-tk__riegel > i {
  animation: ar-tk-riegel calc(4 * var(--ar-bild)) steps(4) both;
}

.ar-tk__tuer[data-ar-riegel] .ar-tk__riegel > i:nth-child(2) {
  animation-delay: var(--ar-bild);
}

.ar-tk__tuer[data-ar-riegel] .ar-tk__riegel > i:nth-child(3) {
  animation-delay: calc(2 * var(--ar-bild));
}

.ar-tk__tuer[data-ar-riegel] .ar-tk__riegel[data-ar-seite='rechts'] > i {
  animation-name: ar-tk-riegel-rechts;
}

@keyframes ar-tk-riegel {
  to { translate: -75% 0; }
}

@keyframes ar-tk-riegel-rechts {
  to { translate: 75% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-tk__tuer[data-ar-riegel] .ar-tk__riegel > i {
    animation: none;
    translate: none;
    /* Offen bleibt offen, nur ohne Fahrt: Die Bolzen sind dann bloß nicht mehr da, wo sie zu waren. */
    opacity: 0.25;
  }
}

/*
 * IM FLACHEN QUERFORMAT FÄLLT DIE TÜR WEG. Dort ist die Höhe das knappste Gut des Bretts — die Palette rückt deshalb
 * schon zur Seite, damit „Prüfen“ über dem Falz bleibt —, und eine Zierleiste von 46 Pixeln schöbe den Knopf wieder
 * darunter. Sie trägt keine Auskunft, also fehlt dort nichts.
 */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-tk__tuer {
    display: none;
  }
}

/*
 * Breiter als --ar-tk-tafel wird die Reihe nicht: Auf einem Tablet mit einer Spalte wären die Steckplätze sonst höher
 * als die halbe Tafel. Sie stand einmal auf 24rem, und neben den gewachsenen Symbolen der Tafel sah die Reihe daneben
 * aus wie ein Vorschaubild. Palette und „Prüfen“ halten dieselbe Breite, sonst zerfiele die Schalttafel in drei
 * verschieden breite Blöcke.
 */
.ar-tk__stecker {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 0.3rem;
  width: 100%;
  max-width: var(--ar-tk-tafel);
  justify-self: center;
}

/* Im flachen Querformat ist die Höhe knapp: schmalere Steckplätze sind auch niedrigere, und 44 Pixel bleiben es
   trotzdem — 18rem geben je Platz 53,8. */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-tk__schalttafel {
    --ar-tk-tafel: 18rem;
  }
}

/*
 * EIN STECKPLATZ IST EIN KNOPF UND SIEHT AUS WIE EINE FASSUNG. Leer ist er eine dunkle Mulde mit gestrichelter Kante
 * darin, belegt trägt er sein Symbol und eine Senfkante: Ein Tipp darauf nimmt es wieder heraus, und das muss man
 * sehen, bevor man tippt. Form und Füllung sagen es beide — die Farbe allein sagte es nicht.
 */
.ar-tk__platz {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 2px solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir-3);
  cursor: pointer;
  appearance: none;
  touch-action: manipulation;
}

.ar-tk__platz:focus-visible {
  z-index: 1;
  outline-offset: -2px;
}

.ar-tk__platz[data-ar-belegt] {
  border-color: var(--ar-funke);
  background: var(--ar-noir);
}

@media (hover: hover) {
  .ar-tk__platz[data-ar-belegt]:hover {
    border-color: var(--ar-kreide);
  }
}

.ar-tk__platz[data-ar-belegt]:active {
  background: var(--ar-noir-3);
}

/* Die leere Fassung: ein gestricheltes Feld in der Mulde, damit ein freier Platz auch ohne Farbe als Loch zu lesen ist. */
.ar-tk__fassung {
  display: block;
  width: 52%;
  height: 52%;
  border: 2px dashed var(--ar-kante-griff);
  background: var(--ar-noir);
}

.ar-tk__platz-symbol {
  display: block;
  width: 72%;
  height: 72%;
}

/* Das Loch, in das das nächste Symbol geht: durchgezogen statt gestrichelt und in Senf — die Form sagt es auch ohne Farbe. */
.ar-tk__platz[data-ar-naechster] .ar-tk__fassung {
  border-style: solid;
  border-color: var(--ar-funke);
}

/*
 * Die Palette unter den Steckplätzen. In einer Reihe brauchen sechs Tasten 6 × 44 px und fünf Fugen zu 4 px, zusammen 284 px;
 * die Schalttafel nimmt 18,4 px für Kante und Polster, .ar-tk braucht innen also 302,4 px, aufgerundet 19rem. Auf 320
 * Pixeln hat .ar-tk innen 262 px, dort stehen die Tasten zu dritt in zwei Reihen; auf 375 sind es 317 px und eine
 * Reihe mit Tasten von 46 px. Ohne Container-Abfragen bleibt es bei zwei Reihen, die überall passen.
 */
.ar-tk__palette {
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  gap: 0.25rem;
  width: 100%;
  max-width: var(--ar-tk-tafel);
  justify-self: center;
}

@container (min-width: 19rem) {
  .ar-tk__palette {
    grid-template-columns: repeat(6, minmax(44px, 1fr));
  }
}



.ar-tk__taste {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir-3);
  cursor: pointer;
  appearance: none;
  touch-action: manipulation;
}

@media (hover: hover) {
  .ar-tk__taste:hover {
    border-color: var(--ar-kreide);
  }
}

.ar-tk__taste:active {
  background: var(--ar-noir);
}

.ar-tk__taste-bild {
  display: block;
  width: var(--ar-tk-glyph);
  height: var(--ar-tk-glyph);
}

.ar-tk__pruefen {
  width: 100%;
  max-width: var(--ar-tk-tafel);
  min-height: 3rem;
  justify-self: center;
}

/* Still heißt: Der Knopf bleibt, sagt beim Tippen, warum nicht, und sieht nicht aus, als wäre er gedrückt. */
.ar-tk__pruefen[aria-disabled='true'],
.ar-tk__pruefen[aria-disabled='true']:hover {
  border-color: var(--ar-kante-griff);
  outline-color: var(--ar-kante-griff);
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
  cursor: default;
}

/*
 * DER KNOPF KOMMT AN, UND DAS SIEHT MAN: eine grüne Fläche statt Senf, dazu der Ring von `ar-puls`. Grün ist hier Fläche
 * unter dunkler Schrift (`--ar-gruen-kontrast`, 7,8:1) und kein Schein. Sie hängt an derselben Frage wie `aria-disabled`
 * und `ar-puls` — vollständig, am Zug, Frist frei, Kombination neu — und trägt allein nichts: „Prüfen“ steht weiter
 * darauf, und der Satz darunter sagt, was zu tun ist.
 */
.ar-tk__pruefen[aria-disabled='false'] {
  background: var(--ar-gruen);
  color: var(--ar-gruen-kontrast);
}

.ar-tk__pruefen[aria-disabled='false']:hover {
  background: var(--ar-kreide);
}

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

.ar-tk__satz {
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  text-align: center;
  text-wrap: pretty;
}

/* Eine schon geprüfte Kombination steht mit gestrichelter Senfkante da: Farbe allein sagte es nicht. */
.ar-tk__satz[data-ar-warnung] {
  padding: 0.2rem 0.4rem;
  border: 2px dashed var(--ar-funke);
  color: var(--ar-kreide);
}

/*
 * WO DIE HÖHE KNAPP IST, RÜCKT DIE PALETTE ZUR SEITE. Untereinander kostet sie eine Reihe von 51 Pixeln, auf 320 zwei
 * von 99, und „Prüfen“ lag nach dem Sprung zur Spielleiste unter dem Falz: im Querformat auf 667 × 375 bei 408 statt
 * vorher 357, auf 320 × 640 zu dritt bei 667 statt 568.
 *
 * Schmal (unter 19rem am Container, also Telefone hochkant unter 375) steht „Prüfen“ als hohe Taste rechts neben den
 * zwei Reihen der Palette. Im flachen Querformat steht die Palette in drei Reihen zu zwei rechts neben den Steckplätzen,
 * und „Prüfen“ bleibt darunter: fünf Plätze zu 44 und zwei Tasten zu 44 samt Fugen, Kante und Polster brauchen 22,3rem, auf
 * 667 × 375 sind es 22,6. Ist es enger, bleibt es beim Stapel.
 */
@container (max-width: 18.99rem) {
  .ar-tk__schalttafel {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'tuer tuer'
      'stecker stecker'
      'palette pruefen'
      'satz satz';
    column-gap: 0.45rem;
  }

  /* Ein Kind ohne Bereich landete unter allen benannten Zeilen — die Tür stünde dann unter dem Satz. */
  .ar-tk__schalttafel > .ar-tk__tuer { grid-area: tuer; }
  .ar-tk__schalttafel > .ar-tk__stecker { grid-area: stecker; }
  .ar-tk__schalttafel > .ar-tk__palette { grid-area: palette; }
  .ar-tk__schalttafel > .ar-tk__satz { grid-area: satz; }

  .ar-tk__schalttafel > .ar-tk__pruefen {
    grid-area: pruefen;
    width: auto;
    padding-inline: 0.5rem;
  }
}

@media (orientation: landscape) and (max-height: 30rem) {
  @container (min-width: 22.3rem) {
    .ar-tk__schalttafel {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        'stecker palette'
        'pruefen pruefen'
        'satz satz';
      align-items: center;
      column-gap: 0.45rem;
    }

    .ar-tk__schalttafel > .ar-tk__stecker { grid-area: stecker; }
    .ar-tk__schalttafel > .ar-tk__pruefen { grid-area: pruefen; }
    .ar-tk__schalttafel > .ar-tk__satz { grid-area: satz; }

    .ar-tk__schalttafel > .ar-tk__palette {
      grid-area: palette;
      grid-template-columns: repeat(2, 44px);
      width: auto;
    }
  }
}

/* ------------------------------------------------------------ Code im Tresor */

.ar-tk__code {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem 0.6rem;
  padding: 0.45rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

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

.ar-tk__stellen {
  display: flex;
  gap: 0.3rem;
}

/* Verdeckt gestrichelt mit Fragezeichen, offen mit durchgezogener Kreidekante und dem Symbol. */
.ar-tk__stelle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px dashed var(--ar-kante-griff);
  background: var(--ar-noir);
}

.ar-tk__stelle[data-ar-offen] {
  border: 2px solid var(--ar-kreide);
  background: var(--ar-noir-3);
}

.ar-tk__stelle-bild {
  display: block;
  width: 80%;
  height: 80%;
}

.ar-tk__frage {
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift-plakat);
  font-size: 1.2rem;
  line-height: 1;
}

/* ------------------------------------------------------------ Legende der Lampen */

/*
 * DIE LEGENDE STEHT ÜBER DER TAFEL, in der die Lampen brennen, und nicht in der Schalttafel: Dort gäbe es keine Lampe,
 * auf die sie zeigt, und die klebende Schalttafel wäre um mehrere Zeilen höher, als ihre Schwelle (38rem, weiter unten)
 * verträgt. Das Wort steht neben der Lampe, weil die gezeichnete Lampe auf dem Telefon nur ein Farbtupfer ist und die
 * Formmarke darüber erst neben einem Wort gelesen wird. Die Einträge brechen um, wo die Spalte endet.
 *
 * Der Wrapper hält Legende und Tafel als eine Spalte zusammen: Als eigene Rasterzeile neben der klebenden Schalttafel
 * bekäme die Legende einen Teil von deren überschüssiger Höhe ab und schöbe die Tafel nach unten. Auf dem Telefon im
 * Hochformat ist er der Kasten, der in sich rollt, und die Legende steht darin unter der Liste (Telefon, weiter unten).
 */
.ar-tk__rechts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  min-width: 0;
}

.ar-tk__legende {
  --ar-tk-lampe: 1.25rem;
  display: grid;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  line-height: 1.3;
}

.ar-tk__legende-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  color: var(--ar-kreide);
  list-style: none;
}

.ar-tk__legende-eintrag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.ar-tk__legende-eintrag > .ar-tk__lampe {
  flex: none;
}

.ar-tk__legende-satz {
  margin: 0;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ Tafel der Versuche */

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

/* Als Streifen rücken die Zeilen auf eine Haarfuge zusammen; die Farbkante links trennt sie ohnehin. */
@container (min-width: 46rem) {
  .ar-tk__versuche {
    gap: 0.15rem;
  }
}

.ar-tk__leer {
  padding: 0.4rem 0.6rem;
  border: 2px dashed var(--ar-kante);
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
}

/*
 * Schmal steht der Satz unter Symbolen und Lampen, breit daneben. Die Maße der Symbole und Lampen wachsen mit dem Brett;
 * ohne Container-Einheiten bleibt es beim kleinsten Maß, das auch auf 320 Pixeln in eine Reihe passt.
 */
.ar-tk__versuch {
  --ar-tk-symbol: 1.1rem;
  --ar-tk-lampe: 0.8rem;
  display: grid;
  grid-template-columns: 1.2rem 1rem auto auto minmax(0, 1fr);
  grid-template-areas:
    'nr marke symbole lampen .'
    'nr marke ergebnis ergebnis ergebnis';
  align-items: center;
  gap: 0.1rem 0.4rem;
  padding: 0.25rem 0.45rem 0.25rem 0.3rem;
  border-left: var(--ar-farbkante) solid var(--ar-tk-farbe);
  background: var(--ar-noir-2);
}

/*
 * Einspaltig wächst die Zeile mit dem Brett, und zwar um dasselbe Fünftel wie Steckplätze, Tasten und Tafelsymbole. Weiter
 * geht es nicht: Auf 320 Pixeln trägt .ar-tk innen 278, und die Zeile braucht dort ihre festen 6,06rem plus fünf
 * Symbole und fünf Lampen — mit einem Fünftel mehr als 7cqw stünde ein Teil davon außerhalb.
 */
@supports (width: 1cqw) {
  .ar-tk__versuch {
    --ar-tk-symbol: clamp(1.1rem, 7cqw, 1.92rem);
    --ar-tk-lampe: clamp(0.8rem, 5.11cqw, 1.4rem);
  }
}

@container (min-width: 30rem) {
  .ar-tk__versuch {
    grid-template-areas: 'nr marke symbole lampen ergebnis';
  }
}

.ar-tk__versuch > .ar-tk__nr { grid-area: nr; }
.ar-tk__versuch > .ar-tk__marke { grid-area: marke; }
.ar-tk__versuch > .ar-tk__symbole { grid-area: symbole; }
.ar-tk__versuch > .ar-tk__lampen { grid-area: lampen; }
.ar-tk__versuch > .ar-tk__ergebnis { grid-area: ergebnis; }

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

/* Der Versuch, der gerade geprüft wird, steht mit Senfkante, solange er frisch ist; danach ist er eine Zeile wie alle. */
.ar-tk__versuch[data-ar-neu] {
  outline: 3px solid var(--ar-funke);
  outline-offset: -3px;
}

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

.ar-tk__marke {
  width: 1rem;
  height: 1rem;
}

.ar-tk__symbole,
.ar-tk__lampen {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.ar-tk__symbol {
  display: block;
  width: var(--ar-tk-symbol);
  height: var(--ar-tk-symbol);
}

/*
 * DER GEKNACKTE VERSUCH: fünf Fragezeichen statt fünf Symbolen, bis die Runde vorbei ist.
 *
 * Er hält den Platz seiner Symbole exakt — eine Zeile, die beim Aufdecken die Breite wechselt, ruckt die ganze Tafel.
 * Senf statt Kreide, denn hier steht nicht „nichts", sondern „noch nicht": Dieselbe Farbe trägt am Brett jede Stelle,
 * die zurückgehalten wird.
 */
.ar-tk__symbol--zu {
  display: grid;
  place-items: center;
  width: var(--ar-tk-symbol);
  height: var(--ar-tk-symbol);
  color: var(--ar-funke);
  font-size: calc(var(--ar-tk-symbol) * 0.8);
  line-height: 1;
  border: 1px dashed var(--ar-kante-griff);
}

/*
 * DIE ZEILE SELBST BLEIBT RUHIG. Was sie sagt, sagen die Fragezeichen und die fünf Trefferlampen daneben — und ihre
 * linke Kante gehört der FARBE, die geprüft hat (`--ar-tk-farbe`). Wer sie hier auf Senf stellt, nimmt der Tafel die
 * eine Auskunft, die jede Zeile trägt: wer es war.
 */

.ar-tk__lampe {
  display: block;
  width: var(--ar-tk-lampe);
  height: var(--ar-tk-lampe);
}

/* Eine Lampe, die noch nicht brennt, ist ein leerer gestrichelter Kasten und keine Fehlanzeige. */
.ar-tk__lampe[data-ar-lampe='dunkel'] {
  border: 1px dashed var(--ar-kante-griff);
}

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

/*
 * Die Formmarke liegt unten rechts über der Zeichnung und ist nie kleiner als 0,8rem: So groß war die Lampe des
 * Rückfalls auf 320 Pixeln, und kleiner lesen sich Haken, halbe Scheibe und gestrichelter Kreis nicht auseinander. Auf
 * dem Telefon deckt sie damit die ganze Lampe, auf dem Schreibtisch sechs Zehntel, und die Zeichnung bleibt zu sehen.
 */
.ar-tk__lampe {
  position: relative;
}

.ar-tk__lampe > .ar-tk__lampe-form {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: max(60%, 0.8rem);
  height: max(60%, 0.8rem);
}

/* Kam die Zeichnung nicht, steht das Symbol mit derselben Form schon da. */
svg.ar-tk__lampe-bild + .ar-tk__lampe-form,
[href^='#ar-status-'] + .ar-tk__lampe-form {
  display: none;
}

.ar-tk__ergebnis {
  min-width: 0;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* Der aufgedeckte Code über dem Tableau der Abrechnung: eine eigene Zeile, mittig, dieselben Symbole wie am Brett. */
.ar-tk__tafel-code {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin: 0 0 0.4rem;
}

.ar-tk__tafel-symbol {
  display: block;
  width: 1.68rem;
  height: 1.68rem;
}

/* ------------------------------------------------------------ Telefon im Hochformat */

/*
 * AUF DEM TELEFON STEHT DIE SCHALTTAFEL UNTEN ALS DAUMENDOCK, UND DIE TAFEL DER VERSUCHE IST EIN KASTEN, DER IN SICH ROLLT.
 *
 * Die Schalttafel stand oben und die Tafel darunter, und die wuchs mit jedem Versuch: Wer die älteren Zeilen las,
 * rollte die Steckplätze aus dem Bild und für den nächsten Versuch wieder zurück. Jetzt füllt das Brett die Bühne
 * (dieselbe Rechnung gegen 100dvh und --ar-reserve wie bei den Raster-Brettern), die Schalttafel ist die letzte Zeile
 * und klebt dort (`.ar-dock`, in brett.js gesetzt, nur solange sie steht), und die Tafel nimmt, was dazwischen bleibt,
 * mindestens acht Rem — reicht das Fenster dafür nicht, rollt die Bühne, und die Schalttafel klebt. Ein neuer Versuch
 * wächst im Kasten und schiebt sie nie weg; der Kasten rollt dabei in sich zum neuesten, und der steht oben.
 *
 * DIE LEGENDE STEHT IM KASTEN UNTER DER LISTE. Darüber nähme sie auf 375 × 812 Pixeln 122 der 234, die der Kasten zu
 * zweit hat, und das in jedem Zug; darunter steht sie da, solange die Liste kurz ist — in den ersten Versuchen, wenn man
 * sie braucht —, und rollt danach mit.
 *
 * DIE TÜR FÄLLT IM DOCK WEG, aus demselben Grund wie im flachen Querformat: Sie ist Aufschrift, und jeder Pixel des Docks
 * fehlt der Tafel. Wer zuschaut, sieht sie weiter über dem verdeckten Code.
 *
 * Umgestellt wird nur die Fläche. Vorgelesen wird in der Reihenfolge des Markups — Kopf, Schalttafel, Legende, Tafel —,
 * dieselbe wie auf dem Schreibtisch, und in der Tafel sind keine Knöpfe, die die Tabulatorfolge verschöben.
 */
@media (max-width: 47.99rem) and (min-height: 34rem) {
  .ar-tk__raster {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--ar-hauskopf) - var(--ar-reserve));
    min-height: calc(100dvh - var(--ar-hauskopf) - var(--ar-reserve));
  }

  .ar-tk__raster > .ar-tk__mitte {
    order: 1;
  }

  .ar-tk__mitte.ar-dock .ar-tk__tuer {
    display: none;
  }

  /* Ohne `align-content: start` streckte das Raster Legende und Liste über den ganzen Kasten, solange er nicht voll ist. */
  .ar-tk__raster > .ar-tk__rechts {
    flex: 1 1 0;
    align-content: start;
    min-height: 8rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 2px solid var(--ar-kante);
  }

  .ar-tk__rechts > .ar-tk__legende {
    order: 1;
  }
}

/* ------------------------------------------------------------ Schreibtisch */

/*
 * Ab 38rem am Container .ar-tk stehen links Schalttafel oder Code und rechts die Tafel der Versuche. Die Zahl liegt
 * zwischen dem, was außerhalb des Schreibtischs vorkommt, und dem, was der kleinste Schreibtisch hat: Außerhalb ist das
 * Brett höchstens 36rem breit und .ar-tk darin nach 5 px Brettrand und 0,5rem Polster je Seite höchstens 34,4rem; auf
 * dem kleinsten Schreibtisch von 1024 Pixeln trägt die Bühne rund 60rem.
 *
 * LINKS SECHZIG HUNDERTSTEL, RECHTS VIERZIG. Die Spalte nahm 45 zu 55, und das war die falsche Richtung: Links stand
 * das Gerät, an dem gespielt wird — fünf Steckplätze, sechs Tasten, ein Knopf —, rechts eine Liste aus Zeilen, deren
 * Schlussspalte auf 1920 Pixeln rund 26rem leer blieb. Gemessen auf 1440: links 597 Pixel für einen Steckplatz von 88,
 * rechts 730 für einen Satz von 14rem. Jetzt trägt die Schalttafel die Fläche, und die Steckplätze wachsen mit ihr: Der
 * Deckel geht von 28,8 auf 36,5rem, ein Platz damit von 88 auf 113 Pixel (ein Viertel bis ein Drittel mehr), und der
 * Palettenglyph wächst mit — ein Steckplatz von 113 Pixeln über einer Taste von 44 sähe nach einem
 * unfertigen Bauteil aus.
 *
 * Die Mindestbreite links rechnet mit fünf Plätzen zu 52,8 px, vier Fugen zu 0,3rem und 18,4 px für Kante und Polster der
 * Schalttafel: 301,6 px, aufgerundet 19rem. Der verdeckte Code steht darin weiter in einer Reihe (237,6 px). Die Palette
 * steht dort zu dritt in zwei Reihen: Sechs nebeneinander stünden unter fünf hohen Plätzen als Reihe flacher Riegel. Die
 * Schalttafel klebt unter dem Kopf, damit ein langer Verlauf rechts die Steckplätze nicht mitnimmt.
 *
 * DIE SCHWELLE STAND AUF 38rem, UND DORT WURDEN DIE SYMBOLE AM UMBRUCH KLEINER STATT GRÖSSER. Bei 46rem Container gibt
 * die Vierzigerspalte 18,1rem her, und ein Registrierstreifen mit seinem Boden von 1,15rem je Symbol braucht
 * 7,3 + 8,8 × 1,15 = 17,42rem. Das passt, und die Zahl bleibt deshalb bei 46: Praktisch springt der Container ohnehin
 * von 34,4rem (Tablet) auf rund 59rem (1024 Pixel), dazwischen liegt nichts.
 *
 * AUF EINEM FLACHEN SCHREIBTISCH BLEIBT DER DECKEL KLEIN. Bei 1024 × 481 hat die klebende linke Spalte 400 Pixel Fenster,
 * und die Schalttafel misst mit 113er-Plätzen mehr. Unter 46rem Fensterhöhe geht der Deckel deshalb auf 30rem zurück;
 * ein Steckplatz steht dann bei 92 Pixeln, die Tafel bei rund 390.
 */
@container (min-width: 46rem) {
  .ar-tk__raster {
    grid-template-columns: minmax(19rem, 3fr) minmax(0, 2fr);
    grid-template-areas:
      'kopf kopf'
      'mitte liste';
    align-items: start;
    column-gap: 0.75rem;
  }

  .ar-tk__raster > .ar-tk__kopf {
    grid-area: kopf;
  }

  .ar-tk__raster > .ar-tk__mitte {
    grid-area: mitte;
  }

  /*
   * SIE KLEBT NUR, WENN SIE GANZ HINTER DEN KOPF PASST. Gemessen auf 1024 × 481: Der Kopf nimmt 81 Pixel, es bleiben
   * 400 — die Schalttafel misst dort 375 ohne Hinweiszeile, 405 mit ihr und 416 mit dem Warnkasten „Diese Kombination
   * wurde schon versucht". Eine Hinweiszeile steht bei jeder Farbe, die gerade nicht dran ist, also bei den meisten
   * am Tisch die meiste Zeit; geklebt lagen davon bis zu sechzehn Pixel unter dem Falz, und zwar ausgerechnet der
   * Prüfknopf. Wer nicht ganz hinpasst, klebt lieber gar nicht: Dann scrollt die Tafel mit, und alles bleibt erreichbar.
   *
   * DIE SCHWELLE STAND AUF 34rem, UND DIE PANZERSCHRANKTÜR HAT SIE GEHOBEN. Sie misst mit ihrer Fuge rund 62 Pixel;
   * damit steht die Schalttafel im ungünstigsten Fall — mit Hinweiszeile und Warnkasten — bei 478 statt 416. Bei
   * 34rem Fensterhöhe blieben nach dem Kopf 463, und der Prüfknopf läge wieder unter dem Falz. 38rem geben 527.
   */
  @media (min-height: 38rem) {
    .ar-tk__raster > .ar-tk__mitte {
      position: sticky;
      top: calc(var(--ar-hauskopf) + 0.5rem);
    }
  }

  .ar-tk__raster > .ar-tk__rechts {
    grid-area: liste;
  }

  .ar-tk__rechts > .ar-tk__versuche {
    container: ar-tk-liste / inline-size;
  }

  /*
   * Die Tafel hält sich an ihre Steckplätze, statt die ganze Spalte zu nehmen: Der Deckel bindet bei 36,5rem, und ein Kasten,
   * der 200 Pixel breiter steht als alles darin, sieht aus wie ein Rahmen ohne Bild.
   */
  .ar-tk__schalttafel {
    --ar-tk-tafel: 36.5rem;
    --ar-tk-glyph: 2.7rem;
    justify-self: center;
    width: 100%;
    max-width: calc(var(--ar-tk-tafel) + 1.5rem);
    gap: 0.6rem;
    padding: 0.6rem;
  }

  .ar-tk__palette {
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    gap: 0.35rem;
  }

  .ar-tk__taste {
    min-height: 3.25rem;
  }

  .ar-tk__pruefen {
    min-height: 3.5rem;
  }

  /* Die Tür wächst mit dem Deckel — ein Handrad von 38 Pixeln über Steckplätzen von 113 wäre ein fremdes Bauteil. */
  .ar-tk__tuer {
    height: 3.4rem;
    gap: 0.7rem;
  }

  .ar-tk__rad {
    width: 2.9rem;
    height: 2.9rem;
  }

  @media (max-height: 46rem) {
    .ar-tk__schalttafel {
      --ar-tk-tafel: 30rem;
      --ar-tk-glyph: 2.4rem;
    }

    .ar-tk__taste {
      min-height: 2.9rem;
    }

    .ar-tk__pruefen {
      min-height: 3rem;
    }

    .ar-tk__tuer {
      height: 3rem;
    }

    .ar-tk__rad {
      width: 2.5rem;
      height: 2.5rem;
    }
  }
}

/*
 * RECHTS STEHT EIN REGISTRIERSTREIFEN UND KEIN ZWEITES GERÄT. Die Symbole standen dort bei 2,64rem, also größer als die
 * fünf Steckplätze links jemals waren, und trotzdem blieb in der Schlussspalte auf 1920 Pixeln rund 26rem Leerraum je Zeile:
 * Die Liste war das breiteste Bauteil des Bretts und hatte am wenigsten zu sagen. Sie ist jetzt die Vierzigerspalte, der
 * Deckel liegt bei 1,9rem, Boden und Polster rücken zusammen, und die Zeilen lesen sich als Streifen aus einem
 * Registrierapparat statt als Kacheln.
 *
 * Fest sind rund 7,3rem: Nummer 1,2, Marke 1, vier Spaltenfugen zu 0,55, Polster 0,7, die Farbkante von 5 px und je vier
 * Fugen zu 0,22rem zwischen Symbolen und Lampen. Den Rest teilen sich fünf Symbole und fünf Lampen zu 1 : 0,78, ein
 * Symbol ist also höchstens (Breite − 7,3rem) / 8,9.
 *
 * DER TEILER STAND AUF 8,8, UND DAS WAR DIE FALSCHE RICHTUNG: Ein KLEINERER Teiler macht das Symbol GRÖSSER, „mit 8,8
 * bleibt Luft fürs Runden" kehrte die Rechnung um. Auf 1024 Pixeln — der Breite, die derselbe Absatz als kleinsten
 * Schreibtisch nennt — stand die Zeile damit 0,72 Pixel breiter als ihre Spalte. Es sind jetzt 9; die Luft liegt damit
 * dort, wo sie gemeint war.
 *
 * DIE LAMPE STEHT ZU 0,78 STATT 0,73, und das ist kein Geschmack. Ihre Formmarke hat einen Boden von 0,8rem — so groß
 * war die Lampe des Rückfalls auf 320 Pixeln, und kleiner lesen sich Haken, halbe Scheibe und gestrichelter Kreis nicht
 * auseinander. Bei 0,73 fiele die Lampe am neuen Deckel auf 1,39rem, und die Marke deckte sie zu 58 Prozent; bei 0,78
 * sind es 1,48rem und 54. Die gelieferte Zeichnung bleibt damit sichtbar.
 *
 * Der Satz steht schmal unter Symbolen und Lampen und ab 34rem Spaltenbreite daneben: Dort bleiben ihm nach Symbolen,
 * Lampen und Festmaß rund 9rem, und mehr braucht „5 an der richtigen Stelle · 0 woanders“ nicht.
 */
@container ar-tk-liste (min-width: 0) {
  .ar-tk__versuch {
    --ar-tk-symbol: clamp(1.15rem, (100cqi - 7.3rem) / 9, 1.9rem);
    --ar-tk-lampe: calc(var(--ar-tk-symbol) * 0.78);
    column-gap: 0.55rem;
    row-gap: 0.05rem;
    padding: 0.2rem 0.45rem 0.2rem 0.25rem;
    grid-template-areas:
      'nr marke symbole lampen .'
      'nr marke ergebnis ergebnis ergebnis';
  }

  .ar-tk__symbole,
  .ar-tk__lampen {
    gap: 0.22rem;
  }
}

@container ar-tk-liste (min-width: 34rem) {
  .ar-tk__versuch {
    grid-template-areas: 'nr marke symbole lampen ergebnis';
  }
}

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

.ar-g-tk-umriss { fill: var(--ar-noir); stroke: var(--ar-noir); stroke-width: 8; stroke-linejoin: bevel; }
.ar-g-tk-linie { fill: none; stroke: var(--ar-noir); stroke-width: 4; stroke-linecap: square; stroke-linejoin: bevel; }
.ar-g-tk-stahl { fill: var(--ar-noir-3); stroke: var(--ar-kante-griff); stroke-width: 4; }
.ar-g-tk-mulde { fill: var(--ar-noir-2); }
.ar-g-tk-kerbe { fill: none; stroke: var(--ar-kreide-2); stroke-width: 3; stroke-linecap: square; }
.ar-g-tk-haken { fill: none; stroke: var(--ar-noir); stroke-width: 12; stroke-linecap: square; stroke-linejoin: miter; }
.ar-g-tk-ring { fill: none; stroke: var(--ar-kreide); stroke-width: 8; }
.ar-g-tk-aus { fill: var(--ar-noir); stroke: var(--ar-kante-griff); stroke-width: 6; stroke-dasharray: 10 8; }
.ar-g-tk-strich { fill: none; stroke: var(--ar-kante-griff); stroke-width: 8; stroke-linecap: square; }
.ar-g-tk-form-rand { fill: none; stroke: var(--ar-noir); stroke-width: 30; stroke-linecap: square; stroke-linejoin: miter; }
.ar-g-tk-form-haken { fill: none; stroke: var(--ar-kreide); stroke-width: 14; stroke-linecap: square; stroke-linejoin: miter; }
.ar-g-tk-form-ringrand { fill: none; stroke: var(--ar-noir); stroke-width: 22; }
.ar-g-tk-form-halb { fill: var(--ar-kreide); }
.ar-g-tk-form-ring { fill: none; stroke: var(--ar-kreide); stroke-width: 9; }
.ar-g-tk-form-strich { stroke-dasharray: 14 10; }
.ar-g-tk-kegel { fill: var(--ar-noir-2); }

/* Das Handrad: Kranz, Scheibe, gravierte Zahlen, Speichen, Nabe — und die Lesemarke, die sich nicht mitdreht. */
.ar-g-tk-radrand { fill: var(--ar-noir); stroke: var(--ar-noir); stroke-width: 7; }
.ar-g-tk-radkranz { fill: var(--ar-noir-3); stroke: var(--ar-kante-griff); stroke-width: 3; }
.ar-g-tk-radscheibe { fill: var(--ar-noir-2); stroke: var(--ar-kante-griff); stroke-width: 2; }
.ar-g-tk-gravur { fill: var(--ar-kreide-2); font-family: var(--ar-schrift-mono); font-size: 11px; }
.ar-g-tk-speiche { fill: none; stroke: var(--ar-kante-griff); stroke-width: 9; stroke-linecap: square; }
.ar-g-tk-nabe { fill: var(--ar-kante-griff); stroke: var(--ar-noir); stroke-width: 3; }
.ar-g-tk-nabenloch { fill: var(--ar-noir); }
.ar-g-tk-zeiger { fill: var(--ar-funke); stroke: var(--ar-noir); stroke-width: 2; }