/**
 * ChromeSimon Memory Game - Chromesthesia CSS
 * 
 * This file defines color relationships based on chromesthesia research,
 * mapping musical notes to specific colors with variations for different
 * octaves and harmonics.
 * 
 * References:
 * - Scriabin's color-sound theory
 * - Contemporary chromesthesia research
 * - Color psychology principles
 */

:root {
  /* Base Musical Note Colors (Middle Octave - 4) */
  --note-c: #e74c3c; /* Red */
  --note-c-sharp: #d35400; /* Red-Orange */
  --note-d: #f39c12; /* Yellow-Orange */
  --note-d-sharp: #f1c40f; /* Yellow */
  --note-e: #2ecc71; /* Green */
  --note-f: #3498db; /* Blue */
  --note-f-sharp: #2980b9; /* Deep Blue */
  --note-g: #9b59b6; /* Purple */
  --note-g-sharp: #8e44ad; /* Deep Purple */
  --note-a: #1abc9c; /* Teal */
  --note-a-sharp: #16a085; /* Deep Teal */
  --note-b: #e84393; /* Pink */

  /* Octave Variations - Lighter for Higher Octaves */
  
  /* Octave 3 (Lower) - Darker */
  --note-c3: #c0392b; /* Darker Red */
  --note-c-sharp3: #a04000; /* Darker Red-Orange */
  --note-d3: #d68910; /* Darker Yellow-Orange */
  --note-d-sharp3: #b7950b; /* Darker Yellow */
  --note-e3: #27ae60; /* Darker Green */
  --note-f3: #2471a3; /* Darker Blue */
  --note-f-sharp3: #1f618d; /* Darker Deep Blue */
  --note-g3: #884ea0; /* Darker Purple */
  --note-g-sharp3: #6c3483; /* Darker Deep Purple */
  --note-a3: #17a589; /* Darker Teal */
  --note-a-sharp3: #117a65; /* Darker Deep Teal */
  --note-b3: #c2185b; /* Darker Pink */
  
  /* Octave 5 (Higher) - Lighter */
  --note-c5: #ff6b6b; /* Lighter Red */
  --note-c-sharp5: #ff7f50; /* Lighter Red-Orange */
  --note-d5: #ffb74d; /* Lighter Yellow-Orange */
  --note-d-sharp5: #ffeb3b; /* Lighter Yellow */
  --note-e5: #66de93; /* Lighter Green */
  --note-f5: #64b5f6; /* Lighter Blue */
  --note-f-sharp5: #5c9ede; /* Lighter Deep Blue */
  --note-g5: #b39ddb; /* Lighter Purple */
  --note-g-sharp5: #b39ddb; /* Lighter Deep Purple */
  --note-a5: #4dd8c0; /* Lighter Teal */
  --note-a-sharp5: #40bda2; /* Lighter Deep Teal */
  --note-b5: #f77eb9; /* Lighter Pink */
  
  /* Octave 6 (Highest) - Lightest */
  --note-c6: #ffadad; /* Lightest Red */
  --note-c-sharp6: #ffbe9d; /* Lightest Red-Orange */
  --note-d6: #ffe0a0; /* Lightest Yellow-Orange */
  --note-d-sharp6: #fff7a7; /* Lightest Yellow */
  --note-e6: #aff3c3; /* Lightest Green */
  --note-f6: #aed9f6; /* Lightest Blue */
  --note-f-sharp6: #a7c8f0; /* Lightest Deep Blue */
  --note-g6: #d9c6eb; /* Lightest Purple */
  --note-g-sharp6: #d1bee8; /* Lightest Deep Purple */
  --note-a6: #a2eedf; /* Lightest Teal */
  --note-a-sharp6: #9ae3cf; /* Lightest Deep Teal */
  --note-b6: #ffc1dd; /* Lightest Pink */
  
  /* Harmonics & Relations */
  --perfect-fifth: rgba(255, 255, 255, 0.75); /* Bright overlay for perfect fifths */
  --perfect-fourth: rgba(255, 255, 255, 0.6); /* Slightly dimmer for perfect fourths */
  --major-third: rgba(255, 255, 255, 0.5); /* Warm overlay for major thirds */
  --minor-third: rgba(0, 0, 0, 0.2); /* Slight darkness for minor thirds */
  --octave: rgba(255, 255, 255, 0.9); /* Nearly white overlay for octaves */
  
  /* Active State Glows */
  --note-glow-intensity: 30px; /* Base glow size */
  --note-glow-intensity-active: 50px; /* Increased glow for active state */
  --note-active-opacity: 0.75; /* Opacity for active note glow */
  
  /* 3D effect properties */
  --tile-depth: 8px; /* Depth for 3D effect */
  --tile-pressed-depth: 2px; /* Depth when pressed */
  --tile-transition-speed: 0.15s; /* Speed of transition for 3D effect */
}

/* Game square base styles for 3D effect */
.game__square {
  position: relative;
  transition: transform var(--tile-transition-speed) ease-out, 
              box-shadow var(--tile-transition-speed) ease-out,
              filter var(--tile-transition-speed) ease-out;
  border-radius: 15px;
  box-shadow: 0 var(--tile-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-depth) 15px rgba(0,0,0,0.1),
              inset 0 -5px 10px rgba(0,0,0,0.2),
              inset 0 5px 10px rgba(255,255,255,0.2);
  transform: translateY(0);
}

/* Note Classes - For Direct Application */
.note-c { background-color: var(--note-c); }
.note-c-sharp { background-color: var(--note-c-sharp); }
.note-d { background-color: var(--note-d); }
.note-d-sharp { background-color: var(--note-d-sharp); }
.note-e { background-color: var(--note-e); }
.note-f { background-color: var(--note-f); }
.note-f-sharp { background-color: var(--note-f-sharp); }
.note-g { background-color: var(--note-g); }
.note-g-sharp { background-color: var(--note-g-sharp); }
.note-a { background-color: var(--note-a); }
.note-a-sharp { background-color: var(--note-a-sharp); }
.note-b { background-color: var(--note-b); }

/* Octave 3 Note Classes */
.note-c3 { background-color: var(--note-c3); }
.note-c-sharp3 { background-color: var(--note-c-sharp3); }
.note-d3 { background-color: var(--note-d3); }
.note-d-sharp3 { background-color: var(--note-d-sharp3); }
.note-e3 { background-color: var(--note-e3); }
.note-f3 { background-color: var(--note-f3); }
.note-f-sharp3 { background-color: var(--note-f-sharp3); }
.note-g3 { background-color: var(--note-g3); }
.note-g-sharp3 { background-color: var(--note-g-sharp3); }
.note-a3 { background-color: var(--note-a3); }
.note-a-sharp3 { background-color: var(--note-a-sharp3); }
.note-b3 { background-color: var(--note-b3); }

/* Octave 5 Note Classes */
.note-c5 { background-color: var(--note-c5); }
.note-c-sharp5 { background-color: var(--note-c-sharp5); }
.note-d5 { background-color: var(--note-d5); }
.note-d-sharp5 { background-color: var(--note-d-sharp5); }
.note-e5 { background-color: var(--note-e5); }
.note-f5 { background-color: var(--note-f5); }
.note-f-sharp5 { background-color: var(--note-f-sharp5); }
.note-g5 { background-color: var(--note-g5); }
.note-g-sharp5 { background-color: var(--note-g-sharp5); }
.note-a5 { background-color: var(--note-a5); }
.note-a-sharp5 { background-color: var(--note-a-sharp5); }
.note-b5 { background-color: var(--note-b5); }

/* Octave 6 Note Classes */
.note-c6 { background-color: var(--note-c6); }
.note-c-sharp6 { background-color: var(--note-c-sharp6); }
.note-d6 { background-color: var(--note-d6); }
.note-d-sharp6 { background-color: var(--note-d-sharp6); }
.note-e6 { background-color: var(--note-e6); }
.note-f6 { background-color: var(--note-f6); }
.note-f-sharp6 { background-color: var(--note-f-sharp6); }
.note-g6 { background-color: var(--note-g6); }
.note-g-sharp6 { background-color: var(--note-g-sharp6); }
.note-a6 { background-color: var(--note-a6); }
.note-a-sharp6 { background-color: var(--note-a-sharp6); }
.note-b6 { background-color: var(--note-b6); }

/* Active State Classes - Enhanced with 3D press effect and stronger glow */
.game__square.active {
  transform: translateY(calc(var(--tile-depth) - var(--tile-pressed-depth)));
  filter: brightness(1.5);
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3);
}

.note-c.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-c); 
}

.note-c-sharp.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-c-sharp); 
}

.note-d.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-d); 
}

.note-d-sharp.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-d-sharp); 
}

.note-e.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-e); 
}

.note-f.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-f); 
}

.note-f-sharp.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-f-sharp); 
}

.note-g.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-g); 
}

.note-g-sharp.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-g-sharp); 
}

.note-a.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-a); 
}

.note-a-sharp.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-a-sharp); 
}

.note-b.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-b); 
}

/* Octave 3 active state */
.note-c3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-c3); 
}

.note-c-sharp3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-c-sharp3); 
}

.note-d3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-d3); 
}

.note-d-sharp3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-d-sharp3); 
}

.note-e3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-e3); 
}

.note-f3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-f3); 
}

.note-f-sharp3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-f-sharp3); 
}

.note-g3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-g3); 
}

.note-g-sharp3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-g-sharp3); 
}

.note-a3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-a3); 
}

.note-a-sharp3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-a-sharp3); 
}

.note-b3.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-b3); 
}

/* Octave 5 active state */
.note-c5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-c5); 
}

.note-c-sharp5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-c-sharp5); 
}

.note-d5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-d5); 
}

.note-d-sharp5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-d-sharp5); 
}

.note-e5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-e5); 
}

.note-f5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-f5); 
}

.note-f-sharp5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-f-sharp5); 
}

.note-g5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-g5); 
}

.note-g-sharp5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-g-sharp5); 
}

.note-a5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-a5); 
}

.note-a-sharp5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-a-sharp5); 
}

.note-b5.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-b5); 
}

/* Octave 6 active state */
.note-c6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-c6); 
}

.note-c-sharp6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-c-sharp6); 
}

.note-d6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-d6); 
}

.note-d-sharp6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-d-sharp6); 
}

.note-e6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-e6); 
}

.note-f6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-f6); 
}

.note-f-sharp6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-f-sharp6); 
}

.note-g6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-g6); 
}

.note-g-sharp6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-g-sharp6); 
}

.note-a6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-a6); 
}

.note-a-sharp6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-a-sharp6); 
}

.note-b6.active { 
  box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
              0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.3),
              0 0 var(--note-glow-intensity-active) var(--note-b6); 
}

/* Helpers for Applying Color with Transparency */
.note-c-10 { background-color: rgba(231, 76, 60, 0.1); }
.note-c-20 { background-color: rgba(231, 76, 60, 0.2); }
.note-c-50 { background-color: rgba(231, 76, 60, 0.5); }
.note-c-80 { background-color: rgba(231, 76, 60, 0.8); }

.note-d-10 { background-color: rgba(243, 156, 18, 0.1); }
.note-d-20 { background-color: rgba(243, 156, 18, 0.2); }
.note-d-50 { background-color: rgba(243, 156, 18, 0.5); }
.note-d-80 { background-color: rgba(243, 156, 18, 0.8); }

.note-e-10 { background-color: rgba(46, 204, 113, 0.1); }
.note-e-20 { background-color: rgba(46, 204, 113, 0.2); }
.note-e-50 { background-color: rgba(46, 204, 113, 0.5); }
.note-e-80 { background-color: rgba(46, 204, 113, 0.8); }

.note-f-10 { background-color: rgba(52, 152, 219, 0.1); }
.note-f-20 { background-color: rgba(52, 152, 219, 0.2); }
.note-f-50 { background-color: rgba(52, 152, 219, 0.5); }
.note-f-80 { background-color: rgba(52, 152, 219, 0.8); }

.note-g-10 { background-color: rgba(155, 89, 182, 0.1); }
.note-g-20 { background-color: rgba(155, 89, 182, 0.2); }
.note-g-50 { background-color: rgba(155, 89, 182, 0.5); }
.note-g-80 { background-color: rgba(155, 89, 182, 0.8); }

.note-a-10 { background-color: rgba(26, 188, 156, 0.1); }
.note-a-20 { background-color: rgba(26, 188, 156, 0.2); }
.note-a-50 { background-color: rgba(26, 188, 156, 0.5); }
.note-a-80 { background-color: rgba(26, 188, 156, 0.8); }

.note-b-10 { background-color: rgba(232, 67, 147, 0.1); }
.note-b-20 { background-color: rgba(232, 67, 147, 0.2); }
.note-b-50 { background-color: rgba(232, 67, 147, 0.5); }
.note-b-80 { background-color: rgba(232, 67, 147, 0.8); }

/* Text Colors for Accessibility */
.text-on-c { color: white; }
.text-on-c-sharp { color: white; }
.text-on-d { color: black; }
.text-on-d-sharp { color: black; }
.text-on-e { color: black; }
.text-on-f { color: white; }
.text-on-f-sharp { color: white; }
.text-on-g { color: white; }
.text-on-g-sharp { color: white; }
.text-on-a { color: black; }
.text-on-a-sharp { color: white; }
.text-on-b { color: white; }

/* Musical Scales as Color Themes */
.scale-c-major {
  --scale-1: var(--note-c);   /* C */
  --scale-2: var(--note-d);   /* D */
  --scale-3: var(--note-e);   /* E */
  --scale-4: var(--note-f);   /* F */
  --scale-5: var(--note-g);   /* G */
  --scale-6: var(--note-a);   /* A */
  --scale-7: var(--note-b);   /* B */
}

.scale-a-minor {
  --scale-1: var(--note-a);   /* A */
  --scale-2: var(--note-b);   /* B */
  --scale-3: var(--note-c);   /* C */
  --scale-4: var(--note-d);   /* D */
  --scale-5: var(--note-e);   /* E */
  --scale-6: var(--note-f);   /* F */
  --scale-7: var(--note-g);   /* G */
}

.scale-g-major {
  --scale-1: var(--note-g);   /* G */
  --scale-2: var(--note-a);   /* A */
  --scale-3: var(--note-b);   /* B */
  --scale-4: var(--note-c);   /* C */
  --scale-5: var(--note-d);   /* D */
  --scale-6: var(--note-e);   /* E */
  --scale-7: var(--note-f-sharp); /* F# */
}

/* Chords as Gradient Backgrounds */
.chord-c-major {
  background: linear-gradient(
    to right,
    var(--note-c) 0%,
    var(--note-c) 33%,
    var(--note-e) 33%,
    var(--note-e) 66%,
    var(--note-g) 66%,
    var(--note-g) 100%
  );
}

.chord-g-major {
  background: linear-gradient(
    to right,
    var(--note-g) 0%,
    var(--note-g) 33%,
    var(--note-b) 33%,
    var(--note-b) 66%,
    var(--note-d) 66%,
    var(--note-d) 100%
  );
}

.chord-f-major {
  background: linear-gradient(
    to right,
    var(--note-f) 0%,
    var(--note-f) 33%,
    var(--note-a) 33%,
    var(--note-a) 66%,
    var(--note-c) 66%,
    var(--note-c) 100%
  );
}

/* Animations for Note Transitions */
@keyframes note-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes note-press {
  0% { 
    transform: translateY(0); 
  }
  40% { 
    transform: translateY(calc(var(--tile-depth) - var(--tile-pressed-depth)));
  }
  70% {
    transform: translateY(calc(var(--tile-depth) - var(--tile-pressed-depth) + 2px));
  }
  100% { 
    transform: translateY(calc(var(--tile-depth) - var(--tile-pressed-depth))); 
  }
}

@keyframes glow-pulse {
  0% { box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
                   0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
                   inset 0 -2px 5px rgba(0,0,0,0.2),
                   inset 0 2px 5px rgba(255,255,255,0.3),
                   0 0 var(--note-glow-intensity-active) currentColor; }
  50% { box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
                    0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
                    inset 0 -2px 5px rgba(0,0,0,0.2),
                    inset 0 2px 5px rgba(255,255,255,0.3),
                    0 0 calc(var(--note-glow-intensity-active) * 1.5) currentColor; }
  100% { box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
                     0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
                     inset 0 -2px 5px rgba(0,0,0,0.2),
                     inset 0 2px 5px rgba(255,255,255,0.3),
                     0 0 var(--note-glow-intensity-active) currentColor; }
}

.note-pulse {
  animation: note-pulse 0.5s ease-in-out;
}

/* Enhanced Active State Classes */
.game__square.active {
  animation: note-press 0.25s ease-out forwards;
  filter: brightness(1.5);
}

/* Add animation to each note's active state */
.note-c.active, 
.note-c-sharp.active, 
.note-d.active, 
.note-d-sharp.active, 
.note-e.active, 
.note-f.active, 
.note-f-sharp.active, 
.note-g.active, 
.note-g-sharp.active, 
.note-a.active, 
.note-a-sharp.active, 
.note-b.active {
  animation: 
    note-press 0.25s ease-out forwards, 
    glow-pulse 1s ease-in-out infinite;
}

/* Accessibility - High Contrast Mode */
.high-contrast {
  --note-c: #ff0000; /* Bright Red */
  --note-c-sharp: #ff4500; /* Bright Red-Orange */
  --note-d: #ffa500; /* Bright Orange */
  --note-d-sharp: #ffff00; /* Bright Yellow */
  --note-e: #00ff00; /* Bright Green */
  --note-f: #0000ff; /* Bright Blue */
  --note-f-sharp: #4b0082; /* Bright Indigo */
  --note-g: #9400d3; /* Bright Purple */
  --note-g-sharp: #800080; /* Bright Violet */
  --note-a: #00ffff; /* Bright Cyan */
  --note-a-sharp: #00bfff; /* Bright Light Blue */
  --note-b: #ff00ff; /* Bright Magenta */
  
  --note-glow-intensity: 50px; /* Increased glow for visibility */
}

@keyframes glow-pulse-bw {
  0% { box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
                   0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
                   inset 0 -2px 5px rgba(0,0,0,0.2),
                   inset 0 2px 5px rgba(255,255,255,0.3),
                   0 0 var(--note-glow-intensity-active) rgba(255, 255, 255, 0.7); }
  50% { box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
                    0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
                    inset 0 -2px 5px rgba(0,0,0,0.2),
                    inset 0 2px 5px rgba(255,255,255,0.3),
                    0 0 calc(var(--note-glow-intensity-active) * 1.5) rgba(255, 255, 255, 0.9); }
  100% { box-shadow: 0 var(--tile-pressed-depth) 0 rgba(0,0,0,0.2),
                     0 var(--tile-pressed-depth) 5px rgba(0,0,0,0.1),
                     inset 0 -2px 5px rgba(0,0,0,0.2),
                     inset 0 2px 5px rgba(255,255,255,0.3),
                     0 0 var(--note-glow-intensity-active) rgba(255, 255, 255, 0.7); }
}

/* Black and White Mode */
.black-and-white .game__square {
  /* Override all note colors with grayscale */
  background-color: #777777 !important;
  transition: background-color 0.3s ease,
              filter var(--tile-transition-speed) ease-out;
}

.black-and-white .game__square.active {
  /* Higher contrast for active state */
  background-color: #333333 !important;
  transform: none;
  animation: note-press 0.25s ease-out forwards, 
             glow-pulse-bw 1s ease-in-out infinite !important;
  filter: brightness(1.3);
  box-shadow: none;
}

/* Color labels for black and white mode */
.black-and-white .game__square::after {
  content: attr(data-note);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* When both high contrast and black-and-white modes are active, prioritize black and white */
.high-contrast.black-and-white .game__square {
  background-color: #555555 !important;
}

.high-contrast.black-and-white .game__square.active {
  background-color: #222222 !important;
  transform: none;
  animation: note-press 0.25s ease-out forwards, 
             glow-pulse-bw 1s ease-in-out infinite !important;
  filter: brightness(1.5);
  box-shadow: none;
}

/* Settings Modal Styling */
.modal__button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 15px; /* Add space between buttons */
}

/* Icon Button Styling */
.game__button--icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

.game__button--icon svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
  transition: transform 0.2s ease;
}

.game__button--icon:hover svg {
  transform: scale(1.1);
}

.game__button--icon:active svg {
  transform: scale(0.95);
}

/* Sound icon visibility control */
.game__button--icon .icon-sound-on {
  display: block;
}

.game__button--icon .icon-sound-off {
  display: none;
}

.game__button--icon.muted .icon-sound-on {
  display: none;
}

.game__button--icon.muted .icon-sound-off {
  display: block;
}

/* Floating Start Button - Centers in the game board */
.game__start-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  z-index: 10;
  border-radius: 15px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.game__start-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.game__start-button {
  padding: 15px 30px;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  transform: scale(1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Mobile optimizations */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
  touch-action: manipulation; /* Optimize for touch */
  user-select: none; /* Prevent text selection */
}

/* Increase touch target size on mobile */
@media (max-width: 768px) {
  .game__start-button {
    padding: 18px 36px;
    font-size: 1.8rem;
    min-width: 200px; /* Ensure button has sufficient width for touch */
  }
}

.game__start-button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.game__start-button:active {
  transform: scale(0.98);
}

/* Ad Container Styles */
.ad-container {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  max-width: 320px;
  width: 100%;
  text-align: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Small height screens - move ad to be less intrusive */
@media (max-height: 600px) {
  .ad-container {
    bottom: 5px;
    transform: translateX(-50%) scale(0.9);
  }
}

/* Make sure ad doesn't overlap with game controls on small screens */
@media (max-width: 400px) {
  .ad-container {
    bottom: 60px;
  }
}