.mobile-page-to-top {
  display: none;
}

@media (max-width: 768px) {
  body > .to-top {
    display: none;
  }

  .mobile-page-to-top {
    position: fixed;
    right: max(24px, env(safe-area-inset-right, 0px));
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    box-sizing: border-box;
    display: grid;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    background: #f68804;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    visibility: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-page-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .mobile-page-to-top img {
    display: block;
    width: 20px;
    height: 20px;
  }

  body:has(.mobile-tabbar) .mobile-page-to-top {
    bottom: calc(var(--mobile-tabbar-height, 60px) + 16px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-home-page:has(.mobile-home-download:not([hidden])) .mobile-page-to-top {
    bottom: calc(var(--mobile-tabbar-height, 60px) + 52px + 16px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-home-page:has(.mobile-home-activity-entries:not([hidden])) .mobile-page-to-top {
    right: max(80px, calc((100vw - 480px) / 2 + 80px));
  }

  .mobile-page-to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
  }
}

@media (max-width: 768px) and (hover: hover) {
  .mobile-page-to-top.is-visible:hover {
    background: #fa990f;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mobile-page-to-top {
    transition: none;
  }
}