/* Shared card surfaces. Play areas deliberately do not create stacking contexts:
   movable notes must be able to travel above adjacent panels and action docks. */
:root {--nl-card-border:#dce3ee;--nl-card-shadow:0 3px 0 #e5eaf3,0 7px 22px #24396007;--nl-card-radius:18px;}
body .hero,body .ear-heading {background:#fff!important;border:1px solid var(--nl-card-border)!important;border-radius:var(--nl-card-radius)!important;padding:22px 24px!important;margin-bottom:20px!important;box-shadow:var(--nl-card-shadow)!important;}
body .hero h1,body .ear-heading h1 {margin-top:0!important;}
body .hero p,body .ear-heading p {margin-bottom:0!important;}
body .card,body .ear-card,body .ear-chord-card {border-color:var(--nl-card-border)!important;border-radius:var(--nl-card-radius)!important;box-shadow:var(--nl-card-shadow)!important;}
body .card .card-tag {max-width:calc(100% - 52px);}
body .card .card-emoji {position:absolute!important;top:16px!important;right:16px!important;bottom:auto!important;left:auto!important;display:grid!important;place-items:center;width:38px!important;height:38px!important;font-size:1.4rem!important;border-radius:12px!important;background:#f3f5fc!important;opacity:1!important;transform:none!important;box-shadow:none!important;pointer-events:none;}
body .difficulty-filter,body .category-nav {border:1px solid var(--nl-card-border)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 2px 0 #e8edf5!important;}
.ear-extra-games {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch;}
.ear-extra-games > .ear-chord-card {margin:0;min-width:0;}
.ear-extra-games > .ear-chord-card:not(.difficulty-hidden) {display:flex;flex-direction:column;align-items:stretch;}
.ear-extra-games .ear-chord-buttons {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:16px;}
.ear-extra-games .ear-chord-buttons .btn {min-width:0;}
.ear-extra-games .ear-chord-buttons [data-game] {grid-column:1/-1;}
.ear-extra-games #echoOpen {margin-top:auto;width:100%;}
.ear-extra-games #exampleStatus {margin-bottom:0;}
.ear-extra-games .ear-tip {margin-bottom:16px!important;}
.ear-extra-games .sort-menu-card::after {display:none;}
.ear-extra-games .sort-menu-card .ear-eyebrow {padding-right:0;}
body :is(.panel,.hud-panel,.ear-listen,.echo-stage,.ear-results) {border:1px solid var(--nl-card-border)!important;border-radius:var(--nl-card-radius)!important;box-shadow:var(--nl-card-shadow)!important;}
body :is(.game-topbar,.ear-top),body.page-rhythm :is(#gameScreen,#clapScreen) .game-topbar,body.page-notes #gameScreen .game-topbar {padding:12px 16px!important;background:#fff!important;border:1px solid var(--nl-card-border)!important;border-radius:16px!important;box-shadow:0 2px 0 #e5eaf3!important;margin-bottom:16px!important;}
body .hud-box {background:#f6f8fc!important;border:1px solid #e1e7f1!important;border-radius:12px!important;}
.ear-progress {padding:10px 14px;background:#fff;border:1px solid var(--nl-card-border);border-radius:12px;}
.pitch-guide {padding:14px 16px;background:#fff;border:1px solid var(--nl-card-border);border-radius:14px;}
/* Keep existing fixed mobile answer controls in their original position. */
@media(min-width:1000px){
 .ear-footer:not(:has(#earFeedback:empty)),.echo-dock {padding:14px;background:#fff;border:1px solid var(--nl-card-border);border-radius:16px;box-shadow:var(--nl-card-shadow);margin-top:14px;}
}
@media(max-width:700px){
 body .hero,body .ear-heading {padding:16px!important;margin-bottom:16px!important;}
 .ear-extra-games {grid-template-columns:1fr;gap:16px;}
 body :is(.game-topbar,.ear-top),body.page-rhythm :is(#gameScreen,#clapScreen) .game-topbar,body.page-notes #gameScreen .game-topbar {padding:8px 10px!important;margin-bottom:10px!important;}
 .ear-progress {padding:8px 10px;}
 .pitch-guide {padding:12px;}
 /* The sorting board remains compact enough for finger travel between rows. */
 #sortPlay .ear-top {padding:6px 8px!important;}
 #sortPlay .ear-progress {padding:6px 10px;}
 body .card .card-emoji {top:14px!important;right:14px!important;width:32px!important;height:32px!important;font-size:1.2rem!important;}
}