/* src/styles/v31-mobile-scene-stacking-fix.css — extracted from index.html (id=v31-mobile-scene-stacking-fix). */

@media (max-width:760px){
  .topbar{
    padding:12px 16px 8px!important;
    gap:10px!important;
  }

  .topbar h1{
    font-size:clamp(1.45rem, 8vw, 2.15rem)!important;
    line-height:1.08!important;
    max-width:12ch!important;
    word-break:normal!important;
  }

  .topbar .subtitle{
    font-size:.74rem!important;
    line-height:1.45!important;
    max-width:22ch!important;
  }

  .badge{
    align-self:flex-start!important;
    margin-top:6px!important;
  }

  .hero{
    overflow:hidden!important;
    min-height:auto!important;
    border-radius:18px!important;
  }

  .hero-heading{
    padding:18px 10px 12px!important;
  }

  .hero-heading h2{
    font-size:1.38rem!important;
    line-height:1.12!important;
  }

  .hero-heading p{
    font-size:.92rem!important;
    line-height:1.35!important;
    padding:0 10px!important;
  }

  .figure-stage{
    position:relative!important;
    min-height:auto!important;
    height:auto!important;
    display:block!important;
    padding:0 0 18px!important;
    overflow:hidden!important;
  }

  .figure-wrap{
    position:relative!important;
    width:min(430px, 100%)!important;
    max-width:430px!important;
    height:auto!important;
    aspect-ratio:720 / 1280!important;
    margin:0 auto!important;
    display:block!important;
    overflow:hidden!important;
    border-radius:0!important;
    background:
      radial-gradient(ellipse at 50% 48%,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.68) 34%,
        rgba(0,0,0,.26) 58%,
        rgba(0,0,0,0) 76%)!important;
    isolation:isolate!important;
  }

  .figure-wrap::before,
  .figure-wrap::after{
    position:absolute!important;
    inset:0!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
    pointer-events:none!important;
    border-radius:0!important;
    z-index:0!important;
  }

  .figure-wrap::before{
    background:
      radial-gradient(ellipse at 50% 48%,
        rgba(87,166,255,.20) 0%,
        rgba(143,69,255,.13) 36%,
        rgba(217,65,255,.06) 50%,
        rgba(0,0,0,0) 72%)!important;
    filter:blur(10px)!important;
    animation:solsticeAuraBreathMobile 7.5s ease-in-out infinite!important;
  }

  .figure-wrap::after{
    background:
      radial-gradient(ellipse at 50% 49%,
        transparent 0 46%,
        rgba(95,227,255,.16) 49%,
        rgba(143,69,255,.14) 52%,
        transparent 60%),
      repeating-radial-gradient(ellipse at 50% 49%,
        rgba(95,227,255,.045) 0 1px,
        transparent 2px 24px)!important;
    opacity:.62!important;
    animation:solsticeAuraRingMobile 10s linear infinite!important;
  }

  @keyframes solsticeAuraBreathMobile{
    0%,100%{opacity:.55;filter:blur(11px) saturate(.95)}
    50%{opacity:.88;filter:blur(9px) saturate(1.18)}
  }

  @keyframes solsticeAuraRingMobile{
    0%,100%{opacity:.45;filter:hue-rotate(0deg)}
    50%{opacity:.70;filter:hue-rotate(22deg)}
  }

  .figure-img{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center top!important;
    opacity:1!important;
    mix-blend-mode:normal!important;
    background:transparent!important;
  }

  .hotspot{
    z-index:5!important;
  }

  .hotspot[data-zone="head"]{left:50%!important;top:8.2%!important}
  .hotspot[data-zone="throat"]{left:50%!important;top:21.2%!important}
  .hotspot[data-zone="heart"]{left:50%!important;top:29.8%!important}
  .hotspot[data-zone="upperAbdomen"]{left:50%!important;top:41.3%!important}
  .hotspot[data-zone="abdomen"]{left:50%!important;top:50.5%!important}
  .hotspot[data-zone="hips"]{left:50%!important;top:57.2%!important}
  .hotspot[data-zone="knees"]{left:50%!important;top:73.2%!important}
  .hotspot[data-zone="feet"]{left:50%!important;top:91.7%!important}

  .hotspot.side-left[data-zone="shoulders"]{left:23%!important;top:28.4%!important}
  .hotspot.side-right[data-zone="shoulders"]{left:77%!important;top:28.4%!important}
  .hotspot.side-left[data-zone="hands"]{left:18.5%!important;top:55.2%!important}
  .hotspot.side-right[data-zone="hands"]{left:81.5%!important;top:55.2%!important}

  .dock{
    margin-top:8px!important;
  }
}