.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: nowrap;               /* Force single line everywhere */
  justify-content: flex-start;     /* left-align for scroll feel */
  align-items: center;
  background: transparent;
  z-index: 999;
  padding: 8px 10px;
  padding-bottom: env(safe-area-inset-bottom, 8px);
  gap: 10px;                       /* small gap */
  overflow-x: auto;                /* horizontal scroll if needed */
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
  scrollbar-width: none;           /* hide scrollbar Firefox */
}

.bottom-nav::-webkit-scrollbar {
  display: none;                   /* hide scrollbar Chrome/Safari */
}

.bottom-item {
  flex: 0 0 auto;
  width: clamp(70px, 16vw, 95px);  /* desktop/tablet size */
  height: clamp(70px, 16vw, 95px); /* square */
  border-radius: 12px;
  overflow: hidden;
  opacity: 0.92;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: transform 0.18s ease;
}

.bottom-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bottom-item:hover,
.bottom-item:active {
  transform: scale(1.08);
  opacity: 1;
}

/* ─── MOBILE: shrink hard for single line ─── */
@media (max-width: 600px) {
  .bottom-nav {
    justify-content: flex-start;   /* allows scrolling from left */
    padding: 6px 8px;
    gap: 8px;
    min-height: 80px;              /* slim single row */
  }

  .bottom-item {
    width: clamp(55px, 15vw, 75px);   /* ~60–75 px on phones → 5 icons ≈ 300–375 px + gaps */
    height: clamp(55px, 15vw, 75px);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  }

  /* Extra narrow phones (e.g. iPhone SE) – even smaller */
  @media (max-width: 380px) {
    .bottom-item {
      width: clamp(48px, 14vw, 65px);
      height: clamp(48px, 14vw, 65px);
      gap: 6px;  /* override parent if needed */
    }
  }
}