/* ChessX Custom Styles */

/* Board sizing */
#board {
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* Override chessground colors for minimalist look */
cg-board {
    background-color: #E5E5E5;
}

cg-board square.white {
    background-color: #E5E5E5;
}

cg-board square.black {
    background-color: #4A4A4A;
}

/* Last move highlight */
cg-board square.last-move {
    background-color: rgba(155, 199, 0, 0.41);
}

/* Selected piece */
cg-board square.selected {
    background-color: rgba(20, 85, 30, 0.5);
}

/* Move destinations */
cg-board square.move-dest {
    background: radial-gradient(rgba(20, 85, 30, 0.5) 22%, transparent 22%);
}

cg-board square.oc.move-dest {
    background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 85, 30, 0.3) 80%);
}

/* Check highlight */
cg-board square.check {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 0, 0, 1) 0%,
        rgba(231, 0, 0, 1) 25%,
        rgba(169, 0, 0, 0) 89%,
        rgba(158, 0, 0, 0) 100%
    );
}

/* Piece drag */
cg-board piece.dragging {
    cursor: grabbing;
}

/* Responsive board */
@media (max-width: 1024px) {
    #board {
        max-width: 100%;
    }
}

/* Smooth transitions for feedback panel */
#feedback-panel {
    transition: all 0.2s ease;
}

/* Move quality icons */
.move-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: bold;
}

/* Loading animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}