/* ==========================================================================
   BOARD CSS - TIBIA CHESS ENGINE
   ========================================================================== */

:root {
    --board-size: 256px;
    --square-size: 32px;
    --border-color: #3a2b1d;
    --board-shadow: 0 12px 36px rgba(0, 0, 0, 0.75);
}

/* Board Container Wrapper */
.board-container {
    position: relative;
    width: var(--board-size);
    height: var(--board-size);
    padding: 8px;
    background: #1f140a linear-gradient(135deg, #2c1b0e 0%, #120904 100%);
    border: 3px solid #8b5a2b;
    outline: 1px solid #3a2211;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), inset 0 0 12px rgba(0, 0, 0, 0.85), 0 0 20px rgba(212, 175, 55, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Inner 8x8 Grid */
#chess-board {
    display: grid;
    grid-template-columns: repeat(8, var(--square-size));
    grid-template-rows: repeat(8, var(--square-size));
    width: var(--board-size);
    height: var(--board-size);
    background-color: #1a1a1a;
    border: 1px solid #000;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.9);
}

/* Individual Square (32x32px) */
.square {
    width: var(--square-size);
    height: var(--square-size);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    cursor: pointer;
    transition: filter 0.15s ease;
}

/* Fallback/Default Square Floors in case gif is missing */
.square.light-square {
    background-color: #e2d6b5;
    background-image: url('../assets/board/white_floor.gif');
}

.square.dark-square {
    background-color: #7a9a60;
    background-image: url('../assets/board/black_floor.gif');
}

/* Hover Effect */
.square:hover {
    filter: brightness(1.2);
}

/* Board Coordinates Overlay Labels */
.board-rank-label, .board-file-label {
    position: absolute;
    font-size: 9px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    font-family: monospace;
}

.board-rank-label {
    left: 2px;
    top: 2px;
}

.board-file-label {
    right: 2px;
    bottom: 1px;
}