/* A listening game: positions reveal pitch direction only after an answer. */
.ear-controls > #earReplay {width:100%;margin-top:14px;}
.ear-listen .ear-sound-steps {grid-column:1/-1;}
#earPlay[data-mode="pitch"] {--pitch-blue:#245da8;--pitch-violet:#6343a7;}
#earPlay[data-mode="pitch"] .ear-top h1 {font-size:1.125rem!important;}
#earPlay[data-mode="pitch"] #earScore {padding:7px 11px;background:#fff0bf;border-radius:10px;color:#715209;font-size:.875rem;}
#earPlay[data-mode="pitch"] #earPrompt {font-size:clamp(1.3rem,3.8vw,1.65rem);letter-spacing:-.025em;line-height:1.3;margin:20px 0 14px;}
.pitch-guide {max-width:480px;margin:0 auto 18px;text-align:center;color:#52627c;font-size:1rem;line-height:1.5;}
.pitch-guide strong {color:#25355b;}
#earPlay[data-mode="pitch"] .ear-listen {display:block;padding:26px 24px 18px;background:radial-gradient(ellipse at 50% 0,#eef2ff,transparent 80%),#fff!important;border-color:#d7dff1!important;overflow:hidden;}
#earPlay[data-mode="pitch"] .ear-sound-steps {display:grid;grid-template-columns:repeat(2,minmax(0,150px));gap:40px;justify-content:center;align-items:center;margin:0 0 16px;padding:20px 0;}
.pitch-note {position:relative;display:grid;justify-items:center;gap:12px;min-width:0;transition:translate 320ms cubic-bezier(.2,.8,.2,1);}
.pitch-note b {position:absolute;top:-5px;left:calc(50% - 49px);z-index:1;display:grid;place-items:center;width:28px;height:28px;background:#fff;border:1px solid #c6d2ee;border-radius:50%;font:700 .875rem/1 system-ui;color:#52627c;}
.pitch-note i {display:grid;place-items:center;font:normal 3.2rem/1 Georgia,serif;width:92px;height:92px;background:#e3eaff;color:#4857b4;border:2px solid #c6d2f2;border-radius:28px;box-shadow:0 5px 0 #cbd5f2;}
.pitch-note strong {font-size:1rem;line-height:1.3;color:#384a6b;}
.pitch-note.sounding i {background:#4b57c6;color:#fff;border-color:#4b57c6;box-shadow:0 5px 0 #30398c,0 0 0 7px #e5e9ff;}
#earPlay[data-reveal="higher"] .pitch-note:nth-child(2) {translate:0 -18px;}
#earPlay[data-reveal="lower"] .pitch-note:nth-child(2) {translate:0 18px;}
.pitch-reveal {margin:4px 0 12px;font-weight:750;color:#43469b;font-size:1rem;}
#earPlay[data-mode="pitch"] #earAudioStatus {font-size:1rem;line-height:1.4;min-height:1.4em;margin:0;color:#52627c;}
#earPlay[data-phase="choose"] #earAudioStatus {color:#265a46;font-weight:650;}
.pitch-tutorial {display:grid;gap:12px;margin-top:18px;}
.pitch-examples {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pitch-tutorial #pitchStart {width:100%;min-height:50px!important;}
#earPlay[data-mode="pitch"] .ear-controls > #earReplay {min-height:48px!important;}
#earPlay[data-mode="pitch"] .ear-answers {gap:14px;margin:14px 0;}
#earPlay[data-mode="pitch"] .ear-answer {display:flex;align-items:center;justify-content:center;gap:16px;min-height:108px!important;padding:16px!important;text-align:left;border-width:2px!important;border-radius:18px!important;opacity:1;}
#earPlay[data-mode="pitch"] #earAnswerA {background:#e5f2ff!important;border-color:#a2c9ed!important;color:#24578d!important;}
#earPlay[data-mode="pitch"] #earAnswerB {background:#f0e9ff!important;border-color:#c6b2ed!important;color:#614398!important;}
#earPlay[data-mode="pitch"] .ear-answer:disabled:not(.correct):not(.wrong) {opacity:.5;}
#earPlay[data-mode="pitch"] .ear-answer:not(:disabled):hover {box-shadow:0 0 0 4px #3339a40d!important;}
.pitch-arrow {display:grid;place-items:center;flex:0 0 auto;width:42px;height:48px;font:700 2.6rem/1 system-ui;}
.pitch-choice {display:grid;gap:4px;}
.pitch-choice strong {font-size:1.3rem;line-height:1.2;}
.pitch-choice small {font-size:.875rem;line-height:1.3;font-weight:500;}
#earPlay[data-mode="pitch"] :is(#earAnswerA,#earAnswerB).correct {background:#def7e9!important;border-color:#219260!important;color:#17613e!important;}
#earPlay[data-mode="pitch"] :is(#earAnswerA,#earAnswerB).wrong {background:#fff3d3!important;border-color:#d4b467!important;color:#765008!important;}
#earPlay[data-mode="pitch"] .ear-footer {min-height:0;grid-template-columns:1fr;gap:10px;}
#earPlay[data-mode="pitch"] #earFeedback {margin:0;}
#earPlay[data-mode="pitch"] #earFeedback:empty {display:none;}
#earPlay[data-mode="pitch"] #earNext {width:100%;min-height:48px!important;}
#earPlay[data-mode="pitch"] .ear-footer:has(#earFeedback:empty):has(#earNext[hidden]) {display:none;}
#earPlay[data-phase="answered"] .ear-answer:not(.correct):not(.wrong) {opacity:.5;}
@keyframes pitch-sound {0%,100%{scale:1;}50%{scale:1.07;}}
@keyframes pitch-score {0%{scale:1;}50%{scale:1.14;}100%{scale:1;}}
@media(prefers-reduced-motion:no-preference){
 .pitch-note.sounding i {animation:pitch-sound 500ms ease-in-out infinite;}
 #earPlay[data-phase="answered"] #earScore {animation:pitch-score 320ms ease-out;}
 #earPlay[data-mode="pitch"] .ear-answer:not(:disabled):active {transform:scale(.97)!important;}
}
@media(max-width:999px){
 #earPlay[data-mode="pitch"] {padding-bottom:calc(16rem + env(safe-area-inset-bottom,0px));}
 #earPlay[data-mode="pitch"][data-phase="learn"] {padding-bottom:calc(11rem + env(safe-area-inset-bottom,0px));}
 #earPlay[data-mode="pitch"][data-phase="answered"] {padding-bottom:calc(17rem + env(safe-area-inset-bottom,0px));}
 #earPlay[data-mode="pitch"] .ear-controls {position:fixed;z-index:80;bottom:0;inset-inline:0;width:min(100%,720px);margin:0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border:1px solid #d6dff0;border-radius:20px 20px 0 0;box-shadow:0 -6px 28px #25355b0d;}
 #earPlay[data-mode="pitch"] .ear-controls > #earReplay {margin-top:0;}
 #earPlay[data-mode="pitch"] .ear-footer {position:static;inset:auto;margin:0;padding:0;border:0;box-shadow:none;min-height:0;}
 #earPlay[data-mode="pitch"] .ear-answers {gap:10px;margin:10px 0 0;}
 #earPlay[data-mode="pitch"][data-phase="answered"] .ear-answers {display:none;}
 #earPlay[data-mode="pitch"][data-phase="answered"] .ear-footer {margin-top:10px;}
 #earPlay[data-mode="pitch"] .ear-answer {min-height:76px!important;padding:10px!important;gap:8px;}
 .pitch-arrow {width:32px;font-size:2rem;}
 .pitch-choice strong {font-size:1.125rem;}
 .pitch-tutorial {gap:10px;margin:0;}
 .pitch-examples {gap:10px;}
 #earPlay[data-mode="pitch"] #earFeedback {max-height:4.5rem;overflow:auto;}
 #earPlay[data-mode="pitch"] .ear-listen {padding:16px 12px 12px;}
 #earPlay[data-mode="pitch"] .ear-sound-steps {gap:16px;padding:16px 0;margin-bottom:12px;}
 .pitch-note {gap:10px;}
 .pitch-note i {width:74px;height:74px;font-size:2.75rem;border-radius:24px;}
 .pitch-note b {left:calc(50% - 42px);}
 #earPlay[data-mode="pitch"] #earPrompt {font-size:1.25rem;margin:14px 0 12px;}
 body:has(#earPlay[data-mode="pitch"]:not([hidden])) .site-footer {padding-bottom:calc(18rem + env(safe-area-inset-bottom,0px));}
 body:has(#earPlay[data-mode="pitch"][data-phase="answered"]:not([hidden])) .site-footer {padding-bottom:calc(19rem + env(safe-area-inset-bottom,0px));}
}
@media(max-height:740px) and (max-width:999px){
 #earPlay[data-mode="pitch"] .ear-sound-steps {padding:12px 0;}
 .pitch-note i {width:60px;height:60px;font-size:2.3rem;border-radius:20px;}
 .pitch-note b {width:24px;height:24px;left:calc(50% - 35px);}
 #earPlay[data-mode="pitch"] .ear-progress {margin-block:10px;}
}
@media(prefers-reduced-motion:reduce){.pitch-note {transition:none;}.pitch-note.sounding i {animation:none;} }