/* ===== BORDER EFFECTS & ANIMATIONS =====  */

/* Solid Border (default) */
.game-board.border-solid {
    border: var(--board-border-width, 2px) solid var(--board-border-color, #000);
}

/* Double Border Effect */
.game-board.border-double {
    box-shadow: 
        0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
        0 0 0 calc(var(--board-border-width, 2px) * 2 + 3px) var(--board-border-color, #000),
        0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    border: none; /* Remove default border */
}

/* Dashed Border Effect */
.game-board.border-dashed {
    border: var(--board-border-width, 2px) dashed var(--board-border-color, #000);
    border-style: dashed;
    /* Use box-sizing to ensure border aligns properly */
    box-sizing: border-box;
}

/* Dotted Border Effect */
.game-board.border-dotted {
    border: var(--board-border-width, 2px) dotted var(--board-border-color, #000);
    border-style: dotted;
    /* Use box-sizing to ensure border aligns properly */
    box-sizing: border-box;
}

/* Ridge Border Effect (unique 3D-style border) */
.game-board.border-ridge {
    border: var(--board-border-width, 2px) ridge var(--board-border-color, #000);
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
}

/* Gradient Border Effect */
.game-board.border-gradient {
    border: none;
    background: var(--gradient-border-bg, linear-gradient(90deg, #FF0000, #0000FF));
    padding: var(--board-border-width, 2px);
    position: relative;
}

.game-board.border-gradient .randomizer-container,
.game-board.border-gradient .winners-container {
    position: relative;
    z-index: 1;
}

/* Inner content background for gradient border */
.game-board.border-gradient::before {
    content: '';
    position: absolute;
    top: var(--board-border-width, 2px);
    left: var(--board-border-width, 2px);
    right: var(--board-border-width, 2px);
    bottom: var(--board-border-width, 2px);
    background: var(--board-bg, white);
    border-radius: calc(var(--board-radius, 8px) - var(--board-border-width, 2px));
    z-index: 0;
}

/* ===== BORDER ANIMATIONS ===== */

/* Shine Animation - Directional shimmer across the border */
@keyframes borderShine {
    0% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            -50px 0 30px -10px transparent,
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    25% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            0 -25px 30px -10px var(--shine-color, rgba(255, 255, 255, 0.6)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    50% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            50px 0 30px -10px var(--shine-color, rgba(255, 255, 255, 0.6)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    75% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            0 25px 30px -10px var(--shine-color, rgba(255, 255, 255, 0.6)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    100% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            -50px 0 30px -10px transparent,
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
}

.game-board.border-animate-shine {
    animation: borderShine calc(3s / var(--animation-speed, 1)) linear infinite;
    border: none;
}

/* Light Chase Animation - Rotating light around the border */
@keyframes borderLightChase {
    0% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            5px 0 15px var(--chase-color, rgba(255, 255, 255, 0.8)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    25% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            0 5px 15px var(--chase-color, rgba(255, 255, 255, 0.8)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    50% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            -5px 0 15px var(--chase-color, rgba(255, 255, 255, 0.8)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    75% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            0 -5px 15px var(--chase-color, rgba(255, 255, 255, 0.8)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    100% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            5px 0 15px var(--chase-color, rgba(255, 255, 255, 0.8)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
}

.game-board.border-animate-chase {
    animation: borderLightChase calc(3s / var(--animation-speed, 1)) linear infinite;
    border: none;
}

/* Flair Animation - Random sparkling effects on edges */
@keyframes borderFlair {
    0%, 100% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            0 0 5px var(--flair-color, rgba(255, 255, 255, 0.5)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    10% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            15px -15px 20px var(--flair-color, rgba(255, 255, 255, 0.8)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    20% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            0 0 5px var(--flair-color, rgba(255, 255, 255, 0.5)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    35% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            -20px 10px 25px var(--flair-color, rgba(255, 255, 255, 0.8)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    50% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            0 0 5px var(--flair-color, rgba(255, 255, 255, 0.5)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    65% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            10px 20px 18px var(--flair-color, rgba(255, 255, 255, 0.8)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    80% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            0 0 5px var(--flair-color, rgba(255, 255, 255, 0.5)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    90% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            -15px -20px 22px var(--flair-color, rgba(255, 255, 255, 0.8)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
}

.game-board.border-animate-flair {
    animation: borderFlair calc(2s / var(--animation-speed, 1)) ease-in-out infinite;
    border: none;
}

/* Fire Animation - Flickering flame effect on edges */
@keyframes borderFire {
    0%, 100% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            5px -10px calc(var(--animation-range, 50px) * 0.4) var(--fire-color1, rgba(255, 100, 0, 0.8)),
            -8px 5px calc(var(--animation-range, 50px) * 0.3) var(--fire-color2, rgba(255, 150, 0, 0.7)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    10% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            12px -15px calc(var(--animation-range, 50px) * 0.5) var(--fire-color1, rgba(255, 100, 0, 0.9)),
            -15px 8px calc(var(--animation-range, 50px) * 0.4) var(--fire-color2, rgba(255, 150, 0, 0.8)),
            8px 12px calc(var(--animation-range, 50px) * 0.3) var(--fire-color3, rgba(255, 200, 0, 0.6)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    25% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            -10px -12px calc(var(--animation-range, 50px) * 0.45) var(--fire-color1, rgba(255, 100, 0, 0.85)),
            15px -5px calc(var(--animation-range, 50px) * 0.35) var(--fire-color2, rgba(255, 150, 0, 0.75)),
            -5px 15px calc(var(--animation-range, 50px) * 0.4) var(--fire-color3, rgba(255, 200, 0, 0.7)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    40% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            8px 18px calc(var(--animation-range, 50px) * 0.5) var(--fire-color1, rgba(255, 100, 0, 0.9)),
            -12px -8px calc(var(--animation-range, 50px) * 0.4) var(--fire-color2, rgba(255, 150, 0, 0.8)),
            18px -10px calc(var(--animation-range, 50px) * 0.35) var(--fire-color3, rgba(255, 200, 0, 0.65)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    55% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            -15px 10px calc(var(--animation-range, 50px) * 0.45) var(--fire-color1, rgba(255, 100, 0, 0.85)),
            10px -15px calc(var(--animation-range, 50px) * 0.5) var(--fire-color2, rgba(255, 150, 0, 0.9)),
            -8px -12px calc(var(--animation-range, 50px) * 0.3) var(--fire-color3, rgba(255, 200, 0, 0.7)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    70% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            12px 8px calc(var(--animation-range, 50px) * 0.4) var(--fire-color1, rgba(255, 100, 0, 0.8)),
            -10px 15px calc(var(--animation-range, 50px) * 0.45) var(--fire-color2, rgba(255, 150, 0, 0.85)),
            15px -8px calc(var(--animation-range, 50px) * 0.35) var(--fire-color3, rgba(255, 200, 0, 0.65)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
    85% {
        box-shadow: 
            0 0 0 var(--board-border-width, 2px) var(--board-border-color, #000),
            -12px -10px calc(var(--animation-range, 50px) * 0.5) var(--fire-color1, rgba(255, 100, 0, 0.9)),
            8px 12px calc(var(--animation-range, 50px) * 0.4) var(--fire-color2, rgba(255, 150, 0, 0.8)),
            -15px 8px calc(var(--animation-range, 50px) * 0.3) var(--fire-color3, rgba(255, 200, 0, 0.6)),
            0 var(--board-shadow-distance, 10px) calc(var(--board-shadow-distance, 10px) * 4) var(--board-shadow-color, rgba(0, 0, 0, 0.3));
    }
}

.game-board.border-animate-fire {
    animation: borderFire calc(1.5s / var(--animation-speed, 1)) ease-in-out infinite;
    border: none;
}

/* Apply hue rotation to animations based on hue slider - BORDER ONLY, NEVER LOGOS */
.game-board.border-animate-shine::after,
.game-board.border-animate-chase::after,
.game-board.border-animate-flair::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: var(--board-radius, 8px);
    filter: hue-rotate(var(--animation-hue, 0deg));
    z-index: -1; /* Behind content but in front of border */
}