/* ============================================================
 * cube3d.css — DER Würfel der Seite (Aussehen + 3-D-Körper)
 * ============================================================
 * 🔴 EINE Quelle für alle Würfel. Wer hier die Ecken, den Kanten-
 * strich, die Augen oder die Schattierung ändert, ändert JEDEN
 * Würfel der Webseite (Würfelkippen, Würfelgebäude, alles Neue).
 *
 * Bauform: `.cube3d` ist ein PUNKT ohne Ausdehnung (`preserve-3d`),
 * die sechs `.cube3d-face` hängen als Kinder darum herum — echte
 * Körper, nicht gemalt. Gebaut wird das nur über `Cube3D.build()`
 * (cube3d.js), nie von Hand.
 *
 * Zwei Größen setzt das MODUL:
 *   --cube-edge  Kantenlänge dieses Würfels (am `.cube3d` selbst,
 *                deshalb können mehrere Würfel verschieden groß sein)
 *   --cube-f-*   Farbe je Seite — schreibt `Cube3D.shade()` (CSS
 *                kennt keine Beleuchtung), am Würfel ODER an einem
 *                Vorfahren (z. B. der Welt, wenn alle Würfel in
 *                derselben Lage stehen).
 *
 * 🔴 Auf der Kette Bühne → Welt → `.cube3d` darf NIE `overflow`,
 * `filter`, `opacity` o. Ä. stehen — das macht die 3-D-Ebene platt.
 * ============================================================ */

:root {
    /* --- DAS AUSSEHEN. Hier drehen = überall drehen. ------------ */
    --cube-round: 0.06;                 /* Eckenrundung, × Kantenlänge */
    --cube-line: 0.022;                 /* Kantenstrich, × Kantenlänge */
    --cube-line-min: 1.5px;               /* … aber nie dünner als das */
    --cube-line-color: #2c3e50;         /* Farbe der Kanten */
    --cube-ink: #2c3e50;                /* Augen/Ziffern auf der Seite */
    --cube-pip: 0.185;                  /* Augen-Durchmesser, × Kantenlänge */
    --cube-inset: 0.09;                 /* Luft zwischen Kante und Augenbild */
    --cube-shade-ms: 250ms;             /* Umblenden der Helligkeit */
    /* Grundfarben (auch in JS: Cube3D.COLORS) */
    --cube-chosen: #2980b9;
    --cube-right: #1e8449;
    --cube-right-ink: #27ae60;
    --cube-wrong: #c0392b;
}

.cube3d {
    position: absolute;
    /* 🔴 left/top ausdrücklich auf 0: sonst hinge der Würfel an seiner
       statischen Position statt am Nullpunkt der Welt. */
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}
/* Nur ein Würfel, dessen Seiten Knöpfe sind, fängt Klicks. */
.cube3d.is-interactive,
.cube3d.is-interactive .cube3d-face { pointer-events: auto; }
.cube3d.is-interactive .cube3d-face {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Eine Seite. Die Helligkeit steckt schon in der Farbe (echte
   Licht-Rechnung in Cube3D.shade). `backface-visibility:hidden`
   wirft die Rückseiten weg: jeder Würfel zeigt nur seine drei
   zugewandten Seiten. */
.cube3d-face {
    position: absolute;
    left: calc(var(--cube-edge) / -2);
    top: calc(var(--cube-edge) / -2);
    width: var(--cube-edge);
    height: var(--cube-edge);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit;
    backface-visibility: hidden;
    border: max(var(--cube-line-min), calc(var(--cube-edge) * var(--cube-line)))
            solid var(--cube-line-color);
    border-radius: calc(var(--cube-edge) * var(--cube-round));
    transition: background-color var(--cube-shade-ms) ease-in-out,
                border-color 0.25s ease,
                opacity 0.2s ease;
}

/* Farbe je Seite — die Variablen schreibt Cube3D.shade(). */
.cube-t { background-color: var(--cube-f-t, #fff); }
.cube-b { background-color: var(--cube-f-b, #fff); }
.cube-n { background-color: var(--cube-f-n, #fff); }
.cube-s { background-color: var(--cube-f-s, #fff); }
.cube-e { background-color: var(--cube-f-e, #fff); }
.cube-w { background-color: var(--cube-f-w, #fff); }

/* Hervorgehoben (z. B. mitgezählt): derselbe Würfel in der zweiten
   Farbe — Helligkeit je Seite genauso gerechnet. */
.cube3d.is-marked .cube-t { background-color: var(--cube-m-t); }
.cube3d.is-marked .cube-b { background-color: var(--cube-m-b); }
.cube3d.is-marked .cube-n { background-color: var(--cube-m-n); }
.cube3d.is-marked .cube-s { background-color: var(--cube-m-s); }
.cube3d.is-marked .cube-e { background-color: var(--cube-m-e); }
.cube3d.is-marked .cube-w { background-color: var(--cube-m-w); }

/* --- Design „pips": das Augenbild im 3×3-Raster ----------------- */
.cube3d[data-design="pips"] .cube3d-face {
    padding: calc(var(--cube-edge) * var(--cube-inset));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.cube3d-pip {
    align-self: center;
    justify-self: center;
    width: calc(var(--cube-edge) * var(--cube-pip));
    height: calc(var(--cube-edge) * var(--cube-pip));
    border-radius: 50%;
    background: var(--cube-ink);
    transition: background 0.25s ease;
}

/* Rückmeldung an EINER Seite: getippt, richtig, falsch. */
.cube3d-face.is-chosen { border-color: var(--cube-chosen); }
.cube3d-face.is-right { border-color: var(--cube-right); }
.cube3d-face.is-right .cube3d-pip { background: var(--cube-right-ink); }
.cube3d-face.is-wrong { border-color: var(--cube-wrong); }
.cube3d-face.is-wrong .cube3d-pip { background: var(--accent-red, #e74c3c); }

/* --- Flaches Würfelbild (eine Seite von vorn, kein Körper) ------
   Für Karten/Knöpfe, die eine Menge als Würfelbild zeigen — gebaut
   nur über `Cube3D.flatFace()`. Bewusst dieselben Augen (.cube3d-pip),
   dasselbe 3×3-Raster, dieselben Ecken/Kanten wie eine echte
   Würfelseite: wer oben am Aussehen dreht, dreht es hier mit.
   Größe = `--cube-edge` (vom Aufrufer oder geerbt). */
.cube3d-flat {
    width: var(--cube-edge);
    height: var(--cube-edge);
    flex: none;
    box-sizing: border-box;
    padding: calc(var(--cube-edge) * var(--cube-inset));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    background: #fafdff;
    border: max(var(--cube-line-min), calc(var(--cube-edge) * var(--cube-line)))
            solid var(--cube-line-color);
    border-radius: calc(var(--cube-edge) * var(--cube-round));
}