/* --- Board Elements --- */

.square {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem; 
    cursor: pointer;
    position: relative;
    user-select: none;
}

@media (max-width: 500px) {
    .square { font-size: 1.5rem; }
}

.square.light { background-color: #94a3b8; color: black; }
.square.dark { background-color: #475569; color: black; }

/* Highlights */
.square.selected { background-color: #facc15 !important; } /* Yellow */

.square.valid-move::after {
    content: '';
    position: absolute;
    width: 20%;
    height: 20%;
    background-color: rgba(96, 165, 250, 0.8); /* Blue Dot */
    border-radius: 50%;
    box-shadow: 0 0 5px #60a5fa;
}

.square.death {
    background-color: #ef4444 !important; /* Red */
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Pieces */
.piece {
    z-index: 10;
    pointer-events: none; 
}
.piece.white { color: #fff; text-shadow: 0 0 5px #fff, 2px 2px 0 #000; }
.piece.black { color: #000; text-shadow: 0 0 2px #fff; }

/* King Highlight - Red Outline & Glow */
.king-target {
    color: #000; 
    text-shadow: 
        -1px -1px 0 #ef4444, 
         1px -1px 0 #ef4444, 
        -1px  1px 0 #ef4444, 
         1px  1px 0 #ef4444,
         0 0 10px #ef4444 !important;
}

/* Animations */
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}