/* =========================================
   LOCAL GAME STYLES: Find The Major Scale
   Builds on top of ../../shared/global.css
   ========================================= */

:root {
  --game-pink:        #f472b6;
  --game-pink-shadow: #db2777;

  /* Scale button colour tokens */
  --answer-scale1:        #0ea5e9;
  --answer-scale1-shadow: #0284c7;
  --answer-scale2:        #8b5cf6;
  --answer-scale2-shadow: #6d28d9;
}

/* ── Titles ─────────────────────────────────────────────── */
.gameMainTitle {
  text-align: center; font-size: 22px; font-weight: 900;
  color: var(--text-main); margin: 0; padding: 0 12px;
}
.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;
}

/* ── Panels ─────────────────────────────────────────────── */
.statusPanel { border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }

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

/* ── Status ─────────────────────────────────────────────── */
.statusRow  { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.statusText {
  text-align: center; width: 100%; background: var(--bg-base);
  padding: 16px; border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,0.05);
}
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; }
.feedbackLine { font-size: 16px; color: var(--text-muted); min-height: 24px; font-weight: 500; }
.feedbackLine strong {
  color: #fff; font-weight: 800; background: var(--accent);
  padding: 2px 6px; border-radius: 6px;
}

/* ── Controls row 1: icon buttons ───────────────────────── */
.actionsGrid {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
}
.actionsGrid .icon-btn {
  flex: 1;          /* equal share of row */
  height: 52px;
  padding: 0;
  font-size: 22px;
  min-width: 0;
}

/* ── Controls row 2: play + next ────────────────────────── */
.mainActionRow {
  display: flex;
  gap: 8px;
  width: 100%;
  padding-bottom: 4px;
}
.mainActionRow .flex-text-btn {
  flex: 1 1 0;
  padding: 0 6px;
  font-size: 14px;
  white-space: nowrap;
  min-width: 0;
}
.mainActionRow .next-btn {
  flex: 0 0 auto;
  min-width: 110px;
}

/* ── Disabled button override ───────────────────────────── */
/* Ensures play buttons are visibly greyed when disabled       */
.btn:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.4) !important;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* ── Scale button colours ───────────────────────────────── */
.btn-scale1 {
  background: var(--answer-scale1);
  color: #fff;
  border: 2px solid var(--answer-scale1-shadow);
  box-shadow: 0 4px 0 var(--answer-scale1-shadow);
}
.btn-scale2 {
  background: var(--answer-scale2);
  color: #fff;
  border: 2px solid var(--answer-scale2-shadow);
  box-shadow: 0 4px 0 var(--answer-scale2-shadow);
}

/* ── Play-button ready-pulse ────────────────────────────── */
/* Uses the same ringPulse animation as the Start Training    */
/* button (defined in global.css). --ringColor is overridden  */
/* per button so the ring matches each scale's colour.        */
/* .pulse class toggled by updateControls().                  */
.btn-scale1 { --ringColor: rgba(14, 165, 233, 0.55); }
.btn-scale2 { --ringColor: rgba(139, 92, 246, 0.55); }

/* ── Misc button variants ───────────────────────────────── */
.btn-pink {
  background: var(--game-pink); color: #fff;
  border: 2px solid var(--game-pink-shadow);
  box-shadow: 0 4px 0 var(--game-pink-shadow);
}
.default-btn { background: var(--bg-elevated); color: var(--text-main); box-shadow: 0 4px 0 #1e293b; }
.secondary-btn {
  background: var(--bg-base); color: var(--text-main);
  border: 2px solid var(--bg-elevated); box-shadow: 0 4px 0 var(--bg-elevated); font-size: 14px;
}
.secondary-btn:not(:disabled) { background: var(--bg-elevated); color: #fff; }

.next-btn { background: var(--bg-base); color: var(--text-main); border: 2px solid var(--bg-elevated); box-shadow: 0 4px 0 var(--bg-elevated); }
.nextReady {
  background: var(--next-orange) !important; color: #fff !important;
  border-color: var(--next-shadow) !important;
  box-shadow: 0 4px 0 var(--next-shadow) !important;
  animation: ringPulse 1.5s ease-in-out infinite;
}

/* ── Answer buttons ─────────────────────────────────────── */
.answerPanel  { padding: 0; background: transparent; border: none; box-shadow: none; }
.answerGrid   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.scaleAnswerBtn {
  background: var(--bg-surface);
  color: var(--text-main);
  border: 2px solid var(--bg-elevated);
  border-radius: var(--radius-sm);
  height: 64px;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 6px 0 var(--bg-elevated);
  cursor: pointer;
}
.scaleAnswerBtn:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 0 0 var(--bg-elevated); }

/* Answer feedback states */
.scaleAnswerBtn.correct {
  background: var(--info-teal) !important; border-color: var(--info-shadow) !important;
  color: #fff; box-shadow: 0 6px 0 var(--info-shadow) !important;
}
.scaleAnswerBtn.incorrect {
  background: var(--danger) !important; border-color: var(--danger-shadow) !important;
  color: #fff; box-shadow: 0 6px 0 var(--danger-shadow) !important;
}
/* "reveal" = correct answer shown when player guessed wrong */
.scaleAnswerBtn.reveal {
  background: var(--info-teal) !important; border-color: var(--info-shadow) !important;
  color: #fff; box-shadow: 0 6px 0 var(--info-shadow) !important;
  opacity: 0.75;
}

/* ── Piano Keyboard Section ─────────────────────────────── */
.keyboardSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scaleKbCard {
  background: var(--bg-surface);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 10px 12px 12px;
  box-shadow: var(--shadow-soft);
  transition: opacity 0.3s, filter 0.3s;
}
body.light-theme .scaleKbCard { border-color: rgba(0, 0, 0, 0.06); }

/* Greyed-out state applied to the INCORRECT scale's card after answering */
.scaleKbCard.greyed {
  opacity: 0.3;
  filter: grayscale(0.9);
}

.scaleKbLabel {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.scale1-label { color: var(--answer-scale1); }
.scale2-label { color: var(--answer-scale2); }

.kbMount { width: 100%; line-height: 0; overflow: hidden; }

.kbPlaceholder {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 0;
}

/* ── Score / Analysis ───────────────────────────────────── */
.analysis     { padding: 0; background: transparent; border: none; box-shadow: none; }
.analysisGrid { display: grid; }
.analysisCard {
  background: var(--bg-surface);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-soft);
}
body.light-theme .analysisCard { border-color: rgba(0, 0, 0, 0.05); }
.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-bottom: 4px; text-align: center; }
.scoreMeta        { text-align: center; font-size: 14px; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; }
.scoreActions     { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.scoreGrid        { display: grid; gap: 8px; }
.scoreGridVertical { grid-template-columns: 1fr; }
.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); }

/* ── Inputs ─────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]), select {
  width: 100%; height: 50px; background: var(--bg-base);
  border: 2px solid var(--bg-elevated); color: var(--text-main);
  border-radius: var(--radius-sm); padding: 0 16px;
  font-family: var(--font-main); font-size: 15px; font-weight: 700;
  outline: none; -webkit-appearance: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}