/* ============================================================
 * MINUS VOM ZEHNER — Layout dieses Moduls
 * Nur Anordnung: Zehnerfeld, drei Gleichungszeilen, Optionen.
 * Alle Bausteine (dot-frame, nb-box, nb-dropzone) kommen global.
 * ============================================================ */

.main-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.exercise-area {
    /* Modul-lokal kleinere Zahl-/Dropboxen: hier stehen drei Gleichungszeilen
       UNTEREINANDER — mit der globalen Standardgröße (bis 180px) würde der Block
       so hoch, dass autofit alles (inkl. der Zeilenabstände) uniform
       herunterskaliert und die Aufgaben aneinanderkleben. */
    --nb-box-size: clamp(58px, min(12vw, 13vh), 112px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* fit-content statt fixer Breite: eine Gleichungszeile mit 5 Boxen kann auf
       dem Handy breiter als der Schirm sein. Mit gedeckelter Breite liefe sie
       seitlich über UND autofit.js (misst .main-container) sähe den wahren
       Platzbedarf nie. */
    width: fit-content;
    /* min- statt fixer Höhe — aus demselben Grund für die Höhe. */
    min-height: 88vh;
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-sizing: border-box;
}

/* Zahlenraum bis 1000 → dreistellige Zahlen. Die Box bleibt quadratisch, also
   muss die Schrift schmaler werden — IMMER über --nb-font-ratio, nie in px. */
.exercise-area.wide-numbers {
    --nb-font-ratio: 0.45;
}

/* --- Der geknackte Zehner ------------------------------------------------ */
.tenframe-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tm-heart {
    font-size: clamp(28px, min(7vw, 8vh), 64px);
    line-height: 1;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
    /* Erst wenn die verliebten Zahlen gefunden sind, schlägt es (s. .beat). */
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

.tm-heart.beat {
    opacity: 1;
    animation: tm-beat 0.6s ease-in-out 2;
}

@keyframes tm-beat {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.25); }
    60%      { transform: scale(1.05); }
}

/* --- Rechenweg ----------------------------------------------------------- */
.math-steps {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 4vh, 40px);
    align-items: center;
    flex-grow: 1;
    justify-content: center;
}

.math-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nb-symbol {
    font-weight: 800;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Lösungs-Box: setzt sich aus den beiden Antworten zusammen ------------ */
/* Links die Zehner (ein Zehner weniger), rechts der Einer (die verliebte
   Zahl). Solange ein Platz leer ist, zeigt er ein blasses „?". */
.tm-slot {
    display: inline-block;
    min-width: 0.62em;
    text-align: center;
}

.tm-slot:empty::before {
    content: '?';
    opacity: 0.25;
}

.tm-slot.filled {
    color: var(--nb-highlight-color, #27ae60);
    animation: tm-land 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Kleiner Aufprall, wenn die geflogene Zahl ihren Platz einnimmt. */
@keyframes tm-land {
    0%   { transform: scale(1.35); }
    60%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

/* --- Die Zahl fliegt in die Lösung --------------------------------------- */
/* Klon-Flug (animation-tensminus-calculating.js): das äußere Element wandert
   waagerecht GLEICHMÄSSIG, das innere senkrecht BESCHLEUNIGT — zusammen ergibt
   das einen Bogen statt einer geraden Linie. Dauer/Kurve nur hier ändern. */
.tm-fly {
    --tm-fly-time: 1.1s;
    position: fixed;
    z-index: 1200;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(0) scale(1);
    transition: transform var(--tm-fly-time) linear;
    will-change: transform;
}

.tm-fly-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* Zahlenschriftart wie überall in den Aufgaben (global `--math-font`). */
    font-family: var(--math-font);
    font-weight: 900;
    line-height: 1;
    color: var(--nb-highlight-color, #27ae60);
    text-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
    transform: translateY(0);
    transition: transform var(--tm-fly-time) cubic-bezier(0.45, 0.02, 0.55, 0.35);
    will-change: transform;
}

/* Wer Bewegung reduziert haben will, bekommt den Tausch ohne Flug. */
@media (prefers-reduced-motion: reduce) {
    .tm-fly { --tm-fly-time: 0.01s; }
    .tm-slot.filled { animation: none; }
}

/* visibility statt display:none → die Zeilen reservieren ihren Platz von Anfang
   an, damit beim schrittweisen Einblenden nichts springt. */
.step-hidden-row {
    visibility: hidden !important;
}

.step-hidden {
    visibility: hidden;
}

.step-divider {
    width: 100%;
    max-width: 600px;
    height: 2px;
    background: #edf2f7;
    margin: 5px 0;
}

/* --- Zahlen zum Ziehen --------------------------------------------------- */
.options-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 15px 10px;
    border-top: 2px dashed #e2e8f0;
    min-height: 120px;
    margin-top: auto;
}