/* Knobelbande „In einem Zug“ — Regeln in 03-spiele/linienzug/CLAUDE.md
   Farben aus 05-gemeinsam/design/knobelbande.css; Kennfarbe über --farbe-art (.art-linienzug am body).

   Spielspezifisches Token (nur hier): --lz-hinweis, Orange für Startkreis und Tipp-Linie. Gefahrene
   Linien sind Blaustift, die Lösung Grünstift; die Lösung trägt zusätzlich Zahlen (nicht nur Farbe).
   Maße der Zeichnung in viewBox-Einheiten: 1 = kleinster Punktabstand bzw. ein Karo-Kästchen. */

.linienzug {
  --lz-hinweis: #b86a00;
  position: relative;
  max-width: 34rem;
  margin: var(--abstand-3) auto;
}

/* Gemeinsame Zeichnung: Spiel, Druck, Tipp, Lösung */
.linienzug-karo { stroke: var(--linie-karo); stroke-width: .03; }
.linienzug-linie { stroke: var(--bleistift-hell); stroke-width: .05; stroke-dasharray: .02 .09; stroke-linecap: round; }
.linienzug-gefahren { stroke: var(--blaustift); stroke-width: .11; stroke-linecap: round; }
.linienzug-tipp { stroke: var(--lz-hinweis); stroke-width: .16; stroke-linecap: round; stroke-dasharray: .2 .12; }
.linienzug-loesung { stroke: var(--gruenstift); stroke-width: .1; stroke-linecap: round; }
.linienzug-punkt { fill: var(--tinte); }
.linienzug-punkt--getroffen { fill: var(--blaustift); }
.linienzug-ring { fill: none; stroke: var(--lz-hinweis); stroke-width: .1; }
.linienzug-kopf { fill: none; stroke: var(--blaustift); stroke-width: .07; }
.linienzug-zeiger { fill: none; stroke: var(--tinte); stroke-width: .06; stroke-dasharray: .12 .08; }
.linienzug-knick { fill: var(--blaustift); }
.linienzug-nr circle { fill: var(--papier-weiss); stroke: var(--gruenstift); stroke-width: .04; }
.linienzug-nr text { fill: var(--gruenstift); font: 800 .26px var(--schrift-grund); text-anchor: middle; dominant-baseline: central; }

.linienzug-druck,
.linienzug-bild { display: block; width: 100%; height: auto; max-height: 22rem; margin: 0 auto; }

/* Spiel (nur mit JavaScript); am Handy die Innenabstände der Rätselkarte mitnehmen (wie Sudoku 9×9) */
@media (max-width: 34rem) {
  .linienzug { margin-inline: var(--rand-spiel-breit); }
}
.linienzug--aktiv .linienzug-druck,
.linienzug--aktiv .linienzug-ohne-js,
.linienzug--aktiv ~ .raetsel__tipps .linienzug-tipp-kasten { display: none; }
.linienzug-spiel { position: relative; }
.linienzug-brett {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62vh, 28rem);
  margin: 0 auto;
  aspect-ratio: var(--seitenverhaeltnis, 1);
  cursor: pointer;
  touch-action: none;          /* beim Ziehen nicht scrollen oder zoomen */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--radius-mittel);
}
.linienzug-brett:focus { outline: none; }
.linienzug-brett:focus-visible { box-shadow: var(--fokus); }

.linienzug-leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--abstand-1) var(--abstand-3);
  margin-top: var(--abstand-2);
  padding-inline: var(--abstand-1);
  font-weight: 700;
}
.linienzug-meldung { min-height: 1.6em; margin: var(--abstand-1) var(--abstand-1) var(--abstand-2); font-family: var(--schrift-hand); font-size: 1.2em; }
.linienzug-meldung--gut { color: var(--gruenstift); }
.linienzug-meldung--fehler { color: var(--rotstift); }
.linienzug-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.linienzug-aktionen .knopf { flex: 1 1 7rem; }
.linienzug-stempel { position: absolute; top: 0; right: 0; z-index: 1; pointer-events: none; }

.linienzug-aufdecken { margin: var(--abstand-2) auto 0; max-width: 24rem; }

@media print {
  .linienzug { max-width: none; margin: 4mm auto 0; break-inside: avoid; }
  .linienzug--aktiv .linienzug-druck { display: block; }
  .linienzug-spiel, .linienzug-ohne-js { display: none !important; }
  .linienzug-druck { width: auto; max-width: 100%; height: 80mm; max-height: none; }
  .druckblatt .linienzug-bild { width: auto; max-width: 100%; height: 45mm; max-height: none; }
  .linienzug-karo { stroke: #ccc; }
  .linienzug-linie { stroke: #555; stroke-width: .04; stroke-dasharray: .08 .08; }
  .linienzug-punkt { fill: #000; }
  .linienzug-ring, .linienzug-tipp { stroke: #000; }
  .linienzug-loesung { stroke: #000; }
  .linienzug-nr circle { stroke: #000; fill: #fff; }
  .linienzug-nr text { fill: #000; }
}