/* 
 * Estilos específicos do tabuleiro de xadrez
 * Arquivo: assets/css/chess-board-fe.css
 */

/* Container do jogo de xadrez */
.chess-game-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wrapper do tabuleiro - mantém o tabuleiro centralizado */
.chess-board-wrapper {
    max-width: 80vh;
    max-height: 80vh;
    margin: 0 auto;
    border: var(--border-width-chess) solid var(--chess-border);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-lg);
    transition: var(--transition-base);
}

.chess-board-wrapper:hover {
    box-shadow: var(--box-shadow-xl);
}

/* Layout de jogo para desktop */
.game-layout {
    height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width); /* Painéis laterais + tabuleiro */
    gap: var(--grid-gap);
    padding: var(--container-padding);
}

.left-panel, .right-panel {
    overflow-y: auto; /* Scroll interno se necessário */
    background-color: var(--bs-card-bg);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-3);
    box-shadow: var(--box-shadow-sm);
}

.chess-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layout para dispositivos móveis */
@media (max-width: 768px) {
    .game-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: 100vh;
        overflow: hidden;
    }
    
    .chess-board-wrapper {
        max-width: 100%;
        max-height: 60vh;
    }
    
    .left-panel, .right-panel {
        max-height: 30vh;
        overflow-y: auto;
    }
    
    .game-layout-mobile {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .chess-board-mobile {
        flex: 1;
        max-height: 60vh; /* Deixa espaço para painéis */
    }
    
    .game-info-mobile {
        height: 40vh;
        overflow-y: auto;
    }
}

/* Cores do tabuleiro (para integração com chessboard.js) */
.white-1e1d7 {
    background-color: var(--chess-light-square);
    color: var(--chess-dark-square);
}

.black-3c85d {
    background-color: var(--chess-dark-square);
    color: var(--chess-light-square);
}

/* Destaque para movimentos e seleção */
.highlight-square {
    box-shadow: var(--box-shadow-inset) var(--chess-highlight);
}

.selected-square {
    box-shadow: var(--box-shadow-inset) var(--chess-selected);
}

.check-square {
    box-shadow: var(--box-shadow-inset) var(--chess-check);
}

/* Animações para movimento de peças */
.piece-animation {
    transition: var(--transition-pieces);
}

/* Status da partida */
.game-status {
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--bs-dark);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-3);
    font-weight: var(--font-weight-medium);
    text-align: center;
}

.game-status.active {
    background-color: var(--bs-primary);
}

.game-status.check {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}

.game-status.checkmate {
    background-color: var(--bs-danger);
}

.game-status.draw {
    background-color: var(--bs-secondary);
}