/* ============================================================
   HB BATTLE — APP PERFORMANCE FIX (loaded last, after every other
   app stylesheet, including hb-royal.css)

   Root cause of the mobile scroll lag: the app's header and bottom
   nav bar are position:fixed/sticky, so they are on screen for the
   entire time a screen scrolls. Across the stacked CSS files loaded
   on this page, both of them were given `backdrop-filter: blur(...)`.
   backdrop-filter has to re-sample and re-blur everything behind it
   on every single frame the content underneath moves — it cannot be
   cached — so two permanently-visible blurred bars is one of the
   most common, well-documented causes of janky scrolling on
   mid/low-end Android phones (the majority of this app's audience).

   The second cause: a few decorative glow blobs (wallet hero glow,
   splash icons, ambient wallet circles) combine `filter: blur()`
   with an `infinite` CSS animation, so the browser keeps re-blurring
   them forever, even while the user is just scrolling past them.

   Fix: solid/near-opaque backgrounds instead of blur on anything
   that is permanently on screen, and the ambient glows become a
   single static paint instead of a looping blur animation. Nothing
   here changes layout, markup or behaviour — visuals only. ========= */

html[data-theme="dark"] :is(
  .header,.app-header,.top-bar,.site-header,
  .bottom-nav,.bottom-navigation,.navbar-bottom,#sharedBottomNav
){
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(14,16,12,.96)!important;
}

/* Ambient glow blobs: keep the glow, drop the per-frame blur animation */
html[data-theme="dark"] :is(
  .wallet-hero:before,.wallet-ambient,.wallet-ambient.ambient-one,
  .wallet-ambient.ambient-two,#walletScreen::before
){
  animation:none!important;
  filter:none!important;
  opacity:.55;
}
html[data-theme="dark"] .splash-icon{
  animation-duration:0s!important;
}

/* Keep blur only on short-lived, non-scrolling surfaces (modals/auth
   card) where it isn't repainted during a scroll gesture. */

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}