/* MrsPep.org — shared name styles and achievement toast (used by every page) */

/* Name colors (chosen to read on both light and white backgrounds) */
.mp-c-green  .mp-text { color: #1f8f4e; }
.mp-c-orange .mp-text { color: #d9650f; }
.mp-c-violet .mp-text { color: #6a43e8; }
.mp-c-blue   .mp-text { color: #1670c9; }
.mp-c-pink   .mp-text { color: #d6286f; }
.mp-c-teal   .mp-text { color: #0d8a86; }
.mp-c-gold   .mp-text { color: #a97a00; text-shadow: 0 0 1px rgba(255, 200, 0, .6); }
.mp-c-rainbow .mp-text {
  background: linear-gradient(90deg, #e63946, #f08a24, #d4a017, #2f9e44, #1c7ed6, #7048e8, #d6336c);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .mp-c-rainbow .mp-text { animation: mp-rainbow 6s linear infinite; }
  @keyframes mp-rainbow { to { background-position: 200% 0; } }
}

.mp-badge { display: inline-block; vertical-align: -.1em; }
.mp-bill { display: inline-block; width: 1.5em; height: .9em; vertical-align: -.05em; }

/* Achievement toast */
.mp-toast {
  position: fixed; top: 14px; left: 50%; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(92vw, 420px); padding: 10px 16px;
  background: #1e1b4b; color: #fff; border: 3px solid #c6f135; border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 10px 30px rgba(0, 0, 0, .25);
  font: 600 .95rem/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
  transform: translate(-50%, -140%); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.mp-toast--in { transform: translate(-50%, 0); }
.mp-toast-icon { font-size: 1.8rem; }
.mp-toast small { font-weight: 500; opacity: .9; }
.mp-toast a { color: #c6f135; }
@media (prefers-reduced-motion: reduce) { .mp-toast { transition: none; } }

/* Leaderboard time-filter tabs. Each game themes them with these variables. */
.mp-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 10px; }
.mp-tab {
  font: 700 .8rem/1 var(--mp-tab-font, system-ui, sans-serif); cursor: pointer;
  color: var(--mp-tab-ink, #222); background: var(--mp-tab-bg, transparent);
  border: 2px solid var(--mp-tab-ink, #222); border-radius: var(--mp-tab-radius, 999px);
  padding: 6px 12px; min-height: 32px;
}
.mp-tab:hover { background: var(--mp-tab-hover, rgba(0, 0, 0, .06)); }
.mp-tab[aria-pressed="true"] { background: var(--mp-tab-on-bg, #222); color: var(--mp-tab-on-fg, #fff); box-shadow: var(--mp-tab-on-shadow, none); }
.mp-tab:focus-visible { outline: 3px solid var(--mp-tab-focus, #1c8c9e); outline-offset: 2px; }