/*
 * bust.fun - PUBLIC PROFILE page (#/u/<handle>) + the FOLLOW button + the account FOLLOWING list + the
 * lobby BIG-WIN feed. Social depth (EPIC 7). Synthwave tokens only (tokens.css); no hard-coded colors so
 * light/dark themes both work. Responsive + a11y (focus rings inherited from the global control styles).
 * Display only - this stylesheet carries no logic + no money math.
 */

/* ------------------------------ profile header ------------------------------ */

#profileCard.hidden,
#profileNotFound.hidden { display: none; }

.profile-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

/* AVATAR — a round-cropped box at the profile header lead. Now a WRAPPER that holds the user's chosen
   avatar node (a preset <img> or the generated identicon <svg>) built by the shared avatarNode() helper, so
   it matches the topbar + settings. The box paints the round crop; the child fills it. */
.pf-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 16px var(--brand-glow);
}
.pf-avatar > img,
.pf-avatar > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.pf-tier-badge {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
}
.pf-tier-badge svg { width: 26px; height: 26px; }

/* VIP MEDALLIONS (chrome illustration set, /img/selected/vip-<tier>.png). The tier class paints the
   medallion as a contained background; the trusted trophy SVG inside is hidden so the medallion shows
   (it remains in the DOM as a graceful fallback if the image 404s — set display:none only when painted). */
.pf-tier-badge[class*="pf-tier-"] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: 0 0 16px var(--gold-glow);
}
.pf-tier-badge[class*="pf-tier-"] svg { display: none; }
.pf-tier-bronze   { background-image: url('/img/selected/vip-bronze.png'); }
.pf-tier-silver   { background-image: url('/img/selected/vip-silver.png'); }
.pf-tier-gold     { background-image: url('/img/selected/vip-gold.png'); }
.pf-tier-platinum { background-image: url('/img/selected/vip-platinum.png'); }
.pf-tier-diamond  { background-image: url('/img/selected/vip-diamond.png'); }

.pf-idblock { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pf-handle {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--fg);
  font-weight: 700;
  word-break: break-all; /* a long handle never overflows its card */
}
.pf-sub { font-size: var(--fs-sm); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pf-tier { color: var(--gold); }
.pf-dot { color: var(--muted); }

/* ------------------------------ follow button ------------------------------ */

.pf-actions { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }

#profileFollowBtn {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand);
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color: #fff;
  cursor: pointer;
  transition: filter .12s ease, background .12s ease;
}
#profileFollowBtn:hover:not(:disabled) { filter: brightness(1.08); }
#profileFollowBtn:disabled { opacity: .6; cursor: default; }
#profileFollowBtn.hidden { display: none; }
/* "Following" state: a subdued, outlined look so it reads as a toggle-off affordance. */
#profileFollowBtn.pf-following {
  background: var(--surface-3);
  color: var(--fg);
  border-color: var(--line-2);
}

#profileFollowHint { font-size: var(--fs-sm); color: var(--muted); }
#profileFollowHint.hidden { display: none; }

/* "Edit profile" (own-profile only) — a subdued, outlined secondary action beside the follow slot. Mirrors
   the "Following" toggle-off look so it reads as secondary, and deep-links to the settings tab. */
.pf-edit-btn {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: filter .12s ease, border-color .12s ease;
}
.pf-edit-btn:hover { filter: brightness(1.08); border-color: var(--brand); }
.pf-edit-btn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.pf-edit-btn.hidden { display: none; }

/* Own-and-private info banner: sits under the actions row; reuses the shared .rg-banner tint, stacked so the
   title reads above the one-line explainer. */
#profilePrivateSelf { flex-direction: column; gap: 0; margin: 0 0 var(--sp-4); }
#profilePrivateSelf.hidden { display: none; }
#profilePrivateSelf p { margin: var(--sp-1) 0 0; }
#profilePrivateSelf a { color: var(--brand); font-weight: 700; }

/* ------------------------------ stat grid ------------------------------ */

#profileStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
}
.pf-stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-stat .lbl { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pf-stat b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--fg); }
.pf-stat .unit { font-size: var(--fs-xs); color: var(--muted); }

/* ------------------------------ big-win rows (profile + lobby) ------------------------------ */

.big-wins-feed, .big-win-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.bw-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.bw-row.won { box-shadow: inset 2px 0 0 var(--win); }
.bw-ic { width: 22px; height: 22px; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.bw-ic svg { width: 20px; height: 20px; }
.bw-who { color: var(--fg-dim); font-weight: 600; text-decoration: none; word-break: break-all; }
.bw-who:hover { color: var(--brand); text-decoration: underline; }
.bw-game { color: var(--muted); text-transform: capitalize; }
.bw-mult { font-family: var(--font-display); color: var(--gold); font-weight: 700; }
.bw-payout { font-family: var(--font-display); color: var(--win); font-weight: 700; }

#profileBigWinsEmpty.hidden, #bigWinFeedEmpty.hidden, #followingEmpty.hidden { display: none; }
#profileBigWinsEmpty, #bigWinFeedEmpty, #followingEmpty { color: var(--muted); font-size: var(--fs-sm); padding: var(--sp-3); }

/* ------------------------------ following list (account area) ------------------------------ */

.following-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.follow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.follow-who { color: var(--fg); font-weight: 600; text-decoration: none; word-break: break-all; }
.follow-who:hover { color: var(--brand); text-decoration: underline; }
.follow-unfollow {
  font-size: var(--fs-sm);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  color: var(--fg);
  cursor: pointer;
}
.follow-unfollow:hover:not(:disabled) { border-color: var(--brand); }
.follow-unfollow:disabled { opacity: .6; cursor: default; }

/* ------------------------------ navigable count "stats" (followers / following) ------------------------------ */

/* A count stat rendered as a button so it's keyboard-focusable + clearly clickable. Same look as a plain
 * .pf-stat, plus an affordance + a hover lift. The global focus ring applies (no color hard-coding). */
.pf-stat-link {
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.pf-stat-link:hover { border-color: var(--brand); }
.pf-stat-link .unit { color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }

/* ------------------------------ followers / following overlay list (on a profile) ------------------------------ */

#profileFollowList {
  margin-top: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
#profileFollowList.hidden { display: none; }
.pf-followlist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.pf-followlist-head h3 { margin: 0; font-size: var(--fs-md); color: var(--fg); }
#profileFollowListClose {
  font-size: var(--fs-sm);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  color: var(--fg);
  cursor: pointer;
}
#profileFollowListClose:hover { border-color: var(--brand); }
#profileFollowListItems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
#profileFollowListEmpty.hidden { display: none; }
#profileFollowListEmpty { color: var(--muted); font-size: var(--fs-sm); padding: var(--sp-2); }

/* ------------------------------ recent public bets (profile) + following feed ------------------------------ */

.recent-bets-list, .following-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* A recent-bet row: icon | game | multiplier | time | amount. Win/loss accent stripe (left inset). */
.rb-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.rb-row.won { box-shadow: inset 2px 0 0 var(--win); }
.rb-row.lost { box-shadow: inset 2px 0 0 var(--line-2); }
.rb-ic { width: 22px; height: 22px; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.rb-ic svg { width: 20px; height: 20px; }
.rb-game { color: var(--muted); text-transform: capitalize; }
.rb-mult { font-family: var(--font-display); color: var(--gold); font-weight: 700; }
.rb-time { font-size: var(--fs-xs); white-space: nowrap; }
.rb-row.won .rb-amt { color: var(--win); }
.rb-row.lost .rb-amt { color: var(--muted); }
.rb-amt { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }

#profileRecentBetsEmpty.hidden, #followingFeedEmpty.hidden, #followingFeedMore.hidden { display: none; }
#profileRecentBetsEmpty, #followingFeedEmpty { color: var(--muted); font-size: var(--fs-sm); padding: var(--sp-3); }

/* The following-feed "load more" control. */
#followingFeedMore {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  padding: 7px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  color: var(--fg);
  cursor: pointer;
}
#followingFeedMore:hover { border-color: var(--brand); }

/* ------------------------------ responsive ------------------------------ */

@media (max-width: 560px) {
  .bw-row { grid-template-columns: 24px 1fr auto; }
  .bw-row .bw-game { display: none; } /* drop the least-critical column on narrow screens */
  .rb-row { grid-template-columns: 24px 1fr auto auto; }
  .rb-row .rb-time { display: none; } /* drop the least-critical column on narrow screens */
  .pf-handle { font-size: var(--fs-lg); }
}