/* Progression — pages du module : badges, classement, boutique, inventaire, tirages. */

.progression-badge,
.progression-emblem {
    --pg-rarity: var(--secondary-rgb, 200, 121, 65);
    --pg-glow: .30;
    --pg-sweep: 3.4s;
}

.progression-badge[data-rarity="rare"],
.progression-emblem[data-rarity="rare"]             { --pg-rarity: var(--bs-info-rgb, 23, 162, 184);    --pg-glow: .45; --pg-sweep: 2.6s; }
.progression-badge[data-rarity="epique"],
.progression-emblem[data-rarity="epique"]           { --pg-rarity: var(--primary-rgb, 85, 107, 47);     --pg-glow: .60; --pg-sweep: 1.9s; }
.progression-badge[data-rarity="legendaire"],
.progression-emblem[data-rarity="legendaire"]       { --pg-rarity: var(--bs-warning-rgb, 255, 193, 7);  --pg-glow: .80; --pg-sweep: 1.3s; }

.progression-badge                                  { --pg-border: rgba(var(--bs-dark-rgb, 42, 42, 42), .28); }
.progression-badge[data-rarity="rare"],
.progression-badge[data-rarity="epique"],
.progression-badge[data-rarity="legendaire"]        { --pg-border: rgba(var(--pg-rarity), .6); }

.progression-badge {
    --pg-ring: 0 0 0 0 rgba(var(--pg-rarity), 0);
    --pg-lift: 0 .125rem .35rem rgba(var(--bs-dark-rgb, 42, 42, 42), .09);

    border: 1px solid var(--pg-border);

    box-shadow: var(--pg-ring), var(--pg-lift) !important;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1),
                box-shadow .22s ease,
                border-color .22s ease,
                background-color .22s ease;
}

.progression-badge[data-state="locked"] {
    --pg-border: rgba(var(--bs-dark-rgb, 42, 42, 42), .22);
}

.progression-badge-state {
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.progression-badge::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: .5rem .5rem 0 0;
    background: rgba(var(--pg-rarity), .55);
    opacity: .75;
    transition: opacity .22s ease, height .22s ease;
    pointer-events: none;
}

.progression-badge[data-state="locked"]::before {
    opacity: .2;
}

.progression-badge:hover,
.progression-badge:focus-visible {
    transform: translateY(-5px);
    --pg-border: rgba(var(--bs-dark-rgb, 42, 42, 42), .45);
    --pg-lift: 0 .75rem 1.6rem rgba(var(--bs-dark-rgb, 42, 42, 42), .16);
}

.progression-badge[data-rarity="rare"]:hover,
.progression-badge[data-rarity="epique"]:hover,
.progression-badge[data-rarity="legendaire"]:hover,
.progression-badge[data-rarity="rare"]:focus-visible,
.progression-badge[data-rarity="epique"]:focus-visible,
.progression-badge[data-rarity="legendaire"]:focus-visible {
    --pg-border: rgba(var(--pg-rarity), .9);
}

.progression-badge:hover::before,
.progression-badge:focus-visible::before {
    opacity: 1;
    height: 4px;
}

.progression-badge--pinnable {
    cursor: pointer;
}

.progression-badge[data-pinned="1"] {
    --pg-ring: 0 0 0 2px rgba(var(--primary-rgb, 85, 107, 47), .9);
}

.progression-badge:focus-visible {
    outline: none;
    --pg-ring: 0 0 0 3px rgba(var(--primary-rgb, 85, 107, 47), .45);
}

.progression-badge-pin {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(var(--primary-rgb, 85, 107, 47), .12);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1), background-color .2s ease;
    pointer-events: none;
}

.progression-badge:hover .progression-badge-pin,
.progression-badge:focus-visible .progression-badge-pin {
    opacity: .6;
    transform: scale(1) rotate(-20deg);
}

.progression-badge[data-pinned="1"] .progression-badge-pin {
    opacity: 1;
    transform: scale(1) rotate(-35deg);
    background: rgba(var(--primary-rgb, 85, 107, 47), .18);
}

.progression-emblem {
    position: relative;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), filter .28s ease;
}

.progression-badge:hover .progression-emblem,
.progression-badge:focus-visible .progression-emblem,
.progression-pin-chip:hover .progression-emblem,
.progression-showcase-item:hover .progression-emblem,
.progression-showcase-item:focus-visible .progression-emblem {
    transform: scale(1.1);
    filter: drop-shadow(0 .35rem .75rem rgba(var(--pg-rarity), var(--pg-glow)));
}

.progression-badge[data-state="locked"]:hover .progression-emblem,
.progression-badge[data-state="locked"]:focus-visible .progression-emblem {
    filter: none;
    transform: scale(1.05);
}

.progression-shimmer {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    border-radius: 10%;
}

.progression-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 38%,
        rgba(255, 255, 255, calc(var(--pg-glow) * .8)) 50%,
        transparent 62%);
    transform: translateX(-130%);
    pointer-events: none;
}

.progression-badge:hover .progression-shimmer::after,
.progression-badge:focus-visible .progression-shimmer::after,
.progression-pin-chip:hover .progression-shimmer::after,
.progression-showcase-item:hover .progression-shimmer::after,
.progression-showcase-item:focus-visible .progression-shimmer::after {
    animation: progression-sweep var(--pg-sweep, 3.4s) ease-in-out infinite;
}

/* Le légendaire brille en permanence */
.progression-badge .progression-shimmer[data-rarity="legendaire"]::after,
.progression-pin-chip .progression-shimmer[data-rarity="legendaire"]::after,
.progression-showcase-item .progression-shimmer[data-rarity="legendaire"]::after {
    animation: progression-sweep var(--pg-sweep) ease-in-out infinite;
}

.progression-glint[data-rarity="legendaire"]::before {
    content: "";
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(var(--pg-rarity), .75),
        rgba(var(--pg-rarity), .28) 62%,
        rgba(var(--pg-rarity), 0) 100%);
    animation: progression-aura 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes progression-aura {
    0%, 100% { opacity: .35; transform: scale(.9); }
    50%      { opacity: 1;   transform: scale(1.08); }
}

@keyframes progression-sweep {
    0%   { transform: translateX(-130%); }
    55%  { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}

.progression-tip {
    position: relative;
}

.progression-badge:hover,
.progression-badge:focus-within,
.progression-tip:hover,
.progression-tip:focus-visible {
    z-index: 3;
}

/* Masquée, l'infobulle est **retirée du flux** (`display: none`) et pas seulement rendue
   invisible : un élément en `visibility: hidden` compte encore dans la zone défilable, et ces
   bulles de 14 rem centrées sur leur icône dépassaient le bord droit de l'écran — c'est ce qui
   faisait défiler toute la page de progression horizontalement sur mobile.

   Le fondu est conservé par `transition-behavior: allow-discrete` et `@starting-style` ; là où le
   navigateur ne les connaît pas encore, l'infobulle apparaît d'un coup, ce qui n'enlève rien à
   l'information. La largeur est en plus bornée à l'écran, pour la bulle d'une carte en bord de
   page sur un très petit téléphone. */
.progression-tip[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: calc(100% + .6rem);
    transform: translateX(-50%) translateY(.3rem) scale(.96);
    transform-origin: bottom center;
    width: max-content;
    max-width: min(14rem, calc(100vw - 2rem));
    padding: .45rem .65rem;
    border-radius: .5rem;
    background: rgba(var(--bs-dark-rgb, 42, 42, 42), .96);
    color: #fff;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    display: none;
    opacity: 0;
    transition: opacity .16s ease, transform .16s cubic-bezier(.2, .7, .3, 1), display .16s;
    transition-behavior: allow-discrete;
    pointer-events: none;
    z-index: 10;
}

.progression-tip[data-tip]::before {
    content: "";
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: calc(100% + .3rem);
    width: .5rem;
    height: .5rem;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(var(--bs-dark-rgb, 42, 42, 42), .96);
    display: none;
    opacity: 0;
    transition: opacity .16s ease, display .16s;
    transition-behavior: allow-discrete;
    pointer-events: none;
    z-index: 10;
}

.progression-tip[data-tip]:hover::after,
.progression-tip[data-tip]:focus-visible::after {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.progression-tip[data-tip]:hover::before,
.progression-tip[data-tip]:focus-visible::before {
    display: block;
    opacity: 1;
}

@starting-style {
    .progression-tip[data-tip]:hover::after,
    .progression-tip[data-tip]:focus-visible::after {
        opacity: 0;
        transform: translateX(-50%) translateY(.3rem) scale(.96);
    }

    .progression-tip[data-tip]:hover::before,
    .progression-tip[data-tip]:focus-visible::before {
        opacity: 0;
    }
}

.progression-showcase-item {
    display: inline-flex;
    border-radius: .75rem;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.progression-showcase-item:hover {
    transform: translateY(-3px);
}

.progression-showcase-item:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb, 85, 107, 47), .55);
    outline-offset: 3px;
}

.progression-pin-chip {
    position: relative;
    display: inline-flex;
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    border-radius: .75rem;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.progression-pin-chip:hover {
    transform: translateY(-4px);
}

.progression-pin-chip:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb, 85, 107, 47), .55);
    outline-offset: 3px;
}

.progression-pin-chip-remove {
    position: absolute;
    top: -.3rem;
    right: -.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border-radius: 50%;
    font-size: .65rem;
    line-height: 1;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s ease, transform .18s cubic-bezier(.2, .7, .3, 1);
}

.progression-pin-chip:hover .progression-pin-chip-remove,
.progression-pin-chip:focus-visible .progression-pin-chip-remove {
    opacity: 1;
    transform: scale(1);
}

.progression-hidden {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .progression-badge,
    .progression-badge::before,
    .progression-emblem,
    .progression-pin-chip,
    .progression-pin-chip-remove,
    .progression-showcase-item,
    .progression-badge-pin,
    .progression-tip[data-tip]::after,
    .progression-tip[data-tip]::before {
        transition: none;
    }

    .progression-badge:hover,
    .progression-badge:focus-visible,
    .progression-pin-chip:hover,
    .progression-showcase-item:hover {
        transform: none;
    }

    .progression-badge:hover .progression-emblem,
    .progression-badge:focus-visible .progression-emblem,
    .progression-showcase-item:hover .progression-emblem,
    .progression-pin-chip:hover .progression-emblem {
        transform: none;
    }

    .progression-shimmer,
    .progression-shimmer::after,
    .progression-glint[data-rarity="legendaire"]::before {
        animation: none !important;
    }
}

.pg-hero {
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(var(--bs-primary-rgb), .22), transparent 62%),
        linear-gradient(180deg, rgba(var(--bs-primary-rgb), .10), rgba(var(--bs-primary-rgb), .02));
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), .18);
}

.pg-hero::after {
    content: "";
    display: block;
    height: 3px;
    margin-top: -1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--bs-warning-rgb), .55) 30%,
        rgba(var(--bs-warning-rgb), .9) 50%,
        rgba(var(--bs-warning-rgb), .55) 70%,
        transparent);
}

/* Médailles */
.pg-lb-medal {
    --pg-medal: var(--bs-secondary-rgb, 108, 117, 125);
    --pg-medal-glow: .35;
}

.pg-lb-medal[data-medal="1"] { --pg-medal: var(--bs-warning-rgb, 255, 193, 7);   --pg-medal-glow: .75; }
.pg-lb-medal[data-medal="2"] { --pg-medal: var(--bs-secondary-rgb, 108, 117, 125); --pg-medal-glow: .45; }
.pg-lb-medal[data-medal="3"] { --pg-medal: var(--bs-danger-rgb, 220, 53, 69);    --pg-medal-glow: .45; }

.pg-lb-portrait {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 3px solid rgba(var(--pg-medal), .85);
    box-shadow:
        0 0 0 6px rgba(var(--pg-medal), .12),
        0 .5rem 1.4rem rgba(var(--pg-medal), calc(var(--pg-medal-glow) * .40));
}

.pg-lb-medal[data-medal="1"] .pg-lb-portrait {
    width: 120px;
    height: 120px;
    animation: pg-lb-crown 3.2s ease-in-out infinite;
}

@keyframes pg-lb-crown {
    0%, 100% { box-shadow: 0 0 0 6px rgba(var(--pg-medal), .12), 0 .5rem 1.4rem rgba(var(--pg-medal), .30); }
    50%      { box-shadow: 0 0 0 10px rgba(var(--pg-medal), .18), 0 .6rem 2rem rgba(var(--pg-medal), .48); }
}

.pg-lb-portrait-fallback {
    background: rgba(var(--pg-medal), .12);
    color: rgba(var(--pg-medal), 1);
    font-family: 'Marcellus', serif;
    font-size: 2.2rem;
    line-height: 1;
}

.pg-lb-medal[data-medal="1"] .pg-lb-portrait-fallback { font-size: 2.8rem; }

/* Stèles du podium */
.pg-lb-plinth {
    border: 1px solid rgba(var(--pg-medal), .28);
    background: linear-gradient(180deg, rgba(var(--pg-medal), .10), rgba(var(--pg-medal), .02));
    transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}

.pg-lb-plinth:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.75rem rgba(var(--pg-medal), .22) !important;
}

@media (min-width: 768px) {
    .pg-lb-plinth[data-medal="1"] { min-height: 21rem; }
    .pg-lb-plinth[data-medal="2"],
    .pg-lb-plinth[data-medal="3"] { min-height: 17rem; }
}

/* Lignes du classement */
.pg-lb-row {
    border: 1px solid rgba(var(--bs-dark-rgb, 42, 42, 42), .10);
    border-left: 3px solid rgba(var(--bs-primary-rgb), .35);
    transition: transform .2s cubic-bezier(.2, .7, .3, 1),
                box-shadow .2s ease,
                border-color .2s ease;
}

.pg-lb-row:hover {
    transform: translateX(3px);
    border-left-color: rgba(var(--bs-primary-rgb), .9);
    box-shadow: 0 .4rem 1rem rgba(var(--bs-dark-rgb, 42, 42, 42), .10) !important;
}

.pg-lb-row[data-me="1"] {
    border-left-color: rgb(var(--bs-primary-rgb));
    background: rgba(var(--bs-primary-rgb), .07) !important;
}

.pg-lb-row[data-me="1"]:hover { transform: none; }

.pg-lb-rankno {
    width: 2.5rem;
    height: 2.5rem;
    font-family: 'Marcellus', serif;
    font-size: 1.05rem;
}

.pg-lb-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
}

.pg-lb-thumb-fallback {
    background: rgba(var(--bs-primary-rgb), .12);
    color: rgba(var(--bs-primary-rgb), 1);
    font-family: 'Marcellus', serif;
}

.pg-lb-bar {
    height: 4px;
    background: rgba(var(--bs-dark-rgb, 42, 42, 42), .08);
}

/* Boutique (/boutique) */

.pg-shop-card {
    --pg-kind: var(--bs-primary-rgb, 85, 107, 47);

    border: 1px solid rgba(var(--pg-kind), .28);
    box-shadow: 0 .125rem .35rem rgba(var(--bs-dark-rgb, 42, 42, 42), .09) !important;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1),
                box-shadow .22s ease,
                border-color .22s ease;
}

.pg-shop-card[data-kind="badge"]          { --pg-kind: var(--bs-warning-rgb, 255, 193, 7); }
.pg-shop-card[data-kind="temp_role"]      { --pg-kind: var(--bs-info-rgb, 23, 162, 184); }
.pg-shop-card[data-kind="boost"]          { --pg-kind: var(--bs-success-rgb, 25, 135, 84); }
.pg-shop-card[data-kind="channel"]        { --pg-kind: var(--bs-secondary-rgb, 108, 117, 125); }

.pg-shop-card[data-kind="avatar_frame"]   { --pg-kind: var(--bs-primary-rgb, 85, 107, 47); }
.pg-shop-card[data-kind="profile_banner"] { --pg-kind: var(--bs-info-rgb, 23, 162, 184); }
.pg-shop-card[data-kind="level_frame"]    { --pg-kind: var(--bs-warning-rgb, 255, 193, 7); }
.pg-shop-card[data-kind="call_gm"],
.pg-shop-card[data-kind="call_players"]   { --pg-kind: var(--bs-danger-rgb, 220, 53, 69); }

.pg-shop-card:hover,
.pg-shop-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(var(--pg-kind), .65);
    box-shadow: 0 .75rem 1.6rem rgba(var(--pg-kind), .22) !important;
}

.pg-shop-card[data-locked="1"] {
    --pg-kind: var(--bs-dark-rgb, 42, 42, 42);
    opacity: .72;
}

.pg-shop-card[data-locked="1"]:hover,
.pg-shop-card[data-locked="1"]:focus-within {
    transform: none;
    box-shadow: 0 .125rem .35rem rgba(var(--bs-dark-rgb, 42, 42, 42), .09) !important;
}

.pg-shop-glyph {
    width: 60px;
    height: 60px;
    background: rgba(var(--pg-kind), .12);
    color: rgb(var(--pg-kind));
}

.pg-shop-glyph--lg {
    width: 96px;
    height: 96px;
}

.pg-shop-card .badge,
.pg-inv-card .badge {
    white-space: normal;
    max-width: 100%;
}

.pg-shop-card .badge { text-align: left; }

.pg-shop-slot {
    width: 64px;
    height: 64px;
}

.pg-preview-sm {
    width: 52px;
    height: 52px;
}

.pg-banner.pg-preview-sm {
    width: 64px;
    height: 44px;
}

.pg-shop-price {
    background: rgba(var(--bs-warning-rgb), .15);
    color: rgba(var(--bs-dark-rgb, 42, 42, 42), .92);
    border: 1px solid rgba(var(--bs-warning-rgb), .45);
    font-variant-numeric: tabular-nums;
}

.pg-shop-card[data-afford="0"] .pg-shop-price {
    background: rgba(var(--bs-dark-rgb, 42, 42, 42), .07);
    border-color: rgba(var(--bs-dark-rgb, 42, 42, 42), .18);
}

/* Mes achats */
.pg-shop-entry {
    border-left: 2px solid rgba(var(--bs-primary-rgb), .18);
}

.pg-shop-entry:last-child {
    border-left-color: transparent;
}

.pg-shop-dot {
    width: 2.25rem;
    height: 2.25rem;
    margin-left: -1.125rem;
    background: rgba(var(--bs-primary-rgb), .12);
    color: rgb(var(--bs-primary-rgb));
    border: 2px solid rgba(var(--bs-primary-rgb), .35);
}

.pg-shop-entry[data-delivery="failed"] .pg-shop-dot {
    background: rgba(var(--bs-danger-rgb), .12);
    color: rgb(var(--bs-danger-rgb));
    border-color: rgba(var(--bs-danger-rgb), .45);
}

.pg-shop-entry[data-delivery="pending"] .pg-shop-dot {
    background: rgba(var(--bs-warning-rgb), .14);
    color: rgba(var(--bs-dark-rgb, 42, 42, 42), .8);
    border-color: rgba(var(--bs-warning-rgb), .5);
}

/* Ma progression : bandeau */
.pg-me-portrait {
    width: 132px;
    height: 132px;
    object-fit: cover;
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .pg-shop-card { transition: none; }
    .pg-shop-card:hover,
    .pg-shop-card:focus-within { transform: none; }
    .pg-lb-medal[data-medal="1"] .pg-lb-portrait { animation: none; }
    .pg-lb-plinth,
    .pg-lb-row { transition: none; }
    .pg-lb-plinth:hover,
    .pg-lb-row:hover { transform: none; }
}

/* Cartes d'inventaire */
.pg-inv-card {
    --pg-rar: var(--bs-secondary-rgb, 108, 117, 125);

    border: 1px solid rgba(var(--pg-rar), .35);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease, border-color .22s ease;
}

.pg-inv-card[data-rarity="rare"]       { --pg-rar: var(--bs-info-rgb, 23, 162, 184); }
.pg-inv-card[data-rarity="epique"]     { --pg-rar: var(--bs-primary-rgb, 85, 107, 47); }
.pg-inv-card[data-rarity="legendaire"] { --pg-rar: var(--bs-warning-rgb, 255, 193, 7); }

.pg-inv-card:hover,
.pg-inv-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(var(--pg-rar), .7);
    box-shadow: 0 .75rem 1.6rem rgba(var(--pg-rar), .22) !important;
}

.pg-inv-card[data-equipped="1"] {
    border-color: rgb(var(--bs-primary-rgb));
    border-width: 2px;
}

.pg-inv-card[data-equipped="1"]:hover { transform: none; }

.pg-inv-card[data-consumed="1"] { opacity: .6; }
.pg-inv-card[data-consumed="1"]:hover { transform: none; }

.pg-inv-preview {
    height: 84px;
    border-radius: .5rem;
}

.pg-inv-preview-round {
    width: 84px;
    height: 84px;
}

@media (prefers-reduced-motion: reduce) {
    .pg-inv-card { transition: none; }
    .pg-inv-card:hover,
    .pg-inv-card:focus-within { transform: none; }
}

.pg-art-thumb {
    width: 42px;
    height: 42px;
}

.pg-art-thumb-wide {
    height: 42px;
}

/* Caches mystérieuses */

.pg-cache {
    position: relative;
    background: var(--pg-cache, none);
    background-size: cover;
    color: var(--pg-cache-ink, #f4ecd8);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

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

.pg-cache > * {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

.pg-art-mystery_cache-colporteur {
    --pg-cache: radial-gradient(circle at 38% 30%, #b98a52, #7a5330 55%, #4b3220);
    --pg-cache-orn:
        repeating-conic-gradient(from 12deg, rgba(255, 236, 200, .22) 0 4deg, transparent 4deg 18deg),
        repeating-conic-gradient(from 0deg, rgba(30, 18, 8, .35) 0 2deg, transparent 2deg 18deg);
    --pg-cache-ink: #f6e6c8;
}

.pg-art-mystery_cache-profondeurs {
    --pg-cache: radial-gradient(circle at 30% 25%, #2f6f7e, #17323f 55%, #0a1620);
    --pg-cache-orn:
        repeating-conic-gradient(from 4deg, rgba(150, 235, 255, .30) 0 2deg, transparent 2deg 10deg),
        repeating-conic-gradient(from 0deg, rgba(0, 12, 20, .45) 0 1.5deg, transparent 1.5deg 10deg),
        radial-gradient(circle at 68% 74%, rgba(120, 220, 255, .28), transparent 45%);
    --pg-cache-ink: #dff4ff;
}

.pg-shop-card[data-kind="mystery_cache"] { --pg-kind: var(--bs-success-rgb, 25, 135, 84); }

/* Reliques */

.pg-relic {
    position: relative;
    background: var(--pg-relic, none);
    background-size: cover;
    color: var(--pg-relic-ink, #f4ecd8);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

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

.pg-relic > * {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.pg-prestige--argentee,
.pg-prestige--doree,
.pg-prestige--irisee {
    outline: 2px solid var(--pg-prestige-ring, transparent);
    outline-offset: 2px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28), 0 0 12px var(--pg-prestige-glow, transparent);
}

.pg-prestige--argentee {
    --pg-prestige-ring: #c9d2dc;
    --pg-prestige-glow: rgba(201, 210, 220, .45);
}

.pg-prestige--doree {
    --pg-prestige-ring: #e8c06a;
    --pg-prestige-glow: rgba(232, 192, 106, .55);
}

.pg-prestige--irisee {
    --pg-prestige-ring: #b98cf0;
    --pg-prestige-glow: rgba(185, 140, 240, .6);
    /* Seul le dernier palier bouge, et c'est le halo qui bouge, pas l'anneau : `box-shadow`
       s'interpole vraiment, là où une propriété personnalisée non déclarée sauterait d'un palier à
       l'autre. Une grille de reliques qui scintillent toutes ne se lirait plus. */
    animation: pg-prestige-shift 6s ease-in-out infinite;
}

@keyframes pg-prestige-shift {
    0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, .28), 0 0 12px rgba(185, 140, 240, .6); }
    33% { box-shadow: 0 2px 10px rgba(0, 0, 0, .28), 0 0 14px rgba(111, 216, 224, .6); }
    66% { box-shadow: 0 2px 10px rgba(0, 0, 0, .28), 0 0 14px rgba(240, 166, 200, .6); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-prestige--irisee { animation: none; }
}

/* Curiosités du colporteur : os, terre cuite, cire, papier */

.pg-art-relic-de-fele {
    --pg-relic: radial-gradient(circle at 35% 28%, #ded3bd, #a8977a 60%, #6d6250);
    --pg-relic-orn: repeating-conic-gradient(from 30deg, rgba(60, 48, 32, .30) 0 1deg, transparent 1deg 30deg);
    --pg-relic-ink: #3a3325;
}

.pg-art-relic-encrier {
    --pg-relic: radial-gradient(circle at 30% 25%, #4a4f63, #24283a 60%, #101320);
    --pg-relic-orn: radial-gradient(circle at 60% 70%, rgba(20, 22, 40, .85), transparent 42%);
    --pg-relic-ink: #cfd6ee;
}

.pg-art-relic-plume {
    --pg-relic: radial-gradient(circle at 32% 26%, #f2ead6, #cdbf9f 62%, #8e8267);
    --pg-relic-orn: repeating-linear-gradient(58deg, rgba(120, 105, 75, .22) 0 2px, transparent 2px 9px);
    --pg-relic-ink: #4a412d;
}

.pg-art-relic-chandelle {
    --pg-relic: radial-gradient(circle at 42% 22%, #ffe7a8, #e0b45c 52%, #7d5a25);
    --pg-relic-orn: radial-gradient(circle at 42% 18%, rgba(255, 246, 200, .8), transparent 38%);
    --pg-relic-ink: #4a3410;
}

.pg-art-relic-carte {
    --pg-relic: radial-gradient(circle at 34% 30%, #e8d7ad, #bda474 58%, #7d6a44);
    --pg-relic-orn:
        repeating-linear-gradient(0deg, rgba(90, 74, 44, .18) 0 1px, transparent 1px 11px),
        repeating-linear-gradient(90deg, rgba(90, 74, 44, .18) 0 1px, transparent 1px 11px);
    --pg-relic-ink: #453a22;
}

.pg-art-relic-clef {
    --pg-relic: radial-gradient(circle at 30% 26%, #cfd4d9, #8e979f 58%, #4c545c);
    --pg-relic-orn: repeating-conic-gradient(from 8deg, rgba(255, 255, 255, .30) 0 2deg, transparent 2deg 24deg);
    --pg-relic-ink: #232a30;
}

.pg-art-relic-boussole {
    --pg-relic: radial-gradient(circle at 36% 28%, #e3c98d, #b08a3f 55%, #5f461a);
    --pg-relic-orn:
        repeating-conic-gradient(from 0deg, rgba(255, 248, 220, .45) 0 1.5deg, transparent 1.5deg 45deg),
        repeating-conic-gradient(from 22.5deg, rgba(60, 42, 12, .35) 0 1deg, transparent 1deg 45deg);
    --pg-relic-ink: #3d2c0c;
}

/* Reliques des profondeurs : nacre, verre noyé, bronze vert-de-gris */

.pg-art-relic-ecaille {
    --pg-relic: radial-gradient(circle at 34% 26%, #7fd6c4, #2f8f8c 55%, #124049);
    --pg-relic-orn: repeating-conic-gradient(from 12deg, rgba(220, 255, 250, .28) 0 3deg, transparent 3deg 15deg);
    --pg-relic-ink: #082b30;
}

.pg-art-relic-lanterne {
    --pg-relic: radial-gradient(circle at 45% 30%, #bff3ff, #3f93b8 48%, #102b3d);
    --pg-relic-orn: radial-gradient(circle at 45% 30%, rgba(230, 250, 255, .75), transparent 40%);
    --pg-relic-ink: #0a2333;
}

.pg-art-relic-sceau {
    --pg-relic: radial-gradient(circle at 32% 28%, #9db38f, #5b7a5c 55%, #24382a);
    --pg-relic-orn:
        repeating-conic-gradient(from 40deg, rgba(20, 34, 22, .40) 0 2deg, transparent 2deg 40deg),
        radial-gradient(circle at 70% 72%, rgba(200, 230, 195, .25), transparent 40%);
    --pg-relic-ink: #eaf3e6;
}

.pg-art-relic-oeil {
    --pg-relic: radial-gradient(circle at 40% 32%, #4b3f6e, #1d1832 55%, #07050f);
    --pg-relic-orn:
        radial-gradient(circle at 40% 32%, rgba(190, 170, 255, .55), transparent 30%),
        repeating-conic-gradient(from 0deg, rgba(160, 130, 255, .20) 0 1deg, transparent 1deg 18deg);
    --pg-relic-ink: #ddd3ff;
}

.pg-art-relic-couronne {
    --pg-relic: radial-gradient(circle at 34% 24%, #ffe9a3, #c99a2e 50%, #4e3a0d);
    --pg-relic-orn:
        repeating-conic-gradient(from 6deg, rgba(255, 250, 220, .55) 0 2deg, transparent 2deg 12deg),
        repeating-conic-gradient(from 0deg, rgba(60, 44, 8, .40) 0 1.5deg, transparent 1.5deg 12deg);
    --pg-relic-ink: #3b2a05;
}

.pg-drop-table > summary {
    cursor: pointer;
    list-style: none;
}

.pg-drop-table > summary::-webkit-details-marker {
    display: none;
}

.pg-drop-table[open] > summary {
    margin-bottom: .25rem;
}

.pg-drop-table li > span:first-child { min-width: 0; }

@media (max-width: 575.98px) {
    .pg-roll__die svg { width: 160px; height: 160px; }
    .pg-roll__medal { width: 7rem; height: 7rem; font-size: 2rem; }
    .pg-roll__rays { width: 24rem; height: 24rem; margin: -12rem 0 0 -12rem; }
}

/* Solde permanent et ouverture de cache */

/* La pastille de solde */
.pg-wallet {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    max-width: calc(100vw - 2rem);
    flex-wrap: wrap;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: .6rem 1.1rem .6rem .9rem;
    border-radius: 2rem;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), .92);
    border: 1px solid rgba(var(--bs-warning-rgb), .5);
    box-shadow: 0 .5rem 1.4rem rgba(var(--bs-dark-rgb, 42, 42, 42), .18);
    backdrop-filter: blur(6px);
    line-height: 1.1;
}

.pg-wallet__purse {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: inherit;
}

.pg-wallet__purse--link:hover .pg-wallet__amount { color: rgb(var(--bs-primary-rgb)); }

.pg-wallet__sep {
    width: 1px;
    align-self: stretch;
    background: rgba(var(--bs-dark-rgb, 42, 42, 42), .15);
}

.pg-wallet__coin {
    color: rgb(var(--bs-warning-rgb));
    font-size: 1.35rem;
}

.pg-wallet__coin--vote { color: rgb(var(--bs-primary-rgb)); }

.pg-wallet__amount {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--bs-dark-rgb, 42, 42, 42), .95);
}

.pg-wallet__unit {
    font-size: .7rem;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(var(--bs-dark-rgb, 42, 42, 42), .6);
}

.pg-wallet__delta {
    position: absolute;
    left: 50%;
    top: -.25rem;
    transform: translateX(-50%);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

.pg-wallet__delta.is-debit  { color: rgb(var(--bs-danger-rgb)); }
.pg-wallet__delta.is-credit { color: rgb(var(--bs-success-rgb)); }

.pg-shop-card.is-buying { opacity: .65; }

/* L'ouverture d'une cache */
.pg-roll {
    position: fixed;
    inset: 0;
    z-index: 1085;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 45%, rgba(10, 12, 20, .82), rgba(4, 5, 10, .96));
    backdrop-filter: blur(3px);
    --pg-roll-glow: 0;
}

body.pg-roll-open { overflow: hidden; }

.pg-roll__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 32rem;
    perspective: 900px;
}

.pg-roll__rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34rem;
    height: 34rem;
    margin: -17rem 0 0 -17rem;
    pointer-events: none;
    background:
        repeating-conic-gradient(from 0deg,
            rgba(var(--pg-roll-tone, 108, 117, 125), .30) 0 4deg,
            transparent 4deg 14deg),
        radial-gradient(circle, rgba(var(--pg-roll-tone, 108, 117, 125), .35), transparent 62%);
    mask-image: radial-gradient(circle, #000 20%, transparent 68%);
    -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
}

.pg-roll[data-rarity="secondary"] { --pg-roll-tone: var(--bs-secondary-rgb, 108, 117, 125); }
.pg-roll[data-rarity="info"]      { --pg-roll-tone: var(--bs-info-rgb, 23, 162, 184); }
.pg-roll[data-rarity="primary"]   { --pg-roll-tone: var(--bs-primary-rgb, 85, 107, 47); }
.pg-roll[data-rarity="warning"]   { --pg-roll-tone: var(--bs-warning-rgb, 255, 193, 7); }
.pg-roll[data-rarity="danger"]    { --pg-roll-tone: var(--bs-danger-rgb, 220, 53, 69); }
.pg-roll[data-rarity="success"]   { --pg-roll-tone: var(--bs-success-rgb, 25, 135, 84); }

.pg-roll__sparks {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.pg-roll__sparks > span {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: rgb(var(--pg-roll-tone, 255, 193, 7));
    box-shadow: 0 0 10px rgba(var(--pg-roll-tone, 255, 193, 7), .9);
}

.pg-roll__die {
    transform-style: preserve-3d;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .55));
    will-change: transform;
}

.pg-roll__shadow {
    width: 11rem;
    height: 1.4rem;
    margin-top: -.5rem;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%);
}

/* Le d20 */
.pg-d20__f {
    stroke: rgba(255, 255, 255, .22);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.pg-d20--a { fill: #2f3d55; }
.pg-d20--b { fill: #222e42; }
.pg-d20--c { fill: #3b4c68; }

.pg-d20--top {
    fill: #55708f;
    filter: drop-shadow(0 0 calc(var(--pg-roll-glow, 0) * 16px) rgba(var(--pg-roll-tone, 255, 193, 7), .95));
}

.pg-d20__pip {
    fill: #f2f6ff;
    font-family: var(--bs-font-serif, Georgia, serif);
    font-size: 34px;
    font-weight: 700;
}

/* Le gain */
.pg-roll__medal {
    width: 9rem;
    height: 9rem;
    font-size: 2.6rem;
    margin-bottom: 1.25rem;
    transform-style: preserve-3d;
    box-shadow: 0 0 3rem rgba(var(--pg-roll-tone, 255, 193, 7), .55);
}

.pg-roll__prize { position: relative; }

.pg-roll__rarity {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    font-weight: 700;
    color: rgb(var(--pg-roll-tone, 255, 193, 7));
}

.pg-roll__name { color: #f4f6fb; font-size: 1.6rem; }
.pg-roll__desc { color: rgba(244, 246, 251, .78); }

.pg-roll__hint {
    position: absolute;
    bottom: -1.75rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(244, 246, 251, .45);
}

@media (prefers-reduced-motion: reduce) {
    .pg-roll__rays { display: none; }
    .pg-roll__die { filter: none; }
}