/* Player avatars (render/avatar.js avatarEl, contract S3): a disc in the player colour with the player's own driver
   rendered in 3D, a thin ring in the player colour (exclusive owners: their set's frame + emblem), level / number /
   bot badges and a shimmering placeholder until the render is in. Contexts only set --av-size. */

.av {
  --av-size: 40px;
  --av-c: #ff8a1f;
  --av-glow: rgba(255, 138, 31, .5);
  --av-hi: #ffa566; --av-mid: #ff6a00; --av-lo: #4d2000;
  --av-rw: max(1.5px, calc(var(--av-size) * .05));
  position: relative; display: inline-block; flex: none; vertical-align: middle;
  width: var(--av-size); height: var(--av-size); border-radius: 50%; line-height: 1; isolation: isolate;
  -webkit-user-select: none; user-select: none; pointer-events: none;
}

/* disc: the placeholder is the same gradient as the baked disc plus a faint driver silhouette */
.av-disc {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, .2) 0 20%, transparent 21%),
    radial-gradient(ellipse 40% 29% at 50% 103%, rgba(0, 0, 0, .2) 0 96%, transparent 100%),
    radial-gradient(circle at 46% 30%, var(--av-hi) 0%, var(--av-mid) 40%, var(--av-lo) 100%);
}
.av-img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border-radius: 50%;
  opacity: 0; transform: scale(1.1); transition: opacity .38s var(--ease, ease-out), transform .5s var(--ease, ease-out);
}
.av.ready .av-img { opacity: 1; transform: none; }
.av.instant .av-img { transition: none; }
.av:not(.ready) .av-disc::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, .32) 48%, transparent 68%);
  transform: translateX(-110%); animation: av-shimmer 1.25s ease-in-out infinite;
}
@keyframes av-shimmer { to { transform: translateX(110%); } }

/* ring: player colour, a dark hairline between ring and disc, soft inner shadow at the bottom, coloured glow */
.av-ring {
  position: absolute; inset: calc(-1 * var(--av-rw)); z-index: 1; border-radius: 50%; pointer-events: none;
  border: var(--av-rw) solid var(--av-c);
  box-shadow:
    inset 0 0 0 1px rgba(8, 8, 12, .7),
    inset 0 calc(var(--av-size) * -.06) calc(var(--av-size) * .12) rgba(0, 0, 0, .28),
    0 0 calc(var(--av-size) * .2) var(--av-glow),
    0 2px 7px rgba(0, 0, 0, .5);
}

/* exclusive frames: a thicker metallic / neon ring that slowly turns, the set emblem on top */
.av.x { --av-rw: max(2px, calc(var(--av-size) * .075)); --x1: #fff4c4; --x2: #ffc21f; --x3: #a86a00; --xg: rgba(255, 194, 31, .65); }
.av[data-x="falcon"] { --x1: #fff3c8; --x2: #00b377; --x3: #00553a; --xg: rgba(0, 179, 119, .6); }
.av[data-x="phantom"] { --x1: #19f0ff; --x2: #ff2bd6; --x3: #6a2bff; --xg: rgba(25, 240, 255, .6); }
.av[data-x="vault"] { --x1: #ffd9f7; --x2: #b58cff; --x3: #3a1a7a; --xg: rgba(181, 140, 255, .6); }
.av.x .av-ring {
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(8, 8, 12, .75),
    inset 0 calc(var(--av-size) * -.06) calc(var(--av-size) * .12) rgba(0, 0, 0, .28),
    0 0 calc(var(--av-size) * .28) var(--xg),
    0 2px 7px rgba(0, 0, 0, .5);
}
.av.x .av-ring::before {
  content: ''; position: absolute; inset: calc(-1 * var(--av-rw)); border-radius: 50%;
  background: conic-gradient(var(--x1), var(--x2) 14%, var(--x3) 30%, var(--x2) 44%, var(--x1) 52%, var(--x2) 64%, var(--x3) 80%, var(--x2) 92%, var(--x1));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--av-rw) - .5px), #000 calc(100% - var(--av-rw)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--av-rw) - .5px), #000 calc(100% - var(--av-rw)));
  animation: av-turn 8s linear infinite;
}
@keyframes av-turn { to { transform: rotate(1turn); } }
.av-crest {
  position: absolute; z-index: 2; left: 50%; top: calc(var(--av-size) * -.3); width: calc(var(--av-size) * .46); height: calc(var(--av-size) * .46);
  transform: translateX(-50%); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .7)) drop-shadow(0 0 calc(var(--av-size) * .08) var(--xg));
}
.av[data-x="founder"] .av-crest { transform: translateX(-50%) rotate(-8deg); }
.av-crest svg { display: block; width: 100%; height: 100%; }

/* badges */
.av-lv {
  position: absolute; z-index: 3; left: 50%; bottom: calc(var(--av-size) * -.17); transform: translateX(-50%);
  min-width: 1.7em; height: 1.4em; padding: 0 .38em; border-radius: .7em; display: grid; place-items: center;
  font: 800 max(9px, calc(var(--av-size) * .22)) / 1 var(--font, sans-serif); color: #fff; direction: ltr; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #22222c, #0b0b0f); border: 1.5px solid var(--av-c); box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.av.x .av-lv { border-color: var(--x2); }
.av-tag {
  position: absolute; z-index: 3; bottom: calc(var(--av-size) * -.08); inset-inline-end: calc(var(--av-size) * -.14);
  min-width: 1.6em; height: 1.6em; padding: 0 .25em; border-radius: .45em; display: grid; place-items: center;
  font: 800 max(9px, calc(var(--av-size) * .2)) / 1 var(--font, sans-serif); color: #fff; direction: ltr; font-variant-numeric: tabular-nums;
  background: #0b0b0f; border: 1.5px solid var(--av-c); box-shadow: 0 1px 4px rgba(0, 0, 0, .55); transform: skewX(var(--skew, -8deg));
}
.av-bot {
  position: absolute; z-index: 3; bottom: calc(var(--av-size) * -.06); inset-inline-end: calc(var(--av-size) * -.1);
  width: max(13px, calc(var(--av-size) * .4)); height: max(13px, calc(var(--av-size) * .4)); border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: #15151c; border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.av-bot svg { width: 66%; height: 66%; display: block; }
/* a bot's level pill steps away from the bot badge (inline end) */
.av.bot .av-lv { left: 38%; }
[dir="rtl"] .av.bot .av-lv { left: 62%; }

/* list sizes: no emblem above the frame, a plain thin ring */
.av.sm .av-crest { display: none; }
.av.sm { --av-rw: 1.5px; }
.av.sm.x { --av-rw: 2px; }

@media (prefers-reduced-motion: reduce) {
  .av.x .av-ring::before, .av:not(.ready) .av-disc::after { animation: none; }
  .av-img { transition: none; }
}

/* ---- contexts --------------------------------------------------------------------------------------------- */

/* menu player card */
.mn-player > .av { --av-size: 3.25rem; margin-block: .15rem; }

/* lobby player rows: the set emblem sits tilted on the reading-start shoulder of the frame (no room above) */
.lb-p > .av { --av-size: 2.2rem; margin-inline-start: .3rem; }
.lb-p > .av.x .av-crest { top: calc(var(--av-size) * -.22); left: auto; inset-inline-start: calc(var(--av-size) * -.2); width: calc(var(--av-size) * .5); height: calc(var(--av-size) * .5); transform: rotate(-22deg); }
[dir="rtl"] .lb-p > .av.x .av-crest { transform: rotate(22deg); }

/* results podium (large) */
.res-pod-face { position: relative; flex: none; display: grid; place-items: center; margin-bottom: .42rem; }
.res-pod .av { --av-size: 2.55rem; }
.res-pod.p1 .av { --av-size: 3.05rem; }
.res-pod.p1 .av:not(.x) .av-ring { box-shadow:
  inset 0 0 0 1px rgba(8, 8, 12, .7), inset 0 calc(var(--av-size) * -.06) calc(var(--av-size) * .12) rgba(0, 0, 0, .28),
  0 0 0 2px rgba(255, 226, 122, .9), 0 0 18px rgba(255, 200, 40, .55), 0 3px 10px rgba(0, 0, 0, .5); }
.res-pod-face .res-pod-crown { z-index: 4; top: -1.05rem; }
.res-pod.p1 .res-pod-block { height: 56%; }
.res-pod.p2 .res-pod-block { height: 41%; }
.res-pod.p3 .res-pod-block { height: 30%; }

/* results standings (small): the avatar takes the colour chip's column */
.res-th, .res-tr { grid-template-columns: 1.75rem 1.62rem minmax(0, 1fr) auto; gap: .45rem; }
.res-tr .av { --av-size: 1.5rem; }
@media (max-height: 420px) {
  .res-th, .res-tr { grid-template-columns: 1.7rem 1.46rem minmax(0, 1fr) auto; gap: .4rem; }
  .res-tr .av { --av-size: 1.4rem; }
}
/* the player's name wins over an exclusive title chip: the chip gives way first (it shrinks before the name), and in
   a narrow cell it drops its text and keeps the set emblem, or goes when the name already carries that emblem */
.res-tr .res-name { container-type: inline-size; }
.res-tr .xfx-name .xfx-txt { flex-shrink: 1; }
.res-tr .xfx-name .xfx-title { flex: 0 1000 auto; min-inline-size: 0; }
.res-tr .xfx-title b { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 17rem) {
  .res-tr .xfx-title { padding-inline: .32em; gap: 0; }
  .res-tr .xfx-title b { display: none; }
  .res-tr .xfx-ico ~ .xfx-title { display: none; }
}