/* ============================================================
 * WÜRFELGEBÄUDE (Kopfgeometrie)
 * Oben das drehbare Gebäude, unten mittig die Zahl-Eingabe. Nur das
 * Layout dieses Moduls — Farben/Knöpfe kommen aus der globalen Basis,
 * der grüne Prüf-Knopf aus `global/ui/elements/check-button.css`.
 *
 * 🔴 ECHTES 3-D, KEINE GEMALTE SCHRÄGE: `.cb-world` trägt die Blick-
 * richtung und steht auf `transform-style: preserve-3d`; die Klötze und
 * ihre sechs Seiten sind Kinder darin. Verdeckung und Perspektive
 * stimmen dadurch beim Drehen von selbst.
 * 🔴 Deshalb darf auf der Kette .cb-scene → .cb-world → .cube3d NIE
 * `overflow`, `filter`, `opacity`, `container-type` o. Ä. stehen: jede
 * dieser Eigenschaften macht die 3-D-Ebene platt. Die Durchsicht (👁️)
 * sitzt darum als `opacity` auf den SEITEN — die sind Blätter.
 *
 * SKALIERUNG: Die Seite füllt die Bühne (`--stage-height`, globale
 * Quelle). Die Kantenlänge `--cb-edge` rechnet `layout()` in
 * cube-buildings.js aus der freien Fläche von `.cb-fit` — alles im Bild
 * (Boden, Klötze, Seiten, Ränder) hängt daran und wächst automatisch mit.
 * ============================================================ */

.cb-stage {
    /* Die einzige Stelle, an der Ränder/Reserven stehen. */
    --cb-pad-y: clamp(8px, 2vh, 24px);      /* Luft oben/unten */
    --cb-pad-x: clamp(8px, 2vw, 32px);      /* Luft links/rechts */
    --cb-gap: clamp(8px, 1.8vh, 22px);      /* Gebäude ↔ Zahl-Eingabe */

    box-sizing: border-box;
    height: var(--stage-height);
    padding: var(--cb-pad-y) var(--cb-pad-x);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cb-gap);
}

/* Die freie Fläche des Gebäudes: genau dieser Kasten wird gemessen
   (clientWidth / clientHeight) — deshalb steht die Rand-Rechnung nur im
   Padding oben und nirgends als Magic Number im JS. */
.cb-fit {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bildkasten der Szene — Breite/Höhe setzt layout() in px.
   `touch-action:none`, damit das Ziehen dreht und nicht die Seite
   scrollt. */
.cb-scene {
    position: relative;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.cb-scene.is-dragging { cursor: grabbing; }

/* Nullpunkt der 3-D-Welt: ein Punkt ohne Ausdehnung (links/oben setzt
   layout()), damit sich alle Drehungen um genau diesen Punkt drehen.
   Die zwölf Seiten-Farben (Holz + Grün × sechs Richtungen) setzt
   `shade()` als Variablen HIER — nicht am einzelnen Klotz. */
.cb-world {
    position: absolute;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: rotateX(var(--cb-tilt, 58deg)) rotateZ(var(--cb-turn, 45deg));
}

/* --- Bodenplatte -------------------------------------------------
   Das 4×4-Feld, auf dem gebaut wird. Liegt winzig unter Null, damit sie
   sich nicht mit den Klotz-Unterseiten um dieselbe Ebene streitet. */
.cb-ground {
    position: absolute;
    left: calc(var(--cb-edge) * -2);
    top: calc(var(--cb-edge) * -2);
    width: calc(var(--cb-edge) * 4);
    height: calc(var(--cb-edge) * 4);
    box-sizing: border-box;
    transform: translateZ(-1px);
    background-color: #e9eff5;
    /* Rasterlinien: genau eine Kantenlänge Abstand → das Feld zeigt,
       wo ein Klotz stehen kann. */
    background-image:
        linear-gradient(to right, rgba(90, 110, 130, 0.30) 0 1.5px, transparent 1.5px),
        linear-gradient(to bottom, rgba(90, 110, 130, 0.30) 0 1.5px, transparent 1.5px);
    background-size: var(--cb-edge) var(--cb-edge);
    border: 2px solid rgba(90, 110, 130, 0.55);
    border-radius: calc(var(--cb-edge) * 0.04);
}

/* --- Die Klötze ---------------------------------------------------
   🔴 Körper und Aussehen eines Würfels stehen GLOBAL in
   `global/ui/elements/cube3d.css` (`.cube3d` / `.cube3d-face`) — hier
   steht nur, was für DIESES Modul gilt. Klicks fängt die Szene (eigene
   Strahl-Rechnung im JS), nicht der Klotz — sonst käme man nie an einen
   verdeckten heran (das erledigt schon `pointer-events` am `.cube3d`).

   Die zwölf Seiten-Farben (Holz + Grün × sechs Richtungen) setzt
   `Cube3D.shade()` als Variablen an der WELT — nicht am einzelnen
   Klotz: sie hängen nur am Blickwinkel. */
.cb-world {
    /* Kantenlänge und Kantenfarbe des globalen Würfels für dieses Modul. */
    --cube-edge: var(--cb-edge);
    --cube-line-color: rgba(72, 46, 16, 0.45);
}

/* Durchsicht (👁️): die eingebauten Klötze werden sichtbar. Mitgezählte
   bleiben kräftiger, damit man beim Zählen den Faden nicht verliert.
   🔴 Die Durchsicht sitzt auf den SEITEN (Blätter der Kette) — an der
   Welt oder am Klotz machte `opacity` die 3-D-Ebene platt. */
.cb-world.is-xray .cube3d-face { opacity: 0.34; }
.cb-world.is-xray .cube3d.is-marked .cube3d-face { opacity: 0.66; }

/* --- Zahl-Eingabe (unten mittig) ---------------------------------
   Zwei Ziffern-Säulen wie in der Stellenwerttafel: ▲ oben, Ziffer
   mittig, ▼ unten. Nebeneinander gelesen ergeben sie die Zahl
   (links Zehner, rechts Einer). Daneben der globale Prüf-Knopf. */
.cb-answer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(12px, 3vw, 30px);
}

.cb-num {
    display: flex;
    align-items: stretch;
    gap: clamp(2px, 0.6vw, 10px);
    padding: clamp(4px, 1vh, 10px) clamp(10px, 2vw, 24px);
    background: white;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.cb-num.wrong { animation: cb-shake 0.4s both; }

.cb-digit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1px, 0.4vh, 5px);
}

.cb-step {
    border: none;
    background: transparent;
    color: #000;
    font-size: clamp(15px, 2.4vh, 26px);
    line-height: 1;
    cursor: pointer;
    padding: 3px 12px;
    border-radius: 10px;
    transition: background 0.15s, transform 0.15s;
}
.cb-step:hover { background: #f1f5f9; transform: scale(1.1); }
.cb-step:active { transform: scale(0.95); }

.cb-val {
    font-family: var(--math-font, sans-serif);
    font-size: clamp(34px, 6.4vh, 66px);
    font-weight: 900;
    line-height: 1;
    min-width: 0.72em;
    text-align: center;
    color: #2c3e50;
    transition: color 0.3s;
}
.cb-num.correct .cb-val { color: #22c55e; }
.cb-num.wrong .cb-val { color: var(--accent-red, #e74c3c); }

@keyframes cb-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    30%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .cb-num.wrong { animation: none; }
}

/* --- Hinweis-Pfeil am 🎲-Knopf --------------------------------------
   Ist die Zahl richtig, zeigt ein pulsierender Pfeil auf den Würfel:
   „hier gibt's das nächste Gebäude". Er sitzt IM Knopf (`left:100%`) und
   wandert damit automatisch mit, wenn die Kopfzeile einklappt. */
.cb-hint {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 10px;
    transform: translateY(-50%);
    font-size: calc(var(--side-btn-size) * 0.8);
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}
.side-btn.is-hint .cb-hint {
    opacity: 1;
    visibility: visible;
    animation: cb-hint-pulse 1.2s ease-in-out infinite;
}
/* Der Pfeil „stupst" den Knopf an: er wandert leicht auf ihn zu. */
@keyframes cb-hint-pulse {
    0%, 100% { transform: translate(0, -50%) scale(1); }
    50%      { transform: translate(-6px, -50%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .side-btn.is-hint .cb-hint { animation: none; }
}