/* Knobelbande Zahlenmauer — Notizbuch-Look. Tokens aus 05-gemeinsam/design/knobelbande.css,
   Bedienung und Klassen: 03-spiele/zahlenmauer/CLAUDE.md
   Ohne JavaScript und im Druck steht statt des Spiels die statische Mauer .zahlenmauer-blatt
   (Markup: 02-webseite/anwendung/vorlagen/teile/zahlenmauer-mauer.html). */

/* --- Größe je Reihenzahl (Klassen statt style-Attribut) -------------------------------- */
.zahlenmauer, .zahlenmauer-blatt { --reihen: 4; --stein-max: 5.5rem; }
.zahlenmauer--2, .zahlenmauer-blatt--2 { --reihen: 2; }
.zahlenmauer--3, .zahlenmauer-blatt--3 { --reihen: 3; }
.zahlenmauer--4, .zahlenmauer-blatt--4 { --reihen: 4; }
.zahlenmauer--5, .zahlenmauer-blatt--5 { --reihen: 5; }

.zahlenmauer {
  container: zahlenmauer / inline-size;
  max-width: 30rem;
  margin: var(--abstand-5) auto;
}
.zahlenmauer--aktiv > .zahlenmauer-blatt,
.zahlenmauer--aktiv > .zahlenmauer__ohne-js { display: none; }

/* --- Mauer: gemeinsam für Spiel und statische Fassung ---------------------------------- */
.zahlenmauer__mauer,
.zahlenmauer-blatt {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(var(--reihen) * var(--stein-max));
  margin-inline: auto;
}
.zahlenmauer-blatt { margin-block: var(--abstand-4); }
.zahlenmauer__reihe,
.zahlenmauer-blatt__reihe {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.zahlenmauer__stein,
.zahlenmauer-blatt__stein {
  /* Alle Steine gleich breit: so breit wie ein Stein der untersten Reihe */
  flex: 0 0 calc((100% - (var(--reihen) - 1) * 4px) / var(--reihen));
  min-width: 0;
  min-height: max(var(--tippflaeche), 2.9rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  border: 2px solid var(--tinte);
  border-radius: 4px;
  background: var(--papier-weiss);
  color: var(--tinte);
  font-family: var(--schrift-grund);
  font-size: clamp(1rem, 100cqi / var(--reihen) / 3.2, 1.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
/* Vorgaben: wie gedruckt auf Kraftpapier-Ziegel */
.zahlenmauer__stein.ist-vorgabe,
.zahlenmauer-blatt__stein:not(.ist-leer) { background: var(--papier-kraft); }

/* Beispiel in der Anleitung: kleine Mauer links neben dem Satz */
.zahlenmauer-anleitung {
  display: flex;
  align-items: center;
  gap: var(--abstand-4);
  margin: var(--abstand-4) 0;
}
.zahlenmauer-anleitung .anleitung { margin: 0; }
.zahlenmauer-blatt--beispiel { flex: 0 0 6.5rem; margin: 0; --stein-max: 3.25rem; }
.zahlenmauer-blatt--beispiel .zahlenmauer-blatt__stein { min-height: 2.25rem; font-size: 1.1rem; }
.zahlenmauer-blatt--loesung { margin-block: var(--abstand-3) 0; }
/* Nur im Druck */
.zahlenmauer-blatt--druck, .zahlenmauer-blatt--druck-loesung { display: none; }

/* --- Spiel ------------------------------------------------------------------------------ */
.zahlenmauer__flaeche {
  position: relative;
  padding: var(--abstand-3) var(--abstand-2);
  background-color: var(--papier-weiss);
  background-image:
    linear-gradient(var(--linie-karo) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie-karo) 1px, transparent 1px);
  background-size: 12px 12px;
  border: 1px solid var(--papier-kante);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-flach);
}
.zahlenmauer__mauer { touch-action: manipulation; user-select: none; -webkit-user-select: none; }

.zahlenmauer__stein {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .08s ease;
}
/* Eigene Einträge in Handschrift und Blaustift — wie ins Heft geschrieben */
.zahlenmauer__stein:not(.ist-vorgabe) {
  color: var(--blaustift);
  font-family: var(--schrift-hand);
  font-weight: 400;
  font-size: clamp(1.15rem, 100cqi / var(--reihen) / 2.8, 1.9rem);
  border-style: dashed;
}
.zahlenmauer__stein.ist-vorgabe { cursor: default; }
.zahlenmauer__stein:focus { outline: none; }
.zahlenmauer__stein:focus-visible { box-shadow: var(--fokus); }
.zahlenmauer__stein.ist-gewaehlt {
  border-style: solid;
  border-width: 3px;
  border-color: var(--farbe-art-dunkel);
  background: var(--farbe-art);
  transform: translateY(-2px);
}
/* Sanft: Dreieck geht nicht auf — gelber Zettel-Ton, kein Alarm-Rot */
.zahlenmauer__stein.passt-nicht { background: var(--zettel-gelb); border-color: var(--sternfarbe); }
.zahlenmauer__stein.passt-nicht.ist-gewaehlt { background: color-mix(in srgb, var(--zettel-gelb) 55%, var(--farbe-art)); }
/* Nach „Prüfen“: rote Bleistift-Wellenlinie unter der Zahl */
.zahlenmauer__stein.ist-falsch {
  background: var(--fehler-hell);
  text-decoration: underline wavy var(--rotstift);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

/* Ziffernfeld: 5 Spalten, Löschen und Weiter darunter */
.zahlenmauer__tasten {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--abstand-2);
  max-width: 24rem;
  margin: var(--abstand-4) auto 0;
}
.zahlenmauer__taste {
  grid-column: span 2;
  min-height: 3.25rem;
  padding: 0;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.zahlenmauer__taste--breit {
  grid-column: span 5;
  flex-wrap: wrap;
  gap: var(--abstand-1);
  padding: var(--abstand-1);
  font-size: var(--groesse-klein);
  line-height: 1.1;
}
.zahlenmauer__taste--breit .icon { width: 1.3rem; height: 1.3rem; }

.zahlenmauer__meldung {
  min-height: 1.5em;
  margin: var(--abstand-3) 0 0;
  text-align: center;
  font-weight: 700;
}
.zahlenmauer__meldung--gut { color: var(--erfolg); }
.zahlenmauer__meldung--fehler { color: var(--fehler); }

.zahlenmauer__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-3);
  margin-top: var(--abstand-3);
}
.zahlenmauer__frage { margin-top: var(--abstand-4); }

/* Gelöst: Stempel über der Mauer, Ziffernfeld und Prüfen weg */
.zahlenmauer__stempelplatz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden; /* die Aufdrück-Bewegung startet größer — nicht über den Rand hinaus */
  pointer-events: none;
}
.zahlenmauer__stempel {
  font-size: clamp(1.8rem, 12cqi, 3.25rem);
  background: color-mix(in srgb, var(--papier-weiss) 85%, transparent);
  --stempel-drehung: -12deg;
}
.zahlenmauer--geloest .zahlenmauer__stein { cursor: default; border-style: solid; border-color: var(--erfolg); }
.zahlenmauer--geloest .zahlenmauer__tasten,
.zahlenmauer--geloest .zahlenmauer__pruefen { display: none; }

@media (prefers-reduced-motion: reduce) {
  .zahlenmauer__stein { transition: none; }
}

/* --- Druck: schwarz auf weiß, nur die Vorgaben; Lösung klein auf dem Kopf -------------- */
@media print {
  .raetsel__geloest { display: none !important; } /* ein leeres Blatt trägt keinen Gelöst-Stempel */
  .zahlenmauer-anleitung { margin: 3mm 0; }
  .zahlenmauer-blatt--beispiel { flex-basis: 22mm; --stein-max: 11mm; }
  .zahlenmauer-blatt--beispiel .zahlenmauer-blatt__stein { min-height: 7mm; font-size: 11pt; }
  .nur-druck.druck-zahlenmauer { display: block; }
  .zahlenmauer-blatt--druck,
  .zahlenmauer-blatt--druck-loesung { display: flex; }
  .zahlenmauer-blatt--druck { --stein-max: 24mm; margin: 8mm auto; }
  .zahlenmauer-blatt--druck-loesung { --stein-max: 10mm; width: calc(var(--reihen) * var(--stein-max)); margin: 0 0 0 auto; }
  .zahlenmauer-blatt { gap: 0; break-inside: avoid; }
  .zahlenmauer-blatt__reihe { gap: 0; margin-top: -1.5px; }
  .zahlenmauer-blatt__stein {
    flex-basis: calc(100% / var(--reihen));
    margin-left: -1.5px;
    border: 1.5px solid #000;
    border-radius: 0;
    background: #fff !important;
    color: #000;
  }
  .zahlenmauer-blatt--druck .zahlenmauer-blatt__stein { min-height: 14mm; font-size: 18pt; }
  .zahlenmauer-blatt--druck-loesung .zahlenmauer-blatt__stein { min-height: 5.5mm; font-size: 8pt; font-weight: 400; }
  .druckblatt__loesung:has(.zahlenmauer-blatt) { width: fit-content; margin-left: auto; }
}