/* ============================================================================
   THEME STYLES FOR SQUARES GRID
   ============================================================================ */

/* ============================================================================
   DYNAMIC KEYFRAMES - Generated from Theme Builder colors
   ============================================================================ */

/* slideAcross - same for all, position-based animation */
@keyframes slideAcross {
    0%, 100% { background-position: -100% 0; }
    50% { background-position: 200% 0; }
}

/* Multi-color effects - these stay hardcoded as they use multiple colors by design */
@keyframes borderDance {
    0%, 100% { border-color: rgba(102, 126, 234, 0.6); }
    25% { border-color: rgba(234, 102, 180, 0.6); }
    50% { border-color: rgba(102, 234, 180, 0.6); }
    75% { border-color: rgba(234, 180, 102, 0.6); }
}

@keyframes laserPulse {
    0%, 100% { border-color: rgba(0, 200, 255, 0.5); }
    50% { border-color: rgba(255, 0, 100, 0.7); box-shadow: 0 0 20px rgba(255, 0, 100, 0.3); }
}

@keyframes glitchEffect {
    0%, 100% { transform: translate(0); filter: none; }
    10% { transform: translate(-2px, 2px); filter: hue-rotate(90deg); }
    20% { transform: translate(2px, -2px); }
    30% { transform: translate(-1px, -1px); filter: hue-rotate(180deg); }
    40% { transform: translate(1px, 1px); }
    50% { transform: translate(-2px, 0); filter: hue-rotate(270deg); }
    60% { transform: translate(0, 2px); }
    70% { transform: translate(2px, 0); filter: none; }
}

@keyframes laserBeam {
    0%, 100% { box-shadow: -5px 0 20px rgba(255, 0, 0, 0.6), 5px 0 20px rgba(0, 100, 255, 0.6); }
    50% { box-shadow: 5px 0 30px rgba(255, 0, 0, 0.8), -5px 0 30px rgba(0, 100, 255, 0.8); }
}

/* Dynamic single-color keyframes for Winner (uses Effect Color, or Border if not set) */
@keyframes ringExpandWinner {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
}

/* Dynamic single-color keyframes for Reverse (uses Effect Color, or Border if not set) */
@keyframes winnerGlowReverse {
    0%, 100% { box-shadow: 0 0 20px rgba(196, 196, 196, 0.5); }
    50% { box-shadow: 0 0 40px rgba(196, 196, 196, 0.8), 0 0 60px rgba(196, 196, 196, 0.4); }
}

/* Dynamic single-color keyframes for Touching (uses Effect Color, or Border if not set) */

/* ============================================================================
   UNIVERSAL ANIMATION RULES - Applies to ALL themes
   ============================================================================ */
.square-cell.winner[class] {
    background-color: rgba(239, 68, 68, 0.55) !important;
    border: 2px solid rgba(2, 150, 242, 0.65) !important;
    animation: ringExpandWinner 2.7s ease-in-out infinite !important;
}

.square-cell.reverse[class] {
    background-color: rgba(2, 150, 242, 0.65) !important;
    border: 2px solid rgba(239, 68, 68, 0.65) !important;
    animation: winnerGlowReverse 2.9s ease-in-out infinite !important;
}

.square-cell.touching[class] {
    background-color: rgba(168, 85, 247, 0.6) !important;
    border: 2px solid rgba(125, 44, 201, 0.75) !important;
    animation: slideAcross 2.8s ease-in-out infinite !important;
    background-image: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent) !important;
    background-size: 200% 100% !important;
    background-color: transparent !important;
}

/* ============================================================================
   CUSTOM THEME - Full Theme Builder Configuration (colors + animations)
   ============================================================================ */
/* ============================================================================
   CUSTOM GRID THEME - Generated from Admin Theme Builder
   Last Updated: 2025-12-24 21:13:33   ============================================================================ */

/* Available squares (empty, no owner) - exclude winner types so their styles take precedence */
.square-cell:not(.winner):not(.reverse):not(.touching),
td.square-cell:not(.winner):not(.reverse):not(.touching) {
    background-color: rgba(60, 48, 151, 0.5) !important;
    background-image: none;
    border: 1px solid rgba(36, 27, 105, 0.6) !important;
}

/* Pending squares (selected but unpaid) - exclude winner types so their styles take precedence */
.square-cell.pending:not(.winner):not(.reverse):not(.touching),
td.square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background-color: rgba(255, 178, 46, 0.55) !important;
    background-image: none;
    border: 1px solid rgba(194, 122, 20, 0.6) !important;
}

/* Confirmed squares (paid) - exclude winner types so their styles take precedence */
.square-cell.confirmed:not(.winner):not(.reverse):not(.touching),
td.square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background-color: rgba(43, 43, 43, 0.5) !important;
    background-image: none;
    border: 1px solid rgba(59, 130, 246, 0.6) !important;
}

/* Claiming/Selected squares (user is selecting to claim) */
.square-cell.selected,
td.square-cell.selected {
    background-color: rgba(59, 130, 246, 0.5) !important;
    background-image: none;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5), inset 0 0 10px rgba(59, 130, 246, 0.5);
    transform: scale(1.05);
    z-index: 5;
}

.square-cell.selected::after,
td.square-cell.selected::after {
    content: '\2713';
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 0.65rem;
    color: #3b82f6;
    font-weight: bold;
}

/* Winner squares */
.square-cell.winner,
td.square-cell.winner {
    background-color: rgba(239, 68, 68, 0.55) !important;
    border: 2px solid rgba(2, 150, 242, 0.65) !important;
    animation: ringExpandWinner               2.7s ease-out infinite !important;
}

/* Reverse winner squares */
.square-cell.reverse,
td.square-cell.reverse {
    background-color: rgba(2, 150, 242, 0.65) !important;
    border: 2px solid rgba(239, 68, 68, 0.65) !important;
    animation: winnerGlowReverse               2.9s linear infinite !important;
}

/* Touching winner squares */
.square-cell.touching,
td.square-cell.touching {
    background-image: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent) !important;
    background-size: 200% 100% !important;
    border: 2px solid rgba(125, 44, 201, 0.75) !important;
    animation: slideAcross               2.8s linear infinite !important;
}
    
/*
 * Default styles are now handled by the Theme Builder PHP-generated CSS above.
 * The body:not([class*="theme-"]) selectors are no longer needed since we removed
 * theme class switching from index.php. All square colors come from Theme Builder.
 */

/* Selected/Claiming squares - Default style */
body:not([class*="theme-"]) .square-cell.selected,
.square-cell.selected {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.7) 0%, rgba(99, 102, 241, 0.7) 100%) !important;
    background-color: rgba(59, 130, 246, 0.7) !important;
    background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.7) 0%, rgba(99, 102, 241, 0.7) 100%) !important;
    border: 3px solid #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4), inset 0 0 15px rgba(59, 130, 246, 0.3), 0 0 20px rgba(59, 130, 246, 0.5) !important;
    transform: scale(1.08);
    z-index: 10;
}

body:not([class*="theme-"]) .square-cell.selected::after,
.square-cell.selected::after {
    content: '\2713';
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 0.65rem;
    color: #3b82f6;
    font-weight: bold;
}

/* Legend box overrides for selected */
.legend-box.selected {
    transform: none;
}

.legend-box.selected::after {
    font-size: 0.5rem;
    top: 1px;
    right: 2px;
}

/* Theme Classic (Original Default) */
.theme-classic .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background-color: rgba(17, 153, 142, 0.2);
    background-image: none;
    border-color: rgba(17, 153, 142, 0.4);
}

.theme-classic .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background-color: rgba(245, 87, 108, 0.2);
    background-image: none;
    border-color: rgba(245, 87, 108, 0.4);
}

.theme-classic .square-cell.winner {
    background-color: rgba(255, 215, 0, 0.3);
    background-image: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 237, 78, 0.3));
    border: 2px solid #ffd700;
}

.theme-classic .square-cell.touching {
    background-color: rgba(102, 126, 234, 0.2);
    background-image: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border: 1px solid rgba(102, 126, 234, 0.5);
}

.theme-classic .square-cell.reverse {
    background-color: rgba(17, 153, 142, 0.2);
    background-image: linear-gradient(135deg, rgba(17, 153, 142, 0.2), rgba(56, 239, 125, 0.2));
    border: 1px solid rgba(17, 153, 142, 0.5);
}

/* Theme Aurora */
.theme-aurora .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background-color: rgba(0, 200, 160, 0.22);
    background-image: none;
    border-color: rgba(0, 200, 160, 0.55);
}

.theme-aurora .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background-color: rgba(255, 105, 85, 0.20);
    background-image: none;
    border-color: rgba(255, 105, 85, 0.55);
}

.theme-aurora .square-cell.winner {
    background-color: rgba(255, 215, 0, 0.28);
    background-image: linear-gradient(135deg, rgba(255, 215, 0, 0.28), rgba(255, 239, 138, 0.28));
    border: 2px solid #ffd54a;
}

.theme-aurora .square-cell.touching {
    background-color: rgba(62, 197, 255, 0.22);
    background-image: linear-gradient(135deg, rgba(62, 197, 255, 0.22), rgba(93, 95, 239, 0.22));
    border: 1px solid rgba(93, 95, 239, 0.6);
}

.theme-aurora .square-cell.reverse {
    background-color: rgba(255, 77, 158, 0.22);
    background-image: linear-gradient(135deg, rgba(255, 77, 158, 0.22), rgba(124, 77, 255, 0.22));
    border: 1px solid rgba(193, 84, 217, 0.6);
}

/* Theme Okabe-Ito (Color-blind Friendly) */
.theme-okabeito .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(0, 158, 115, 0.22);
    border-color: rgba(0, 158, 115, 0.60);
}

.theme-okabeito .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(213, 94, 0, 0.22);
    border-color: rgba(213, 94, 0, 0.60);
}

.theme-okabeito .square-cell.winner {
    background: linear-gradient(135deg, rgba(240, 228, 66, 0.28), rgba(253, 244, 120, 0.28));
    border: 2px solid #e2d400;
}

.theme-okabeito .square-cell.touching {
    background: linear-gradient(135deg, rgba(86, 180, 233, 0.22), rgba(0, 114, 178, 0.22));
    border: 1px solid rgba(86, 180, 233, 0.65);
}

.theme-okabeito .square-cell.reverse {
    background: linear-gradient(135deg, rgba(204, 121, 167, 0.22), rgba(170, 79, 160, 0.22));
    border: 1px solid rgba(204, 121, 167, 0.65);
}

/* Theme Miami Night */
.theme-miami .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(0, 220, 130, 0.22);
    border-color: rgba(0, 220, 130, 0.60);
}

.theme-miami .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(255, 140, 0, 0.22);
    border-color: rgba(255, 140, 0, 0.60);
}

.theme-miami .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.30), rgba(255, 239, 150, 0.30));
    border: 2px solid #ffd166;
}

.theme-miami .square-cell.touching {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(26, 159, 255, 0.22));
    border: 1px solid rgba(0, 229, 255, 0.70);
}

.theme-miami .square-cell.reverse {
    background: linear-gradient(135deg, rgba(255, 60, 172, 0.22), rgba(120, 75, 160, 0.22));
    border: 1px solid rgba(255, 60, 172, 0.70);
}

/* Theme Subtle Pro */
.theme-subtle .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(46, 204, 113, 0.18);
    border-color: rgba(46, 204, 113, 0.45);
}

.theme-subtle .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.45);
}

.theme-subtle .square-cell.winner {
    background: linear-gradient(135deg, rgba(246, 226, 122, 0.26), rgba(249, 242, 149, 0.26));
    border: 2px solid #e8d44d;
}

.theme-subtle .square-cell.touching {
    background: linear-gradient(135deg, rgba(141, 169, 255, 0.18), rgba(111, 166, 255, 0.18));
    border: 1px solid rgba(111, 166, 255, 0.5);
}

.theme-subtle .square-cell.reverse {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.18), rgba(167, 139, 250, 0.18));
    border: 1px solid rgba(167, 139, 250, 0.5);
}

/* Theme Gridiron */
.theme-gridiron .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.60);
}

.theme-gridiron .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.60);
}

.theme-gridiron .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 215, 64, 0.30), rgba(255, 236, 128, 0.30));
    border: 2px solid #ffd140;
}

.theme-gridiron .square-cell.touching {
    background: linear-gradient(135deg, rgba(31, 111, 235, 0.22), rgba(56, 139, 255, 0.22));
    border: 1px solid rgba(56, 139, 255, 0.65);
}

.theme-gridiron .square-cell.reverse {
    background: linear-gradient(135deg, rgba(255, 90, 95, 0.22), rgba(255, 45, 45, 0.22));
    border: 1px solid rgba(255, 90, 95, 0.65);
}

/* Theme Wireframe Minimal */
.theme-wireframe .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.85);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.25) inset;
}

.theme-wireframe .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(0, 0, 0, 0.08);
    border: 1px dashed rgba(255, 160, 37, 0.9);
    box-shadow: 0 0 8px rgba(255, 160, 37, 0.25) inset;
}

.theme-wireframe .square-cell.winner {
    background: transparent;
    border: 2px solid #ffd54a;
    box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.25), 0 0 18px rgba(255, 213, 74, 0.45);
}

.theme-wireframe .square-cell.touching {
    background: rgba(0, 0, 0, 0.05);
    border: 1px dotted rgba(80, 180, 255, 0.95);
    box-shadow: 0 0 6px rgba(80, 180, 255, 0.25) inset;
}

.theme-wireframe .square-cell.reverse {
    background: rgba(0, 0, 0, 0.05);
    border: 1px double rgba(167, 139, 250, 0.95);
    box-shadow: 0 0 6px rgba(167, 139, 250, 0.25) inset;
}

/* Theme Scanline Neon */
.theme-scanline .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(0, 214, 143, 0.18);
    border: 1px solid rgba(0, 214, 143, 0.6);
}

.theme-scanline .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(255, 94, 0, 0.18);
    border: 1px solid rgba(255, 94, 0, 0.6);
}

.theme-scanline .square-cell.winner {
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 230, 120, 0.35) 0, rgba(255, 230, 120, 0.35) 2px, transparent 2px, transparent 6px),
        linear-gradient(135deg, rgba(255, 230, 120, 0.15), rgba(255, 199, 0, 0.15));
    border: 2px solid #ffe778;
    box-shadow: 0 0 16px rgba(255, 231, 120, 0.4);
}

.theme-scanline .square-cell.touching {
    background: linear-gradient(135deg, rgba(0, 221, 255, 0.2), rgba(0, 140, 255, 0.2));
    border: 1px solid rgba(0, 180, 255, 0.7);
}

.theme-scanline .square-cell.reverse {
    background: linear-gradient(135deg, rgba(255, 35, 150, 0.2), rgba(160, 70, 255, 0.2));
    border: 1px solid rgba(210, 80, 230, 0.7);
}

/* Theme Patterned */
.theme-patterned .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background:
        repeating-linear-gradient(45deg, rgba(40, 200, 120, 0.16) 0 8px, rgba(40, 200, 120, 0.06) 8px 16px);
    border: 1px solid rgba(40, 200, 120, 0.55);
}

.theme-patterned .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background:
        repeating-linear-gradient(-45deg, rgba(255, 170, 0, 0.18) 0 8px, rgba(255, 170, 0, 0.06) 8px 16px);
    border: 1px solid rgba(255, 170, 0, 0.6);
}

.theme-patterned .square-cell.winner {
    background:
        radial-gradient(circle at 10% 15%, rgba(255, 235, 140, 0.4) 0 12%, transparent 12% 100%),
        linear-gradient(135deg, rgba(255, 225, 100, 0.25), rgba(255, 210, 70, 0.25));
    border: 2px solid #ffdf5c;
    box-shadow: 0 0 18px rgba(255, 223, 92, 0.45);
}

.theme-patterned .square-cell.touching {
    background:
        repeating-linear-gradient(90deg, rgba(90, 170, 255, 0.18) 0 6px, rgba(90, 170, 255, 0.05) 6px 12px);
    border: 1px solid rgba(90, 170, 255, 0.6);
}

.theme-patterned .square-cell.reverse {
    background:
        radial-gradient(circle at 25% 25%, rgba(180, 140, 255, 0.2) 0 6px, transparent 6px 100%),
        radial-gradient(circle at 75% 75%, rgba(180, 140, 255, 0.2) 0 6px, transparent 6px 100%),
        rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(180, 140, 255, 0.65);
}

/* Theme Team Fusion */
.theme-fusion .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(37, 99, 235, 0.22);
    border: 1px solid rgba(37, 99, 235, 0.60);
}

.theme-fusion .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(225, 29, 72, 0.18);
    border: 1px solid rgba(225, 29, 72, 0.60);
}

.theme-fusion .square-cell.winner {
    background: conic-gradient(from 45deg, rgba(255, 220, 90, 0.3), rgba(255, 235, 130, 0.3));
    border: 2px solid #ffdc5a;
    box-shadow: 0 0 16px rgba(255, 220, 90, 0.45);
}

.theme-fusion .square-cell.touching {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(0, 194, 255, 0.18));
    border: 1px solid rgba(37, 99, 235, 0.60);
}

.theme-fusion .square-cell.reverse {
    background: conic-gradient(from 0turn,
        rgba(225, 29, 72, 0.28) 0 50%,
        rgba(37, 99, 235, 0.28) 50% 100%);
    border: 1px solid rgba(131, 64, 153, 0.65);
}

/* Theme Ember & Ice */
.theme-ember .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(0, 204, 255, 0.16);
    border: 1px solid rgba(0, 204, 255, 0.65);
    box-shadow: inset 0 0 10px rgba(0, 204, 255, 0.20);
}

.theme-ember .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(255, 80, 50, 0.18);
    border: 1px solid rgba(255, 80, 50, 0.65);
    box-shadow: inset 0 0 10px rgba(255, 80, 50, 0.20);
}

.theme-ember .square-cell.winner {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 240, 180, 0.45) 0 55%, rgba(0,0,0,0) 55%),
        linear-gradient(135deg, rgba(255, 222, 89, 0.3), rgba(255, 199, 0, 0.25));
    border: 2px solid #ffde59;
    box-shadow: 0 0 22px rgba(255, 222, 89, 0.5);
}

.theme-ember .square-cell.touching {
    background: linear-gradient(135deg, rgba(120, 200, 255, 0.22), rgba(60, 150, 255, 0.22));
    border: 1px solid rgba(120, 200, 255, 0.7);
}

.theme-ember .square-cell.reverse {
    background: linear-gradient(135deg, rgba(255, 120, 60, 0.22), rgba(255, 160, 70, 0.22));
    border: 1px solid rgba(255, 140, 60, 0.7);
}

/* Theme Teal/Amber */
.theme-teal .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(20, 184, 166, 0.20);
    border-color: rgba(20, 184, 166, 0.55);
}

.theme-teal .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(245, 158, 11, 0.20);
    border-color: rgba(245, 158, 11, 0.55);
}

.theme-teal .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.30), rgba(255, 237, 78, 0.30));
    border: 2px solid var(--warning);
}

.theme-teal .square-cell.touching {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(99, 102, 241, 0.22));
    border: 1px solid rgba(56, 189, 248, 0.60);
}

.theme-teal .square-cell.reverse {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.22), rgba(167, 139, 250, 0.22));
    border: 1px solid rgba(244, 114, 182, 0.60);
}

/* Theme Lime/Red */
.theme-lime .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(132, 204, 22, 0.20);
    border-color: rgba(132, 204, 22, 0.55);
}

.theme-lime .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.55);
}

.theme-lime .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.30), rgba(255, 237, 78, 0.30));
    border: 2px solid var(--warning);
}

.theme-lime .square-cell.touching {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(59, 130, 246, 0.22));
    border: 1px solid rgba(99, 102, 241, 0.60);
}

.theme-lime .square-cell.reverse {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.22), rgba(16, 185, 129, 0.22));
    border: 1px solid rgba(45, 212, 191, 0.60);
}

/* Theme Aqua/Coral */
.theme-aqua .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(6, 182, 212, 0.20);
    border-color: rgba(6, 182, 212, 0.55);
}

.theme-aqua .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(251, 113, 133, 0.20);
    border-color: rgba(251, 113, 133, 0.55);
}

.theme-aqua .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.30), rgba(255, 237, 78, 0.30));
    border: 2px solid var(--warning);
}

.theme-aqua .square-cell.touching {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(167, 139, 250, 0.22));
    border: 1px solid rgba(139, 92, 246, 0.60);
}

.theme-aqua .square-cell.reverse {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.22), rgba(245, 158, 11, 0.22));
    border: 1px solid rgba(251, 146, 60, 0.60);
}

/* Theme Jade/Saffron */
.theme-jade .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(16, 185, 129, 0.20);
    border-color: rgba(16, 185, 129, 0.55);
}

.theme-jade .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(251, 191, 36, 0.20);
    border-color: rgba(251, 191, 36, 0.55);
}

.theme-jade .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.30), rgba(255, 237, 78, 0.30));
    border: 2px solid var(--warning);
}

.theme-jade .square-cell.touching {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(59, 130, 246, 0.22));
    border: 1px solid rgba(96, 165, 250, 0.60);
}

.theme-jade .square-cell.reverse {
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.22), rgba(168, 85, 247, 0.22));
    border: 1px solid rgba(217, 70, 239, 0.60);
}

/* Theme Spruce/Flame */
.theme-spruce .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(34, 197, 94, 0.20);
    border-color: rgba(34, 197, 94, 0.55);
}

.theme-spruce .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(249, 115, 22, 0.20);
    border-color: rgba(249, 115, 22, 0.55);
}

.theme-spruce .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.30), rgba(255, 237, 78, 0.30));
    border: 2px solid var(--warning);
}

.theme-spruce .square-cell.touching {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(34, 211, 238, 0.22));
    border: 1px solid rgba(14, 165, 233, 0.60);
}

.theme-spruce .square-cell.reverse {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(124, 58, 237, 0.22));
    border: 1px solid rgba(168, 85, 247, 0.60);
}

/* Theme Cyber - Futuristic neon blue/pink */
.theme-cyber .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.5);
}

.theme-cyber .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(255, 0, 255, 0.15);
    border-color: rgba(255, 0, 255, 0.5);
}

.theme-cyber .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.3), rgba(0, 255, 255, 0.3));
    border: 2px solid #00ffff;
}

.theme-cyber .square-cell.touching {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2));
    border: 1px solid rgba(255, 0, 255, 0.6);
}

.theme-cyber .square-cell.reverse {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 255, 0.2));
    border: 1px solid rgba(0, 255, 0, 0.6);
}

/* Theme Autumn - Warm fall colors */
.theme-autumn .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(210, 105, 30, 0.2);
    border-color: rgba(210, 105, 30, 0.5);
}

.theme-autumn .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(178, 34, 34, 0.2);
    border-color: rgba(178, 34, 34, 0.5);
}

.theme-autumn .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.3), rgba(255, 215, 0, 0.3));
    border: 2px solid #ff8c00;
}

.theme-autumn .square-cell.touching {
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.2), rgba(210, 105, 30, 0.2));
    border: 1px solid rgba(184, 134, 11, 0.6);
}

.theme-autumn .square-cell.reverse {
    background: linear-gradient(135deg, rgba(160, 82, 45, 0.2), rgba(139, 69, 19, 0.2));
    border: 1px solid rgba(160, 82, 45, 0.6);
}

/* Theme Cosmic - Deep space purple/blue */
.theme-cosmic .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(75, 0, 130, 0.2);
    border-color: rgba(75, 0, 130, 0.5);
}

.theme-cosmic .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(138, 43, 226, 0.2);
    border-color: rgba(138, 43, 226, 0.5);
}

.theme-cosmic .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(147, 112, 219, 0.3));
    border: 2px solid #ffffff;
}

.theme-cosmic .square-cell.touching {
    background: linear-gradient(135deg, rgba(72, 61, 139, 0.2), rgba(123, 104, 238, 0.2));
    border: 1px solid rgba(123, 104, 238, 0.6);
}

.theme-cosmic .square-cell.reverse {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.2), rgba(65, 105, 225, 0.2));
    border: 1px solid rgba(30, 144, 255, 0.6);
}

/* Theme Mint Fresh - Cool mint green */
.theme-mint .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(152, 251, 152, 0.2);
    border-color: rgba(152, 251, 152, 0.5);
}

.theme-mint .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(64, 224, 208, 0.2);
    border-color: rgba(64, 224, 208, 0.5);
}

.theme-mint .square-cell.winner {
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.3), rgba(127, 255, 212, 0.3));
    border: 2px solid #00ff7f;
}

.theme-mint .square-cell.touching {
    background: linear-gradient(135deg, rgba(0, 250, 154, 0.2), rgba(50, 205, 50, 0.2));
    border: 1px solid rgba(0, 250, 154, 0.6);
}

.theme-mint .square-cell.reverse {
    background: linear-gradient(135deg, rgba(72, 209, 204, 0.2), rgba(175, 238, 238, 0.2));
    border: 1px solid rgba(72, 209, 204, 0.6);
}

/* Theme Dusk - Sunset orange/purple */
.theme-dusk .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(255, 94, 77, 0.2);
    border-color: rgba(255, 94, 77, 0.5);
}

.theme-dusk .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(255, 154, 0, 0.2);
    border-color: rgba(255, 154, 0, 0.5);
}

.theme-dusk .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 206, 84, 0.3), rgba(237, 117, 57, 0.3));
    border: 2px solid #ffce54;
}

.theme-dusk .square-cell.touching {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(142, 68, 173, 0.2));
    border: 1px solid rgba(155, 89, 182, 0.6);
}

.theme-dusk .square-cell.reverse {
    background: linear-gradient(135deg, rgba(52, 73, 94, 0.2), rgba(44, 62, 80, 0.2));
    border: 1px solid rgba(52, 73, 94, 0.6);
}

/* Theme Twilight - Deep purple/pink gradient */
.theme-twilight .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(88, 86, 214, 0.2);
    border-color: rgba(88, 86, 214, 0.5);
}

.theme-twilight .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(255, 79, 120, 0.2);
    border-color: rgba(255, 79, 120, 0.5);
}

.theme-twilight .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 119, 168, 0.3), rgba(88, 86, 214, 0.3));
    border: 2px solid #ff77a8;
}

.theme-twilight .square-cell.touching {
    background: linear-gradient(135deg, rgba(130, 87, 230, 0.2), rgba(217, 112, 255, 0.2));
    border: 1px solid rgba(130, 87, 230, 0.6);
}

.theme-twilight .square-cell.reverse {
    background: linear-gradient(135deg, rgba(252, 92, 125, 0.2), rgba(106, 130, 251, 0.2));
    border: 1px solid rgba(252, 92, 125, 0.6);
}

/* Theme Desert - Sandy warm tones */
.theme-desert .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(237, 201, 175, 0.25);
    border-color: rgba(237, 201, 175, 0.6);
}

.theme-desert .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(235, 149, 50, 0.2);
    border-color: rgba(235, 149, 50, 0.5);
}

.theme-desert .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 195, 0, 0.3), rgba(255, 235, 59, 0.3));
    border: 2px solid #ffc300;
}

.theme-desert .square-cell.touching {
    background: linear-gradient(135deg, rgba(194, 142, 62, 0.2), rgba(160, 113, 49, 0.2));
    border: 1px solid rgba(194, 142, 62, 0.6);
}

.theme-desert .square-cell.reverse {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.2), rgba(80, 49, 120, 0.2));
    border: 1px solid rgba(189, 147, 249, 0.6);
}

/* Theme Blossom - Soft pink/white cherry blossom */
.theme-blossom .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(255, 182, 193, 0.2);
    border-color: rgba(255, 182, 193, 0.5);
}

.theme-blossom .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(255, 105, 180, 0.2);
    border-color: rgba(255, 105, 180, 0.5);
}

.theme-blossom .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 192, 203, 0.35), rgba(255, 255, 255, 0.25));
    border: 2px solid #ffb6c1;
}

.theme-blossom .square-cell.touching {
    background: linear-gradient(135deg, rgba(255, 228, 225, 0.25), rgba(255, 182, 193, 0.25));
    border: 1px solid rgba(255, 182, 193, 0.6);
}

.theme-blossom .square-cell.reverse {
    background: linear-gradient(135deg, rgba(255, 218, 185, 0.2), rgba(255, 245, 238, 0.2));
    border: 1px solid rgba(255, 218, 185, 0.6);
}

/* Theme Electric Purple - Vibrant purple/electric blue for dark mode */
.theme-electric .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(147, 51, 234, 0.2);
    border-color: rgba(147, 51, 234, 0.5);
}

.theme-electric .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(236, 72, 153, 0.2);
    border-color: rgba(236, 72, 153, 0.5);
}

.theme-electric .square-cell.winner {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(59, 130, 246, 0.35));
    border: 2px solid #a855f7;
}

.theme-electric .square-cell.touching {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.25));
    border: 1px solid rgba(99, 102, 241, 0.6);
}

.theme-electric .square-cell.reverse {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(217, 70, 239, 0.2));
    border: 1px solid rgba(236, 72, 153, 0.6);
}

/* Theme Neon Green - Radioactive green glow */
.theme-neongreen .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

.theme-neongreen .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(132, 204, 22, 0.2);
    border-color: rgba(132, 204, 22, 0.5);
}

.theme-neongreen .square-cell.winner {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.35), rgba(34, 197, 94, 0.35));
    border: 2px solid #4ade80;
}

.theme-neongreen .square-cell.touching {
    background: linear-gradient(135deg, rgba(163, 230, 53, 0.25), rgba(132, 204, 22, 0.25));
    border: 1px solid rgba(163, 230, 53, 0.6);
}

.theme-neongreen .square-cell.reverse {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(5, 150, 105, 0.2));
    border: 1px solid rgba(20, 184, 166, 0.6);
}

/* Theme Magma - Deep red/orange lava */
.theme-magma .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

.theme-magma .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(251, 146, 60, 0.2);
    border-color: rgba(251, 146, 60, 0.5);
}

.theme-magma .square-cell.winner {
    background: linear-gradient(135deg, rgba(254, 215, 170, 0.35), rgba(251, 146, 60, 0.35));
    border: 2px solid #fb923c;
}

.theme-magma .square-cell.touching {
    background: linear-gradient(135deg, rgba(252, 165, 165, 0.25), rgba(248, 113, 113, 0.25));
    border: 1px solid rgba(248, 113, 113, 0.6);
}

.theme-magma .square-cell.reverse {
    background: linear-gradient(135deg, rgba(251, 207, 232, 0.2), rgba(244, 114, 182, 0.2));
    border: 1px solid rgba(244, 114, 182, 0.6);
}

/* Theme Ice Blue - Cool arctic blue */
.theme-iceblue .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.5);
}

.theme-iceblue .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(103, 232, 249, 0.2);
    border-color: rgba(103, 232, 249, 0.5);
}

.theme-iceblue .square-cell.winner {
    background: linear-gradient(135deg, rgba(165, 243, 252, 0.35), rgba(34, 211, 238, 0.35));
    border: 2px solid #22d3ee;
}

.theme-iceblue .square-cell.touching {
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.25), rgba(56, 189, 248, 0.25));
    border: 1px solid rgba(56, 189, 248, 0.6);
}

.theme-iceblue .square-cell.reverse {
    background: linear-gradient(135deg, rgba(186, 230, 253, 0.2), rgba(147, 197, 253, 0.2));
    border: 1px solid rgba(147, 197, 253, 0.6);
}

/* Theme Vaporwave - Pink/purple/teal retro */
.theme-vaporwave .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(192, 38, 211, 0.2);
    border-color: rgba(192, 38, 211, 0.5);
}

.theme-vaporwave .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(255, 0, 255, 0.2);
    border-color: rgba(255, 0, 255, 0.5);
}

.theme-vaporwave .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.35), rgba(0, 255, 255, 0.35));
    border: 2px solid #ff00ff;
}

.theme-vaporwave .square-cell.touching {
    background: linear-gradient(135deg, rgba(232, 121, 249, 0.25), rgba(192, 132, 252, 0.25));
    border: 1px solid rgba(232, 121, 249, 0.6);
}

.theme-vaporwave .square-cell.reverse {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(6, 182, 212, 0.2));
    border: 1px solid rgba(34, 211, 238, 0.6);
}

/* SPECIAL EFFECTS THEMES */

/* Theme Matrix - Green digital rain effect */
.theme-matrix .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(0, 255, 0, 0.1);
    border-color: rgba(0, 255, 0, 0.3);
}

.theme-matrix .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(50, 255, 50, 0.15);
    border-color: rgba(50, 255, 50, 0.4);
}

.theme-matrix .square-cell.winner {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.4), rgba(50, 255, 50, 0.3));
    border: 2px solid #00ff00;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6), inset 0 0 20px rgba(0, 255, 0, 0.2);
}

.theme-matrix .square-cell.touching {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 200, 0, 0.2));
    border: 1px solid rgba(0, 255, 0, 0.5);
}

.theme-matrix .square-cell.reverse {
    background: linear-gradient(135deg, rgba(0, 150, 0, 0.2), rgba(0, 255, 0, 0.15));
    border: 1px solid rgba(0, 200, 0, 0.5);
}

/* Theme Hologram - Holographic effect */
.theme-hologram .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(125, 211, 252, 0.15);
    border-color: rgba(125, 211, 252, 0.4);
}

.theme-hologram .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(196, 181, 253, 0.15);
    border-color: rgba(196, 181, 253, 0.4);
}

.theme-hologram .square-cell.winner {
    background: linear-gradient(45deg, 
        rgba(255, 0, 150, 0.3), 
        rgba(0, 255, 255, 0.3), 
        rgba(255, 255, 0, 0.3), 
        rgba(0, 255, 0, 0.3));
    background-size: 400% 400%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.theme-hologram .square-cell.touching {
    background: linear-gradient(90deg, 
        rgba(147, 51, 234, 0.2), 
        rgba(59, 130, 246, 0.2));
    border: 1px solid rgba(147, 51, 234, 0.6);
}

.theme-hologram .square-cell.reverse {
    background: linear-gradient(135deg, 
        rgba(236, 72, 153, 0.2), 
        rgba(167, 139, 250, 0.2));
    border: 1px solid rgba(236, 72, 153, 0.6);
}

/* Theme Plasma - Plasma energy effect */
.theme-plasma .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
}

.theme-plasma .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(236, 72, 153, 0.15);
    border-color: rgba(236, 72, 153, 0.4);
}

.theme-plasma .square-cell.winner {
    background: radial-gradient(circle at center, 
        rgba(168, 85, 247, 0.5), 
        rgba(236, 72, 153, 0.3),
        rgba(59, 130, 246, 0.3));
    border: 2px solid #a855f7;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.7), inset 0 0 20px rgba(236, 72, 153, 0.4);
}

.theme-plasma .square-cell.touching {
    background: radial-gradient(circle at center, 
        rgba(99, 102, 241, 0.3), 
        rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.6);
}

.theme-plasma .square-cell.reverse {
    background: radial-gradient(circle at center, 
        rgba(217, 70, 239, 0.3), 
        rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(217, 70, 239, 0.6);
}

/* Theme Glitch - Digital glitch effect */
.theme-glitch .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

.theme-glitch .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}

.theme-glitch .square-cell.winner {
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.4), 
        rgba(59, 130, 246, 0.4));
    border: 2px solid #ef4444;
    box-shadow: 2px 2px 0 rgba(59, 130, 246, 0.8), -2px -2px 0 rgba(239, 68, 68, 0.8);
}

.theme-glitch .square-cell.touching {
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.2), 
        rgba(59, 130, 246, 0.2));
    border: 1px solid rgba(34, 197, 94, 0.6);
}

.theme-glitch .square-cell.reverse {
    background: linear-gradient(135deg, 
        rgba(251, 146, 60, 0.2), 
        rgba(239, 68, 68, 0.2));
    border: 1px solid rgba(251, 146, 60, 0.6);
}

/* Theme Laser - Laser beam effect */
.theme-laser .square-cell.confirmed:not(.winner):not(.reverse):not(.touching) {
    background: rgba(220, 38, 127, 0.15);
    border-color: rgba(220, 38, 127, 0.4);
}

.theme-laser .square-cell.pending:not(.winner):not(.reverse):not(.touching) {
    background: rgba(254, 215, 170, 0.15);
    border-color: rgba(254, 215, 170, 0.4);
}

.theme-laser .square-cell.winner {
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 0, 128, 0.8), 
        transparent);
    background-size: 200% 100%;
    border: 2px solid #ff0080;
    box-shadow: 0 0 30px rgba(255, 0, 128, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.3);
}

.theme-laser .square-cell.touching {
    background: linear-gradient(45deg, 
        rgba(255, 0, 128, 0.2), 
        transparent, 
        rgba(255, 0, 128, 0.2));
    border: 1px solid rgba(255, 0, 128, 0.6);
}

.theme-laser .square-cell.reverse {
    background: linear-gradient(135deg, 
        rgba(255, 206, 84, 0.2), 
        rgba(254, 215, 170, 0.2));
    border: 1px solid rgba(255, 206, 84, 0.6);
}

/* Special Animations */
@keyframes matrixPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 65, 0.5); text-shadow: 0 0 10px rgba(0, 255, 65, 0.8); }
    50% { box-shadow: 0 0 40px rgba(0, 255, 65, 0.8), inset 0 0 20px rgba(0, 255, 65, 0.3); text-shadow: 0 0 20px rgba(0, 255, 65, 1); }
}

@keyframes matrixGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 65, 0.3); }
    50% { box-shadow: 0 0 25px rgba(0, 255, 65, 0.6), inset 0 0 10px rgba(0, 255, 65, 0.2); }
}

@keyframes matrixScan {
    0% {
        box-shadow: 0 0 15px rgba(0, 255, 65, 0.5), inset 0 -100% 50px -20px rgba(0, 255, 65, 0.3);
        border-color: rgba(0, 255, 65, 0.6);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 255, 65, 0.8), inset 0 0 50px -20px rgba(0, 255, 65, 0.5);
        border-color: rgba(0, 255, 65, 1);
    }
    100% {
        box-shadow: 0 0 15px rgba(0, 255, 65, 0.5), inset 0 100% 50px -20px rgba(0, 255, 65, 0.3);
        border-color: rgba(0, 255, 65, 0.6);
    }
}

@keyframes hologramShift {
    0%, 100% { transform: perspective(500px) rotateY(0deg); filter: hue-rotate(0deg); }
    25% { transform: perspective(500px) rotateY(5deg); }
    50% { filter: hue-rotate(30deg); }
    75% { transform: perspective(500px) rotateY(-5deg); }
}

@keyframes hologramWave {
    0%, 100% { transform: scaleX(1); filter: brightness(1); }
    50% { transform: scaleX(1.02); filter: brightness(1.1); }
}

@keyframes hologramPulse {
    0%, 100% { opacity: 0.8; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.3) saturate(1.2); }
}

@keyframes plasmaCore {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 255, 0.6), inset 0 0 20px rgba(138, 43, 226, 0.4); }
    33% { box-shadow: 0 0 40px rgba(138, 43, 226, 0.8), inset 0 0 30px rgba(255, 0, 255, 0.5); }
    66% { box-shadow: 0 0 35px rgba(186, 85, 211, 0.7), inset 0 0 25px rgba(147, 112, 219, 0.4); }
}

@keyframes plasmaRipple {
    0%, 100% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(138, 43, 226, 0); }
}

@keyframes plasmaWave {
    0%, 100% { transform: scale(1); filter: hue-rotate(0deg); }
    50% { transform: scale(1.02); filter: hue-rotate(20deg); }
}

@keyframes glitchEffect {
    0%, 100% { transform: translate(0); filter: none; }
    10% { transform: translate(-2px, 2px); filter: hue-rotate(90deg); }
    20% { transform: translate(2px, -2px); }
    30% { transform: translate(-1px, -1px); filter: hue-rotate(180deg); }
    40% { transform: translate(1px, 1px); }
    50% { transform: translate(-2px, 0); filter: hue-rotate(270deg); }
    60% { transform: translate(0, 2px); }
    70% { transform: translate(2px, 0); filter: none; }
}

@keyframes glitchShift {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes glitchFlicker {
    0%, 100% { opacity: 1; }
    10%, 30%, 50%, 70%, 90% { opacity: 0.9; transform: translateX(1px); }
    20%, 40%, 60%, 80% { opacity: 1; transform: translateX(-1px); }
}

@keyframes laserBeam {
    0%, 100% { box-shadow: -5px 0 20px rgba(255, 0, 0, 0.6), 5px 0 20px rgba(0, 100, 255, 0.6); }
    50% { box-shadow: 5px 0 30px rgba(255, 0, 0, 0.8), -5px 0 30px rgba(0, 100, 255, 0.8); }
}

@keyframes laserPulse {
    0%, 100% { border-color: rgba(0, 200, 255, 0.5); }
    50% { border-color: rgba(255, 0, 100, 0.7); box-shadow: 0 0 20px rgba(255, 0, 100, 0.3); }
}

/* Animations */
@keyframes winnerGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4); }
}

@keyframes wirePulse {
    0%, 100% { border-color: rgba(255, 215, 0, 0.8); box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
    50% { border-color: rgba(255, 215, 0, 1); box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), inset 0 0 10px rgba(255, 215, 0, 0.2); }
}

@keyframes scan {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 60px, 0 0; }
}

/* Additional Animation Effects for Theme Builder */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.5; }
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

@keyframes jackInTheBox {
    0% { transform: scale(0.1) rotate(30deg); opacity: 0; }
    50% { transform: rotate(-10deg); }
    70% { transform: rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rubberBand {
    0%, 100% { transform: scaleX(1) scaleY(1); }
    30% { transform: scaleX(1.25) scaleY(0.75); }
    40% { transform: scaleX(0.75) scaleY(1.25); }
    50% { transform: scaleX(1.15) scaleY(0.85); }
    65% { transform: scaleX(0.95) scaleY(1.05); }
    75% { transform: scaleX(1.05) scaleY(0.95); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes tada {
    0%, 100% { transform: scale(1) rotate(0deg); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

@keyframes wobble {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    15% { transform: translateX(-10px) rotate(-5deg); }
    30% { transform: translateX(8px) rotate(3deg); }
    45% { transform: translateX(-6px) rotate(-3deg); }
    60% { transform: translateX(4px) rotate(2deg); }
    75% { transform: translateX(-2px) rotate(-1deg); }
}

/* NEW EFFECTS - Added December 2025 */

/* Color Shift - More dramatic hue rotation for visibility */
@keyframes colorShift {
    0%, 100% { filter: hue-rotate(0deg) saturate(1.2); }
    33% { filter: hue-rotate(60deg) saturate(1.3); }
    66% { filter: hue-rotate(-60deg) saturate(1.3); }
}

@keyframes brightnessWave {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

@keyframes contrastPop {
    0%, 100% { filter: contrast(1) brightness(1); }
    50% { filter: contrast(1.3) brightness(1.2); }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes jitter {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1px, 1px); }
    20% { transform: translate(1px, -1px); }
    30% { transform: translate(-1px, -1px); }
    40% { transform: translate(1px, 1px); }
    50% { transform: translate(-1px, 0); }
    60% { transform: translate(1px, 0); }
    70% { transform: translate(0, -1px); }
    80% { transform: translate(0, 1px); }
    90% { transform: translate(-1px, 1px); }
}

@keyframes morphBorder {
    0%, 100% { border-radius: 6px; }
    25% { border-radius: 6px 20px 6px 20px; }
    50% { border-radius: 20px; }
    75% { border-radius: 20px 6px 20px 6px; }
}

@keyframes zoomPulse {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.08); }
    50% { transform: scale(1); }
    75% { transform: scale(0.95); }
}

/* Fallback keyframes using gold (for preview/gallery) */
@keyframes borderRotate {
    0% { border-color: #ffd700 #ffd700 transparent transparent; }
    25% { border-color: transparent #ffd700 #ffd700 transparent; }
    50% { border-color: transparent transparent #ffd700 #ffd700; }
    75% { border-color: #ffd700 transparent transparent #ffd700; }
    100% { border-color: #ffd700 #ffd700 transparent transparent; }
}

@keyframes dashedSpin {
    0%, 100% { border-style: dashed; border-color: rgba(255, 215, 0, 1) transparent transparent transparent; }
    25% { border-style: dashed; border-color: transparent rgba(255, 215, 0, 1) transparent transparent; }
    50% { border-style: dashed; border-color: transparent transparent rgba(255, 215, 0, 1) transparent; }
    75% { border-style: dashed; border-color: transparent transparent transparent rgba(255, 215, 0, 1); }
}

@keyframes cellDivide {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 10px 0 15px rgba(255, 215, 0, 0.3), -10px 0 15px rgba(255, 215, 0, 0.3); }
}

@keyframes radar {
    0% { box-shadow: inset 0 0 0 0 rgba(255, 215, 0, 0.5); }
    100% { box-shadow: inset 0 0 0 50px rgba(255, 215, 0, 0); }
}

@keyframes rippleOut {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.5), 0 0 0 0 rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0), 0 0 0 20px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.5), 0 0 0 0 rgba(255, 215, 0, 0.3); }
}

@keyframes spotlight {
    0%, 100% { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent 50%), rgba(255, 215, 0, 0.3); }
    50% { background: radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.3), transparent 50%), rgba(255, 215, 0, 0.3); }
}

@keyframes twinkle {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    25% { opacity: 0.7; box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
    50% { opacity: 1; box-shadow: 0 0 20px rgba(255, 215, 0, 0.7); }
    75% { opacity: 0.8; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
}

/* Animation border-color handling is done via JavaScript on index.php */

/* ============================================================================
   SLIDEACROSS ANIMATION OVERRIDE - MUST BE AT END OF FILE
   ============================================================================
   CRITICAL FIX: For slideAcross animation to work, we MUST NOT use `background:` shorthand.
   The shorthand implicitly sets background-position: 0% 0%, which LOCKS the position and
   prevents the @keyframes slideAcross from animating background-position.

   These rules MUST come AFTER all theme-specific rules to override their `background:` shorthand.
   We use individual background-* properties instead:
   - background-image: sets the gradient
   - background-size: sets 200% width for slide effect
   - background-color: transparent (don't interfere)
   - DO NOT set background-position (let the animation control it)
*/
.square-cell.touching,
[class].square-cell.touching,
body [class].square-cell.touching,
body:not([class*="theme-"]) .square-cell.touching,
body.theme-dark .square-cell.touching,
body.theme-light .square-cell.touching,
.theme-classic .square-cell.touching,
.theme-aurora .square-cell.touching,
.theme-okabeito .square-cell.touching,
.theme-miami .square-cell.touching,
.theme-subtle .square-cell.touching,
.theme-gridiron .square-cell.touching,
.theme-wireframe .square-cell.touching,
.theme-scanline .square-cell.touching,
.theme-patterned .square-cell.touching,
.theme-fusion .square-cell.touching,
.theme-ember .square-cell.touching,
.theme-teal .square-cell.touching,
.theme-lime .square-cell.touching,
.theme-aqua .square-cell.touching,
.theme-jade .square-cell.touching,
.theme-spruce .square-cell.touching,
.theme-cyber .square-cell.touching,
.theme-autumn .square-cell.touching,
.theme-cosmic .square-cell.touching,
.theme-mint .square-cell.touching,
.theme-dusk .square-cell.touching,
.theme-twilight .square-cell.touching,
.theme-desert .square-cell.touching,
.theme-blossom .square-cell.touching,
.theme-electric .square-cell.touching,
.theme-neongreen .square-cell.touching,
.theme-magma .square-cell.touching,
.theme-iceblue .square-cell.touching,
.theme-vaporwave .square-cell.touching,
.theme-matrix .square-cell.touching,
.theme-hologram .square-cell.touching,
.theme-plasma .square-cell.touching,
.theme-glitch .square-cell.touching,
.theme-laser .square-cell.touching {
    background-image: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent) !important;
    background-size: 200% 100% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    background-position: -100% 0;
    animation: slideAcross 2.8s ease-in-out infinite !important;
}

/* ============================================================================
   BORDER EFFECT OVERRIDES - Verbose selectors to ensure border animations work
   These override theme-specific border styles that would otherwise block animations
   ============================================================================ */