/* ==========================================================================
   Shared two-game navigation (gnav), 2026-07-22.

   One header used by EVERY page on neonpoly.com, Duo pages and the archived
   classic site alike: two product dropdowns (Neon Poly Duo, Neon Poly
   Classic) plus a shared Contact link, so either game is always one click
   away and the two games read as siblings, not one site.

   Self-contained on purpose: the classic pages do not load /css/site.css
   (they carry their own hashed Astro styles), so everything the header
   needs, including tokens, lives here under the gnav- namespace to avoid
   collisions with either site's existing classes.
   ========================================================================== */

.gnav {
  /* Default tokens match Neon Poly Duo. Classic pages add .gnav--classic. */
  --gnav-bg: rgba(7, 8, 15, 0.86);
  --gnav-line: rgba(255, 255, 255, 0.08);
  --gnav-line-strong: rgba(255, 255, 255, 0.16);
  --gnav-cyan: #00e5ff;
  --gnav-glow: rgba(0, 229, 255, 0.5);
  --gnav-glow-soft: rgba(0, 229, 255, 0.45);
  --gnav-glow-faint: rgba(0, 229, 255, 0.07);
  --gnav-fill: rgba(0, 229, 255, 0.09);
  --gnav-text: #ffffff;
  --gnav-text-soft: rgba(255, 255, 255, 0.72);
  --gnav-panel: #0f101a;
  --gnav-font: "Roboto", system-ui, -apple-system, sans-serif;

  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--gnav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gnav-line);
  font-family: var(--gnav-font);
}

/* Classic route chrome: original Neon Poly palette (rgb.lua / common.lua). */
.gnav--classic {
  --gnav-bg: rgba(0, 0, 0, 0.88);
  --gnav-cyan: #10aeef;
  --gnav-glow: rgba(16, 174, 239, 0.5);
  --gnav-glow-soft: rgba(16, 174, 239, 0.45);
  --gnav-glow-faint: rgba(16, 174, 239, 0.07);
  --gnav-fill: rgba(16, 174, 239, 0.09);
  --gnav-text-soft: #c8c8c8;
  --gnav-panel: #111111;
  --gnav-font: "Liberation Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.gnav .skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gnav-panel);
  color: var(--gnav-text);
  padding: 8px 14px;
  border-radius: 0 0 10px 0;
}
.gnav .skip-link:focus { left: 0; z-index: 60; }

.gnav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* --- Brand (per-game: Duo wordmark or the classic logo) ------------------ */

.gnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gnav-text);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.gnav-brand:hover { text-decoration: none; }
.gnav-brand img { border-radius: 8px; display: block; }
.gnav-brand .gnav-duo {
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, #00e5ff, #ff00e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.35));
}

.gnav--classic .gnav-brand .gnav-duo {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--gnav-cyan);
  filter: none;
  font-style: normal;
  font-weight: 700;
  text-shadow: 0 0 14px var(--gnav-glow);
}

/* --- Desktop nav with dropdowns ------------------------------------------ */

/* List reset only here: display stays off this selector on purpose, or its
   (0,1,1) specificity would beat .gnav-menu's display:none and force every
   dropdown open (bug found during build, 2026-07-22). */
.gnav-desktop ul { list-style: none; margin: 0; padding: 0; }
.gnav-desktop > ul { display: flex; gap: 6px; align-items: center; }

.gnav-item { position: relative; }

/* Split control: the game name is a link to that game's page top, and the
   caret is a separate button that opens the dropdown. Both halves share one
   pill so it still reads as a single nav item. */
.gnav-split {
  display: flex;
  align-items: stretch;
  border-radius: 10px;
}
.gnav-split:hover,
.gnav-split:focus-within {
  background: rgba(255, 255, 255, 0.06);
}

.gnav-title,
.gnav-link {
  display: flex;
  align-items: center;
  color: var(--gnav-text-soft);
  font: inherit;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.gnav-title { padding: 8px 4px 8px 12px; }
.gnav-link { padding: 8px 12px; border-radius: 10px; }
.gnav-title:hover,
.gnav-title:focus-visible,
.gnav-link:hover,
.gnav-link:focus-visible {
  color: var(--gnav-text);
  text-decoration: none;
}
.gnav-link:hover,
.gnav-link:focus-visible { background: rgba(255, 255, 255, 0.06); }

.gnav-caret-btn {
  display: flex;
  align-items: center;
  padding: 8px 10px 8px 4px;
  border: 0;
  background: transparent;
  color: var(--gnav-text-soft);
  cursor: pointer;
}
.gnav-caret-btn:hover,
.gnav-caret-btn:focus-visible { color: var(--gnav-text); }

/* The game whose page you are on: cyan with a soft glow, so it is always
   obvious which of the two sibling games you are looking at. */
.gnav-item.is-current .gnav-title {
  color: var(--gnav-cyan);
  text-shadow: 0 0 12px var(--gnav-glow-soft);
}

.gnav-caret {
  width: 10px;
  height: 10px;
  flex: none;
  transition: transform 0.15s ease;
}
.gnav-item[data-open="true"] .gnav-caret { transform: rotate(180deg); }

.gnav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--gnav-panel);
  border: 1px solid var(--gnav-line-strong);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 24px var(--gnav-glow-faint);
}
.gnav-item[data-open="true"] > .gnav-menu { display: flex; }

/* Invisible bridge over the 8px gap between the pill and the menu, so moving
   the mouse from the trigger down to the dropdown never leaves the item's
   hover region and the menu does not flicker shut mid-reach. */
.gnav-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

/* Hover-open on devices that can hover; click/tap always works via nav.js. */
@media (hover: hover) {
  .gnav-item:hover > .gnav-menu,
  .gnav-item:focus-within > .gnav-menu { display: flex; }
  .gnav-item:hover .gnav-caret { transform: rotate(180deg); }
}

.gnav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--gnav-text-soft);
  font-size: 0.92rem;
  text-decoration: none;
}
.gnav-menu a:hover,
.gnav-menu a:focus-visible {
  color: var(--gnav-text);
  background: var(--gnav-fill);
  text-decoration: none;
}

/* --- Hamburger ------------------------------------------------------------ */

.gnav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--gnav-line-strong);
  border-radius: 10px;
  cursor: pointer;
}
.gnav-toggle span {
  display: block;
  height: 2px;
  background: var(--gnav-text);
  border-radius: 2px;
}

/* --- Mobile panel: the two games as labeled groups ------------------------ */

.gnav-mobile {
  display: none;
  border-top: 1px solid var(--gnav-line);
  padding: 10px 20px 18px;
}
.gnav-mobile[hidden] { display: none !important; }

.gnav-group {
  display: block;
  margin: 14px 0 4px;
  padding: 4px 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gnav-text-soft);
  text-decoration: none;
}
.gnav-group:hover { color: var(--gnav-text); text-decoration: none; }
.gnav-group.is-current { color: var(--gnav-cyan); }
.gnav-group.is-current:hover { color: var(--gnav-cyan); }

.gnav-mobile ul { list-style: none; margin: 0; padding: 0; }
.gnav-mobile a {
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--gnav-text);
  font-size: 1rem;
  text-decoration: none;
}
.gnav-mobile a:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.gnav-solo { margin-top: 14px; border-top: 1px solid var(--gnav-line); padding-top: 8px; }

@media (max-width: 760px) {
  .gnav-desktop { display: none; }
  .gnav-toggle { display: flex; }
  .gnav-mobile:not([hidden]) { display: block; }
}