/* Darstellung des 2D-Zauberwuerfels mit Statuspanel, Netz und Steuerbuttons. */
/* Die eigentliche Wuerfellogik sitzt in PHP; hier wird nur die visuelle Struktur gebaut. */
.cube-wrapper {
    max-width: 900px;
    margin-top: 20px;
}

/* Abgewickeltes 2D-Netz der sechs Wuerfelseiten. */
.cube-net {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 12px;
    align-items: center;
    justify-content: start;
    margin-bottom: 25px;
}

/* Platzhalter halten das Wuerfelnetz in seiner Kreuzform. */
.cube-placeholder {
    width: 150px;
    height: 150px;
}

/* Einzelne Seitenkarte mit Titel und 3x3-Tabelle. */
.cube-face {
    text-align: center;
}

.cube-face h3 {
    margin: 0 0 6px 0;
    color: var(--heading);
}

/* Basisdarstellung der Sticker-Tabelle. */
.cube-table {
    border-collapse: collapse;
    box-shadow: 0 0 0 1px rgba(143, 255, 208, 0.12);
}

.cube-cell {
    width: 45px;
    height: 45px;
    border: 2px solid rgba(4, 10, 8, 0.9);
}

/* Farbwerte der sechs Wuerfelseiten. */
.white { background-color: white; }
.yellow { background-color: yellow; }
.green { background-color: green; }
.blue { background-color: blue; }
.red { background-color: red; }
.orange { background-color: orange; }

/* Hauptsteuerung fuer Zuege. */
.cube-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 700px;
}

.cube-controls button {
    padding: 8px 12px;
    cursor: pointer;
}

/* Statuspanel mit Timer, Move-Counter und Scramble-Anzeige. */
.cube-panel {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow);
    color: var(--text);
}

.cube-panel p {
    margin: 0 0 8px;
}

.cube-timer {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--heading);
    text-shadow: 0 0 12px rgba(245, 255, 135, 0.16);
}

#move-counter {
    color: var(--link);
    font-weight: bold;
}

#cube-status {
    color: var(--text);
    font-weight: bold;
}

/* Sekundaere Aktionen wie Scramble, Reset und Timer-Reset. */
.cube-extra-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.cube-extra-controls button {
    padding: 8px 12px;
    cursor: pointer;
}

.cube-scramble-sequence {
    word-break: break-word;
    font-family: monospace;
    color: var(--text-soft);
}

.cube-label {
    color: var(--text-soft);
    display: inline-block;
    min-width: 5ch;
}

/* Erlaeuterungsbereich unterhalb des eigentlichen Wuerfels. */
.cube-description {
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.18);
    box-shadow: var(--shadow);
    color: var(--text);
}

.cube-description p {
    margin: 0 0 12px;
}

.cube-description p:last-child {
    margin-bottom: 0;
}