/* Shared styles for game templates */

/* ── Game Container: Three-Panel Layout ──── */

.game-container {
  display: flex;
  gap: 0;
  max-width: none;
  padding: var(--space-6);
}

.game-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* ── Settings Bar (above canvas) ───────── */

.game-settings-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-alpha);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.game-settings-bar .setting-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
}

.game-settings-bar .tutorial-link {
  margin-left: auto;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ── Keyboard shortcut legend ── */
.game-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  padding: 0 var(--space-1);
  font-family: var(--stage-font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--stage-mute, #7A7A82);
}

.game-shortcuts__label {
  font-weight: 700;
  letter-spacing: 0.2em;
}

.game-shortcuts kbd {
  font-family: inherit;
  font-size: 10px;
  color: var(--stage-ink, #E8E8EE);
  background: var(--stage-panel-deep, #1B1B1F);
  border: 1px solid #000;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 5px;
}

.game-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 0;
}

/* ── Stats Display ──────────────────────── */

/* Stats bar - horizontal at top of game area */
.game-stats-panel {
  background: var(--surface-alpha);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.game-stats-panel .stats-grid,
.game-stats-panel .stats-row-grid {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
}

.game-stats-panel .stat-item {
  text-align: center;
}

.game-stats-panel .stat-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.game-stats-panel .stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.stat-item {
  text-align: center;
  padding: 0.25rem 0;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.125rem;
}

.streak-fire {
  color: var(--warning) !important;
}

/* Compact stats bar (mobile only) */
.game-stats-bar {
  display: none;
}

/* ── Difficulty Pills ───────────────────── */

.difficulty-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* In the game header the pills sit beside the title: drop the legacy
   .difficulty-section margin/padding so the pills center with the title
   instead of riding above it on a 1.5rem bottom margin. */
.game-header .difficulty-pills {
  margin-bottom: 0;
  padding: 0;
  align-self: center;
}

.difficulty-pill {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  background: linear-gradient(180deg, var(--stage-panel-hi) 0%, var(--stage-panel) 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 1px 0 var(--stage-edge),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font-sans);
  font-weight: 500;
}

.difficulty-pill:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.difficulty-pill.active {
  background: var(--color-primary);
  color: #1a1714;
  border-color: var(--color-primary);
}

/* Pro-locked pill — clickable (opens upgrade overlay) but visually muted */
.difficulty-pill--locked {
  opacity: 0.55;
  border-style: dashed;
}

.difficulty-pill--locked .fa-lock {
  font-size: 9px;
  margin-right: 4px;
  opacity: 0.8;
}

.difficulty-pill--locked:hover {
  opacity: 0.8;
  color: var(--text-primary);
}

/* Keep old difficulty-btn and difficulty-section classes working */
.difficulty-section {
  margin-bottom: 1.5rem;
  padding: 0 0.5rem;
}

.difficulty-btn {
  background: var(--surface-alpha);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font-sans);
  font-weight: 500;
}

.difficulty-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.difficulty-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #1a1714;
}

/* ── Card base (shared by stats-card, audio-section, settings-card) ── */
.stats-card,
.audio-section,
.settings-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 1.5rem;
}

/* Stats Card */
.stats-card {
  padding: 1rem 1.25rem;
}

/* ── Audio Section ──────────────────────── */
.audio-section {
  padding: 1.75rem;
  text-align: center;
}

/* Play Button */
.play-btn {
  background: var(--color-primary);
  border: none;
  color: #1a1714;
  padding: 0.875rem 1.75rem;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0.5rem;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.play-btn:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 2px 8px rgba(94, 106, 210, 0.25);
  color: #ffffff;
}

.play-btn:active {
  box-shadow: none;
}

.play-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Feedback Text ──────────────────────── */
.feedback-text {
  text-align: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 14px;
  background: var(--surface-alpha);
  border: 1px solid transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.stage-lcd__value.feedback-text {
  color: var(--lcd-color);
  background: transparent;
}

.feedback-text.feedback-correct,
.feedback-correct {
  background: var(--surface-success);
  border-color: rgba(34, 197, 94, 0.12);
  color: var(--color-success);
  animation: feedbackPulse 0.3s ease;
}

.feedback-text.feedback-incorrect,
.feedback-incorrect {
  background: var(--surface-danger);
  border-color: rgba(239, 68, 68, 0.12);
  color: var(--color-danger);
  animation: feedbackShake 0.3s ease;
}

/* ── Settings Card ──────────────────────── */
.settings-card {
  padding: 1.25rem;
}

.setting-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.setting-group:last-child {
  margin-bottom: 0;
}

.setting-label {
  color: var(--text-primary);
  font-weight: 500;
}

.setting-control {
  display: flex;
  gap: 0.5rem;
}

.setting-btn {
  background: linear-gradient(180deg, var(--stage-panel-hi) 0%, var(--stage-panel) 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 1px 0 var(--stage-edge),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.setting-btn:active {
  transform: translateY(1px);
}

.setting-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #1a1714;
}

.setting-btn:hover {
  border-color: var(--border-hover);
}

/* ── Answer Buttons ─────────────────────── */
.answer-btn {
  background: linear-gradient(180deg, var(--stage-panel-hi) 0%, var(--stage-panel) 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 1px 0 var(--stage-edge),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.45);
  border-radius: var(--radius-md);
  padding: 12px;
  min-height: 44px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font-sans);
  position: relative;
}

.answer-btn:hover {
  background: linear-gradient(180deg, var(--stage-rail) 0%, var(--stage-panel-hi) 100%);
}

.answer-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.45);
}

.answer-btn.correct {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--color-success);
}

.answer-btn.incorrect {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--color-danger);
}

.answer-btn .btn-hint {
  display: block;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.2rem;
}

.answer-btn .key-hint {
  display: inline-block;
  background: var(--border-color);
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
  text-align: center;
  border-radius: 3px;
  position: absolute;
  top: 4px;
  right: 6px;
  opacity: 0.8;
}

/* Answer Buttons Container */
.answer-buttons {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.answer-buttons--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* ── Tutorial Link (right panel) ────────── */

.tutorial-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  border: 1px solid rgba(94, 106, 210, 0.2);
  color: var(--color-primary);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: var(--transition-fast);
  text-align: center;
  justify-content: center;
}

.tutorial-link:hover {
  background: rgba(94, 106, 210, 0.15);
}

/* Keep old tutorial-banner classes working */
.tutorial-banner {
  margin-bottom: 1.5rem;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  transition: border-color 0.15s ease;
}

.tutorial-banner:hover {
  border-color: var(--color-primary);
}

.tutorial-banner-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.625rem 1rem;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
}

.tutorial-banner-link .fa-book-open {
  color: var(--color-primary);
  font-size: 1rem;
}

.tutorial-banner-arrow {
  margin-left: auto;
  color: var(--color-primary);
  transition: transform 0.15s ease;
}

.tutorial-banner:hover .tutorial-banner-arrow {
  transform: translateX(3px);
}

/* ── Info Card ──────────────────────────── */
.info-card {
  background: var(--surface-alpha);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.875rem 1.25rem;
  margin-top: 1.5rem;
  text-align: center;
}

.info-card h5 {
  color: var(--color-primary);
  margin-bottom: 0.375rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-card p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.875rem;
}

/* ── Audio hint & replay spacing ────────── */

.audio-hint {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* ── Game-specific button overrides ──────── */

/* Interval training */
.interval-btn {
  font-size: inherit;
}

/* Chord & Scale identification */
.chord-btn,
.scale-btn {
  min-width: 140px;
  font-size: 1.1rem;
  padding: 1rem 2rem;
}

/* ── Time Trial ─────────────────────────── */

.time-trial-timer {
  display: none;
  text-align: center;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--surface-alpha);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.timer-display {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.timer-display .fa-stopwatch {
  font-size: 1.5rem;
}

.time-trial-timer.timer-urgent {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.time-trial-timer.timer-urgent .timer-display {
  color: var(--color-danger);
}

/* Time Trial Results - Fixed overlay */
.time-trial-results {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: rgba(10, 10, 12, 0.8);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.time-trial-results-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.time-trial-results h3 {
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

/* Session-end extras (Next-up card + anonymous signup prompt) */
.session-end-extras {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.session-nextup,
.session-signup {
  background: linear-gradient(180deg, var(--stage-panel-hi) 0%, var(--stage-panel) 100%);
  border: 1px solid #000;
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 0 var(--stage-edge),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.45);
  padding: 0.9rem 1rem;
}

.session-nextup__label {
  font-family: var(--stage-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--stage-mute);
  margin-bottom: 0.3rem;
}

.session-nextup__link {
  color: var(--stage-amber-bright);
  font-weight: 700;
  text-decoration: none;
}

.session-nextup__link:hover { text-decoration: underline; }

.session-nextup__note,
.session-signup__text {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
}

.session-signup__text { margin: 0 0 0.6rem; }

.session-signup__cta {
  display: inline-block;
  background: var(--color-primary);
  color: #1a1714;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  margin-right: 0.6rem;
}

.session-signup__dismiss {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
}

.time-trial-final-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.25rem;
}

.time-trial-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-trial-stat-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.time-trial-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

.tt-play-again-btn {
  background: var(--color-primary);
  border: none;
  color: #1a1714;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.tt-play-again-btn:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 2px 8px rgba(94, 106, 210, 0.25);
  color: #ffffff;
}

/* Leaderboard rank popup */
.leaderboard-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1040;
  background: rgba(10, 10, 12, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 1rem 2.5rem 1rem 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  animation: leaderboard-popup-in 0.3s ease;
}

.leaderboard-popup.dismissing {
  animation: leaderboard-popup-out 0.3s ease forwards;
}

@keyframes leaderboard-popup-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes leaderboard-popup-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

.leaderboard-popup-close {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}

.leaderboard-popup-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-primary);
  font-weight: 600;
}

.leaderboard-popup-content .fa-trophy {
  color: var(--color-warning);
  font-size: 1.2rem;
}

/* Note appearance animation */
@keyframes noteAppear {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.note-enter {
  animation: noteAppear 0.25s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .note-enter {
    animation: none;
  }
}

/* ── Staff SVG Display (STAGE LCD bay) ── */
.staff-display-wrapper {
  flex: 1;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.staff-display {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 170px;
  background: radial-gradient(ellipse at center, #2A1A03 0%, #150C01 70%, #0A0500 100%);
  border: 1px solid #000;
  border-radius: var(--stage-radius);
  box-shadow:
    inset 0 0 24px rgba(255, 176, 32, 0.2),
    inset 0 1px 0 #000;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.staff-display--wide {
  max-width: 720px;
  overflow-x: auto;
}

#staff-svg {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

/* Reset button */
.reset-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.reset-btn:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.08);
}

/* Icon-only reset button that lives in the game header */
.reset-btn--header {
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Section icon */
.section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  color: #fff;
}

.section-icon--primary   { background: var(--color-primary); color: #1a1714; }
.section-icon--mixed     { background: var(--color-primary); color: #1a1714; }
.section-icon--secondary { background: var(--color-secondary); }
.section-icon--accent    { background: var(--color-accent); color: #1a1714; }
.section-icon--warning   { background: var(--color-warning); color: #1a1714; }
.section-icon--success   { background: var(--color-success); color: #1a1714; }
.section-icon--danger    { background: var(--color-danger); }

/* ── Achievement Toast Notifications ── */

.achievement-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--color-primary);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  max-width: 340px;
}

.achievement-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.achievement-toast i {
  font-size: 1.5rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.achievement-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.achievement-toast-text strong {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.achievement-toast-text span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ── Focus States ──────────────────────── */

.difficulty-pill:focus-visible,
.difficulty-btn:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}

.play-btn:focus-visible,
.setting-btn:focus-visible,
.reset-btn:focus-visible,
.tt-play-again-btn:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* ── Animations ─────────────────────────── */

@keyframes feedbackPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes feedbackShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── Challenge Mode ───────────────────────── */

.challenge-mode-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  background: var(--surface-alpha);
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  font-weight: 600;
  font-size: 0.95rem;
}

.challenge-submit-btn {
  margin-left: auto;
}

.challenge-complete-banner {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  font-weight: 600;
  z-index: 1000;
  box-shadow: var(--shadow-dropdown);
}

/* ── Desktop (>1024px) ──────────────────── */

@media (min-width: 1024px) {
  .game-main .audio-section {
    padding: 2.5rem 2rem;
    border-radius: 12px;
  }

  .game-main .play-btn {
    padding: 1rem 2.25rem;
    font-size: 1.15rem;
  }

  .game-main .answer-buttons {
    gap: 0.75rem;
  }

  .game-main .answer-buttons--grid {
    max-width: none;
  }

  .game-main .staff-display-wrapper {
    min-height: 0;
    flex: 1 1 auto;
  }

  .game-main #staff-svg {
    max-height: 100%;
  }

  .game-main .staff-display {
    height: 100%;
    min-height: 100px;
    max-height: 160px;
    padding: 8px 16px;
  }
}

/* ── Short desktop viewport: compress before content overflows ── */

@media (min-width: 1024px) and (max-height: 850px) {
  .game-main {
    gap: var(--space-2);
  }
  .game-main .staff-display {
    min-height: 120px;
    max-height: 180px;
    padding: 12px 16px;
  }
  .game-settings-bar {
    padding: var(--space-1) var(--space-2);
  }
  .tutorial-banner { display: none; }
}

/* ── Mobile (<1024px) ───────────────────── */

@media (max-width: 1023px) {
  .game-container {
    flex-direction: column;
    padding: var(--space-3) var(--space-4);
    min-height: auto;
  }

  .game-main {
    width: 100%;
    gap: var(--space-2);
  }

  .game-header {
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
  }

  .game-title {
    font-size: 16px;
  }

  .game-stats-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
  }

  .game-stats-bar .stat-item {
    text-align: center;
  }

  .game-stats-bar .stat-value {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .game-stats-panel .stats-grid,
  .game-stats-panel .stats-row-grid {
    gap: var(--space-3);
  }
  .game-stats-panel .stat-value {
    font-size: 16px;
  }

  .answer-buttons {
    gap: 0.5rem;
  }

  .answer-btn {
    min-width: 80px;
    min-height: 44px;
    padding: 10px 10px;
    font-size: 13px;
  }

  .interval-btn {
    min-width: 100px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }

  .chord-btn,
  .scale-btn {
    min-width: 100px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }

  .setting-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .setting-control {
    width: 100%;
    flex-wrap: wrap;
  }

  .timer-display { font-size: 2rem; }
  .time-trial-final-stats { gap: 1rem; }
  .time-trial-stat-value { font-size: 1.5rem; }
  .time-trial-results-content { padding: 1.5rem; }

  .achievement-toast {
    bottom: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

@media (max-width: 576px) {
  .staff-display-wrapper {
    flex: none;
  }
}

@media (max-width: 480px) {
  .game-container {
    padding: 0.75rem 1rem;
  }
}

/* Compact layout for short viewports (stacked / mobile only) */
@media (max-width: 1023px) and (max-height: 768px) {
  .tutorial-banner { display: none; }
  .game-container {
    padding: 0.75rem 1rem;
  }
  .stats-card { padding: 0.75rem; margin-bottom: 0.75rem; }
  .stat-value { font-size: 1.4rem; }
  .stat-label { font-size: 0.7rem; }
  .difficulty-section { margin-bottom: 0.75rem; }
  .settings-card { padding: 1rem; margin-bottom: 0.75rem; }
  .audio-section { padding: 1.25rem; margin-bottom: 0.75rem; }
  .audio-section p { margin-bottom: 0.75rem !important; }
  .play-btn { padding: 0.6rem 1.5rem; font-size: 1rem; margin: 0.25rem; }
  .feedback-text { font-size: 1rem; padding: 0.6rem 1.5rem; }
  .answer-buttons { gap: 0.5rem; margin-bottom: 0.75rem; }
  .answer-btn { padding: 0.6rem 1.25rem; min-width: 110px; font-size: 1rem; }
  .answer-btn .btn-hint { font-size: 0.8rem; margin-top: 0.15rem; }
  .info-card { margin-top: 0.75rem; padding: 0.75rem 1rem; }
  .time-trial-timer { margin-bottom: 0.5rem; padding: 0.5rem; }
  .timer-display { font-size: 1.8rem; }
  .time-trial-results-content { padding: 1rem; }
  .interval-btn { padding: 0.5rem 1rem; min-width: 100px; font-size: 0.95rem; }
  .chord-btn,
  .scale-btn { padding: 0.6rem 1.25rem; min-width: 110px; font-size: 1rem; }
  .chord-btn .btn-hint,
  .scale-btn .btn-hint { font-size: 0.8rem; margin-top: 0.15rem; }
}

/* ── Share Button (stats panel) ───────── */

.stats-share-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-color);
}

.stats-share-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.stats-share-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Time Trial Results Action Row ─────── */

.tt-results-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.tt-share-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.tt-share-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Share Modal ──────────────────────── */

.share-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1060;
  background: rgba(10, 10, 12, 0.8);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.share-modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
}

.share-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  transition: color var(--transition-fast);
}

.share-modal-close:hover {
  color: var(--text-primary);
}

.share-modal-content h3 {
  color: var(--color-primary);
  margin-bottom: 1.25rem;
  font-size: 1.2rem;
}

.share-modal-score-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  margin-bottom: 1.25rem;
}

.share-preview-game {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.share-preview-stats {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
}

.share-preview-score {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.share-preview-accuracy {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-success);
}

.share-modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.share-btn-twitter {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--transition-fast);
}

.share-btn-twitter:hover {
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
}

.share-btn-copy {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.share-btn-copy:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.share-btn-copy.copied {
  border-color: var(--color-success);
  color: var(--color-success);
}

@media (max-width: 480px) {
  .tt-results-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .share-modal-actions {
    flex-direction: column;
  }
  .share-btn-twitter,
  .share-btn-copy {
    justify-content: center;
  }
}

/* ============================================================================
   STAGE overrides — re-skin game shell in the rack aesthetic.
   Targets legacy class names with stage tokens; preserves all element IDs and
   JS contracts.
   ============================================================================ */

.game-container {
  background:
    radial-gradient(circle at 1px 1px, var(--stage-panel) 1px, transparent 0),
    linear-gradient(180deg, #1F1F22 0%, #16161A 100%);
  background-size: 4px 4px, 100% 100%;
  border-radius: var(--stage-radius-panel);
}

.game-settings-bar {
  background: var(--stage-bevel-up);
  border: 1px solid #000;
  border-radius: var(--stage-radius-panel);
  box-shadow: var(--stage-shadow-up);
}

.game-main,
.canvas-card,
.stats-card,
.guide-card,
.answer-card {
  background: var(--stage-bevel-up);
  border: 1px solid #000;
  border-radius: var(--stage-radius-panel);
  box-shadow: var(--stage-shadow-up);
}

.game-stats-panel {
  background: var(--stage-bevel-up);
  border: 1px solid #000;
  border-radius: var(--stage-radius-panel);
  box-shadow: var(--stage-shadow-up);
  padding: 16px;
}

.stats-grid.stats-row-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.stage-lcd.stat-item {
  width: 100%;
  text-align: center;
  padding: 10px 12px;
}

.stage-lcd.stat-item .stage-lcd__label {
  text-align: left;
  font-family: var(--stage-font-mono);
  letter-spacing: 0.18em;
  font-size: 9px;
}

.stage-lcd.stat-item .stage-lcd__value {
  text-align: center;
  font-size: 22px;
}

#time-trial-timer {
  display: none;
  margin-bottom: 12px;
}
#time-trial-timer.active {
  display: block;
}


.difficulty-pill.difficulty-pill--locked {
  opacity: 0.6;
}

.feedback-text {
  font-family: var(--stage-font-lcd);
  font-size: 20px;
  letter-spacing: 0.04em;
}

.tutorial-link {
  text-decoration: none;
}

/* ── Segmented BPM readout ──────────────────────────────────────── */

.seg7-bpm {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--stage-radius, 2px);
  border: 1px solid #000;
  background: radial-gradient(ellipse at center, #2A1A03 0%, #150C01 70%, #0A0500 100%);
  box-shadow:
    inset 0 0 24px rgba(255, 176, 32, 0.2),
    inset 0 1px 0 #000,
    0 1px 0 rgba(51, 51, 58, 0.2);
  font-family: var(--stage-font-lcd, 'VT323', monospace);
  color: var(--stage-amber, var(--color-primary));
  line-height: 1;
}

.seg7-bpm__value {
  font-size: 28px;
  letter-spacing: 0.06em;
  min-width: 3ch;
  text-align: right;
  text-shadow:
    0 0 8px rgba(255, 176, 32, 0.8),
    0 0 16px rgba(255, 176, 32, 0.4);
}

.seg7-bpm__unit {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--stage-amber-dim, var(--color-primary-dark));
  text-transform: uppercase;
}

.seg7-bpm__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stage-amber, var(--color-primary));
  box-shadow: 0 0 6px var(--color-primary-glow, rgba(255, 176, 32, 0.6));
  animation: seg7-bpm-pulse calc(60s / var(--bpm, 100)) ease-in-out infinite;
}

@keyframes seg7-bpm-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  10% {
    opacity: 1;
    transform: scale(1.1);
  }
  40% {
    opacity: 0.4;
    transform: scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .seg7-bpm__dot { animation: none; opacity: 0.8; }
}

/* ============================================================================
   VIEWPORT-FIT LAYOUT
   Goal: stats + game area visible together without scrolling.
   ≥1024px → grid with right-side sidebar holding stats + settings.
   <1024px → existing stacked layout (compressed when short).
   ============================================================================ */

@media (min-width: 1024px) {
  .game-container {
    display: grid;
    grid-template-columns: minmax(0, 800px) 280px;
    grid-template-rows: auto;
    gap: var(--space-2) var(--space-6);
    justify-content: center;
    align-items: start;
    /* Rows must pack at the top. Default align-content stretches auto
       rows to fill the container, which created the giant gaps between
       the staff, feedback, and answer buttons. */
    align-content: start;
    position: relative;
  }

  /* Promote .game-main children to grid items so stats/settings can sit
     in the right column without DOM restructuring. */
  .game-main {
    display: contents;
  }

  /* All children default to col 1 so auto-placement never spills into the
     sidebar slot. Specific items below override to col 2. */
  .game-main > * {
    grid-column: 1;
  }

  /* Header spans full width at the top so col-1 content sits flush below it. */
  .game-main > .game-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Fallback: unwrapped panels get sidebar placement directly.
     (When JS wraps them, these selectors stop matching and the wrapper
     rules below take over.) */
  .game-main > .game-stats-panel {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    width: 280px;
  }
  .game-main > .game-settings-bar {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    width: 280px;
  }

  /* Sidebar wrapper (created by JS) holds stats + settings in column 2.
     It spans all rows so gameplay rows size to their own content only. */
  .game-main > .game-sidebar {
    grid-column: 2;
    grid-row: 2 / -1;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 280px;
  }
  .game-main > .game-sidebar > .game-stats-panel,
  .game-main > .game-sidebar > .game-settings-bar {
    width: 100%;
  }
  .game-main > .game-sidebar > .game-settings-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  /* Stats LCDs stack vertically inside the narrow sidebar. */
  .game-main .game-stats-panel .stats-grid.stats-row-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 8px;
  }

  /* Setting groups (label + control) stack vertically; controls stay row. */
  .game-main .game-settings-bar .setting-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    width: 100%;
  }

  .game-main .game-settings-bar .setting-control {
    flex-wrap: wrap;
    gap: var(--space-1);
    width: 100%;
  }

  .game-main .game-settings-bar .tutorial-link {
    margin-left: 0;
    justify-content: center;
  }

  /* The stats partial includes fixed-position overlays as siblings of the
     visible panel; ensure they don't claim a grid track if a browser ever
     places them. position:fixed already removes them from grid flow. */
  .game-main > #leaderboard-popup,
  .game-main > #time-trial-results,
  .game-main > #share-modal {
    grid-column: 1 / -1;
  }
}

/* Mobile landscape — aggressive compression so stats + game stay co-visible
   on devices like a phone held sideways (~375px tall). */
@media (max-height: 500px) and (orientation: landscape) {
  .tutorial-banner,
  .tutorial-link { display: none; }

  .game-container {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2) !important;
  }

  .game-title { font-size: 14px; }

  .game-stats-panel { padding: var(--space-2); }
  .game-stats-panel .stats-grid.stats-row-grid { gap: 4px; margin-bottom: 4px; }
  .stage-lcd.stat-item { padding: 4px 8px; }
  .stage-lcd.stat-item .stage-lcd__value { font-size: 14px; }
  .stage-lcd.stat-item .stage-lcd__label { font-size: 8px; }
  .stats-share-row { padding-top: var(--space-1); margin-top: var(--space-1); }
  .stats-share-btn { font-size: 11px; padding: 2px 8px; }

  .game-settings-bar { padding: var(--space-1) var(--space-2); gap: var(--space-2); }
  .game-settings-bar .setting-label { display: none; }
  .game-settings-bar .setting-btn,
  .setting-btn { padding: 4px 8px; font-size: 11px; }

  .staff-display-wrapper { min-height: auto; }
  #staff-svg { max-height: 100%; }
  .staff-display { height: 130px; padding: 12px; }

  .audio-section { padding: 0.5rem !important; }
  .play-btn { padding: 0.4rem 0.9rem !important; font-size: 0.85rem !important; }

  .feedback-text {
    min-height: 2rem;
    font-size: 13px;
    padding: var(--space-1) var(--space-3);
  }

  .answer-btn {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
  }
  .answer-btn .btn-hint { display: none; }

  .reset-btn { padding: 0.4rem 1rem; font-size: 0.85rem; }
}

/* Narrow-width settings collapse — icon-friendly density. */
@media (max-width: 480px) {
  .game-settings-bar { padding: var(--space-2); gap: var(--space-2); }
  .game-settings-bar .setting-label { font-size: 11px; }
  .setting-btn { padding: 4px 10px; font-size: 11px; }
}

/* ============================================================================
   Viewport-adaptive game sizing
   Applies to game pages only (elements the synth doesn't use). Uses
   viewport-relative units so content fits at ANY viewport height.
   ============================================================================ */

@media (min-width: 1024px) {
  /* Staff scales with viewport: always proportional, never pushes buttons out */
  .game-main .staff-display {
    height: clamp(90px, 20vh, 170px);
    min-height: 90px;
    max-height: 170px;
    padding: 10px 18px;
  }
  .game-main .staff-display-wrapper {
    min-height: 90px;
    flex: 0 1 auto;
  }

  /* Compact vertical rhythm */
  .game-main .answer-buttons {
    margin-top: 0.25rem;
    margin-bottom: 0.4rem;
    gap: 0.5rem;
  }
  .game-main .feedback-text {
    min-height: 2rem;
    padding: 0.35rem 1rem;
    font-size: 13px;
  }
  .game-main .game-header {
    margin-bottom: 0.25rem;
  }
  .game-title {
    font-size: 16px;
  }
}

/* Short viewports: aggressive compression */
@media (min-width: 1024px) and (max-height: 900px) {
  .game-main .staff-display {
    height: clamp(70px, 16vh, 130px);
    min-height: 70px;
    padding: 6px 14px;
  }
  .game-main .staff-display-wrapper {
    min-height: 70px;
  }
  .game-main .answer-btn {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 13px;
  }
  .game-main .feedback-text {
    min-height: 1.75rem;
    padding: 0.25rem 0.75rem;
    font-size: 12px;
  }
  .game-main .game-settings-bar {
    padding: 0.4rem 0.75rem;
  }
  .game-main .setting-btn {
    padding: 0.3rem 0.7rem;
    font-size: 12px;
  }
}

/* ============================================================================
   Difficulty-adaptive layout
   When advanced/time-trial modes show extra answer rows, the staff shrinks
   to make room. The .difficulty-* class is set by GameCommon.setDifficultyUI.
   ============================================================================ */



/* ============================================================================
   Snug gameplay stack: eliminate dead space between staff, feedback, buttons.
   These are the core gameplay elements — they sit directly against each other.
   ============================================================================ */

@media (min-width: 1024px) {
  .game-main .staff-display-wrapper {
    margin-bottom: 0;
  }
  .game-main .feedback-text {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .game-main .answer-buttons {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  /* Remove extra spacing from the grid rows holding gameplay elements */
  .game-container {
    row-gap: 0.25rem;
  }
}

/* ============================================================================
   Staff wrapper must fit content — no growth, no centering gap.
   ============================================================================ */

@media (min-width: 1024px) {
  .game-main .staff-display-wrapper {
    flex: 0 0 auto;
    min-height: 0;
    justify-content: flex-start;
    align-self: start;
  }
}

/* ============================================================================
   Game content column (created by JS): gameplay elements live in their own
   flex container so they pack tightly regardless of sidebar height.
   Without this, the spanning sidebar dictates the shared grid row height
   (e.g. 565px sidebar vs 202px staff = ~365px dead gap under the staff).
   ============================================================================ */

@media (min-width: 1024px) {
  .game-main > .game-content {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    /* Center each cluster (staff, feedback, answer rows) horizontally */
    align-items: center;
    /* A little breathing room between clusters */
    gap: var(--space-4);
    min-width: 0;
  }
  /* Clusters keep full width where they need it */
  .game-main > .game-content > .staff-display-wrapper,
  .game-main > .game-content > .answer-buttons {
    align-self: stretch;
  }
  .game-main > .game-content .staff-display {
    margin-left: auto;
    margin-right: auto;
  }
  .game-main > .game-content > * {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 0;
  }
  .game-main > .game-content .staff-display-wrapper {
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  /* Sidebar sits beside the content column in the same single row */
  .game-main > .game-sidebar {
    grid-row: 2;
  }
}

/* Short viewport: staff sizing shared by the reading games
   (consolidated from chord-reading / note-identification / scale-reading) */
@media (max-height: 850px) and (min-width: 577px) {
  .game-main .staff-display {
    min-height: 100px;
    max-height: 150px;
    padding: 10px 14px;
  }
}