/**
 * COMPARE-MOREORLESS.CSS
 * Vereint das Layout der früheren drei Module (numbers/numberrow/quantity).
 * Sichtbarkeit je Aufgabentyp steuert die Klasse an .game-area
 * (type-numbers / type-numberrow / type-quantity).
 */

@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%;
}

/* Zahlenreihe: fünf Elemente nebeneinander → engerer Abstand. */
.game-area.type-numberrow {
    gap: 15px;
}

/* ---- Sichtbarkeit je Aufgabentyp -------------------------------------- */
/* Standard sichtbar: Ziffern. Mengen-Punkte und Reihen-Zeichen sind aus,
   bis ihr Typ aktiv ist. Die Dropzone ist in allen Typen sichtbar. */
#dotContainerA, #dotContainerB { display: none; }
#symbolLeft, #symbolRight { display: none; }

.game-area.type-numberrow #symbolLeft,
.game-area.type-numberrow #symbolRight { display: flex; }

.game-area.type-quantity #numA,
.game-area.type-quantity #numB { display: none; }
.game-area.type-quantity #dotContainerA,
.game-area.type-quantity #dotContainerB { display: flex; }

/* ---- Ziffern (numbers/numberrow) -------------------------------------- */
/* Große randlose Geister-Boxen im numbers-Typ (man sieht NUR die Ziffer). */
.number-box {
    --_nb-size: var(--nb-box-size-large);
}

.symbol-display {
    color: var(--nb-border-color, #555);
    font-weight: 900;
}

/* Dropbox gleich groß wie die Optionsboxen (Symbole/Zahlen), die man
   hineinzieht (.nb-option = Standardgröße --nb-box-size). Diese Datei lädt
   zuletzt → überschreibt die globalen --_nb-size-Regeln, auch wenn
   render-moreorless.js die Dropzone-Klassen neu setzt. */
.drop-zone {
    --_nb-size: var(--nb-box-size);
}

/* ---- Mengen (quantity) ------------------------------------------------ */
.quantity-display {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-bottom: 60px;
}

/* HILFSZAHLEN (nutzen Patrick Hand via font.css) */
.help-number-label {
    display: none;
    position: absolute;
    bottom: -15px;
    font-size: clamp(50px, 12vh, 90px);
    font-weight: 900;
}

body.show-help-numbers .help-number-label {
    display: block;
}

.dots-left .help-number-label { color: #e74c3c; }
.dots-right .help-number-label { color: #3498db; }

/* ---- Optionsleiste unten ---------------------------------------------- */
/* KEIN width:100% — sonst spannt der Options-Streifen über die ganze Breite
   und das Tutorial-Highlight (#symbolContainer) leuchtet den gesamten unteren
   Bereich aus. Ohne Breite schrumpft das Flex-Item auf Inhaltsbreite. */
.symbol-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
}

/* Schmale Schirme (Smartphone hochkant): im Mengen-Typ passen zwei Zehnerfelder
   NICHT nebeneinander → untereinander stapeln (A oben, „?" mittig, B unten). */
@media (max-width: 640px) {
    .game-area.type-quantity {
        flex-direction: column;
        gap: clamp(10px, 3vh, 26px);
        margin-bottom: clamp(14px, 4vh, 40px);
    }
    .game-area.type-quantity .quantity-display {
        width: 92%;
        padding-bottom: 18px;
    }
    /* Dropzone bekommt dieselbe Reserve nach unten → gleicher Abstand
       Punktebild↔Dropzone auf beiden Seiten (wie im früheren quantity-Modul). */
    .game-area.type-quantity .drop-zone {
        margin-bottom: 18px;
    }
}

/* ---- Settings: Aufgabentyp als 2×2-Raster ----------------------------- */
/* Die vier Typ-Knöpfe (toggleGroup 'moreorless-tasktype') sonst als eine
   Flex-Reihe → zu schmal. Zwei oben, zwei darunter. */
.settings-row[data-group="moreorless-tasktype"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Die Knöpfe zeigen Beispiel-Aufgaben (kein Beschriftungstext). */
.settings-row[data-group="moreorless-tasktype"] .settings-cycle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6em;
}
.settings-row[data-group="moreorless-tasktype"] .tt-ex {
    font-weight: 900;
    font-size: 0.85em;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.settings-row[data-group="moreorless-tasktype"] .tt-tenframe {
    display: block;
    width: auto;
    height: 1.9em;
    margin: 0 auto;
}
.settings-row[data-group="moreorless-tasktype"] .tt-tenframe rect,
.settings-row[data-group="moreorless-tasktype"] .tt-tenframe line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
}
.settings-row[data-group="moreorless-tasktype"] .tt-tenframe circle {
    fill: #e74c3c;
}