/* ==========================================================================
   CHAMPIONS.CSS — записи и комментарии топ-10 прошлого сезона
   --------------------------------------------------------------------------
   Подключается в index.html ПОСЛЕ xp_admin.css и ДО xp_chrome.css
   (xp_chrome.css по-прежнему строго последний). Логика — js/champions.js,
   кто и как выделяется — решает сервер (services/season_champions.py).

   Лесенка «от большего к меньшему»:

     место | карточка записи            | текст        | лента сверху      | движение
     ------+----------------------------+--------------+-------------------+-------------------------
       1   | тёмное золото, свечение    | светлое      | золото, корона,   | блик по ленте, искры,
           | рамки, золотые кнопки      | золото       | искры             | отсвет по карточке,
           |                            |              |                   | мерцание рамки, перелив ника
       2   | графит, серебряная рамка   | серебро      | серебро           | блик раз в 7 с
       3   | тёмный шоколад, бронза     | бронза       | бронза            | —
       4   | аметист                    | фиолетовый   | фиолетовая        | —
       5   | светлый аметист            | фиолетовый   | светлая           | —
       6   | голубая, полоса 4 px       | обычный      | голубая, узкая    | —
       7   | белая, полоса 4 px         | обычный      | бледная, узкая    | —
       8   | полоса 3 px                | обычный      | значок у ника     | —
       9   | полоса 2 px                | обычный      | значок-контур     | —
      10   | бледная полоса 2 px        | обычный      | значок-надпись    | —

   Комментарии: 1–3 — тёмная строка и цветной текст, 4–7 — цветной фон,
   8–9 — полоса, 10 — только значок места у ника. У всех — значок места.

   Классы (ставит champions.js):
     .champ .champ-pN .champ-<семья>   — всегда, семья: gold | silver |
                                        bronze | amethyst | sapphire
     .champ-rich (+ .champ-dark у 1–3) — полный вид
     .champ-still                      — полный вид без движения
     .champ-soft                       — скромный вид: полоса и значок
     .champ-off                        — запись вне экрана, анимация на паузе
   Элементы: .wall-post (запись), .xp-repost-box (репост внутри записи),
   .xpv-c (комментарий), #xpv-win (окно «Просмотр записи»).

   Почему так много !important: .wall-post в style.css и a.post-date-link
   в xp_viewer.css уже держат цвета с !important. Перебиваем их только
   более точным селектором (.box.wall-post.champ-rich…), а не порядком
   подключения — поэтому файл не обязан стоять последним.

   Анимируются только transform/opacity псевдоэлементов (дёшево), кроме
   перелива ника у 1 места (маленький элемент). Вне экрана — пауза,
   при prefers-reduced-motion движения нет вовсе.
   ========================================================================== */

/* ==========================================================================
   1. ПАЛИТРА: переменные по семьям и местам
   ========================================================================== */
/* Сброс: переменные наследуются, и без него комментарий 8 места внутри
   карточки 1 места взял бы её тёмный фон и золотой текст. Каждое место
   ниже задаёт только своё, остальное остаётся «по умолчанию». */
.champ {
    --ch-bg: initial; --ch-border: initial; --ch-shadow: initial;
    --ch-text: initial; --ch-muted: initial; --ch-link: initial;
    --ch-nick: initial; --ch-accent: initial; --ch-glow: initial;
    --ch-ribbon: initial; --ch-ribbon-text: initial; --ch-ribbon-line: initial; --ch-ribbon-shadow: initial;
    --ch-foot: initial; --ch-foot-line: initial;
    --ch-btn: initial; --ch-btn-line: initial; --ch-btn-text: initial;
    --ch-cbg: initial; --ch-cbg-hover: initial; --ch-cline: initial; --ch-cbar: initial;
    --ch-vauthor: initial; --ch-doc: initial;
}

.champ-gold    { --fam: #d9a53a; --fam-tint: #fffaf0; --chip-bg: linear-gradient(180deg, #fff6d0 0%, #f2d27a 100%); --chip-line: #a87b12; --chip-text: #4a3000; }
.champ-silver   { --fam: #9aa4b2; --fam-tint: #f6f7f9; --chip-bg: linear-gradient(180deg, #ffffff 0%, #dde2e9 100%); --chip-line: #7d8794; --chip-text: #2b3138; }
.champ-bronze   { --fam: #c27a3c; --fam-tint: #fff6ef; --chip-bg: linear-gradient(180deg, #ffe6cf 0%, #e9b07c 100%); --chip-line: #8f5220; --chip-text: #4a2408; }
.champ-amethyst { --fam: #8a5cc7; --fam-tint: #faf6ff; --chip-bg: linear-gradient(180deg, #f5edff 0%, #ddc9f7 100%); --chip-line: #7a4fc0; --chip-text: #3d1f73; }
.champ-sapphire { --fam: #2a62d8; --fam-tint: #f4f8ff; --chip-bg: linear-gradient(180deg, #f0f5ff 0%, #d6e4fc 100%); --chip-line: #4a78d0; --chip-text: #1a3f8f; }

/* --- 1 место: золото ---------------------------------------------------- */
.champ-rich.champ-p1 {
    --ch-bg: radial-gradient(130% 90% at 50% -20%, rgba(255, 210, 100, 0.18) 0%, rgba(255, 210, 100, 0) 60%), linear-gradient(180deg, #2b1e07 0%, #1b1305 100%);
    --ch-border: #c9982a;
    --ch-shadow: 0 0 0 1px #3d2b08, 0 0 18px rgba(240, 185, 60, 0.38), 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 226, 140, 0.22);
    --ch-text: #f5e3ac;
    --ch-muted: #b99b5a;
    --ch-link: #ffd36b;
    --ch-nick: linear-gradient(90deg, #fff7cf 0%, #f2c44e 30%, #fff3b8 50%, #e0a92e 70%, #fff7cf 100%);
    --ch-accent: #e0b23a;
    --ch-glow: rgba(240, 192, 74, 0.6);
    --ch-ribbon: linear-gradient(90deg, #b8861b 0%, #f7e08a 22%, #d9a732 45%, #fbe9a2 70%, #c7951f 100%);
    --ch-ribbon-text: #3a2600;
    --ch-ribbon-line: #7a5a0e;
    --ch-ribbon-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    --ch-foot: linear-gradient(180deg, #33260b 0%, #231906 100%);
    --ch-foot-line: #5e4510;
    --ch-btn: linear-gradient(180deg, #fff8de 0%, #f6e3a6 45%, #ecd081 50%, #f3dc95 100%);
    --ch-btn-line: #7a5a0e;
    --ch-btn-text: #3a2600;
    --ch-cbg: linear-gradient(90deg, #2b1e07 0%, #1e1505 100%);
    --ch-cbg-hover: linear-gradient(90deg, #352509 0%, #251a06 100%);
    --ch-cline: #3e2d0b;
    --ch-cbar: 3px;
    --ch-vauthor: linear-gradient(90deg, #2b1e07 0%, #4a370d 100%);
    --ch-doc: #1f1606;
}

/* --- 2 место: серебро --------------------------------------------------- */
.champ-rich.champ-p2 {
    --ch-bg: linear-gradient(180deg, #2c3139 0%, #1f232a 100%);
    --ch-border: #aeb7c4;
    --ch-shadow: 0 0 0 1px #3a414b, 0 0 10px rgba(205, 215, 230, 0.22), 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    --ch-text: #e7ebf1;
    --ch-muted: #9aa4b2;
    --ch-link: #cfe0ff;
    --ch-nick: linear-gradient(90deg, #ffffff 0%, #b4bdc9 40%, #ffffff 55%, #9ea8b5 80%, #ffffff 100%);
    --ch-accent: #c3cbd6;
    --ch-glow: rgba(205, 215, 230, 0.45);
    --ch-ribbon: linear-gradient(90deg, #8e98a6 0%, #f4f6f9 28%, #b4bcc8 52%, #eef1f5 78%, #9aa3b0 100%);
    --ch-ribbon-text: #1f242b;
    --ch-ribbon-line: #5f6874;
    --ch-ribbon-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    --ch-foot: linear-gradient(180deg, #30353d 0%, #23272e 100%);
    --ch-foot-line: #474e59;
    --ch-btn: linear-gradient(180deg, #ffffff 0%, #eef0f3 45%, #dde2e8 50%, #e7eaee 100%);
    --ch-btn-line: #5f6874;
    --ch-btn-text: #1f242b;
    --ch-cbg: linear-gradient(90deg, #2c3139 0%, #22262d 100%);
    --ch-cbg-hover: linear-gradient(90deg, #343a43 0%, #282c34 100%);
    --ch-cline: #3a414b;
    --ch-cbar: 3px;
    --ch-vauthor: linear-gradient(90deg, #262b32 0%, #454c57 100%);
    --ch-doc: #22262d;
}

/* --- 3 место: бронза ---------------------------------------------------- */
.champ-rich.champ-p3 {
    --ch-bg: linear-gradient(180deg, #2e1b0d 0%, #20130a 100%);
    --ch-border: #b4733a;
    --ch-shadow: 0 0 0 1px #4a2b14, 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 190, 130, 0.08);
    --ch-text: #f2d5b6;
    --ch-muted: #a98262;
    --ch-link: #ffc58f;
    --ch-nick: linear-gradient(90deg, #ffe0bf 0%, #c98446 45%, #ffd2a6 60%, #b97137 85%, #ffe0bf 100%);
    --ch-accent: #c27a3c;
    --ch-glow: rgba(194, 122, 60, 0.35);
    --ch-ribbon: linear-gradient(90deg, #94552a 0%, #f0b985 35%, #b06a32 65%, #e5a46b 100%);
    --ch-ribbon-text: #3a1d07;
    --ch-ribbon-line: #6e3a14;
    --ch-ribbon-shadow: 0 1px 0 rgba(255, 230, 205, 0.5);
    --ch-foot: linear-gradient(180deg, #34200f 0%, #24160b 100%);
    --ch-foot-line: #5a3518;
    --ch-btn: linear-gradient(180deg, #fff3e6 0%, #f6d9bb 45%, #ecc39b 50%, #f2d0ad 100%);
    --ch-btn-line: #7a4318;
    --ch-btn-text: #3a1d07;
    --ch-cbg: linear-gradient(90deg, #2e1b0d 0%, #22140a 100%);
    --ch-cbg-hover: linear-gradient(90deg, #38220f 0%, #29180b 100%);
    --ch-cline: #4a2b14;
    --ch-cbar: 3px;
    --ch-vauthor: linear-gradient(90deg, #2a1a0e 0%, #4b2d16 100%);
    --ch-doc: #22140a;
}

/* --- 4 место: аметист --------------------------------------------------- */
.champ-rich.champ-p4 {
    --ch-bg: linear-gradient(180deg, #f8f2ff 0%, #efe5fc 100%);
    --ch-border: #8a5cc7;
    --ch-shadow: 0 2px 8px rgba(90, 40, 160, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    --ch-text: #2a1747;
    --ch-muted: #7a68a0;
    --ch-link: #6a32b8;
    --ch-accent: #8a5cc7;
    --ch-ribbon: linear-gradient(180deg, #9a6fdc 0%, #7446bf 55%, #663aae 100%);
    --ch-ribbon-text: #ffffff;
    --ch-ribbon-line: #4d2a8a;
    --ch-ribbon-shadow: 0 1px 0 rgba(40, 0, 80, 0.45);
    --ch-foot: linear-gradient(180deg, #f6f0fd 0%, #e9def8 100%);
    --ch-foot-line: #cdb8ec;
    --ch-cbg: #f5effd;
    --ch-cbg-hover: #efe5fc;
    --ch-cline: #e6dbf6;
    --ch-cbar: 3px;
    --ch-vauthor: linear-gradient(90deg, #ffffff 0%, #e3d3fa 100%);
    --ch-doc: #fcf9ff;
}

/* --- 5 место: светлый аметист ------------------------------------------- */
.champ-rich.champ-p5 {
    --ch-bg: #fbf8ff;
    --ch-border: #bba0e3;
    --ch-shadow: 0 1px 4px rgba(90, 40, 160, 0.08);
    --ch-text: #2b2140;
    --ch-link: #6a32b8;
    --ch-accent: #b89ae0;
    --ch-ribbon: linear-gradient(180deg, #f3ecfd 0%, #e6daf8 100%);
    --ch-ribbon-text: #4d2a8a;
    --ch-ribbon-line: #d3c2ef;
    --ch-ribbon-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    --ch-cbg: #faf6ff;
    --ch-cbg-hover: #f4edfe;
    --ch-cline: #eee6fa;
    --ch-cbar: 3px;
    --ch-vauthor: linear-gradient(90deg, #ffffff 0%, #efe6fb 100%);
}

/* --- 6–10: сапфир, каждое место скромнее предыдущего --------------------- */
.champ-rich.champ-p6 {
    --ch-bg: #f4f8ff;
    --ch-border: #8fb0ea;
    --ch-shadow: inset 4px 0 0 #2a62d8, 2px 2px 6px rgba(0, 0, 0, 0.06);
    --ch-accent: #2a62d8;
    --ch-ribbon: linear-gradient(180deg, #eaf2ff 0%, #dce8fd 100%);
    --ch-ribbon-text: #1f4fb5;
    --ch-ribbon-line: #c3d6f8;
    --ch-cbg: #f0f5ff;
    --ch-cbg-hover: #e8f0ff;
    --ch-cbar: 3px;
    --ch-vauthor: linear-gradient(90deg, #ffffff 0%, #d5e4fd 100%);
}
.champ-rich.champ-p7 {
    --ch-border: #a9c1ee;
    --ch-shadow: inset 4px 0 0 #2a62d8, 2px 2px 6px rgba(0, 0, 0, 0.06);
    --ch-accent: #2a62d8;
    --ch-ribbon: #f3f7ff;
    --ch-ribbon-text: #2a56b0;
    --ch-ribbon-line: #dbe6fb;
    --ch-cbg: #f7faff;
    --ch-cbar: 2px;
    --ch-vauthor: linear-gradient(90deg, #ffffff 0%, #e2ecfd 100%);
}
.champ-rich.champ-p8  { --ch-shadow: inset 3px 0 0 #2a62d8, 2px 2px 6px rgba(0, 0, 0, 0.08); --ch-accent: #2a62d8; --ch-cbar: 2px; }
.champ-rich.champ-p9  { --ch-shadow: inset 2px 0 0 #4f7fe0, 2px 2px 6px rgba(0, 0, 0, 0.08); --ch-accent: #4f7fe0; --ch-cbar: 2px; }
.champ-rich.champ-p10 { --ch-shadow: inset 2px 0 0 #a9c0ee, 2px 2px 6px rgba(0, 0, 0, 0.08); --ch-accent: #a9c0ee; --ch-cbar: 0px; }

/* ==========================================================================
   2. ЗАПИСЬ В ЛЕНТЕ (полный вид)
   ========================================================================== */
.box.wall-post.champ-rich {
    background: var(--ch-bg, #ffffff) !important;
    border-color: var(--ch-border, #7f9db9) !important;
    box-shadow: var(--ch-shadow, 2px 2px 6px rgba(0, 0, 0, 0.08)) !important;
}

/* Основной текст — цветом семьи (только у 1–5), без градиента: длинные
   записи должны читаться. Только прямые дети карточки: вложенный репост
   и обсуждение — светлые «островки» со своими цветами. */
.box.wall-post.champ-rich > .post-text { color: var(--ch-text, #000000); }
.box.wall-post.champ-rich > .post-text a,
.box.wall-post.champ-rich > .post-text .xp-read-more-link { color: var(--ch-link, var(--xp-link-color, #0000ff)); }

.box.wall-post.champ-rich a.post-date-link { color: var(--ch-muted, var(--xp-text-muted, #555555)) !important; }
.box.wall-post.champ-rich a.post-date-link:hover { color: var(--ch-link, #215dc6) !important; }

/* Ник автора на тёмных карточках (1–3): свой металл вместо обычного
   градиента сезона — тот рассчитан на белый фон. */
.box.wall-post.champ-dark .post-author,
.box.wall-post.champ-dark .post-author .season-nick,
.xpv-c.champ-dark .xpv-c-name,
.xpv-c.champ-dark .xpv-c-name .season-nick,
.xpv-win.champ-dark .xpv-author-name,
.xpv-win.champ-dark .xpv-author-name .season-nick {
    background: var(--ch-nick) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none;
}
.box.wall-post.champ-dark .post-author:hover { text-decoration-color: var(--ch-accent); }

/* Аватар без рамки из магазина — тонкое кольцо цвета места */
.box.wall-post.champ-dark img.post-avatar {
    border: 1px solid var(--ch-accent) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px var(--ch-glow, transparent);
}

/* Строка ника может не влезть в телефон: ник, онлайн, рейтинг, значок */
.wall-post.champ .post-meta > div,
.xp-repost-box.champ .xp-repost-header-info > div { flex-wrap: wrap; row-gap: 2px; }

/* Подвал записи на тёмных карточках — тёмный, кнопки в металле семьи */
.box.wall-post.champ-dark > .post-footer {
    background: var(--ch-foot);
    border-top-color: var(--ch-foot-line);
}
.box.wall-post.champ-dark > .post-footer .like-btn-style {
    background: var(--ch-btn);
    border-color: var(--ch-btn-line) !important;
    color: var(--ch-btn-text);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7);
}
.box.wall-post.champ-dark > .post-footer .like-btn-style:hover { filter: brightness(1.07); }
.box.wall-post.champ-dark > .post-footer .like-btn-style.liked { color: #b30000; }

/* Подвал 4 места — сиреневый, кнопки обычные XP */
.box.wall-post.champ-rich.champ-p4 > .post-footer {
    background: var(--ch-foot);
    border-top-color: var(--ch-foot-line);
}

/* --- Лента сверху (1–7) ------------------------------------------------ */
.wall-post .champ-ribbon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -10px -10px 10px;
    padding: 5px 10px;
    overflow: hidden;
    background: var(--ch-ribbon);
    color: var(--ch-ribbon-text);
    border-bottom: 1px solid var(--ch-ribbon-line);
    font: bold 11px/16px Tahoma, Verdana, sans-serif;
    letter-spacing: 0.03em;
    text-shadow: var(--ch-ribbon-shadow, none);
    user-select: none;
}
.champ-ribbon .champ-ribbon-ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3));
}
.champ-ribbon-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.champ-ribbon-place {
    flex-shrink: 0;
    padding: 0 7px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    background: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0;
}

/* 1 место — самая крупная лента */
.wall-post.champ-p1 .champ-ribbon {
    padding: 7px 12px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wall-post.champ-p1 .champ-ribbon .champ-ribbon-ico { width: 20px; height: 20px; }
.wall-post.champ-p1 .champ-ribbon-place {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 11px;
    line-height: 17px;
    background: rgba(255, 250, 225, 0.55);
    border-color: rgba(90, 60, 0, 0.35);
}
.wall-post.champ-p2 .champ-ribbon,
.wall-post.champ-p3 .champ-ribbon { padding: 6px 10px; }

/* 5–7 — лента светлая, у 6–7 ещё и узкая, обычным шрифтом */
.wall-post.champ-p5 .champ-ribbon-place,
.wall-post.champ-p6 .champ-ribbon-place,
.wall-post.champ-p7 .champ-ribbon-place {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--ch-ribbon-line);
}
.wall-post.champ-p6 .champ-ribbon,
.wall-post.champ-p7 .champ-ribbon {
    padding: 3px 10px;
    font-weight: normal;
    letter-spacing: 0;
}
.wall-post.champ-p6 .champ-ribbon .champ-ribbon-ico,
.wall-post.champ-p7 .champ-ribbon .champ-ribbon-ico { width: 14px; height: 14px; }
.wall-post.champ-p7 .champ-ribbon-place { padding: 0 5px; }

/* Лента прижата к карточке так же, как подвал: у 6–7 полоса слева не
   должна обрываться под лентой */
.wall-post.champ-p6 .champ-ribbon,
.wall-post.champ-p7 .champ-ribbon { box-shadow: inset 4px 0 0 #2a62d8; }

/* --- Движение: только 1 и 2 место -------------------------------------- */
/* Блик по ленте */
.wall-post.champ-rich.champ-p1 .champ-ribbon::after,
.wall-post.champ-rich.champ-p2 .champ-ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 30%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(0);
    animation: champ-glint 3.6s ease-in-out infinite;
}
.wall-post.champ-rich.champ-p2 .champ-ribbon::after { animation: champ-glint-slow 7s ease-in-out infinite; }

@keyframes champ-glint {
    0% { transform: translateX(0); }
    55%, 100% { transform: translateX(480%); }
}
@keyframes champ-glint-slow {
    0% { transform: translateX(0); }
    30%, 100% { transform: translateX(480%); }
}

/* Искры на ленте 1 места */
.champ-spark {
    position: absolute;
    width: 9px;
    height: 9px;
    pointer-events: none;
    background: #fffbe6;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    opacity: 0;
    transform: scale(0.4);
    animation: champ-twinkle 2.6s ease-in-out infinite;
}
.champ-spark:nth-of-type(2) { right: 96px; top: 3px; animation-delay: 0s; }
.champ-spark:nth-of-type(3) { right: 132px; bottom: 3px; width: 7px; height: 7px; animation-delay: 0.9s; }
.champ-spark:nth-of-type(4) { right: 70px; bottom: 5px; width: 6px; height: 6px; animation-delay: 1.7s; }

@keyframes champ-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    45% { opacity: 1; transform: scale(1) rotate(45deg); }
    60% { opacity: 0.9; transform: scale(0.85) rotate(60deg); }
}

/* Отсвет, проходящий по всей карточке 1 места раз в 9 секунд */
.box.wall-post.champ-rich.champ-p1::before {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -35%;
    width: 22%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 235, 170, 0) 0%, rgba(255, 238, 185, 0.07) 30%, rgba(255, 246, 210, 0.15) 50%, rgba(255, 238, 185, 0.07) 70%, rgba(255, 235, 170, 0) 100%);
    opacity: 0;
    transform: translateX(0) skewX(-20deg);
    animation: champ-sheen 9s ease-in-out infinite;
}
@keyframes champ-sheen {
    0% { transform: translateX(0) skewX(-20deg); opacity: 0; }
    3% { opacity: 1; }
    26% { transform: translateX(680%) skewX(-20deg); opacity: 1; }
    29%, 100% { transform: translateX(680%) skewX(-20deg); opacity: 0; }
}
/* Отсвет проходит по самой записи, но не по светлым «островкам» внутри:
   обсуждение и вложенный репост лежат над ним */
.box.wall-post.champ-rich.champ-p1 > .post-comments-section,
.box.wall-post.champ-rich.champ-p1 > .xp-repost-box {
    position: relative;
    z-index: 2;
}

/* Мерцание рамки 1 места */
.box.wall-post.champ-rich.champ-p1::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 224, 130, 0.6), inset 0 0 22px rgba(255, 200, 80, 0.22);
    opacity: 0.25;
    animation: champ-pulse 2.8s ease-in-out infinite;
}
@keyframes champ-pulse {
    50% { opacity: 1; }
}

/* Перелив ника 1 места */
.box.wall-post.champ-rich.champ-p1 .post-author,
.box.wall-post.champ-rich.champ-p1 .post-author .season-nick {
    animation: champ-nick 6s linear infinite;
}
@keyframes champ-nick {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}

/* Без движения: настройка «Анимация» выключена или запись вне экрана */
.champ-still .champ-ribbon::after,
.champ-still .champ-spark,
.champ-still::before,
.champ-still::after,
.champ-still .post-author,
.champ-still .post-author .season-nick { animation: none !important; }
.champ-still .champ-spark { display: none; }
.box.wall-post.champ-still.champ-p1::after { opacity: 0.7; }
.box.wall-post.champ-still.champ-p1::before { display: none; }

.champ-off .champ-ribbon::after,
.champ-off .champ-spark,
.champ-off::before,
.champ-off::after,
.champ-off .post-author,
.champ-off .post-author .season-nick { animation-play-state: paused !important; }

/* ==========================================================================
   3. ЗНАЧКИ МЕСТА: у ника записи и у ника комментария
   ========================================================================== */
.champ-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 6px;
    padding: 0 6px 0 3px;
    height: 17px;
    background: var(--chip-bg, #eef3fd);
    border: 1px solid var(--chip-line, #4a78d0);
    color: var(--chip-text, #1a3f8f);
    font: bold 10px/15px Tahoma, Verdana, sans-serif;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    cursor: help;
    -webkit-text-fill-color: currentColor;
}
.champ-chip .xpi { width: 13px; height: 13px; flex-shrink: 0; }

/* 9 место — контур, 10 — просто надпись: «децл» */
.champ-rich.champ-p9 .champ-chip { background: #ffffff; box-shadow: none; }
.champ-rich.champ-p10 .champ-chip {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #4a6fb8;
    font-weight: normal;
    padding-left: 0;
}
.champ-rich.champ-p10 .champ-chip .xpi { width: 11px; height: 11px; opacity: 0.8; }

.champ-ctag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    height: 15px;
    padding: 0 4px 0 2px;
    background: var(--chip-bg, #eef3fd);
    border: 1px solid var(--chip-line, #4a78d0);
    color: var(--chip-text, #1a3f8f);
    font: bold 10px/13px Tahoma, Verdana, sans-serif;
    cursor: help;
    -webkit-text-fill-color: currentColor;
}
.champ-ctag .xpi { width: 11px; height: 11px; }
.champ-ctag b { font-weight: bold; }

/* ==========================================================================
   4. КОММЕНТАРИЙ (лента и окно «Просмотр записи»)
   ========================================================================== */
.xpv-c.champ-rich {
    background: var(--ch-cbg, transparent);
    box-shadow: inset var(--ch-cbar, 0px) 0 0 var(--ch-accent, transparent);
    border-bottom-color: var(--ch-cline, #eef0f5);
}
.xpv-c.champ-rich:hover { background: var(--ch-cbg-hover, var(--ch-cbg, #f5f8ff)); }
.xpv-c.champ-rich .xpv-c-text { color: var(--ch-text, #15181f); }

.xpv-c.champ-dark .xpv-c-time { color: var(--ch-muted); }
.xpv-c.champ-dark .xpv-c-text a,
.xpv-c.champ-dark .xpv-c-text .xp-read-more-link { color: var(--ch-link); }
.xpv-c.champ-dark .xpv-c-like,
.xpv-c.champ-dark .xpv-c-link { color: var(--ch-link); }
.xpv-c.champ-dark .xpv-c-like:hover,
.xpv-c.champ-dark .xpv-c-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.xpv-c.champ-dark .xpv-c-like.liked {
    color: #ff8f8f;
    background: rgba(255, 90, 90, 0.14);
    border-color: rgba(255, 120, 120, 0.35);
}
.xpv-c.champ-dark .xpv-c-icon { opacity: 0.85; }
.xpv-c.champ-dark .xpv-c-ava:not([class*="store-"]) img {
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 6px var(--ch-glow, transparent);
}

/* ==========================================================================
   5. РЕПОСТ ЧУЖОЙ ЗАПИСИ — только тонкая рамка цвета места
   ========================================================================== */
.xp-repost-box.champ::before { background: var(--fam) !important; }
.xp-repost-box.champ-rich.champ-dark { background-color: var(--fam-tint) !important; }

/* ==========================================================================
   6. СКРОМНЫЙ ВИД (настройка победителя): полоса цвета места и значок
   ========================================================================== */
.box.wall-post.champ-soft {
    box-shadow: inset 3px 0 0 var(--fam), 2px 2px 6px rgba(0, 0, 0, 0.08) !important;
}
.xpv-win.champ-soft .xpv-author { box-shadow: inset 3px 0 0 var(--fam); }

/* ==========================================================================
   7. ОКНО «ПРОСМОТР ЗАПИСИ»
   ========================================================================== */
.xpv-win.champ-rich .xpv-author {
    background: var(--ch-vauthor, linear-gradient(90deg, #ffffff 0%, #dbe5f9 100%));
    box-shadow: inset var(--ch-cbar, 3px) 0 0 var(--ch-accent, transparent);
}
.xpv-win.champ-dark .xpv-author { border-bottom-color: var(--ch-border); box-shadow: none; }
.xpv-win.champ-dark .xpv-date { color: var(--ch-muted); }
.xpv-win.champ-dark .xpv-author-ava img {
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 10px var(--ch-glow, transparent);
}

.xpv-win.champ-rich .xpv-doc { color: var(--ch-text, #111111); }
.xpv-win.champ-rich .xpv-doc { background: var(--ch-doc, transparent); }
.xpv-win.champ-rich.xpv-text-only .xpv-doc { background: var(--ch-doc, #ffffff); }
.xpv-win.champ-dark.xpv-text-only .xpv-doc {
    box-shadow: 0 0 0 1px var(--ch-border), 3px 3px 0 rgba(0, 0, 0, 0.28), 4px 5px 14px rgba(0, 0, 0, 0.22);
}
.xpv-win.champ-dark .xpv-text a,
.xpv-win.champ-dark .xpv-text .xp-read-more-link,
.xpv-win.champ-dark .xpv-section-title { color: var(--ch-link); }
.xpv-win.champ-dark .xpv-section-title { border-bottom-color: rgba(255, 255, 255, 0.14); }
.xpv-win.champ-dark .xpv-audio-row { border-bottom-color: rgba(255, 255, 255, 0.08); }
.xpv-win.champ-dark .xpv-audio-row:hover { background: rgba(255, 255, 255, 0.06); }
.xpv-win.champ-dark .xpv-audio-title { color: var(--ch-text); }
.xpv-win.champ-dark .xpv-audio-artist,
.xpv-win.champ-dark .xpv-empty,
.xpv-win.champ-dark .xpv-loading { color: var(--ch-muted); }

/* ==========================================================================
   8. ЗНАЧОК КОРОНЫ У СВОЕЙ ЗАПИСИ И МЕНЮ «ОФОРМЛЕНИЕ ЭТОЙ ЗАПИСИ»
   ========================================================================== */
.post-open-tool.champ-tool { opacity: 0.75; }
.post-open-tool.champ-tool:hover,
.post-open-tool.champ-tool:focus-visible { opacity: 1; }
.post-open-tool.champ-tool:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }

.champ-menu {
    position: fixed;
    z-index: 100002;
    min-width: 230px;
    max-width: calc(100vw - 16px);
    padding: 2px;
    background: #ffffff;
    border: 1px solid #aca899;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.35);
    font: 11px Tahoma, Verdana, sans-serif;
    color: #000000;
    animation: champ-menu-in 0.12s ease-out;
}
@keyframes champ-menu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.champ-menu-head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: -2px -2px 2px;
    padding: 4px 8px;
    background: linear-gradient(90deg, #ffffff 0%, #c6d3f7 100%);
    border-bottom: 1px solid #b9c9ee;
    color: #215dc6;
    font-weight: bold;
}
.champ-menu-head .xpi { width: 16px; height: 16px; }

.champ-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    width: 100%;
    padding: 4px 14px 4px 6px;
    border: 0;
    background: transparent;
    font: 11px Tahoma, Verdana, sans-serif;
    color: #000000;
    text-align: left;
    cursor: pointer;
}
.champ-menu-item:hover,
.champ-menu-item:focus { outline: none; background: #316ac5; color: #ffffff; }
.champ-menu-text { display: flex; flex-direction: column; min-width: 0; line-height: 15px; }
.champ-menu-text small { font-size: 10px; color: #6b7280; line-height: 13px; }
.champ-menu-item:hover small,
.champ-menu-item:focus small { color: #dbe6ff; }
.champ-menu-item.is-on { font-weight: bold; }

.champ-menu-dot {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin-top: 1px;
    border: 1px solid #1c5180;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #dcdcd6 100%);
}
.champ-menu-item.is-on .champ-menu-dot {
    background: radial-gradient(circle, #2f9c1e 0 30%, transparent 34%), radial-gradient(circle at 35% 30%, #ffffff 0%, #dcdcd6 100%);
}
.champ-menu-dot.is-none { visibility: hidden; }
.champ-menu-sep { height: 1px; margin: 3px 2px; background: #aca899; }

/* ==========================================================================
   9. ОКНО «ОФОРМЛЕНИЕ ЧЕМПИОНА»
   ========================================================================== */
.champ-set-overlay { z-index: 100001; }

.champ-set-win {
    display: flex;
    flex-direction: column;
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    background: #ece9d8;
    border: 3px solid #0831d9;
    border-top: 0;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 0 0 1px rgba(0, 20, 90, 0.4), 4px 8px 28px rgba(0, 0, 0, 0.5);
    font: 11px Tahoma, Verdana, sans-serif;
    color: #000000;
    overflow: hidden;
    animation: champ-win-in 0.16s ease-out;
}
@keyframes champ-win-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

.champ-set-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    flex-shrink: 0;
    padding: 0 5px 0 8px;
    background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
    border-radius: 7px 7px 0 0 / 8px 8px 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font: bold 13px "Trebuchet MS", Tahoma, sans-serif;
    text-shadow: 1px 1px 0 #0f1089;
    user-select: none;
}
.champ-set-titlebar .xpi { width: 16px; height: 16px; filter: drop-shadow(1px 1px 0 rgba(0, 0, 40, 0.35)); }
.champ-set-titlebar span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.champ-set-win.is-flash .champ-set-titlebar { animation: champ-title-flash 0.5s steps(2) 2; }
@keyframes champ-title-flash { 50% { filter: saturate(0.2) brightness(1.25); } }

.champ-set-x {
    width: 21px;
    height: 21px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid #ffffff;
    border-radius: 3px !important;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M6 6l9 9M15 6l-9 9' stroke='%23fff' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / 100% 100%,
                linear-gradient(135deg, #f4a184 0%, #e3633b 38%, #d0441b 70%, #b8360f 100%);
    box-shadow: inset -1px -1px 1px rgba(0, 0, 60, 0.45), inset 1px 1px 1px rgba(255, 255, 255, 0.55);
}
.champ-set-x:hover { filter: brightness(1.15); }
.champ-set-x:focus-visible { outline: 1px dotted #ffffff; outline-offset: 1px; }

.champ-set-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
}

.champ-set-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: linear-gradient(90deg, #ffffff 0%, #dbe5f9 100%);
    border: 1px solid #b9c9ee;
    line-height: 1.45;
}
.champ-set-hero b { display: block; font: bold 14px "Trebuchet MS", Tahoma, sans-serif; color: #0e44b8; }
.champ-set-hero span { color: #2a3e66; }
.champ-set-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--fam, #2a62d8) 120%);
    border: 2px solid var(--fam, #2a62d8);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.champ-set-medal .xpi { width: 26px; height: 26px; }
.champ-set-win.champ-gold .champ-set-hero { background: linear-gradient(90deg, #fffdf3 0%, #f7e7b4 100%); border-color: #d9b75e; }
.champ-set-win.champ-gold .champ-set-hero b { color: #7a5200; }
.champ-set-win.champ-gold .champ-set-hero span { color: #5c4512; }

.champ-set-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 12px;
    align-items: start;
}

.champ-set-group {
    margin: 0 0 10px;
    padding: 6px 10px 8px;
    border: 1px solid #d0d0bf;
    background: rgba(255, 255, 255, 0.35);
}
.champ-set-group legend { padding: 0 4px; color: #0046d5; font-weight: normal; }

.champ-set-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    padding: 4px 0;
    cursor: pointer;
    line-height: 15px;
}
.champ-set-check input { margin: 0; flex-shrink: 0; accent-color: #2f9c1e; }
.champ-set-check small { flex-basis: 100%; padding-left: 19px; color: #5b6475; font-size: 10px; }
.champ-set-check.is-off { color: #8a8a8a; cursor: default; }

.champ-set-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 8px;
    padding: 6px 8px;
    background: #ffffe1;
    border: 1px solid #e3d78c;
    color: #4a4220;
    line-height: 1.45;
}
.champ-set-note .xpi { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.champ-set-note-muted { background: transparent; border-color: transparent; color: #5b6475; padding-top: 0; }

.champ-set-overrides:empty { display: none; }
.champ-set-overrides {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 8px;
    padding: 6px 8px;
    background: #eef3fd;
    border: 1px solid #c3d3f2;
    color: #2a3e66;
    line-height: 1.4;
}

.champ-set-preview {
    padding: 2px 8px 8px;
    background: #ffffff;
    border: 1px solid;
    border-color: #a5a191 #ffffff #ffffff #a5a191;
    pointer-events: none;
}
.champ-set-pv-label { margin: 8px 0 -4px; color: #5b6475; font-size: 10px; }
.champ-set-preview .wall-post { margin-top: 8px; }
.champ-set-pv-comments {
    margin-top: 8px;
    border: 1px solid #b9c9ee;
    background: #ffffff;
}
.champ-set-pv-comments .xpv-c { border-bottom: 0; }

.champ-set-foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    padding: 8px 10px;
    border-top: 1px solid #ffffff;
    box-shadow: inset 0 1px 0 #d4d0c8;
}

.champ-set-btn {
    min-width: 75px;
    min-height: 23px;
    padding: 2px 12px;
    border: 1px solid #003c74;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f2ec 40%, #e6e3d6 85%, #d6d0c0 100%);
    font: 11px Tahoma, Verdana, sans-serif;
    color: #000000;
    cursor: pointer;
}
.champ-set-btn:hover { box-shadow: inset 0 0 0 2px #f8b636, inset 0 -2px 0 #e5a01a; }
.champ-set-btn:active { background: linear-gradient(180deg, #d6d0c0 0%, #e6e3d6 30%, #f3f2ec 100%); }
.champ-set-btn:focus-visible { outline: 1px dotted #000000; outline-offset: -4px; }
.champ-set-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.champ-set-btn-main { font-weight: bold; box-shadow: inset 0 0 0 1px #6f97e3; }
.champ-set-btn-small { min-width: 0; min-height: 21px; padding: 1px 8px; }

/* ==========================================================================
   10. СТРОКА В ОКНЕ «НОВАЯ ЗАПИСЬ»
   ========================================================================== */
.champ-create-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 6px 0 2px;
    padding: 5px 8px;
    background: linear-gradient(90deg, #fffdf3 0%, #f7ecc4 100%);
    border: 1px solid #d9b75e;
    font: 11px Tahoma, Verdana, sans-serif;
    color: #5c4512;
}
.champ-create-row[hidden] { display: none; }
.champ-create-row .xpi { width: 16px; height: 16px; }
.champ-create-select {
    flex: 1;
    min-width: 170px;
    height: 22px;
    border: 1px solid #7f9db9;
    background: #ffffff;
    font: 11px Tahoma, Verdana, sans-serif;
}

/* Пункт «Оформление чемпиона сезона» в «Настройках профиля» (index.html):
   у .settings-group-bordered может быть свой display — hidden не должен
   проигрывать ему */
#champ-settings-entry[hidden] { display: none !important; }
.champ-settings-entry .xpi { width: 16px; height: 16px; vertical-align: -3px; }

/* ==========================================================================
   11. ВСПЛЫВАЮЩАЯ ПОДСКАЗКА «СПАСИБО ЗА СЕЗОН!» (как балун в трее XP)
   ========================================================================== */
.champ-balloon {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 99990;
    width: 320px;
    max-width: calc(100vw - 16px);
    padding: 10px 12px 10px;
    background: #ffffe1;
    border: 1px solid #000000;
    border-radius: 7px !important;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.35);
    font: 11px Tahoma, Verdana, sans-serif;
    color: #000000;
    line-height: 1.45;
    animation: champ-balloon-in 0.25s ease-out;
}
@keyframes champ-balloon-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.champ-balloon-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 22px 4px 0;
    font-weight: bold;
    font-size: 12px;
}
.champ-balloon-title .xpi { width: 20px; height: 20px; }
.champ-balloon-text { margin-bottom: 8px; }
.champ-balloon-btns { display: flex; gap: 6px; justify-content: flex-end; }
.champ-balloon-x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 2px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' stroke='%23444' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    cursor: pointer;
}
.champ-balloon-x:hover { border-color: #c9b75a; background-color: #fff8c4; }
.champ-balloon.champ-gold { background: linear-gradient(180deg, #fffdf0 0%, #fff4c9 100%); border-color: #8a6a12; }

/* ==========================================================================
   12. ТЕЛЕФОН (≤ 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .wall-post .champ-ribbon { font-size: 12px; line-height: 17px; }
    .wall-post.champ-p1 .champ-ribbon { font-size: 13px; letter-spacing: 0.05em; padding: 8px 10px; }
    .champ-ribbon-place { font-size: 11px; line-height: 16px; }
    .champ-chip { height: 19px; font-size: 11px; line-height: 17px; }
    .champ-ctag { height: 17px; font-size: 11px; }

    .champ-menu-item { padding: 9px 14px 9px 8px; font-size: 13px; }
    .champ-menu-text small { font-size: 11px; }
    .champ-menu { font-size: 13px; }

    .champ-set-overlay { padding: 0 !important; align-items: stretch !important; }
    .champ-set-win {
        width: 100vw;
        max-height: none;
        height: 100vh;
        height: 100dvh;
        border: 0;
        border-radius: 0 !important;
        animation: none;
    }
    .champ-set-titlebar { height: 40px; border-radius: 0 !important; font-size: 14px; }
    .champ-set-x { width: 32px; height: 32px; }
    .champ-set-cols { grid-template-columns: minmax(0, 1fr); }
    .champ-set-check { padding: 7px 0; font-size: 13px; line-height: 18px; }
    .champ-set-check input { width: 18px; height: 18px; }
    .champ-set-check small { padding-left: 24px; font-size: 11px; }
    .champ-set-group legend { font-size: 12px; }
    .champ-set-note, .champ-set-overrides { font-size: 12px; }
    .champ-set-foot { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .champ-set-btn { min-height: 36px; font-size: 13px; padding: 4px 16px; }
    .champ-set-btn-small { min-height: 30px; font-size: 12px; }

    .champ-create-row { font-size: 12px; }
    .champ-create-select { height: 32px; font-size: 14px; }

    .champ-balloon { right: 8px; left: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 12px; }
    .champ-balloon .champ-set-btn { min-height: 32px; }
}

/* ==========================================================================
   13. ДОСТУПНОСТЬ: без движения
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .champ-ribbon::after,
    .champ-spark,
    .champ::before,
    .champ::after,
    .champ .post-author,
    .champ .post-author .season-nick,
    .champ-menu,
    .champ-set-win,
    .champ-balloon { animation: none !important; }
    .champ-spark { display: none; }
    .box.wall-post.champ-rich.champ-p1::before { display: none; }
    .box.wall-post.champ-rich.champ-p1::after { opacity: 0.7; }
}