/* Новое оформление (29–30.10.2026, выбрано владельцем по образцу .shots/bg-original): мультяшная картинка
   позади каждой страницы, полупрозрачные плашки разделов, кнопки-«наклейки», кнопки в цветах сервисов,
   ярлычки под мелкими надписями, лента отзывов, герои-подсказчики. Подключается после style.css.
   Картинки нарисованы локально (SDXL-Lightning из Джарвиса) по мотивам фото квестов,
   исходники и промпты — .shots/cartoon/bg (вне git). */

:root {
  --tg: #0088cc;            /* Telegram, «Lochmara» — по находке владельца */
  --tg-dark: #0077b3;
  --ya: #e64a47;            /* Яндекс Карты: красная метка */
  --ya-dark: #cf3a37;
  --gis: #18a51e;           /* 2ГИС: зелёный значка */
  --gis-dark: #14901a;
  --gis-ink: #191919;       /* белый на зелёном 2ГИС читается плохо — надпись чёрная, как «2ГИС» на их логотипе */
}

/* --- Картинка позади страницы (класс has-bg bg-<имя> на <html>: главная и четыре квеста) ---
   Картинка стоит на месте и видна целиком, без пелены. Каждый раздел — плотная песочная
   карточка поверх неё, картинку видно по бокам и между карточками (как фон в роликах Джарвиса).
   Первая проба 29.10 — полупрозрачный песок на всю ширину — владельцу не понравилась:
   «прозрачное не очень выглядит, надо, чтобы было видно задний фон» */
:root { --gut: 40px; --gap: 40px; --card-pad: 40px; --card-r: 28px; }   /* внутри карточки на 1440 те же 1280 px, что у сайта сейчас */
@media (max-width: 1199px) { :root { --gut: 24px; --gap: 32px; --card-pad: 36px; --card-r: 24px; } }
@media (max-width: 760px) { :root { --gut: 10px; --gap: 22px; --card-pad: 18px; --card-r: 20px; } }
html.has-bg body { background: transparent; }
html.has-bg body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--bg) center / cover no-repeat;
}
/* у каждой страницы своя картинка, все в одном мультяшном стиле: главная — холл с четырьмя
   дверями, квесты — по мотивам своих фото. Телефон стоймя берёт вертикальную (-p) */
html.bg-home { --bg: url("../img/bg/home.jpg"); }
html.bg-atom { --bg: url("../img/bg/atom-2.jpg"); }
html.bg-1408 { --bg: url("../img/bg/1408.jpg"); }
html.bg-heist { --bg: url("../img/bg/heist.jpg"); }
html.bg-maya { --bg: url("../img/bg/maya.jpg"); }
@media (max-aspect-ratio: 1 / 1) {
  html.bg-home { --bg: url("../img/bg/home-p.jpg"); }
  html.bg-atom { --bg: url("../img/bg/atom-2-p.jpg"); }
  html.bg-1408 { --bg: url("../img/bg/1408-p.jpg"); }
  html.bg-heist { --bg: url("../img/bg/heist-p.jpg"); }
  html.bg-maya { --bg: url("../img/bg/maya-p.jpg"); }
}

/* Подвал — зелёным печати, на всех страницах (просьба владельца 29.10). Бледные подписи
   чуть светлее: прежний цвет на зелёном давал контраст ниже нормы */
.site-footer { background: var(--accent); --on-dark-soft: #D2C6AE; }
.footer-rule { background: rgba(var(--on-dark-rgb), .22); }
html.has-bg main > section:not(.duo-section) {
  width: calc(100% - 2 * var(--gut)); max-width: 1400px; margin: var(--gap) auto;
  padding: 72px 0; border-radius: var(--card-r);
  background: var(--sand);
  box-shadow: 0 26px 50px -26px rgba(20, 10, 0, .6);
}
html.has-bg main > section.band { background: var(--band); }
/* внутри карточки поля свои, а не поля страницы */
html.has-bg main > section > .wrap { max-width: none; padding-left: var(--card-pad); padding-right: var(--card-pad); }   /* только бока: сверху у афиш свой отступ */
/* первый экран — тоже карточка, только поля сверху поменьше */
html.has-bg main > .hero, html.has-bg main > .q-hero { padding: 48px 0 44px; }
/* «Компанией» и «Ночью» — уже карточки сами по себе: только выравниваем по ширине остальных */
html.has-bg main > .duo-section { padding: 0; margin: var(--gap) auto; }
html.has-bg main > .duo-section > .wrap { width: calc(100% - 2 * var(--gut)); max-width: 1400px; padding: 0; }
html.has-bg .panel { box-shadow: 0 26px 50px -26px rgba(20, 10, 0, .6); }
@media (max-width: 760px) {
  html.has-bg main > section:not(.duo-section) { padding: 40px 0; }
  html.has-bg main > .hero, html.has-bg main > .q-hero { padding: 24px 0 28px; }
}

/* --- Кнопки в цветах сервисов --- */
/* Всё, что ведёт в бота, — синим Telegram: шапка, первый экран, бронь, подвал, нижняя кнопка на телефоне */
a.btn[href*="t.me/"], a.text-link[href*="t.me/"] {
  background: var(--tg); color: #fff;
}
a.btn[href*="t.me/"]:hover, a.text-link[href*="t.me/"]:hover {
  background: var(--tg-dark); color: #fff;
}

/* Яндекс Карты и 2ГИС — их цвет и значок в белом квадратике слева. Значки нарисованы
   здесь же по логотипам (без скачанных картинок) */
a.btn[href*="yandex.ru/maps"] { background: var(--ya); color: #fff; }
a.btn[href*="yandex.ru/maps"]:hover { background: var(--ya-dark); color: #fff; }
a.btn[href*="2gis.ru"] { background: var(--gis); color: var(--gis-ink); }
a.btn[href*="2gis.ru"]:hover { background: var(--gis-dark); color: var(--gis-ink); }
a.btn[href*="yandex.ru/maps"]::before, a.btn[href*="2gis.ru"]::before {
  content: ""; flex: none; width: 26px; height: 26px; margin-left: -6px;
  border-radius: 7px; background: #fff center / 19px 19px no-repeat;
}
a.btn[href*="yandex.ru/maps"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.9 13.6 10.5 23.6 10 16.2z' fill='%23c82e2a'/%3E%3Cpath fill='%23e64a47' fill-rule='evenodd' d='M12 1.2a7.7 7.7 0 1 0 0 15.4 7.7 7.7 0 1 0 0-15.4zm0 4.5a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 1 1 0-6.4z'/%3E%3C/svg%3E");
}
a.btn[href*="2gis.ru"]::before {
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3CclipPath id='c'%3E%3Crect width='24' height='24' rx='5.5'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='24' height='24' fill='%2318a51e'/%3E%3Cpath d='M0 0h24v7.4L0 4z' fill='%23f7b318'/%3E%3Cpath d='M0 21.4 24 18v6H0z' fill='%2380d014'/%3E%3Cpath d='M0 4 24 7.4M0 21.4 24 18' stroke='%23fff' stroke-width='1'/%3E%3Cg fill='%23016ff2' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.6' r='4.6'/%3E%3Cpath d='M10.8 13.6c.1 2.5-.6 4.4-2.1 5.9h6.6c-1.5-1.5-2.2-3.4-2.1-5.9z'/%3E%3C/g%3E%3Cg fill='%23016ff2'%3E%3Ccircle cx='12' cy='9.6' r='4.6'/%3E%3Cpath d='M10.8 13.6c.1 2.5-.6 4.4-2.1 5.9h6.6c-1.5-1.5-2.2-3.4-2.1-5.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* --- «Наклейки» (просьба владельца 29.10 по скриншотам мультяшной пробы) ---
   Кнопки — округлые «от руки», чёрная обводка и тень без размытия; под мышкой приподнимаются
   и чуть наклоняются, при нажатии «вдавливаются». Афиши квестов — чёрная обводка и тень
   цветом квеста, под мышкой тоже приподнимаются */
:root {
  --stroke: #000;
  --sticker: 3px 4px 0 var(--stroke);
  --hand: 26px 30px 24px 32px / 30px 24px 32px 26px;   /* углы чуть разные, как обведено фломастером */
  --oat: #e9dfd2;                                      /* светлые кнопки — как «Выбрать квест» на скриншоте */
}
.btn, .text-link, .sticky-call, .icon-btn {
  border: 2px solid var(--stroke);
  border-radius: var(--hand);
  box-shadow: var(--sticker);
  transition: transform .14s cubic-bezier(.3, 1.6, .5, 1), box-shadow .14s, background-color .15s, color .15s;
}
.btn-outline, .text-link { background: var(--oat); color: #202020; }
.btn-outline:hover, .text-link:hover { background: #fff; color: #202020; border-color: var(--stroke); }
.panel-dark .text-link:hover { border-color: var(--stroke); }
/* маленькие квадратные кнопки-трубки: с большими «рукописными» углами превращались в кляксу */
.icon-btn, .sticky-call { background: var(--oat); border-radius: 14px 18px 13px 17px / 17px 13px 18px 14px; }
.icon-btn { box-shadow: 3px 3px 0 var(--stroke); }
@media (hover: hover) {
  .btn:hover, .btn-accent:hover, .btn-light:hover, .btn-outline:hover, .text-link:hover {
    transform: translate(-2px, -3px) rotate(-1.2deg);
    box-shadow: 5px 7px 0 var(--stroke);
  }
}
.btn:active, .text-link:active, .sticky-call:active, .icon-btn:active {
  transform: translate(3px, 4px) rotate(0deg);
  box-shadow: 0 0 0 var(--stroke);
  transition-duration: .05s;
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .text-link:hover { transform: none; }
}

.poster {
  border: 2px solid var(--stroke);
  border-radius: 28px;
  box-shadow: 8px 9px 0 var(--c);
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .poster:hover { transform: translate(-3px, -4px) rotate(-.6deg); box-shadow: 12px 14px 0 var(--c); }
}
.poster-badge { border: 2px solid var(--stroke); border-radius: 999px; }
@media (max-width: 760px) { .poster { border-radius: 22px; box-shadow: 6px 7px 0 var(--c); } }

/* --- Плашки разделов полупрозрачные (просьба владельца 29.10: «хочется подглядеть», ~50%).
   Прозрачна только сама плашка: карточки, окна чата, афиши и кнопки внутри — со своим
   плотным фоном. Под плашкой картинка слегка размыта (матовое стекло) — иначе мелкий текст
   прямо на плашке спорил бы с рисунком */
html.has-bg main > section:not(.duo-section) {
  background: rgba(var(--sand-rgb), .5);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
html.has-bg main > section.band { background: rgba(230, 216, 189, .5); }
/* на просвечивающей плашке обычный текст бледнел — прямо на плашке он чуть темнее.
   Внутри плотных карточек цвета прежние */
html.has-bg main > section { --body: #2f261d; --muted: #3a2f25; }   /* темнее ещё на шаг — с ярлычками (30.10) */
html.has-bg main :is(.pick-card, .chat, .info, .occasion, .feature, .slot, .review, .price-panel, .panel, .route-icon) {
  --body: #4A3D2F; --muted: #6A5A48;
}

/* «Мир Квестов» — третья площадка отзывов (просьба владельца 29.10): их фиолетовый (#6D4FD5, цвет
   их сайта) и значок из их логотипа. На главной — страница всей компании (адрес у них старый,
   quest-panika-kazan, дал владелец 29.10); на странице квеста — к отзывам этого квеста */
:root { --mk: #6D4FD5; --mk-dark: #5a3ec0; }
a.btn[href*="mir-kvestov.ru"] { background: var(--mk); color: #fff; }
a.btn[href*="mir-kvestov.ru"]:hover { background: var(--mk-dark); color: #fff; }
a.btn[href*="mir-kvestov.ru"]::before {
  content: ""; flex: none; width: 26px; height: 26px; margin-left: -6px;
  border-radius: 7px; background: #fff center / 20px 18px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 19.5 34 29.5'%3E%3Cpath d='M10.8633 22.9561L9.40947 20.4517H23.921L31.9179 34.2237L26.8369 42.9916H23.9313L29.0307 34.2237L22.4707 22.9561H10.8633Z' fill='%236D4FD5'/%3E%3Cpath d='M25.3736 45.4956L23.9296 48H7.94775L-0.0625 34.2234L7.2226 21.6955L8.6729 24.1917L2.82468 34.2234L9.39806 45.4956H25.3736Z' fill='%236D4FD5'/%3E%3Cpath d='M19.5587 25.4638H10.8481L6.48373 32.9725H9.3865L12.2984 27.96H18.1198L19.5587 25.4638Z' fill='%236D4FD5'/%3E%3Cpath d='M19.5587 42.9842H10.8481L6.48373 35.4755H9.3865L12.2984 40.488H18.1198L19.5587 42.9842Z' fill='%236D4FD5'/%3E%3Cpath d='M21.7364 41.748L26.0917 34.2292L21.7497 26.7077L20.2983 29.2133L23.1976 34.233L20.287 39.2578L21.7364 41.748Z' fill='%236D4FD5'/%3E%3C/svg%3E");
}

/* --- Лента свежих отзывов со стрелками (просьба владельца 29.10): видно три, всего шесть.
   Отзывы раз в месяц вписывает tools/reviews_update.py; листается и пальцем, и стрелками --- */
.review-carousel { position: relative; flex: 1; width: 100%; min-width: 0; }
.review-carousel .review-list {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - 32px) / 3); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; margin: 0; padding: 0;
}
.review-carousel .review-list::-webkit-scrollbar { display: none; }
.review-carousel .review { scroll-snap-align: start; }
.review-arrow {
  position: absolute; top: 50%; z-index: 2; translate: 0 -50%;
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; cursor: pointer;
  border: 2px solid var(--stroke); border-radius: 50%; background: var(--oat); color: #202020;
  box-shadow: var(--sticker);
  transition: transform .14s cubic-bezier(.3, 1.6, .5, 1), box-shadow .14s, opacity .2s, background-color .15s;
}
.review-arrow .icon { width: 22px; height: 22px; }
.review-arrow.prev { left: -26px; }
.review-arrow.prev .icon { transform: scaleX(-1); }
.review-arrow.next { right: -26px; }
/* приподнимается только под мышкой: на телефоне после касания стрелка «залипала» белой и приподнятой
   (то же владелец просил убрать у кнопок 21.10); при «уменьшить движение» — не прыгает (проверка 30.10) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .review-arrow:hover { background: #fff; transform: translate(-2px, -3px); box-shadow: 5px 7px 0 var(--stroke); }
}
@media (prefers-reduced-motion: no-preference) {
  .review-arrow:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--stroke); }
}
.review-arrow:disabled { opacity: 0; pointer-events: none; }
/* без скрипта стрелки не работают — их не видно, лента листается пальцем и колёсиком; js/reviews.js ставит is-ready */
.review-carousel:not(.is-ready) .review-arrow { display: none; }
/* откуда отзыв и что он подтверждён — мелко внизу карточки */
.review-who .review-src { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13px; color: #2f6b45; }
.review-who .review-src .icon { width: 14px; height: 14px; stroke-width: 2.6; }
/* Имя и дата — сразу под текстом, а подпись площадки — внизу карточки: у коротких отзывов между текстом
   и именем стояла дыра в 90–200 px, а имена в одном ряду оказывались на разной высоте (проверка 30.10) */
.review-carousel .review-who { margin-top: 0; flex: 1; }
.review-carousel .review-who .review-src { margin-top: auto; padding-top: 6px; }
@media (max-width: 1199px) {
  .review-carousel .review-list { grid-auto-columns: 300px; margin-right: calc(-1 * var(--card-pad)); padding-right: var(--card-pad); }
  /* на планшете и телефоне стрелки под лентой: сбоку стрелка ложилась на текст третьей карточки (проверка 30.10) */
  .review-carousel.is-ready { padding-bottom: 64px; }
  .review-arrow { width: 44px; height: 44px; top: auto; bottom: 0; translate: none; }
  /* слева: справа внизу экрана висит круглая кнопка «наверх» и закрывала стрелку */
  .review-arrow.prev { left: 0; }
  .review-arrow.next { left: 60px; right: auto; }
}
@media (max-width: 760px) {
  .review-carousel .review-list { grid-auto-columns: 82%; }
}
@media (prefers-reduced-motion: reduce) { .review-carousel .review-list { scroll-behavior: auto; } }

/* --- Отзывы на странице квеста (29.10): как на главной — сверху заголовок, оценка и кнопки
   площадок, под ними лента из шести отзывов этого квеста, видно три --- */
#otzyv .split { flex-direction: column; align-items: stretch; gap: 32px; }
#otzyv .reviews-intro { width: 100%; }
@media (min-width: 1200px) {
  #otzyv .reviews-intro {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "eb rt bt" "h2 rt bt"; column-gap: 48px; row-gap: 8px; align-items: end;
  }
  #otzyv .reviews-intro .eyebrow { grid-area: eb; margin-bottom: 6px; }
  #otzyv .reviews-intro h2 { grid-area: h2; }
  #otzyv .rating { grid-area: rt; margin-top: 0; align-self: center; }
  #otzyv .stack-buttons { grid-area: bt; margin-top: 0; }
}

/* --- Герои-подсказчики из мультиков (js/peek.js, собирает tools/build_peek.py) ---
   Выглядывают из-за края экрана у важных мест; при прокрутке и вниз, и вверх */
.peek-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.peek-layer { position: fixed; inset: 0; z-index: 38; overflow: hidden; pointer-events: none; }
.peek { position: absolute; inset: 0; }
.peek-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.peek-svg .who { pointer-events: visiblePainted; cursor: pointer; }
.peek-say {
  position: absolute; left: 0; top: 0; max-width: 230px;
  padding: 9px 14px 10px;
  background: #fff; color: #202020;
  border: 2px solid var(--stroke); border-radius: 18px 22px 18px 20px;
  box-shadow: var(--sticker);
  font: 600 15px/1.28 var(--text); text-wrap: balance;
  opacity: 0; scale: .5; transition: opacity .18s, scale .32s cubic-bezier(.3, 1.7, .5, 1);
}
.peek-left .peek-say { transform-origin: 0 50%; }
.peek-right .peek-say { transform-origin: 100% 50%; }
.peek-say.on { opacity: 1; scale: 1; pointer-events: auto; cursor: pointer; }   /* нажали — герой прячется */
@media (max-width: 760px) { .peek-say { max-width: 170px; font-size: 13px; padding: 7px 11px 8px; border-radius: 14px 17px 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .peek-say { transition: opacity .2s; scale: 1; } }

/* --- Ярлычки под мелкими надписями (выбор владельца 30.10 — вариант А из двух показанных) ---
   Проверка 30.10: мелкий текст на плашке 50 % местами сливался с картинкой (контраст 2–3 при норме 4,5).
   Плашки остаются прозрачными, а надписи капсом над заголовками, «хлебные крошки» и строка фактов квеста
   лежат на плотном песке, как на боевом сайте. Вариант Б (плашки 78 %) владелец не выбрал */
html.has-bg main > section:not(.duo-section) :is(.eyebrow, .crumbs):not(:is(.pick-card, .chat, .info, .occasion, .feature, .review, .price-panel, .panel) *) {
  width: fit-content; max-width: 100%;
  padding: 5px 12px 4px; border-radius: 16px;
  background: var(--sand); box-shadow: 0 1px 0 rgba(var(--ink-rgb), .14);
}
html.has-bg main > section.band .eyebrow:not(:is(.pick-card, .chat, .info, .occasion, .feature, .review, .price-panel, .panel) *) { background: var(--band); }
html.has-bg .q-facts {
  border-top: 0; border-radius: 22px; padding: 22px 26px 24px;
  background: var(--sand); box-shadow: 0 1px 0 rgba(var(--ink-rgb), .14);
}
@media (max-width: 760px) { html.has-bg .q-facts { padding: 18px 18px 20px; border-radius: 18px; } }

/* --- Правки по проверке 30.10 --- */
/* Фоны в WebP — в 1,5–2,5 раза легче JPG, рисунок тот же. Браузер, который не понимает image-set с type(),
   берёт JPG из правил выше */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  html.bg-home { --bg: image-set(url("../img/bg/home.webp") type("image/webp"), url("../img/bg/home.jpg") type("image/jpeg")); }
  html.bg-atom { --bg: image-set(url("../img/bg/atom-2.webp") type("image/webp"), url("../img/bg/atom-2.jpg") type("image/jpeg")); }
  html.bg-1408 { --bg: image-set(url("../img/bg/1408.webp") type("image/webp"), url("../img/bg/1408.jpg") type("image/jpeg")); }
  html.bg-heist { --bg: image-set(url("../img/bg/heist.webp") type("image/webp"), url("../img/bg/heist.jpg") type("image/jpeg")); }
  html.bg-maya { --bg: image-set(url("../img/bg/maya.webp") type("image/webp"), url("../img/bg/maya.jpg") type("image/jpeg")); }
  @media (max-aspect-ratio: 1 / 1) {
    html.bg-home { --bg: image-set(url("../img/bg/home-p.webp") type("image/webp"), url("../img/bg/home-p.jpg") type("image/jpeg")); }
    html.bg-atom { --bg: image-set(url("../img/bg/atom-2-p.webp") type("image/webp"), url("../img/bg/atom-2-p.jpg") type("image/jpeg")); }
    html.bg-1408 { --bg: image-set(url("../img/bg/1408-p.webp") type("image/webp"), url("../img/bg/1408-p.jpg") type("image/jpeg")); }
    html.bg-heist { --bg: image-set(url("../img/bg/heist-p.webp") type("image/webp"), url("../img/bg/heist-p.jpg") type("image/jpeg")); }
    html.bg-maya { --bg: image-set(url("../img/bg/maya-p.webp") type("image/webp"), url("../img/bg/maya-p.jpg") type("image/jpeg")); }
  }
}
/* где нет размытия под плашкой (старые браузеры), плашка плотнее — иначе текст лёг бы прямо на картинку */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.has-bg main > section:not(.duo-section) { background: rgba(var(--sand-rgb), .88); }
  html.has-bg main > section.band { background: rgba(230, 216, 189, .88); }
}
/* первый экран: задуманные поля не срабатывали — правило выше было слабее общего правила плашек */
html.has-bg main > section.hero, html.has-bg main > section.q-hero { padding: 48px 0 44px; }
@media (max-width: 760px) { html.has-bg main > section.hero, html.has-bg main > section.q-hero { padding: 24px 0 28px; } }
/* «ОТЗЫВЫ» — вплотную над своим заголовком: столбик из трёх кнопок растягивал верхнюю строку сетки,
   и надпись уезжала вверх. Лишняя высота теперь уходит в верхнюю строку, а надпись прижата к её низу.
   Кнопки площадок — одной ширины */
@media (min-width: 1200px) {
  :is(#otzyvy, #otzyv) .reviews-intro { grid-template-rows: 1fr auto; }
  :is(#otzyvy, #otzyv) .reviews-intro .eyebrow { align-self: end; }
  :is(#otzyvy, #otzyv) .stack-buttons { align-items: stretch; }
}
/* Рамка фокуса (переход по Tab): двойная — белая и тёмная. Одна тёмно-зелёная терялась на картинке
   и у чёрной тени кнопок */
html.has-bg :is(main, .site-header, .sticky-cta) :focus-visible {
  outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px var(--ink);
}
/* Телефоны уже 360 px: кнопки площадок с длинной надписью и значком не помещались, и главная ездила
   вбок — разрешаем перенос надписи на вторую строку */
@media (max-width: 359px) {
  .reviews-intro { min-width: 0; }
  .stack-buttons .btn {
    height: auto; min-height: 52px; padding: 8px 14px; white-space: normal; line-height: 1.25; text-align: left;
  }
}

/* --- Правки по проверке варианта А (30.10, «да» владельца) --- */
/* Ярлычки и для других мелких строк прямо на плашке: подпись под сеансами («Самая низкая цена / Ночной сеанс»),
   строка оценки на первом экране квеста, «Нет Telegram? Позвоните». Без ярлычка контраст падал до 3–4 */
html.has-bg main > section:not(.duo-section) :is(.slot-legend, .q-rating, .small-phone, .phone-line):not(:is(.pick-card, .chat, .info, .occasion, .feature, .review, .price-panel, .panel) *) {
  width: fit-content; max-width: 100%;
  padding: 5px 12px 4px; border-radius: 16px;
  background: var(--sand); box-shadow: 0 1px 0 rgba(var(--ink-rgb), .14);
}
html.has-bg main > section.band :is(.slot-legend, .q-rating, .small-phone, .phone-line):not(:is(.pick-card, .chat, .info, .occasion, .feature, .review, .price-panel, .panel) *) { background: var(--band); }
html.has-bg main > section:not(.duo-section) .slot-legend { padding: 7px 14px; }
/* у ссылок-ярлычков тень съедала тёмное кольцо рамки фокуса (Tab) — возвращаем его */
html.has-bg main > section:not(.duo-section) :is(.small-phone, .phone-line):focus-visible { box-shadow: 0 0 0 6px var(--ink); }

/* Текст прямо на плашке — ещё на шаг темнее (внутри плотных карточек цвета прежние) */
html.has-bg main > section { --body: #2B2118; --muted: #2f261d; }
html.has-bg main > section :is(.route-text b, .note strong) { color: #1f1812; }

/* Телефон, первый экран: надпись капсом в две строки — два отдельных ярлычка по строкам, а не широкая полоса
   во всю карточку; «Главная / Квесты / …» — в одну строку, длинное название обрезается «…» (оно крупно ниже) */
@media (max-width: 480px) {
  html.has-bg main > section:not(.duo-section) .crumbs { flex-wrap: nowrap; white-space: nowrap; }
  html.has-bg main > section:not(.duo-section) .crumbs [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* блок, а не флекс: у флекса надпись не может стать строчной и остаётся одной широкой плашкой */
  html.has-bg :is(.hero-title, .q-hero-title) { display: block; text-wrap: balance; }
  html.has-bg :is(.hero-title, .q-hero-title) > .eyebrow {
    display: inline; line-height: 2.3; padding: 5px 12px 4px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  html.has-bg .q-hero-title > h1 { margin-top: 8px; }
  html.has-bg .hero-title > h1 { margin-top: 10px; }
}

/* Лента отзывов */
/* подпись площадки — сразу под датой; пустое место у коротких отзывов уходит в низ карточки */
.review-carousel .review-who .review-src { margin-top: 6px; padding-top: 0; }
/* стрелки под лентой и на ноутбуках до 1539 px: сбоку стрелка «вперёд» уходила под круглую кнопку «наверх» */
@media (min-width: 1200px) and (max-width: 1539px) {
  .review-carousel.is-ready { padding-bottom: 64px; }
  .review-arrow { width: 44px; height: 44px; top: auto; bottom: 0; translate: none; }
  .review-arrow.prev { left: 0; }
  .review-arrow.next { left: 60px; right: auto; }
}
/* когда стрелки под лентой, неактивная видна бледной: иначе «вперёд» висела одна, сдвинутая вправо */
@media (max-width: 1539px) { .review-arrow:disabled { opacity: .35; box-shadow: none; } }
/* планшет: лента доходит до края плашки (третья карточка была срезана прямо по тексту); кнопки площадок одной ширины */
@media (min-width: 761px) and (max-width: 1199px) {
  .review-carousel .review-list { width: auto; }
  :is(#otzyvy, #otzyv) .stack-buttons { width: fit-content; align-items: stretch; }
}

/* Телефоны уже 360 px: «1–8 человек» не рвётся, луна в ночном сеансе не наезжает на время */
@media (max-width: 359px) {
  html.has-bg .q-facts { padding: 16px 14px 18px; column-gap: 10px; }
  .q-fact dt { letter-spacing: .06em; }
  .q-fact-value { font-size: 18px; }
  .slot-time { font-size: 18px; }
  .slot .icon { top: 8px; right: 7px; width: 12px; height: 12px; }
}

/* «Другие квесты» на планшете: подписи афиш в одну строку, названия на одной высоте */
@media (min-width: 901px) and (max-width: 1199px) {
  .poster-grid.n3 .poster-body { padding-left: 16px; padding-right: 16px; }
  .poster-grid.n3 .poster-meta { font-size: 13px; gap: 4px 10px; }
  .poster-grid.n3 .poster-meta .icon { width: 14px; height: 14px; }
  .poster-grid.n3 .poster-name { text-wrap: balance; }
}

/* «1408» и «Майя»: картинки тёмные, и обычный текст на плашке местами бледнел (контраст 3,3–3,9). Плашка остаётся
   на 50 %, а картинка под ней — чуть светлее и мягче (рисунок виден так же). Замер 30.10: всё проходит норму 4,5 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html.has-bg:is(.bg-1408, .bg-maya) main > section:not(.duo-section) {
    -webkit-backdrop-filter: blur(5px) brightness(1.3) contrast(.75); backdrop-filter: blur(5px) brightness(1.3) contrast(.75);
  }
}