/* ear-cosmic.css — cosmic re-skin for ear-training.php, matched 1:1 to the
   Claude Design handoff (ear-styles.css / ear-training.jsx). Loaded AFTER
   ear-training/css/ear-training.css so it overrides it.

   This is a presentation layer over the REAL engine: it reflows the engine's
   existing sections into the handoff's layout (centered title → two-card
   .et-main → piano dock) and restyles the real surfaces onto the shared cosmic
   theme tokens. It never changes engine ids, data, or JS. The only added markup
   is the additive "This session" stat block in the Setup card, which
   js/ear-session-stats.js fills from the engine's OWN quiz results. All rules
   are gated on .has-cosmic-shell. Design values come straight from the handoff
   ear-styles.css; the cosmic tokens (--surface, --accent, --cta, …) come from
   js/cosmic-shell.js. */

/* ── 0. Tokens the handoff uses that cosmic-shell.js doesn't emit ───────────*/
.has-cosmic-shell {
  --shadow-card: 0 18px 50px -28px rgba(0, 0, 0, .7);
  --cta-glow: 0 14px 38px -16px color-mix(in srgb, var(--accent) 70%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--line));
  --line-strong: color-mix(in srgb, var(--ink) 16%, transparent);
  --track: color-mix(in srgb, var(--ink) 14%, transparent);
}

/* ── 1. Shell: hide the legacy menu, show the cosmic bg, clear the rail ─────*/
.has-cosmic-shell .header { display: none !important; }
.has-cosmic-shell body {
  background: transparent;
  font-family: var(--font-body, 'Geist', system-ui, sans-serif);
  color: var(--ink);
}
.has-cosmic-shell .app-container {
  position: relative; z-index: 1; padding-left: 66px; background: transparent;
}
/* the handoff's .et-shell: a centered single column */
.has-cosmic-shell .main-content {
  max-width: 1040px; margin: 0 auto; padding: 8px 22px 40px;
  background: transparent !important;
}

/* ── 2. Hero → centered title strip ────────────────────────────────────────*/
.has-cosmic-shell .ear-training-hero {
  padding: 10px 16px 4px; margin-bottom: 10px; text-align: center; overflow: visible;
}
.has-cosmic-shell .ear-training-hero::before { display: none; }
.has-cosmic-shell .hero-content {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; max-width: 700px; margin: 0 auto;
}
.has-cosmic-shell .et-eyebrow {
  display: inline-block; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  padding: 6px 13px; margin-bottom: 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}
.has-cosmic-shell .hero-title {
  font-family: var(--font-display); font-style: var(--display-style); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 48px) !important; line-height: 1.05; letter-spacing: -.01em;
  margin: 0 0 12px !important; color: var(--ink) !important;
  -webkit-text-fill-color: currentColor; background: none !important;
}
.has-cosmic-shell .hero-title em {
  font-style: var(--display-style); color: var(--accent);
  background: var(--cta); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.has-cosmic-shell .hero-subtitle {
  color: var(--sub) !important; font-size: 15px; line-height: 1.6;
  max-width: 600px; margin: 0 auto !important;
}

/* ── 3. THE REFLOW: .training-container → the handoff's .et-main grid ───────
   Setup (left, 320px) · Questions (right, fluid); assignment / notation /
   piano span full width. Cards stretch to equal height (stats pin to bottom). */
.has-cosmic-shell .training-container {
  max-width: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px; align-items: stretch;
}
.has-cosmic-shell .assignment-context-card,
.has-cosmic-shell #notation-container,
.has-cosmic-shell #notation-section,
.has-cosmic-shell .piano-section { grid-column: 1 / -1; }
.has-cosmic-shell .control-section { grid-column: 1; }
.has-cosmic-shell .answer-section { grid-column: 2; }

/* ── 4. Cards (the handoff's .card) ────────────────────────────────────────*/
.has-cosmic-shell .control-section,
.has-cosmic-shell .answer-section,
.has-cosmic-shell .assignment-context-card {
  position: relative;
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: 18px !important; box-shadow: var(--shadow-card) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  padding: 17px !important; margin-bottom: 0 !important; color: var(--ink) !important;
  display: flex; flex-direction: column; overflow: hidden;
}

/* card header (.card-h): an icon + title. Setup uses a CSS sliders icon. */
.has-cosmic-shell .control-section::before {
  content: "Training Setup";
  display: flex; align-items: center; min-height: 18px;
  padding-left: 25px; margin-bottom: 14px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: .02em;
  color: var(--ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23a35bff' stroke-width='1.8' stroke-linecap='round'><path d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M18 18h2'/><circle cx='15' cy='6' r='2.2'/><circle cx='9' cy='12' r='2.2'/><circle cx='15' cy='18' r='2.2'/></svg>");
  background-repeat: no-repeat; background-position: left center; background-size: 17px 17px;
}

/* 4a. Setup card: stack the four real selects as .field rows. */
.has-cosmic-shell .control-header { display: block !important; margin: 0 !important; }
.has-cosmic-shell .dropdowns-container {
  flex-direction: column !important; gap: 11px !important; justify-content: flex-start !important;
}
.has-cosmic-shell .dropdown-group {
  min-width: 0 !important; max-width: none !important; gap: 11px !important;
}
.has-cosmic-shell .dropdown-spacer { margin-top: 0 !important; }
.has-cosmic-shell .dropdown-group > div { display: flex; flex-direction: column; gap: 6px; }
.has-cosmic-shell .dropdown-group label {
  font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .05em;
  text-transform: uppercase; color: var(--sub) !important; margin: 0 !important;
}

/* selects (.sel) */
.has-cosmic-shell .mode-select {
  -webkit-appearance: none; appearance: none;
  width: 100% !important; max-width: none !important; height: 40px;
  padding: 0 36px 0 14px !important; font-size: 14px; font-weight: 500; cursor: pointer;
  color: var(--ink) !important; border: 1px solid var(--line-strong) !important;
  border-radius: 12px !important; background-color: var(--surface-2) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path fill='%23888' d='M0 0h11L5.5 7z'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important;
}
.has-cosmic-shell .mode-select:focus {
  outline: none; border-color: var(--accent-line) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
/* Native option list: force a high-contrast theme pair (the engine's base sets
   a dark option background). */
.has-cosmic-shell .mode-select option,
.has-cosmic-shell .control-select option {
  background-color: var(--bg2, #15131f) !important; color: var(--ink, #f3efff) !important;
}

/* 4b. Settings gear (#settings-icon — opens the REAL perfect-pitch dialog):
   keep it functional but tuck it into the card's top-right corner. */
.has-cosmic-shell .control-header > div:last-child { display: contents; }
.has-cosmic-shell #settings-icon {
  position: absolute !important; top: 13px !important; right: 13px !important;
  width: 34px !important; height: 34px !important; margin: 0 !important;
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  border: 1px solid var(--line) !important; box-shadow: none !important;
}
.has-cosmic-shell #settings-icon:hover {
  background: var(--cta) !important; transform: none !important;
  box-shadow: var(--cta-glow) !important;
}
/* line-height:1 + block so the cog's box hugs the glyph — otherwise it inherits
   the panel line-height and the icon sits off-centre in its circle. */
.has-cosmic-shell #settings-icon i { font-size: 1rem !important; color: var(--ink) !important; line-height: 1 !important; display: block !important; }
.has-cosmic-shell #settings-icon:hover i { color: #fff !important; }

/* 4c. "This session" stat block (additive markup, real data) */
.has-cosmic-shell .et-session { margin-top: auto; }
.has-cosmic-shell .setup-div { height: 1px; background: var(--line); margin: 16px 0 12px; }
.has-cosmic-shell .setup-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.has-cosmic-shell .setup-sub { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sub); }
.has-cosmic-shell .reset-link {
  appearance: none; border: 0; background: transparent; color: var(--sub); font: inherit;
  font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.has-cosmic-shell .reset-link:hover { color: var(--ink); }
.has-cosmic-shell .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.has-cosmic-shell .stat {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px;
}
.has-cosmic-shell .stat .v {
  font-family: var(--font-display); font-style: var(--display-style); font-size: 23px;
  line-height: 1; color: var(--ink);
}
.has-cosmic-shell .stat .k { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); margin-top: 4px; }
.has-cosmic-shell .acc-bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; margin-top: 10px; }
.has-cosmic-shell .acc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--cta); transition: width .4s ease; }

/* ── 5. Questions card ─────────────────────────────────────────────────────*/
.has-cosmic-shell .answer-section { gap: 0; justify-content: flex-start; text-align: left; }
/* the engine's two sub-wrappers become seamless sections of the one card */
.has-cosmic-shell #qa-questions-wrapper,
.has-cosmic-shell #qa-answers-wrapper,
.has-cosmic-shell #study-mode-content {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 0 14px !important;
}
.has-cosmic-shell #qa-answers-wrapper { margin-bottom: 0 !important; }
/* the wrapper h3 "Questions" / "Select Your Answer" → handoff card-h / answer-head */
.has-cosmic-shell #qa-questions-wrapper > h3 {
  display: flex !important; align-items: center; gap: 9px; justify-content: flex-start !important;
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: .02em;
  color: var(--ink) !important; margin: 0 0 12px !important;
}
.has-cosmic-shell #qa-answers-wrapper > h3 {
  display: flex !important; align-items: center; gap: 8px; justify-content: center !important;
  font-size: 13.5px !important; font-weight: 600 !important; color: var(--ink) !important;
  margin: 0 0 12px !important;
}
.has-cosmic-shell #qa-questions-wrapper > h3 i { color: var(--accent) !important; }
.has-cosmic-shell #qa-answers-wrapper > h3 i { color: var(--accent2) !important; }

/* prompt (.prompt) — the engine's instruction-text */
.has-cosmic-shell .instruction-text {
  background: var(--surface-2) !important; border: 1px solid var(--line) !important;
  border-radius: 14px !important; padding: 16px 18px !important; margin: 0 0 16px !important;
  text-align: center; color: var(--ink) !important;
}
.has-cosmic-shell .instruction-text div { color: var(--ink) !important; font-weight: 500; }

/* the engine's 15-step progress bar — KEEP IT VISIBLE (real feature), just
   recolour to the cosmic theme. (It also feeds the session stat grid.) */
.has-cosmic-shell #qa-questions-wrapper .progress-container { display: block !important; margin: 0 0 14px !important; }
.has-cosmic-shell .progress-bar {
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important; border-color: var(--line) !important;
}
/* ONLY recolour UNanswered steps — answered ones must keep their semantic
   colours, so scope the grey with :not() (otherwise this !important grey would
   beat the engine's non-important .correct/.incorrect and the bar would never
   turn green/red). */
.has-cosmic-shell .progress-step:not(.correct):not(.incorrect):not(.completed):not(.current):not(.player1-first):not(.player2-second) {
  background: color-mix(in srgb, var(--ink) 16%, transparent) !important; border-color: var(--line) !important;
}
.has-cosmic-shell .progress-step.current { background: var(--cta) !important; border-color: transparent !important; }
.has-cosmic-shell .progress-step.completed { background: var(--accent2) !important; border-color: var(--accent2) !important; }
/* .correct (green #22c55e) / .incorrect (red #ef4444) and the challenge
   player1/player2 gradients keep the engine's semantic colours, untouched. */

/* transport (.transport) — control buttons */
.has-cosmic-shell .control-buttons { gap: 10px !important; margin: 0 0 4px !important; }
.has-cosmic-shell .control-btn:not(.secondary),
.has-cosmic-shell .btn-primary,
.has-cosmic-shell .settings-button.primary {
  background: var(--cta) !important; color: #fff !important; border: 0 !important;
  border-radius: 11px !important; box-shadow: var(--cta-glow) !important; font-weight: 600;
}
/* Mono palette: --cta is grayscale (near-white in dark), so the hardcoded white
   label vanishes. --bg is the opposite luminance of the accent in Mono, readable
   in both appearances. (data-palette is set on <html> by js/cosmic-shell.js.) */
[data-palette="mono"].has-cosmic-shell .control-btn:not(.secondary),
[data-palette="mono"].has-cosmic-shell .btn-primary,
[data-palette="mono"].has-cosmic-shell .settings-button.primary { color: var(--bg) !important; }
.has-cosmic-shell .control-btn.secondary,
.has-cosmic-shell .btn-secondary,
.has-cosmic-shell .settings-button {
  background: var(--surface-2) !important; color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important; border-radius: 11px !important; font-weight: 600;
}
.has-cosmic-shell .control-btn:hover { transform: translateY(-1px); }

/* answers (.answers / .ans) */
.has-cosmic-shell #answer-buttons {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)) !important;
  gap: 9px !important; justify-content: stretch !important; margin-top: 4px;
}
.has-cosmic-shell .answer-btn {
  margin: 0 !important; min-width: 0 !important; min-height: 48px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)) !important;
  color: var(--ink) !important; border: 1px solid var(--accent-line) !important;
  border-radius: 12px !important; font-weight: 600; font-size: 15px;
}
.has-cosmic-shell .answer-btn.comparison { grid-column: span 2; font-size: 16px; }
.has-cosmic-shell .answer-btn:hover {
  background: color-mix(in srgb, var(--accent) 26%, var(--surface-2)) !important; transform: translateY(-1px);
}
.has-cosmic-shell .answer-btn.answer-feedback-correct {
  background: #1faa63 !important; border-color: #1faa63 !important; color: #fff !important;
}
.has-cosmic-shell .answer-btn.answer-feedback-incorrect {
  background: #e0445f !important; border-color: #e0445f !important; color: #fff !important;
}
.has-cosmic-shell .answer-btn.answer-feedback-reveal {
  border-color: #1faa63 !important; box-shadow: 0 0 12px -2px #1faa63 !important;
}

/* study-mode content (kept legible) */
.has-cosmic-shell .study-card {
  background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
  border: 1px solid var(--line) !important; border-radius: 12px !important;
}
.has-cosmic-shell .study-card * { color: var(--ink); }

/* ── 6. Notation — keep a light surface so the black Verovio SVG stays legible*/
.has-cosmic-shell #notation-container,
.has-cosmic-shell #notation-section {
  border-radius: 16px !important; border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-card) !important; margin-bottom: 0 !important;
}

/* ── 7. Piano dock (the handoff's .piano-dock + .dock-strip) ────────────────
   Collapse the engine's big display box + controls bar into one compact strip,
   with the keyboard full-width below. */
.has-cosmic-shell .piano-section {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: 18px !important; box-shadow: var(--shadow-card) !important;
  padding: 11px 14px 13px !important; margin-bottom: 0 !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  display: grid; grid-template-columns: auto 1fr;
  grid-template-areas: "read ctl" "keys keys"; gap: 11px 18px; align-items: center;
}
.has-cosmic-shell .piano-section::before { display: none !important; }
/* readout (.dock-read / .dock-note / .dock-inst) */
.has-cosmic-shell .piano-display {
  grid-area: read; background: transparent !important; border: 0 !important;
  box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  display: flex; align-items: center; gap: 12px; min-width: 150px;
}
.has-cosmic-shell .piano-display-note {
  font-family: var(--font-display) !important; font-style: var(--display-style);
  font-size: 30px !important; line-height: 1; color: var(--accent) !important; margin: 0 !important;
  letter-spacing: 0 !important; min-width: 56px;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.has-cosmic-shell .piano-display-instrument {
  font-size: 11px !important; letter-spacing: .12em; color: var(--sub) !important;
}
/* controls (.dock-strip) */
.has-cosmic-shell .piano-controls {
  grid-area: ctl; background: transparent !important; border: 0 !important;
  box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  display: flex; align-items: center; justify-content: flex-start; gap: 18px; flex-wrap: wrap;
}
.has-cosmic-shell .piano-control-group {
  flex: 0 0 auto !important; flex-direction: row !important; align-items: center; gap: 9px;
}
.has-cosmic-shell .piano-control-group label {
  font-size: 11px !important; letter-spacing: .08em; color: var(--sub) !important; margin: 0 !important;
}
.has-cosmic-shell .control-select {
  background: var(--surface-2) !important; color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important; border-radius: 10px !important;
  height: 36px; padding: 0 12px !important; min-width: 0 !important;
}
.has-cosmic-shell #volume-slider {
  width: 110px !important; height: 5px !important; background: var(--track) !important;
}
.has-cosmic-shell #volume-slider::-webkit-slider-thumb {
  background: var(--accent) !important; width: 15px !important; height: 15px !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent) !important;
}
.has-cosmic-shell #volume-slider::-moz-range-thumb { background: var(--accent) !important; }
/* Show-keys checkbox → toggle switch */
.has-cosmic-shell #key-label-toggle {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 38px; height: 22px; border-radius: 999px; cursor: pointer; margin: 0;
  background: var(--track); transition: background .15s; flex-shrink: 0;
}
.has-cosmic-shell #key-label-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s;
}
.has-cosmic-shell #key-label-toggle:checked { background: var(--accent); }
.has-cosmic-shell #key-label-toggle:checked::after { transform: translateX(16px); }
/* Connect-MIDI control (the handoff's .dock-midi) — pushed to the far right */
.has-cosmic-shell .dock-midi {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  font-size: 12px; color: var(--sub);
}
.has-cosmic-shell .midi-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--sub); flex-shrink: 0;
  transition: background .2s, box-shadow .2s;
}
.has-cosmic-shell .midi-dot.on { background: #2bd383; box-shadow: 0 0 10px #2bd383; }
.has-cosmic-shell .midi-btn {
  appearance: none; border: 1px solid var(--accent-line); cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 9px;
}
.has-cosmic-shell .midi-btn:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.has-cosmic-shell .midi-btn:disabled { opacity: .6; cursor: default; }

/* keyboard row — overflow visible so the .piano-highlight answer circles that
   sit above the keys aren't clipped (keys are scaled to fit, so no h-scroll is
   needed on desktop). */
.has-cosmic-shell .piano-scroll-container { grid-area: keys; overflow: visible !important; }

/* Keyboard — matched to the handoff's flat .key-white / .key-black look.
   VISUAL-ONLY overrides (background / border-color / radius / shadow / height /
   label colour): width, margin, border-width, position and box-sizing are left
   untouched so the engine's absolutely-positioned black keys stay aligned. */
.has-cosmic-shell .piano {
  background: linear-gradient(180deg, color-mix(in srgb, #000 28%, var(--bg3)), color-mix(in srgb, #000 55%, var(--bg))) !important;
  /* the engine forces height:240px + margin-top:2rem + align-items:center
     (sized for its old 216px keys) — override all three so the box hugs the
     150px keys and sits directly under the dock strip (no dead space). */
  height: auto !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 !important; align-items: flex-end !important;
  border-radius: 14px !important; box-shadow: inset 0 -3px 12px rgba(0, 0, 0, .35) !important;
  /* overflow MUST stay visible: the engine appends answer-result circles
     (.piano-highlight) at top:-8px above each key — clipping them hides the
     correct/incorrect feedback dots. */
  overflow: visible !important;
}
.has-cosmic-shell .white-key {
  height: 150px !important;
  background: linear-gradient(180deg, #fdfdfd 0%, #ececec 88%, #d8d8d8 100%) !important;
  border-color: #fdfdfd #c4c4c8 #c0c0c0 #fdfdfd !important; /* top/left blend, right divider, bottom edge */
  border-radius: 0 0 6px 6px !important; box-shadow: none !important;
}
.has-cosmic-shell .white-key:hover {
  background: linear-gradient(180deg, #f2f2f4, #e2e2e6) !important;
  transform: translateY(2px) !important; box-shadow: none !important;
}
.has-cosmic-shell .white-key.key-active,
.has-cosmic-shell .white-key.key-pressed {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, #fff), color-mix(in srgb, var(--accent) 16%, #e8e8e8)) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, #fff) !important;
}
.has-cosmic-shell .black-key {
  height: 92px !important;
  background: linear-gradient(180deg, #3a3a44 0%, #111118 92%) !important;
  border-color: #0a0a0f !important; border-radius: 0 0 5px 5px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .5), inset 0 -3px 4px rgba(255, 255, 255, .08) !important;
}
.has-cosmic-shell .black-key:hover {
  background: linear-gradient(180deg, #45454f, #15151c) !important; transform: translateY(2px) !important;
}
.has-cosmic-shell .black-key.key-active,
.has-cosmic-shell .black-key.key-pressed {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #111)) !important;
  border-color: var(--accent) !important;
}
.has-cosmic-shell .key-active { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent) !important; }
.has-cosmic-shell .key-label { color: #5a5a66 !important; text-shadow: none !important; }
.has-cosmic-shell .black-key .key-label { color: #c8c8d4 !important; }

/* ── 8. Settings dialog (the REAL #settings-modal) → cosmic glass, intact ───*/
.has-cosmic-shell .settings-modal {
  background-color: color-mix(in srgb, #000 55%, transparent) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.has-cosmic-shell .settings-modal-content {
  background: color-mix(in srgb, var(--bg2) 92%, transparent) !important;
  color: var(--ink) !important; border: 1px solid var(--line) !important;
  border-radius: 18px !important; box-shadow: 0 40px 90px -30px rgba(0,0,0,.85) !important;
}
.has-cosmic-shell .settings-modal-content h2 {
  color: var(--ink) !important; font-family: var(--font-display); font-style: var(--display-style);
}
.has-cosmic-shell .settings-section {
  background: var(--surface-2) !important; border: 1px solid var(--line) !important; border-radius: 12px !important;
}
.has-cosmic-shell .settings-section h3 { color: var(--ink) !important; border-bottom-color: var(--line) !important; }
.has-cosmic-shell .settings-grid label {
  background: var(--surface-3) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
}
.has-cosmic-shell .settings-close-btn { color: var(--sub) !important; }
.has-cosmic-shell .settings-close-btn:hover { color: var(--ink) !important; }

/* ── 9. Trial-limit modal (cosmic) ─────────────────────────────────────────*/
.has-cosmic-shell .trial-modal-content {
  background: color-mix(in srgb, var(--bg2) 92%, transparent) !important;
  color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 18px !important;
}
.has-cosmic-shell .trial-btn.primary { background: var(--cta) !important; color: #fff !important; border-radius: 999px !important; }
.has-cosmic-shell .trial-btn.secondary {
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 999px !important;
}

/* ── 10. Responsive ────────────────────────────────────────────────────────*/
@media (max-width: 880px) {
  /* minmax(0,1fr) — NOT plain 1fr (= minmax(auto,1fr)). The `auto` minimum keeps
     the single column from shrinking below its widest child's min-content (the
     intrinsically-wide piano keyboard). WebKit/iOS Safari honours that and pins
     the whole page at ~858px → horizontal overflow. minmax(0,1fr) + min-width:0
     on the items lets the column collapse to the viewport. (Chrome clamped it
     anyway, which is why the bug was invisible on desktop Chrome.) */
  .has-cosmic-shell .training-container { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .has-cosmic-shell .control-section,
  .has-cosmic-shell .answer-section { grid-column: 1; }
  .has-cosmic-shell .control-section,
  .has-cosmic-shell .answer-section,
  .has-cosmic-shell .piano-section,
  .has-cosmic-shell .assignment-context-card,
  .has-cosmic-shell #notation-container,
  .has-cosmic-shell #notation-section,
  .has-cosmic-shell .piano-scroll-container { min-width: 0; }
  .has-cosmic-shell .piano-section { grid-template-columns: minmax(0, 1fr); grid-template-areas: "read" "ctl" "keys"; }
  .has-cosmic-shell .piano-controls { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .has-cosmic-shell .app-container { padding-left: 56px; }
  .has-cosmic-shell .main-content { padding-left: 14px; padding-right: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Section tabs + Progress / Achievements / Leaderboards panels.
   Restored from the design (MAZMAZIKA MILLIONAIRES: ear-styles.css .et-tabs +
   et-panels.css). The tab bar sits below the hero; "Ear Training" shows the
   trainer (.main-content), the other tabs swap in a panel view (.et-view).
   ══════════════════════════════════════════════════════════════════════════ */

/* Derived tokens the panels need, scoped to these components only so they can
   never affect the rest of the page (the base --ink/--sub/--accent/--surface/
   --line come from the cosmic theme). */
.has-cosmic-shell .et-tabs,
.has-cosmic-shell .et-view {
  --surface-3: color-mix(in srgb, var(--ink) 7%, var(--surface));
  --ink-2: color-mix(in srgb, var(--ink) 72%, var(--sub));
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* ── Tabs (Ear Training / Progress / Achievements / Leaderboards) ─────────── */
.has-cosmic-shell .et-tabs { display: flex; gap: 4px; padding: 5px; margin: 0 auto 18px; max-width: 540px;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 14px; }
.has-cosmic-shell .et-tab { flex: 1; appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 9px 8px; border-radius: 10px; transition: .15s ease; white-space: nowrap; }
.has-cosmic-shell .et-tab:hover { color: var(--ink); }
.has-cosmic-shell .et-tab.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.2); }

/* ── View show/hide ──────────────────────────────────────────────────────── */
.has-cosmic-shell .et-view { display: none; }
.has-cosmic-shell .et-view.is-on { display: block; max-width: 1040px; margin: 0 auto; padding: 0 22px 44px; }
.has-cosmic-shell .et-collapsed { display: none !important; }

/* ── Panels (verbatim from et-panels.css; tokens above + cosmic theme) ─────── */
.etp { display: flex; flex-direction: column; gap: 16px; }
.etp .card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); padding: 18px 20px; }
.etp-sec-h { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.etp-sec-h .ic { color: var(--accent); display: grid; place-items: center; }
.etp-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.etp-flabel { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); }
.etp-ftabs, .etp-lb-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 11px; }
.etp-lb-tabs { margin-bottom: 4px; }
.etp-ftab { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 7px 14px; border-radius: 8px; }
.etp-ftab.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.etp-fselect { appearance: none; border: 1px solid var(--line-strong, var(--line)); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.etp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.etp-kpi { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; overflow: hidden; box-shadow: var(--shadow-card); }
.etp-kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--kpi); }
.etp-kpi-ic { font-size: 22px; }
.etp-kpi-label { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--sub); margin-top: 8px; }
.etp-kpi-value { font-family: var(--font-display, inherit); font-style: var(--display-style, normal); font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1.1; margin-top: 2px; }
.etp-kpi-sub { font-size: 12px; color: var(--sub); margin-top: 3px; }
.etp-acc-chart { width: 100%; height: 180px; display: block; }
.etp-legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--sub); margin-top: 8px; }
.etp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.etp-legend i { width: 10px; height: 10px; border-radius: 50%; }
.etp-heat { display: grid; grid-template-columns: repeat(26, 1fr); gap: 3px; }
.etp-heat-c { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.etp-heat-c[data-level="1"] { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.etp-heat-c[data-level="2"] { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.etp-heat-c[data-level="3"] { background: color-mix(in srgb, var(--accent) 72%, transparent); }
.etp-heat-c[data-level="4"] { background: var(--accent); }
.etp-heat-legend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sub); margin-top: 10px; justify-content: flex-end; }
.etp-heat-legend .etp-heat-c { width: 12px; aspect-ratio: 1; }
.etp-row2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
.etp-radar { width: 100%; max-width: 240px; margin: 0 auto; display: block; }
.etp-areas { display: flex; flex-direction: column; gap: 11px; }
.etp-area { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 10px; }
.etp-area-n { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etp-area-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.etp-area-fill { height: 100%; border-radius: 999px; background: #8b5cf6; }
.etp-area-fill.rp { background: #10b981; }
.etp-area-p { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.etp-table-wrap { overflow-x: auto; }
.etp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.etp-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); padding: 0 12px 10px; white-space: nowrap; }
.etp-table td { padding: 11px 12px; border-top: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.etp-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.etp-badge.pp { color: #b794ff; background: color-mix(in srgb, #8b5cf6 18%, transparent); }
.etp-badge.rp { color: #5ee0b0; background: color-mix(in srgb, #10b981 18%, transparent); }
.etp-acc.hi { color: #34d399; font-weight: 600; } .etp-acc.mid { color: #fbbf24; font-weight: 600; } .etp-acc.lo { color: #f87171; font-weight: 600; }
.etp-userstats { background: linear-gradient(135deg, var(--accent2, #6366f1), var(--accent)); color: #fff; border-radius: 18px; padding: 26px; text-align: center; box-shadow: var(--cta-glow); }
.etp-userstats h2 { margin: 0 0 6px; font-family: var(--font-display, inherit); font-style: var(--display-style, normal); font-weight: 600; font-size: 22px; }
.etp-userstats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 14px; }
.etp-us-v { font-size: 30px; font-weight: 700; }
.etp-us-l { opacity: .9; font-size: 12.5px; margin-top: 2px; }
.etp-ach-h { font-size: 16px; font-weight: 600; color: var(--ink); margin: 4px 0 14px; }
.etp-ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.etp-ach { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 16px; transition: transform .15s ease; }
.etp-ach:hover { transform: translateY(-2px); }
.etp-ach.earned { border-color: color-mix(in srgb, #10b981 60%, var(--line)); }
.etp-ach.uncommon { border-color: color-mix(in srgb, #10b981 55%, var(--line)); }
.etp-ach.rare { border-color: color-mix(in srgb, #3b82f6 55%, var(--line)); }
.etp-ach.epic { border-color: color-mix(in srgb, #8b5cf6 55%, var(--line)); }
.etp-ach.legendary { border-color: color-mix(in srgb, #f59e0b 60%, var(--line)); }
.etp-ach-top { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.etp-ach-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 23px; background: color-mix(in srgb, var(--ink) 8%, transparent); flex-shrink: 0; }
.etp-ach-ic.uncommon { background: linear-gradient(135deg,#10b981,#059669); } .etp-ach-ic.rare { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.etp-ach-ic.epic { background: linear-gradient(135deg,#8b5cf6,#7c3aed); } .etp-ach-ic.legendary { background: linear-gradient(135deg,#f59e0b,#d97706); }
.etp-ach-t { font-size: 15px; font-weight: 700; color: var(--ink); }
.etp-ach-r { font-size: 12px; font-weight: 600; text-transform: capitalize; color: var(--sub); }
.etp-ach-r.rare { color: #60a5fa; } .etp-ach-r.epic { color: #a78bfa; } .etp-ach-r.legendary { color: #fbbf24; } .etp-ach-r.uncommon { color: #34d399; }
.etp-ach-d { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-bottom: 12px; min-height: 38px; }
.etp-ach-meta { display: flex; align-items: center; justify-content: space-between; }
.etp-ach-pts { background: var(--accent); color: var(--accent-ink, #fff); padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.etp-ach-date { font-size: 11.5px; color: var(--sub); }
.etp-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.etp-pod { background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 16px 12px 0; text-align: center; box-shadow: var(--shadow-card); }
.etp-pod-medal { font-size: 28px; }
.etp-pod-name { font-weight: 600; color: var(--ink); margin-top: 6px; }
.etp-pod-pts { font-size: 13px; color: var(--sub); margin: 2px 0 10px; font-variant-numeric: tabular-nums; }
.etp-pod-bar { display: grid; place-items: center; font-weight: 700; color: var(--accent-ink, #fff); background: var(--cta); border-radius: 8px 8px 0 0; }
.etp-pod.p1 .etp-pod-bar { height: 70px; } .etp-pod.p2 .etp-pod-bar { height: 48px; } .etp-pod.p3 .etp-pod-bar { height: 34px; }
.etp-lb { display: flex; flex-direction: column; }
.etp-lb-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--line); }
.etp-lb-row:first-child { border-top: 0; }
.etp-lb-row.me { background: var(--accent-soft); border-radius: 12px; padding-inline: 12px; border-top-color: transparent; }
.etp-lb-rank { width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sub); }
.etp-lb-rank.top { color: var(--accent); }
.etp-lb-name { flex: 1; font-weight: 600; color: var(--ink); }
.etp-lb-lvl { font-size: 12px; color: var(--sub); }
.etp-lb-pts { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 13.5px; }
.etp-ach-empty { color: var(--sub); font-size: 13.5px; padding: 18px; text-align: center; border: 1px dashed var(--line-strong, var(--line)); border-radius: 12px; }
.etp-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Real-data panel states (loading / guest login prompt) */
.etp-loading { color: var(--sub); text-align: center; padding: 48px 0; font-size: 14px; }
.etp-login-cta { text-align: center; padding: 40px 20px; }
.etp-login-ic { font-size: 40px; display: block; margin-bottom: 10px; }
.etp-login-t { font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.etp-login-s { color: var(--sub); font-size: 13.5px; margin-bottom: 16px; }
.etp-cta { display: inline-block; margin: 0 5px; padding: 10px 22px; border-radius: 10px; background: var(--cta); color: var(--accent-ink, #fff); font-weight: 600; font-size: 14px; text-decoration: none; }
.etp-cta-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-strong, var(--line)); }
@media (max-width: 820px) {
  .etp-kpis { grid-template-columns: 1fr 1fr; }
  .etp-row2 { grid-template-columns: 1fr; }
  .etp-ach-grid { grid-template-columns: 1fr 1fr; }
  .etp-userstats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .has-cosmic-shell .et-view.is-on { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 560px) {
  .etp-kpis, .etp-ach-grid { grid-template-columns: 1fr; }
  .etp-area { grid-template-columns: 100px 1fr 40px; }
  /* 4 long labels can't share one row on a phone — wrap to a 2×2 pill grid. */
  .has-cosmic-shell .et-tabs { flex-wrap: wrap; max-width: 420px; }
  .has-cosmic-shell .et-tab { flex: 1 1 calc(50% - 4px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. MOBILE-FIRST RESPONSIVE LAYER (mobile 0–576 · tablet 577–992 · desktop 993+)
   The page is engine-backed — these are CSS overrides only (gated on
   .has-cosmic-shell), paired with the additive js/ear-config-accordion.js.
   The root horizontal-overflow fix lives in §10 above (grid minmax(0,1fr) +
   min-width:0); this layer adds the touch-first reflow the audit asks for.
   ══════════════════════════════════════════════════════════════════════════ */

/* Structural containers use border-box so padding never adds to width.
   NOTE: deliberately NOT applied to the piano keys — the engine positions the
   black keys with content-box widths, so a blanket `* { box-sizing }` would
   misalign them. */
.has-cosmic-shell .training-container,
.has-cosmic-shell .control-section,
.has-cosmic-shell .answer-section,
.has-cosmic-shell .piano-section,
.has-cosmic-shell #qa-questions-wrapper,
.has-cosmic-shell #qa-answers-wrapper,
.has-cosmic-shell #study-mode-content,
.has-cosmic-shell .notation-container,
.has-cosmic-shell .main-content { box-sizing: border-box; }
.has-cosmic-shell .main-content { overflow-x: hidden; }

/* Injected Verovio notation SVGs never push the page wider than their card. */
.has-cosmic-shell .notation-container svg,
.has-cosmic-shell #notation-display-a svg,
.has-cosmic-shell #notation-display-b svg { max-width: 100%; height: auto; }

/* The config accordion toggle button is mobile-only: hidden by default on every
   viewport (so it never duplicates the desktop "Training Setup" ::before header)
   and revealed only inside the mobile query below. */
.has-cosmic-shell .et-acc-toggle { display: none; }

/* ─── MOBILE: ≤576px ──────────────────────────────────────────────────────── */
@media (max-width: 576px) {

  /* (A) CONFIG ACCORDION — js/ear-config-accordion.js adds `.et-acc` to
     .control-section, injects `.et-acc-toggle` as the first child, and toggles
     `.et-acc-open`. Collapsing hides the engine's config body (.control-header:
     the 4 selects + gear) so the training interface is reachable without
     scrolling past setup. The "This session" stats stay visible (they are
     results, not config). */
  .has-cosmic-shell .control-section.et-acc::before { display: none; }   /* toggle replaces the static header */
  .has-cosmic-shell .et-acc-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    appearance: none; border: 0; cursor: pointer; font: inherit; text-align: left;
    background: transparent; color: var(--ink);
    font-weight: 600; font-size: 14px; letter-spacing: .02em;
    padding: 4px 0; min-height: 44px;
  }
  .has-cosmic-shell .et-acc-toggle .et-acc-caret {
    margin-left: auto; flex: 0 0 auto; width: 16px; height: 16px; transition: transform .2s ease;
  }
  .has-cosmic-shell .control-section.et-acc-open .et-acc-toggle .et-acc-caret { transform: rotate(180deg); }
  .has-cosmic-shell .control-section.et-acc .control-header { display: none !important; }
  .has-cosmic-shell .control-section.et-acc-open .control-header { display: block !important; }
  .has-cosmic-shell .control-section.et-acc:not(.et-acc-open) #settings-icon { display: none !important; }

  /* (B) PROGRESS MATRIX → wrapped 5-col grid (15 steps = 5×3). Overrides the
     engine's 24px NOWRAP flex row of flex:1 steps (unreadably thin on a phone). */
  .has-cosmic-shell #progress-bar,
  .has-cosmic-shell .progress-bar {
    display: grid !important; grid-template-columns: repeat(5, 1fr);
    gap: 6px; height: auto !important; padding: 6px; align-content: start;
  }
  .has-cosmic-shell .progress-bar .progress-step {
    flex: none !important; height: 12px; transform: none !important;
  }

  /* (C) PIANO — the overflow containment. The skin's base rule sets
     `.piano-scroll-container { overflow: visible !important }` (good for the
     scaled desktop keyboard) but on mobile the keyboard is width:max-content and
     `visible` lets it stretch the page. Switch to overflow-x:auto so it scrolls
     inside its own box. overflow-x:auto coerces overflow-y to clip, which would
     cut the engine's answer-feedback circles drawn at top:-8px above the keys —
     so add padding-top to keep them inside the box. */
  .has-cosmic-shell .piano-scroll-container {
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch; padding-top: 16px; scrollbar-width: thin;
  }

  /* (D) NOTATION — engine already stacks .notation-side-by-side ≤768; ensure each
     canvas scrolls horizontally if a wide SVG is injected (vs widening the page). */
  .has-cosmic-shell #notation-display-a,
  .has-cosmic-shell #notation-display-b,
  .has-cosmic-shell #interval-a-notation,
  .has-cosmic-shell #interval-b-notation,
  .has-cosmic-shell #single-interval-notation,
  .has-cosmic-shell #chord-notation,
  .has-cosmic-shell #chord-inversion-notation,
  .has-cosmic-shell #scale-notation { overflow-x: auto; max-width: 100%; }

  /* (E) ≥44px touch targets for the sub-44px engine controls. */
  .has-cosmic-shell .control-select { min-height: 44px; }
  .has-cosmic-shell .mode-select { min-height: 44px; }
  .has-cosmic-shell #key-label-toggle { width: 52px !important; height: 30px !important; }
  .has-cosmic-shell #volume-slider { min-height: 44px; }
  .has-cosmic-shell #volume-slider::-webkit-slider-thumb { width: 24px !important; height: 24px !important; }
  .has-cosmic-shell #volume-slider::-moz-range-thumb { width: 24px !important; height: 24px !important; }

  /* (F) Challenge mode "Connected Players" must not force width / interrupt flow. */
  .has-cosmic-shell #challenge-participants { max-width: 100%; overflow-wrap: anywhere; }
  .has-cosmic-shell #challenge-mode-controls { flex-wrap: wrap; gap: .5rem; }
  .has-cosmic-shell #channel-id-input { margin-left: 0 !important; width: 100%; min-height: 44px; }

  /* (G) Panels: the 26-col activity heatmap is sub-pixel on a phone → 13 cols. */
  .etp-heat { grid-template-columns: repeat(13, 1fr); }
  .etp-lb-name { min-width: 0; }
}

/* ─── TABLET: 577–992px ───────────────────────────────────────────────────── */
@media (min-width: 577px) and (max-width: 992px) {
  /* Stats banner: 4 across on a tablet (engine base is 2×2). */
  .has-cosmic-shell .et-session .stat-grid { grid-template-columns: repeat(4, 1fr) !important; }
  /* Restore side-by-side notation for the 769–992 band (engine stacks it ≤768). */
  .has-cosmic-shell .notation-side-by-side { flex-direction: row; }
}

/* ══════════════════════════════════════════════════════════════════════════
   12. PIANO STABILITY + OCTAVE INDICATION
   Fixes the touch-press bugs (no permanent reflow — the engine's feedback
   circles are position:absolute and .key-pressed/.key-active are transform/
   paint-only; the "morph" was the `transition: all` animating over the card's
   backdrop-filter) and marks octave boundaries. Paired with the additive
   js/ear-piano-touch.js (reliable touch → note + audio-context resume).
   ══════════════════════════════════════════════════════════════════════════ */

/* (1) Keys transition ONLY paint/transform props — never `all` (the engine's
   `transition: all .15s` animates layout-ish props and, over the glass card's
   backdrop-filter, reads as morphing/smearing on iOS). No tap highlight, and no
   text selection (tapping the keys' labels otherwise triggers the iOS blue
   text-selection highlight / caret / drag-handle artifacts). */
.has-cosmic-shell .white-key,
.has-cosmic-shell .black-key {
  transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.has-cosmic-shell .piano,
.has-cosmic-shell .piano-scroll-container,
.has-cosmic-shell .key-label {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* (1b) THE press-reflow fix. The engine's `.white-key:active`/`.key-pressed`
   (and black) bump border-width 1px → 2px — a LAYOUT change, so on iOS every
   press grows the key 2px, reflowing the flex row → piano → card → footer (the
   "stretch"). Desktop Chrome only showed it via :active, which our classList
   tests didn't trigger. Pin border-width to the resting 1px in every state so a
   press is a pure paint/transform change with zero reflow. */
.has-cosmic-shell .white-key,
.has-cosmic-shell .white-key:active,
.has-cosmic-shell .white-key.key-pressed,
.has-cosmic-shell .white-key.key-active,
.has-cosmic-shell .black-key,
.has-cosmic-shell .black-key:active,
.has-cosmic-shell .black-key.key-pressed,
.has-cosmic-shell .black-key.key-active { border-width: 1px !important; }

/* (1c) On TOUCH devices, drive the press-down visual ONLY via .key-pressed
   (engine JS — paired with a real release by js/ear-piano-touch.js). The :active
   pseudo can stick on iOS after the finger lifts, leaving the key visually
   pressed-in; neutralize it on touch so a released key always pops back. The
   press feedback is preserved (the .key-pressed transform still applies). */
@media (hover: none) {
  .has-cosmic-shell .white-key:active,
  .has-cosmic-shell .black-key:active { transform: none; }
}

/* (2) Octave indication — pure CSS off the engine's data-note ("C3"/"C4"/"C5").
   Each octave's C white key shows a small octave label (just the label — no
   accent bar, which read as a stray purple mark before each C). No engine change. */
.has-cosmic-shell .piano .white-key[data-note^="C"]:not([data-note*="#"])::after {
  content: attr(data-note);
  position: absolute; left: 0; right: 0; bottom: 5px;
  text-align: center; font-family: var(--font-body, sans-serif);
  font-size: 9px; font-weight: 700; letter-spacing: .01em;
  color: color-mix(in srgb, var(--accent) 80%, #4a2d80);
  opacity: .9; pointer-events: none;
}

/* ─── PIANO on MOBILE: ≤576px ─────────────────────────────────────────────── */
@media (max-width: 576px) {
  /* The wide keyboard scrolls horizontally inside its box. touch-action:pan-x
     lets the browser pan horizontally while a stationary tap still plays a key
     (js/ear-piano-touch.js); overscroll-behavior stops the page from rubber-
     banding when you reach the keyboard's end. */
  .has-cosmic-shell .piano-scroll-container {
    touch-action: pan-x; overscroll-behavior-x: contain;
    scrollbar-width: none;            /* Firefox/standards: no scrollbar */
  }
  /* Hide the scroll thumb entirely — it rendered as a stray purple line at the
     start of the keyboard on iOS. The keyboard still pans by drag (keys are cut
     off at the edge, signalling there's more), and the C3/C4/C5 labels orient. */
  .has-cosmic-shell .piano-scroll-container::-webkit-scrollbar { display: none; height: 0; }
  /* The 20px outset purple glow on the active key (engine + skin) gets clipped by
     the scroll box's overflow into a "purple line" under the keys. On mobile drop
     the outset glow and indicate the active key with its purple tint + a crisp
     inset ring instead — clear, and nothing bleeds past the clip edge. */
  .has-cosmic-shell .white-key.key-active,
  .has-cosmic-shell .black-key.key-active,
  .has-cosmic-shell .key-active {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 75%, #fff) !important;
  }
  /* Drop the card's backdrop-filter on the piano only (it's the iOS repaint/
     smear source when keys animate over it; the dark bg makes the blur moot). */
  .has-cosmic-shell .piano-section {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  /* Slightly larger octave label so it's legible on a phone. */
  .has-cosmic-shell .piano .white-key[data-note^="C"]:not([data-note*="#"])::after { font-size: 10px; bottom: 4px; }
}