/* Knobelbande Geheimschrift — Regeln: 03-spiele/geheimschrift/CLAUDE.md
   Farben und Maße nur aus 05-gemeinsam/design/knobelbande.css (Kennfarbe über --farbe-art). */

.geheimschrift {
  --gs-strich: .16em;               /* Strichstärke der Gitter-Zeichen */
  container-type: inline-size;
  max-width: 34rem;
  margin: var(--abstand-5) auto;
}
/* Am Handy nimmt das Spiel die Innenabstände der Rätselkarte mit, damit ein Wort mit 7 Buchstaben
   in eine Zeile passt (wie das 9×9-Sudoku). */
@media (max-width: 34rem) {
  .geheimschrift { margin-inline: calc(var(--abstand-4) * -1 + var(--abstand-1)); }
}
.geheimschrift--aktiv .gs-druck { display: none; }
.gs-verfahren { font-weight: 800; color: var(--farbe-art-dunkel); }
.gs-anleitung { margin: 0 0 var(--abstand-3); font-size: var(--groesse-klein); color: var(--tinte-weich); }

/* --- Schlüssel ----------------------------------------------------------- */
.gs-schluessel {
  background: var(--papier-weiss);
  border: 1px solid var(--papier-kante);
  border-radius: var(--radius-mittel);
  box-shadow: var(--schatten-flach);
  padding: var(--abstand-3);
  margin-bottom: var(--abstand-4);
}
.gs-schluessel__titel {
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  margin: 0 0 var(--abstand-2);
}

/* Schlüsselleiste: 26 Paare in zwei Reihen à 13 (oben Klartext, unten Geheimzeichen) */
.gs-leiste {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gs-leiste > li { margin: 0; }
.gs-paar {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--papier);
  font-size: var(--groesse-klein);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.gs-paar__oben { font-weight: 800; width: 100%; text-align: center; border-bottom: 1px dashed var(--linie); }
.gs-paar__unten { color: var(--blaustift); font-weight: 700; min-height: 1.6em; }

.gs-scheibe-steuer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-3);
  margin-top: var(--abstand-3);
}
.gs-scheibe-steuer .knopf { min-width: var(--tippflaeche); min-height: var(--tippflaeche); }
.gs-scheibe-stand { font-weight: 700; min-width: 9em; text-align: center; }

/* Gartenzaun-Schlüssel: zwei Gitter 3×3, zwei Kreuze */
.gs-gitter-reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: var(--abstand-4);
}
.gs-gitter {
  display: grid;
  grid-template-columns: repeat(3, 2.4rem);
  grid-auto-rows: 2.4rem;
}
.gs-gitter > span,
.gs-kreuz > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .15em;
  font-weight: 800;
  border: 0 solid var(--tinte);
}
.gs-gitter > span:nth-child(-n+6) { border-bottom-width: var(--gs-strich); }
.gs-gitter > span:not(:nth-child(3n)) { border-right-width: var(--gs-strich); }
.gs-kreuz {
  display: grid;
  grid-template-columns: repeat(2, 2.5rem);
  grid-auto-rows: 2.5rem;
  transform: rotate(45deg);
  margin: 1rem;
}
.gs-kreuz > span:nth-child(1) { border-right-width: var(--gs-strich); border-bottom-width: var(--gs-strich); }
.gs-kreuz > span:nth-child(2) { border-left-width: var(--gs-strich); border-bottom-width: var(--gs-strich); }
.gs-kreuz > span:nth-child(3) { border-right-width: var(--gs-strich); border-top-width: var(--gs-strich); }
.gs-kreuz > span:nth-child(4) { border-left-width: var(--gs-strich); border-top-width: var(--gs-strich); }
.gs-kreuz > span > * { transform: rotate(-45deg); }
.gs-punkt {  /* Punkt im Schlüssel; als Rahmen gezeichnet, damit er auch gedruckt wird */
  display: inline-block;
  width: 0;
  height: 0;
  border: .17em solid currentColor;
  border-radius: 50%;
}
.gs-gitter .gs-luecke,
.gs-kreuz .gs-luecke {
  display: inline-block;
  width: .9em;
  border-bottom: 2px dotted var(--bleistift-hell);
  height: 1.1em;
}

/* --- Gitter-Zeichen (Gartenzaun-Code), nur aus Rahmen gezeichnet ----------- */
.gs-sym {
  position: relative;
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 0 solid currentColor;
  vertical-align: middle;
}
.gs-sym[data-z="q1"], .gs-sym[data-z="p1"] { border-width: 0 var(--gs-strich) var(--gs-strich) 0; }
.gs-sym[data-z="q2"], .gs-sym[data-z="p2"] { border-width: 0 var(--gs-strich) var(--gs-strich) var(--gs-strich); }
.gs-sym[data-z="q3"], .gs-sym[data-z="p3"] { border-width: 0 0 var(--gs-strich) var(--gs-strich); }
.gs-sym[data-z="q4"], .gs-sym[data-z="p4"] { border-width: var(--gs-strich) var(--gs-strich) var(--gs-strich) 0; }
.gs-sym[data-z="q5"], .gs-sym[data-z="p5"] { border-width: var(--gs-strich); }
.gs-sym[data-z="q6"], .gs-sym[data-z="p6"] { border-width: var(--gs-strich) 0 var(--gs-strich) var(--gs-strich); }
.gs-sym[data-z="q7"], .gs-sym[data-z="p7"] { border-width: var(--gs-strich) var(--gs-strich) 0 0; }
.gs-sym[data-z="q8"], .gs-sym[data-z="p8"] { border-width: var(--gs-strich) var(--gs-strich) 0 var(--gs-strich); }
.gs-sym[data-z="q9"], .gs-sym[data-z="p9"] { border-width: var(--gs-strich) 0 0 var(--gs-strich); }
/* Kreuz-Zeichen: ein um 45° gedrehtes Quadrat, von dem nur zwei Seiten zu sehen sind */
.gs-sym[data-z^="x"]::before, .gs-sym[data-z^="y"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .8em;
  height: .8em;
  margin: -.4em 0 0 -.4em;
  border: 0 solid currentColor;
  transform: rotate(45deg);
}
/* x1 oben → V, x2 rechts → <, x3 unten → Λ, x4 links → > */
.gs-sym[data-z="x1"]::before, .gs-sym[data-z="y1"]::before { border-width: 0 var(--gs-strich) var(--gs-strich) 0; transform: translateY(-.28em) rotate(45deg); }
.gs-sym[data-z="x2"]::before, .gs-sym[data-z="y2"]::before { border-width: 0 0 var(--gs-strich) var(--gs-strich); transform: translateX(.28em) rotate(45deg); }
.gs-sym[data-z="x3"]::before, .gs-sym[data-z="y3"]::before { border-width: var(--gs-strich) 0 0 var(--gs-strich); transform: translateY(.28em) rotate(45deg); }
.gs-sym[data-z="x4"]::before, .gs-sym[data-z="y4"]::before { border-width: var(--gs-strich) var(--gs-strich) 0 0; transform: translateX(-.28em) rotate(45deg); }
/* Punkt: p- und y-Zeichen */
.gs-sym[data-z^="p"]::after, .gs-sym[data-z^="y"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -.13em 0 0 -.13em;
  border: .13em solid currentColor;
  border-radius: 50%;
}
/* bei den Kreuz-Zeichen sitzt der Punkt in der Öffnung, nicht an der Spitze */
.gs-sym[data-z="y1"]::after { transform: translateY(-.25em); }
.gs-sym[data-z="y2"]::after { transform: translateX(.25em); }
.gs-sym[data-z="y3"]::after { transform: translateY(.25em); }
.gs-sym[data-z="y4"]::after { transform: translateX(-.25em); }

/* --- Botschaft ------------------------------------------------------------ */
.gs-geheimzeile {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: var(--groesse-gross);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.6;
  background: var(--papier-weiss);
  border: 1px dashed var(--bleistift-hell);
  border-radius: var(--radius-klein);
  padding: var(--abstand-2) var(--abstand-3);
  margin: 0 0 var(--abstand-4);
  overflow-wrap: anywhere;
}
.gs-spiegel { transform: scaleX(-1); }

.gs-botschaft {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3) var(--abstand-4);
  padding: var(--abstand-2) 0;
  touch-action: manipulation;
  user-select: none;
}
.gs-botschaft:focus-visible { outline-offset: 6px; }
.gs-wort { display: inline-flex; align-items: flex-end; gap: 2px; }
.gs-satz { font-size: var(--groesse-h3); font-weight: 800; line-height: 1; padding-bottom: .4rem; }

.gs-stelle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* 44 px; nur bei 360 px Breite etwas schmaler (7 Felder + Satzzeichen pro Zeile), Höhe bleibt 68 px */
  width: min(var(--tippflaeche), calc((100cqi - 12px - .9rem) / 7));
  min-height: 4.25rem;
  padding: .3rem 0 .2rem;
  border: 2px solid transparent;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--tinte);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Abschreiben (rückwärts, Spiegel): keine Geheimzeichen über der Linie → niedriger, mind. 44 px */
.gs-stelle:not(:has(.gs-zeichen, .gs-sym)) { min-height: 2.9rem; justify-content: flex-end; }
.gs-stelle .gs-zeichen, .gs-stelle .gs-sym {
  font-weight: 700;
  font-size: var(--groesse-text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.gs-stelle .gs-sym { font-size: 1.3rem; margin: .1rem 0; }
.gs-klar {
  display: block;
  width: 80%;
  min-height: 1.9rem;
  border-bottom: 2px solid var(--tinte);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-h3);
  line-height: 1.9rem;
  text-align: center;
  color: var(--blaustift);
}
.gs-stelle.ist-gleich { background: var(--zettel-gelb); }
.gs-stelle.ist-gewaehlt { background: var(--farbe-art); border-color: var(--tinte); }
.gs-stelle.ist-doppelt .gs-klar { color: var(--fehler); background: var(--fehler-hell); }
.gs-stelle.ist-falsch { box-shadow: inset 0 0 0 3px var(--fehler); }
.gs-stelle:focus-visible { outline: 3px solid var(--blaustift); outline-offset: 1px; }

/* Leere Stellen im Druck und ohne JavaScript */
.gs-druck .gs-stelle { cursor: default; }

/* --- Tasten und Aktionen -------------------------------------------------- */
.gs-tasten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tippflaeche), 1fr));
  gap: var(--abstand-1);
  margin-top: var(--abstand-4);
}
.gs-taste {
  min-height: var(--tippflaeche);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-klein);
  background: var(--papier-weiss);
  color: var(--tinte);
  font: inherit;
  font-size: var(--groesse-gross);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.gs-taste:hover { background: var(--papier-alt); }
.gs-taste:active { background: var(--farbe-art); }
.gs-taste.ist-vergeben { background: var(--papier-alt); color: var(--bleistift); border-color: var(--bleistift-hell); }
.gs-taste--breit {
  grid-column: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-1);
  font-size: var(--groesse-klein);
}

.gs-aktionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-3);
  margin-top: var(--abstand-4);
}
.gs-aktionen .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); }
.gs-frage { margin-top: var(--abstand-4); }
.gs-meldung { min-height: 1.5em; margin: var(--abstand-3) 0 0; text-align: center; font-weight: 800; }
.gs-meldung--fehler { color: var(--fehler); }
.gs-meldung--gut { color: var(--erfolg); }
.gs-stempelplatz { text-align: center; }
.gs-stempelplatz:empty { display: none; }
.gs-stempel { display: inline-block; margin: 0 auto var(--abstand-4); }
/* Gelöst: Tasten und Prüfen verschwinden, „Von vorn“ heißt „Nochmal spielen“ */
.geheimschrift--geloest .gs-anleitung,
.geheimschrift--geloest .gs-tasten,
.geheimschrift--geloest .gs-aktionen .knopf--sekundaer { display: none; }
.geheimschrift--geloest .gs-aktionen { grid-template-columns: 1fr; }
.geheimschrift--geloest .gs-stelle { background: var(--erfolg-hell); cursor: default; }
.geheimschrift--geloest .gs-klar { color: var(--erfolg); }

/* --- Druck: Rätsel + Schlüssel + leere Felder, keine Bedienung ------------- */
@media print {
  .geheimschrift--aktiv .gs-druck { display: block; }
  .gs-spiel, .gs-scheibe-steuer { display: none !important; }
  .gs-schluessel { box-shadow: none; border-color: var(--tinte); break-inside: avoid; }
  .gs-paar { background: none; border-color: var(--tinte); }
  .gs-leiste--scheibe .gs-paar__unten { visibility: hidden; } /* Kind trägt die Verschiebung selbst ein */
  .gs-druck .gs-klar { color: transparent; }
  .gs-druck .gs-stelle { min-height: 4.5rem; width: 11mm; }
  .geheimschrift { margin: 4mm 0; max-width: none; }
  .gs-geheimzeile { border-color: #000; }
}