/* ---------- les cartes de combat (11 nov. 2026 : les cosmétiques des classées, src/ranked/cosmetics.js) ----------
   La carte du joueur en bas pendant le combat (src/ui/hud.js) prend la classe .pcard-<id> de la carte qu'il porte ; tout le
   monde la voit. Elle remplace le fond de .hb (::before : le fond, ::after : la trame) et ajoute deux calques vides, .pcx.a
   et .pcx.b, posés entre le fond et le portrait (même découpe en biais que la carte). Le %, le nom et les vies ne changent
   pas : ils gardent leur trait d'encre, lisibles sur tous les fonds. Animations légères seulement : transform, opacity,
   background-position (jamais de flou ni de filtre animé). Les plus chères sont bien plus belles (le créateur). */
.px .phc .pcx { position: absolute; inset: 2px; pointer-events: none; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.px .phc.pcard .hb::after { -webkit-mask-image: none; mask-image: none; }
/* la bande à la couleur du joueur reste toujours (qui est qui, en 2 contre 2 et à 4) */
.px .phc.pcard .pcx.b::after { content: ''; position: absolute; left: 28%; top: 0; bottom: 0; width: 3%; background: var(--pc); transform: skewX(-12deg); opacity: .95; }

/* l'aperçu hors combat (src/ui/cosmetics.js) : une carte posée où on veut, sans l'entrée du combat */
.px .phc.demo { top: auto; animation: none; }

/* ---- COMMUN : l'ardoise et la craie -------------------------------------------------------------------------------- */
.px .phc.pcard-craie .hb { background: #6b4526; }
.px .phc.pcard-craie .hb::before { background:
  linear-gradient(170deg, transparent 0 40%, rgba(255, 255, 255, .06) 41% 60%, transparent 61%),
  radial-gradient(ellipse at 70% 30%, #3e5446, #22322a 70%); }
.px .phc.pcard-craie .hb::after { background:
  repeating-linear-gradient(-28deg, transparent 0 9px, rgba(255, 255, 255, .13) 9px 10px, transparent 10px 23px),
  repeating-linear-gradient(15deg, transparent 0 14px, rgba(255, 255, 255, .08) 14px 15px, transparent 15px 31px); }
.px .phc.pcard-craie .pcx.a { background: radial-gradient(circle at 88% 78%, rgba(255, 255, 255, .5) 0 1.5px, transparent 2px), radial-gradient(circle at 92% 20%, rgba(255, 255, 255, .35) 0 1px, transparent 1.5px); }
.px .phc.pcard-craie .pcx.a::before { content: '1 + 1 = 3'; position: absolute; right: 12px; top: 3px; font-family: var(--px-small); font-weight: 700; font-size: 7px; color: rgba(255, 255, 255, .32); transform: rotate(-4deg); }

/* ---- COMMUN : le papier journal ------------------------------------------------------------------------------------- */
.px .phc.pcard-journal .hb { background: #2a2420; }
.px .phc.pcard-journal .hb::before { background:
  repeating-linear-gradient(0deg, rgba(40, 30, 20, .22) 0 1px, transparent 1px 3px) 60% 0 / 26% 60% no-repeat,
  repeating-linear-gradient(0deg, rgba(40, 30, 20, .2) 0 1px, transparent 1px 3px) 90% 4px / 14% 70% no-repeat,
  linear-gradient(100deg, #efe6d0, #ddd0b2); }
.px .phc.pcard-journal .hb::after { background: radial-gradient(circle, rgba(30, 20, 10, .2) .8px, transparent 1.2px) 0 0 / 3px 3px; }
.px .phc.pcard-journal .pcx.a::before { content: 'BAGARRE : IL GAGNE !'; position: absolute; left: 44px; top: 1px; font-family: var(--px-font); font-size: 6px; letter-spacing: .5px; color: rgba(30, 20, 10, .55); }
.px .phc.pcard-journal .pp img { filter: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink)) grayscale(.85) contrast(1.2); }

/* ---- RARE : le pixel 8 bits ----------------------------------------------------------------------------------------- */
.px .phc.pcard-pixel .hb { background: #000; clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); }
.px .phc.pcard-pixel .hb::before { clip-path: none; inset: 3px; background:
  conic-gradient(color-mix(in srgb, var(--cc) 55%, #10102a) 25%, color-mix(in srgb, var(--cc) 35%, #10102a) 0 50%, color-mix(in srgb, var(--cc) 55%, #10102a) 0 75%, color-mix(in srgb, var(--cc) 35%, #10102a) 0) 0 0 / 8px 8px; }
.px .phc.pcard-pixel .hb::after { clip-path: none; inset: 3px; background: linear-gradient(0deg, rgba(0, 0, 0, .35) 50%, transparent 50%) 0 0 / 100% 2px; }
.px .phc.pcard-pixel .pcx { clip-path: none; inset: 3px; }
.px .phc.pcard-pixel .pcx.a { background: linear-gradient(90deg, transparent 0 40%, rgba(255, 255, 255, .28) 40% 46%, transparent 46% 52%, rgba(255, 255, 255, .16) 52% 55%, transparent 55%) 0 0 / 300% 100% no-repeat;
  animation: pc-pixel 3s steps(14) infinite; }
@keyframes pc-pixel { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.px .phc.pcard-pixel .pcx.a::before { content: '1UP'; position: absolute; right: 8px; bottom: 13px; font-family: var(--px-font); font-size: 7px; color: #ffe14a; animation: pc-blink 1s steps(2) infinite; }
@keyframes pc-blink { 50% { opacity: 0; } }

/* ---- RARE : le néon de nuit ----------------------------------------------------------------------------------------- */
.px .phc.pcard-neon .hb { background: #04020a; }
.px .phc.pcard-neon .hb::before { background: radial-gradient(ellipse at 80% 120%, color-mix(in srgb, var(--pc) 35%, transparent), transparent 60%), linear-gradient(180deg, #120626, #05020c); }
.px .phc.pcard-neon .hb::after { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 6px); }
.px .phc.pcard-neon .pcx.a { inset: 4px; box-shadow: inset 0 0 0 1.5px #ff3ad1, inset 0 0 6px 2px rgba(255, 58, 209, .6); animation: pc-flick 4.2s linear infinite; }
.px .phc.pcard-neon .pcx.a::before { content: ''; position: absolute; inset: 4px; box-shadow: inset 0 0 0 1px #38e8ff, inset 0 0 5px 1px rgba(56, 232, 255, .5); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
@keyframes pc-flick { 0%, 7%, 9%, 60%, 62%, 100% { opacity: 1; } 8%, 61% { opacity: .25; } }

/* ---- RARE : la cassette VHS ----------------------------------------------------------------------------------------- */
.px .phc.pcard-vhs .hb { background: #0a0a0e; }
.px .phc.pcard-vhs .hb::before { background: linear-gradient(90deg, #2b2b36 0 34%, #f0eee6 34% 38%, #17171f 38%); }
.px .phc.pcard-vhs .hb::after { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); }
.px .phc.pcard-vhs .pcx.a { background: linear-gradient(180deg, transparent 0 44%, rgba(255, 255, 255, .22) 45% 49%, rgba(255, 60, 90, .2) 50%, rgba(60, 200, 255, .2) 52%, transparent 54%) 0 0 / 100% 300%; animation: pc-track 2.6s linear infinite; }
@keyframes pc-track { from { background-position: 0 100%; } to { background-position: 0 0; } }
.px .phc.pcard-vhs .pcx.a::before { content: '▶ PLAY'; position: absolute; right: 11px; top: 2px; font-family: var(--px-font); font-size: 7px; letter-spacing: 1px; color: #fff; text-shadow: -1px 0 0 #ff3a5a, 1px 0 0 #3ad8ff; animation: pc-blink 1.4s steps(2) infinite; }
.px .phc.pcard-vhs .pp img { filter: drop-shadow(1.5px 0 0 #ff3a5a) drop-shadow(-1.5px 0 0 #3ad8ff) drop-shadow(0 -1.5px 0 var(--ink)); }

/* ---- ÉPIQUE : la glace pilée ---------------------------------------------------------------------------------------- */
.px .phc.pcard-glace .hb { background: linear-gradient(120deg, #e8fbff, #6fd2ff 50%, #e8fbff); }
.px .phc.pcard-glace .hb::before { background:
  linear-gradient(130deg, transparent 0 30%, rgba(255, 255, 255, .5) 31% 33%, transparent 34% 55%, rgba(255, 255, 255, .35) 56% 57%, transparent 58%),
  linear-gradient(160deg, #bfefff, #4fb5e6 55%, #2a7fb8); }
.px .phc.pcard-glace .hb::after { background:
  radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .9) 0 .8px, transparent 1.4px) 0 0 / 9px 7px,
  radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .6) 0 .6px, transparent 1.2px) 0 0 / 13px 11px; opacity: .8; }
.px .phc.pcard-glace .pcx.a { background: linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, .75) 47%, transparent 54%) 0 0 / 250% 100% no-repeat; animation: pc-sheen 3.4s ease-in-out infinite; }
@keyframes pc-sheen { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }
.px .phc.pcard-glace .pcx.a::before { content: '❄'; position: absolute; right: 10px; top: 0; font-size: 12px; color: #fff; opacity: .85; animation: pc-spin 9s linear infinite; }
@keyframes pc-spin { to { transform: rotate(360deg); } }

/* ---- ÉPIQUE : en flammes -------------------------------------------------------------------------------------------- */
.px .phc.pcard-flammes .hb { background: #2a0400; }
.px .phc.pcard-flammes .hb::before { background: linear-gradient(0deg, #ff7a00, #c81800 45%, #3a0400); }
.px .phc.pcard-flammes .hb::after { background: none; }
.px .phc.pcard-flammes .pcx.a { background:
  radial-gradient(ellipse 9px 28px at 50% 100%, rgba(255, 232, 90, .95), rgba(255, 120, 0, .75) 50%, transparent 72%) 0 0 / 18px 44px repeat-x,
  radial-gradient(ellipse 6px 18px at 50% 100%, rgba(255, 255, 210, .9), transparent 70%) 9px 0 / 18px 34px repeat-x;
  background-position: 0 100%, 7px 100%; animation: pc-fire 1.1s linear infinite; }
.px .phc.pcard-flammes .pcx.b { background: radial-gradient(circle, rgba(255, 210, 90, .95) 0 .9px, transparent 1.4px) 0 0 / 17px 13px; animation: pc-embers 2.2s linear infinite; opacity: .9; }
@keyframes pc-fire { 0% { background-position: 0 100%, 9px 100%; } 50% { background-position: 9px 90%, 0 104%; } 100% { background-position: 18px 100%, -9px 100%; } }
@keyframes pc-embers { from { background-position: 0 26px; } to { background-position: 6px 0; } }

/* ---- ÉPIQUE : le bois gravé ----------------------------------------------------------------------------------------- */
.px .phc.pcard-bois .hb { background: #3a1e0a; }
.px .phc.pcard-bois .hb::before { background:
  repeating-radial-gradient(ellipse 160px 20px at 30% 140%, #9a5a26 0 3px, #b9773a 3px 6px, #8a4a1c 6px 7px, #a8682e 7px 11px),
  #a8682e; }
.px .phc.pcard-bois .hb::after { background: repeating-linear-gradient(90deg, rgba(40, 15, 0, .12) 0 1px, transparent 1px 5px); }
.px .phc.pcard-bois .pcx.a { inset: 5px; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); box-shadow: inset 1px 1px 0 rgba(40, 15, 0, .7), inset -1px -1px 0 rgba(255, 220, 160, .4); }
.px .phc.pcard-bois .pcx.a::before { content: '✦ ✦ ✦'; position: absolute; right: 10px; top: 0; font-size: 6px; letter-spacing: 2px; color: rgba(40, 15, 0, .55); text-shadow: 0 1px 0 rgba(255, 220, 160, .45); }
.px .phc.pcard-bois .pcx.b { background: linear-gradient(105deg, transparent 0 45%, rgba(255, 230, 180, .25) 50%, transparent 55%) 0 0 / 260% 100% no-repeat; animation: pc-sheen 6s ease-in-out infinite; }

/* ---- LÉGENDAIRE : la galaxie ---------------------------------------------------------------------------------------- */
.px .phc.pcard-galaxie .hb { background: linear-gradient(90deg, #6a3aff, #ff4ad8, #3ad8ff); background-size: 300% 100%; animation: pc-rainbow 6s linear infinite; }
.px .phc.pcard-galaxie .hb::before { background:
  radial-gradient(ellipse at 75% 40%, rgba(255, 80, 200, .55), transparent 45%),
  radial-gradient(ellipse at 45% 80%, rgba(60, 180, 255, .45), transparent 50%),
  radial-gradient(ellipse at 95% 90%, rgba(140, 90, 255, .6), transparent 40%),
  #070418; }
.px .phc.pcard-galaxie .hb::after { background:
  radial-gradient(circle, #fff 0 .7px, transparent 1.1px) 0 0 / 11px 9px,
  radial-gradient(circle, rgba(255, 255, 255, .7) 0 .5px, transparent 1px) 4px 3px / 7px 13px; animation: pc-stars 24s linear infinite; }
.px .phc.pcard-galaxie .pcx.a { background: radial-gradient(circle, #fff 0 1.1px, rgba(180, 220, 255, .6) 1.6px, transparent 2.4px) 0 0 / 23px 19px; animation: pc-twinkle 1.8s ease-in-out infinite alternate; }
.px .phc.pcard-galaxie .pcx.a::before { content: ''; position: absolute; right: 18px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe2a0, #ff7a3a 60%, #4a1030); box-shadow: 0 0 0 1px rgba(255, 220, 160, .35), -5px 0 0 -2px transparent; }
.px .phc.pcard-galaxie .pcx.a::after { content: ''; position: absolute; right: 13px; top: 12px; width: 26px; height: 5px; border-radius: 50%; border: 1px solid rgba(255, 220, 160, .7); transform: rotate(-18deg); }
@keyframes pc-stars { from { background-position: 0 0, 4px 3px; } to { background-position: -110px 18px, -66px 29px; } }
@keyframes pc-twinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes pc-rainbow { from { background-position: 0 0; } to { background-position: 300% 0; } }

/* ---- LÉGENDAIRE : l'or massif --------------------------------------------------------------------------------------- */
.px .phc.pcard-or .hb { background: linear-gradient(180deg, #fff2b0, #c88a10 50%, #7a4c00); }
.px .phc.pcard-or .hb::before { background:
  linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 40%, rgba(90, 50, 0, .35) 80%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 3px),
  linear-gradient(100deg, #ffd84a, #e8a91a 45%, #ffe788 60%, #c4870e); }
.px .phc.pcard-or .hb::after { background: none; }
.px .phc.pcard-or .pcx.a { background: linear-gradient(110deg, transparent 0 42%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .2) 52%, transparent 56%) 0 0 / 260% 100% no-repeat; animation: pc-sheen 2.6s ease-in-out infinite; }
.px .phc.pcard-or .pcx.a::before, .px .phc.pcard-or .pcx.a::after { content: '✦'; position: absolute; color: #fff; font-size: 9px; animation: pc-spark 1.6s ease-in-out infinite; }
.px .phc.pcard-or .pcx.a::before { right: 14px; top: -1px; }
.px .phc.pcard-or .pcx.a::after { right: 40px; top: 6px; font-size: 6px; animation-delay: .8s; }
@keyframes pc-spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }

/* ---- MYTHIQUE : l'holographique ------------------------------------------------------------------------------------- */
.px .phc.pcard-holo { --holo: linear-gradient(110deg, #ff5aa8, #ffd84a, #6aff8a, #3ad8ff, #a46aff, #ff5aa8); }
.px .phc.pcard-holo .hb { background: var(--holo); background-size: 200% 100%; animation: pc-rainbow 2.4s linear infinite; }
.px .phc.pcard-holo .hb::before { background:
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .0) 0 6px, rgba(255, 255, 255, .35) 7px, rgba(255, 255, 255, 0) 9px 15px),
  linear-gradient(110deg, #ff7ac0, #ffe066, #7dffa0, #6ad8ff, #b48aff, #ff7ac0) 0 0 / 300% 100%;
  animation: pc-holo 5s linear infinite; }
.px .phc.pcard-holo .hb::before, .px .phc.pcard-holo .hb::after { inset: 3px; }
.px .phc.pcard-holo .hb::after { background:
  radial-gradient(circle, rgba(255, 255, 255, .95) 0 .7px, transparent 1.2px) 0 0 / 8px 7px,
  linear-gradient(90deg, rgba(40, 20, 80, .55), transparent 38%), linear-gradient(0deg, rgba(40, 20, 80, .25), transparent 60%); }
.px .phc.pcard-holo .pcx.a { background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, .9) 46%, rgba(160, 240, 255, .6) 50%, rgba(255, 160, 230, .5) 54%, transparent 62%) 0 0 / 240% 100% no-repeat; animation: pc-sheen 2.2s ease-in-out infinite; }
.px .phc.pcard-holo .pcx.a::before, .px .phc.pcard-holo .pcx.a::after { content: '★'; position: absolute; color: #fff; text-shadow: 0 0 2px #fff; animation: pc-spark 1.3s ease-in-out infinite; }
.px .phc.pcard-holo .pcx.a::before { right: 12px; top: -2px; font-size: 10px; }
.px .phc.pcard-holo .pcx.a::after { right: 34px; top: 8px; font-size: 7px; animation-delay: .65s; }
.px .phc.pcard-holo .pcx.b::before { content: '★'; position: absolute; right: 56px; top: 1px; font-size: 6px; color: #fff; animation: pc-spark 1.7s ease-in-out .3s infinite; }
@keyframes pc-holo { from { background-position: 0 0, 0 0; } to { background-position: 60px 0, 300% 0; } }
/* (en dehors de la carte, un halo arc-en-ciel qui tourne : un calque de plus derrière, sans flou) */
.px .phc.pcard-holo::before { content: ''; position: absolute; inset: -3px -4px; background: var(--holo); background-size: 200% 100%; opacity: .85;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%); animation: pc-rainbow 2.4s linear infinite reverse; z-index: -1; }