/* Tic-Tac-Toe – Widget (Embed-Variante)
 * Laedt NACH pages/tictactoe.css (+ game-toolbar/highscore-panel bei Spielen).
 * Kompakte Raender fuer iframe-Einbindung, Badge-Abstand unten rechts.
 */

body.boza-widget.page-tictactoe {
    padding: 12px;
}

body.boza-widget.page-tictactoe .container {
    max-width: 640px;
    padding: 0;
}

/* Platz fuer die Badge unten rechts */
body.boza-widget.page-tictactoe .main-card {
    margin-bottom: 40px;
}

/* Compact-Modus (?compact=true): Header reduzieren */
body.boza-widget.page-tictactoe.compact .card-header h1 {
    font-size: 1.35em;
}

body.boza-widget.page-tictactoe.compact .card-header p {
    display: none;
}

/* Akzentfarbe (?accent=hex) – gilt fuer den aktiven Modus-Button */
body.boza-widget.page-tictactoe .mode-btn.active {
    background: linear-gradient(135deg, var(--c-accent, #667eea) 0%, var(--c-accent-2, #764ba2) 100%);
    color: var(--c-accent-text, #fff);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ==== Drumherum-Anpassung (?card/text/muted/accent) – aktives Spielfeld bleibt original ==== */

/* Score-Board: Container + Labels */
body.boza-widget.themed.page-tictactoe .score-board {
    background: var(--c-surface, #f0f3ff);
}

body.boza-widget.themed.page-tictactoe .score-label {
    color: var(--c-muted, #7a7a90);
}

/* Punktfarben (gelb/cyan/magenta) bleiben original – sie codieren Spiel-Info */

/* Highscore-Panel: Container + Titel */
body.boza-widget.themed.page-tictactoe .hs-panel {
    background: var(--c-surface, #f0f3ff);
}

body.boza-widget.themed.page-tictactoe .hs-board-title {
    color: var(--c-muted, #7a7a90);
}

/* Highscore-Buttons (immer accent, wenn gesetzt) */
body.boza-widget.page-tictactoe .hs-btn {
    background: linear-gradient(135deg, var(--c-accent, #667eea) 0%, var(--c-accent-2, #764ba2) 100%);
}

/* Game-Status (Zuganzeige) */
body.boza-widget.themed.page-tictactoe #gameStatus {
    color: var(--c-text, #1f2937);
}

/* Control-Buttons in der Toolbar: Icons dezent an Akzent binden */
body.boza-widget.page-tictactoe .control-btn:hover {
    color: var(--c-accent, inherit);
}


/* Highscore-Panel: Toggle-Icon an Akzent binden */
body.boza-widget.page-tictactoe .hs-toggle > i:first-child {
    color: var(--c-accent, #667eea);
}

/* Highscore-Buttons: Textfarbe an accentText binden */
body.boza-widget .hs-btn {
    color: var(--c-accent-text, #fff);
}

/* Schmale Embed-Breiten (maxWidth <= 560): Controls kompakter, damit sie in die Karte passen */
body.boza-widget.page-tictactoe.mw-narrow #tttOptions.controls .control-btn {
    padding: 0 9px;
}
body.boza-widget.page-tictactoe.mw-narrow #tttOptions .ttt-opt {
    gap: 2px;
}
body.boza-widget.page-tictactoe.mw-narrow #tttOptions .ttt-opt + .ttt-opt {
    margin-left: 4px;
    padding-left: 6px;
}
body.boza-widget.page-tictactoe.mw-narrow .game-toolbar .controls {
    gap: 12px;
}