/* ============================================
   LeapFit Mobile Adaptation — v2.1
   Targets: phones ≤768px, with safe-area support
   ============================================ */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}


/* Fix: ensure active scene image is always visible (override inline opacity:0 from MutationObserver) */
.ob-scene.ob-active .ob-img{
  opacity:1!important;
}

/* ===== ONBOARDING — split layout on mobile ===== */
@media(max-width:768px){
  .ob-img{
    position:absolute!important;
    top:0!important;left:0!important;right:0!important;bottom:auto!important;
    height:52vh!important;width:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
    animation:none!important;
  }
  .ob-scene:nth-child(1) .ob-img{object-position:center 25%!important}
  .ob-scene:nth-child(2) .ob-img{object-position:center 35%!important}
  .ob-scene:nth-child(3) .ob-img{object-position:center 30%!important}
  .ob-scene:nth-child(4) .ob-img{object-position:center 30%!important}

  .ob-vignette{display:none!important}
  .ob-grad{
    background:linear-gradient(to bottom,transparent 35%,rgba(11,14,23,.5) 58%,rgba(11,14,23,.9) 76%,#0B0E17 100%)!important;
  }
  .ob-content{
    position:absolute!important;
    inset-x:0!important;bottom:0!important;top:auto!important;
    min-height:48vh!important;
    padding:14px 22px calc(3vh + var(--safe-bottom))!important;
    background:linear-gradient(to bottom,rgba(11,14,23,.2),#0B0E17 14%,#0B0E17 100%)!important;
    justify-content:flex-end!important;
    z-index:3!important;
  }
  .ob-text{max-width:100%!important}
  .ob-title{font-size:1.6rem!important;margin-bottom:.4rem!important}
  .ob-body{font-size:.87rem!important;line-height:1.6!important}
  .ob-body p{margin-bottom:.2em!important}
  .ob-cta,.ob-next{
    margin-top:.85rem!important;align-self:stretch!important;
    width:100%!important;max-width:340px!important;text-align:center!important;
    justify-content:center!important;padding:.8rem 2rem!important;
    font-size:1rem!important;min-height:48px;display:flex!important;align-items:center!important;
  }
  .ob-cta{padding:.9rem 2rem!important;font-size:1.05rem!important}
  .ob-dots{
    right:auto!important;left:50%!important;
    top:auto!important;bottom:calc(47vh + var(--safe-bottom))!important;
    transform:translateX(-50%)!important;
    flex-direction:row!important;gap:8px!important;z-index:6!important;
  }
  .ob-dot{width:6px!important;height:6px!important}
  .ob-dot-active{width:20px!important}
  .ob-scene.ob-active .ob-particles::before{top:35%!important;left:15%!important}
  .ob-scene.ob-active .ob-particles::after{top:25%!important;left:75%!important}
}

@media(max-width:380px){
  .ob-title{font-size:1.4rem!important}
  .ob-body{font-size:.82rem!important}
  .ob-content{padding:10px 18px calc(3vh + var(--safe-bottom))!important}
  .ob-img{height:48vh!important}
  .ob-dots{bottom:calc(50vh + var(--safe-bottom))!important}
}

/* ===== LANDSCAPE PHONE ===== */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  .ob-img{height:100%!important;object-position:center center!important}
  .ob-content{
    min-height:0!important;max-width:55%!important;right:0!important;left:auto!important;
    padding:0 6% calc(3vh + var(--safe-bottom))!important;
    background:linear-gradient(to right,transparent,rgba(11,14,23,.88) 30%)!important;
  }
  .ob-grad{background:linear-gradient(to right,transparent 30%,rgba(11,14,23,.7))!important}
  .ob-dots{
    right:4%!important;left:auto!important;top:50%!important;bottom:auto!important;
    transform:translateY(-50%)!important;flex-direction:column!important;
  }
  .ob-title{font-size:1.3rem!important}
  .ob-body{font-size:.8rem!important;line-height:1.5!important}
  .ob-cta,.ob-next{margin-top:.7rem!important;padding:.6rem 1.5rem!important;min-height:40px;max-width:240px!important}
}

/* ===== APP SHELL — mobile fixes ===== */
@media(max-width:768px){
  body{
    padding-top:var(--safe-top);
    padding-bottom:0!important;
  }
  #root{min-height:100vh}
  #leapfit-v5-root{max-width:100vw!important;overflow-x:hidden!important}
  #leapfit-v5-root *{box-sizing:border-box}
  #leapfit-v5-root button{min-height:40px}

  /* Opaque bottom nav so content doesn't show through — same specificity as notifier.js, loaded later = wins */
  body .fixed.bottom-3.left-3.right-3.z-50 > div,
  body .fixed.bottom-3.left-3.z-50 > div{
    background:rgba(8,10,24,.96)!important;
    backdrop-filter:blur(28px) saturate(1.4)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.4)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    box-shadow:0 -4px 32px rgba(0,0,0,.55)!important;
  }
  .fixed.bottom-3{
    bottom:calc(10px + var(--safe-bottom))!important;
  }

  /* Push scrollable content above the nav */
  #root > div > div:not(.ob-root):not([class*="warp"]){
    padding-bottom:calc(100px + var(--safe-bottom))!important;
  }

  /* Pet summon button: shrink, tuck just above nav */
  .fixed.bottom-\[108px\]{
    bottom:calc(90px + var(--safe-bottom))!important;
    right:14px!important;
    transform:scale(.72)!important;
    transform-origin:bottom right!important;
    z-index:45!important;
  }

  /* Chat FAB from notifier: hide on mobile to avoid overlap */
  .xy-chat-fab{
    display:none!important;
  }

  .text-\[10px\]{font-size:10px}
  .page-title{font-size:1rem!important}
  .tech-label{display:none!important}
}

/* Hide draggable pet character on mobile (it overlaps content) */
@media(max-width:768px){
  div[style*="z-index: 9999"][style*="position: fixed"][style*="cursor: grab"],
  div[style*="z-index:9999"][style*="position:fixed"][style*="cursor:grab"]{
    display:none!important;
  }
}

/* Feed page extra bottom padding for match button */
@media(max-width:768px){
  [class*="signal"], [class*="feed"], [class*="通讯"] {
    padding-bottom:calc(120px + var(--safe-bottom))!important;
  }
}


/* === FINAL FIXES === */
@media(max-width:768px){
  /* Fully opaque nav — no content bleed */
  body .fixed.bottom-3.left-3.right-3.z-50 > div{
    background:rgba(8,10,24,1)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  /* Ensure content doesn't hide behind nav on every page */
  #root > div > div{
    padding-bottom:calc(120px + var(--safe-bottom))!important;
  }
  /* The actual content wrapper inside */
  .max-w-6xl{
    padding-bottom:calc(120px + var(--safe-bottom))!important;
  }
}