/* ==== Seite: chess ==== */

/* Reset der globalen Karten-Komponente für den Spiel-Container */

body.page-chess .card-header {
 text-align: center; margin-bottom: 30px; 
}

body.page-chess .card-header h1 {
 font-family: 'Press Start 2P', monospace; font-size: 1.9em; letter-spacing: 2px; color: #ffd700; margin-bottom: 12px; text-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 0 32px rgba(255, 215, 0, 0.3), 3px 3px 0 #111; 
}

body.page-chess .card-header h1 i {
 display: inline-block; transform: translateY(-8px); 
}

body.page-chess .card-header p {
 color: var(--c-muted); font-size: 1.1em; 
}

body.page-chess .mode-selection {
 display: flex; gap: 4px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; background: linear-gradient(135deg, #f0f3ff 0%, #f8f9ff 100%); padding: 5px; border-radius: 50px; border: 1px solid var(--c-border); width: fit-content; margin-left: auto; margin-right: auto; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.10); 
}

body.page-chess .mode-btn {
 padding: 8px 18px; background: transparent; border: none; border-radius: 50px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--c-muted); transition: all 0.3s; 
}

body.page-chess .mode-btn:hover {
 color: var(--c-accent); 
}

body.page-chess .mode-btn.active {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); 
}

body.page-chess .difficulty-selection {
 display: none; gap: 4px; justify-content: center; margin-bottom: 10px; background: var(--c-surface-2); padding: 5px; border-radius: 50px; border: 1px solid var(--c-border); width: fit-content; margin-left: auto; margin-right: auto; 
}

body.page-chess .difficulty-selection.visible {
 display: flex; 
}

body.page-chess .diff-btn {
 padding: 8px 18px; background: transparent; border: none; border-radius: 50px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--c-muted); transition: all 0.3s; 
}

body.page-chess .diff-btn:hover {
 color: var(--c-accent); 
}

body.page-chess .diff-btn.active {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); 
}

body.page-chess .game-info {
 display: flex; justify-content: space-around; margin-bottom: 20px; padding: 22px 20px; background: linear-gradient(135deg, #f0f3ff 0%, #f8f9ff 100%); border: 1px solid var(--c-border); border-radius: 16px; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.10); flex-wrap: wrap; gap: 10px; 
}

body.page-chess .info-item {
 text-align: center; 
}

body.page-chess .info-label {
 font-size: 13px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; 
}

body.page-chess .info-value {
 font-family: 'Press Start 2P', monospace; font-size: 1.4em; letter-spacing: 1px; font-weight: 700; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; 
}

body.page-chess .info-value.active-turn {
 color: var(--c-success); text-shadow: 0 0 10px rgba(16, 185, 129, 0.55); 
}

body.page-chess .info-yellow {
 color: #ffe100; text-shadow: 0 0 10px rgba(255, 225, 0, 0.55); 
}

body.page-chess .info-cyan {
 color: #00e5ff; text-shadow: 0 0 10px rgba(0, 229, 255, 0.55); 
}

body.page-chess .info-magenta {
 color: #ff4fd8; text-shadow: 0 0 10px rgba(255, 79, 216, 0.55); 
}

body.page-chess .info-green {
 color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.55); 
}

body.page-chess .board-container {
 display: flex; justify-content: center; align-items: center; margin-bottom: 20px; position: relative; 
}

body.page-chess #chessBoard {
 border: none; border-radius: 8px; max-width: 100%; height: auto; cursor: pointer; position: relative; z-index: 1; display: block; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.10); 
}

body.page-chess .game-status {
 text-align: center; font-size: 1.15em; font-weight: 600; color: #3a3a4c; margin-bottom: 20px; padding: 16px 20px; background: linear-gradient(135deg, #f0f3ff 0%, #f8f9ff 100%); border: 1px solid var(--c-border); border-radius: 14px; 
}

body.page-chess .game-status.check {
 background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-color: transparent; color: white; 
}

body.page-chess .game-status.checkmate {
 background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-color: transparent; color: white; 
}

body.page-chess .game-status.stalemate {
 background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); border-color: transparent; color: white; 
}

body.page-chess .controls {
 display: flex; gap: 15px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; 
}

body.page-chess .control-btn {
 padding: 15px 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); 
}

body.page-chess .control-btn:hover {
 transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); 
}

body.page-chess .control-btn:active {
 transform: translateY(0); 
}

body.page-chess #musicToggle {
 text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); 
}

body.page-chess .control-btn:disabled {
 opacity: 0.5; cursor: wait; 
}

body.page-chess .move-history {
 margin-top: 20px; padding: 15px; background: var(--c-surface); border-radius: 12px; max-height: 200px; overflow-y: auto; 
}

body.page-chess .move-history-title {
 font-weight: 600; color: var(--c-muted); margin-bottom: 10px; 
}

body.page-chess .move-list {
 display: flex; flex-wrap: wrap; gap: 5px; 
}

body.page-chess .move-number {
 color: var(--c-muted); font-weight: 600; margin-right: 5px; 
}

body.page-chess .move-entry {
 padding: 3px 8px; background: white; border-radius: 4px; font-size: 14px; border: 1px solid var(--c-border); 
}

body.page-chess .move-entry.white-move {
 border-left: 3px solid var(--c-accent); 
}

body.page-chess .move-entry.ai-move {
 background: var(--c-surface)3cd; 
}

body.page-chess .info-icon {
 font-size: 24px; 
}

body.page-chess .info-text {
 flex: 1; font-size: 14px; color: var(--c-accent); font-weight: 600; 
}

/* Back to Top Button */

@media (max-width: 768px) {
body.page-chess .card-header h1 {
 font-size: 1.4em; 
}
body.page-chess .game-info {
 flex-direction: column; gap: 15px; 
}
body.page-chess .mode-selection {
 flex-direction: column; align-items: center; 
}
/* Smaller buttons on mobile */
body.page-chess .controls {

                gap: 8px;
            
}
body.page-chess .control-btn {

                padding: 10px 18px;
                font-size: 14px;
                border-radius: 10px;
            
}
body.page-chess .start-overlay {

                width: 80px;
                height: 80px;
                font-size: 36px;
            
}
}

/* Start Overlay Button */

body.page-chess .start-overlay {

            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            font-size: 32px;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            transition: all 0.3s;
            z-index: 10;
        
}

body.page-chess .start-overlay:hover {

            transform: translateX(-50%) scale(1.1);
            box-shadow: 0 6px 30px rgba(0,0,0,0.6);
        
}

body.page-chess .start-overlay.hidden {

            display: none;
        
}

body.dark-theme.page-chess .card-header h1 {
 color: #ffd700; text-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 0 32px rgba(255, 215, 0, 0.3), 3px 3px 0 #111; 
}

body.dark-theme.page-chess .card-header p {
 color: var(--c-muted); 
}

body.dark-theme.page-chess .game-info {
 background: none; border-color: var(--c-border); 
}

body.dark-theme.page-chess .info-label {
 color: var(--c-muted); 
}

body.dark-theme.page-chess .info-yellow {
 color: #ffe100; text-shadow: 0 0 10px rgba(255, 225, 0, 0.55); 
}

body.dark-theme.page-chess .info-cyan {
 color: #00e5ff; text-shadow: 0 0 10px rgba(0, 229, 255, 0.55); 
}

body.dark-theme.page-chess .info-magenta {
 color: #ff4fd8; text-shadow: 0 0 10px rgba(255, 79, 216, 0.55); 
}

body.dark-theme.page-chess .info-green {
 color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.55); 
}

body.dark-theme.page-chess .info-value {
 background: linear-gradient(135deg, #8b9cf7 0%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; 
}

body.dark-theme.page-chess .game-status {
 background: none; border-color: var(--c-border); box-shadow:  0 6px 20px rgba(102, 126, 234, 0.10); color: var(--c-text); 
}

body.dark-theme.page-chess .move-history {
 background: var(--c-surface); 
}

body.dark-theme.page-chess .move-entry {
 background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); 
}

body.dark-theme.page-chess .move-entry.ai-move {
 background: #2d1f00; 
}

body.dark-theme.page-chess .info-text {
 color: var(--c-accent); 
}

body.dark-theme.page-chess .mode-selection, body.dark-theme.page-chess .difficulty-selection {
 background: none; border-color: var(--c-border); 
}

body.dark-theme.page-chess .mode-btn, body.dark-theme.page-chess .diff-btn {
 color: var(--c-muted); 
}

body.dark-theme.page-chess .mode-btn:hover, body.dark-theme.page-chess .diff-btn:hover {
 color: var(--c-muted); 
}

body.dark-theme.page-chess .mode-btn.active, body.dark-theme.page-chess .diff-btn.active {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); 
}

/* Hidden class for search filtering */