/* ============================================================
   keyring.css — lanyard.cafe webring widget (#lc-embed)
   re-theme. Bottom-left, shared across all pages.
   ============================================================ */

/* =====================================================================
 * lanyard.cafe keyring (webring) — embed.js injects #lc-embed with all
 * styles inline, so every override here needs !important. Re-themes the
 * default cream/brown look to Catppuccin and the site font, keeping the
 * widget floating in the bottom-left (which is otherwise empty chrome).
 * ===================================================================== */
#lc-embed {
  font-family: 'Comic Code', 'Quicksand', system-ui, sans-serif !important;
  left: 1rem !important;
  bottom: 1rem !important;
  z-index: 5 !important;
}

#lc-embed>section {
  margin-bottom: 0 !important;
}

/* the card */
#lc-embed>section>div {
  background: var(--surface-0) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.7) !important;
}

/* prev / random / next buttons */
#lc-embed a {
  background: var(--surface-1) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease !important;
}

#lc-embed a:nth-child(1),
#lc-embed a:nth-child(3) {
  color: rgb(var(--accent-rgb)) !important;
}

#lc-embed a:nth-child(2) {
  color: var(--lavender) !important;
}

#lc-embed a:hover {
  background: var(--surface-2) !important;
  transform: translateY(-2px) !important;
}

/* the "you are at <url>" line */
#lc-embed p {
  color: var(--subtext-0) !important;
}

#lc-embed p span {
  color: rgb(var(--accent-rgb)) !important;
}

/* On mobile the body is a single flex column and every other floating
   widget (nav, badges, presence card) is reflowed into it. The keyring,
   left fixed, floated over the nav pills when scrolled to the bottom — so
   here we drop it into the column too, last and centered. */
@media (max-width: 640px) {
  #lc-embed {
    position: static !important;
    inset: auto !important;
    order: 6 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  #lc-embed>section>div {
    min-width: 0 !important;
  }
}