/* =====================================================================
   GLÜCKSRAD — zieht ein Modul aus dem aufrufenden Menü (Gruppe Mathestarter)
   Klassen-Präfix `ms-`. Nur Regie-Optik dieses Moduls; Knopf-Hover und
   Kopfzeile kommen global (ui.css).
   ===================================================================== */

.ms-page {
    /* EINE Quelle für die Bühnenhöhe (nie 100vh − Magic Number). */
    height: var(--stage-height);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Bühne: das Rad steht mittig, die Ergebniszeile darunter. */
.ms-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 28px);
}

/* ---------- Das Rad ---------------------------------------------- */

.ms-wheel-wrap {
    position: relative;
    /* Quadratisch, so groß wie der freie Platz es zulässt (Höhe führt,
       die Breite folgt über aspect-ratio — nie über den Rand hinaus). */
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.ms-wheel {
    width: 100%;
    height: 100%;
    display: block;
    /* Die Drehung selbst: lange, weich auslaufende Kurve (Jahrmarkt-Gefühl).
       Dauer setzt das JS über --ms-spin-ms, damit beides EINE Quelle hat. */
    transition: transform var(--ms-spin-ms, 4200ms) cubic-bezier(.16, .84, .28, 1);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18));
}

/* Kein Nachrutschen für Leute, die Bewegung reduziert haben. */
@media (prefers-reduced-motion: reduce) {
    .ms-wheel { transition-duration: 1ms; }
}

.ms-seg { stroke: #fff; stroke-width: 3; }
/* Beschriftung: weiß mit dunkler Kontur — so bleibt der Name auf JEDER
   Segmentfarbe lesbar (paint-order zeichnet die Kontur hinter die Füllung). */
.ms-seg-label {
    font-family: var(--ui-font);
    font-weight: 800;
    fill: #fff;
    stroke: rgba(0, 0, 0, .38);
    stroke-width: 4;
    paint-order: stroke fill;
    stroke-linejoin: round;
}
/* Piktogramm = dasselbe wie auf der Kachel im Menü. Keine Kontur (Emoji
   bringen ihre Farben mit), aber ein Schatten fürs Abheben. */
.ms-seg-icon {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
    dominant-baseline: middle;
}
.ms-seg-label.is-hint { fill: rgba(255, 255, 255, .72); font-style: italic; }
.ms-seg.is-win { stroke: #fff; stroke-width: 6; }
/* Nach dem Drehen treten alle NICHT gezogenen Felder zurück: blass und
   entfärbt, damit nur das Gewinnerfeld leuchtet. Der Übergang ist weich,
   damit es nach dem Auslaufen des Rades ruhig „einrastet". */
.ms-seg, .ms-seg-label, .ms-seg-icon { transition: opacity .45s ease, filter .45s ease; }
.ms-seg.is-dim { opacity: .3; filter: saturate(.25); }
.ms-seg-label.is-dim, .ms-seg-icon.is-dim { opacity: .35; filter: grayscale(1); }
/* Gezogenes Feld: dicke Beschriftung. Ist es verknüpft (Bingo), ist es
   anklickbar — der Zeiger sagt das, geklickt wird im JS. */
.ms-seg-label.is-win { font-weight: 900; }
.ms-seg.is-link, .ms-seg-label.is-link { cursor: pointer; }
.ms-seg-label-solo { font-weight: 900; }

/* Zeiger oben, zeigt in die Mitte. */
.ms-pointer {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 30px solid var(--dark-bg, #2c3e50);
    z-index: 2;
    pointer-events: none;
}

/* Nabe = Dreh-Knopf (großes Ziel für die Tafel). */
.ms-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26%;
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: var(--dark-bg, #2c3e50);
    font-family: var(--ui-font);
    font-weight: 800;
    font-size: clamp(.9rem, 2.2vmin, 1.4rem);
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
    z-index: 3;
}

.ms-spin:active:not(:disabled) { transform: translate(-50%, -50%) translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
/* 🔴 Während der Drehung wird die Nabe NICHT durchsichtig — sie ist der
   Deckel über der Radmitte; mit `opacity` schimmerten die drehenden
   Segmente durch. Gedimmt wird deshalb nur die Schrift. */
.ms-spin:disabled { cursor: default; background: #fff; color: rgba(44, 62, 80, .5); }

/* ---------- Ergebniszeile ----------------------------------------- */

.ms-result {
    flex: 0 0 auto;
    margin: 0;
    min-height: 1.8em;
    text-align: center;
    font-family: var(--ui-font);
    font-size: clamp(1.1rem, 3.2vmin, 2rem);
    font-weight: 800;
    color: var(--dark-bg, #2c3e50);
}

/* Verknüpftes Ergebnis (Bingo): sichtbar als Link ins Modul. */
.ms-result-link {
    color: var(--blue-main, #3498db);
    text-decoration: none;
    border-bottom: 3px solid currentColor;
    cursor: pointer;
}

/* Schmale Schirme: das Rad füllt die Bühne. */
@media (max-width: 820px), (orientation: portrait) {
    .ms-stage { flex-direction: column; }
    .ms-wheel-wrap { flex: 1 1 auto; height: auto; max-height: 100%; }
}