/* ============================================================
 * WÜRFELKIPPEN (Kopfgeometrie)
 * Links die Felderreihe mit dem kippenden Würfel, rechts der frei
 * drehbare Kontrollwürfel. Nur Layout dieses Moduls — Farben/Knöpfe
 * kommen aus der globalen Basis.
 *
 * 🔴 ECHTES 3-D, KEINE GEMALTE SCHRÄGE: `#dt-world` bzw. `#dt-ref-cube`
 * tragen die Blickrichtung und stehen auf `transform-style: preserve-3d`;
 * die Würfelseiten sind Kinder darin. Dadurch stimmen Verdeckung und
 * Perspektive beim Kippen/Drehen von selbst — und die sichtbaren
 * Augenzahlen stimmen immer, weil der Würfel wirklich gedreht wird und
 * nicht neu gezeichnet.
 * 🔴 Deshalb darf auf den Ketten .dt-scene → .dt-world → .dt-cube und
 * .dt-ref → .dt-ref-cube NIE `overflow`, `filter`, `container-type` o. Ä.
 * stehen: jede dieser Eigenschaften macht die 3-D-Ebene platt.
 *
 * SKALIERUNG: Die Seite füllt die Bühne (`--stage-height`, globale
 * Quelle). Die Kantenlängen `--dt-s` (Feld/Würfel links) und `--dt-rs`
 * (Kontrollwürfel) rechnet `layout()` in dice-tipping.js aus der freien
 * Fläche. Alles im Bild hängt daran und wächst automatisch mit.
 * ============================================================ */

.dt-stage {
    --dt-pad-y: clamp(8px, 2vh, 24px);      /* Luft oben/unten */
    --dt-pad-x: clamp(8px, 2vw, 32px);      /* Luft links/rechts */

    box-sizing: border-box;
    height: var(--stage-height);
    padding: var(--dt-pad-y) var(--dt-pad-x);
    display: flex;
    align-items: stretch;
    gap: clamp(8px, 2vw, 28px);
}

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

/* Spalte des Kontrollwürfels — schmal, aber nie kleiner als greifbar. */
.dt-side {
    flex: 0 0 clamp(88px, 15vw, 190px);
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bildkasten der Szene — Breite/Höhe setzt layout() in px. */
.dt-scene { position: relative; }

/* Nullpunkt der 3-D-Welt: ein Punkt ohne Ausdehnung (links/oben setzt
   layout()), damit sich alle Drehungen um genau diesen Punkt drehen. */
.dt-world {
    position: absolute;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: rotateX(var(--dt-tilt, 60deg)) rotateZ(var(--dt-turn, 45deg));
}

/* --- Felder ------------------------------------------------------
   Liegen flach in der Bodenebene, genau eine Würfelkante groß (der
   Würfel passt exakt hinein). Winzig unter Null gelegt, damit der
   Würfelboden nicht mit dem Feld um dieselbe Ebene streitet. */
.dt-tile {
    position: absolute;
    left: calc(var(--dt-s) / -2);
    top: calc(var(--dt-s) / -2);
    width: var(--dt-s);
    height: var(--dt-s);
    box-sizing: border-box;
    padding: 0;
    background: #eaf5ee;
    border: max(2px, calc(var(--dt-s) * 0.02)) solid #9ccbb0;
    border-radius: calc(var(--dt-s) * 0.06);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Das Zielfeld: startet den Lauf auch ohne Antwort. Gestrichelt und
   pulsierend, damit auf dem Beamer klar ist, wo es hingeht. */
.dt-tile.is-goal {
    cursor: pointer;
    border-style: dashed;
    border-color: #27ae60;
    background: #d8f0e2;
    animation: dt-goal-pulse 1.6s ease-in-out infinite;
}
@keyframes dt-goal-pulse {
    0%, 100% { background: #d8f0e2; }
    50%      { background: #b7e5cb; }
}
/* Angekommen: das Ziel wird ruhig und grün. */
.dt-tile.is-reached {
    animation: none;
    border-style: solid;
    background: #27ae60;
    border-color: #1e8449;
}
@media (prefers-reduced-motion: reduce) {
    .dt-tile.is-goal { animation: none; }
}

/* --- Würfel (beide) ----------------------------------------------
   Nur ein Punkt ohne Ausdehnung; die sechs Seiten hängen als Kinder
   darum herum. Die ganze Dreh-Rechnung steckt im `transform`, das
   dice-tipping.js setzt. 🔴 `--dt-e` ist die Kantenlänge DIESES
   Würfels — nur deshalb kann `.dt-face` für beide gelten. */
.dt-cube,
.dt-ref-cube {
    position: absolute;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
}
.dt-cube {
    --dt-e: var(--dt-s);
    left: 0;
    top: 0;
    /* Klicks gehen durch — nur das Zielfeld darunter fängt sie. */
    pointer-events: none;
}
/* Ankerpunkt = der Boden, auf dem er steht; Ort und Kantenlänge rechnet
   layout() aus REF_BOX (der Kasten muss den ganzen Kipp-Bogen fassen). */
.dt-ref-cube {
    --dt-e: var(--dt-rs);
    left: 0;
    top: 0;
}

/* Eine Würfelseite: weißes Feld mit dunklen Augen. Die Helligkeit
   (`background`) setzt das Modul aus der Richtung, in die die Seite
   gerade zeigt (echte Licht-Rechnung — CSS kennt keine Beleuchtung).
   Sie blendet in der Kippdauer um, damit die Schattierung dem Würfel
   folgt statt zu springen. */
.dt-face {
    position: absolute;
    left: calc(var(--dt-e) / -2);
    top: calc(var(--dt-e) / -2);
    width: var(--dt-e);
    height: var(--dt-e);
    box-sizing: border-box;
    backface-visibility: hidden;    /* Rückseiten bleiben unsichtbar */
    background: #ffffff;
    border: max(2px, calc(var(--dt-e) * 0.022)) solid #2c3e50;
    border-radius: calc(var(--dt-e) * 0.06);
    padding: calc(var(--dt-e) * 0.09);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    transition: background-color var(--dt-roll, 620ms) ease-in-out,
                border-color 0.25s ease;
}
.dt-pip {
    align-self: center;
    justify-self: center;
    width: calc(var(--dt-e) * 0.185);
    height: calc(var(--dt-e) * 0.185);
    border-radius: 50%;
    background: #2c3e50;
    transition: background 0.25s ease;
}

/* Auflösung: die Augen der Seite, die am Ende oben liegt, werden grün —
   und genauso die Augen der am Kontrollwürfel getippten Seite (rot,
   wenn es die falsche war). */
.dt-face.is-right { border-color: #1e8449; }
.dt-face.is-right .dt-pip { background: #27ae60; }
.dt-face.is-wrong { border-color: #c0392b; }
.dt-face.is-wrong .dt-pip { background: var(--accent-red, #e74c3c); }

/* --- Kontrollwürfel ----------------------------------------------
   Wischen kippt ihn in die gewischte Bodenrichtung um — dieselbe
   Bewegung wie auf dem Feld, nur bleibt er dabei an Ort und Stelle.
   Der Kasten ist so groß, dass der ganze Kipp-Bogen hineinpasst
   (REF_BOX in dice-tipping.js). */
.dt-ref {
    position: relative;
    touch-action: none;         /* Ziehen dreht, statt zu scrollen */
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}
.dt-ref:active { cursor: grabbing; }
/* Am Finger hängend darf die Helligkeit nicht hinterherblenden — sie
   muss dem Kippen sofort folgen. */
.dt-ref.is-dragging .dt-ref-face { transition: none; }

/* Die Seiten des Kontrollwürfels sind Knöpfe: sie antippen = antworten. */
.dt-ref-face {
    pointer-events: auto;
    cursor: pointer;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}
/* Getippt, Auflösung läuft noch. */
.dt-ref-face.is-chosen { border-color: #2980b9; }

/* --- Hinweis-Pfeil am 🎲-Knopf --------------------------------------
   Ist der Würfel angekommen, zeigt ein pulsierender Pfeil auf den
   Würfel-Knopf: „hier gibt's die nächste Startlage". Er sitzt IM Knopf
   (`left:100%`) und wandert damit automatisch mit, wenn die Kopfzeile
   einklappt. */
.dt-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 .dt-hint {
    opacity: 1;
    visibility: visible;
    animation: dt-hint-pulse 1.2s ease-in-out infinite;
}
@keyframes dt-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 .dt-hint { animation: none; }
}