/*
 * Memo-Spiel "Tier – Tierohr – Gebärde".
 * Raster und Kartengröße kommen aus --memory-columns, das gebaerdenmemo.js je
 * nach Schwierigkeitsstufe setzt (Vielfaches der Gruppengröße).
 */

#game .grid {
  --memory-columns: 6;
  --memory-card-size: 150px;
  --memory-gap: 10px;

  display: grid;
  /* Karten wachsen bis zur Maximalgröße und schrumpfen darunter mit dem Viewport. */
  grid-template-columns: repeat(var(--memory-columns), minmax(0, var(--memory-card-size)));
  justify-content: center;
  gap: var(--memory-gap);
  margin: 0 auto;
}

#game .memory-card {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .4s linear;
  transform-style: preserve-3d;
}

#game .memory-card:focus-visible {
  outline: 3px solid #ae0f0a;
  outline-offset: 3px;
}

#game .front,
#game .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#game .front {
  z-index: 2;
  background: #ae0f0a url('../img/memory_front.png') no-repeat center center / contain;
}

#game .back {
  transform: rotateY(180deg);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/*
 * Video statt Hintergrundbild. translateZ(0) hält das Video in Safari innerhalb
 * der 3D-Transformation der Karte sichtbar.
 */
#game .back--video video {
  width: 100%;
  height: 100%;
  /* Die Videos sind quadratisch wie die Karte, cover greift also nicht. Steht als
     Absicherung da, falls doch einmal ein Video in anderem Format nachkommt. */
  object-fit: cover;
  background-color: #fff;
  transform: translateZ(0);
}

#game .selected {
  transform: rotateY(180deg);
}

/*
 * Gefundene Tripel verschwinden, wie bei den beiden bestehenden Memo-Spielen.
 * Die Karten bleiben aufgedeckt und blenden aus, damit noch kurz sichtbar ist,
 * was gefunden wurde. Der Platz bleibt erhalten, das Raster springt nicht.
 */
#game .match {
  transform: rotateY(180deg);
  cursor: default;
  pointer-events: none;
  opacity: 0;
  transition: transform .4s linear, opacity .6s ease;
}

#memory-progress {
  text-align: center;
}

.memory-win {
  display: none;
}

.memory-win.is-visible {
  display: block;
}

/* Auf schmalen Viewports immer drei Karten pro Reihe. */
@media (max-width: 575px) {
  #game .grid {
    --memory-gap: 5px;

    /* Direkt statt über --memory-columns: die Variable setzt das Skript inline. */
    grid-template-columns: repeat(3, minmax(0, var(--memory-card-size)));
  }
}

#difficulty button  {
    border: none;
    color: white;
    padding: 15px 18px;
    background-color: #f07e26;
    background-repeat: no-repeat;
    background-position: center center;
    transition: background-color .2s ease;
}
#difficulty button:hover  {
      background-color: #ae5819;
}