/* ============================================================
 * MENÜ-VISUALS: MATHESTARTER (Grün)
 * Button-Visuals der Mathestarter-Menüs (Mathespiele/Bingo, Kopfgeometrie …).
 * ============================================================ */

.big-menu-btn {
    /* Bereichsfarbe kommt aus menu-buttons.css — hier nur der Beschnitt,
       damit ein Visual nicht über die Kachel hinausläuft. */
    overflow: hidden;
}

/* --- Bingo-Karte (3×3-Raster) --- */
.visual-bingo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: min(160px, 70%);
    margin: 15px auto 0;
}
.visual-bingo span {
    background: white;
    border: 3px solid #27ae60;
    color: #27ae60;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: clamp(12px, 3vw, 18px);
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}
/* Beim Überfahren „füllt" sich die Mittelreihe wie ein getroffenes Bingo. */
.big-menu-btn:hover .visual-bingo span.hit {
    background: #27ae60;
    color: white;
}

/* --- Käfergeometrie (4×3-Punktefeld) ---
   Das Liniengitter kommt aus zwei Kachel-Verläufen (waagerecht/senkrecht);
   die letzte Linie unten bzw. rechts zeichnet der Rahmen, weil eine Kachel
   an der Kante abgeschnitten würde. Beim Überfahren wandert der Käfer zum
   Blatt — erst nach rechts, dann nach oben, wie im Modul selbst. */
.visual-ladybug {
    position: relative;
    box-sizing: border-box;
    width: min(170px, 76%);
    aspect-ratio: 3 / 2;
    margin: 18px auto 0;
    border-right: 3px solid #27ae60;
    border-bottom: 3px solid #27ae60;
    background-image:
        linear-gradient(to bottom, #27ae60 3px, transparent 3px),
        linear-gradient(to right, #27ae60 3px, transparent 3px);
    background-size: 100% 50%, 33.34% 100%;
}
.visual-ladybug span {
    position: absolute;
    font-size: 20px;
    line-height: 1;
    transform: translate(-50%, -50%);
}
.visual-ladybug .lbv-goal { left: 100%; top: 0; }
.visual-ladybug .lbv-bug {
    left: 0;
    top: 100%;
    transition: left 0.45s ease-in-out, top 0.45s ease-in-out 0.45s;
}
.big-menu-btn:hover .visual-ladybug .lbv-bug {
    left: 100%;
    top: 0;
}

/* --- Puzzleteile (2×2-Puzzle mit einer Lücke) ---
   Drei volle Felder und eine gestrichelte Lücke; beim Überfahren rutscht
   das Teil von rechts hinein — genau das ist die Aufgabe im Modul. */
.visual-puzzle {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: min(150px, 66%);
    aspect-ratio: 1 / 1;
    margin: 18px auto 0;
}
.visual-puzzle .pzv-cell {
    background: #27ae60;
    border-radius: 8px;
}
.visual-puzzle .pzv-gap {
    border: 3px dashed #27ae60;
    border-radius: 8px;
    box-sizing: border-box;
}
.visual-puzzle .pzv-piece {
    position: absolute;
    left: 125%;
    top: 75%;
    font-size: 30px;
    line-height: 1;
    transform: translate(-50%, -50%);
    transition: left 0.45s ease-in-out;
}
.big-menu-btn:hover .visual-puzzle .pzv-piece { left: 75%; }

/* --- Würfelkippen (Felderreihe nach rechts oben) ---
   Drei Felder als Rauten: ein Quadrat, um 45° gedreht und auf die halbe
   Höhe gestaucht — genau das Bild, das im Modul die 3-D-Drehung malt
   (`rotateX(60deg) rotateZ(45deg)`). Beim Überfahren kippt der Würfel
   über die Reihe bis zum letzten Feld. */
.visual-dice {
    position: relative;
    width: min(160px, 72%);
    aspect-ratio: 3 / 2;
    margin: 18px auto 0;
}
.visual-dice .dcv-cell {
    position: absolute;
    width: 30%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    background: #eaf5ee;
    border: 3px solid #27ae60;
    border-radius: 4px;
    transform: translate(-50%, -50%) scaleY(0.5) rotate(45deg);
}
.visual-dice .dcv-cell:nth-child(1) { left: 28%;   top: 78%; }
.visual-dice .dcv-cell:nth-child(2) { left: 49.2%; top: 62%; }
.visual-dice .dcv-cell:nth-child(3) { left: 70.4%; top: 46%; }
.visual-dice .dcv-die {
    position: absolute;
    left: 28%;
    top: 66%;
    font-size: 26px;
    line-height: 1;
    transform: translate(-50%, -50%);
    transition: left 0.5s ease-in-out, top 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.big-menu-btn:hover .visual-dice .dcv-die {
    left: 70.4%;
    top: 34%;
    /* 🔴 Ganze Umdrehung, nicht die halbe: bei 180° bliebe der Würfel
       schief/kopfüber stehen. */
    transform: translate(-50%, -50%) rotate(360deg);
}

/* --- Glücksrad-Knopf ---
   Das Rad zieht ein zufälliges Modul aus GENAU dem Menü, in dem der Knopf
   steht (`?menu=…`) — deshalb liegt er in allen drei Menüs dieser Gruppe.
   Er ist KEINE `.big-menu-btn`: nur so groß wie das Emoji, oben rechts neben
   den großen Kacheln. Passt er dort nicht mehr hin (schmaler Schirm), springt
   er über die Kacheln — dafür `column-reverse`, die Reihenfolge im HTML
   bleibt Kacheln-zuerst. */
.ms-menu-row {
    /* Eine Quelle für die Knopfgröße — das Gegengewicht links rechnet damit. */
    --ms-wheel-ico: clamp(40px, 6vw, 72px);
    --ms-wheel-pad: clamp(6px, 1vw, 12px);
    --ms-wheel-w: calc(var(--ms-wheel-ico) + 2 * var(--ms-wheel-pad));

    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(8px, 1.5vw, 16px);
    width: 100%;
}

/* 🔴 Gegengewicht: ein leerer Block links, genau so breit wie der Radknopf
   rechts. Ohne ihn schöbe der Knopf die Kacheln nach links — sie sollen aber
   mittig auf der Seite bleiben. */
.ms-menu-row::before {
    content: '';
    flex: 0 0 auto;
    width: var(--ms-wheel-w);
}

.ms-menu-row .menu-grid { flex: 1 1 auto; min-width: 0; }

.ms-wheel-btn {
    flex: 0 0 auto;
    order: 2;                /* rechts, egal wo im HTML */
    margin-top: 20px;        /* auf Höhe der Kacheln: gleicht das Grid-Padding aus */
    width: var(--ms-wheel-w);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ms-wheel-pad);
    border-radius: 25px;
    text-decoration: none;
    line-height: 0;
    transition: transform 0.1s;
}
.ms-wheel-btn:active { transform: translateY(6px); }

.visual-wheel {
    display: inline-block;
    font-size: var(--ms-wheel-ico);
    line-height: 1;
}
.ms-wheel-btn:hover .visual-wheel { animation: ms-wheel-turn 1.2s linear infinite; }
@keyframes ms-wheel-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ms-wheel-btn:hover .visual-wheel { animation: none; }
}

/* Zu schmal für „daneben": das Rad springt über die Kacheln, bleibt rechts.
   Das Gegengewicht entfällt — die Kacheln haben dann die volle Breite. */
@media (max-width: 760px) {
    .ms-menu-row {
        flex-direction: column-reverse;
        align-items: flex-end;
    }
    .ms-menu-row::before { display: none; }
    .ms-menu-row .menu-grid { width: 100%; }
    .ms-wheel-btn { margin: 0 20px 0 0; }
}