/* Child-first keyboard toggle. Existing full keyboard stays opt-in without changing its design. */
.keyboard-choice{display:flex;gap:5px;width:max-content;max-width:100%;margin:4px 0 9px;padding:4px;border-radius:16px;background:#edf2f9;border:1px solid #dee4f0}
.keyboard-choice button{font:800 13px 'Nunito','Jua',sans-serif;color:#576a7e;border:0;border-radius:12px;min-height:37px;min-width:96px;padding:6px 12px;background:transparent;cursor:pointer}
.keyboard-choice button[aria-pressed="true"]{background:#fff;color:#294d74;box-shadow:0 2px 7px #435a7a22}
.keyboard-choice button:focus-visible{outline:3px solid #428add;outline-offset:2px}
@media(orientation:landscape) and (max-height:540px){
 .keyboard-choice{margin:1px 0 4px;padding:2px;border-radius:11px}
 .keyboard-choice button{min-height:28px;min-width:82px;font-size:12px;padding:2px 8px;border-radius:9px}
}
@media(orientation:portrait) and (max-width:600px){.keyboard-choice{margin:5px 0 7px}}

/* Landscape practice focus: show music lane and playable keys in one viewport.
   Leave song selection and mode options intact behind the explicit back control. */
.song-follow-back{display:none}
@media(orientation:landscape) and (max-height:540px){
 #songScreen:has(#songFollowArea:not([hidden])) .section-heading,
 #songScreen:has(#songFollowArea:not([hidden])) #songList,
 #songScreen:has(#songFollowArea:not([hidden])) .song-mode-select,
 #songScreen:has(#songFollowArea:not([hidden])) .orientation-hint,
 #songScreen:has(#songFollowArea:not([hidden])) .progress-track,
 #songScreen:has(#songFollowArea:not([hidden])) .stage-footer{display:none!important}
 #songScreen:has(#songFollowArea:not([hidden])) .song-follow-back{display:inline-flex}
 #songScreen:has(#songFollowArea:not([hidden])) .song-stage{padding:6px 8px 7px}
 #songScreen:has(#songFollowArea:not([hidden])) .song-progress{margin:0 0 3px;gap:7px}
 #songScreen:has(#songFollowArea:not([hidden])) .song-buttons{gap:4px}
 #songScreen:has(#songFollowArea:not([hidden])) .song-buttons button{padding:4px 8px;font-size:11px;min-height:28px}
 #songScreen:has(#songFollowArea:not([hidden])) .song-message small{display:none}
 #songScreen:has(#songFollowArea:not([hidden])) .follow-topbar{min-height:22px;margin:0 0 2px}
 #songScreen:has(#songFollowArea:not([hidden])) .follow-lanes{height:65px}
 #songScreen:has(#songFollowArea:not([hidden])) .follow-area{margin:2px 0 0}
 #songScreen:has(#songFollowArea:not([hidden])) .keyboard-choice{margin:2px 0 3px}
 #songScreen:has(#songFollowArea:not([hidden])) .keyboard.piano-keyboard{height:clamp(104px,30vh,128px)}
}

/* Immersive follow mode at every breakpoint: no competing song list in play. */
.song-follow-back[hidden]{display:none!important}
#songScreen:has(#songFollowArea:not([hidden])) .section-heading,
#songScreen:has(#songFollowArea:not([hidden])) #songList,
#songScreen:has(#songFollowArea:not([hidden])) .song-mode-select,
#songScreen:has(#songFollowArea:not([hidden])) .orientation-hint{display:none!important}
#songScreen:has(#songFollowArea:not([hidden])) .song-follow-back:not([hidden]){display:inline-flex}

/* v2.2 - legible practice controls and a calm completion state */
.song-stage{position:relative}
.follow-complete[hidden]{display:none!important}
.follow-complete{
  position:absolute;z-index:11;inset:19% 6% auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:172px;padding:20px 12px;text-align:center;
  background:#fff9ed;border:2px solid #f4d89b;border-radius:22px;
  box-shadow:0 12px 30px #3b405226;
}
.follow-complete strong{font:900 clamp(24px,3.8vw,37px) 'Jua',sans-serif;color:#7b5235}
.follow-complete span{font-weight:800;color:#8c704f;font-size:14px}
.follow-complete-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.follow-complete-actions button{min-height:48px;min-width:120px;border-radius:16px;padding:10px 16px;font-weight:900;background:#e4f6ef;color:#315c52}
.follow-complete-actions button:last-child{background:#f0eafb;color:#66528b}
.follow-complete-actions button:focus-visible{outline:3px solid #3e79c5;outline-offset:3px}
#songScreen:has(#songFollowArea:not([hidden])) .song-buttons button{
  background:#f7f9fd;box-shadow:none;border:1px solid #d9e2ec;color:#43586d;
}
#songScreen:has(#songFollowArea:not([hidden])) .follow-difficulty-button{min-height:48px;padding:8px 12px;font-size:13px}
#songScreen:has(#songFollowArea:not([hidden])) .keyboard-choice button{min-height:48px}
#songScreen:has(#songFollowArea:not([hidden])) .song-buttons button{min-height:48px}
@media(orientation:landscape) and (max-height:540px){
  .app:has(#songScreen #songFollowArea:not([hidden]))>.topbar{display:none}
  #songScreen:has(#songFollowArea:not([hidden])) .song-buttons button{min-height:48px;padding:5px 10px;font-size:13px}
  #songScreen:has(#songFollowArea:not([hidden])) .follow-difficulty-button{min-height:48px;font-size:13px;padding:6px 10px}
  #songScreen:has(#songFollowArea:not([hidden])) .keyboard-choice button{min-height:48px;font-size:13px;padding:5px 10px}
  #songScreen:has(#songFollowArea:not([hidden])) .follow-lanes{height:65px}
  #songScreen:has(#songFollowArea:not([hidden])) .progress-track{display:block!important;margin:4px 0;height:6px}
  #songScreen:has(#songFollowArea:not([hidden])) .follow-topbar{min-height:48px}
  #songScreen:has(#songFollowArea:not([hidden])) .keyboard.piano-keyboard{height:clamp(102px,28vh,116px)}
  .follow-complete{inset:9% 5% auto;min-height:205px}
}
@media(max-width:600px) and (orientation:portrait){
 .follow-complete{inset:23% 5% auto}
}
@media(prefers-reduced-motion:reduce){.follow-complete,.follow-complete *{animation:none!important;transition:none!important}}