/* =========================================
   LOCAL GAME STYLES: Simple Chord Progressions — C Major
   ========================================= */

:root {
  --game-purple:       #a78bfa;
  --game-purple-shadow:#7c3aed;
  --game-pink:         #f472b6;
  --game-pink-shadow:  #db2777;
  --game-orange:       #fb923c;
  --game-orange-shadow:#c2410c;
}

/* ── Layout panels ───────────────────────────────────────────── */
.controlsPanel, .answerPanel, .analysisCard {
  background:    var(--bg-surface);
  border:        2px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding:       8px 8px;
  padding-bottom: 12px;
  box-shadow:    var(--shadow-soft);
}
body.light-theme .controlsPanel,
body.light-theme .answerPanel,
body.light-theme .analysisCard { border-color: rgba(0, 0, 0, 0.05); }

/* ── Game titles ─────────────────────────────────────────────── */
.gameMainTitle {
  text-align:  center;
  font-size:   22px;
  font-weight: 900;
  color:       var(--text-main);
  margin:      0;
  padding:     0 12px;
  padding-bottom: 8px;
  line-height: 0.8;
}
.modalGameTitle {
  text-align:      center;
  font-size:       22px;
  font-weight:     900;
  margin-bottom:   10px;
  text-transform:  uppercase;
  letter-spacing:  0.4px;
  line-height:     1.2;
}
.modalGameSubtitle {
  text-align:     center;
  font-size:      18px;
  font-weight:    900;
  margin-bottom:  10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.gameSubTitle {
  text-align:  center;
  font-size:   18px;
  font-weight: 900;
  color:       var(--text-main);
  margin:      0;
  padding:     0 12px;
  padding-bottom: 8px;
  line-height: 0.4;
}

/* ── Status area ─────────────────────────────────────────────── */
.statusText {
  text-align:    center;
  background:    var(--bg-base);
  padding:       16px;
  border-radius: var(--radius-sm);
  border:        2px solid rgba(255,255,255,0.05);
  margin-bottom: 14px;
}
body.light-theme .statusText { border-color: rgba(0,0,0,0.05); }
.phaseTitle {
  font-size:   22px;
  font-weight: 900;
  color:       var(--text-main);
  margin-bottom: 6px;
  transition:  color 0.3s ease;
}
.feedbackLine {
  font-size:  16px;
  color:      var(--text-muted);
  min-height: 24px;
  font-weight:500;
}

/* ── Controls panel rows ─────────────────────────────────────── */
.actionsRow { display: flex; gap: 8px; }
.actionsRow-top    { margin-bottom: 10px; }
.actionsRow-bottom { }

.icon-btn      { flex: 1; height: 52px; padding: 0; font-size: 22px; }
.flex-text-btn { flex: 1 1 0; padding: 0 4px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#beginBtn { flex: 0 0 auto; padding: 0 12px; overflow: visible; }

/* ── Button colours ──────────────────────────────────────────── */
.btn-purple {
  background:  var(--game-purple);
  color:       #fff;
  border:      2px solid var(--game-purple-shadow);
  box-shadow:  0 4px 0 var(--game-purple-shadow);
}
.btn-purple:active:not(:disabled) { box-shadow: 0 0px 0 var(--game-purple-shadow); transform: translateY(4px); }

.btn-blue {
  background:  #3b82f6;
  color:       #fff;
  border:      2px solid #1d4ed8;
  box-shadow:  0 4px 0 #1d4ed8;
}
.btn-blue:active:not(:disabled) { box-shadow: 0 0px 0 #1d4ed8; transform: translateY(4px); }

.btn-pink {
  background:  var(--game-pink);
  color:       #fff;
  border:      2px solid var(--game-pink-shadow);
  box-shadow:  0 4px 0 var(--game-pink-shadow);
}
.btn-pink:active:not(:disabled) { box-shadow: 0 0px 0 var(--game-pink-shadow); transform: translateY(4px); }

.btn-orange {
  background:  var(--game-orange);
  color:       #fff;
  border:      2px solid var(--game-orange-shadow);
  box-shadow:  0 4px 0 var(--game-orange-shadow);
}
.btn-orange:active:not(:disabled) { box-shadow: 0 0px 0 var(--game-orange-shadow); transform: translateY(4px); }

.next-btn {
  background:    var(--next-orange);
  color:         var(--text-main);
  border:        2px solid var(--next-shadowd);
  box-shadow:    0 4px 0 var(--next-shadow);
  flex:          1;
}
.next-btn:disabled {
  opacity:       0.45;
  cursor:        not-allowed;
}

.nextReady {
  background:    var(--next-orange) !important;
  color:         #fff !important;
  border-color:  var(--next-shadow) !important;
  box-shadow:    0 4px 0 var(--next-shadow) !important;
  --ringColor:   rgba(255, 127, 42, 0.4);
  animation:     ringPulse 1.5s ease-in-out infinite;
}
.nextReady:active:not(:disabled) { box-shadow: 0 0px 0 var(--next-shadow) !important; transform: translateY(4px); }

/* ── Chord tiles grid ────────────────────────────────────────── */
.chordTilesGrid {
  display:        flex;
  flex-wrap:      nowrap;
  gap:            6px;
  margin-bottom:  14px;
}

.chord-tile {
  flex:           1 1 0;
  min-width:      0;
  background:     var(--bg-surface);
  color:          var(--text-main);
  border:         2px solid var(--bg-elevated);
  border-radius:  var(--radius-sm);
  height:         72px;
  font-weight:    900;
  box-shadow:     0 6px 0 var(--bg-elevated);
  cursor:         pointer;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  gap:            3px;
  padding:        4px 2px;
  overflow:       hidden;
  transition:     transform 0.1s, box-shadow 0.1s, background 0.15s, opacity 0.2s;
}
.chord-tile:active:not(:disabled) {
  transform:  translateY(6px);
  box-shadow: 0 0 0 var(--bg-elevated);
}
.chord-tile:not(:disabled):hover {
  background:  var(--bg-elevated);
  border-color:var(--accent-shadow);
}
.chord-tile:disabled:not(.tile-inactive) { opacity: 0.55; cursor: default; }

/* Inactive chords (ii, iii, viio) — always greyed */
.tile-inactive {
  opacity:    0.35;
  cursor:     default;
  box-shadow: none;
}

.chord-tile-roman {
  font-family: Georgia, 'Times New Roman', serif;
  font-size:   clamp(9px, 2.2vw, 13px);
  font-weight: 700;
  color:       var(--text-muted);
  letter-spacing: 0.5px;
  line-height: 1;
}
.chord-tile-name {
  font-size:   clamp(12px, 3.8vw, 22px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   100%;
}

/* ── Answer slots ────────────────────────────────────────────── */
.answerSlotsRow {
  display:        flex;
  gap:            6px;
  margin-bottom:  12px;
}

.answer-slot {
  flex:           1 1 0;
  min-width:      0;
  background:     var(--bg-base);
  border:         2px dashed var(--bg-elevated);
  border-radius:  var(--radius-sm);
  height:         62px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  gap:            3px;
  font-weight:    900;
  overflow:       hidden;
  transition:     background 0.2s, border-color 0.2s;
}
.answer-slot.empty {
  color:       var(--text-muted);
  font-size:   18px;
  opacity:     0.4;
}
.answer-slot.filled {
  background:  var(--bg-elevated);
  border:      2px solid var(--accent);
  border-style:solid;
}

/* Reveal colour coding */
.answer-slot.slot-correct {
  background:  var(--info-teal);
  border-color:var(--info-shadow);
  color:       #fff;
}
.answer-slot.slot-wrong {
  background:  var(--danger);
  border-color:var(--danger-shadow);
  color:       #fff;
}

.slot-roman {
  font-family: Georgia, 'Times New Roman', serif;
  font-size:   clamp(8px, 2vw, 11px);
  font-weight: 700;
  color:       var(--text-muted);
  line-height: 1;
  letter-spacing: 0.5px;
}
.answer-slot.slot-correct .slot-roman,
.answer-slot.slot-wrong   .slot-roman { color: rgba(255,255,255,0.8); }
.answer-slot.filled .slot-roman       { color: var(--text-muted); }

.slot-name {
  font-size:   clamp(12px, 3.5vw, 20px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   100%;
}

/* ── Delete + Submit row ─────────────────────────────────────── */
.submitRow {
  display:      flex;
  gap:          8px;
  margin-top:   4px;
}
.delete-btn {
  flex:         0 0 auto;
  background:   var(--bg-elevated);
  color:        var(--text-muted);
  border:       2px solid #334155;
  box-shadow:   0 4px 0 #1e293b;
  font-size:    13px;
  padding:      0 12px;
}
.delete-btn:active:not(:disabled) { box-shadow: 0 0 0 #1e293b; transform: translateY(4px); }
.submit-btn {
  flex:         1;
  background:   var(--accent);
  color:        #fff;
  border:       2px solid var(--accent-shadow);
  box-shadow:   0 4px 0 var(--accent-shadow);
  font-size:    15px;
  font-weight:  900;
}
.submit-btn:active:not(:disabled) { box-shadow: 0 0 0 var(--accent-shadow); transform: translateY(4px); }
.submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Reveal panel ────────────────────────────────────────────── */
.revealPanel { margin-top: 0; }

.revealSection {
  background:    var(--bg-surface);
  border:        2px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding:       16px;
  margin-bottom: 12px;
  box-shadow:    var(--shadow-soft);
}
body.light-theme .revealSection { border-color: rgba(0,0,0,0.05); }

.revealSectionTitle {
  font-size:     13px;
  font-weight:   800;
  color:         var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.7px;
  margin-bottom: 10px;
}

.pianoWrap {
  background:    var(--bg-base);
  border:        2px solid var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding:       10px;
  margin-bottom: 10px;
}

.revealBtnRow {
  display: flex;
  gap:     8px;
}

.show-btn {
  flex:          1;
  height:        44px;
  background:    var(--info-teal);
  color:         #fff;
  border:        2px solid var(--info-shadow);
  box-shadow:    0 4px 0 var(--info-shadow);
  border-radius: var(--radius-sm);
  font-size:     14px;
  font-weight:   900;
  cursor:        pointer;
  transition:    opacity 0.2s;
}
.show-btn:active:not(:disabled) { box-shadow: 0 0 0 var(--info-shadow); transform: translateY(4px); }
.show-btn:disabled { opacity: 0.5; cursor: default; }

.show-btn.show-user {
  background:    #3b82f6;
  border-color:  #1d4ed8;
  box-shadow:    0 4px 0 #1d4ed8;
}
.show-btn.show-user:active:not(:disabled) { box-shadow: 0 0 0 #1d4ed8; }

/* ── Reveal answer slots (in reveal panel) ───────────────────── */
.revealSeqRow {
  display:       flex;
  gap:           6px;
  margin-bottom: 12px;
}

/* ── Scorecard ───────────────────────────────────────────────── */
.analysis { padding: 0; background: transparent; border: none; box-shadow: none; }
.scoreCardNarrow { max-width: 100%; }
.inside-modal { background: transparent; border: none; box-shadow: none; padding: 0; }

.analysisLabel {
  font-size:   18px;
  font-weight: 900;
  color:       var(--text-main);
  margin-top:  12px;
  margin-bottom:4px;
  text-align:  center;
}

.scoreGrid { display: grid; gap: 8px; }
.scoreItem {
  display:        flex;
  justify-content:space-between;
  align-items:    center;
  padding:        10px 14px;
  background:     var(--bg-base);
  border-radius:  var(--radius-sm);
  border:         2px solid var(--bg-elevated);
}
.scoreK { font-size: 13px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.scoreV { font-size: 20px; font-weight: 900; }
.text-correct   { color: var(--info-teal); }
.text-incorrect { color: var(--danger); }
.text-accent    { color: var(--accent); }

/* ── Intro modal chord reference cards ───────────────────────── */
.chordRefGrid {
  display:        flex;
  flex-wrap:      nowrap;
  gap:            5px;
  justify-content:center;
  margin:         14px 0 12px;
}
.chordRefCard {
  flex:           1 1 0;
  min-width:      0;
  background:     var(--bg-base);
  border:         2px solid var(--bg-elevated);
  border-radius:  var(--radius-sm);
  padding:        6px 2px;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  gap:            3px;
  overflow:       hidden;
}
.chordRefCard.ref-inactive { opacity: 0.4; }
.chordRefRoman {
  font-family: Georgia, 'Times New Roman', serif;
  font-size:   12px;
  font-weight: 900;
  color:       var(--text-muted);
}
.chordRefName {
  font-size:   clamp(11px, 3.5vw, 18px);
  font-weight: 900;
  color:       var(--text-main);
  line-height: 1;
}
.chordRefActive {
  font-size:   10px;
  font-weight: 700;
  color:       var(--info-teal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chordRefCard.ref-inactive .chordRefActive { visibility: hidden; }