/* One shared selection surface; route rendering and click handling stay unchanged.
   Four equal columns match participantNav. Older WebViews keep the static fallback. */
@supports selector(:has(*)) {
  .bottom-nav {
    --nav-selection-x: 0%;
    --nav-selection-duration: 240ms;
    --nav-selection-ease: cubic-bezier(.4, 0, .2, 1);
    isolation: isolate;
  }
  .bottom-nav::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 5px;
    top: 5px;
    bottom: 5px;
    width: calc((100% - 10px) / 4);
    border-radius: 11px;
    background: #343438;
    pointer-events: none;
    opacity: 0;
    transform: translateX(var(--nav-selection-x));
    transition: transform var(--nav-selection-duration) var(--nav-selection-ease);
  }
  .bottom-nav:has(> a.active)::before { opacity: 1; }
  .bottom-nav:has(> a[data-route="archive"].active) { --nav-selection-x: 100%; }
  .bottom-nav:has(> a[data-route="contests"].active) { --nav-selection-x: 200%; }
  .bottom-nav:has(> a[data-route="profile"].active) { --nav-selection-x: 300%; }
  .bottom-nav > a {
    position: relative;
    z-index: 1;
    transition: color 120ms ease-out;
  }
  .bottom-nav:has(> a.active) > a.active { background: transparent; }
  @media (prefers-reduced-motion: reduce) {
    .bottom-nav::before,
    .bottom-nav > a { transition: none; }
  }
}