/* ═══════════════════════════════════════════════════════════════
   Gibson Family Arcade — Shared Navigation Stylesheet
   Hosted at: https://gibbyoh.com/styles/nav.css

   Usage: add data-game="..." attribute to <nav> element.
   Valid values: home | falling-apples | bubble-shooter |
                 block-drop | alien-assault
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE NAV (fallback / default) ── */
nav {
  width: 100%;
  background: #1a1a2e;
  border-bottom: 3px solid #4a4a8a;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 60;
  flex-wrap: wrap;
  flex-shrink: 0;
}

nav .logo {
  font-family: 'Fredoka One', cursive;
  color: #f7c948;
  font-size: 1.1rem;
  text-decoration: none;
  margin-right: 10px;
}

nav a {
  color: #8888aa;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  transition: all 0.2s;
}

nav a:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

nav a.active,
nav a.nav-link.active {
  color: #1a1a2e;
  background: #f7c948;
}


/* ══════════════════════════════════════
   HOME / LANDING PAGE
   Pill: purple · Border: deep navy
   ══════════════════════════════════════ */
nav[data-game="home"] {
  background: #0d0d22;
  border-bottom-color: #1e1e4a;
  position: sticky;
  top: 0;
  backdrop-filter: blur(12px);
}
nav[data-game="home"] .logo       { color: #f7c948; }
nav[data-game="home"] a            { color: #5a6080; }
nav[data-game="home"] a:hover      { color: #e8e8ff; background: rgba(255,255,255,0.08); }
nav[data-game="home"] a.active,
nav[data-game="home"] a.nav-link.active {
  color: #fff;
  background: #7c3aed;
}


/* ══════════════════════════════════════
   FALLING APPLES
   Pill: red · Border: bright green
   ══════════════════════════════════════ */
nav[data-game="falling-apples"] {
  background: #1a1a2e;
  border-bottom-color: #22c55e;
}
nav[data-game="falling-apples"] .logo  { color: #f7c948; }
nav[data-game="falling-apples"] a       { color: #9090b0; }
nav[data-game="falling-apples"] a:hover { color: #fff; background: rgba(255,255,255,0.1); }
nav[data-game="falling-apples"] a.active,
nav[data-game="falling-apples"] a.nav-link.active {
  color: #fff;
  background: #ef4444;
}


/* ══════════════════════════════════════
   BUBBLE SHOOTER
   Pill: yellow · Border: purple
   ══════════════════════════════════════ */
nav[data-game="bubble-shooter"] {
  background: #1a1535;
  border-bottom-color: #7c3aed;
}
nav[data-game="bubble-shooter"] .logo  { color: #f7c948; }
nav[data-game="bubble-shooter"] a       { color: #8b80c0; }
nav[data-game="bubble-shooter"] a:hover { color: #ede9ff; background: rgba(255,255,255,0.08); }
nav[data-game="bubble-shooter"] a.active,
nav[data-game="bubble-shooter"] a.nav-link.active {
  color: #1a1535;
  background: #f7c948;
}


/* ══════════════════════════════════════
   BLOCK DROP
   Pill: blue · Border: yellow
   ══════════════════════════════════════ */
nav[data-game="block-drop"] {
  background: #0d0d22;
  border-bottom-color: #3b82f6;
}
nav[data-game="block-drop"] .logo  { color: #f7c948; }
nav[data-game="block-drop"] a       { color: #5a6080; }
nav[data-game="block-drop"] a:hover { color: #e8e8ff; background: rgba(255,255,255,0.07); }
nav[data-game="block-drop"] a.active,
nav[data-game="block-drop"] a.nav-link.active {
  color: #fff;
  background: #3b82f6;
}


/* ══════════════════════════════════════
   ALIEN ASSAULT
   Pill: cyan · Border: dark space blue
   ══════════════════════════════════════ */
nav[data-game="alien-assault"] {
  background: #03091a;
  border-bottom-color: #0a3060;
}
nav[data-game="alien-assault"] .logo  { color: #00ffcc; }
nav[data-game="alien-assault"] a       { color: #2a4a6a; }
nav[data-game="alien-assault"] a:hover { color: #c8f0ff; background: rgba(0,255,204,0.08); }
nav[data-game="alien-assault"] a.active,
nav[data-game="alien-assault"] a.nav-link.active {
  color: #020810;
  background: #00ffcc;
}