/* Chess Piece Styling */
.piece {
    position: relative;
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    cursor: grab;
    user-select: none;
    transition: transform 0.1s ease;
}

.piece:active {
    cursor: grabbing;
}

.piece.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.piece:hover {
    transform: scale(1.1);
}

/* Unicode Chess Pieces */
.piece.white.pawn::before { content: '♙'; }
.piece.white.rook::before { content: '♖'; }
.piece.white.knight::before { content: '♘'; }
.piece.white.bishop::before { content: '♗'; }
.piece.white.queen::before { content: '♕'; }
.piece.white.king::before { content: '♔'; }

.piece.black.pawn::before { content: '♟'; }
.piece.black.rook::before { content: '♜'; }
.piece.black.knight::before { content: '♞'; }
.piece.black.bishop::before { content: '♝'; }
.piece.black.queen::before { content: '♛'; }
.piece.black.king::before { content: '♚'; }

.piece.white::before {
    color: #ffffff;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.piece.black::before {
    color: #333333;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Captured Pieces */
.captured-piece {
    font-size: 1.5rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

/* Animation Classes */
@keyframes piece-move {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes piece-capture {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.5) rotate(180deg);
        opacity: 0;
    }
}

.piece.animate-move {
    animation: piece-move 0.3s ease;
}

.piece.animate-capture {
    animation: piece-capture 0.4s ease forwards;
}

/* Promotion Animation */
@keyframes piece-promote {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5) translateY(-10px);
    }
    100% {
        transform: scale(1);
    }
}

.piece.animate-promote {
    animation: piece-promote 0.5s ease;
}

/* Check Animation */
@keyframes king-check {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.15);
    }
    75% {
        transform: scale(0.95);
    }
}

.piece.king.in-check {
    animation: king-check 0.6s ease infinite;
}

/* Responsive Piece Sizes */
@media (max-width: 768px) {
    .piece {
        font-size: 2.5rem;
    }

    .captured-piece {
        font-size: 1.2rem;
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .piece {
        font-size: 2rem;
    }

    .captured-piece {
        font-size: 1rem;
        width: 24px;
        height: 24px;
    }
}