/**
 * NUMBERS-MOREORLESS.CSS
 */

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

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Bühnenhöhe unter dem Header (dvh, keine Magic Number). */
    height: var(--stage-height);
    width: 100%;
    gap: clamp(20px, 4vh, 50px);
}

.game-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

/* Dropbox und Zahlen-Boxen sind GLEICH groß: dieselbe --_nb-size (large) für
   beide, damit die Reihe „Zahl – Dropbox – Zahl" einheitlich wirkt. (Diese Datei
   lädt zuletzt → überschreibt die globalen --_nb-size-Regeln, auch wenn
   render-moreorless.js die Dropzone-Klassen neu setzt.) */
.number-box,
.drop-zone {
    --_nb-size: var(--nb-box-size-large);
}

.symbol-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}