/* TU Player mobile performance layer */
@media (max-width:760px){
  html,body{
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }

  /* Keep the glass identity but reduce the expensive blur on small screens. */
  .glass{
    -webkit-backdrop-filter:blur(7px)!important;
    backdrop-filter:blur(7px)!important;
  }

  /* Disable desktop-only hover/tilt work on touch devices. */
  .tilt{
    transform:none!important;
    transition:none!important;
    will-change:auto!important;
  }

  .reveal{
    transition:none!important;
    animation:none!important;
    will-change:auto!important;
  }

  .feature-glow{
    animation:none!important;
  }

  /* Avoid repeatedly repainting large decorative effects. */
  .hero,
  .hero-wrap,
  .hero-content,
  .hero-art{
    background-attachment:scroll!important;
  }

  /* Do not render every lower section during the first viewport. */
  #catalog,
  #plans,
  #matches,
  #reviews,
  #download,
  #support,
  footer{
    content-visibility:auto;
    contain-intrinsic-size:700px;
  }

  /* Images below the first screen should not block the initial render. */
  .feature-art img,
  .review img,
  .plan img,
  .payment img{
    content-visibility:auto;
  }
}

/* ===== TU PLAYER FIRST-VIEW MOBILE PERFORMANCE ===== */
@media (max-width:760px){

  /* Kill expensive continuous visual work above the fold */
  body::before,
  body::after,
  header::before,
  header::after,
  .hero::before,
  .hero::after,
  .hero-wrap::before,
  .hero-wrap::after{
    animation:none!important;
  }

  /* Avoid costly blur/filter layers on the first viewport */
  .hero .glass,
  .hero-wrap .glass,
  .hero-content,
  .hero-art{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  /* Keep the visual glass look with a cheap fallback */
  .hero .glass,
  .hero-wrap .glass{
    background:rgba(4,15,40,.72)!important;
  }

  /* Disable pointer/hover effects on touch */
  .tilt,
  .tilt:hover,
  .feature:hover{
    transform:none!important;
    transition:none!important;
  }

  /* Stop layout thrashing from animated reveal elements */
  .hero .reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  /* Hero images decode/render without forcing huge paints */
  .hero img,
  .hero-art img,
  .hero-visual img{
    content-visibility:auto;
    contain:layout paint;
    backface-visibility:hidden;
  }

  /* Reduce GPU pressure from large shadows/glows */
  .hero *,
  .hero-wrap *,
  .hero-content *,
  .hero-art *{
    text-shadow:none!important;
  }

  .hero .feature-glow,
  .hero .glow,
  .hero .orb,
  .hero .floating,
  .hero .particles{
    display:none!important;
  }

  /* Keep lower sections deferred until they approach viewport */
  #catalog,
  #plans,
  #matches,
  #reviews,
  #download,
  #support,
  footer{
    content-visibility:auto!important;
    contain-intrinsic-size:700px;
  }
}

/* ===== FINAL ANDROID TOP / HERO FIX ===== */
@media (max-width:760px){

  html{
    scroll-padding-top:0!important;
  }

  body{
    padding-top:0!important;
  }

  /* Mobile header: stay inside the page viewport, never over the browser chrome */
  .site-nav{
    position:absolute!important;
    top:max(8px, env(safe-area-inset-top))!important;
    right:10px!important;
    left:10px!important;
    width:auto!important;
    min-height:58px!important;
    height:58px!important;
    padding:7px 10px!important;
    border-radius:17px!important;
    z-index:50!important;
    transform:none!important;
  }

  .site-nav.scrolled{
    position:fixed!important;
    top:6px!important;
    right:10px!important;
    left:10px!important;
    min-height:56px!important;
    height:56px!important;
  }

  .brand{
    gap:7px!important;
  }

  .brand img{
    width:39px!important;
    height:39px!important;
    filter:none!important;
  }

  .brand b{
    font-size:15px!important;
  }

  /* Remove the oversized hero geometry that causes the first-screen jank */
  .hero{
    min-height:auto!important;
    height:auto!important;
    padding-top:86px!important;
    padding-bottom:30px!important;
    overflow:hidden!important;
  }

  .hero-visual{
    min-height:300px!important;
    height:300px!important;
    margin-top:8px!important;
    overflow:hidden!important;
  }

  .hero-card{
    width:min(82%,320px)!important;
    max-width:320px!important;
  }

  .rings{
    width:280px!important;
    height:280px!important;
  }

  .float-chip{
    display:none!important;
  }

  /* Keep the logo glass panel, but make it cheap and contained */
  .hero-card,
  .hero-visual .glass{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:0 8px 28px rgba(0,0,0,.18)!important;
  }

  /* Stop the decorative background from repainting while scrolling */
  .bg{
    position:absolute!important;
    height:100%!important;
  }

  .bg .glow{
    animation:none!important;
    filter:blur(10px)!important;
  }
}

@media (max-width:390px){
  .site-nav{
    top:max(6px, env(safe-area-inset-top))!important;
    right:8px!important;
    left:8px!important;
    min-height:54px!important;
    height:54px!important;
  }

  .brand img{
    width:36px!important;
    height:36px!important;
  }

  .hero{
    padding-top:78px!important;
  }

  .hero-visual{
    min-height:270px!important;
    height:270px!important;
  }

  .rings{
    width:245px!important;
    height:245px!important;
  }

  .hero-card{
    width:84%!important;
  }
}