/* Ramele de avatar (profile-avatar-frame) — 25 de forme × 11 palete.
   Fiecare ramă din app/Content/profile_frames.php are perechea (pattern, palette) unică,
   deci toate cele 80 de rame arată diferit. Culorile vin din paletele artelor de badge,
   ca limbajul vizual al portalului să rămână unitar. */

.profile-avatar-frame {
    --pf-color: var(--frame-color, #6b7484);
    --pf-color-2: color-mix(in srgb, var(--pf-color) 55%, #ffffff);
    --pf-sheen: color-mix(in srgb, var(--pf-color) 30%, transparent);
    --pf-shadow: color-mix(in srgb, var(--pf-color) 45%, transparent);
    --pf-band: none;
    position: relative;
    isolation: isolate;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-color) 62%, transparent),
        0 0 18px var(--pf-shadow),
        0 10px 30px #0509115c;
}

.profile-avatar-frame > .avatar {
    position: relative;
    z-index: 2;
}

/* Inelul de formă: fiecare pattern își desenează banda în ::before … */
.profile-avatar-frame::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 19px;
    background: var(--pf-band);
    pointer-events: none;
    z-index: 1;
}

/* … iar ::after ține decorul secundar (colțuri, vârfuri, panglici). */
.profile-avatar-frame::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 19px;
    background: var(--pf-deco, none);
    pointer-events: none;
    z-index: 1;
}

/* ---------------------------------------------------------------- palete ---- */
.profile-avatar-frame.palette-slate { --pf-color: #6b7484; }
.profile-avatar-frame.palette-classic { --pf-color: #768eaf; }
.profile-avatar-frame.palette-copper { --pf-color: #b0794f; }
.profile-avatar-frame.palette-silver { --pf-color: #a8b4c2; }
.profile-avatar-frame.palette-gold { --pf-color: #c5a85f; }
.profile-avatar-frame.palette-emerald { --pf-color: #4f9e78; }
.profile-avatar-frame.palette-sapphire { --pf-color: #5f84b5; }
.profile-avatar-frame.palette-amethyst { --pf-color: #8a6bb5; }
.profile-avatar-frame.palette-ruby { --pf-color: #ad5566; }
.profile-avatar-frame.palette-obsidian { --pf-color: #5a6172; }
.profile-avatar-frame.palette-aurora { --pf-color: #7fc7c0; }

/* Paletele cu luciu își aprind inelul; obsidianul rămâne mat, aurora pulsează. */
.profile-avatar-frame.palette-gold, .profile-avatar-frame.palette-silver,
.profile-avatar-frame.palette-sapphire, .profile-avatar-frame.palette-ruby {
    --pf-sheen: color-mix(in srgb, var(--pf-color) 55%, #ffffff40);
}
.profile-avatar-frame.palette-aurora { --pf-color-2: #a8e6dd; }
.profile-avatar-frame.palette-obsidian { --pf-color-2: #8b93a6; }

/* --------------------------------------------------------------- patterns --- */
/* ring — inel simplu */
.profile-avatar-frame.pattern-ring { --pf-band: none; }
.profile-avatar-frame.pattern-ring::before {
    inset: -4px;
    border: 2px solid var(--pf-color);
    border-radius: 18px;
    box-shadow: inset 0 0 12px var(--pf-sheen);
}

/* hull — plăci de carenă: șase segmente */
.profile-avatar-frame.pattern-hull::before {
    background: repeating-conic-gradient(from 0deg, var(--pf-color) 0 24deg, transparent 24deg 60deg);
    -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 83%);
    mask: radial-gradient(closest-side, transparent 82%, #000 83%);
}

/* brackets — colțare drepte */
.profile-avatar-frame.pattern-brackets::before {
    inset: -6px;
    background:
        linear-gradient(var(--pf-color), var(--pf-color)) left top / 26% 2px no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) left top / 2px 26% no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) right top / 26% 2px no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) right top / 2px 26% no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) left bottom / 26% 2px no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) left bottom / 2px 26% no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) right bottom / 26% 2px no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) right bottom / 2px 26% no-repeat;
}

/* seal — sigiliu punctat */
.profile-avatar-frame.pattern-seal::before {
    inset: -4px;
    border: 2px dashed var(--pf-color);
    border-radius: 50%;
    opacity: .9;
}

/* chain — verigi */
.profile-avatar-frame.pattern-chain::before {
    background: repeating-conic-gradient(from 0deg, var(--pf-color) 0 10deg, transparent 10deg 22deg);
    -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 79%, #000 100%);
    mask: radial-gradient(closest-side, transparent 78%, #000 79%, #000 100%);
}

/* crown — vârfuri de coroană */
.profile-avatar-frame.pattern-crown::before {
    inset: -7px;
    background: conic-gradient(from 200deg, transparent 0 120deg, var(--pf-color) 120deg 240deg, transparent 240deg);
    -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 75%);
    mask: radial-gradient(closest-side, transparent 74%, #000 75%);
}
.profile-avatar-frame.pattern-crown::after {
    inset: 0;
    background: linear-gradient(var(--pf-color-2), transparent 60%);
    -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 46%);
    mask: radial-gradient(closest-side, #000 45%, transparent 46%);
    opacity: .5;
}

/* twin — două inele paralele */
.profile-avatar-frame.pattern-twin::before {
    inset: -3px;
    border: 1px solid var(--pf-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-color) 45%, transparent);
}

/* arcs — arce întrerupte */
.profile-avatar-frame.pattern-arcs::before {
    background: conic-gradient(from 20deg, var(--pf-color) 0 52deg, transparent 52deg 120deg, var(--pf-color) 120deg 172deg, transparent 172deg 250deg, var(--pf-color) 250deg 302deg, transparent 302deg);
    -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85%);
    mask: radial-gradient(closest-side, transparent 84%, #000 85%);
}

/* chevrons — bandă cu chevron */
.profile-avatar-frame.pattern-chevrons::before {
    inset: -5px;
    border-radius: 19px;
    background: repeating-linear-gradient(115deg, var(--pf-color) 0 3px, transparent 3px 9px);
    -webkit-mask: linear-gradient(#000, #000) padding-box, linear-gradient(#000, #000) border-box;
    padding: 2px;
    border: 2px solid transparent;
    box-sizing: border-box;
}

/* ribbons — panglici oblice */
.profile-avatar-frame.pattern-ribbons::before {
    inset: -6px;
    background: linear-gradient(135deg, transparent 44%, var(--pf-color) 44% 48%, transparent 48%),
        linear-gradient(315deg, transparent 44%, var(--pf-color) 44% 48%, transparent 48%);
}

/* laurel — frunze pe laturi */
.profile-avatar-frame.pattern-laurel::before {
    inset: -7px;
    background:
        radial-gradient(closest-side, var(--pf-color) 62%, transparent 63%) left center / 26% 62% no-repeat,
        radial-gradient(closest-side, var(--pf-color) 62%, transparent 63%) right center / 26% 62% no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) center bottom / 44% 2px no-repeat;
    opacity: .95;
}

/* banner — steag cu coadă */
.profile-avatar-frame.pattern-banner::before {
    inset: -5px;
    background: linear-gradient(var(--pf-color), var(--pf-color)) top center / 100% 2px no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) center bottom / 60% 3px no-repeat;
    border-radius: 6px 6px 22px 22px;
}

/* bolt — fulger */
.profile-avatar-frame.pattern-bolt::before {
    inset: -6px;
    background: conic-gradient(from 300deg, var(--pf-color) 0 40deg, transparent 40deg 320deg, var(--pf-color) 320deg);
    -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 81%);
    mask: radial-gradient(closest-side, transparent 80%, #000 81%);
}

/* sigil — hexagon */
.profile-avatar-frame.pattern-sigil::before {
    inset: -6px;
    background: var(--pf-color);
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%, 50% 8%, 88% 30%, 88% 70%, 50% 92%, 12% 70%, 12% 30%);
}

/* traces — trasee subțiri */
.profile-avatar-frame.pattern-traces::before {
    inset: -5px;
    background: repeating-linear-gradient(90deg, var(--pf-color) 0 6px, transparent 6px 14px) top center / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, var(--pf-color) 0 6px, transparent 6px 14px) bottom center / 100% 2px no-repeat,
        repeating-linear-gradient(0deg, var(--pf-color) 0 6px, transparent 6px 14px) left center / 2px 100% no-repeat,
        repeating-linear-gradient(0deg, var(--pf-color) 0 6px, transparent 6px 14px) right center / 2px 100% no-repeat;
}

/* mesh — plasă încrucișată */
.profile-avatar-frame.pattern-mesh::before {
    inset: -5px;
    background: repeating-linear-gradient(45deg, var(--pf-color) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(-45deg, var(--pf-color) 0 1px, transparent 1px 6px);
    -webkit-mask: linear-gradient(#000, #000) padding-box, linear-gradient(#000, #000) border-box;
    padding: 3px;
    border: 2px solid transparent;
    box-sizing: border-box;
}

/* harness — ham cu ochiuri mari */
.profile-avatar-frame.pattern-harness::before {
    inset: -6px;
    background: repeating-linear-gradient(0deg, var(--pf-color) 0 2px, transparent 2px 12px),
        repeating-linear-gradient(90deg, var(--pf-color) 0 2px, transparent 2px 12px);
    opacity: .8;
}

/* plating — plăci late */
.profile-avatar-frame.pattern-plating::before {
    background: repeating-conic-gradient(from 45deg, var(--pf-color) 0 40deg, transparent 40deg 90deg);
    -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 81%);
    mask: radial-gradient(closest-side, transparent 80%, #000 81%);
    opacity: .9;
}

/* conduit — tub dublu */
.profile-avatar-frame.pattern-conduit::before {
    inset: -7px;
    border: 2px solid var(--pf-color);
    border-radius: 24px;
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pf-color) 30%, transparent);
}

/* relay — releu cu puncte */
.profile-avatar-frame.pattern-relay::before {
    background: radial-gradient(circle, var(--pf-color) 0 3px, transparent 3px) center / 22% 22%;
    -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 81%);
    mask: radial-gradient(closest-side, transparent 80%, #000 81%);
}

/* vault — seif: inel gros dublu */
.profile-avatar-frame.pattern-vault::before {
    inset: -6px;
    border: 3px solid var(--pf-color);
    border-radius: 20px;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pf-color) 55%, transparent);
}
.profile-avatar-frame.pattern-vault::after {
    inset: -6px;
    background:
        linear-gradient(var(--pf-color-2), var(--pf-color-2)) left top / 30% 3px no-repeat,
        linear-gradient(var(--pf-color-2), var(--pf-color-2)) right bottom / 30% 3px no-repeat;
}

/* crest — blazon cu bară la bază */
.profile-avatar-frame.pattern-crest::before {
    inset: -6px;
    background: var(--pf-color);
    clip-path: polygon(50% 0, 100% 12%, 100% 62%, 50% 100%, 0 62%, 0 12%, 8% 13%, 8% 58%, 50% 90%, 92% 58%, 92% 13%);
}

/* ascendant — diamant cu aripi */
.profile-avatar-frame.pattern-ascendant::before {
    inset: -8px;
    background: var(--pf-color);
    clip-path: polygon(50% 0, 62% 12%, 88% 12%, 74% 34%, 96% 34%, 50% 100%, 4% 34%, 26% 34%, 12% 12%, 38% 12%, 50% 0, 56% 7%, 50% 60%, 44% 7%);
}

/* circuit — trasee de circuit */
.profile-avatar-frame.pattern-circuit::before {
    inset: -6px;
    background:
        linear-gradient(var(--pf-color), var(--pf-color)) 20% 0 / 2px 34% no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) 80% 100% / 2px 34% no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) 0 26% / 26% 2px no-repeat,
        linear-gradient(var(--pf-color), var(--pf-color)) 100% 76% / 26% 2px no-repeat,
        radial-gradient(circle, var(--pf-color-2) 0 3px, transparent 3px) 20% 34% / 12px 12px no-repeat,
        radial-gradient(circle, var(--pf-color-2) 0 3px, transparent 3px) 80% 62% / 12px 12px no-repeat;
}

/* prestige — stea de prestigiu */
.profile-avatar-frame.pattern-prestige::before {
    background: conic-gradient(from 234deg, var(--pf-color) 0 12deg, transparent 12deg 72deg, var(--pf-color) 72deg 84deg, transparent 84deg 144deg, var(--pf-color) 144deg 156deg, transparent 156deg 216deg, var(--pf-color) 216deg 228deg, transparent 228deg 288deg, var(--pf-color) 288deg 300deg, transparent 300deg);
    -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 83%);
    mask: radial-gradient(closest-side, transparent 82%, #000 83%);
}
.profile-avatar-frame.pattern-prestige::after {
    inset: -6px;
    background: radial-gradient(circle, var(--pf-color-2) 0 2px, transparent 2px) top center / 8px 8px no-repeat,
        radial-gradient(circle, var(--pf-color-2) 0 2px, transparent 2px) bottom center / 8px 8px no-repeat;
}

/* ------------------------------------------------------------- animații ----- */
.profile-avatar-frame.is-animated::before { animation: pf-sweep 6s linear infinite; }
.profile-avatar-frame.is-animated::after { animation: pf-glow 4.5s ease-in-out infinite; }
.profile-avatar-frame.frame-legend-ruby-cubed::before { animation: pf-spin 9s linear infinite; }
.profile-avatar-frame.frame-legend-ruby-sapphire::before { animation: pf-sweep 5s linear infinite reverse; }
.profile-avatar-frame.frame-legend-ruby-gold::before { animation: pf-pulse 3.4s ease-in-out infinite; }
.profile-avatar-frame.frame-legend-ruby-double::before { animation: pf-glow 5s ease-in-out infinite; }
.profile-avatar-frame.frame-legend-sapphire-double::before { animation: pf-spin 14s linear infinite reverse; }
.profile-avatar-frame.frame-legend-ruby-staff::before { animation: pf-pulse 4s ease-in-out infinite; }
.profile-avatar-frame.frame-staff-consiliu-ii::before { animation: pf-spin 18s linear infinite; }
.profile-avatar-frame.frame-staff-consiliu-iii::before { animation: pf-rainbow 8s linear infinite; }
.profile-avatar-frame.frame-staff-consiliu-iii::after { animation: pf-pulse 3s ease-in-out infinite; }

@keyframes pf-sweep {
    0%, 100% { opacity: .75; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.35); }
}
@keyframes pf-pulse {
    0%, 100% { transform: scale(1); opacity: .9; }
    50% { transform: scale(1.02); opacity: 1; }
}
@keyframes pf-spin {
    to { transform: rotate(360deg); }
}
@keyframes pf-glow {
    0%, 100% { opacity: .35; }
    50% { opacity: .75; }
}
@keyframes pf-rainbow {
    0% { filter: hue-rotate(0deg) saturate(1.1); }
    50% { filter: hue-rotate(24deg) saturate(1.3); }
    100% { filter: hue-rotate(0deg) saturate(1.1); }
}

/* Varianta mică, pentru listele de jucători ---------------------------------- */
.profile-avatar-frame.frame-mini {
    padding: 3px;
    border-radius: 12px;
}
.profile-avatar-frame.frame-mini::before,
.profile-avatar-frame.frame-mini::after {
    inset: -3px !important;
    border-radius: 14px;
}
.profile-avatar-frame.frame-mini.pattern-brackets::before,
.profile-avatar-frame.frame-mini.pattern-traces::before,
.profile-avatar-frame.frame-mini.pattern-circuit::before {
    inset: -4px !important;
}

/* Chipuri de ramă (editor de profil, galerie) --------------------------------- */
.frame-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--pf-color, #6b7484) 45%, transparent);
    background: color-mix(in srgb, var(--pf-color, #6b7484) 14%, #0b1017);
    font-size: .78rem;
    font-weight: 600;
    color: #eef2f5;
    white-space: nowrap;
}
.frame-chip i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pf-color, #6b7484);
    box-shadow: 0 0 8px color-mix(in srgb, var(--pf-color, #6b7484) 60%, transparent);
}
.frame-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
.frame-gallery-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #26313a;
    background: #0f141b;
}
.frame-gallery-card small { display: block; color: var(--muted, #9ca8b3); }
.frame-gallery-card b { display: block; font-size: .92rem; }
.frame-preview-demo {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
}
.frame-preview-demo .avatar.huge { width: 54px; height: 54px; }

@media (prefers-reduced-motion: reduce) {
    .profile-avatar-frame.is-animated::before,
    .profile-avatar-frame.is-animated::after,
    .profile-avatar-frame[class*="frame-legend-"]::before,
    .profile-avatar-frame[class*="frame-staff-"]::before,
    .profile-avatar-frame[class*="frame-staff-"]::after {
        animation: none !important;
    }
}

@media (max-width: 640px) {
    .profile-avatar-frame::before,
    .profile-avatar-frame::after { inset: -4px; }
    .frame-gallery { grid-template-columns: 1fr; }
}