/**
 * ZAHLENFELD-NUMBERS.CSS
 * Nur das Layout DIESES Moduls. Das Feld selbst, die Lücken, das Aufblitzen,
 * der Glitzer, die fallenden Zahlen und die Z/E-Eingabe kommen aus den globalen
 * Bausteinen (hundredfield.css, placevalueinput.css) — hier steht nur, wo sie
 * stehen und wie groß.
 *
 * 🔴 SKALIERUNG OHNE SPRINGEN — der Vertrag dieses Moduls:
 *   1. Die Seite ist genau `--stage-height` hoch und hat NUR die Feld-Bühne.
 *      Die Zahl wird in einer Sprechblase an der angetippten Lücke eingestellt
 *      (globaler Baustein `PlaceValueInput.openBubble`) — die schwebt über der
 *      Seite und braucht daher keinen reservierten Platz mehr; es kann also
 *      auch nichts springen.
 *   2. Das Feld nimmt die volle Resthöhe: `.hf-stage` ist ein GRÖSSEN-CONTAINER
 *      (`container-type: size`), die Zelle = kleinere Container-Achse / Reihen.
 *      Deshalb braucht die Seite KEIN `data-autofit` (das skaliert nachträglich
 *      herunter — hier passt es von vornherein, wie beim Zahlenstrahl).
 */

body { overflow: hidden; }

.game-container {
    /* Platz, den der Affe rechts neben dem Feld bekommt (einmal definiert:
       Breite des Bildes UND rechter Freiraum der Bühne). */
    /* 🔴 Auch von der BREITE gedeckelt: der Streifen wird links UND rechts
       freigehalten, zwei feste 15vh-Streifen fraßen auf einem schmalen
       Telefon über die Hälfte der Fensterbreite — und die Breite ist dort
       genau die Achse, an der das Feld hängt. */
    --hf-ape-w: clamp(64px, min(15vh, 12vw), 210px);

    display: flex;
    flex-direction: column;
    align-items: center;
    height: var(--stage-height);
    padding: clamp(4px, 1.2vh, 14px) 0;
    box-sizing: border-box;
    background: #fff;
    gap: clamp(6px, 1.6vh, 18px);
}

/* Feld-Bühne: nimmt die ganze Resthöhe und ist der Größen-Bezug des Feldes. */
.hf-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    /* 🔴 Bewusst breit: seit die Eingabe in der Sprechblase steckt, ist unten
       kein Platz mehr belegt — dann darf auch die BREITE mehr hergeben, sonst
       bliebe die Höhe ungenutzt (das Feld ist quadratisch, es bindet immer die
       kleinere Achse). */
    width: min(98vw, 1500px);
    /* Links derselbe Streifen wie rechts (dort sitzt der Affe) → das Feld
       bleibt exakt in der Fenstermitte, s. Vertrag oben. */
    padding-left: var(--hf-ape-w);
    padding-right: var(--hf-ape-w);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
}

/* Die Zelle ist die kleinere Container-Achse geteilt durch die Zellen dieser
   Achse: senkrecht die ECHTE Reihenzahl (`--hf-rows`, setzt HundredField.build
   je Zahlenraum — ein Feld 0-30 hat drei Reihen und darf entsprechend größere
   Zellen haben), waagerecht immer zehn Spalten. `- 4px` = der 2px-Außenrahmen
   des Feldes auf beiden Seiten, sonst läuft es genau um den Rahmen über. */
.hf-stage .hf-field {
    --hf-cell: min(calc((100cqh - 4px) / var(--hf-rows, 10)), calc((100cqw - 4px) / 10));
}

/* ===== AFFE =====
   Unten rechts in dem Streifen, den die Bühne freihält (überdeckt das Feld
   also nie). Klick schüttelt ihn (JS setzt is-shaking). */
.hf-ape {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--hf-ape-w);
    height: auto;
    /* Auf sehr flachen Fenstern bindet die Höhe — sonst ragte der Affe oben
       aus der Bühne heraus (er hängt absolut an deren Unterkante). */
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: 50% 100%;
    transition: filter 0.2s ease;
}

.hf-ape:hover {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
}

/* ===== HOCHFORMAT / SCHMALER SCHIRM (Telefon hochkant) =====
   🔴 Dort bindet das Feld die BREITE, nicht die Höhe — senkrecht bleibt Platz
   übrig. Die beiden Seiten-Streifen für den Affen sind deshalb reine
   Verschwendung (das Feld wurde winzig, obwohl oben und unten Luft war):
   Statt NEBEN dem Feld bekommt der Affe hier einen Streifen DARUNTER
   (`padding-bottom` der Bühne = Platz, den er nie mit dem Feld teilt, weil die
   Bühne ihr Feld nur im Inhaltsbereich zentriert). So nutzt das Feld die volle
   Fensterbreite und skaliert dynamisch mit. */
@media (max-aspect-ratio: 3 / 4) {
    .game-container {
        --hf-ape-w: clamp(62px, 18vw, 150px);
        /* Bildverhältnis des Affen (513 × 592) → Höhe des unteren Streifens. */
        --hf-ape-h: calc(var(--hf-ape-w) * 1.16);
    }

    .hf-stage {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: var(--hf-ape-h);
    }

    .hf-ape {
        max-height: var(--hf-ape-h);
    }
}

/* Warten = der Affe ist gerade nicht gefragt (Zahlen liegen noch unten).
   🔴 Er bleibt dabei voll sichtbar (kein Ausgrauen) — nur der Zeiger und der
   Hover-Schatten verraten, dass gerade nichts zu holen ist. */
.hf-ape.is-waiting {
    cursor: default;
}

.hf-ape.is-waiting:hover {
    filter: none;
}

/* Schütteln von links nach rechts. 🔴 Dauer und Wiederholungen stehen NUR
   hier (an --anim-speed gekoppelt); das JS liest sie zur Laufzeit aus dem
   Element aus, damit der Faktor nicht doppelt im Projekt steht. */
.hf-ape.is-shaking {
    animation: hf-ape-shake calc(var(--anim-speed, 1.6s) * 0.55) ease-in-out 2;
}

@keyframes hf-ape-shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25%      { transform: translateX(-9%) rotate(-7deg); }
    75%      { transform: translateX(9%) rotate(7deg); }
}