/* Board Theme Styles for Chessboard.js */

/* Classic Theme (Default) - Brown wooden board */
.board-theme-classic .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #f0d9b5 !important;
}

.board-theme-classic .board-b72b1 .square-55d63.black-3c85d {
    background-color: #b58863 !important;
}

/* Marble Theme - Gray marble board */
.board-theme-marble .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #e8e8e8 !important;
}

.board-theme-marble .board-b72b1 .square-55d63.black-3c85d {
    background-color: #a0a0a0 !important;
}

/* Golden Theme - Gold board */
.board-theme-golden .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #f4d03f !important;
}

.board-theme-golden .board-b72b1 .square-55d63.black-3c85d {
    background-color: #d4af37 !important;
}

/* Dark Theme - Dark green board */
.board-theme-dark .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #769656 !important;
}

.board-theme-dark .board-b72b1 .square-55d63.black-3c85d {
    background-color: #1a1a1a !important;
}

/* Trippy Theme - Psychedelic colors for Addict badge holders */
.board-theme-trippy .board-b72b1 .square-55d63.white-1e1d7 {
    background: linear-gradient(135deg, #ff00ff 0%, #00ffff 50%, #ff00ff 100%) !important;
    background-size: 200% 200% !important;
    animation: trippyShift 3s ease infinite !important;
}

.board-theme-trippy .board-b72b1 .square-55d63.black-3c85d {
    background: linear-gradient(135deg, #ff0080 0%, #8000ff 50%, #00ff80 100%) !important;
    background-size: 200% 200% !important;
    animation: trippyShift 3s ease infinite reverse !important;
}

@keyframes trippyShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Ocean Theme - Blue/teal ocean colors */
.board-theme-ocean .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #87CEEB !important;
}

.board-theme-ocean .board-b72b1 .square-55d63.black-3c85d {
    background-color: #4682B4 !important;
}

/* Forest Theme - Green/natural forest colors */
.board-theme-forest .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #90EE90 !important;
}

.board-theme-forest .board-b72b1 .square-55d63.black-3c85d {
    background-color: #228B22 !important;
}

/* Sunset Theme - Orange/red sunset colors */
.board-theme-sunset .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #FFB347 !important;
}

.board-theme-sunset .board-b72b1 .square-55d63.black-3c85d {
    background-color: #FF6347 !important;
}

/* Ice Theme - Light blue/white ice colors */
.board-theme-ice .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #E0F6FF !important;
}

.board-theme-ice .board-b72b1 .square-55d63.black-3c85d {
    background-color: #B0E0E6 !important;
}

/* Royal Theme - Purple/gold royal colors */
.board-theme-royal .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #DDA0DD !important;
}

.board-theme-royal .board-b72b1 .square-55d63.black-3c85d {
    background-color: #9370DB !important;
}

/* Cherry Theme - Pink/red cherry colors */
.board-theme-cherry .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #FFB6C1 !important;
}

.board-theme-cherry .board-b72b1 .square-55d63.black-3c85d {
    background-color: #DC143C !important;
}

/* Midnight Theme - Dark blue/navy colors */
.board-theme-midnight .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #4169E1 !important;
}

.board-theme-midnight .board-b72b1 .square-55d63.black-3c85d {
    background-color: #191970 !important;
}

/* Sand Theme - Beige/tan desert colors */
.board-theme-sand .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #F5DEB3 !important;
}

.board-theme-sand .board-b72b1 .square-55d63.black-3c85d {
    background-color: #CD853F !important;
}

/* Emerald Theme - Rich green/emerald colors */
.board-theme-emerald .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #98FB98 !important;
}

.board-theme-emerald .board-b72b1 .square-55d63.black-3c85d {
    background-color: #006400 !important;
}

/* Deep Ocean Theme - Premium ocean-themed tiles */
.board-theme-deep-ocean .board-b72b1 .square-55d63.white-1e1d7 {
    background-image: url('/img/Themes/Deep Ocean/Light-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.board-theme-deep-ocean .board-b72b1 .square-55d63.black-3c85d {
    background-image: url('/img/Themes/Deep Ocean/Dark-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Deep Forest Theme - Premium forest-themed tiles */
.board-theme-deep-forest .board-b72b1 .square-55d63.white-1e1d7 {
    background-image: url('/img/Themes/Deep Forest/Light-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.board-theme-deep-forest .board-b72b1 .square-55d63.black-3c85d {
    background-image: url('/img/Themes/Deep Forest/Dark-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Christmas 2025 Theme - Festive holiday-themed tiles */
.board-theme-christmas-2025 .board-b72b1 .square-55d63.white-1e1d7 {
    background-image: url('/img/Themes/Christmas 2025/Light-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.board-theme-christmas-2025 .board-b72b1 .square-55d63.black-3c85d {
    background-image: url('/img/Themes/Christmas 2025/Dark-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Deep Ice Theme - Premium ice-themed tiles */
.board-theme-deep-ice .board-b72b1 .square-55d63.white-1e1d7 {
    background-image: url('/img/Themes/Deep Ice/Light-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.board-theme-deep-ice .board-b72b1 .square-55d63.black-3c85d {
    background-image: url('/img/Themes/Deep Ice/Dark-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Deep Space Theme - Premium space-themed tiles */
.board-theme-deep-space .board-b72b1 .square-55d63.white-1e1d7 {
    background-image: url('/img/Themes/Deep Space/Light-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.board-theme-deep-space .board-b72b1 .square-55d63.black-3c85d {
    background-image: url('/img/Themes/Deep Space/Dark-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 1111 Theme - Special commemorative theme celebrating 1111 games */
.board-theme-1111 .board-b72b1 .square-55d63.white-1e1d7 {
    background-image: url('/img/Themes/1111/Light-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.board-theme-1111 .board-b72b1 .square-55d63.black-3c85d {
    background-image: url('/img/Themes/1111/Dark-Tile.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Aurora Theme - Northern lights inspired purple/blue/green gradient */
.board-theme-aurora .board-b72b1 .square-55d63.white-1e1d7 {
    background: linear-gradient(135deg, #a8e6cf 0%, #dcedc8 50%, #ffd3a5 100%) !important;
    background-size: 200% 200% !important;
    animation: auroraShift 8s ease infinite !important;
}

.board-theme-aurora .board-b72b1 .square-55d63.black-3c85d {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
    background-size: 200% 200% !important;
    animation: auroraShift 8s ease infinite reverse !important;
}

@keyframes auroraShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Lavender Theme - Soft purple lavender colors */
.board-theme-lavender .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #E6E6FA !important;
}

.board-theme-lavender .board-b72b1 .square-55d63.black-3c85d {
    background-color: #9370DB !important;
}

/* Coffee Theme - Warm brown coffee colors */
.board-theme-coffee .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #D2B48C !important;
}

.board-theme-coffee .board-b72b1 .square-55d63.black-3c85d {
    background-color: #8B4513 !important;
}

/* Mint Theme - Fresh mint green colors */
.board-theme-mint .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #F0FFF0 !important;
}

.board-theme-mint .board-b72b1 .square-55d63.black-3c85d {
    background-color: #98D8C8 !important;
}

/* Coral Theme - Warm coral/pink colors */
.board-theme-coral .board-b72b1 .square-55d63.white-1e1d7 {
    background-color: #FFE4E1 !important;
}

.board-theme-coral .board-b72b1 .square-55d63.black-3c85d {
    background-color: #FF7F50 !important;
}

/* Flowing Gold Theme - Premium animated chessboard with flowing gradients and shimmer effects */
.board-theme-flowing-gold .board-b72b1 .square-55d63.white-1e1d7 {
    background: linear-gradient(135deg, #f0d9b5 0%, #e8d5a3 25%, #f5e6d3 50%, #e8d5a3 75%, #f0d9b5 100%) !important;
    background-size: 300% 300% !important;
    animation: flowingGoldFlow 4s ease-in-out infinite !important;
    position: relative !important;
}

.board-theme-flowing-gold .board-b72b1 .square-55d63.white-1e1d7::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: flowingGoldShimmer 3s ease-in-out infinite;
    pointer-events: none;
}

.board-theme-flowing-gold .board-b72b1 .square-55d63.black-3c85d {
    background: linear-gradient(135deg, #b58863 0%, #8b6f47 25%, #a67c52 50%, #8b6f47 75%, #b58863 100%) !important;
    background-size: 300% 300% !important;
    animation: flowingGoldFlow 4s ease-in-out infinite reverse !important;
    position: relative !important;
}

.board-theme-flowing-gold .board-b72b1 .square-55d63.black-3c85d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: flowingGoldShimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flowingGoldFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes flowingGoldShimmer {
    0% {
        background-position: -200% -200%;
    }
    50% {
        background-position: 200% 200%;
    }
    100% {
        background-position: -200% -200%;
    }
}

/* Cosmic Flow Theme - Animated cosmic nebula chessboard with pulsing starfield effects */
.board-theme-cosmic-flow .board-b72b1 .square-55d63.white-1e1d7 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #667eea 100%) !important;
    background-size: 400% 400% !important;
    animation: cosmicFlow 5s ease-in-out infinite !important;
    position: relative !important;
}

.board-theme-cosmic-flow .board-b72b1 .square-55d63.white-1e1d7::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
    background-size: 150% 150%, 120% 120%;
    animation: cosmicStars 6s ease-in-out infinite;
    pointer-events: none;
}

.board-theme-cosmic-flow .board-b72b1 .square-55d63.black-3c85d {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #1a1a2e 100%) !important;
    background-size: 400% 400% !important;
    animation: cosmicFlow 5s ease-in-out infinite reverse !important;
    position: relative !important;
}

.board-theme-cosmic-flow .board-b72b1 .square-55d63.black-3c85d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(138, 43, 226, 0.3) 0%, transparent 50%);
    background-size: 180% 180%, 140% 140%;
    animation: cosmicStars 6s ease-in-out infinite reverse;
    pointer-events: none;
}

@keyframes cosmicFlow {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

@keyframes cosmicStars {
    0% {
        background-position: 0% 0%, 100% 100%;
        opacity: 0.6;
    }
    50% {
        background-position: 100% 100%, 0% 0%;
        opacity: 1;
    }
    100% {
        background-position: 0% 0%, 100% 100%;
        opacity: 0.6;
    }
}

/* Streak Fire Theme - Animated fire-themed chessboard unlocked at 30-day streak */
.board-theme-streak-fire .board-b72b1 .square-55d63.white-1e1d7 {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 25%, #ffa366 50%, #ff8c42 75%, #ff6b35 100%) !important;
    background-size: 300% 300% !important;
    animation: streakFireFlow 3s ease-in-out infinite !important;
    position: relative !important;
}

.board-theme-streak-fire .board-b72b1 .square-55d63.white-1e1d7::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
                linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    background-size: 150% 150%, 200% 200%;
    animation: streakFireGlow 2.5s ease-in-out infinite;
    pointer-events: none;
}

.board-theme-streak-fire .board-b72b1 .square-55d63.black-3c85d {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 25%, #d63031 50%, #e74c3c 75%, #c0392b 100%) !important;
    background-size: 300% 300% !important;
    animation: streakFireFlow 3s ease-in-out infinite reverse !important;
    position: relative !important;
}

.board-theme-streak-fire .board-b72b1 .square-55d63.black-3c85d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 200, 0, 0.3) 0%, transparent 60%),
                linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
    background-size: 150% 150%, 200% 200%;
    animation: streakFireGlow 2.5s ease-in-out infinite reverse;
    pointer-events: none;
}

@keyframes streakFireFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes streakFireGlow {
    0% {
        background-position: 0% 0%, -200% -200%;
        opacity: 0.7;
    }
    50% {
        background-position: 50% 50%, 0% 0%;
        opacity: 1;
    }
    100% {
        background-position: 100% 100%, 200% 200%;
        opacity: 0.7;
    }
}