/* Animation Effects for Winners */
@keyframes ringExpand {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    100% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
}

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

@keyframes borderDance {
    0% { border-color: rgba(102, 126, 234, 0.5); }
    50% { border-color: rgba(118, 75, 162, 0.8); }
    100% { border-color: rgba(102, 126, 234, 0.5); }
}

/* Apply animations to ALL themes */
.theme-classic .square-cell.winner,
.theme-aurora .square-cell.winner,
.theme-subtle .square-cell.winner,
.theme-gridiron .square-cell.winner,
.theme-lime .square-cell.winner,
.theme-aqua .square-cell.winner,
.theme-cyber .square-cell.winner,
.theme-twilight .square-cell.winner,
.theme-hologram .square-cell.winner,
.theme-plasma .square-cell.winner {
    animation: ringExpand 2s ease-out infinite !important;
}

.theme-classic .square-cell.reverse,
.theme-aurora .square-cell.reverse,
.theme-subtle .square-cell.reverse,
.theme-gridiron .square-cell.reverse,
.theme-lime .square-cell.reverse,
.theme-aqua .square-cell.reverse,
.theme-cyber .square-cell.reverse,
.theme-twilight .square-cell.reverse,
.theme-hologram .square-cell.reverse,
.theme-plasma .square-cell.reverse {
    background-size: 200% 100% !important;
    animation: slideAcross 2s linear infinite !important;
}

.theme-classic .square-cell.touching,
.theme-aurora .square-cell.touching,
.theme-subtle .square-cell.touching,
.theme-gridiron .square-cell.touching,
.theme-lime .square-cell.touching,
.theme-aqua .square-cell.touching,
.theme-cyber .square-cell.touching,
.theme-twilight .square-cell.touching,
.theme-hologram .square-cell.touching,
.theme-plasma .square-cell.touching {
    animation: borderDance 2s linear infinite !important;
}
/* Default Dark Theme (No theme selected) */
body:not([class*="theme-"]) .square-cell.confirmed {
    background: rgba(50, 50, 60, 0.8);
    border-color: rgba(80, 80, 90, 0.6);
}

body:not([class*="theme-"]) .square-cell.pending {
    background: rgba(70, 50, 50, 0.8);
    border-color: rgba(100, 60, 60, 0.6);
}

body:not([class*="theme-"]) .square-cell.winner {
    background: linear-gradient(135deg, rgba(100, 80, 40, 0.5), rgba(120, 100, 50, 0.5));
    border: 2px solid rgba(180, 150, 60, 0.8);
    animation: ringExpand 2s ease-out infinite;
}

body:not([class*="theme-"]) .square-cell.touching {
    background: linear-gradient(135deg, rgba(60, 60, 80, 0.5), rgba(70, 60, 90, 0.5));
    border: 1px solid rgba(90, 90, 120, 0.6);
    animation: borderDance 2s linear infinite;
}

body:not([class*="theme-"]) .square-cell.reverse {
    background: linear-gradient(90deg,
        transparent,
        rgba(50, 70, 60, 0.5),
        transparent);
    background-size: 200% 100%;
    border: 1px solid rgba(70, 90, 80, 0.6);
    animation: slideAcross 2s linear infinite;
}

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

.theme-classic .square-cell.pending {
    background: rgba(245, 87, 108, 0.2);
    border-color: rgba(245, 87, 108, 0.4);
}

.theme-classic .square-cell.winner {
    background: 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: 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: 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 {
    background: rgba(0, 200, 160, 0.22);
    border-color: rgba(0, 200, 160, 0.55);
}

.theme-aurora .square-cell.pending {
    background: rgba(255, 105, 85, 0.20);
    border-color: rgba(255, 105, 85, 0.55);
}

.theme-aurora .square-cell.winner {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.28), rgba(255, 239, 138, 0.28));
    border: 2px solid #ffd54a;
    animation: winnerGlow 2s ease-in-out infinite;
}

.theme-aurora .square-cell.touching {
    background: 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: 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 {
    background: rgba(0, 158, 115, 0.22);
    border-color: rgba(0, 158, 115, 0.60);
}

.theme-okabeito .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(0, 220, 130, 0.22);
    border-color: rgba(0, 220, 130, 0.60);
}

.theme-miami .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(46, 204, 113, 0.18);
    border-color: rgba(46, 204, 113, 0.45);
}

.theme-subtle .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.60);
}

.theme-gridiron .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    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 {
    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);
    animation: wirePulse 2.2s ease-in-out infinite;
}

.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 {
    background: rgba(0, 214, 143, 0.18);
    border: 1px solid rgba(0, 214, 143, 0.6);
}

.theme-scanline .square-cell.pending {
    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;
    animation: scan 3s linear infinite;
    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 {
    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 {
    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 {
    background: rgba(37, 99, 235, 0.22);
    border: 1px solid rgba(37, 99, 235, 0.60);
}

.theme-fusion .square-cell.pending {
    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 {
    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 {
    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 {
    background: rgba(20, 184, 166, 0.20);
    border-color: rgba(20, 184, 166, 0.55);
}

.theme-teal .square-cell.pending {
    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 {
    background: rgba(132, 204, 22, 0.20);
    border-color: rgba(132, 204, 22, 0.55);
}

.theme-lime .square-cell.pending {
    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 {
    background: rgba(6, 182, 212, 0.20);
    border-color: rgba(6, 182, 212, 0.55);
}

.theme-aqua .square-cell.pending {
    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 {
    background: rgba(16, 185, 129, 0.20);
    border-color: rgba(16, 185, 129, 0.55);
}

.theme-jade .square-cell.pending {
    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 {
    background: rgba(34, 197, 94, 0.20);
    border-color: rgba(34, 197, 94, 0.55);
}

.theme-spruce .square-cell.pending {
    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 {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.5);
}

.theme-cyber .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(210, 105, 30, 0.2);
    border-color: rgba(210, 105, 30, 0.5);
}

.theme-autumn .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(75, 0, 130, 0.2);
    border-color: rgba(75, 0, 130, 0.5);
}

.theme-cosmic .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(152, 251, 152, 0.2);
    border-color: rgba(152, 251, 152, 0.5);
}

.theme-mint .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(255, 94, 77, 0.2);
    border-color: rgba(255, 94, 77, 0.5);
}

.theme-dusk .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(88, 86, 214, 0.2);
    border-color: rgba(88, 86, 214, 0.5);
}

.theme-twilight .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(237, 201, 175, 0.25);
    border-color: rgba(237, 201, 175, 0.6);
}

.theme-desert .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(255, 182, 193, 0.2);
    border-color: rgba(255, 182, 193, 0.5);
}

.theme-blossom .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(147, 51, 234, 0.2);
    border-color: rgba(147, 51, 234, 0.5);
}

.theme-electric .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

.theme-neongreen .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

.theme-magma .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.5);
}

.theme-iceblue .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(192, 38, 211, 0.2);
    border-color: rgba(192, 38, 211, 0.5);
}

.theme-vaporwave .square-cell.pending {
    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;
    animation: winnerGlow 2s ease-in-out infinite;
}

.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 {
    background: rgba(0, 255, 0, 0.1);
    border-color: rgba(0, 255, 0, 0.3);
}

.theme-matrix .square-cell.pending {
    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;
    animation: matrixPulse 1.5s ease-in-out infinite;
    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);
    animation: matrixGlow 3s ease-in-out infinite;
}

.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);
    animation: matrixScan 4s linear infinite;
}

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

.theme-hologram .square-cell.pending {
    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);
    animation: hologramShift 3s ease-in-out infinite;
    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);
    animation: hologramWave 2s ease-in-out infinite;
}

.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);
    animation: hologramPulse 2.5s ease-in-out infinite;
}

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

.theme-plasma .square-cell.pending {
    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;
    animation: plasmaCore 2s ease-in-out infinite;
    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);
    animation: plasmaRipple 3s ease-in-out infinite;
}

.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);
    animation: plasmaWave 3.5s ease-in-out infinite;
}

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

.theme-glitch .square-cell.pending {
    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;
    animation: glitchEffect 0.5s infinite;
    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);
    animation: glitchShift 1s steps(3) infinite;
}

.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);
    animation: glitchFlicker 0.8s infinite;
}

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

.theme-laser .square-cell.pending {
    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;
    animation: laserBeam 1.5s linear infinite;
    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);
    animation: laserPulse 2s ease-in-out infinite;
}

.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);
    animation: laserGlow 2.5s ease-in-out infinite;
}

/* Special Animations */
@keyframes matrixPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.02); filter: brightness(1.3); }
}

@keyframes matrixGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

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

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

@keyframes hologramWave {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

@keyframes hologramPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes plasmaCore {
    0%, 100% { transform: scale(1); filter: hue-rotate(0deg); }
    50% { transform: scale(1.05); filter: hue-rotate(30deg); }
}

@keyframes plasmaRipple {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.8; }
}

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

@keyframes glitchEffect {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(1px, -1px); }
    60% { transform: translate(-1px, 0); }
    80% { transform: translate(1px, 0); }
}

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

@keyframes glitchFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

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

@keyframes laserPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 5px rgba(255, 0, 128, 0.5); }
    50% { opacity: 0.8; box-shadow: 0 0 15px rgba(255, 0, 128, 0.8); }
}

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

/* Animations */
@keyframes winnerGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 213, 74, 0.5); }
    50% { box-shadow: 0 0 22px rgba(255, 213, 74, 0.85); }
}

@keyframes wirePulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,213,74,0.25), 0 0 12px rgba(255,213,74,0.35); }
    50% { box-shadow: 0 0 0 2px rgba(255,213,74,0.35), 0 0 24px rgba(255,213,74,0.75); }
}

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