/* Chess Board Component */
.chess-board-wrapper {
    width: 100%;
    max-width: 600px;
    /* Max size, scalable */
    aspect-ratio: 1;
    padding: 10px;
}

.chess-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: 100%;
    height: 100%;
    border: 5px solid #483d3d;
}

.square {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    user-select: none;
}

.square.light {
    background-color: #f0d9b5;
}

.square.dark {
    background-color: #b58863;
}

.piece {
    font-size: 3rem;
    /* Large font for unicode pieces, will replace with images */
    cursor: grab;
    z-index: 10;
}

.piece:active {
    cursor: grabbing;
}

.rank-label,
.file-label {
    position: absolute;
    font-size: 0.7rem;
    font-weight: bold;
    color: inherit;
    opacity: 0.8;
}

.rank-label {
    top: 2px;
    left: 2px;
    color: #333;
    /* Dark text on light squares usually, need inversion based on square */
}

.square.dark .rank-label {
    color: #f0d9b5;
}

.square.light .rank-label {
    color: #b58863;
}

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

.square.dark .file-label {
    color: #f0d9b5;
}

.square.light .file-label {
    color: #b58863;
}