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

   One header used by every page on neonpoly.com. A shared Neon Poly Games
   brand links home, while two product dropdowns keep Duo and Classic
   available from every route.

   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);
  font-size: 16px;
  line-height: 1.55;
}

/* 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 .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;
}

/* --- Neon Poly Games brand ----------------------------------------------- */

.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;
  white-space: nowrap;
}
.gnav-brand:hover { text-decoration: none; }

.gnav-games-icon {
  display: block;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid transparent;
  border-radius: 4px;
  background:
    linear-gradient(var(--gnav-panel), var(--gnav-panel)) padding-box,
    conic-gradient(
      from 225deg,
      #19d9ff,
      #8b72ff,
      #ff39b8,
      #ff9b45,
      #19d9ff
    ) border-box;
  box-shadow:
    -4px -3px 13px rgba(25, 217, 255, 0.42),
    4px 3px 13px rgba(255, 57, 184, 0.34),
    6px 5px 12px rgba(255, 155, 69, 0.18);
  transform: rotate(45deg);
}

/* --- 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 {
  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-title:hover,
.gnav-title:focus-visible {
  color: var(--gnav-text);
  text-decoration: none;
}

.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; }

/* --- Shared back-to-top control ------------------------------------------ */

.back-to-top {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 45;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 15px;
  background:
    linear-gradient(#0f101a, #0f101a) padding-box,
    conic-gradient(
      from 225deg,
      #19d9ff,
      #8b72ff,
      #ff39b8,
      #ff9b45,
      #19d9ff
    ) border-box;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.48),
    -4px -3px 14px rgba(25, 217, 255, 0.22),
    4px 3px 14px rgba(255, 57, 184, 0.2);
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.9);
  visibility: hidden;
  -webkit-appearance: none;
  appearance: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.back-to-top:hover {
  transform: translateY(-2px) scale(1.03);
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 3px;
}

.back-to-top svg {
  width: 23px;
  height: 23px;
}

.back-to-top path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

@media (max-width: 480px) {
  .back-to-top {
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}