/* Profil + classement */

.pf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .pf-layout { grid-template-columns: 1fr; }
}

.pf-preview {
  border-radius: 16px;
  border: 1px solid var(--border);
  min-height: 220px;
  position: relative;
  overflow: hidden;
  padding: 28px 24px;
}
.pf-preview__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.pf-preview__name {
  margin: 8px 0 0;
  font-size: 1.45rem;
  letter-spacing: -.02em;
}
.pf-preview__meta {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
}
.pf-preview__stats {
  display: flex;
  gap: 18px;
  margin-top: 14px;
}
.pf-preview__stats strong {
  display: block;
  font-size: 1.25rem;
  font-family: var(--ck-mono, ui-monospace, monospace);
}
.pf-preview__stats span {
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pf-preview__avatar,
.lb-user__frame,
.pf-item__frame-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: content-box;
  border-radius: 50%;
  padding: 3px;
  line-height: 0;
  isolation: isolate;
}

.pf-preview__avatar {
  width: 72px;
  height: 72px;
  padding: 5px;
}
.pf-item__frame-demo {
  width: 52px;
  height: 52px;
  padding: 5px;
}
.lb-user__frame {
  width: 36px;
  height: 36px;
  padding: 3px;
}
.pf-preview__avatar > .pu-avatar,
.pf-item__frame-demo > .pu-avatar,
.lb-user__frame > .pu-avatar,
.pf-avatar-wrap > .pu-avatar {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  border-radius: 50% !important;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}
.pf-frame--square > .pu-avatar,
.pf-frame--square .pu-avatar {
  border-radius: 10px !important;
}

/* Fonds */
.pf-bg--default,
.pf-item.pf-bg--default .pf-item__swatch {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(245, 165, 36, .18), transparent 55%),
    linear-gradient(165deg, #12151c, #0a0c10 70%);
}
.pf-bg--slate,
.pf-item.pf-bg--slate .pf-item__swatch {
  background: linear-gradient(160deg, #1e293b, #0f172a 65%);
}
.pf-bg--mist,
.pf-item.pf-bg--mist .pf-item__swatch {
  background:
    radial-gradient(circle at 60% 40%, rgba(226, 232, 240, .12), transparent 50%),
    linear-gradient(165deg, #2a3444, #141a22);
}
.pf-bg--ember,
.pf-item.pf-bg--ember .pf-item__swatch {
  background:
    radial-gradient(circle at 80% 20%, rgba(249, 115, 22, .45), transparent 45%),
    linear-gradient(160deg, #3b1510, #120807);
}
.pf-bg--ocean,
.pf-item.pf-bg--ocean .pf-item__swatch {
  background:
    radial-gradient(circle at 15% 80%, rgba(56, 189, 248, .35), transparent 50%),
    linear-gradient(160deg, #0c4a6e, #082f49);
}
.pf-bg--rose,
.pf-item.pf-bg--rose .pf-item__swatch {
  background:
    radial-gradient(circle at 30% 20%, rgba(244, 114, 182, .35), transparent 45%),
    linear-gradient(160deg, #4a1530, #1a0a12);
}
.pf-bg--copper,
.pf-item.pf-bg--copper .pf-item__swatch {
  background:
    radial-gradient(circle at 70% 70%, rgba(234, 88, 12, .3), transparent 40%),
    linear-gradient(150deg, #5c3a1e, #1c1208);
}
.pf-bg--forest,
.pf-item.pf-bg--forest .pf-item__swatch {
  background:
    radial-gradient(circle at 70% 30%, rgba(74, 222, 128, .28), transparent 45%),
    linear-gradient(160deg, #14532d, #052e16);
}
.pf-bg--aurora,
.pf-item.pf-bg--aurora .pf-item__swatch {
  background:
    linear-gradient(120deg, rgba(167, 139, 250, .45), transparent 40%),
    linear-gradient(300deg, rgba(52, 211, 153, .35), transparent 45%),
    linear-gradient(160deg, #1e1b4b, #0f172a);
}
.pf-bg--ice,
.pf-item.pf-bg--ice .pf-item__swatch {
  background:
    radial-gradient(circle at 40% 10%, rgba(186, 230, 253, .35), transparent 40%),
    linear-gradient(165deg, #164e63, #0c1e2a 70%);
}
.pf-bg--magma,
.pf-item.pf-bg--magma .pf-item__swatch {
  background:
    radial-gradient(circle at 50% 100%, rgba(239, 68, 68, .5), transparent 45%),
    radial-gradient(circle at 20% 30%, rgba(251, 146, 60, .25), transparent 35%),
    linear-gradient(180deg, #1c0a08, #0a0404);
}
.pf-bg--gold,
.pf-item.pf-bg--gold .pf-item__swatch {
  background:
    radial-gradient(circle at 50% 0%, rgba(250, 204, 21, .4), transparent 50%),
    linear-gradient(165deg, #422006, #1c1917);
}
.pf-bg--void,
.pf-item.pf-bg--void .pf-item__swatch {
  background:
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, .25), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(236, 72, 153, .2), transparent 35%),
    #050508;
}
.pf-bg--neon,
.pf-item.pf-bg--neon .pf-item__swatch {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .35), transparent 40%),
    linear-gradient(315deg, rgba(244, 63, 94, .35), transparent 40%),
    linear-gradient(180deg, #0b1020, #05070f);
}
.pf-bg--horizon,
.pf-item.pf-bg--horizon .pf-item__swatch {
  background:
    linear-gradient(180deg, #1e3a5f 0%, #7c2d12 55%, #1c1917 100%);
}
.pf-bg--legend,
.pf-item.pf-bg--legend .pf-item__swatch {
  background:
    radial-gradient(circle at 50% 30%, rgba(250, 204, 21, .55), transparent 35%),
    radial-gradient(circle at 20% 80%, rgba(168, 85, 247, .35), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(56, 189, 248, .3), transparent 35%),
    linear-gradient(160deg, #1a1025, #050508);
}
.pf-bg--ruby {
  background:
    radial-gradient(circle at 76% 22%, rgba(251, 113, 133, .52), transparent 32%),
    radial-gradient(circle at 18% 90%, rgba(127, 29, 29, .55), transparent 45%),
    linear-gradient(145deg, #3f0a14, #110408 72%);
}
.pf-bg--grid {
  background:
    linear-gradient(rgba(34, 211, 238, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .1) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(14, 116, 144, .36), transparent 55%),
    #05131b;
  background-size: 22px 22px, 22px 22px, 100% 100%, 100% 100%;
}
.pf-bg--eclipse {
  background:
    radial-gradient(circle at 68% 42%, #030306 0 12%, rgba(3, 3, 6, .94) 13%, transparent 25%),
    radial-gradient(circle at 68% 42%, rgba(192, 132, 252, .75), rgba(56, 189, 248, .25) 18%, transparent 38%),
    linear-gradient(145deg, #160d2d, #05040a 72%);
}
.pf-bg--supernova {
  background:
    radial-gradient(circle at 50% 48%, #fff7cc 0 3%, #fbbf24 5%, #f43f5e 12%, transparent 28%),
    conic-gradient(from 35deg at 50% 48%, transparent, rgba(168, 85, 247, .45), transparent 20%, rgba(56, 189, 248, .38), transparent 45%, rgba(244, 63, 94, .42), transparent 70%),
    radial-gradient(circle at 50% 50%, #251047, #05030b 70%);
}

/* Cadres */
.pf-frame--default { box-shadow: 0 0 0 2px rgba(148, 163, 184, .35); }
.pf-frame--thin { box-shadow: 0 0 0 1px rgba(226, 232, 240, .5); }
.pf-frame--square {
  border-radius: 12px !important;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, .55);
}
.pf-frame--square .pu-avatar { border-radius: 10px !important; }
.pf-frame--amber { box-shadow: 0 0 0 3px #f59e0b, 0 0 18px rgba(245, 158, 11, .35); }
.pf-frame--cyan { box-shadow: 0 0 0 3px #22d3ee, 0 0 18px rgba(34, 211, 238, .35); }
.pf-frame--lime { box-shadow: 0 0 0 3px #a3e635, 0 0 16px rgba(163, 230, 53, .35); }
.pf-frame--rose { box-shadow: 0 0 0 3px #fb7185, 0 0 16px rgba(251, 113, 133, .35); }
.pf-frame--ring {
  box-shadow: 0 0 0 2px #a78bfa, 0 0 0 5px rgba(167, 139, 250, .25);
}
.pf-frame--pulse {
  box-shadow: 0 0 0 3px #f43f5e, 0 0 20px rgba(244, 63, 94, .45);
  animation: pf-pulse 2.2s ease-in-out infinite;
}
.pf-frame--steel {
  box-shadow:
    0 0 0 2px #94a3b8,
    0 0 0 4px rgba(15, 23, 42, .9),
    0 0 0 6px #cbd5e1;
}
.pf-frame--crown {
  box-shadow:
    0 0 0 3px #fbbf24,
    0 0 0 6px rgba(251, 191, 36, .25),
    0 0 24px rgba(251, 191, 36, .45);
}
.pf-frame--plasma {
  box-shadow:
    0 0 0 3px #e879f9,
    0 0 0 6px rgba(56, 189, 248, .35),
    0 0 22px rgba(232, 121, 249, .5);
}
.pf-frame--legend {
  box-shadow:
    0 0 0 3px #fbbf24,
    0 0 0 6px rgba(168, 85, 247, .45),
    0 0 28px rgba(250, 204, 21, .55);
  animation: pf-legend-glow 2.8s ease-in-out infinite;
}
.pf-frame--ruby {
  box-shadow:
    0 0 0 3px #fb7185,
    0 0 0 6px rgba(190, 18, 60, .24),
    0 0 24px rgba(244, 63, 94, .5);
}
.pf-frame--holo {
  box-shadow:
    0 -3px 0 #22d3ee,
    3px 0 0 #a78bfa,
    0 3px 0 #f472b6,
    -3px 0 0 #34d399,
    0 0 28px rgba(34, 211, 238, .45);
}
.pf-frame--eclipse {
  box-shadow:
    0 0 0 3px #111827,
    0 0 0 6px rgba(139, 92, 246, .5),
    0 0 30px rgba(139, 92, 246, .62);
}
.pf-frame--inferno {
  box-shadow:
    0 0 0 3px #f97316,
    0 0 0 7px rgba(239, 68, 68, .3),
    0 0 34px rgba(249, 115, 22, .72);
}
@keyframes pf-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #f43f5e, 0 0 12px rgba(244, 63, 94, .3); }
  50% { box-shadow: 0 0 0 3px #fb7185, 0 0 26px rgba(244, 63, 94, .65); }
}
@keyframes pf-legend-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

.pf-badge-anim {
  display: inline-flex;
  width: fit-content;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 999px;
  color: #f0abfc;
  border: 1px solid rgba(240, 171, 252, .45);
  background: rgba(168, 85, 247, .12);
  animation: pf-badge-shimmer 2.4s ease-in-out infinite;
}
@keyframes pf-badge-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}

/* Fonds animés (classe pf-cosmetic--animated sur l'élément porteur) */
.pf-cosmetic--animated.pf-bg--ember,
.pf-item.pf-cosmetic--animated.pf-bg--ember .pf-item__swatch {
  animation: pf-bg-ember 3.5s ease-in-out infinite;
}
.pf-cosmetic--animated.pf-bg--ocean,
.pf-item.pf-cosmetic--animated.pf-bg--ocean .pf-item__swatch {
  animation: pf-bg-ocean 6s ease-in-out infinite;
  background-size: 120% 120%;
}
.pf-cosmetic--animated.pf-bg--aurora,
.pf-item.pf-cosmetic--animated.pf-bg--aurora .pf-item__swatch {
  animation: pf-bg-aurora 10s ease infinite;
  background-size: 220% 220%;
}
.pf-cosmetic--animated.pf-bg--ice,
.pf-item.pf-cosmetic--animated.pf-bg--ice .pf-item__swatch {
  animation: pf-bg-ice 5s ease-in-out infinite;
}
.pf-cosmetic--animated.pf-bg--magma,
.pf-item.pf-cosmetic--animated.pf-bg--magma .pf-item__swatch {
  animation: pf-bg-magma 4s ease-in-out infinite;
}
.pf-cosmetic--animated.pf-bg--gold,
.pf-item.pf-cosmetic--animated.pf-bg--gold .pf-item__swatch {
  animation: pf-bg-gold 5s linear infinite;
  background-size: 200% 200%;
}
.pf-cosmetic--animated.pf-bg--void,
.pf-item.pf-cosmetic--animated.pf-bg--void .pf-item__swatch {
  animation: pf-bg-void 12s ease infinite;
}
.pf-cosmetic--animated.pf-bg--neon,
.pf-item.pf-cosmetic--animated.pf-bg--neon .pf-item__swatch {
  animation: pf-bg-neon 4s ease-in-out infinite;
  background-size: 180% 180%;
}
.pf-cosmetic--animated.pf-bg--horizon,
.pf-item.pf-cosmetic--animated.pf-bg--horizon .pf-item__swatch {
  animation: pf-bg-horizon 8s ease infinite;
  background-size: 100% 200%;
}
.pf-cosmetic--animated.pf-bg--legend,
.pf-item.pf-cosmetic--animated.pf-bg--legend .pf-item__swatch {
  animation: pf-bg-legend 7s ease-in-out infinite;
}
.pf-cosmetic--animated.pf-bg--ruby {
  animation: pf-bg-ruby 4.5s ease-in-out infinite;
}
.pf-cosmetic--animated.pf-bg--grid {
  animation: pf-bg-grid 8s linear infinite;
}
.pf-cosmetic--animated.pf-bg--eclipse {
  animation: pf-bg-eclipse 7s ease-in-out infinite;
}
.pf-cosmetic--animated.pf-bg--supernova {
  animation: pf-bg-supernova 10s linear infinite;
}

@keyframes pf-bg-ember {
  0%, 100% { filter: brightness(1) saturate(1); }
  40% { filter: brightness(1.15) saturate(1.2); }
  70% { filter: brightness(.95) saturate(.95); }
}
@keyframes pf-bg-ocean {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes pf-bg-aurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pf-bg-ice {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08) hue-rotate(8deg); }
}
@keyframes pf-bg-magma {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.12); }
}
@keyframes pf-bg-gold {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@keyframes pf-bg-void {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(18deg); }
}
@keyframes pf-bg-neon {
  0%, 100% { background-position: 0% 50%; filter: brightness(1); }
  50% { background-position: 100% 50%; filter: brightness(1.1); }
}
@keyframes pf-bg-horizon {
  0%, 100% { background-position: 50% 0%; }
  50% { background-position: 50% 100%; }
}
@keyframes pf-bg-legend {
  0%, 100% { filter: brightness(1) saturate(1); }
  33% { filter: brightness(1.08) saturate(1.15); }
  66% { filter: brightness(1.04) saturate(1.05); }
}
@keyframes pf-bg-ruby {
  0%, 100% { filter: brightness(.96) saturate(1); }
  50% { filter: brightness(1.13) saturate(1.2); }
}
@keyframes pf-bg-grid {
  from { background-position: 0 0, 0 0, center, center; }
  to { background-position: 22px 22px, 22px 22px, center, center; }
}
@keyframes pf-bg-eclipse {
  0%, 100% { filter: hue-rotate(0deg) brightness(.96); }
  50% { filter: hue-rotate(18deg) brightness(1.12); }
}
@keyframes pf-bg-supernova {
  from { filter: hue-rotate(0deg) brightness(1); }
  to { filter: hue-rotate(360deg) brightness(1); }
}

.pf-cosmetic--animated.pf-frame--cyan {
  animation: pf-frame-cyan 2.8s ease-in-out infinite;
}
.pf-cosmetic--animated.pf-frame--crown {
  animation: pf-frame-crown 3s ease-in-out infinite;
}
.pf-cosmetic--animated.pf-frame--plasma {
  animation: pf-frame-plasma 2.5s linear infinite;
}
.pf-cosmetic--animated.pf-frame--ruby {
  animation: pf-frame-ruby 2.7s ease-in-out infinite;
}
.pf-cosmetic--animated.pf-frame--holo {
  animation: pf-frame-holo 3.4s linear infinite;
}
.pf-cosmetic--animated.pf-frame--eclipse {
  animation: pf-frame-eclipse 4s ease-in-out infinite;
}
.pf-cosmetic--animated.pf-frame--inferno {
  animation: pf-frame-inferno 2.2s ease-in-out infinite;
}
@keyframes pf-frame-cyan {
  0%, 100% { box-shadow: 0 0 0 3px #22d3ee, 0 0 18px rgba(34, 211, 238, .35); }
  50% { box-shadow: 0 0 0 3px #67e8f9, 0 0 28px rgba(34, 211, 238, .6); }
}
@keyframes pf-frame-crown {
  0%, 100% { box-shadow: 0 0 0 3px #fbbf24, 0 0 0 6px rgba(251, 191, 36, .25), 0 0 24px rgba(251, 191, 36, .45); }
  50% { box-shadow: 0 0 0 3px #fcd34d, 0 0 0 8px rgba(251, 191, 36, .35), 0 0 32px rgba(251, 191, 36, .65); }
}
@keyframes pf-frame-plasma {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes pf-frame-ruby {
  0%, 100% { box-shadow: 0 0 0 3px #fb7185, 0 0 0 6px rgba(190, 18, 60, .24), 0 0 18px rgba(244, 63, 94, .4); }
  50% { box-shadow: 0 0 0 3px #fecdd3, 0 0 0 7px rgba(190, 18, 60, .34), 0 0 30px rgba(244, 63, 94, .72); }
}
@keyframes pf-frame-holo {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}
@keyframes pf-frame-eclipse {
  0%, 100% { box-shadow: 0 0 0 3px #111827, 0 0 0 6px rgba(139, 92, 246, .42), 0 0 20px rgba(139, 92, 246, .45); }
  50% { box-shadow: 0 0 0 3px #030712, 0 0 0 8px rgba(192, 132, 252, .58), 0 0 34px rgba(139, 92, 246, .75); }
}
@keyframes pf-frame-inferno {
  0%, 100% { box-shadow: 0 0 0 3px #f97316, 0 0 0 7px rgba(239, 68, 68, .3), 0 0 24px rgba(249, 115, 22, .6); }
  50% { box-shadow: 0 0 0 3px #facc15, 0 0 0 8px rgba(249, 115, 22, .38), 0 0 38px rgba(239, 68, 68, .82); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-cosmetic--animated,
  .pf-badge-anim,
  .pf-frame--pulse,
  .pf-frame--legend {
    animation: none !important;
  }
}

.pf-how h3,
.pf-shop h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}
.pf-how ul {
  margin: 0 0 10px;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.55;
}
.pf-how b { color: var(--accent-light, var(--accent)); }

.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.pf-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.pf-item.is-equipped { border-color: rgba(var(--accent-rgb, 245, 165, 36), .55); }
.pf-item.is-locked { opacity: .85; }
.pf-item__swatch { height: 72px; }
.pf-item__frame-demo {
  margin: 16px auto 0;
  align-self: center;
}
.pf-item__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.pf-item__body form { margin-top: auto; }
.pf-item__state {
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent-light, var(--accent));
}
.pf-rarity {
  display: inline-flex;
  width: fit-content;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.pf-rarity--uncommon { color: #4ade80; border-color: rgba(74, 222, 128, .35); }
.pf-rarity--rare { color: #60a5fa; border-color: rgba(96, 165, 250, .35); }
.pf-rarity--epic { color: #c084fc; border-color: rgba(192, 132, 252, .4); }
.pf-rarity--legendary { color: #fbbf24; border-color: rgba(251, 191, 36, .5); }

/* ── Locker cosmétique v2 ─────────────────────────────────────────────── */
.pf-layout {
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .72fr);
  gap: 18px;
  margin-bottom: 28px;
}

.pf-preview {
  min-height: 310px;
  padding: 30px;
  border-radius: 22px;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
  isolation: isolate;
}
.pf-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(3, 5, 10, .82), rgba(3, 5, 10, .2) 72%),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255, 255, 255, .025) 48px);
  pointer-events: none;
}
.pf-preview::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -85px;
  bottom: -100px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, .025), 0 0 0 58px rgba(255, 255, 255, .018);
  pointer-events: none;
}
.pf-preview__eyebrow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .72);
  font-family: var(--ck-mono, ui-monospace, monospace);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pf-preview__eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .75);
}
.pf-preview__inner {
  justify-content: center;
  min-height: 228px;
}
.pf-preview__name {
  color: #fff;
  font-family: var(--ck-display, sans-serif);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.05;
}
.pf-preview__meta { color: rgba(255, 255, 255, .62); }
.pf-preview__loadout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pf-preview__loadout span {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  color: rgba(255, 255, 255, .84);
  background: rgba(0, 0, 0, .26);
  backdrop-filter: blur(8px);
  font-size: .72rem;
  font-weight: 700;
}
.pf-preview__loadout i { color: rgba(255, 255, 255, .4); font-style: normal; }
.pf-preview__index {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 2;
  color: rgba(255, 255, 255, .32);
  font: 600 .62rem/1 var(--ck-mono, ui-monospace, monospace);
  letter-spacing: .12em;
}

.pf-wallet {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .13), transparent 42%),
    linear-gradient(155deg, var(--surface), var(--surface2));
  box-shadow: 0 20px 55px rgba(0, 0, 0, .22);
}
.pf-wallet__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.pf-wallet__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font: 700 .65rem/1.2 var(--ck-mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pf-wallet__head strong {
  display: block;
  color: var(--text);
  font: 700 clamp(1.8rem, 3vw, 2.5rem)/1 var(--ck-display, sans-serif);
  letter-spacing: -.05em;
}
.pf-wallet__head strong small { color: var(--accent); font-size: .68rem; letter-spacing: .08em; }
.pf-wallet__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 14px;
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), .1);
}
.pf-wallet__collection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 18px 0;
}
.pf-wallet__collection div {
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}
.pf-wallet__collection strong { display: block; font: 700 1rem var(--ck-mono, monospace); }
.pf-wallet__collection span { color: var(--muted); font-size: .67rem; text-transform: uppercase; letter-spacing: .05em; }
.pf-wallet__earn {
  display: grid;
  gap: 7px;
  margin-top: auto;
  color: var(--muted);
  font-size: .75rem;
}
.pf-wallet__earn > span {
  margin-bottom: 2px;
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pf-wallet__earn div { display: flex; justify-content: space-between; gap: 12px; }
.pf-wallet__earn b { color: var(--accent-light); font-family: var(--ck-mono, monospace); }

.pf-tabs {
  display: flex;
  gap: 8px;
  margin: -6px 0 18px;
}
.pf-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  font: 700 .82rem/1 var(--ck-mono, ui-monospace, monospace);
  text-decoration: none;
}
.pf-tabs a:hover { color: var(--text); text-decoration: none; border-color: rgba(var(--accent-rgb), .4); }
.pf-tabs a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pf-tabs a.active {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .65);
  background: rgba(var(--accent-rgb), .12);
}

.pf-loadout { padding: 8px 0 28px; }
.pf-loadout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pf-loadout-slot {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.pf-loadout-slot__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.pf-loadout-slot__head span {
  color: var(--muted);
  font: 800 .62rem var(--ck-mono, ui-monospace, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pf-loadout-slot__head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-thumb-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.pf-thumb-form { flex: 0 0 auto; margin: 0; }
.pf-thumb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 92px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
button.pf-thumb { font: inherit; }
.pf-thumb:hover { color: var(--text); border-color: rgba(var(--accent-rgb), .45); }
.pf-thumb.is-on {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .7);
  background: rgba(var(--accent-rgb), .1);
  cursor: default;
}
.pf-thumb:focus-visible,
.pf-search input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pf-thumb__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 64px;
  overflow: hidden;
  border-radius: 8px;
  background: #080b12;
}
.pf-thumb__swatch,
.pf-thumb__art .pf-skin-demo,
.pf-thumb__art .pf-banner-demo {
  width: 100%;
  height: 100%;
}
.pf-thumb__art .pf-skin-demo { padding: 7px; gap: 3px; }
.pf-thumb__art .pf-banner-demo[class*="pf-banner--"] { background-size: 100% 100%; }
.pf-thumb__art .pf-shop-avatar-preview { width: 46px; height: 46px; padding: 3px; }
.pf-thumb__art .pf-cosmetic-badge { position: static; width: 34px; height: 34px; }
.pf-thumb__art .pf-cosmetic-badge svg { width: 18px; height: 18px; }
.pf-thumb__art .pf-name-demo { font-size: .95rem; }
.pf-thumb__art .pf-user-title {
  max-width: calc(100% - 8px);
  overflow: hidden;
  font-size: .48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-thumb__art .pf-entry-demo { font-size: .62rem; letter-spacing: .08em; }
.pf-thumb__name {
  display: block;
  overflow: hidden;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-thumb__empty { color: var(--muted); font-size: .85rem; }
.pf-search {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 360px;
  margin: 0 0 12px;
}
.pf-search span {
  color: var(--muted);
  font: 800 .62rem var(--ck-mono, ui-monospace, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pf-search input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: 600 .84rem/1.2 inherit;
}

.pf-store {
  padding: 0 0 30px;
}
.pf-store__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.pf-store__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font: 700 .65rem/1.2 var(--ck-mono, ui-monospace, monospace);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.pf-store__head h2 {
  margin: 0;
  font: 700 clamp(1.35rem, 2.5vw, 1.8rem)/1.2 var(--ck-display, sans-serif);
  letter-spacing: -.03em;
}
.pf-store__head p { max-width: 640px; margin: 7px 0 0; color: var(--muted); font-size: .84rem; }
.pf-store__rank-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  white-space: nowrap;
  font-weight: 700;
  font-size: .78rem;
  transition: border-color .2s ease, background .2s ease;
}
.pf-store__rank-link:hover {
  border-color: rgba(var(--accent-rgb), .5);
  background: rgba(var(--accent-rgb), .08);
  text-decoration: none;
}

.pf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  max-width: 100%;
}
.pf-filter {
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface);
  font: 700 .75rem/1 var(--ck-mono, ui-monospace, monospace);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.pf-filter span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  font-size: .65rem;
}
.pf-filter:hover { color: var(--text); border-color: rgba(var(--accent-rgb), .35); }
.pf-filter.is-active {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .6);
  background: rgba(var(--accent-rgb), .12);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.pf-grid {
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 14px;
}
.pf-item {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--surface), var(--surface2));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
  content-visibility: auto;
  contain-intrinsic-size: 290px;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s ease, box-shadow .22s ease;
}
.pf-item:not(.is-in-view) .pf-cosmetic--animated,
.pf-item:not(.is-in-view) [class*="pf-avatar-fx--"],
.pf-item:not(.is-in-view) [class*="pf-name--"],
.pf-item:not(.is-in-view) [class*="pf-entry--"] {
  animation-play-state: paused !important;
}
.pf-item[hidden] { display: none !important; }
.pf-item::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--border);
}
.pf-item--uncommon::before { background: #4ade80; }
.pf-item--rare::before { background: #60a5fa; }
.pf-item--epic::before { background: #c084fc; box-shadow: 0 0 14px rgba(192, 132, 252, .55); }
.pf-item--legendary::before { background: #fbbf24; box-shadow: 0 0 16px rgba(251, 191, 36, .65); }
.pf-item:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), .38);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .24);
}
.pf-item.is-equipped {
  border-color: rgba(var(--accent-rgb), .72);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .12), 0 18px 42px rgba(var(--accent-rgb), .1);
}
.pf-item.is-locked { opacity: 1; }
.pf-item__visual {
  position: relative;
  height: 142px;
  overflow: hidden;
  background: #080b12;
}
.pf-item__swatch {
  position: relative;
  width: 100%;
  height: 100%;
}
.pf-item__scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, .025) 4px);
  pointer-events: none;
}
.pf-item__type {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 2;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  color: rgba(255, 255, 255, .7);
  background: rgba(3, 5, 10, .58);
  backdrop-filter: blur(8px);
  font: 700 .56rem/1 var(--ck-mono, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pf-item__frame-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .12), transparent 36%),
    linear-gradient(145deg, #0e121d, #080a10);
}
.pf-item__frame-stage::before,
.pf-item__frame-stage::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: .45;
}
.pf-item__frame-stage::before { top: 12px; left: 12px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.pf-item__frame-stage::after { right: 12px; bottom: 12px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.pf-item__frame-demo { margin: 0; }
.pf-equipped-flag {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(var(--accent-rgb), .45);
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(10px);
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
}
.pf-item__body { gap: 11px; padding: 14px; }
.pf-item__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.pf-item__title-row strong {
  display: block;
  color: var(--text);
  font-family: var(--ck-display, sans-serif);
  font-size: .94rem;
}
.pf-item__title-row > div > small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .7rem;
}
.pf-price {
  color: var(--text);
  font: 800 .88rem/1 var(--ck-mono, monospace);
  white-space: nowrap;
}
.pf-price small { display: block; margin-top: 3px; color: var(--accent); font-size: .5rem; text-align: right; letter-spacing: .1em; }
.pf-item__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.pf-badge-anim {
  align-items: center;
  gap: 4px;
  animation: none;
}
.pf-item__action { margin-top: auto; }
.pf-item__action form { margin: 0; }
.pf-item__button {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  font-size: .76rem;
}
.pf-item__button:disabled { cursor: not-allowed; opacity: .46; }
.pf-item__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), .08);
}
.pf-store__empty {
  padding: 36px 20px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .pf-layout { grid-template-columns: 1fr; }
  .pf-preview { min-height: 270px; }
}
@media (max-width: 640px) {
  .pf-preview { min-height: 250px; padding: 22px; }
  .pf-preview__inner { min-height: 190px; }
  .pf-preview__index { display: none; }
  .pf-wallet { padding: 18px; }
  .pf-store__head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .pf-store__rank-link { width: 100%; }
  .pf-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .pf-filter { width: 100%; }
  .pf-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-item { transition: none; }
  .pf-item:hover { transform: none; }
}

/* Classement */
.lb-tabs,
.lb-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.lb-tabs a,
.lb-periods a {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  color: var(--muted);
}
.lb-tabs a.active,
.lb-periods a.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.lb-table-wrap { padding: 0; overflow: hidden; }
.lb-table {
  width: 100%;
  border-collapse: collapse;
}
.lb-table th,
.lb-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: .9rem;
}
.lb-table th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  background: rgba(0, 0, 0, .15);
}
.lb-table .right { text-align: right; }
.lb-table tr.is-me { background: rgba(var(--accent-rgb, 245, 165, 36), .08); }
.lb-rank {
  font-family: var(--ck-mono, ui-monospace, monospace);
  font-weight: 700;
  width: 48px;
}
.lb-rank--1 { color: #fbbf24; }
.lb-rank--2 { color: #94a3b8; }
.lb-rank--3 { color: #d97706; }
.lb-table tbody tr.lb-row:hover { background: rgba(var(--accent-rgb), .07); cursor: pointer; }
.lb-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
a.lb-user-link {
  color: inherit;
  text-decoration: none;
}
a.lb-user-link:hover { color: inherit; text-decoration: none; }
a.lb-user-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.lb-user strong { display: block; }
.lb-user .muted { display: block; }
.op-back {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 16px;
}
.op-back a { font-weight: 700; }
.op-hero { margin-bottom: 16px; }
.op-loadout { padding-bottom: 28px; }
.pf-pack-pick { padding: 4px 0 8px; }
.pf-pack-pick .pf-pack__foot { justify-content: flex-end; }
.pf-pack-pick .pf-pack__foot .btn { min-height: 44px; }
.pf-pack-thumb.is-on { outline: 1px solid rgba(var(--accent-rgb), .7); border-radius: 8px; }
.pf-pack-thumb:not(.is-owned) { opacity: .45; }

/* Cockpit header cosmetics */
.ck-header[class*="pf-bg--"] {
  border-radius: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  margin-bottom: 4px;
}
.ck-header-main .pf-avatar-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  box-sizing: content-box;
  border-radius: 50%;
  padding: 5px;
  line-height: 0;
  isolation: isolate;
}

/* ── Identité multi-emplacements ──────────────────────────────────────── */
.pf-identity-avatar,
.pf-shop-avatar-preview {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  isolation: isolate;
}
.pf-shop-avatar-preview {
  width: 58px;
  height: 58px;
  padding: 5px;
}
.pf-sidebar-avatar {
  width: 52px;
  height: 52px;
  padding: 3px;
}
.pf-sidebar-avatar--sm {
  width: 36px;
  height: 36px;
  padding: 2px;
}
.ck-account-avatar {
  width: 72px;
  height: 72px;
  padding: 5px;
}
.pf-identity-avatar__clip {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
}
.pf-identity-avatar__clip > .pu-avatar {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit !important;
  object-fit: cover;
  object-position: center;
}
.pf-shape--hex .pf-identity-avatar__clip {
  border-radius: 0;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.pf-shape--diamond .pf-identity-avatar__clip {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.pf-shape--shield .pf-identity-avatar__clip {
  border-radius: 0;
  clip-path: polygon(50% 0, 92% 16%, 86% 70%, 50% 100%, 14% 70%, 8% 16%);
}
.pf-shape--sovereign .pf-identity-avatar__clip {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 22%, 84% 100%, 16% 100%, 0 22%);
}

.pf-cosmetic-badge {
  position: absolute;
  z-index: 8;
  right: -5px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 2px solid var(--surface);
  border-radius: 9px;
  color: #fff;
  background: #475569;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .35);
}
.pf-cosmetic-badge svg { width: 16px; height: 16px; fill: currentColor; }
.pf-cosmetic-badge--compact {
  right: -4px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  border-radius: 7px;
}
.pf-cosmetic-badge--compact svg { width: 12px; height: 12px; }
.pf-badge--flame { color: #fff7ed; background: linear-gradient(145deg, #fb923c, #dc2626); }
.pf-badge--bolt { color: #1c1917; background: linear-gradient(145deg, #fde047, #f59e0b); }
.pf-badge--star { background: linear-gradient(145deg, #60a5fa, #7c3aed); }
.pf-badge--skull { background: linear-gradient(145deg, #64748b, #111827); }
.pf-badge--crown { color: #422006; background: linear-gradient(145deg, #fde68a, #f59e0b); animation: pf-badge-crown 2.8s ease-in-out infinite; }
.pf-badge--pumpkin { color: #2b0a02; background: linear-gradient(145deg, #fb923c, #ef4444); animation: pf-badge-pumpkin 3s ease-in-out infinite; }
.pf-badge--sovereign {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  color: #fff6d0;
  background:
    radial-gradient(circle at 50% 50%, #16120c 0 62%, transparent 63%),
    conic-gradient(#fff4c2, #fbbf24, #a78bfa, #fde68a, #fff4c2);
  box-shadow:
    0 0 0 1px #120e08,
    0 0 0 2px rgba(255, 244, 194, .9),
    0 6px 14px rgba(0, 0, 0, .4);
}
.pf-badge--sovereign svg {
  width: 16px;
  height: 16px;
}
.pf-badge--sovereign::after { content: none; }
.pf-badge--sovereign.pf-cosmetic-badge--compact {
  width: 20px;
  height: 20px;
}
.pf-badge--sovereign.pf-cosmetic-badge--compact svg { width: 11px; height: 11px; }
@keyframes pf-badge-crown { 50% { box-shadow: 0 5px 22px rgba(251, 191, 36, .72); } }
@keyframes pf-badge-pumpkin { 50% { filter: brightness(1.18); } }

.pf-avatar-fx--sparks::before,
.pf-avatar-fx--sparks::after,
.pf-avatar-fx--stardust::before,
.pf-avatar-fx--stardust::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9px;
  border-radius: 50%;
  pointer-events: none;
}
.pf-avatar-fx--sparks::before {
  background: conic-gradient(transparent 0 10%, #fbbf24 11% 13%, transparent 14% 36%, #fb7185 37% 39%, transparent 40% 70%, #38bdf8 71% 73%, transparent 74%);
  animation: pf-fx-spin 5s linear infinite;
}
.pf-avatar-fx--scan::after {
  content: "";
  position: absolute;
  z-index: 6;
  left: 5%;
  right: 5%;
  height: 2px;
  top: 15%;
  background: #22d3ee;
  box-shadow: 0 0 10px #22d3ee;
  animation: pf-fx-scan 2.2s ease-in-out infinite alternate;
  pointer-events: none;
}
.pf-avatar-fx--flame::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px;
  border-radius: 45% 55% 48% 52%;
  background: radial-gradient(circle at 50% 75%, rgba(251, 191, 36, .65), rgba(239, 68, 68, .5) 42%, transparent 68%);
  filter: blur(3px);
  animation: pf-fx-flame 2s ease-in-out infinite;
}
.pf-avatar-fx--stardust::before {
  background:
    radial-gradient(circle at 12% 26%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 84% 18%, #c4b5fd 0 2px, transparent 3px),
    radial-gradient(circle at 92% 74%, #67e8f9 0 1px, transparent 2px),
    radial-gradient(circle at 18% 88%, #f0abfc 0 2px, transparent 3px);
  animation: pf-fx-spin 7s linear infinite;
}
@keyframes pf-fx-spin { to { transform: rotate(360deg); } }
@keyframes pf-fx-scan { from { top: 16%; } to { top: 82%; } }
@keyframes pf-fx-flame { 50% { transform: scale(1.09) translateY(-2px); filter: blur(5px); } }

.pf-user-title {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font: 800 .6rem/1.25 var(--ck-mono, ui-monospace, monospace);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pf-title--closer { color: #4ade80; border-color: rgba(74, 222, 128, .38); background: rgba(74, 222, 128, .08); }
.pf-title--phantom { color: #93c5fd; border-color: rgba(96, 165, 250, .4); background: rgba(59, 130, 246, .08); }
.pf-title--elite { color: #d8b4fe; border-color: rgba(192, 132, 252, .42); background: rgba(168, 85, 247, .1); }
.pf-title--legend {
  color: #fde68a;
  border-color: rgba(251, 191, 36, .52);
  background: linear-gradient(90deg, rgba(251, 191, 36, .1), rgba(168, 85, 247, .13));
  animation: pf-title-shine 3s ease-in-out infinite;
}
.pf-title--sovereign {
  color: #1c1404;
  border-color: transparent;
  background: linear-gradient(90deg, #fde68a, #fbbf24 40%, #c4b5fd);
  animation: pf-title-shine 3s ease-in-out infinite;
}
@keyframes pf-title-shine { 50% { filter: brightness(1.28); } }

.pf-name--ruby { color: #fb7185 !important; text-shadow: 0 0 18px rgba(244, 63, 94, .4); }
.pf-name--neon {
  color: #67e8f9 !important;
  text-shadow: 0 0 8px rgba(34, 211, 238, .65), 0 0 22px rgba(34, 211, 238, .35);
  animation: pf-name-neon 3s ease-in-out infinite;
}
.pf-name--glitch {
  color: #fff !important;
  text-shadow: 2px 0 #22d3ee, -2px 0 #f43f5e;
  animation: pf-name-glitch 2.6s steps(1) infinite;
}
.pf-name--prismatic {
  color: transparent !important;
  background: linear-gradient(90deg, #67e8f9, #c084fc, #fb7185, #fde047, #67e8f9);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: pf-name-prismatic 5s linear infinite;
}
.ck-title b.pf-name--ruby,
.ck-title b.pf-name--neon,
.ck-title b.pf-name--glitch {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
}
.ck-title b.pf-name--prismatic {
  -webkit-text-fill-color: transparent;
}
@keyframes pf-name-neon { 50% { filter: brightness(1.25); } }
@keyframes pf-name-glitch { 0%, 88%, 100% { transform: translate(0); } 90% { transform: translateX(2px); } 92% { transform: translateX(-2px); } }
@keyframes pf-name-prismatic { to { background-position: 220% 0; } }
.pf-name--sovereign {
  color: transparent !important;
  background: linear-gradient(100deg, #fde68a, #fff7d6 28%, #c4b5fd 68%, #fbbf24);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: pf-name-prismatic 5s linear infinite;
}

.pf-bg--sovereign,
.pf-item.pf-bg--sovereign .pf-item__swatch,
.pf-thumb__swatch.pf-bg--sovereign {
  background: #07060d;
}
.pf-item__swatch.pf-bg--sovereign,
.pf-thumb__swatch.pf-bg--sovereign { position: relative; overflow: hidden; }
.pf-item__swatch.pf-bg--sovereign::before,
.pf-thumb__swatch.pf-bg--sovereign::before,
.pf-preview.pf-bg--sovereign::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 18% 78%, rgba(124, 58, 237, .72), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(253, 230, 138, .62), transparent 24%),
    radial-gradient(circle at 62% 72%, rgba(244, 114, 182, .38), transparent 26%),
    radial-gradient(circle at 40% 30%, rgba(56, 189, 248, .22), transparent 22%),
    linear-gradient(160deg, rgba(20, 14, 28, .2), rgba(7, 6, 13, .05));
  background-size: 160% 160%;
  animation: pf-bg-sovereign 14s ease-in-out infinite;
  pointer-events: none;
}
.pf-preview.pf-bg--sovereign {
  background:
    radial-gradient(circle at 70% 40%, rgba(124, 58, 237, .28), transparent 36%),
    #07060d;
}
.pf-preview.pf-bg--sovereign::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 6, 13, .78), rgba(7, 6, 13, .08) 72%),
    radial-gradient(circle at 12% 86%, rgba(124, 58, 237, .75), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(253, 230, 138, .7), transparent 28%),
    radial-gradient(circle at 70% 78%, rgba(244, 114, 182, .42), transparent 30%),
    radial-gradient(circle at 46% 24%, rgba(125, 211, 252, .28), transparent 24%);
  background-size: 100% 100%, 180% 180%, 170% 170%, 190% 190%, 160% 160%;
}
.pf-preview.pf-bg--sovereign::after {
  border-color: rgba(253, 230, 138, .45);
  box-shadow:
    0 0 0 28px rgba(124, 58, 237, .14),
    0 0 0 58px rgba(253, 230, 138, .06),
    0 0 70px rgba(251, 191, 36, .35);
  animation: pf-sovereign-orbit 16s linear infinite;
}
@keyframes pf-bg-sovereign {
  0%, 100% { background-position: 0% 60%, 100% 0%, 40% 100%, 20% 20%, 0 0; }
  50% { background-position: 70% 10%, 10% 80%, 80% 30%, 60% 70%, 0 0; }
}
@keyframes pf-sovereign-orbit {
  to { transform: rotate(360deg); }
}
.pf-frame--sovereign {
  box-shadow:
    0 0 0 2px #1c1404,
    0 0 0 5px #fbbf24,
    0 0 0 8px rgba(124, 58, 237, .55),
    0 0 28px rgba(251, 191, 36, .55);
  animation: pf-legend-glow 2.8s ease-in-out infinite;
}
.pf-avatar-fx--sovereign::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(transparent 0 18%, #fde68a 19% 24%, transparent 25% 58%, #c4b5fd 59% 64%, transparent 65%);
  animation: pf-fx-spin 6s linear infinite;
}
.pf-banner--sovereign {
  height: 7px;
  background: linear-gradient(90deg, #7c3aed, #fde68a, #fbbf24, #7c3aed);
  background-size: 200% 100%;
  animation: pf-banner-flow 5s linear infinite;
}
.pf-skin--sovereign {
  --ck-panel: #1a1408;
  --ck-panel-2: #07060b;
  --ck-line: rgba(251, 191, 36, .28);
  --ck-amber: #fbbf24;
  --ck-amber-2: #c4b5fd;
  --accent: #fbbf24;
  --accent-rgb: 251, 191, 36;
}
.pf-entry--sovereign { animation: pf-entry-flash .7s ease-out both; }
.pf-sovereign {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(251, 191, 36, .45);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(251, 191, 36, .16), transparent 42%),
    var(--surface);
}
.pf-sovereign h2 { margin: 0; font: 700 1.2rem/1.2 var(--ck-display, sans-serif); }
.pf-sovereign p { margin: 6px 0 12px; color: var(--muted); font-size: .8rem; }
.pf-sovereign__state {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fde68a;
  font-weight: 800;
}
@media (max-width: 800px) {
  .pf-sovereign { grid-template-columns: 1fr; }
}

/* Bannières et skins */
.pf-profile-banner,
.pf-cockpit-banner {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  pointer-events: none;
}
.pf-banner--operator { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.pf-banner--redline { background: repeating-linear-gradient(90deg, #ef4444 0 28px, #7f1d1d 28px 34px); animation: pf-banner-flow 5s linear infinite; }
.pf-banner--royal { height: 7px; background: linear-gradient(90deg, #7c3aed, #fbbf24, #7c3aed); background-size: 200% 100%; animation: pf-banner-flow 5s linear infinite; }
.pf-banner--haunted { height: 7px; background: linear-gradient(90deg, #7f1d1d, #fb923c, #450a0a); animation: pf-banner-pulse 3s ease-in-out infinite; }
.pf-banner--winter { height: 7px; background: linear-gradient(90deg, #0284c7, #e0f2fe, #8b5cf6); background-size: 200% 100%; animation: pf-banner-flow 6s linear infinite; }
@keyframes pf-banner-flow { to { background-position: 200% 0; } }
@keyframes pf-banner-pulse { 50% { filter: brightness(1.35); } }

.pf-skin--matrix {
  --ck-panel: #07150d;
  --ck-panel-2: #031009;
  --ck-line: rgba(74, 222, 128, .2);
  --ck-amber: #4ade80;
  --ck-amber-2: #86efac;
  --accent: #4ade80;
  --accent-rgb: 74, 222, 128;
}
.pf-skin--cyber {
  --ck-panel: #10102a;
  --ck-panel-2: #0a1020;
  --ck-line: rgba(34, 211, 238, .22);
  --ck-amber: #22d3ee;
  --ck-amber-2: #e879f9;
  --accent: #22d3ee;
  --accent-rgb: 34, 211, 238;
}
.pf-skin--inferno {
  --ck-panel: #24100b;
  --ck-panel-2: #110705;
  --ck-line: rgba(249, 115, 22, .24);
  --ck-amber: #f97316;
  --ck-amber-2: #facc15;
  --accent: #f97316;
  --accent-rgb: 249, 115, 22;
}
.pf-skin--galaxy {
  --ck-panel: #16102b;
  --ck-panel-2: #070615;
  --ck-line: rgba(192, 132, 252, .23);
  --ck-amber: #c084fc;
  --ck-amber-2: #67e8f9;
  --accent: #c084fc;
  --accent-rgb: 192, 132, 252;
}
.pf-skin--bloodmoon {
  --ck-panel: #24090d;
  --ck-panel-2: #0f0305;
  --ck-line: rgba(248, 113, 113, .22);
  --ck-amber: #ef4444;
  --ck-amber-2: #fb923c;
  --accent: #ef4444;
  --accent-rgb: 239, 68, 68;
}
.cockpit[class*="pf-skin--"] {
  padding: 16px;
  border: 1px solid var(--ck-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 2%, rgba(var(--accent-rgb), .11), transparent 30%),
    color-mix(in srgb, var(--ck-panel-2) 65%, transparent);
}

/* Animations d'entrée : une seule lecture à l'ouverture */
.pf-entry--hologram { animation: pf-entry-hologram .65s cubic-bezier(.2, .8, .2, 1) both; }
.pf-entry--glitch { animation: pf-entry-glitch .5s steps(2) both; }
.pf-entry--flash { animation: pf-entry-flash .6s ease-out both; }
@keyframes pf-entry-hologram { from { opacity: 0; transform: translateY(12px) scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pf-entry-glitch { 0% { opacity: 0; transform: translateX(-8px); filter: hue-rotate(90deg); } 45% { opacity: .7; transform: translateX(5px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes pf-entry-flash { 0% { opacity: 0; filter: brightness(3); } 100% { opacity: 1; filter: brightness(1); } }

/* Aperçus des nouveaux types dans la boutique */
.pf-item__special-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  gap: 8px;
  background: radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .12), transparent 45%), #080b12;
}
.pf-item__special-preview .pf-cosmetic-badge {
  position: relative;
  right: auto;
  bottom: auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.pf-item__special-preview .pf-cosmetic-badge svg { width: 27px; height: 27px; }
.pf-item__special-preview > span:last-child:not(.pf-user-title) { color: var(--muted); font-size: .68rem; }
.pf-name-demo { max-width: 90%; font: 700 1.15rem var(--ck-display, sans-serif); text-align: center; }
.pf-skin-demo,
.pf-banner-demo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ck-panel-2, #080b12);
}
.pf-skin-demo {
  display: grid;
  grid-template-columns: 30% 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 7px;
  padding: 22px;
}
.pf-skin-demo i { border: 1px solid var(--ck-line, var(--border)); border-radius: 8px; background: var(--ck-panel, var(--surface)); }
.pf-skin-demo i:first-child { grid-row: 1 / 3; }
.pf-skin-demo span,
.pf-banner-demo span {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 10px;
  color: rgba(255, 255, 255, .7);
  font: 700 .58rem var(--ck-mono, monospace);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pf-banner-demo::before { content: ""; position: absolute; inset: 0; background: inherit; }
.pf-banner-demo[class*="pf-banner--"] { background-color: #080b12; background-size: 100% 7px; background-repeat: no-repeat; }
.pf-entry-demo { color: var(--accent-light); font: 800 .72rem var(--ck-mono, monospace); letter-spacing: .14em; }
.pf-item__unavailable {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}
.pf-limited-tag {
  padding: 2px 7px;
  border: 1px solid rgba(251, 146, 60, .35);
  border-radius: 999px;
  color: #fdba74;
  font-size: .57rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* Packs */
.pf-pack-section { margin: 4px 0 24px; }
.pf-pack-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.pf-pack-section__head h3 { margin: 0; font: 700 1.05rem var(--ck-display, sans-serif); }
.pf-pack-section__head > span { color: var(--muted); font-size: .72rem; }
.pf-pack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pf-pack {
  --pack-accent: var(--accent);
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--surface), var(--surface2));
}
.pf-pack::before {
  content: "";
  position: absolute;
  right: -50px;
  top: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pack-accent) 28%, transparent);
  filter: blur(18px);
  pointer-events: none;
}
.pf-pack--starter { --pack-accent: #60a5fa; }
.pf-pack--neon { --pack-accent: #22d3ee; }
.pf-pack--tactical { --pack-accent: #94a3b8; }
.pf-pack--inferno { --pack-accent: #f97316; }
.pf-pack--horizon { --pack-accent: #38bdf8; }
.pf-pack--ruby { --pack-accent: #fb7185; }
.pf-pack--void { --pack-accent: #a78bfa; }
.pf-pack--aurora { --pack-accent: #34d399; }
.pf-pack--legend { --pack-accent: #fbbf24; }
.pf-pack--supernova { --pack-accent: #f472b6; }
.pf-pack--bloodmoon { --pack-accent: #ef4444; }
.pf-pack--winter { --pack-accent: #7dd3fc; }
.pf-shop-credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
  text-align: right;
}
.pf-shop-credits strong {
  font: 800 1.15rem/1 var(--ck-mono, ui-monospace, monospace);
}
.pf-shop-credits strong small {
  color: var(--accent);
  font-size: .62rem;
}
.pf-shop-credits span { color: var(--muted); font-size: .78rem; }
.pf-pack__top { display: flex; justify-content: space-between; gap: 10px; }
.pf-pack__collection { color: var(--pack-accent, var(--accent)); font: 800 .62rem var(--ck-mono, monospace); text-transform: uppercase; letter-spacing: .08em; }
.pf-pack__discount { padding: 3px 7px; border-radius: 7px; color: #fff; background: color-mix(in srgb, var(--pack-accent, var(--accent)) 65%, #111); font-size: .65rem; font-weight: 800; }
.pf-pack h4 { margin: 12px 0 4px; font: 700 1.05rem var(--ck-display, sans-serif); }
.pf-pack > p { margin: 0; color: var(--muted); font-size: .76rem; }
.pf-pack__items { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0; }
.pf-pack-thumb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 74px;
}
.pf-pack-thumb .pf-thumb__art { height: 52px; }
.pf-pack-thumb em {
  overflow: hidden;
  color: var(--muted);
  font-size: .58rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-pack-thumb.is-owned em { color: #86efac; text-decoration: line-through; }
.pf-pack__timer { color: var(--pack-accent, var(--accent)) !important; font: 700 .68rem var(--ck-mono, monospace) !important; }
.pf-pack__foot { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 15px; }
.pf-pack__foot del { display: block; color: var(--muted); font-size: .65rem; }
.pf-pack__foot strong { font: 800 1.05rem var(--ck-mono, monospace); }
.pf-pack__foot strong small { color: var(--accent); font-size: .55rem; }
.pf-pack__foot .btn { min-height: 42px; }
.pf-pack__owned { color: #86efac; font-size: .72rem; font-weight: 800; }
.pf-pack.is-unavailable { opacity: .7; }
.pf-pack.is-complete { border-color: rgba(74, 222, 128, .32); }

@media (max-width: 760px) {
  .pf-pack-grid { grid-template-columns: 1fr; }
  .pf-pack-section__head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pf-shop-credits { justify-content: flex-start; text-align: left; }
  .pf-tabs { overflow-x: auto; }
}
@media (min-width: 1200px) {
  .pf-pack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
  [data-panel-scope="panel"] .layout.is-sidebar-collapsed .pf-sidebar-avatar {
    width: 40px;
    height: 40px;
    padding: 2px;
  }
  [data-panel-scope="panel"] .layout.is-sidebar-collapsed .pf-sidebar-avatar .pf-cosmetic-badge {
    right: -2px;
    bottom: -2px;
    width: 16px;
    height: 16px;
  }
  [data-panel-scope="panel"] .layout.is-sidebar-collapsed .sidebar-user {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pf-cosmetic-badge,
  [class*="pf-avatar-fx--"],
  [class*="pf-name--"],
  [class*="pf-banner--"],
  [class*="pf-entry--"] {
    animation: none !important;
  }
  .pf-badge--sovereign::after,
  .pf-preview.pf-bg--sovereign::before,
  .pf-preview.pf-bg--sovereign::after,
  .pf-item__swatch.pf-bg--sovereign::before,
  .pf-thumb__swatch.pf-bg--sovereign::before,
  [class*="pf-avatar-fx--"]::before,
  [class*="pf-avatar-fx--"]::after {
    animation: none !important;
  }
}