/* 2026-10-18: child-first, screen-filling follow-along stage.
   This stylesheet changes layout only. Notes, keyboard, playback and timing remain untouched.
   Keep action/exit buttons visible; move secondary options below the playable surfaces. */
.app:has(#songScreen.active #songFollowArea:not([hidden]))>.topbar{
  height:48px;min-height:48px;padding:0 12px;
}
.app:has(#songScreen.active #songFollowArea:not([hidden])) .top-logo{font-size:19px}
.app:has(#songScreen.active #songFollowArea:not([hidden])) .logo-flower{font-size:20px}
.app:has(#songScreen.active #songFollowArea:not([hidden])) .header-right{gap:6px}
.app:has(#songScreen.active #songFollowArea:not([hidden])) .home-button,
.app:has(#songScreen.active #songFollowArea:not([hidden])) .top-icon,
.app:has(#songScreen.active #songFollowArea:not([hidden])) .family-open{
  min-height:40px;height:40px;
}
.app:has(#songScreen.active #songFollowArea:not([hidden])) .home-button,
.app:has(#songScreen.active #songFollowArea:not([hidden])) .top-icon{width:40px;border-radius:12px}
.app:has(#songScreen.active #songFollowArea:not([hidden])) .main-content{
  width:min(1680px,100%);margin:0 auto;padding:7px 12px 5px;flex:none;
}
.app:has(#songScreen.active #songFollowArea:not([hidden]))>.footer,
.app:has(#songScreen.active #songFollowArea:not([hidden]))>.analytics-parent-entry{display:none}
#songScreen:has(#songFollowArea:not([hidden])) .song-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:48px 6px minmax(94px,1.1fr) minmax(118px,1fr) 48px;
  gap:6px 12px;
  height:calc(100dvh - 67px);
  min-height:350px;
  padding:10px 12px;
  overflow:hidden;
}
#songScreen:has(#songFollowArea:not([hidden])) .song-progress{
  grid-column:1/-1;grid-row:1;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;gap:12px;min-width:0;min-height:0;
}
#songScreen:has(#songFollowArea:not([hidden])) .song-message{min-width:0;gap:8px}
#songScreen:has(#songFollowArea:not([hidden])) .song-message>span{
  width:37px;height:37px;font-size:23px;border-radius:12px;flex:0 0 auto;
}
#songScreen:has(#songFollowArea:not([hidden])) .song-message strong{
  font-size:clamp(17px,1.8vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#songScreen:has(#songFollowArea:not([hidden])) .song-message small{display:none}
#songScreen:has(#songFollowArea:not([hidden])) .song-buttons{
  width:auto;display:flex;flex:0 0 auto;gap:7px;justify-content:flex-end;
}
#songScreen:has(#songFollowArea:not([hidden])) .song-buttons button{
  flex:0 0 auto;min-height:44px;padding:8px 11px;
  border-radius:12px;font-size:13px;
}
#songScreen:has(#songFollowArea:not([hidden])) .progress-track{
  grid-column:1/-1;grid-row:2;margin:0;height:6px;align-self:center;
}
#songScreen #songFollowArea:not([hidden]){
  display:block;grid-column:1/-1;grid-row:3;
  width:100%;height:100%;min-height:0;margin:0;
}
#songScreen:has(#songFollowArea:not([hidden])) .follow-lanes{
  grid-column:1/-1;grid-row:3;
  width:100%;height:100%;min-height:0;min-width:0;margin:0;
  border-radius:14px 14px 3px 3px;
}
#songScreen:has(#songFollowArea:not([hidden])) .guided-keyboard.piano-keyboard{
  grid-column:1/-1;grid-row:4;
  min-height:0;height:100%;width:100%;
  border-top-left-radius:4px;border-top-right-radius:4px;
}
#songScreen:has(#songFollowArea:not([hidden])) .follow-topbar{
  position:absolute;left:12px;right:240px;bottom:10px;
  min-width:0;margin:0;min-height:48px;gap:8px;align-items:center;
  justify-content:flex-start;flex-wrap:nowrap;
}
#songScreen:has(#songFollowArea:not([hidden])) .follow-track-label{
  font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#songScreen:has(#songFollowArea:not([hidden])) .follow-difficulty{
  flex:0 0 auto;gap:5px;
}
#songScreen:has(#songFollowArea:not([hidden])) .follow-difficulty-button{
  min-height:44px;padding:7px 12px;font-size:13px;
}
#songScreen:has(#songFollowArea:not([hidden])) .keyboard-choice{
  grid-column:2;grid-row:5;display:flex;align-self:center;
  width:max-content;max-width:100%;height:48px;min-height:48px;
  margin:0;padding:2px;gap:3px;border-radius:14px;
}
#songScreen:has(#songFollowArea:not([hidden])) .keyboard-choice button{
  min-height:42px;padding:6px 11px;min-width:94px;
}
#songScreen:has(#songFollowArea:not([hidden])) .stage-footer{
  position:absolute;left:0;top:0;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;
}
#songScreen:has(#songFollowArea:not([hidden])) .song-tempo-controls{
  margin:8px 0;
}
@media(max-width:900px){
  #songScreen:has(#songFollowArea:not([hidden])) .follow-track-label{display:none}
}
@media(orientation:landscape) and (max-height:540px){
  .app:has(#songScreen.active #songFollowArea:not([hidden])) .main-content{
    padding:4px 8px 3px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .song-stage{
    height:calc(100dvh - 8px);min-height:326px;
    padding:6px 8px;
    grid-template-rows:43px 5px minmax(78px,1.1fr) minmax(103px,1fr) 48px;
    gap:4px 8px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .song-message>span{
    width:32px;height:32px;font-size:20px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .song-buttons button{
    min-height:43px;padding:5px 9px;font-size:12px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .follow-topbar{left:8px;right:230px;bottom:6px}
  #songScreen:has(#songFollowArea:not([hidden])) .follow-lanes{height:100%}
  #songScreen:has(#songFollowArea:not([hidden])) .guided-keyboard.piano-keyboard{height:100%}
}
@media(orientation:portrait) and (max-width:600px){
  .app:has(#songScreen.active #songFollowArea:not([hidden]))>.topbar{
    height:52px;min-height:52px;
  }
  .app:has(#songScreen.active #songFollowArea:not([hidden])) .main-content{
    padding:6px 8px 4px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .song-stage{
    height:calc(100dvh - 67px);min-height:505px;
    padding:9px 8px;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:87px 6px minmax(118px,1.22fr) minmax(170px,1fr) 48px 48px;
    gap:5px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .song-progress{
    grid-column:1;grid-row:1;flex-wrap:wrap;align-content:center;gap:2px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .song-message{
    width:100%;min-height:31px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .song-message>span{
    width:27px;height:27px;font-size:18px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .song-buttons{
    width:100%;justify-content:flex-start;gap:6px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .song-buttons button{
    min-height:43px;padding:6px 10px;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .progress-track{grid-column:1;grid-row:2}
  #songScreen:has(#songFollowArea:not([hidden])) .follow-lanes{grid-column:1;grid-row:3}
  #songScreen:has(#songFollowArea:not([hidden])) .guided-keyboard.piano-keyboard{grid-column:1;grid-row:4}
  #songScreen:has(#songFollowArea:not([hidden])) .follow-topbar{
    left:8px;right:8px;bottom:62px;justify-content:center;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .keyboard-choice{
    grid-column:1;grid-row:6;width:100%;justify-content:center;
  }
  #songScreen:has(#songFollowArea:not([hidden])) .keyboard-choice button{
    flex:1;min-width:0;
  }
}
@media (prefers-reduced-motion:reduce){
  #songScreen:has(#songFollowArea:not([hidden])) .song-stage{scroll-behavior:auto}
}