:root {
  --arcade-link-cyan: #64ebff;
  --arcade-link-green: #7bf0ba;
  --arcade-link-magenta: #ff5dcf;
  --arcade-link-gold: #ffd36b;
  --arcade-link-text: #f4f7ff;
  --arcade-link-muted: #a8b4d1;
}

/* Shared Vectrexia link language -----------------------------------------
   Visible navigation and action links use a tactile arcade-control surface.
   Full-card catalog links, icon controls, downloads, and skip links keep their
   own specialized treatments. */
.arcade-page-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.46rem;
}

.arcade-page-nav--center {
  justify-content: center;
}

.arcade-page-nav--footer {
  gap: 0.58rem;
}

html body a.arcade-pill {
  --arcade-accent: var(--arcade-link-cyan);
  --arcade-accent-secondary: var(--arcade-link-magenta);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 2.35rem;
  max-width: 100%;
  padding: 0.55rem 0.88rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--arcade-accent) 38%, rgba(255,255,255,0.13));
  border-radius: 999px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% -30%, color-mix(in srgb, var(--arcade-accent) 24%, transparent), transparent 56%),
    linear-gradient(180deg, rgba(34, 43, 60, 0.97), rgba(12, 17, 28, 0.98) 48%, rgba(4, 7, 13, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.17),
    inset 0 -8px 14px rgba(0,0,0,0.34),
    0 1px 0 rgba(255,255,255,0.035),
    0 9px 22px rgba(0,0,0,0.34),
    0 0 14px color-mix(in srgb, var(--arcade-accent) 14%, transparent),
    0 0 34px color-mix(in srgb, var(--arcade-accent-secondary) 7%, transparent);
  color: color-mix(in srgb, var(--arcade-accent) 72%, var(--arcade-link-text));
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.035em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--arcade-accent) 24%, transparent);
  white-space: normal;
  cursor: pointer;
  transform: translateZ(0);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

html body a.arcade-pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -42%;
  bottom: -42%;
  left: -70%;
  width: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  filter: blur(1px);
  transform: skewX(-20deg) translateX(-62%);
  transition: transform 430ms cubic-bezier(.2,.85,.3,1);
  pointer-events: none;
}

html body a.arcade-pill::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 14%;
  right: 14%;
  bottom: 3px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--arcade-accent) 72%, white), transparent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--arcade-accent) 42%, transparent);
  opacity: 0.54;
  pointer-events: none;
}

html body a.arcade-pill:hover {
  transform: translateY(-2px) scale(1.012);
  border-color: color-mix(in srgb, var(--arcade-accent) 72%, white);
  color: var(--arcade-link-text);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--arcade-accent) 35%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(41, 52, 72, 0.99), rgba(13, 20, 32, 0.99) 48%, rgba(5, 8, 15, 1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -8px 14px rgba(0,0,0,0.28),
    0 12px 28px rgba(0,0,0,0.42),
    0 0 20px color-mix(in srgb, var(--arcade-accent) 28%, transparent),
    0 0 52px color-mix(in srgb, var(--arcade-accent-secondary) 14%, transparent);
}

html body a.arcade-pill:hover::before {
  transform: skewX(-20deg) translateX(62%);
}

html body a.arcade-pill:active {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,0.45),
    inset 0 0 12px color-mix(in srgb, var(--arcade-accent) 12%, transparent),
    0 4px 11px rgba(0,0,0,0.36),
    0 0 13px color-mix(in srgb, var(--arcade-accent) 20%, transparent);
}

html body a.arcade-pill:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--arcade-accent) 78%, white);
  outline-offset: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 0 4px rgba(4, 7, 13, 0.9),
    0 0 0 6px color-mix(in srgb, var(--arcade-accent) 46%, transparent),
    0 0 34px color-mix(in srgb, var(--arcade-accent) 28%, transparent);
}

html body a.arcade-pill[aria-current="page"],
html body a.arcade-pill.is-current {
  --arcade-accent: var(--arcade-link-green);
  --arcade-accent-secondary: var(--arcade-link-cyan);
  color: #f3fff9;
  border-color: color-mix(in srgb, var(--arcade-link-green) 58%, white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -8px 14px rgba(0,0,0,0.28),
    0 10px 25px rgba(0,0,0,0.38),
    0 0 20px rgba(123,240,186,0.24),
    0 0 48px rgba(100,235,255,0.11);
}

html body a.arcade-pill--library {
  --arcade-accent: var(--arcade-link-green);
  --arcade-accent-secondary: var(--arcade-link-cyan);
  min-height: 2.55rem;
  padding-inline: 1.05rem;
  color: #f4fff9;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  animation: arcadeLibraryPulse 3.8s ease-in-out infinite;
}

html body a.arcade-pill--library::after {
  opacity: 0.8;
}

html body a.arcade-pill--brand {
  --arcade-accent: var(--arcade-link-green);
  --arcade-accent-secondary: var(--arcade-link-cyan);
  padding-inline: 0.92rem;
  font-size: 0.72rem;
  font-weight: 930;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

html body a.arcade-pill--nav {
  min-height: 2.2rem;
  padding: 0.46rem 0.76rem;
  font-size: 0.69rem;
}

html body a.arcade-pill--compact {
  min-height: 2rem;
  padding: 0.4rem 0.68rem;
  font-size: 0.66rem;
}

html body a.arcade-pill--micro {
  min-height: 1.7rem;
  padding: 0.28rem 0.52rem;
  font-size: 0.61rem;
  letter-spacing: 0.025em;
}

html body a.arcade-pill--source {
  --arcade-accent: var(--arcade-link-cyan);
  --arcade-accent-secondary: var(--arcade-link-magenta);
  justify-content: flex-start;
  min-height: 2.45rem;
  border-radius: 14px;
  padding: 0.62rem 0.78rem;
  text-align: left;
  line-height: 1.35;
}

html body a.arcade-pill--cyan {
  --arcade-accent: var(--arcade-link-cyan);
  --arcade-accent-secondary: var(--arcade-link-magenta);
}

html body a.arcade-pill--green {
  --arcade-accent: var(--arcade-link-green);
  --arcade-accent-secondary: var(--arcade-link-cyan);
}

html body a.arcade-pill--magenta {
  --arcade-accent: var(--arcade-link-magenta);
  --arcade-accent-secondary: var(--arcade-link-cyan);
}

html body a.arcade-pill--violet {
  --arcade-accent: #a884ff;
  --arcade-accent-secondary: var(--arcade-link-magenta);
}

html body a.arcade-pill--gold {
  --arcade-accent: var(--arcade-link-gold);
  --arcade-accent-secondary: var(--arcade-link-magenta);
}

html body a.arcade-pill--featured {
  color: #fff9e8;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  animation: arcadePillSignal 3.8s ease-in-out infinite;
}

@keyframes arcadeLibraryPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      inset 0 -8px 14px rgba(0,0,0,0.32),
      0 10px 24px rgba(0,0,0,0.38),
      0 0 15px rgba(123,240,186,0.16),
      0 0 38px rgba(100,235,255,0.07);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.25),
      inset 0 -8px 14px rgba(0,0,0,0.26),
      0 12px 28px rgba(0,0,0,0.42),
      0 0 24px rgba(123,240,186,0.3),
      0 0 58px rgba(100,235,255,0.15);
  }
}


@keyframes arcadePillSignal {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      inset 0 -8px 14px rgba(0,0,0,0.32),
      0 10px 24px rgba(0,0,0,0.38),
      0 0 16px color-mix(in srgb, var(--arcade-accent) 20%, transparent),
      0 0 38px color-mix(in srgb, var(--arcade-accent-secondary) 8%, transparent);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.26),
      inset 0 -8px 14px rgba(0,0,0,0.26),
      0 12px 28px rgba(0,0,0,0.42),
      0 0 26px color-mix(in srgb, var(--arcade-accent) 34%, transparent),
      0 0 58px color-mix(in srgb, var(--arcade-accent-secondary) 16%, transparent);
  }
}

@media (max-width: 560px) {
  .arcade-page-nav {
    gap: 0.34rem;
  }

  html body a.arcade-pill--nav,
  html body a.arcade-pill--compact {
    min-height: 2.1rem;
    padding-inline: 0.66rem;
  }

  html body a.arcade-pill--library {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body a.arcade-pill,
  html body a.arcade-pill--library,
  html body a.arcade-pill--featured {
    animation: none;
    transition: none;
  }

  html body a.arcade-pill:hover,
  html body a.arcade-pill:active {
    transform: none;
  }

  html body a.arcade-pill::before {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html body a.arcade-pill {
    background-color: #0a0f19;
  }
}