/* 2Minds - Memory, Gestaltung.
 *
 * Grosse Karten, klare Symbole, keine Effekte, die vom Merken ablenken.
 */

.mem { display: flex; flex-direction: column; gap: var(--luft-block); }

.mem-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-liste);
  flex-wrap: wrap;
}

.mem-stufen {
  display: inline-flex;
  gap: var(--luft-haar);
  padding: var(--luft-haar);
  background: var(--flaeche-tief);
  border-radius: var(--radius);
}
.mem-stufe {
  border: 0;
  background: transparent;
  color: var(--text-zweit);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  /* 44 statt 48: Diese Knoepfe stehen zu viert nebeneinander und sind kein
     Hauptweg. Unter 44 geht es trotzdem nicht. */
  min-height: 44px;
  padding: 0 var(--luft-liste);
  border-radius: var(--radius-klein);
  cursor: pointer;
}
.mem-stufe:hover { color: var(--text); }
.mem-stufe.an {
  background: var(--flaeche);
  color: var(--akzent);
  box-shadow: var(--schatten);
}

/* Der Zaehler steht klein und still. Er ist eine Auskunft, kein Ergebnis -
   siehe den Kopf von memory.js. */
.mem-zaehler { margin: 0; }

/* ------------------------------------------------------------------ Feld */

.mem-feld {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 4), 1fr);
  gap: var(--luft-eng);
}

.mem-karte {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius);
  /* Kein 3D-Umschlag. Eine Karte, die sich dreht, ist huebsch und lenkt beim
     Merken ab - und auf schwaecheren Geraeten ruckelt sie. Ein sauberes
     Ueberblenden reicht. */
}

.mem-rueckseite,
.mem-vorderseite {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  transition: opacity var(--dauer) var(--kurve);
}

.mem-rueckseite {
  background: var(--akzent-sanft);
  border: 1px solid var(--rand);
  opacity: 1;
}
/* Ein ruhiges Muster auf der Rueckseite, damit die Flaeche nicht tot wirkt -
   aber so schwach, dass es nicht mit den Symbolen konkurriert. */
.mem-rueckseite::after {
  content: '';
  width: 40%;
  height: 40%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--akzent) 25%, transparent);
}

.mem-vorderseite {
  background: var(--flaeche);
  border: 2px solid var(--akzent);
  color: var(--akzent);
  opacity: 0;
}
.mem-vorderseite svg { width: 52%; height: 52%; }

.mem-karte.auf .mem-rueckseite { opacity: 0; }
.mem-karte.auf .mem-vorderseite { opacity: 1; }

/* Gefunden: bleibt sichtbar, tritt aber zurueck. Verschwinden zu lassen waere
   falsch - das Feld wuerde loechrig, und man verliert die raeumliche
   Orientierung, die beim Merken hilft. */
.mem-karte.weg { cursor: default; }
.mem-karte.weg .mem-vorderseite {
  opacity: 1;
  border-color: var(--gut);
  color: var(--gut-tinte);
  background: color-mix(in srgb, var(--gut) 8%, var(--flaeche));
}

.mem-karte:disabled { pointer-events: none; }

.mem-fuss { display: flex; gap: var(--luft-eng); }

/* ----------------------------------------------------------------- Handy */

@media screen and (max-width: 560px) {
  .mem-kopf { flex-direction: column; align-items: stretch; }
  .mem-stufen { justify-content: space-between; }
  .mem-stufe { flex: 1; padding: 0 var(--luft-eng); }
  .mem-feld { gap: var(--luft-haar); }
}