/* ============================================
   RITHM - 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: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  background: var(--surface-alpha);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.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;
}

.root-btn.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

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

.quality-btn {
  min-width: 65px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.quality-btn.selected {
  background: var(--surface-primary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── 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; }
  .quality-btn { min-width: 55px; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
  .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; }
}