/* ============================================================
   navbar.css — shared navigation styles (single source of truth)
   Used by: 404.shtml, about, ai.php, apps, dmca, downloads,
            extra, games, index, movies, music.php, partners,
            settings, stats.php
   ============================================================ */

.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.navbar a {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  font-size: 1.1rem;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.navbar a:hover,
.navbar a:focus-visible {
  transform: translateY(-2px) scale(1.04);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ---- Experimental style: cardboard texture on the nav buttons ---- */
html[data-experimental="on"] .navbar a {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(64, 14, 26, 0.5), rgba(64, 14, 26, 0.5)),
    url("/images/cardboard.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-clip: border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.45);
}

html[data-experimental="on"] .navbar a:nth-child(3n) {
  background-position: 20% 70%;
}

html[data-experimental="on"] .navbar a:nth-child(3n + 1) {
  background-position: 80% 25%;
}

html[data-experimental="on"] .navbar a:hover,
html[data-experimental="on"] .navbar a:focus-visible {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(64, 14, 26, 0.34), rgba(64, 14, 26, 0.34)),
    url("/images/cardboard.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 6px 13px rgba(0, 0, 0, 0.5);
}