/* BLF skeleton v7: more realistic anatomy and basketball, improved mobile visibility. */
#blf-halloween-skeleton-layer{position:fixed;inset:0;pointer-events:none;z-index:1400;overflow:visible;contain:layout style}
#blf-halloween-skeleton{position:fixed;width:clamp(132px,16vw,224px);height:auto;right:20px;bottom:14px;transform-origin:50% 100%;pointer-events:none;filter:drop-shadow(0 13px 18px rgba(0,0,0,.42));opacity:.96;transition:opacity .2s ease,filter .2s ease}
#blf-halloween-skeleton svg{width:100%;height:auto;display:block;overflow:visible;pointer-events:none}
#blf-halloween-skeleton .blf-left-forearm{transform-box:view-box;transform-origin:80px 180px;animation:blf-left-forearm-dribble .98s ease-in-out infinite}
#blf-halloween-skeleton .blf-ball{transform-box:fill-box;transform-origin:center center;animation:blf-left-ball-bounce .98s linear infinite}
#blf-halloween-skeleton .blf-ball-shadow{transform-box:fill-box;transform-origin:center center;animation:blf-left-ball-shadow .98s linear infinite}
#blf-halloween-skeleton .blf-eye-glow{animation:blf-emerald-eyes 2.1s ease-in-out infinite alternate}
#blf-halloween-skeleton .blf-depth-bob{animation:blf-depth-bob .98s ease-in-out infinite}
#blf-halloween-skeleton .blf-ball-highlight{animation:blf-ball-highlight .98s linear infinite}
#blf-halloween-skeleton.blf-mobile{width:clamp(110px,24vw,160px);opacity:.90}
#blf-halloween-skeleton.blf-background-mode{z-index:0!important;opacity:.52;filter:drop-shadow(0 5px 8px rgba(0,0,0,.25))}
@keyframes blf-left-forearm-dribble{0%,100%{transform:rotate(8deg)}18%{transform:rotate(4deg)}36%{transform:rotate(-7deg)}49%{transform:rotate(-16deg)}62%{transform:rotate(-8deg)}80%{transform:rotate(2deg)}}
@keyframes blf-left-ball-bounce{0%,100%{transform:translateY(0) scale(1)}18%{transform:translateY(10px) scale(1)}34%{transform:translateY(37px) scale(1)}47%{transform:translateY(64px) scale(1)}50%{transform:translateY(67px) scaleX(1.07) scaleY(.91)}53%{transform:translateY(64px) scale(1)}67%{transform:translateY(31px) scale(1)}83%{transform:translateY(7px) scale(1)}}
@keyframes blf-left-ball-shadow{0%,100%{transform:scale(.58);opacity:.10}45%,55%{transform:scale(1);opacity:.38}}
@keyframes blf-emerald-eyes{0%{opacity:.74;filter:drop-shadow(0 0 2px rgba(51,255,170,.45))}50%{opacity:.94;filter:drop-shadow(0 0 8px rgba(44,255,166,.90))}100%{opacity:1;filter:drop-shadow(0 0 12px rgba(38,255,162,1))}}
@keyframes blf-depth-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
@keyframes blf-ball-highlight{0%,100%{opacity:.34}50%{opacity:.48}}
@media (prefers-reduced-motion:reduce){#blf-halloween-skeleton-layer{display:none!important}}

/* v8: on the logged-in mobile home screen the skeleton follows every
   menu/admin button in normal flow, in both orientations. No overlaps. */
@media (max-width:900px){
  main.page > #blf-halloween-skeleton-layer.blf-menu-mobile-slot{
    position:relative!important;
    inset:auto!important;
    order:4!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    align-self:center!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:8px 0 12px!important;
    overflow:visible!important;
    contain:none!important;
    z-index:0!important;
    pointer-events:none!important;
  }
  main.page > #blf-halloween-skeleton-layer.blf-menu-mobile-slot > #blf-halloween-skeleton{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    flex:0 0 auto!important;
    width:clamp(106px,30vw,145px)!important;
    height:auto!important;
    margin:0 auto!important;
    opacity:.9;
  }
}
@media (max-width:900px) and (orientation:landscape){
  main.page > #blf-halloween-skeleton-layer.blf-menu-mobile-slot{
    margin:4px 0 8px!important;
  }
  main.page > #blf-halloween-skeleton-layer.blf-menu-mobile-slot > #blf-halloween-skeleton{
    width:clamp(94px,16vw,120px)!important;
  }
}

/* Wide landscape touch phones use the site's desktop-width menu geometry.
   Anchor just below that menu rather than over its buttons. */
main.page > #blf-halloween-skeleton-layer.blf-wide-touch-slot{
  position:absolute!important;
  top:var(--blf-sk-top,0px)!important;
  left:var(--blf-sk-left,0px)!important;
  bottom:auto!important;right:auto!important;
  display:flex!important;justify-content:center!important;
  width:var(--blf-sk-menu-width,280px)!important;
  height:auto!important;overflow:visible!important;contain:none!important;
  z-index:0!important;pointer-events:none!important;
}
main.page > #blf-halloween-skeleton-layer.blf-wide-touch-slot > #blf-halloween-skeleton{
  position:relative!important;inset:auto!important;
  width:clamp(96px,11vw,124px)!important;height:auto!important;
  margin:0 auto!important;opacity:.9;
}

/* Allow scrolling far enough to see the skeleton below the wide mobile menu. */
body.blf-skeleton-wide-scroll::after{
  content:"";display:block;width:100%;height:var(--blf-sk-scroll-space,0px);
  pointer-events:none;
}
