/* L2BOH.NET — ядро дизайн-системы (общее для всех страниц).
   Материал: тёмное «стекло» и бронза экрана входа Lineage 2 (см. l2-ui.css), золото и серебро логотипа с баннера.
   Шрифты: Cinzel — только логотип; Cormorant SC — заголовки, меню, названия серверов, вкладки;
   Fira Sans — данные (рейт, хроника, время, счётчики) и тексты.
   Контраст на --bg: text 15.4, muted 7.8, ash 5.7, gold 9.8, ember 9.1, live 10.1 (WCAG 2.x).
   Владелец страницы может дописывать свои стили только в css/home.css или css/pages.css. */

:root {
  /* фон и поверхности */
  --bg: #100d0a;
  --bg-2: #15110d;
  --plate-top: #241e17;
  --plate-bot: #1a1510;
  --plate-hover-top: #2c241b;
  --plate-hover-bot: #201a13;
  --plate-edge: #5a4a33;
  --plate-edge-hi: rgba(226, 205, 150, .16);
  --line: #2e251d;
  --line-strong: #4a3a28;
  /* текст */
  --text: #ece4d8;
  --muted: #b0a28e;
  --ash: #958a7a;
  --silver: #dfe3e8;
  /* смысловые цвета */
  --gold: #d9b45a;
  --gold-hi: #f4dc9c;
  --gold-lo: #8a6a2a;
  --ember: #f0a04b;   /* «раскалённое» время: сегодня */
  --live: #8fc98a;    /* сервер уже открыт */
  --prem-tint: rgba(217, 180, 90, .08);
  /* шрифты */
  --f-mark: "Cinzel", "Times New Roman", serif;
  --f-disp: "Cormorant SC", "Cormorant Garamond", "Times New Roman", serif;
  --f-ui: "Fira Sans", "Segoe UI", Tahoma, system-ui, sans-serif;
  /* размеры */
  --container: 1360px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --r: 3px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  background: var(--bg); color: var(--text);
  font: 400 15px/1.5 var(--f-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.container {
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-r);
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- Логотип ---------- */
.logo {
  font: 700 19px/1 var(--f-mark); letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  color: var(--silver);
}
.logo b { font-weight: 700; color: var(--gold); }

/* ---------- Шапка ----------
   .site-header — тёмная полоса 56 px. На главной добавляется .site-header--over: она лежит поверх
   верхней кромки баннера полупрозрачной, логотип в ней скрыт на ≥ 768 px (знак уже есть на баннере). */
.site-header { position: relative; z-index: 20; background: rgba(16, 13, 10, .94); border-bottom: 1px solid var(--line-strong); }
.site-header .container { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.site-header nav { margin-left: auto; }
.site-header nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-header nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  font: 700 17px/1 var(--f-disp); letter-spacing: .03em; color: var(--text); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-header nav a:hover { color: var(--gold-hi); }
/* Кнопка «Разместить сервер» в шапке (владелец 07.11, как «Добавить сервер» у l2daily) — от 900 px; на телефоне
   в меню и так есть «Размещение». */
.l2-btn.hdr-cta { display: none; }
@media (min-width: 900px) { .l2-btn.hdr-cta { display: inline-flex; min-height: 38px; padding: 0 16px; font-size: 15px; } }
/* Поверх баннера пункты меню без подложки проседали до 2,95:1 (QA-SITE) — даём тень, как у H1. */
.site-header--over nav a { text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 3px #000, 0 0 8px rgba(0, 0, 0, .6); }
.site-header nav a[aria-current="page"] { color: var(--gold-hi); border-bottom-color: var(--gold); }
@media (min-width: 768px) {
  .site-header--over {
    position: absolute; inset: 0 0 auto; background: linear-gradient(180deg, rgba(10, 8, 6, .82), rgba(10, 8, 6, .45) 70%, transparent);
    border-bottom: 0;
  }
  .site-header--over .logo { visibility: hidden; }
}

/* ---------- Надписи платных мест «оживают» ----------
   Владелец 07.11: «к каждой надписи — анимации, чтобы были заметнее». Заголовки «Закреплено», «VIP», «Бонус-старт»
   переливаются золотом (.shine); блик по метке VIP и пульс «Сегодня» — в общем блоке полосы (home.css / pages.css).
   При prefers-reduced-motion — неподвижное золото. */
.shine {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 42%, #fff4d2 50%, var(--gold) 58%, var(--gold) 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .shine { animation: l2-shine 4.5s linear infinite; }
}
@keyframes l2-shine { from { background-position: 100% 0; } to { background-position: -160% 0; } }

/* ---------- Баннер ---------- */
.banner { position: relative; overflow: hidden; background: #0b0907; }
.banner img { width: 100%; height: var(--banner-h, 232px); object-fit: cover; object-position: 30% 46%; }
.banner::after { /* растворяем низ в фон страницы */
  content: ""; position: absolute; inset: auto 0 0; height: 36px; background: linear-gradient(transparent, var(--bg));
}
.banner--compact { --banner-h: 120px; }
@media (max-width: 767px) {
  .banner { --banner-h: 112px; }
  .banner img { object-position: 0% 46%; transform-origin: 0 50%; }
  .banner--compact { --banner-h: 72px; }
}

/* ---------- Заголовки ---------- */
.h-page { font: 700 28px/1.15 var(--f-disp); letter-spacing: .02em; margin: 0; color: var(--text); text-wrap: balance; }
.h-section { font: 700 24px/1.15 var(--f-disp); letter-spacing: .02em; margin: 0; text-wrap: balance; }
.metal { /* золотой отлив, как у «BOH» на баннере; запасной цвет — золото */
  color: var(--gold);
  background: linear-gradient(180deg, #fff6dd 0%, #ecd08a 42%, #b8892f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ornament { /* ромб из орнамента баннера между линиями */
  display: flex; align-items: center; gap: 10px; color: var(--gold);
}
.ornament::before, .ornament::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent); }
.ornament svg { width: 14px; height: 14px; flex: none; }

/* ---------- Плашка-кнопка (сервер, тариф) ----------
   Главное требование владельца: каждый сервер — отдельная КНОПКА, десять серверов не сливаются в одно.
   Материал кнопки экрана входа Lineage 2: «стекло», которое делится посередине (светлая верхняя половина,
   тёмная нижняя), светлая фаска сверху, бронзовый внутренний ободок, тёмный внешний контур, тень под кнопкой.
   Между плашками всегда зазор не меньше 8 px (задаёт сетка страницы), фон страницы темнее плашки.
   Наведение — кнопка светлеет, нажатие — вдавливается, как .l2-btn. */
/* Решение критика (07.11): «стекло» с разломом посередине оставлено только кнопкам управления (.l2-btn),
   иначе не видно, где фильтры, а где серверы. Плашка сервера — та же кнопка (рамка, фаска, тень, зазор,
   нажатие), но с ровным мягким градиентом без разлома. */
.plate {
  position: relative; display: block; color: inherit; text-decoration: none;
  background: linear-gradient(180deg, #2a231a 0%, #1f1913 100%);
  border: 1px solid #0b0806; border-radius: var(--r);
  box-shadow:
    inset 0 1px 0 rgba(232, 210, 158, .26),   /* фаска сверху */
    inset 0 0 0 1px rgba(150, 126, 84, .42),  /* бронзовый ободок */
    0 2px 4px rgba(0, 0, 0, .55);             /* кнопка лежит над фоном */
}
a.plate:hover {
  background: linear-gradient(180deg, #342b20 0%, #261f17 100%);
  box-shadow: inset 0 1px 0 rgba(240, 220, 170, .34), inset 0 0 0 1px rgba(196, 164, 104, .62), 0 3px 8px rgba(0, 0, 0, .6);
}
a.plate:active {
  background: linear-gradient(180deg, #17120d 0%, #221c15 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(217, 180, 90, .55);
}
a.plate:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
/* VIP — бронзово-золотой ободок и тон на 1 ступень теплее; чистое золото оставлено Премиуму и состояниям
   («сегодня», выбранное), чтобы золото не размывалось (судья, этап 4). */
/* Владелец 07.11: у VIP — «подсвеченная рамка»: ободок светлее и тёплое свечение вокруг строки; так же — у всех
   оплаченных строк («Бонус-старт», место в подборке: .plate--paid). */
.plate--vip, .plate--paid {
  background: linear-gradient(180deg, #2f2619 0%, #221b12 100%);
  /* тёмная кромка 3 px между рамкой и свечением, свечение короче — соседние карточки не сливаются (владелец 07.11) */
  box-shadow: inset 0 1px 0 rgba(244, 220, 156, .32), inset 0 0 0 1px #c9a24a, 0 0 0 1px rgba(240, 180, 60, .3), 0 0 0 3px rgba(12, 9, 6, .92), 0 0 8px 3px rgba(240, 180, 60, .16), 0 2px 4px rgba(0, 0, 0, .55);
}
a.plate--vip:hover, a.plate--paid:hover { box-shadow: inset 0 1px 0 rgba(250, 230, 180, .4), inset 0 0 0 1px #e0bb62, 0 0 0 1px rgba(240, 180, 60, .45), 0 0 0 3px rgba(12, 9, 6, .92), 0 0 12px 4px rgba(240, 180, 60, .28), 0 3px 8px rgba(0, 0, 0, .6); }
.plate--prem {
  background: linear-gradient(180deg, #33281a 0%, #241c12 100%);
  box-shadow: inset 0 3px 0 var(--gold), inset 0 0 0 1px var(--gold), 0 2px 4px rgba(0, 0, 0, .55);
}
a.plate--prem:hover { box-shadow: inset 0 3px 0 var(--gold-hi), inset 0 0 0 1px var(--gold-hi), 0 3px 8px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: no-preference) {
  a.plate { transition: box-shadow .12s, transform .12s; }
  a.plate:hover { transform: translateY(-1px); }
  a.plate:active { transform: translateY(0); }
}

/* ---------- Метки платного размещения (текстом, без свечения) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px;
  font: 600 12px/1 var(--f-ui); letter-spacing: .02em; white-space: nowrap; border-radius: 2px;
  vertical-align: 2px;
}
.badge--vip { color: var(--gold-hi); border: 1px solid var(--gold-lo); }
.badge--prem { color: #1f1504; background: linear-gradient(180deg, #f6dd98, #d6ad4f); border: 1px solid #6b4f16; }

/* ---------- Подвал ---------- */
.site-footer { margin-top: 56px; border-top: 1px solid var(--line-strong); background: var(--bg-2); }
.site-footer .container { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 24px; padding-block: 28px 32px; }
.site-footer h2 { font: 700 17px/1.2 var(--f-disp); letter-spacing: .03em; margin: 0 0 8px; color: var(--text); }
.site-footer p, .site-footer li { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; color: var(--ash); }
@media (max-width: 767px) { .site-footer .container { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Мобильная шапка ---------- */
/* На телефоне «Главная» скрыта: её роль играет логотип (UX И2); меню в одну строку. */
@media (max-width: 767px) {
  .site-header .container { gap: 8px; min-height: 52px; }
  .site-header nav li:first-child { display: none; }
  .site-header nav a { font-size: 15px; padding: 0 8px; white-space: nowrap; }
  .logo { font-size: 17px; }
}
@media (max-width: 380px) {
  .site-header nav ul { gap: 0; }
  .site-header nav a { padding: 0 6px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ═════ ПРЕМИУМ-КАРТОЧКА С ЗАТОЧКОЙ (идеи владельца, 07.11) ═════
   В центре — фрагмент видео владельца из игры: лук в свечении на брусчатке. В покое крутится секунда синего
   переливания; при наведении или фокусе (класс .is-go ставит common.js) проигрывается заточка: по низу карточки
   за 1 с слева направо идёт свиток заточки (иконка владельца), и когда он доходит до края, лук вспыхивает красным.
   Слева — эмблема сервера (или название) с постоянной «вспышкой-отзвуком» и дата открытия; справа — хроники
   и рейт. Телефон: лук сверху, данные под ним; заточка сама по кругу. Reduced motion — неподвижные кадры.
   Строка-сетка обычных серверов здесь не используется: полное описание — в aria-label ссылки. */
.plate.strip.strip--ench {
  display: block; min-height: 120px; padding: 0; overflow: hidden; isolation: isolate; background: #1a140d;
}
.ench { position: absolute; inset: 0 10%; z-index: -1; pointer-events: none; overflow: hidden; }
/* видео целиком (contain): лук всегда помещается; края кадра того же цвета, что карточка */
.ench__v { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 50%; }
.ench__v--go { opacity: 0; }
.strip--ench.is-go .ench__v--go, .ench.is-touch .ench__v--go { opacity: 1; }
.strip--ench.is-go .ench__v--idle { opacity: 0; }

/* данные по бокам от лука */
.pc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 12px; }
.pc::before { /* затемнение под боковыми колонками, центр с луком открыт */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14, 11, 8, .92) 0%, rgba(14, 11, 8, .55) 20%, rgba(14, 11, 8, 0) 32%, rgba(14, 11, 8, 0) 68%, rgba(14, 11, 8, .55) 80%, rgba(14, 11, 8, .92) 100%);
}
.pc__l, .pc__r { display: flex; flex-direction: column; gap: 3px; width: 27%; min-width: 0; }
.pc__l { align-items: flex-start; text-align: left; }
.pc__r { align-items: flex-end; text-align: right; }
.pc__logo { position: relative; display: block; width: 100%; max-width: 126px; height: 44px; margin-bottom: 2px; }
.pc__logo-img, .pc__logo-echo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: left center; }
.pc__logo-img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)); }
.pc__logo-echo { opacity: 0; transform-origin: 30% 50%; pointer-events: none; }
.pc__name {
  font: 700 18px/1.1 var(--f-disp); color: #fff6e6; text-shadow: 0 1px 2px #000;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere;
}
.pc__date { font: 700 17px/1.1 var(--f-disp); color: var(--gold-hi); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.pc__date.is-today { color: var(--ember); }
.pc__time { font: 500 12.5px/1.2 var(--f-ui); color: var(--muted); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.pc__chr {
  font: 500 13.5px/1.2 var(--f-ui); color: #e3d8c3; text-shadow: 0 1px 2px #000;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.pc__rate { font: 700 26px/1 var(--f-ui); color: #fff6e6; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; }
.pc__feat { font: 400 12.5px/1.2 var(--f-ui); color: var(--ash); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.strip--ench:hover .pc__name { color: #fff; }

/* золотая рамка Премиума поверх видео */
.ench-frame {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 3px 0 var(--gold), inset 0 0 0 1px var(--gold);
}
.strip--ench:hover .ench-frame { box-shadow: inset 0 3px 0 var(--gold-hi), inset 0 0 0 1px var(--gold-hi); }

/* дорожка заточки: свиток идёт по низу карточки слева направо */
.ench-run { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; overflow: hidden; pointer-events: none; }
.ench-run__trail {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px; transform: translateX(-110%);
  background: linear-gradient(90deg, rgba(217, 180, 90, 0) 0%, rgba(217, 180, 90, .55) 55%, #f4dc9c 92%, #fff 100%) left bottom / 100% 2px no-repeat;
}
.ench-run__trail::after { /* свиток заточки (иконка владельца) на конце следа */
  content: ""; position: absolute; right: -11px; bottom: 1px; width: 24px; height: 24px;
  background: url("../assets/enchant-scroll.png") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(244, 220, 156, .9)) drop-shadow(0 1px 1px rgba(0, 0, 0, .8));
}
@media (prefers-reduced-motion: no-preference) {
  .ench-run__trail { transition: transform .2s ease-in; }
  .strip--ench.is-go .ench-run__trail { transform: translateX(-11px); transition: transform 1s linear; }
  .strip--ench.is-go .ench-run__trail::after { animation: ench-scroll-burn .3s ease-out 1s both; }
  .ench.is-touch ~ .ench-run .ench-run__trail { animation: ench-run-touch 7.274s linear infinite; }
  /* эмблема: копия расходится от неё вспышкой-отзвуком (увеличение 1,3 и затухание); при наведении — чаще */
  .pc__logo-echo { animation: pc-echo 2.6s ease-out infinite; }
  .strip--ench:hover .pc__logo-echo, .strip--ench:focus-visible .pc__logo-echo { animation: pc-echo-fast .7s ease-out infinite; }
}
@keyframes pc-echo { 0% { transform: scale(1); opacity: 0; } 6% { opacity: .35; } 26%, 100% { transform: scale(1.3); opacity: 0; } }
@keyframes pc-echo-fast { 0% { transform: scale(1); opacity: 0; } 20% { opacity: .35; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes ench-scroll-burn { to { opacity: 0; transform: scale(1.5); } }
/* телефон: дорожка идёт вместе с заточкой в видео (клип 7,27 с, вспышка на 1-й секунде) */
@keyframes ench-run-touch { 0% { transform: translateX(-110%); opacity: 1; } 13.75% { transform: translateX(-11px); opacity: 1; } 18%, 100% { transform: translateX(-11px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .strip--ench:hover .ench__v--go, .strip--ench:focus-visible .ench__v--go { opacity: 1; }
  .strip--ench:hover .ench__v--idle, .strip--ench:focus-visible .ench__v--idle { opacity: 0; }
}
/* узкая колонка (телефон): лук сверху на всю ширину, под ним — эмблема с датой и хроники с рейтом */
@container col (max-width: 419.98px) {
  .plate.strip.strip--ench { min-height: 0; }
  .strip--ench .ench { position: relative; inset: auto; display: block; height: 84px; z-index: 0; }
  .strip--ench .pc { position: relative; inset: auto; padding: 4px 12px 14px; align-items: flex-end; }
  .strip--ench .pc::before { display: none; }
  .pc__l, .pc__r { width: auto; max-width: 58%; }
  .pc__logo { height: 38px; max-width: 120px; }
  .pc__rate { font-size: 22px; }
}

/* Пометка «демонстрационные данные» прячется атрибутом hidden, когда серверы пришли из базы (common.js).
   Свои display у обёрток (.rail__note span { display: block }) перебивают hidden — поэтому явно. */
[data-demo-note][hidden] { display: none !important; }

/* ═════ БЛОК РЕКЛАМЫ 240×400 — главная (правая колонка / после «Скоро») и превью в админке (admin.html) ═════ */
.ad { width: 240px; margin-inline: auto; }
.ad__lbl { margin: 0 0 6px; font-size: 12px; line-height: 1; color: var(--ash); }
.ad__slot { display: block; width: 240px; height: 400px; overflow: hidden; border-radius: var(--r); box-shadow: 0 2px 6px rgba(0, 0, 0, .55); }
.ad__slot svg { display: block; }
.ad .ad-disp { font-family: var(--f-disp); }
.ad .ad-ui { font-family: var(--f-ui); }
.ad__erid { margin: 6px 0 0; font-size: 12px; line-height: 1.35; color: var(--ash); overflow-wrap: anywhere; }
/* баннер из админки: картинка, GIF/WebP-анимация или видео ровно 240×400 (common.js bannerHTML) */
.ad__media { display: block; width: 240px; height: 400px; object-fit: cover; background: #120e0a; }
/* место свободно (с базой, баннера нет) — приглашение разместить, ведёт на «Размещение» */
.ad__slot--free {
  display: grid; place-items: center; text-align: center; text-decoration: none; color: inherit;
  border: 1px dashed var(--line-strong); box-shadow: none;
  background: radial-gradient(120% 70% at 50% 30%, rgba(217, 180, 90, .12), transparent 70%), var(--bg-2);
}
.ad__free { display: grid; justify-items: center; gap: 10px; padding: 18px; }
.ad__free-t { font: 700 24px/1.15 var(--f-disp); color: var(--gold-hi); text-wrap: balance; }
.ad__free-s { font-size: 13px; line-height: 1.4; color: var(--muted); }
.ad__slot--free:hover .ad__free-t, .ad__slot--free:focus-visible .ad__free-t { color: #fff3d0; }

/* ═════ БАННЕР 480×120 — главная, «Скоро откроются» сразу после VIP (home.js AD_MID) и превью в админке ═════
   Владелец 07.11: «между VIP и бесплатными, не большой, по размерам как две кнопки вместе». Тянется по ширине
   колонки в пропорции 4:1: на телефоне ~358×90, на компьютере до 520×130 (две строки VIP — ~116 px). */
.ad-mid { width: 100%; max-width: 520px; margin-inline: auto; }
.ad-mid__slot {
  display: block; aspect-ratio: 4 / 1; overflow: hidden; border-radius: var(--r);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
.ad-mid__media { display: block; width: 100%; height: 100%; object-fit: cover; background: #120e0a; }
.ad-mid__mark { margin: 5px 0 0; font-size: 12px; line-height: 1.35; color: var(--ash); overflow-wrap: anywhere; }
/* место свободно — приглашение разместить, ведёт на «Размещение» (#mesto-banner-mid) */
/* приглашение может стать выше 4:1 (320 px, крупный системный шрифт) — текст не обрезается (проверка UI 07.11) */
.ad-mid__slot--free {
  overflow: visible;
  display: grid; place-content: center; justify-items: center; gap: 4px; padding: 8px 14px;
  text-align: center; text-decoration: none; color: inherit;
  border: 1px dashed var(--line-strong); box-shadow: none;
  background: radial-gradient(90% 120% at 50% 0%, rgba(217, 180, 90, .12), transparent 70%), var(--bg-2);
}
.ad-mid__free-t { font: 700 clamp(16px, 5.2vw, 20px)/1.1 var(--f-disp); color: var(--gold-hi); text-wrap: balance; }
.ad-mid__free-s { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.ad-mid__slot--free:hover .ad-mid__free-t, .ad-mid__slot--free:focus-visible .ad-mid__free-t { color: #fff3d0; }