/* Chessmoons LED Controller Styles */

.chessmoons-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    background-color: #34495e;
    padding: 4px;
    border-radius: 5px;
}

.chessmoons-square {
    aspect-ratio: 1;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 2px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chessmoons-square:nth-child(16n+1), .chessmoons-square:nth-child(16n+3), 
.chessmoons-square:nth-child(16n+5), .chessmoons-square:nth-child(16n+7),
.chessmoons-square:nth-child(16n+10), .chessmoons-square:nth-child(16n+12), 
.chessmoons-square:nth-child(16n+14), .chessmoons-square:nth-child(16n+16) {
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
}

.chessmoons-square:nth-child(16n+2), .chessmoons-square:nth-child(16n+4), 
.chessmoons-square:nth-child(16n+6), .chessmoons-square:nth-child(16n+8),
.chessmoons-square:nth-child(16n+9), .chessmoons-square:nth-child(16n+11), 
.chessmoons-square:nth-child(16n+13), .chessmoons-square:nth-child(16n+15) {
    background: linear-gradient(135deg, #b0bec5, #90a4ae);
}

.chessmoons-square.on {
    background: radial-gradient(circle, #ffd54f 0%, #ffa000 100%);
    box-shadow: 0 0 8px #ffa000;
}

.chess-piece {
    width: 90%;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
}