/* ============================================
   R.I.T.H.M - Chord Reading Game Styles
   Game-specific overrides on top of game-common.css
   ============================================ */

/* ── Audio Section ─────────────────────── */

.audio-section { text-align: center; margin-bottom: 0.25rem; }
.audio-section .play-btn { padding: 0.4rem 1.2rem; font-size: 0.85rem; }

/* ── Selection Indicator ───────────────── */

.selection-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.selection-part {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  background: var(--input-bg);
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.selection-part:not(:empty):not([data-empty]) { color: var(--text-primary); }

/* ── Answer Sections ───────────────────── */

.answer-section { margin-bottom: 0.5rem; text-align: center; }
.answer-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.35rem; font-weight: 600; }

.root-buttons, .quality-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── Root Buttons ──────────────────────── */

.root-btn {
  min-width: 50px; padding: 0.5rem 0.9rem; font-weight: 600; font-size: 1rem;
  border-radius: 8px; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; border: 2px solid var(--border-color);
  cursor: pointer; background: #f0efeb; color: #1b1b1e;
}
[data-theme="light"] .root-btn { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); border-color: #a0a09c; }
.root-btn:hover { background: #ffffff; border-color: var(--primary); box-shadow: 0 2px 8px rgba(74, 158, 111, 0.2); }
.root-btn:active { box-shadow: none; }
.root-btn.selected { background: var(--primary) !important; border-color: var(--primary) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(74, 158, 111, 0.3); }
.root-btn.correct { background: var(--success) !important; color: #1b1b1e !important; border-color: var(--success) !important; box-shadow: 0 2px 8px rgba(90, 173, 122, 0.3); }
.root-btn.incorrect { background: var(--danger) !important; color: #ffffff !important; border-color: var(--danger) !important; }

/* ── Quality Buttons ───────────────────── */

.quality-btn {
  min-width: 65px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.95rem;
  border-radius: 8px; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; border: 2px solid var(--border-color);
  cursor: pointer; background: var(--input-bg); color: var(--text-primary);
}
.quality-btn:hover { border-color: var(--secondary); box-shadow: 0 2px 8px rgba(90, 173, 122, 0.2); }
.quality-btn:active { box-shadow: none; }
.quality-btn.selected { background: var(--secondary) !important; border-color: var(--secondary) !important; color: #1b1b1e !important; box-shadow: 0 2px 8px rgba(90, 173, 122, 0.3); }
.quality-btn.correct { background: var(--success) !important; color: #1b1b1e !important; border-color: var(--success) !important; box-shadow: 0 2px 8px rgba(90, 173, 122, 0.3); }
.quality-btn.incorrect { background: var(--danger) !important; color: #ffffff !important; border-color: var(--danger) !important; }

/* ── Responsive ──────────────────────── */

@media (max-width: 576px) {
  .root-btn { min-width: 42px; padding: 0.5rem 0.7rem; font-size: 0.95rem; }
  .quality-btn { min-width: 55px; padding: 0.5rem 0.75rem; font-size: 0.85rem; }
  .root-buttons, .quality-buttons { gap: 0.4rem; }
}

@media (max-height: 700px) and (min-width: 577px) {
  .root-buttons, .quality-buttons { gap: 0.3rem; }
  .root-btn { min-width: 42px; padding: 0.3rem 0.6rem; font-size: 0.9rem; border-radius: 6px; }
  .quality-btn { min-width: 55px; padding: 0.3rem 0.7rem; font-size: 0.85rem; border-radius: 6px; }
  .answer-section { margin-bottom: 0.3rem; }
  .answer-label { margin-bottom: 0.2rem; font-size: 0.7rem; }
  .selection-indicator { margin-bottom: 0.3rem; }
  .selection-part { padding: 0.2rem 0.5rem; font-size: 0.85rem; min-width: 50px; }
}