/* ═══════════════════════════════════════════════
   AKKORDE-TRAINER – akkorde.css
   Ergänzt diktat.css + intervall.css
═══════════════════════════════════════════════ */

/* ── Schreiben: Klick-Overlay ── */
#write-overlay {
  position:      absolute;
  inset:         0;
  cursor:        crosshair;
  border-radius: 6px;
  z-index:       10;
  background:    rgba(233,69,96,0.04);
  border:        2px dashed #e94560;
  touch-action:  none;
}

#write-overlay:hover {
  background: rgba(233,69,96,0.09);
}

#snap-indicator {
  height: 3px;
}

.write-action-row {
  flex-wrap: wrap;
}

.btn-secondary { background: #3a3f5c; color: #fff; }

#acc-button-row {
  justify-content: center;
  margin-bottom:   12px;
}

#btn-remove-note:disabled,
#btn-clear-notes:disabled {
  opacity: 0.4;
  cursor:  default;
}

/* ── Lesen: Auswahl-Panel ── */
.chord-panel {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.chord-row-label {
  font-size:      0.75rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          #7a7f9a;
  margin-bottom:  6px;
  text-align:     left;
}

.chord-row-buttons {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.chord-opt {
  flex:            1 1 var(--basis, 0);
  min-width:       0;
  min-height:      46px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      #0f3460;
  color:           #e0e0e0;
  border:          2px solid transparent;
  border-radius:   10px;
  padding:         0.4rem 0.25rem;
  font-size:       1rem;
  font-weight:     600;
  line-height:     1.15;
  overflow-wrap:   anywhere;
  hyphens:         auto;
  cursor:          pointer;
  transition:      background 0.15s, border-color 0.15s, transform 0.1s;
  text-align:      center;
  -webkit-tap-highlight-color: transparent;
  touch-action:    manipulation;
}

.chord-row-acc .chord-opt {
  font-size:   1.4rem;
  font-weight: 400;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "DejaVu Sans", sans-serif;
}

.chord-row-buttons.dense .chord-opt {
  font-size:     0.85rem;
  padding:       0.4rem 0.1rem;
  white-space:   nowrap;
  overflow-wrap: normal;
  hyphens:       none;
}

@media (hover: hover) {
  .chord-opt:hover:not(:disabled):not(.selected) {
    background:   #1a4a80;
    border-color: #e94560;
  }
}

.chord-opt.selected {
  background:   #e94560;
  border-color: #e94560;
  color:        #fff;
}

.chord-opt.correct {
  background:   #27ae60;
  border-color: #2ecc71;
  color:        #fff;
}

.chord-opt.wrong {
  background:   #c0392b;
  border-color: #e74c3c;
  color:        #fff;
}

.chord-opt.reveal {
  background:   #27ae60;
  border-color: #2ecc71;
  color:        #fff;
  opacity:      0.75;
}

.chord-opt:disabled { cursor: default; }

.chord-panel-actions {
  display:         flex;
  justify-content: center;
  margin-top:      4px;
}

.chord-panel-actions .action-btn {
  width: 100%;
}

.solution-text {
  text-align:  center;
  font-weight: 700;
  color:       #2ecc71;
  min-height:  0;
}

.solution-text:not(:empty) {
  margin-top: 12px;
}

/* ── Game-Over-Snapshot ── */
.go-snapshot-wrap #write-overlay,
.go-snapshot-wrap #chord-panel,
.go-snapshot-wrap #answer-buttons {
  display: none !important;
}

@media (max-width: 600px) {
  .chord-opt {
    font-size: 0.85rem;
  }

  .chord-row-li .chord-opt {
    font-size: 1rem;
  }

  .chord-row-acc .chord-opt {
    font-size: 1.3rem;
  }

  .chord-row-buttons.dense .chord-opt {
    font-size: 0.74rem;
  }
}