/* ─────────────────────────────────────────────────────────────
   SPLASH GAMES — shared edition navigator (pill) style.
   One consistent look across every edition. Pills are injected by
   /shared/editions.js into <nav class="editions" data-year="…">.
   Include on every year page:
     <link rel="stylesheet" href="/shared/editions.css">
   The .topbar is also shared here so the navigator sits in the exact
   same place on every page (no jump when switching editions). Pages may
   still add their own entrance animation to .topbar.
────────────────────────────────────────────────────────────── */
.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) clamp(16px, 4vw, 42px) 10px;
}

.editions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 8px 22px -10px rgba(10, 20, 30, .45);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  text-transform: none;
  letter-spacing: normal;
}

.editions .pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  color: #15304a;
  text-decoration: none;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.editions .pill:hover { transform: translateY(-1px); background: rgba(10, 30, 50, .08); }

.editions .pill.is-active {
  color: #fff;
  background: linear-gradient(180deg, #ff8a4c, #ef6f34);
  box-shadow: 0 5px 14px -4px rgba(239, 111, 52, .6);
}

.editions .pill:focus-visible { outline: 3px solid #ff8a4c; outline-offset: 3px; }

@media (max-width: 480px) {
  .editions .pill { padding: 7px 15px; font-size: .92rem; }
}