/* Devil Deals: compact devil-horned quick return, visible while scrolling. */
#scrollTopFab {
  position: fixed;
  z-index: 9900;
  right: 18px;
  bottom: 24px;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  margin: 0;
  padding: 0;
  border: 1px solid #8f1927;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: visible;
  color: #fff;
  background: radial-gradient(circle at 30% 24%, #ef5a66 0%, #cf303f 42%, #9c1929 100%);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0 1px 2px rgb(88 12 19 / 45%);
  box-shadow: 0 7px 20px rgb(76 21 28 / 28%), inset 0 1px 1px rgb(255 255 255 / 20%);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Two tiny horns without images or extra network requests. */
#scrollTopFab::before,
#scrollTopFab::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px;
  width: 14px;
  height: 18px;
  background: #a21b2a;
  clip-path: polygon(52% 0%, 100% 95%, 0% 95%);
  pointer-events: none;
}
#scrollTopFab::before { left: 5px; transform: rotate(-25deg); }
#scrollTopFab::after { right: 5px; transform: rotate(25deg); }
#scrollTopFab[hidden] { display: none !important; }
#scrollTopFab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(76 21 28 / 35%);
}
#scrollTopFab:active { transform: translateY(0); }
#scrollTopFab:focus-visible { outline: 3px solid #27201f; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  #scrollTopFab { transition: none; }
}
@media (max-width: 700px) {
  #scrollTopFab {
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    font-size: 24px;
  }
  #scrollTopFab::before,
  #scrollTopFab::after { top: -7px; width: 12px; height: 16px; }
}