/* ============================================================
 * PUZZLETEILE (Kopfgeometrie)
 * Links das fast fertige Puzzle, rechts die vier Teile zur Auswahl.
 * Nur Layout dieses Moduls — Farben/Knöpfe kommen aus der globalen Basis.
 *
 * 🔴 SKALIERUNG — EINE Zahl regiert alles: Ein Puzzleteil ist auf dem
 * Schirm IMMER genauso groß wie die Lücke, in die es gehört — schon in
 * der Auswahl, beim Ziehen und beim Einrasten. Dafür hängen Puzzlebreite
 * (`--pz-board-w`) und Teilgröße (`--pz-piece`) am selben Wert:
 *     --pz-piece = --pz-board-w × --pz-q
 * `--pz-q` ist das Verhältnis „Auswahl-Ausschnitt : Puzzlebreite" bei
 * GLEICHEM Maßstab und kommt aus `applyMetrics()` in der JS.
 *
 * Damit das ohne Ringschluss geht (die Auswahl bräuchte sonst die
 * Puzzlebreite, die wiederum von der Auswahlbreite abhinge), wird die
 * Puzzlebreite direkt aus der freien Fläche gerechnet: Die JS liefert die
 * reinen Zahlen `--pz-fw`/`--pz-fc`/`--pz-fw4`/`--pz-fv`, in denen der
 * Platzbedarf der Auswahl schon steckt. Die Bühne selbst kommt aus der
 * globalen Quelle `--stage-height` — keine Magic Numbers, kein autofit.
 * ============================================================ */

.pz-stage {
    /* Die einzige Stelle, an der Ränder/Reserven stehen. */
    --pz-pad-y: clamp(8px, 2vh, 24px);       /* Luft oben/unten */
    --pz-pad-x: clamp(8px, 2vw, 32px);       /* Luft links/rechts */
    --pz-gap: clamp(10px, 2vw, 26px);        /* Puzzle ↔ Auswahl, Teil ↔ Teil */
    --pz-frame: clamp(10px, 2vw, 28px);      /* Innenrand der weißen Karte */
    --pz-wrap-pad: 8px;                      /* Polster um die Auswahl (Tour-Ring) */
    /* Die Teile liegen RAHMENLOS da (kein Kasten drumherum) — es bleibt nur
       etwas Luft rundherum. */
    --pz-tile-pad: 3px;
    --pz-tile-chrome: calc(2 * var(--pz-tile-pad));

    /* Von der JS gesetzt (`applyMetrics`) — hier nur Notwerte für den
       Bruchteil einer Sekunde vor dem ersten Rätsel. */
    --pz-ar: 1 / 1;
    --pz-ar-n: 1;
    --pz-q: 0.54;
    --pz-fw: 0.48;
    --pz-fc: 0.93;
    --pz-fw4: 0.46;
    --pz-fv: 0.65;

    /* Freie Strecken, in denen Puzzle UND Auswahl zusammen Platz finden. */
    --pz-avail-w: calc(100vw - 2 * var(--pz-pad-x) - 2 * var(--pz-frame)
                       - 2 * var(--pz-gap) - 2 * var(--pz-wrap-pad)
                       - 2 * var(--pz-tile-chrome));
    --pz-avail-hb: calc(var(--stage-height) - 2 * var(--pz-pad-y) - 2 * var(--pz-frame));
    --pz-avail-hc: calc(var(--stage-height) - 2 * var(--pz-pad-y) - 2 * var(--pz-wrap-pad)
                        - var(--pz-gap) - 2 * var(--pz-tile-chrome));

    /* Die Puzzlebreite ist die kleinste der drei Schranken: Breite,
       Puzzlehöhe, Höhe der zweireihigen Auswahl. */
    --pz-board-w: max(180px, min(calc(var(--pz-avail-w)  * var(--pz-fw)),
                                 calc(var(--pz-avail-hb) * var(--pz-ar-n)),
                                 calc(var(--pz-avail-hc) * var(--pz-fc))));
    --pz-piece: calc(var(--pz-board-w) * var(--pz-q));

    box-sizing: border-box;
    height: var(--stage-height);
    padding: var(--pz-pad-y) var(--pz-pad-x);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pz-gap);
}

/* --- Das Puzzle -------------------------------------------------- */
.pz-board-wrap {
    padding: var(--pz-frame);
    background: white;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.pz-board {
    display: block;
    width: var(--pz-board-w);
    aspect-ratio: var(--pz-ar);
}

/* Ein Puzzleteil. Alle Teile sehen GLEICH aus — der einzige Unterschied
   ist die Form. Die Striche bleiben in jeder Größe gleich dick
   (`non-scaling-stroke`), damit sie nirgends verschwinden. */
.pz-piece {
    fill: #2ecc71;
    stroke: #1e8449;
    stroke-width: 2.5px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    /* `transform` ist ein Präsentations-Attribut und landet damit in der
       CSS-Kaskade → die JS setzt nur das Attribut, die Drehung
       läuft trotzdem weich. */
    transition: transform var(--pz-turn, 220ms) ease, fill 0.15s ease, stroke 0.15s ease;
}

/* Die Lücke: hell und gestrichelt, damit ihre Form gestochen scharf zu
   lesen ist — genau daran denken die Kinder die Antwort. */
.pz-hole {
    fill: #eaf7ef;
    stroke: #7f8c8d;
    stroke-width: 2.5px;
    stroke-linejoin: round;
    stroke-dasharray: 8 7;
    vector-effect: non-scaling-stroke;
}

/* Eingerastet: das Teil sitzt und „setzt sich" kurz. */
.pz-snap {
    transform-box: fill-box;
    transform-origin: center;
    animation: pz-snap 0.34s ease-out;
}
@keyframes pz-snap {
    0%   { transform: scale(1.10); }
    60%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* --- Die vier Teile zur Auswahl ----------------------------------
   🔴 KEIN Kasten um die Teile — sie liegen frei da wie echte Puzzleteile.
   Die Hülle bekommt deshalb auch keine eigene Größe: sie wächst um das
   Teil herum, und das Teil ist genau so groß wie die Lücke. */
.pz-choices-wrap { padding: var(--pz-wrap-pad); }
.pz-choices {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--pz-gap);
}
.pz-choice {
    position: relative;
    box-sizing: content-box;
    padding: var(--pz-tile-pad);
    line-height: 0;
}
/* Das Teil selbst ist der Knopf, den man antippt — ohne Rahmen, ohne
   Fläche, nur die Form. */
.pz-grab {
    position: relative;                      /* Bezug für die Nummer */
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: manipulation;              /* kein Doppeltipp-Zoom, kein 300ms-Warten */
    user-select: none;
    -webkit-user-select: none;
    -webkit-appearance: none;
}
.pz-choice-svg {
    display: block;
    width: var(--pz-piece);
    height: var(--pz-piece);
}
/* Die Nummer: damit die Klasse sagen kann, welches Teil sie meint. */
.pz-num {
    position: absolute;
    top: 0;
    left: 2px;
    font-family: var(--math-font, inherit);
    font-weight: 900;
    font-size: clamp(17px, 2.6vh, 26px);
    line-height: 1;
    color: #b2bec3;
    pointer-events: none;
    user-select: none;
}


@media (hover: hover) and (pointer: fine) {
    .pz-grab:hover .pz-choice-svg { filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22)); }
}
/* Richtig: das Teil ist eingerastet, sein Platz bleibt leer zurück. */
.pz-choice.is-right .pz-num { opacity: 0.25; }

/* Während die Probe läuft, treten die NICHT gewählten Teile zurück:
   grau und blass — so ist auf einen Blick klar, um welches Teil es
   gerade geht. Das gewählte bleibt, wie es ist. */
.pz-choice.is-dimmed {
    filter: grayscale(1);
    opacity: 0.35;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

/* --- Das fliegende Teil ------------------------------------------
   Ein Klon, der `position:fixed` über der Seite liegt. Größe und
   Drehpunkt setzt die JS aus den echten Bildschirm-Maßen — er wird
   NICHT vergrößert, denn er hat ja schon Lückengröße. */
.pz-drag {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28));
}
/* Passt nicht: an der Lücke rot aufleuchten, dann zurückfliegen. Gefärbt
   wird das TEIL selbst — es gibt keinen Kasten mehr, der das könnte. */
.pz-drag.is-wrong { filter: drop-shadow(0 0 14px rgba(231, 76, 60, 0.85)); }
.pz-drag.is-wrong .pz-piece {
    fill: var(--accent-red, #e74c3c);
    stroke: #a93226;
}
@media (prefers-reduced-motion: reduce) {
    .pz-snap { animation: none; }
    .pz-piece { transition: none; }
}

/* --- Schmal oder hochkant: Auswahl unter das Puzzle ---------------
   Dann steht die Auswahl als Viererreihe darunter — die Schranken
   ändern sich, das Größenversprechen bleibt. */
@media (max-width: 820px), (max-aspect-ratio: 1 / 1) {
    .pz-stage {
        flex-direction: column;
        --pz-avail-w: calc(100vw - 2 * var(--pz-pad-x) - 2 * var(--pz-frame));
        --pz-avail-w4: calc(100vw - 2 * var(--pz-pad-x) - 2 * var(--pz-wrap-pad)
                            - 3 * var(--pz-gap) - 4 * var(--pz-tile-chrome));
        --pz-avail-hv: calc(var(--stage-height) - 2 * var(--pz-pad-y) - 2 * var(--pz-frame)
                            - var(--pz-gap) - 2 * var(--pz-wrap-pad) - var(--pz-tile-chrome));
        --pz-board-w: max(160px, min(var(--pz-avail-w),
                                     calc(var(--pz-avail-w4) * var(--pz-fw4)),
                                     calc(var(--pz-avail-hv) * var(--pz-fv))));
    }
    .pz-choices { grid-template-columns: repeat(4, auto); }
}