* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  background: #f5f5f5;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; 
  padding-top: 200px;          
}


h1 {
  position: absolute;
  top: 20px;
  text-align: center;
  font-size: 6rem;
  letter-spacing: 2px;
  color: #141414;
}


.image-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 80vh;
}

.image-container {
  position: relative;
  display: block;
  margin: 0 auto;
  width: fit-content;
}


.fretboard-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: auto;               
  position: relative;
  padding-bottom: 60px;          
}



#scaleDisplay {
  position: relative;
  margin-top: 25px;              
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 980px;
  background: transparent;
  overflow: visible;              
  max-height: none;               
}


.hotspot {
  position: absolute;
  background: rgba(255, 0, 0, 0.8); 
  border: none;
  border-radius: 50%;  
  color: transparent;  
  width: 15px;        
  height: 15px;        
  cursor: pointer;
  transition: background 0.3s ease;
  display: block;      
  font-size: 0;        
  line-height: 0;      
}

.hotspot:hover {
  background: rgba(255, 50, 50, 1);
}


#btn1 { top: 70%; left: .5%; }
#btn2 { top: 58%; left: .5%; }
#btn3 { top: 46.56%; left: .5%; }
#btn4 { top: 37.16%; left: .5%; }                        /*OPEN*/
#btn5 { top: 26.59%; left: .5%; }
#btn6 { top: 16.80%; left: .5%; }

#btn7 { top: 69.7%; left: 8%; }
#btn8 { top: 59%; left: 8%; }
#btn9 { top: 48%; left: 8%; }                       /*1*/
#btn10 { top: 38%; left: 8%; }
#btn11 { top: 28.54%; left: 8%; }
#btn12 { top: 19%; left: 8%; }

#btn13 { top: 70.532%; left: 15%; }
#btn14 { top: 59.27%; left: 15%; }
#btn15 { top: 48.92%; left: 15%; }                     /*2*/
#btn16 { top: 38.33%; left: 15%; }
#btn17 { top: 28.54%; left: 15%; }
#btn18 { top: 18.95%; left: 15%; }

#btn19 { top: 71.318%; left: 21.74%; } 
#btn20 { top: 60.26%; left: 21.74%; }      
#btn21 { top: 48.91%; left: 21.74%; }                  /*3*/
#btn22 { top: 38.73%; left: 21.74%; } 
#btn23 { top: 28.54%; left: 21.74%; } 
#btn24 { top: 18.95%; left: 21.74%; } 

#btn25 { top: 72.059%; left: 28.3%; }
#btn26 { top: 61.04%; left: 28.3%; }                 /*4*/
#btn27 { top: 49.69%; left: 28.3%; }
#btn28 { top: 39.51%; left: 28.3%; }
#btn29 { top: 28.94%; left: 28.3%; }
#btn30 { top: 18.76%; left: 28.3%; }

#btn31 { top: 72.759%; left: 34.19%; }
#btn32 { top: 61.44%; left: 34.19%; }
#btn33 { top: 50.47%; left: 34.19%; }           /*5*/
#btn34 { top: 39.51%; left: 34.19%; }
#btn35 { top: 28.94%; left: 34.19%; }
#btn36 { top: 18.76%; left: 34.19%; }

#btn37 { top: 73.419%; left: 39.71%; }
#btn38 { top: 62.22%; left: 39.71%; }
#btn39 { top: 50.86%; left: 39.71%; }           /*6*/
#btn40 { top: 39.90%; left: 39.71%; }
#btn41 { top: 28.94%; left: 39.71%; }
#btn42 { top: 18.36%; left: 39.71%; }

#btn43 { top: 74.043%; left: 44.89%; }
#btn44 { top: 62.21%; left: 44.89%; }
#btn45 { top: 50.86%; left: 44.89%; }           /*7*/
#btn46 { top: 39.90%; left: 44.89%; }
#btn47 { top: 28.94%; left: 44.89%; }
#btn48 { top: 18.36%; left: 44.89%; }

#btn49 { top: 74.631%; left: 49.78%; }
#btn50 { top: 63%; left: 49.78%; }
#btn51 { top: 51.26%; left: 49.78%; }          /*8*/
#btn52 { top: 40.29%; left: 49.78%; }
#btn53 { top: 29.33%; left: 49.78%; }
#btn54 { top: 18.36%; left: 49.78%; }

#btn55 { top: 75.187%; left: 54.22%; }
#btn56 { top: 63.39%; left: 54.22%; }
#btn57 { top: 51.65%; left: 54.22%; }          /*9*/
#btn58 { top: 40.29%; left: 54.22%; }
#btn59 { top: 29.33%; left: 54.22%; }
#btn60 { top: 18.36%; left: 54.22%; }

#btn61 { top: 75.711%; left: 58.32%; }
#btn62 { top: 64.18%; left: 58.32%; }
#btn63 { top: 52.04%; left: 58.32%; }          /*10*/
#btn64 { top: 40.29%; left: 58.32%; }
#btn65 { top: 29.33%; left: 58.32%; }
#btn66 { top: 17.97%; left: 58.32%; }

#btn67 { top: 75.711%; left: 62.41%; }
#btn68 { top: 64.57%; left: 62.41%; }
#btn69 { top: 52.43%; left: 62.41%; }          /*11*/
#btn70 { top: 40.68%; left: 62.41%; }
#btn71 { top: 29.33%; left: 62.41%; }
#btn72 { top: 17.97%; left: 62.41%; }

#btn73 { top: 76.206%; left: 66.3%; }
#btn74 { top: 64.57%; left: 66.3%; }
#btn75 { top: 52.43%; left: 66.3%; }           /*12*/
#btn76 { top: 41.07%; left: 66.3%; }
#btn77 { top: 28.97%; left: 66.3%; }
#btn78 { top: 17.97%; left: 66.3%; }

#btn79 { top: 76.673%; left: 69.81%; }
#btn80 { top: 64.96%; left: 69.81%; }
#btn81 { top: 52.43%; left: 69.81%; }         /*13*/  
#btn82 { top: 40.68%; left: 69.81%; }
#btn83 { top: 29.33%; left: 69.81%; }
#btn84 { top: 17.97%; left: 69.81%; }

#btn85 { top: 77.114%; left: 73.28%; }
#btn86 { top: 65.35%; left: 73.28%; }
#btn87 { top: 53.21%; left: 73.28%; }           /*14*/
#btn88 { top: 41.27%; left: 73.28%; }
#btn89 { top: 29.29%; left: 73.28%; }
#btn90 { top: 17.97%; left: 73.28%; }

#btn91 { top: 77.530%; left: 76.47%; }
#btn92 { top: 66.13%; left: 76.47%; }
#btn93 { top: 53.60%; left: 76.47%; }           /*15*/
#btn94 { top: 41.17%; left: 76.47%; }
#btn95 { top: 29.33%; left: 76.47%; }
#btn96 { top: 17.97%; left: 76.47%; }

#btn97 { top: 77.922%; left: 79.43%; }
#btn98 { top: 66.13%; left: 79.43%; }
#btn99 { top: 53.60%; left: 79.43%; }           /*16*/
#btn100 { top: 41.47%; left: 79.43%; }
#btn101 { top: 29.72%; left: 79.43%; }
#btn102 { top: 17.97%; left: 79.43%; }

#btn103 { top: 78.293%; left: 82.16%; }
#btn104 { top: 66.13%; left: 82.16%; }
#btn105 { top: 53.60%; left: 82.16%; }          /*17*/
#btn106 { top: 41.17%; left: 82.16%; }
#btn107 { top: 29.33%; left: 82.16%; }
#btn108 { top: 17.97%; left: 82.16%; }

#btn109 { top: 78.643%; left: 84.66%; }
#btn110 { top: 66.53%; left: 84.66%; }
#btn111 { top: 54%; left: 84.66%; }          /*18*/
#btn112 { top: 41.47%; left: 84.66%; } 
#btn113 { top: 29.33%; left: 84.66%; }
#btn114 { top: 17.97%; left: 84.66%; }

#btn115 { top: 78.973%; left: 87.16%; }
#btn116 { top: 66.92%; left: 87.16%; }
#btn117 { top: 54.39%; left: 87.16%; }          /*19*/
#btn118 { top: 41.86%; left: 87.16%; }
#btn119 { top: 29.72%; left: 87.16%; }
#btn120 { top: 17.97%; left: 87.16%; }

#btn121 { top: 79.285%; left: 89.43%; }
#btn122 { top: 66.92%; left: 89.43%; }
#btn123 { top: 54.39%; left: 89.43%; }          /*20*/
#btn124 { top: 41.86%; left: 89.43%; }
#btn125 { top: 29.33%; left: 89.43%; }
#btn126 { top: 17.97%; left: 89.43%; }

#btn127 { top: 79.579%; left: 91.6%; }
#btn128 { top: 66.92%; left: 91.6%; }
#btn129 { top: 54.39%; left: 91.6%; }           /*21*/
#btn130 { top: 41.86%; left: 91.6%; }
#btn131 { top: 29.33%; left: 91.6%; }
#btn132 { top: 17.97%; left: 91.6%; }

#btn133 { top: 79.579%; left: 93.55%; }
#btn134 { top: 67.05%; left: 93.55%; }
#btn135 { top: 54.39%; left: 93.55%; }          /*22*/
#btn136 { top: 41.86%; left: 93.55%; }
#btn137 { top: 29.33%; left: 93.55%; }
#btn138 { top: 17.97%; left: 93.55%; }

#btn139 { top: 79.857%; left: 95.5%; }
#btn140 { top: 67.4%; left: 95.5%; }
#btn141 { top: 54.39%; left: 95.5%; }           /*23*/
#btn142 { top: 41.86%; left: 95.5%; }
#btn143 { top: 29.33%; left: 95.5%; }
#btn144 { top: 17.85%; left: 95.5%; }

#btn145 { top: 80.119%; left: 97.28%; }
#btn146 { top: 67.60%; left: 97.28%; }          /*24*/
#btn147 { top: 54.7%; left: 97.28%; }
#btn148 { top: 42.12%; left: 97.28%; }
#btn149 { top: 29.58%; left: 97.28%; }
#btn150 { top: 17.85%; left: 97.28%; }


#infoBox {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: rgba(15, 14, 14, 0.7);
  padding: 10px;
  border-radius: 8px;
  display: none;
  font-size: 1rem;
  text-align: center;
}
img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 8px;
}


.note {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;    
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  z-index: 20;
  pointer-events: auto;
  color: currentColor;
  border: 1px solid rgba(0,0,0,0.1); 
}



.hidden {
  display: none !important;
}



#note7  { top: 68%; left: 8%; transform: translate(-50%, -50%); }
#note21 { top: 45%; left: 21.5%; transform: translate(-50%, -50%); }


.hidden { display: none !important; }


.image-container img { pointer-events: none; }


.coord-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 1rem;
  pointer-events: none;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.1s ease;
}

button.hotspot,
button.hotspot:hover,
.hotspot,
.hotspot:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.note {
  position: absolute;
  transform: none;
  font-weight: 700;
  color: currentColor;
  cursor: pointer;
  user-select: none;
  z-index: 20;
  pointer-events: auto;
  display: grid;
  place-items: center;
}

.note { font-size: 1rem; font-weight:700; text-shadow:0 0 0px; }




#clearButton{ 
  background:#ed0b0b; color:#ffffff; border:2px solid #a22626;
  padding:8px 16px; font-weight:700; border-radius:8px; cursor:pointer;
}
#clearButton:hover{ background:#730606; color:#000000; }

#Howtobutton {
  position: relative; 
  background:#727272;
  color:#ffffff;
  border:2px solid #6f6f6f;
  padding:8px 16px;
  font-weight:700;
  border-radius:8px;
  cursor:pointer;
  z-index: 1000000; 
}
#Howtobutton:hover {
  background:#474646;
  color:#000000;
}


#Howtobutton::after {
  content: "Welcome to the fretboard visualizer.\A\AThis tool is designed to assist in songwriting.\A\AStep 1 – Use the recorder to record your piece of music and play it on loop.\A\AStep 2 – Play each note from a single string from open to 11. (Can be any string).\A\AStep 3 – Click which notes sound good with your piece of music.\A\AStep 4 – The Fretboard map tool will determine which key(s) your piece of music is in. This will allow you to write other parts that sound good with your original piece.\A\AThanks for using the Fretboard Visualizer!";
  
  position: fixed !important;
  bottom: 42%;
  left: 68%;
  transform: translateX(-50%);
  background: rgba(78, 78, 78, 0.95);
  color: #fcfcfc;
  padding: 18px 25px;
  border-radius: 12px;
  border: 2px solid #1ec14c;
  font-size: 1rem;
  font-weight: 600;
  width: min(90vw, 400px);
  line-height: 1.4;
  white-space: pre-wrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  text-shadow: 0 0 6px #262626, 0 0 12px #414645;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
  
  
  z-index: 2147483647 !important;
}

#Howtobutton:hover::after {
  opacity: 1;
  pointer-events: auto;
}




#recorder {
  position: absolute;
  top: 60px;
  right: 10px;
  z-index: 1000;
  background: linear-gradient(135deg, #222, #444);
  border: 2px solid #0983e0;
  color: #15ff00;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  padding: 12px 14px;
  text-align: center;
  font-family: Arial, sans-serif;
}

#recorder button {
  background: #0761c2;
  border: none;
  color: #ffffff;
  font-weight: bold;
  padding: 6px 10px;
  margin: 3px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#recorder button:hover {
  background: #0b57f0;
  color: #fff;
}

#recorder #loopBtn[disabled],
#recorder #stopBtn[disabled] {
  background: #555;
  color: #aaa;
  cursor: not-allowed;
}

#recorder #timer {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #00ffcc;
}





.note { font-size: 1rem; font-weight:700; text-shadow:0 0 1.5px currentColor;  }
.note[data-note="C"]  { color: #ff1744; }   
.note[data-note="C#"] { color: #ff4081; }   
.note[data-note="D"]  { color: #d500f9; }  
.note[data-note="Eb"] { color: #651fff; }   
.note[data-note="E"]  { color: #2979ff; }   
.note[data-note="F"]  { color: #00b0ff; }   
.note[data-note="F#"] { color: #00e5ff; }   
.note[data-note="G"]  { color: #00e676; }   
.note[data-note="Ab"] { color: #76ff03; }   
.note[data-note="A"]  { color: #a7d501; }   
.note[data-note="Bb"] { color: #f1be07; }   
.note[data-note="B"]  { color: #ff9100; }   


.hidden { display: none !important; }



#scaleDisplay {
  position: absolute;
  top: calc(100% + 20px); 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 1000px;
  background: transparent;
  z-index: 50;
}

body {
  overflow-y: overlay;
}


.fretboard-wrapper {
  position: relative;
  width: 1750px;         
  margin: 0 auto;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 1750px;      
}

#scaleDisplay {
  position: absolute;     
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1750px;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  z-index: 20;
}


html, body {
  overflow: overlay;              
  scrollbar-width: none;          
}

body::-webkit-scrollbar {
  width: 0px;                     
  height: 0px;
}