/* Animation for letter placement */
@keyframes letterPlace {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.chess-cell.letter-placed {
    animation: letterPlace 0.3s ease;
}

/* Hint animation */
@keyframes hintPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(83, 141, 78, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(83, 141, 78, 0);
    }
}

.chess-cell.hint-placed {
    animation: hintPulse 1s ease-in-out 3;
}

/* Mobile touch optimizations */
@media (max-width: 600px) {
    .letter-tile {
        width: 48px;
        height: 48px;
        margin: 2px;
    }
    
    .chess-cell {
        min-height: 52px;
    }
    
    /* Prevent text selection during touch interactions */
    .letter-tile, .chess-cell {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
    }
    
    /* Improve touch feedback */
    .letter-tile:active, .chess-cell:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .letter-placed,
    .hint-placed {
        animation: none;
    }
    
    .chess-cell,
    .letter-tile,
    .control-btn,
    .icon-btn {
        transition: none;
    }
    
    .modal-content {
        animation: none;
    }
    
    .modal {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .chess-cell.selected {
        box-shadow: 0 0 0 4px rgba(83, 141, 78, 0.8);
    }
    
    .letter-tile.selected {
        box-shadow: 0 0 0 4px rgba(83, 141, 78, 0.8);
    }
}

/* Focus styles for keyboard navigation */
.chess-cell:focus,
.letter-tile:focus,
.control-btn:focus,
.icon-btn:focus {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* Improved focus visibility in dark mode */
body.dark-mode .chess-cell:focus,
body.dark-mode .letter-tile:focus,
body.dark-mode .control-btn:focus,
body.dark-mode .icon-btn:focus {
    outline-color: #6BB6FF;
}

/* Hover states for better interactivity */
.chess-cell:not(.blocked):not(.prefilled):hover {
    cursor: pointer;
}

.letter-tile:not(.used):hover {
    cursor: pointer;
}

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

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

/* Error states */
.error-state {
    border-color: var(--error-color) !important;
    background-color: rgba(201, 66, 74, 0.1) !important;
}

/* Success states */
.success-state {
    border-color: var(--accent-color) !important;
    background-color: rgba(83, 141, 78, 0.1) !important;
}

/* Transition improvements */
.chess-cell,
.letter-tile {
    will-change: transform;
}

/* Print styles */
@media print {
    .header-buttons,
    .game-controls,
    .modal,
    .toast {
        display: none !important;
    }
    
    .chess-grid {
        box-shadow: none;
        border: 2px solid #000;
    }
    
    .chess-cell {
        border-color: #000;
        background-color: white;
        color: black;
    }
    
    .chess-cell.blocked {
        background-color: #000;
    }
    
    .chess-cell.prefilled,
    .chess-cell.filled {
        background-color: #ccc;
    }
}

/* Reduced motion alternatives */
@media (prefers-reduced-motion: reduce) {
    .chess-cell.invalid {
        background-color: var(--error-color);
        border: 3px solid var(--error-color);
        animation: none;
    }
    
    .letter-tile:hover:not(.used) {
        transform: none;
        border-color: var(--accent-color);
        box-shadow: 0 0 0 2px var(--accent-color);
    }
    
    .chess-cell:hover:not(.blocked):not(.prefilled) {
        transform: none;
        border-color: var(--accent-color);
        box-shadow: 0 0 0 2px var(--accent-color);
    }
}