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

   Spielspezifische Tokens (nur hier, nirgends sonst benutzt):
   - Kork: Grund der Pinnwand. Warmes Hellbraun mit Sprenkeln, hell genug, dass jede Fadenfarbe
     darauf steht.
   - Fäden 1–9: neun Farben, die sich auf Kork und untereinander gut trennen — Rot, Blau, Grün,
     Orange, Violett, Türkis, Pink, Anthrazit, Kreideweiß. Gelb fehlt mit Absicht (auf Kork kaum zu
     sehen). Rot/Grün und Blau/Violett allein trennt nicht jedes Auge: Deshalb trägt jedes Paar
     zusätzlich ein eigenes Symbol (arten/pinnwand.py, SYMBOLE), im Druck dazu einen Buchstaben.
   - --faden-N-symbol: Farbe des Symbols auf dem Pinkopf (Kontrast ≥ 4,5 : 1 zur Kopffarbe). */

.art-pinnwand,
.pinnwand {
  --kork: #e3c79c;
  --kork-sprenkel: #c49a63;
  --kork-linie: rgba(94, 60, 22, .22);
  --kork-rand: #8a5a2b;
  --pin-schatten: rgba(40, 24, 8, .35);
  --faden-1: #d32638; --faden-1-symbol: #fff;
  --faden-2: #1c5fd4; --faden-2-symbol: #fff;
  --faden-3: #1d8a3a; --faden-3-symbol: #fff;
  --faden-4: #ef6c0c; --faden-4-symbol: #2a1600;
  --faden-5: #7a3cc4; --faden-5-symbol: #fff;
  --faden-6: #0b9488; --faden-6-symbol: #fff;
  --faden-7: #df4aa6; --faden-7-symbol: #2a0019;
  --faden-8: #2b2e36; --faden-8-symbol: #fff;
  --faden-9: #fbf8f0; --faden-9-symbol: #2b2e36;
}
.pinnwand-farbe-1 { --faden: var(--faden-1); --faden-symbol: var(--faden-1-symbol); }
.pinnwand-farbe-2 { --faden: var(--faden-2); --faden-symbol: var(--faden-2-symbol); }
.pinnwand-farbe-3 { --faden: var(--faden-3); --faden-symbol: var(--faden-3-symbol); }
.pinnwand-farbe-4 { --faden: var(--faden-4); --faden-symbol: var(--faden-4-symbol); }
.pinnwand-farbe-5 { --faden: var(--faden-5); --faden-symbol: var(--faden-5-symbol); }
.pinnwand-farbe-6 { --faden: var(--faden-6); --faden-symbol: var(--faden-6-symbol); }
.pinnwand-farbe-7 { --faden: var(--faden-7); --faden-symbol: var(--faden-7-symbol); }
.pinnwand-farbe-8 { --faden: var(--faden-8); --faden-symbol: var(--faden-8-symbol); }
.pinnwand-farbe-9 { --faden: var(--faden-9); --faden-symbol: var(--faden-9-symbol); }

.pinnwand {
  max-width: min(100%, 34rem);
  margin: var(--abstand-5) auto;
}
/* Breitenstufe aus arten/pinnwand.py: kleine Gitter nicht riesig aufblasen */
.pinnwand--klein { max-width: min(100%, 22rem); }
.pinnwand--mittel { max-width: min(100%, 28rem); }
/* 8×8 und 9×9 am Handy: Innenabstand der Rätselkarte mitnehmen (wie das 9×9-Sudoku) —
   bei 390 px rund 38 px je Feld statt 36 px */
@media (max-width: 34rem) {
  .pinnwand--gross { margin-inline: calc(var(--abstand-4) * -1 + var(--abstand-1)); max-width: none; }
}
.pinnwand--aktiv .pinnwand-druck,
.pinnwand--aktiv .pinnwand-ohne-js { display: none; }

.pinnwand-druck,
.pinnwand-feld {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-klein);
  /* Kork: Grundton mit zwei versetzten Sprenkel-Rastern */
  background-color: var(--kork);
  background-image:
    radial-gradient(circle at 30% 40%, var(--kork-sprenkel) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 75%, var(--kork-sprenkel) 0 .8px, transparent 1.3px);
  background-size: 9px 9px, 13px 13px;
  box-shadow: var(--schatten-papier);
}
.pinnwand-feld {
  touch-action: none;          /* beim Ziehen nicht scrollen oder zoomen */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.pinnwand-feld:focus { outline: none; }
.pinnwand-feld:focus-visible { outline: 3px solid var(--blaustift); outline-offset: 4px; }

.pinnwand-grund { fill: none; }
.pinnwand-linien { fill: none; stroke: var(--kork-linie); stroke-width: .35; }
.pinnwand-rahmen { fill: none; stroke: var(--kork-rand); stroke-width: .8; }

/* Belegte Felder zart in Fadenfarbe — so sieht man, was noch frei ist */
.pinnwand-toenung { fill: var(--faden); opacity: .3; }

/* Faden: locker (gestrichelt, dünn) bis er am zweiten Pin ankommt, dann straff mit Glanz */
.pinnwand-faden polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pinnwand-faden__linie {
  stroke: var(--faden);
  stroke-width: 2.4;
  stroke-dasharray: 2.6 1.4;
  filter: drop-shadow(0 .5px .4px var(--pin-schatten));
}
.pinnwand-faden__glanz { stroke: none; }
.pinnwand-faden.ist-aktiv .pinnwand-faden__linie { stroke-dasharray: none; stroke-width: 2.8; opacity: .85; }
.pinnwand-faden.ist-straff .pinnwand-faden__linie { stroke-dasharray: none; stroke-width: 3.4; opacity: 1; }
.pinnwand-faden.ist-straff .pinnwand-faden__glanz {
  stroke: rgba(255, 255, 255, .5);
  stroke-width: .7;
  transform: translate(-.5px, -.5px);
}
.pinnwand-farbe-9.pinnwand-faden .pinnwand-faden__linie { filter: drop-shadow(0 0 .5px var(--kork-rand)); }

/* Pin: Stecknadelkopf mit Schatten, Glanzpunkt und Symbol */
.pinnwand-pin__schatten { fill: var(--pin-schatten); }
.pinnwand-pin__kopf { fill: var(--faden); stroke: rgba(0, 0, 0, .35); stroke-width: .4; }
.pinnwand-pin__glanz { fill: rgba(255, 255, 255, .55); }
.pinnwand-pin__symbol { color: var(--faden-symbol); stroke-width: 2.6; }
.pinnwand-pin.ist-verbunden .pinnwand-pin__kopf { stroke: var(--papier-weiss); stroke-width: .7; }
.pinnwand-pin__buchstabe {
  font-family: var(--schrift-grund);
  font-size: 2.8px;
  font-weight: 800;
  fill: var(--tinte);
  dominant-baseline: middle;
  text-anchor: middle;
}

/* Tastatur: gewähltes Feld */
.pinnwand-cursor { fill: none; stroke: var(--blaustift); stroke-width: .9; stroke-dasharray: 1.6 .9; display: none; }
.pinnwand--tastatur .pinnwand-feld:focus .pinnwand-cursor { display: inline; }

.pinnwand--geloest .pinnwand-feld { box-shadow: 0 0 0 4px var(--erfolg-hell), var(--schatten-papier); }

.pinnwand-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-2);
  margin-top: var(--abstand-4);
}
.pinnwand-aktionen .knopf { min-height: var(--tippflaeche); }

.pinnwand-meldung {
  min-height: 1.6em;
  margin: var(--abstand-4) 0 0;
  text-align: center;
  font-weight: 800;
}
.pinnwand-meldung .stempel { margin-right: var(--abstand-3); }
.pinnwand--geloest .pinnwand-meldung { color: var(--erfolg); }
.pinnwand-lob { display: inline-block; margin-top: var(--abstand-2); }

/* Lösungsbild: am Bildschirm im Kasten „Lösung zeigen“ auf Kork, im Druckblatt klein und auf dem Kopf */
.pinnwand-loesung { display: block; width: 100%; height: auto; }
.pinnwand-aufdecken { margin: var(--abstand-2) auto 0; }
.pinnwand-aufdecken .pinnwand-loesung {
  border-radius: var(--radius-klein);
  background-color: var(--kork);
  background-image:
    radial-gradient(circle at 30% 40%, var(--kork-sprenkel) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 75%, var(--kork-sprenkel) 0 .8px, transparent 1.3px);
  background-size: 9px 9px, 13px 13px;
}
.pinnwand-loesungsfaden { fill: none; stroke: var(--faden); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Druck: eine A4-Seite, schwarz-weiß — Pins mit Symbol und Buchstabe, darunter Knicklinie und
   die Lösung klein auf dem Kopf (teile/druckblatt.html) */
@media print {
  .raetsel__geloest { display: none !important; }
  .pinnwand { max-width: none; margin: 4mm auto 0; break-inside: avoid; }
  .pinnwand--aktiv .pinnwand-druck { display: block; }
  .pinnwand-spiel, .pinnwand-ohne-js { display: none !important; }
  .pinnwand-druck,
  .pinnwand-loesung { background: none !important; box-shadow: none; }
  .pinnwand-druck { width: auto; max-width: 100%; height: 100mm; margin: 0 auto; }
  .pinnwand-druck .pinnwand-linien,
  .pinnwand-loesung .pinnwand-linien { stroke: #999; stroke-width: .3; }
  .pinnwand-druck .pinnwand-rahmen,
  .pinnwand-loesung .pinnwand-rahmen { stroke: #000; stroke-width: .6; }
  .pinnwand-druck .pinnwand-pin__kopf,
  .pinnwand-loesung .pinnwand-pin__kopf { fill: #fff; stroke: #000; stroke-width: .5; }
  .pinnwand-druck .pinnwand-pin__symbol,
  .pinnwand-loesung .pinnwand-pin__symbol { color: #000; }
  .pinnwand-druck .pinnwand-pin__buchstabe { fill: #000; }
  .pinnwand-loesungsfaden { stroke: #000; stroke-width: 2.2; }
  .druckblatt__loesung:has(.pinnwand-loesung) { width: fit-content; margin-left: auto; }
  .pinnwand-loesung { width: 42mm; }
}