/*
 * Shared Avatar + Pro-badge styling — single source of truth, paired with
 * avatar-badge.js. Every page that renders avatars links this file.
 *
 * The badge SIZE and OFFSET are expressed relative to the avatar, so one rule
 * covers every context — a tiny friends-list dot and a large profile avatar
 * stay visually balanced with no per-context pixel rules. The wrapper shrink-
 * wraps the avatar (inline-flex), so it IS the avatar's box; the absolutely
 * positioned badge then resolves its % width/height/offset against that box.
 *
 * Tuning knobs are CSS custom properties on `.av-pro-wrap`. Exceptional
 * contexts override a variable (below) instead of duplicating the badge rule.
 */

.av-pro-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;

  /* ── Badge tuning knobs (override per-context via these vars, not new rules) ── */
  --av-crown-scale: 44%;   /* badge edge as a fraction of the avatar's size   */
  --av-crown-min: 10px;    /* floor so tiny avatars keep a legible badge       */
  --av-crown-max: 26px;    /* ceiling so large avatars don't get a huge badge  */
  --av-crown-offset: 6%;   /* how far the badge overhangs the top-right corner */
}

/* Pro badge — a 3D-shaded golden 4-point sparkle (inline SVG: gold gradient +
   dark-gold outline for depth) on the avatar's top-right. Scales with the
   avatar via clamp(min, <scale> of avatar, max). */
.av-crown {
  position: absolute;
  top:   calc(-1 * var(--av-crown-offset));
  right: calc(-1 * var(--av-crown-offset));
  width:  clamp(var(--av-crown-min), var(--av-crown-scale), var(--av-crown-max));
  height: clamp(var(--av-crown-min), var(--av-crown-scale), var(--av-crown-max));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='.3' y1='0' x2='.7' y2='1'%3E%3Cstop offset='0' stop-color='%23fff2a8'/%3E%3Cstop offset='.5' stop-color='%23f7c945'/%3E%3Cstop offset='1' stop-color='%23c07d0c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 1c.9 5.6 4.4 9.1 10 10-5.6.9-9.1 4.4-10 10-.9-5.6-4.4-9.1-10-10 5.6-.9 9.1-4.4 10-10z' fill='url(%23s)' stroke='%238a4f08' stroke-width='.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(120, 70, 0, .55));
  pointer-events: none;
  z-index: 2;
}

/* ── Exceptional contexts: adjust a knob, never duplicate the badge rule ── */

/* Large profile-page avatar — let the badge grow a little more and hug closer. */
.av-pro-wrap:has(.pf-avatar) {
  --av-crown-max: 30px;
  --av-crown-offset: 4%;
}

/* Podium avatars sit a touch larger than the leaderboard rows. */
.av-pro-wrap:has(.pod-avatar) {
  --av-crown-max: 20px;
}

/* ── Guest badge (paired with hxGuestBadge in avatar-badge.js) ──────────────
   A small neutral "Guest" pill placed next to a not-signed-in player's name.
   Sized in `em` so it stays proportional in every context it appears in
   (waiting rooms, in-game status cards, chat, live/rejoin cards, join
   requests). Neutral grey — distinct from the amber Host/device badges and the
   golden Pro crown. Theme-aware for both dark (default) and light. */
.hx-guest-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: .68em;
  font-weight: 700;
  line-height: 1.35;
  padding: .1em .55em;
  margin-left: .4em;
  border-radius: 20px;
  background: rgba(150, 155, 170, .18);
  color: #aab3c4;
  border: 1px solid rgba(150, 155, 170, .32);
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
:root[data-theme="light"] .hx-guest-badge {
  background: rgba(120, 125, 140, .14);
  color: #676c77;
  border-color: rgba(120, 125, 140, .3);
}