/* Knobelbande Verfolgungsjagd. Regeln in 03-spiele/verfolgungsjagd/CLAUDE.md
   Farben aus 05-gemeinsam/design/knobelbande.css; Kennfarbe über --farbe-art (.art-verfolgungsjagd am body, Entscheidung 026). */

.verfolgungsjagd {
  max-width: min(100%, 30rem);
  margin: var(--abstand-5) auto;
}

/* ---------------------------------------------------------------- Blatt (ohne JS und Druck) */

.jagd-tafel {
  margin: 0 auto var(--abstand-4);
  border-collapse: collapse;
  background: var(--papier-weiss);
}
.jagd-tafel caption { font-weight: 800; margin-bottom: var(--abstand-2); }
.jagd-tafel td {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--bleistift-hell);
  text-align: center;
  vertical-align: middle;
}
.jagd-tafel .icon { width: 70%; height: 70%; vertical-align: middle; }
.jagd-tafel .jagd-feld--start { background: var(--farbe-art); }
.jagd-tafel .jagd-feld--baustelle .icon { color: var(--rotstift); }
.jagd-tafel .jagd-feld--pfuetze .icon { color: var(--blaustift); }
.jagd-tafel .jagd-feld--hinweis .icon { color: var(--sternfarbe); }
.jagd-kaestchen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-4);
  padding: 0;
  list-style: none;
  counter-reset: platz;
}
.jagd-kaestchen li {
  counter-increment: platz;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-klein);
}
.jagd-kaestchen li::before {
  content: counter(platz);
  position: absolute;
  left: 3px;
  top: 0;
  font-size: var(--groesse-klein);
  color: var(--bleistift);
}
.jagd-legende { font-size: var(--groesse-klein); }
.jagd-legende .icon { width: 1.4em; height: 1.4em; }
.jagd-legende__eintrag { white-space: nowrap; }
.jagd-blatt__titel { font-weight: 800; margin-bottom: var(--abstand-2); }
.verfolgungsjagd--aktiv .jagd-ohne-js { display: none; }

/* Lösung (Aufdeck-Kasten und Blatt 2): nummerierte Befehle mit Bild */
.jagd-loesung { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-4); padding-left: 1.6em; }
.jagd-loesung li { margin: 0 var(--abstand-3) 0 0; }
.jagd-loesung__bild { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; }
.jagd-loesung .jagd-zahl { font-size: var(--groesse-text); }
.jagd-loesung .jagd-marke { right: -4px; bottom: -6px; }

/* Mit JavaScript: Blatt nur noch für Vorlese-Programme (wie .nur-vorlesen) */
.verfolgungsjagd--aktiv .jagd-blatt {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Karte */

.jagd-karte {
  --b: 6;
  --h: 6;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--b), minmax(0, 1fr));
  width: 100%;
  padding: 3px;
  background: var(--linie);
  border-radius: var(--radius-mittel);
  box-shadow: var(--schatten-papier);
  user-select: none;
  -webkit-user-select: none;
}
.jagd-karte:focus { outline: none; }
.jagd-karte:focus-visible { box-shadow: var(--fokus); }

.jagd-feld {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 1;
  background: var(--papier-weiss);
  border: 1.5px solid var(--linie);  /* Rand statt Lücke: das Auto rückt in ganzen Feldern vor */
}
.jagd-feld .icon { width: 72%; height: auto; aspect-ratio: 1; stroke-width: 2.2; }
.jagd-feld--start { background: color-mix(in srgb, var(--farbe-art) 45%, var(--papier-weiss)); }
.jagd-feld--baustelle { background: var(--fehler-hell); }
.jagd-feld--baustelle .icon { color: var(--rotstift); }
.jagd-feld--pfuetze { background: var(--blaustift-hell); }
.jagd-feld--pfuetze .icon { color: var(--blaustift); }
.jagd-feld--hinweis .icon { color: var(--sternfarbe); transition: opacity .3s ease, transform .3s ease; }
.jagd-feld--hinweis.ist-gefunden .icon { opacity: .2; transform: scale(.7); }
.jagd-feld--ziel .icon { color: var(--tinte); }
.verfolgungsjagd--geloest .jagd-feld--ziel { background: var(--erfolg-hell); }
.jagd-feld.ist-getroffen { box-shadow: inset 0 0 0 3px var(--fehler); }

/* Das Auto liegt über dem Raster; translate in % der eigenen Größe = ganze Felder */
.jagd-auto {
  position: absolute;
  left: 3px;
  top: 3px;
  width: calc((100% - 6px) / var(--b));
  height: calc((100% - 6px) / var(--h));
  padding: 4px;
  transition: transform .5s ease-in-out;
  pointer-events: none;
  z-index: 1;
}
.jagd-auto__dreh {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--farbe-art);
  border: 2px solid var(--tinte);
  border-radius: 50%;
  box-shadow: var(--schatten-flach);
  transition: transform .4s ease-in-out;
}
.jagd-auto .icon { width: 78%; height: 78%; color: var(--tinte); stroke-width: 2.2; }
.jagd-auto.ist-sprung .jagd-auto__dreh { animation: jagd-sprung .5s ease-in-out; }
.jagd-auto.ist-stoss .jagd-auto__dreh { animation: jagd-stoss .35s ease; border-color: var(--fehler); }
/* Gestellt: das Auto rückt klein in die Ecke, der Fluchtwagen bleibt zu sehen */
.verfolgungsjagd--geloest .jagd-auto__dreh { background: var(--erfolg-hell); border-color: var(--erfolg); scale: .5; translate: -32% -32%; }
@keyframes jagd-sprung {
  50% { scale: 1.35; box-shadow: var(--schatten-gehoben); }
}
@keyframes jagd-stoss {
  25% { translate: -4px 0; }
  50% { translate: 4px 0; }
  75% { translate: -2px 0; }
}

/* ---------------------------------------------------------------- Meldungen */

.jagd-hinweise {
  margin: var(--abstand-3) 0 0;
  text-align: center;
  font-weight: 700;
}
.jagd-hinweise .icon { color: var(--sternfarbe); }
.jagd-meldung {
  min-height: 3em;
  margin: var(--abstand-3) 0 var(--abstand-2);
  text-align: center;
  font-weight: 800;
}
.jagd-meldung .stempel { margin-right: var(--abstand-3); }
.verfolgungsjagd--geloest .jagd-meldung { color: var(--erfolg); }
.jagd-lob { display: inline-block; margin-top: var(--abstand-2); }

/* ---------------------------------------------------------------- Befehlsleiste */

.jagd-titel {
  margin: 0 0 var(--abstand-2);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
}
.jagd-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-4);
  padding: 0;
  list-style: none;
}
.jagd-leiste li { margin: 0; }
.jagd-platz {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px dashed var(--bleistift-hell);
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--tinte);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .15s ease;
}
.jagd-platz:disabled { cursor: default; }
.jagd-platz.ist-belegt { border: 2px solid var(--tinte); background: var(--papier-weiss); box-shadow: 0 2px 0 var(--tinte); }
.jagd-platz.ist-belegt:not(:disabled):hover { background: var(--papier-alt); }
.jagd-platz:focus-visible { outline: none; box-shadow: var(--fokus); }
.jagd-platz.ist-aktiv { background: var(--farbe-art); transform: translateY(-3px); }
.jagd-platz.ist-fehler { background: var(--fehler-hell); border-color: var(--fehler); color: var(--fehler); }
.jagd-platz .icon { width: 1.7rem; height: 1.7rem; stroke-width: 2.4; }

/* Bild eines Befehls: Icon, „2ד, kleine Zahl für „2 vor“ */
.jagd-zahl { font-weight: 800; font-size: var(--groesse-gross); line-height: 1; }
.jagd-marke {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-weight: 800;
  font-size: var(--groesse-klein);
  line-height: 1;
}
.jagd-dreh--n { transform: rotate(-90deg); }
.jagd-dreh--s { transform: rotate(90deg); }
.jagd-dreh--w { transform: rotate(180deg); }
.jagd-spiegel { transform: scaleX(-1); }

/* ---------------------------------------------------------------- Befehlsknöpfe */

.jagd-befehle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}
.verfolgungsjagd--pfeile .jagd-befehle { grid-template-columns: repeat(4, minmax(3.5rem, 5rem)); justify-content: center; }
.verfolgungsjagd--sicht .jagd-befehle { grid-template-columns: repeat(3, minmax(4.75rem, 7rem)); justify-content: center; }
.jagd-befehl.knopf {
  position: relative;
  flex-direction: column;
  gap: var(--abstand-1);
  min-height: 4rem;
  padding: var(--abstand-2) var(--abstand-1);
}
.jagd-befehl__bild { position: relative; display: flex; align-items: center; justify-content: center; min-height: 1.9rem; min-width: 2.2rem; }
.jagd-befehl.knopf .icon { width: 1.9rem; height: 1.9rem; stroke-width: 2.4; }
.jagd-befehl .jagd-marke { right: -2px; bottom: -4px; }
.jagd-befehl__text { font-size: var(--groesse-klein); line-height: 1.1; }
/* Stufe „Pfeile“ ist für Kinder, die noch nicht lesen: nur das Bild, der Text bleibt fürs Vorlesen */
.verfolgungsjagd--pfeile .jagd-befehl__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.verfolgungsjagd--pfeile .jagd-befehl.knopf .icon { width: 2.2rem; height: 2.2rem; }

/* ---------------------------------------------------------------- Aktionen */

.jagd-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
}
.jagd-start.knopf { min-height: 3.25rem; padding-inline: var(--abstand-5); font-size: var(--groesse-gross); }
.jagd-start.knopf .icon { width: 1.6em; height: 1.6em; }

@media (prefers-reduced-motion: reduce) {
  .jagd-auto, .jagd-auto__dreh, .jagd-platz, .jagd-feld--hinweis .icon { transition: none; }
  .jagd-auto.ist-sprung .jagd-auto__dreh, .jagd-auto.ist-stoss .jagd-auto__dreh { animation: none; }
  .jagd-platz.ist-aktiv { transform: none; }
}

/* ---------------------------------------------------------------- Druck: Karte groß, leere Kästchen */

@media print {
  .raetsel__geloest { display: none !important; }
  .verfolgungsjagd { max-width: none; margin: 4mm 0 0; break-inside: avoid; }
  .jagd-spiel { display: none !important; }
  .verfolgungsjagd--aktiv .jagd-blatt {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .jagd-tafel { background: #fff; }
  .jagd-tafel td, .jagd-tafel td[class] { width: 15mm; height: 15mm; border: 1px solid #000; background: none; }
  .jagd-tafel .icon,
  .jagd-tafel .jagd-feld--baustelle .icon,
  .jagd-tafel .jagd-feld--pfuetze .icon,
  .jagd-tafel .jagd-feld--hinweis .icon { color: #000; }
  .jagd-kaestchen li { width: 15mm; height: 15mm; border: 1px solid #000; }
  .jagd-loesung--druck { display: block; columns: 2; padding-left: 6mm; }
  .jagd-loesung--druck li { margin: 0 0 1.5mm; break-inside: avoid; }
  .jagd-loesung .icon { color: #000; }
}