/* Knobelbande Memory (Paare finden) — Regeln in 03-spiele/memory/CLAUDE.md
   Farben aus 05-gemeinsam/design/knobelbande.css; Kennfarbe über --farbe-art (.art-memory am body).
   Kartenbilder kommen aus arten/memory.py (Bogen), das Spiel legt sie in .mem-feld verdeckt aus.
   Spalten über Klassen: mem-sph-N (Handy), mem-sp-N (ab 40 rem), mem-spd-N (Druck). */

.memory { --motiv-grund: var(--papier-weiss); --mem-luft: var(--abstand-2); margin-block: var(--abstand-4); }

/* --- Raster: Bogen (ohne JavaScript) und Spielfeld haben dieselben Spalten ------------------------- */
.mem-bogen, .mem-feld {
  display: grid;
  grid-template-columns: repeat(var(--mem-spalten, 4), minmax(0, 1fr));
  gap: var(--mem-luft);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: calc(var(--mem-spalten, 4) * 7.5rem);
}
.mem-sph-3 { --mem-spalten: 3; }
.mem-sph-4 { --mem-spalten: 4; }
.mem-sph-5 { --mem-spalten: 5; }
@media (min-width: 40rem) {
  .memory { --mem-luft: var(--abstand-3); }
  .mem-sp-3 { --mem-spalten: 3; }
  .mem-sp-4 { --mem-spalten: 4; }
  .mem-sp-5 { --mem-spalten: 5; }
  .mem-sp-6 { --mem-spalten: 6; }
}

/* --- Kartenbild (Bogen und Vorderseite im Spiel) ----------------------------------------------------- */
.mem-karte, .mem-seite {
  container-type: inline-size;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-mittel);
}
.mem-karte { position: relative; background: var(--papier-weiss); box-shadow: var(--schatten-flach); }
.mem-gesicht { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mem-motiv { width: 78%; height: 78%; fill: none; stroke: currentColor; overflow: visible; }
.mem-wort {
  font: 800 clamp(var(--groesse-klein), 21cqi, 1.6rem) / 1.1 var(--schrift-grund);
  color: var(--tinte);
  text-align: center;
  padding: 0 6%;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.mem-zahl { font: 800 clamp(1.6rem, 55cqi, 4.5rem) / 1 var(--schrift-grund); color: var(--tinte); }
.mem-menge { display: grid; width: 74%; aspect-ratio: 1; gap: 8%; }
.mem-menge--wuerfel { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.mem-menge--zehner { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); aspect-ratio: 5 / 2; width: 86%; gap: 10%; }
.mem-punkt { border-radius: 50%; background: var(--tinte); aspect-ratio: 1; align-self: center; }
.mem-punkt--leer { visibility: hidden; }

/* Strichfarbe je Paar (arten/memory.py TOENE); Wortkarten, Zahlen und Punkte bleiben in Tinte */
.mem-f-rot { color: var(--rotstift); }
.mem-f-blau { color: var(--blaustift); }
.mem-f-gruen { color: var(--gruenstift); }
.mem-f-lila { color: var(--farbe-geheimschrift-dunkel); }
.mem-f-orange { color: var(--farbe-labyrinth-dunkel); }
.mem-f-braun { color: var(--farbe-wuerfel-dunkel); }
.mem-f-rosa { color: var(--farbe-tresor-dunkel); }
.mem-f-gelb { color: var(--sternfarbe); }

/* --- Spiel ---------------------------------------------------------------------------------------------- */
.mem-ohne-js { margin-top: var(--abstand-3); }
.memory--aktiv .mem-bogen, .memory--aktiv .mem-ohne-js { display: none; }

.mem-leiste {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-3);
  max-width: calc(var(--mem-spalten, 4) * 7.5rem);
  margin: 0 auto var(--abstand-2);
  font-size: var(--groesse-klein);
  font-weight: 700;
  color: var(--tinte-weich);
}

.mem-knopf {
  position: relative;
  min-width: var(--tippflaeche);
  min-height: var(--tippflaeche);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 40rem;
  border-radius: var(--radius-mittel);
  -webkit-tap-highlight-color: transparent;
}
.mem-knopf:focus-visible { outline: none; box-shadow: var(--fokus); }
.mem-innen {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .35s ease;
}
.mem-knopf.ist-offen .mem-innen { transform: rotateY(180deg); }
.mem-seite {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--schatten-flach);
}
.mem-rueck {
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--farbe-art-dunkel) 14%, transparent) 7px 9px),
    var(--farbe-art);
  color: var(--farbe-art-dunkel);
}
.mem-rueck__icon { width: 46%; height: 46%; }
.mem-knopf:hover:not(.ist-offen) .mem-rueck { box-shadow: var(--schatten-knopf); }
.mem-vorn { background: var(--papier-weiss); transform: rotateY(180deg); }
.mem-knopf.ist-gefunden { cursor: default; }
.mem-knopf.ist-gefunden .mem-vorn { background: var(--erfolg-hell); --motiv-grund: var(--erfolg-hell); box-shadow: inset 0 0 0 3px var(--erfolg); }

.mem-meldung { min-height: 1.5em; margin: var(--abstand-3) 0 var(--abstand-2); text-align: center; font-weight: 700; }
.mem-meldung--gut { color: var(--erfolg); }
.mem-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--abstand-3); }
.mem-stempel { margin: 0; }

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

/* --- Druck: Ausschneidebogen, alle Karten offen und schwarz, Schnittlinien gestrichelt -------------- */
@media print {
  .memory { margin: 4mm 0; }
  .mem-leiste, .mem-feld, .mem-meldung, .mem-aktionen, .mem-ohne-js { display: none !important; }
  .memory--aktiv .mem-bogen, .mem-bogen {
    display: grid !important;
    gap: 0;
    max-width: none;
    width: calc(var(--mem-druck, 4) * var(--mem-karte-mm, 40mm));
    grid-template-columns: repeat(var(--mem-druck, 4), 1fr);
  }
  .mem-spd-3 { --mem-druck: 3; --mem-karte-mm: 50mm; }
  .mem-spd-4 { --mem-druck: 4; --mem-karte-mm: 36mm; }
  .mem-spd-5 { --mem-druck: 5; --mem-karte-mm: 34mm; }
  .mem-spd-6 { --mem-druck: 6; --mem-karte-mm: 30mm; }
  .mem-karte {
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    border: .3mm dashed #000;
    margin: 0 -.15mm -.15mm 0;   /* Nachbarn teilen sich eine Schnittlinie */
    break-inside: avoid;
  }
  .mem-motiv, .mem-wort, .mem-zahl { color: #000 !important; }
  .mem-punkt { background: #000; }
  .memory { --motiv-grund: #fff; }
}