/* ============================================================
 * MARIENKÄFER-GEOMETRIE
 * Punktefeld (4 × 3), Käfer, Schritt-Pfeile. Nur Layout dieses
 * Moduls — Farben/Knöpfe kommen aus der globalen Basis.
 *
 * SKALIERUNG: Die Seite füllt die Bühne (`--stage-height`, globale
 * Quelle) und das Punktefeld nimmt sich davon ALLES, was Pfeilreihe
 * und Ränder übrig lassen — begrenzt entweder durch die Breite oder
 * durch die Höhe (`min(...)`), damit es nie überläuft und auf großen
 * Schirmen wirklich groß wird. Alles IM Feld (Punkte, Linien, Käfer)
 * hängt über Container-Einheiten (`cqw`) am Feld selbst, wächst also
 * automatisch mit — keine zweite Skalierungs-Rechnung.
 * ============================================================ */

.lb-stage {
    /* Die einzige Stelle, an der Ränder/Reserven stehen. */
    --lb-pad-y: clamp(8px, 2vh, 24px);      /* Luft oben/unten */
    --lb-pad-x: clamp(8px, 2vw, 32px);      /* Luft links/rechts */
    --lb-gap: clamp(10px, 2.4vh, 26px);     /* Feld ↔ Pfeilreihe */
    --lb-frame: clamp(14px, 2.6vw, 40px);   /* Innenrand der weißen Karte */
    --lb-steps-h: clamp(46px, 9vh, 84px);   /* Höhe der Pfeilreihe */

    /* Restliche Höhe fürs Feld = Bühne − Ränder − Pfeilreihe − Karte. */
    --lb-free-h: calc(var(--stage-height)
                      - 2 * var(--lb-pad-y) - var(--lb-gap)
                      - var(--lb-steps-h) - 2 * var(--lb-frame));
    --lb-free-w: calc(100vw - 2 * var(--lb-pad-x) - 2 * var(--lb-frame));

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

/* --- Punktefeld -------------------------------------------------
   Seitenverhältnis 3 : 2 der Rasterfelder → waagerechte und senk-
   rechte Abstände bleiben gleich groß. Die Breite ist die kleinere
   der beiden Schranken (Breite bzw. aus der freien Höhe gerechnet). */
.lb-board-wrap {
    padding: var(--lb-frame);
    background: white;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.lb-board {
    position: relative;
    /* Der Käfer darf über die Kopfzeile hinausragen (Header z-index 1000);
       weil `container-type: size` hier eine eigene Ebene aufmacht, muss das
       FELD gehoben werden, nicht der Käfer. Das ⚙️-Menü (30000) und die
       Tour bleiben trotzdem darüber. 🔴 Weil das gehobene Feld sonst wie
       eine unsichtbare Scheibe über allem darunter liegt (der freistehende
       🎲-Knopf war bei eingeklappter Kopfzeile nicht mehr anklickbar), lässt
       das Feld Klicks durch — nur die Punkte selbst fangen sie. */
    z-index: 1001;
    pointer-events: none;
    container-type: size;     /* Bezug für die cqw-Größen darin */
    width: min(var(--lb-free-w), calc(var(--lb-free-h) * 3 / 2));
    min-width: 240px;         /* Notbremse auf sehr flachen Fenstern */
    aspect-ratio: 3 / 2;      /* 3 Feldbreiten × 2 Feldhöhen */
}

/* ⚙️-Einstellungs- und Konto-/Lehrer-Menü hängen IM Header (z-index 1000)
   und kämen sonst nicht über das gehobene Feld: solange eines offen ist,
   senkt sich das Feld ab. Die globale Klasse setzt `ui.js`. */
html.header-menu-open .lb-board { z-index: 1; }

/* Verbindungslinien: nur waagerecht und senkrecht, nie diagonal. */
.lb-line {
    position: absolute;
    background: #bdc3c7;
    border-radius: 3px;
    transform: translate(-50%, -50%);
}
.lb-line.h { height: max(4px, 0.9cqw); }
.lb-line.v { width: max(4px, 0.9cqw); }
/* Abgelaufene Strecke: der grüne Streifen wächst IM Takt des Käfers
   mit (Wuchs-Richtung + Dauer setzt `paintLine()` in JS). */
.lb-line { overflow: hidden; }
.lb-fill {
    position: absolute;
    inset: 0;
    background: #27ae60;
    border-radius: inherit;
    transform: scaleX(0);
}

/* Punkte — anklickbar: hier wird das (unsichtbare) Ziel geraten.
   Die Trefferfläche ist bewusst größer als der sichtbare Punkt
   (::before), damit auch kleine Finger sicher treffen. */
.lb-dot {
    position: absolute;
    pointer-events: auto;      /* das Feld selbst ist klick-durchlässig */
    width: max(20px, 4.6cqw);
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 50%;
    background: white;
    border: max(4px, 1.1cqw) solid #7f8c8d;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.lb-dot::before {
    content: '';
    position: absolute;
    inset: max(-22px, -2.6cqw);
    border-radius: 50%;
}
/* --- Punktnamen (A B C …) — Option im ⚙️-Menü -------------------
   Der Buchstabe sitzt IM Punkt: dafür wird der Punkt größer und
   bekommt einen hellen Kern; die Linien laufen unverändert darunter
   durch. Ohne `.has-names` ist er komplett weg (kein Platzhalter). */
.lb-dot-name {
    display: none;
    font-family: var(--math-font, inherit);
    font-weight: 900;
    font-size: 3.4cqw;
    line-height: 1;
    color: #7f8c8d;
    pointer-events: none;
    user-select: none;
}
.lb-board.has-names .lb-dot {
    width: max(34px, 7.2cqw);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb-board.has-names .lb-dot-name { display: block; }
.lb-dot.is-goal .lb-dot-name,
.lb-dot.is-visited .lb-dot-name { color: white; }
.lb-dot.is-wrong .lb-dot-name { color: var(--accent-red, #e74c3c); }

@media (hover: hover) and (pointer: fine) {
    .lb-dot:hover { border-color: #34495e; transform: translate(-50%, -50%) scale(1.15); }
}
/* Start + schon betretene Punkte: grün wie die abgelaufene Strecke
   (ohne Vergrößerung — die bleibt dem geratenen Ziel vorbehalten). */
.lb-dot.is-visited {
    border-color: #27ae60;
    background: #27ae60;
}
/* Richtig geraten: der Punkt wird grün, dann läuft der Käfer los. */
.lb-dot.is-goal {
    border-color: #27ae60;
    background: #27ae60;
    transform: translate(-50%, -50%) scale(1.2);
}
/* Falsch geraten: kurz rot + wackeln (translate bleibt in der Animation
   erhalten, sonst springt der Punkt aus seiner Rasterposition). */
.lb-dot.is-wrong {
    border-color: var(--accent-red, #e74c3c);
    background: #fdecea;
    animation: lb-shake 0.6s ease;
}
@keyframes lb-shake {
    0%, 100% { transform: translate(-50%, -50%); }
    15%      { transform: translate(calc(-50% - 7px), -50%); }
    35%      { transform: translate(calc(-50% + 7px), -50%); }
    55%      { transform: translate(calc(-50% - 5px), -50%); }
    75%      { transform: translate(calc(-50% + 5px), -50%); }
}

/* Der Käfer: gleitet über left/top von Punkt zu Punkt. */
.lb-bug {
    position: absolute;
    /* Blickrichtung: `--lb-rot` setzt das Modul je Laufrichtung. */
    transform: translate(-50%, -50%) rotate(var(--lb-rot, 0deg));
    font-size: max(48px, 16cqw);
    line-height: 1;
    z-index: 2;
    transition: left var(--lb-slide, 520ms) ease-in-out,
                top  var(--lb-slide, 520ms) ease-in-out,
                transform var(--lb-turn, 220ms) ease-out;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}

/* --- Schritt-Pfeile --------------------------------------------- */
/* Etwas Polster um die Reihe: der Tour-Ring (globaler Abstand, HOLE_PAD)
   soll die ganze Pfeil-Zeile umfassen, nicht nur die Kästchen. */
.lb-steps-wrap { padding: 8px 16px; }
.lb-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(6px, 1.4vw, 14px);
    height: var(--lb-steps-h);
    align-items: center;
}
/* Ladestand des Pfeils (0…1) — als @property registriert, damit er sich
   weich animieren lässt (sonst würde er hart auf 1 springen).
   🔴 `inherits: true` ist Pflicht: animiert wird der Wert am `.lb-step`,
   gelesen wird er im `::before` — ohne Vererbung sähe das Pseudoelement
   nur den Startwert 0 und bliebe für immer leer. */
@property --lb-p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}
.lb-step {
    position: relative;
    overflow: hidden;
    --lb-p: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    aspect-ratio: 1 / 1;
    border: 4px solid #bdc3c7;
    border-radius: 12px;
    background: white;
    color: #7f8c8d;
    font-size: clamp(20px, 4.6vh, 38px);
    font-weight: 900;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
/* Grüne Füllung, wächst von links nach rechts mit dem Käfer mit. */
.lb-step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #27ae60;
    transform-origin: left center;
    transform: scaleX(var(--lb-p));
}
.lb-step-sign { position: relative; }
/* Gerade gelaufener Schritt: grün. */
.lb-step.is-done {
    --lb-p: 1;
    background: #27ae60;
    border-color: #27ae60;
    color: white;
    transform: scale(1.08);
}

/* --- Hinweis-Pfeil am 🎲-Knopf --------------------------------------
   Ist die Aufgabe gelöst, zeigt ein pulsierender Pfeil auf den Würfel:
   „hier gibt's das nächste Rätsel". Er sitzt IM Knopf (`left:100%`) und
   wandert damit automatisch mit, wenn die Kopfzeile einklappt. */
.lb-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 .lb-hint {
    opacity: 1;
    visibility: visible;
    animation: lb-hint-pulse 1.2s ease-in-out infinite;
}
/* Der Pfeil „stupst" den Knopf an: er wandert leicht auf ihn zu. */
@keyframes lb-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 .lb-hint { animation: none; }
}