@import url("../../../../../global/ui/elements/numberbox.css");
@import url("../../../../../global/ui/elements/dropzone.css");

:root {
    --anim-speed: 1.6s;
}

body {
    overflow: hidden;
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Bühnenhöhe unter dem Header (dvh, keine Magic Number). */
    height: var(--stage-height);
    width: 100%;
    background: white;
    padding: clamp(10px, 3vh, 30px) 0 10px 0;
    box-sizing: border-box;
}

/* Bühne der drei Stufen. position:relative → die fliegenden Klone rechnen in
   DIESEM Koordinatensystem (offsetLeft/Top) und sind damit unabhängig von der
   Autofit-Skalierung. */
.analogy-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Alle Abstände in BOX-Einheiten (nie px): so bleibt das Verhältnis auf
       jedem Schirm gleich und die Auto-Fit-Skalierung nimmt sie mit. */
    gap: calc(var(--nb-box-size) * 0.18);
    /* 🔴 Luft zu den blauen Antwort-Boxen — garantierter Mindestabstand, auch
       wenn kein freier Platz mehr zu verteilen ist (die globale Regel in
       scaling.css schiebt die Optionen nur nach unten, sie hält keinen Abstand). */
    margin-bottom: calc(var(--nb-box-size) * 0.45);
    /* Größe des Stellenwert-Bildes an die Zahlen-Box koppeln: eine Zehnerstange
       (10 Einheiten) wird damit etwas HÖHER als die Zahlen-Box — das Bild ist
       die eigentliche Aussage des Moduls und darf nicht Beiwerk sein. Engere
       Lücken als global (0.34), weil neun Stangen nebeneinander stehen. */
    --pv-unit: calc(var(--nb-box-size) * 0.11);
    --pv-gap-ratio: 0.22;
}

/* Eine Stufe = Stellenwert-Bild + Rechnung darunter. */
.task-row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.equation-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Überlappung der Boxen */
.equation-area > .nb-box + .nb-box {
    margin-left: calc(var(--nb-overlap) * -1);
}

/* Alle Reihen mit DERSELBEN Ziffergröße (kleiner als der globale Standard, weil
   in den abgeleiteten Reihen zwei bzw. drei Ziffern in der Box stehen). So gibt
   es beim Landen der fliegenden Klone keinen Größensprung. */
.analogy-screen .nb-card,
.analogy-screen .nb-dropzone {
    font-size: calc(var(--_nb-size) * 0.44);
}

/* ===== STELLENWERT-BILD ÜBER DER RECHNUNG =====
   Eine Zelle je Rechen-Box (gleiche Breite + gleiche Überlappung) → die Bilder
   stehen exakt über „ihrer" Zahl. Feste Höhe, damit alle Reihen gleich hoch sind
   und die Rechnungen beim Wechsel der Stufe nicht springen. */
.pv-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Winziger Abstand zur Zahlen-Box darunter: der 6px-Kartenrand darf nicht
       in die Punkte/Stangen laufen. Box-Einheit → skaliert mit. */
    margin-bottom: calc(var(--nb-box-size) * 0.035);
}

.pv-row > .pv-cell + .pv-cell {
    margin-left: calc(var(--nb-overlap) * -1);
}

/* Höhe JE REIHE nur so groß wie ihr Bild — nicht global auf die Zehnerstange
   ausgelegt: die Einer-Reihe braucht höchstens zwei Punktreihen (5 + 4), die
   abgeleitete Reihe eine ganze Stange. Beides steht fest, also gibt es beim
   Erscheinen der Stufe trotzdem keinen Sprung. */
.pv-cell {
    position: relative;
    width: var(--nb-box-size);
    height: calc(var(--pv-unit) * 2.4);
    flex-shrink: 0;
}

.task-row.derived .pv-cell {
    height: calc(var(--pv-unit) * 10.2);
}

/* Zwei Bilder übereinander: das der Reihe darüber (pv-from, Punkte) und das
   eigene (pv-to, Stangen) — die Animation blendet um. */
.pv-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
}

/* Stufe „Hunderter" nur, wenn sie eingestellt ist. */
.analogy-screen:not(.stages-3) #row-3 {
    display: none;
}

/* Hilfe „Stellenwerte" abgeschaltet → keine Bilder, keine Lücke. */
.analogy-screen.aid-off .pv-row {
    display: none;
}

/* Die Ziffern der Kernaufgabe bleiben, nur die Null(en) kommen dazu — deshalb
   farbig (Bereichsfarbe Lila). */
.ana-zero {
    display: inline-block;
    color: #8e44ad;
}

/* Gelöste Reihe: bleibt als Vorbild stehen, grün gerahmt. */
.ana-solved {
    border-color: var(--nb-highlight-color);
}

.options-container {
    display: flex;
    justify-content: center;
    gap: calc(var(--nb-box-size) * 0.14);
    padding-bottom: calc(var(--nb-box-size) * 0.15);
    transition: opacity 0.3s ease;
}

/* Während die nächste Stufe entsteht: Optionen bleiben stehen (kein
   Layout-Sprung), sind aber sichtbar außer Betrieb. */
.options-container.is-waiting {
    opacity: 0.3;
    pointer-events: none;
}

/* Sichtbarkeits-Klassen (wie in den anderen Modulen der Gruppe) */
.opacity-0 { opacity: 0; }
.opacity-1 { opacity: 1 !important; }