/* ClipMyGame Player Profile Card
   Keep card, player render, gear overlay, and card animation work here. */

:root {
  --skin-primary: #36a9ff;
  --skin-secondary: #8de8ff;
  --skin-accent: #f4c86a;
  --skin-dark: #071a33;
  --skin-jersey: #123b70;
  --gear-helmet: #f8fafc;
  --gear-jersey: #123b70;
  --gear-gloves: #111827;
  --gear-pants: #111827;
  --gear-socks: #f8fafc;
  --jersey-skin-accent: #f8fafc;
  --jersey-skin-trim: #94a3b8;
  --sock-skin-accent: #123b70;
  --sock-skin-trim: #f8fafc;
  --stick-color: #9ca3af;
  --stick-accent: #36a9ff;
  --stick-trim: #f8fafc;
  --player-render-url: url("../assets/player/cmg-signature-athlete-v1.png");
  --player-render-width: min(330px, 88%);
  --player-render-height: 342px;
  --player-render-top: 9%;
  --player-render-scale: 1.08;
  --player-render-shadow-width: 218px;
  --player-render-shadow-bottom: -2px;
  --player-render-glow-transparency: 72%;
  --player-render-tint-opacity: 0.42;
  --player-render-stick-opacity: 0.52;
  --player-number-x: 48%;
  --player-number-y: 33%;
  --player-number-size: 30px;
  --player-number-rotate: 7deg;
  --player-number-opacity: 0.48;
  --player-mask-helmet: polygon(41% 2%, 62% 2%, 69% 24%, 37% 25%);
  --player-mask-jersey: polygon(4% 16%, 76% 10%, 87% 54%, 48% 70%, 11% 53%);
  --player-mask-gloves: polygon(0 30%, 30% 30%, 36% 61%, 17% 66%, 3% 49%, 32% 62%, 53% 58%, 51% 74%, 35% 74%);
  --player-mask-pants: polygon(18% 56%, 70% 53%, 77% 79%, 26% 81%);
  --player-mask-socks: polygon(13% 72%, 39% 71%, 42% 94%, 5% 94%, 59% 70%, 82% 72%, 92% 94%, 62% 96%);
  --player-mask-stick: polygon(24% 40%, 29% 38%, 95% 96%, 89% 98%);
}

:root[data-card-type="hockey_goalie"] .cmg-card {
  --player-render-width: clamp(448px, 58vw, 585px);
  --player-render-top: clamp(24px, 2.6vw, 46px);
  --player-render-scale: 1.28;
}

:root[data-card-type="soccer"] .cmg-card,
:root[data-card-type="soccer_player"] .cmg-card {
  --player-render-width: clamp(310px, 38vw, 385px);
  --player-render-top: clamp(2px, 2.2vw, 28px);
  --player-render-scale: 0.98;
}

:root[data-card-type="basketball"] .cmg-card,
:root[data-card-type="basketball_player"] .cmg-card {
  --player-render-width: clamp(340px, 42vw, 425px);
  --player-render-top: clamp(0px, 1.8vw, 24px);
  --player-render-scale: 1.06;
}

@media (max-width: 700px) {
  :root[data-card-type="hockey_goalie"] .cmg-card {
    --player-render-width: clamp(300px, 81vw, 375px);
    --player-render-top: clamp(-32px, -5.2vw, -16px);
    --player-render-scale: .99;
  }

  :root[data-card-type="soccer"] .cmg-card,
  :root[data-card-type="soccer_player"] .cmg-card {
    --player-render-width: clamp(228px, 61vw, 280px);
    --player-render-top: clamp(0px, 0vw, 0px);
    --player-render-scale: 0.84;
  }

  :root[data-card-type="basketball"] .cmg-card,
  :root[data-card-type="basketball_player"] .cmg-card {
    --player-render-width: clamp(245px, 67vw, 304px);
    --player-render-top: clamp(0px, 0vw, 0px);
    --player-render-scale: 0.89;
  }
}

.cmg-card {
  position: relative;
  width: min(420px, 88vw);
  aspect-ratio: 2.5 / 3.5;
  border-radius: 22px;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--skin-primary), transparent 68%), transparent 34%),
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.22), transparent 21%),
    linear-gradient(145deg, color-mix(in srgb, var(--skin-dark), #0b1b37 18%), rgba(2, 8, 19, 0.98) 64%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 14px);
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform 140ms ease-out, border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease;
  animation: cardEnter 700ms 150ms ease both, cardIdle 7.5s 900ms ease-in-out infinite;
  border-color: rgba(207, 232, 255, 0.42);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.52),
    0 0 68px color-mix(in srgb, var(--skin-primary), transparent 72%),
    0 0 22px color-mix(in srgb, var(--skin-accent), transparent 84%),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -28px 54px rgba(0, 0, 0, 0.34);
}

.cmg-card:hover {
  border-color: color-mix(in srgb, var(--skin-accent), transparent 22%);
  filter: saturate(1.08);
  box-shadow:
    0 34px 95px rgba(0, 0, 0, 0.58),
    0 0 86px color-mix(in srgb, var(--skin-primary), transparent 64%),
    0 0 34px color-mix(in srgb, var(--skin-accent), transparent 72%),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 -30px 56px rgba(0, 0, 0, 0.36);
}

.cmg-card::after {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 17px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 16% 82%, rgba(255, 255, 255, 0.10)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13), transparent 18% 82%, rgba(255, 255, 255, 0.08)) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 24% 76%, rgba(0, 0, 0, 0.20)) right / 1px 100% no-repeat;
  opacity: 0.86;
}

.cmg-card__grid,
.cmg-card__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cmg-card__grid {
  z-index: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(141, 232, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141, 232, 255, 0.10) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--skin-accent), transparent 86%), transparent 42%);
  background-size: 32px 32px, 32px 32px, auto;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  animation: none;
}

.cmg-card__shine {
  z-index: 4;
  background:
    linear-gradient(115deg, transparent 26%, rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.30) 43%, rgba(141, 232, 255, 0.10) 48%, transparent 58%),
    repeating-linear-gradient(35deg, transparent 0 20px, rgba(255, 255, 255, 0.035) 21px 22px, transparent 23px 42px);
  transform: translateX(-130%);
  animation: cardShine 7.2s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.76;
}

.cmg-card__rank,
.cmg-card__level,
.cmg-card__identity,
.cmg-card__xp {
  position: relative;
  z-index: 2;
}

.cmg-card__rank {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--skin-accent), transparent 34%);
  border-radius: 999px;
  color: var(--skin-accent);
  font-family: var(--cmg-font-head);
  font-size: 13px;
  font-weight: 900;
  text-transform: none;
  background: rgba(3, 9, 22, 0.46);
  box-shadow: 0 0 22px color-mix(in srgb, var(--skin-accent), transparent 74%), inset 0 1px 0 rgba(255,255,255,0.14);
}

.cmg-card__level {
  position: absolute;
  top: 22px;
  right: 22px;
  text-align: right;
  color: var(--skin-accent);
  font-family: var(--cmg-font-head);
  text-transform: none;
}

.cmg-card__level span {
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cmg-card__level strong {
  display: block;
  font-size: 64px;
  line-height: 0.85;
  text-shadow: 0 0 18px color-mix(in srgb, var(--skin-accent), transparent 54%);
}

.cmg-card__avatar {
  position: absolute;
  inset: 35% auto auto 50%;
  z-index: 1;
  display: grid;
  width: 96px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(141, 232, 255, 0.42);
  border-radius: 999px;
  background: color-mix(in srgb, var(--skin-primary), transparent 88%);
  color: var(--skin-secondary);
  font-family: var(--cmg-font-head);
  font-size: 32px;
  font-weight: 900;
  transform: translate(-50%, -50%) translateZ(28px);
  box-shadow: inset 0 0 30px rgba(141, 232, 255, 0.12), 0 0 32px rgba(54, 169, 255, 0.16);
  animation: avatarHum 3.8s ease-in-out infinite;
  opacity: 0.18;
}

.cmg-player-render {
  position: absolute;
  inset: 18% auto auto 50%;
  z-index: 3;
  width: 222px;
  height: 285px;
  transform: translateX(-50%) translateZ(36px);
  transform-style: preserve-3d;
  animation: playerFloat 2.9s ease-in-out infinite;
}

.cmg-player-render__shadow {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 166px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.44), transparent 70%);
  transform: translateX(-50%);
  animation: playerShadow 2.9s ease-in-out infinite;
}

.cmg-player-render__body {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 140px;
  height: 236px;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}

.cmg-player-render__helmet {
  position: absolute;
  left: 50%;
  top: 0;
  width: 66px;
  height: 54px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 44% 44% 34% 34%;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.72), transparent 18%),
    linear-gradient(145deg, color-mix(in srgb, var(--gear-helmet), white 18%), var(--gear-helmet) 48%, color-mix(in srgb, var(--gear-helmet), #020617 40%));
  box-shadow: inset -10px -14px 18px rgba(0, 0, 0, 0.34), 0 0 22px color-mix(in srgb, var(--gear-helmet), transparent 74%);
  transform: translateX(-50%);
}

.cmg-player-render__helmet::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 6px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.cmg-player-render__visor {
  position: absolute;
  left: 50%;
  top: 23px;
  width: 54px;
  height: 17px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(141, 232, 255, 0.20));
  transform: translateX(-50%);
}

.cmg-player-render__shoulders {
  position: absolute;
  left: 50%;
  top: 46px;
  width: 132px;
  height: 50px;
  border-radius: 32px 32px 14px 14px;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,0.20), transparent 22%),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,0.16), transparent 22%),
    linear-gradient(135deg, color-mix(in srgb, var(--gear-jersey), white 10%), var(--gear-jersey), color-mix(in srgb, var(--gear-jersey), #020617 34%));
  box-shadow: inset -16px -16px 24px rgba(0, 0, 0, 0.24);
  transform: translateX(-50%);
}

.cmg-player-render__torso {
  position: absolute;
  left: 50%;
  top: 58px;
  display: grid;
  width: 96px;
  height: 104px;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--skin-secondary), transparent 58%);
  border-radius: 18px 18px 26px 26px;
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(255,255,255,0.22) 18% 21%, transparent 22% 78%, rgba(255,255,255,0.18) 79% 82%, transparent 83%),
    linear-gradient(180deg, color-mix(in srgb, var(--gear-jersey), white 10%), var(--gear-jersey) 48%, color-mix(in srgb, var(--gear-jersey), #020617 30%));
  box-shadow: inset -16px -16px 24px rgba(0, 0, 0, 0.22), 0 0 28px color-mix(in srgb, var(--skin-primary), transparent 78%);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--cmg-font-head);
  font-size: 34px;
  font-weight: 900;
  transform: translateX(-50%);
}

.cmg-player-render__pants {
  position: absolute;
  left: 50%;
  top: 148px;
  width: 88px;
  height: 42px;
  border-radius: 16px 16px 20px 20px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--gear-pants), white 10%), var(--gear-pants), #020617);
  box-shadow: inset -12px -12px 16px rgba(0,0,0,0.30);
  transform: translateX(-50%);
}

.cmg-player-render__arm,
.cmg-player-render__leg,
.cmg-player-render__skate,
.cmg-player-render__glove,
.cmg-player-render__stick {
  position: absolute;
  background: linear-gradient(145deg, var(--gear-jersey), color-mix(in srgb, var(--gear-jersey), #020617 36%));
  box-shadow: inset -8px -8px 14px rgba(0, 0, 0, 0.24);
}

.cmg-player-render__arm {
  top: 70px;
  width: 29px;
  height: 84px;
  border-radius: 17px;
  transform-origin: 50% 12%;
}

.cmg-player-render__arm--left {
  left: 4px;
  transform: rotate(23deg);
  animation: leftArm 1.8s ease-in-out infinite;
}

.cmg-player-render__arm--right {
  right: 4px;
  transform: rotate(-26deg);
  animation: rightArm 1.8s ease-in-out infinite;
}

.cmg-player-render__glove {
  top: 134px;
  z-index: 6;
  width: 33px;
  height: 30px;
  border-radius: 14px 14px 10px 10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.16), transparent 30%),
    linear-gradient(145deg, var(--gear-gloves), color-mix(in srgb, var(--gear-gloves), #020617 42%));
}

.cmg-player-render__glove--left {
  left: 2px;
  transform: rotate(16deg);
}

.cmg-player-render__glove--right {
  right: 1px;
  transform: rotate(-20deg);
}

.cmg-player-render__leg {
  top: 184px;
  width: 30px;
  height: 66px;
  border-radius: 12px 12px 18px 18px;
  transform-origin: 50% 10%;
  background:
    linear-gradient(180deg, var(--gear-pants) 0 28%, var(--gear-socks) 29% 70%, #111827 71%);
}

.cmg-player-render__leg--left {
  left: 38px;
  transform: rotate(10deg);
  animation: leftLeg 1.8s ease-in-out infinite;
}

.cmg-player-render__leg--right {
  right: 38px;
  transform: rotate(-10deg);
  animation: rightLeg 1.8s ease-in-out infinite;
}

.cmg-player-render__skate {
  top: 248px;
  width: 50px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d9f5ff, #526375);
}

.cmg-player-render__skate--left {
  left: 24px;
  transform: rotate(-8deg);
}

.cmg-player-render__skate--right {
  right: 24px;
  transform: rotate(8deg);
}

.cmg-player-render__stick {
  left: 158px;
  top: 76px;
  z-index: 5;
  width: 8px;
  height: 178px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--stick-accent) 0 10%, var(--stick-color) 11% 72%, #151b23);
  transform: rotate(-25deg);
  transform-origin: top;
  animation: stickReady 1.8s ease-in-out infinite;
}

.cmg-player-render__stick::after {
  content: "";
  position: absolute;
  left: -52px;
  bottom: -6px;
  width: 68px;
  height: 14px;
  border-radius: 999px 4px 4px 999px;
  background: linear-gradient(90deg, var(--stick-color), #111827);
  transform: rotate(12deg);
}

.cmg-player-render {
  inset: var(--player-render-top) auto auto 50%;
  z-index: 1;
  width: var(--player-render-width);
  height: var(--player-render-height);
  pointer-events: none;
}

.cmg-player-render::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11%;
  width: 72%;
  height: 76%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse, rgba(255, 255, 255, 0.16), transparent 42%),
    radial-gradient(ellipse, color-mix(in srgb, var(--skin-primary), transparent 76%), transparent 64%);
  filter: blur(10px);
  transform: translateX(-50%) translateZ(4px);
}

.cmg-player-render__shadow {
  bottom: var(--player-render-shadow-bottom);
  width: var(--player-render-shadow-width);
}

.cmg-player-render__image,
.cmg-player-render__tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.cmg-player-render__image {
  z-index: 2;
  filter:
    contrast(1.04)
    saturate(1.04)
    drop-shadow(0 26px 26px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 26px color-mix(in srgb, var(--skin-primary), transparent var(--player-render-glow-transparency)));
  transform: translateZ(24px) scale(var(--player-render-scale));
}

.cmg-player-render__tint {
  display: none;
}

.cmg-player-render__tint--helmet {
  background: var(--gear-helmet);
  clip-path: var(--player-mask-helmet);
}

.cmg-player-render__tint--jersey {
  background: var(--gear-jersey);
  clip-path: var(--player-mask-jersey);
}

.cmg-player-render__tint--gloves {
  background: var(--gear-gloves);
  clip-path: var(--player-mask-gloves);
}

.cmg-player-render__tint--pants {
  background: var(--gear-pants);
  clip-path: var(--player-mask-pants);
}

.cmg-player-render__tint--socks {
  background: var(--gear-socks);
  clip-path: var(--player-mask-socks);
}

.cmg-player-render__tint--stick {
  background: linear-gradient(135deg, var(--stick-accent), var(--stick-color));
  clip-path: var(--player-mask-stick);
  opacity: var(--player-render-stick-opacity);
}

.cmg-player-render__detail,
.cmg-player-render__helmet-extra {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.cmg-player-render__detail {
  display: none;
}

.cmg-player-render__detail--jersey {
  clip-path: var(--player-mask-jersey);
  opacity: 0.58;
}

.cmg-player-render__detail--socks {
  clip-path: var(--player-mask-socks);
  opacity: 0.68;
}

[data-jersey-skin="clean"] .cmg-player-render__detail--jersey,
[data-sock-skin="clean"] .cmg-player-render__detail--socks {
  opacity: 0;
}

[data-jersey-skin="classic-stripes"] .cmg-player-render__detail--jersey {
  background:
    linear-gradient(90deg, transparent 0 23%, var(--jersey-skin-trim) 24% 27%, transparent 28% 72%, var(--jersey-skin-trim) 73% 76%, transparent 77%),
    linear-gradient(180deg, transparent 0 58%, var(--jersey-skin-accent) 59% 63%, transparent 64% 72%, var(--jersey-skin-trim) 73% 76%, transparent 77%);
}

[data-jersey-skin="shoulder-block"] .cmg-player-render__detail--jersey {
  background:
    radial-gradient(ellipse at 27% 25%, var(--jersey-skin-accent) 0 16%, transparent 17%),
    radial-gradient(ellipse at 73% 25%, var(--jersey-skin-accent) 0 16%, transparent 17%),
    linear-gradient(180deg, transparent 0 68%, var(--jersey-skin-trim) 69% 73%, transparent 74%);
}

[data-jersey-skin="gold-trim"] .cmg-player-render__detail--jersey {
  background:
    linear-gradient(90deg, transparent 0 18%, var(--jersey-skin-accent) 19% 22%, transparent 23% 77%, var(--jersey-skin-accent) 78% 81%, transparent 82%),
    linear-gradient(180deg, transparent 0 56%, var(--jersey-skin-accent) 57% 61%, transparent 62%, var(--jersey-skin-trim) 74% 78%, transparent 79%);
}

[data-jersey-skin="storm"] .cmg-player-render__detail--jersey {
  background:
    linear-gradient(135deg, transparent 0 34%, color-mix(in srgb, var(--jersey-skin-accent), transparent 18%) 35% 48%, transparent 49%),
    repeating-linear-gradient(160deg, transparent 0 12px, color-mix(in srgb, var(--jersey-skin-trim), transparent 45%) 13px 15px, transparent 16px 26px);
}

[data-sock-skin="pro-stripes"] .cmg-player-render__detail--socks {
  background: repeating-linear-gradient(180deg, transparent 0 18px, var(--sock-skin-accent) 19px 27px, var(--sock-skin-trim) 28px 32px, transparent 33px 47px);
}

[data-sock-skin="triple-band"] .cmg-player-render__detail--socks {
  background: repeating-linear-gradient(180deg, transparent 0 13px, var(--sock-skin-accent) 14px 18px, transparent 19px 23px, var(--sock-skin-trim) 24px 28px, transparent 29px 43px);
}

[data-sock-skin="alt-color"] .cmg-player-render__detail--socks {
  background:
    linear-gradient(180deg, transparent 0 35%, color-mix(in srgb, var(--sock-skin-accent), transparent 10%) 36% 72%, transparent 73%),
    repeating-linear-gradient(180deg, transparent 0 22px, var(--sock-skin-trim) 23px 27px, transparent 28px 44px);
}

.cmg-player-render__helmet-extra {
  left: 48%;
  top: 8%;
  width: 65px;
  height: 58px;
  opacity: 0;
  transform: translateX(-50%) rotate(4deg);
}

[data-helmet-style="visor"] .cmg-player-render__helmet-extra--visor {
  opacity: 0.86;
  border: 1px solid rgba(232, 244, 253, 0.62);
  border-radius: 45% 45% 34% 34%;
  background: linear-gradient(90deg, rgba(255,255,255,0.42), rgba(141,232,255,0.18), rgba(255,255,255,0.1));
  clip-path: polygon(18% 38%, 88% 32%, 82% 58%, 18% 61%);
  box-shadow: 0 0 18px rgba(141, 232, 255, 0.2);
}

[data-helmet-style="cage"] .cmg-player-render__helmet-extra--cage {
  opacity: 0.82;
  background:
    repeating-linear-gradient(90deg, rgba(236, 248, 255, 0.82) 0 2px, transparent 3px 9px),
    repeating-linear-gradient(0deg, rgba(236, 248, 255, 0.62) 0 2px, transparent 3px 10px);
  clip-path: polygon(19% 35%, 89% 27%, 86% 65%, 22% 70%);
  filter: drop-shadow(0 0 5px rgba(141, 232, 255, 0.22));
}

.cmg-player-render__number {
  position: absolute;
  left: var(--player-number-x);
  top: var(--player-number-y);
  z-index: 4;
  display: grid;
  width: 50px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  color: color-mix(in srgb, var(--gear-jersey), white 72%);
  font-family: var(--cmg-font-head);
  font-size: var(--player-number-size);
  font-weight: 900;
  line-height: 1;
  opacity: var(--player-number-opacity);
  transform: translate(-50%, -50%) rotate(var(--player-number-rotate));
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.cmg-card__identity {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 88px;
}

.cmg-card__identity h1 {
  margin: 0;
  font-family: var(--cmg-font-head);
  font-size: clamp(29px, 5vw, 42px);
  line-height: 1;
  text-transform: none;
}

.cmg-card__identity p {
  margin: 8px 0 0;
  color: var(--cmg-muted);
  font-size: 13px;
}

.cmg-card__share {
  margin-top: 8px;
  border: 1px solid rgba(141, 232, 255, 0.28);
  border-radius: 999px;
  background: rgba(54, 169, 255, 0.12);
  color: var(--cmg-cyan);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
}

.cmg-card__xp {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 24px;
}

.cmg-xp-legend {
  margin: 8px 0 0;
  color: var(--cmg-muted);
  font-size: 10px;
  line-height: 1.35;
}


@media (max-width: 760px) {
  .cmg-card {
    width: min(330px, 86vw);
  }

  .cmg-player-render {
    width: min(286px, 88vw);
    height: 308px;
  }
}

@media (max-width: 980px) {
  .cmg-card {
    width: min(330px, calc(100vw - 44px));
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  :root[data-card-type="hockey_goalie"] .cmg-card {
    --player-render-width: clamp(285px, 77vw, 360px);
    --player-render-top: clamp(-34px, -5vw, -18px);
    --player-render-scale: 0.96;
  }

  :root[data-card-type="soccer"] .cmg-card,
  :root[data-card-type="soccer_player"] .cmg-card {
    --player-render-width: clamp(186px, 23vw, 231px);
    --player-render-top: clamp(0px, 0vw, 0px);
    --player-render-scale: 0.59;
  }

  :root[data-card-type="basketball"] .cmg-card,
  :root[data-card-type="basketball_player"] .cmg-card {
    --player-render-width: clamp(204px, 25vw, 255px);
    --player-render-top: clamp(0px, 0vw, 0px);
    --player-render-scale: 0.64;
  }
}

@media (min-width: 701px) and (max-width: 760px) {
  :root[data-card-type="hockey_goalie"] .cmg-card {
    --player-render-width: clamp(360px, 92vw, 455px);
    --player-render-top: clamp(-35px, -5vw, -18px);
    --player-render-scale: 1.04;
  }

  :root[data-card-type="soccer"] .cmg-card,
  :root[data-card-type="soccer_player"] .cmg-card {
    --player-render-width: clamp(186px, 23vw, 231px);
    --player-render-top: clamp(0px, 0vw, 0px);
    --player-render-scale: 0.59;
  }

  :root[data-card-type="basketball"] .cmg-card,
  :root[data-card-type="basketball_player"] .cmg-card {
    --player-render-width: clamp(204px, 25vw, 255px);
    --player-render-top: clamp(0px, 0vw, 0px);
    --player-render-scale: 0.64;
  }
}

:root[data-card-type="hockey_goalie"] .cmg-card .cmg-player-render,
:root[data-card-type="soccer"] .cmg-card .cmg-player-render,
:root[data-card-type="soccer_player"] .cmg-card .cmg-player-render,
:root[data-card-type="basketball"] .cmg-card .cmg-player-render,
:root[data-card-type="basketball_player"] .cmg-card .cmg-player-render {
  top: var(--player-render-top) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--player-render-width) !important;
  max-width: var(--player-render-width) !important;
  height: var(--player-render-height) !important;
  transform: translateX(-50%) translateZ(36px) !important;
  transform-origin: center bottom !important;
}

:root[data-card-type="hockey_goalie"] .cmg-card .cmg-player-render__image,
:root[data-card-type="soccer"] .cmg-card .cmg-player-render__image,
:root[data-card-type="soccer_player"] .cmg-card .cmg-player-render__image,
:root[data-card-type="basketball"] .cmg-card .cmg-player-render__image,
:root[data-card-type="basketball_player"] .cmg-card .cmg-player-render__image {
  height: 100% !important;
  object-position: center bottom !important;
}


@keyframes cardEnter {
  from { opacity: 0; translate: 0 20px; scale: 0.96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes cardIdle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

@keyframes cardGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 28px, 28px 0; }
}

@keyframes cardShine {
  0%, 54% { transform: translateX(-130%); opacity: 0; }
  65% { opacity: 1; }
  82%, 100% { transform: translateX(130%); opacity: 0; }
}

@keyframes avatarHum {
  0%, 100% { box-shadow: inset 0 0 30px rgba(141, 232, 255, 0.12), 0 0 32px rgba(54, 169, 255, 0.16); }
  50% { box-shadow: inset 0 0 44px rgba(141, 232, 255, 0.2), 0 0 46px rgba(54, 169, 255, 0.28); }
}

@keyframes playerFloat {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 0 -8px; rotate: 1deg; }
}

@keyframes playerShadow {
  0%, 100% { opacity: 0.42; scale: 1; }
  50% { opacity: 0.26; scale: 0.86; }
}

@keyframes leftArm {
  0%, 100% { transform: rotate(23deg); }
  50% { transform: rotate(13deg); }
}

@keyframes rightArm {
  0%, 100% { transform: rotate(-26deg); }
  50% { transform: rotate(-36deg); }
}

@keyframes leftLeg {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(3deg); }
}

@keyframes rightLeg {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(-2deg); }
}

@keyframes stickReady {
  0%, 100% { transform: rotate(-25deg); }
  50% { transform: rotate(-29deg); }
}

@keyframes energyPulse {
  0%, 100% { transform: scale(0.96); opacity: 0.65; }
  50% { transform: scale(1.05); opacity: 1; }
}

@media (max-width: 560px) {
  .cmg-card {
    width: min(330px, calc(100dvw - 44px));
  }
}