/* ===== A rider's name as identity_row.js renders it: the player title (title_badge.js) and the
   club [TAG] (club_badge.js) =====
   Moved out of lobby.css in PT5 (one header) so the dashboard header and every page that wears
   it (site_frame.js: the Bike Shop) share one copy; rules unchanged. players/profile.html and
   clubs/club.html carry their own paper-tuned copies. Linked by index.html and bike_shop.html. */
/* Player title — colors a rider's name (shared markup from title_badge.js).
   Self-contained tooltip so it doesn't depend on profile.html's .badge-tooltip. */
.player-title {
  position: relative;
  display: inline-block;
  cursor: help;
}
.player-title-name {
  border-bottom: 1px dotted currentColor;
}
.player-title .player-title-tip {
  position: absolute;
  /* Drops BELOW the name — the portal drawer header sits at the very top of
     the viewport, so an above-the-name card would clip off-screen. Left-
     anchored (not centred) so a short name near the panel edge can't push
     the card past the left edge either. */
  top: calc(100% + 8px);
  left: 0;
  width: 210px;
  max-width: min(210px, 78vw);
  background: #10202a;
  color: #eaf2f6;
  border: 1px solid rgba(180, 180, 180, 0.28);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
/* Never revealed in place — title_badge.js shows a `position: fixed` floating clone instead (see
   that file's own doc comment), so this box's content can't get clipped by a card's own
   `overflow: hidden` or painted over by a later-in-DOM sibling (e.g. the drawer header's XP bar). */
/* Tier treatments for the name text — escalating, like the pinned-badge tiers.
   The text ALWAYS keeps its own solid colour (readability first); the tier
   adds a glow, and gold/mythical/staff also get a sweeping shimmer. The
   shimmer is a duplicate-text ::after with background-clip:text — it is
   CLIPPED TO THE GLYPHS, never a rectangular bar over the name's box. */
.player-title--silver .player-title-name {
  /* currentColor, not a fixed blue-gray — same reasoning as the gold rule below. */
  text-shadow: 0 0 6px currentColor;
}
.player-title--gold .player-title-name {
  font-weight: 700;
  /* currentColor, not a fixed amber — a gold-tier title keeps its OWN hue in the
     glow instead of every gold-tier title reading as amber regardless of color. */
  text-shadow:
    0 0 6px currentColor,
    0 0 15px currentColor;
}
.player-title--legendary .player-title-name {
  font-weight: 700;
  animation: playerTitleGlow 2.6s ease-in-out infinite;
}
.player-title--mythical .player-title-name {
  font-weight: 700;
  animation: playerTitleGlow 3.2s ease-in-out infinite;
}
.player-title--gold .player-title-name,
.player-title--mythical .player-title-name,
.player-title--staff .player-title-name {
  position: relative;
  display: inline-block;
}
.player-title--gold .player-title-name::after,
.player-title--mythical .player-title-name::after,
.player-title--staff .player-title-name::after {
  content: attr(data-name);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255, 255, 255, 0.85) 50%,
    transparent 58%
  );
  background-size: 300% 100%;
  background-position: 180% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: playerTitleSheen 4.5s ease-in-out infinite;
}
.player-title--mythical .player-title-name::after {
  background-image: linear-gradient(
    100deg,
    transparent 42%,
    rgba(200, 230, 255, 0.9) 50%,
    transparent 58%
  );
}
@keyframes playerTitleSheen {
  0% {
    background-position: 180% 0;
  }
  55%,
  100% {
    background-position: -80% 0;
  }
}
/* Staff — the loudest treatment, admin-only (Game Master): exactly the
   mythical/legendary GLOW PULSE (playerTitleGlow), except each successive
   pulse steps through a blue family that complements the cobalt fill —
   ice → azure → cobalt → indigo — instead of the name's own colour. Plus
   the shared glyph-clipped shimmer above. Four trough→peak beats per loop. */
.player-title--staff .player-title-name {
  font-weight: 800;
  letter-spacing: 0.03em;
  animation: playerTitleStaffAura 14s ease-in-out infinite;
}
@keyframes playerTitleStaffAura {
  0%,
  100% {
    text-shadow:
      0 0 5px currentColor,
      0 0 11px rgba(158, 201, 255, 0.14);
  }
  12% {
    text-shadow:
      0 0 11px #9ec9ff,
      0 0 24px rgba(158, 201, 255, 0.9);
  }
  25% {
    text-shadow:
      0 0 5px currentColor,
      0 0 11px rgba(91, 157, 255, 0.14);
  }
  37% {
    text-shadow:
      0 0 11px #5b9dff,
      0 0 24px rgba(91, 157, 255, 0.9);
  }
  50% {
    text-shadow:
      0 0 5px currentColor,
      0 0 11px rgba(63, 99, 255, 0.14);
  }
  62% {
    text-shadow:
      0 0 12px #3f63ff,
      0 0 26px rgba(63, 99, 255, 0.95);
  }
  75% {
    text-shadow:
      0 0 5px currentColor,
      0 0 11px rgba(139, 123, 255, 0.14);
  }
  87% {
    text-shadow:
      0 0 11px #8b7bff,
      0 0 24px rgba(139, 123, 255, 0.9);
  }
}
@keyframes playerTitleGlow {
  0%,
  100% {
    text-shadow:
      0 0 5px currentColor,
      0 0 11px rgba(255, 255, 255, 0.12);
  }
  50% {
    text-shadow:
      0 0 11px currentColor,
      0 0 24px currentColor;
  }
}
@media (prefers-reduced-motion: reduce) {
  .player-title-name {
    animation: none !important;
  }
  .player-title-name::after {
    display: none;
  }
}
/* Club tag — the bracketed [TAG] prefixed to displayName (shared markup from
   club_badge.js). A separate text run from .player-title, never recoloring the
   name itself. Tier escalation (CLUBS_PLAN.md §3, bronze/pewter/amber/emerald —
   tier-effects polish, mirrors clubs/club.html's own pennant/header colors): group
   a plain bronze color, club a colored glow, clan/guild a shimmer — reuses
   .player-title's own playerTitleGlow/playerTitleSheen keyframes (generic over
   currentColor/data-name) rather than redefining them.

   The [TAG] text itself is a real link (.club-tag-link, straight to /clubs/{tag}) —
   not something hidden inside the hover, the way a player's own name is the link
   everywhere else in this app. Hovering shows a richer card (name/tier/stats,
   filled in by club_badge.js's lazy fetch-on-hover — see that file's own header
   comment); .club-tag-tip itself only ever renders the tier as a synchronous
   fallback before that fetch lands. */
.club-tag {
  position: relative;
  display: inline-block;
  font-weight: 700;
}
.club-tag-link {
  color: inherit;
  text-decoration: none;
}
.club-tag-link:hover {
  text-decoration: underline;
}
.club-tag .club-tag-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 190px;
  max-width: min(190px, 70vw);
  background: #10202a;
  color: #eaf2f6;
  border: 1px solid rgba(180, 180, 180, 0.28);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.club-tag-tip-name {
  font-weight: 700;
  color: #fff;
}
.club-tag-tip-tier {
  opacity: 0.8;
  margin-bottom: 4px;
}
.club-tag-tip-stats {
  border-top: 1px solid rgba(234, 242, 246, 0.18);
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.club-tag-tip-stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.club-tag-tip-stat span {
  opacity: 0.75;
}
.club-tag:hover .club-tag-tip {
  opacity: 1;
  pointer-events: auto;
}
.club-tag--group {
  color: #e3a361;
}
.club-tag--club {
  color: #b9c6d4;
  text-shadow:
    0 0 6px rgba(185, 198, 212, 0.55),
    0 0 15px rgba(185, 198, 212, 0.3);
}
.club-tag--clan {
  color: #ffcf5c;
  animation: playerTitleGlow 2.6s ease-in-out infinite;
}
.club-tag--guild {
  color: #7ef5c0;
  animation: playerTitleGlow 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .club-tag--clan,
  .club-tag--guild {
    animation: none !important;
  }
}
/* The hover card picks up the SAME bronze/pewter/amber/emerald tier accent as the [TAG]
   text itself, via the tier class already on the outer .club-tag wrapper — no JS change
   needed, .club-tag-tip is just a descendant of it. */
.club-tag--group .club-tag-tip {
  border-color: rgba(227, 163, 97, 0.45);
  box-shadow: 0 6px 20px rgba(227, 163, 97, 0.25);
}
.club-tag--group .club-tag-tip-name {
  color: #e3a361;
}
.club-tag--club .club-tag-tip {
  border-color: rgba(185, 198, 212, 0.5);
  box-shadow: 0 6px 20px rgba(185, 198, 212, 0.25);
}
.club-tag--club .club-tag-tip-name {
  color: #b9c6d4;
}
.club-tag--clan .club-tag-tip {
  border-color: rgba(255, 207, 92, 0.5);
  box-shadow: 0 6px 20px rgba(255, 207, 92, 0.3);
}
.club-tag--clan .club-tag-tip-name {
  color: #ffcf5c;
}
.club-tag--guild .club-tag-tip {
  border-color: rgba(126, 245, 192, 0.5);
  box-shadow: 0 6px 20px rgba(126, 245, 192, 0.3);
}
.club-tag--guild .club-tag-tip-name {
  color: #7ef5c0;
}