/* Clean Peg Solitaire Styles */
#peg-solitaire-game {
    max-width: 600px;
    margin: 20px auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: transparent;
    overflow: hidden;
    box-sizing: border-box;
    border: none !important;
    position: relative;
}

/* Animated Background Effects */
#peg-solitaire-game::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(255,255,255,0.1) 0%, 
        rgba(255,255,255,0.05) 50%, 
        rgba(255,255,255,0.1) 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Active game background animation */
#peg-solitaire-game.game-active::before {
    opacity: 1;
    animation: backgroundShift 8s ease-in-out infinite;
}

@keyframes backgroundShift {
    0%, 100% { 
        background-position: 0% 50%;
        transform: scale(1);
    }
    50% { 
        background-position: 100% 50%;
        transform: scale(1.02);
    }
}

/* GLOBAL COLOR SCHEME APPLICATIONS */

/* Game Header & Controls */
.classic .game-header,
.classic .game-controls { color: #495057; }
.blue .game-header,
.blue .game-controls { color: #1976D2; }
.green .game-header,
.green .game-controls { color: #388E3C; }
.purple .game-header,
.purple .game-controls { color: #7B1FA2; }
.red .game-header,
.red .game-controls { color: #d32f2f; }
.teal .game-header,
.teal .game-controls { color: #00796b; }
.indigo .game-header,
.indigo .game-controls { color: #303f9f; }
.amber .game-header,
.amber .game-controls { color: #ffa000; }
.slate .game-header,
.slate .game-controls { color: #455a64; }

.game-header {
    margin-bottom: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.game-settings {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: nowrap;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 5px;
}

/* Add a subtle scrollbar for the settings row when needed */
.game-settings::-webkit-scrollbar {
    height: 4px;
}
.game-settings::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}
.game-settings::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}
.game-settings::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.game-settings select {
    padding: 6px 10px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    transition: all 0.2s;
    box-sizing: border-box;
}

/* Select Colors */
.classic .game-settings select { border-color: #6c757d; color: #495057; }
.blue .game-settings select { border-color: #2196F3; color: #1976D2; }
.green .game-settings select { border-color: #4CAF50; color: #388E3C; }
.purple .game-settings select { border-color: #9C27B0; color: #7B1FA2; }
.red .game-settings select { border-color: #f44336; color: #d32f2f; }
.teal .game-settings select { border-color: #009688; color: #00796b; }
.indigo .game-settings select { border-color: #3f51b5; color: #303f9f; }
.amber .game-settings select { border-color: #ffc107; color: #ffa000; }
.slate .game-settings select { border-color: #607d8b; color: #455a64; }

.game-settings select:focus {
    outline: none;
}

.classic .game-settings select:focus { border-color: #495057; box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.2); }
.blue .game-settings select:focus { border-color: #1976D2; box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2); }
.green .game-settings select:focus { border-color: #388E3C; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); }
.purple .game-settings select:focus { border-color: #7B1FA2; box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.2); }
.red .game-settings select:focus { border-color: #d32f2f; box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2); }
.teal .game-settings select:focus { border-color: #00796b; box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.2); }
.indigo .game-settings select:focus { border-color: #303f9f; box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2); }
.amber .game-settings select:focus { border-color: #ffa000; box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2); }
.slate .game-settings select:focus { border-color: #455a64; box-shadow: 0 0 0 2px rgba(96, 125, 139, 0.2); }

.game-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
}

#start-game, #reset-game, #help-button, #sound-toggle, #music-toggle, #undo-move, #hint-button, #hall-of-fame-button, #save-score-button {
    padding: 6px 12px;
    border: 1px solid;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    font-weight: 500;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Button Colors - Base */
.classic #start-game, .classic #reset-game, .classic #help-button, .classic #sound-toggle, .classic #music-toggle, .classic #undo-move, .classic #hint-button, .classic #hall-of-fame-button, .classic #save-score-button { 
    border-color: #6c757d; color: #495057; 
}
.blue #start-game, .blue #reset-game, .blue #help-button, .blue #sound-toggle, .blue #music-toggle, .blue #undo-move, .blue #hint-button, .blue #hall-of-fame-button, .blue #save-score-button { 
    border-color: #2196F3; color: #1976D2; 
}
.green #start-game, .green #reset-game, .green #help-button, .green #sound-toggle, .green #music-toggle, .green #undo-move, .green #hint-button, .green #hall-of-fame-button, .green #save-score-button { 
    border-color: #4CAF50; color: #388E3C; 
}
.purple #start-game, .purple #reset-game, .purple #help-button, .purple #sound-toggle, .purple #music-toggle, .purple #undo-move, .purple #hint-button, .purple #hall-of-fame-button, .purple #save-score-button { 
    border-color: #9C27B0; color: #7B1FA2; 
}
.red #start-game, .red #reset-game, .red #help-button, .red #sound-toggle, .red #music-toggle, .red #undo-move, .red #hint-button, .red #hall-of-fame-button, .red #save-score-button { 
    border-color: #f44336; color: #d32f2f; 
}
.teal #start-game, .teal #reset-game, .teal #help-button, .teal #sound-toggle, .teal #music-toggle, .teal #undo-move, .teal #hint-button, .teal #hall-of-fame-button, .teal #save-score-button { 
    border-color: #009688; color: #00796b; 
}
.indigo #start-game, .indigo #reset-game, .indigo #help-button, .indigo #sound-toggle, .indigo #music-toggle, .indigo #undo-move, .indigo #hint-button, .indigo #hall-of-fame-button, .indigo #save-score-button { 
    border-color: #3f51b5; color: #303f9f; 
}
.amber #start-game, .amber #reset-game, .amber #help-button, .amber #sound-toggle, .amber #music-toggle, .amber #undo-move, .amber #hint-button, .amber #hall-of-fame-button, .amber #save-score-button { 
    border-color: #ffc107; color: #ffa000; 
}
.slate #start-game, .slate #reset-game, .slate #help-button, .slate #sound-toggle, .slate #music-toggle, .slate #undo-move, .slate #hint-button, .slate #hall-of-fame-button, .slate #save-score-button { 
    border-color: #607d8b; color: #455a64; 
}

/* Button Hover Colors */
.classic #start-game:hover, .classic #reset-game:hover, .classic #help-button:hover, .classic #sound-toggle:hover, .classic #music-toggle:hover, .classic #undo-move:hover, .classic #hint-button:hover, .classic #hall-of-fame-button:hover, .classic #save-score-button:hover { 
    background: #6c757d; color: white; border-color: #6c757d;
}
.blue #start-game:hover, .blue #reset-game:hover, .blue #help-button:hover, .blue #sound-toggle:hover, .blue #music-toggle:hover, .blue #undo-move:hover, .blue #hint-button:hover, .blue #hall-of-fame-button:hover, .blue #save-score-button:hover { 
    background: #2196F3; color: white; border-color: #2196F3;
}
.green #start-game:hover, .green #reset-game:hover, .green #help-button:hover, .green #sound-toggle:hover, .green #music-toggle:hover, .green #undo-move:hover, .green #hint-button:hover, .green #hall-of-fame-button:hover, .green #save-score-button:hover { 
    background: #4CAF50; color: white; border-color: #4CAF50;
}
.purple #start-game:hover, .purple #reset-game:hover, .purple #help-button:hover, .purple #sound-toggle:hover, .purple #music-toggle:hover, .purple #undo-move:hover, .purple #hint-button:hover, .purple #hall-of-fame-button:hover, .purple #save-score-button:hover { 
    background: #9C27B0; color: white; border-color: #9C27B0;
}
.red #start-game:hover, .red #reset-game:hover, .red #help-button:hover, .red #sound-toggle:hover, .red #music-toggle:hover, .red #undo-move:hover, .red #hint-button:hover, .red #hall-of-fame-button:hover, .red #save-score-button:hover { 
    background: #f44336; color: white; border-color: #f44336;
}
.teal #start-game:hover, .teal #reset-game:hover, .teal #help-button:hover, .teal #sound-toggle:hover, .teal #music-toggle:hover, .teal #undo-move:hover, .teal #hint-button:hover, .teal #hall-of-fame-button:hover, .teal #save-score-button:hover { 
    background: #009688; color: white; border-color: #009688;
}
.indigo #start-game:hover, .indigo #reset-game:hover, .indigo #help-button:hover, .indigo #sound-toggle:hover, .indigo #music-toggle:hover, .indigo #undo-move:hover, .indigo #hint-button:hover, .indigo #hall-of-fame-button:hover, .indigo #save-score-button:hover { 
    background: #3f51b5; color: white; border-color: #3f51b5;
}
.amber #start-game:hover, .amber #reset-game:hover, .amber #help-button:hover, .amber #sound-toggle:hover, .amber #music-toggle:hover, .amber #undo-move:hover, .amber #hint-button:hover, .amber #hall-of-fame-button:hover, .amber #save-score-button:hover { 
    background: #ffc107; color: #212529; border-color: #ffc107;
}
.slate #start-game:hover, .slate #reset-game:hover, .slate #help-button:hover, .slate #sound-toggle:hover, .slate #music-toggle:hover, .slate #undo-move:hover, .slate #hint-button:hover, .slate #hall-of-fame-button:hover, .slate #save-score-button:hover { 
    background: #607d8b; color: white; border-color: #607d8b;
}

#start-game:hover, #reset-game:hover, #help-button:hover, #sound-toggle:hover, #music-toggle:hover, #undo-move:hover, #hint-button:hover, #hall-of-fame-button:hover, #save-score-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#sound-toggle.sounds-off,
#music-toggle.music-off {
    background: #ffebee;
    border-color: #f44336;
    color: #d32f2f;
    opacity: 0.7;
}

#sound-toggle.sounds-off:hover,
#music-toggle.music-off:hover {
    background: #f44336;
    color: white;
}

.game-stats {
    display: flex;
    gap: 15px;
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
}

/* Stats Colors */
.classic .game-stats { color: #495057; }
.blue .game-stats { color: #1976D2; }
.green .game-stats { color: #388E3C; }
.purple .game-stats { color: #7B1FA2; }
.red .game-stats { color: #d32f2f; }
.teal .game-stats { color: #00796b; }
.indigo .game-stats { color: #303f9f; }
.amber .game-stats { color: #ffa000; }
.slate .game-stats { color: #455a64; }

.game-board {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    overflow: visible;
    box-sizing: border-box;
    max-height: none;
    position: relative;
}

.board-container {
    position: relative;
    background: transparent;
    transition: transform 0.5s ease;
    overflow: visible !important;
    box-sizing: border-box;
    display: inline-block;
}

.board-container.board-start {
    animation: boardAppear 0.5s ease;
}

@keyframes boardAppear {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.board-hole {
    position: absolute;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid;
    background: #dee2e6;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    overflow: hidden;
}

/* Board Hole Colors */
.classic .board-hole { border-color: #6c757d; background: #e9ecef; }
.blue .board-hole { border-color: #2196F3; background: #e3f2fd; }
.green .board-hole { border-color: #4CAF50; background: #e8f5e8; }
.purple .board-hole { border-color: #9C27B0; background: #f3e5f5; }
.red .board-hole { border-color: #f44336; background: #ffebee; }
.teal .board-hole { border-color: #009688; background: #e0f2f1; }
.indigo .board-hole { border-color: #3f51b5; background: #e8eaf6; }
.amber .board-hole { border-color: #ffc107; background: #fff8e1; }
.slate .board-hole { border-color: #607d8b; background: #eceff1; }

.board-hole:hover:not(.invalid) {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.board-hole.valid {
    background: #d4edda;
    border-color: #28a745;
    animation: pulse 1.5s infinite;
}

.board-hole.invalid-move {
    background: #f8d7da;
    border-color: #dc3545;
    opacity: 0.7;
}

.board-hole.hint-from {
    background: #fff3cd;
    border-color: #ffc107;
    animation: hintPulse 1s infinite;
}

.board-hole.hint-to {
    background: #d1ecf1;
    border-color: #17a2b8;
    animation: hintPulse 1s infinite;
}

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

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

.board-hole.invalid {
    background: transparent;
    border: 2px dashed #adb5bd;
    cursor: default;
    opacity: 0.3;
}

/* Target center hole indication */
.board-hole.target-center {
    border-width: 3px;
    animation: targetPulse 2s ease-in-out infinite;
}

/* Different pulse colors for each color scheme */
.classic .board-hole.target-center { 
    border-color: #28a745 !important;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.4);
}
.blue .board-hole.target-center { 
    border-color: #2196F3 !important;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
}
.green .board-hole.target-center { 
    border-color: #4CAF50 !important;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}
.purple .board-hole.target-center { 
    border-color: #9C27B0 !important;
    box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);
}
.red .board-hole.target-center { 
    border-color: #f44336 !important;
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
}
.teal .board-hole.target-center { 
    border-color: #009688 !important;
    box-shadow: 0 0 15px rgba(0, 150, 136, 0.4);
}
.indigo .board-hole.target-center { 
    border-color: #3f51b5 !important;
    box-shadow: 0 0 15px rgba(63, 81, 181, 0.4);
}
.amber .board-hole.target-center { 
    border-color: #ffc107 !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
}
.slate .board-hole.target-center { 
    border-color: #607d8b !important;
    box-shadow: 0 0 15px rgba(96, 125, 139, 0.4);
}

/* Pulse animation */
@keyframes targetPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* For empty target center during gameplay */
.board-hole.target-center.empty {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* When target center has a peg, make it extra special */
.board-hole.target-center .peg {
    animation: pegGlow 2s ease-in-out infinite;
}

@keyframes pegGlow {
    0%, 100% { 
        box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.8),
                    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
                    0 0 10px currentColor;
    }
    50% { 
        box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.8),
                    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
                    0 0 20px currentColor;
    }
}

/* =============================================== */
/* MATERIAL THEME STYLES */
/* =============================================== */

/* Classic Material (Default) */
.material-classic .peg {
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.8),
                inset -2px -2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

/* Classic Peg Colors */
.material-classic.classic .peg {
    background: radial-gradient(circle at 30% 30%, #6c757d, #495057, #343a40);
    border-color: #495057;
}
.material-classic.blue .peg {
    background: radial-gradient(circle at 30% 30%, #2196F3, #1976D2, #0D47A1);
    border-color: #1976D2;
}
.material-classic.green .peg {
    background: radial-gradient(circle at 30% 30%, #4CAF50, #388E3C, #1B5E20);
    border-color: #388E3C;
}
.material-classic.purple .peg {
    background: radial-gradient(circle at 30% 30%, #9C27B0, #7B1FA2, #4A148C);
    border-color: #7B1FA2;
}
.material-classic.red .peg {
    background: radial-gradient(circle at 30% 30%, #f44336, #d32f2f, #b71c1c);
    border-color: #d32f2f;
}
.material-classic.teal .peg {
    background: radial-gradient(circle at 30% 30%, #009688, #00796b, #004d40);
    border-color: #00796b;
}
.material-classic.indigo .peg {
    background: radial-gradient(circle at 30% 30%, #3f51b5, #303f9f, #1a237e);
    border-color: #303f9f;
}
.material-classic.amber .peg {
    background: radial-gradient(circle at 30% 30%, #ffc107, #ffa000, #ff6f00);
    border-color: #ffa000;
}
.material-classic.slate .peg {
    background: radial-gradient(circle at 30% 30%, #607d8b, #455a64, #263238);
    border-color: #455a64;
}

/* Wood Material */
.material-wood .board-hole {
    background: linear-gradient(135deg, #8B4513, #A0522D, #D2691E);
    border-color: #654321;
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.2),
                inset -2px -2px 4px rgba(0, 0, 0, 0.4);
}

.material-wood .peg {
    background: radial-gradient(circle at 30% 30%, #DEB887, #CD853F, #8B4513);
    border-color: #8B4513;
    box-shadow: inset 3px 3px 6px rgba(255, 248, 220, 0.6),
                inset -3px -3px 6px rgba(101, 67, 33, 0.8),
                0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid #654321;
}

/* Glass Material */
.material-glass .board-hole {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.material-glass .peg {
    background: radial-gradient(circle at 30% 30%, 
        rgba(255, 255, 255, 0.9), 
        rgba(255, 255, 255, 0.6), 
        rgba(255, 255, 255, 0.3));
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: inset 2px 2px 8px rgba(255, 255, 255, 0.8),
                inset -2px -2px 8px rgba(0, 0, 0, 0.1),
                0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}

/* Color variations for glass */
.material-glass.classic .peg { background: radial-gradient(circle at 30% 30%, rgba(108, 117, 125, 0.9), rgba(73, 80, 87, 0.7), rgba(52, 58, 64, 0.5)); }
.material-glass.blue .peg { background: radial-gradient(circle at 30% 30%, rgba(33, 150, 243, 0.9), rgba(25, 118, 210, 0.7), rgba(13, 71, 161, 0.5)); }
.material-glass.green .peg { background: radial-gradient(circle at 30% 30%, rgba(76, 175, 80, 0.9), rgba(56, 142, 60, 0.7), rgba(27, 94, 32, 0.5)); }
.material-glass.purple .peg { background: radial-gradient(circle at 30% 30%, rgba(156, 39, 176, 0.9), rgba(123, 31, 162, 0.7), rgba(74, 20, 140, 0.5)); }
.material-glass.red .peg { background: radial-gradient(circle at 30% 30%, rgba(244, 67, 54, 0.9), rgba(211, 47, 47, 0.7), rgba(183, 28, 28, 0.5)); }
.material-glass.teal .peg { background: radial-gradient(circle at 30% 30%, rgba(0, 150, 136, 0.9), rgba(0, 121, 107, 0.7), rgba(0, 77, 64, 0.5)); }
.material-glass.indigo .peg { background: radial-gradient(circle at 30% 30%, rgba(63, 81, 181, 0.9), rgba(48, 63, 159, 0.7), rgba(26, 35, 126, 0.5)); }
.material-glass.amber .peg { background: radial-gradient(circle at 30% 30%, rgba(255, 193, 7, 0.9), rgba(255, 160, 0, 0.7), rgba(255, 111, 0, 0.5)); }
.material-glass.slate .peg { background: radial-gradient(circle at 30% 30%, rgba(96, 125, 139, 0.9), rgba(69, 90, 100, 0.7), rgba(38, 50, 56, 0.5)); }

/* Crystal Material */
.material-crystal .board-hole {
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.material-crystal .peg {
    background: radial-gradient(circle at 30% 30%, 
        rgba(255, 255, 255, 0.95),
        rgba(255, 255, 255, 0.7),
        rgba(255, 255, 255, 0.4));
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8),
                0 0 20px rgba(255, 255, 255, 0.6),
                0 0 30px currentColor;
    animation: crystalShimmer 3s ease-in-out infinite;
}

@keyframes crystalShimmer {
    0%, 100% { 
        filter: brightness(1) saturate(1);
        box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8),
                    0 0 20px rgba(255, 255, 255, 0.6),
                    0 0 30px currentColor;
    }
    50% { 
        filter: brightness(1.2) saturate(1.3);
        box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.9),
                    0 0 25px rgba(255, 255, 255, 0.8),
                    0 0 40px currentColor;
    }
}

/* Color variations for crystal */
.material-crystal.classic .peg { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px #6c757d; }
.material-crystal.blue .peg { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px #2196F3; }
.material-crystal.green .peg { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px #4CAF50; }
.material-crystal.purple .peg { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px #9C27B0; }
.material-crystal.red .peg { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px #f44336; }
.material-crystal.teal .peg { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px #009688; }
.material-crystal.indigo .peg { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px #3f51b5; }
.material-crystal.amber .peg { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px #ffc107; }
.material-crystal.slate .peg { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px #607d8b; }

/* Metal Material */
.material-metal .board-hole {
    background: linear-gradient(135deg, #2F4F4F, #708090, #C0C0C0);
    border-color: #36454F;
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.3),
                inset -2px -2px 4px rgba(0, 0, 0, 0.5);
}

.material-metal .peg {
    background: radial-gradient(circle at 30% 30%, 
        #E8E8E8, #C0C0C0, #A9A9A9);
    border-color: #696969;
    box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.8),
                inset -3px -3px 6px rgba(0, 0, 0, 0.6),
                0 4px 8px rgba(0, 0, 0, 0.4);
    border: 1px solid #808080;
}

/* Color variations for metal with metallic sheen */
.material-metal.classic .peg { background: radial-gradient(circle at 30% 30%, #F5F5F5, #B8B8B8, #696969); }
.material-metal.blue .peg { background: radial-gradient(circle at 30% 30%, #E3F2FD, #90CAF9, #1976D2); }
.material-metal.green .peg { background: radial-gradient(circle at 30% 30%, #E8F5E8, #A5D6A7, #388E3C); }
.material-metal.purple .peg { background: radial-gradient(circle at 30% 30%, #F3E5F5, #CE93D8, #7B1FA2); }
.material-metal.red .peg { background: radial-gradient(circle at 30% 30%, #FFEBEE, #EF9A9A, #D32F2F); }
.material-metal.teal .peg { background: radial-gradient(circle at 30% 30%, #E0F2F1, #80CBC4, #00796B); }
.material-metal.indigo .peg { background: radial-gradient(circle at 30% 30%, #E8EAF6, #9FA8DA, #303F9F); }
.material-metal.amber .peg { background: radial-gradient(circle at 30% 30%, #FFF8E1, #FFE082, #FFA000); }
.material-metal.slate .peg { background: radial-gradient(circle at 30% 30%, #ECEFF1, #B0BEC5, #455A64); }

.peg.selected {
    transform: scale(1.2);
    box-shadow: 0 0 15px;
    z-index: 10;
}

.classic .peg.selected { box-shadow: 0 0 15px #6c757d; }
.blue .peg.selected { box-shadow: 0 0 15px #2196F3; }
.green .peg.selected { box-shadow: 0 0 15px #4CAF50; }
.purple .peg.selected { box-shadow: 0 0 15px #9C27B0; }
.red .peg.selected { box-shadow: 0 0 15px #f44336; }
.teal .peg.selected { box-shadow: 0 0 15px #009688; }
.indigo .peg.selected { box-shadow: 0 0 15px #3f51b5; }
.amber .peg.selected { box-shadow: 0 0 15px #ffc107; }
.slate .peg.selected { box-shadow: 0 0 15px #607d8b; }

/* Preview mode styles */
.preview-mode {
    opacity: 0.7;
    animation: none !important;
}

.preview-mode:hover {
    transform: scale(1);
    cursor: default;
}

.empty {
    background: transparent;
    border: 2px dashed;
}

.classic .empty { border-color: #6c757d; }
.blue .empty { border-color: #2196F3; }
.green .empty { border-color: #4CAF50; }
.purple .empty { border-color: #9C27B0; }
.red .empty { border-color: #f44336; }
.teal .empty { border-color: #009688; }
.indigo .empty { border-color: #3f51b5; }
.amber .empty { border-color: #ffc107; }
.slate .empty { border-color: #607d8b; }

.game-message {
    text-align: center;
    margin-top: 15px;
    padding: 10px;
    font-size: 14px;
    border-radius: 4px;
    display: none;
    font-weight: 500;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
}

.game-message:not(:empty) {
    display: block;
}

/* Message Colors */
.classic .game-message:not(:empty) { background: #e9ecef; color: #495057; border: 1px solid #dee2e6; }
.blue .game-message:not(:empty) { background: #e3f2fd; color: #1976D2; border: 1px solid #bbdefb; }
.green .game-message:not(:empty) { background: #e8f5e8; color: #388E3C; border: 1px solid #c8e6c9; }
.purple .game-message:not(:empty) { background: #f3e5f5; color: #7B1FA2; border: 1px solid #e1bee7; }
.red .game-message:not(:empty) { background: #ffebee; color: #d32f2f; border: 1px solid #ffcdd2; }
.teal .game-message:not(:empty) { background: #e0f2f1; color: #00796b; border: 1px solid #b2dfdb; }
.indigo .game-message:not(:empty) { background: #e8eaf6; color: #303f9f; border: 1px solid #c5cae9; }
.amber .game-message:not(:empty) { background: #fff8e1; color: #ffa000; border: 1px solid #ffecb3; }
.slate .game-message:not(:empty) { background: #eceff1; color: #455a64; border: 1px solid #cfd8dc; }

.game-message.win-message {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.game-message.perfect-win {
    background: linear-gradient(45deg, #d4edda, #fff3cd);
    color: #856404;
    border: 2px solid #ffc107;
    font-weight: bold;
    animation: celebrateText 2s ease-in-out;
}

.game-message.hint-message {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

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

/* Animations */
.peg-float {
    animation: float 3s ease-in-out infinite;
}

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

.peg.jumping {
    animation: jump 0.3s ease-in-out;
    z-index: 20;
}

@keyframes jump {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.2) translateY(-15px); }
    100% { transform: scale(1) translateY(0); }
}

.peg.removing {
    animation: remove 0.3s ease-in-out forwards;
}

@keyframes remove {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0) rotate(180deg); opacity: 0; }
}

.peg.celebrate {
    animation: celebrate 0.6s ease-in-out 3;
}

.peg.celebrate-perfect {
    animation: celebratePerfect 1s ease-in-out infinite;
}

@keyframes celebrate {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.2) rotate(-8deg); }
    75% { transform: scale(1.2) rotate(8deg); }
}

@keyframes celebratePerfect {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 10px gold;
    }
    25% { 
        transform: scale(1.3) rotate(-5deg);
        box-shadow: 0 0 20px gold;
    }
    50% { 
        transform: scale(1.5) rotate(0deg);
        box-shadow: 0 0 30px gold;
    }
    75% { 
        transform: scale(1.3) rotate(5deg);
        box-shadow: 0 0 20px gold;
    }
}

/* =============================================== */
/* HALL OF FAME & INSTRUCTIONS - COLOR SCHEME APPLIED */
/* =============================================== */

/* Instructions & Hall of Fame Overlays */
.instructions-overlay,
.hall-of-fame-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.instructions-content,
.hall-of-fame-content {
    background: white;
    padding: 25px;
    border-radius: 8px;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Apply color scheme to overlays */
.classic .instructions-content,
.classic .hall-of-fame-content { border: 2px solid #6c757d; }
.blue .instructions-content,
.blue .hall-of-fame-content { border: 2px solid #2196F3; }
.green .instructions-content,
.green .hall-of-fame-content { border: 2px solid #4CAF50; }
.purple .instructions-content,
.purple .hall-of-fame-content { border: 2px solid #9C27B0; }
.red .instructions-content,
.red .hall-of-fame-content { border: 2px solid #f44336; }
.teal .instructions-content,
.teal .hall-of-fame-content { border: 2px solid #009688; }
.indigo .instructions-content,
.indigo .hall-of-fame-content { border: 2px solid #3f51b5; }
.amber .instructions-content,
.amber .hall-of-fame-content { border: 2px solid #ffc107; }
.slate .instructions-content,
.slate .hall-of-fame-content { border: 2px solid #607d8b; }

/* Content Headers with Color Scheme */
.classic .instructions-content h3,
.classic .hall-of-fame-content h3 { color: #495057; border-bottom: 2px solid #6c757d; }
.blue .instructions-content h3,
.blue .hall-of-fame-content h3 { color: #1976D2; border-bottom: 2px solid #2196F3; }
.green .instructions-content h3,
.green .hall-of-fame-content h3 { color: #388E3C; border-bottom: 2px solid #4CAF50; }
.purple .instructions-content h3,
.purple .hall-of-fame-content h3 { color: #7B1FA2; border-bottom: 2px solid #9C27B0; }
.red .instructions-content h3,
.red .hall-of-fame-content h3 { color: #d32f2f; border-bottom: 2px solid #f44336; }
.teal .instructions-content h3,
.teal .hall-of-fame-content h3 { color: #00796b; border-bottom: 2px solid #009688; }
.indigo .instructions-content h3,
.indigo .hall-of-fame-content h3 { color: #303f9f; border-bottom: 2px solid #3f51b5; }
.amber .instructions-content h3,
.amber .hall-of-fame-content h3 { color: #ffa000; border-bottom: 2px solid #ffc107; }
.slate .instructions-content h3,
.slate .hall-of-fame-content h3 { color: #455a64; border-bottom: 2px solid #607d8b; }

.instructions-content h3,
.hall-of-fame-content h3 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    text-align: center;
}

.instructions-text {
    line-height: 1.5;
    color: #666;
    margin-bottom: 20px;
}

.instructions-text ul {
    margin: 10px 0;
    padding-left: 20px;
}

.instructions-text strong {
    color: #333;
}

/* Hall of Fame improvements */
.high-scores table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.high-scores th {
    background: #f8f9fa;
    padding: 8px;
    text-align: left;
    border-bottom: 2px solid;
}

/* Table borders with color scheme */
.classic .high-scores th { border-bottom-color: #6c757d; }
.blue .high-scores th { border-bottom-color: #2196F3; }
.green .high-scores th { border-bottom-color: #4CAF50; }
.purple .high-scores th { border-bottom-color: #9C27B0; }
.red .high-scores th { border-bottom-color: #f44336; }
.teal .high-scores th { border-bottom-color: #009688; }
.indigo .high-scores th { border-bottom-color: #3f51b5; }
.amber .high-scores th { border-bottom-color: #ffc107; }
.slate .high-scores th { border-bottom-color: #607d8b; }

.high-scores td {
    padding: 8px;
    border-bottom: 1px solid #dee2e6;
}

.input-group {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}

#player-name {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.current-score {
    background: #e7f3ff;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    text-align: center;
    font-weight: bold;
}

/* Close buttons with color scheme */
.close-instructions,
.close-hall,
#save-score {
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
    margin-top: 10px;
    font-weight: 500;
}

/* Close button colors */
.classic .close-instructions, .classic .close-hall, .classic #save-score { background: #6c757d; }
.blue .close-instructions, .blue .close-hall, .blue #save-score { background: #2196F3; }
.green .close-instructions, .green .close-hall, .green #save-score { background: #4CAF50; }
.purple .close-instructions, .purple .close-hall, .purple #save-score { background: #9C27B0; }
.red .close-instructions, .red .close-hall, .red #save-score { background: #f44336; }
.teal .close-instructions, .teal .close-hall, .teal #save-score { background: #009688; }
.indigo .close-instructions, .indigo .close-hall, .indigo #save-score { background: #3f51b5; }
.amber .close-instructions, .amber .close-hall, .amber #save-score { background: #ffc107; color: #212529; }
.slate .close-instructions, .slate .close-hall, .slate #save-score { background: #607d8b; }

#save-score {
    width: auto;
    margin-left: 8px;
}

.close-instructions:hover,
.close-hall:hover,
#save-score:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Score form styling with color scheme */
.score-form {
    margin: 15px 0;
    padding: 15px;
    border-radius: 6px;
    background: #f8f9fa;
}

.classic .score-form { border-left: 4px solid #6c757d; }
.blue .score-form { border-left: 4px solid #2196F3; }
.green .score-form { border-left: 4px solid #4CAF50; }
.purple .score-form { border-left: 4px solid #9C27B0; }
.red .score-form { border-left: 4px solid #f44336; }
.teal .score-form { border-left: 4px solid #009688; }
.indigo .score-form { border-left: 4px solid #3f51b5; }
.amber .score-form { border-left: 4px solid #ffc107; }
.slate .score-form { border-left: 4px solid #607d8b; }

.score-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.classic .score-form label { color: #495057; }
.blue .score-form label { color: #1976D2; }
.green .score-form label { color: #388E3C; }
.purple .score-form label { color: #7B1FA2; }
.red .score-form label { color: #d32f2f; }
.teal .score-form label { color: #00796b; }
.indigo .score-form label { color: #303f9f; }
.amber .score-form label { color: #ffa000; }
.slate .score-form label { color: #455a64; }

/* Input focus states with color scheme */
#player-name:focus {
    outline: none;
    border-color: #6c757d;
    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.2);
}

.classic #player-name:focus { border-color: #6c757d; box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.2); }
.blue #player-name:focus { border-color: #2196F3; box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2); }
.green #player-name:focus { border-color: #4CAF50; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); }
.purple #player-name:focus { border-color: #9C27B0; box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.2); }
.red #player-name:focus { border-color: #f44336; box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2); }
.teal #player-name:focus { border-color: #009688; box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.2); }
.indigo #player-name:focus { border-color: #3f51b5; box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2); }
.amber #player-name:focus { border-color: #ffc107; box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2); }
.slate #player-name:focus { border-color: #607d8b; box-shadow: 0 0 0 2px rgba(96, 125, 139, 0.2); }

/* Error message styling */
.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    border: 1px solid #f5c6cb;
}

/* Perfect win indicator */
.perfect-win-indicator {
    color: #ffc107;
    font-weight: bold;
}

/* =============================================== */
/* MOBILE RESPONSIVE IMPROVEMENTS */
/* =============================================== */

@media (max-width: 600px) {
    #peg-solitaire-game {
        margin: 5px;
        max-width: none;
    }
    
    .game-settings {
        flex-direction: row;
        justify-content: flex-start;
        gap: 6px;
        margin-bottom: 10px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 10px 5px 15px 5px;
        margin: 0 -5px 10px -5px;
        scrollbar-width: thin;
    }
    
    .game-settings select {
        width: auto;
        flex: 0 0 auto;
        min-width: 140px;
        max-width: none;
        font-size: 14px;
        padding: 6px 8px;
        white-space: nowrap;
    }
    
    .game-controls {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    #start-game, #reset-game, #help-button, #sound-toggle, #music-toggle,
    #undo-move, #hint-button, #hall-of-fame-button, #save-score-button {
        padding: 6px 10px;
        font-size: 13px;
        min-height: 36px;
    }
    
    /* Group main game controls together */
    .game-controls > *:not(.game-stats) {
        flex: 0 0 auto;
    }
    
    .game-stats {
        order: 0;
        width: 100%;
        justify-content: space-around;
        font-size: 12px;
        gap: 10px;
        margin-top: 8px;
        padding: 6px;
        background: rgba(0,0,0,0.03);
        border-radius: 4px;
    }
    
    .board-hole {
        min-width: 20px;
        min-height: 20px;
    }
    
    .peg {
        min-width: 16px;
        min-height: 16px;
    }
    
    /* Special handling for large boards on mobile */
    #game-board[style*="width: 9"] .board-hole,
    #game-board[style*="height: 9"] .board-hole {
        min-width: 18px;
        min-height: 18px;
    }
    
    #game-board[style*="width: 9"] .peg,
    #game-board[style*="height: 9"] .peg {
        min-width: 14px;
        min-height: 14px;
    }

    .instructions-content,
    .hall-of-fame-content {
        margin: 10px;
        padding: 15px;
        max-height: 85vh;
    }

    .score-form input {
        width: 120px;
        margin-bottom: 8px;
    }

    .high-scores table {
        font-size: 12px;
    }

    .high-scores th,
    .high-scores td {
        padding: 4px 6px;
    }

    .input-group {
        flex-direction: column;
    }

    #save-score {
        width: auto;
        margin-left: 0;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .game-settings {
        flex-wrap: nowrap;
    }
    
    .game-settings select {
        flex: 0 0 auto;
        min-width: 130px;
        max-width: none;
        margin-bottom: 0;
    }
    
    .game-controls {
        gap: 4px;
    }
    
    #start-game, #reset-game, #help-button, #sound-toggle, #music-toggle,
    #undo-move, #hint-button, #hall-of-fame-button, #save-score-button {
        padding: 5px 8px;
        font-size: 12px;
        min-height: 32px;
    }
    
    /* Two-row layout for controls */
    .game-controls {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }
    
    .game-stats {
        grid-column: 1 / -1;
        margin-top: 6px;
    }
    
    /* Make Hall of Fame and Save Score full width */
    #hall-of-fame-button, #save-score-button {
        grid-column: span 2;
    }
}

@media (max-width: 360px) {
    .game-settings select {
        flex: 0 0 auto;
        min-width: 120px;
        font-size: 13px;
        padding: 5px 6px;
    }
    
    .game-controls {
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
    }
    
    #start-game, #reset-game, #help-button, #sound-toggle, #music-toggle,
    #undo-move, #hint-button {
        font-size: 11px;
        padding: 4px 6px;
    }
    
    #hall-of-fame-button, #save-score-button {
        grid-column: span 3;
        font-size: 12px;
    }
    
    .game-stats {
        font-size: 11px;
        gap: 8px;
    }
}

/* Improve touch targets for mobile */
@media (hover: none) and (pointer: coarse) {
    .board-hole {
        min-width: 32px;
        min-height: 32px;
    }
    
    #start-game, #reset-game, #help-button, #sound-toggle, #music-toggle,
    #undo-move, #hint-button, #hall-of-fame-button, #save-score-button {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-instructions,
    .close-hall,
    #save-score {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure readable text even when buttons are small */
    #start-game, #reset-game, #help-button, #sound-toggle, #music-toggle,
    #undo-move, #hint-button, #hall-of-fame-button, #save-score-button {
        font-size: 14px;
        font-weight: 500;
    }
}

/* Responsive */
@media (min-width: 1200px) {
    #peg-solitaire-game {
        max-width: 700px;
    }
    
    .board-hole {
        min-width: 44px;
        min-height: 44px;
    }
    
    .peg {
        min-width: 34px;
        min-height: 34px;
    }
}

@media (max-width: 400px) {
    .board-hole {
        min-width: 18px;
        min-height: 18px;
    }
    
    .peg {
        min-width: 14px;
        min-height: 14px;
    }
    
    .game-controls {
        flex-direction: column;
        gap: 8px;
    }
    
    .game-stats {
        order: -1;
        width: 100%;
        justify-content: space-around;
    }

    .score-form input {
        width: 100%;
        margin: 0 0 8px 0;
    }

    #save-score {
        width: 100%;
        margin: 0;
    }
}

/* Focus styles for accessibility */
button:focus,
select:focus,
input:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .board-hole {
        border-width: 3px;
    }
    
    .peg {
        border-width: 3px;
    }
}

/* =============================================== */
/* CRITICAL FIXES FOR WORDPRESS ADMIN BAR SCROLLING */
/* =============================================== */

/* Prevent any overflow from the game */
#peg-solitaire-game {
    overflow: hidden !important;
    max-height: none !important;
}

/* Ensure body doesn't scroll horizontally */
body {
    overflow-x: hidden !important;
}

/* WordPress admin bar specific fixes */
html {
    margin-top: 0 !important;
}

body.admin-bar {
    margin-top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        margin-top: 46px !important;
    }
}

/* Make sure the game container is properly sized */
#peg-solitaire-game {
    width: 100%;
    max-width: 600px;
}

/* Force the game board to stay within bounds */
.game-board {
    max-width: 100%;
    overflow: hidden !important;
}

.board-container {
    max-width: 100%;
    overflow: hidden !important;
}

#game-board {
    max-width: 100%;
    overflow: hidden !important;
}

/* Blinking animation for important action buttons */
@keyframes blink-button {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.button-blink {
    animation: blink-button 1.5s ease-in-out infinite !important;
    position: relative;
    z-index: 10;
}

/* Extra emphasis for START button */
#start-game.button-blink {
    animation: blink-button 1s ease-in-out infinite !important;
    font-weight: bold;
}

/* Extra emphasis for SAVE SCORE button */
#save-score-button.button-blink {
    animation: blink-button 1.2s ease-in-out infinite !important;
    font-weight: bold;
}

/* Add a subtle glow effect during blink */
#start-game.button-blink::after,
#save-score-button.button-blink::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 6px;
    z-index: -1;
    animation: glow-pulse 1.5s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { 
        opacity: 0.5;
        box-shadow: 0 0 5px currentColor;
    }
    50% { 
        opacity: 1;
        box-shadow: 0 0 15px currentColor;
    }
}

/* Color-specific glows */
.classic #start-game.button-blink::after,
.classic #save-score-button.button-blink::after { box-shadow: 0 0 10px rgba(108, 117, 125, 0.6); }
.blue #start-game.button-blink::after,
.blue #save-score-button.button-blink::after { box-shadow: 0 0 10px rgba(33, 150, 243, 0.6); }
.green #start-game.button-blink::after,
.green #save-score-button.button-blink::after { box-shadow: 0 0 10px rgba(76, 175, 80, 0.6); }
.purple #start-game.button-blink::after,
.purple #save-score-button.button-blink::after { box-shadow: 0 0 10px rgba(156, 39, 176, 0.6); }
.red #start-game.button-blink::after,
.red #save-score-button.button-blink::after { box-shadow: 0 0 10px rgba(244, 67, 54, 0.6); }
.teal #start-game.button-blink::after,
.teal #save-score-button.button-blink::after { box-shadow: 0 0 10px rgba(0, 150, 136, 0.6); }
.indigo #start-game.button-blink::after,
.indigo #save-score-button.button-blink::after { box-shadow: 0 0 10px rgba(63, 81, 181, 0.6); }
.amber #start-game.button-blink::after,
.amber #save-score-button.button-blink::after { box-shadow: 0 0 10px rgba(255, 193, 7, 0.6); }
.slate #start-game.button-blink::after,
.slate #save-score-button.button-blink::after { box-shadow: 0 0 10px rgba(96, 125, 139, 0.6); }