/* Gryf gitary (js/guitar-fretboard.js) */
.guitar-fretboard {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.guitar-fretboard__svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
  user-select: none;
}

.guitar-fretboard__board {
  fill: #fff;
  stroke: #b8b8b8;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.guitar-fretboard__inlay {
  fill: #dcdcdc;
}

.guitar-fretboard__fret {
  stroke: #c4c4c4;
  stroke-width: 2.2;
}

.guitar-fretboard__nut {
  fill: #555;
}

.guitar-fretboard__string {
  stroke: #8f8f8f;
}

.guitar-fretboard__fret-number {
  fill: var(--color-primary-gray);
  font-size: 13px;
  text-anchor: middle;
  dominant-baseline: central;
}

.guitar-fretboard__cell {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Na ekranach dotykowych :hover „przykleja się” po dotknięciu – bez podglądu kropki */
@media (hover: none) {
  .guitar-fretboard__cell:hover circle {
    opacity: 0;
  }
}

.guitar-fretboard__cell polygon {
  fill: transparent;
}

.guitar-fretboard__cell circle {
  fill: var(--color-primary);
  opacity: 0;
  pointer-events: none;
}

.guitar-fretboard__cell:hover circle {
  opacity: 0.35;
}

.guitar-fretboard__dots {
  pointer-events: none;
}

.guitar-fretboard__dot circle {
  fill: var(--fretboard-dot-color, var(--color-primary));
  stroke: #fff;
  stroke-width: 1.5;
}

.guitar-fretboard__dot--open circle {
  fill: #fff;
  stroke: var(--fretboard-dot-color, var(--color-primary));
  stroke-width: 2;
}

.guitar-fretboard__dot text {
  fill: #fff;
  font-size: 11px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: central;
}

.guitar-fretboard__dot--open text {
  fill: var(--fretboard-dot-color, var(--color-primary));
}

/* Kolory stopni (zmienne --chord-degree-* z style.css) */
.guitar-fretboard__dot--root { --fretboard-dot-color: var(--chord-degree-root-color, #014f86); }
.guitar-fretboard__dot--second { --fretboard-dot-color: var(--chord-degree-second-color, #795548); }
.guitar-fretboard__dot--third { --fretboard-dot-color: var(--chord-degree-third-color, #c62828); }
.guitar-fretboard__dot--fourth { --fretboard-dot-color: var(--chord-degree-fourth-color, #7b1fa2); }
.guitar-fretboard__dot--tritone { --fretboard-dot-color: var(--chord-degree-tritone-color, #222); }
.guitar-fretboard__dot--fifth { --fretboard-dot-color: var(--chord-degree-fifth-color, #7d9f00); }
.guitar-fretboard__dot--sixth { --fretboard-dot-color: var(--chord-degree-sixth-color, #0097a7); }
.guitar-fretboard__dot--seventh { --fretboard-dot-color: var(--chord-degree-seventh-color, #f57c00); }

.guitar-fretboard__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--color-primary-gray);
}

.guitar-fretboard__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.guitar-fretboard__legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.guitar-fretboard--readonly .guitar-fretboard__cell {
  cursor: default;
}

.guitar-fretboard--readonly .guitar-fretboard__cell:hover circle {
  opacity: 0;
}

/* Obrysy pozycji (np. pięć układów pentatoniki) – delikatne, pod kropkami */
.guitar-fretboard__outlines {
  pointer-events: none;
}

.guitar-fretboard__outline rect {
  fill: rgba(1, 79, 134, 0.09);
}

.guitar-fretboard__outline--alt rect {
  fill: rgba(245, 124, 0, 0.09);
}

.guitar-fretboard__outline--third rect {
  fill: rgba(15, 118, 110, 0.1);
}

.guitar-fretboard__outline text {
  fill: var(--color-primary-gray);
  font-size: 12px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Dźwięki w tle (np. skala tonacji pod arpeggiem) – małe puste kółka (inne niż markery progów), bez etykiety */
.guitar-fretboard__dot--ghost circle {
  fill: #fff;
  stroke: #8e98a3;
  stroke-width: 1.5;
}