/**
 * ZIELZAHL (Mathespiele) — Optik
 *
 * 🔴 SKALIERUNG: Es gibt genau EINEN Satz fluider Maße (`--zz-*` auf `.zz-game`),
 * aus dem sich ALLES ableitet — Zielzahl-Schrift, Truhe, Edelstein, Rechenzeichen.
 * Keine Magic Numbers, keine feste px-Schrift; die Bühne selbst nimmt
 * `var(--stage-height)`. Das Auto-Fit (`data-autofit`) ist nur das Sicherheitsnetz
 * für den Fall, dass die fluide Rechnung auf sehr engen Schirmen nicht reicht.
 *
 * Die Zahlenkarten und die Ablagefelder kommen unverändert aus dem Baukasten
 * (`numberbox.css` / `dropzone.css`) — hier stehen nur Position und Zustände,
 * NIE eine zweite Karten-/Feld-Optik.
 */

/* Schatz-Optik: warmes Pergament statt des kühlen Standard-Hintergrunds.
   🔴 Die Kopfzeile ist global durchsichtig (ui.css) — der Hintergrund scheint
   also auch dort durch. Er bleibt bewusst HELL, damit der dunkle
   Kopfzeilen-Titel lesbar bleibt und die Seite kein `--header-title-color`
   setzen muss (anders als das Weltraumrennen). */
body {
    background: radial-gradient(circle at 50% 0%, #fffaf0 0%, #ffedcd 55%, #f6dcae 100%);
    overflow: hidden;
}

.zz-game {
    /* --- die EINE Maß-Quelle des Moduls --- */
    --zz-gap: clamp(5px, 1.3vmin, 16px);
    --zz-chest-w: clamp(180px, 46vmin, 460px);
    /* Die Zielzahl sitzt AUF dem Deckel → ihre Schrift hängt an der Truhenbreite,
       nicht mehr am Viewport: so bleibt das Schild bei jeder Größe gleich
       proportioniert. */
    --zz-goal-size: calc(var(--zz-chest-w) * 0.17);
    /* Spalte der Trefferliste rechts — der Platz wird als Bühnen-Padding reserviert. */
    --zz-hits-w: clamp(72px, 13vmin, 150px);
    --zz-gem: clamp(20px, 4.6vmin, 46px);
    --zz-op-size: clamp(20px, 4.6vmin, 50px);
    --zz-text: clamp(12px, 2.3vmin, 22px);

    /* --- Holz & Gold (Schatzkiste, Zielzahl-Schild, Trefferliste) --- */
    --zz-wood: #9c6232;
    --zz-wood-dark: #5f3714;
    --zz-gold: #f0b429;
    --zz-gold-dark: #b47f22;
    --zz-ink: #7a4b22;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zz-gap);
    width: 100%;
    /* Bühnenhöhe unter dem Header (dvh, keine Magic Number). */
    height: var(--stage-height);
    /* 🔴 Symmetrisch: Truhe und Rechnung stehen exakt in der Bühnenmitte. Die
       Trefferliste liegt absolut rechts DARÜBER und verschiebt deshalb nichts
       (nur die Karten halten per Innenabstand beidseitig Platz von ihr, s.
       `.zz-cards`). */
    padding: var(--zz-gap) 12px;
    /* 🔴 Oben genau so viel Luft, wie der GEÖFFNETE Deckel über die Truhe
       ragt (Scharnier 8 %, −26°, inkl. ~10 % Überschwingen des Easings →
       0,263 × Truhenbreite) — so bleibt auch die offene Truhe unter der
       Kopfzeile. Ändert sich Deckel-Form/-Winkel, diesen Faktor neu rechnen. */
    padding-top: calc(var(--zz-chest-w) * 0.265);
    box-sizing: border-box;
    /* Bezugsrahmen für den fliegenden Edelstein und den Abschluss. */
    position: relative;
}

/* 🔴 Truhe + Rechnung sitzen OBEN (kleiner Abstand zur Kopfzeile) statt mittig:
   die globale Zentrier-Strebe aus scaling.css ließ sonst eine große Lücke
   unter der Kopfzeile. Die Karten bleiben über `.options-container` unten. */
.zz-game::before { display: none; }
.zz-game .options-container { margin-block-start: 0; }

/* ============================================================
   KOPFBEREICH: Zielzahl + Schatzkiste
   ============================================================ */

.zz-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(10px, 4vmin, 52px);
}

/* Das Zielzahl-Schild liegt IM Deckel (`.zz-chest-lid`) — es klappt damit ohne
   eigene Animation mit auf, wenn die Truhe öffnet. */
.zz-goal {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    z-index: 1;
}

/* Das Zielzahl-Schild: goldene Tafel in dunklem Holzrahmen. Alle Maße hängen
   an der Schriftgröße (em), damit das Schild mit der Zahl mitwächst. */
.zz-goal-num {
    display: inline-block;
    font-size: var(--zz-goal-size);
    line-height: 1;
    font-weight: 900;
    color: #fff;
    padding: 0.08em 0.3em;
    border: 0.07em solid var(--zz-wood-dark);
    border-radius: 0.18em;
    background: linear-gradient(#f9d16b, #e5a11c 60%, #d08c10);
    text-shadow: 0 0.03em 0 rgba(0, 0, 0, 0.35);
    box-shadow: 0 0.07em 0 var(--zz-gold-dark), 0 0.14em 0.25em rgba(0, 0, 0, 0.22);
}

/* --- Die Schatzkiste ---------------------------------------- */

.zz-treasure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
}

.zz-chest {
    position: relative;
    width: var(--zz-chest-w);
    aspect-ratio: 4 / 3;
    transform-origin: 50% 100%;
}

/* „Gefüllt" — die Truhe wackelt, wenn ein Edelstein hineinfällt (sie geht
   dabei NICHT auf; offen ist sie erst beim Abschluss). */
.zz-chest.is-wobble { animation: zzChestWobble 0.6s ease-in-out; }

.zz-chest-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64%;
    box-sizing: border-box;
    border: 3px solid var(--zz-wood-dark);
    border-radius: 4px 4px 10px 10px;
    background:
        linear-gradient(90deg, transparent 46%, rgba(240, 180, 41, 0.9) 46%, rgba(240, 180, 41, 0.9) 54%, transparent 54%),
        linear-gradient(var(--zz-wood), #7d4c22);
    overflow: hidden;
}

.zz-chest-lid {
    /* Bezugsrahmen für das Zielzahl-Schild darauf. */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42%;
    box-sizing: border-box;
    border: 3px solid var(--zz-wood-dark);
    border-radius: 48% 48% 5px 5px / 88% 88% 5px 5px;
    background:
        linear-gradient(90deg, transparent 46%, rgba(240, 180, 41, 0.9) 46%, rgba(240, 180, 41, 0.9) 54%, transparent 54%),
        linear-gradient(#b87333, var(--zz-wood) 65%, #7d4c22);
    /* Scharnier hinten links — der Deckel klappt auf, wenn etwas hineinfällt. */
    transform-origin: 8% 100%;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.zz-chest.is-open .zz-chest-lid { transform: rotate(-26deg); }

/* Schloss sitzt auf der Naht zwischen Deckel und Kasten. */
.zz-chest-lock {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 13%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -30%);
    border: 2px solid var(--zz-wood-dark);
    border-radius: 3px;
    background: linear-gradient(var(--zz-gold), var(--zz-gold-dark));
    z-index: 3;
}

/* --- Die Edelsteine (ein Platz je möglicher Lösung) --------- */

.zz-gems {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: calc(var(--zz-gem) * 0.28);
    width: 100%;
    height: 100%;
    padding: calc(var(--zz-gem) * 0.3);
    box-sizing: border-box;
}

.zz-gem {
    width: var(--zz-gem);
    height: var(--zz-gem);
    /* Fünfeckiger Schliff — dieselbe Form wie der fliegende Stein. */
    clip-path: polygon(50% 0%, 100% 36%, 78% 100%, 22% 100%, 0% 36%);
    /* Leerer Platz = sichtbare, dunkle Mulde in Steinform. */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.28));
}

.zz-gem.is-on {
    background: var(--zz-gem-bg);
    animation: zzGemIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Vier Farben im Wechsel — eine volle Truhe soll bunt sein (Klasse aus JS,
   dieselbe für wartenden, fliegenden und eingesetzten Stein). */
.zz-gc-0 { --zz-gem-bg: linear-gradient(#a7e8ff, #1fa2d6); }
.zz-gc-1 { --zz-gem-bg: linear-gradient(#ffc1bd, #e0483c); }
.zz-gc-2 { --zz-gem-bg: linear-gradient(#c3f0c0, #46a544); }
.zz-gc-3 { --zz-gem-bg: linear-gradient(#e6c6ff, #9b4fd0); }

/* Der wartende Diamant rechts neben der Rechnung. Absolut, damit die Rechnung
   exakt mittig bleibt. */
.zz-eq { position: relative; }
.zz-next {
    position: absolute;
    left: 100%;
    top: 50%;
    width: calc(var(--zz-gem) * 1.4);
    height: calc(var(--zz-gem) * 1.4);
    margin: calc(var(--zz-gem) * -0.7) 0 0 calc(var(--zz-gem) * 0.8);
    clip-path: polygon(50% 0%, 100% 36%, 78% 100%, 22% 100%, 0% 36%);
    background: var(--zz-gem-bg);
    transition: opacity 0.2s ease;
}
.zz-next.is-gone { opacity: 0; }


/* ============================================================
   TREFFERLISTE — die schon gefundenen Aufgaben
   ============================================================ */

/* Eigene Spalte RECHTS an der Bühnenkante: absolut, damit ein neuer Treffer
   die Rechnung darunter niemals verschiebt. Der Platz dafür steckt als
   `padding-right` in `.zz-game` — beides hängt an `--zz-hits-w`. */
.zz-hits {
    position: absolute;
    top: var(--zz-gap);
    right: 0;
    bottom: var(--zz-gap);
    width: var(--zz-hits-w);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: calc(var(--zz-gap) * 0.6);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 2px;
    box-sizing: border-box;
}

.zz-hit {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    padding: 0.22em 0.5em;
    border: 2px solid #e0bd8a;
    border-radius: 999px;
    background: #fff;
    color: var(--zz-ink);
    font-weight: 900;
    font-size: var(--zz-text);
    line-height: 1.2;
    box-shadow: 0 2px 0 rgba(122, 75, 34, 0.18);
    animation: zzPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zz-hit-op { font-style: normal; color: #b07a3a; }

/* ============================================================
   DIE RECHNUNG
   ============================================================ */

.zz-eq {
    /* 🔴 Immer MITTIG zwischen Truhe und Zahlenkarten: der freie Platz teilt
       sich gleich auf die beiden Auto-Ränder auf. Dafür verzichten die Karten
       auf ihr globales `margin-top:auto` (s. u.) — sonst gäbe es drei
       Auto-Ränder und die Rechnung säße im oberen Drittel. */
    margin-block: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1.2vmin, 14px);
    flex-wrap: nowrap;
}

/* Ein besetztes Ablagefeld darf angetippt werden, um die Karte zurückzuholen. */
.zz-slot { cursor: pointer; }
.zz-slot:empty { cursor: default; }

/* Falsche Rechnung: bewusst NICHT die globale `.wrong`-Klasse der Dropzone —
   der DragDropManager räumt ein `wrong`-Feld nach 800 ms selbst aus und das
   Modul wüsste nichts davon. Farbe und Wackeln sind dieselben. */
.zz-slot.zz-bad {
    background-color: #e74c3c !important;
    color: #fff !important;
    border: var(--nb-overlap) solid #8e0000 !important;
    border-radius: 12px;
    animation: shakeZone 0.5s ease-in-out;
}

/* --- Rechenzeichen: erst wählen, dann rechnet es --------------- */

.zz-ops {
    display: flex;
    gap: calc(var(--zz-gap) * 0.5);
}

.zz-op {
    font-family: var(--math-font);
    font-size: var(--zz-op-size);
    font-weight: 900;
    line-height: 1;
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 3px solid #e0bd8a;
    border-radius: 50%;
    background: #fff;
    color: #c09a63;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* + und − als Balken, geometrisch exakt in der Kreismitte. */
.zz-op::before,
.zz-op-plus::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.62em;
    height: 0.14em;
    border-radius: 0.07em;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.zz-op-plus::after { transform: translate(-50%, -50%) rotate(90deg); }

.zz-op.is-on {
    background: linear-gradient(var(--zz-wood), #7d4c22);
    border-color: var(--zz-wood-dark);
    color: #fff;
    transform: scale(1.08);
}

/* Nur EINE Rechenart eingestellt → das Zeichen steht fest, es gibt nichts zu wählen. */
.zz-op.is-fixed { cursor: default; }

/* „Welches Rechenzeichen?" — kurzer Hinweis-Puls. */
.zz-ops.is-ask .zz-op { animation: zzPulse 0.8s ease-in-out 2; }

.zz-eq-sign,
.zz-eq-res {
    font-size: calc(var(--zz-op-size) * 1.15);
    font-weight: 900;
    line-height: 1;
    color: var(--zz-ink);
}

.zz-eq-sign { font-family: var(--math-font); }

/* Bei einer falschen Rechnung steht hier kurz das ECHTE Ergebnis in Rot —
   das sagt mehr als jeder Satz und braucht keine Übersetzung. */
.zz-eq-res.is-bad {
    color: #e74c3c;
    animation: shakeZone 0.5s ease-in-out;
}

/* ============================================================
   RÜCKMELDUNG
   ============================================================ */

.zz-msg {
    min-height: 1.6em;
    text-align: center;
    font-weight: 800;
    font-size: var(--zz-text);
    line-height: 1.3;
    color: #8a6534;
}

.zz-msg.is-good { color: #2e7d32; }
.zz-msg.is-bad { color: #c0392b; }

/* ============================================================
   DIE ZAHLENKARTEN (Baukasten: .nb-box.nb-option)
   ============================================================ */

.zz-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 1.5vmin, 18px);
    width: 100%;
    /* Beidseitig der Platz der rechten Trefferliste: die Karten laufen nicht
       darunter und bleiben trotzdem exakt mittig. */
    padding: 0 var(--zz-hits-w);
    box-sizing: border-box;
}

/* Karte liegt gerade in einem Ablagefeld → sie kann nicht zweimal benutzt werden. */
.zz-card.zz-used {
    opacity: 0.25;
    transform: scale(0.9);
    pointer-events: none;
}

/* Während einer Rückmeldung ist die Bühne kurz taub — sonst landet die nächste
   Karte mitten in der laufenden Auswertung. */
.zz-game.is-busy .zz-card,
.zz-game.is-busy .zz-slot,
.zz-game.is-busy .zz-op { pointer-events: none; }

/* ============================================================
   DER FLIEGENDE EDELSTEIN
   Fliegt von der Rechnung in die Truhe. Position setzt das JS (in
   Layout-Koordinaten des Containers, Auto-Fit-Maßstab herausgerechnet);
   die halbe Kantenlänge als negativer Rand zentriert ihn, damit `transform`
   frei für den Flug bleibt.
   ============================================================ */

.zz-fly {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--zz-gem) * 1.4);
    height: calc(var(--zz-gem) * 1.4);
    margin: calc(var(--zz-gem) * -0.7) 0 0 calc(var(--zz-gem) * -0.7);
    clip-path: polygon(50% 0%, 100% 36%, 78% 100%, 22% 100%, 0% 36%);
    background: var(--zz-gem-bg, linear-gradient(#fff6c2, var(--zz-gold)));
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
    pointer-events: none;
    z-index: 15;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ============================================================
   ABSCHLUSS
   ============================================================ */

.zz-done {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.8vmin, 18px);
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
    /* 🔴 KEINE Tönung: sie deckte nur die Bühne ab, Kopfzeile und unterer Rand
       blieben ungetönt und schienen dadurch die Farbe zu wechseln. Gefeiert
       wird mit Feuerwerk und Goldregen, die offene Truhe bleibt voll sichtbar. */
    background: transparent;
    animation: zzFade 0.3s ease;
}

/* Feuerwerk + Goldregen: 🔴 GANZER Bildschirm, auch über der Kopfzeile — die
   Ebene hängt dafür zur Laufzeit am `<body>` (s. `fwStart` in zielzahl.js) und
   liegt über allem. Klickdurchlässig, damit Knöpfe bedienbar bleiben. */
.zz-fw {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1200;
    pointer-events: none;
    display: none;
}

.zz-fw.is-on { display: block; }

.zz-done h2,
.zz-done .zz-again { position: relative; z-index: 1; }

/* `hidden` schlägt `display:flex` nicht von selbst — sonst bliebe der
   Abschluss dauerhaft sichtbar. */
.zz-done[hidden] { display: none; }

.zz-done h2 {
    margin: 0;
    font-size: clamp(26px, 7vmin, 72px);
    color: var(--zz-ink);
    text-shadow: 0 2px 0 #fff, 0 4px 10px rgba(122, 75, 34, 0.25);
    animation: zzPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zz-again {
    font-family: inherit;
    font-size: calc(var(--zz-text) * 1.15);
    font-weight: 900;
    color: #fff;
    background: linear-gradient(#4aa94a, #2e7d32);
    border: none;
    border-radius: 14px;
    padding: 0.55em 1.3em;
    cursor: pointer;
    box-shadow: 0 5px 0 #1b5e20;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zz-again:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #1b5e20;
}

/* ============================================================
   ANIMATIONEN (shakeZone kommt global aus dropzone.css)
   ============================================================ */

@keyframes zzPop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes zzChestWobble {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-6deg); }
    40% { transform: rotate(5deg); }
    60% { transform: rotate(-3deg); }
    80% { transform: rotate(2deg); }
}

@keyframes zzGemIn {
    0% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

@keyframes zzPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); border-color: var(--zz-gold); }
}

@keyframes zzFade {
    from { opacity: 0; }
    to { opacity: 1; }
}