/* 1px sentinel placed immediately above the sticky bar. When the
   sentinel scrolls off the top of the viewport the bar is stuck. */
.sticky-stats-sentinel {
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

.sticky-stats {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Bar bg + bottom border live on the ::before pseudo so they extend
     edge-to-edge across the viewport even though the bar itself only
     spans the container's gutters. */
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding: 0.75rem 1.5rem 0;
  margin-bottom: 1.5rem;
}

/* Frosted-glass background extending to the viewport edges. Hidden by
   default so the page bg-decor flows behind the bar uninterrupted at
   the top of the page; fades in when the bar is stuck (see the
   .sticky-stats--stuck rule below). Sits behind the bar's content so
   it can't intercept clicks. */
.sticky-stats::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * (50vw - 50%));
  right: calc(-1 * (50vw - 50%));
  background: color-mix(in srgb, var(--color-bg) 0%, transparent);
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  border-bottom: 1px solid transparent;
  /* Default state has no transition: leaving the stuck state should
     snap back instantly. The transition into stuck is defined on
     .sticky-stats--stuck::before below. */
  z-index: -1;
  pointer-events: none;
}

/* On narrow viewports the fixed hamburger (top:1rem; right:1rem) sits
   over the right edge of the stats grid. Reserve space so the POINTS
   column can't slide under it. */
@media (max-width: 30rem) {
  .sticky-stats { padding-right: 3.5rem; }
}

/* The bar's outer dimensions stay constant so its background fully
   covers the layout box (no quest cards show through underneath) and
   the IntersectionObserver threshold can't bounce. The inner wrapper
   transforms instead — visually shrinking the content inside the bar. */
.sticky-stats__inner {
  transform-origin: top center;
  transition: transform 220ms ease;
}

.sticky-stats--stuck::before {
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--color-border);
  transition: background 220ms ease, backdrop-filter 220ms ease, -webkit-backdrop-filter 220ms ease, border-color 220ms ease;
}
.sticky-stats--stuck .sticky-stats__inner { transform: scale(0.92); }

.sticky-stats .stats { margin-bottom: 0.5rem; }
.sticky-stats .xp-bar { margin-bottom: 0; }