/* Shapes identify sounds, never pitch. Keep the ordering line left to right. */
#sortPlay {max-width:720px;margin-inline:auto;}
.sort-menu-card {position:relative;overflow:hidden;}
.sort-menu-card::after {content:'●  ◆  ★';position:absolute;right:22px;top:20px;color:#d7c7ec;font-size:1.2rem;letter-spacing:6px;pointer-events:none;}
.sort-menu-card .ear-eyebrow {padding-right:110px;display:block;}
#sortScore {padding:6px 10px;border-radius:10px;background:#fff0bf;color:#715209;font-size:.875rem;white-space:nowrap;}
#sortPrompt {margin:18px 0 8px;font-size:clamp(1.25rem,4vw,1.6rem);line-height:1.25;letter-spacing:-.025em;text-align:center;color:#25355b;}
.sort-instructions {margin:0 auto 16px;max-width:460px;text-align:center;font-size:1rem;line-height:1.45;color:#52627c;}
/* Keep the tray out of a stacking context so a dragged card can cross panels. */
.sort-bank-wrap {position:relative;min-height:150px;padding:8px 0 14px;}
.sort-bank-wrap::before {content:'';position:absolute;inset:18px 12px 8px;border-radius:20px;border:1px solid #e4dfea;background:#fff;z-index:0;box-shadow:0 4px 0 #eae6f0;pointer-events:none;}
.sort-bank {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
#sortBankEmpty {position:absolute;z-index:1;inset:0;display:grid;place-items:center;text-align:center;margin:0;color:#52627c;font-size:.9375rem;pointer-events:none;}
.sort-card {z-index:1;}
.sort-card {--sort-color:#245da8;--sort-tint:#e7f1ff;--sort-edge:#afcaec;position:relative;min-width:0;background:linear-gradient(145deg,#fff 20%,var(--sort-tint));border:2px solid var(--sort-edge);border-radius:18px;box-shadow:0 4px 0 var(--sort-edge),0 8px 14px #25355b0d,inset 0 0 0 3px #fff;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.sort-card[data-sort-card=diamond] {--sort-color:#6840a2;--sort-tint:#f2eaff;--sort-edge:#d2bde9;}
.sort-card[data-sort-card=star] {--sort-color:#956112;--sort-tint:#fff4d5;--sort-edge:#e3c780;}
.sort-card button {font-family:inherit;color:var(--sort-color);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;}
.sort-listen {display:grid;place-items:center;gap:3px;width:100%;padding:12px 4px 8px;min-height:96px;border:0;border-radius:16px 16px 0 0;background:transparent;}
.sort-symbol {display:grid;place-items:center;min-width:48px;min-height:42px;border-radius:14px;background:var(--sort-tint);box-shadow:inset 0 1px 0 #fff;font-size:2rem;line-height:1.1;}
.sort-corner {position:absolute;left:10px;top:8px;font-size:.875rem;line-height:1;color:var(--sort-color);pointer-events:none;}
.sort-sound-bars {position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:2px;height:14px;opacity:0;pointer-events:none;}
.sort-sound-bars i {width:3px;height:10px;border-radius:2px;background:currentColor;}
.sort-sound-bars i:nth-child(2) {height:14px;}
.sort-card.heard .sort-corner::after {content:'✓';display:block;margin-top:5px;font-size:.8125rem;}
.sort-listen strong {font-size:1rem;line-height:1.3;}
.sort-listen small {font-size:.875rem;line-height:1.3;}
.sort-move {display:block;width:100%;min-height:44px;padding:6px 3px;border:0;border-top:1px solid var(--sort-edge);border-radius:0 0 16px 16px;background:#ffffff7a;font-size:.875rem;font-weight:700;line-height:1.25;cursor:grab!important;}
.sort-card.selected {outline:3px solid #3339a4;outline-offset:4px;box-shadow:0 5px 0 var(--sort-edge),0 10px 20px #3339a420;}
.sort-card.sounding {background:var(--sort-color);border-color:var(--sort-color);box-shadow:0 0 0 5px var(--sort-tint);}
.sort-card.sounding button {color:#fff;}
.sort-card.sounding .sort-corner,.sort-card.sounding .sort-sound-bars {color:#fff;}
.sort-card.sounding .sort-symbol {background:#ffffff24;box-shadow:none;}
.sort-card.sounding .sort-sound-bars {opacity:1;}
.sort-card.sounding .sort-move {background:transparent;}
.sort-card button:disabled {cursor:default!important;}
.sort-card.dragging {z-index:1001;transform:translate(var(--drag-x,0px),var(--drag-y,0px)) rotate(3deg) scale(1.04);pointer-events:none;box-shadow:0 6px 0 var(--sort-edge),0 18px 28px #26375c30;transition:none;cursor:grabbing;}
.sort-line-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;color:#4f4585;font-size:.9375rem;font-weight:700;margin:12px 0 8px;}
.sort-line-heading > :nth-child(2) {flex:1;text-align:center;font-size:1.5rem;line-height:1;}
.sort-line {position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:10px;background:linear-gradient(160deg,#f4f0fc,#eae4f6);border:1px solid #d8cee9;border-radius:22px;box-shadow:inset 0 2px 5px #6150800a,0 3px 0 #e0d8ed;}
.sort-slot {position:relative;min-width:0;min-height:204px;border:2px dashed #c2b8da;border-radius:16px;background:#ffffff80;padding:0 5px 8px;}
.sort-place {display:block;width:100%;min-height:44px;border:0;border-radius:10px;background:transparent;font:700 .875rem/1.3 system-ui;color:#66578a;cursor:pointer;}
.sort-place:disabled {cursor:default;}
.sort-slot:not(.filled) .sort-place {position:absolute;inset:0;}
.sort-slot.filled {border-color:transparent;background:transparent;}
.sort-slot.drop-target {background:#ded8fa;border-color:#6350aa;border-style:solid;box-shadow:0 0 0 3px #b4a6e755;}
#sortPlay:has(.sort-card.selected) .sort-slot {border-color:#9e8bc8;}
#sortPlay[data-outcome=correct] .sort-line {background:#e9f7ef;border-color:#9ccbb0;box-shadow:0 3px 0 #badbc8;}
#sortPlay[data-outcome=correct] .sort-place {color:#17613e;}
#sortPlay[data-outcome=correct] .sort-place::after {content:' ✓';}
#sortPlay[data-outcome=correct] #sortScore {background:#e2f4e9;color:#17613e;}
#sortPlay[data-outcome=retry] .sort-line {border-color:#d6bb79;}
#sortPlay[data-outcome=correct] .sort-line::after {content:'✦';position:absolute;inset:40% 0 auto;text-align:center;color:#ddab32;font-size:1.5rem;text-shadow:-90px -20px #9370ca,90px 12px #40a483;pointer-events:none;opacity:0;}
.sort-help {color:#52627c;font-size:.875rem;line-height:1.45;margin:12px 0 18px;text-align:center;}
.sort-dock {display:grid;gap:10px;background:#fff;border:1px solid #dfe5ef;border-radius:18px;padding:16px;}
#sortStatus {font-size:.9375rem;line-height:1.35;color:#52627c;text-align:center;margin:0;min-height:1.35em;}
.sort-audio-actions,.sort-check-actions {display:flex;gap:10px;}
.sort-dock .btn {flex:1;min-width:0;white-space:normal;min-height:48px!important;padding:10px 12px!important;}
#sortFeedback {margin:0;}
#sortResults {margin-top:20px;}
@media(hover:hover){
 .sort-card:not(.dragging):not(.sounding):hover {border-color:var(--sort-color);}
 .sort-place:not(:disabled):hover {background:#ded8fa;}
}
@keyframes sort-sound {50%{scale:1.12;}}
@keyframes sort-bars {0%,100%{scale:1 .45;}50%{scale:1 1;}}
@keyframes sort-cheer {0%,100%{transform:translateY(0) rotate(0);}40%{transform:translateY(-7px) rotate(-8deg);}70%{transform:translateY(-2px) rotate(5deg);}}
@keyframes sort-sparkles {0%{opacity:0;transform:translateY(12px) scale(.7);}25%{opacity:1;}100%{opacity:0;transform:translateY(-45px) scale(1.15);}}
@media(prefers-reduced-motion:no-preference){
 .sort-card.sounding .sort-symbol {animation:sort-sound 500ms ease-in-out infinite;}
 .sort-card.sounding .sort-sound-bars i {animation:sort-bars 450ms ease-in-out infinite;}
 .sort-card.sounding .sort-sound-bars i:nth-child(2) {animation-delay:-150ms;}
 .sort-card.sounding .sort-sound-bars i:nth-child(3) {animation-delay:-300ms;}
 .sort-card:not(.dragging) {transition:background-color 120ms ease,box-shadow 120ms ease,border-color 120ms ease;}
 .sort-slot {transition:background-color 120ms ease,box-shadow 120ms ease;}
 #sortPlay[data-outcome=correct] .sort-card:not(.sounding) .sort-symbol {animation:sort-cheer 500ms ease-out both;}
 #sortPlay[data-outcome=correct] .sort-slot:nth-child(2) .sort-symbol {animation-delay:80ms;}
 #sortPlay[data-outcome=correct] .sort-slot:nth-child(3) .sort-symbol {animation-delay:160ms;}
 #sortPlay[data-outcome=correct] .sort-line::after {animation:sort-sparkles 850ms ease-out both;}
}
@media(prefers-reduced-motion:reduce){.sort-card.dragging {transform:translate(var(--drag-x,0px),var(--drag-y,0px));}}
@media(max-width:999px){
 #sortPlay:has(#sortRound:not([hidden])) {padding-bottom:calc(18rem + env(safe-area-inset-bottom,0px));}
 .sort-dock {position:fixed;z-index:80;inset-inline:12px;bottom:0;max-width:720px;margin:0 auto;border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #17274414;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));gap:8px;}
 #sortFeedback {max-height:6rem;overflow-y:auto;}
}
@media(max-width:700px){
 /* A focused game view leaves room to drag on phones. Games restores the nav. */
 body.page-ear:has(#sortPlay:not([hidden])) :is(.app-nav,.student-bar) {display:none!important;}
 #sortPlay .ear-top {flex-wrap:nowrap;gap:8px!important;}
 #sortPlay .ear-top h1 {font-size:1rem!important;min-width:0;}
 #sortPlay .ear-top .btn {font-size:.875rem!important;white-space:nowrap;}
 #sortScore {padding:5px 7px;font-size:.8125rem;}
 #sortPlay .ear-progress {margin:10px 0;font-size:.875rem;}
 #sortPrompt {font-size:1.25rem;margin:10px 0 6px;}
 .sort-instructions {font-size:.9375rem;line-height:1.35;margin:0 0 8px;}
 .sort-bank-wrap {min-height:124px;padding:6px 0 10px;}
 .sort-bank,.sort-line {gap:8px;}
 .sort-card {border-radius:14px;}
 .sort-listen {min-height:74px;padding:6px 2px 4px;gap:1px;border-radius:12px 12px 0 0;}
 .sort-symbol {font-size:1.5rem;min-width:34px;min-height:28px;border-radius:10px;}
 .sort-corner {left:5px;top:7px;font-size:.8125rem;}
 .sort-sound-bars {right:5px;top:8px;gap:1px;}
 .sort-sound-bars i {width:2px;}
 .sort-listen strong {font-size:.9375rem;}
 .sort-listen small {font-size:.875rem;}
 .sort-move {border-radius:0 0 12px 12px;}
 .sort-line-heading {margin:8px 0 6px;font-size:.875rem;}
 .sort-line {padding:6px;border-radius:18px;}
 .sort-slot {min-height:172px;padding:0 0 4px;border-radius:12px;}
 .sort-help {margin:10px 0 12px;}
 .sort-dock {inset-inline:8px;padding-inline:10px;}
 .sort-dock .btn {min-height:44px!important;font-size:.875rem!important;padding:8px 6px!important;}
 #sortStatus {font-size:.875rem;}
 .sort-audio-actions,.sort-check-actions {gap:8px;}
}