/* L2BOH.NET — главная: «матч-центр» открытий в материале экрана входа Lineage 2.
   Ядро — css/site.css и css/l2-ui.css: фон, рамка и тень .plate, кнопки .l2-btn, поля .l2-field и окна
   .l2-window здесь НЕ перебиваются. Этот файл — раскладка главной и её собственные узлы.

   Раскладка (решения владельца и критика, CRITIQUE.md §6, схема Г):
   ≥ 1200  баннер → сразу две колонки списков «Скоро откроются» | «Уже открылись» + «Вечные»;
           справа колонка 260: липкий блок «Подбор сервера» + строка состояния + «Популярные подборки»,
           ниже реклама 240×400 (не липнет);
   < 1200  разделы друг под другом, под баннером якоря к разделам, липкая строка «Фильтры · N | N из M | ✕»
           и полноэкранный лист фильтров (схема v4).
   Каждый сервер — отдельная полоса-кнопка .plate, между полосами 8 px (на телефоне 6), фон под ними однородный.
   Без сдвигов при загрузке (CLS ≤ 0,05): поля, подборки и якоря стоят в HTML, списку зарезервирована высота.
   Движение есть только у серверов «сегодня»: блик по времени, качающийся шеврон, «волна» у открытого. */

html { scroll-padding-top: 16px; }
html.is-locked { overflow: hidden; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--bg-2); color: var(--text); font-weight: 600; text-decoration: none;
}
.skip:focus-visible { top: 12px; }

/* ───────── Баннер главной ─────────
   ≥ 768: шапка лежит поверх баннера. Знак в исходнике 1440×480 занимает строки ≈ 180–331
   (буквы 180–263, орнамент до 331), картинка по ширине, масштаб W/1440. Низ орнамента ставим на 2 px
   выше низа кадра: сдвиг картинки y = h − 331·W/1440 − 2px = h − 22.99vw − 2px. Тогда весь знак в кадре
   на любой ширине (на 1200–1480 раньше срезалось 4–12 px ромба), верх букв — на 40–58 px, под меню.
   Высота кадра растёт с шириной (196 px на 1440), поэтому на 1920 и шире знак не срезается.
   < 768: кадр 96 px, низ картинки по низу кадра — знак сверху, под ним полоса для H1. */
@media (min-width: 768px) {
  .banner--home { --banner-h: clamp(176px, 13.6vw, 360px); }
  .banner--home img { object-position: 50% calc(var(--banner-h) - 22.99vw - 2px); }
}
@media (max-width: 767.98px) {
  .banner--home { --banner-h: 96px; }
  .banner--home img { object-position: 0% 100%; }
}
.home-h1 {
  position: absolute; left: 0; right: 0; z-index: 21; pointer-events: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.home-h1 h1 {
  margin: 0; font: 700 21px/1 var(--f-disp); letter-spacing: .03em; color: var(--text); white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}
.home-note {
  flex: none; margin: 0; font: 500 13px/1.2 var(--f-ui); color: var(--text); white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 2px #000;
}
@media (min-width: 768px) {
  /* H1 — в тёмной полосе над знаком, на месте скрытого логотипа шапки; пометка — у нижнего края кадра справа */
  .home-h1 { top: 0; align-items: center; min-height: 56px; }
  .home-note { position: absolute; right: var(--gutter-r); top: calc(var(--banner-h) - 30px); }
}
@media (min-width: 1200px) { .home-note { display: none; } }  /* на десктопе пометки — у колонок и в правом блоке */
@media (max-width: 767.98px) {
  .home-h1 { bottom: 6px; }
  .home-h1 h1 { font-size: 16px; }
  .home-note { font-size: 12px; }
}
@media (max-width: 389.98px) { .home-h1 h1 { font-size: 15px; } }

/* Шапка на телефоне и меню в одну строку — теперь в ядре (site.css). */

/* ───────── Липкая строка фильтра (< 1200) ───────── */
.hbar { display: none; }
@media (max-width: 1199.98px) {
  html { scroll-padding-top: 54px; }
  .hbar {
    display: block; position: sticky; top: 0; z-index: 15;
    background: rgba(16, 13, 10, .97); border-block: 1px solid var(--line-strong);
    box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .8);
  }
  .mbar { display: flex; align-items: center; gap: 10px; min-height: 42px; }
  .l2-btn.mbar__btn { flex: none; min-height: 34px; padding: 0 12px; gap: 6px; font-size: 15px; }
  .mbar__ico { width: 16px; height: 16px; }
  .mbar__n { color: var(--l2-gold-hi); font-weight: 600; }
  .mbar__sum { flex: 1; min-width: 0; margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.2; }
  .mbar__desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
  .mbar__desc.is-on { color: var(--text); }
  .mbar__count { flex: none; margin-left: auto; font-weight: 600; color: var(--text); white-space: nowrap; }
  .mbar__reset {
    flex: none; display: grid; place-items: center; width: 44px; height: 42px; margin-right: -10px;
    padding: 0; border: 0; background: none; color: var(--text); cursor: pointer;
  }
  .mbar__reset[hidden] { display: none; }
  .mbar__reset svg { width: 20px; height: 20px; }
  .mbar__reset:hover { color: var(--gold-hi); }
}

/* ───────── Якоря к разделам (< 1200) ───────── */
.anchors { display: none; }
@media (max-width: 1199.98px) {
  .anchors { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
  .anchors.is-off { visibility: hidden; }   /* пустой результат: разделов нет — якоря скрыты, место держим */
  .anchors a {
    position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 34px; padding: 0 6px; color: var(--muted); text-decoration: none; white-space: nowrap;
  }
  .anchors a[hidden] { display: none; }
  .anchors__l { font: 700 16px/1 var(--f-disp); letter-spacing: .02em; }
  .anchors__n { display: inline-block; min-width: 2ch; font: 500 12.5px/1 var(--f-ui); color: var(--ash); font-variant-numeric: tabular-nums; }
  .anchors a:hover { color: var(--text); }
  .anchors a[aria-current="true"] { color: var(--gold-hi); }
  .anchors a[aria-current="true"] .anchors__n { color: var(--gold); }
  .anchors a[aria-current="true"]::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 2px; background: var(--gold); }
  .anchors a:focus-visible { outline-offset: -3px; }
}
@media (max-width: 379.98px) { .anchors__l { font-size: 15px; } .anchors a { gap: 4px; padding: 0 4px; } }

/* ───────── Раскладка ───────── */
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.rail { display: none; }
/* Списки рисует скрипт. Чтобы подвал не прыгал (CLS), колонке списков всегда отдан минимум экран:
   до отрисовки подвал стоит за краем окна, после — тем более. Окно «Разместить» до отрисовки скрыто. */
.lists { min-width: 0; min-height: 100vh; padding-top: 12px; }
.lists:not(.is-ready) .col--past { display: none; }
.lists:focus { outline: none; }
.col { min-width: 0; container: col / inline-size; }
.col[hidden] { display: none; }
.col--past { margin-top: 28px; }
@media (max-width: 1199.98px) { .lists { padding-top: 6px; } }
@media (min-width: 1200px) {
  .home-layout { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 24px; align-items: stretch; }
  .lists { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .lists__all { grid-column: 1 / -1; }
  .col--past { margin-top: 0; }
  .rail { grid-column: 2; grid-row: 1; display: block; padding-top: 12px; }
}

/* заголовок раздела: «Скоро откроются · время МСК · 24» */
.col__h {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; padding: 2px 0 6px;
  border-bottom: 1px solid var(--line-strong);
}
.col__t { margin: 0; font: 700 22px/1 var(--f-disp); letter-spacing: .02em; color: var(--text); white-space: nowrap; }
.col__t:focus { outline: none; }
.col__hint { min-width: 0; font: 400 13px/1 var(--f-ui); color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col__n { margin-left: auto; font: 600 14px/1 var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.col__n.is-part { color: var(--gold-hi); }
@media (max-width: 1199.98px) {
  /* на телефоне первый раздел назван якорем «Скоро» прямо над ним — свой заголовок только для скринридера */
  .col--up .col__h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.panel + .panel { margin-top: 26px; }
.col__orn { margin: 0 0 14px; }

/* ═════ ПОЛОСА СЕРВЕРА — общий блок главной и превью «Размещения». Разметку строит L2BOH_COMMON.stripParts
   (js/common.js). Этот блок дословно скопирован в css/pages.css между такими же метками: меняется здесь —
   переносить туда (кандидат в ядро site.css, тогда копия удаляется). НАЧАЛО ═════ */
.strips { display: flex; flex-direction: column; gap: 8px; }
@container col (max-width: 419.98px) { .strips { gap: 6px; } }
.sep {
  display: flex; align-items: center; gap: 8px; min-height: 16px; margin: 6px 0 0;
  font: 500 12.5px/16px var(--f-ui); letter-spacing: .01em; color: var(--muted); white-space: nowrap;
}
.strips > .sep:first-child { margin-top: 0; }
.sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), rgba(74, 58, 40, 0)); }
.sep--today { color: var(--ember); }
.sep--pin { color: var(--gold); font-weight: 600; }
.sep--vip { color: var(--gold-hi); font-weight: 700; letter-spacing: .08em; }
/* Группа VIP отделена от остальных (владелец 07.11: «бесплатные отделить от VIP»): своя подложка и рамка,
   ниже — обычный список по дням. */
.vip-block { gap: 12px; padding: 10px 10px 12px; border: 1px solid rgba(201, 162, 74, .45); border-radius: var(--r); background: rgba(240, 180, 60, .05); }
.vip-block .sep--vip { margin-top: 0; }
.vip-block + .strips { margin-top: 14px; }
.sep--pin svg { flex: none; width: 13px; height: 13px; }
.pinned { margin-bottom: 16px; }
.grp__empty--note { min-height: 40px; border-style: solid; border-color: var(--line); }

/* полоса сервера: маркер · название + метка · рейт · хроника · (особенность) · время */
/* Колонка времени: слева только время (дата — в метке дня; у «через неделю» — «15.11»), справа — «3 дня назад».
   Узкая колонка времени слева отдаёт место названию: на 1440 все 42 демо-названия целиком. */
.strip {
  display: grid; align-items: center; column-gap: 10px;
  grid-template-columns: 28px 12px minmax(0, 1fr) 56px 70px 40px;
  grid-template-areas: "em mk name rate chr when";
  min-height: 44px; padding: 0 10px 0 8px;
}
.col--past .strip { grid-template-columns: 28px 12px minmax(0, 1fr) 56px 70px 88px; }
/* Эмблема сервера — перед стрелкой (владелец 07.11: «вот сюда, перед стрелкой»). Загружена в админке — картинка;
   нет — первая буква названия на бронзовой плашке, чтобы все полосы шли ровно. */
.strip__em { grid-area: em; display: block; width: 28px; height: 28px; margin-right: -4px; flex: none; }
.strip__em-i { display: block; width: 100%; height: 100%; object-fit: contain; }
.strip__em--mono {
  display: grid; place-items: center; border-radius: 6px;
  background: linear-gradient(160deg, #3b2f20 0%, #221a12 100%);
  box-shadow: inset 0 0 0 1px rgba(196, 164, 104, .5), inset 0 1px 0 rgba(255, 232, 180, .22);
  font: 700 16px/1 var(--f-disp); color: var(--gold-hi);
}
/* VIP (владелец 07.11): «более большая иконка с подсветкой и пометкой VIP». Эмблема 40 px с золотым ореолом
   занимает и место ромба (метка дня у VIP — у названия, ромб не нужен); метка «VIP» — у названия (badge--vip). */
.plate--vip { min-height: 52px; }
.plate--vip .strip__mk { visibility: hidden; }
.plate--vip .strip__em { width: 40px; height: 40px; margin-right: -16px; }
.plate--vip .strip__em--mono { font-size: 20px; }
/* ореол эмблемы — у всех оплаченных строк (VIP, «Бонус-старт», место в подборке) */
.plate--paid .strip__em { position: relative; }
.plate--paid .strip__em::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 205, 110, .42), rgba(250, 205, 110, 0));
}
.plate--paid .strip__em-i { position: relative; filter: drop-shadow(0 0 3px rgba(255, 226, 150, .85)) drop-shadow(0 0 9px rgba(240, 170, 50, .5)); }
.plate--paid .strip__em--mono { box-shadow: inset 0 0 0 1px var(--gold), 0 0 10px rgba(240, 180, 60, .55); }
.plate--paid .strip__em--mono::before { display: none; }
/* VIP за 3 дня до открытия (владелец 07.11: «анимацию на эмблему, как в закрепе у эмблемы BOHPTS»): от эмблемы
   расходится отзвук — копия увеличивается и гаснет, как у логотипа Премиум-карточки (pc-echo, site.css); эмблема
   маленькая, поэтому отзвук ярче и шире. У буквы-плашки — расходящаяся золотая рамка. При наведении — чаще. */
.strip__em-echo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; filter: brightness(1.7) drop-shadow(0 0 4px rgba(255, 214, 130, .95)); }
.strip__em-echo--mono { border: 2px solid var(--gold-hi); border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .strip__em-echo { animation: l2-em-echo 2.6s ease-out infinite; animation-delay: var(--ph, 0ms); }
  a.plate:hover .strip__em-echo, a.plate:focus-visible .strip__em-echo { animation: l2-em-echo-fast .7s ease-out infinite; }
}
@keyframes l2-em-echo { 0% { transform: scale(1); opacity: 0; } 6% { opacity: .85; } 36%, 100% { transform: scale(1.65); opacity: 0; } }
@keyframes l2-em-echo-fast { 0% { transform: scale(1); opacity: 0; } 18% { opacity: .85; } 100% { transform: scale(1.65); opacity: 0; } }
/* VIP: дата открытия в колонке — крупно и золотом; в день открытия у названия яркая метка «Сегодня»
   (владелец 07.11: «дата плохо выделена… после названия сервера очень сильно выделяется Сегодня»). */
.plate--vip .strip__when { font-size: 15.5px; font-weight: 700; color: var(--gold-hi); }
/* «Живые» метки (владелец 07.11: «к каждой надписи — анимации»): по метке VIP раз в несколько секунд проходит
   блик (у каждой строки — своя задержка --ph, без синхронного мигания), «Сегодня» у VIP пульсирует, стрелки
   «Бонус-старта» делают пол-оборота. Только transform и box-shadow; при prefers-reduced-motion — без движения. */
.badge--vip { position: relative; overflow: hidden; }
.badge--vip::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-130%); pointer-events: none;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 243, 210, .8) 50%, transparent 85%);
}
@media (prefers-reduced-motion: no-preference) {
  .badge--vip::after { animation: l2-badge-glint 3.8s ease-in-out infinite; animation-delay: var(--ph, 0ms); }
  .plate--vip .strip__tag.is-today { animation: l2-today-pulse 1.6s ease-in-out infinite; }
  .strip--bonus .mk--restart .mk__arr { animation: l2-restart 5s ease-in-out infinite; animation-delay: var(--ph, 0ms); }
}
@keyframes l2-badge-glint { 0%, 60% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }
@keyframes l2-today-pulse { 50% { transform: scale(1.07); box-shadow: 0 0 18px rgba(255, 170, 60, .95); } }
/* две одинаковые стрелки: пол-оборота неотличим от начала — цикл без рывка */
@keyframes l2-restart { 0%, 78% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
.plate--vip .strip__tag.is-today {
  padding: 3px 8px 4px; border-radius: 10px; background: linear-gradient(180deg, #ffd27a 0%, #e8902e 100%); color: #1a1208;
  font: 700 11.5px/1.1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 0 10px rgba(255, 170, 60, .55);
}
.strip__mk { grid-area: mk; display: grid; place-items: center; width: 12px; height: 14px; }
/* Название: в узкой колонке (1440, 420–699 px) — одна строка высотой 20 px. Особенность (Craft-PvP) идёт меткой
   после названия и, если целиком не помещается, переносится на вторую строку, которую не видно (overflow):
   название и метки VIP/Премиум/«сегодня» ради неё не обрезаются (судья, этап 4). */
.strip__name {
  grid-area: name; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 10px;
  min-width: 0; height: 20px; overflow: hidden;
}
.strip__head { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; height: 20px; }
.strip__ftag { flex: none; font: 400 13px/20px var(--f-ui); color: var(--ash); white-space: nowrap; }
.strip__nm {
  min-width: 0; font: 700 16px/1.15 var(--f-disp); letter-spacing: 0; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.strip .badge { flex: none; }
/* у закреплённых — день после названия («сегодня», «пн 9.11»), у «сегодня» меньше часа — «через 25 мин» */
.strip__tag { flex: none; font: 500 12.5px/1 var(--f-ui); color: var(--muted); white-space: nowrap; }
.strip__tag.is-today { color: var(--ember); }
.strip__soon { flex: none; font: 600 12.5px/1 var(--f-ui); color: var(--ember); white-space: nowrap; }
.strip__pin { display: none; }
.strip__rate { grid-area: rate; justify-self: end; font: 600 14px/1.2 var(--f-ui); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip__chr { grid-area: chr; min-width: 0; padding-left: 2px; font: 400 14px/1.2 var(--f-ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__feat { grid-area: feat; display: none; min-width: 0; font: 400 13px/1.2 var(--f-ui); color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__when {
  grid-area: when; justify-self: end; position: relative; text-align: right;
  font: 500 13.5px/1.2 var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.strip:hover .strip__nm { color: #fff6e6; }
/* зазор рейт → хроника всегда ≥ 12 px (QA v5: «x100000Interlude»): 10 px сетки + 2 px отступа хроники */

/* «Премиум» в узкой колонке — золотая корона (+45 px названию), текстом — где места хватает */
.crown { display: none; flex: none; width: 18px; height: 14px; color: var(--gold); }
@container col (min-width: 420px) and (max-width: 699.98px) {
  .strip .badge--prem { display: none; }
  .strip .crown { display: block; }
}
/* широкая колонка (планшет): особенность помещается — показываем */
@container col (min-width: 700px) {
  .strip { grid-template-columns: 28px 12px minmax(0, 1fr) 58px 96px 104px 64px; grid-template-areas: "em mk name rate chr feat when"; padding: 0 12px 0 10px; }
  .col--past .strip { grid-template-columns: 28px 12px minmax(0, 1fr) 58px 96px 104px 108px; }
  .strip__feat { display: block; }
  .strip__ftag { display: none; }   /* у особенности своя колонка */
}
/* узкая колонка (телефон): две линии — название + метка / рейт · хроника · особенность · время */
@container col (max-width: 419.98px) {
  .strip, .col--past .strip {
    grid-template-columns: 32px 12px max-content minmax(0, max-content) minmax(0, 1fr) auto;
    grid-template-areas: "em mk name name name name" "em . rate chr feat when";
    row-gap: 3px; column-gap: 10px; min-height: 52px; padding: 5px 12px 6px 10px;
  }
  .strip__mk { align-self: start; margin-top: 3px; }
  .strip__em { width: 32px; height: 32px; align-self: center; }   /* на обе линии */
  .plate--vip .strip__em { width: 42px; height: 42px; }
  .strip__name { height: auto; overflow: visible; flex-wrap: nowrap; align-items: flex-start; }
  .strip__head { height: auto; flex-wrap: wrap; row-gap: 2px; align-items: flex-start; }
  .strip__ftag { display: none; }   /* особенность — во второй линии */
  /* имя длиннее строки — не больше двух строк, полное имя в title */
  .strip__nm {
    white-space: normal; overflow: hidden; overflow-wrap: anywhere; line-height: 20px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .strip__head .strip__tag, .strip__head .strip__soon { line-height: 20px; }
  .strip__rate { justify-self: start; font-size: 13px; line-height: 16px; }
  .strip__chr, .strip__feat { font-size: 13px; line-height: 16px; }
  .strip__feat { display: block; }
  .strip__when { font-size: 13px; line-height: 16px; }
  /* «Закреплено» на телефоне — подписью внутри полосы, а не отдельной строкой над лентой (+1 полоса на экране) */
  .pinned--prem .sep--pin { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pinned--prem .strip__feat { display: none; }
  .pinned--prem .strip__pin {
    grid-area: feat; display: flex; align-items: center; gap: 4px; min-width: 0;
    font: 600 12.5px/16px var(--f-ui); color: var(--gold); white-space: nowrap;
  }
  .pinned--prem .strip__pin svg { flex: none; width: 12px; height: 12px; }
  .sep { min-height: 14px; margin-top: 2px; font-size: 12px; line-height: 14px; }
  .pinned { margin-bottom: 8px; }
}

/* «остывающее» время: сегодня — ember, завтра — gold, 2–7 дней — text, позже — muted */
.when--today, .when--soon { color: var(--ember); }
.when--soon { font-weight: 600; }
.when--tomorrow { color: var(--gold); }
.when--week { color: var(--text); }
.when--later, .when--past { color: var(--muted); }
.when--live { color: var(--live); }
.when--eternal { color: var(--silver); }

/* маркеры статуса */
.mk { display: block; flex: none; }
.mk--gem { width: 7px; height: 7px; border: 1px solid var(--gold-lo); transform: rotate(45deg); }
.mk--dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.mk--inf { width: 15px; height: 10px; color: var(--silver); }
.mk--chev { width: 9px; height: 12px; color: var(--gold); }
/* «Бонус-старт»: вместо ромба — круговые стрелки на бронзовой плашке (16 px в колонке 12 px: поля −2 px, чтобы
   названия стояли ровно с остальными списками). Наведение — стрелки делают пол-оборота. */
.mk--restart { width: 16px; height: 16px; margin: -1px -2px; color: var(--gold-hi); }
.mk--restart .mk__box { fill: rgba(196, 164, 104, .16); stroke: var(--gold-lo); stroke-width: 1; }
.mk--restart .mk__arr { transform-origin: 8px 8px; transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.strip--bonus:hover .mk__arr, .strip--bonus:focus-visible .mk__arr { transform: rotate(180deg); }

/* ───────── Движение только у «сегодня» (transform и opacity) ─────────
   --ph — сдвиг фазы от общего часа (−performance.now() mod 3200 мс): после перерисовки списка
   анимация продолжается с того же места и не «дёргается». */
.is-today .mk--chev { animation: l2-nudge 1.6s ease-in-out infinite alternate; animation-delay: var(--ph, 0ms); }
@keyframes l2-nudge { from { transform: translateX(-1px); } to { transform: translateX(3px); } }

.mk--wave::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); opacity: 0;
  animation: l2-wave 3.2s ease-out infinite; animation-delay: var(--ph, 0ms);
}
@keyframes l2-wave { 0% { transform: scale(1); opacity: .55; } 55%, 100% { transform: scale(3); opacity: 0; } }

/* блик по времени «20:00»: окно 55 % ширины идёт слева направо, внутри — светлая копия текста,
   сдвинутая навстречу, поэтому светлеют только буквы; раз в 3,2 с, проход ≈ 1,4 с.
   Математика: окно шириной w = 0,55·P сдвигается на k·w (k: −1 → 1/0,55), копия внутри — на −k·w,
   что в процентах её собственной ширины P равно −k·55 % (от +55 % до −100 %). */
.when__t { position: relative; display: inline-block; }
.glint {
  position: absolute; top: -1px; bottom: -1px; left: 0; width: 55%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
  transform: translateX(-100%);
  animation: l2-glint-o 3.2s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: var(--ph, 0ms);
}
.glint__t {
  position: absolute; top: 1px; left: 0; width: calc(100% / .55); text-align: left; white-space: nowrap; color: #fff8ea; opacity: 0;
  animation: l2-glint-i 3.2s cubic-bezier(.45, 0, .55, 1) infinite, l2-glint-f 3.2s linear infinite;
  animation-delay: var(--ph, 0ms);
}
@keyframes l2-glint-o { 0% { transform: translateX(-100%); } 44%, 100% { transform: translateX(181.82%); } }
@keyframes l2-glint-i { 0% { transform: translateX(55%); } 44%, 100% { transform: translateX(-100%); } }
@keyframes l2-glint-f { 0% { opacity: 0; } 6% { opacity: 1; } 38% { opacity: 1; } 44%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .glint { display: none; }
  .is-today .mk--chev, .mk--wave::after { animation: none; }
  .mk--restart .mk__arr { transition: none; }
}
/* ───────── «Открывается сегодня»: живая табличка (владелец 07.11) ─────────
   Только серверы, которые ещё откроются сегодня (is-opening; у уже открывшихся сегодня — нет): ободок
   «раскалённого» цвета дышит, по всей табличке раз в 3,2 с проходит блик — в такт блику по времени (общая
   фаза --ph). Слой эффекта — под текстом (isolation + z-index: −1), только transform и opacity. */
.strip.is-opening, .strip.is-opened-today { isolation: isolate; }
.strip.is-opening::before, .strip.is-opened-today::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  animation-delay: var(--ph, 0ms);
}
.strip.is-opening::before {
  border: 1px solid var(--ember);
  box-shadow: 0 0 12px rgba(240, 160, 75, .5), inset 0 0 14px rgba(240, 160, 75, .18);
  opacity: .45;
  animation: l2-ember 3.2s ease-in-out infinite;
}
@keyframes l2-ember { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
/* Открылся сегодня (колонка «Уже открылись», владелец 07.11): спокойная зелёная подсветка цвета «открыт» —
   без бегущего блика, чтобы не спорить с «откроется сегодня» слева. */
.strip.is-opened-today::before {
  border: 1px solid var(--live);
  box-shadow: 0 0 10px rgba(143, 201, 138, .4), inset 0 0 12px rgba(143, 201, 138, .14);
  opacity: .5;
  animation: l2-live 3.2s ease-in-out infinite;
}
@keyframes l2-live { 0%, 100% { opacity: .4; } 50% { opacity: .9; } }
.strip__fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.strip__sheen {
  position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 200, 130, .12) 40%, rgba(255, 232, 190, .26) 50%, rgba(255, 200, 130, .12) 60%, transparent 100%);
  transform: translateX(-100%);
  animation: l2-sheen 3.2s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: var(--ph, 0ms);
}
@keyframes l2-sheen { 0% { transform: translateX(-100%); } 44%, 100% { transform: translateX(265%); } }
@media (prefers-reduced-motion: reduce) {
  .strip.is-opening::before { animation: none; opacity: .85; }
  .strip.is-opened-today::before { animation: none; opacity: .75; }
  .strip__sheen { display: none; }
}
/* ═════ ПОЛОСА СЕРВЕРА — КОНЕЦ общего блока ═════ */

/* ───────── «Бонус-старт» (владелец 07.11; место и вид — решение критика) ─────────
   Платное место вверху колонки «Уже открылись». Строка — та же полоса (эмблема · название · рейт · хроника · дата),
   без VIP-рамки и меток. Колонки — как у полос ниже, чтобы совпадали. */
.panel--bonus { margin-bottom: 22px; }
/* подписи бонуса владелец убрал (07.11) — строка блока как обычная полоса, без VIP-рамки и меток */
/* куплено не всё: «Свободно ещё N · Разместить сервер →» — приглушённо, как свободное место в подборке */
.bonus-free {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 12px;
  border: 1px dashed var(--line-strong); border-radius: var(--r);
  font-size: 13.5px; color: var(--muted); text-decoration: none; text-align: center;
}
.bonus-free:hover, .bonus-free:focus-visible { color: var(--gold-hi); border-color: var(--gold-lo); }




/* ───────── Пустые и служебные состояния ───────── */
.grp__empty {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 44px; margin: 0; padding: 6px 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--r); font-size: 14px; color: var(--muted);
}
.grp__empty b { color: var(--text); font-weight: 600; }
.l2-btn.btn-sm { min-height: 30px; padding: 0 12px; font-size: 14px; }
.l2-btn.more { width: 100%; margin-top: 10px; min-height: 40px; }

.empty { padding: 22px 24px 24px; }
.empty__t { margin: 0; font: 700 22px/1.2 var(--f-disp); letter-spacing: .02em; color: var(--text); }
.empty__p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.empty__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.empty__acts .n { color: var(--l2-btn-text-dim); font-variant-numeric: tabular-nums; }

/* окно «Разместить свой сервер» — в пустом месте под «Вечными» */
.promo { margin-top: 28px; padding: 18px 20px 20px; }
.promo__t { margin: 0 0 8px; font: 700 22px/1.15 var(--f-disp); letter-spacing: .02em; color: var(--gold-hi); }
.promo p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.l2-btn.promo__go { margin-top: 10px; min-height: 38px; }

/* ───────── Правая колонка (≥ 1200): фильтр + баннер — один липкий блок ─────────
   Раньше липким был только фильтр, и баннер при прокрутке уезжал под него (владелец 07.11: «так не должно
   быть»). Теперь липнет весь блок, а его top двигает home.js (railStick): блок выше окна едет вместе со
   страницей, пока не покажется низ (баннер) или верх (фильтр). */
.rail__in { position: sticky; top: var(--rail-top, 12px); display: flex; flex-direction: column; gap: 12px; }
.rail__tools { display: flex; flex-direction: column; gap: 12px; }
.picker-win { padding: 14px 14px 12px; }
.picker__t { margin: 0 0 10px; font: 700 22px/1.1 var(--f-disp); letter-spacing: .02em; }
.picker__t:focus { outline: none; }
.picker { margin: 0; }
.picker__fields { display: grid; gap: 8px; }
.picker__lbl { display: block; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.picker select { cursor: pointer; text-align-last: center; }
.picker select option { text-align: left; }
.l2-btn.picker__go { width: 100%; margin-top: 12px; min-height: 38px; font-size: 15px; }

/* строка состояния: «Interlude · x10–x199 · 6 из 42 · ✕ Сбросить» */
.state {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  min-height: 30px; margin-top: 10px; font-size: 13.5px; line-height: 1.3; color: var(--muted);
}
.state:focus { outline: none; }
.state:focus-visible::after { content: ""; position: absolute; inset: -4px; outline: 2px solid var(--gold-hi); pointer-events: none; }
.state__desc { color: var(--text); font-weight: 500; }
.state__n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.state__desc + .state__n::before { content: "· "; color: var(--ash); }
.state__n b { color: var(--gold-hi); font-weight: 600; }
.state .l2-btn { margin-left: auto; min-height: 28px; padding: 0 10px; gap: 4px; font-size: 13px; }
.state .l2-btn svg { width: 12px; height: 12px; }
/* «Показать N серверов»: строка на 2 с подсвечивается (только opacity) */
.state::before {
  content: ""; position: absolute; inset: -5px -7px; pointer-events: none; opacity: 0;
  border: 1px solid var(--gold); border-radius: var(--r); background: rgba(217, 180, 90, .12);
}
.state.is-flash::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .state::before { transition: opacity .35s ease-out; } }

.presets-box__t { margin: 2px 0 8px; font: 700 18px/1.1 var(--f-disp); letter-spacing: .02em; color: var(--text); }
.presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.l2-btn.preset {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; justify-content: stretch;
  column-gap: 6px; row-gap: 3px; min-height: 42px; padding: 5px 9px; text-align: left; white-space: nowrap;
}
.preset__l { grid-column: 1; font-size: 14px; font-weight: 500; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.preset__s { grid-column: 1; font-size: 12px; line-height: 1.1; color: var(--l2-btn-text-dim); overflow: hidden; text-overflow: ellipsis; }
.preset .n { grid-column: 2; grid-row: 1 / span 2; min-width: 2ch; text-align: right; font-size: 13px; color: #d2c6a6; font-variant-numeric: tabular-nums; }
.preset[aria-pressed="true"] .preset__s, .preset[aria-pressed="true"] .n { color: var(--l2-gold); }
.preset.is-zero:not([aria-pressed="true"]) { color: var(--l2-btn-text-dim); }
/* «∞ Только вечные · N» (критик 07.11): переключатель под двумя select, как подборка — нажат золотом */
.l2-btn.picker__et { width: 100%; min-height: 36px; gap: 6px; font-size: 14px; }
.picker__et-i { font-size: 18px; line-height: 1; }
.picker__et .n { margin-left: 2px; }
.picker__et[aria-pressed="true"], .picker__et[aria-pressed="true"] .n { color: var(--l2-gold); }
.picker__et.is-zero:not([aria-pressed="true"]) { color: var(--l2-btn-text-dim); }

.rail__note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ash); }
.rail__note b { color: var(--muted); font-weight: 600; }
.rail__note span { display: block; }

/* ───────── Реклама 240×400 ───────── */
/* блок рекламы (.ad, .ad__*) — в site.css: его же показывает превью в админке */
.rail .ad { margin-top: 6px; }
/* баннер 480×120 в «Скоро откроются» между VIP и остальными (site.css .ad-mid, home.js AD_MID): отступы — как между VIP-блоком и списком */
.vip-block + .ad-mid { margin-top: 14px; }
.ad-mid + .strips { margin-top: 14px; }
.ad-slot { display: flex; justify-content: center; padding-block: 28px 0; }
.ad-slot--late { padding-block: 28px 0; }
.ad-slot:empty { display: none; }

/* ───────── Лист фильтров (< 1200) ───────── */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--bg); }
.sheet[hidden] { display: none; }
.sheet__in { width: min(560px, 100%); margin: 0 auto; padding: 0 16px; }
.sheet__head { flex: none; border-bottom: 1px solid var(--line-strong); background: var(--bg-2); }
.sheet__head .sheet__in { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.sheet__t { margin: 0; font: 700 24px/1 var(--f-disp); letter-spacing: .02em; color: var(--text); }
.sheet__t:focus { outline: none; }
.l2-btn.sheet__close { min-height: 36px; padding: 0 14px; }
.sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-block: 8px 24px; }
.state--sheet { margin-top: 4px; }
.sheet__lbl { margin: 16px 0 10px; font: 700 19px/1 var(--f-disp); letter-spacing: .02em; color: var(--text); }
.presets--sheet { gap: 8px; }
.presets--sheet .l2-btn.preset { min-height: 48px; padding: 6px 12px; }
.presets--sheet .preset__l { font-size: 15px; }
.presets--sheet .preset__s { font-size: 13px; }
.picker--sheet { margin-top: 6px; }
.picker--sheet .picker__fields { gap: 4px; }
.picker--sheet .picker__lbl { margin: 12px 0 8px; font: 700 19px/1 var(--f-disp); letter-spacing: .02em; color: var(--text); }
.picker--sheet .l2-field select { height: 40px; font-size: 16px; }
.picker--sheet .l2-field:focus-within select { height: 38px; }
.sheet__foot { flex: none; border-top: 1px solid var(--line-strong); background: var(--bg-2); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sheet__foot .sheet__in { display: flex; gap: 10px; padding-block: 12px; }
.l2-btn.sheet__done { flex: 1; min-height: 48px; font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .sheet:not([hidden]) .sheet__body { animation: l2-sheet-in .18s ease-out; }
  @keyframes l2-sheet-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* призрак уехавшей полосы (живое перемещение): свой контейнер, чтобы раскладка полосы совпала */
.ghost-wrap { position: absolute; z-index: 5; pointer-events: none; container: col / inline-size; }

/* ───────── Подвал ───────── */
.site-footer__logo { margin-bottom: 10px !important; }
@media (max-width: 767.98px) { .site-footer { margin-top: 40px; } }