/* ============= POKEMON-STYLE PLAYER CARDS ============= */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 36px;
  grid-auto-rows: 1fr;
}
.pcard {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  --glow-opacity: .18;
  --foil-opacity: .16;
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  isolation: isolate;
  font-family: var(--font-body);
  user-select: none;
  filter: saturate(1.02);
}
.pcard:hover {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-6px);
  filter: saturate(1.08) brightness(1.02);
}
.pcard::before {
  content: '';
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 22px;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y),
      rgba(0,229,255,.22) 0%,
      rgba(255,45,149,.16) 24%,
      transparent 58%);
  opacity: var(--glow-opacity);
  filter: blur(20px);
  transition: opacity .25s ease;
}
.pcard:hover::before { opacity: .32; }

/* base frame */
.pcard__frame {
  position: absolute; inset: 0;
  border-radius: 14px;
  padding: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateZ(0);
}
.pcard__frame::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: var(--foil-opacity);
  mix-blend-mode: screen;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.02) 18%,
      rgba(0,229,255,.18) 32%,
      rgba(255,45,149,.2) 48%,
      rgba(255,181,71,.16) 62%,
      rgba(255,255,255,.1) 100%),
    radial-gradient(circle at var(--shine-x) var(--shine-y),
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.08) 18%,
      rgba(0,229,255,.12) 34%,
      transparent 62%),
    repeating-linear-gradient(125deg,
      rgba(255,255,255,.12) 0 2px,
      transparent 2px 8px,
      rgba(255,255,255,.06) 8px 10px,
      transparent 10px 16px);
}

/* common — tan/cream paper */
.pcard--common .pcard__frame {
  background:
    radial-gradient(circle at top, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(180deg, #fdf0bf 0%, #ecd48a 45%, #dfbb69 100%);
  box-shadow:
    0 0 0 3px #2a1a08,
    inset 0 0 0 1px rgba(255,255,255,.28),
    0 14px 30px rgba(0,0,0,.5);
}

/* holo — 90s Miami stripe foil */
.pcard--holo .pcard__frame {
  background:
    linear-gradient(
      118deg,
      #0a0613  0%,  #0a0613 22%,
      #ff2d95 22%,  #ff2d95 32%,
      #ffb547 32%,  #ffb547 42%,
      #00e5ff 42%,  #00e5ff 52%,
      #0a0613 52%,  #0a0613 100%
    );
  box-shadow:
    0 0 0 3px var(--cyan),
    5px 5px 0 var(--pink),
    0 18px 50px rgba(0,229,255,.32),
    0 0 70px rgba(255,45,149,.16);
}
.pcard--holo .pcard__frame::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(
      ellipse at var(--shine-x, 50%) var(--shine-y, 35%),
      rgba(255,255,255,.3) 0%,
      rgba(255,255,255,.06) 38%,
      transparent 65%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.2) 0px,
      rgba(0,0,0,.2) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
  transition: background .06s;
}
/* holo z-index handled via the absolute ::before; frame children stay in flow */

/* full art — same shape as others, distinctive border + glow */
.pcard--fullart .pcard__frame {
  background: linear-gradient(135deg, #1a0b2e 0%, #2a0a4a 100%);
  box-shadow: 0 0 0 3px var(--pink), 0 0 0 6px var(--cyan), 0 14px 40px rgba(255,45,149,.5);
}
.pcard--fullart .pcard__header { color: var(--cream); }
.pcard--fullart .pcard__stats  { color: var(--cream); }
.pcard--fullart .pcard__footer { color: var(--cream); }

/* secret rare — gold/black */
.pcard--secret .pcard__frame {
  background:
    linear-gradient(135deg, #1a0b2e 0%, #2a0a4a 50%, #1a0b2e 100%);
  box-shadow:
    0 0 0 3px var(--gold),
    inset 0 0 60px rgba(245,197,66,.2),
    0 14px 36px rgba(245,197,66,.3);
}
.pcard--secret .pcard__name { color: var(--gold); }
.pcard--secret .pcard__role { color: var(--cream); }

/* HOLO SHINE OVERLAY */
.pcard__shine {
  position: absolute; inset: 0;
  border-radius: 14px;
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: color-dodge;
  opacity: .18;
  transition: opacity .2s;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y),
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.14) 24%,
      transparent 54%),
    linear-gradient(135deg,
      rgba(255,255,255,.18) 0%,
      transparent 28%,
      rgba(0,229,255,.16) 50%,
      transparent 72%,
      rgba(255,45,149,.14) 100%);
}
.pcard:hover .pcard__shine { opacity: .9; }

/* holo shine — rainbow foil parallax (technique from poke-holo.simey.me) */
.pcard--holo .pcard__shine {
  mix-blend-mode: color-dodge;
  filter: brightness(.6) contrast(1.6) saturate(.5);
  opacity: calc(var(--card-opacity, 0) * 0.55 + 0.08);
  transition: opacity .4s ease;
  background-image:
    repeating-linear-gradient(
      110deg,
      hsl(  2, 100%, 73%) calc(5% * 1),
      hsl( 53, 100%, 69%) calc(5% * 2),
      hsl( 93, 100%, 69%) calc(5% * 3),
      hsl(176, 100%, 76%) calc(5% * 4),
      hsl(228, 100%, 74%) calc(5% * 5),
      hsl(283, 100%, 73%) calc(5% * 6),
      hsl(  2, 100%, 73%) calc(5% * 7)
    ),
    repeating-linear-gradient(
      110deg,
      rgba(0,0,0,.18) 0px,
      rgba(0,0,0,.18) 2px,
      transparent    2px,
      transparent    6px
    );
  background-blend-mode: overlay;
  background-size: 400% 300%, 100% 100%;
  background-position:
    calc(((50% - var(--background-x, 50%)) * 2.6) + 50%)
    calc(((50% - var(--background-y, 50%)) * 1.8) + 50%),
    center;
}

/* glare — specular overlay driven by pointer */
.pcard__glare {
  position: absolute; inset: 0;
  border-radius: 14px;
  pointer-events: none;
  z-index: 7;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .4s ease;
}
.pcard--holo .pcard__glare {
  opacity: var(--card-opacity, 0);
  background-image: radial-gradient(
    farthest-corner ellipse at var(--pointer-x, 50%) var(--pointer-y, 50%),
    rgba(255,255,255,.82) 10%,
    rgba(255,255,255,.6)  20%,
    rgba(0,0,0,.5)        90%
  );
}

.pcard--secret .pcard__shine {
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y),
      rgba(245,197,66,.5) 0%,
      transparent 50%);
}

/* HEADER */
.pcard__header {
  min-height: 18px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--night);
  position: relative;
  z-index: 2;
}
.pcard--fullart .pcard__header,
.pcard--secret .pcard__header { color: var(--cream); }
.pcard__hp {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .05em;
  color: var(--coral);
}
.pcard--secret .pcard__hp { color: var(--gold); }

/* ART WINDOW */
.pcard__art-frame {
  margin: 10px 8px 6px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  position: relative;
  aspect-ratio: 1.7 / 1;
  background: var(--night);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5);
}
/* unified shape — fullart now shows the art frame like others */

.pcard__art {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}
.pcard__art::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.26), transparent 22%),
    linear-gradient(145deg,
      rgba(255,255,255,.14),
      transparent 30%,
      rgba(0,229,255,.12) 55%,
      transparent 80%);
  mix-blend-mode: screen;
  opacity: .7;
}

/* art placeholders — abstract Miami portraits using gradients */
.art-1 { background: linear-gradient(135deg, #ff2d95 0%, #ff6b35 50%, #ffb547 100%); }
.art-2 { background: linear-gradient(135deg, #00e5ff 0%, #2a0a4a 100%); }
.art-3 { background: radial-gradient(circle at 30% 20%, #ffb547 0%, #ff2d95 40%, #2a0a4a 100%); }
.art-4 { background: linear-gradient(180deg, #6b1d6b, #d63384 60%, #ffb547); }
.art-5 { background: conic-gradient(from 45deg at 50% 60%, #ff2d95, #00e5ff, #ffb547, #ff2d95); }
.art-6 { background: linear-gradient(135deg, #2a0a4a, #6b1d6b 50%, #ff2d95); }
.art-7 { background: radial-gradient(ellipse at 50% 80%, #ffb547 0%, #ff6b35 30%, #2a0a4a 80%); }
.art-8 { background: linear-gradient(180deg, #00e5ff, #d63384 60%, #1a0b2e); }
.art-9 { background: linear-gradient(135deg, #f5c542, #ff6b35 50%, #2a0a4a); }
.art-10 { background: radial-gradient(circle at 50% 30%, #fef4d4, #00e5ff 40%, #2a0a4a); }
.art-11 { background: linear-gradient(135deg, #1a0b2e, #6b1d6b 30%, #00e5ff 70%, #fef4d4); }
.art-12 { background: linear-gradient(180deg, #ff2d95 0%, #ff2d95 40%, #ffb547 40%, #ffb547 60%, #00e5ff 60%); }

/* portrait silhouette overlay */
.pcard__portrait {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.pcard__portrait svg { width: 80%; height: 95%; opacity: .9; }

/* NAME / ROLE */
.pcard__name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .03em;
  color: var(--night);
  text-transform: uppercase;
  padding: 4px 10px 0;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.pcard__role {
  padding: 0 10px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(0,0,0,.7);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

/* Holo: keep nameplate inline like the others so card heights stay identical */
.pcard--holo .pcard__nameplate {
  display: contents;
}
.pcard--holo .pcard__name {
  color: var(--cream);
  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}
.pcard--holo .pcard__role {
  color: var(--cyan);
  letter-spacing: .2em;
}
.pcard--common .pcard__nameplate,
.pcard--secret .pcard__nameplate,
.pcard--fullart .pcard__nameplate {
  display: contents;
}


/* new stamp variants */
.stamp--in-review { color: var(--mango); transform: rotate(-4deg); }
.stamp--rejected1 { color: #f97316; transform: rotate(-8deg); }
.stamp--rejected2 { color: #ef4444; transform: rotate(-10deg); }
.stamp--rejected3 { color: #b91c1c; transform: rotate(-12deg); font-size: 26px; border-width: 4px; }

.pcard--fullart .pcard__name { color: var(--night); }
.pcard--fullart .pcard__name {
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--pink);
  font-size: 28px;
  padding: 10px 14px 0;
}
.pcard--fullart .pcard__role { color: var(--cyan); padding: 0 14px 8px; }

/* BACKSTORY */
/* STATS */
.pcard__stats {
  flex: 1;
  margin: 6px;
  padding: 10px;
  background: rgba(255,255,255,.7);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .08em;
  color: var(--night);
  position: relative;
  z-index: 2;
}
.pcard__bio {
  font-style: italic;
  font-size: 12px;
  color: rgba(0,0,0,.52);
  line-height: 1.5;
  letter-spacing: .03em;
}
.pcard--fullart .pcard__stats {
  background: rgba(10,6,19,.75);
  color: var(--cream);
  margin: 6px 8px 8px;
}
.pcard--fullart .pcard__bio {
  color: rgba(254,244,212,.62);
  border-bottom-color: rgba(0,229,255,.28);
}
.pcard--secret .pcard__stats {
  background: rgba(0,0,0,.5);
  color: var(--gold);
  border: 1px solid var(--gold);
}
.pcard--secret .pcard__bio {
  color: rgba(245,197,66,.72);
  border-bottom-color: rgba(245,197,66,.3);
}
.pcard--holo .pcard__stats {
  background: transparent;
  color: var(--cream);
  box-shadow: none;
  padding: 0;
}
.pcard--holo .pcard__stats .pcard__bio {
  display: block;
  background-color: rgba(10, 6, 19, 0.82);
  color: rgba(254, 244, 212, 0.92);
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* FOOTER */
.pcard__footer {
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--night);
  display: flex; justify-content: space-between;
  letter-spacing: .1em;
  opacity: .65;
  position: relative;
  z-index: 2;
}
.pcard--fullart .pcard__footer,
.pcard--secret .pcard__footer,
.pcard--holo .pcard__footer { color: var(--cream); }

/* Faction / role tag ribbon (text is the faction, not the rarity) */
.pcard__rarity {
  position: absolute;
  top: 14px; left: -4px;
  z-index: 4;
  padding: 5px 14px 5px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
  background: #2a1a08;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}
/* status ribbon */
.ribbon-attivo    { background: #166534; color: var(--cream); }
.ribbon-deceduto  { background: #374151; color: #9ca3af; }

/* faction-driven colour — set via .ribbon-{faction} */
.ribbon-cartel    { background: #6b1d6b; color: var(--cream); }
.ribbon-pd        { background: #1d4ed8; color: var(--cream); }
.ribbon-ems       { background: #dc2626; color: var(--cream); }
.ribbon-civilian  { background: #2a1a08; color: var(--cream); }
.ribbon-nightlife { background: var(--pink); color: var(--cream); }
.ribbon-racer     { background: #1a0b2e; color: var(--mango); }
.ribbon-streamer  { background: var(--cyan); color: var(--night); }
.ribbon-staff     { background: var(--gold); color: var(--night); }
.ribbon-media     { background: #ff6b35; color: var(--cream); }
.ribbon-trade     { background: #166534; color: var(--cream); }

/* deceduto — desaturated, dimmed */
.pcard--deceduto { filter: saturate(.18) brightness(.78); }
.pcard--deceduto:hover { filter: saturate(.28) brightness(.86); }

/* ============= PASSPORT STAMP ============= */
.pcard__stamp {
  position: absolute;
  bottom: 18px; right: 8px;
  z-index: 5;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 3px double currentColor;
  transform: rotate(-12deg);
  pointer-events: none;
  text-shadow: 0 0 1px currentColor;
  /* hatched ink-on-paper texture */
  background-image: repeating-linear-gradient(45deg,
    transparent 0 3px, rgba(255,255,255,.08) 3px 4px);
  opacity: .92;
  filter: blur(.2px);
}
.pcard__stamp::after {
  content: '';
  position: absolute; inset: -2px;
  background: inherit;
  mix-blend-mode: multiply;
  opacity: .15;
}
.stamp--approved {
  color: #16a34a;
  text-shadow: 1px 0 0 #16a34a, 0 1px 0 #16a34a;
}
.stamp--proposed {
  color: #ff2d95;
  transform: rotate(8deg);
}
.stamp--review {
  color: var(--mango);
  transform: rotate(-4deg);
}
.stamp--vip {
  color: var(--gold);
  transform: rotate(-15deg);
  font-size: 20px;
}

/* small status pill (used as an alternative compact display) */
.pcard__status-pill {
  position: absolute;
  top: 14px; right: 8px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(0,0,0,.7);
  color: var(--cream);
  border: 1px solid currentColor;
}

/* filter chips */
.rarity-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 12px 0 8px;
}
.rarity-chip {
  padding: 8px 16px;
  border: 1px solid rgba(254,244,212,.25);
  background: transparent;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.rarity-chip:hover { border-color: var(--cyan); color: var(--cyan); }
.rarity-chip.active { background: var(--cyan); color: var(--night); border-color: var(--cyan); }
.rarity-chip__count {
  margin-left: 6px;
  opacity: .5;
}

/* ============= TABLET: keep 2-col trading card ============= */
@media (max-width: 800px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 18px;
  }
  .pcard { width: 100%; }
}

/* ============= MOBILE: keep portrait trading cards ============= */
@media (max-width: 640px) {
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 14px;
    margin-top: 18px;
  }

  .pcard {
    aspect-ratio: 5 / 7;
    border-radius: 12px;
    transform: none;
    transform-style: preserve-3d;
  }
  .pcard:hover {
    transform: translateY(-2px);
    filter: saturate(1.06);
  }
  .pcard::before {
    inset: -6px;
    filter: blur(14px);
  }

  .pcard__frame {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
  }

  .pcard__art-frame {
    margin: 8px 6px 5px;
    border-radius: 8px;
    aspect-ratio: 1.7 / 1;
    height: auto;
    min-height: 0;
  }

  .pcard__header {
    padding: 3px 6px;
    min-height: 14px;
  }

  .pcard__name {
    font-size: 17px;
    padding: 4px 8px 0;
    line-height: 1.1;
  }
  .pcard__role {
    padding: 0 8px 4px;
    font-size: 8px;
    letter-spacing: .12em;
  }

  .pcard__bio {
    font-size: 10px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pcard__stats {
    margin: 4px 4px 0;
    padding: 7px 8px;
    font-size: 10px;
  }

  .pcard__footer {
    padding: 5px 8px 4px;
    font-size: 7px;
    letter-spacing: .08em;
  }

  .pcard__rarity {
    top: 9px;
    left: 0;
    font-size: 8px;
    padding: 3px 10px 3px 6px;
    letter-spacing: .1em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
  }

  .pcard__stamp {
    bottom: 12px;
    right: 8px;
    font-size: 11px;
    padding: 3px 7px;
    border-width: 2px;
    letter-spacing: .06em;
    transform: rotate(-7deg);
  }

  .pcard__shine { opacity: .24; }

  .pcard--holo .pcard__frame { animation: none; }
  .pcard--holo .pcard__name { font-size: 17px; }
  .pcard--holo .pcard__role { font-size: 8px; }

  .pcard--common .pcard__name { color: var(--night); }
  .pcard--common .pcard__role { color: rgba(0,0,0,.6); }
}

@media (max-width: 420px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pcard {
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
  }

  .pcard__name {
    font-size: 19px;
  }

  .pcard__stats {
    font-size: 9px;
  }
}

@media (hover: none) {
  .pcard {
    --glow-opacity: .24;
    --foil-opacity: .22;
  }
  .pcard:hover {
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }
  .pcard__shine { opacity: .42; }
}
/* On small touch screens, revert to flat card — no 3D conflict */
@media (hover: none) and (max-width: 640px) {
  .pcard:hover { transform: translateY(-2px); }
  .pcard__shine { opacity: .24; }
}