/* Phase 8 Part 5: mobile-only refinements. No desktop or playback layout changes. */
@media (max-width:720px) {
  html { scroll-padding-top:72px; }
  body { overflow-x:clip; -webkit-text-size-adjust:100%; }
  .main-content { min-width:0; padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); }
  .mobile-nav.loop-mobile-nav-v2 {
    height:calc(68px + env(safe-area-inset-bottom,0px));
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 30px rgba(0,0,0,.28);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  }
  .mobile-nav.loop-mobile-nav-v2 a { min-height:48px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .mobile-nav.loop-mobile-nav-v2 a:focus-visible { outline:2px solid #ff83c4; outline-offset:-2px; }
  .mobile-nav.loop-mobile-nav-v2 a.active .loop-mobile-nav-label { font-weight:800; }
  .mobile-nav.loop-mobile-nav-v2 a.loop-mobile-upload { transform:translateY(-2px); }
  .video-feed { overscroll-behavior-y:contain; }
  .video-card, .video-stage { min-width:0; }
  .video-stage { isolation:isolate; }
  .video-stage video.feed-video { display:block; width:100%; height:100%; }
  .video-actions { gap:8px; }
  .video-actions .round-action, .video-stage .loop-play-toggle { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .video-actions .round-action:focus-visible, .video-stage .loop-play-toggle:focus-visible { outline:2px solid #ff83c4; outline-offset:3px; }
  .video-caption { padding-bottom:max(12px,env(safe-area-inset-bottom,0px)); }
  .comment-form input, .comment-form textarea, .explore-search-bar input, .explore-search-bar select { font-size:16px; }
  .single-video-layout { min-width:0; }
  .single-player { max-width:100%; }
  .single-player video { display:block; }
  .comments, .video-detail { overflow-wrap:anywhere; }
  .comment-form { align-items:stretch; }
  .comment-form button { min-height:42px; }
}
@media (max-width:390px) { .mobile-nav.loop-mobile-nav-v2 a { gap:1px; } .mobile-nav.loop-mobile-nav-v2 a .loop-mobile-nav-label {font-size:9px;} }
@media (max-width:720px) and (orientation:landscape) { .mobile-nav.loop-mobile-nav-v2 {height:calc(58px + env(safe-area-inset-bottom,0px));} .mobile-nav.loop-mobile-nav-v2 a {min-height:40px;height:44px;} }
@media (prefers-reduced-motion:reduce) { .mobile-nav.loop-mobile-nav-v2 *, .video-stage .loop-play-toggle { transition:none!important; animation:none!important; } }