/* ==== Leiste über dem Spielfeld (game-toolbar) ==== */

.game-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 18px auto;
    flex-wrap: wrap;
}

.game-toolbar--center {
    justify-content: center;
}

.game-toolbar .speed-selection,
.game-toolbar .level-selection {
    margin: 0;
    text-align: left;
}

body.page-snake .game-toolbar .speed-selection,
body.page-tetris .game-toolbar .level-selection,
body.page-spaceinvaders .game-toolbar .speed-selection {
    margin: 0;
    text-align: left;
}

/* Rechte Aktionen: ovaler Rahmen wie die 3er-Gruppe (Glow am Rahmen, nicht an den Buttons) */
.game-toolbar .controls {
    display: flex;
    align-items: center;
    gap: 36px;
    margin: 0;
    padding: 5px;
    height: 44px;
    background: linear-gradient(135deg, #f0f3ff 0%, #f8f9ff 100%);
    border: 1px solid var(--c-border);
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.10);
}

.game-toolbar .control-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50px;
    color: #5a5a6e;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: none;
    box-shadow: none;
}

.game-toolbar .control-btn:hover {
    background: rgba(102, 126, 234, 0.12);
}

.game-toolbar .control-btn:active {
    transform: translateY(0);
}

.game-toolbar .control-btn span {
    display: none;
}

.game-toolbar .control-btn--label {
    width: auto;
    padding: 0 14px;
    gap: 7px;
    white-space: nowrap;
}

.game-toolbar .control-btn--label span {
    display: inline;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Text-Shadow (Glow auf den Icons) entfernen - ueberschreibt die #musicToggle-Regeln */
body.page-snake .game-toolbar #musicToggle,
body.page-tetris .game-toolbar #musicToggle,
body.page-breakout .game-toolbar #musicToggle,
body.page-spaceinvaders .game-toolbar #musicToggle,
body.page-pacman .game-toolbar #musicToggle,
body.page-fruitmatch3 .game-toolbar #musicToggle,
body.page-tictactoe .game-toolbar #musicToggle,
body.page-chess .game-toolbar #musicToggle,
body.page-pentago .game-toolbar #musicToggle {
    text-shadow: none;
}

/* Spielspezifische Overrides (gewinnen gegen body.page-xxx .controls / .control-btn) */
body.page-snake .game-toolbar .controls,
body.page-tetris .game-toolbar .controls,
body.page-breakout .game-toolbar .controls,
body.page-spaceinvaders .game-toolbar .controls,
body.page-pacman .game-toolbar .controls,
body.page-fruitmatch3 .game-toolbar .controls,
body.page-tictactoe .game-toolbar .controls,
body.page-chess .game-toolbar .controls,
body.page-pentago .game-toolbar .controls {
    margin: 0;
    justify-content: center;
    gap: 36px;
    padding: 5px;
    height: 44px;
    flex-wrap: nowrap;
    background: linear-gradient(135deg, #f0f3ff 0%, #f8f9ff 100%);
    border: 1px solid var(--c-border);
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.10);
}

/* Pentago: schmale Toolbar -> kleinerer Abstand, damit alle Buttons in eine Zeile passen */
body.page-pentago .game-toolbar .controls {
    gap: 20px;
}

/* Fruitmatch3: schmale Toolbar -> kleinerer Abstand wie Pentago/TicTacToe */
body.page-fruitmatch3 .game-toolbar .controls {
    gap: 20px;
}

/* Pentago Button 3 (Rückgängig): dunkel ausgegraut NUR wenn nichts zu rueckgaengig ist (disabled);
   im aktiven Spiel normale Darstellung. */
body.page-pentago .game-toolbar #undoBtn:disabled {
    background: transparent;
    border: none;
    color: #3f3f52;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

body.dark-theme.page-pentago .game-toolbar #undoBtn:disabled {
    color: #777788;
}

/* Gleiche Höhe: 3er-Gruppe und Buttons-Pille */
body.page-snake .game-toolbar .speed-buttons,
body.page-spaceinvaders .game-toolbar .speed-buttons,
body.page-tetris .game-toolbar .level-buttons {
    height: 44px;
    display: flex;
    align-items: center;
}

body.page-snake .game-toolbar .control-btn,
body.page-tetris .game-toolbar .control-btn,
body.page-breakout .game-toolbar .control-btn,
body.page-spaceinvaders .game-toolbar .control-btn,
body.page-pacman .game-toolbar .control-btn,
body.page-fruitmatch3 .game-toolbar .control-btn,
body.page-tictactoe .game-toolbar .control-btn,
body.page-chess .game-toolbar .control-btn,
body.page-pentago .game-toolbar .control-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50px;
    background: transparent;
    border: none;
    color: #5a5a6e;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
}

/* Beschriftete Buttons (Reset/Rückgängig): breiter mit sichtbarem Text */
body.page-snake .game-toolbar .control-btn--label,
body.page-tetris .game-toolbar .control-btn--label,
body.page-breakout .game-toolbar .control-btn--label,
body.page-spaceinvaders .game-toolbar .control-btn--label,
body.page-pacman .game-toolbar .control-btn--label,
body.page-fruitmatch3 .game-toolbar .control-btn--label,
body.page-tictactoe .game-toolbar .control-btn--label,
body.page-chess .game-toolbar .control-btn--label,
body.page-pentago .game-toolbar .control-btn--label {
    width: auto;
    padding: 0 14px;
    gap: 7px;
}

body.page-snake .game-toolbar .control-btn--label span,
body.page-tetris .game-toolbar .control-btn--label span,
body.page-breakout .game-toolbar .control-btn--label span,
body.page-spaceinvaders .game-toolbar .control-btn--label span,
body.page-pacman .game-toolbar .control-btn--label span,
body.page-fruitmatch3 .game-toolbar .control-btn--label span,
body.page-tictactoe .game-toolbar .control-btn--label span,
body.page-chess .game-toolbar .control-btn--label span,
body.page-pentago .game-toolbar .control-btn--label span {
    display: inline;
    font-size: 13px;
    font-weight: 600;
}

body.page-snake .game-toolbar .control-btn:hover,
body.page-tetris .game-toolbar .control-btn:hover,
body.page-breakout .game-toolbar .control-btn:hover,
body.page-spaceinvaders .game-toolbar .control-btn:hover,
body.page-pacman .game-toolbar .control-btn:hover,
body.page-fruitmatch3 .game-toolbar .control-btn:hover,
body.page-tictactoe .game-toolbar .control-btn:hover,
body.page-chess .game-toolbar .control-btn:hover,
body.page-pentago .game-toolbar .control-btn:hover {
    transform: none;
    background: rgba(102, 126, 234, 0.12);
    box-shadow: none;
}

body.page-snake .game-toolbar .control-btn:active,
body.page-tetris .game-toolbar .control-btn:active,
body.page-breakout .game-toolbar .control-btn:active,
body.page-spaceinvaders .game-toolbar .control-btn:active,
body.page-pacman .game-toolbar .control-btn:active,
body.page-fruitmatch3 .game-toolbar .control-btn:active,
body.page-tictactoe .game-toolbar .control-btn:active,
body.page-chess .game-toolbar .control-btn:active,
body.page-pentago .game-toolbar .control-btn:active {
    transform: translateY(0);
}

/* Dark Theme */
body.dark-theme .game-toolbar .controls,
body.dark-theme.page-snake .game-toolbar .controls,
body.dark-theme.page-tetris .game-toolbar .controls,
body.dark-theme.page-breakout .game-toolbar .controls,
body.dark-theme.page-spaceinvaders .game-toolbar .controls,
body.dark-theme.page-pacman .game-toolbar .controls,
body.dark-theme.page-fruitmatch3 .game-toolbar .controls,
body.dark-theme.page-tictactoe .game-toolbar .controls,
body.dark-theme.page-chess .game-toolbar .controls,
body.dark-theme.page-pentago .game-toolbar .controls {
    background: none;
    border-color: var(--c-border);
}

body.dark-theme .game-toolbar .control-btn,
body.dark-theme.page-snake .game-toolbar .control-btn,
body.dark-theme.page-tetris .game-toolbar .control-btn,
body.dark-theme.page-breakout .game-toolbar .control-btn,
body.dark-theme.page-spaceinvaders .game-toolbar .control-btn,
body.dark-theme.page-pacman .game-toolbar .control-btn,
body.dark-theme.page-fruitmatch3 .game-toolbar .control-btn,
body.dark-theme.page-tictactoe .game-toolbar .control-btn,
body.dark-theme.page-chess .game-toolbar .control-btn,
body.dark-theme.page-pentago .game-toolbar .control-btn {
    background: transparent;
    color: #c4c4d4;
}

body.dark-theme .game-toolbar .control-btn:hover,
body.dark-theme.page-snake .game-toolbar .control-btn:hover,
body.dark-theme.page-tetris .game-toolbar .control-btn:hover,
body.dark-theme.page-breakout .game-toolbar .control-btn:hover,
body.dark-theme.page-spaceinvaders .game-toolbar .control-btn:hover,
body.dark-theme.page-pacman .game-toolbar .control-btn:hover,
body.dark-theme.page-fruitmatch3 .game-toolbar .control-btn:hover,
body.dark-theme.page-tictactoe .game-toolbar .control-btn:hover,
body.dark-theme.page-chess .game-toolbar .control-btn:hover,
body.dark-theme.page-pentago .game-toolbar .control-btn:hover {
    background: rgba(102, 126, 234, 0.12);
}

/* Breite der Leiste = Spielfeldbreite */
body.page-snake .game-toolbar { max-width: 600px; }
body.page-spaceinvaders .game-toolbar { max-width: 600px; }
body.page-breakout .game-toolbar { max-width: 800px; }

/* Breakout: Controls-Pille ueber volle Spielfeldbreite, Reset links, Mute rechts */
body.page-breakout .game-toolbar .controls {
    width: 100%;
}

body.page-breakout .game-toolbar .controls #resetBtn {
    margin-right: auto;
}

/* Pacman: Controls-Pille ueber volle Spielfeldbreite, Reset links, Mute rechts */
body.page-pacman .game-toolbar .controls {
    width: 100%;
}

body.page-pacman .game-toolbar .controls #resetBtn {
    margin-right: auto;
}
body.page-pacman .game-toolbar { max-width: 568px; }
body.page-tetris .game-toolbar { max-width: 510px; }

/* TicTacToe: Rueckgaengig-Button ohne Hintergrund und ohne Rahmen (auch disabled) */
body.page-tictactoe .game-toolbar #undoBtn:disabled {
    background: transparent;
    border: none;
}

/* TicTacToe: schmale Toolbar -> kleinerer Abstand, damit alle Buttons in eine Zeile passen */
body.page-tictactoe .game-toolbar .controls {
    gap: 20px;
}

/* Tetris: Leiste als Spalte - Level-Auswahl mittig, Controls ueber volle Breite, Level-Bg wie Controls */
body.page-tetris .game-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

body.page-tetris .game-toolbar .level-selection {
    margin: 0;
    display: flex;
    justify-content: center;
}

body.page-tetris .game-toolbar .level-buttons {
    background: linear-gradient(135deg, #f0f3ff 0%, #f8f9ff 100%);
    border: 1px solid var(--c-border);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.10);
}

body.page-tetris .game-toolbar .controls {
    width: 100%;
    justify-content: center;
}

/* Tetris: Reset nach links, die uebrigen Buttons als Gruppe nach rechts */
body.page-tetris .game-toolbar .controls #resetBtn {
    margin-right: auto;
}

body.dark-theme.page-tetris .game-toolbar .level-buttons {
    background: none;
    border-color: var(--c-border);
}
body.page-fruitmatch3 .game-toolbar { max-width: 500px; }
body.page-tictactoe .game-toolbar { max-width: 520px; }
body.page-chess .game-toolbar { max-width: 600px; }
body.page-pentago .game-toolbar { max-width: 460px; }

/* Schach: Controls über volle Spielfeldbreite, Reset/Undo links, Mute rechts */
body.page-chess .game-toolbar .controls {
    width: 100%;
}

body.page-chess .game-toolbar .controls #soundToggle {
    margin-left: auto;
}