/* Mobile lesson: keep playback visible while the IPA picker scrolls below it. */
@media (max-width: 700px) {
  #vl-mask { padding: 0; align-items: stretch; }
  #vl-modal { width: 100vw; max-width: none; height: 100vh; height: 100dvh; border-radius: 0; }
  #vl-toolbar { flex: 0 0 auto; min-height: 48px; padding: 7px 12px; }
  #vl-toolbar #vl-close-btn { width: 36px; height: 36px; flex: 0 0 auto; }
  #vl-toolbar #vl-title { font-size: 14px; }
  #vl-body { flex-direction: column; min-height: 0; }
  #vl-stage { flex: 0 0 auto; width: 100%; height: min(56.25vw, 37dvh); min-height: 180px; }
  #vl-stage video { width: 100%; height: 100%; object-fit: contain; }
  #vl-stage #vl-empty { padding: 0 20px; text-align: center; font-size: 14px; }
  #vl-side { width: 100%; min-height: 0; flex: 1 1 auto; border-left: 0; border-top: 1px solid #3c3c3c; }
  #vl-side-title { padding: 7px 12px; font-size: 12px; }
  #vl-side-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 8px 10px; }
  .vl-cat { min-width: 0; align-self: start; }
  .vl-cat-head { min-height: 42px; padding: 8px; }
  .vl-cat-body { padding: 4px; }
  .vl-sub-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl-item { min-height: 42px; font-size: 15px; }
  #vl-controls { flex: 0 0 auto; padding: 8px 10px max(9px, env(safe-area-inset-bottom)); gap: 6px; }
  .vl-ctrl-group { gap: 5px; }
  .vl-ctrl-group button { min-height: 34px; padding: 5px 8px; font-size: 12px; }
  #vl-vol { width: min(30vw, 130px); }
  #vl-fullscreen { display: none; }
}
@media (max-width: 380px) {
  #vl-stage { min-height: 155px; }
  #vl-toolbar #vl-title { font-size: 12px; }
  #vl-side-list { gap: 4px; padding: 5px; }
  #vl-controls { gap: 4px; }
  .vl-ctrl-group button { padding: 4px 6px; }
}
@media (max-width: 700px) and (orientation: landscape) {
  #vl-body { flex-direction: row; }
  #vl-stage { flex: 1 1 64%; width: auto; height: auto; min-height: 0; }
  #vl-side { flex: 0 0 36%; width: 36%; border-top: 0; border-left: 1px solid #3c3c3c; }
  #vl-side-list { grid-template-columns: 1fr; }
  #vl-controls { padding-top: 4px; padding-bottom: 4px; }
}