style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --square-light: #EBECD0;
    --square-dark: #779556;
    --highlight-move: rgba(255, 255, 0, 0.5);
    --highlight-check: rgba(255, 0, 0, 0.6);
    --highlight-selected: rgba(20, 85, 30, 0.5);
    --dot-color: rgba(0,0,0,0.15);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0f172a;
}

/* Chess Board Grid */
#board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    user-select: none;
}

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

.square.light {
    background-color: var(--square-light);
    color: var(--square-dark); /* for coordinate labels if added */
}

.square.dark {
    background-color: var(--square-dark);
    color: var(--square-light);
}

/* Piece Styling (Unicode) */
.piece {
    font-size: clamp(24px, 8vw, 56px);
    line-height: 1;
    cursor: grab;
    z-index: 10;
    transition: transform 0.1s;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3));
}

.piece.white {
    color: #f8f9fa;
    text-shadow: 0 0 2px #000;
}

.piece.black {
    color: #212529;
    text-shadow: 0 0 1px #fff;
}

.piece:active {
    cursor: grabbing;
    transform: scale(1.1);
}

/* Highlights */
.square.selected {
    background-color: #baca44 !important; /* Classic selection color */
}

.square.last-move {
    background-color: #f5f682 !important;
}

.square.check {
    background: radial-gradient(circle, var(--highlight-check) 0%, transparent 70%);
}

.square.valid-move::after {
    content: '';
    width: 30%;
    height: 30%;
    background-color: var(--dot-color);
    border-radius: 50%;
    position: absolute;
}

.square.valid-capture::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    border: 4px solid rgba(0,0,0,0.15);
    border-radius: 50%;
    box-sizing: border-box;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-down {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Custom Scrollbar */
#move-history::-webkit-scrollbar {
    width: 6px;
}
#move-history::-webkit-scrollbar-track {
    background: #1e293b; 
}
#move-history::-webkit-scrollbar-thumb {
    background: #475569; 
    border-radius: 3px;
}

/* Utility */
.shadow-glow {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.diff-btn.active {
    background-color: #10b981; /* Tailwind Emerald 500 */
    color: white;
}