/* L2BOH.NET — страницы «Размещение» и «FAQ и контакты».
   Ядро — css/site.css (токены, шапка, баннер, .plate, .badge, подвал) и css/l2-ui.css (.l2-btn, .l2-field,
   .l2-window) здесь НЕ перебиваются, кроме двух мест в форме заявки (подписаны ниже: высота поля и фокус).
   Префиксы: pg- — общее для двух страниц, rz- — «Размещение», faq- — FAQ, pv — превью полосы сервера
   (копия раскладки .strip из css/home.css, чтобы превью выглядело ровно как строка на главной). */

html { scroll-padding-top: 16px; }
main { display: block; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.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; }

.site-footer__logo { margin-bottom: 10px !important; }

/* ───────── Общее: верх страницы, заголовки окон, пометки ───────── */
.pg-lead { margin: 10px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
/* пометки строкой; ромбик стоит перед каждой, поэтому перенос на телефоне не начинает строку с «·» */
.pg-meta { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ash); }
.pg-meta span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pg-meta span::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--gold-lo); transform: rotate(45deg); }
.pg-win-t { margin: 0; font: 700 22px/1.15 var(--f-disp); letter-spacing: .02em; color: var(--gold); text-wrap: balance; }
.pg-demo-note { color: var(--ash); }
.pg-noscript { margin: 24px 0 0; padding: 12px 14px; border: 1px dashed var(--line-strong); color: var(--muted); }
.pg-orn { margin-block: 36px 28px; }

.pg-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin: 0 0 18px; }
.pg-sec-head p { margin: 0; max-width: 78ch; font-size: 14.5px; color: var(--muted); text-wrap: pretty; }

/* Колонка превью — контейнер тех же @container-запросов, что колонка главной. */
.col { min-width: 0; container: col / inline-size; }
.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__hint { min-width: 0; font: 400 13px/1 var(--f-ui); color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═════ ПОЛОСА СЕРВЕРА — общий блок главной и превью «Размещения». Разметку строит 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: «проще — показать сайт и обвести: вы будете тут»; «меньше текста») ─────────
   Картинка главной с номерами мест (tools/placement-map.mjs), список мест как у l2daily, окно с Telegram.
   ≥ 1100: картинка слева, справа список и пример Премиума — наведение на строку сразу видно на картинке. */
.rz-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 6px; }
.l2-btn.rz-tgbtn { min-height: 44px; padding: 0 18px; gap: 8px; }
.rz-tgbtn svg, .rz-tg__link svg { flex: none; width: 18px; height: 18px; }

.rz-grid { display: grid; gap: 22px; margin-top: 22px; align-items: start; }
@media (min-width: 1100px) {
  .rz-grid { grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "map places" "vs prem"; }
  .rz-map-s { grid-area: map; }
  .rz-places { grid-area: places; }
  .rz-vs { grid-area: vs; }
  .rz-prem { grid-area: prem; }
}
.rz-map-s .h-section { margin: 0 0 12px; }

/* картинка главной; рамки мест — слой HTML поверх, координаты в % от картинки */
.rz-map { position: relative; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r); background: #0b0907; container: rzmap / inline-size; }
.rz-map__img { display: block; width: 100%; height: auto; border-radius: inherit; filter: brightness(.78) saturate(.85); }
.rz-pin {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 2px solid var(--gold-hi); border-radius: 6px; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 12px rgba(244, 220, 156, .35), inset 0 0 0 999px rgba(244, 220, 156, .05);
}
.rz-pin__n {
  position: absolute; left: 0; top: 0; transform: translate(-45%, -50%);
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--gold-hi); color: #1a1208; font: 700 14px/1 var(--f-ui);
  box-shadow: 0 0 0 2px #1a1208, 0 2px 6px rgba(0, 0, 0, .7);
}
.rz-pin__t {
  /* над рамкой, а не на ней: иначе подпись закрывала название сервера в строке */
  position: absolute; left: 18px; top: -3px; transform: translateY(-100%);
  padding: 3px 9px 4px; border-radius: 11px; background: #1a1208; color: var(--gold-hi);
  box-shadow: inset 0 0 0 1px var(--gold); font: 600 12.5px/1.1 var(--f-ui); white-space: nowrap;
}
/* подпись внутри рамки — где над рамкой она закрыла бы соседнюю строку (зона «Бесплатно» сразу под VIP) */
.rz-pin--in .rz-pin__t { top: 4px; transform: none; }
.rz-pin:hover, .rz-pin:focus-visible, .rz-pin.is-hover, .rz-pin.is-hl {
  outline: none; border-color: #fff3cf;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 22px rgba(244, 220, 156, .75), inset 0 0 0 999px rgba(244, 220, 156, .14);
}
.rz-pin.is-hl { z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .rz-pin { transition: box-shadow .15s ease-out, border-color .15s ease-out; }
  .rz-pin.is-hl { animation: rz-pin-hl 1s ease-in-out 3; }
}
@keyframes rz-pin-hl { 50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 34px rgba(244, 220, 156, .95), inset 0 0 0 999px rgba(244, 220, 156, .22); } }
/* узкая картинка (телефон): только номера, подписи — в списке под ней */
@container rzmap (max-width: 559.98px) {
  .rz-pin { border-width: 1.5px; border-radius: 3px; }
  .rz-pin__t { display: none; }
  .rz-pin__n { width: 20px; height: 20px; font-size: 12px; }
}

/* список мест: номер, место, занято / всего, «глаз», кнопка. Узко — кнопка второй строкой на всю ширину. */
.rz-places { padding: 16px 16px 14px; }
.rz-places .pg-win-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rz-places__demo { font: 400 12.5px/1.2 var(--f-ui); letter-spacing: 0; color: var(--ash); }
.rz-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; container: rzlist / inline-size; }
.rz-row {
  display: grid; align-items: center; gap: 8px 10px; padding: 8px 8px 8px 10px;
  grid-template-columns: 24px minmax(0, 1fr) auto 38px; grid-template-areas: "n name cnt eye" ". act act act";
  border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, .02); scroll-margin-top: 90px;
}
@container rzlist (min-width: 560px) {
  .rz-row { grid-template-columns: 24px minmax(0, 1fr) auto 38px auto; grid-template-areas: "n name cnt eye act"; }
}
.rz-row:target { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-lo); }
.rz-row__n {
  grid-area: n; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--gold-hi); color: #1a1208; font: 700 13px/1 var(--f-ui);
}
.rz-row__name { grid-area: name; min-width: 0; font: 600 15.5px/1.2 var(--f-ui); color: var(--text); }
.rz-row__name small { display: block; margin-top: 3px; font-weight: 400; font-size: 13px; color: var(--muted); }
/* закреп: чья анимация и в каком формате (владелец 07.11) — второй строкой, мельче */
.rz-row__name .rz-row__fmt { margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--ash); }
.rz-row__cnt {
  grid-area: cnt; min-width: 46px; padding: 6px 8px; border-radius: var(--r); text-align: center;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  font: 600 13.5px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--text);
}
.rz-eye {
  grid-area: eye; width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r); background: transparent; color: var(--muted); cursor: pointer;
}
.rz-eye svg { width: 19px; height: 19px; }
.rz-eye:hover { color: var(--gold-hi); border-color: var(--gold-lo); }
.rz-act {
  grid-area: act; min-height: 38px; padding: 0 14px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  border: 1px solid var(--gold-lo); border-radius: var(--r); background: rgba(196, 164, 104, .09);
  color: var(--gold-hi); font: 600 14px/1 var(--f-ui);
}
.rz-act:hover { border-color: var(--gold); background: rgba(196, 164, 104, .18); }
.rz-row.is-busy .rz-act { border-color: rgba(208, 117, 96, .5); background: rgba(160, 60, 45, .13); color: #f2a593; }

/* пример Премиум-карточки — та же полоса, что на главной (.col — контейнер её @container-запросов) */
.rz-prem { padding: 16px 16px 18px; }
.rz-prem__pv { margin-top: 12px; }
.rz-prem__p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* «VIP или бесплатно» — та же строка двумя видами */
.rz-vs { padding: 16px 16px 18px; }
.rz-vs__cap { margin: 14px 0 8px; font-size: 14px; color: var(--muted); }
.rz-vs__cap b { color: var(--text); font-weight: 600; }

/* бесплатное добавление: слева — шаги и кнопка с кодом, справа — форма */
.rz-free { margin-top: 28px; scroll-margin-top: 16px; }
.rz-free:focus { outline: none; }
.rz-free__win { padding: 20px 22px 22px; }
.rz-free__grid { display: grid; gap: 22px; margin-top: 14px; }
@media (min-width: 900px) { .rz-free__grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; } }
.rz-free__steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; }
.rz-free__steps li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.4; color: var(--text); counter-increment: st; }
.rz-free__steps li::before {
  content: counter(st); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gold-hi); color: #1a1208; font: 700 13px/1 var(--f-ui);
}
/* кнопка 176×62 (владелец 07.11: «побольше раза в 2») — сверху, код под ней во всю ширину: рядом с ней код
   сжимался в полоску */
.rz-btncode { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; margin-top: 16px; }
.rz-btncode__img { display: block; margin-top: 2px; image-rendering: auto; }
.rz-btncode__t {
  min-width: 0; width: 100%; resize: none; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: #0f0c09; color: var(--muted); font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace;
}
.l2-btn.rz-copy { justify-self: start; min-height: 36px; padding: 0 14px; font-size: 14px; }
.rz-free__note { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

.rz-free__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-content: start; }
.rz-f { display: grid; gap: 6px; align-content: start; min-width: 0; }
.rz-f--wide { grid-column: 1 / -1; }
@media (max-width: 559.98px) { .rz-free__form { grid-template-columns: minmax(0, 1fr); } }
.rz-f__l { font: 500 13.5px/1.3 var(--f-ui); color: var(--muted); }
.rz-f__e { margin: 0; min-height: 0; color: #ff9b8a; font-size: 13px; }
.rz-f__e:empty { display: none; }
.rz-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--text); cursor: pointer; }
.rz-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--gold); }
/* ловушка для ботов: вне экрана, не display:none — так её заполняют боты, а не люди и скринридеры */
.rz-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rz-free__err { margin: 0; padding: 10px 14px; border-radius: var(--r); border: 1px solid rgba(208, 117, 96, .5); background: rgba(160, 60, 45, .13); color: #f2b8a9; font-size: 14px; }
.rz-free__ok { margin: 0; padding: 10px 14px; border-radius: var(--r); border: 1px solid rgba(143, 201, 138, .45); background: rgba(143, 201, 138, .08); color: var(--text); font-size: 14.5px; }
.rz-free__ok:focus { outline: none; }
.rz-free__act { display: flex; }

/* окно с Telegram */
.rz-tg {
  width: min(420px, calc(100vw - 32px)); margin: auto; padding: 22px 22px 18px;
  border: 1px solid var(--gold-lo); border-radius: var(--r); color: var(--text);
  background: linear-gradient(180deg, #221a12, #15100b); box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
}
.rz-tg::backdrop { background: rgba(5, 4, 3, .74); }
.rz-tg__place { margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.rz-tg__place b { color: var(--text); font-weight: 600; }
.rz-tg__busy { display: block; margin-top: 4px; font-size: 13.5px; color: #f2a593; }
.l2-btn.rz-tg__link { display: flex; width: 100%; justify-content: center; gap: 10px; margin-top: 16px; min-height: 50px; font-size: 18px; }
.rz-tg__hint { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ash); }
.rz-tg form { margin: 14px 0 0; display: flex; justify-content: flex-end; }

/* ───────── FAQ и контакты ───────── */
.faq { display: grid; gap: 20px; padding-top: 6px; }
.faq__head .pg-lead { margin-top: 8px; }
@media (min-width: 1024px) {
  .faq {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-rows: auto auto 1fr;
    grid-template-areas: "head head" "qs contact" "qs rules"; align-items: start; column-gap: 32px;
  }
  .faq__head { grid-area: head; }
  .faq-contact { grid-area: contact; }
  .faq__qs { grid-area: qs; }
  .faq-rules { grid-area: rules; }
}
.faq__qs { display: grid; gap: 20px; min-width: 0; }

.faq-contact { padding: 18px 20px 20px; }
.faq-contact__list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.faq-contact__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.faq-contact__list svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--gold); }
.faq-contact__list b { display: block; font-weight: 500; color: var(--text); }
.faq-contact__v { display: block; font-size: 13.5px; color: var(--ash); }
.faq-contact__p { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.faq-contact__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.faq-contact__btns .l2-btn { min-height: 40px; flex: 1 1 auto; }

.faq-grp { padding: 18px 22px 6px; }
.faq-grp__t { margin-bottom: 4px; }
.faq-q { border-top: 1px solid var(--line); }
.faq-grp__t + .faq-q { border-top: 0; }
.faq-q summary {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 4px; cursor: pointer; list-style: none;
  font: 500 16.5px/1.35 var(--f-ui); color: var(--text);
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::before {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px; border: 1px solid var(--gold-lo); transform: rotate(45deg);
}
.faq-q summary:hover { color: var(--gold-hi); }
.faq-q[open] > summary { color: var(--gold-hi); }
.faq-q[open] > summary::before { background: var(--gold); border-color: var(--gold); }
.faq-q summary:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 0; }
.faq-q__t { min-width: 0; text-wrap: pretty; }
.faq-q__chev { flex: none; width: 14px; height: 14px; margin-left: auto; color: var(--ash); }
.faq-q[open] .faq-q__chev { transform: rotate(180deg); color: var(--gold); }
@media (prefers-reduced-motion: no-preference) { .faq-q__chev { transition: transform .15s ease-out; } }
.faq-q__a { max-width: 74ch; padding: 0 4px 18px 25px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.faq-q__a p { margin: 0 0 10px; text-wrap: pretty; }
.faq-q__a p:last-child { margin-bottom: 0; }
.faq-q__a a { color: var(--gold-hi); text-underline-offset: 3px; }
.faq-q__a a:hover { color: #fff3d6; }
.faq-rates { display: grid; gap: 8px; margin: 4px 0 12px; }
.faq-rates div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.faq-rates dt { font: 600 14.5px/1.3 var(--f-ui); color: var(--text); font-variant-numeric: tabular-nums; }
.faq-rates dd { margin: 0; }
.faq-rates--paid div { align-items: center; }

.faq-rules { padding: 18px 20px 20px; }
.faq-rules__list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: rule; }
.faq-rules__list li { position: relative; padding-left: 30px; font-size: 14px; line-height: 1.45; color: var(--muted); counter-increment: rule; }
.faq-rules__list li::before {
  content: counter(rule); position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center;
  font: 600 12px/1 var(--f-ui); color: var(--gold-hi); border: 1px solid var(--gold-lo); border-radius: 2px;
}

@media (max-width: 599.98px) {
  .faq-contact { padding: 16px 16px 18px; }
  .faq-contact__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .faq-contact__list li { font-size: 14px; }
  .faq-contact__list b { font-size: 13.5px; }
  .faq-grp { padding: 16px 14px 4px; }
  .faq-q summary { font-size: 16px; padding-inline: 0; }
  .faq-q__a { padding-left: 21px; padding-right: 0; font-size: 14.5px; }
  .faq-rates div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ───────── Телефон: общее ───────── */
@media (max-width: 767.98px) {
  .h-page { font-size: 26px; }
  .pg-lead { font-size: 15px; }
  .pg-orn { margin-block: 28px 22px; }
  .site-footer { margin-top: 40px; }
}