/* ============================================================
 * MENGENMEMORY (Mathespiele)
 * Ein Memory, bei dem nicht zwei gleiche Bilder, sondern eine MENGE
 * und ihre ZAHL zusammengehören. Nur das Layout dieses Moduls —
 * Punktebild (.dot-frame), Würfelbild (.cube3d-flat), Knöpfe, Farben
 * und Schriften kommen global aus dem Baukasten.
 *
 * SKALIERUNG (ein Memory muss ALLE Karten gleichzeitig zeigen):
 * Die Seite füllt die Bühne (`--stage-height`, globale Quelle). Die
 * freie Fläche `.mm-fit` wird in mengenmemory.js gemessen; von dort
 * kommen Spaltenzahl, `--mm-cell` (Kantenlänge einer Karte) und
 * `--mm-gap`. 🔴 ALLE Maße im Kartenbild hängen an `--mm-cell` —
 * niemals eine feste px-Schrift oder Magic Numbers wie 100vh-80px.
 * ============================================================ */

.mm-stage {
    --mm-pad-y: clamp(6px, 1.6vh, 18px);
    --mm-pad-x: clamp(8px, 2vw, 28px);

    box-sizing: border-box;
    height: var(--stage-height);
    padding: var(--mm-pad-y) var(--mm-pad-x);
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1vh, 12px);
}

/* --- Zählerzeile -------------------------------------------------- */
.mm-stats {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(8px, 2vw, 26px);
}

.mm-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f4f7fa;
    border: 1px solid #e0e7ee;
    color: var(--gray-text);
    font-size: clamp(0.78rem, 1.7vw, 1rem);
    font-weight: 700;
}

/* Die Zahlen selbst in der Mathe-Schrift (global `.number`) — etwas
   größer als das Wort davor, damit sie auch von hinten lesbar sind. */
.mm-stat b {
    color: var(--dark-bg);
    font-size: 1.35em;
    font-weight: 400;
}

.mm-sep {
    color: var(--gray-text);
    padding: 0 2px;
}

/* --- Die freie Fläche: genau dieser Kasten wird gemessen ---------- */
.mm-fit {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-board {
    display: grid;
    gap: var(--mm-gap, 8px);
    /* Spaltenzahl setzt mengenmemory.js (grid-template-columns). */
}

.mm-board[hidden] { display: none; }

/* --- Eine Karte ---------------------------------------------------
   Der Knopf IST die Karte (kein zusätzlicher Knopf in der Karte):
   so liegt die Tastatur-/Vorlese-Bedienung genau auf dem Bild. */
.mm-card {
    width: var(--mm-cell);
    height: var(--mm-cell);
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    perspective: calc(var(--mm-cell) * 4);
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.mm-card:focus-visible { outline: 3px solid var(--blue-main); outline-offset: 3px; }
.mm-card.is-done { cursor: default; }

/* Die drehbare Hülle: echte Umdrehung um die Senkrechte. */
.mm-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--mm-flip, 0.45s) cubic-bezier(0.22, 0.8, 0.32, 1);
}

.mm-card.is-open .mm-inner { transform: rotateY(180deg); }

.mm-face {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    backface-visibility: hidden;
    border-radius: calc(var(--mm-cell) * 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Rückseite: Projekt-Blau mit gestreuten Punkten — von hinten sind
   alle Karten gleich, sonst verrät das Muster die Karte. */
.mm-back {
    background-color: var(--blue-main);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.32) 0 4%, transparent 4%) 12% 22% / 34% 34%,
        radial-gradient(rgba(255, 255, 255, 0.32) 0 4%, transparent 4%) 56% 66% / 34% 34%,
        radial-gradient(rgba(255, 255, 255, 0.24) 0 4%, transparent 4%) 82% 16% / 34% 34%,
        radial-gradient(rgba(255, 255, 255, 0.24) 0 4%, transparent 4%) 22% 82% / 34% 34%;
    border: max(2px, calc(var(--mm-cell) * 0.02)) solid #2176b6;
    box-shadow: 0 calc(var(--mm-cell) * 0.035) 0 #1c6296;
}

.mm-front {
    transform: rotateY(180deg);
    background: #fff;
    border: max(2px, calc(var(--mm-cell) * 0.02)) solid #d9e2ea;
    box-shadow: 0 calc(var(--mm-cell) * 0.035) 0 #e6ecf1;
}

/* Gefundenes Paar: bleibt offen liegen und wird grün. */
.mm-card.is-done .mm-front {
    background: #eafaf1;
    border-color: var(--green-main);
    box-shadow: 0 calc(var(--mm-cell) * 0.035) 0 #bfe9d2;
}

.mm-card.is-done .mm-content { animation: mm-pulse 0.5s ease; }

@keyframes mm-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* Der Inhalt fängt keine Klicks — geklickt wird die ganze Karte. */
.mm-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* --- Vorderseite 1: die ZAHL (Mathe-Schrift über `.number`) ------- */
.mm-digit {
    font-size: calc(var(--mm-cell) * 0.52);
    color: var(--dark-bg);
    line-height: 1;
}

.mm-card.is-done .mm-digit { color: #1e7e4c; }

/* --- Vorderseite 2: WÜRFELBILD (globales `.cube3d-flat`) ----------
   `--cube-edge` setzt mengenmemory.js je Karte: ein Würfel darf groß
   sein, zwei müssen nebeneinander passen. */
.mm-dice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--mm-cell) * 0.04);
}

/* --- Vorderseite 3: PUNKTEBILD (globales Fünferfeld, `.dot-frame.v-5`)
   Eine Reihe je begonnenem Fünfer. Das Feld selbst bringt seinen
   Außenabstand mit (im Modul-Bild stören die 10px) und ist über
   `.frozen` ohnehin ohne Funktion — hier nur stapeln. */
.mm-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--mm-cell) * 0.02);
}

.mm-dots .dot-frame { margin: 0; }

/* --- Vorderseite 4: GEGENSTÄNDE ----------------------------------
   Festes Raster (Spalten/Reihen/Schriftgröße rechnet das Modul):
   bei einem umbrechenden Feld hängt die Zeilenlänge an der Laufweite
   der Emoji-Schrift — dann stehen bei großen Anzahlen mehr Reihen in
   der Karte, als sie zeigen kann, und der Rest wird abgeschnitten. */
.mm-objects {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: calc(var(--mm-cell) * 0.07);
    box-sizing: border-box;
}

.mm-objects span {
    display: block;
    line-height: 1;
}

/* --- Abschluss ---------------------------------------------------- */
.mm-done {
    text-align: center;
    padding: clamp(8px, 2vh, 24px);
}

.mm-done[hidden] { display: none; }

.mm-done-emo { font-size: clamp(38px, 9vh, 72px); line-height: 1; }

.mm-done h2 {
    margin: clamp(4px, 1vh, 10px) 0 4px;
    font-size: clamp(1.2rem, 3.4vw, 1.8rem);
    color: var(--dark-bg);
}

.mm-done p {
    margin: 0 0 clamp(10px, 2.4vh, 22px);
    color: var(--gray-text);
    font-weight: 700;
    font-size: clamp(0.85rem, 2vw, 1.05rem);
}

/* Knopf-Optik wie im Bingo (`.bg-btn`): 3-D-Kante, die beim Drücken
   flach wird. Die Hover-Vergrößerung kommt GLOBAL aus ui.css. */
.mm-again {
    padding: 12px 26px;
    border: none;
    border-radius: 12px;
    background: var(--green-main);
    color: #fff;
    font-family: var(--ui-font);
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 #1e8449;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mm-again:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #1e8449;
}

/* Kein Gewackel, wenn der Nutzer Bewegung abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
    .mm-inner { transition-duration: 0.001s; }
    .mm-card.is-done .mm-content { animation: none; }
}