/* chess_grid.css */

body.chess-mode-active #poc-desktop-grid {
    /* Optional: dims the background slightly to make the board pop */
    background: #2b2c3b;
}

/* The outer two columns on the left and right */
.chess-void-cell {
    background: linear-gradient(135deg, #7D6988 0%, #44465E 100%) !important;
    border: 1px solid rgba(68, 70, 94, 0.2) !important;
    pointer-events: none !important;
    opacity: 0.85;
}

/* Chess board squares */
.chess-square-light {
    background-color: #EEEEEE !important;
    border: 1px solid rgba(68, 70, 94, 0.1) !important;
}

.chess-square-dark {
    background-color: #C8BFE7 !important;
    border: 1px solid rgba(68, 70, 94, 0.1) !important;
}

/* Piece containers */
.chess-piece {
    width: 65%;
    height: 65%;
    pointer-events: none; /* Let the cell handle the clicks */
    filter: drop-shadow(0px 4px 5px rgba(0,0,0,0.3));
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 20;
}

.poc-grid-cell:hover .chess-piece {
    transform: scale(1.15);
}

/* Selection and valid moves */
.chess-selected-square {
    outline: 3px solid #AAA348 !important;
    outline-offset: -3px;
    z-index: 10;
}

.chess-valid-move {
    position: relative;
    cursor: url('sprites/cursor_point.ico'), pointer !important;
}

.chess-valid-move::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: rgba(170, 163, 72, 0.6);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 15;
}

/* Specifically color the improvised SVGs */
.piece-white path, .piece-white polygon, .piece-white circle {
    fill: #AAA348;
    stroke: #44465E;
    stroke-width: 4;
}

.piece-black path, .piece-black polygon, .piece-black circle {
    fill: #857EB6;
    stroke: #2b2c3b;
    stroke-width: 4;
}