/* -------------------------------
   Grundlegende Styles für Memory
---------------------------------*/

/* 1) Box-Sizing von Karten und Kindern sicherstellen */
.memory-card,
.memory-card * {
    box-sizing: border-box;
}

/* 2) Wrapper und Grid */
.memory-game-wrapper {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.memory-game-grid {
    display: grid;
    /* Automatisch so viele Spalten wie möglich, min 100px pro Karte */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 10px;
    margin-bottom: 20px;
}

/* 3) Eine einzelne Karte */
.memory-card {
    perspective: 1000px;
    width: 100%;
    padding-top: 100%; /* 1:1 Verhältnis */
    position: relative;
    cursor: pointer;
    border-radius: 8px; /* Abgerundete Ecken */
    overflow: hidden;    /* Damit Ränder nicht hinausragen */
    /* Kein Border hier – der Rand kommt per JS auf .memory-card-front & .memory-card-back */
}

/* Innerer Container für Flip */
.memory-card-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

/* Wenn eine Karte umgedreht wird */
.memory-card.flipped .memory-card-inner {
    transform: rotateY(180deg);
}

/* Vorder- und Rückseite der Karte */
.memory-card-front,
.memory-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px; /* Passend zum Eltern-Container */
    /* Border (2px solid) wird inline per JS gesetzt */
}

/* Vorderseite: wird standardmäßig um 180° gedreht, damit sie zu Beginn unsichtbar ist */
.memory-card-front {
    background-size: cover;
    background-position: center;
    transform: rotateY(180deg);
}

/* Rückseite: Farbe und ggf. Bild (via JS) */
.memory-card-back {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4) Gefundene Paare: offen lassen und keine weiteren Klicks */
/*    4.1) Das gesamte Element sperren */
.memory-card.matched {
    pointer-events: none; /* keine weiteren Klicks zulassen */
}

/*    4.2) Innere Fläche bleibt umgedreht (zeigt Vorderseite) */
.memory-card.matched .memory-card-inner {
    transform: rotateY(180deg) !important;
}

/*    4.3) Rückseite ausblenden, damit wirklich nur die Vorderseite sichtbar bleibt */
.memory-card.matched .memory-card-back {
    visibility: hidden;
}

/*    4.4) Vorderseite sicher sichtbar machen (sollte durch transform ohnehin oben liegen) */
.memory-card.matched .memory-card-front {
    backface-visibility: visible;
    opacity: 0.7; /* optional: leicht transparent, um „gefunden“ zu signalisieren */
}

/* 5) Anzeige der Züge */
.memory-game-info {
    margin-top: 10px;
    font-weight: bold;
}

/* 6) Button „Nochmal spielen“ */
.memory-game-restart {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
}

.memory-game-restart:hover {
    background-color: #005f8d;
}
/* -------------------------------
   Mobile Anpassungen
---------------------------------*/
@media (max-width: 600px) {
    /* Abstand nach unten reduzieren und erzwingen */
    .memory-game-wrapper {
        margin-bottom: 10px !important;
    }
    /* Grid-Abstand etwas verringern */
    .memory-game-grid {
        grid-gap: 5px !important;
    }
    /* Info und Button kompakter gestalten */
    .memory-game-info {
        margin-top: 5px !important;
    }
    .memory-game-restart {
        margin-top: 5px !important;
        padding: 8px 16px !important;
    }

    /* ————————————————
       Zusätzlich: wirklich alles auf 0 setzen
    ———————————————— */
    .memory-game-wrapper {
        margin: 0 !important;
    }
    .memory-game-restart {
        margin: 0 !important;
    }
    /* entfernt auch den margin-top des Elements direkt unter dem Spiel */
    .memory-game-wrapper + * {
        margin-top: 0 !important;
    }
}