/* ELO SNS — рамки окна профиля (36 + ADMIN GOD). Индивидуальные кольца каждой рамки генерирует pframes.js */
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ---------- хост: окно профиля (.modal-card) или превью в магазине (.pf-mock) ---------- */
.pf-host { --k: 1; --gl: #7cf; --w: 3px; --r: 20px; position: relative; border-radius: var(--r); }
.modal-card.pf-host { overflow: visible; max-height: none; padding: 0; border: 0; box-shadow: none; border-radius: var(--r); }
.modal-card.pf-host > #modal-body { padding: 24px; max-height: 88vh; overflow-y: auto; border-radius: inherit; position: relative; z-index: 1; }
.modal-card.pf-host .modal-x { z-index: 6; }

/* контур: кольцо + размытое свечение (маска вырезает середину) */
.pf-host::before, .pf-host::after {
    content: ""; position: absolute; inset: calc(var(--w) * -1); border-radius: var(--rr, 24px); padding: var(--w);
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: pfa var(--sp, 4s) linear infinite;
}
.pf-host::before { z-index: 3; }
.pf-host::after { z-index: 0; filter: blur(var(--bl, 7px)); opacity: var(--go, .75); }
@keyframes pfa { to { --a: 360deg; } }

/* слой декора: не ловит клики, не режет содержимое */
.pf-deco { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; animation: pfIn .9s cubic-bezier(.2, .8, .2, 1) both; }
.pf-deco * { pointer-events: none; }
.pf-a { position: absolute; overflow: visible; filter: drop-shadow(0 0 5px var(--gl)); }
.pf-in { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; padding: 26px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pf-in > * { position: absolute; }
.pf-mock .pf-in { padding: 14px; }
@keyframes pfIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- анимации элементов ---------- */
.an { animation-duration: var(--t, 4s); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; }
.an.sw   { animation-name: pfSway; --t: 3.6s; }
.an.bl   { animation-name: pfBloom; --t: 4.4s; }
.an.pu   { animation-name: pfPu; --t: 2.2s; }
.an.rot  { animation-name: pfRot; --t: 14s; animation-timing-function: linear; animation-direction: normal; }
.an.rotr { animation-name: pfRot; --t: 18s; animation-timing-function: linear; animation-direction: reverse; }
.an.fl   { animation-name: pfFlame; --t: 1s; }
.an.flap { animation-name: pfFlap; --t: 2.6s; }
.an.bolt { animation-name: pfBolt; --t: 1.4s; animation-timing-function: steps(1); animation-direction: normal; }
.an.glint{ animation-name: pfGlint; --t: 2.8s; }
.an.dash { animation-name: pfDash; --t: 3s; animation-timing-function: linear; animation-direction: normal; }
.an.bob  { animation-name: pfBob; --t: 3s; }
@keyframes pfSway  { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@keyframes pfBloom { from { transform: scale(.94) rotate(-3deg); } to { transform: scale(1.06) rotate(3deg); } }
@keyframes pfPu    { from { opacity: .45; transform: scale(.85); } to { opacity: 1; transform: scale(1.12); } }
@keyframes pfRot   { to { transform: rotate(360deg); } }
@keyframes pfFlame { from { transform: scaleY(.78) skewX(-4deg); opacity: .8; } to { transform: scaleY(1.12) skewX(5deg); opacity: 1; } }
@keyframes pfFlap  { from { transform: rotate(-7deg) scaleX(.97); } to { transform: rotate(5deg) scaleX(1.03); } }
@keyframes pfBolt  { 0%, 100% { opacity: 0; } 8% { opacity: 1; } 14% { opacity: .1; } 20% { opacity: 1; } 34% { opacity: 0; } 62% { opacity: 0; } 66% { opacity: .9; } 72% { opacity: 0; } }
@keyframes pfGlint { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.9) drop-shadow(0 0 6px #fff); } }
@keyframes pfDash  { to { stroke-dashoffset: -60; } }
@keyframes pfBob   { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
@keyframes pfBg    { to { background-position: 200% 0; } }
@keyframes pfPulse { 0%, 100% { opacity: .35; filter: blur(5px); } 50% { opacity: 1; filter: blur(12px); } }
@keyframes pfBright{ 0%, 100% { filter: brightness(.8); } 50% { filter: brightness(1.5); } }
@keyframes pfFlicker { 0%, 100% { filter: brightness(1); } 12% { filter: brightness(2.2); } 18% { filter: brightness(.7); } 24% { filter: brightness(1.8); } 40% { filter: brightness(1); } }
@keyframes pfDrift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes pfSweep { 0% { transform: translateX(-130%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes pfWave  { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.22, 1.14); opacity: 0; } }
@keyframes pfGodIn { 0% { transform: scale(.82); filter: brightness(3) saturate(0); } 55% { transform: scale(1.03); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
@keyframes pfHue   { to { filter: hue-rotate(360deg); } }

/* ---------- частицы (только у краёв и углов) ---------- */
.pf-p { position: absolute; left: var(--x); top: var(--y); width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%; opacity: 0;
    background: var(--pc, #fff); box-shadow: 0 0 6px var(--pc, #fff); animation-duration: var(--d, 4s); animation-delay: var(--dl, 0s); animation-iteration-count: infinite; }
.pf-p.pt { width: calc(var(--s) * 1.7); border-radius: 80% 0 80% 0; }
.pf-p.rise  { animation-name: pfPRise; animation-timing-function: ease-out; }
.pf-p.fall  { animation-name: pfPFall; animation-timing-function: ease-in-out; }
.pf-p.tw    { animation-name: pfPTw; animation-timing-function: ease-in-out; }
.pf-p.spark { animation-name: pfPSpark; animation-timing-function: steps(5); }
@keyframes pfPRise  { 0% { transform: translateY(8px) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx, 4px), -52px) scale(1); opacity: 0; } }
@keyframes pfPFall  { 0% { transform: translate(0, -8px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx, 14px), 92px) rotate(260deg); opacity: 0; } }
@keyframes pfPTw    { 0%, 100% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.5) rotate(45deg); opacity: 1; } }
@keyframes pfPSpark { 0%, 100% { opacity: 0; } 20% { opacity: 1; transform: translate(4px, -5px); } 60% { opacity: .9; transform: translate(-5px, 4px); } }

/* ---------- мини-превью в магазине ---------- */
.pf-mock { --k: .4; width: 150px; height: 94px; background: #0e0a1d; margin: 10px auto 6px; }
.pf-mock .pf-fake { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 0 16px; border-radius: inherit; }
.pf-mock .pf-fake i { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #3b2f6b, #1a1438); border: 1px solid rgba(255, 255, 255, .15); flex: none; }
.pf-mock .pf-fake b { display: block; width: 56px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .55); margin-bottom: 6px; }
.pf-mock .pf-fake u { display: block; width: 38px; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.pf-mock .pf-deco { animation: none; }
.pf-prev-wrap { width: 100%; height: 148px; display: grid; place-items: center; overflow: visible; }
.item.pf-item { padding-top: 14px; }
.item.pf-item .pf-rar { font: 800 9px 'Orbitron', sans-serif; letter-spacing: 1px; padding: 3px 8px; border-radius: 20px; border: 1px solid currentColor; }
.pf-item.r-D { box-shadow: 0 0 0 1px rgba(255, 209, 102, .5), 0 0 26px rgba(255, 170, 40, .22); background: linear-gradient(160deg, rgba(255, 190, 60, .1), rgba(120, 40, 200, .08)); }
.pf-item.r-E { box-shadow: 0 0 0 1px rgba(255, 60, 90, .65), 0 0 34px rgba(255, 40, 80, .3); background: linear-gradient(160deg, rgba(255, 40, 80, .14), rgba(90, 20, 160, .12), rgba(255, 200, 60, .08)); }
.pf-item.r-E .pf-rar { color: #fff !important; background: linear-gradient(90deg, #e11d48, #7c3aed, #f5b82e); border-color: transparent; animation: pfHue 6s linear infinite; }
.pf-lock { font-size: 11px; color: var(--muted); }
.pf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 12px; color: var(--muted); }
.pf-bar button { padding: 6px 11px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 700 12px 'Inter', sans-serif; cursor: pointer; }
.pf-bar button.on { background: var(--surface-strong); border-color: #8b5cf6; box-shadow: 0 0 10px rgba(139, 92, 246, .5); }
.pf-paused, .pf-paused * { animation-play-state: paused !important; }

/* ---------- ADMIN GOD ---------- */
.pf-god-in { animation: pfGodIn 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.pf-wave { position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(255, 70, 110, .8); animation: pfWave 3.2s ease-out infinite; }
.pf-wave.w2 { animation-delay: 1.07s; border-color: rgba(167, 100, 255, .8); }
.pf-wave.w3 { animation-delay: 2.14s; border-color: rgba(255, 205, 80, .8); }
.pf-plate { position: absolute; left: 50%; bottom: calc(-13px * var(--k)); transform: translateX(-50%); padding: 3px 16px; font: 900 calc(11px * (.4 + var(--k) * .6)) 'Orbitron', sans-serif; letter-spacing: 3px; color: #fff3c2; white-space: nowrap;
    background: linear-gradient(180deg, #2a0a10, #09040a); border: 1px solid #f5b82e; border-radius: 6px; box-shadow: 0 0 14px rgba(255, 60, 90, .7), inset 0 0 8px rgba(245, 184, 46, .4); text-shadow: 0 0 8px #ff3d5e; }

/* ---------- режимы интенсивности ---------- */
html[data-pf-fx="lite"] .pf-p, html[data-pf-fx="lite"] .pf-wave { display: none; }
html[data-pf-fx="lite"] .pf-host::after { filter: none; opacity: .35; }
html[data-pf-fx="lite"] .pf-deco .an, html[data-pf-fx="lite"] .pf-in > * { animation: none; }
html[data-pf-fx="off"] .pf-host::before, html[data-pf-fx="off"] .pf-host::after, html[data-pf-fx="off"] .pf-deco, html[data-pf-fx="off"] .pf-deco *, html[data-pf-fx="off"] .pf-wave { animation: none !important; }
html[data-pf-fx="off"] .pf-p, html[data-pf-fx="off"] .pf-wave, html[data-pf-fx="off"] .pf-host::after { display: none; }

@media (max-width: 640px) {
    .modal-card.pf-host { --k: .62; max-height: none; }
    .modal-card.pf-host > #modal-body { max-height: 86vh; padding: 18px; }
    .pf-pw .pf-p:nth-child(n+9) { display: none; }
}


/* ---------- рамка на странице профиля игрока (поиск → профиль), видна всем ---------- */
#user-box.has-pf { background: none; border: 0; box-shadow: none; padding: 10px; overflow: visible; backdrop-filter: none; -webkit-backdrop-filter: none; }
#user-box.has-pf::before, #user-box.has-pf::after { display: none; }
.pf-pagehost.pf-host { --k: 1; padding: 28px 24px; background: linear-gradient(160deg, #171034, #0a0618); }
.pf-pagehost.pf-host .pf-deco { animation: none; }
@media (max-width: 640px) {
    .pf-pagehost.pf-host { --k: .62; padding: 22px 14px; }
}