/* ============================================================
   PLAYER CARD — frame-image based (Common / Epic / Legendary / Mystic)
   The official frame PNG sits on top; player art + background sit
   behind it (center is empty/dark for now — real art added later).
   Card matches the frame aspect ratio: 1920 x 2698  →  400 x 562.
   ============================================================ */

.pcard-fit {
  --pcard-scale: 1;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --hover: 0;
  width: calc(400px * var(--pcard-scale));
  height: calc(562px * var(--pcard-scale));
  flex: none;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
/* SCALE — sized box, scaled from its top-left so the wrapper box collapses
   correctly. No rotation here. */
.pcard-fit .pcard {
  position: relative;
  transform: scale(var(--pcard-scale));
  transform-origin: top left;
}
/* TILT — rotates around the card's own center, so the 4 corners shift
   evenly. Lift is small so the card stays anchored. */
.pcard-fit .pcard > .pcard__tilt,
.pcard-fit .pcard {
  /* placeholder rule kept for spec cohesion */
}
.pcard__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform:
    translate3d(0, calc(var(--hover, 0) * -4px), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transition: transform 0s;
  will-change: transform;
}
.pcard-fit--interactive .pcard {
  transition: filter 0.25s ease;
}
.pcard-fit--interactive:hover .pcard {
  filter:
    drop-shadow(0 22px 55px rgba(0, 0, 0, 0.75))
    drop-shadow(0 18px 32px rgba(232, 118, 44, 0.18));
}

.pcard {
  position: relative;
  width: 400px;
  height: 562px;
  font-family: var(--font-mono);
  background: transparent;
  isolation: isolate;
  filter: drop-shadow(0 22px 55px rgba(0, 0, 0, 0.75));
  will-change: transform;
}
/* Mask every visible layer (bg, player, text) inside .pcard__tilt to the
   frame silhouette so nothing bleeds outside the card outline. The clipPath
   is inlined in index.html / leaderboard.html as #card-mask. */
.pcard__tilt {
  -webkit-clip-path: url(#card-mask);
          clip-path: url(#card-mask);
}

/* cursor-following shine — sits above the frame for premium foil feel */
.pcard__shine {
  --mx: 50%;
  --my: 50%;
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: calc(var(--hover, 0) * 0.75);
  background:
    radial-gradient(circle 240px at var(--mx) var(--my),
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.10) 28%,
      transparent 60%);
  mix-blend-mode: overlay;
  transition: opacity 0.25s ease;
}
/* legendary / mystic: shine carries a hint of rainbow as it moves */
.pcard--legendary .pcard__shine,
.pcard--mystic .pcard__shine {
  background:
    radial-gradient(circle 280px at var(--mx) var(--my),
      rgba(255, 255, 255, 0.35) 0%,
      rgba(155, 123, 255, 0.18) 24%,
      rgba(91, 200, 247, 0.14) 40%,
      transparent 62%);
}

/* center art area — sits behind the frame window. Holds 3 stacked layers:
     0 .pcard__bg      stadium photo backdrop (live)
     1 .pcard__player  player image cutout (added in a later pass)
     2 .pcard__text    X-extracted text overlay (added in a later pass)
   Each layer is positioned absolutely with its own z-index inside the art slot. */
.pcard__art {
  position: absolute;
  inset: 14px;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 85% 60% at 50% 36%, #16131e 0%, #0a0810 78%);
}
/* fallback for the legacy `.pcard__art img` direct-child PFP (confirm screen) */
.pcard__art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Layer 0 — stadium background. Picked by team via data-team-bg on .pcard:
     "solana"    → bg-solana.png   (SEC default — purple)
     "solflare"  → bg-solflare.png (orange sunset)
     "superteam" → bg-superteam.png (blue) — any Superteam
   Fallback is the original bg-stadium.png so older mocks still render. */
.pcard__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0a0810;
  background-image: url('../assets/cards/bg-superteam.png');
  background-position: center 32%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(0.95) contrast(1.05);
}
.pcard[data-team-bg="solana"]   .pcard__bg { background-image: url('../assets/cards/bg-solana.png'); }
.pcard[data-team-bg="solflare"] .pcard__bg { background-image: url('../assets/cards/bg-solflare.png'); }
.pcard[data-team-bg="superteam"].pcard__bg,
.pcard[data-team-bg="superteam"] .pcard__bg { background-image: url('../assets/cards/bg-superteam.png'); }

/* Layer 1 — player image cutout. Wired up but empty until art arrives. */
.pcard__player {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.pcard__player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Layer 2 — text overlay (handle, position, stats once we have X data). */
.pcard__text {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Team sticker — circular holographic badge anchored to the player area.
   Position matches the Simon reference: upper-left third of the card window.
   Selector is intentionally over-specific to win against `.pcard__art > img`. */
.pcard__art > img.pcard__sticker {
  position: absolute;
  left: 5.5%;
  top: 32%;
  width: 26%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  /* gentle bob so the holo catches light differently as the card tilts */
  animation: sticker-bob 6s ease-in-out infinite;
}
@keyframes sticker-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-2px) rotate(1deg); }
}

/* the official frame PNG, painted on top of the art */
.pcard__frame-img {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/* ---------- Card back (used in the reveal flip) ---------- */
.pcard-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(232, 118, 44, 0.12), transparent 60%),
    repeating-linear-gradient(45deg, rgba(242, 227, 194, 0.03) 0 2px, transparent 2px 14px),
    var(--metal-brush);
  border: 8px solid #20242c;
  display: grid;
  place-items: center;
}
.pcard-back .crest {
  text-align: center;
  font-family: var(--font-display);
  color: rgba(242, 227, 194, 0.8);
}
.pcard-back .crest .crown { font-size: 34px; display: block; }
.pcard-back .crest .sec { font-size: 44px; letter-spacing: 0.1em; }
.pcard-back .crest .sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.5em;
  color: var(--cream-dim);
  margin-top: 6px;
}