/* Стилі головної (index.php). Винесено з <style>, щоб браузер кешував їх (nginx: 7 днів, версія — ?v=час зміни файлу). */
body { font-family: 'JetBrains Mono', monospace; background: url('../bg.webp') no-repeat center center fixed; background-size: cover; color: #d8d8d8; margin: 0; padding: 15px 20px; }

.bot-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(209, 205, 187, 0.15); border: 1px solid #d1cdbb; color: #d1cdbb;
    width: 22px; height: 22px; border-radius: 3px; font-size: 12px; vertical-align: middle;
    margin-right: 2px; box-shadow: 0 0 6px rgba(209, 205, 187, 0.2);
}

.warning-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(229, 62, 62, 0.15); border: 1px solid #e53e3e; color: #e53e3e;
    width: 22px; height: 22px; border-radius: 3px; font-size: 12px; vertical-align: middle;
    margin-right: 2px; box-shadow: 0 0 6px rgba(229, 62, 62, 0.3);
}

/* Верхній ряд: віджет сервера зліва, останні повідомлення форуму
   справа — займають рядок нарівно, а не притиснуті до одного краю. */
.top-row {
    display: flex; align-items: stretch; justify-content: flex-start; gap: 20px;
    width: 100%; max-width: 1350px; margin: 0 auto 20px auto; box-sizing: border-box;
}
/* Віджет сервера й чат поруч — однакові за шириною (і висотою — stretch). */
.top-row .server-widget { flex: 1 1 0; min-width: 0; }
.top-row .chat-widget { flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) {
    .top-row { flex-wrap: wrap; }
    .top-row .server-widget { flex-basis: 100%; }
}

/* ── Віджет сервера ────────────────────────────────────────────
   Картинка поточної карти — фон віджета. Поверх неї градієнт, щоб
   текст лишався читабельним на будь-якій карті (світлій чи темній).
   Файли карт беремо з теки maps/ — так само, як для підказки при
   наведенні. Перелічуємо кілька розширень: браузер покаже перший
   файл, який існує, а якщо картинки немає взагалі — лишиться просто
   темний фон, нічого не зламається. */
/* Жартівливе попередження про гравців із Росії (над віджетами) */
.ru-alert { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 1350px; margin: 0 auto 20px; box-sizing: border-box; padding: 9px 14px; border-radius: 4px;
    background: rgba(20, 20, 20, 0.85); border: 1px solid #3a3a3a; border-left: 4px solid #0057b7;
    box-shadow: inset 4px 0 0 #ffd700; color: #d8d8d8; font-size: 13.5px; line-height: 1.45; }
.ru-alert b { color: #ff5a4f; letter-spacing: 0.5px; }
.ru-alert-ua { color: #ffd700; }
.ru-alert-top { margin-left: auto; flex-shrink: 0; padding: 6px 12px; border-radius: 2px; background: #333333; color: #d1cdbb;
    text-decoration: none; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ru-alert-top:hover { background: #ffd700; color: #1b1b1b; }
@media (max-width: 700px) { .ru-alert { flex-wrap: wrap; } .ru-alert-top { margin-left: 0; } }
.ru-alert-flag { flex-shrink: 0; width: 24px; height: 18px; margin-left: 4px; border-radius: 2px; }
.server-widget {
    position: relative; isolation: isolate; overflow: hidden;
    width: 100%; box-sizing: border-box;
    background: #0e0e0e; border: 1px solid #3a3a3a; border-radius: 3px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65);
    /* зрізаний правий верхній кут — характерна деталь панелей CS:S */
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
/* Смужка стану сервера зліва */
.server-widget::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 3;
    background: #48bb78; box-shadow: 0 0 12px rgba(72, 187, 120, 0.55);
}
.server-widget.is-offline::after { background: #e53e3e; box-shadow: 0 0 12px rgba(229, 62, 62, 0.55); }

.sw-bg {
    position: absolute; inset: 0; z-index: 0;
    background-position: center center; background-size: cover; background-repeat: no-repeat;
    filter: saturate(0.95) contrast(1.06) brightness(1.04);
}
/* Затемнення підібране так, щоб зліва (де текст) було темно й читабельно,
   а справа карта лишалась добре видимою. */
.sw-shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6,6,6,0.94) 0%, rgba(6,6,6,0.8) 24%, rgba(6,6,6,0.3) 50%, rgba(6,6,6,0.2) 74%, rgba(6,6,6,0.5) 100%),
        linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0) 40%, rgba(0,0,0,0.45)),
        repeating-linear-gradient(rgba(0,0,0,0.12) 0 1px, transparent 1px 3px);
}

/*
 * Віджет побудований у два поверхи, а не в три колонки.
 *
 * Три колонки (назва | карта | гравці+кнопки) вміщались лише поки кнопок
 * було дві. З кожною новою кнопкою правий блок ширшав, а назві сервера й
 * назві карти лишалось усе менше місця — аж поки "[UA] КОЗАЦЬКИЙ" не
 * перетворилось на "[UA] КОЗАЦЬК…", а назва карти на "$.".
 * Тепер кнопки мають власний рядок унизу, і верхній поверх ділять лише
 * два блоки: текст ліворуч і лічильник гравців праворуч. Скільки б кнопок
 * не додалося далі, на назву це більше не впливає.
 */
.sw-content {
    position: relative; z-index: 2; display: flex; flex-direction: column;
    justify-content: space-between; gap: 16px;
    padding: 20px 20px 20px 24px; min-height: 176px; height: 100%; box-sizing: border-box;
}
.sw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.sw-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; flex: 1 1 auto; align-items: flex-start; }

.sw-status {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
    color: #48bb78; background: rgba(72, 187, 120, 0.1); border: 1px solid rgba(72, 187, 120, 0.35);
    padding: 3px 9px; border-radius: 2px;
}
.server-widget.is-offline .sw-status { color: #e53e3e; background: rgba(229, 62, 62, 0.1); border-color: rgba(229, 62, 62, 0.35); }
.sw-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: swPulse 2s ease-in-out infinite; }
@keyframes swPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .sw-dot { animation: none; } }

.sw-name {
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.2;
    color: #ffffff; letter-spacing: 0.3px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #d1cdbb;
    background: rgba(10, 10, 10, 0.75); border: 1px solid #3a3a3a; border-radius: 2px;
    padding: 5px 10px; white-space: nowrap; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.sw-chip i { color: #8d8a7d; transition: color 0.18s ease; }
.sw-chip.is-clickable { cursor: pointer; }
.sw-chip.is-clickable:hover { border-color: #d1cdbb; color: #ffffff; background: rgba(22, 22, 22, 0.9); }
.sw-chip.is-clickable:hover i { color: #d1cdbb; }
.sw-chip-map b { color: #ffffff; font-weight: 700; letter-spacing: 0.4px; }

/* Назва карти тепер чіп поруч з IP: саме зображення карти й так на фоні,
   тому дублювати її величезним написом немає сенсу — а місця він з'їдав
   більше, ніж усі інші елементи разом. */
.sw-chip-map i { color: #b9b5a4; }

/* Лічильник гравців — клікабельний, відкриває список гравців */
.sw-players {
    cursor: pointer; flex-shrink: 0; min-width: 118px;
    background: rgba(8, 8, 8, 0.72); border: 1px solid rgba(58, 58, 58, 0.9); border-radius: 3px;
    padding: 11px 14px; backdrop-filter: blur(3px);
}
.sw-players-num {
    font-family: 'Oswald', sans-serif; line-height: 1; color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); display: flex; align-items: baseline; gap: 4px;
}
.sw-players-num b { font-size: 30px; font-weight: 700; }
.sw-players-num span { font-size: 15px; color: #9a9a9a; }
.sw-players-label {
    font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: #9a9a9a; margin-top: 3px; transition: color 0.18s ease;
}
.sw-players:hover .sw-players-label { color: #d1cdbb; }
.sw-bar {
    margin-top: 7px; height: 4px; width: 100%; background: rgba(0, 0, 0, 0.7);
    border: 1px solid #333333; border-radius: 2px; overflow: hidden;
}
.sw-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8f8b78, #d1cdbb); transition: width 0.4s ease; }
.server-widget.is-offline .sw-bar span { background: #5a2a2a; }

/* Власний рядок унизу. flex-wrap — щоб на вузькому екрані кнопки
   переносились, а не виштовхували одна одну за край. */
.sw-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Список гравців онлайн просто у віджеті ──
   Займає вільне місце між шапкою віджета й кнопками. Поки дані не
   прийшли, блок прихований (hidden), щоб не блимати порожньою рамкою. */
.sw-live {
    display: flex; flex-direction: column; gap: 7px; min-width: 0;
}
.sw-live[hidden] { display: none; }

/* Середній блок: капіталізація над списком "Зараз грають". */
.sw-mid { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sw-capital {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-family: 'Oswald', sans-serif; font-size: 10.5px; letter-spacing: 1.2px;
    text-transform: uppercase; color: #b9b5a8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Сума — жовта, як баланс у шапці, профілі й таблиці рейтингу. */
.sw-capital-val {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 13px;
    letter-spacing: 0.3px; text-transform: none; color: #e8c86a;
}
.sw-capital-val i { font-size: 11px; color: #e8c86a; }
/* Коротке підсвічування, коли сума змінилась: зелене — зросла,
   червоне — зменшилась. Потім плавно повертається до жовтого. */
/* Блок «Кредитів на балансах» унизу: сума жовта — спільна на обидва сервери. */
.stat-box-capital { border-left-color: #e8c86a; }
.stat-box-capital .stat-icon i { color: #e8c86a; }
.stat-box-capital .sw-capital-val { font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.sw-capital-val.is-up   { animation: swCapUp 1.4s ease-out; }
.sw-capital-val.is-down { animation: swCapDown 1.4s ease-out; }
@keyframes swCapUp   { 0% { color: #48bb78; text-shadow: 0 0 8px rgba(72, 187, 120, 0.7); } 100% { color: #e8c86a; } }
@keyframes swCapDown { 0% { color: #e05a5a; text-shadow: 0 0 8px rgba(224, 90, 90, 0.7); } 100% { color: #e8c86a; } }
@media (prefers-reduced-motion: reduce) {
    .sw-capital-val.is-up, .sw-capital-val.is-down { animation: none; }
}
.sw-live-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-family: 'Oswald', sans-serif; font-size: 10.5px; letter-spacing: 1.2px;
    text-transform: uppercase; color: #b9b5a8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.sw-live-head i { color: #48bb78; font-size: 9px; }
.sw-live-all {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    background: none; border: none; padding: 0;
    font-family: 'Oswald', sans-serif; font-size: 10.5px; letter-spacing: 1px;
    text-transform: uppercase; color: #8d8a7d;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    transition: color 0.15s ease;
}
.sw-live-all:hover { color: #ffffff; }
.sw-live-all i { font-size: 8px; color: inherit; }
.sw-live-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-live-p {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    background: rgba(10, 10, 10, 0.72); border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 3px; padding: 4px 9px 4px 6px;
    font-size: 11.5px; color: #e8e4d8;
    backdrop-filter: blur(2px);
}
.sw-live-team {
    flex-shrink: 0; width: 3px; height: 13px; border-radius: 2px; background: #5a5a5a;
}
.sw-live-team.is-t  { background: #e05a5a; }
.sw-live-team.is-ct { background: #5a9be0; }
/* Кругла аватарка зі Steam перед ніком. */
.sw-live-av {
    width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
    background: #1e1e1e; object-fit: cover;
}
.sw-live-av-ph {
    display: inline-flex; align-items: center; justify-content: center;
    color: #57544a; font-size: 8px;
}
/* Без явного кольору браузер фарбує відвідані посилання у фіолетовий —
   тут нік має лишатись таким самим, як у гравців без профілю. */
.sw-live-name {
    min-width: 0; max-width: 130px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    color: #e8e4d8; text-decoration: none;
}
a.sw-live-name:visited { color: #e8e4d8; }
a.sw-live-name:hover { color: #ffffff; text-decoration: underline; }
.sw-live-score {
    flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: #9a978d;
}
/* Заглушки, поки вантажиться список: стільки ж "плашок", скільки гравців
   на сервері, тож блок одразу має свою висоту і нічого не стрибає. */
.sw-live-skel { position: relative; overflow: hidden; }
.sw-live-skel .sw-live-av { background: #262626; }
.sw-skel-bar { flex: 1; height: 8px; border-radius: 2px; background: #262626; }
.sw-live-skel::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transform: translateX(-100%); animation: swShimmer 1.3s ease-in-out infinite;
}
@keyframes swShimmer { to { transform: translateX(100%); } }
.sw-live-list.is-fresh .sw-live-p,
.sw-live-list.is-fresh .sw-live-more { animation: swFadeIn 0.35s ease-out; }
@keyframes swFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .sw-live-skel::after, .sw-live-list.is-fresh .sw-live-p { animation: none; }
}
.sw-live-more {
    display: inline-flex; align-items: center; padding: 4px 9px;
    background: rgba(10, 10, 10, 0.55); border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 3px; font-size: 11.5px; color: #9a978d;
}
.sw-btn {
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12.5px; text-transform: uppercase;
    letter-spacing: 0.6px; height: 38px; padding: 0 16px; border-radius: 2px;
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap;
    background: rgba(10, 10, 10, 0.8); color: #d1cdbb; border: 1px solid #3a3a3a;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.sw-btn:hover { border-color: #d1cdbb; color: #ffffff; background: rgba(24, 24, 24, 0.9); }
/* Кнопка лише з іконкою: квадрат за висотою звичайної кнопки, без
   тексту й без внутрішніх відступів. Назва лишається в title та
   aria-label — інакше кнопку неможливо зрозуміти ні з клавіатури,
   ні зі зчитувача екрана. */
.sw-btn-icon { width: 38px; padding: 0; justify-content: center; gap: 0; flex: 0 0 38px; }
.sw-btn-icon i { font-size: 14px; }
.sw-btn-primary {
    background: #d1cdbb; color: #141414; border-color: #d1cdbb;
    box-shadow: 0 0 14px rgba(209, 205, 187, 0.25);
}
.sw-btn-primary:hover { background: #ffffff; border-color: #ffffff; color: #141414; }
/* "Підтримати проєкт" — жовта, як монети й баланс SHOP. */
.sw-btn-donate {
    background: #ffcc00; color: #141414; border-color: #ffcc00;
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.3);
}
.sw-btn-donate:hover { background: #ffdb4d; border-color: #ffdb4d; color: #141414; }
.sw-btn-donate i { font-size: 15px; }

@media (max-width: 900px) {
    .sw-content { gap: 14px; }
    .sw-shade { background:
        linear-gradient(rgba(8,8,8,0.72), rgba(8,8,8,0.9)),
        repeating-linear-gradient(rgba(0,0,0,0.15) 0 1px, transparent 1px 3px); }
}
@media (max-width: 520px) {
    /* Кнопки-іконки лишаються квадратними й стоять поруч, а головна
       кнопка займає решту рядка — розтягувати іконку на всю ширину
       не має сенсу. */
    .sw-actions { width: 100%; flex-wrap: nowrap; }
    .sw-btn { flex: 1 1 auto; justify-content: center; box-sizing: border-box; }
    .sw-btn-icon { flex: 0 0 38px; width: 38px; }
    /* На телефоні "Підтримати" — лише іконка, щоб усе влізло в рядок. */
    .sw-btn-donate { flex: 0 0 38px; width: 38px; padding: 0; gap: 0; }
    .sw-btn-donate .sw-btn-txt { display: none; }
    .sw-players { min-width: 0; }
}

/* ── Віджет "Чат" — та сама картка, що й у server-widget (темний
   фон, зрізаний кут, рамка). Повідомлення підтягує JS з livechat.php,
   писати можна лише після входу через Steam. */
.chat-widget {
    position: relative; overflow: hidden;
    background: #0e0e0e; border: 1px solid #3a3a3a; border-radius: 3px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    flex: 1 1 auto; min-width: 280px; min-height: 220px;
    display: flex; flex-direction: column; box-sizing: border-box;
}
.cw-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid #262626; flex-shrink: 0;
}
.cw-head h2 {
    margin: 0; font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1px;
    text-transform: uppercase; color: #d1cdbb; display: flex; align-items: center; gap: 8px;
    white-space: nowrap; min-width: 0;
}
/* Увімк./вимк. звуків чату. */
.cw-sound {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
    cursor: pointer; font-family: inherit; font-size: 11.5px; color: #7d7a72; white-space: nowrap;
}
.cw-sound:hover { color: #ffffff; }
.cw-sound i { width: 15px; text-align: center; font-size: 12px; }
.cw-sound.is-off i { color: #a05050; }
/* Висоту картки задає сусідній віджет сервера, тому список не розтягує
   картку, а прокручується всередині неї. */
.cw-body { flex: 1; position: relative; min-height: 0; }
.cw-list {
    position: absolute; inset: 0; overflow-y: auto; padding: 6px 0 8px;
    font-size: 12.5px; line-height: 1.5;
    scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.cw-list .lc-line { display: flex; gap: 9px; padding: 1px 16px; align-items: baseline; }
.cw-list .lc-line:hover { background: rgba(255, 255, 255, 0.03); }
.cw-list .lc-time { flex-shrink: 0; color: #55524a; font-size: 10.5px; }
.cw-list .lc-text { min-width: 0; overflow-wrap: anywhere; color: #e8e4d8; }
.cw-list .lc-name { font-weight: bold; text-decoration: none; }
.cw-list a.lc-name:hover { text-decoration: underline; }
.cw-list .lc-tag { color: #9a968a; }
.cw-list .t2 { color: #ff5a4f; }
.cw-list .t3 { color: #99ccff; }
.cw-list .t1, .cw-list .t0 { color: #cccccc; }
.cw-list .lc-srv { color: #a8e063; }
.cw-list .lc-av {
    display: inline-block; width: 18px; height: 18px; border-radius: 50%; margin-right: 6px;
    vertical-align: -4px; object-fit: cover; background: #1e1e1e;
}
.cw-list .lc-av-ph { text-align: center; line-height: 18px; font-size: 9px; color: #57544a; }
.cw-list .lc-web-name { color: #f0d58a; }
.cw-list .lc-line.is-new { animation: cwNew 1.2s ease-out; }
@keyframes cwNew { from { background: rgba(240, 213, 138, 0.14); } to { background: transparent; } }
/* Поле для повідомлення внизу картки. */
.cw-form {
    display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid #262626;
    flex-shrink: 0; background: #0b0b0b;
}
.cw-input {
    flex: 1; min-width: 0; box-sizing: border-box; height: 32px; padding: 0 10px;
    background: #151515; border: 1px solid #333; border-radius: 2px; color: #e8e4d8;
    font-family: inherit; font-size: 12.5px; outline: none;
}
.cw-input:focus { border-color: #d1cdbb; }
.cw-input::placeholder { color: #5f5c55; }
.cw-send {
    flex: 0 0 34px; height: 32px; border: 1px solid #3a3a3a; border-radius: 2px;
    background: #1b1b1b; color: #d1cdbb; cursor: pointer; font-size: 13px;
}
.cw-send:hover:not(:disabled) { background: #d1cdbb; color: #111; }
.cw-send:disabled { opacity: 0.5; cursor: default; }
/* Кнопка смайликів і панель над полем вводу. */
.cw-emoji-btn {
    flex: 0 0 34px; height: 32px; border: 1px solid #333; border-radius: 2px;
    background: #151515; color: #8d8a7d; cursor: pointer; font-size: 15px;
}
.cw-emoji-btn:hover, .cw-emoji-btn.is-open { color: #f0d58a; border-color: #555; }
.cw-emoji {
    position: absolute; left: 10px; right: 10px; bottom: 50px; z-index: 5;
    max-height: 168px; overflow-y: auto; padding: 6px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 2px;
    background: #141414; border: 1px solid #3a3a3a; border-radius: 3px;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.6);
    scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.cw-emoji[hidden] { display: none; }
/* Смайлики ще не куплені: сірі, зверху — плашка з кнопкою розблокування. */
.cw-emoji.is-locked button:not(.cw-emoji-buy) { filter: grayscale(1); opacity: .35; }
.cw-emoji-lock {
    grid-column: 1 / -1; position: sticky; top: -6px; z-index: 1; margin: -6px -6px 4px;
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    background: #1c1a14; border-bottom: 1px solid #4a422a; color: #cfcab8; font-size: 12.5px; line-height: 1.35;
}
.cw-emoji-lock > .fa-lock { color: #e8c86a; font-size: 15px; }
.cw-emoji-lock span { flex: 1; }
.cw-emoji .cw-emoji-buy {
    height: auto; flex-shrink: 0; padding: 6px 10px; border-radius: 3px; background: #e8c86a; color: #141414;
    font-family: 'Share Tech Mono', monospace; font-size: 12.5px; font-weight: bold; white-space: nowrap;
}
.cw-emoji .cw-emoji-buy:hover { background: #f3d77e; transform: none; }
.cw-emoji-btn.is-locked { position: relative; }
.cw-emoji-btn.is-locked::after {
    content: '\f023'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 8px;
    position: absolute; right: 3px; bottom: 2px; color: #e8c86a;
}
/* Мініатюра зображення в стрічці; клік — велике у вікні. */
.cw-list .lc-img {
    display: block; width: fit-content; margin: 4px 0 3px; line-height: 0;
    border: 1px solid #333; border-radius: 3px; overflow: hidden; cursor: zoom-in;
}
.cw-list .lc-img:hover { border-color: #777; }
.cw-list .lc-img img {
    display: block; max-width: 160px; max-height: 120px; width: auto; height: auto;
    background: #1a1a1a;
}
/* Вибране зображення перед відправкою. */
.cw-attach {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px 0; flex-shrink: 0;
    background: #0b0b0b; border-top: 1px solid #262626; font-size: 11.5px; color: #9a968a;
}
.cw-attach[hidden] { display: none; }
.cw-attach img { width: 44px; height: 34px; object-fit: cover; border-radius: 2px; border: 1px solid #333; }
.cw-attach span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-attach button {
    border: 0; background: none; color: #7d7a72; cursor: pointer; font-size: 13px; padding: 4px;
}
.cw-attach button:hover { color: #e05a5a; }
.cw-attach + .cw-form { border-top: 0; }
/* Вікно перегляду зображення. */
.cw-lightbox {
    position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(0, 0, 0, 0.88); cursor: zoom-out;
    animation: cwLbIn 0.15s ease-out;
}
.cw-lightbox[hidden] { display: none; }
@keyframes cwLbIn { from { opacity: 0; } to { opacity: 1; } }
.cw-lightbox img {
    max-width: 94vw; max-height: 86vh; border-radius: 3px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    cursor: default; background: #111;
}
.cw-lb-bar {
    position: absolute; top: 14px; right: 16px; display: flex; gap: 8px;
}
.cw-lb-bar a, .cw-lb-bar button {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border: 1px solid #3a3a3a; border-radius: 3px; background: rgba(15, 15, 15, 0.9);
    color: #d1cdbb; font-size: 15px; cursor: pointer; text-decoration: none;
}
.cw-lb-bar a:hover, .cw-lb-bar button:hover { background: #d1cdbb; color: #111; }
.cw-lb-cap {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); max-width: 90vw;
    padding: 6px 12px; border-radius: 3px; background: rgba(15, 15, 15, 0.9);
    color: #e8e4d8; font-size: 13px; text-align: center; overflow-wrap: anywhere;
}
.cw-lb-cap:empty { display: none; }
.cw-emoji button {
    height: 32px; border: 0; border-radius: 3px; background: transparent; cursor: pointer;
    font-size: 19px; line-height: 1; padding: 0;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.cw-emoji button:hover { background: #262626; transform: scale(1.12); }
.cw-login {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 12px; border-top: 1px solid #262626; flex-shrink: 0; background: #0b0b0b;
    font-size: 12px; color: #7d7a72; text-decoration: none;
}
.cw-login:hover { color: #fff; }
.cw-login i { font-size: 14px; }
.cw-err {
    padding: 5px 12px; font-size: 11.5px; color: #e08a8a; background: rgba(229, 62, 62, 0.08);
    border-top: 1px solid #3a2020; flex-shrink: 0;
}
.cw-err[hidden] { display: none; }
.cw-list .lc-line.is-event .lc-text { color: #7d7a70; font-size: 11.5px; }
.cw-list .lc-line.is-event .lc-text i { margin-right: 5px; font-size: 10px; }
.cw-list .lc-ev-join i { color: #48bb78; }
.cw-list .lc-ev-leave i { color: #e08a8a; }
.cw-list .lc-day {
    display: flex; align-items: center; gap: 10px; padding: 6px 16px 3px;
    font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 1px;
    text-transform: uppercase; color: #6f6c62;
}
.cw-list .lc-day::before, .cw-list .lc-day::after { content: ''; flex: 1; height: 1px; background: #262626; }
.cw-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 20px 18px; text-align: center; color: #5f5c55; font-size: 12px;
}
.cw-empty[hidden] { display: none; }
@media (max-width: 900px) {
    .chat-widget { flex-basis: 100%; height: 360px; }
}

/* Зміна очок за 24 години — лише стрілка біля очок, саме число
   показується в підказці при наведенні. Якщо змін немає, стрілки теж
   немає. */
/* Стрілка стоїть усередині рамки з очками, одразу після числа. */
.score-delta {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    line-height: 1;
    vertical-align: baseline;
    cursor: help;
}
.score-delta-up { color: #48bb78; }
.score-delta-down { color: #e53e3e; }

.score-box {
    display: inline-block;
    background-color: #111111;
    color: #d1cdbb;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid #282828;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05);
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Пінг у віджеті сервера — ті самі пороги й кольори, що в "Історії сесій"
   профілю: до 50 мс зелений, 51–100 жовтий, понад 100 червоний. */
.ping-good { color: #48bb78; }
.ping-mid  { color: #e8c86a; }
.ping-bad  { color: #e08a8a; }

#page-loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #111111; display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 9999;
    transition: opacity 0.4s ease;
}
.spinner {
    width: 50px; height: 50px; border: 4px solid #333333;
    border-top: 4px solid #d1cdbb; border-radius: 50%;
    animation: spin 0.8s linear infinite; margin-bottom: 15px;
}
.loader-text { font-family: 'Oswald', sans-serif; color: #d1cdbb; font-size: 26px; letter-spacing: 2px; text-transform: uppercase; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center;
    z-index: 10000; backdrop-filter: blur(3px);
}
.modal-content-box {
    background: #181818; border: 2px solid #d1cdbb; border-radius: 4px;
    width: 90%; max-width: 820px; box-shadow: 0 10px 30px rgba(0,0,0,0.9);
    overflow: hidden; animation: modalAppear 0.3s ease;
}
@keyframes modalAppear { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header {
    background: #222; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid #d1cdbb; font-family: 'Oswald', sans-serif; font-size: 22px; color: #d1cdbb; letter-spacing: 1px;
}
.modal-close-btn { background: none; border: none; color: #aaa; font-size: 20px; cursor: pointer; }
.modal-close-btn:hover { color: #fff; }

.modal-body {
    padding: 20px;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: auto;
    background: url('../bg_content.jpg') repeat center center;
    background-size: cover;
    scrollbar-width: thin;
    scrollbar-color: #d1cdbb #151515;
}
.modal-table-scroll { overflow-x: auto; }
.modal-table-scroll table { min-width: 560px; }
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: #151515; border-left: 1px solid #333; }
.modal-body::-webkit-scrollbar-thumb { background: #d1cdbb; border-radius: 2px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #ffffff; }

.modal-footer-custom { padding: 10px 20px; background: #151515; text-align: right; border-top: 1px solid #333; }
.modal-close-action { background: #333; color: #fff; border: none; padding: 6px 14px; font-family: 'JetBrains Mono', monospace; cursor: pointer; border-radius: 2px; font-weight: bold; }
.modal-close-action:hover { background: #444; }

.server-players-table { width: 100%; border-collapse: collapse; }
.server-players-table th, .server-players-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #282828; font-size: 14px; }
.server-players-table th { color: #d1cdbb; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 14px; background: #151515; }

.live-players-table th, .live-players-table td { padding: 6px 8px; font-size: 13px; white-space: nowrap; }
.live-players-table td:nth-child(2) { max-width: 200px; }
.live-players-table th:nth-child(3), .live-players-table td:nth-child(3) {
    text-align: center;
}
/* Колір ніка за командою у вікні "Гравці зараз на сервері" (потребує
   SourceMod-плагіна rankme_teams.sp — без нього колір звичайний білий). */
.live-players-table .player-team-t { color: #e05a5a; }
.live-players-table .player-team-ct { color: #5a9be0; }
.live-players-table .player-team-spec,
.live-players-table .player-team-unknown { color: #ffffff; }

/* Іконки команд (CT/T) шрифтом Valve "cs.ttf" — літера E = логотип CT,
   1 = логотип T. Шрифт вбудовано прямо в код (base64), тому окремо
   заливати файл шрифту на хостинг не треба. */
@font-face {
    font-family: 'CounterStrike';
    src: url('../fonts/cs.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}
.cssicon {
    font-family: 'CounterStrike', sans-serif;
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

/* Стрічка останніх вбивств угорі сторінки. Дані дає SourceMod-плагін
   rankme_teams.sp (команда rankme_killfeed); якщо плагіна немає або на
   сервері ще нікого не вбили — блок просто не показується. */
.killfeed-bar {
    /* 20px згори — щоб стрічка не злипалася з нижньою рамкою таблиці:
       без відступу вона читається як частина таблиці, а не окремий блок. */
    width: 100%; max-width: 1350px; margin: 0 auto 20px auto; box-sizing: border-box;
    height: 34px; display: flex; align-items: stretch; overflow: hidden;
    background: rgba(20, 20, 20, 0.85); border: 2px solid #333333; border-left: 3px solid #e05a5a;
    border-radius: 3px;
}
/* Усередині віджета сервера — смужка на всю ширину внизу, під вмістом
   (order: 2 у колонці віджета; у розмітці вона перша). */
.server-widget { display: flex; flex-direction: column; }
.server-widget > .sw-content { flex: 1 1 auto; height: auto; }
.server-widget .killfeed-bar {
    order: 2; position: relative; z-index: 4; margin: 0; height: 30px; flex-shrink: 0;
    border: 0; border-top: 1px solid #333333; border-radius: 0;
    background: rgba(10, 10, 10, 0.88);
}
.server-widget .killfeed-label { padding: 0 10px 0 14px; font-size: 11px; }
.server-widget .kf-entry { font-size: 11.5px; padding: 1px 8px; }
.killfeed-label {
    flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 0 14px;
    background: #151515; border-right: 1px solid #333333; color: #e05a5a;
    font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.2px; white-space: nowrap;
}
.killfeed-viewport { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.killfeed-track {
    display: flex; align-items: center; gap: 14px; white-space: nowrap;
    padding-left: 20px; will-change: transform;
    animation-name: killfeedScroll; animation-timing-function: linear; animation-iteration-count: infinite;
}
/* Вміст дублюється в JS, тому зсув рівно на половину дає безшовну петлю. */
@keyframes killfeedScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.killfeed-bar:hover .killfeed-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .killfeed-track { animation: none; }
    .killfeed-viewport { overflow-x: auto; }
}
/* Кожне вбивство (пара вбивця → жертва) — у своїй червоній рамці,
   щоб у суцільній стрічці було видно, де закінчується одне й
   починається інше. */
.kf-entry {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    padding: 2px 9px; border: 1px solid rgba(224, 90, 90, 0.6); border-radius: 3px;
    background: rgba(224, 90, 90, 0.07);
}
.kf-name { display: inline-flex; align-items: center; gap: 6px; }
.kf-avatar {
    width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
    border: 1px solid #444444; flex-shrink: 0; display: block;
}
.kf-killer { color: #d1cdbb; font-weight: 500; }
.kf-victim { color: #777777; }
a.kf-killer, a.kf-victim { text-decoration: none; }
a.kf-killer:hover, a.kf-victim:hover { text-decoration: underline; filter: brightness(1.25); }
.kf-age { color: #6f6c64; font-size: 10.5px; margin-left: 2px; }
.kf-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e05a5a; flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(224, 90, 90, 0.7); animation: kfLivePulse 1.6s infinite; }
@keyframes kfLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(224, 90, 90, 0.7); }
    70%  { box-shadow: 0 0 0 7px rgba(224, 90, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 90, 90, 0); }
}
.kf-live { background: #e05a5a; color: #141414; font-size: 9.5px; letter-spacing: 0.8px;
    padding: 1px 5px; border-radius: 2px; font-weight: 700; }
.kf-killer.kf-t, .kf-victim.kf-t { color: #e05a5a; }
.kf-killer.kf-ct, .kf-victim.kf-ct { color: #5a9be0; }
.kf-weapon {
    background: #151515; border: 1px solid #3a3a3a; color: #d1cdbb;
    padding: 1px 7px; font-size: 10.5px; letter-spacing: 0.6px; border-radius: 2px;
}
/* Іконка зброї з теки weapon/ (weapon_ak47.svg тощо). Якщо файлу немає,
   JS підміняє її текстовою назвою — див. обробник помилки завантаження. */
.kf-weapon-icon {
    height: 17px; width: auto; max-width: 80px; display: block;
    flex-shrink: 0;
    /* object-fit — щоб дуже широка іконка вписалась, а не стиснулась. */
    object-fit: contain;
    /* Іконки зброї намальовані чорним і на темному тлі їх не видно, тому
       перефарбовуємо їх у бежевий колір сайту (#d1cdbb) прямо в браузері.
       brightness(0) спершу робить іконку однотонно чорною — тому це
       працює однаково і для чорних, і для кольорових файлів. */
    filter: brightness(0) invert(1) sepia(1) saturate(1.84) hue-rotate(-20deg) brightness(0.82) contrast(1.01);
}
/* Іконка хедшота — векторна, тому лишається чіткою в будь-якому
   розмірі (стара була вирізана зі спрайта 17x14 і на великому блоці
   показувала пікселі). Малюнок лежить в одній змінній і працює як
   маска у двох місцях: у стрічці вбивств і в блоці статистики.
   Колір задається звичайним background-color. */
:root {
    --hs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 438'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M172.0,436.1L169.0,436.3L166.0,436.5L163.0,436.5L160.0,436.6L157.0,436.6L154.0,436.5L151.0,436.3L148.0,435.8L145.0,435.3L142.0,434.7L139.0,433.9L136.0,433.1L133.0,432.1L130.0,431.1L127.0,429.9L124.0,428.6L121.0,427.3L118.3,426.0L115.0,424.4L112.0,422.8L109.0,421.1L106.0,419.4L103.0,417.6L100.0,415.7L97.3,414.0L94.3,412.0L91.3,410.0L88.4,408.0L85.5,406.0L83.0,404.2L80.0,402.0L77.3,400.0L74.6,398.0L72.0,396.1L69.3,394.0L66.6,392.0L64.0,390.0L61.4,388.0L59.0,386.0L56.6,384.0L54.3,382.0L52.0,380.0L49.7,378.0L47.0,375.5L44.4,373.0L42.0,370.8L39.1,368.0L37.0,365.9L34.1,363.0L32.0,360.9L29.2,358.0L27.0,355.6L24.5,353.0L22.0,350.3L19.9,348.0L17.3,345.0L15.0,342.4L13.0,340.1L12.2,337.0L12.4,334.0L12.7,331.0L13.0,328.0L13.3,325.0L13.7,322.0L14.1,319.0L14.5,316.0L15.0,313.0L15.5,310.0L16.1,307.0L16.7,304.0L17.1,301.0L17.4,298.0L17.7,295.0L18.0,292.0L18.3,289.0L18.6,286.0L18.9,283.0L19.3,280.0L19.6,277.0L19.9,274.0L20.2,271.0L20.5,268.0L20.8,265.0L21.2,262.0L21.5,259.0L21.5,256.0L21.3,253.0L21.1,250.0L20.7,247.0L20.4,244.0L19.9,241.0L19.5,238.0L18.9,235.0L18.4,232.0L17.8,229.0L17.3,226.0L16.6,223.0L15.9,220.0L15.3,217.0L14.6,214.0L13.9,211.0L13.3,208.0L12.5,205.0L11.8,202.0L11.1,199.0L10.4,196.0L9.7,193.0L9.0,190.0L8.3,187.0L7.6,184.0L6.9,181.0L6.3,178.0L5.5,175.0L4.9,172.0L4.3,169.0L3.6,166.0L3.0,163.0L2.5,160.0L1.9,157.0L1.4,154.0L1.0,151.0L0.6,148.0L0.3,145.0L0.0,142.0L-0.2,139.0L-0.3,136.0L-0.1,133.0L-0.0,130.0L0.1,127.0L0.3,124.0L0.5,121.0L0.6,118.0L0.9,115.0L1.3,112.0L1.6,109.0L2.0,106.0L2.5,103.0L3.0,100.0L3.5,97.0L4.1,94.0L4.7,91.0L5.5,88.0L6.3,85.0L7.1,82.0L7.9,79.0L8.9,76.0L9.9,73.0L11.0,70.2L12.3,67.0L13.6,64.0L15.0,61.0L16.5,58.0L18.2,55.0L20.0,52.1L22.0,49.1L24.0,46.5L26.0,44.0L28.8,41.0L31.0,38.6L33.8,36.0L37.0,33.1L39.4,31.0L41.9,29.0L44.4,27.0L47.0,25.1L49.9,23.0L52.9,21.0L56.0,19.1L59.0,17.3L62.0,15.6L65.0,14.0L68.0,12.5L71.0,11.2L74.0,9.8L77.0,8.7L80.0,7.6L83.0,6.6L86.0,5.7L89.0,4.9L92.0,4.1L95.0,3.4L98.0,2.7L101.0,2.2L104.0,1.6L107.0,1.2L110.0,0.8L113.0,0.5L116.0,0.2L119.0,-0.0L122.0,-0.2L125.0,-0.3L128.0,-0.3L131.0,-0.3L134.0,-0.1L137.0,0.1L140.0,0.3L143.0,0.6L146.0,0.9L149.0,1.4L152.0,1.8L155.0,2.3L158.0,2.9L161.0,3.5L164.0,4.2L167.0,4.9L170.0,5.6L173.0,6.5L176.0,7.4L179.0,8.3L182.0,9.3L185.0,10.3L188.0,11.4L191.0,12.5L194.0,13.8L196.8,15.0L200.0,16.5L203.0,18.0L206.0,19.6L209.0,21.3L211.8,23.0L215.0,25.0L217.9,27.0L220.7,29.0L223.4,31.0L226.0,33.0L228.4,35.0L230.8,37.0L233.1,39.0L236.0,41.7L238.4,44.0L241.0,47.0L243.0,49.3L245.0,51.7L247.0,54.2L249.0,56.7L251.0,59.3L253.0,62.0L255.0,64.7L257.0,67.5L258.7,70.0L260.8,73.0L262.7,76.0L264.6,79.0L266.3,82.0L267.9,85.0L269.2,88.0L272.0,90.0L275.0,90.0L278.0,90.0L281.0,90.0L284.0,90.0L287.0,90.0L290.0,90.0L293.0,90.0L296.0,90.0L299.0,89.9L302.0,89.7L305.0,89.7L308.0,89.7L311.0,89.7L314.0,89.7L317.0,89.7L320.0,89.7L323.0,89.7L326.0,89.7L329.0,89.7L332.0,89.7L335.0,89.7L338.0,89.7L341.0,89.7L344.0,89.7L347.0,89.7L350.0,89.7L353.0,89.7L356.0,89.7L359.0,89.7L362.0,89.7L365.0,89.7L368.0,89.7L371.0,89.7L374.0,89.7L377.0,89.7L380.0,89.7L383.0,89.8L386.0,90.5L389.0,91.7L392.0,92.9L395.0,94.1L398.0,95.3L401.0,96.4L404.0,97.6L407.0,98.8L410.0,99.9L413.0,101.2L416.0,102.3L419.0,103.5L422.0,104.6L424.7,107.0L422.0,108.6L419.0,109.9L416.0,111.2L413.0,112.5L410.0,113.8L407.2,115.0L404.0,116.4L401.0,117.7L398.1,119.0L395.0,120.4L392.0,121.6L389.0,123.0L386.0,124.3L383.0,125.0L380.0,125.0L377.0,125.0L374.0,125.0L371.0,125.0L368.0,125.0L365.0,125.3L362.0,125.3L359.0,125.3L356.0,125.3L353.0,125.3L350.0,125.3L347.0,125.3L344.0,125.3L341.0,125.3L338.0,125.3L335.0,125.3L332.0,125.3L329.0,125.3L326.0,125.3L323.0,125.3L320.0,125.3L317.0,125.3L314.0,125.3L311.0,125.3L308.0,125.5L305.0,125.5L302.0,125.5L299.0,125.5L296.0,125.5L293.0,125.5L290.0,125.9L290.4,129.0L291.5,132.0L292.4,135.0L293.1,138.0L293.4,141.0L293.5,144.0L293.3,147.0L293.1,150.0L292.8,153.0L292.3,156.0L291.7,159.0L290.9,162.0L289.8,165.0L288.7,168.0L287.6,171.0L286.6,174.0L285.8,177.0L285.4,180.0L285.1,183.0L284.8,186.0L284.7,189.0L284.6,192.0L284.7,195.0L284.8,198.0L285.2,201.0L285.6,204.0L286.3,207.0L287.1,210.0L288.1,213.0L288.8,216.0L289.5,219.0L289.9,222.0L290.2,225.0L290.5,228.0L290.5,231.0L290.5,234.0L290.5,237.0L290.3,240.0L289.9,243.0L289.3,246.0L288.4,249.0L287.3,252.0L286.1,255.0L284.8,258.0L283.6,261.0L282.3,264.0L281.1,267.0L279.7,270.0L278.5,273.0L277.2,276.0L276.0,278.9L274.6,282.0L273.4,285.0L272.2,288.0L271.2,291.0L270.3,294.0L269.4,297.0L268.6,300.0L267.7,303.0L266.9,306.0L266.1,309.0L265.3,312.0L264.5,315.0L263.6,318.0L262.8,321.0L261.9,324.0L261.0,327.0L260.0,329.9L258.8,333.0L257.6,336.0L256.2,339.0L254.7,342.0L253.0,345.0L251.2,348.0L249.0,351.0L247.0,353.3L244.0,356.0L241.0,358.7L238.6,361.0L236.0,363.4L233.1,366.0L230.7,368.0L228.5,371.0L227.4,374.0L226.8,377.0L226.8,380.0L227.4,383.0L228.4,386.0L229.4,389.0L230.5,392.0L231.4,395.0L232.0,398.0L232.1,401.0L231.4,404.0L230.1,407.0L228.4,410.0L226.0,412.9L223.8,415.0L221.4,417.0L218.5,419.0L215.2,421.0L212.0,422.7L209.0,424.4L206.1,426.0L203.0,427.6L200.2,429.0L197.0,430.5L194.0,431.7L191.0,432.7L188.0,433.5L185.0,434.3L182.0,434.8L179.0,435.3L176.0,435.7L173.0,436.0ZM109.4,162.0L112.0,159.0L114.0,156.8L116.0,154.5L118.0,152.3L120.0,150.0L122.0,147.7L124.5,145.0L128.0,144.8L131.0,145.7L134.0,146.6L137.0,147.5L140.0,148.4L142.3,146.0L142.5,143.0L142.8,140.0L143.2,137.0L143.5,134.0L143.9,131.0L147.0,129.5L150.0,128.9L153.0,128.4L156.0,127.8L159.0,127.3L162.0,126.7L165.0,125.4L163.0,122.1L160.0,119.0L157.1,116.0L155.0,113.7L152.6,111.0L153.4,108.0L156.0,105.0L158.0,102.7L160.0,100.5L162.0,98.2L164.0,96.0L165.6,93.0L163.0,90.6L160.0,88.6L157.0,86.5L154.0,84.5L151.0,82.5L148.0,80.4L145.0,78.4L142.0,76.3L139.0,74.3L136.5,72.0L135.6,69.0L134.9,66.0L134.1,63.0L133.4,60.0L132.7,57.0L131.9,54.0L129.0,52.6L126.0,53.3L123.0,53.9L120.0,54.5L117.0,55.2L114.0,55.8L111.0,56.5L108.0,56.5L106.0,53.2L104.5,50.0L103.1,47.0L101.7,44.0L99.0,42.4L97.1,45.0L95.0,47.9L93.0,50.7L91.0,53.5L89.2,56.0L86.0,57.1L83.0,55.8L80.0,54.5L77.0,53.2L74.2,52.0L71.4,54.0L70.8,57.0L70.3,60.0L69.7,63.0L69.1,66.0L68.5,69.0L66.0,71.0L63.0,71.0L60.0,71.0L57.0,71.0L54.0,71.0L51.0,71.0L48.0,71.0L45.0,71.0L42.0,71.7L42.3,75.0L43.2,78.0L44.1,81.0L45.0,83.9L45.9,87.0L46.8,90.0L46.7,93.0L44.0,94.8L41.0,96.6L38.0,98.4L35.2,100.0L32.0,101.9L29.0,103.7L30.0,106.5L33.0,107.4L36.0,108.4L39.0,109.2L42.0,110.1L44.9,111.0L48.0,111.9L51.0,112.8L52.9,116.0L52.7,119.0L52.5,122.0L52.3,125.0L52.1,128.0L54.0,130.6L57.0,130.8L60.0,131.1L63.0,132.5L64.3,136.0L65.4,139.0L66.4,142.0L67.4,145.0L68.5,148.0L69.5,151.0L70.5,154.0L71.9,157.0L75.0,156.2L78.0,154.1L81.0,152.0L84.0,150.0L87.0,148.8L90.0,150.7L93.0,152.8L96.0,155.0L98.7,157.0L101.5,159.0L104.0,160.9L107.0,162.9ZM424.0,76.2L421.0,75.2L418.0,73.3L415.0,71.4L412.8,69.0L414.2,66.0L416.0,63.3L418.0,60.1L420.0,57.0L421.9,54.0L423.8,51.0L425.9,48.0L429.0,48.3L431.7,50.0L434.9,52.0L437.5,54.0L436.7,57.0L435.0,59.7L433.0,62.9L431.0,66.0L429.1,69.0L427.2,72.0L425.2,75.0ZM441.0,93.3L438.0,91.4L435.4,89.0L433.0,86.6L431.5,84.0L433.9,81.0L436.0,78.9L438.9,76.0L441.0,73.9L443.9,71.0L446.0,68.9L448.7,66.0L451.0,63.6L453.6,61.0L456.0,58.6L459.0,56.4L461.6,58.0L464.0,60.4L466.6,63.0L468.2,66.0L466.0,68.6L463.6,71.0L461.0,73.6L458.6,76.0L456.0,78.6L453.7,81.0L451.0,83.9L448.9,86.0L446.0,88.9L443.9,91.0L441.6,93.0ZM494.0,115.4L491.0,115.7L488.0,115.7L485.0,115.7L482.0,115.7L479.0,115.7L476.0,115.7L473.0,115.7L470.0,115.7L467.0,115.7L464.0,115.7L461.0,115.7L458.0,115.7L455.0,115.7L452.0,115.7L449.0,115.7L446.0,115.7L444.3,113.0L444.3,110.0L444.3,107.0L444.3,104.0L447.0,101.7L450.0,101.7L453.0,101.7L456.0,101.7L459.0,101.7L462.0,101.7L465.0,101.7L468.0,101.7L471.0,101.7L474.0,101.7L477.0,101.7L480.0,101.7L483.0,101.7L486.0,101.7L489.0,101.7L492.0,101.7L494.8,103.0L495.0,106.0L495.0,109.0L495.0,112.0L494.5,115.0ZM464.0,162.5L461.1,161.0L459.0,158.9L456.1,156.0L453.0,153.1L450.9,151.0L448.0,148.1L445.9,146.0L443.0,143.1L440.9,141.0L438.0,138.1L435.7,135.0L437.9,132.0L440.0,129.9L442.9,127.0L446.0,126.3L448.9,129.0L451.0,131.1L453.9,134.0L456.0,136.1L458.9,139.0L461.0,141.1L463.9,144.0L466.0,146.1L469.0,148.9L472.0,151.9L471.8,155.0L469.0,157.9L466.9,160.0L464.0,162.5ZM427.0,169.4L424.3,167.0L422.8,164.0L421.4,161.0L420.0,158.1L418.5,155.0L417.1,152.0L415.6,149.0L414.9,146.0L417.7,144.0L421.0,142.4L424.0,141.0L427.0,140.7L428.9,144.0L430.4,147.0L431.7,150.0L433.2,153.0L434.6,156.0L436.0,159.0L437.5,162.0L436.4,165.0L433.0,166.6L430.2,168.0L427.0,169.4ZM190.8,194.0L194.0,193.4L197.0,192.7L199.9,192.0L203.0,191.1L206.0,190.0L209.0,188.6L211.6,187.0L214.0,185.2L216.2,183.0L218.4,180.0L220.0,177.0L220.9,174.0L221.4,171.0L221.4,168.0L220.5,165.0L219.0,162.0L217.0,159.3L214.8,157.0L212.4,155.0L209.4,153.0L206.0,151.2L203.0,149.9L200.0,148.8L197.0,148.1L194.0,147.5L191.0,147.2L188.0,147.0L185.0,147.0L182.0,147.2L179.0,147.5L176.0,148.2L173.0,149.0L170.1,150.0L167.0,151.3L164.0,152.9L161.0,154.7L158.0,156.7L155.0,159.0L152.2,162.0L151.0,164.9L150.5,168.0L150.7,171.0L151.4,174.0L152.5,177.0L154.0,179.6L155.9,182.0L159.0,184.8L162.0,186.9L165.0,188.6L167.8,190.0L171.0,191.4L174.0,192.5L177.0,193.4L179.9,194.0L183.0,194.4L186.0,194.5L189.0,194.3ZM279.2,200.0L281.0,197.0L281.5,194.0L281.5,191.0L281.2,188.0L281.0,185.0L281.1,182.0L281.5,179.0L282.5,176.0L284.0,173.0L285.5,170.0L286.6,167.0L287.0,164.0L286.2,161.0L283.0,159.7L280.0,160.1L277.0,160.9L274.0,162.3L271.0,163.9L268.0,165.9L265.2,168.0L262.9,170.0L260.5,173.0L259.1,176.0L258.3,179.0L257.9,182.0L257.8,185.0L258.6,188.0L260.5,191.0L263.0,193.4L266.0,195.6L269.0,197.3L272.0,198.5L275.0,199.7L278.0,200.6ZM248.7,314.0L252.0,312.4L255.0,310.3L257.9,308.0L260.8,305.0L262.6,302.0L263.7,299.0L264.6,296.0L265.4,293.0L266.1,290.0L266.6,287.0L266.3,284.0L264.4,281.0L262.0,278.5L259.0,276.3L256.0,274.8L253.0,274.3L250.0,273.9L247.0,273.7L244.0,273.7L241.0,273.7L238.0,273.7L235.0,273.7L232.0,273.7L229.0,273.9L226.0,274.1L223.0,274.5L220.0,274.9L217.0,275.5L214.0,276.2L211.0,276.8L208.0,277.8L205.0,279.3L202.4,281.0L199.6,283.0L197.0,285.0L194.5,287.0L192.6,290.0L193.5,293.0L195.7,296.0L198.0,298.1L201.0,300.9L203.4,303.0L205.8,305.0L208.5,307.0L212.0,309.0L215.0,310.5L218.0,311.8L221.0,313.1L224.0,314.1L227.0,314.6L230.0,314.7L233.0,314.7L236.0,314.7L239.0,314.7L242.0,314.7L245.0,314.7L248.0,314.2Z'/%3E%3C/svg%3E");
}
.kf-hs {
    display: inline-block; width: 19px; height: 17px; flex-shrink: 0;
    background-color: #e05a5a;
    -webkit-mask: var(--hs-icon) center / contain no-repeat;
    mask: var(--hs-icon) center / contain no-repeat;
}
.stat-icon-headshot {
    display: block; width: 45px; height: 40px;
    background-color: #d1cdbb;
    -webkit-mask: var(--hs-icon) center / contain no-repeat;
    mask: var(--hs-icon) center / contain no-repeat;
}

/* Скільки раундів лишилось до кінця карти — потребує rankme_teams.sp
   (mp_maxrounds); без нього просто не рендериться. Сам рахунок раундів
   команд показується у заголовках колонок (.team-column-count). */
.rounds-left-line {
    text-align: right; color: #999999; font-size: 12px;
    font-family: 'Oswald', sans-serif; letter-spacing: 0.3px; margin-bottom: 8px;
}

/* Три таблички (CT / T / глядачі) — потребують rankme_teams.sp, без нього
   показується старий єдиний список (fallback у JS вище). */
.teams-layout { display: flex; gap: 15px; flex-wrap: wrap; }
.team-column {
    flex: 1 1 260px; min-width: 220px; border-radius: 3px; overflow: hidden;
    border: 1px solid #333333; background: rgba(0, 0, 0, 0.25);
}
.team-column-header {
    padding: 8px 12px; font-family: 'Oswald', sans-serif; font-weight: 600;
    text-transform: uppercase; font-size: 13px; letter-spacing: 0.3px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.team-column-title { display: flex; align-items: center; gap: 8px; }
.team-column-count { font-size: 15px; font-weight: bold; }
.team-column.team-ct .team-column-header { background: rgba(90, 155, 224, 0.15); border-bottom: 2px solid #5a9be0; color: #5a9be0; }
.team-column.team-t .team-column-header { background: rgba(224, 90, 90, 0.15); border-bottom: 2px solid #e05a5a; color: #e05a5a; }
/* ВАЖЛИВО: глобальне правило "table { min-width: 900px; table-layout: fixed; }"
   (воно для великої таблиці рейтингу) інакше розтягує ці маленькі таблички
   до 900px і ділить на рівні колонки — а блок команди вужчий і має
   overflow: hidden, через що частина колонок просто обрізалась. Тому тут
   явно скидаємо min-width і фіксовану розкладку. */
.team-table-scroll { overflow-x: auto; }
.team-table { width: 100%; min-width: 0; table-layout: auto; border-collapse: collapse; }
.team-table th, .team-table td { padding: 5px 6px; font-size: 12px; white-space: nowrap; }
.team-table th:first-child, .team-table td:first-child { text-align: left; }
.team-column.team-ct .team-table td:first-child { color: #cfe3fb; }
.team-column.team-t .team-table td:first-child { color: #fbd0d0; }
/* Компактно, без горизонтального повзунка: колонки фіксованої ширини,
   нік забирає решту місця й обрізається трикрапкою. */
.team-table-scroll { overflow-x: hidden; }
.team-table { table-layout: fixed; }
.team-table th, .team-table td { padding: 5px 4px; }
.team-table th { font-size: 11px; }
.team-table .tt-csr { width: 74px; }
.team-table .tt-num { width: 44px; text-align: center; }
.team-table .tt-ping { width: 34px; text-align: center; }
.team-table .live-ban-th { width: 26px; }
.team-table td { text-align: center; }
.team-table td.live-csr { text-align: left; }
.team-table td.tt-name-td { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.team-table td.tt-name-td .live-player-name-cell { display: flex; }
.team-table td.tt-name-td .player-name, .team-table td.tt-name-td .live-player-name-cell > span:not(.mvp-badge):not(.live-avatar-wrap):not(.donor-badge) { min-width: 0; flex: 0 1 auto; }
.team-table .live-csr .csr-badge { transform: scale(0.9); transform-origin: left center; }
.team-column-empty { padding: 12px; text-align: center; color: #666666; font-size: 13px; }

.spectators-section { margin-top: 15px; padding-top: 12px; border-top: 1px solid #333333; }
.spectators-header {
    font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 12px;
    letter-spacing: 0.4px; color: #d1cdbb; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.spectators-list { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.spectators-empty { font-size: 13px; color: #666666; }
.spectator-chip { font-size: 13px; color: #cccccc; display: inline-flex; align-items: center; }

/* Аватарка + клікабельний нік у вікні "Гравці зараз на сервері" (потребує
   визначеного через RCON steamid — інакше просто іконка-заглушка й нік без посилання). */
.live-player-name-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.live-player-name-cell .player-name,
.live-player-name-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-player-avatar-fallback { color: #666666; font-size: 15px; flex-shrink: 0; width: 24px; text-align: center; }

/* Зірки MVP після ніка — як у гральному скорборді */
.mvp-badge {
    display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
    margin-left: 5px; color: #ffcc00; font-size: 10px; font-weight: bold;
    line-height: 1; white-space: nowrap;
}
.mvp-badge i { font-size: 9px; }

/* Аватарка з прапорцем країни в правому нижньому куті */
.live-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; line-height: 0; }
/* Аватарка квадратна (з ледь заокругленими кутами), прапорець — круглий. */
.live-avatar-wrap .live-player-avatar { width: 26px; height: 26px; border-radius: 3px; }
/* Правило «.live-player-name-cell span» (обрізати нік «…») ховало прапорець, що виступає за аватарку. */
.live-player-name-cell .live-avatar-wrap { overflow: visible; margin-right: 3px; }
.live-player-flag {
    position: absolute; right: -4px; bottom: -3px;
    width: 13px; height: 13px; border-radius: 50%; box-sizing: content-box;
    /* прапор обрізається до квадрата, а не стискається по боках */
    object-fit: cover;
    border: 1px solid #181818;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
    background: #181818;
}

/* ── Таблиця "Гравці на сервері за останні 24 години" ── */
.visitors-players-table {
    table-layout: fixed;
    width: 100%;
    min-width: 700px;
    border-collapse: separate;
    border-spacing: 0;
}
.visitors-players-table th,
.visitors-players-table td {
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
    border-bottom: 1px solid #232323;
    vertical-align: middle;
    overflow: hidden;
}
.visitors-players-table thead th {
    background: #151515;
    color: #d1cdbb;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 2px solid #d1cdbb;
}
.visitors-players-table tbody tr { transition: background 0.15s ease; }
.visitors-players-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
.visitors-players-table tbody tr:hover { background: rgba(209, 205, 187, 0.08); }
.visitors-players-table tbody tr:last-child td { border-bottom: none; }

/* Вирівнювання колонок */
.visitors-players-table .vp-rank   { text-align: center; }
.visitors-players-table .vp-name   { text-align: left; }
.visitors-players-table .vp-client { text-align: center; white-space: nowrap; }
.vp-cl-steam { color: #66c0f4; }
.vp-cl-emu { color: #d9a45b; }
.live-csr { white-space: nowrap; text-align: center; }
.live-csr .csr-badge { font-size: 12px; padding: 1px 8px 1px 11px; }
.visitors-players-table .vp-score  { text-align: center; }
.visitors-players-table .vp-time   { text-align: center; }
.visitors-players-table .vp-load   { text-align: center; }
.visitors-players-table .vp-seen   { text-align: right; }

/* Це просто порядковий номер у списку за часом входу, а не місце в топі,
   тому жодних золотих/срібних/бронзових кольорів тут немає. */
.visitors-players-table .vp-rank {
    color: #6e6a5c; font-weight: normal;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
}

.vp-name-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vp-name-wrap > .vp-av-wrap { position: relative; flex-shrink: 0; line-height: 0; margin-right: 3px; }
.vp-av-wrap .vp-flag { position: absolute; right: -5px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%;
    object-fit: cover; border: 1px solid #1b1b1b; background: #1b1b1b; box-sizing: content-box; }
.vp-name-wrap > .visitor-avatar-round,
.vp-name-wrap > .vp-avatar-ph,
.vp-name-wrap > .bot-badge,
.vp-name-wrap > .warning-badge { flex-shrink: 0; }
.vp-name-wrap .player-name,
.vp-name-wrap > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.vp-avatar-ph {
    width: 24px; height: 24px; border-radius: 2px; border: 1px solid #444;
    background: #111; color: #6e6a5c;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

.visitors-players-table .vp-time { color: #9a968a; font-size: 12px; }
.visitors-players-table .vp-seen { color: #777; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.vp-seen-time { color: #d1cdbb; }
.vp-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.vp-flt { font-family: inherit; font-size: 12px; letter-spacing: 0.5px; color: #9a968a; background: rgba(255,255,255,0.03); border: 1px solid rgba(209,205,187,0.18); border-radius: 3px; padding: 6px 12px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.vp-flt b { color: #d1cdbb; font-weight: 700; margin-left: 4px; }
.vp-flt:hover { color: #d1cdbb; background: rgba(209,205,187,0.08); }
.vp-flt.active { color: #fff; border-color: #e0a82e; background: rgba(224,168,46,0.14); }
.vp-srv { flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; line-height: 1; padding: 2px 5px; border-radius: 2px; color: #8fd4a5; border: 1px solid #2c6a45; background: rgba(72,187,120,0.10); cursor: default; user-select: none; white-space: nowrap; }
.vp-new { flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; padding: 2px 5px; border-radius: 2px; color: #ffd166; border: 1px solid #e0a82e; background: rgba(224,168,46,0.12); cursor: default; user-select: none; }

/* Час завантаження при вході: швидко / нормально / довго / дуже довго */
.visitors-players-table .vp-load { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.vp-load-fast { color: #5fb36a; }
.vp-load-ok   { color: #d1cdbb; }
.vp-load-slow { color: #d6a24f; }
.vp-load-bad  { color: #e0645a; }
.vp-load-none { color: #4f4c46; }
.vp-load > span[data-tip] { cursor: default; }

/* ── Звідки гравець зайшов ──────────────────────────────────────
   Колонка "Вхід" показує значення cl_connectmethod. Колір потрібен,
   щоб спосіб входу читався з одного погляду: у стовпчику з десятка
   рядків однаково сірий текст доводиться перечитувати.
   Кольори притишені — таблиця не має перетворитись на світлофор. */
.vp-cm-internet  { color: #5fb36a; }   /* Інтернет — зелений */
.vp-cm-favorites { color: #b5834f; }   /* Обране — коричневий */
.vp-cm-history   { color: #62b6d6; }   /* Історія — голубий */
/* Друзі — приглушений фіолетовий. Узяв його, бо решта відтінків
   на сторінці вже зайняті: зелений і голубий тут поруч, червоний
   означає попередження, беж — основний колір інтерфейсу. */
.vp-cm-friends   { color: #a98ad0; }
.vp-cm-quickplay { color: #d1cdbb; }
.vp-cm-lan       { color: #8d8a7d; }
.vp-cm-steam     { color: #b9b5a8; }
.vp-cm-console   { color: #6f6c64; }
.vp-cm-other     { color: #9a968a; }
.vp-cm-none      { color: #4f4c46; }

.table-container {
    width: 100%; max-width: 1350px; margin: 0 auto;
    background: url('../bg_content.jpg') repeat center center; background-size: cover;
    border: 2px solid #333333; border-top: 3px solid #d1cdbb; border-radius: 3px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); padding: 2px; box-sizing: border-box;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* min-width підібрано так, щоб колонці з ніком завжди лишалось близько
   340px: решта колонок мають фіксовану ширину й разом займають ~700px.
   На вузьких екранах таблиця, як і раніше, прокручується вбік. */
table { width: 100%; min-width: 1040px; border-collapse: collapse; table-layout: fixed; }
th, td { padding: 10px 6px; text-align: left; border-bottom: 1px solid #282828; font-size: 14px; }

th {
    background: url('../navbar.jpg') repeat center center; background-size: cover;
    color: #d1cdbb; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 15px;
    line-height: 1.15; letter-spacing: 0.2px; border-bottom: 2px solid #d1cdbb;
}

th a { color: #d1cdbb; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; text-align: center; }
th a:hover { color: #ffffff; }

/* ─────────────────────────────────────────────────────────────
   Таблиця топу гравців. Усі правила навмисно прив'язані до
   .top-table, щоб не зачепити таблиці в модальних вікнах, які
   успадковують загальні стилі table/th/td вище.
   ───────────────────────────────────────────────────────────── */
.top-table thead th {
    background: #151515;
    color: #8d8a7e;
    font-family: 'Oswald', sans-serif;
    font-weight: 500; font-size: 12px;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 13px 8px;
    border-bottom: 2px solid #2e2e2e;
    white-space: nowrap;
}
.top-table thead th a {
    color: inherit; display: flex; align-items: center; justify-content: center;
    gap: 5px; flex-wrap: nowrap; white-space: nowrap;
    transition: color 0.15s ease;
}
.top-table thead th a:hover { color: #ffffff; }
/* Колонка, за якою зараз сортуємо, підсвічена акцентом */
.top-table thead th.th-active { color: #d1cdbb; border-bottom-color: #d1cdbb; }
.top-table thead th.th-active a { color: #d1cdbb; }
.top-table thead th i { font-size: 11px; opacity: 0.9; }

.top-table tbody td {
    padding: 11px 8px;
    border-bottom: 1px solid #232323;
    font-size: 14px;
    background: transparent;
}
.top-table tbody tr { transition: background 0.15s ease; }
.top-table tbody tr:hover td { background: rgba(209, 205, 187, 0.055); }
.top-table tbody tr:last-child td { border-bottom: none; }

/* Перша трійка — тонка кольорова смужка ліворуч і легка підсвітка */
.top-table tbody tr.row-top td:first-child { position: relative; }
.top-table tbody tr.row-top td:first-child::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
/* Підсвітка ставиться на весь рядок (tr), а не на кожну комірку —
   інакше градієнт малюється в кожній td окремо й на стиках колонок
   проступають вертикальні смуги. */
.top-table tbody tr.row-top-1 { background: linear-gradient(90deg, rgba(255, 204, 0, 0.07), transparent 45%); }
.top-table tbody tr.row-top-2 { background: linear-gradient(90deg, rgba(192, 192, 192, 0.06), transparent 45%); }
.top-table tbody tr.row-top-3 { background: linear-gradient(90deg, rgba(205, 127, 50, 0.06), transparent 45%); }
/* Свій рядок. Смужка ліворуч така сама, як у призерів, але іншого
   кольору — око одразу бачить "це не медаль, це я". Підсвітка йде
   окремим шаром (box-shadow inset), тому не заважає градієнту
   першої трійки, якщо гравець і є призером. */
.top-table tbody tr.row-me td { box-shadow: inset 0 0 0 9999px rgba(72, 187, 120, 0.09); }
.top-table tbody tr.row-me td:first-child { position: relative; }
.top-table tbody tr.row-me td:first-child::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: #48bb78;
}
.top-table tbody tr.row-me:hover td { box-shadow: inset 0 0 0 9999px rgba(72, 187, 120, 0.15); }
.me-badge {
    font-family: 'Oswald', sans-serif; font-size: 9px; letter-spacing: 1.2px;
    color: #0f2417; background: #48bb78; border-radius: 2px;
    padding: 2px 5px; margin-left: 7px; flex-shrink: 0;
}

.top-table tbody tr.row-top-1 td:first-child::before { background: #ffcc00; }
.top-table tbody tr.row-top-2 td:first-child::before { background: #c0c0c0; }
.top-table tbody tr.row-top-3 td:first-child::before { background: #cd7f32; }

/* Числові колонки — моноширинний шрифт, щоб розряди вишикувались у стовпчик */
.top-table .num { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.top-table .num-kills { color: #e4e2da; }
.top-table .num-deaths { color: #a85b5b; }
.top-table .num-time { color: #8d8a7e; font-size: 12px; }
.top-table .kdr-good { color: #48bb78; font-weight: bold; }
.top-table .kdr-mid { color: #d1cdbb; font-weight: bold; }
.top-table .kdr-bad { color: #cf6b52; font-weight: bold; }
/* Смужка активності в таблиці топу. */
.top-table { min-width: 1100px; }
.act-bar { position: relative; height: 18px; min-width: 70px; background: #1c1c1c; border: 1px solid #2c2c2c; border-radius: 2px; overflow: hidden; cursor: help; }
.act-bar span { position: absolute; left: 0; top: 0; bottom: 0; }
.act-bar b { position: relative; display: block; line-height: 16px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.act-high span { background: linear-gradient(90deg, #2f8f55, #48bb78); }
.act-mid span  { background: linear-gradient(90deg, #a07b1f, #d6a93a); }
.act-low span  { background: linear-gradient(90deg, #8a3a2c, #cf6b52); }

/* Баланс магазину в таблиці топу: іконка монет і сума — жовті. */
.th-balance-label { display: inline-flex; align-items: center; gap: 6px; color: #e8c86a; }
.th-balance-label i { font-size: 11px; }
.bal-val {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 13px;
    color: #e8c86a; white-space: nowrap;
}
.bal-val i { font-size: 11px; color: #e8c86a; }
.bal-none { color: #4a4a4a; }


/* Комірка з ніком у таблиці топу: прапор і аватарка лишаються цілими,
   а задовгий нік обрізається з трьома крапками в кінці. min-width: 0
   обовʼязковий — без нього flex-елемент не дозволяє собі стиснутись
   менше за вміст, і нік вилазить за межі колонки. */
.player-cell-wrapper { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.player-cell-wrapper > .flag-link,
.player-cell-wrapper > .pav,
.player-cell-wrapper > .player-avatar-sm,
.player-cell-wrapper > .bot-badge,
.player-cell-wrapper > .warning-badge { flex-shrink: 0; }
.player-cell-wrapper .player-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.flag { width: 22px; height: 15px; vertical-align: middle; flex-shrink: 0; display: block; }
.flag-link {
    display: inline-flex; flex-shrink: 0; line-height: 0; border-radius: 2px;
    border: 1px solid transparent; padding: 1px; transition: border-color 0.15s ease, background 0.15s ease;
    cursor: pointer;
}
.flag-link:hover { border-color: #d1cdbb; background: rgba(209, 205, 187, 0.1); }
.flag-link-active { border-color: #d1cdbb; background: rgba(209, 205, 187, 0.18); }

.country-filter-badge {
    display: flex; align-items: center; gap: 8px;
    background: #151515; border: 1px solid #d1cdbb; color: #d1cdbb;
    font-family: 'JetBrains Mono', monospace; font-size: 13px;
    padding: 0 6px 0 12px; height: 38px; box-sizing: border-box;
}
.country-filter-badge img { width: 20px; height: 15px; }
.country-filter-badge .country-filter-clear-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; background: transparent; color: #d1cdbb;
    border: none; cursor: pointer; text-decoration: none; transition: background 0.2s ease, color 0.2s ease;
}
.country-filter-badge .country-filter-clear-btn:hover { background: #333333; color: #ffffff; }
.player-avatar-sm { width: 24px; height: 24px; border-radius: 2px; object-fit: cover; border: 1px solid #444; flex-shrink: 0; }

.place-1 { color: #ffcc00; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.place-2 { color: #c0c0c0; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.place-3 { color: #cd7f32; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.numeric-place { color: #888888; font-weight: bold; display: inline-block; text-align: center; }

/* Перші три місця в топі — компактна медаль-плашка замість кубка з цифрою */
.top-table .place-1,
.top-table .place-2,
.top-table .place-3 {
    min-width: 25px; height: 22px; padding: 0 6px; gap: 0;
    border-radius: 3px; box-sizing: border-box;
    font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: bold;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.top-table .place-1 i, .top-table .place-2 i, .top-table .place-3 i { display: none; }
.top-table .place-1 { color: #1c1608; background: linear-gradient(180deg, #ffd951, #e0a800); }
.top-table .place-2 { color: #1a1a1a; background: linear-gradient(180deg, #dcdcdc, #a8a8a8); }
.top-table .place-3 { color: #1c1208; background: linear-gradient(180deg, #e0954f, #b06a28); }
.top-table .numeric-place { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #7d7a70; }
.top-table .player-avatar-sm { width: 34px; height: 34px; border-radius: 3px; }
.top-table tr.row-top-1 .player-avatar-sm { border-color: #ffcc00; }
.top-table tr.row-top-2 .player-avatar-sm { border-color: #c0c0c0; }
.top-table tr.row-top-3 .player-avatar-sm { border-color: #cd7f32; }
/* Кругла аватарка з круглим прапорцем у правому нижньому куті. */
.pav { position: relative; flex-shrink: 0; line-height: 0; margin-right: 4px; }
/* Рядок обрізає зайве (overflow: hidden для «…» у ніку) — запас знизу, щоб прапорець не зрізало. */
.top-table .player-cell-wrapper { padding: 3px 0 5px; }
.top-table .pav .player-avatar-sm { border-radius: 3px; display: block; }
.pav-none { display: flex !important; align-items: center; justify-content: center; background: #1b1b1b; color: #555; font-size: 12px; }
.flag-link.pav-flag { position: absolute; right: -6px; bottom: -4px; padding: 0; border-radius: 50%; box-sizing: content-box;
    border: 1px solid #1b1b1b; background: #1b1b1b; }
.flag-link.pav-flag:hover, .flag-link.pav-flag.flag-link-active { border-color: #d1cdbb; }
.pav-flag .flag { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.top-table .player-name { font-weight: 600; letter-spacing: 0.2px; }

/* Місце + зміна за 24 години в одному рядку */
.place-cell { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
.rank-delta {
    display: inline-flex; align-items: center; gap: 1px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: bold; line-height: 1;
    cursor: help; flex-shrink: 0;
}
.rank-delta i { font-size: 12px; }
.rank-delta-up { color: #48bb78; }
.rank-delta-down { color: #e53e3e; }

th:nth-child(1), td:nth-child(1), th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5), th:nth-child(6), td:nth-child(6), th:nth-child(7), td:nth-child(7), th:nth-child(8), td:nth-child(8), th:nth-child(9), td:nth-child(9) { text-align: center; }


.player-name { color: #ffffff; font-weight: bold; text-decoration: none; }
.num-csr .csr-badge { font-size: 14px; }
.player-name:hover { color: #d1cdbb; text-decoration: underline; }

.search-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.search-input-wrapper {
    display: flex; align-items: stretch;
    background: #151515; border: 1px solid #3a3a3a; border-radius: 0;
    overflow: hidden; transition: border-color 0.2s ease;
}
.search-input-wrapper:focus-within {
    border-color: #d1cdbb;
}
.search-input {
    font-family: 'JetBrains Mono', monospace;
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 9px 8px 9px 16px;
    font-size: 13px;
    width: 170px;
    outline: none;
}
.search-input::placeholder { color: #6f6f6f; }
.search-btn-inside {
    background: #d1cdbb; border: none; color: #1b1b1b;
    cursor: pointer; font-size: 13px; padding: 0 16px; display: flex; align-items: center;
    justify-content: center; transition: background 0.2s ease;
}
.search-btn-inside:hover { background: #ffffff; }

.search-reset {
    font-family: 'JetBrains Mono', monospace; background: #232323; color: #aaaaaa;
    border: 1px solid #3a3a3a; width: 38px; height: 38px; border-radius: 0;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    cursor: pointer; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.search-reset:hover { background: #333333; color: #ffffff; border-color: #e53e3e; }

/* Підказки пошуку */
/* fixed, а не absolute: .table-container має overflow:auto і обрізав би список.
   Координати ставить JS під полем пошуку. */
.search-suggest {
    position: fixed; top: 0; left: 0; width: 300px;
    background: #151515; border: 1px solid #3a3a3a; box-shadow: 0 10px 25px rgba(0,0,0,.7);
    z-index: 9000; display: none; max-height: 360px; overflow-y: auto;
}
.search-suggest.is-open { display: block; }
.search-suggest a {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px;
    color: #d8d4c8; text-decoration: none; font-size: 13px; border-bottom: 1px solid #222;
}
.search-suggest a:last-child { border-bottom: none; }
.search-suggest a.is-active, .search-suggest a:hover { background: #232323; color: #fff; }
.search-suggest img, .search-suggest .ss-noav {
    width: 26px; height: 26px; flex-shrink: 0; background: #2a2a2a; object-fit: cover;
}
.search-suggest .ss-av { position: relative; flex-shrink: 0; line-height: 0; margin-right: 3px; }
.search-suggest img.ss-flag { position: absolute; right: -5px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%;
    object-fit: cover; border: 1px solid #1b1b1b; background: #1b1b1b; box-sizing: content-box; }
.search-suggest .ss-noav { display: flex; align-items: center; justify-content: center; color: #555; font-size: 12px; }
.search-suggest .ss-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest .ss-name mark { background: none; color: #d1cdbb; font-weight: bold; }
.search-suggest .ss-score { color: #8a8a8a; font-size: 12px; white-space: nowrap; }
.search-suggest .ss-score .csr-badge { font-size: 12px; padding: 1px 8px 1px 11px; }
.search-suggest .ss-empty { padding: 10px; color: #6f6f6f; font-size: 13px; }

#custom-tooltip {
    position: absolute; background: rgba(18, 18, 18, 0.95); border: 1px solid #d1cdbb;
    color: #d1cdbb; padding: 6px 12px; font-size: 13px; font-family: 'JetBrains Mono', monospace;
    border-radius: 2px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); pointer-events: none;
    z-index: 10000; display: none; white-space: nowrap; text-transform: uppercase; letter-spacing: 1px;
}

.copy-toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #1b1b1b; border: 1px solid #48bb78; color: #ffffff; padding: 10px 20px;
    border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 13px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6); opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease; z-index: 10001;
}
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.pagination-bar-container {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin: 20px 0;
}
.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-btn {
    font-family: 'JetBrains Mono', monospace;
    min-width: 38px; height: 38px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: #151515; color: #aaaaaa;
    padding: 0 10px; border: 1px solid #333333; text-decoration: none; font-weight: bold;
    border-radius: 0; font-size: 13px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.page-btn:hover {
    background-color: #222222; color: #ffffff; border-color: #d1cdbb;
}
.page-btn.active {
    background: #d1cdbb;
    color: #1b1b1b; border-color: #d1cdbb;
}
.page-btn.nav-btn { color: #d1cdbb; }
.page-btn.ellipsis {
    background: transparent; border-color: transparent; color: #555555;
    min-width: 20px; cursor: default;
}

.stats-boxes-container {
    width: 100%; max-width: 1350px; margin: 25px auto 0 auto;
    display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; box-sizing: border-box;
}
.stat-box {
    flex: 1 1 calc(20% - 16px);
    min-width: 230px; background: rgba(27, 27, 27, 0.9);
    border: 2px solid #333333; border-left: 4px solid #d1cdbb; border-radius: 3px;
    padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-sizing: border-box; position: relative;
}

@media (max-width: 1100px) {
    .stat-box { flex: 1 1 calc(50% - 10px); }
}

@media (max-width: 550px) {
    .stat-box { flex: 1 1 100%; }
}

.stat-box.clickable { cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease; }
.stat-box.clickable:hover { transform: translateY(-3px); border-color: #d1cdbb; }
.stat-box.clickable:hover .stat-corner-icon { color: #ffffff; transform: scale(1.1); }

.stat-corner-icon { position: absolute; top: 8px; right: 10px; font-size: 13px; color: #777777; transition: color 0.2s, transform 0.2s; }

.stat-info .stat-title { font-family: 'Oswald', sans-serif; font-size: 22px; color: #aaaaaa; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.stat-info .stat-value { font-size: 32px; font-weight: bold; color: #ffffff; }
/* Відсоток вбивств у голову — поруч зі значенням, але приглушено */
.stat-value-pct {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    background: #111111;
    border: 1px solid #2e2e2e;
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: bold;
    color: #d1cdbb;
    letter-spacing: 0.5px;
    vertical-align: 6px;
    cursor: help;
}
/* Приріст фрагів за 24 години */
.stat-value-delta-up { color: #48bb78; border-color: #2b4a35; }
.stat-value-delta-down { color: #e53e3e; border-color: #4a2b2b; }
.stat-value-pct[hidden] { display: none; }
/* Коротка підсвітка числа, коли воно щойно змінилося наживо */
@keyframes statValueFlash {
    0%   { color: #ffffff; text-shadow: none; }
    25%  { color: #d1cdbb; text-shadow: 0 0 12px rgba(209, 205, 187, 0.7); }
    100% { color: #ffffff; text-shadow: none; }
}
.stat-value-updated { animation: statValueFlash 1.1s ease; }
@media (prefers-reduced-motion: reduce) {
    .stat-value-updated { animation: none; }
}
.stat-icon { font-size: 40px; color: #d1cdbb; opacity: 0.8; display: flex; align-items: center; justify-content: center; }

.visitor-avatar-round { width: 24px; height: 24px; border-radius: 2px; object-fit: cover; border: 1px solid #444; flex-shrink: 0; }

/* ── Серії вбивств і домінування ── */
.battle-row {
    width: 100%; max-width: 1350px; margin: 20px auto 0 auto;
    display: flex; gap: 20px; box-sizing: border-box;
}
.battle-row > * { flex: 1 1 calc(50% - 10px); min-width: 0; }
/* Повзунок сервера — у шапці кожного блоку топів. */
.bsrv-seg {
    position: relative; display: inline-flex; margin-left: auto; align-self: center;
    background: #0e0e0e; border: 1px solid #383838; border-radius: 999px; padding: 3px;
}
/* Шапка обох блоків однакова: 1-й рядок — назва/вкладки й повзунок, 2-й — підказка. */
.battle-row .battle-head { align-items: center; row-gap: 6px; }
.battle-row .battle-head .bsrv-seg { order: 1; }
.battle-row .battle-head .battle-hint { order: 2; flex-basis: 100%; }
.bsrv-thumb {
    position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: 999px;
    background: #e05a5a; box-shadow: 0 2px 8px rgba(224, 90, 90, 0.35);
    transition: left 0.25s ease, width 0.25s ease;
}
.bsrv-btn {
    position: relative; z-index: 1; background: none; border: 0; cursor: pointer;
    font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase;
    color: #8a8677; padding: 3px 12px; border-radius: 999px; white-space: nowrap; transition: color 0.2s;
}
.bsrv-btn:hover { color: #d1cdbb; }
.bsrv-btn.is-active { color: #ffffff; }
.battle-panel {
    background: rgba(20, 20, 20, 0.85);
    border: 2px solid #333333; border-top: 3px solid #d1cdbb;
    border-radius: 3px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-sizing: border-box; overflow: hidden;
}
.battle-head {
    padding: 12px 16px; background: #151515; border-bottom: 1px solid #2c2c2c;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.battle-title {
    font-family: 'Oswald', sans-serif; font-size: 19px; letter-spacing: 1px;
    text-transform: uppercase; color: #d1cdbb; white-space: nowrap;
}
.battle-title i { color: #e05a5a; margin-right: 4px; }
.battle-hint { font-size: 11px; color: #777777; }

.battle-list { padding: 6px 10px 10px 10px; }
.battle-empty { padding: 22px 16px; text-align: center; color: #777777; font-size: 13px; }

.battle-item {
    display: flex; align-items: center; gap: 9px; min-width: 0;
    padding: 7px 6px; border-bottom: 1px solid #232323;
    transition: background 0.15s ease;
}
.battle-item:last-child { border-bottom: none; }
.battle-item:hover { background: rgba(209, 205, 187, 0.06); }

.battle-pos {
    flex-shrink: 0; width: 18px; text-align: center;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: bold; color: #6e6a5c;
}
.battle-pos-1 { color: #ffcc00; }
.battle-pos-2 { color: #c0c0c0; }
.battle-pos-3 { color: #cd7f32; }

.battle-avatar {
    width: 26px; height: 26px; border-radius: 2px; object-fit: cover;
    border: 1px solid #444; flex-shrink: 0;
}
.battle-avatar-ph {
    background: #111; color: #57544a;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
/* Нік займає весь вільний простір — тоді дата й число завжди тиснуться
   до правого краю, навіть коли дату сховано на вузькому екрані. */
.battle-name { flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* flex — щоб золота корона донатера стояла в рядку перед ніком, а не над ним */
.battle-name { display: flex; align-items: center; white-space: nowrap; }
.battle-name a { display: block; min-width: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.battle-name .donor-badge { flex-shrink: 0; }
.battle-date {
    flex-shrink: 0; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: #666666; margin-left: 8px;
}
.battle-value {
    flex-shrink: 0; margin-left: 8px;
    min-width: 36px; text-align: center;
    padding: 3px 8px; border-radius: 2px;
    background: #111111; border: 1px solid #282828;
    font-family: 'JetBrains Mono', monospace; font-weight: bold; font-size: 13px;
    cursor: help;
}
.battle-value-streak { color: #e8a33d; border-color: #4a3a1f; }
.battle-value-duel { color: #e05a5a; border-color: #4a2b2b; }
.battle-value-knife { color: #d86a4a; border-color: #4a2c22; }
.battle-value-noscope { color: #7cc4e8; border-color: #1f3a4a; }

/* Вкладки: два топи в одному блоці */
.battle-tabbar { display: flex; gap: 2px; flex-wrap: wrap; }
.battle-tab {
    background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
    padding: 2px 4px 4px 0; margin-right: 6px;
    font-family: 'Oswald', sans-serif; font-size: 17px; letter-spacing: 0.6px;
    text-transform: uppercase; color: #6e6a5c; white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.battle-tab i { margin-right: 4px; color: inherit; }
.battle-tab:hover { color: #b3af9f; }
.battle-tab.is-active { color: #d1cdbb; border-bottom-color: #e05a5a; }
.battle-tab.is-active i { color: #e05a5a; }
.battle-hint[hidden], .battle-pane[hidden] { display: none; }

/* Рядок протистояння: вбивця → жертва */
.battle-duel .battle-date { margin-left: 0; }
.duel-side { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 0; }
.duel-victim { opacity: 0.85; }
.duel-arrow { flex-shrink: 0; color: #6e6a5c; font-size: 12px; }
.battle-duel .battle-value { margin-left: 6px; }

@media (max-width: 900px) {
    .battle-row { flex-direction: column; gap: 16px; }
    .battle-row > * { flex: 1 1 auto; }
}
@media (max-width: 520px) {
    .battle-tab { font-size: 14px; letter-spacing: 0.3px; margin-right: 2px; padding-right: 2px; }
    .battle-hint { display: none; }
    .battle-date { display: none; }
}


/* ═══ Картка гравця при наведенні на нік ══════════════════════════
   Така сама, як на форумі. Лежить у body, а не в комірці таблиці:
   у .table-container стоїть overflow, і звідти картка не вилізла б. */
.pc-card {
    position: absolute; z-index: 9500; width: 300px; pointer-events: none;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.13s ease, transform 0.13s ease;
    background: #141414; border: 1px solid #3f3f3f; border-top: 2px solid #d1cdbb;
    border-radius: 4px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85);
    padding: 13px 14px;
}
.pc-card.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Фон міні-профілю Steam — як у віконці друзів Steam, за верхньою частиною картки. */
.pc-card { overflow: hidden; isolation: isolate; }
.pc-bg { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; }
.pc-bg.is-ready { opacity: 1; }
.pc-bg img, .pc-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-bg::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,20,20,0.1) 0%, rgba(20,20,20,0.45) 50%, rgba(20,20,20,0.85) 85%); }
.pc-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pc-av, .pc-av-none {
    width: 42px; height: 42px; border-radius: 4px; flex-shrink: 0;
    object-fit: cover; border: 1px solid #454545;
}
.pc-av-none {
    display: flex; align-items: center; justify-content: center;
    background: #111111; color: #6a6a6a; font-size: 16px;
}
.pc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pc-name {
    display: block; color: #ffffff; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-seen { display: block; font-size: 11.5px; color: #7d7a72; margin-top: 3px; }
/* Місце в рейтингу — у правому верхньому куті картки. */
.pc-rank {
    flex-shrink: 0; align-self: flex-start;
    font-family: 'Oswald', sans-serif; font-size: 15px; color: #d1cdbb;
}

/* Число зверху, підпис під ним — обидві частини явні блоки, бо це span'и. */
.pc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.pc-stat {
    display: block; text-align: center; font-size: 9px; color: #6f6c64;
    text-transform: uppercase; letter-spacing: 0.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-stat b {
    display: block; font-family: 'Oswald', sans-serif; font-weight: 600;
    font-size: 14px; color: #ffffff; letter-spacing: 0; text-transform: none; margin-bottom: 2px;
}
.pc-stat-csr .csr-badge { font-size: 12px; padding: 0 7px 0 10px; }
.pc-stat b.kdr-good { color: #48bb78; } .pc-stat b.kdr-mid { color: #d1cdbb; } .pc-stat b.kdr-bad { color: #cf6b52; }
.pc-link {
    display: block; margin-top: 11px; padding-top: 9px; border-top: 1px solid #2a2a2a;
    font-size: 11.5px; color: #b9b5a8; text-decoration: none;
}
.pc-link:hover { color: #ffffff; }
@media (max-width: 560px) { .pc-card { display: none; } }
/* Реклама хостингу h0st.pro замість попередження про гравців з Росії */
.host-ad b { color: #4f9dff; }
.host-ad-icon { flex-shrink: 0; width: 24px; text-align: center; font-size: 18px; color: #4f9dff; margin-left: 4px; }