.pinglife-avatar-frame {
  --pinglife-avatar-photo-inset: 13.5%;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  place-items: center;
  box-sizing: border-box;
  vertical-align: middle;
  container-type: inline-size;
  margin: 0;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pinglife-avatar-frame__photo {
  position: absolute !important;
  z-index: 0;
  top: var(--pinglife-avatar-photo-inset) !important;
  left: var(--pinglife-avatar-photo-inset) !important;
  width: calc(100% - (var(--pinglife-avatar-photo-inset) * 2)) !important;
  height: calc(100% - (var(--pinglife-avatar-photo-inset) * 2)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #0a0f18;
  box-shadow: none !important;
  clip-path: circle(50% at 50% 50%);
}

.pinglife-avatar-frame__art {
  position: absolute !important;
  z-index: 2;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  pointer-events: none;
  user-select: none;
}

.pinglife-avatar-frame__level {
  position: absolute;
  z-index: 3;
  left: 39%;
  top: 79.2%;
  width: 22%;
  height: 15%;
  display: grid;
  place-items: center;
  color: #f8fbff;
  font: 1000 clamp(7px, 12cqi, 30px)/1 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(255, 255, 255, .72);
  pointer-events: none;
}

.pinglife-avatar-frame--small .pinglife-avatar-frame__level {
  font-size: clamp(6px, 11cqi, 11px);
}

.pinglife-avatar-frame > .friends-presence,
.pinglife-avatar-frame > .home-game-online-status,
.pinglife-avatar-frame > i[aria-label="En ligne"] {
  z-index: 4;
}

@supports not (font-size: 1cqi) {
  .pinglife-avatar-frame__level { font-size: 11px; }
  .pinglife-avatar-frame--small .pinglife-avatar-frame__level { font-size: 7px; }
}

.pinglife-video-profile-frame {
  overflow: visible !important;
  clip-path: none !important;
  background: transparent !important;
}

.pinglife-video-player-hud {
  top: max(12px, env(safe-area-inset-top)) !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  width: min(calc(100vw - max(10px, env(safe-area-inset-left))), 390px) !important;
  aspect-ratio: auto !important;
  display: grid !important;
  grid-template-columns: clamp(68px, 19vw, 84px) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: clamp(6px, 1.8vw, 9px) !important;
  row-gap: 0 !important;
  background: none !important;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)) !important;
  container-type: normal !important;
}

.pinglife-video-player-hud-row {
  display: contents !important;
}

.pinglife-video-profile-frame {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 !important;
  padding: 0 !important;
  grid-row: 1 / span 2 !important;
}

.pinglife-video-xp {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.pinglife-video-xp .pinglife-video-xp-stats {
  position: static !important;
  width: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 6px !important;
  color: #eef5ff !important;
  white-space: nowrap;
}

.pinglife-video-xp .pinglife-video-xp-stats b {
  color: #fff !important;
  font: 900 clamp(10px, 2.8vw, 14px)/1 system-ui, sans-serif !important;
  text-shadow: 0 2px 3px #000 !important;
}

.pinglife-video-xp .pinglife-video-xp-stats small {
  overflow: hidden;
  color: #d7e1ec !important;
  font: 800 clamp(7px, 1.9vw, 10px)/1 system-ui, sans-serif !important;
  text-overflow: ellipsis;
  text-shadow: 0 2px 3px #000 !important;
}

.pinglife-video-xp .pinglife-video-xp-track {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1244 / 90;
  overflow: visible !important;
  border-radius: 0 !important;
  background: url("../../assets/avatars/common-xp-bar.webp?v=1") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

.pinglife-video-xp .pinglife-video-xp-track > span {
  position: absolute !important;
  z-index: 1;
  left: 3.25% !important;
  top: 24% !important;
  display: block !important;
  width: 89.2% !important;
  height: 50% !important;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, #080b10, #171b20 52%, #05070a);
  box-shadow: inset 0 1px 2px #000, inset 0 -1px 1px rgba(255, 255, 255, .08);
}

.pinglife-video-xp .pinglife-video-xp-track > span > em {
  display: block !important;
  height: 100% !important;
  min-width: 2px;
  margin: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, #fff, #dae3eb 45%, #aebbc7 100%) !important;
  box-shadow: 0 0 7px rgba(235, 246, 255, .82) !important;
  transition: width 240ms ease;
}

.pinglife-video-currency {
  position: relative !important;
  display: block !important;
  justify-self: end !important;
  width: clamp(126px, 38vw, 150px) !important;
  min-width: 0 !important;
  margin: -4px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f4f7fa !important;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .48));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pinglife-video-currency > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.pinglife-video-currency > span {
  position: absolute;
  z-index: 1;
  left: 42%;
  top: 50%;
  width: 49%;
  display: grid;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
}

.pinglife-video-currency b {
  overflow: hidden;
  color: #fff;
  font: 900 clamp(10px, 2.8vw, 14px)/1 system-ui, sans-serif;
  text-overflow: ellipsis;
  text-shadow: 0 2px 3px #000;
  white-space: nowrap;
}

.pinglife-video-currency small {
  margin-top: 2px;
  color: #cbd2d9;
  font: 800 clamp(5px, 1.35vw, 7px)/1 system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}

.pinglife-video-currency:active {
  transform: scale(.98);
}

@media (max-width: 600px) {
  .pinglife-video-player-hud {
    left: max(4px, env(safe-area-inset-left)) !important;
    width: calc(100vw - max(4px, env(safe-area-inset-left))) !important;
    max-width: none !important;
    grid-template-columns: clamp(76px, 22vw, 96px) minmax(0, 1fr) !important;
    column-gap: clamp(5px, 1.4vw, 7px) !important;
  }

  .pinglife-video-currency {
    margin-right: -1px !important;
  }
}

.pinglife-video-profile-frame > .pinglife-avatar-frame,
.home-game-avatar > .pinglife-avatar-frame,
.home-v1-avatar > .pinglife-avatar-frame,
.home-pc-profile-face > .pinglife-avatar-frame,
.fftt-hero-photo > .pinglife-avatar-frame {
  width: 100%;
  height: 100%;
}

.home-v1-avatar {
  overflow: visible;
  border-color: transparent !important;
  background: transparent !important;
}

.home-wow-profile-head > .pinglife-avatar-frame {
  width: 62px;
}

.club-public-member-row > .pinglife-avatar-frame {
  flex: 0 0 52px;
  width: 52px;
}

.club-hof-slot > .pinglife-avatar-frame {
  width: 68px;
  margin-inline: auto;
}

.club-record-card > .pinglife-avatar-frame {
  grid-row: 1 / span 3;
  width: 54px;
}

.ranking-row > .pinglife-avatar-frame {
  width: 44px;
}

@media (max-width: 380px) {
  .ranking-row > .pinglife-avatar-frame { width: 38px; }
}