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

body {
    overflow: hidden;
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Nutzbare Höhe unter dem (fixen) Header — dvh = mobil-sicher, keine Magic
       Number. Der Header steht im Fluss, daher nur kleiner fluider Innenabstand
       oben (früher 80px → doppelter Header-Abstand). */
    height: var(--stage-height);
    padding: clamp(10px, 3vh, 30px) 0 10px 0;
    box-sizing: border-box;
    background: white;
    gap: clamp(20px, 4vh, 50px);
}

.dotframe-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dotframe-wrapper.hidden {
    display: none;
}

/* Das einreihige Zehnerfeld (1×10) kommt jetzt global aus dotframe.css —
   kein lokaler Override mehr nötig. */

/* Sobald die Aufgabe richtig gelöst ist, bleibt das Feld eingefroren */
.dot-frame.frozen {
    pointer-events: none;
}

.equation-area {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--nb-box-size);
}

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

.nb-symbol {
    font-weight: 900;
    color: #2c3e50;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.options-container {
    display: flex;
    gap: 15px;
    margin-top: auto;
    padding-bottom: 30px;
    z-index: 10;
    min-height: var(--nb-box-size);
}

/* Hier ist die Optionen-Box absichtlich lange leer (während des Zehnerfelds) —
   die globale :empty-Regel (scaling.css, für kurze Async-Aufbau-Lücken gedacht)
   würde sonst die reservierte Höhe auf 0 setzen und die Aufgabe springt nach
   oben, sobald die Optionen erscheinen. ID-Selektor schlägt die globale Regel
   in der Spezifität und hält die Höhe von Anfang an konstant. */
#options-container:empty {
    min-height: var(--nb-box-size);
}