/* Knobelbande Stau-Rätsel (Schiebespiel). Regeln in 03-spiele/stau/CLAUDE.md
   Farben aus 05-gemeinsam/design/knobelbande.css; Kennfarbe über --farbe-art (.art-stau am body, Entscheidung 038).
   Fahrzeuge sind CSS-Blöcke: Lage über --x, --y (Zelle, 0-basiert), Länge --l, Rastergröße --n am Parkplatz. */

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

/* Farben der Fahrzeuge: nur vorhandene Tokens (Kennfarben anderer Arten als Lack) */
.stau-farbe-1 { --lack: var(--farbe-scherzfragen); }
.stau-farbe-2 { --lack: var(--farbe-sudoku); }
.stau-farbe-3 { --lack: var(--farbe-raetselfragen); }
.stau-farbe-4 { --lack: var(--farbe-geheimschrift); }
.stau-farbe-5 { --lack: var(--farbe-labyrinth); }
.stau-farbe-6 { --lack: var(--farbe-nonogramm); }
.stau-farbe-7 { --lack: var(--farbe-tresor); }
.stau-farbe-8 { --lack: var(--farbe-suchsel); }
.stau-farbe-9 { --lack: var(--farbe-wuerfel); }
.stau-farbe-10 { --lack: var(--farbe-krimiraetsel); }

/* ---------------------------------------------------------------- Parkplatz (Spiel und Blatt) */

.stau-buehne { position: relative; }
.stau-buehne--O { padding-right: 2.5rem; }
.stau-buehne--W { padding-left: 2.5rem; }
.stau-buehne--N { padding-top: 2.5rem; }
.stau-buehne--S { padding-bottom: 2.5rem; }

.stau-platz {
  --n: 6;
  padding: 4px;
  background: var(--tinte-weich);
  border-radius: var(--radius-mittel);
  box-shadow: var(--schatten-papier);
}
.stau-feld {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  aspect-ratio: 1;
  background: var(--papier-alt);
  border-radius: var(--radius-klein);
  user-select: none;
  -webkit-user-select: none;
}
.stau-zelle {
  aspect-ratio: 1;
  border: 1px dashed var(--papier-kante);
}

/* Ausfahrt: Pfeil außen am Rand, in der Reihe des Detektivautos */
.stau-ausfahrt {
  --nr: 2;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--farbe-art-dunkel);
  font-weight: 800;
  font-size: var(--groesse-klein);
  line-height: 1;
  pointer-events: none;
}
.stau-ausfahrt .icon { width: 1.9rem; height: 1.9rem; stroke-width: 2.6; }
.stau-ausfahrt__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.stau-ausfahrt--O, .stau-ausfahrt--W {
  top: calc(var(--nr) * 100% / var(--n));
  height: calc(100% / var(--n));
  width: 2.5rem;
}
.stau-ausfahrt--O { left: calc(100% + 4px); }
.stau-ausfahrt--W { right: calc(100% + 4px); }
.stau-ausfahrt--N, .stau-ausfahrt--S {
  left: calc(var(--nr) * 100% / var(--n));
  width: calc(100% / var(--n));
  height: 2.5rem;
}
.stau-ausfahrt--N { bottom: calc(100% + 4px); }
.stau-ausfahrt--S { top: calc(100% + 4px); }
/* Lücke im Rahmen an der Ausfahrt: Streifen in Kennfarbe über dem Rand */
.stau-ausfahrt::before {
  content: "";
  position: absolute;
  background: var(--farbe-art);
}
.stau-ausfahrt--O::before { left: -8px; top: 0; bottom: 0; width: 8px; }
.stau-ausfahrt--W::before { right: -8px; top: 0; bottom: 0; width: 8px; }
.stau-ausfahrt--N::before { bottom: -8px; left: 0; right: 0; height: 8px; }
.stau-ausfahrt--S::before { top: -8px; left: 0; right: 0; height: 8px; }

.stau-dreh--N { transform: rotate(-90deg); }
.stau-dreh--S { transform: rotate(90deg); }
.stau-dreh--W { transform: rotate(180deg); }

/* Fahrzeug: liegt über dem Raster, Lage in ganzen (beim Ziehen gebrochenen) Zellen */
.stau-fz {
  --x: 0;
  --y: 0;
  --l: 2;
  position: absolute;
  left: calc(var(--x) * 100% / var(--n));
  top: calc(var(--y) * 100% / var(--n));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-1);
  margin: 0;
  padding: 0;
  border: 3px solid transparent;    /* Abstand zum Nachbarn, damit die Blöcke einzeln wirken */
  background: var(--lack, var(--papier-weiss));
  background-clip: padding-box;
  border-radius: var(--radius-mittel);
  box-shadow: inset 0 0 0 2px var(--tinte);
  color: var(--tinte);
  font: inherit;
  font-weight: 800;
  font-size: var(--groesse-gross);
  cursor: grab;
  touch-action: none;               /* Ziehen statt Seite scrollen */
  -webkit-tap-highlight-color: transparent;
  transition: left .18s ease-out, top .18s ease-out, transform .15s ease;
  z-index: 1;
}
.stau-fz--quer { width: calc(var(--l) * 100% / var(--n)); height: calc(100% / var(--n)); }
.stau-fz--hoch { width: calc(100% / var(--n)); height: calc(var(--l) * 100% / var(--n)); flex-direction: column; }
/* Lastwagen: Fahrerhaus als dunklere Kante am vorderen Ende */
.stau-fz--lastwagen.stau-fz--quer { box-shadow: inset 0 0 0 2px var(--tinte), inset -10px 0 0 0 color-mix(in srgb, var(--tinte) 25%, var(--lack, var(--papier-weiss))); }
.stau-fz--lastwagen.stau-fz--hoch { box-shadow: inset 0 0 0 2px var(--tinte), inset 0 10px 0 0 color-mix(in srgb, var(--tinte) 25%, var(--lack, var(--papier-weiss))); }
.stau-fz--detektiv {
  --lack: var(--rotstift);
  color: var(--papier-weiss);
  box-shadow: inset 0 0 0 2px var(--tinte), inset 0 0 0 5px var(--papier-weiss);
}
.stau-fz > * { pointer-events: none; }
.stau-fz__icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.6; }
.stau-fz:focus { outline: none; }
.stau-fz:focus-visible { box-shadow: inset 0 0 0 2px var(--tinte), var(--fokus); z-index: 2; }
.stau-fz.ist-gewaehlt { transform: scale(1.04); box-shadow: inset 0 0 0 2px var(--tinte), 0 0 0 3px var(--tinte), var(--schatten-gehoben); z-index: 2; }
.stau-fz.ist-zieht { transition: none; cursor: grabbing; z-index: 3; }
.stau-fz.ist-tipp { animation: stau-tipp 1s ease-in-out 2; }
.stau-fz.ist-wackeln { animation: stau-wackeln .3s ease; }
.stau-fz:disabled { cursor: default; opacity: 1; }
/* Gelöst: das Detektivauto fährt durch die Ausfahrt hinaus */
.stau-fz--detektiv.ist-raus { transition: left .6s ease-in, top .6s ease-in; }
.stau-buehne--O .stau-fz--detektiv.ist-raus { left: calc((var(--x) + 1.2) * 100% / var(--n)); }
.stau-buehne--W .stau-fz--detektiv.ist-raus { left: calc((var(--x) - 1.2) * 100% / var(--n)); }
.stau-buehne--N .stau-fz--detektiv.ist-raus { top: calc((var(--y) - 1.2) * 100% / var(--n)); }
.stau-buehne--S .stau-fz--detektiv.ist-raus { top: calc((var(--y) + 1.2) * 100% / var(--n)); }
@keyframes stau-tipp { 50% { box-shadow: inset 0 0 0 2px var(--tinte), 0 0 0 5px var(--sternfarbe); } }
@keyframes stau-wackeln { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }

/* ---------------------------------------------------------------- Zähler, Meldung, Knöpfe */

.stau-zaehler {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--abstand-1) var(--abstand-3);
  margin: 0 0 var(--abstand-3);
}
.stau-zaehler__zahl { font-family: var(--schrift-hand); font-size: var(--groesse-gross); }
.stau-zaehler__ziel { color: var(--tinte-weich); }
.stau-meldung {
  min-height: 2.5em;
  margin: var(--abstand-3) 0 var(--abstand-2);
  text-align: center;
  font-weight: 800;
}
.stau-meldung .stempel { margin-right: var(--abstand-3); }
.stau--geloest .stau-meldung { color: var(--erfolg); }
.stau-lob { display: inline-block; margin-top: var(--abstand-2); }

/* Pfeile als Kreuz: oben, links, rechts, unten */
.stau-pfeile {
  display: grid;
  grid-template-columns: repeat(3, 3.25rem);
  grid-template-areas: ". n ." "w . o" ". s .";
  gap: var(--abstand-1);
  justify-content: center;
  margin-bottom: var(--abstand-4);
}
.stau-pfeil.knopf { min-height: 3.25rem; min-width: 3.25rem; padding: 0; }
.stau-pfeil .icon { width: 1.6rem; height: 1.6rem; stroke-width: 2.6; }
.stau-pfeil--N { grid-area: n; }
.stau-pfeil--W { grid-area: w; }
.stau-pfeil--O { grid-area: o; }
.stau-pfeil--S { grid-area: s; }
.stau--geloest .stau-pfeile { display: none; }
.stau-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-2) var(--abstand-3);
}

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

.stau-blatt .stau-fz { cursor: default; transition: none; }
.stau-blatt__legende { font-size: var(--groesse-klein); margin-top: var(--abstand-3); }
.stau-blatt__legende .icon { width: 1.3em; height: 1.3em; }
.stau--aktiv .stau-ohne-js { display: none; }
/* Mit JavaScript: Blatt nur noch für Vorlese-Programme */
.stau--aktiv .stau-blatt {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.stau-bogen { margin-top: 4mm; }
.stau-bogen__titel { font-weight: 800; margin: 0 0 2mm; }
.stau-bogen__liste { display: flex; flex-wrap: wrap; gap: 2mm 3mm; margin: 0; padding: 0; list-style: none; }
.stau-teil {
  --l: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1mm;
  width: calc(var(--l) * 14mm);
  height: 14mm;
  margin: 0;
  border: 1px dashed #000;
  font-weight: 800;
  font-size: 16pt;
}
.stau-teil .icon { width: 7mm; height: 7mm; }
.stau-loesung { padding-left: 1.6em; }
.stau-loesung li { margin-bottom: var(--abstand-1); }

/* Am Handy die Innenabstände der Rätselkarte mitnehmen, damit die Felder groß genug sind */
@media (max-width: 30rem) {
  .stau { margin-inline: var(--rand-spiel-breit); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stau-fz, .stau-fz--detektiv.ist-raus { transition: none; }
  .stau-fz.ist-tipp, .stau-fz.ist-wackeln { animation: none; }
  .stau-fz.ist-tipp { box-shadow: inset 0 0 0 2px var(--tinte), 0 0 0 5px var(--sternfarbe); }
  .stau-fz.ist-gewaehlt { transform: none; }
}

/* ---------------------------------------------------------------- Druck: Parkplatz, Ausschneidebogen */

@media print {
  .raetsel__geloest { display: none !important; }
  .stau { max-width: none; margin: 3mm 0 0; }
  .stau-spiel { display: none !important; }
  .stau--aktiv .stau-blatt {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .stau-blatt .stau-buehne { width: calc(var(--n) * 14mm + 2mm + 12mm); padding-right: 12mm; break-inside: avoid; }
  .stau-blatt .stau-buehne--W { padding-right: 0; padding-left: 12mm; }
  .stau-platz { padding: 1mm; background: #000; box-shadow: none; border-radius: 0; }
  .stau-feld { background: #fff; border-radius: 0; }
  .stau-zelle { border: .2mm solid #000; }
  .stau-fz, .stau-fz--detektiv, .stau-fz--lastwagen.stau-fz--quer, .stau-fz--lastwagen.stau-fz--hoch {
    background: #fff;
    color: #000;
    border-width: 1mm;
    box-shadow: inset 0 0 0 .5mm #000;
    font-size: 16pt;
  }
  .stau-fz--detektiv { box-shadow: inset 0 0 0 1.2mm #000; }
  .stau-ausfahrt { color: #000; width: 12mm; }
  .stau-ausfahrt::before { background: #fff; }
  .stau-ausfahrt__text { position: static; width: auto; height: auto; clip: auto; font-size: 9pt; }
  .stau-ausfahrt .icon { width: 8mm; height: 8mm; }
  .stau-blatt__legende { font-size: 11pt; margin-top: 2mm; }
  .stau-bogen { break-inside: avoid; }
  .stau-loesung { columns: 2; padding-left: 6mm; }
  .stau-loesung--lang { columns: 3; font-size: 10pt; }
  .stau-loesung li { break-inside: avoid; margin: 0 0 1.5mm; }
}