/* Progression — artefacts portés. Chargée sur tout le site : un cadre d'avatar se voit dans la
   navbar et sur les fiches de campagne, pas seulement sur les pages du module. */

/* Cadres d'avatar */

.pg-avatar-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--pg-frame-orn, none);
    pointer-events: none;
}

.pg-art-avatar_frame-laurier {
    --pg-frame: conic-gradient(from 210deg, #6f7d43, #a8bd76, #5f6c39, #94ab68, #6f7d43);
    --pg-frame-orn:
        repeating-conic-gradient(from 6deg, rgba(255, 255, 255, .5) 0 3deg, transparent 3deg 12deg),
        repeating-conic-gradient(from 0deg, rgba(30, 40, 18, .45) 0 1.5deg, transparent 1.5deg 12deg);
}

.pg-art-avatar_frame-runes {
    --pg-frame: conic-gradient(from 0deg, #2b3a55, #98c1d9, #24334d, #6f97b8, #2b3a55);
    --pg-frame-orn:
        repeating-conic-gradient(from 0deg, rgba(226, 244, 255, .9) 0 2deg, transparent 2deg 15deg),
        repeating-conic-gradient(from 7.5deg, rgba(8, 16, 30, .55) 0 1.2deg, transparent 1.2deg 15deg);
    --pg-frame-glow: 0 0 14px rgba(61, 90, 128, .45);
}

.pg-art-avatar_frame-epines {
    --pg-frame: conic-gradient(from 40deg, #2f231a, #8c6849, #241a12, #6d5137, #2f231a);
    --pg-frame-orn:
        repeating-conic-gradient(from 0deg, rgba(12, 8, 5, .6) 0 2deg, transparent 2deg 10deg),
        repeating-conic-gradient(from 5deg, rgba(255, 226, 180, .4) 0 1deg, transparent 1deg 30deg);
}

.pg-art-avatar_frame-flammes {
    --pg-frame: conic-gradient(from 90deg, #7c1f0c, #f2a03d, #a8300f, #e2652a, #7c1f0c);
    --pg-frame-orn:
        repeating-conic-gradient(from 0deg, rgba(255, 226, 150, .65) 0 2.5deg, transparent 2.5deg 8deg),
        radial-gradient(circle, transparent 62%, rgba(255, 120, 20, .55) 100%);
    --pg-frame-glow: 0 0 18px rgba(226, 101, 42, .55);
}

.pg-art-avatar_frame-cristal {
    --pg-frame: conic-gradient(from 150deg, #3f3480, #b8a9ff, #2c2560, #9a8cf0, #3f3480);
    --pg-frame-orn:
        repeating-conic-gradient(from 0deg,
            rgba(255, 255, 255, .5) 0 7deg,
            rgba(20, 12, 60, .35) 7deg 15deg);
    --pg-frame-glow: 0 0 18px rgba(154, 140, 240, .55);
}

.pg-art-avatar_frame-abysses {
    --pg-frame: conic-gradient(from 270deg, #05070f, #3a506b, #02030a, #1c2541, #05070f);
    --pg-frame-orn:
        repeating-conic-gradient(from 0deg, rgba(130, 180, 230, .32) 0 6deg, transparent 6deg 26deg),
        radial-gradient(circle, transparent 55%, rgba(0, 0, 0, .65) 100%);
    --pg-frame-glow: 0 0 22px rgba(58, 80, 107, .7);
}

/* Bannières de profil */
.pg-banner {
    background: var(--pg-banner, transparent);
    background-size: cover;
    background-position: center;
}

.pg-art-profile_banner-parchemin  { --pg-banner: linear-gradient(135deg, #e8dcc0 0%, #d9c8a0 45%, #c9b287 100%);
                                    --pg-banner-opacity: .55; }
.pg-art-profile_banner-foret      { --pg-banner: linear-gradient(160deg, #2f4a34 0%, #5b7f52 55%, #94b06d 100%);
                                    --pg-banner-opacity: .28; }
.pg-art-profile_banner-crepuscule { --pg-banner: linear-gradient(160deg, #2b2545 0%, #7d4f6d 50%, #e0906b 100%);
                                    --pg-banner-opacity: .28; }
.pg-art-profile_banner-grimoire   { --pg-banner: linear-gradient(140deg, #3b2c22 0%, #6b5136 50%, #a68a5b 100%);
                                    --pg-banner-opacity: .26; }
.pg-art-profile_banner-aurore     { --pg-banner: linear-gradient(160deg, #1b3b5a 0%, #4d8fa8 45%, #f0c76e 100%);
                                    --pg-banner-opacity: .30; }
.pg-art-profile_banner-nuit       { --pg-banner: radial-gradient(120% 90% at 30% 15%, #2a3a63 0%, #131a33 55%, #060912 100%);
                                    --pg-banner-opacity: .22; }

/* Bordures de niveau */
.pg-level-frame {
    position: relative;
    padding: 3px;
    border-radius: 50%;
    background: var(--pg-level, transparent);
    box-shadow: var(--pg-level-glow, none);
}

.pg-level-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--pg-level-orn, none);
    pointer-events: none;
}

.pg-level-frame > * {
    position: relative;
    z-index: 1;
    border-radius: 50%;
}

.pg-art-level_frame-bronze {
    --pg-level: conic-gradient(from 30deg, #8a5836, #c98d5e, #7a4c2e, #b57b4d, #8a5836);
    --pg-level-orn: repeating-conic-gradient(from 0deg, rgba(60, 30, 12, .35) 0 4deg, transparent 4deg 24deg);
}

.pg-art-level_frame-argent {
    --pg-level: conic-gradient(from 0deg, #98a3ac, #eef3f7, #869199, #cdd6dd, #98a3ac);
    --pg-level-orn: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .6) 0 3deg, rgba(70, 82, 92, .3) 3deg 9deg);
}

.pg-art-level_frame-or {
    --pg-level: conic-gradient(from 60deg, #b8891c, #ffe08a, #a97c14, #e8bf55, #b8891c);
    --pg-level-orn: repeating-conic-gradient(from 0deg, rgba(255, 246, 200, .65) 0 5deg, rgba(120, 80, 8, .3) 5deg 15deg);
    --pg-level-glow: 0 0 12px rgba(212, 167, 44, .55);
}

.pg-art-level_frame-emeraude {
    --pg-level: conic-gradient(from 120deg, #2c7350, #7fd8ab, #245e42, #4fae7d, #2c7350);
    --pg-level-orn: repeating-conic-gradient(from 0deg, rgba(226, 255, 240, .5) 0 6deg, rgba(8, 46, 30, .35) 6deg 18deg);
    --pg-level-glow: 0 0 12px rgba(63, 155, 109, .5);
}

.pg-art-level_frame-obsidienne {
    --pg-level: conic-gradient(from 200deg, #0d0d12, #3a3a4d, #06060a, #23232f, #0d0d12);
    --pg-level-orn: repeating-conic-gradient(from 0deg, rgba(180, 190, 235, .45) 0 2deg, transparent 2deg 20deg);
    --pg-level-glow: 0 0 14px rgba(120, 120, 160, .6);
}

.pg-art-call_gm-cor,
.pg-art-call_players-banniere { --pg-frame: none; }

/* Le porté */
.pg-avatar-frame {
    display: inline-flex;
    padding: var(--pg-frame-width, 6px);
    border-radius: 50%;
    position: relative;
    background: var(--pg-frame, transparent);
    box-shadow: var(--pg-frame-glow, none);
    line-height: 0;
}

.pg-avatar-frame > * {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    display: block;
}

.pg-avatar-frame--sm { --pg-frame-width: 3px; }
.pg-avatar-frame--lg { --pg-frame-width: 8px; }

.pg-banner-card {
    position: relative;
}

.pg-banner-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pg-banner, transparent);
    background-size: cover;
    background-position: center;
    opacity: var(--pg-banner-opacity, .3);
    pointer-events: none;
}

.pg-banner-card > * {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pg-avatar-frame { box-shadow: none; }
}

.pg-av-xs { width: 28px; height: 28px; object-fit: cover; }
.pg-av-sm { width: 44px; height: 44px; object-fit: cover; }
.pg-av-md { width: 64px; height: 64px; object-fit: cover; }
.pg-av-lg { width: 96px; height: 96px; object-fit: cover; }
.pg-av-xl { width: 120px; height: 120px; object-fit: cover; }