/* v1.1.6.752 (ARENA-CANON-W3-01): перехід на канонічні токени.
   Замінено ЛИШЕ ті `--n-*`, які в tokens.css оголошені точним псевдонімом
   канонічного `--kp-*` — для таких пар заміна не може змінити жодного пікселя.
   Токени без точного відповідника лишились: вигадувати їм пару означало б
   змінити дизайн під виглядом міграції. Доведено виміром у рушії. */
/* v1.1.6.312 (REV46): шар --n-* переведено на канонні імена.
   Обіцяно в .304 і зроблено окремо, щоб diff лишався читабельним.
   Рівність тут навіть простіша за минулий раз: канонні токени ВИЗНАЧЕНІ через
   ці ж --n-* (`--kp-color-surface: var(--kp-color-surface)`), тож збіг не випадковий, а
   за побудовою. Однак я все одно звірив кожну пару після повного розкриття
   ланцюжка var() і ОКРЕМО у світлій та темній схемі — сім із семи.
   Жодне обчислене значення не змінюється. --n-* лишаються оголошеними в
   tokens.css: канонні токени спираються на них, і це шар значень під шаром імен. */
/* v1.1.6.294 (REV46, CANON-STEP-11): після переходу палітри на канон у .293
   тут лишались кольори, зашиті повз токени: 0 × білий текст на
   акцентному тлі (тепер var(--n-text-on-accent) — канон дає ТЕМНИЙ текст на
   теплих акцентах, білий давав контраст ~1.8:1) і 2 × значення старої
   палітри, які після .293 відстали від решти інтерфейсу. */
/* v1.1.6.291 (REV46, CANON-STEP-8): значення, які ВЖЕ дорівнювали кроку
   канонної шкали, отримали її ім'я: радіус 0, pill 0,
   відступи 7, вага 1. Жодне число не змінено — це
   перейменування, не редизайн. Значення поза шкалою лишились літералами
   свідомо: прев'ю канону саме вживає 10/14/6px для падінгів компонентів,
   тож стягувати їх до шкали означало б відійти ВІД прев'ю, а не до нього. */
/* v1.1.6.290 (REV46, CANON-STEP-7): 5 значень font-size переведено на
   канонну шкалу (--kp-text-xs/sm/md/lg/xl/2xl). Правило: найближчий крок,
   і лише коли зміна ≤12%%. Все, що далі (герой-цифри 3-5rem, мікропідписи
   <0.6rem), лишилось літералом — це не текстова шкала. Перелік: _meta/. */
/* v1.1.6.288 (REV46, CANON-STEP-5): прибрано 0 правил цілком і мертві
   частини селектора ще в 1 (аліас-імена, яких немає в розмітці — напр.
   `.admin-sub, .adm-header__sub` → лишається лише живе). Перевірено проти 37,9 МБ
   php/js/html усього деплою; динамічно зібрані імена виключені окремо.
   Перелік: _meta/REV46_dead_selectors.json. */
.w-arena-match-engagement {
display: flex;
flex-direction: column;
gap: var(--kp-space-2);
padding: 10px 14px;
margin: 10px 0;
background: var(--kp-color-surface);
border-radius: 14px;
font-family: "Chakra Petch", "Inter", system-ui, sans-serif;
}
[data-theme="dark"] .w-arena-match-engagement {
background: var(--kp-color-surface);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .03);
}
.w-arena-match-engagement__social {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px var(--kp-space-4);
}
.w-arena-match-engagement__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--kp-space-2);
padding-top: var(--kp-space-2);
border-top: 1px solid var(--n-line, var(--kp-color-border));
}
.w-arena-match-engagement__action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px var(--kp-space-3);
border-radius: 9px;
background: var(--n-bg-soft, rgba(0, 0, 0, .04));
border: 1px solid var(--kp-color-border);
color: var(--kp-color-text);
font-family: inherit;
font-size: var(--kp-text-xs);
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s, transform .1s;
-webkit-appearance: none;
appearance: none;
}
.w-arena-match-engagement__action:hover {
background: var(--n-bg-hover, var(--kp-color-border));
border-color: color-mix(in srgb, var(--kp-accent) 35%, var(--kp-color-border));
}
.w-arena-match-engagement__action:active { transform: scale(.96); }
.w-arena-match-engagement__action--hide {
margin-left: auto;
color: var(--kp-color-text-muted);
}
.w-arena-match-engagement__action--hide:hover {
color: var(--n-red, var(--n-danger));
border-color: color-mix(in srgb, var(--n-red, var(--n-danger)) 35%, var(--kp-color-border));
}
.w-arena-match-engagement__cell {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.w-arena-match-engagement__cell--vote {
}
.w-arena-match-engagement__cell--reactions {
}
.w-arena-match-engagement__cell--views {
margin-left: auto;
gap: 6px;
color: var(--n-text-soft);
font-size: var(--kp-text-sm);
font-weight: 600;
cursor: default;
}
[data-theme="dark"] .w-arena-match-engagement__cell--views {
color: rgba(255, 255, 255, .65);
}
.w-arena-match-engagement__views-icon {
font-size: var(--kp-text-md);
opacity: .85;
}
.w-arena-match-engagement__views-num {
font-family: var(--mono);
font-weight: var(--kp-weight-bold);
letter-spacing: .02em;
}


@media (max-width: 480px) {
.w-arena-match-engagement {
padding: var(--kp-space-2) 10px;
gap: var(--kp-space-2) 10px;
}
.w-arena-match-engagement__cell--views {
font-size: var(--kp-text-xs);
}
.w-arena-match-engagement__views-icon {
font-size: var(--kp-text-sm);
}
}
@media (prefers-reduced-motion: reduce) {
.w-arena-match-engagement {
transition: none;
}
}