/**
 * Shared Chess Board Styles
 *
 * IMPORTANT: All games must use these styles for board rendering.
 * Do NOT override these styles in individual game files.
 * This ensures visual consistency across all chess minigames.
 */

/* Board container - always 8x8 grid */
.board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: min(70vmin, 600px);
    height: min(70vmin, 600px);
    gap: 0;
    outline: 0.5rem solid black;
}

/* Individual square on the board */
.cmg_square {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cmg_square.highlight-green {
    background-color: #22c55e;
}

.cmg_square.highlight-red {
    background-color: #ef4444;
}

/* White squares */
.cmg_white-square {
    background-color: red;
    height: 100%;
    width: 100%;
}

/* Black squares */
.cmg_black-square {
    background-color: #303030;
    height: 100%;
    width: 100%;
}

/* Chess piece images */
.piece {
    margin: auto;
    height: 100%;
    width: 100%;
}

/* Square coordinate labels (if used) */
.coord {
    cursor: default;
    font-size: 0.8rem;
    color: #666;
}

/* Helper class for centering content */
.center-children {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Row wrapper (for games that use row elements) */
.row {
    display: contents;
}