/* ══════════════════════════════════════
   BUTTON SPECIFICS
   (base .btn / .btn-ghost / .btn-option defined in base.css)

   data-variant attribute system (Phase 3):
     <button class="btn" data-variant="ghost">   → ghost style
     <button class="btn" data-variant="option">  → option style
     <button class="btn" data-variant="replay">  → replay style
     <button class="btn" data-variant="cta">     → main CTA style
   Old modifier classes kept as aliases so no stage JS breaks.
══════════════════════════════════════ */

/* ── data-variant aliases (new) ───────────────────────────────── */

.btn[data-variant="ghost"],
.btn-ghost {
  background: var(--plus1);
  color: var(--plus2);
  border: none;
}

.btn[data-variant="ghost"]:active,
.btn-ghost:active {
  background: var(--plus2);
  color: var(--plus1);
}

@media (hover: hover) {
  .btn[data-variant="ghost"]:hover,
  .btn-ghost:hover {
    background: var(--plus2);
    color: var(--plus1);
  }
}

.btn[data-variant="option"],
.btn-option {
  background: var(--plus1);
  color: var(--plus2);
  border: none;
  flex: 1;
  min-width: 100px;
  min-height: 52px;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.btn[data-variant="option"]:disabled,
.btn-option:disabled { cursor: default; }

.btn[data-variant="option"].selected,
.btn-option.selected { background: var(--plus2); color: var(--plus1); }

.btn[data-variant="option"].correct,
.btn-option.correct  { background: var(--ok); color: var(--plus1); }

.btn[data-variant="option"].wrong,
.btn-option.wrong    { background: var(--err); color: #fff; }

.btn[data-variant="replay"],
.btn-replay {
  font-size: 1.5rem;
  padding: 15px;
}

.btn[data-variant="cta"],
#start-btn.btn {
  max-width: 480px;
  padding: 25px;
  font-size: 2.5rem;
  font-weight: 400;
  margin: 0 auto;
  background: var(--bg2);
  color: #fff;
  text-transform: uppercase;
}


/* play-row — horizontal group of buttons */
.play-row { 
  display: flex; 
  gap: 0.5rem; 
  flex-wrap: wrap; 
}

/* phase nav row */
.lnav { 
  display: flex; 
  gap: 0.5rem; 
  justify-content: space-between; 
}

.lnav .btn,
.lnav .btn-ghost {
  flex: 1;
}

/* drag confirm full width */
#drag-confirm {
  min-height: 48px;
}
.drag-confirm:disabled,
#drag-confirm:disabled { 
  opacity: 0.5; 
  cursor: default; 
}

/* replay button in game over (override size) */
.btn-replay {
  font-size: 1.5rem;
  padding: 15px;
}

/* ── Solfège button flash feedback ─────────────────────────────────────── */
.opt--ok {
  background: var(--ok, #00FF88) !important;
  color: #000 !important;
  transition: background 0.1s;
}

.opt--err {
  background: var(--err, #FF2244) !important;
  color: #fff !important;
  transition: background 0.1s;
}