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

:root {
    --grid-unit: calc(var(--nb-box-size) - var(--nb-overlap));
}

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);
    background: white;
    padding: clamp(10px, 3vh, 30px) 0 10px 0;
    box-sizing: border-box;
}

.equation-area {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: var(--nb-box-size);
    /* Vertikale Zentrierung kommt jetzt global aus scaling.css (data-autofit);
       die frühere margin-bottom:auto würde dort eine dritte Auto-Margin setzen. */
}

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

/* Reserviert Platz für die Flugkurve.
   #eq-symbol/#slot-3 tauchen während des Tauschs 140% (= 1,4 × Box) nach unten
   (animation-structure-operators.css). Dieser Platz MUSS erhalten bleiben:
   flex:0 0 auto verhindert, dass flex-shrink ihn auf engen Schirmen schluckt –
   sonst fliegen die Boxen in die Optionen-Reihe. */
.anim-spacer {
    flex: 0 0 auto;
    height: calc(var(--nb-box-size) * 1.5);
    width: 100%;
    visibility: hidden;
}

.options-container {
    display: flex; 
    gap: 15px; 
    padding-bottom: 30px;
    z-index: 10;
}

/* Bereinigte Symbol-Klasse: Nutzt nun globale Numberbox-Schriftgrößen */
.nb-symbol {
    font-weight: 900;
    color: #2c3e50;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animationen für den Tausch */
.no-animation * {
    animation: none !important;
    transition: none !important;
}

.swapped #slot-1 {
    animation: fly-to-right var(--anim-speed) forwards cubic-bezier(0.42, 0, 0.58, 1);
}

.swapped #slot-2 {
    animation: fly-to-left var(--anim-speed) forwards cubic-bezier(0.42, 0, 0.58, 1);
}

@keyframes fly-to-right {
    0% { transform: translate(0, 0); }
    50% { transform: translate(var(--grid-unit), calc(var(--nb-box-size) * -0.5)); }
    100% { transform: translate(var(--grid-unit), 0); }
}

@keyframes fly-to-left {
    0% { transform: translate(0, 0); }
    50% { transform: translate(calc(var(--grid-unit) * -1), calc(var(--nb-box-size) * 0.5)); }
    100% { transform: translate(calc(var(--grid-unit) * -1), 0); }
}