/* [Elysium] Server Monitor — карточка сервера. Цвета и отступы из токенов Platform с запасными значениями. */
.esm-w,
.esm-w * { box-sizing: border-box; }

.esm-w {
    --esm-w-text: var(--elysium-color-text, var(--text, #e8eef5));
    --esm-w-muted: var(--elysium-color-muted, var(--text-muted, #97a1ae));
    --esm-w-surface: var(--elysium-color-surface, var(--secondary, #121821));
    --esm-w-raised: var(--elysium-color-surface-raised, #161d27);
    --esm-w-sunken: var(--elysium-color-surface-sunken, #0f141b);
    --esm-w-well: color-mix(in srgb, var(--esm-w-sunken) 40%, var(--esm-w-surface));
    --esm-w-border: color-mix(in srgb, var(--elysium-color-border, var(--transp-2, #2a3240)) 70%, transparent);
    --esm-w-accent: var(--elysium-color-accent, var(--accent, #e0bf86));
    --esm-w-on-accent: var(--elysium-color-on-accent, #1a1408);
    --esm-w-human: var(--elysium-color-human, #6cb8ff);
    --esm-w-zombie: var(--elysium-color-zombie, #9cff45);
    --esm-w-spectator: color-mix(in srgb, var(--esm-w-muted) 70%, transparent);
    --esm-w-gap: var(--elysium-space-md, 12px);
    --esm-w-pad: var(--elysium-space-lg, 16px);
    --esm-w-ease: var(--elysium-motion-ease-out, cubic-bezier(.2, .8, .2, 1));
    color: var(--esm-w-text);
    width: 100%;
    min-width: 0;
}

/* Заголовок над карточкой (настройка «Показывать заголовок») */
.esm-w__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--elysium-space-lg, 16px);
    margin: 0 0 var(--esm-w-gap);
}
.esm-w__title { margin: 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; font-weight: 800; }
.esm-w__header-total { font-size: clamp(22px, 2.8vw, 32px); font-weight: 800; line-height: 1; white-space: nowrap; }
.esm-w__header-total small { font-size: 14px; color: var(--esm-w-muted); font-weight: 700; }

.esm-w__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--esm-radius, 18px);
    border: 1px solid var(--esm-w-border);
    background: var(--esm-w-surface);
    box-shadow: var(--elysium-shadow-card, 0 18px 55px rgba(0, 0, 0, .17));
}

/* Шапка: картинка карты под названием сервера и картой */
.esm-w__hero {
    position: relative;
    isolation: isolate;
    min-height: 150px;
    flex: none;
    overflow: hidden;
    background: var(--esm-fallback, #111814);
    border-bottom: 1px solid var(--esm-w-border);
    /* Текст лежит на фотографии карты: шапка тёмная в любой теме сайта */
    color: #f4f6f8;
}
.esm-w__image {
    position: absolute;
    inset: calc(-1 * var(--esm-blur, 0px));
    z-index: -2;
    width: calc(100% + 2 * var(--esm-blur, 0px));
    height: calc(100% + 2 * var(--esm-blur, 0px));
    object-fit: cover;
    object-position: var(--esm-position, center);
    opacity: var(--esm-image-opacity, 1);
    filter: blur(var(--esm-blur, 0px)) brightness(var(--esm-image-brightness, .92)) saturate(var(--esm-image-saturation, 1));
    transition: transform .6s var(--esm-w-ease), filter .4s ease, opacity .3s ease;
}
.esm-w__image[hidden] { display: none; }
.esm-w__hero:hover .esm-w__image { transform: scale(1.04); }
.esm-w.is-offline .esm-w__image {
    filter: blur(var(--esm-blur, 0px)) brightness(calc(var(--esm-image-brightness, .92) * .7)) grayscale(var(--esm-offline-gray, .55));
}
.esm-w.esm-animation-zoom .esm-w__image { animation: esm-w-bg-zoom var(--esm-animation-duration, 18s) ease-in-out infinite alternate; }
.esm-w.esm-animation-breathe .esm-w__image { animation: esm-w-bg-zoom var(--esm-animation-duration, 18s) ease-in-out infinite alternate; }
.esm-w.esm-animation-ken-burns .esm-w__image { animation: esm-w-bg-pan var(--esm-animation-duration, 18s) ease-in-out infinite alternate; }
.esm-w.esm-animation-pan-left .esm-w__image,
.esm-w.esm-animation-pan-right .esm-w__image,
.esm-w.esm-animation-pan-up .esm-w__image { animation: esm-w-bg-pan var(--esm-animation-duration, 18s) ease-in-out infinite alternate; }
@keyframes esm-w-bg-zoom { from { transform: scale(1.02); } to { transform: scale(var(--esm-animation-scale, 1.1)); } }
@keyframes esm-w-bg-pan { from { transform: scale(1.08) translateX(-2%); } to { transform: scale(1.08) translateX(2%); } }

.esm-w__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(6, 9, 13, calc(var(--esm-overlay, .46) * .5)) 0%,
        rgba(6, 9, 13, .38) 45%,
        rgba(6, 9, 13, .86) 100%);
}
.esm-w__hero-inner {
    position: relative;
    min-height: 150px;
    padding: 14px var(--esm-w-pad);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}
.esm-w__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.esm-w__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 9px;
    border-radius: var(--elysium-radius-sm, 8px);
    border: 1px solid var(--esm-w-border);
    background: var(--esm-w-raised);
    color: var(--esm-w-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.esm-w__chip[hidden] { display: none; }
.esm-w__chip--glass {
    background: rgba(8, 11, 16, .62);
    border-color: rgba(255, 255, 255, .14);
    color: #f4f6f8;
    backdrop-filter: blur(6px);
}
.esm-w__chip--end { margin-left: auto; }
.esm-w [data-esm-ping][data-quality="excellent"] { color: var(--elysium-color-success, var(--success)); }
.esm-w [data-esm-ping][data-quality="moderate"] { color: color-mix(in srgb, var(--elysium-color-warning, var(--warning)) 65%, var(--elysium-color-error, var(--error))); }
.esm-w [data-esm-ping][data-quality="poor"] { color: var(--elysium-color-error, var(--error)); }
.esm-w__status { color: rgba(244, 246, 248, .72); }
.esm-w.is-online .esm-w__status { color: var(--esm-online, #49e57b); }
.esm-w.is-offline .esm-w__status { color: var(--esm-offline, #ff6673); }
.esm-w__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.esm-w.is-online .esm-w__dot { animation: esm-w-pulse 2s ease-in-out infinite; }
@keyframes esm-w-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%, transparent); }
}
.esm-w__name {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.esm-w__map { margin-top: 2px; font-size: 12px; font-weight: 600; color: rgba(244, 246, 248, .82); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
.esm-w__map[hidden] { display: none; }

.esm-w__body {
    display: flex;
    flex-direction: column;
    gap: var(--esm-w-gap);
    padding: 14px var(--esm-w-pad) var(--esm-w-pad);
    min-width: 0;
}

/* Онлайн и команды */
.esm-w__count { display: flex; align-items: baseline; gap: 8px; }
.esm-w__count strong { font-size: 28px; font-weight: 800; line-height: 1; }
.esm-w__count span { color: var(--esm-w-muted); font-size: 13px; }
.esm-w__bar {
    display: flex;
    height: 8px;
    margin-top: 8px;
    border-radius: 99px;
    overflow: hidden;
    background: color-mix(in srgb, var(--esm-w-raised) 70%, var(--esm-w-sunken));
}
.esm-w__segment { height: 100%; width: 0; transition: width .7s var(--esm-w-ease); }
.esm-w__segment--total { background: var(--esm-w-accent); }
.esm-w__segment--human { background: var(--esm-w-human); }
.esm-w__segment--zombie { background: var(--esm-w-zombie); }
.esm-w__segment--spectator { background: var(--esm-w-spectator); }
.esm-w__sides { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.esm-w__sides[hidden] { display: none; }
.esm-w__swatch { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.esm-w__chip--human { color: var(--esm-w-human); }
.esm-w__chip--human .esm-w__swatch { background: var(--esm-w-human); }
.esm-w__chip--zombie { color: var(--esm-w-zombie); }
.esm-w__chip--zombie .esm-w__swatch { background: var(--esm-w-zombie); }
.esm-w__chip--spectator { color: var(--esm-w-muted); }
.esm-w__chip--spectator .esm-w__swatch { background: var(--esm-w-spectator); }

/* Вкладки */
.esm-w__tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--elysium-radius-md, 12px);
    background: var(--esm-w-well);
}
.esm-w__tab,
.esm-w__btn,
.esm-w__filter {
    font: inherit;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, filter .2s ease;
}
.esm-w__tab {
    flex: 1;
    min-width: 0;
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--elysium-radius-sm, 9px);
    background: transparent;
    color: var(--esm-w-muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.esm-w__tab:hover:not(:disabled) { color: var(--esm-w-text); }
.esm-w__tab:disabled { cursor: default; opacity: .45; }
.esm-w__tab[aria-selected="true"] { background: var(--esm-w-raised); border-color: var(--esm-w-border); color: var(--esm-w-text); }
.esm-w__tab:focus-visible,
.esm-w__btn:focus-visible,
.esm-w__filter:focus-visible,
.esm-w__link:focus-visible { outline: 2px solid var(--elysium-color-focus, var(--esm-w-accent)); outline-offset: 2px; }

/* Высота панели одна для всех вкладок: карточка не прыгает, список прокручивается до кнопок */
.esm-w__panels { position: relative; height: 252px; min-height: 0; }
.esm-w__panel { height: 100%; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.esm-w__panel[hidden] { display: none; }
.esm-w__panel.is-entering { animation: esm-w-in .28s var(--esm-w-ease) both; }
@keyframes esm-w-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.esm-w__tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--elysium-radius-md, 12px);
    border: 1px solid var(--esm-w-border);
    background: var(--esm-w-raised);
    font-size: 13px;
}
.esm-w__tile[hidden] { display: none; }
.esm-w__label { color: var(--esm-w-muted); font-size: 12px; font-weight: 500; }
.esm-w__tile-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.esm-w__tile-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esm-w__tile-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; min-width: 0; }
.esm-w__tile-row > :first-child { overflow-wrap: anywhere; }
.esm-w [data-esm-next-time] { white-space: nowrap; }
.esm-w__end { margin-left: auto; text-align: right; white-space: nowrap; }
.esm-w__thumb {
    width: 84px;
    aspect-ratio: 16 / 10;
    flex: none;
    border-radius: var(--elysium-radius-sm, 8px);
    object-fit: cover;
    background: var(--esm-w-sunken);
}
.esm-w__thumb--empty { display: grid; place-items: center; color: var(--esm-w-muted); }
.esm-w .esm-w__thumb { height: auto; image-rendering: auto; }
.esm-w .esm-w__thumb[hidden] { display: none; }
.esm-w__faces { display: flex; padding-left: 6px; flex: none; }
.esm-w__faces .esm-w__avatar { width: 28px; height: 28px; margin-left: -6px; border: 2px solid var(--esm-w-raised); }
.esm-w__link {
    margin-left: auto;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--elysium-radius-sm, 8px);
    background: transparent;
    color: var(--esm-w-accent);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.esm-w__note { flex: 1; min-width: 0; color: var(--esm-w-muted); font-size: 13px; }

/* Аватар Steam: квадрат со скруглением; без аватарки — первая буква ника */
.esm-w__avatar {
    position: relative;
    width: 24px;
    height: 24px;
    flex: none;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: color-mix(in srgb, var(--esm-w-accent) 26%, var(--esm-w-raised));
    color: var(--esm-w-text);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.esm-w__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* График онлайна */
.esm-w__chart { flex: 1; min-height: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; }
.esm-w__chart-head { display: flex; justify-content: space-between; gap: 8px; }
.esm-w__chart-now { color: var(--esm-w-accent); font-size: 12px; font-weight: 600; }
.esm-w__bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 3px; margin-top: 10px; }
.esm-w__col {
    flex: 1;
    min-height: 2px;
    border-radius: 3px 3px 1px 1px;
    background: color-mix(in srgb, var(--esm-w-muted) 28%, var(--esm-w-raised));
    transform-origin: bottom;
}
.esm-w__col.is-peak { background: color-mix(in srgb, var(--esm-w-accent) 70%, var(--esm-w-raised)); }
.esm-w__col.is-now { background: var(--esm-w-accent); }
.esm-w__panel.is-entering .esm-w__col { animation: esm-w-grow .5s var(--esm-w-ease) both; animation-delay: calc(var(--i, 0) * 20ms); }
@keyframes esm-w-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.esm-w__axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--esm-w-muted); font-size: 11px; }
.esm-w__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.esm-w__stats .esm-w__tile { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2px; padding: 8px 10px; }
.esm-w__stats .esm-w__label { overflow-wrap: anywhere; }
.esm-w__stats b { font-size: 17px; }

/* Список игроков */
.esm-w__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.esm-w__filters[hidden] { display: none; }
.esm-w__filter {
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--elysium-radius-sm, 8px);
    border: 1px solid var(--esm-w-border);
    background: transparent;
    color: var(--esm-w-text);
    font-size: 12px;
    font-weight: 700;
}
.esm-w__filter[aria-pressed="true"] { background: var(--esm-w-raised); border-color: color-mix(in srgb, var(--esm-w-text) 20%, transparent); }
.esm-w__filter--human { color: var(--esm-w-human); }
.esm-w__filter--zombie { color: var(--esm-w-zombie); }
.esm-w__filter--spectator { color: var(--esm-w-muted); }
.esm-w__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: -6px;
    padding-right: 6px;
    list-style: none;
    margin-block: 0;
    padding-left: 0;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--esm-w-accent) 35%, transparent) transparent;
}
.esm-w__list::-webkit-scrollbar { width: 6px; }
.esm-w__list::-webkit-scrollbar-track { background: transparent; margin: 2px 0; }
.esm-w__list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--esm-w-accent) 35%, transparent); border-radius: 99px; }
.esm-w__list::-webkit-scrollbar-thumb:hover { background: var(--esm-w-accent); }
.esm-w__list:hover { scrollbar-color: color-mix(in srgb, var(--esm-w-accent) 65%, transparent) transparent; }
.esm-w__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 52px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--elysium-radius-md, 12px);
    border: 1px solid var(--esm-w-border);
    background: var(--esm-w-raised);
    font-size: 13px;
    animation: esm-w-in .3s var(--esm-w-ease) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}
.esm-w__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.esm-w__stripe { width: 4px; height: 20px; border-radius: 2px; flex: none; background: var(--esm-w-accent); }
.esm-w__row--human .esm-w__stripe { background: var(--esm-w-human); }
.esm-w__row--zombie .esm-w__stripe { background: var(--esm-w-zombie); }
.esm-w__row--spectator .esm-w__stripe { background: var(--esm-w-spectator); }
.esm-w__nick { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esm-w__badge { padding: 1px 5px; border-radius: 5px; background: var(--esm-w-sunken); color: var(--esm-w-muted); font-size: 10px; font-weight: 800; flex: none; }
.esm-w__score { text-align: right; font-weight: 700; }
.esm-w__time { text-align: right; color: var(--esm-w-muted); }
.esm-w__empty { margin: auto; padding: 16px; color: var(--esm-w-muted); font-size: 13px; text-align: center; }
.esm-w__spinner {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    display: inline-block;
    border: 2px solid color-mix(in srgb, var(--esm-w-text) 18%, transparent);
    border-top-color: var(--esm-w-accent);
    border-radius: 50%;
    animation: esm-w-spin .7s linear infinite;
}
@keyframes esm-w-spin { to { transform: rotate(360deg); } }

/* Действия */
.esm-w__actions { display: flex; gap: 8px; }
.esm-w__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--elysium-radius-md, 12px);
    border: 1px solid var(--esm-w-border);
    background: var(--esm-w-raised);
    color: var(--esm-w-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.esm-w__btn:hover { filter: brightness(1.12); color: var(--esm-w-text); }
.esm-w__btn:active { transform: scale(.97); }
.esm-w__btn svg { width: 18px; height: 18px; flex: none; }
.esm-w__btn--play { flex: 1; background: var(--esm-w-accent); border-color: var(--esm-w-accent); color: var(--esm-w-on-accent); }
.esm-w__btn--play:hover { color: var(--esm-w-on-accent); }
.esm-w__btn--play[hidden],
.esm-w__btn--down[hidden] { display: none; }
.esm-w__btn--down { flex: 1; cursor: not-allowed; opacity: .6; }
.esm-w__btn--down:hover { filter: none; }
.esm-w__btn--icon { width: 44px; padding: 0; }
.esm-w__btn--icon.is-copied { color: var(--elysium-color-success, #3fd67a); border-color: color-mix(in srgb, var(--elysium-color-success, #3fd67a) 45%, transparent); }

.esm-w__empty-card { display: grid; place-items: center; min-height: 160px; padding: 24px; color: var(--esm-w-muted); text-align: center; }

.esm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 420px) {
    .esm-w__hero,
    .esm-w__hero-inner { min-height: 136px; }
    .esm-w__thumb { width: 64px; }
    .esm-w__tab { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .esm-w__image,
    .esm-w.is-online .esm-w__dot,
    .esm-w__panel.is-entering,
    .esm-w__panel.is-entering .esm-w__col,
    .esm-w__row,
    .esm-w__spinner { animation: none !important; }
    .esm-w__segment,
    .esm-w__image,
    .esm-w__tab,
    .esm-w__btn,
    .esm-w__filter { transition: none; }
    .esm-w__hero:hover .esm-w__image { transform: none; }
}