/*
 * Fixed bottom navigation — dark background blends with home page theme.
 * Items are spread evenly on mobile to prevent overflow.
 * On tablet+, they switch to a centered group with generous gap.
 * position: relative creates a stacking context for the sliding indicator.
 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 0;
  padding: var(--space-xs) var(--space-md);
  padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-bg);
  border-top: 1px solid var(--home-color-surface-highest);
  border-radius: var(--radius-default) var(--radius-default) 0 0;
}

/*
 * Sliding pill indicator — positioned absolutely to match the active item's
 * icon-wrapper. Moves via transform: translateX() with the game bounce easing.
 * Left defaults to 0 so the indicator snaps to the initial position on first paint.
 */
.bottom-nav__indicator {
  position: absolute;
  top: var(--indicator-y, 0px);
  left: 0;
  width: var(--indicator-width, 0px);
  height: var(--indicator-height, 0px);
  transform: translateX(var(--indicator-x, 0px));
  background-color: var(--color-secondary);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-glow);
  pointer-events: none;
  z-index: 0;
  transition: transform 0.35s var(--easing-game), width 0.35s var(--easing-game);
}

/*
 * Suppress the initial sliding animation on first paint.
 * On page load the indicator would otherwise animate from (0,0) to its correct
 * position; this class (applied before positioning, removed after a forced
 * style flush) prevents that.  !important is required to beat the cascade of
 * the transition on the base .bottom-nav__indicator rule.
 */
.bottom-nav__indicator--no-transition {
  transition: none !important;
}

/*
 * Nav item — position: relative + z-index: 1 lifts it above the absolutely
 * positioned indicator pill so the label and icon stay clickable and visible
 * on top of the teal background.
 */
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  transition: color var(--transition-default), transform var(--duration-quick) ease;
  min-height: var(--touch-target-xs);
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.bottom-nav__item--active .bottom-nav__icon-wrapper {
  color: var(--home-color-on-secondary);
}

.bottom-nav__item--active .bottom-nav__label {
  color: var(--color-accent);
}

.bottom-nav__item--inactive {
  color: var(--color-text-muted);
}

.bottom-nav__item--inactive:hover {
  color: var(--color-accent);
}

.bottom-nav__item--inactive:active {
  transform: scale(0.9);
}

.bottom-nav__item--inactive .bottom-nav__icon-wrapper {
  color: var(--color-text-muted);
}

.bottom-nav__item--inactive .bottom-nav__label {
  color: var(--color-text-muted);
}

/*
 * Icon wrapper — fixed 44x44px (--touch-target-sm) keeps all items at the
 * same size regardless of icon shape, preventing layout shifts when the
 * active state changes. The indicator pill uses getBoundingClientRect on this
 * element to align itself.
 */
.bottom-nav__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-sm);
  height: var(--touch-target-sm);
  border-radius: var(--radius-default);
  transition: color 0.35s var(--easing-game);
}

.nav-icon {
  width: var(--icon-between);
  height: var(--icon-between);
  display: block;
}

/*
 * Label beneath each icon — headline font for game-UI feel, tiny size to
 * fit four items on mobile. Letter-spacing improves legibility at small sizes.
 */
.bottom-nav__label {
  font-family: var(--font-headline);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-headline);
  letter-spacing: var(--tracking-wide);
  transition: color 0.35s var(--easing-game);
}

/*
 * Tablet+ (768px) — switch from space-evenly to centered group with
 * generous gap, matching the original non-responsive design intent.
 * Wider side padding gives more breathing room on larger screens.
 */
@media (min-width: 768px) {
  .bottom-nav {
    justify-content: center;
    gap: 6rem;
    padding: var(--space-xs) var(--space-xl) var(--space-xs) var(--space-xl);
  }

  .bottom-nav__icon-wrapper {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
  }

  .nav-icon {
    width: var(--icon-md);
    height: var(--icon-md);
  }

  .bottom-nav__label {
    font-size: var(--text-xs);
  }
}