/* Knobelbande Streichholz-Rätsel — Regeln in 03-spiele/streichholz/CLAUDE.md
   Farben aus 05-gemeinsam/design/knobelbande.css; Kennfarbe über --farbe-art (.art-streichholz am body).

   Spielspezifische Tokens (nur hier, nirgends sonst benutzt):
   - Holz: helles Streichholzgelb mit dunkler Kante, damit es auf Papier und im Druck steht.
   - Kopf: Zündkopf in Rot.
   - Tipp: Gelb-Orange für das Holz, das umgelegt werden muss. Neu (Lösung) ist Grün, weggenommen
     Rot gestrichelt; beides steht zusätzlich als Satz unter dem Bild (nicht nur Farbe). */

.streichholz {
  --holz: #e3b867;
  --holz-kante: #a8772b;
  --holz-kopf: #c8322b;
  --holz-tipp: #f2a900;
  position: relative;
  max-width: 34rem;
  margin: var(--abstand-3) auto;
}

/* Gemeinsame Zeichnung: Spiel, Druck, Tipp, Lösung (Maße in Holzlängen der viewBox) */
.streichholz-holz__holz { stroke: var(--holz); stroke-width: .13; stroke-linecap: round; }
.streichholz-holz__kante { stroke: var(--holz-kante); stroke-width: .17; stroke-linecap: round; }
.streichholz-holz__kopf { fill: var(--holz-kopf); }
.streichholz-holz--gehoben .streichholz-holz__kante { stroke: var(--blaustift); stroke-width: .27; }
.streichholz-holz--gehoben { transform: translate(-.05px, -.07px); }
.streichholz-holz--zeiger .streichholz-holz__kante { stroke: var(--tinte); stroke-width: .25; }
.streichholz-holz--tipp .streichholz-holz__kante { stroke: var(--holz-tipp); stroke-width: .3; }
.streichholz-holz--neu .streichholz-holz__kante { stroke: var(--gruenstift); stroke-width: .25; }
.streichholz-platz { stroke: var(--linie); stroke-width: .045; stroke-dasharray: .1 .09; stroke-linecap: round; }
.streichholz-platz--zeiger { stroke: var(--tinte) !important; stroke-width: .08; opacity: 1 !important; }
.streichholz-weg { stroke: var(--rotstift); stroke-width: .07; stroke-dasharray: .12 .08; stroke-linecap: round; }
.streichholz-punkt { fill: var(--linie); }

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

/* Spiel (nur mit JavaScript) */
.streichholz--aktiv .streichholz-druck,
.streichholz--aktiv .streichholz-ohne-js { display: none; }
.streichholz-spiel { position: relative; }
.streichholz-brett {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62vh, 25rem);
  margin: 0 auto;
  aspect-ratio: var(--seitenverhaeltnis, 1.5);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border-radius: var(--radius-mittel);
}
.streichholz-brett:focus { outline: none; }
.streichholz-brett:focus-visible { box-shadow: var(--fokus); }
.streichholz-platz { opacity: .6; }
.streichholz--traegt .streichholz-platz { opacity: 1; stroke: var(--blaustift); }
.streichholz--geister-beim-tragen:not(.streichholz--traegt) .streichholz-platz:not(.streichholz-platz--zeiger) { opacity: 0; }

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

.streichholz-aufdecken { margin: var(--abstand-2) auto 0; max-width: 28rem; }
.streichholz-loesungstext { font-family: var(--schrift-hand); font-size: 1.4em; text-align: center; margin: 0; }

@media print {
  .streichholz { max-width: none; margin: 4mm auto 0; break-inside: avoid; }
  .streichholz--aktiv .streichholz-druck { display: block; }
  .streichholz-spiel, .streichholz-ohne-js { display: none !important; }
  .streichholz-druck { width: auto; max-width: 100%; height: 70mm; max-height: none; }
  .druckblatt .streichholz-bild { width: auto; max-width: 100%; height: 45mm; max-height: none; }
  .streichholz-platz { stroke: #bbb; opacity: 1; }
  .streichholz-holz__holz { stroke: #fff; }
  .streichholz-holz__kante { stroke: #000; stroke-width: .19; }
  .streichholz-holz__kopf { fill: #000; }
  .streichholz-holz--neu .streichholz-holz__kante { stroke: #000; stroke-width: .3; }
  .streichholz-weg { stroke: #000; }
  .streichholz-punkt { fill: #999; }
}