/* Base styles */
body {
    font-family: 'Inter', sans-serif;
    @apply text-gray-800;
}

/* Chess board styles */
.chess-board {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1/1;
    @apply shadow-lg;
}

.square {
    position: relative;
    @apply flex items-center justify-center;
}

.square.light {
    @apply bg-amber-100;
}

.square.dark {
    @apply bg-amber-800;
}

.square.highlight {
    @apply bg-green-200;
}

.square.last-move {
    @apply bg-blue-200;
}

.square.check {
    @apply bg-red-200;
}

.piece {
    width: 80%;
    height: 80%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    @apply transition-transform;
}

.piece.selected {
    @apply transform scale-110;
}

/* Button styles */
.difficulty-btn, .color-btn {
    @apply flex-grow py-2 px-4 rounded border border-gray-300 hover:bg-gray-100 transition-colors;
}

.difficulty-btn.active, .color-btn.active {
    @apply bg-indigo-600 text-white border-indigo-600;
}

/* Game controls */
.game-controls {
    @apply flex justify-center space-x-4 my-6;
}

.game-controls button {
    @apply px-4 py-2 rounded-lg shadow hover:shadow-md transition-all;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .chess-board {
        max-width: 100%;
    }
  }