/* ==========================================================================
   Boxe Simulator — frames.css
   Avatars et cadres animés débloqués en récompense.

   Tout est animé en CSS/SVG plutôt qu'en GIF : c'est net à toutes les tailles,
   ça pèse quelques kilo-octets au lieu de plusieurs mégaoctets, ça garde un
   fond réellement transparent, et l'animation s'arrête d'elle-même pour les
   personnes qui ont demandé « moins d'animations » dans leur système.
   ========================================================================== */

.avatar {
    --avatar-size: 108px;
    --ring-width: 4px;
    --ring-color: #7d8798;
    --ring-color-2: #cfd6e2;
    --fx-color: #ffffff;
    --spin: 9s;

    position: relative;
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    isolation: isolate;
}

/* — Anneau animé — */
.avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

.avatar-ring::before {
    content: '';
    position: absolute;
    inset: -35%;
    background: conic-gradient(
        from 0deg,
        var(--ring-color) 0deg,
        var(--ring-color-2) 80deg,
        var(--ring-color) 170deg,
        var(--ring-color-2) 260deg,
        var(--ring-color) 360deg
    );
    animation: bx-spin var(--spin) linear infinite;
}

/* on ne garde que la couronne */
.avatar-ring::after {
    content: '';
    position: absolute;
    inset: var(--ring-width);
    border-radius: 50%;
    background: var(--ink-900);
}

/* — Contenu — */
.avatar-inner {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: calc(100% - (var(--ring-width) * 2) - 4px);
    height: calc(100% - (var(--ring-width) * 2) - 4px);
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.14), transparent 60%),
        linear-gradient(165deg, var(--ink-750), var(--ink-950));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.avatar-inner img { width: 100%; height: 100%; object-fit: cover; }

.avatar-initials {
    font-family: var(--font-display);
    font-size: calc(var(--avatar-size) * 0.34);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--text);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    user-select: none;
}

/* — Effets orbitaux — */
.avatar-fx {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.avatar-fx i {
    --dot: 7px;
    --a: 0deg;
    --dur: 6s;
    --delay: 0s;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--dot);
    height: var(--dot);
    margin: calc(var(--dot) / -2);
    border-radius: 50%;
    background: var(--fx-color);
    box-shadow: 0 0 10px var(--fx-color), 0 0 20px var(--fx-color);
    animation: bx-orbit var(--dur) linear infinite;
    animation-delay: var(--delay);
}

@keyframes bx-orbit {
    from { transform: rotate(var(--a)) translateX(calc(var(--avatar-size) / 2 + 2px)); }
    to   { transform: rotate(calc(var(--a) + 360deg)) translateX(calc(var(--avatar-size) / 2 + 2px)); }
}

/* — Badge de niveau — */
.avatar-level {
    position: absolute;
    right: -2px;
    bottom: -2px;
    z-index: 4;
    display: grid;
    place-items: center;
    min-width: calc(var(--avatar-size) * 0.3);
    height: calc(var(--avatar-size) * 0.3);
    padding-inline: 0.35em;
    border-radius: var(--r-pill);
    border: 2px solid var(--ink-950);
    background: linear-gradient(150deg, var(--red-400), var(--red-700));
    font-family: var(--font-display);
    font-size: calc(var(--avatar-size) * 0.16);
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 14px rgba(225, 29, 46, 0.45);
}

/* — Tailles — */
.avatar-xs { --avatar-size: 40px; --ring-width: 2px; }
.avatar-sm { --avatar-size: 60px; --ring-width: 3px; }
.avatar-md { --avatar-size: 108px; }
.avatar-lg { --avatar-size: 148px; --ring-width: 5px; }
.avatar-xl { --avatar-size: 190px; --ring-width: 6px; }

/* ==========================================================================
   CADRES — chacun est une récompense
   ========================================================================== */

/* 1. Recrue — anneau acier, rotation lente, aucun effet */
.frame-rookie {
    --ring-color: #4a5364;
    --ring-color-2: #8b95a6;
    --spin: 22s;
}

/* 2. Bronze — première série de victoires */
.frame-bronze {
    --ring-color: #7c4a1e;
    --ring-color-2: #d79350;
    --fx-color: #e0a468;
    --spin: 14s;
}
.frame-bronze .avatar-ring { filter: drop-shadow(0 0 10px rgba(215, 147, 80, 0.3)); }

/* 3. Argent — reflet qui balaie l'anneau */
.frame-silver {
    --ring-color: #6f7a8c;
    --ring-color-2: #ffffff;
    --fx-color: #dfe6f0;
    --spin: 7s;
}
.frame-silver .avatar-ring { filter: drop-shadow(0 0 12px rgba(223, 230, 240, 0.35)); }

/* 4. Or — champion en devenir */
.frame-gold {
    --ring-color: #8a5f10;
    --ring-color-2: #ffd873;
    --fx-color: #ffd873;
    --spin: 6s;
}
.frame-gold .avatar-ring { filter: drop-shadow(0 0 16px rgba(242, 180, 44, 0.5)); }
.frame-gold .avatar-inner { box-shadow: inset 0 0 22px rgba(242, 180, 44, 0.22), inset 0 0 0 1px rgba(255, 216, 115, 0.3); }

/* 5. Braise — flammes qui lèchent l'avatar */
.frame-ember {
    --ring-color: #6d1206;
    --ring-color-2: #ff8a2b;
    --fx-color: #ff9c3c;
    --spin: 4.5s;
}
.frame-ember .avatar-ring { filter: drop-shadow(0 0 18px rgba(255, 122, 40, 0.55)); }
.frame-ember .avatar-fx::before,
.frame-ember .avatar-fx::after {
    content: '';
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 92%, rgba(255, 132, 40, 0.5), transparent 58%);
    animation: bx-ember 2.1s ease-in-out infinite;
}
.frame-ember .avatar-fx::after { animation-delay: -1.05s; animation-duration: 2.9s; }

@keyframes bx-ember {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.75; }
    50%      { transform: scale(1.13) translateY(-6%); opacity: 0.35; }
}

/* 6. Foudre — arcs électriques */
.frame-thunder {
    --ring-color: #10314f;
    --ring-color-2: #6fd6ff;
    --fx-color: #8ee2ff;
    --spin: 3.2s;
}
.frame-thunder .avatar-ring { filter: drop-shadow(0 0 16px rgba(111, 214, 255, 0.55)); animation: bx-flicker 3.4s steps(1) infinite; }
.frame-thunder .avatar-fx::before {
    content: '';
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    border: 2px dashed rgba(142, 226, 255, 0.75);
    animation: bx-spin 5s linear infinite reverse, bx-flicker 2.2s steps(1) infinite;
}

@keyframes bx-flicker {
    0%, 44%, 48%, 100% { opacity: 1; }
    46%, 47%           { opacity: 0.35; }
}

/* 7. Champion — ceinture d'or et étoiles */
.frame-champion {
    --ring-color: #6b4708;
    --ring-color-2: #ffe9a8;
    --fx-color: #ffdf8a;
    --spin: 5s;
}
.frame-champion .avatar-ring { filter: drop-shadow(0 0 20px rgba(255, 217, 122, 0.6)); }
.frame-champion .avatar-fx::before {
    content: '';
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 223, 138, 0.5);
    animation: bx-spin 12s linear infinite reverse;
    border-style: dashed;
}
.frame-champion .avatar-inner { box-shadow: inset 0 0 26px rgba(255, 217, 122, 0.28), inset 0 0 0 1px rgba(255, 233, 168, 0.35); }

/* 8. Légende — holographique, deux anneaux contrarotatifs */
.frame-legend {
    --ring-color: #ff3d8b;
    --ring-color-2: #4ad9ff;
    --fx-color: #ffffff;
    --spin: 4s;
}
.frame-legend .avatar-ring::before {
    background: conic-gradient(from 0deg, #ff3d8b, #ffb347, #ffe66d, #4ad9ff, #8b5cf6, #ff3d8b);
    animation: bx-spin var(--spin) linear infinite, bx-hue 6s linear infinite;
}
.frame-legend .avatar-ring { filter: drop-shadow(0 0 22px rgba(139, 92, 246, 0.55)); }
.frame-legend .avatar-fx::before {
    content: '';
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(74, 217, 255, 0.9);
    border-bottom-color: rgba(255, 61, 139, 0.9);
    animation: bx-spin 7s linear infinite reverse;
}

@keyframes bx-hue { to { filter: hue-rotate(360deg); } }

/* 9. Sang — aura rouge pulsée */
.frame-blood {
    --ring-color: #3d0308;
    --ring-color-2: #ff2f42;
    --fx-color: #ff6070;
    --spin: 5.5s;
}
.frame-blood .avatar-ring { filter: drop-shadow(0 0 18px rgba(225, 29, 46, 0.6)); }
.frame-blood .avatar-fx::before {
    content: '';
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 58%, rgba(225, 29, 46, 0.35) 72%, transparent 82%);
    animation: bx-aura 2.4s ease-in-out infinite;
}

@keyframes bx-aura {
    0%, 100% { transform: scale(0.94); opacity: 0.55; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* 10. Spectre — brume violette */
.frame-ghost {
    --ring-color: #2a1a4d;
    --ring-color-2: #b39bff;
    --fx-color: #c4b0ff;
    --spin: 16s;
}
.frame-ghost .avatar-ring { filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.45)); opacity: 0.92; }
.frame-ghost .avatar-inner { filter: saturate(0.75); }
.frame-ghost .avatar-fx::before,
.frame-ghost .avatar-fx::after {
    content: '';
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    border: 1px dashed rgba(179, 155, 255, 0.5);
    animation: bx-spin 18s linear infinite;
}
.frame-ghost .avatar-fx::after { inset: -16%; animation-duration: 26s; animation-direction: reverse; opacity: 0.6; }

/* ==========================================================================
   Vitrine des cadres (page profil)
   ========================================================================== */

.frame-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.frame-tile {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 1.15rem 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(5, 7, 11, 0.45);
    text-align: center;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.frame-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }
.frame-tile.is-equipped { border-color: rgba(242, 180, 44, 0.5); background: linear-gradient(170deg, rgba(242, 180, 44, 0.12), transparent 60%), rgba(5, 7, 11, 0.45); }
.frame-tile.is-locked { opacity: 0.55; }
.frame-tile.is-locked .avatar { filter: grayscale(0.85); }

.frame-tile-name { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.frame-tile-req { font-size: 0.75rem; color: var(--text-faint); line-height: 1.4; }
.frame-tile form { width: 100%; }

/* Bandeau d'identité du profil */
.profile-banner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

@media (min-width: 720px) {
    .profile-banner { flex-wrap: nowrap; text-align: left; justify-content: flex-start; }
    .profile-banner .profile-identity { align-items: flex-start; }
}

.profile-identity { display: grid; gap: 0.4rem; justify-items: center; }
.profile-identity .fighter-name { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
.profile-identity .profile-user { color: var(--text-dim); font-size: 0.92rem; }
.profile-identity .fighter-tags { justify-content: center; }

@media (min-width: 720px) {
    .profile-identity .fighter-tags { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .avatar-ring::before,
    .avatar-fx i,
    .avatar-fx::before,
    .avatar-fx::after { animation: none !important; }
}