/* Holographic profile card (adapted from React Bits ProfileCard, MIT).
   leaderboard.trade retheme: variables scoped to the wrapper (not :root),
   Prismatic foil with flat white identity, DS radius, width-driven sizing so the
   card fits a grid column instead of claiming 80svh. */

.pc-card-wrapper {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-top: 0.5;
  --pointer-from-left: 0.5;
  --card-opacity: 0;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --background-x: 50%;
  --background-y: 50%;
  --grain: none;
  --icon: none;
  --behind-glow-color: color-mix(in srgb, var(--prism-color-light-cyan, #83f4ff) 24%, transparent);
  --behind-glow-size: 50%;
  --inner-gradient: none;
  --sunpillar-1: var(--prism-color-light-ice, #8dcfff);
  --sunpillar-2: var(--prism-color-light-cyan, #83f4ff);
  --sunpillar-3: var(--prism-color-light-mint, #bef7d3);
  --sunpillar-4: var(--prism-color-light-cream, #fff1bb);
  --sunpillar-5: var(--prism-color-light-amber, #ffc181);
  --sunpillar-6: var(--prism-color-light-coral, #ff866b);
  --sunpillar-clr-1: var(--sunpillar-1);
  --sunpillar-clr-2: var(--sunpillar-2);
  --sunpillar-clr-3: var(--sunpillar-3);
  --sunpillar-clr-4: var(--sunpillar-4);
  --sunpillar-clr-5: var(--sunpillar-5);
  --sunpillar-clr-6: var(--sunpillar-6);
  --card-radius: var(--prism-radius-24, 24px);

  perspective: 500px;
  transform: translate3d(0, 0, 0.1px);
  position: relative;
  touch-action: pan-y;
  width: 100%;
  max-width: 388px;
}

.pc-behind {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    var(--behind-glow-color) 0%,
    transparent var(--behind-glow-size)
  );
  filter: blur(50px) saturate(1.1);
  opacity: calc(0.8 * var(--card-opacity));
  transition: opacity 200ms ease;
}

.pc-card-wrapper:hover,
.pc-card-wrapper.active {
  --card-opacity: 1;
}

.pc-card {
  width: 100%;
  aspect-ratio: 0.718;
  display: grid;
  border-radius: var(--card-radius);
  position: relative;
  background-blend-mode: color-dodge, normal, normal, normal;
  box-shadow: 0 0 0 1px var(--prism-color-border-subtle, #282e38),
    rgba(0, 0, 0, 0.8) calc((var(--pointer-from-left) * 10px) - 3px)
    calc((var(--pointer-from-top) * 20px) - 6px) 20px -5px;
  transition: transform 1s ease;
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  background: var(--prism-color-bg-canvas, #000);
  backface-visibility: hidden;
  overflow: hidden;
}

.pc-card:hover,
.pc-card-shell.active .pc-card {
  transition: none;
  transform: translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
}

.pc-card-shell.entering .pc-card {
  transition: transform 180ms ease-out;
}

.pc-card-shell {
  position: relative;
  z-index: 1;
}

.pc-card * {
  display: grid;
  grid-area: 1/-1;
  border-radius: var(--card-radius);
  pointer-events: none;
}

.pc-inside {
  inset: 0;
  position: absolute;
  background-image: var(--inner-gradient);
  background-color: rgba(0, 0, 0, 0.9);
  transform: none;
}

.pc-shine {
  mask-image: var(--icon);
  mask-mode: luminance;
  mask-repeat: repeat;
  /* tile the logo mark: 150% showed barely one repeat, 38% was a swarm */
  mask-size: 60%;
  mask-position: top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));
  transition: filter 180ms ease, opacity 180ms ease;
  filter: brightness(0.8) contrast(1.15);
  opacity: 0.36;
  animation: holo-bg 18s linear infinite;
  animation-play-state: running;
  mix-blend-mode: screen;
}

.pc-shine,
.pc-shine::after {
  --space: 5%;
  --angle: -45deg;
  transform: translate3d(0, 0, 1px);
  overflow: hidden;
  z-index: 3;
  background: transparent;
  background-size: cover;
  background-position: center;
  background-image:
    linear-gradient(
      90deg,
      var(--sunpillar-clr-1) 0%,
      var(--sunpillar-clr-2) 12%,
      var(--sunpillar-clr-3) 38%,
      var(--sunpillar-clr-4) 60%,
      var(--sunpillar-clr-5) 83%,
      var(--sunpillar-clr-6) 100%
    ),
    repeating-linear-gradient(
      var(--angle),
      #080a0d 0%,
      #ffffff 3.8%,
      var(--prism-color-light-ice, #8dcfff) 4.5%,
      #ffffff 5.2%,
      #080a0d 10%,
      #080a0d 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%,
      hsla(0, 0%, 0%, 0.15) 20%,
      hsla(0, 0%, 0%, 0.25) 120%
    );
  background-position:
    0 var(--background-y),
    var(--background-x) var(--background-y),
    center;
  background-blend-mode: color, hard-light;
  background-size:
    100% 100%,
    300% 300%,
    200% 200%;
  background-repeat: repeat;
}

.pc-shine::before,
.pc-shine::after {
  content: '';
  background-position: center;
  background-size: cover;
  grid-area: 1/1;
  opacity: 0;
  transition: opacity 180ms ease;
}

.pc-card:hover .pc-shine,
.pc-card-shell.active .pc-shine {
  filter: brightness(1) contrast(1.2);
  opacity: 0.78;
  animation-play-state: paused;
}

.pc-card:hover .pc-shine::before,
.pc-card-shell.active .pc-shine::before,
.pc-card:hover .pc-shine::after,
.pc-card-shell.active .pc-shine::after {
  opacity: 1;
}

.pc-shine::before {
  background-image:
    linear-gradient(
      45deg,
      var(--sunpillar-4),
      var(--sunpillar-5),
      var(--sunpillar-6),
      var(--sunpillar-1),
      var(--sunpillar-2),
      var(--sunpillar-3)
    ),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 70%) 0%, hsla(0, 0%, 30%, 0.2) 90%),
    var(--grain);
  background-size:
    250% 250%,
    100% 100%,
    220px 220px;
  background-position:
    var(--pointer-x) var(--pointer-y),
    center,
    calc(var(--pointer-x) * 0.01) calc(var(--pointer-y) * 0.01);
  background-blend-mode: color-dodge;
  filter: brightness(calc(2 - var(--pointer-from-center))) contrast(calc(var(--pointer-from-center) + 2))
    saturate(calc(0.5 + var(--pointer-from-center)));
  mix-blend-mode: luminosity;
}

.pc-shine::after {
  background-position:
    0 var(--background-y),
    calc(var(--background-x) * 0.4) calc(var(--background-y) * 0.5),
    center;
  background-size:
    200% 300%,
    700% 700%,
    100% 100%;
  mix-blend-mode: soft-light;
  filter: brightness(0.8) contrast(1.5);
}

.pc-glare {
  transform: translate3d(0, 0, 1.1px);
  overflow: hidden;
  /* neutral specular sweep — no green tint */
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 82%) 12%,
    hsla(0, 0%, 28%, 0.8) 90%
  );
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.2);
  z-index: 4;
}

/* NO mix-blend-mode here: `luminosity` was what greyscaled the X avatar. The holo layers still
   pass over it (shine z-3, glare z-4), which reads as sheen without draining the colour. */
.pc-avatar-content {
  overflow: visible;
  transform: translateZ(2);
  backface-visibility: hidden;
}

/* Avatar sits FLUSH AT THE TOP and is forced square (X serves 400x400), so the name below it
   always lands in the same place regardless of what the source image is. */
.pc-avatar-content .avatar {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 0;
  transform-origin: 50% 0;
  transform: translateX(calc(-50% + (var(--pointer-from-left) - 0.5) * 6px)) translateZ(0)
    scaleY(calc(1 + (var(--pointer-from-top) - 0.5) * 0.02)) scaleX(calc(1 + (var(--pointer-from-left) - 0.5) * 0.01));
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 120ms ease-out;
}

.pc-avatar-content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: none;
  pointer-events: none;
}

.pc-user-info {
  position: absolute;
  --ui-inset: 16px;
  --ui-radius-bias: 6px;
  bottom: var(--ui-inset);
  left: var(--ui-inset);
  right: var(--ui-inset);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--prism-color-bg-raised, #101318) 92%, transparent);
  backdrop-filter: blur(15px);
  border: 1px solid var(--prism-color-border-subtle, #282e38);
  border-radius: calc(max(0px, var(--card-radius) - var(--ui-inset) + var(--ui-radius-bias)));
  padding: 12px 14px;
  pointer-events: auto;
}

.pc-user-details {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pc-mini-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.pc-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.pc-user-text {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pc-handle {
  display: block;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--prism-color-text-primary, #fff);
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-status {
  display: block;
  font-size: 12px;
  color: var(--prism-color-text-secondary, #b9c1cc);
  line-height: 1;
}

.pc-contact-btn {
  border: 1px solid var(--prism-color-border-subtle, #282e38);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--prism-color-text-primary, #fff);
  flex-shrink: 0;
  margin-left: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.pc-contact-btn:hover {
  border-color: var(--prism-color-border-control, #646c79);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.pc-contact-btn:focus-visible {
  outline: 2px solid var(--prism-color-focus-ring, #83f4ff);
  outline-offset: 3px;
}

.pc-content:not(.pc-avatar-content) {
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  position: relative;
  transform: translate3d(
    calc(var(--pointer-from-left) * -6px + 3px),
    calc(var(--pointer-from-top) * -6px + 3px),
    0.1px
  );
  z-index: 5;
  mix-blend-mode: normal;
}

/* Name block sits BELOW the avatar, in the band between the image and the user-info bar.
   Bottom-anchored (not top:) so it can never collide with that bar. */
.pc-details {
  width: 100%;
  position: absolute;
  top: auto;
  bottom: 94px;
  display: flex;
  flex-direction: column;
}

/* sized to the band between the avatar and the user-info bar (~70px) — the old 2.4em was set
   for a top-of-card name with the whole card to spill into */
.pc-details h3 {
  display: block;
  font-weight: 600;
  margin: 0;
  font-size: 28px;
  line-height: 32px;
  color: var(--prism-color-text-primary, #fff);
  padding-inline: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-details p {
  display: block;
  font-weight: 400;
  position: relative;
  top: 0;
  white-space: nowrap;
  font-size: 14px;
  font-family: var(--font-mono);
  margin: 0 auto;
  width: min-content;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 16px;
  color: var(--prism-color-light-ice, #8dcfff);
}

@media (prefers-reduced-motion: reduce) {
  .pc-card, .pc-card:hover, .pc-card-shell.active .pc-card,
  .pc-content:not(.pc-avatar-content) { transform: none; transition: none; }
  .pc-avatar-content .avatar { transform: translateX(-50%); transition: none; }
  .pc-shine, .pc-shine::before, .pc-shine::after { animation: none; transition: none; }
  .pc-behind, .pc-contact-btn { transition: none; }
  .pc-contact-btn:hover { transform: none; }
}

@keyframes holo-bg {
  0% {
    background-position:
      0 var(--background-y),
      0 0,
      center;
  }

  100% {
    background-position:
      0 var(--background-y),
      90% 90%,
      center;
  }
}

@media (max-width: 480px) {
  .pc-card-wrapper {
    max-width: 320px;
  }

  /* the user-info bar is shorter here (smaller inset + mini avatar), so the band moves up with it */
  .pc-details {
    bottom: 70px;
  }

  .pc-details h3 {
    font-size: min(3.5svh, 2em);
  }

  .pc-details p {
    font-size: 12px;
  }

  .pc-user-info {
    --ui-inset: 12px;
    padding: 8px 10px;
  }

  .pc-mini-avatar {
    width: 28px;
    height: 28px;
  }

  .pc-user-details {
    gap: 8px;
  }

  .pc-handle {
    font-size: 12px;
  }

  .pc-status {
    font-size: 10px;
  }

  .pc-contact-btn {
    padding: 6px 12px;
    font-size: 11px;
    border-radius: 50px;
  }
}