/* LuxBMI site-wide gold scrollbar + mobile menu launcher (2026-10-21).
   Browser-native scrolling remains untouched; the mobile meter is only a visual indicator. */
html {
  scrollbar-color: #e7b856 #091d34;
  scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track {
  background: #091d34;
  border-left: 1px solid rgba(228, 176, 78, .20);
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f3d78a 0%, #dda63e 52%, #bd8328 100%);
  border: 2px solid #091d34;
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffe5a5 0%, #f3c967 55%, #d99b32 100%);
}
html::-webkit-scrollbar-corner { background: #091d34; }

.lux-mobile-menu-bubble,
.lux-mobile-scroll-meter { display: none; }

@media (max-width: 960px) {
  .lux-mobile-menu-bubble {
    display: grid;
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px) + 14px);
    bottom: max(113px, env(safe-area-inset-bottom, 0px) + 113px);
    z-index: 92;
    width: 48px;
    height: 48px;
    padding: 0;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(92, 220, 246, .73);
    background: radial-gradient(circle at 34% 22%, #16476b, #08182e 75%);
    box-shadow: 0 5px 20px rgba(0, 8, 25, .5), 0 0 0 3px rgba(223, 173, 70, .13);
    color: #f2c66f;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .lux-mobile-menu-bubble__icon {
    display: block;
    width: 23px;
    height: 18px;
  }
  .lux-mobile-menu-bubble__icon path {
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
  }
  .lux-mobile-menu-bubble:active { transform: scale(.95); }
  .lux-mobile-menu-bubble:focus-visible {
    outline: 3px solid #ffe3a2;
    outline-offset: 4px;
  }
  body.lux-menu-open .lux-mobile-menu-bubble,
  body.lux-audio-prompt-open .lux-mobile-menu-bubble,
  body:has([data-audio-settings]:not([hidden])) .lux-mobile-menu-bubble {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Supplemental indicator where OS scrollbars are overlay/hidden (common on phones). */
  .lux-mobile-scroll-meter {
    position: fixed;
    display: block;
    width: 3px;
    top: 22dvh;
    bottom: 26dvh;
    right: max(2px, env(safe-area-inset-right, 0px) + 2px);
    z-index: 78;
    border-radius: 999px;
    background: rgba(226, 181, 85, .13);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .lux-mobile-scroll-meter.is-scrollable { opacity: .82; }
  .lux-mobile-scroll-meter__thumb {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    min-height: 30px;
    background: linear-gradient(180deg, #ffe5a3, #d39a39 65%, #b77725);
    box-shadow: 0 0 8px rgba(246, 197, 97, .35);
    border-radius: inherit;
    will-change: transform;
  }
  body.lux-menu-open .lux-mobile-scroll-meter,
  body.lux-audio-prompt-open .lux-mobile-scroll-meter,
  body:has([data-audio-settings]:not([hidden])) .lux-mobile-scroll-meter {
    opacity: 0;
  }
}
@media (hover:hover) and (pointer:fine) and (max-width:960px) {
  .lux-mobile-menu-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0,8,25,.5), 0 0 14px rgba(244,194,91,.32);
  }
}
@media (prefers-reduced-motion:reduce) {
  .lux-mobile-menu-bubble,
  .lux-mobile-scroll-meter { transition: none !important; }
  .lux-mobile-scroll-meter__thumb { will-change: auto; }
}
@media (forced-colors:active) {
  html { scrollbar-color: auto; }
  .lux-mobile-menu-bubble {
    forced-color-adjust: auto;
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  .lux-mobile-scroll-meter { display:none; }
}


/* Mobile scrollbar deduplication: only the browser's native scrollbar.
   The earlier custom scroll meter duplicated it on iOS/Android. */
.lux-mobile-scroll-meter { display:none !important; }