/* Activity-first layouts shared by every topic. */
body .hero,body .ear-heading {padding:18px 20px!important;margin-bottom:16px!important;}
body .hero h1,body .ear-heading h1 {font-size:clamp(1.65rem,3vw,2.25rem)!important;line-height:1.18!important;}
body .hero p,body .ear-heading p {font-size:1rem!important;line-height:1.45!important;}
body .page,body .ear-main {padding-top:18px!important;}
body .game-shell {gap:12px!important;}
body :is(.panel,.hud-panel) {padding:16px!important;margin-bottom:12px!important;}
body :is(.game-topbar,.ear-top) {padding:8px 12px!important;margin-bottom:10px!important;}
body :is(.game-title,.ear-top h1) {font-size:1.15rem!important;line-height:1.3!important;}
body :is(.hud-box,.ear-progress) {padding:7px 12px!important;font-size:.9rem!important;}
body .round-rule {font-size:.875rem;line-height:1.4;color:#516079;margin:8px 0 12px;text-align:center;}
body .game-shell .tile-tray {background:transparent!important;border:0!important;box-shadow:none!important;padding:8px 0 0!important;}
body :is(.controls,.ear-controls) {gap:8px;}
body .controls {margin-top:8px;}
body button:focus-visible,body a:focus-visible,body select:focus-visible {outline:3px solid #6656ce;outline-offset:3px;}
body :is(.btn,.back-link,select) {min-height:44px;}
/* Score and progress precede the question in both notation games. */
body.page-notes #gameScreen:not(.rush-game) .game-shell,body.page-rhythm #gameScreen .game-shell {display:flex;flex-direction:column;}
body.page-notes #gameScreen:not(.rush-game) .hud-panel,body.page-rhythm #gameScreen .hud-panel {display:contents;}
body.page-notes #gameScreen:not(.rush-game) .game-shell > section,body.page-rhythm #gameScreen .game-shell > section {order:3;}
body.page-notes #gameScreen:not(.rush-game) .round-progress,body.page-rhythm #gameScreen .round-progress {order:0;margin:0;}
body.page-notes #gameScreen:not(.rush-game) .hud-grid,body.page-rhythm #gameScreen .hud-grid {order:1;margin:0;}
body.page-notes #gameScreen:not(.rush-game) .mobile-actions,body.page-rhythm #gameScreen .mobile-actions {order:5;}
body.page-notes #gameScreen:not(.rush-game) .hud-box:nth-child(3) {display:none;}
body.page-notes #gameScreen:not(.rush-game) .hud-grid {grid-template-columns:1fr 1fr!important;}
.recent-practice {padding:18px;border:1px solid #dce3ee;border-radius:18px;background:white;margin-bottom:20px;box-shadow:0 3px 0 #e5eaf3;}
.recent-practice h2 {font-size:1.2rem;margin:0 0 12px;}
.recent-practice > p {font-size:.9rem;line-height:1.5;}
.recent-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0;}
.recent-card {display:grid;gap:6px;padding:14px;border-radius:14px;background:#f3f6fc;border:1px solid #dce3ee;color:#243960;text-decoration:none;}
.recent-card span,.recent-card small {font-size:.875rem;line-height:1.45;}
#studentCancel {margin-top:10px;background:#edf1f8;color:#243960;}
/* The complete Rush activity occupies the available viewport on every device. */
body.page-notes #gameScreen.rush-game.active {position:fixed;z-index:100;inset:0;height:100dvh;padding:10px 12px max(10px,env(safe-area-inset-bottom,0px))!important;background:#f2f6ff;overflow:hidden;box-sizing:border-box;}
#gameScreen.rush-game > .wrap {width:100%;max-width:880px;height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);margin:auto;}
body.page-notes #gameScreen.rush-game .game-topbar {display:grid;grid-template-columns:auto minmax(0,1fr) auto!important;gap:8px;margin:0 0 6px!important;padding:4px 8px!important;min-height:48px;}
#gameScreen.rush-game .game-title {font-size:1rem!important;padding:0;background:none;box-shadow:none;line-height:1.2!important;}
#gameScreen.rush-game .game-subtitle {display:none;}
#gameScreen.rush-game .back-link {width:auto!important;padding:8px!important;min-height:44px!important;}
#gameScreen.rush-game .game-shell {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(100px,1fr) auto auto;gap:6px!important;min-height:0;padding:0;align-items:stretch;}
#gameScreen.rush-game .hud-panel {display:contents;}
#gameScreen.rush-game .round-progress {display:none;}
#gameScreen.rush-game .hud-grid {grid-column:1;grid-row:1;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:0;}
#gameScreen.rush-game .hud-box:nth-child(2) {display:none!important;}
#gameScreen.rush-game .hud-box {min-height:28px;padding:4px 8px!important;flex-direction:row;font-size:.875rem!important;}
#gameScreen.rush-game #rushSection {grid-column:1;grid-row:2;min-height:0;}
#gameScreen.rush-game #rushSection > .panel {height:100%;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;}
#gameScreen.rush-game .rush-arena {position:relative;height:100%;min-height:0;}
#gameScreen.rush-game .rush-area {height:100%!important;min-height:0;border-radius:16px;}
#gameScreen.rush-game .rush-ready {position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:12px;background:#f2f6fff5;border-radius:16px;}
#gameScreen.rush-game .rush-ready h2 {font-size:clamp(1.5rem,4vw,2.5rem);margin:0;}
#gameScreen.rush-game .rush-ready p {font-size:.9rem;line-height:1.4;max-width:340px;margin:0;}
#gameScreen.rush-game .falling-note {width:min(230px,85%,calc(30dvh));}
#gameScreen.rush-game #letterPanel {grid-column:1;grid-row:3;margin:0!important;padding:8px!important;}
#gameScreen.rush-game #letterPanel .panel-title,#gameScreen.rush-game .letter-row-label {display:none;}
#gameScreen.rush-game .letter-grid {grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:5px!important;}
#gameScreen.rush-game .letter-row-label + .letter-btn {grid-column:1;}
#gameScreen.rush-game .letter-btn {min-width:0!important;min-height:44px!important;padding:6px 0!important;border-radius:10px!important;font-size:1rem!important;}
#gameScreen.rush-game .mobile-actions {position:static!important;grid-column:1;grid-row:4;width:100%;max-width:none;padding:0!important;border:0;background:transparent;box-shadow:none;}
#gameScreen.rush-game .mobile-actions .feedback {margin:0;min-height:0;max-height:4.2rem;overflow:auto;padding:6px 8px!important;font-size:.875rem!important;}
#gameScreen.rush-game .controls:has(> .btn:not(.hidden)) {margin-top:6px;}
#gameScreen.rush-game .controls:not(:has(> .btn:not(.hidden))) {display:none;}
/* During timed tapping keep the rhythm and input pad in the same screen. */
body.page-rhythm #clapScreen.active.clap-running {position:fixed;inset:0;z-index:100;height:100dvh;padding:8px 12px max(8px,env(safe-area-inset-bottom,0px))!important;background:#f2f6ff;overflow:hidden;}
#clapScreen.clap-running > .wrap {height:100%;max-width:880px;display:flex;flex-direction:column;}
#clapScreen.clap-running .game-subtitle,#clapScreen.clap-running .clap-controls,#clapScreen.clap-running .practice-note {display:none;}
#clapScreen.clap-running .game-shell {flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;}
#clapScreen.clap-running .game-shell > .panel {margin:0!important;padding:8px!important;}
#clapScreen.clap-running .mobile-actions {position:static!important;width:100%;max-width:none;padding:0!important;box-shadow:none;}
#clapScreen.clap-running #clapPatternDisplay {row-gap:12px!important;}
#clapScreen.clap-running .note-card {min-height:0!important;}
#clapScreen.clap-running .note-card svg {height:min(15dvh,120px)!important;width:100%;}
#clapScreen.clap-running .clap-pad {min-height:72px!important;padding:10px!important;}
@media(max-width:700px){
 body :is(.panel,.hud-panel) {padding:12px!important;margin-bottom:8px!important;}
 body .hero,body .ear-heading {padding:14px!important;}
 body .game-title,body .ear-top h1 {font-size:1rem!important;}
 .recent-grid {grid-template-columns:1fr;gap:10px;}
 .recent-practice {padding:14px;}
 body #earPrompt,body #sortPrompt {font-size:1.3rem!important;margin:12px 0!important;}
 body .ear-listen,body .echo-stage {padding:14px!important;}
}
@media(max-height:500px) and (orientation:landscape){
 #gameScreen.rush-game .game-shell {grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(100px,1fr) auto;}
 #gameScreen.rush-game .hud-grid {grid-column:1/-1;}
 #gameScreen.rush-game #letterPanel {grid-column:2;grid-row:2;align-self:center;}
 #gameScreen.rush-game .mobile-actions {grid-column:1/-1;grid-row:3;}
 #gameScreen.rush-game .falling-note {width:min(230px,90%,38dvh);}
 #gameScreen.rush-game .rush-ready {gap:6px;}
 #gameScreen.rush-game .rush-ready p {font-size:.8rem;}
}
[hidden] {display:none!important;}

body.page-chords #gameScreen.active {display:block;max-width:900px;margin-inline:auto;}
body.page-chords #gameScreen > .panel:last-child {position:static;}
body.page-chords #gameScreen > .panel {margin-bottom:12px;}
body.page-chords #gameScreen .hud-grid {grid-template-columns:1fr 1fr!important;margin:8px 0 12px;}
body.page-rhythm #gameScreen .hud-grid {grid-template-columns:repeat(3,minmax(0,1fr))!important;}
body #gameScreen .controls .btn {flex:1 1 auto;}