/* ============================================================
   badges.css — system badges (bottom-right pill stack) + the
   hidden pokeball easter egg tucked inside them.
   Shared across all pages.
   ============================================================ */

/* ============================================================
   6. SYSTEM BADGES  (shared, pinned bottom-right)
   ============================================================ */
.badges {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  pointer-events: none;
  z-index: 5;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-0);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  color: var(--subtext-1);
  font-size: 0.75rem;
  white-space: nowrap;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

.badge:hover {
  border-color: rgb(var(--accent-rgb));
  box-shadow: 0 4px 14px -6px rgba(var(--accent-rgb), 0.5);
}

.badge-icon {
  width: 15px;
  height: 15px;
  filter: invert(78%) sepia(36%) saturate(640%) hue-rotate(280deg) brightness(105%);
}


/* ============================================================
   12. HIDDEN POKÉBALL  (unlocks the Pokémon cats once clicked)
   ============================================================ */
/* Small, low-contrast and tucked among the badges so it has to be
   hunted for. Still clickable — that's the whole point of finding it. */
#pokeball-secret {
  width: 14px;
  height: 14px;
  opacity: 0.18;
  align-self: center;
  cursor: url('../assets/cursor/default_0.png'), default;
  pointer-events: auto;
  /* parent .badges sets none — re-enable here */
  image-rendering: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
  -webkit-user-drag: none;
  user-select: none;
}

#pokeball-secret:hover {
  opacity: 0.85;
  transform: scale(1.15);
}

#pokeball-secret.found {
  opacity: 1;
  cursor: url('../assets/cursor/default_0.png'), default;
  filter: drop-shadow(0 0 4px var(--red));
}