/* =========================================================================
   🏆🦇 ОФОРМЛЕНИЕ ПОБЕДИТЕЛЕЙ II СЕЗОНА И «ТЫКВЕННЫХ ЖНЕЦОВ» В ЛЕНТЕ
   Путь: css/winner_flair.css   (логика — js/winner_flair.js)
   =========================================================================
   Видят ВСЕ. Классы ставит js/winner_flair.js на уже нарисованные записи
   (.wall-post[data-uid]) и комментарии (.xpv-c[data-uid]):

     wf wf-<tier>   — лучший трофей автора: r1 r2 r3 r10 r50 | s3 s10 s50
     wf-hw          — автор держит «Тыквенного Жнеца»
     wf-on          — карточка на экране (вне экрана анимация стоит)

   Внутрь карточки модуль кладёт:
     .wf-frame   — бегущая рамка (r1, r2, s3), .wf-sparks — искры (r1),
     .wf-tape    — лента «оса» (s10), .wf-stripe — полоса слева (r10, s50, r50),
     .wf-banner  — плашка под шапкой (r1 r2 r3 s3), .wf-chip — значок у ника,
     .wf-batfly  — летучая мышь, что пролетает через запись Жнеца.

   Кнопка «Мне нравится»: data-hw-likes="N" (из API, поле hw_likes) — на кнопке
   висит спящая мышь; .wf-mine.liked — мой лайк Жнеца, мышь летает по кнопке.

   Движение — только transform / opacity / background-position; при
   prefers-reduced-motion всё неподвижно. Углы прямые (стиль XP).
   ========================================================================= */

@property --wf-a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.box.wall-post.wf { position: relative; }

.wf-frame,
.wf-sparks,
.wf-tape,
.wf-stripe,
.wf-batfly-lane {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

/* ---------- Бегущая рамка ---------------------------------------------- */
.wf-frame {
    inset: -2px;
    padding: 2px;
    background: conic-gradient(from var(--wf-a), var(--wf-c1), var(--wf-c2) 18%, var(--wf-c3) 30%, var(--wf-c2) 42%, var(--wf-c1) 60%, var(--wf-c2) 80%, var(--wf-c1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.wf-on > .wf-frame { animation: wf-spin var(--wf-spin, 9s) linear infinite; }
@keyframes wf-spin { to { --wf-a: 360deg; } }

.wall-post.wf-r1 { --wf-c1: #7a5410; --wf-c2: #d9a62c; --wf-c3: #fff2b8; --wf-spin: 7s; }
.wall-post.wf-r2 { --wf-c1: #4f5864; --wf-c2: #aab4c0; --wf-c3: #ffffff; --wf-spin: 11s; }
.wall-post.wf-s3 { --wf-c1: #5e0c0c; --wf-c2: #c8401f; --wf-c3: #ffc35a; --wf-spin: 9s; }

.box.wall-post.wf-r1:not(.champ-rich) {
    box-shadow: 0 0 0 1px rgba(122, 84, 16, 0.25), 0 4px 18px rgba(201, 150, 30, 0.28) !important;
    background-image: linear-gradient(180deg, rgba(246, 211, 107, 0.16), rgba(255, 255, 255, 0) 140px) !important;
}
.box.wall-post.wf-r2:not(.champ-rich) {
    box-shadow: 0 3px 14px rgba(92, 102, 114, 0.25) !important;
    background-image: linear-gradient(180deg, rgba(200, 210, 222, 0.22), rgba(255, 255, 255, 0) 120px) !important;
}
.box.wall-post.wf-r3:not(.champ-rich) {
    border-color: #b06a2b !important;
    box-shadow: 0 3px 12px rgba(176, 106, 43, 0.22) !important;
    background-image: linear-gradient(180deg, rgba(240, 179, 122, 0.18), rgba(255, 255, 255, 0) 110px) !important;
}
.box.wall-post.wf-s3:not(.champ-rich) {
    box-shadow: 0 4px 16px rgba(158, 27, 27, 0.25) !important;
    background-image: linear-gradient(180deg, rgba(255, 178, 63, 0.14), rgba(255, 255, 255, 0) 130px) !important;
}

/* ---------- Плашка под шапкой (1–3 место и Маршалы) -------------------- */
.wf-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -10px -10px 9px;
    padding: 5px 10px;
    overflow: hidden;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    line-height: 16px;
    color: var(--wf-bt, #fff);
    background: var(--wf-bb, #222);
    border-bottom: 1px solid var(--wf-bl, rgba(0, 0, 0, 0.4));
    user-select: none;
}
.wf-banner img { width: 18px; height: 18px; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.wf-banner b {
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--wf-bg-text, none);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--wf-fill, currentColor);
}
.wf-banner span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.85;
    font-size: 10px;
}
.wf-banner .wf-plate {
    flex: 0 0 auto;
    padding: 0 6px;
    border: 1px solid var(--wf-pb, rgba(255, 255, 255, 0.35));
    font-size: 10px;
    font-weight: bold;
    opacity: 1;
    -webkit-text-fill-color: currentColor;
}
.wf-banner img + img { margin-left: -4px; }
/* Блик, пробегающий по плашке */
.wf-banner::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    transform: translateX(-80px) skewX(-18deg);
    opacity: 0;
}
.wf-on .wf-banner::after { animation: wf-glint var(--wf-glint, 6s) ease-in-out infinite; }
@keyframes wf-glint {
    0%, 70% { transform: translateX(-80px) skewX(-18deg); opacity: 0; }
    72% { opacity: 1; }
    92% { transform: translateX(var(--wf-gw, 760px)) skewX(-18deg); opacity: 1; }
    93%, 100% { opacity: 0; }
}
/* Если у записи уже есть лента чемпиона I сезона — плашка встаёт под ней */
.champ-ribbon + .wf-banner { margin-top: -4px; }

.wf-r1 .wf-banner {
    --wf-bb: linear-gradient(90deg, #120d04, #3b2a0b 45%, #120d04);
    --wf-bt: #f6d36b;
    --wf-bl: #c8961e;
    --wf-pb: rgba(246, 211, 107, 0.6);
    --wf-bg-text: linear-gradient(90deg, #c8961e, #fff2b8, #e3b23c);
    --wf-fill: transparent;
    --wf-glint: 5s;
}
.wf-r2 .wf-banner {
    --wf-bb: linear-gradient(90deg, #15181d, #3a414b 45%, #15181d);
    --wf-bt: #dfe5ec;
    --wf-bl: #8e99a6;
    --wf-pb: rgba(223, 229, 236, 0.55);
    --wf-bg-text: linear-gradient(90deg, #a9b3bf, #ffffff, #b8c2cd);
    --wf-fill: transparent;
    --wf-glint: 7s;
}
.wf-r3 .wf-banner {
    --wf-bb: linear-gradient(90deg, #1e1107, #4a2a10 45%, #1e1107);
    --wf-bt: #f0b37a;
    --wf-bl: #b06a2b;
    --wf-pb: rgba(240, 179, 122, 0.55);
}
.wf-r3 .wf-banner::after { display: none; }
.wf-s3 .wf-banner {
    --wf-bb: linear-gradient(90deg, #230807, #5a1410 45%, #230807);
    --wf-bt: #ffc35a;
    --wf-bl: #c8401f;
    --wf-pb: rgba(255, 195, 90, 0.55);
    --wf-glint: 8s;
    padding-right: 46px;
}
/* Сургучная печать Маршала: падает «штампом», когда запись впервые на экране */
.wf-seal {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    background: url("/static/flair/seal.svg") center / contain no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
    transform: rotate(-12deg);
}
.wf-stamp .wf-seal { animation: wf-stamp 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes wf-stamp {
    0% { transform: scale(2.6) rotate(-30deg); opacity: 0; }
    60% { transform: scale(0.9) rotate(-10deg); opacity: 1; }
    100% { transform: scale(1) rotate(-12deg); opacity: 1; }
}

/* ---------- Золотые искры Чемпиона ------------------------------------- */
.wf-sparks { inset: 0; overflow: hidden; z-index: 1; }
.wf-sparks i {
    position: absolute;
    bottom: -6px;
    width: 3px;
    height: 3px;
    background: #ffe28a;
    box-shadow: 0 0 6px 1px rgba(255, 210, 90, 0.9);
    opacity: 0;
}
.wf-on > .wf-sparks i { animation: wf-rise var(--d, 7s) linear var(--t, 0s) infinite; }
@keyframes wf-rise {
    0% { transform: translate(0, 0) rotate(45deg); opacity: 0; }
    10% { opacity: 0.95; }
    60% { opacity: 0.7; }
    100% { transform: translate(var(--x, 12px), -260px) rotate(45deg); opacity: 0; }
}

/* ---------- Лента «оса» Командира Роя ---------------------------------- */
.wf-tape {
    left: -1px;
    right: -1px;
    top: -1px;
    height: 6px;
    background: repeating-linear-gradient(-45deg, #f2c230 0 8px, #1a1a1a 8px 16px);
    background-size: 22.6px 6px;
    border-bottom: 1px solid #1a1a1a;
}
.wf-on > .wf-tape { animation: wf-tape 1.6s linear infinite; }
@keyframes wf-tape { to { background-position: 22.6px 0; } }
.box.wall-post.wf-s10:not(.champ-rich) { border-color: #8a4a1c !important; padding-top: 14px; }

/* ---------- Полоса слева: Элита, Финалист, Гвардеец -------------------- */
.wf-stripe { left: -1px; top: -1px; bottom: -1px; width: 5px; }
.wf-r10 .wf-stripe {
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 7px),
        linear-gradient(90deg, #3e4750, #8f9aa5 60%, #3e4750);
}
.wf-r50 .wf-stripe {
    width: 4px;
    background: repeating-linear-gradient(180deg, #6f7a45 0 9px, #4b5530 9px 15px, #8a8f5a 15px 21px, #3d4428 21px 26px);
}
.wf-s50 .wf-stripe {
    background: repeating-linear-gradient(180deg, #6b7d3a 0 8px, #4a3b24 8px 14px, #85934e 14px 19px, #2f3a1c 19px 25px);
}

/* ---------- Значки у ника ---------------------------------------------- */
.wf-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 5px;
    padding: 0 5px;
    height: 15px;
    font-family: Tahoma, sans-serif;
    font-size: 9px;
    font-weight: bold;
    line-height: 15px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid;
    flex-shrink: 0;
}
.wf-chip img { width: 11px; height: 11px; }
.wf-chip-r10 { color: #e8edf2; background: linear-gradient(180deg, #6b7681, #3e4750); border-color: #2b3238; }
.wf-chip-r50 { color: #eef0dc; background: linear-gradient(180deg, #7d8850, #545e33); border-color: #3d4428; }
.wf-chip-s10 { color: #1a1a1a; background: linear-gradient(180deg, #f8d65a, #e0ac1c); border-color: #7a5410; }
.wf-chip-s50 { color: #e6ead4; background: linear-gradient(180deg, #6b7d3a, #4a3b24); border-color: #2f3a1c; }
.wf-chip-hw  { color: #ffb347; background: linear-gradient(180deg, #3a1f55, #1c0f2b); border-color: #0b0710; }
/* на тёмном значке мышь светится тыквенным (bat_glow.svg), иначе её не видно */
.wf-chip-hw i {
    width: 20px;
    height: 13px;
    margin: -1px 0 -1px -3px;
    background: url("/static/flair/bat_glow.svg") center / contain no-repeat;
    filter: drop-shadow(0 0 2px rgba(255, 140, 26, 0.85));
}

/* ---------- Запись Жнеца: летучая мышь пролетает через карточку --------- */
.box.wall-post.wf-hw:not(.champ-rich):not(.wf-r1):not(.wf-r2):not(.wf-r3):not(.wf-s3) {
    border-color: #4a2a6b !important;
    box-shadow: 0 3px 12px rgba(74, 42, 107, 0.22), inset 0 -3px 0 #ff8a1a !important;
}
.wf-batfly-lane { inset: 0; overflow: hidden; z-index: 3; }
.wf-batfly {
    position: absolute;
    left: 0;
    top: 30%;
    width: 30px;
    height: 19px;
    background: url("/static/flair/bat.svg") center / contain no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
    opacity: 0;
}
.wf-on .wf-batfly { animation: wf-batpass 15s linear var(--t, 1s) infinite; }
.wf-on .wf-batfly + .wf-batfly { width: 20px; height: 13px; top: 18%; animation-duration: 19s; }
@keyframes wf-batpass {
    0% { left: -40px; transform: translateY(20px) scale(0.8); opacity: 0; }
    1% { opacity: 1; }
    6% { left: 20%; transform: translateY(-18px) scale(1); }
    11% { left: 40%; transform: translateY(16px) scale(0.95); }
    16% { left: 60%; transform: translateY(-10px) scale(1.05); }
    21% { left: 82%; transform: translateY(12px) scale(0.9); opacity: 1; }
    25% { left: 104%; transform: translateY(-20px) scale(0.85); opacity: 0; }
    100% { left: 104%; opacity: 0; }
}

/* ---------- Комментарии ------------------------------------------------- */
.xpv-c.wf-r1, .xpv-c.wf-r2, .xpv-c.wf-r3, .xpv-c.wf-s3 { box-shadow: inset 3px 0 0 var(--wf-cbar); }
.xpv-c.wf-r1 { --wf-cbar: #d9a62c; }
.xpv-c.wf-r2 { --wf-cbar: #aab4c0; }
.xpv-c.wf-r3 { --wf-cbar: #b06a2b; }
.xpv-c.wf-s3 { --wf-cbar: #c8401f; }
.xpv-c.wf-hw .xpv-c-ava { position: relative; overflow: visible; }
.xpv-c.wf-hw .xpv-c-ava::after {
    content: "";
    position: absolute;
    right: -6px;
    top: -3px;
    width: 11px;
    height: 15px;
    background: url("/static/flair/bat_hang.svg") center / contain no-repeat;
    pointer-events: none;
}

/* ---------- «Мне нравится»: мыши Жнецов -------------------------------- */
.like-btn-style[data-hw-likes] { position: relative; }
.like-btn-style[data-hw-likes]:not([data-hw-likes="0"]):not([data-hw-likes=""])::before {
    content: "";
    position: absolute;
    right: 5px;
    top: 0;
    width: 12px;
    height: 17px;
    background: url("/static/flair/bat_hang.svg") center top / contain no-repeat;
    pointer-events: none;
}
/* Мой лайк, когда я — Жнец: мышь кружит по кнопке */
.like-btn-style.wf-mine.liked::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 14px;
    margin-top: -7px;
    background: url("/static/flair/bat.svg") center / contain no-repeat;
    pointer-events: none;
    animation: wf-btnbat 5.5s ease-in-out infinite;
}
.like-btn-style.wf-mine.liked {
    color: #b34700;
    background: linear-gradient(180deg, #fff6ea 0%, #ffe2bf 100%);
}
@keyframes wf-btnbat {
    0% { transform: translate(4px, 2px) scaleX(1); }
    22% { transform: translate(calc(var(--wf-bw, 120px) * 0.45), -3px) scaleX(1); }
    45% { transform: translate(calc(var(--wf-bw, 120px) - 26px), 1px) scaleX(1); }
    50% { transform: translate(calc(var(--wf-bw, 120px) - 26px), -1px) scaleX(-1); }
    75% { transform: translate(calc(var(--wf-bw, 120px) * 0.4), 3px) scaleX(-1); }
    95% { transform: translate(4px, -2px) scaleX(-1); }
    100% { transform: translate(4px, 2px) scaleX(1); }
}

/* Стая при нажатии «Мне нравится» (элементы в <body>, position: fixed) */
.wf-burst {
    position: fixed;
    z-index: 100000;
    width: 26px;
    height: 16px;
    margin: -8px 0 0 -13px;
    background: url("/static/flair/bat.svg") center / contain no-repeat;
    pointer-events: none;
    animation: wf-burst 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes wf-burst {
    0% { transform: translate(0, 0) scale(0.3); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translate(var(--x, 0), var(--y, -120px)) scale(var(--s, 1)); opacity: 0; }
}
/* Конфетти из золота, когда лайкаешь запись Чемпиона */
.wf-gold {
    position: fixed;
    z-index: 100000;
    width: 5px;
    height: 5px;
    background: #ffd65a;
    box-shadow: 0 0 5px rgba(255, 200, 60, 0.9);
    pointer-events: none;
    animation: wf-burst 1.1s ease-out forwards;
}

/* ---------- Тёмная тема / без движения ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wf-on > .wf-frame, .wf-on .wf-banner::after, .wf-on > .wf-sparks i, .wf-on > .wf-tape,
    .wf-on .wf-batfly, .wf-stamp .wf-seal, .like-btn-style.wf-mine.liked::after { animation: none !important; }
    .wf-sparks, .wf-batfly-lane, .wf-burst, .wf-gold { display: none !important; }
}