/* One student interface across topics. Keep the notation and instrument layouts. */
:root { --nl-ink:#172744; --nl-muted:#52627c; --nl-line:#dfe5ef; --nl-radius:20px; --nl-shadow:0 3px 16px #24396008; --nl-success:#17613e; --nl-retry:#765008; }
body {font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;background:#f5f7fb!important;}
.app-nav__inner {min-height:68px;}
.app-brand__mark {transform:none;background:#3339a4;color:#fff;box-shadow:none;border-radius:12px;}
.app-nav__link[aria-current="page"] {background:#eceeff;color:#383c9b;border-color:transparent;}
.page,.ear-main {min-height:calc(100dvh - 228px)!important;}
body.page-ear {--play-tint:#eee7ff;--page-a:#7445a4;}
.page,.ear-main {padding:28px 24px 64px!important;}
.ear-main,.wrap {max-width:1180px!important;}
.hero,.ear-heading {padding:12px 0 22px!important;margin:0 0 22px!important;border-bottom:1px solid var(--nl-line)!important;}
.hero h1,.ear-heading h1 {font-size:clamp(1.75rem,3.5vw,2.5rem)!important;line-height:1.15!important;letter-spacing:-.04em!important;margin:8px 0 12px!important;}
.hero p,.ear-heading p {font-size:1rem!important;line-height:1.6!important;color:var(--nl-muted)!important;}
.hero-kicker,.ear-eyebrow,.card-tag,.ear-level {font-size:.875rem!important;letter-spacing:0!important;}
.menu-topbar,.topbar {margin:0 0 18px!important;}
body .menu-grid,.ear-games {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important;}
body .card,body .ear-card,body .ear-chord-card {border:1px solid var(--nl-line)!important;border-radius:var(--nl-radius)!important;box-shadow:var(--nl-shadow)!important;padding:22px!important;min-height:0!important;}
.ear-card,.ear-chord-card {background:white!important;}
.card h3,.ear-card h3,.ear-chord-card h2 {font-size:1.25rem!important;line-height:1.4!important;letter-spacing:-.02em!important;margin:10px 0!important;}
.card p,.ear-card p,.ear-chord-card p {font-size:1rem!important;line-height:1.55!important;}
.ear-card {gap:12px;}
.ear-card p {margin:0 0 8px;}
.ear-level,.card-tag {width:fit-content;border-radius:8px!important;padding:6px 10px!important;background:var(--play-tint,#e8edff)!important;color:var(--page-a,#51439b)!important;font-weight:800;}
.category-nav {position:static!important;margin-bottom:20px;}
.difficulty-filter {margin:0 0 20px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:none;}
.difficulty-filter select,.difficulty-filter button {border-radius:12px;}
.difficulty-filter small {color:var(--nl-muted);}
button[data-difficulty] {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;white-space:normal!important;}
.difficulty-badge {margin:0;padding:2px 8px;background:#edf2fc;color:#26375c;box-shadow:none;font-size:.875rem;}
.game-btn-group {gap:12px!important;}
.btn,.menu-btn,.back-link {font-size:1rem!important;border-radius:12px!important;line-height:1.35!important;text-transform:none!important;letter-spacing:0!important;}
.btn,.menu-btn,.back-link,.game-btn {font-weight:650!important;box-shadow:none!important;}
.btn-primary,.menu-btn,.game-btn {background:#3339a4!important;border-color:#3339a4!important;}
.btn-primary:hover,.menu-btn:hover,.game-btn:hover {background:#282e8b!important;box-shadow:0 3px 10px #3339a419!important;}
.btn-primary:active,.menu-btn:active,.game-btn:active {box-shadow:none!important;}
.btn-secondary,.back-link,.game-btn.game-btn-acc {background:#fff!important;border-color:#ccd6e5!important;box-shadow:none!important;}
.category-nav {box-shadow:none;border-color:var(--nl-line);}
.panel,.hud-panel,.question-card,.answer-area,.tile-bank-wrap,.tile-tray {box-shadow:var(--nl-shadow)!important;}
.menu-btn::after {content:none!important;}
.btn:disabled,.menu-btn:disabled {transform:none!important;filter:none!important;cursor:default;}
:is(button,a,input,select):focus-visible {outline:3px solid #547de0!important;outline-offset:4px;}
.game-topbar,.ear-top {gap:12px!important;align-items:center!important;}
.game-title,.ear-top h1 {font-size:1.25rem!important;line-height:1.4!important;color:var(--nl-ink)!important;}
.panel,.hud-panel,.ear-listen,.echo-stage,.ear-results {border:1px solid var(--nl-line)!important;border-radius:var(--nl-radius)!important;background:#fff!important;box-shadow:var(--nl-shadow)!important;}
.ear-progress {font-size:.9375rem;}
.round-progress,.ear-progress progress {accent-color:#1c9b56!important;}
.round-progress::-webkit-progress-value,.ear-progress progress::-webkit-progress-value {background:#1c9b56!important;}
.round-progress::-moz-progress-bar,.ear-progress progress::-moz-progress-bar {background:#1c9b56!important;}
.feedback,#earFeedback,#echoFeedback,#clapFeedback {border:1px solid #cad8ef!important;border-left-width:4px!important;border-radius:12px!important;background:#edf3ff!important;color:#294b7d!important;padding:12px 14px!important;font:600 1rem/1.5 system-ui,sans-serif!important;text-align:left;}
.feedback.correct,#earFeedback[data-tone=correct],#echoFeedback[data-tone=correct],#clapFeedback[data-tone=correct] {background:#e5f7ed!important;border-color:#80bf9c!important;color:var(--nl-success)!important;}
.feedback.wrong,#earFeedback[data-tone=retry],#echoFeedback[data-tone=retry],#clapFeedback[data-tone=retry] {background:#fff5d8!important;border-color:#d3ae55!important;color:var(--nl-retry)!important;}
#echoFeedback:empty,#clapFeedback:empty {display:none;}
.page-ear .ear-answer.wrong,.mcq-btn.wrong,.letter-btn.wrong {background:#fff1c9!important;color:#765008!important;border-color:#cfaa50!important;box-shadow:0 3px 0 #dec17b!important;}
.white-key.wrong-hit {background:#fff1c9!important;border-color:#bd8b25!important;}
.black-key.wrong-hit {border-color:#eebc55!important;}
.ear-footer,.echo-dock,.mobile-actions {border-radius:16px;}
@media(min-width:701px) and (max-width:999px){
 #earPlay {padding-bottom:12rem;}
 .ear-footer,.echo-dock {position:fixed;z-index:80;bottom:0;inset-inline:12px;max-width:696px;margin:0 auto;padding:12px 12px calc(14px + env(safe-area-inset-bottom,0px));background:#fff;border:1px solid #ccd7e8;border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #17274414;}
 #earFeedback,#echoFeedback {max-height:6rem;overflow-y:auto;margin:0;}
}
.clap-result-actions {flex-wrap:wrap;}
#clapFeedback {flex-basis:100%;width:100%;margin:0 0 8px;}
.student-bar {font-family:inherit;}
.student-dialog {font-family:inherit;border-radius:var(--nl-radius);}
@media(max-width:700px){
 .page,.ear-main {padding:18px 14px 44px!important;}
 body .menu-grid,.ear-games {grid-template-columns:1fr!important;gap:16px!important;}
 .card,.ear-card,.ear-chord-card {padding:18px!important;}
 .ear-top {flex-wrap:wrap;}
 .ear-top h1 {flex:1;min-width:130px;font-size:1.125rem!important;}
 .hero,.ear-heading {padding-top:4px!important;}
 .feedback,#earFeedback,#echoFeedback,#clapFeedback {font-size:.9375rem!important;padding:9px 11px!important;}
 #echoFeedback {margin:0;max-height:6rem;overflow-y:auto;}
 .echo-dock {gap:8px;}
 .page-ear .echo-pad {min-height:56px;}
 .clap-result-actions.mobile-actions {flex-wrap:wrap!important;}
 .clap-result-actions.mobile-actions .btn {flex:1 1 0;}
 .clap-result-actions #clapFeedback {max-height:6rem;overflow-y:auto;}
}
@media(prefers-reduced-motion:reduce){.card,.ear-card,.btn,.feedback {animation:none!important;transition:none!important;}}

/* Compact phone typography: retain full instructions and comfortable touch targets. */
@media(max-width:700px){
 body {font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;}
 .page,.ear-main {padding:14px 14px 36px!important;}
 .hero,.ear-heading {padding:4px 0 14px!important;margin-bottom:16px!important;}
 .hero h1,.ear-heading h1 {font-size:clamp(1.5rem,6.5vw,1.875rem)!important;line-height:1.18!important;letter-spacing:-.025em!important;margin:4px 0 8px!important;}
 .hero p,.ear-heading p {font-size:1rem!important;line-height:1.45!important;margin:0!important;}
 .hero-kicker,.ear-heading > .ear-eyebrow {display:none;}
 .menu-topbar,.topbar {margin:0 0 12px!important;}
 .menu-topbar .back-link,.topbar .back-link {width:auto!important;min-height:44px!important;padding:8px 12px!important;}
 body.page-home .card,body .card,body .ear-card,body .ear-chord-card {padding:16px!important;gap:10px!important;border-radius:18px!important;}
 body.page-home .card h2,.card h3,.ear-card h3,.ear-chord-card h2 {font-size:1.125rem!important;line-height:1.3!important;letter-spacing:-.015em!important;margin:4px 0 6px!important;}
 body.page-home .card h2 {font-size:1.375rem!important;}
 .card p,.ear-card p,.ear-chord-card p {font-size:1rem!important;line-height:1.45!important;margin:0 0 8px!important;max-width:none!important;}
 .topic-number {min-height:30px;}
 .topic-icon {font-size:1.75rem;}
 .topic-label {font-size:.875rem;margin-bottom:4px;}
 body.page-home .card {position:relative;}
 .card-tag,.ear-level {font-size:.875rem!important;line-height:1.3!important;padding:4px 8px!important;}
 .btn,.menu-btn,.back-link {font-size:.9375rem!important;font-weight:700!important;min-height:44px!important;padding:10px 12px!important;line-height:1.35!important;}
 button[data-difficulty] {flex-direction:row;flex-wrap:wrap;gap:6px 10px;}
 .game-btn-group button[data-difficulty] {flex-direction:column;gap:3px;}
 button .difficulty-badge {font-weight:500;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-size:.875rem;line-height:1.3;}
 .game-btn-group {gap:8px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
 .game-btn-group .game-btn:only-child {grid-column:1/-1;}
 .difficulty-filter {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:12px;margin:0 0 16px;}
 .difficulty-filter label {display:grid;grid-template-columns:auto minmax(0,1fr);width:auto;gap:8px;font-size:.875rem;align-items:center;}
 .difficulty-filter select {width:100%;min-width:0;font-size:1rem;padding:8px;}
 .difficulty-filter button {font-size:.875rem;padding:8px 10px;}
 .difficulty-filter p {grid-column:1/-1;font-size:.875rem;line-height:1.35;}
 .difficulty-filter p:empty {display:none;}
 .category-nav {margin-bottom:14px;}
 .clef-section-title {font-size:1rem!important;padding:10px 0!important;margin-top:8px!important;}
 .ear-section-heading {margin:16px 0 10px;gap:6px;}
 .ear-section-heading h2 {font-size:1.125rem;}
 .ear-section-heading > span {font-size:.875rem;}
 .game-title,.ear-top h1,.echo-round-heading h2 {font-size:1.0625rem!important;line-height:1.3!important;}
 .game-subtitle,.ear-tip,.echo-help,#earAudioStatus {font-size:.875rem!important;line-height:1.4!important;}
 .feedback,#earFeedback,#echoFeedback,#clapFeedback {font-weight:500!important;line-height:1.4!important;}
 .student-bar {gap:2px 8px;padding:4px 14px;font-size:.875rem;}
 .student-bar #studentLabel {flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
 .student-bar #studentSave {flex:0 1 auto;}
 .student-bar #studentSave:empty {display:none;}
 .student-bar button,.student-bar a {min-height:44px;display:inline-flex;align-items:center;}
 .student-dialog {padding:20px;font-size:1rem;line-height:1.45;}
 .student-dialog h2 {font-size:1.5rem;line-height:1.2;margin:4px 0 10px;}
 .student-dialog p {margin:8px 0 14px;}
 .student-note {font-size:1.75rem;}
 .student-dialog input[name=name] {font-size:1rem;margin-bottom:12px;}
}
@media(max-width:360px){
 .difficulty-filter label {grid-template-columns:1fr;gap:4px;}
 .difficulty-filter button {align-self:end;}
 .student-bar #studentLabel {flex-basis:100%;}
}

/* Short, purposeful movement; timing cues and notation are never animated here. */
@keyframes nl-card-enter {from {opacity:0;translate:0 9px;} to {opacity:1;translate:0 0;}}
@keyframes nl-result-enter {from {opacity:.4;scale:.97;} to {opacity:1;scale:1;}}
@media(prefers-reduced-motion:no-preference){
 body .card,.ear-card,.ear-chord-card {animation:nl-card-enter 300ms cubic-bezier(.2,.8,.2,1) both!important;}
 .card:nth-of-type(2),.ear-card:nth-of-type(2) {animation-delay:35ms!important;}
 .card:nth-of-type(3),.ear-card:nth-of-type(3) {animation-delay:70ms!important;}
 .card:nth-of-type(4),.ear-card:nth-of-type(4) {animation-delay:105ms!important;}
 .ear-results:not([hidden]) {animation:nl-result-enter 280ms ease-out;}
 .btn:not(:disabled):active,.menu-btn:active,.letter-btn:not(:disabled):active,.tile:active {transform:translateY(2px) scale(.98)!important;}
 .ear-answer,.letter-btn,.tile {transition:transform 120ms ease,background-color 180ms ease,box-shadow 180ms ease!important;}
}
@media(hover:none){
 body .card:hover,.ear-card:hover,.ear-chord-card:hover {transform:none!important;box-shadow:var(--nl-shadow)!important;}
 .btn:not(:active):hover,.menu-btn:not(:active):hover {transform:none!important;}
}

/* Topic cards use colour as a small accent, with a consistent reading order. */
body.page-home .card {position:relative;display:grid!important;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr auto;align-items:start!important;min-height:0!important;gap:18px!important;padding:24px!important;box-shadow:var(--nl-shadow)!important;}
body.page-home .card:is(.rhythm,.notes,.chords,.ear) {background:#fff!important;border-color:var(--nl-line)!important;}
.page-home .card.rhythm {--topic-tint:#fff0cf;--topic-ink:#995212;}
.page-home .card.notes {--topic-tint:#e9eaff;--topic-ink:#4944a4;}
.page-home .card.chords {--topic-tint:#d7f4eb;--topic-ink:#087361;}
.page-home .card.ear {--topic-tint:#f2e7ff;--topic-ink:#7844a1;}
.page-home .topic-number {grid-area:1/1;min-height:0;}
.page-home .topic-icon {display:grid!important;place-items:center;width:48px!important;height:48px!important;font-size:1.6rem;border:0!important;border-radius:14px!important;background:var(--topic-tint);}
.page-home .topic-copy {grid-area:2/1/3/-1;}
.page-home .topic-action {grid-area:3/1/4/-1;margin:0!important;}
.page-home .card > .difficulty-badge {grid-area:1/2;position:static;align-self:center;justify-self:end;font-size:.8125rem;font-weight:600;background:#f6f8fc;border:0;color:#586680;padding:4px 8px;max-width:100%;}
.page-home .topic-label {font-weight:600;font-size:.875rem;letter-spacing:0;color:var(--topic-ink);margin-bottom:6px;}
body.page-home .card h2 {font-size:1.5rem!important;font-weight:750!important;line-height:1.25!important;letter-spacing:-.025em!important;margin:0 0 10px!important;}
body.page-home .card p {font-weight:400!important;color:var(--nl-muted)!important;max-width:none!important;margin:0!important;}
.page-home .menu-btn {min-height:46px!important;padding:11px 14px!important;}
.page-ear .ear-answer {box-shadow:none!important;}
@media(hover:hover){
 body.page-home .card:hover,body .card:hover,.ear-card:hover {transform:translateY(-3px)!important;box-shadow:0 8px 24px #2439600e!important;border-color:#bac8df!important;}
}
@media(max-width:700px){
 body.page-home .card {padding:18px!important;gap:14px!important;}
 body.page-home .card h2 {font-size:1.375rem!important;}
}

/* Rhythm Echo: a readable start screen and one clear action during each phase. */
.echo-instructions {text-align:left;max-width:560px;margin:0 auto;}
.echo-instructions h3 {font-size:1.5rem;letter-spacing:-.025em;line-height:1.25;margin:0 0 20px;}
.echo-instructions ol {list-style:none;padding:0;margin:0;counter-reset:echo-instruction;display:grid;gap:16px;}
.echo-instructions li {position:relative;counter-increment:echo-instruction;padding-left:42px;line-height:1.5;color:var(--nl-muted);}
.echo-instructions li::before {content:counter(echo-instruction);position:absolute;left:0;top:1px;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#eceeff;color:#4141a0;font-weight:750;font-size:.875rem;}
.echo-instructions strong {color:var(--nl-ink);}
.echo-sound-guide {padding:14px 16px;margin:20px 0 0;border-radius:12px;background:#eef4ff;font-size:.9375rem;line-height:1.5;color:var(--nl-muted);}
.echo-stage {padding:24px;transition:border-color 160ms,background-color 160ms;}
#echoPlay[data-phase="ready"] .echo-phases {display:none;}
#echoPlay[data-phase="ready"] #echoStatus {font-weight:600;margin:18px 0 0;}
#echoPlay[data-phase="listening"] .echo-stage {background:#f4f1ff!important;border-color:#cfc2ee!important;}
#echoPlay[data-phase="tapping"] .echo-stage {background:#edf9f3!important;border-color:#a9d8be!important;}
.echo-cue {font-size:clamp(2rem,7vw,3rem);letter-spacing:-.03em;}
.echo-phases li {font-weight:650;border-radius:10px;border-color:transparent;background:#edf0f6;}
.echo-phases li.current {border-color:#baaadf;background:#eee7ff;}
.echo-phases #echoReadyStep.current,.echo-phases #echoCountStep.current {background:#fff3d7;border-color:#e9cd8c;}
.echo-phases #echoTapStep.current {background:#dff4e8;border-color:#86c7a3;}
.echo-beats span {border-width:1px;}
.echo-beats span.current {background:#e9e6fb;border-color:#a59cda;color:#453a85;}
[data-phase="tapping"] .echo-beats span.current {background:#dff4e8;border-color:#86c7a3;color:#17613e;}
.page-ear .echo-pad {min-height:104px;border:1px solid #078666;background:#087a60;color:#fff;box-shadow:0 4px 0 #075640;border-radius:18px;}
.page-ear .echo-pad:disabled {background:#eef1f6;border:1px dashed #bfcbde;color:#65738a;box-shadow:none;}
.page-ear .echo-pad.tapped {background:#0a946f;border-color:#076148;color:#fff;box-shadow:0 1px 0 #075640;transform:translateY(3px);}
.echo-actions {grid-template-columns:repeat(2,minmax(0,1fr));}
.echo-actions:has(#echoNext[hidden]) {grid-template-columns:1fr;}
.echo-actions:has(#echoListen[hidden]):has(#echoNext[hidden]) {display:none;}
#echoPlay[data-phase="feedback"] #echoListen {background:#fff!important;color:#3339a4!important;border-color:#cbd2e8!important;}
#echoPlay[data-phase="feedback"] #echoNext {background:#3339a4!important;color:#fff!important;border-color:#3339a4!important;}
@media(max-width:999px){
 #echoPlay:has(#echoRound:not([hidden])) {padding-bottom:calc(8rem + env(safe-area-inset-bottom,0px));}
 #echoPlay[data-phase="feedback"]:has(#echoRound:not([hidden])) {padding-bottom:calc(13rem + env(safe-area-inset-bottom,0px));}
 #echoPlay .echo-dock {inset-inline:0;border-radius:18px 18px 0 0;max-width:720px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));}
 .page-ear .echo-pad {min-height:76px;}
 .echo-stage {padding:20px;}
 .echo-instructions h3 {font-size:1.25rem;margin-bottom:16px;}
 .echo-instructions ol {gap:12px;}
 .echo-instructions li {padding-left:38px;}
 .echo-sound-guide {margin-top:16px;padding:12px;}
 body:has(#echoPlay:not([hidden]) #echoRound:not([hidden])) .site-footer {padding-bottom:calc(9rem + env(safe-area-inset-bottom,0px));}
 body:has(#echoPlay[data-phase="feedback"]:not([hidden]) #echoRound:not([hidden])) .site-footer {padding-bottom:calc(14rem + env(safe-area-inset-bottom,0px));}
 body:has(#earPlay:not([hidden])) .site-footer {padding-bottom:calc(8rem + env(safe-area-inset-bottom,0px));}
}
@media(prefers-reduced-motion:reduce){.echo-stage,.student-bar button {transition:none;}}
/* Filtering wins over the display rules on cards and buttons. */
body [data-difficulty].difficulty-hidden,body .card.difficulty-hidden,body .ear-card.difficulty-hidden,body .ear-chord-card.difficulty-hidden,body .clef-section-title.difficulty-hidden {display:none!important;}