/* ============ ПАЛИТРА И ТИПОГРАФИКА В ПЕРЕМЕННЫХ (шаг 1 переноса дизайна 2) ============
   Заказчик, 16 октября: первым шагом переносим палитру, радиусы, тени и типографику в переменные
   `:root` — вид при этом не меняется ни на пиксель (ТЗ: docs/dizajn-glavnoj-tz.md, §7 «Шаг 1»).

   Как устроено:
   * `--cq-*` — краски ЖИВОЙ темы ровно с текущими значениями (белый фон, графит, янтарный акцент,
     радиус 20 у карточек). Пока правила их не используют — вид остаётся прежним;
   * `--v2-*` — палитра выбранного варианта 2 (макет `/design2`): тёплый кремовый фон, коралл,
     солнце, лайм. Эти переменные объявлены ТОЛЬКО внутри `body.style-v2`, поэтому по умолчанию
     ни на что не влияют, а откат нового стиля — снять класс `style-v2` с `<body>` (одна строка);
   * правило переноса: любое правило нового стиля живёт под `body.style-v2` — за этим следит
     `deploy/hosting/check-design-vars.py`, поэтому живая главная не может поменяться случайно;
   * Manrope подключаем тогда, когда его начнёт использовать первый блок нового стиля
     (`font-display:swap`, subset `cyrillic`) — до этого живой сайт лишнего не грузит. */
:root{
  /* краски живой темы (значения как есть сейчас) */
  --cq-bg:#fff;--cq-surface:#fff;--cq-surface-soft:#f9fafb;--cq-surface-2:#f3f4f6;
  --cq-border:#e5e7eb;--cq-border-soft:#e5e5e5;--cq-border-strong:#d4d4d4;
  --cq-ink:#111;--cq-ink-soft:#4b5563;--cq-muted:#6b7280;--cq-muted-soft:#9ca3af;
  --cq-accent:#fbbf24;--cq-accent-strong:#f59e0b;
  --cq-warn:#78350f;--cq-warn-soft:#fef3c7;--cq-danger:#dc2626;--cq-ok:#16a34a;
  /* тёмная тема живой темы */
  --cq-dark-bg:#0f172a;--cq-dark-surface:#1e293b;--cq-dark-border:#334155;
  --cq-dark-ink:#e2e8f0;--cq-dark-head:#f1f5f9;--cq-dark-muted:#94a3b8;
  /* радиусы и тени живой темы */
  --cq-radius-sm:12px;--cq-radius-md:16px;--cq-radius-lg:20px;--cq-radius-pill:999px;
  --cq-shadow-card:0 6px 18px rgba(0,0,0,.08);--cq-shadow-modal:0 20px 60px rgba(0,0,0,.4);
  /* типографика живой темы */
  --cq-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cq-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* Палитра варианта 2: работает только под классом style-v2 на <body>. */
body.style-v2{
  --v2-cream:#FFF8EE;--v2-mint:#F1FBF3;--v2-lime-soft:#E7F6D6;--v2-sky-soft:#E4F6FB;
  --v2-ink:#1E1C1A;--v2-muted:#6F6A62;
  --v2-lime:#7CC63F;--v2-coral:#FF6B4A;--v2-sun:#FFC93C;--v2-sky:#3FB6D8;--v2-plum:#7B5BE6;
  --v2-deep:#2E5B3C;--v2-spine:#2A5138;--v2-spine-dark:#1F3D2A;
  --v2-r-xl:32px;--v2-r-lg:24px;--v2-r-md:18px;--v2-r-pill:999px;
  --v2-shadow:0 14px 34px rgba(30,28,26,.10);--v2-shadow-soft:0 6px 18px rgba(30,28,26,.07);
  --v2-scallop-w:40px;
  --v2-shadow-hot:0 16px 34px rgba(255,107,74,.26);
  --v2-font:Manrope,"Segoe UI",system-ui,sans-serif;
}
/* Тёмная тема нового стиля: гамма та же, фон и подложки — по ТЗ (#151513 / #221F1C). */
body.dark.style-v2{
  --v2-cream:#151513;--v2-mint:#1B1B18;--v2-lime-soft:#22221C;--v2-sky-soft:#1A2024;
  --v2-ink:#F2EFE9;--v2-muted:#A8A296;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#fff;color:#111;line-height:1.6}
button{font-family:inherit;cursor:pointer}input,textarea,select{font-family:inherit}
.hidden{display:none!important}
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);border-bottom:1px solid #eee;backdrop-filter:blur(12px)}
.nav{max-width:1140px;margin:0 auto;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.logo{font-size:18px;font-weight:700;cursor:pointer;color:#111;text-decoration:none}
.nav-links{display:flex;gap:16px;align-items:center;font-size:14px;flex-wrap:wrap}
.nav-links a{color:#555;cursor:pointer;text-decoration:none}.nav-links a:hover{color:#111}
.btn-key{background:none;border:1px solid #d4d4d4;padding:8px 16px;border-radius:8px;font-size:14px}
.btn{padding:12px 20px;border-radius:12px;border:none;font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.btn-primary{background:#fbbf24;color:#111}.btn-primary:hover{background:#f59e0b}
.btn-dark{background:#111;color:#fff}.btn-dark:hover{background:#333}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-outline{background:none;color:#111;border:1px solid #d4d4d4}.btn-outline:hover{background:#f5f5f5}
.btn-danger{background:#dc2626;color:#fff}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.hero{background:linear-gradient(135deg,#1e1b4b,#312e81 50%,#4338ca);color:#fff;padding:70px 20px}
.hero-inner{max-width:1140px;margin:0 auto}
.hero h1{font-size:44px;line-height:1.1;font-weight:800;margin-bottom:20px}
@media(max-width:600px){.hero h1{font-size:30px}}
.hero p{font-size:18px;color:#c7d2fe;margin-bottom:28px;max-width:520px}
section{padding:60px 20px}.container{max-width:1140px;margin:0 auto}
.section-title{font-size:32px;font-weight:800;margin-bottom:12px;text-align:center}
.section-sub{text-align:center;color:#666;margin-bottom:40px}
.quests-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.quest-card{background:#fff;border-radius:20px;border:1px solid #e5e5e5;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s;position:relative;text-decoration:none;color:inherit}
.quest-card:hover{transform:translateY(-4px);border-color:#111}
.quest-cover{height:150px;background:linear-gradient(135deg,#667eea,#764ba2);background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:14px;position:relative}
.quest-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.5))}
.quest-cover>*{position:relative;z-index:1}
.quest-city{background:rgba(255,255,255,.95);color:#111;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.quest-body{padding:16px;flex:1;display:flex;flex-direction:column}
.quest-body h3{font-size:17px;margin-bottom:6px}
.quest-body p{font-size:13px;color:#666;margin-bottom:12px;flex:1}
.quest-meta{display:flex;gap:12px;font-size:12px;color:#888;margin-bottom:12px;flex-wrap:wrap}
.quest-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #f0f0f0;gap:10px}
.quest-price{font-size:20px;font-weight:700}
.quest-price small{font-size:11px;color:#888;display:block}
.btn-buy{background:#111;color:#fff;padding:9px 18px;border-radius:10px;border:none;font-size:13px;font-weight:600}
.btn-buy.free{background:#16a34a}
/* Архивный квест: карточка в каталоге внизу с пометкой, покупка недоступна
   (заказчик, 16 октября: «Архив — в каталоге показываем внизу с пометкой "здесь пока не гуляем".
   Кнопка купить не активна»). */
.quest-card.is-archived .quest-cover{filter:saturate(.6) brightness(.96)}
.quest-archived{position:absolute;left:14px;top:14px;z-index:2;background:#FFC93C;color:#5b3f00;
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800;letter-spacing:.01em}
.quest-card.is-archived .btn-buy.soon{background:#e5e7eb;color:#6b7280;box-shadow:none;cursor:default;
  pointer-events:none}
.badge-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:6px}
.badge-tag.free{background:#dcfce7;color:#166534}
.badge-tag.demo{background:#ede9fe;color:#5b21b6}
.badge-tag.keys{background:#e0f2fe;color:#075985}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}
/* Карта квеста: окно нельзя закрыть кликом по фону или Esc; прокрутка не уходит на страницу под ним. */
#modal-route-map{overscroll-behavior:contain}
#modal-route-map .modal-content{overscroll-behavior:contain}
.modal-content{background:#fff;border-radius:20px;padding:26px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative}
.modal-content h3{font-size:20px;margin-bottom:6px}
.modal-sub{color:#666;font-size:14px;margin-bottom:18px}
/* Подписи и поля в окнах. Галочки согласий исключаем: иначе общее правило `label` перебивало
   их сетку (`display:block` вместо `grid`), и галочка вставала отдельной строкой над текстом —
   именно так выглядела форма покупки (заказчик, 15 октября: «в форме купить ключ криво осталось»). */
.modal-content label:not(.cq-consent):not(.cq-lead-consent){display:block;font-size:13px;color:#555;margin-bottom:6px;font-weight:500}
.modal-content input:not([type=checkbox]):not([type=file]),.modal-content textarea,.modal-content select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #d4d4d4;font-size:15px;margin-bottom:14px}
.modal-content input:focus{outline:none;border-color:#111}
/* Галочки согласий внутри окон: сетка «галочка + текст» важнее общих правил подписей */
.modal-content .cq-consent,.modal-content .cq-lead-consent{display:grid;grid-template-columns:16px 1fr;column-gap:8px;row-gap:2px;align-items:start;margin:8px 0 0;font-size:12.5px;font-weight:400;color:#4b5563;line-height:1.45}
.modal-content .cq-consent input,.modal-content .cq-lead-consent input{width:16px;height:16px;min-height:0;margin:1px 0 0;padding:0}
.modal-content .cq-consent span,.modal-content .cq-lead-consent span{display:block;min-width:0}
.key-input{font-family:monospace;text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:26px;color:#888;padding:4px 10px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid #eee;flex-wrap:wrap}
.full-btn{width:100%;padding:14px;border-radius:12px;border:none;background:#111;color:#fff;font-size:16px;font-weight:600}
.error{color:#b91c1c;font-size:13px;margin-bottom:12px;background:#fee2e2;padding:10px 12px;border-radius:8px}
body.play{background:#f5f5f5}
.play-header{background:#111;color:#fff;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;gap:8px}
.btn-icon{background:none;border:none;color:#fff;font-size:22px;padding:4px 10px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.btn-icon svg{display:block}
.btn-icon:disabled{opacity:.25}
.nav-counter{font-size:13px;min-width:56px;text-align:center}
.quest-title{font-size:14px;font-weight:600;text-align:center;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Название на странице квеста (не в игровой панели): слева и целиком, без обрезки
   (заказчик, 19 октября: «в карточке квеста название игры обрезается в мобилке — нужно
   вмещать всё; и выравнивай по левому краю, сейчас по центру»). В игре своя плашка
   с прежним центрированием и многоточием — её не трогаем. */
.quest-page-title{text-align:left;white-space:normal;overflow:visible;text-overflow:clip;flex:none}
.subbar{background:#1f1f1f;color:#fff;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;row-gap:6px;position:sticky;top:45px;z-index:99}
.timer{font-family:monospace;font-size:14px;font-weight:600;color:#fbbf24}
.score-badge{font-family:monospace;font-size:14px;font-weight:600;color:#86efac}
/* «Сколько друзей сейчас с вами» — прямо в кнопке «Друг» (Владимир, 30.10.2026):
   иконка друзей подсвечивается, рядом появляется число в зелёной плашке, рамка кнопки
   становится зелёной. Отдельную плашку с глазами рядом с часами убрали. */
.btn-friend-count{display:inline-block;margin-left:5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:#22c55e;color:#052e14;font-family:monospace;font-size:11.5px;
  font-weight:800;line-height:18px;text-align:center}
.btn-friend-count.hidden{display:none}
#btn-share-friend.has-viewers{background:rgba(34,197,94,.18);border-color:#22c55e}
#btn-share-friend.has-viewers .btn-ico{filter:drop-shadow(0 0 5px rgba(34,197,94,.9)) brightness(1.08) saturate(1.15)}
@media (max-width:460px){.btn-sub{padding:6px 9px}}
.btn-sub{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);padding:6px 12px;border-radius:8px;font-size:12px}
.play-main{max-width:640px;margin:0 auto;padding:16px}
#map{height:240px;border-radius:14px;margin-bottom:8px;border:1px solid #e5e5e5;background:#f0f4f8;overflow:hidden;position:relative}
#map svg{display:block;width:100%;height:100%}
.map-status{font-size:11px;color:#6b7280;text-align:right;margin-bottom:8px}
.map-actions{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.btn-map{flex:1;min-width:130px;padding:10px 14px;border-radius:10px;background:#dcfce7;color:#166534;border:1px solid #86efac;font-size:13px;font-weight:500;text-align:center;text-decoration:none;display:inline-block}
.btn-map.gray{background:#f3f4f6;color:#374151;border-color:#d1d5db}
.btn-map.active{background:#fef3c7;color:#78350f;border-color:#fcd34d}
.card{background:#fff;border-radius:16px;padding:20px;border:1px solid #e5e5e5;margin-bottom:12px}
.approach-header{font-size:12px;color:#6b7280;text-transform:uppercase;margin-bottom:6px}
.approach-title{font-size:20px;font-weight:700;margin-bottom:12px}
.approach-text{font-size:15px;color:#333;margin-bottom:16px}
/* Карточку расстояния и компас отделяем от плашки «у вас на пути»: раньше они прилипали
   друг к другу и выглядели наехавшими (Владимир, 17:45). */
.distance-box{background:#f9fafb;border-radius:12px;padding:14px;margin-top:18px}
.distance-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.distance-value{font-size:24px;font-weight:700}
.distance-label{font-size:12px;color:#6b7280}
.progress-track{height:6px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:#16a34a;transition:width .3s}
.arrived-badge{display:inline-block;background:#dcfce7;color:#166534;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;margin-bottom:12px}
.question-head-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.btn-question-route{background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap}
.btn-question-route:hover{background:#e0e7ff}
.approach-tools{display:flex;justify-content:flex-end;margin:-2px 0 8px}
.btn-back-question{background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap}
.btn-back-question:hover{background:#e0e7ff}
.question-text{font-size:18px;font-weight:600;margin-bottom:16px;line-height:1.4}
.hints-bar{display:flex;justify-content:flex-end;margin-bottom:10px}
.btn-hint{background:#fef3c7;color:#78350f;border:1px solid #fcd34d;padding:8px 14px;border-radius:10px;font-size:14px}
.hint-item{background:#fffbeb;border-left:3px solid #f59e0b;padding:10px 12px;border-radius:8px;font-size:14px;color:#78350f;margin-bottom:6px}
.wrong{background:#fee2e2;color:#991b1b;padding:8px 12px;border-radius:8px;font-size:13px;margin-bottom:10px}
/* Промахи: чипсы переносятся, при большом количестве блок прокручивается (раньше — одна обрезанная строка) */
.wrong-title{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:6px}
.wrong-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:5.6em;overflow-y:auto}
.wrong-chip{background:rgba(153,27,27,.1);border:1px solid rgba(153,27,27,.25);border-radius:999px;padding:3px 10px;font-size:12.5px;max-width:100%;overflow-wrap:anywhere}
body.dark .wrong{background:#450a0a;color:#fecaca}
body.dark .wrong-chip{background:rgba(254,202,202,.12);border-color:rgba(254,202,202,.3)}
.answer-note{font-size:12.5px;color:#b45309;text-align:center;margin-top:8px}
.answer-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #d4d4d4;font-size:16px;margin-bottom:10px}
.photo-block{border-radius:14px;overflow:hidden;margin-bottom:12px;border:1px solid #e5e5e5}
.photo-block img{width:100%;height:200px;object-fit:cover;display:block}
.photo-caption{padding:8px 14px;font-size:12px;color:#6b7280}
.story-facts{margin-top:20px}
.story-facts-header{font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #eee}
.fact-block{margin-bottom:18px;background:#f9fafb;border-radius:12px;overflow:hidden;border:1px solid #e5e5e5}
.fact-block img{width:100%;height:150px;object-fit:cover;display:block}
.fact-body{padding:14px 16px}
.fact-title{font-size:15px;font-weight:600;margin-bottom:6px}
.fact-text{font-size:14px;color:#444}
.facts-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;justify-content:flex-end}
.fact-tab{background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fact-modal-img{width:100%;max-height:240px;object-fit:cover;border-radius:10px;margin-bottom:14px;display:block}
body.admin{background:#f5f5f5}
.admin-header{background:#111;color:#fff;padding:14px 24px;display:flex;justify-content:space-between;align-items:center}
.admin-header h1{font-size:16px}
.admin-header .exit{color:#fff;font-size:14px;cursor:pointer;text-decoration:none}
/* кнопка «Выйти» в шапке админки — та же строка, что «На сайт», но завершает все сессии */
.admin-header button.exit{background:none;border:0;padding:0;font-family:inherit;line-height:1.2}
.admin-header button.exit:hover{text-decoration:underline}
.admin-tabs{background:#fff;border-bottom:1px solid #e5e5e5;display:flex;flex-wrap:wrap;overflow:visible;padding:6px 12px 0;align-items:flex-start}
.admin-tab{padding:14px 20px;border:none;background:none;font-size:14px;font-weight:500;border-bottom:2px solid transparent;color:#6b7280;white-space:nowrap}
.admin-tab.active{color:#111;border-bottom-color:#111}
.admin-container{max-width:1200px;margin:0 auto;padding:24px}
.admin-panel{display:none}.admin-panel.active{display:block}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.metric{background:#fff;border-radius:14px;padding:18px;border:1px solid #e5e5e5}
.metric-label{font-size:12px;color:#6b7280;text-transform:uppercase;margin-bottom:6px}
.metric-value{font-size:24px;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #eee}
th{background:#f9fafb;font-weight:600;font-size:11px;text-transform:uppercase;color:#6b7280}
.key-cell{font-family:monospace;font-weight:600;font-size:12px}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600}
.badge.paid{background:#dcfce7;color:#166534}
.badge.revoked{background:#fee2e2;color:#991b1b}
.badge.expired{background:#e5e7eb;color:#4b5563}
.badge.published{background:#dcfce7;color:#166534}
.badge.draft{background:#f3f4f6;color:#6b7280}
.badge.demo{background:#ede9fe;color:#5b21b6}
.badge.paid-quest{background:#fef3c7;color:#92400e}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:#555;margin-bottom:4px;font-weight:500}
.field input,.field textarea,.field select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #d4d4d4;font-size:14px}
.field textarea{min-height:70px;resize:vertical}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
/* Раздел «Квесты»: панель фильтров — город, поиск по названию и быстрые отборы
   (архив / бесплатные / снятые с публикации). Заказчик, 19 октября. */
#apanel-quests .admin-quests-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;
  margin:0 0 16px;padding:12px 14px;border:1px solid #e5e5e5;border-radius:12px;background:#fafafa}
#apanel-quests .admin-quests-filters .field{margin:0;flex:1 1 220px;min-width:170px}
#apanel-quests .admin-quest-toggle{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  font-weight:600;color:#374151;padding:10px 0;cursor:pointer;white-space:nowrap}
#apanel-quests .admin-quest-toggle input{width:auto;margin:0}
#apanel-quests .admin-quests-count{font-size:12px;color:#6b7280;margin-left:auto}
body.dark #apanel-quests .admin-quests-filters{background:#1e293b;border-color:#334155}
body.dark #apanel-quests .admin-quest-toggle{color:#cbd5e1}
body.dark #apanel-quests .admin-quests-count{color:#94a3b8}
.empty{text-align:center;padding:40px 20px;color:#888}
.row-actions{display:flex;gap:4px;flex-wrap:wrap}
.two-col{display:grid;grid-template-columns:320px 1fr;gap:16px}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}
.q-list{max-height:400px;overflow-y:auto}
.q-item{padding:12px;border:1px solid #e5e5e5;border-radius:10px;margin-bottom:8px;cursor:pointer;background:#fff}
.q-item.active{background:#111;color:#fff;border-color:#111}
.q-item-title{font-weight:600;font-size:13px;margin-bottom:4px}
.q-item-meta{font-size:11px;opacity:.7}
.drop-zone{border:2px dashed #c4c4c4;border-radius:12px;padding:32px;text-align:center;margin-bottom:16px;background:#fafafa;cursor:pointer}
.drop-zone.dragover{border-color:#111;background:#f0f0f0}
.toast-stack{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:min(92vw,560px);pointer-events:none}
.toast{position:static;transform:none;background:#111;color:#fff;padding:12px 24px;border-radius:10px;font-size:14px;z-index:auto;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.toast.success{background:#16a34a}.toast.error{background:#b91c1c}
.result-intro{background:#fff7ed;border:1px solid #fed7aa;border-radius:16px;padding:18px 20px;margin:20px 0 16px}
.result-intro h3{font-size:20px;margin:0 0 8px}
.result-intro p{font-size:14px;line-height:1.65;color:#57534e;margin:0}
.cq-result-catalog{position:fixed;right:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;gap:8px;background:#f97316;color:#fff;font-weight:700;font-size:14px;padding:13px 18px;border-radius:999px;box-shadow:0 12px 30px rgba(249,115,22,.35);text-decoration:none;transition:transform .15s,box-shadow .15s}
.cq-result-catalog:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(249,115,22,.45);color:#fff}
@media(max-width:640px){.cq-result-catalog{left:12px;right:12px;bottom:14px;justify-content:center;padding:14px 16px}}
.test-mode-card{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:#fef3c7;border:1px solid #fcd34d}
.test-switch{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.test-switch input{width:auto;margin:0;transform:scale(1.3)}
.poi-marker{position:absolute;width:22px;height:22px;background:#f59e0b;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.3);transform:translate(-50%,-50%);z-index:5;cursor:pointer}
.poi-marker.discovered{background:#16a34a}

/* отвеченный вопрос: поле ввода не показываем, пишем правильный ответ и даём историю */
.answered{margin-top:6px}
.answered-note{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:12px}
.answered-note b{font-weight:700}
body.dark .answered-note{background:#052e21;border-color:#14532d;color:#a7f3d0}

/* контакты в окне «Помощь»: кнопки рядом, пустые поля не выводим */
.help-contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.help-btn{display:flex;align-items:center;gap:10px;background:#f9fafb;border:1px solid #e5e5e5;border-radius:12px;padding:10px 12px;text-decoration:none;color:#111;transition:all .15s}
.help-btn:hover{background:#f3f4f6;border-color:#d4d4d4}
.help-btn-icon{font-size:20px;line-height:1}
.help-btn-text{display:flex;flex-direction:column;min-width:0}
.help-btn-text b{font-size:13px;font-weight:600}
.help-btn-text small{font-size:11px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.help-empty{font-size:14px;color:#666}
/* версия сборки в справке: помогает понять, обновилась ли страница на телефоне */
.help-build{margin-top:14px;font-size:12px;color:#9ca3af;text-align:center;word-break:break-word}
body.dark .help-btn{background:#111827;border-color:#334155;color:#e5e7eb}
body.dark .help-btn:hover{background:#1f2937}
body.dark .help-btn-text small{color:#94a3b8}
.cabinet-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;justify-content:center}
.cabinet-tab{padding:10px 18px;border-radius:10px;border:1px solid #d4d4d4;background:#fff;font-size:14px;font-weight:500}
.cabinet-tab.active{background:#111;color:#fff;border-color:#111}
.tournament-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:14px;overflow:hidden}
.tournament-table th{background:#f9fafb;padding:12px 14px;text-align:left;font-size:11px;text-transform:uppercase;color:#6b7280;font-weight:600}
.tournament-table td{padding:12px 14px;border-bottom:1px solid #f0f0f0}
.tournament-table tr.me{background:#fef3c7}

/* ============ ПУБЛИЧНЫЕ ТАБЛИЦЫ НА ТЕЛЕФОНЕ (14 октября) ============
   Заказчик: на телефоне «вылазает таблица» турнира. Правило для всех публичных таблиц
   (турнир, журнал монет в кабинете, разбор баллов): ничего не выходит за экран.
   На узких экранах таблица превращается в карточки (подписи берутся из data-label),
   а там, где карточки не подходят (широкий планшет, длинный список), прокручивается
   ТОЛЬКО сама таблица внутри своей обёртки .cq-table-scroll — со подсказкой «можно листать». */
.cq-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cq-table-hint{display:none;font-size:12px;color:#6b7280;margin-top:8px}
.cq-table-scroll.is-scrollable .cq-table-hint{display:block}
body.dark .cq-table-hint{color:#94a3b8}
/* длинные имена и адреса переносим, а не растягиваем таблицу */
.tournament-table th,.tournament-table td,
.tags-table th,.tags-table td,
.cq-score-table th,.cq-score-table td{overflow-wrap:anywhere;word-break:break-word}

@media(max-width:640px){
/* карточный вид: строка таблицы становится блоком с подписью у каждого значения */
.tournament-table thead,.tags-table.is-cards thead{display:none}
.tournament-table tbody,.tags-table.is-cards tbody{display:block}
.tournament-table tr,.tags-table.is-cards tr{display:block;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff}
.tournament-table td,.tags-table.is-cards td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border:0;text-align:right}
.tournament-table td::before,.tags-table.is-cards td::before{content:attr(data-label);color:#6b7280;font-size:11px;text-transform:uppercase;letter-spacing:.02em;flex:none;text-align:left}
.tournament-table tr.me{background:#fef3c7;border-color:#fde68a}
.tournament-table td[data-label="Игрок"]{font-weight:600}
body.dark .tournament-table tr,body.dark .tags-table.is-cards tr{background:#1e293b;border-color:#334155}
body.dark .tournament-table tr.me{background:#78350f;border-color:#92400e}
body.dark .tournament-table td::before,body.dark .tags-table.is-cards td::before{color:#94a3b8}
}
.medal{font-size:18px}
.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.achievement{background:#fff;border-radius:16px;padding:20px;text-align:center;border:2px solid #e5e5e5;transition:all .2s}
.achievement.locked{opacity:.4;filter:grayscale(1)}
.achievement.unlocked{border-color:#fbbf24;background:linear-gradient(135deg,#fffbeb,#fef3c7)}
.achievement-icon{font-size:42px;margin-bottom:8px}
.achievement-title{font-size:13px;font-weight:700;margin-bottom:4px}
.achievement-desc{font-size:11px;color:#888;line-height:1.4}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.stat-box{background:#fff;border-radius:14px;padding:16px;text-align:center;border:1px solid #e5e5e5}
.stat-value{font-size:26px;font-weight:700;color:#111}
.stat-label{font-size:12px;color:#888;margin-top:4px}
.user-card{background:linear-gradient(135deg,#1e1b4b,#4338ca);color:#fff;border-radius:16px;padding:20px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.user-card .name{font-size:20px;font-weight:700}
.user-card .key-label{font-size:12px;color:#c7d2fe;margin-top:4px;font-family:monospace}
.my-quest-item{background:#fff;border-radius:14px;padding:16px;border:1px solid #e5e5e5;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.my-quest-item .info{flex:1;min-width:180px}
.my-quest-item .info h4{font-size:15px;margin-bottom:4px}
.my-quest-item .info .meta{font-size:12px;color:#888}
/* Кнопки в карточке квеста: одна высота и ровные промежутки — раньше «QR» и «Играть» стояли
   вплотную, а три кнопки у пройденного квеста были разной высоты (заказчик, 15 октября). */
.my-quest-item .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.my-quest-item .actions .btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;line-height:1.2;white-space:nowrap}
.review-item{padding:14px;border:1px solid #e5e5e5;border-radius:12px;margin-bottom:10px;background:#fff}
.review-stars{color:#f59e0b;font-size:15px;margin-bottom:6px}
.review-author{font-size:12px;color:#888;margin-bottom:6px}
.review-text{font-size:14px;color:#333}
body.dark{background:#0f172a;color:#e2e8f0}
body.dark .play-header,body.dark .admin-header{background:#020617}
body.dark .subbar{background:#1e293b}
body.dark .header{background:rgba(15,23,42,.95);border-color:#334155}
body.dark .card,body.dark .metric,body.dark .quest-card,body.dark .stat-box,body.dark .my-quest-item,body.dark .achievement,body.dark .review-item,body.dark .q-item{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .question-text,body.dark .approach-title,body.dark .quest-title,body.dark .quest-body h3,body.dark .section-title,body.dark .logo,body.dark .modal-content h3{color:#f1f5f9}
body.dark .approach-text,body.dark .fact-text,body.dark .review-text{color:#cbd5e1}
body.dark .approach-header,body.dark .distance-label,body.dark .map-status,body.dark .photo-caption,body.dark .quest-meta,body.dark .modal-sub,body.dark .section-sub,body.dark .stat-label{color:#94a3b8}
body.dark .fact-block{background:#1e293b;border-color:#334155}
body.dark .fact-title{color:#f1f5f9}
body.dark .story-facts-header{color:#94a3b8;border-bottom-color:#334155}
body.dark .distance-box{background:#0f172a;border-color:#334155}
body.dark .answer-input,body.dark .modal-content input,body.dark .modal-content textarea,body.dark .modal-content select,body.dark .field input,body.dark .field textarea,body.dark .field select{background:#0f172a;color:#e2e8f0;border-color:#334155}
body.dark .modal-content{background:#1e293b;color:#e2e8f0}
body.dark .modal-close{color:#94a3b8}
body.dark .full-btn{background:#f1f5f9;color:#0f172a}
body.dark table{color:#e2e8f0}
body.dark th{background:#0f172a;color:#94a3b8}
body.dark td{border-bottom-color:#334155}
body.dark .q-item.active{background:#f1f5f9;color:#0f172a;border-color:#f1f5f9}
body.dark .test-mode-card{background:#78350f;border-color:#fbbf24}
body.dark .test-mode-card h2,body.dark .test-mode-card div{color:#fef3c7}
body.dark .empty{color:#64748b}
body.dark .btn-outline,body.dark .btn-key,body.dark .cabinet-tab{color:#e2e8f0;border-color:#475569;background:#1e293b}
body.dark .cabinet-tab.active{background:#f1f5f9;color:#0f172a}
body.dark .btn-dark{background:#f1f5f9;color:#0f172a}
body.dark .nav-links a{color:#cbd5e1}
body.dark .hint-item{background:#422006;color:#fde68a;border-left-color:#d97706}
body.dark .fact-tab{background:#4c1d95;color:#ddd6fe;border-color:#5b21b6}
body.dark .arrived-badge{background:#14532d;color:#86efac}
body.dark .btn-question-route,body.dark .btn-back-question{background:#1e1b4b;color:#c7d2fe;border-color:#3730a3}
body.route-passed #btn-arrived,body.route-passed #geo-problem,body.route-passed #sim-panel{display:none!important}
body.route-review #btn-arrived,body.route-review #geo-problem,body.route-review #sim-panel{display:none!important}
body.dark .wrong{background:#7f1d1d;color:#fecaca}
body.dark .btn-buy{background:#f1f5f9;color:#0f172a}
body.dark .tournament-table{background:#1e293b}
body.dark .tournament-table th{background:#0f172a;color:#94a3b8}
body.dark .tournament-table td{border-bottom-color:#334155}
body.dark .tournament-table tr.me{background:#78350f}
body.dark .user-card{background:linear-gradient(135deg,#020617,#1e1b4b)}
body.dark .achievement.unlocked{background:linear-gradient(135deg,#78350f,#92400e);border-color:#fbbf24}
body.dark .achievement-title,body.dark .stat-value{color:#f1f5f9}
/* выбор квеста в турнире */
.quest-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.quest-chip{background:#fff;border:1px solid #e5e5e5;border-radius:14px;padding:12px 16px;cursor:pointer;min-width:180px;text-align:left;font:inherit}
.quest-chip .t{font-weight:700;font-size:14px;margin-bottom:4px}
.quest-chip .m{font-size:12px;color:#888}
.quest-chip.active{border-color:#111;box-shadow:0 6px 18px rgba(0,0,0,.08)}

/* ============ МАРШРУТ СЛОВАМИ ВМЕСТО КАРТЫ ============ */
/* Верхняя строка игры: плашка вида передвижения и кнопка карты в одну линию.
   Плашка стала компактной (Владимир: «уменьши»), карта — справа от неё. */
.play-top-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.play-top-row #demo-badge{padding:6px 11px;border-radius:10px;font-size:12.5px;line-height:1.25;min-width:0}
.play-top-row .transport-icon{font-size:17px;line-height:1}
.route-toggle-bar{display:flex;justify-content:flex-end;margin-left:auto;flex:none}
.map-offroute-note{margin:8px 0 14px;padding:8px 10px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:12px;line-height:1.45}
body.dark .map-offroute-note{background:#422006;border-color:#92400e;color:#fde68a}
.btn-route-toggle{background:#dcfce7;color:#166534;border:1px solid #86efac;padding:7px 13px;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.btn-route-toggle:hover{background:#bbf7d0}
.btn-route-toggle.map-active{background:#fef3c7;color:#78350f;border-color:#fcd34d}
.route-photos{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.route-photo-item{flex:1;min-width:150px;max-width:220px;background:#f9fafb;border-radius:10px;overflow:hidden;border:1px solid #e5e5e5}
.route-photo-item img{width:100%;height:120px;object-fit:cover;display:block}
.route-photo-caption{padding:6px 10px;font-size:11px;color:#6b7280;line-height:1.4}
/* Фото подхода — тем же слайдером, что и фото вопроса (заказчик, 22 октября). */
.route-photos.route-photo-slider{display:block;margin:14px 0;border:1px solid #e5e5e5;border-radius:14px;overflow:hidden;background:#fff}
.route-photo-slider .photo-slider{border-radius:0}
.route-photo-slider .photo-slider img{width:100%;height:200px;object-fit:cover;display:block;cursor:zoom-in}
.route-photo-slider .photo-caption{min-height:18px}
@media(max-width:640px){.route-photo-slider .photo-slider img{height:auto;max-height:38vh}}
.rules-hint{background:#f0f9ff;border-radius:12px;padding:12px 14px;font-size:12px;color:#1e40af;line-height:1.5}
.link-btn{background:none;border:none;color:#2563eb;font-size:13px;text-decoration:underline;cursor:pointer;font-family:inherit;padding:6px}

/* ============ ПЛАШКА ПАУЗЫ ============ */
.pause-overlay{position:fixed;inset:0;background:rgba(15,23,42,.92);z-index:900;display:flex;align-items:center;justify-content:center;padding:20px}
.pause-overlay-card{background:linear-gradient(135deg,#1e1b4b,#312e81);color:#fff;border-radius:20px;padding:26px 22px;max-width:360px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
body.dark .btn-route-toggle{background:#14532d;color:#86efac;border-color:#166534}
body.dark .btn-route-toggle.map-active{background:#78350f;color:#fde68a;border-color:#fbbf24}
body.dark .route-photo-item{background:#0f172a;border-color:#334155}
body.dark .route-photo-caption{color:#94a3b8}
body.dark .rules-hint{background:#0c4a6e;color:#bae6fd}

/* ============ ОТБОР ПО ГОРОДАМ В ТУРНИРЕ ============ */
.city-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip-city{background:#fff;border:1px solid #e5e5e5;border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;font-family:inherit;color:#333}
.chip-city:hover{border-color:#c7c7c7}
.chip-city.active{background:#111;border-color:#111;color:#fff}
body.dark .chip-city{background:#0f172a;border-color:#334155;color:#e2e8f0}
body.dark .chip-city.active{background:#f8fafc;border-color:#f8fafc;color:#111}
/* виды передвижения в турнире: у каждого вида своя таблица */
.transport-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip-transport{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #e5e5e5;border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;font-family:inherit;color:#333}
.chip-transport:hover{border-color:#c7c7c7}
.chip-transport.active{background:#111;border-color:#111;color:#fff}
.chip-transport .n{background:rgba(0,0,0,.08);border-radius:999px;padding:1px 8px;font-size:11px}
.chip-transport.active .n{background:rgba(255,255,255,.2)}
.transport-note{font-size:12px;color:#888;margin-bottom:16px}
body.dark .chip-transport{background:#0f172a;border-color:#334155;color:#e2e8f0}
body.dark .chip-transport.active{background:#f8fafc;border-color:#f8fafc;color:#111}

/* ============ ФИЛЬТРЫ КАТАЛОГА ============ */
.catalog-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}

/* ============ РЕЖИМ НАБЛЮДАТЕЛЯ ============
   Второй игрок видит ровно тот же экран, что и ведущий (карточки, вопрос, карта,
   подсказки, время, баллы), но без кнопок управления игрой — только «Забрать управление».
   В режиме чтения (body.reading) он листает прошлые ответы: показываем стрелки и «Далее». */
body.observer-mode #btn-pause,
body.observer-mode #btn-test,
body.observer-mode .hints-bar,
body.observer-mode #answer-input,
body.observer-mode #btn-answer,
body.observer-mode #rate-hint,
body.observer-mode #geo-problem,
body.observer-mode #btn-arrived,
body.observer-mode #sim-panel,
body.observer-mode #modal-story .full-btn{display:none !important}
body.observer-mode.reading #btn-prev,
body.observer-mode.reading #btn-next,
body.observer-mode.reading #modal-story .full-btn{display:inline-block !important}
#story-back{display:none}
body.observer-mode.reading #story-back{display:block !important}
.observer-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff7ed;border:1px solid #fdba74;color:#7c2d12;border-radius:14px;padding:10px 14px;margin-bottom:12px;font-size:13px}
.observer-bar .btn{margin-left:auto}
body.reading .observer-bar{background:#eef2ff;border-color:#a5b4fc;color:#312e81}
body.reading .observer-bar .btn{margin-left:0}
body.reading .observer-bar .btn:first-of-type{margin-left:auto}
.observer-badge{display:inline-block;background:#fef3c7;color:#78350f;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px}
.observer-live{font-size:12px;opacity:.85}
.observer-geo{font-size:12px;font-weight:700;color:#9a3412;white-space:nowrap}
body.dark .observer-geo{color:#fdba74}
body.dark .observer-bar{background:#3b2a12;border-color:#92400e;color:#fde68a}
body.dark .observer-badge{background:#78350f;color:#fde68a}

/* предупреждение перед паузой: заметнее, но это ещё не пауза */
.cq-cover-warning{background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.55);border-left:4px solid #fbbf24;border-radius:12px;padding:12px 14px;font-size:16px;font-weight:600;opacity:1;max-width:640px}
.cq-cover-offer .cq-cover-title{color:#fde68a}
.cq-cover-offer .cq-cover-city{color:#fbbf24;opacity:1;font-weight:700}
/* подтверждение паузы — приглушённо-красная кнопка; «Продолжить» после паузы остаётся белой */
.cq-cover-offer #pause-btn-on{background:#b91c1c;color:#fff}
.cq-cover-offer #pause-btn-on:hover{background:#991b1b}

/* выбор способа передвижения прямо на обложке квеста */
.cover-transport{margin-bottom:18px}
.cover-transport-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-bottom:8px}
.cover-transport-options{display:flex;gap:8px;flex-wrap:wrap}
.cover-transport-option{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:14px;padding:10px 14px;font-size:14px;font-family:inherit;cursor:pointer;transition:all .15s}
.cover-transport-option:hover{background:rgba(255,255,255,.2)}
.cover-transport-option.active{background:#fff;color:#111;border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.cover-transport-icon{font-size:18px;line-height:1}
.cover-transport-name{font-weight:600}
.cover-transport-hint{font-size:13px;color:#fecaca;margin-top:8px}
.cover-transport.need-choice .cover-transport-options{outline:2px solid #f87171;outline-offset:6px;border-radius:18px}
.cover-transport.need-choice .cover-transport-option{border-color:rgba(248,113,113,.7)}

/* ============ ОБЛОЖКА КВЕСТА (старт и пауза) ============ */
.cq-cover{position:fixed;inset:0;z-index:950;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:linear-gradient(160deg,#0b1020,#1e1b4b 60%,#0f172a)}
.cq-cover-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);filter:saturate(1.05)}
.cq-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,24,.10) 0%,rgba(8,12,24,.55) 42%,rgba(8,12,24,.94) 100%)}
.cq-cover-inner{position:relative;width:100%;max-width:820px;padding:26px 22px 34px;color:#fff}
.cq-cover-city{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.8;margin-bottom:10px}
.cq-cover-title{font-size:34px;line-height:1.08;font-weight:800;margin:0 0 10px}
.cq-cover-sub{font-size:15px;line-height:1.5;opacity:.9;margin:0 0 16px;max-width:620px}
.cq-cover-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.cq-cover-meta span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 13px;font-size:13px;backdrop-filter:blur(6px)}
.cq-cover-cta{width:100%;background:#fff;color:#111;border:none;border-radius:16px;padding:17px;font-size:17px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.cq-cover-cta:hover{background:#f3f4f6}
.cq-cover-link{display:block;width:100%;background:none;border:none;color:rgba(255,255,255,.85);text-decoration:underline;font-size:13px;margin-top:12px;cursor:pointer;font-family:inherit;text-align:center}

/* ============ ПРАВИЛА: плитки вместо таблицы ============
   Модалка из игры узкая (телефон), поэтому списания показываем карточками, а не строками таблицы. */
.rules-hero{background:linear-gradient(135deg,#1e1b4b,#312e81);color:#fff;border-radius:16px;padding:16px 18px;margin-bottom:14px}
.rules-hero-title{font-size:18px;font-weight:800;margin-bottom:6px}
.rules-hero-sub{font-size:13.5px;line-height:1.55;color:#e0e7ff}
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin-bottom:14px}
.rules-card{display:flex;align-items:center;gap:10px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px}
.rules-ico{font-size:22px;line-height:1}
.rules-name{flex:1;font-size:13.5px;font-weight:600;line-height:1.25}
.rules-name small{display:block;font-weight:400;font-size:11.5px;color:#6b7280;margin-top:2px}
.rules-cost{font-family:monospace;font-size:15px;font-weight:700;color:#b91c1c;white-space:nowrap}
.rules-cost.free{color:#15803d;font-size:12px}
.rules-example{background:#f0f9ff;border:1px solid #bae6fd;border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.6;color:#0c4a6e;margin-bottom:10px}
.rules-note{font-size:13px;color:#4b5563;line-height:1.6;margin-bottom:14px}
.rules-friends{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:16px;padding:14px 16px;font-size:13.5px;line-height:1.6;color:#065f46}
.rules-friends-title{font-size:15px;font-weight:800;margin-bottom:6px}
.rules-friends-note{margin-top:8px;font-size:12.5px;color:#047857}
/* Кнопки внизу страницы правил — как на других контентных страницах: в ряд, с переносом.
   Отступ сверху отделяет их от блока «Играть можно компанией» (заказчик, 19 октября). */
.rules-actions{display:flex;gap:10px;flex-wrap:wrap}
.rules-cta{margin-top:26px}
@media(max-width:640px){.rules-cta{margin-top:20px}}
/* Правила нового стиля: карточки списаний и заметки — в палитре сайта, без старых
   синих/серых плашек (заказчик: «у нас нет такого синего теперь»). */
body.dark .rules-card{background:#0f172a;border-color:#334155}
body.dark .rules-name small{color:#94a3b8}
body.dark .rules-note{color:#cbd5e1}
body.dark .rules-example{background:#0c4a6e;border-color:#075985;color:#e0f2fe}
body.dark .rules-friends{background:#064e3b;border-color:#047857;color:#d1fae5}
body.dark .rules-friends-note{color:#a7f3d0}
body.style-v2 .rules-card{background:#fff;border:0;border-radius:var(--v2-r-md);
  box-shadow:var(--v2-shadow-soft)}
body.style-v2 .rules-name{color:var(--v2-ink)}
body.style-v2 .rules-name small{color:var(--v2-muted)}
body.style-v2 .rules-cost{color:var(--v2-coral)}
body.style-v2 .rules-cost.free{color:#3F6B22}
body.style-v2 .rules-example{background:var(--v2-lime-soft);border:0;color:var(--v2-ink)}
body.style-v2 .rules-note{color:var(--v2-muted)}
body.style-v2 .rules-friends{background:var(--v2-mint);border:0;color:var(--v2-ink)}
body.style-v2 .rules-friends-title{color:var(--v2-ink)}
body.style-v2 .rules-friends-note{color:var(--v2-muted)}
body.dark.style-v2 .rules-card{background:#26241F;box-shadow:none}
body.dark.style-v2 .rules-cost.free{color:#A7D77F}
@media(min-width:760px){.cq-cover-inner{padding-bottom:52px}.cq-cover-title{font-size:46px}}

/* ============ ПРОСМОТР КАРТИНОК ============
   Отдельный слой поверх всего (в том числе поверх модалок): из модалки можно открыть
   картинку крупно и вернуться в ту же модалку. */
.cq-lightbox{position:fixed;inset:0;z-index:3000;background:rgba(8,10,18,.94);display:flex;align-items:center;justify-content:center;touch-action:none}
.cq-lightbox.hidden{display:none}
/* Слои просмотра: картинка уходит под стрелки, крестик и подпись. Иначе при зуме
   (`will-change:transform` создаёт свой контекст наложения) изображение накрывает левую стрелку —
   в карточке квеста она пропадала, а в игре не было видно ни одной (заказчик, 16 октября:
   «на больших картинках пропали стрелки»). */
.cq-lightbox .cq-lb-img{position:relative;z-index:1}
.cq-lightbox .cq-lb-arrow{z-index:3}
.cq-lightbox .cq-lb-close{z-index:4}
.cq-lightbox .cq-lb-bar{z-index:3}
.cq-lb-img{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.55);background:#0b1020}
.cq-lb-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;font-family:inherit}
.cq-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.16);color:#fff;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center}
.cq-lb-arrow.prev{left:12px}
.cq-lb-arrow.next{right:12px}
.cq-lb-arrow.hidden{display:none}
.cq-lb-arrow:hover,.cq-lb-close:hover{background:rgba(255,255,255,.28)}
.cq-lb-bar{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#e5e7eb;font-size:13px;line-height:1.5;padding:0 60px}
.cq-lb-count{display:inline-block;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 10px;margin-right:8px;font-family:monospace}
.cq-lb-cap{opacity:.9}
body.cq-lb-open{overflow:hidden}
@media(max-width:560px){.cq-lb-arrow{width:44px;height:44px}.cq-lb-arrow.prev{left:6px}.cq-lb-arrow.next{right:6px}.cq-lb-bar{padding:0 16px}}
body.dark .cq-cover{background:linear-gradient(160deg,#05070f,#141033 60%,#0b1220)}

/* ============ «РЯДОМ НАШЛОСЬ» ============
   Найденные места показываем на карточке точки, рядом с фактами. */
.nearby-block{margin:0 0 12px}
.nearby-title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#0f766e;margin-bottom:6px}
.nearby-item{display:inline-flex;align-items:center;gap:6px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:999px;padding:6px 12px;font-size:13px;font-family:inherit;cursor:pointer;margin:0 6px 6px 0}
.nearby-item:hover{background:#d1fae5}
.nearby-ico{font-size:14px}
body.dark .nearby-title{color:#5eead4}
body.dark .nearby-item{background:#064e3b;border-color:#047857;color:#d1fae5}

/* ============ «ПРОЙДЕННАЯ ИГРА» (story.html) ============ */
.story-head{background:linear-gradient(135deg,#1e1b4b,#312e81);color:#fff;border-radius:18px;padding:20px 22px;margin-bottom:18px}
.story-head h1{font-size:24px;margin-bottom:6px;color:#fff}
.story-head .story-meta{font-size:14px;color:#e0e7ff}
.story-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.story-stat{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:8px 14px;font-size:13px}
.story-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.story-nav button{background:#fff;border:1px solid #e5e5e5;border-radius:999px;padding:7px 14px;font-size:13px;font-family:inherit;cursor:pointer;color:#333}
.story-nav button:hover{border-color:#111}
.story-point{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px 20px;margin-bottom:16px;scroll-margin-top:70px}
.story-point-title{font-size:18px;font-weight:800;margin-bottom:4px}
.story-point-sub{font-size:13px;color:#6b7280;margin-bottom:12px}
.story-answer{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:10px 14px;font-size:14px;color:#166534;margin-bottom:14px}
.story-question{font-size:16px;line-height:1.6;margin-bottom:12px}
.story-route{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:12px 14px;font-size:13.5px;color:#7c2d12;line-height:1.6;margin-bottom:12px}
.story-route-photos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.story-route-photos figure{margin:0;max-width:150px}
.story-route-photos img{width:150px;height:100px;object-fit:cover;border-radius:10px;display:block}
.story-route-photos figcaption{font-size:11.5px;color:#6b7280;margin-top:4px}
.story-story{font-size:15px;line-height:1.7;margin-bottom:14px}
.story-facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:12px}
.story-fact{background:#f9fafb;border:1px solid #eceff3;border-radius:14px;padding:12px}
.story-fact img{width:100%;border-radius:10px;margin-bottom:8px;display:block}
.story-fact b{font-size:13.5px}
.story-fact div{font-size:13px;color:#4b5563;line-height:1.6;margin-top:4px}
.story-points{font-size:12.5px;color:#6b7280;border-top:1px dashed #e5e7eb;padding-top:10px}
.story-sorry{background:#fff7ed;border:1px solid #fed7aa;border-radius:18px;padding:22px;text-align:center;font-size:15px;line-height:1.7;color:#7c2d12}
body.dark .story-point{background:#0f172a;border-color:#334155}
body.dark .story-point-sub,body.dark .story-points{color:#94a3b8}
body.dark .story-question,body.dark .story-story{color:#e2e8f0}
body.dark .story-fact{background:#111827;border-color:#334155}
body.dark .story-fact div{color:#cbd5e1}
body.dark .story-route{background:#4c1d05;border-color:#9a3412;color:#fed7aa}
body.dark .story-answer{background:#064e3b;border-color:#047857;color:#d1fae5}
body.dark .story-nav button{background:#0f172a;border-color:#334155;color:#e2e8f0}

/* ============ СТРАНИЦЫ СТРУКТУРЫ САЙТА И 404 ============
   Их рендерит приложение (backend/app/page_store.py): блоки hero/text/faq/cards/gallery/cta. */
.site-footer{background:#111;color:#aaa;padding:34px 20px;text-align:center;font-size:14px;margin-top:40px}
.site-footer .footer-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.site-footer a{color:#e5e7eb;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .footer-note{opacity:.75;font-size:13px;line-height:1.6;max-width:640px;margin:0 auto}
body.dark .site-footer{background:#0b1220}
.page-hero{position:relative;border-radius:20px;overflow:hidden;margin-bottom:22px;background:linear-gradient(135deg,#1e1b4b,#312e81);color:#fff}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.45}
.page-hero-inner{position:relative;padding:34px 26px}
.page-hero h1{font-size:32px;line-height:1.15;margin-bottom:10px;color:#fff}
.page-hero-sub{font-size:16px;line-height:1.6;max-width:640px;color:#e0e7ff;margin-bottom:16px}
.page-block{margin-bottom:26px}
.page-block h2{font-size:23px;margin-bottom:10px}
.page-lead{font-size:15px;color:#6b7280;margin-bottom:12px}
.page-text{font-size:16px;line-height:1.75;color:#333}
.page-faq{display:flex;flex-direction:column;gap:8px}
/* ============ ГАЛЕРЕЯ «ФОТОГРАФИИ С ПРОГУЛОК»: ПЛИТКИ ВСТЫК ============
   Без зазоров и скруглений — эффект коллажа, как в галерее телефона: сразу видно,
   что фотографий много. Клик открывает слайдер (js/lightbox.js). */
.cq-gallery-collage{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:8px 0 4px;overflow:hidden}
.cq-gallery-collage .cq-collage-tile{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  cursor:zoom-in;transition:filter .2s ease}
.cq-gallery-collage .cq-collage-tile:hover{filter:brightness(1.06)}
@media (max-width:820px){
  .cq-gallery-collage{grid-template-columns:repeat(3,1fr)}
}
/* Блок «Вопросы и ответы» на главной: как блок шагов — по ширине колонки контента,
   а не во всю ширину экрана (Владимир, 13 октября) */
#home-blocks .page-faq{max-width:760px;margin:0 auto}
#home-blocks > .container .page-block{margin:38px 0}
/* ============ ВИТРИНА ГЛАВНОЙ: ПЛИТКИ «ПОПУЛЯРНЫЕ», «ГОРОДА», «СКОРО» ============
   Маркетинговые плитки из админки (раздел «Главная страница» → «Витрина»). Группы и порядок
   собирает сервер: «Скоро» всегда последней. Язык — как у карточек квестов на главной. */
.cq-show-group{margin-top:26px}
.cq-show-head{font-size:20px;font-weight:700;margin-bottom:12px;text-align:center}
.cq-show-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.cq-show-tile{display:block;background:#fff;border:1px solid #e5e5e5;border-radius:20px;overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .2s;height:100%}
.cq-show-tile:hover{transform:translateY(-3px)}
.cq-show-cover{height:150px;background:#f3f4f6 center/cover no-repeat}
.cq-show-cover img{width:100%;height:100%;object-fit:cover;display:block}
.cq-show-body{padding:12px 14px 16px}
.cq-show-title{font-size:16px;font-weight:700;line-height:1.35}
.cq-show-city,.cq-show-note{font-size:13px;color:#6b7280;margin-top:4px}
body.dark .cq-show-tile{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .cq-show-title{color:#f1f5f9}
body.dark .cq-show-cover{background-color:#334155}
@media (max-width:820px){
  .cq-show-group{margin-top:20px}
  .cq-show-head{font-size:17px}
  .cq-show-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .cq-show-cover{height:120px}
}
.faq-item{background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;padding:12px 16px}
.faq-item summary{cursor:pointer;font-weight:600;font-size:15px}
.faq-item div{margin-top:8px;font-size:14.5px;line-height:1.7;color:#4b5563}
.page-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.page-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.page-card img{width:100%;height:150px;object-fit:cover;border-radius:12px}
.page-card h3{font-size:16px}
.page-card-text{font-size:14px;color:#555;line-height:1.6;flex:1}
.page-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.page-gallery figure{margin:0}
.page-gallery img{width:100%;height:150px;object-fit:cover;border-radius:12px;display:block}
.page-gallery figcaption{font-size:12px;color:#6b7280;margin-top:4px}
.page-cta{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:18px;padding:22px;text-align:center}
.page-cta h2{font-size:21px;margin-bottom:8px}
.page-cta p{color:#065f46;margin-bottom:14px}
body.dark .faq-item,body.dark .page-card{background:#0f172a;border-color:#334155}
body.dark .page-text,body.dark .page-block h2{color:#e2e8f0}
body.dark .page-faq .faq-item div,body.dark .page-card-text{color:#cbd5e1}
body.dark .page-cta{background:#064e3b;border-color:#047857}
.notfound{max-width:620px;margin:40px auto;text-align:center}
.notfound-emoji{font-size:64px;margin-bottom:12px}
.notfound h1{font-size:26px;margin-bottom:12px}
.notfound p{font-size:16px;line-height:1.7;color:#4b5563;margin-bottom:20px}
.notfound-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.notfound-note{margin-top:18px;font-size:13px;color:#6b7280}
body.dark .notfound p{color:#cbd5e1}
#cq-header-code,#cq-footer-code{display:contents}

/* ============ ФИНИШ КВЕСТА (в стиле стартовой обложки) ============
   Один экран на ведущего и наблюдателя: обложка, праздничное наложение, итоги и «поделиться». */
/* Финиш занимает весь экран: картинка-фон и тёмная плашка идут от края до края,
   а читаемый контент получает отступы по бокам и сверху/снизу. */
#modal-finish.modal{padding:0}
#modal-finish .modal-content{background:transparent;padding:0;max-width:none;width:100vw;max-height:100vh;height:100vh;overflow-y:auto;box-shadow:none;border-radius:0;box-sizing:border-box}
#modal-finish .cq-finish-holder{max-width:none;width:100%;min-height:100vh}
#modal-finish .cq-finish{min-height:100vh;border-radius:0}
#modal-finish .cq-finish-card{min-height:100vh;border-radius:0;box-shadow:none;width:100%}
#modal-finish .cq-finish-cover{opacity:.62}
#modal-finish .cq-finish-body{min-height:100vh;box-sizing:border-box;padding:clamp(30px,6vh,72px) clamp(22px,6vw,100px);display:flex;flex-direction:column;justify-content:center}
.cq-finish-holder{max-width:640px;width:100%}
.cq-finish{position:relative;border-radius:20px;overflow:hidden}
.cq-finish-card{position:relative;border-radius:20px;overflow:hidden;background:#0f172a;color:#fff}
.cq-finish-cover{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5}
.cq-finish-body{position:relative;padding:26px 22px 22px;text-align:center;background:linear-gradient(180deg,rgba(15,23,42,.35) 0%,rgba(15,23,42,.92) 55%,rgba(15,23,42,.97) 100%)}
.cq-finish-flag{font-size:44px;line-height:1;margin-bottom:6px}
.cq-finish-title{font-size:26px;line-height:1.15;margin-bottom:6px;color:#fff}
.cq-finish-quest{font-size:15px;color:#c7d2fe;margin-bottom:10px}
.cq-finish-joke{font-size:16px;line-height:1.5;font-weight:800;color:#fff7d6;max-width:560px;margin:0 auto 10px}
.cq-finish-text{font-size:14.5px;line-height:1.65;color:#e2e8f0;max-width:520px;margin:0 auto 16px}
.cq-finish-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.cq-finish-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 14px;min-width:88px}
.cq-finish-stat b{display:block;font-size:19px}
.cq-finish-stat span{font-size:11.5px;opacity:.8}
.cq-finish-ach{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.cq-finish-badge{background:#fef3c7;color:#78350f;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600}
.cq-finish-share{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:16px;margin:6px 0 14px}
.cq-finish-share-title{font-size:17px;font-weight:700;margin-bottom:6px}
.cq-finish-share-note{font-size:13px;opacity:.85;line-height:1.55;margin-bottom:12px}
.cq-finish-share-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* Блок монет в финале — такой же заметный, как «поделиться результатом» (14 октября) */
.cq-finish-coins{background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.55);border-radius:16px;padding:16px;margin:6px 0 14px}
.cq-finish-coins-title{font-size:17px;font-weight:700;margin-bottom:6px}
.cq-finish-coins-note{font-size:13px;opacity:.92;line-height:1.55;margin-bottom:12px}
.cq-finish-coins-note b{font-size:15px}
.cq-finish-coins-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* Фото с прогулки на финише — под блоком монет (Владимир, 31.10.2026): кадр из игры
   и подсказка, что скачать его можно в личном кабинете. У игр без фото блока нет. */
.cq-finish-photo{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 14px;
  padding:12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22)}
.cq-finish-photo-img{display:block;width:100%;max-width:340px;max-height:260px;height:auto;
  object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#0b1220}
.cq-finish-photo-text{font-size:13.5px;line-height:1.5;color:#e2e8f0;text-align:center}
.cq-finish-photo-text a{color:#fff;font-weight:600;text-decoration:underline}
/* «Поделиться» на фото (Владимир, 31.10.2026): компактная плашка в углу кадра, кадр не закрывает. */
.cq-finish-photo-frame{position:relative;display:block;width:100%;max-width:340px}
.cq-finish-photo-share{position:absolute;right:8px;bottom:8px;z-index:2;display:inline-flex;
  align-items:center;gap:5px;min-height:32px;padding:6px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);background:rgba(12,16,26,.62);color:#fff;
  font:inherit;font-size:12.5px;font-weight:700;line-height:1;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cq-finish-photo-share svg{width:14px;height:14px;flex:0 0 auto}
.cq-finish-photo-share:active{background:rgba(12,16,26,.85)}
@media (max-width:520px){.cq-finish-photo-img{max-height:220px}}
.cq-share-main{font-size:15px;padding:12px 22px}
/* Отзыв на финише — главный акцент: 300 монет и селфи. Поделиться — только контур. */
.cq-finish-review{background:linear-gradient(135deg,rgba(249,115,22,.22),rgba(251,191,36,.12));border:1px solid rgba(253,186,116,.85);border-radius:16px;padding:18px;margin:8px 0 14px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.cq-finish-review-title{font-size:19px;font-weight:800;margin-bottom:7px}
.cq-finish-review-note{font-size:13.5px;line-height:1.6;opacity:.95;margin-bottom:13px}
.cq-finish-review-note b{color:#fed7aa}
.cq-finish-review-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.cq-finish-review-actions .btn{font-size:15px;padding:13px 24px;max-width:100%;white-space:normal;line-height:1.25}
.cq-finish-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* На тёмной плашке финиша кнопки-контур были с тёмным текстом на тёмном фоне — их не читали
   (заказчик, 15 октября). Осветляем их внутри плашки, остальные страницы не трогаем. */
.cq-finish-card .btn-outline,
.cq-finish-card .btn-outline.btn-sm,
.cq-finish-links a.btn-outline,
.cq-finish-links button.btn-outline{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.cq-finish-card .btn-outline:hover{background:rgba(255,255,255,.16);color:#fff}
.cq-spark{position:absolute;bottom:-10px;font-size:22px;animation:cqSpark 2.6s ease-out infinite;opacity:0;pointer-events:none}
@keyframes cqSpark{
0%{transform:translateY(0) scale(.7);opacity:0}
15%{opacity:1}
100%{transform:translateY(-340px) scale(1.25);opacity:0}
}
@media (max-width:520px){.cq-finish-title{font-size:22px}.cq-finish-stat{min-width:74px;padding:8px 10px}}

/* ============ КАТАЛОГ КВЕСТОВ (/catalog) ============ */
.catalog-page{padding:34px 0 72px}
.catalog-title{font-size:30px;line-height:1.15;margin-bottom:8px}
/* чуть больше воздуха между заголовком и демо-полосой (заказчик, 16 октября) */
body.style-v2 .catalog-title{margin:0 0 22px}
.catalog-lead{font-size:15px;color:#6b7280;margin-bottom:14px}
.catalog-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.catalog-count{font-size:14px;color:#374151;font-weight:600}
.catalog-sort{margin-left:auto;font-size:13px;color:#374151}
.catalog-sort select{padding:6px 10px;border-radius:8px;border:1px solid #d4d4d4;font-size:13px;font-family:inherit}
.catalog-filters{display:none;background:#f9fafb;border:1px solid #e5e7eb;border-radius:16px;padding:14px;margin-bottom:18px}
.catalog-filters.open{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.filter-group{min-width:0}
.filter-title{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin-bottom:6px}
.filter-multi summary{display:flex;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;padding:9px 12px;border:1px solid #d4d4d4;border-radius:10px;background:#fff;font-size:14px}
.filter-multi summary::-webkit-details-marker{display:none}
.filter-value{color:#6b7280;font-size:13px;white-space:nowrap}
.filter-options{margin-top:8px;max-height:230px;overflow-y:auto;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:6px}
.filter-option{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:14px}
.filter-option:hover{background:#f3f4f6}
/* Варианты, которые вместе с остальными фильтрами дают пустую выдачу */
.filter-option.disabled{opacity:.42;cursor:not-allowed}
.filter-option.disabled:hover{background:transparent}
.filter-option.disabled input{cursor:not-allowed}
.filter-option.disabled .chip-count{opacity:.7}
.filter-quest-option.disabled{opacity:.42;cursor:not-allowed}
.filter-quest-option.disabled:hover{background:transparent}
.chip-tag.disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.35)}
.chip-tag.disabled:hover{transform:none;border-color:#d4d4d4}
.filter-option span:first-of-type{flex:1}
.chip-count{font-size:11.5px;color:#6b7280;background:#f3f4f6;border-radius:999px;padding:1px 7px}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-tag{border:1px solid #d4d4d4;background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;font-family:inherit;display:inline-flex;gap:6px;align-items:center}
.chip-tag.active{background:#111;color:#fff;border-color:#111}
.chip-tag.active .chip-count{background:rgba(255,255,255,.2);color:#fff}
.filter-range .range-values{display:flex;justify-content:space-between;font-size:13px;color:#374151;margin-bottom:4px}
.range-sliders{position:relative;height:26px}
.range-sliders input[type=range]{width:100%;margin:0;position:absolute;left:0;top:6px;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none}
.range-sliders input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#111;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.range-sliders input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#111;border:2px solid #fff;cursor:pointer}
.range-inputs{display:flex;gap:8px;margin-top:6px}
.range-inputs input{width:100%;padding:7px 9px;border:1px solid #d4d4d4;border-radius:8px;font-size:13px;font-family:inherit}
.filter-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-active{font-size:12.5px;color:#6b7280}
.quest-tags{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.quest-tag{font-size:11.5px;background:#eef2ff;color:#3730a3;border-radius:999px;padding:2px 9px}
.catalog-empty{text-align:center;padding:30px 10px}
.catalog-empty-emoji{font-size:52px;margin-bottom:8px}
.catalog-empty h3{font-size:19px;margin-bottom:8px}
.catalog-empty p{font-size:14.5px;color:#6b7280;max-width:520px;margin:0 auto 16px;line-height:1.6}
body.dark .catalog-filters{background:#0f172a;border-color:#334155}
body.dark .filter-multi summary,body.dark .filter-options,body.dark .chip-tag{background:#111827;border-color:#334155;color:#e2e8f0}
body.dark .filter-option:hover{background:#1e293b}
body.dark .catalog-lead,body.dark .catalog-count,body.dark .catalog-sort,body.dark .filter-range .range-values{color:#cbd5e1}
body.dark .chip-tag.active{background:#e2e8f0;color:#0f172a}
body.dark .quest-tag{background:#1e1b4b;color:#c7d2fe}

/* плашку убрали: предупреждение о списании показываем ДО нажатия */
.admin-tab-group{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;padding:0 12px 0 0;border-right:1px solid #e5e5e5;margin:0 12px 6px 0}
.admin-tab-group:last-child{border-right:none}
.admin-tab-group-title{margin-right:6px;white-space:nowrap}
.admin-tab{padding:10px 12px}
.admin-tab-group-title{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.6;color:#cbd5e1}
.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-bottom:12px}
.seo-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;margin-bottom:8px}
.seo-row-main b{font-size:14px}
.seo-row-meta{font-size:12px;color:#6b7280;margin-top:3px}
.seo-row-actions{display:flex;gap:6px;flex-wrap:wrap}
.seo-block{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:10px}
.seo-block-head{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.seo-block input,.seo-block textarea{width:100%;padding:8px 10px;border-radius:8px;border:1px solid #d4d4d4;margin-bottom:6px;font-family:inherit;font-size:13px}
.seo-items{display:grid;gap:6px;margin-top:6px}
/* строка настроек блока в админке: вид галереи и подмешивание фото из отзывов */
.seo-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.seo-row select{width:auto;margin-bottom:0}
.seo-check{display:flex;gap:6px;align-items:center;font-size:13px;color:#374151}
.seo-check input{width:auto;margin-bottom:0}
.seo-item{display:grid;gap:6px;background:#fff;border:1px dashed #d4d4d4;border-radius:10px;padding:8px}
/* подборка квестов в редакторе: источник, город/тег и количество в одну строку */
.seo-quests-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin-top:6px}
.seo-quests-row input,.seo-quests-row select{margin-bottom:0}
body.dark .seo-row,body.dark .seo-block{background:#0f172a;border-color:#334155}
body.dark .seo-item{background:#111827;border-color:#334155}
body.dark .seo-block input,body.dark .seo-block textarea{background:#0f172a;color:#e2e8f0;border-color:#334155}
/* плашку убрали: предупреждение о списании показываем ДО нажатия */
.tags-table{width:100%;border-collapse:collapse;font-size:13px}
.tags-table th,.tags-table td{border:1px solid #e5e7eb;padding:6px 8px}
.tags-table th{background:#f3f4f6;font-weight:600}
body.dark .tags-table th,body.dark .tags-table td{border-color:#334155}
body.dark .tags-table th{background:#0f172a}
/* плашку убрали: предупреждение о списании показываем ДО нажатия */
.list-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:13px}
.list-pager-info{color:#6b7280}
.list-pager-page{color:#374151}
.list-pager .btn[disabled]{opacity:.45;cursor:default}
/* плашку убрали: предупреждение о списании показываем ДО нажатия */
.admin-panel .card{max-width:100%;box-sizing:border-box;overflow:hidden}
#results-table,#admin-tournament{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#results-table table{width:100%;min-width:900px}
.admin-panel table{max-width:100%}
/* плашку убрали: предупреждение о списании показываем ДО нажатия */
.btn-buy{display:inline-block;text-decoration:none;text-align:center;cursor:pointer;white-space:nowrap}
.quest-card{height:100%}
.quest-body p{flex:0 0 auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
/* Заголовок карточки — до двух строк с переносом; бейджи стоят рядом и не отнимают
   у него место (заказчик, 16 октября: «переноси заголовок квеста во вторую строку»). */
.quest-body h3{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;min-width:0}
.quest-title-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.quest-title-badges{display:inline-flex;flex-wrap:wrap;gap:6px;flex:0 0 auto;align-items:center}
.quest-tags{margin:0 0 8px}
.quest-tag{white-space:nowrap}
.quest-meta{margin-bottom:8px}
.quest-footer{margin-top:auto;flex-wrap:wrap}
.quest-price{white-space:nowrap}
/* плашку убрали: предупреждение о списании показываем ДО нажатия */
.fu-builder{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.filter-block{min-width:0}
.fu-option{display:flex;align-items:center;gap:6px;font-size:13.5px;padding:3px 0;cursor:pointer}
.fu-builder input[type=number],.fu-builder select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid #d4d4d4;font-family:inherit;font-size:13px}
body.dark .fu-builder{background:#0f172a;border-color:#334155}
/* плашку убрали: предупреждение о списании показываем ДО нажатия */
.path-poi-mark{display:block;font-size:11px;color:#16a34a;margin-top:2px}
.path-pois-note{font-size:12px;color:#6b7280;margin-top:14px;line-height:1.55}
#path-pois-body{max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch;text-align:left;margin-top:4px}
/* Карточки мест: заголовок, картинка, описание — друг под другом, листаешь и читаешь.
   Раньше был список строк и второе окно на каждое место (Владимир, 13 октября).
   С 15 октября карточка — это содержимое самого окна, а не блок в блоке (заказчик: «текст урезан,
   не видно расстояния и кнопок»): без рамок и линий, разделяем только отступами. Фото и карта
   занимают один и тот же блок — при переключении размеры не меняются и ничего не «прыгает». */
.pois-stack{display:flex;flex-direction:column}
/* Быстрые переходы: номер места сверху, чтобы не листать длинный список целиком */
.pois-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.pois-chip{width:30px;height:30px;border-radius:50%;border:1px solid #e5e7eb;background:#f9fafb;color:#374151;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.pois-chip:hover{background:#f3f4f6;border-color:#d1d5db}
body.dark .pois-chip{background:#1e293b;border-color:#334155;color:#e2e8f0}
.pois-group-title{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin:2px 0 -6px}
.pois-group-title:first-child{margin-top:0}
.poi-card{background:transparent;border:none;border-radius:0;padding:0 0 20px;margin:0}
.poi-card:last-child{padding-bottom:0}
.poi-card.focus .poi-card-title{color:#1d4ed8}
.poi-card-media{position:relative;border-radius:14px;overflow:hidden;background:#eef2ff;height:220px}
.poi-card-media>*{display:block;width:100%;height:100%}
.poi-card-media img{object-fit:cover;cursor:zoom-in}
/* этап G: подпись к фото места — под кадром, как у фото вопросов; для фото из Commons
   здесь видно «объект · фото: автор / лицензия» (требование свободных лицензий). */
.poi-photo-caption{font-size:12px;line-height:1.45;color:#6b7280;padding:6px 2px 0}
body.dark .poi-photo-caption{color:#94a3b8}
/* Факты пока рисуются старой разметкой (картинка + текст в карточке) — им оставляем высоту
   и скругление, чтобы окно «Интересное о месте» выглядело так же аккуратно. */
.poi-card-img{display:block;width:100%;height:220px;object-fit:cover;border-radius:14px;background:#eef2ff;cursor:zoom-in}
.poi-card-body{padding:12px 0 0}
.poi-card-title{font-size:17px;font-weight:700;line-height:1.3;margin-bottom:4px}
.poi-card-num{color:#9ca3af;font-weight:600;margin-right:6px}
.poi-card-meta{font-size:13px;color:#6b7280;margin-bottom:8px}
.poi-card-text{font-size:14.5px;line-height:1.65;color:#374151}
/* Озвучка фактов — одна общая кнопка-наушники сверху (Владимир, 01.11.2026):
   у самих фактов плееров больше нет, остаются только заголовок, фото и текст. */
#facts-audio .cq-facts-guide{display:inline-flex;align-items:center;background:none;border:0;padding:0;gap:0}
#facts-audio .cq-facts-guide .cq-audio-btn{display:inline-flex;align-items:center;justify-content:center}
#facts-audio .cq-facts-guide .cq-audio-icon{font-size:17px;line-height:1}
.poi-card-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.poi-card-map-hint{font-size:12px;color:#9ca3af}
.path-poi-empty{background:#f9fafb;border:1px dashed #e5e7eb;border-radius:14px;font-size:14px;color:#6b7280;padding:12px 14px}
body.dark .poi-card-title{color:#e2e8f0}
body.dark .poi-card-text{color:#cbd5e1}
body.dark .poi-card-meta,body.dark .poi-card-map-hint{color:#94a3b8}
body.dark .poi-card-num{color:#64748b}
body.dark .poi-card-media{background:#1e293b}
body.dark .path-poi-empty{background:#0f172a;border-color:#334155}
@media(max-width:520px){
.poi-card-img{height:170px}
.poi-card-title{font-size:16px}
}
body.dark .fact-text,body.dark .fact-block p,body.dark .story-facts,body.dark .story-facts p{color:#cbd5e1}
body.dark .fact-title,body.dark .fact-block b,body.dark .fact-block strong{color:#f1f5f9}
body.dark #fact-modal-body,body.dark #fact-modal-title{color:#e2e8f0}
body.dark .hint-item{background:#422006;color:#fde68a;border-left-color:#f59e0b}
body.dark .cq-cover-link{color:#fef08a}
.cq-cover-link{font-size:15px;font-weight:600;letter-spacing:.01em}
/* Раньше здесь дописывалась стрелка « ->» после каждой ссылки на обложке: Владимир попросил
   убрать (не красиво), и ничего вместо неё не нужно. */
.badge-tag.sale{background:#fee2e2;color:#b91c1c}
.quest-price-old{color:#9ca3af;font-weight:500;font-size:14px;margin-right:4px}

/* «Я на месте»: с этой кнопки начинается отсчёт времени (задача №8) */
.onsite{margin:14px 0 4px}
.onsite-note{font-size:12.5px;color:#6b7280;margin-top:8px;text-align:center;line-height:1.55}
body.dark .onsite-note{color:#94a3b8}

/* Ссылка хозяину сайта: открыть страницу в админке (видна только вошедшему админу) */
.cq-admin-edit{position:fixed;left:14px;bottom:14px;z-index:900;display:inline-block;background:#111;color:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.cq-admin-edit:hover{background:#374151;color:#fff}

/* ============ МЕНЮ И ПОДВАЛ САЙТА (js/site-chrome.js) ============
   Меню собирается из страниц структуры сайта: 1–3 уровня, вложенные пункты
   раскрываются при наведении и с клавиатуры. Подвал — бренд, меню, контакты
   и копирайт; данные приходят из /api/site. */
.cq-menu{display:flex;align-items:center;flex:1;justify-content:center;min-width:0}
.cq-menu.hidden{display:none}
.cq-menu-list{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0;font-size:14px}
.cq-menu-item{position:relative}
.cq-menu-item>a{color:#374151;text-decoration:none;display:inline-flex;align-items:center;gap:4px;padding:6px 2px}
.cq-menu-item>a:hover{color:#111}
.cq-caret{font-size:10px;color:#9ca3af}
.cq-menu-sub{position:absolute;top:100%;left:0;min-width:200px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.12);padding:8px;display:none;flex-direction:column;gap:2px;z-index:120}
.cq-menu-item:hover>.cq-menu-sub,.cq-menu-item:focus-within>.cq-menu-sub{display:flex}
.cq-menu-sub .cq-menu-sub{top:-8px;left:100%}
.cq-menu-sub .cq-menu-item>a{display:block;padding:8px 10px;border-radius:8px;color:#374151}
.cq-menu-sub .cq-menu-item>a:hover{background:#f3f4f6;color:#111}
.cq-logo-img{height:26px;vertical-align:middle;border-radius:6px}
.cq-footer{background:#111;color:#aaa;padding:40px 20px 28px;font-size:14px}
.cq-footer .logo{color:#fff;text-decoration:none}
.cq-footer-inner{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;text-align:left}
.cq-footer-note{color:#9ca3af;margin-top:10px;line-height:1.6;max-width:360px}
.cq-footer-menu{display:flex;flex-direction:column;gap:8px}
.cq-footer-menu a{color:#d1d5db;text-decoration:none}
.cq-footer-menu a:hover{color:#fff}
.cq-footer-menu a.lv2{padding-left:14px;font-size:13px;color:#9ca3af}
.cq-footer-menu a.lv3{padding-left:28px;font-size:13px;color:#9ca3af}
.cq-footer-contacts{display:flex;flex-direction:column;gap:8px}
.cq-footer-contacts a{color:#d1d5db;text-decoration:none}
.cq-footer-contacts a:hover{color:#fff}
/* Меню подвала колонками, как в макете (заказчик, 16 октября: «сделай меню как в макете
   на три колонки — хорошо смотрелось»). Колонки настраиваются в админке, поэтому их число
   бывает от одной до четырёх: раскладка подстраивается, а на телефоне колонки встают в столбик. */
.cq-footer-inner.cols-1{grid-template-columns:1.4fr 1fr}
.cq-footer-inner.cols-2{grid-template-columns:1.4fr 1fr 1fr}
.cq-footer-inner.cols-3,.cq-footer-inner.cols-4{grid-template-columns:1.4fr 1fr 1fr 1fr}
.cq-footer-col{display:flex;flex-direction:column;gap:8px}
.cq-footer-col h4{margin:0 0 4px;color:#fff;font-size:15px;font-weight:700}
.cq-footer-col a{color:#d1d5db;text-decoration:none}
.cq-footer-col a:hover{color:#fff}
.cq-footer-copy{grid-column:1/-1;border-top:1px solid #27272a;margin-top:8px;padding-top:16px;color:#71717a;font-size:13px;text-align:center}
.cq-footer-copy a{color:#a1a1aa}
@media(max-width:860px){
.cq-menu{order:3;width:100%;justify-content:flex-start;overflow-x:auto}
.cq-footer-inner{grid-template-columns:1fr}
.cq-footer-inner[class*="cols-"]{grid-template-columns:1fr;gap:18px}
}

/* Шапка страниц правил и «пройденной игры»: те же приёмы, что у остальных страниц */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);border-bottom:1px solid #eee;backdrop-filter:blur(12px)}
.header-inner{max-width:1140px;margin:0 auto;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.main-nav{display:flex;gap:16px;align-items:center;font-size:14px;flex-wrap:wrap}
.main-nav a{color:#555;text-decoration:none}
.main-nav a:hover{color:#111}
.header-actions{display:flex;gap:8px;align-items:center}
body.dark .site-header{background:rgba(15,23,42,.95);border-bottom-color:#334155}
body.dark .cq-menu-item>a{color:#cbd5e1}
body.dark .cq-menu-sub{background:#1e293b;border-color:#334155}
body.dark .cq-menu-sub .cq-menu-item>a:hover{background:#334155;color:#f1f5f9}
body.dark .main-nav a{color:#cbd5e1}
body.dark .main-nav a:hover{color:#f1f5f9}

/* Отзывы на главной (блок «Отзывы игроков» из админки) */
.cq-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.cq-review{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px 18px;box-shadow:0 2px 10px rgba(15,23,42,.04)}
.cq-review-stars{color:#f59e0b;font-size:16px;margin-bottom:8px;letter-spacing:2px}
.cq-review-text{font-size:14.5px;line-height:1.6;color:#333;margin-bottom:10px;white-space:pre-wrap}
.cq-review-meta{font-size:12.5px;color:#6b7280}
body.dark .cq-review{background:#1e293b;border-color:#334155}
body.dark .cq-review-text{color:#cbd5e1}
body.dark .cq-review-meta{color:#94a3b8}

/* ============ ОТЗЫВЫ НА ГЛАВНОЙ: ЛИСТАНИЕ ============
   Заказчик, 15 октября: «блок сильно большой, должен лаконично вписываться; стрелки листать
   лежат прямо на контенте; рядом с фото текст теряется; видео обрезалось неправильно; карточки
   одного размера по высоте — блок должен быть презентабельным». Поэтому: заголовок и стрелки
   стоят одной строкой НАД лентой (стрелки больше ничего не перекрывают), внутри карточки медиа
   слева в пропорции 16:9, текст справа, высота карточек одинаковая, длинный текст аккуратно
   подрезан — карточки выглядят одинаково при листании. */
.cq-reviews-slider{position:relative;max-width:860px;margin:0 auto;overflow:hidden}
.cq-rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.cq-rev-head-text{min-width:0}
.cq-rev-head-text .section-title{text-align:left;margin:0 0 4px}
.cq-rev-head-text .section-sub{text-align:left;margin:0}
.cq-rev-nav{display:flex;gap:8px;flex:none}
.cq-rev-arrow{width:40px;height:40px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;color:#111827;
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(15,23,42,.08);transition:background .15s,border-color .15s}
.cq-rev-arrow:hover{background:#f8fafc;border-color:#cbd5e1}
.cq-reviews-track{display:flex;align-items:stretch;transition:transform .35s ease}
.cq-reviews-track>.cq-rev-card{flex:0 0 100%;min-width:100%;box-sizing:border-box}
/* Карточка отзыва на главной: медиа 16:9 слева, справа звёзды с датой, текст и нижняя строка
   с аватаром, именем и источником. Высота — по содержимому (слайды в ленте тянутся до самой
   высокой карточки), поэтому ничего не обрезается: раньше стояла фиксированная высота
   с overflow:hidden, и там, где было фото, нижняя строка с именем и квестом уезжала за край
   (заказчик, 15 октября: «где фото — нет имени, названия квеста и фото аккаунта»). */
.cq-rev-card{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:18px;align-items:stretch;
  min-height:200px;overflow:visible}
/* Медиа — цельный блок: фото внутри идут встык, как коллаж (заказчик, 15 октября:
   «плитку с фотками увеличь, подгоняй под размер, чтобы заполняла полностью; может,
   фотки без рамок, как коллаж»). Скругляем только внешние углы. */
.cq-rev-card .cq-review-media{border-radius:16px;overflow:hidden}
.cq-rev-card .cq-review-photos{gap:0}
.cq-rev-card .cq-review-photo{border-radius:0}
/* Коллаж: одно фото — во всю плитку; два — рядом; три и больше — крупное сверху, мелкие снизу */
.cq-rev-card .cq-review-photos.many:not(.three){grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.cq-rev-card .cq-review-photos.many:not(.three) .cq-review-photo:first-child{grid-column:auto}
.cq-rev-card .cq-review-photos.three .cq-review-photo:first-child{grid-column:1 / -1}
.cq-rev-card.no-media{grid-template-columns:minmax(0,1fr)}
.cq-rev-body{display:flex;flex-direction:column;min-width:0;gap:10px;padding:2px 0}
.cq-rev-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Подпись автора — всегда на одном месте: над звёздами, одной строкой и без плашки
   (заказчик, 15 октября: «подпись в одном месте, независимо от того, есть фото или нет»). */
.cq-rev-author-line{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;line-height:1.3}
.cq-rev-author-line .cq-review-name{font-size:13.5px;font-weight:600;color:#2A2A28;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.cq-rev-author-line .cq-review-tags{font-size:12.5px;color:#6E6A64;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-rev-author-line .cq-review-tags::before{content:"·";margin:0 6px;color:#cbd5e1}
body.dark .cq-rev-author-line .cq-review-name{color:#e2e8f0}
body.dark .cq-rev-author-line .cq-review-tags{color:#94a3b8}
/* Медиа занимает ВСЮ высоту карточки (заказчик, 15 октября: «расширь блок с фото и видео
   на всю высоту плашки отзыва»); заглушка без фото — той же высоты, чтобы карточки
   с фото и без него выглядели одинаково. */
/* Растягиваем сам блок через грид (`align-self:stretch`), а высоту 100% задаём только
   содержимому: если поставить height:100% и на обёртку, она перестаёт тянуться и «плывёт». */
.cq-rev-card .cq-review-media{align-self:stretch}
.cq-rev-card .cq-review-media>*{height:100%;aspect-ratio:auto}
.cq-rev-card .cq-review-photos{height:100%}
.cq-rev-card .cq-review-photos.many{grid-template-rows:1fr 1fr}
.cq-rev-card .cq-review-photo,.cq-rev-card .cq-review-video-poster,
.cq-rev-card .cq-review-media.placeholder img{height:100%;object-fit:cover}
.cq-rev-card .cq-review-video{height:100%}
.cq-rev-card .cq-review-media.placeholder img{width:100%;display:block}
.cq-rev-body .cq-review-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.cq-rev-body .cq-review-meta{margin-top:auto}
.cq-rev-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.cq-rev-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:#cbd5e1;cursor:pointer}
.cq-rev-dot.active{background:#2563eb;transform:scale(1.15)}
.cq-rev-counter{text-align:center;font-size:12px;color:#6b7280;margin-top:6px}
.cq-review-media{margin:0;display:grid;grid-template-columns:1fr;gap:6px;align-content:center;min-width:0}
/* Фото и видео отзыва ставим рядом: друг под другом они делали карточку вдвое выше */
.cq-review-media.two{grid-template-columns:1fr 1fr}
.cq-review-media.two>*{aspect-ratio:16/9}
/* Пропорцию 16:9 держим жёстко: содержимое не должно растягивать блок (в замере выходило
   300×424 — картинки перебивали aspect-ratio, поэтому overflow:hidden и явные строки сетки). */
.cq-review-photos{display:grid;grid-template-columns:1fr;gap:4px;aspect-ratio:16/9;overflow:hidden}
.cq-review-photos.many{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.cq-review-photos.many .cq-review-photo:first-child{grid-column:1 / -1}
.cq-review-photo{width:100%;height:100%;min-height:0;display:block;border-radius:12px;object-fit:cover;cursor:zoom-in}
.cq-review-video{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#0f172a}
.cq-review-video-poster{width:100%;height:100%;display:block;object-fit:cover}
.cq-review-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;
  border-radius:50%;border:none;background:rgba(17,24,39,.72);color:#fff;font-size:19px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.cq-review-play:hover{background:rgba(17,24,39,.88)}
/* Медиа отзыва миниатюрами на странице квеста: одна строка под текстом, чтобы отзыв остался
   компактным; хвост, который не влез, мягко уходит в размытие. Фото открываются в общем
   слайдере, видео — в проигрывателе (заказчик, 19 октября). */
.cq-review-thumbs{position:relative;display:flex;flex-wrap:nowrap;gap:6px;margin:10px 0 0;max-height:56px;overflow:hidden}
.cq-review-thumb{width:56px;height:56px;flex:0 0 56px;border-radius:12px;object-fit:cover;display:block;
  border:0;padding:0;cursor:zoom-in;background:#f4f1ea center/cover no-repeat}
.cq-review-thumb-video{cursor:pointer;background:linear-gradient(135deg,#2C251D,#17140F) center/cover no-repeat}
/* видео-миниатюра переиспользует класс кнопки ▶, но в ряду она маленькая, а не по центру кадра */
.cq-review-thumb.cq-review-play{position:relative;left:auto;top:auto;transform:none;width:56px;height:56px;
  border-radius:12px;background-color:#17140F;display:grid;place-items:center}
.cq-review-thumb-play{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#231c14;font-size:11px;line-height:1;padding-left:1px}
.cq-review-thumbs.is-overflow{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),rgba(0,0,0,.25) 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),rgba(0,0,0,.25) 100%)}
.cq-review-thumbs.is-overflow::after{content:"";position:absolute;top:0;right:0;bottom:0;width:52px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.62));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body.dark .cq-review-thumbs.is-overflow::after{background:linear-gradient(90deg,rgba(30,41,59,0),rgba(30,41,59,.7))}
body.dark.style-v2 .cq-review-thumbs.is-overflow::after{background:linear-gradient(90deg,rgba(38,36,31,0),rgba(38,36,31,.7))}
/* Проигрыватель видео отзыва: общий для главной, страницы квеста и кабинета */
.cq-video-layer{position:fixed;inset:0;z-index:3200;display:none;align-items:center;justify-content:center;
  background:rgba(8,10,18,.92);padding:18px}
.cq-video-layer.open{display:flex}
.cq-video-box{position:relative;width:min(92vw,900px)}
.cq-video-player{width:100%;max-height:82vh;display:block;border-radius:14px;background:#0b1020}
.cq-video-close{position:absolute;top:-14px;right:-14px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.16);color:#fff;font-size:24px;
  line-height:1;cursor:pointer;font-family:inherit}
body.cq-video-open{overflow:hidden}
.cq-review-title{font-size:16px;margin:0}
/* Нижняя строка карточки: слева аватар и имя, справа источник (город · квест).
   Как в каруселях отзывов у коммерческих сайтов — данные автора всегда видны. */
.cq-review-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:#f8fafc}
.cq-review-stars{display:flex;align-items:center;gap:10px;margin:0}
.cq-review-author{display:flex;align-items:center;gap:8px;min-width:0}
.cq-review-tags{font-size:12.5px;color:#6b7280;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cq-review-quest{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(107,114,128,.5)}
.cq-review-quest:hover{color:#111;border-bottom-color:#111}
.cq-review-name{font-size:13.5px;font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.cq-review-date{font-size:12px;color:#6b7280;letter-spacing:0}
.cq-review-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:#dbeafe}
.cq-review-avatar-empty{display:inline-block;border:1px solid #cbd5e1}
body.dark .cq-rev-arrow{background:#1e293b;border-color:#334155;color:#e5e7eb}
body.dark .cq-review-meta{background:#0f172a}
body.dark .cq-review-name{color:#e5e7eb}
body.dark .cq-rev-dot{background:#475569}
body.dark .cq-rev-dot.active{background:#60a5fa}
@media (max-width:900px){
  .cq-rev-card{grid-template-columns:minmax(0,240px) minmax(0,1fr)}
}
@media (max-width:640px){
  /* на телефоне — в одну колонку, высота по содержимому */
  .cq-rev-head{align-items:center}
  .cq-rev-arrow{width:36px;height:36px;font-size:18px}
  .cq-rev-card{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
  .cq-rev-body{height:auto}
  .cq-rev-body .cq-review-text{-webkit-line-clamp:8}
  .cq-rev-body .cq-review-meta{margin-top:0}
  .cq-video-close{top:6px;right:6px}
}

/* ============ ОТЗЫВЫ: ФОРМА, КАБИНЕТ ============ */
.review-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:4px}
.review-tag{background:#dbeafe;color:#1d4ed8;font-size:12px;padding:4px 10px;border-radius:11px}
.review-media-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.review-media-list{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.review-photo{position:relative;display:inline-block;width:64px;height:64px}
.review-photo img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.review-photo-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
  border:none;background:#111827;color:#fff;font-size:12px;line-height:1;cursor:pointer}
.review-video-chip{display:inline-flex;align-items:center;gap:8px;background:#0f172a;color:#fff;
  font-size:12px;padding:8px 12px;border-radius:10px}
.review-video-chip button{border:none;background:transparent;color:#fff;cursor:pointer;font-size:14px}
.review-media-note{font-size:12px;color:#6b7280;margin-bottom:8px}
.review-media-note-error{color:#b91c1c}
.review-email-wrap{margin-bottom:10px}
.review-email-wrap input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #d4d4d4;font-family:inherit;font-size:14px}
.review-email-wrap small{display:block;color:#6b7280;font-size:12px;margin-top:4px}
.review-note{font-size:12px;color:#6b7280;text-align:center;margin-top:8px}
.user-line{display:flex;align-items:center;gap:12px}
.cabinet-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#dbeafe;flex:none}
.cabinet-avatar-card{margin-bottom:16px}
.cabinet-hint{color:#6b7280;font-size:12.5px}
.avatar-picker{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.avatar-choice{width:52px;height:52px;padding:0;border-radius:50%;border:2px solid transparent;background:none;cursor:pointer}
.avatar-choice img{width:100%;height:100%;border-radius:50%;display:block}
.avatar-choice.active{border-color:#2563eb}
.avatar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cabinet-reviews-card{margin-bottom:16px}
.my-review{border-top:1px solid #e5e7eb;padding:10px 0}
.my-review:first-child{border-top:none}
.my-review-head{display:flex;align-items:center;gap:10px;color:#f59e0b;letter-spacing:2px}
.my-review-status{color:#6b7280;font-size:12px;letter-spacing:0}
.my-review-quest{font-size:13px;font-weight:600;margin-top:2px}
.my-review-text{font-size:13.5px;color:#4b5563;margin-top:4px;white-space:pre-wrap}
.my-review-photos{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.my-review-photos img{width:64px;height:64px;object-fit:cover;border-radius:10px}
/* Вложения отзыва — компактными миниатюрами под текстом (заказчик, 15 октября):
   и в кабинете, и на странице квеста. Видео — такая же миниатюра с кнопкой ▶. */
.my-review-files .cq-review-media,.review-files .cq-review-media{margin:8px 0 0}
.my-review-files .cq-review-photos,.review-files .cq-review-photos{display:flex;gap:6px;aspect-ratio:auto;overflow:visible;flex-wrap:wrap}
.my-review-files .cq-review-photo,.review-files .cq-review-photo{width:68px;height:68px;flex:none;border-radius:10px}
.my-review-files .cq-review-video,.review-files .cq-review-video{width:96px;height:68px;flex:none;aspect-ratio:auto;border-radius:10px}
.my-review-files .cq-review-play,.review-files .cq-review-play{width:30px;height:30px;font-size:13px}
/* самая заметная кнопка в карточке пройденного квеста */
.btn-review{background:#f59e0b;border:none;color:#fff;font-weight:700;padding:10px 16px;border-radius:12px;
  cursor:pointer;box-shadow:0 3px 12px rgba(245,158,11,.35)}
.btn-review:hover{background:#d97706}
/* модерация отзывов: видно, какие фото и видео приложил игрок */
.admin-review-photos{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.admin-review-photos img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.admin-review-video video{max-width:280px;border-radius:8px;margin:6px 0}
body.dark .review-tag{background:#1e3a8a;color:#bfdbfe}
body.dark .review-email-wrap input{background:#0f172a;border-color:#334155;color:#e5e7eb}
body.dark .my-review{border-color:#334155}
body.dark .my-review-text{color:#cbd5e1}

/* ============ ДЕМО-КВЕСТ НА КОМПЬЮТЕРЕ: РАМКА ТЕЛЕФОНА ============
   С телефона и планшета рамки нет — там игра и так на весь экран. */
body.cq-phone{background:#eef1f6;display:block;padding:24px 0 40px}
body.cq-phone .cq-phone-shell{max-width:430px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
body.cq-phone .cq-phone-body{position:relative;background:#0f172a;border-radius:46px;padding:14px 12px;
  box-shadow:0 26px 60px rgba(15,23,42,.35), inset 0 0 0 2px #334155}
body.cq-phone .cq-phone-screen{width:390px;height:780px;background:#fff;border-radius:36px;overflow-y:auto;
  overflow-x:hidden;position:relative;transform:translateZ(0);scrollbar-width:none;-ms-overflow-style:none}
/* В эмуляции телефона полоса прокрутки не нужна: экран и так маленький, а полоса «съедает»
   ширину и выглядит как край корпуса (заказчик, 19 октября: «в эмуляции полоса скрола осталась»). */
body.cq-phone .cq-phone-screen::-webkit-scrollbar{width:0;height:0}
body.cq-phone .cq-phone-speaker{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:96px;height:8px;border-radius:6px;background:#0b1220}
body.cq-phone .cq-phone-home{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:120px;height:5px;border-radius:4px;background:#1f2937}
body.cq-phone .cq-phone-caption{max-width:400px;margin:16px auto 0;text-align:center;color:#64748b;
  font-size:13px;line-height:1.5}
/* внутри телефона прячем «сайтовые» полосы и растягиваем игровые блоки на экран
   (.cq-footer — серверный подвал, который рисует app/chrome.py) */
body.cq-phone .site-header,body.cq-phone .site-footer,body.cq-phone .cq-footer{display:none}
body.cq-phone .play-header,body.cq-phone .subbar{padding-left:12px;padding-right:12px}
body.cq-phone main,body.cq-phone .play-main,body.cq-phone .wrap{width:auto;max-width:none;margin:0;padding:0 12px}
body.cq-phone .modal-content{max-width:340px;max-height:640px;overflow-y:auto}
body.dark.cq-phone{background:#0b1220}
body.dark.cq-phone .cq-phone-screen{background:#0f172a}
/* 19 октября: окна и обложка паузы живут в отдельном непрокручиваемом слое над экраном.
   Раньше они лежали внутри прокручиваемого экрана: при прокрутке прижимались к верхней панели,
   а под обложкой паузы было видно игру. */
body.cq-phone .cq-phone-overlay{position:absolute;inset:14px 12px;border-radius:36px;overflow:hidden;
  transform:translateZ(0);z-index:1200;pointer-events:none}
body.cq-phone .cq-phone-overlay>*{pointer-events:auto}
body.cq-phone .cq-phone-overlay .modal{overscroll-behavior:contain}
body.cq-phone .cq-phone-overlay .modal-content{max-height:calc(100% - 24px);overscroll-behavior:contain}
/* пока открыто окно — не прокручиваем игру под ним (ни экран телефона, ни страницу) */
body.cq-phone.cq-emu-modal{overflow:hidden}
body.cq-phone.cq-emu-modal .cq-phone-screen{overflow:hidden}
/* в рамке верхние панели не залипают: экран маленький, иначе они наезжают на кнопку карты */
body.cq-phone .play-header,body.cq-phone .subbar{position:static;top:auto}
/* ширина в рамке телефонная, а медиазапросы видят десктоп — включаем телефонные правила вручную */
body.cq-phone .play-top-row{flex-wrap:wrap;gap:6px}
body.cq-phone .route-toggle-bar{flex-wrap:wrap;gap:6px;justify-content:flex-end}
body.cq-phone .play-top-row .btn-route-toggle,
body.cq-phone #btn-map-center.btn-map{padding:7px 11px;font-size:12.5px}

/* ============ ВЫБОР ВИДА ПЕРЕДВИЖЕНИЯ НА ОБЛОЖКЕ ============
   Владимир (15:00): вернуть выбору прежний вид — иконка и название вида, а маленький
   значок со всеми видами с обложки убрать (он убран в questMetaChips).
   Плашка выбранного вида в шапке игры остаётся компактной иконкой. */
.cover-transport-options{gap:10px}
.cover-transport-option{min-height:54px;padding:10px 16px;border-radius:16px;font-size:15px}
.cover-transport-icon{font-size:22px}
.cover-transport-name{font-weight:600;white-space:nowrap}
.transport-icon{font-size:16px;line-height:1}

/* ============ №17: ТЁМНАЯ ТЕМА — ФАКТЫ И ДРУГИЕ МЕСТА ============
   Факт в окне был с цветом в разметке (#333) и в тёмной теме читался плохо. */
.fact-modal-text{font-size:15px;line-height:1.65;color:#333;overflow-wrap:anywhere}
body.dark .fact-modal-text{color:#cbd5e1}
body.dark .fact-modal-img{background:#0f172a}
body.dark .badge-tag.free{background:#14532d;color:#86efac}
body.dark .badge-tag.demo{background:#4c1d95;color:#ddd6fe}
body.dark .badge-tag.sale{background:#7f1d1d;color:#fecaca}
body.dark .quest-chip{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .quest-chip .m{color:#94a3b8}
body.dark .quest-chip.active{border-color:#f1f5f9}
body.dark .page-html{color:#e2e8f0}
body.dark .answer-note{color:#fbbf24}
body.dark .rate-hint{color:#fca5a5}
body.dark .photo-block{border-color:#334155}
body.dark .hints-bar .btn-hint{background:#422006;color:#fde68a;border-color:#78350f}
body.dark .link-btn{color:#93c5fd}
/* факты в карточке прохождения в кабинете: раньше цвет был в разметке */
.cabinet-fact{background:#f9fafb;padding:10px;border-radius:8px;margin-top:8px}
body.dark .cabinet-fact{background:#0f172a}
body.dark .cabinet-fact b{color:#f1f5f9}

/* ============ №16: МОБИЛЬНАЯ КОМПОНОВКА БЛОКОВ ВОПРОСА (iPhone 11 и уже) ============
   Длинные строки переносятся (никакой горизонтальной прокрутки страницы),
   факты-плашки ограничены тремя строками и прокручиваются, фото не растягивает карточку. */
@media(max-width:520px){
.question-text{font-size:17px;line-height:1.45;overflow-wrap:anywhere}
.approach-text,.answered-note,.fact-text,.fact-title,.hint-item,.photo-caption,.route-photo-caption,.wrong-chip,.cq-review-text{overflow-wrap:anywhere;word-break:break-word}
.card{padding-left:14px;padding-right:14px}
.hints-bar{justify-content:flex-start;flex-wrap:wrap;gap:8px}
.btn-hint{flex:1 1 46%;text-align:center;font-size:13.5px}
.photo-block img{height:auto;max-height:42vh}
.answer-input{font-size:16px}
/* факты вопроса: три строки плашек и прокрутка, дальше видно, что есть ещё */
.facts-tabs{justify-content:flex-start;max-height:6.6em;overflow-y:auto;-webkit-overflow-scrolling:touch}
.fact-tab{max-width:88vw}
.wrong-chips{max-height:5.6em}
/* фото ориентиров: ужимаются в строки с подписями (задача №21) */
.route-photos{flex-wrap:wrap;overflow:visible;padding-bottom:0}
.route-photo-item{flex:1 1 100%;min-width:0;max-width:none}
.route-photo-item img{height:64px}
.cover-transport-options{gap:8px}
.cover-transport-option{min-height:48px;padding:8px 12px;font-size:14px;flex:1 1 auto;justify-content:center}
.cq-overlay-bar,.cq-cover-meta{max-width:100%}
.cq-review{padding:14px}
}

/* ============ БЛОК C: ПЛАШКА «У ВАС НА ПУТИ», СЛАЙДЕР ФОТО, ПЛАШКИ-ПРЕДУПРЕЖДЕНИЯ, КОМПАС ============ */

/* №21: «у вас на пути» — плашка под фото ориентиров и под фото вопроса.
   Снизу отступ не нужен: расстояние до карточки задаёт .distance-box (margin-top),
   иначе отступы складываются и появляется лишняя дыра. */
.path-pois-strip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#eef2ff;border:1px solid #c7d2fe;border-radius:14px;padding:10px 12px;margin:10px 0 0;cursor:pointer;font-family:inherit}
.path-pois-strip:hover{background:#e0e7ff}
.path-pois-strip-ico{font-size:20px;flex:none}
.path-pois-strip-text{flex:1;min-width:0}
.path-pois-strip-text b{display:block;font-size:14.5px;color:#1e3a8a}
.path-pois-strip-text small{display:block;font-size:12px;color:#4b5563;margin-top:2px}
body.dark .path-pois-strip{background:#1e1b4b;border-color:#3730a3}
body.dark .path-pois-strip:hover{background:#312e81}
body.dark .path-pois-strip-text b{color:#c7d2fe}
body.dark .path-pois-strip-text small{color:#a5b4fc}

/* фото ориентиров — строки с подписями */
.route-photos{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.route-photo-item{display:flex;align-items:center;gap:10px;background:#f9fafb;border:1px solid #e5e5e5;border-radius:12px;padding:8px 10px;overflow:visible}
.route-photo-item img{width:76px;height:58px;border-radius:9px;object-fit:cover;flex:none}
.route-photo-caption{padding:0;font-size:13px;color:#374151;line-height:1.45}

/* №22: слайдер фото вопроса — большая картинка, стрелки и лента миниатюр.
   Миниатюры — только картинки, без подписей (Владимир, 13 октября): текст и так виден
   под большим фото, в ленте он только мешал. Полосу прокрутки убрали — лента тянется
   пальцем или мышью, кадры «прилипают», по краям мягкое затухание. */
.photo-slider{position:relative;background:#0f172a}
.photo-thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px 12px;background:#f9fafb;border-top:1px solid #e5e5e5;
  scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.photo-thumbs::-webkit-scrollbar{display:none;width:0;height:0}
.photo-thumbs:active{cursor:grabbing}
.photo-thumb{display:block;background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:3px;cursor:pointer;font-family:inherit;flex:none;scroll-snap-align:center;transition:border-color .15s,box-shadow .15s}
.photo-thumb img{display:block;width:64px;height:48px;border-radius:9px;object-fit:cover}
.photo-thumb.active{border-color:#111;box-shadow:0 0 0 2px rgba(17,17,17,.18)}
.photo-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.photo-nav:hover{background:rgba(0,0,0,.72)}
.photo-nav.prev{left:8px}
.photo-nav.next{right:8px}
.photo-nav svg,.cq-lb-arrow svg,.slider-btn svg{display:block}
body.dark .photo-thumbs{background:#0f172a;border-top-color:#334155}
body.dark .photo-thumb{background:#1e293b;border-color:#334155}
body.dark .photo-thumb.active{background:#334155;border-color:#f1f5f9}
body.dark .route-photo-item{background:#0f172a;border-color:#334155}
body.dark .route-photo-caption{color:#cbd5e1}

/* №6: на пройденном вопросе обе кнопки сразу */
.answered-actions{display:flex;gap:8px;flex-wrap:wrap}
.answered-actions .btn{flex:1 1 46%}
.answered-actions .btn.finish{background:#16a34a}

/* №1/№2/№3: плашки-предупреждения вверху, как «нет связи» */
.cq-notices{display:flex;flex-direction:column;gap:8px}
.cq-notices:empty{display:none}
.cq-notice{display:flex;align-items:flex-start;gap:10px;background:#334155;color:#fff;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5}
.cq-notice.warn{background:#fef3c7;color:#78350f;border:1px solid #fcd34d}
.cq-notice.good{background:#dcfce7;color:#166534}
.cq-notice span{flex:1;min-width:0;overflow-wrap:anywhere}
.cq-notice-close{background:none;border:none;color:inherit;font-size:18px;line-height:1;cursor:pointer;padding:0 2px;flex:none;opacity:.75}
.cq-notice-close:hover{opacity:1}
body.dark .cq-notice.warn{background:#422006;color:#fde68a;border-color:#78350f}
body.dark .cq-notice.good{background:#052e21;color:#a7f3d0}
.badge-link{background:none;border:none;color:#fef08a;text-decoration:underline;cursor:pointer;font-family:inherit;font-size:13px;padding:0}

/* №20: компас на подходе к точке.
   Владимир (15:40): компас живёт внутри карточки с расстоянием, поэтому своей карточки нет —
   только тонкая линия-разделитель. Цифра «до точки» выше уже показана, второй раз не пишем. */
.compass-box{display:flex;align-items:center;gap:14px;border-top:1px dashed #e5e5e5;margin-top:12px;padding-top:12px}
.cq-compass{position:relative;width:74px;height:74px;flex:none;border-radius:50%;background:#fff;border:2px solid #d1d5db}
.cq-compass-ring{position:absolute;inset:6px;border-radius:50%;border:1px dashed #e5e7eb}
/* Стороны света: буквы стоят по кругу и не вращаются — вращается только стрелка */
.cq-compass-side{position:absolute;font-size:10px;font-weight:700;color:#9ca3af;line-height:1}
.cq-compass-side-n{top:2px;left:50%;transform:translateX(-50%);color:#dc2626}
.cq-compass-side-s{bottom:2px;left:50%;transform:translateX(-50%)}
.cq-compass-side-e{right:3px;top:50%;transform:translateY(-50%)}
.cq-compass-side-w{left:3px;top:50%;transform:translateY(-50%)}
.cq-compass-side-ne{top:11px;right:11px;font-size:8px;color:#cbd5e1}
.cq-compass-side-se{bottom:11px;right:11px;font-size:8px;color:#cbd5e1}
.cq-compass-side-sw{bottom:11px;left:11px;font-size:8px;color:#cbd5e1}
.cq-compass-side-nw{top:11px;left:11px;font-size:8px;color:#cbd5e1}
.cq-compass-dot{position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#111}
.cq-compass-needle{position:absolute;inset:0;transition:transform .25s ease}
.cq-compass-needle span{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:16px;color:#dc2626}
.cq-compass-info{flex:1;min-width:0}
/* «Компас» — крупно, почти как цифра расстояния рядом, и без значка (Владимир, 15:40) */
.cq-compass-title{font-size:17px;font-weight:700;color:#111;margin-bottom:2px}
/* Кнопка включения нужна только на iPhone: красная, в цвет стрелки, чтобы её было видно */
.cq-compass-enable{display:block;margin-top:8px;padding:9px 16px;border:none;border-radius:12px;background:#dc2626;color:#fff;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer}
.cq-compass-enable:hover{background:#b91c1c}
/* «О компасе» — лаконичная текстовая кнопка внизу блока вместо значка «?» */
.cq-compass-about{display:block;margin-top:8px;padding:0;border:none;background:none;color:#2563eb;font-size:12.5px;font-family:inherit;text-decoration:underline;cursor:pointer}
.cq-compass-about:hover{color:#1d4ed8}
.cq-compass-distance{font-size:15px;font-weight:700;color:#111;margin-top:2px}
.cq-compass-hint{font-size:12px;color:#6b7280;margin-top:4px;line-height:1.45}
body.dark .compass-box{border-color:#334155}
body.dark .cq-compass{background:#1e293b;border-color:#334155}
body.dark .cq-compass-dot{background:#f1f5f9}
body.dark .cq-compass-side{color:#64748b}
body.dark .cq-compass-side-n{color:#f87171}
body.dark .cq-compass-title,body.dark .cq-compass-distance{color:#f1f5f9}
body.dark .cq-compass-hint{color:#94a3b8}
body.dark .cq-compass-about{color:#93c5fd}
body.dark .cq-compass-enable{background:#dc2626;color:#fff}

/* ============ СПРАВКА О КОМПАСЕ (Владимир, 15:25) ============
   Короткое объяснение с двумя схемами: что показывает стрелка и как держать телефон. */
.compass-help-lead{font-size:14px;line-height:1.6;color:#374151;margin-bottom:14px}
#modal-compass-help h4{font-size:14px;font-weight:700;color:#111;margin:18px 0 8px}
#modal-compass-help p{font-size:13.5px;line-height:1.6;color:#4b5563;margin-bottom:10px}
.compass-figure{display:flex;gap:14px;align-items:center;background:#f9fafb;border:1px solid #e5e5e5;border-radius:14px;padding:12px 14px;margin:12px 0}
.compass-figure-text{font-size:13px;line-height:1.55;color:#4b5563}
.compass-figure-text b{display:block;color:#111;margin-bottom:2px}
.compass-figure-rose{position:relative;width:84px;height:84px;flex:none;border-radius:50%;background:#fff;border:2px solid #d1d5db}
.compass-figure-ring{position:absolute;inset:8px;border-radius:50%;border:1px dashed #e5e7eb}
.compass-figure-rose span{position:absolute;font-size:11px;font-weight:700;color:#6b7280;line-height:1}
.compass-figure-rose .cf-n{top:4px;left:50%;transform:translateX(-50%);color:#dc2626}
.compass-figure-rose .cf-s{bottom:4px;left:50%;transform:translateX(-50%)}
.compass-figure-rose .cf-e{right:5px;top:50%;transform:translateY(-50%)}
.compass-figure-rose .cf-w{left:5px;top:50%;transform:translateY(-50%)}
.compass-figure-needle{position:absolute;inset:0;transform:rotate(52deg)}
.compass-figure-needle:after{content:"▲";position:absolute;top:13px;left:50%;transform:translateX(-50%);font-size:18px;color:#dc2626}
.compass-figure-dot{position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#111}
.compass-figure-phone{width:56px;height:84px;flex:none;border:2px solid #d1d5db;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.compass-figure-phone:after{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:16px;height:2px;border-radius:2px;background:#d1d5db}
.compass-figure-phone-screen{width:38px;height:38px;border-radius:50%;border:1px dashed #e5e7eb;display:flex;align-items:center;justify-content:center}
.compass-figure-phone-arrow{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:20px solid #dc2626;transform:rotate(35deg)}
.compass-tips{font-size:13px;line-height:1.65;color:#4b5563;padding-left:18px;margin:6px 0 16px}
.compass-tips li{margin-bottom:6px}
body.dark .compass-help-lead,body.dark .compass-figure-text,body.dark #modal-compass-help p,body.dark .compass-tips{color:#cbd5e1}
body.dark #modal-compass-help h4,body.dark .compass-figure-text b{color:#f1f5f9}
body.dark .compass-figure{background:#0f172a;border-color:#334155}
body.dark .compass-figure-rose,body.dark .compass-figure-phone{background:#1e293b;border-color:#334155}
body.dark .compass-figure-rose span{color:#94a3b8}
body.dark .compass-figure-rose .cf-n{color:#f87171}

@media(max-width:520px){
.path-pois-strip-text small{display:none}
.path-pois-strip{padding:9px 10px}
/* на узком экране тот же зазор между плашкой «у вас на пути» и карточкой расстояния */
.distance-box{margin-top:16px}
.compass-box{flex-wrap:wrap}
.cq-compass{width:64px;height:64px}
/* миниатюры на телефоне: подписей нет, картинки чуть крупнее — по ним удобно попадать пальцем */
.photo-thumb img{width:60px;height:45px}
/* верхняя строка на узком экране: компактная плашка вида и кнопка карты в одну линию */
.play-top-row{gap:6px;flex-wrap:wrap}
.play-top-row .btn-route-toggle{padding:6px 10px;font-size:12px}
.play-top-row #demo-badge{padding:5px 9px;font-size:12px}
}

/* ============ ФОРМЫ: КРАСИВЫЙ БЛОК ВО ВСЮ ШИРИНУ (заказчик, 15 октября) ============
   «Формы на сайте сделай блоком красивым на всю ширину контейнера, как на нормальных
   коммерческих сайтах»: подписи над полями, поля во всю ширину блока, ровные отступы,
   одинаковая высота полей и заметная кнопка. Один набор правил на все формы сайта:
   регистрация, вход, восстановление пароля, покупка ключа, отзыв и заявки (школы, компании). */
.modal-content input:not([type=checkbox]):not([type=file]):not(.cq-lead-trap),
.modal-content textarea,
.modal-content select,
.cq-lead input:not([type=checkbox]):not([type=file]),
.cq-lead textarea,
.field input,.field textarea,.field select{
  width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;font-size:15px;line-height:1.35;
  font-family:inherit;color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:12px;
  transition:border-color .15s ease,box-shadow .15s ease}
.modal-content input::placeholder,.modal-content textarea::placeholder,.cq-lead input::placeholder{color:#9ca3af}
.modal-content input:not([type=checkbox]):not([type=file]):focus,
.modal-content textarea:focus,
.cq-lead input:not([type=checkbox]):not([type=file]):focus,
.cq-lead textarea:focus,
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}
.modal-content textarea,.cq-lead textarea{min-height:118px;resize:vertical}
/* Подписи над полями — одинаковые во всех формах (галочки согласий не трогаем) */
.modal-content label:not(.cq-consent):not(.cq-lead-consent),
.cq-lead label:not(.cq-consent):not(.cq-lead-consent),
.field label{display:block;font-size:13px;font-weight:600;color:#374151;margin:14px 0 6px;text-align:left}
.modal-content label:first-child,.cq-lead label:first-child{margin-top:0}
/* Кнопка формы — во всю ширину блока, как на коммерческих сайтах */
.modal-content .full-btn,.cq-lead-submit,.cq-lead .btn-primary{width:100%;min-height:48px;border-radius:12px;font-size:15px;font-weight:600;justify-content:center}
/* Окна с формами — шире, чтобы поля шли во всю ширину окна */
#modal-register .modal-content,#modal-login .modal-content,#modal-forgot .modal-content,
#modal-buy .modal-content,#modal-review .modal-content{max-width:560px}
/* Итог с монетами: одна зачёркнутая цена и итог со всеми скидками, без дубля «итого» */
.buy-price-coins{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.buy-price-promo{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.buy-price-coins small,.buy-price-promo small{flex-basis:100%;font-size:12px;line-height:1.4}
/* Цена в окне покупки — крупно и отдельным блоком, чтобы было видно до ввода email */
.buy-modal-price{margin:2px 0 16px;padding:12px 16px;border-radius:14px;background:#f8f5ee;
  font-size:32px;line-height:1.15;font-weight:800;color:#1e1c1a;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.buy-modal-price span{font-size:32px}
.buy-modal-price small{font-size:12px;font-weight:600;color:#6b7280}
.buy-modal-price-old{font-size:17px;font-weight:500;color:#9ca3af}
body.dark .buy-modal-price{background:rgba(255,255,255,.06);color:#f1f5f9}
body.dark .buy-modal-price small{color:#94a3b8}
/* Заявка: блок во всю ширину контейнера, на широком экране поля в две колонки */
.cq-lead{display:grid;gap:14px;width:100%;text-align:left}
.cq-lead-row{display:grid;gap:12px}
@media (min-width:700px){.cq-lead-row{grid-template-columns:1fr 1fr}}
.cq-lead-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
body.dark .modal-content input:not([type=checkbox]):not([type=file]),
body.dark .modal-content textarea,body.dark .cq-lead input:not([type=checkbox]):not([type=file]),
body.dark .cq-lead textarea,body.dark .field input,body.dark .field textarea{
  background:#0f172a;color:#e2e8f0;border-color:#334155}
body.dark .modal-content label:not(.cq-consent):not(.cq-lead-consent),
body.dark .cq-lead label:not(.cq-consent):not(.cq-lead-consent),
body.dark .field label{color:#cbd5e1}
body.dark .modal-content input:focus,body.dark .modal-content textarea:focus,
body.dark .cq-lead input:focus,body.dark .cq-lead textarea:focus,
body.dark .field input:focus,body.dark .field textarea:focus{border-color:#e2e8f0;box-shadow:0 0 0 3px rgba(226,232,240,.14)}

/* ============ ХЛЕБНЫЕ КРОШКИ (заказчик, 15 октября) ============
   Лаконичная строка мелким текстом: «Главная › Кабинет › Пройденная игра». Собирает сервер
   (app/chrome.py), поэтому видны сразу; в игре и админке крошек нет.
   На страницах-контенте крошки стоят ПОД баннером и по отступу совпадают с блоком контента
   (`.page-inner`), на остальных страницах — под шапкой в широком контейнере (`.wrap`).
   Высота строки одинаковая везде, поэтому крошки не «прыгают» между страницами. */
/* Отступ под крошками: на странице итогов игры плашка прижималась к ним вплотную,
   особенно в мобилке (заказчик, 16 октября: «хлебные крошки на странице итогов игры —
   сделай отступ от плашки небольшой, сейчас зажато в мобилке»). */
.cq-crumbs{font-size:13px;line-height:1.4;color:#6b7280;margin:16px 0 14px}
.cq-crumbs .wrap,.cq-crumbs .page-inner{padding-top:0;padding-bottom:0}
.cq-crumbs a{color:#6b7280;text-decoration:none}
.cq-crumbs a:hover{color:#111827;text-decoration:underline}
.cq-crumb-sep{margin:0 8px;color:#cbd5e1}
.cq-crumb-current{color:#111827}
body.dark .cq-crumbs{color:#94a3b8}
body.dark .cq-crumbs a{color:#94a3b8}
body.dark .cq-crumbs a:hover{color:#e2e8f0}
body.dark .cq-crumb-sep{color:#475569}
body.dark .cq-crumb-current{color:#e2e8f0}
@media (max-width:640px){.cq-crumbs{font-size:12.5px;margin:10px 0 12px}}

/* ============ БЛОК D: СОГЛАСИЕ НА ОБРАБОТКУ ДАННЫХ (задача №14) ============
   Сквозная галочка у всех форм: одинаковая на вид, со ссылкой на политику.
   С 15 октября — аккуратно и компактно (заказчик: «чекбоксы согласий сделать более аккуратно
   и компактно, галочки ровно с текстом, перенос с новой строки, все отступы выдержать»):
   сетка из двух колонок — галочка и текст; галочка стоит ровно на первой строке, перенос идёт
   под текстом (вторая строка начинается там же, где первая), отступы одинаковые во всех формах,
   включая заявки (`.cq-lead-consent`), где раньше стиля не было вовсе. */
.cq-consent,.cq-lead-consent{display:grid;grid-template-columns:16px 1fr;column-gap:8px;row-gap:2px;align-items:start;font-size:12.5px;color:#4b5563;line-height:1.45;margin:8px 0 0;cursor:pointer;text-align:left;text-indent:0}
.cq-consent input,.cq-lead-consent input{width:16px;height:16px;margin:1px 0 0;padding:0;flex:none;accent-color:#111}
.cq-consent span,.cq-lead-consent span{display:block;min-width:0}
.cq-consent a,.cq-lead-consent a{color:#2563eb}
.cq-consent .badge-link{vertical-align:baseline}
/* последняя галочка в блоке отделяется от кнопки формы одинаково везде */
.cq-consent:last-of-type,.cq-lead-consent:last-of-type{margin-bottom:12px}
.cq-consent[data-consent="offer"],.cq-lead-consent[data-consent="offer"]{color:#6b7280}
body.dark .cq-consent,body.dark .cq-lead-consent{color:#94a3b8}
body.dark .cq-consent a,body.dark .cq-lead-consent a{color:#93c5fd}
body.dark .cq-consent[data-consent="offer"],body.dark .cq-lead-consent[data-consent="offer"]{color:#a1a1aa}
body.dark .cq-consent input,body.dark .cq-lead-consent input{accent-color:#f1f5f9}
/* Ссылки на документы в формах, где персональные данные не собираются (вход по ключу, вход
   в кабинет): галочка не нужна, но условия должны быть на виду. */
.cq-consent-links{font-size:12.5px;color:#6b7280;line-height:1.6;margin:12px 0 4px;text-align:center}
.cq-consent-links a{color:#2563eb}
body.dark .cq-consent-links{color:#94a3b8}
body.dark .cq-consent-links a{color:#93c5fd}
/* Юридические документы в подвале: оферта, политика, правила монет */
.cq-footer-legal{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:10px 0 0;font-size:13px}
.cq-footer-legal a{color:#a1a1aa}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:12px 0 0;font-size:13px}
.footer-legal a{color:#a1a1aa}
@media(max-width:520px){
/* справка о компасе: схемы чуть компактнее, чтобы текст не уезжал под край */
.compass-figure{gap:10px;padding:10px 12px}
.compass-figure-rose{width:70px;height:70px}
}

/* ============ КВЕСТ В ПОДАРОК (Владимир, 12 октября) ============
   Кнопка в карточке квеста + окно с короткой инструкцией + подборка квестов на странице. */
.quest-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* «Подарить» — компактная иконка, а не широкая кнопка (заказчик, 15 октября: «сделай меньше,
   может просто значок подарка»). Подсказка остаётся в title/aria-label. */
.btn-gift{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background:#fef3c7;color:#78350f;border:1px solid #fcd34d;border-radius:10px;padding:0;font-size:17px;line-height:1;white-space:nowrap;cursor:pointer}
.btn-gift:hover{background:#fde68a}
.btn-gift:focus-visible{outline:2px solid #b45309;outline-offset:2px}
body.dark .btn-gift{background:#422006;color:#fde68a;border-color:#a16207}
body.dark .btn-gift:hover{background:#4d2807}

.cq-gift-modal{max-width:540px}
.cq-gift-head{font-size:22px;font-weight:800;margin-bottom:10px}
.cq-gift-lead{font-size:15px;line-height:1.65;color:#374151;margin-bottom:14px}
.cq-gift-steps{margin:0 0 14px 20px;padding:0;font-size:15px;line-height:1.6;color:#1f2937}
.cq-gift-steps li{margin-bottom:6px}
.cq-gift-note{background:#fef3c7;border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.55;color:#78350f;margin-bottom:16px}
.cq-gift-actions{display:flex;gap:10px;flex-wrap:wrap}
body.modal-open{overflow:hidden}
/* Пока открыто окно входа/регистрации, страница под ним не прокручивается —
   на телефоне это особенно мешало (заказчик, 22 октября). */
body.modal-open .modal{overscroll-behavior:contain}
body.modal-open .modal-content{overscroll-behavior:contain}
@media(max-width:860px){
  body.modal-open{height:100%;overscroll-behavior:none}
}
body.dark .cq-gift-head{color:#f1f5f9}
body.dark .cq-gift-lead,body.dark .cq-gift-steps{color:#cbd5e1}
body.dark .cq-gift-note{background:#422006;color:#fde68a}

.page-quests .quests-grid{margin-top:16px}
.page-quests-note{margin-top:16px;font-size:14px;color:#6b7280}
.page-quests-note a{color:#2563eb}
body.dark .page-quests-note{color:#94a3b8}
body.dark .page-quests-note a{color:#93c5fd}
/* Иллюстрации страницы показываем целиком: у них важны и шарики сверху, и ноги снизу */
.page-gallery img[src*="podarok-"],.page-card img[src*="podarok-"]{object-fit:cover;object-position:center 38%}

/* ============ ОБЩАЯ ШАПКА, КОНТЕЙНЕР И КОЛОНКА КОНТЕНТА (Владимир, 13 октября) ============
   Раньше на страницах было несколько разных шапок, а класс .wrap вообще не имел стилей:
   контент внутренних страниц растягивался на всю ширину окна. Теперь одна шапка на весь сайт,
   один контейнер, а на страницах структуры — баннер во всю ширину и узкая колонка текста. */
.wrap{max-width:1140px;margin:0 auto;padding:0 20px;width:100%}

.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);border-bottom:1px solid #eee;backdrop-filter:blur(12px)}
.header-inner{max-width:1140px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
.header-inner .logo{font-weight:700;font-size:17px;color:#111;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.header-inner .logo:hover{color:#111}
.main-nav{display:flex;align-items:center;gap:20px;font-size:14px;margin-left:auto;min-width:0}
.main-nav>a{color:#374151;text-decoration:none;white-space:nowrap}
.main-nav>a:hover{color:#111}
.cq-nav-admin{color:#9ca3af!important;font-size:12.5px}
.main-nav .cq-menu{display:flex;align-items:center}
.main-nav .cq-menu-list{gap:20px}
.header-actions{display:flex;align-items:center;gap:8px;flex:none}
.btn-key{display:inline-flex;align-items:center;gap:6px;background:#111;color:#fff;border:none;border-radius:10px;padding:8px 13px;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.btn-key:hover{background:#333}
.theme-btn{background:#f3f4f6;color:#111;border:1px solid #e5e7eb;border-radius:10px;padding:8px 11px;font-size:14px;cursor:pointer}
.cq-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:42px;height:38px;padding:0 10px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer}
.cq-burger span{display:block;height:2px;border-radius:2px;background:#111}
body.cq-nav-open .cq-burger{background:#f3f4f6}

/* Телефон и планшет: всё меню уезжает в гамбургер, кнопка ключа и тема остаются в шапке */
@media(max-width:860px){
.header-inner{padding:10px 14px;gap:10px}
.header-inner .logo{font-size:16px}
.main-nav{display:none}
.cq-burger{display:inline-flex}
body.cq-nav-open .main-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;margin:0;padding:8px 16px 14px;background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 18px 34px rgba(15,23,42,.14);z-index:130;max-height:78vh;overflow-y:auto}
body.cq-nav-open .main-nav>a{padding:12px 4px;font-size:15.5px;border-bottom:1px solid #f1f5f9}
body.cq-nav-open .main-nav .cq-menu,
body.cq-nav-open .main-nav .cq-menu-list{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}
body.cq-nav-open .main-nav .cq-menu-item>a{padding:12px 4px;font-size:15.5px;border-bottom:1px solid #f1f5f9;display:block}
body.cq-nav-open .main-nav .cq-menu-sub{position:static;box-shadow:none;border:none;padding:0 0 0 12px}
body.cq-nav-open .cq-nav-admin{padding:12px 4px;font-size:14px}
}
body.dark .site-header{background:rgba(15,23,42,.96);border-bottom-color:#1e293b}
body.dark .header-inner .logo{color:#f1f5f9}
body.dark .main-nav>a{color:#cbd5e1}
body.dark .theme-btn{background:#1e293b;color:#e2e8f0;border-color:#334155}
body.dark .cq-burger{background:#1e293b;border-color:#334155}
body.dark .cq-burger span{background:#e2e8f0}
body.dark.cq-nav-open .main-nav{background:#0f172a;border-bottom-color:#1e293b}
body.dark.cq-nav-open .main-nav>a{border-bottom-color:#1e293b}

/* Страницы структуры сайта: баннер во всю ширину, текст — колонка, удобная для чтения */
.page{padding:0 0 56px}
.page-inner{max-width:880px;margin:0 auto;padding:0 22px}
.page .page-hero{margin:0 0 30px;border-radius:0}
.page .page-hero-inner{max-width:880px;margin:0 auto;padding:48px 22px}
.page section{padding:0}
.page-cta{max-width:880px;margin:26px auto 0}
@media(max-width:600px){
.page-inner{padding:0 16px}
.page .page-hero-inner{padding:34px 16px}
}

/* ============ QR-КОД КЛЮЧА («поделиться игрой») ============
   Владимир, 13 октября: у ключа в кабинете — кнопка «📱 QR», в игре рядом с паузой — «➕ Друг».
   Одно окно на весь сайт, картинку отдаёт сервер (/api/keys/<ключ>/qr.svg). */
.key-qr-image{margin:6px auto 0;width:248px;max-width:100%;min-height:180px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:14px}
.key-qr-image img{display:block;width:248px;max-width:100%;height:auto;border-radius:10px}
.key-qr-link{margin-top:12px;font-size:12px;color:#6b7280;word-break:break-all;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;text-align:left}
body.dark .key-qr-image{background:#f8fafc}
body.dark .key-qr-link{background:#0f172a;border-color:#334155;color:#94a3b8}
@media(max-width:420px){
.key-qr-image{width:200px}
.key-qr-image img{width:200px}
}

/* ============ БЛОКИ-ВХОДЫ «О МЕСТЕ» И «ВОКРУГ» (вариант A) ============
   Владимир, 13 октября: два аккуратных блока с тегами между фото и вопросом; на подходе —
   только «Вокруг». Высота ряда ~76 px, на телефоне блоки остаются рядом. */
.cq-info-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 14px}
.cq-info-tiles .cq-tile:only-child{grid-column:1 / -1}
.cq-tile{position:relative;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;background:#f8f9fc;border:1px solid #e7e9ef;border-radius:14px;padding:10px 12px 11px;cursor:pointer;font-family:inherit;transition:border-color .18s,box-shadow .18s,transform .18s}
.cq-tile:hover{border-color:#d9dcea;box-shadow:0 6px 18px rgba(17,24,39,.07);transform:translateY(-1px)}
.cq-tile-tag{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.cq-tile-facts{background:#faf7ff;border-color:#e4dcfb}
.cq-tile-facts .cq-tile-tag{color:#6d28d9}
.cq-tile-around{background:#f5f8ff;border-color:#dbe4fd}
.cq-tile-around .cq-tile-tag{color:#1d4ed8}
.cq-tile-icon{position:absolute;top:9px;right:11px;font-size:17px;opacity:.85}
.cq-tile-title{font-size:14px;font-weight:700;color:#111827;padding-right:22px}
.cq-tile-meta{font-size:12px;color:#6b7280}
body.dark .cq-tile{background:#0f172a;border-color:#334155}
body.dark .cq-tile-title{color:#e2e8f0}
body.dark .cq-tile-meta{color:#94a3b8}
body.dark .cq-tile-facts{background:#1b1533;border-color:#3b2f6b}
body.dark .cq-tile-facts .cq-tile-tag{color:#c4b5fd}
body.dark .cq-tile-around{background:#101c33;border-color:#2a3f66}
body.dark .cq-tile-around .cq-tile-tag{color:#93c5fd}
@media(max-width:400px){
.cq-info-tiles{gap:8px}
.cq-tile{padding:9px 10px 10px}
.cq-tile-title{font-size:13.5px}
}

/* ============ «КАК ПРОХОДИТ ПРОГУЛКА» — пошаговый блок ============
   Владимир, 13 октября: блок на главной и на странице правил. Эффект — мягкое появление
   шагов при прокрутке и наполняющаяся линия слева (анимацию включает js/steps.js).
   Анимация необязательна: если браузер не умеет или в системе просят меньше движения,
   шаги видны сразу (см. prefers-reduced-motion ниже). */
.cq-steps{position:relative;margin:22px 0 6px;--progress:0}
.cq-steps-rail{position:absolute;left:19px;top:18px;bottom:18px;width:2px;background:#e7e9ef;border-radius:2px;overflow:hidden}
.cq-steps-rail-fill{display:block;width:100%;height:calc(var(--progress) * 100%);background:linear-gradient(180deg,#7c3aed,#2563eb);border-radius:2px;transition:height .8s cubic-bezier(.22,.61,.36,1)}
.cq-steps-list{list-style:none;margin:0;padding:0}
/* Шаги ВИДНЫ по умолчанию. Анимацию включает скрипт, добавляя контейнеру класс is-anim:
   так текст не пропадёт, если скрипт не сработал (окно правил, старый браузер, JS выключен). */
.cq-step{position:relative;display:flex;gap:14px;align-items:flex-start;padding:0 0 18px 0;opacity:1;transform:none}
.cq-step:last-child{padding-bottom:0}
.cq-steps.is-anim .cq-step{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0) * 40ms)}
.cq-steps.is-anim .cq-step.is-in{opacity:1;transform:none}
.cq-step-ico{flex:none;width:40px;height:40px;border-radius:13px;background:#fff;border:1px solid #e7e9ef;display:inline-flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 2px 8px rgba(17,24,39,.06);position:relative;z-index:1}
.cq-step-body{background:#fff;border:1px solid #e7e9ef;border-radius:16px;padding:12px 16px 14px;flex:1;min-width:0;box-shadow:0 2px 10px rgba(17,24,39,.04);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cq-step.is-in:hover .cq-step-body{transform:translateY(-2px);box-shadow:0 10px 24px rgba(17,24,39,.09);border-color:#dcdff0}
.cq-step-title{margin:0 0 4px;font-size:16px;line-height:1.35;padding-right:26px}
.cq-step-text{font-size:14.5px;line-height:1.6;color:#4b5563}
/* номер шага — тихой цифрой в углу карточки, чтобы не спорить с иконкой */
.cq-step-num{position:absolute;top:11px;right:16px;font-size:13px;font-weight:700;color:#c7d2fe}
.page-steps-note{margin-top:18px}
/* Пошаговый блок на главной: секция по ширине каталога, а сами шаги читаются колонкой
   (Владимир, 13 октября: «сделай по ширине блока с квестами и поставь первым после плашки») */
#home-steps .page-steps-block{margin-bottom:0}
#home-steps .cq-steps{max-width:760px;margin:22px 0 6px}
#home-steps .page-steps-note,#home-steps .page-lead{max-width:760px}
body.dark .cq-steps-rail{background:#26324b}
body.dark .cq-step-ico{background:#0f172a;border-color:#334155;box-shadow:none}
body.dark .cq-step-body{background:#0f172a;border-color:#334155;box-shadow:none}
body.dark .cq-step-title{color:#e2e8f0}
body.dark .cq-step-num{color:#6366f1}
body.dark .cq-step-text{color:#cbd5e1}
@media(max-width:600px){
.cq-step{gap:10px;padding-bottom:14px}
.cq-step-ico{width:34px;height:34px;border-radius:11px;font-size:17px}
.cq-step-body{padding:10px 13px 12px;border-radius:14px}
.cq-step-title{font-size:15px}
.cq-step-text{font-size:14px}
.cq-steps-rail{left:16px}
}
@media(prefers-reduced-motion:reduce){
.cq-step{opacity:1!important;transform:none!important;transition:none!important}
.cq-steps-rail-fill{transition:none}
}

/* ===== Страница «Монеты»: инфографика (14 октября) =====
   Три цифры программы, полоса «до 50 % цены», сроки жизни и порядок списания.
   Всё на HTML и CSS: правится в админке, работает в тёмной теме и на телефоне. */
.cq-coins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:18px 0 0}
.cq-coins-tile{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px 18px;box-shadow:0 4px 16px rgba(0,0,0,.05)}
.cq-coins-icon{font-size:30px;line-height:1;margin-bottom:10px}
.cq-coins-value{font-size:21px;font-weight:800;color:#111;margin-bottom:6px}
.cq-coins-note{font-size:13.5px;color:#6b7280;line-height:1.55}
.cq-coins-bar{height:26px;border-radius:999px;background:#f3f4f6;margin-top:12px;overflow:hidden;position:relative}
.cq-coins-bar span{display:flex;align-items:center;justify-content:flex-end;height:100%;padding-right:10px;background:linear-gradient(90deg,#fbbf24,#f59e0b);color:#111;font-size:12px;font-weight:700}
.cq-coins-rule{margin-top:18px;background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:14px;padding:14px 16px;font-size:14px;color:#78350f;line-height:1.6}
.cq-coins-timeline{margin-top:18px}
.cq-coins-line{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cq-coins-point{background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;padding:14px;text-align:center}
.cq-coins-point b{display:block;font-size:19px;color:#111;margin-bottom:4px}
.cq-coins-point span{font-size:12.5px;color:#6b7280}
.cq-coins-order{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:#4b5563}
.cq-coins-order-title{font-weight:700;color:#111}
.cq-coins-chip{background:#fff;border:1px solid #d4d4d4;border-radius:999px;padding:6px 12px;font-weight:600;color:#111}
.cq-coins-arrow{color:#9ca3af}
body.dark .cq-coins-tile{background:#1e293b;border-color:#334155;box-shadow:none}
body.dark .cq-coins-value,body.dark .cq-coins-order-title,body.dark .cq-coins-chip,body.dark .cq-coins-point b{color:#f1f5f9}
body.dark .cq-coins-note,body.dark .cq-coins-order{color:#94a3b8}
body.dark .cq-coins-point{background:#0f172a;border-color:#334155}
body.dark .cq-coins-chip{background:#0f172a;border-color:#334155}
body.dark .cq-coins-bar{background:#0f172a}
body.dark .cq-coins-rule{background:#422006;border-color:#78350f;border-left-color:#f59e0b;color:#fde68a}
@media(max-width:600px){
.cq-coins-value{font-size:18px}
.cq-coins-tile{padding:16px 14px;border-radius:16px}
}

/* ================== ПЕРЕНОС ДИЗАЙНА 2: БЛОК 1 — ОБЛОЖКА ==================
   Макет: /design2 (вариант выбран заказчиком 15 октября). Все правила нового вида стоят под
   `body.style-v2`, поэтому живая главная без класса выглядит как раньше — предпросмотр
   `https://city-qw.na4u.ru/?style=v2`, откат — снять класс (см. шапку файла и
   deploy/hosting/check-design-vars.py).

   Элементы нового вида (.v2-*) сначала скрыты: без класса style-v2 их не видно и они ни на что
   не влияют. Тексты обложки из согласованного макета подставляет js/cards.js только в предпросмотре. */
.v2-blob,.v2-eyebrow,.v2-stickers,.v2-hero-photo{display:none}

body.style-v2 .hero{position:relative;overflow:hidden;padding:46px 20px 26px;background:var(--v2-cream);
  color:var(--v2-ink);font-family:var(--v2-font)}
body.style-v2 .hero-inner{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:40px;align-items:center}
/* Пятна обложки — радиальными градиентами, БЕЗ filter:blur: размытие 70 px пересчитывалось
   на каждой прокрутке и подтормаживало страницу (заказчик, 16 октября: «прокрутка троит»). */
body.style-v2 .v2-blob{display:block;position:absolute;border-radius:50%;opacity:.55;z-index:0}
body.style-v2 .v2-blob-1{width:520px;height:520px;top:-70px;right:-100px;background:radial-gradient(circle,
  rgba(255,201,60,.85) 0%,rgba(255,201,60,.45) 38%,rgba(255,201,60,0) 70%)}
body.style-v2 .v2-blob-2{width:460px;height:460px;bottom:-180px;left:-120px;background:radial-gradient(circle,
  rgba(231,246,214,.9) 0%,rgba(231,246,214,.5) 40%,rgba(231,246,214,0) 72%)}
body.style-v2 .v2-eyebrow{display:inline-block;background:#fff;border-radius:var(--v2-r-pill);padding:7px 14px;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--v2-deep);
  box-shadow:var(--v2-shadow);margin-bottom:14px;transform:rotate(-1deg)}
body.style-v2 .hero h1{font-size:clamp(34px,5vw,60px);line-height:1.08;font-weight:800;letter-spacing:-.02em;
  margin-bottom:0;color:var(--v2-ink)}
body.style-v2 .hero p{font-size:19px;line-height:1.55;color:var(--v2-muted);margin:20px 0 26px;max-width:33em}
body.style-v2 .mark{background:linear-gradient(180deg,transparent 62%,rgba(255,201,60,.7) 62%);
  padding:0 6px;border-radius:6px}
body.style-v2 .hero .btn{height:56px;padding:0 28px;border:0;border-radius:var(--v2-r-pill);font-weight:800;
  font-size:16px;transition:transform .18s ease,box-shadow .25s ease}
body.style-v2 .hero .btn-primary{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));color:#231c14;
  box-shadow:var(--v2-shadow-hot)}
body.style-v2 .hero .btn-primary:hover{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));
  transform:translateY(-3px) scale(1.02)}
body.style-v2 .hero .btn-ghost{background:var(--v2-ink);color:#fff;border:0}
body.style-v2 .hero .btn-ghost:hover{background:var(--v2-ink);transform:translateY(-3px)}
body.style-v2 .v2-stickers{display:flex;gap:10px;margin:26px 0 0;flex-wrap:wrap}
body.style-v2 .v2-sticker{background:#fff;border-radius:var(--v2-r-md);padding:9px 15px;font-weight:800;
  font-size:14px;box-shadow:var(--v2-shadow)}
/* Четыре разных цвета, чтобы плашки не сливались: коралл, тёмно-зелёный, фиолетовый, бирюзовый
   (Владимир, 30.10.2026: «сделай их все цветными, чтобы не сливались»). */
body.style-v2 .v2-s1{transform:rotate(-3deg);color:var(--v2-coral)}
body.style-v2 .v2-s2{transform:rotate(2deg);color:var(--v2-deep)}
body.style-v2 .v2-s3{transform:rotate(-1.5deg);color:var(--v2-plum)}
body.style-v2 .v2-s4{transform:rotate(1.5deg);color:#127F9E}
body.style-v2 .v2-hero-photo{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--v2-r-xl);
  overflow:hidden;background:var(--v2-lime-soft) center/cover no-repeat;
  box-shadow:0 26px 60px rgba(30,28,26,.18);transform:rotate(1.2deg)}
body.style-v2 .v2-hero-pin{position:absolute;left:18px;bottom:18px;background:#fff;border-radius:var(--v2-r-pill);
  padding:10px 18px;font-weight:800;font-size:14px;box-shadow:var(--v2-shadow)}
/* тёмная тема нового вида: пятна глуше, плашки — тёмные */
body.dark.style-v2 .v2-blob{opacity:.26}
body.dark.style-v2 .v2-sticker,body.dark.style-v2 .v2-eyebrow,body.dark.style-v2 .v2-hero-pin{
  background:#26241F;color:var(--v2-ink)}
/* В тёмной теме плашки остаются цветными, но светлыми вариантами — иначе текст теряется. */
body.dark.style-v2 .v2-s1{color:#FF8A6E}
body.dark.style-v2 .v2-s2{color:#9BD97A}
body.dark.style-v2 .v2-s3{color:#A991FF}
body.dark.style-v2 .v2-s4{color:#6FD3EC}
/* телефон: фото сверху, текст под ним */
@media(max-width:860px){
body.style-v2 .hero{padding:26px 20px 30px}
body.style-v2 .hero-inner{grid-template-columns:1fr;gap:26px}
body.style-v2 .v2-hero-photo{order:-1;aspect-ratio:16/10}
body.style-v2 .hero h1{font-size:32px}
body.style-v2 .hero p{margin:16px 0 22px}
body.style-v2 .v2-stickers{margin-top:22px}
}
/* Телефон: плашки идут ровными парами в две колонки (Владимир, 30.10.2026) — по одной
   в строке они рвались 3+1 и рознились по ширине. Наклон убираем, текст по центру. */
@media(max-width:640px){
body.style-v2 .v2-stickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
/* Плашки меньше и слегка приподняты/наклонены, как на десктопе (Владимир, 31.10.2026) */
body.style-v2 .v2-sticker{text-align:center;padding:7px 8px;font-size:12px;border-radius:10px;
  box-shadow:0 3px 0 rgba(30,28,26,.08)}
body.style-v2 .v2-s1{transform:rotate(-2.5deg)}
body.style-v2 .v2-s2{transform:rotate(1.8deg)}
body.style-v2 .v2-s3{transform:rotate(-1.3deg)}
body.style-v2 .v2-s4{transform:rotate(1.3deg)}
}

/* ================== ПЕРЕНОС ДИЗАЙНА 2: ОСТАЛЬНЫЕ БЛОКИ ГЛАВНОЙ ==================
   Шаги, подборки квестов, витрина, отзывы, вопросы и контентные блоки, полка городов корешками,
   «Лучшие прогулки» (турнир), шапка, подвал и липкая кнопка на телефоне. Всё под `body.style-v2`:
   живая главная не меняется, предпросмотр — `https://city-qw.na4u.ru/?style=v2`.
   В новом стиле главная собирается **как в макете**: блоков, которых в макете нет, не показываем
   (полный каталог на главной, «Новинки», «Популярные квесты» — вместо них витрина, галерея). */
.v2-sticky-cta{display:none}

/* --- главная как в макете /design2: лишние блоки скрываем --- */
body.style-v2 #quests{display:none}
body.style-v2 #home-blocks>[data-cq-block-kind="popular"]{display:none}
body.style-v2 #home-blocks>[data-cq-block-kind="new"]{display:none}
body.style-v2 #home-blocks>[data-cq-content-types~="gallery"]{display:none}

/* --- общий фон страницы и заголовки секций --- */
body.style-v2{background:var(--v2-cream);color:var(--v2-ink);font-family:var(--v2-font)}
body.style-v2 .section-title{font-size:clamp(26px,3.4vw,42px);font-weight:800;letter-spacing:-.02em;color:var(--v2-ink)}
body.style-v2 .section-sub{font-size:17px;color:var(--v2-muted)}

/* --- шаги «Как это проходит» ---
   Фон секции — сплошной, без градиентных переходов (заказчик, 16 октября: «градиент фигня —
   убирай»). Границу с соседней секцией рисует фигурная разбивка: ряд мягких полукругов-фестонов
   в цвет секции (см. ниже `.v2-scallop-*`). */
/* Высота блока — по контенту, как у «Куда пойти»: плотные отступы, без пустого низа
   (заказчик, 16 октября: «текст снизу убери, высоту самого блока немного уменьши,
   сделай все блоки высоту от контента как в "куда пойти"»). */
body.style-v2 #home-steps-section{background:var(--v2-mint);padding:48px 20px 44px;font-family:var(--v2-font)}
body.style-v2 .cq-step-ico{background:#fff;border:0;border-radius:var(--v2-r-md);box-shadow:var(--v2-shadow);font-size:20px}
body.style-v2 .cq-step-body{background:#fff;border:0;border-radius:var(--v2-r-lg);box-shadow:var(--v2-shadow);
  padding:14px 18px 16px}
body.style-v2 .cq-step-title{font-weight:800;font-size:17px;color:var(--v2-ink)}
body.style-v2 .cq-step-text{font-size:14.5px;color:var(--v2-muted)}
body.style-v2 .cq-step-num{color:var(--v2-coral);font-weight:800}
body.style-v2 .cq-steps-rail{background:rgba(30,28,26,.10)}
body.style-v2 .cq-steps-rail-fill{background:linear-gradient(180deg,var(--v2-lime),var(--v2-coral))}
body.dark.style-v2 #home-steps-section{background:linear-gradient(180deg,rgba(27,27,24,0),var(--v2-mint) 110px,
  var(--v2-mint) calc(100% - 110px),rgba(27,27,24,0))}
body.dark.style-v2 .cq-step-body,body.dark.style-v2 .cq-step-ico{background:#26241F;box-shadow:none}
body.dark.style-v2 .cq-step-title,body.dark.style-v2 .cq-step-num{color:var(--v2-ink)}
body.dark.style-v2 .cq-step-text{color:var(--v2-muted)}

/* --- подборки квестов (Новинки, Популярные, подборки по тегу и городу) ---
   Превью игры — в духе главной: крупная картинка сверху, белая карточка со скруглением и мягкой
   тенью, подъём при наведении, кнопки в наших цветах (заказчик, 16 октября: «обнови превью игр —
   в духе главной: большая картинка, кнопки в наших цветах, как на главной»). */
body.style-v2 #quests{padding-top:54px}
body.style-v2 .quests-grid{gap:22px}
body.style-v2 .quest-card{background:#fff;border:0;border-radius:var(--v2-r-lg);box-shadow:var(--v2-shadow);
  transition:transform .2s ease,box-shadow .25s ease}
body.style-v2 .quest-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(30,28,26,.18)}
/* картинка крупнее: пропорция как у плиток витрины, а не фиксированные 170 px */
body.style-v2 .quest-cover{height:auto;aspect-ratio:16/10;min-height:190px;padding:16px;align-items:flex-end}
body.style-v2 .quest-cover::after{background:linear-gradient(to bottom,rgba(30,28,26,0) 45%,rgba(30,28,26,.55))}
body.style-v2 .quest-city{background:#fff;color:var(--v2-deep);font-weight:800;padding:6px 12px;
  border-radius:var(--v2-r-pill);font-size:12.5px;box-shadow:var(--v2-shadow-soft)}
body.style-v2 .quest-body{padding:20px}
body.style-v2 .quest-body h3{font-size:19px;font-weight:800;color:var(--v2-ink)}
body.style-v2 .quest-title-text{overflow-wrap:anywhere}
body.style-v2 .quest-body p{font-size:14px;color:var(--v2-muted)}
body.style-v2 .quest-meta{gap:14px;color:var(--v2-muted)}
body.style-v2 .quest-tag{background:var(--v2-lime-soft);color:var(--v2-deep);font-weight:700}
/* Без горизонтальной линии над ценой в превью, но отступ до неё оставляем прежним
   (заказчик, 16 октября: «линию в превью убрал — хорошо, но отступ, который был с этой
   линией между ценой и метриками, оставь»). */
body.style-v2 .quest-footer{border-top:0;padding-top:14px;margin-top:auto;gap:10px 14px}
body.style-v2 .quest-price{font-size:21px;font-weight:800;color:var(--v2-ink)}
body.style-v2 .quest-price small{color:var(--v2-muted)}
body.style-v2 .quest-price-old{color:var(--v2-muted)}
/* Архивный квест в каталоге: пометка «здесь пока не гуляем» и неактивная покупка */
body.style-v2 .quest-archived{background:var(--v2-sun);color:#5b3f00;box-shadow:var(--v2-shadow-soft)}
body.style-v2 .quest-card.is-archived{box-shadow:none;opacity:.94}
body.style-v2 .quest-card.is-archived .btn-buy.soon{background:rgba(30,28,26,.07);color:var(--v2-muted);
  box-shadow:none;pointer-events:none;cursor:default}
/* Пояснение в блоке цены архивного квеста (текст заказчика) */
body.style-v2 .buy-archived{background:#FFF3D6;color:#6b4a00;border-radius:var(--v2-r-md);
  padding:14px 16px;font-weight:800;font-size:14.5px;line-height:1.45}
body.style-v2 .buy-archived-note{color:var(--v2-muted);font-size:12.5px;margin-top:8px;line-height:1.55}
/* кнопки карточки — как на главной: ключевая оранжевая, «подарить» — белая круглая плашка */
body.style-v2 .btn-buy{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));color:#231c14;
  border:0;border-radius:var(--v2-r-pill);padding:0 20px;min-height:44px;font-size:13.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--v2-shadow-hot);
  transition:transform .18s ease,box-shadow .25s ease}
body.style-v2 .btn-buy:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 20px 40px rgba(255,107,74,.34)}
body.style-v2 .btn-buy.free{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));color:#231c14}
body.style-v2 .btn-gift{width:44px;height:44px;background:#fff;border:2px solid rgba(30,28,26,.12);
  border-radius:50%;color:var(--v2-ink);box-shadow:var(--v2-shadow-soft);
  transition:transform .18s ease,border-color .18s ease}
body.style-v2 .btn-gift:hover{background:#fff;border-color:var(--v2-lime);transform:translateY(-3px)}
body.dark.style-v2 .quest-card{background:#26241F;box-shadow:none}
body.dark.style-v2 .quest-body h3{color:var(--v2-ink)}
body.dark.style-v2 .quest-body p{color:var(--v2-muted)}
body.dark.style-v2 .btn-gift{background:#26241F;color:var(--v2-ink);border-color:rgba(255,255,255,.14)}
body.dark.style-v2 .quest-tag{background:#1B1B18;color:var(--v2-muted)}

/* --- витрина: карточки «Популярные прогулки» и «Скоро» ---
   Фоны секций чередуются ровно как section.tint / section.tint2 в макете:
   шаги — мятный, популярные — кремовый, города (полка) — голубой, лучшие — кремовый,
   плитки — мятный, отзывы — голубой, вопросы — кремовый. */
body.style-v2 .cq-show-head{font-size:clamp(20px,2.2vw,26px);font-weight:800;color:var(--v2-ink)}
body.style-v2 .cq-show-tile{background:#fff;border:0;border-radius:var(--v2-r-lg);box-shadow:var(--v2-shadow);
  transition:transform .2s ease,box-shadow .25s ease}
body.style-v2 .cq-show-tile:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(30,28,26,.16)}
body.style-v2 .cq-show-title{font-weight:800;color:var(--v2-ink)}
body.style-v2 .cq-show-city,body.style-v2 .cq-show-note{color:var(--v2-muted);font-weight:700}
body.style-v2 .cq-showcase{background:transparent}
body.style-v2 [data-cq-block-kind="content"]{background:transparent}

/* --- страница квеста (карточка квеста): крупное фото, белые карточки, наши кнопки ---
   Заказчик, 16 октября: «саму карточку квеста тоже обнови с учётом нового дизайна».
   Стили страницы живут в её шаблоне (frontend/templates/quest.html), здесь — только новый вид:
   крупный слайдер, заголовок и рейтинг, характеристики белыми карточками, вкладки-«пилюли»,
   блок цены белой карточкой, галочки в цвете палитры, отзывы карточками. */
body.style-v2 .quest-title{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.02em;
  line-height:1.08;color:var(--v2-ink);margin:0 0 10px}
body.style-v2 .quest-rating{color:var(--v2-muted);font-size:15.5px;font-weight:600;margin-bottom:18px}
body.style-v2 .quest-subtitle{font-size:22px;font-weight:800;color:var(--v2-ink);margin:32px 0 14px}
body.style-v2 .slider{border-radius:var(--v2-r-xl);aspect-ratio:16/10;box-shadow:var(--v2-shadow);
  margin-bottom:20px;background:var(--v2-cream)}
body.style-v2 .slider-btn{background:rgba(30,28,26,.55);width:48px;height:48px;backdrop-filter:blur(2px)}
body.style-v2 .slider-btn:hover{background:var(--v2-ink)}
body.style-v2 .slider-dot{width:9px;height:9px;background:rgba(255,255,255,.6)}
body.style-v2 .slider-dot.active{background:var(--v2-coral);width:26px;border-radius:var(--v2-r-pill)}
/* Забавная заставка, пока грузится карта: текст прямо в блоке карты, без плашки и картинки */
.map-frame{position:relative}
.map-loading{position:absolute;inset:0;z-index:5;background:#eef1f5;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;text-align:center}
.map-loading.hidden{display:none}
#map-loading-text{font-size:16px;font-weight:700;line-height:1.45;color:#111827;max-width:420px}
.map-loading-metrics{font-size:13px;color:#475569;line-height:1.5;max-width:420px}
body.dark .map-loading{background:#0f172a}
body.dark #map-loading-text{color:#f1f5f9}
body.dark .map-loading-metrics{color:#94a3b8}
/* Мобильное расстояние: верхняя часть закреплена, чтобы метры и мини-компас были всегда видны */
.distance-sticky{position:sticky;top:6px;z-index:60;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px;margin:-6px -6px 0;box-shadow:0 8px 22px rgba(15,23,42,.10)}
body.dark .distance-sticky{background:#0f172a;border-color:#334155;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.mini-compass{width:46px;height:46px;border-radius:50%;border:2px solid #dc2626;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:inset 0 0 0 3px #fee2e2}
body.dark .mini-compass{background:#1e293b;box-shadow:inset 0 0 0 3px rgba(220,38,38,.25)}
.mini-compass-needle{display:inline-block;font-size:20px;line-height:1;color:#dc2626;transform-origin:50% 55%;transition:transform .18s ease-out}
.distance-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px}
.distance-compass-link{background:none;border:0;padding:0;color:#2563eb;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
body.dark .distance-compass-link{color:#93c5fd}
.cq-compass-reset{font-size:11px;color:#94a3b8;margin-top:6px;line-height:1.4}
/* «Верно / Далее» в окне истории — закреплены сверху */
.story-topbar{position:sticky;top:-8px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;padding:2px 0 10px;margin:-4px 0 10px}
body.dark .story-topbar{background:#1e293b}
.story-badge{display:inline-block;background:#dcfce7;color:#166534;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600}
body.dark .story-badge{background:rgba(22,101,52,.35);color:#bbf7d0}
body.observer-mode #story-next-top{display:none !important}
body.observer-mode.reading #story-next-top{display:inline-block !important}
/* Приглашение друзей на стартовой обложке: как «Начать квест» — иконка и текст по центру */
.cq-cover-friend{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);color:#fff;text-align:center;font-family:inherit;cursor:pointer;backdrop-filter:blur(2px)}
.cq-cover-friend:active{transform:scale(.99)}
.cq-cover-friend-icon{font-size:26px;line-height:1}
.cq-cover-friend-text{display:flex;flex-direction:column;gap:2px;align-items:center;font-size:15px;line-height:1.25}
.cq-cover-friend-text b{font-weight:700}
.cq-cover-friend-text small{font-size:12px;font-weight:500;color:rgba(255,255,255,.78);line-height:1.3}
body.dark .cq-cover-friend{border-color:rgba(255,255,255,.22)}
/* Отбивка между маршрутом и вопросом: по центру, с картинкой и закрытием */
#cq-joke-pop.cq-joke-overlay{position:fixed;inset:0;z-index:2500;background:rgba(15,23,42,.58);display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .2s;pointer-events:none}
#cq-joke-pop.cq-joke-overlay.show{opacity:1;pointer-events:auto}
.cq-joke-card{position:relative;width:100%;max-width:460px;background:#fff;color:#111;border-radius:22px;padding:30px 24px 22px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.4);transform:translateY(10px) scale(.98);transition:transform .2s;cursor:default}
.cq-joke-overlay.show .cq-joke-card{transform:none}
.cq-joke-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f5f9;color:#334155;font-size:22px;line-height:1;cursor:pointer}
.cq-joke-close:hover{background:#e2e8f0}
.cq-joke-img{width:150px;height:124px;object-fit:contain;display:block;margin:0 auto 10px}
#cq-joke-pop .j-title{font-size:17px;font-weight:800;line-height:1.35}
#cq-joke-pop .j-metric{font-size:13px;color:#64748b;line-height:1.5;margin-top:7px}
.cq-joke-ok{margin-top:16px;padding:9px 22px;border:0;border-radius:999px;background:#0f172a;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.cq-joke-ok:hover{background:#1e293b}
body.dark .cq-joke-card{background:#1e293b;color:#f1f5f9}
body.dark #cq-joke-pop .j-metric{color:#cbd5e1}
body.dark .cq-joke-close{background:#334155;color:#e2e8f0}
body.dark .cq-joke-ok{background:#38bdf8;color:#0f172a}
body.dark .map-loading-card{background:#1e293b;color:#f1f5f9}
body.dark .map-loading-metrics{color:#cbd5e1}

/* Сложность маршрута: отдельный индикатор, а не текст в характеристиках */
.quest-difficulty{margin:4px 0 18px;padding:12px 14px;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
.quest-difficulty-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.quest-difficulty-title{font-size:12px;font-weight:700;color:#374151}
.quest-difficulty-score{font-size:12px;color:#6b7280}
.quest-difficulty-bars{display:flex;gap:4px;margin-top:8px}
.quest-difficulty-note{font-size:11.5px;color:#6b7280;margin-top:6px}
body.dark .quest-difficulty{background:#1e293b;border-color:#334155}
body.dark .quest-difficulty-title{color:#e2e8f0}
body.dark .quest-difficulty-score,body.dark .quest-difficulty-note{color:#94a3b8}
body.style-v2 .specs-grid{gap:14px;margin:22px 0}
body.style-v2 .spec-box{background:#fff;border:0;border-radius:var(--v2-r-md);padding:16px 12px;
  box-shadow:var(--v2-shadow-soft)}
body.style-v2 .spec-icon{font-size:26px}
body.style-v2 .spec-value{font-size:19px;font-weight:800;color:var(--v2-ink)}
body.style-v2 .spec-label{font-size:11px;font-weight:700;color:var(--v2-muted)}
body.style-v2 .desc-tabs{gap:8px;border-bottom:0;margin-bottom:20px;flex-wrap:wrap}
body.style-v2 .desc-tab{padding:10px 16px;border:2px solid rgba(30,28,26,.12);border-radius:var(--v2-r-pill);
  background:#fff;color:var(--v2-ink);font-weight:700;font-size:13.5px;margin-bottom:0;
  transition:transform .18s ease,border-color .18s ease,box-shadow .25s ease}
body.style-v2 .desc-tab:hover{border-color:var(--v2-lime);transform:translateY(-2px)}
body.style-v2 .desc-tab.active{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));
  border-color:transparent;color:#231c14;box-shadow:var(--v2-shadow-hot)}
body.style-v2 .desc-content{font-size:16.5px;line-height:1.75;color:var(--v2-muted)}
body.style-v2 .buy-box{background:#fff;border:0;border-radius:var(--v2-r-xl);padding:26px;
  box-shadow:var(--v2-shadow)}
body.style-v2 .buy-box h3{font-weight:800;color:var(--v2-ink);font-size:22px}
body.style-v2 .buy-price{font-size:38px;font-weight:800;color:var(--v2-ink)}
body.style-v2 .buy-price small{color:var(--v2-muted)}
body.style-v2 .buy-price-old{color:var(--v2-muted)}
body.style-v2 .buy-features{color:var(--v2-muted);font-size:14.5px}
body.style-v2 .buy-features li::before{color:var(--v2-lime)}
body.style-v2 .buy-actions{gap:10px}
body.style-v2 .buy-note,body.style-v2 .buy-promo-note,body.style-v2 .buy-coins-note{color:var(--v2-muted)}
body.style-v2 .buy-gift-note{background:var(--v2-lime-soft);border:0;border-radius:var(--v2-r-md);
  color:var(--v2-muted)}
body.style-v2 .buy-promo,body.style-v2 .buy-coins{border-top:1px dashed rgba(30,28,26,.14)}
body.style-v2 .buy-promo-label{color:var(--v2-muted);font-weight:800}
body.style-v2 .buy-promo-head{color:var(--v2-ink)}
body.style-v2 .buy-promo-ok{color:var(--v2-deep)}
body.style-v2 .buy-promo-note.bad{color:var(--v2-coral)}
body.style-v2 .review-item{background:#fff;border:0;border-radius:var(--v2-r-md);padding:16px;
  box-shadow:var(--v2-shadow-soft);margin-bottom:12px}
body.style-v2 .review-stars{color:var(--v2-sun)}
body.style-v2 .review-author{color:var(--v2-muted)}
body.style-v2 .review-text{color:var(--v2-muted);font-size:14.5px}
body.dark.style-v2 .spec-box,body.dark.style-v2 .buy-box,body.dark.style-v2 .review-item,
body.dark.style-v2 .desc-tab{background:#26241F;box-shadow:none;color:var(--v2-ink)}
body.dark.style-v2 .buy-gift-note{background:#1B1B18}
body.dark.style-v2 .slider{background:#1B1B18}
/* Фоны секций — сплошные, без градиентов (заказчик, 16 октября: «градиент фигня — убирай»).
   Границы рисует фигурная разбивка — фестоны: ряд полукругов в цвет секции по её верхней кромке.
   Это в духе наших скруглений: мягко, но с характером, и одинаково на всех секциях. */
/* Фигурная разбивка — только у голубых секций (полка городов и отзывы). У мятной секции шагов
   граница стала прямой: заказчик, 16 октября: «в фон екак это проходит видно границу где волны
   к плашке стыкуются — в цвет не попал; если сложно попасть — убери волны с этой плашки, пусть
   будут только на синей». Волны сделали плавнее и реже: полуэллипс 80×18 вместо круга 40 px
   («сделай более плавными и не такими частыми»). */
body.style-v2 #v2-books,
body.style-v2 [data-cq-block-kind="reviews"]{position:relative}body.style-v2 #v2-books::before,
body.style-v2 [data-cq-block-kind="reviews"]::before{content:"";position:absolute;left:0;right:0;top:-18px;
  height:18px;pointer-events:none;background-repeat:repeat-x;background-size:80px 18px;
  background-image:radial-gradient(ellipse 40px 18px at 50% 100%,var(--v2-sky-soft) 0 99%,transparent 100%)}
body.style-v2 #v2-books{background:var(--v2-sky-soft)}
body.style-v2 #v2-tiles{background:var(--v2-mint)}
body.style-v2 [data-cq-block-kind="reviews"]{background:var(--v2-sky-soft)}
body.dark.style-v2 #v2-books,body.dark.style-v2 [data-cq-block-kind="reviews"]{background:var(--v2-sky-soft)}
body.dark.style-v2 #v2-tiles{background:var(--v2-mint)}
body.dark.style-v2 #home-steps-section{background:var(--v2-mint)}
body.dark.style-v2 #v2-books::before,
body.dark.style-v2 [data-cq-block-kind="reviews"]::before{
  background-image:radial-gradient(ellipse 40px 18px at 50% 100%,var(--v2-sky-soft) 0 99%,transparent 100%)}
body.dark.style-v2 .cq-show-tile{background:#26241F;box-shadow:none}
body.dark.style-v2 .cq-show-title{color:var(--v2-ink)}

/* --- отзывы --- */
body.style-v2 .cq-rev-card{background:#fff;border-radius:var(--v2-r-lg);box-shadow:var(--v2-shadow);padding:14px}
body.style-v2 .cq-rev-card .cq-review-media{border-radius:var(--v2-r-md)}
body.style-v2 .cq-rev-arrow{background:#fff;color:var(--v2-ink);border:0;box-shadow:var(--v2-shadow)}
/* Кнопки листания под лентой: стрелка слева, точки по центру, стрелка справа — всё на одной
   линии и одной высоты (заказчик, 16 октября: «кнопки листание ниже под текстом, выровняй их —
   сейчас влево и вправо на разной высоте»). */
/* Стрелки листания отзывов стоят в шапке справа, по нижней линии текста
   (заказчик, 16 октября: «кнопки листания сделай над отзывами справа, но под текстом»). */
body.style-v2 .cq-rev-head{align-items:flex-end;gap:18px}
body.style-v2 .cq-rev-nav{display:flex;align-items:center;gap:8px;flex:none;align-self:flex-end}
body.style-v2 .cq-rev-foot{justify-content:center;gap:8px}
body.style-v2 .cq-rev-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:20px;min-height:48px}
body.style-v2 .cq-rev-foot .cq-rev-arrow{flex:none;align-self:center;display:grid;place-items:center}
body.style-v2 .cq-rev-foot .cq-rev-dots{flex:1 1 auto;justify-content:center;margin:0;gap:8px}
body.style-v2 .cq-rev-dot{background:rgba(30,28,26,.18)}
body.style-v2 .cq-rev-dot.active{background:var(--v2-coral)}
body.dark.style-v2 .cq-rev-card{background:#26241F;box-shadow:none}
body.dark.style-v2 .cq-rev-arrow{background:#26241F;color:var(--v2-ink)}

/* --- вопросы, контентные блоки: подарок, школы, галерея, текст --- */
body.style-v2 .faq-item{background:#fff;border:0;border-radius:var(--v2-r-md);box-shadow:var(--v2-shadow-soft)}
body.style-v2 .faq-item summary{font-weight:800;color:var(--v2-ink)}
body.style-v2 .faq-item div{color:var(--v2-muted)}
body.style-v2 .page-card{background:#fff;border:0;border-radius:var(--v2-r-lg);box-shadow:var(--v2-shadow-soft)}
body.style-v2 .page-card-text{color:var(--v2-muted)}
/* Блок-призыв «перейти в каталог» (подарок, об игре, школы и т. п.). Заказчик, 16 октября:
   «блоки с призывом перейти в каталог после карточек квестов — поправь фон зелёный, сделай его
   по высоте больше, чтобы контент внутри не был зажат». Делаем высокий блок с воздухом:
   мягкий мятный фон вместо насыщенного лайма, крупные отступы, ровная сетка «текст — кнопка». */
body.style-v2 .page-cta{background:var(--v2-mint);border:0;border-radius:var(--v2-r-xl);
  padding:44px 40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;
  align-items:center;text-align:left}
body.style-v2 .page-cta h2{font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin:0}
body.style-v2 .page-cta p{color:var(--v2-muted);margin:0;font-size:16px;max-width:60ch}
body.style-v2 .page-cta .btn{min-height:52px;padding:0 26px;border-radius:var(--v2-r-pill);
  font-weight:800;white-space:nowrap;grid-column:2;grid-row:1 / span 2;align-self:center}
@media(max-width:820px){
  body.style-v2 .page-cta{grid-template-columns:minmax(0,1fr);gap:14px;padding:32px 22px;text-align:left}
  body.style-v2 .page-cta .btn{grid-column:1;grid-row:auto;width:100%;justify-content:center}
}
body.dark.style-v2 .page-cta{background:var(--v2-lime-soft)}
body.style-v2 .page-block h2{font-weight:800;color:var(--v2-ink)}
body.dark.style-v2 .faq-item,body.dark.style-v2 .page-card{background:#26241F;box-shadow:none}
body.dark.style-v2 .faq-item summary,body.dark.style-v2 .page-block h2{color:var(--v2-ink)}
body.dark.style-v2 .faq-item div,body.dark.style-v2 .page-card-text{color:var(--v2-muted)}

/* --- МОБИЛЬНОЕ МЕНЮ (гамбургер): два столбца ---
   Заказчик, 19 октября: «правую колонку мелко тапать, левая выглядит массивно». Делаем
   обе колонки одним ритмом: строки 46 px на всю ширину (палец попадает в любую точку),
   отступы между строками, шрифт 16 px; слева — жирный текст со значками не крупнее текста
   (Каталог, Ключ, Турнир, Тема), справа — обычный текст без значков.
   Меню собирает cqEnsureMobileMenu() из core.js. */
.cq-mnav{display:none}
@media(max-width:860px){
  body.style-v2.cq-mnav-ready.cq-nav-open .main-nav>.cq-mnav{display:grid}
  body.style-v2.cq-mnav-ready.cq-nav-open .main-nav>*:not(.cq-mnav){display:none}
  body.style-v2.cq-mnav-ready.cq-nav-open .cq-mnav{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 18px;width:100%;padding:6px 0 10px;align-items:start}
  /* обе колонки — одинаковая ширина и ровный ритм строк: 46 px + 2 px просвета.
     minmax, а не жёсткие 46: если длинный пункт переносится на узком телефоне, строка
     подрастёт, а не полезет на следующую. */
  body.style-v2 .cq-mnav-col{display:grid;grid-auto-rows:minmax(46px,auto);align-content:start;
    align-items:center;gap:2px;width:100%;min-width:0}
  body.style-v2 .cq-mnav-item{display:flex;align-items:center;gap:9px;width:100%;min-height:46px;
    padding:0;border:0;background:none;box-shadow:none;font-family:inherit;font-weight:800;
    font-size:16px;color:var(--v2-ink);text-decoration:none;cursor:pointer;line-height:1.2;
    text-align:left}
  /* Значки не крупнее текста: было 20–22 px и выглядело массивно (заказчик, 19 октября). */
  body.style-v2 .cq-mnav-item svg{width:16px;height:16px;flex:0 0 16px;overflow:visible}
  /* цветные значки у левого столбца: каталог — коралл, ключ — солнце, турнир — лайм, тема — plum */
  body.style-v2 .cq-mnav-catalog svg{color:var(--v2-coral)}
  body.style-v2 .cq-mnav-key svg{color:#D99A00}
  body.style-v2 .cq-mnav-tournament svg{color:var(--v2-lime)}
  body.style-v2 .cq-mnav-theme svg{color:var(--v2-plum)}
  body.style-v2 .cq-mnav-item span{font-weight:800}
  body.style-v2 .cq-mnav-item:active{opacity:.7}
  /* правая колонка — остальное меню: обычный текст без значков, те же строки и отступы */
  body.style-v2 .cq-mnav-more .cq-mnav-link{display:flex;align-items:center;width:100%;min-height:46px;
    color:var(--v2-muted);text-decoration:none;font-size:16px;font-weight:500;line-height:1.25}
  body.style-v2 .cq-mnav-more .cq-mnav-link:active{color:var(--v2-ink)}
}

/* --- ШАПКА: главные пункты меню, кабинет-кружок, гамбургер на телефоне ---
   Заказчик, 16 октября: «шапка в мобилке: кабинету придумаем значок по аналогии с «Войти по ключу»;
   «Войти по ключу» и тема — уберём в гамбургер; оставим город (хорошо, если влезет название — проверяй
   по самому длинному), кабинет (кружлёшок); каталог и турнир в меню нужно выделить жирным и вернуть
   значки рядом — чтобы и на десктопе, и в гамбургере было видно; в десктопе меню оставляй как есть,
   только выдели каталог и турнир». */
body.style-v2 .main-nav a.cq-menu-hot{color:var(--v2-ink);font-weight:800}
body.style-v2 .main-nav a.cq-menu-hot:hover{color:var(--v2-coral)}
body.style-v2 .main-nav .cq-menu-ico{margin-right:5px;font-size:15px;line-height:1;vertical-align:-1px}
/* --- Выпадающее подменю второго уровня (десктоп) ---
   Заказчик, 19 октября: «выпадающее меню второго уровня сделай современнее — сверстай правильно
   с точки зрения юзабилити». Верхний уровень и мобильное меню не меняем: правила ниже работают
   только под style-v2 и только на десктопе (от 861 px). */
@media(min-width:861px){
  /* панель: тёплая белая карточка со скруглением и мягкой тенью, появляется с лёгким подъёмом */
  body.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.has-children>.cq-menu-sub{
    position:absolute;top:calc(100% + 10px);left:-10px;min-width:252px;display:flex;
    flex-direction:column;gap:2px;visibility:hidden;opacity:0;transform:translateY(-6px);
    pointer-events:none;z-index:130;
    background:#fff;border:1px solid rgba(30,28,26,.07);border-radius:20px;
    box-shadow:0 24px 48px rgba(30,28,26,.16);padding:8px;
    transition:opacity .16s ease,transform .16s ease,visibility .16s}
  /* невидимый мостик: курсор проходит от пункта к панели без «мигания» и потери наведения */
  body.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.has-children>.cq-menu-sub::before{
    content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  /* уголок у панели: видно, от какого пункта она раскрылась */
  body.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.has-children>.cq-menu-sub::after{
    content:"";position:absolute;top:-7px;left:26px;width:12px;height:12px;background:#fff;
    border-left:1px solid rgba(30,28,26,.07);border-top:1px solid rgba(30,28,26,.07);
    transform:rotate(45deg);border-top-left-radius:3px}
  body.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.has-children:hover>.cq-menu-sub,
  body.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.has-children:focus-within>.cq-menu-sub,
  body.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.is-submenu-open>.cq-menu-sub{
    visibility:visible;opacity:1;transform:none;pointer-events:auto}
  /* пункты подменю: ровные строки-кнопки с откликом на наведение и клавиатуру */
  body.style-v2 .main-nav .cq-menu-sub .cq-menu-item{width:100%}
  body.style-v2 .main-nav .cq-menu-sub .cq-menu-item>a{display:flex;align-items:center;
    width:100%;box-sizing:border-box;padding:10px 14px;border-radius:12px;color:var(--v2-muted);
    font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;
    transition:background .15s ease,color .15s ease,transform .15s ease}
  body.style-v2 .main-nav .cq-menu-sub .cq-menu-item>a:hover,
  body.style-v2 .main-nav .cq-menu-sub .cq-menu-item>a:focus-visible{
    background:var(--v2-mint);color:var(--v2-ink);transform:translateX(2px)}
  /* стрелка у пункта поворачивается, когда подменю открыто */
  body.style-v2 .main-nav .cq-caret{color:var(--v2-muted);transition:transform .18s ease}
  body.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.has-children:hover>a .cq-caret,
  body.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.has-children:focus-within>a .cq-caret,
  body.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.has-children.is-submenu-open>a .cq-caret{
    transform:rotate(180deg)}
  /* тёмная тема: панель — тёмная карточка, подсветка строк мягкая светлая */
  body.dark.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.has-children>.cq-menu-sub{
    background:#26241F;border-color:rgba(255,255,255,.08)}
  body.dark.style-v2 .main-nav .cq-menu>.cq-menu-list>.cq-menu-item.has-children>.cq-menu-sub::after{
    background:#26241F;border-color:rgba(255,255,255,.08)}
  body.dark.style-v2 .main-nav .cq-menu-sub .cq-menu-item>a:hover,
  body.dark.style-v2 .main-nav .cq-menu-sub .cq-menu-item>a:focus-visible{
    background:rgba(255,255,255,.07);color:var(--v2-ink)}
}
/* «Войти по ключу» и тема — только в гамбургере на телефоне */
body.style-v2 .cq-nav-extras{display:none}
@media(max-width:860px){
  body.style-v2 .header-actions .btn-key,
  body.style-v2 .header-actions .theme-btn{display:none}
  body.style-v2.cq-nav-open .main-nav .cq-nav-extras{display:flex;flex-direction:column;gap:10px;padding:14px 4px 6px}
  body.style-v2.cq-nav-open .main-nav .cq-nav-extras .btn-key{display:inline-flex;justify-content:center;
    align-items:center;gap:8px;width:100%;height:46px;font-size:15px;font-weight:800;position:static;
    border-radius:var(--v2-r-pill)}
  body.style-v2.cq-nav-open .main-nav .cq-nav-extras .btn-key::before,
  body.style-v2.cq-nav-open .main-nav .cq-nav-extras .btn-key::after{display:none}
  body.style-v2.cq-nav-open .main-nav .cq-nav-extras .theme-btn{display:inline-flex;justify-content:center;
    width:100%;height:46px;border-radius:var(--v2-r-pill);font-weight:800;font-size:15px}
  /* «Кабинет» на телефоне — только кружок со значком: слово прячем
     (заказчик, 16 октября: «кнопка кабинет — и значок, и слово» мешали друг другу).
     19 октября: значок стоял «не по центру» и выглядел чёрным и строгим. Центрируем его
     абсолютно (inset:0 + margin:auto — не зависит от flex-расчётов Safari), а сам значок
     делаем тёплым: коралловый человечек на мягкой кремовой подложке. */
  body.style-v2 .v2-cabinet{position:relative;width:44px;min-width:44px;height:44px;padding:0;
    border-radius:50%;box-shadow:var(--v2-shadow-hot);overflow:hidden}
  body.style-v2 .v2-cabinet-text{display:none}
  body.style-v2 .v2-cabinet-ico{position:absolute;inset:0;margin:auto;width:30px;height:30px;
    display:grid;place-items:center;border-radius:50%;background:#FFF8EE;color:var(--v2-coral);
    line-height:0;box-shadow:inset 0 0 0 1px rgba(255,107,74,.16)}
  body.style-v2 .v2-cabinet-ico svg{width:17px;height:17px;display:block}
  body.style-v2 .v2-cabinet:hover{transform:translateY(-2px)}
  /* Город: на телефоне название видно целиком, как на десктопе
     (заказчик, 16 октября: «город нужно вывести названием, как в десктопе») */
  body.style-v2 .header-actions{gap:8px}
  /* на телефоне логотип ужимается, а не выдавливает город: название города должно читаться
     (заказчик, 16 октября: «в городе — название города, сейчас только значок») */
  body.style-v2 .site-header .logo{font-size:14px;white-space:nowrap;flex:0 1 auto;min-width:0;
    overflow:hidden;text-overflow:ellipsis;max-width:34vw}
  /* Город — как на десктопе, с названием: забирает свободное место, а логотип ужимается
     (заказчик, 16 октября: «кнопка ваш город как в десктопе — отображай название города»). */
  body.style-v2 .citypick{flex:1 1 auto;min-width:0}
  body.style-v2 .citypick-btn{height:42px;padding:0 10px;font-size:13.5px;gap:6px;width:100%;
    max-width:none;white-space:nowrap;justify-content:flex-start}
  body.style-v2 .citypick-btn .cq-citypin svg{width:15px;height:15px;display:block}
  body.style-v2 #cq-city-name{flex:1 1 auto;min-width:0;max-width:none;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;font-weight:800}
  /* Название сайта в шапке остаётся всегда (заказчик: «в шапке пропало название сайта»),
     просто на узких экранах чуть меньше и с многоточием. */
  body.style-v2 .site-header .logo{font-size:14px;flex:0 1 auto;min-width:0;max-width:none;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  @media(max-width:420px){
    body.style-v2 .site-header .logo{font-size:13px}
    body.style-v2 .citypick-btn{font-size:13px;padding:0 8px}
  }
  /* Гамбургер: каждый пункт — значок слева и жирный текст, ровной строкой */
  body.style-v2.cq-nav-open .main-nav>a,
  body.style-v2.cq-nav-open .main-nav .cq-menu-item>a{display:flex;align-items:center;gap:10px;
    font-weight:800;font-size:16px;color:var(--v2-ink);padding:13px 6px}
  body.style-v2.cq-nav-open .main-nav .cq-menu-ico,
  body.style-v2.cq-nav-open .main-nav .cq-nav-ico{flex:0 0 22px;width:22px;text-align:center;
    font-size:17px;line-height:1}
  body.style-v2.cq-nav-open .main-nav .cq-menu-sub .cq-menu-item>a{font-weight:700;font-size:15px;
    color:var(--v2-muted)}
  body.style-v2 .cq-nav-extras .btn-key,
  body.style-v2 .cq-nav-extras .theme-btn{font-weight:800;font-size:15px}
}
@media(max-width:400px){
  body.style-v2 .site-header .logo{font-size:14px}
  body.style-v2 #cq-city-name{max-width:118px}
  body.style-v2 .citypick-btn{padding:0 10px;font-size:13px}
}

/* --- шапка --- */
/* Кнопки и выбор города, как в макете. Заказчик, 16 октября: «в макете в меню была оранжевая
   кнопка — я бы у нас сделал её Кабинет; «Войти по ключу» выделил обычной кнопкой (белой,
   как в макете); + сразу вывел выбор города, чтобы увидеть, как меню будет смотреться». */
body.style-v2 .site-header .header-actions{display:flex;align-items:center;gap:10px}
/* Десктоп: «Кабинет» словом, значок не нужен */
/* Слово в кружке не нужно; значок прячем только на десктопе, где кабинет — кнопкой со словом.
   Раньше это правило шло после мобильного блока и гасило значок и на телефоне — кружок был пустой. */
@media(min-width:861px){
  body.style-v2 .v2-cabinet-ico{display:none}
}
/* Неавторизованный игрок на телефоне: белая фигурка прямо на оранжевой кнопке,
   без кремового кружка внутри. Авторизованный остаётся с прежней подложкой. */
body.style-v2 .v2-cabinet.cq-cabinet-guest .v2-cabinet-ico{
  width:26px;height:26px;background:transparent;color:#fff;box-shadow:none;
  filter:drop-shadow(0 1px 1px rgba(120,40,10,.25))}
body.style-v2 .v2-cabinet.cq-cabinet-guest .v2-cabinet-ico svg{width:20px;height:20px}
body.style-v2 .v2-cabinet{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;
  border-radius:var(--v2-r-pill);font-weight:800;font-size:15px;color:#231c14;text-decoration:none;
  background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));box-shadow:var(--v2-shadow-hot);
  transition:transform .18s ease,box-shadow .25s ease}
body.style-v2 .v2-cabinet:hover{transform:translateY(-3px) rotate(-1deg) scale(1.02);
  box-shadow:0 22px 44px rgba(255,107,74,.36)}
/* «Войти по ключу» — та же плашка, но с ключиком вместо текста: круглая, 44×44, справа от «Кабинета»
   (заказчик, 16 октября: «давай сделаем картинкой — ключик, в такой же плашке справа от кабинета»).
   Текст остаётся в разметке (для поиска, доступности и проверок), визуально его заменяет иконка. */
body.style-v2 .site-header .btn-key{background:#fff;color:var(--v2-ink);border:2px solid rgba(30,28,26,.12);
  position:relative;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;font-size:0;
  justify-content:center;box-shadow:var(--v2-shadow-soft)}
/* ключик ровно по центру кружка: эмодзи сидел ниже из-за метрик строки, поэтому кладём его
   в грид, растянутый на весь кружок (заказчик, 16 октября: «ключик по середине кружка сделай») */
body.style-v2 .site-header .btn-key::before{content:"🔑";position:absolute;inset:0;display:grid;
  place-items:center;font-size:19px;line-height:1}
body.style-v2 .site-header .btn-key:hover{background:#fff;transform:translateY(-2px)}
body.style-v2 .citypick{position:relative}
body.style-v2 .citypick-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;
  border-radius:var(--v2-r-pill);background:#fff;border:2px solid rgba(30,28,26,.12);color:var(--v2-ink);
  font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:transform .18s ease,border-color .18s ease}
body.style-v2 .citypick-btn .cq-citypin{display:inline-flex;align-items:center}
body.style-v2 .citypick-btn .cq-citypin svg{width:16px;height:16px;display:block;color:var(--v2-coral)}
body.style-v2 .citypick-btn:hover{border-color:var(--v2-lime);transform:translateY(-2px)}
body.style-v2 .citypick-btn .chev{font-size:11px;color:var(--v2-muted)}
body.style-v2 .citypick-panel{display:none;position:absolute;right:0;top:54px;width:320px;background:#fff;
  border-radius:var(--v2-r-lg);padding:18px;box-shadow:0 22px 50px rgba(30,28,26,.18);z-index:60}
body.style-v2 .citypick-panel.open{display:block}
body.style-v2 .citypick-panel label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--v2-muted);margin-bottom:8px}
body.style-v2 .citypick-panel select{width:100%;height:52px;padding:0 14px;border-radius:var(--v2-r-md);
  border:2px solid rgba(30,28,26,.12);background:#fff;color:var(--v2-ink);font-family:inherit;font-size:15px}
body.style-v2 .citypick-panel select:focus{outline:none;border-color:var(--v2-coral)}
body.style-v2 .citypick-panel .btn{width:100%;margin-top:12px}
body.style-v2 .citypick-hint{font-size:12.5px;line-height:1.5;color:var(--v2-muted);margin-top:10px}
body.dark.style-v2 .citypick-btn,body.dark.style-v2 .citypick-panel,body.dark.style-v2 .citypick-panel select{
  background:#26241F;color:var(--v2-ink);border-color:rgba(255,255,255,.14)}
body.dark.style-v2 .btn-key{background:#26241F;color:var(--v2-ink);border-color:rgba(255,255,255,.14)}
/* Шапка нового стиля — плотный кремовый фон без размытия: backdrop-filter пересчитывался
   на каждой прокрутке и подтормаживал страницу (заказчик, 16 октября: «тормозит при скролле»). */
body.style-v2 .site-header{background:var(--v2-cream);border-bottom:0;backdrop-filter:none}
body.style-v2 .site-header .logo{color:var(--v2-ink);font-weight:800}
body.style-v2 .main-nav a,body.style-v2 .main-nav>a{color:var(--v2-muted);font-weight:700}
body.style-v2 .main-nav a:hover,body.style-v2 .main-nav>a:hover{color:var(--v2-ink)}
/* «Войти по ключу» — обычная белая кнопка-плашка (иконка и размер заданы выше, в разделе шапки).
   Правило ниже по файлу устарело и перебивало новое — держим один источник правды. */
body.style-v2 .btn-key{background:#fff;color:var(--v2-ink);border:2px solid rgba(30,28,26,.12);
  border-radius:var(--v2-r-pill);font-weight:800;box-shadow:var(--v2-shadow-soft)}
body.style-v2 .btn-key:hover{background:#fff;transform:translateY(-2px)}
/* переключатель темы и гамбургер — одинаковые кружки 44×44: заказчик попросил выровнять
   размер гамбургера по переключателю темы (он больше) */
body.style-v2 .theme-btn{background:#fff;border:2px solid rgba(30,28,26,.12);border-radius:50%;
  color:var(--v2-ink);width:44px;height:44px;min-width:44px;padding:0;display:inline-grid;
  place-items:center;font-size:17px;line-height:1}
/* Гамбургер: кружок 44×44, как у переключателя темы, и полосы заданы явно по ширине —
   в Safari полосы растягивались в ноль и были не видны (заказчик, 16 октября: «в сафари
   в гамбургере нет трёх чёрных полос и размер кружка должен быть как переключение темы»). */
body.style-v2 .cq-burger{background:#fff;border:2px solid rgba(30,28,26,.12);border-radius:50%;
  width:44px;height:44px;min-width:44px;padding:0;flex-direction:column;align-items:center;
  justify-content:center;gap:4px}
body.style-v2 .cq-burger span{display:block;width:18px;height:2px;flex:none;border-radius:2px;
  background:var(--v2-ink)}
body.dark.style-v2 .site-header{background:var(--v2-cream);backdrop-filter:none}
body.dark.style-v2 .site-header .logo{color:var(--v2-ink)}
body.dark.style-v2 .theme-btn,body.dark.style-v2 .cq-burger{background:#26241F;border-color:#3A3730}
body.dark.style-v2 .cq-burger span{background:var(--v2-ink)}

/* --- подвал --- (правила подвала живут в конце файла, в разделе «единый стиль макета»:
   графит, фестоны, кремовые ссылки; здесь дублировать не нужно) */

/* --- липкая кнопка «Пойдём гулять» на телефоне (новый элемент) ---
   На первом экране она скрыта и появляется только при прокрутке, когда обложка уходит вверх
   (заказчик, 16 октября: «пойдём гулять кнопку для мобилки давай показывать на втором экране
   при скролле, на первом экране её скрой»). Класс is-shown ставит скрипт. */
body.style-v2 .v2-sticky-cta{display:flex;align-items:center;justify-content:center;position:fixed;left:16px;right:16px;
  bottom:14px;z-index:60;height:54px;border-radius:var(--v2-r-pill);font-family:var(--v2-font);font-weight:800;
  font-size:16px;text-decoration:none;color:#231c14;opacity:0;transform:translateY(86px);pointer-events:none;
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.3,1);
  background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));box-shadow:var(--v2-shadow-hot)}
body.style-v2 .v2-sticky-cta.is-shown{opacity:1;transform:none;pointer-events:auto}
@media(min-width:821px){
body.style-v2 .v2-sticky-cta{display:none}
}

/* ================== ПОРТ ИЗ МАКЕТА /design2: ЗАГОЛОВКИ, ПОЛКА, ТУРНИР, ПЛИТКИ ==================
   Правила перенесены из макета (`backend/app/pages/design2.html`) почти дословно: наши имена
   переменных (`--v2-*`) и каждый селектор под `body.style-v2` — живая главная не меняется.
   Разметку собирает js/cards.js в предпросмотре, поэтому на живом сайте секций нет вовсе. */

/* --- заголовки секций: слева, с плашкой-надзаголовком (макет: .head > .eyebrow + h2 + .sub) --- */
body.style-v2 .head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:28px;flex-wrap:wrap}
body.style-v2 .eyebrow{display:inline-block;background:#fff;border-radius:var(--v2-r-pill);padding:7px 14px;font-size:12px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--v2-deep);box-shadow:var(--v2-shadow);
  margin-bottom:14px;transform:rotate(-1deg)}
body.style-v2 .head .sub{color:var(--v2-muted);margin-top:10px;max-width:52ch}
/* Лид полки городов — «продающий»: первая фраза акцентом, лид крупнее обычного подзаголовка,
   кнопка «Все города» — ключевая оранжевая (заказчик, 16 октября: «Красиво оформи — для продажи»). */
body.style-v2 .head .shelf-lead{font-size:18px;line-height:1.55;max-width:56ch;color:var(--v2-muted)}
body.style-v2 .head .shelf-lead b{color:var(--v2-ink);font-weight:800}
body.style-v2 .head .shelf-cta{flex:none;align-self:flex-end;margin-bottom:4px}
@media(max-width:720px){
body.style-v2 .head .shelf-lead{font-size:16.5px}
body.style-v2 .head .shelf-cta{align-self:flex-start}
}
body.style-v2 .section-title{font-size:clamp(26px,3.4vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.08;
  color:var(--v2-ink);text-align:left;margin-bottom:0}
body.style-v2 .section-sub{font-size:17px;color:var(--v2-muted);text-align:left;margin:10px 0 0}
body.style-v2 .cq-show-head{text-align:left}
body.style-v2 .v2-sec{padding:48px 20px 44px}
body.dark.style-v2 .eyebrow{background:#26241F}

/* --- кнопки внутренних страниц (каталог, квест, правила, турнир, кабинет, контент) ---
   Заказчик, 16 октября: «кнопки на внутренних страницах скорректируй тоже: ховеры подпрыгивающие
   и цвета замени либо оранжевые — ключевые, либо белые». Ключевые действия (оплата, сохранить,
   поделиться, попробовать) — оранжевые, вторые (каталог, отмена, назад) — белые, у всех подъём.
   Игровая и админка идут мимо нового стиля, поэтому там кнопки не меняются. */
body.style-v2 .btn-primary,
body.style-v2 .btn-dark,
body.style-v2 .full-btn,
body.style-v2 .cq-lead-submit,
body.style-v2 .cq-lead .btn-primary,
body.style-v2 .cabinet-tab.active{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));
  color:#231c14;border:0;border-radius:var(--v2-r-pill);font-weight:800;box-shadow:var(--v2-shadow-hot);
  cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,background .2s ease}
body.style-v2 .btn-primary:hover,
body.style-v2 .btn-dark:hover,
body.style-v2 .full-btn:hover,
body.style-v2 .cq-lead-submit:hover,
body.style-v2 .cq-lead .btn-primary:hover{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));
  transform:translateY(-3px) rotate(-1deg) scale(1.02);box-shadow:0 22px 44px rgba(255,107,74,.36)}
body.style-v2 .btn-outline,
body.style-v2 .cabinet-tab{background:#fff;color:var(--v2-ink);border:2px solid rgba(30,28,26,.12);
  border-radius:var(--v2-r-pill);font-weight:800;box-shadow:var(--v2-shadow-soft);cursor:pointer;
  transition:transform .18s ease,box-shadow .25s ease,border-color .18s ease}
body.style-v2 .btn-outline:hover,
body.style-v2 .cabinet-tab:hover{background:#fff;border-color:var(--v2-lime);
  transform:translateY(-3px) rotate(-1deg)}
body.style-v2 .cabinet-tab.active{color:#231c14}
body.dark.style-v2 .btn-outline,body.dark.style-v2 .cabinet-tab{background:#26241F;color:var(--v2-ink);
  border-color:rgba(255,255,255,.14)}
body.dark.style-v2 .btn-outline:hover,body.dark.style-v2 .cabinet-tab:hover{background:#26241F}
/* остальным кнопкам (`.btn` без варианта) — тот же подъём, чтобы поведение было единым */
body.style-v2 .btn{transition:transform .18s ease,box-shadow .25s ease}
body.style-v2 .btn:not(.btn-primary):not(.btn-dark):not(.btn-outline):not(.btn-ghost):not(.btn-hot):not(.btn-ink):not(.btn-soft):hover{
  transform:translateY(-3px)}

/* --- формы внутренних страниц: поля и подложка в стиле главной ---
   Заказчик, 16 октября: «формы на внутренних выдели в стиле главной — нужна подложка».
   Поля: белые, рамка 2 px, скругление 18 px, при фокусе — коралловая рамка с мягким свечением.
   Подложка: у заявок (`.cq-lead`), карточек кабинета и контента (`.card`) и окон (`.modal-content`)
   белая карточка со скруглением и мягкой тенью — как блоки на главной. */
body.style-v2 input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]),
body.style-v2 textarea,
body.style-v2 select{background:#fff;color:var(--v2-ink);border:2px solid rgba(30,28,26,.12);
  border-radius:var(--v2-r-md);padding:12px 14px;font-family:inherit;font-size:15px;width:100%;
  box-sizing:border-box;transition:border-color .18s ease,box-shadow .18s ease}
body.style-v2 input:focus,body.style-v2 textarea:focus,body.style-v2 select:focus{
  outline:none;border-color:var(--v2-coral);box-shadow:0 0 0 3px rgba(255,107,74,.16)}
body.style-v2 input::placeholder,body.style-v2 textarea::placeholder{color:var(--v2-muted)}
body.style-v2 textarea{min-height:118px;resize:vertical}
body.dark.style-v2 input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
body.dark.style-v2 textarea,body.dark.style-v2 select{background:#26241F;color:var(--v2-ink);
  border-color:rgba(255,255,255,.14)}
body.style-v2 .cq-lead{background:#fff;border-radius:var(--v2-r-lg);padding:22px;box-shadow:var(--v2-shadow-soft)}
body.style-v2 .cq-lead-title{font-weight:800;font-size:19px;color:var(--v2-ink);margin-bottom:4px}
body.style-v2 .cq-lead-note{font-size:13px;color:var(--v2-muted)}
body.style-v2 .cq-lead-error{font-size:13px;color:var(--v2-coral)}
body.style-v2 .card{background:#fff;border:0;border-radius:var(--v2-r-lg);box-shadow:var(--v2-shadow-soft)}
body.style-v2 .modal-content{background:#fff;border:0;border-radius:var(--v2-r-xl);padding:28px;
  box-shadow:0 24px 60px rgba(30,28,26,.24)}
body.style-v2 .modal-content h3{font-weight:800;color:var(--v2-ink)}
body.style-v2 .modal-sub{color:var(--v2-muted)}
body.style-v2 .cq-consent a,body.style-v2 .cq-lead-consent a{color:var(--v2-deep)}
body.style-v2 .cq-consent input,body.style-v2 .cq-lead-consent input{accent-color:var(--v2-coral)}
body.dark.style-v2 .cq-lead,body.dark.style-v2 .card,body.dark.style-v2 .modal-content{background:#26241F;box-shadow:none}

/* --- фильтр каталога: компактная белая панель, видимые бегунки, без дублей значений ---
   Заказчик, 16 октября: «на фильтр в каталоге примени какой-нибудь дизайн в нашем стиле: сейчас
   плохо, что бегунков не видно, дублируются цифры — значения в бегунках, неровно стоят элементы,
   серый фон и сильно большой. Нужен компактный и гармоничный к новому дизайну».
   Что сделано: панель стала белой карточкой с плотными отступами и колонками от 200 px; дорожка
   бегунка теперь видна (6 px), ползунки — коралловые с белой окантовкой; строка «от … до …»
   скрыта, потому что те же значения стоят в полях ниже (это и был дубль); все элементы управления
   одной высоты 44 px, поэтому заголовки и поля стоят ровно. */
/* --- ФИЛЬТР КАТАЛОГА: кнопка и параметры в одной строке, теги — отдельной строкой, подложка общая.
   Заказчик, 16 октября: «я бы параметры фильтра открывал в одну строку с кнопкой фильтр
   (теги как сейчас с новой строки), т.е. при клике на фильтр появляется подложка и эта кнопка
   оказывается в ней — типа это всё её блок»; «название параметров с выбранным в одну линию,
   сейчас скачут; все фильтры в одну строку по ширине блока». --- */
body.style-v2 .catalog-filterbox{margin:0 0 18px;border-radius:var(--v2-r-lg);background:transparent;padding:0}
body.style-v2 .catalog-filterbox.open{background:#fff;box-shadow:var(--v2-shadow-soft);padding:14px 16px}
/* Открытый фильтр: кнопка «Фильтр» на своей строке, параметры — строкой ниже под ней
   (заказчик, 16 октября: «фильтр в десктопе при открытии — параметры с новой строки, под кнопкой»). */
body.style-v2 .catalog-filterbox.open .catalog-filterrow{flex-wrap:wrap;gap:10px}
body.style-v2 .catalog-filterbox.open .catalog-filters{flex:1 1 100%;order:5;flex-wrap:wrap;
  gap:10px;margin-top:2px}
body.style-v2 .catalog-filterbox.open .catalog-filters details.filter-multi{flex:0 1 auto;min-width:0}
body.style-v2 .catalog-filterbox.open .catalog-tags{flex:1 1 100%;order:6}
body.style-v2 .catalog-filterrow{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
body.style-v2 .catalog-filterbox:not(.open) .catalog-filters,
body.style-v2 .catalog-filterbox:not(.open) .catalog-tags{display:none}
body.style-v2 .catalog-filters{display:flex;flex-wrap:nowrap;gap:10px;margin:0;flex:1 1 auto;min-width:0;
  background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
body.style-v2 .catalog-tags{margin-top:12px}
body.style-v2 .catalog-tags .filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
body.style-v2 .catalog-filters details.filter-multi{position:relative;flex:0 1 auto;min-width:0;
  display:block}
body.style-v2 .catalog-filters details.filter-multi>summary{display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;min-height:44px;padding:0 14px;border:2px solid rgba(30,28,26,.12);
  border-radius:var(--v2-r-pill);background:#fff;cursor:pointer;list-style:none;margin:0}
body.style-v2 .catalog-filters details.filter-multi>summary::-webkit-details-marker{display:none}
body.style-v2 .catalog-filters details.filter-multi[open]>summary{border-color:var(--v2-coral);
  box-shadow:0 0 0 3px rgba(255,107,74,.14)}
body.style-v2 .catalog-filters .filter-title{font-size:13px;font-weight:800;color:var(--v2-muted);
  white-space:nowrap;margin:0}
body.style-v2 .catalog-filters .filter-value{font-size:13.5px;font-weight:800;color:var(--v2-ink);
  white-space:nowrap;max-width:210px;overflow:hidden;text-overflow:ellipsis;margin:0}
body.style-v2 .catalog-filters .filter-panel{position:absolute;left:0;top:calc(100% + 8px);z-index:80;
  min-width:200px;max-width:320px;background:#fff;border-radius:16px;padding:10px;
  box-shadow:0 18px 40px rgba(30,28,26,.16);border:1px solid rgba(30,28,26,.06)}
body.style-v2 .catalog-filters .filter-search{width:100%;height:40px;border:2px solid rgba(30,28,26,.12);
  border-radius:12px;padding:0 12px;font:inherit;font-size:13.5px;margin-bottom:8px;outline:none}
body.style-v2 .catalog-filters .filter-search:focus{border-color:var(--v2-coral);
  box-shadow:0 0 0 3px rgba(255,107,74,.14)}
body.style-v2 .catalog-filters .filter-options{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;
  gap:2px;margin:0;border:0;border-radius:0}
body.style-v2 .catalog-filters .filter-quest-option{display:block;width:100%;text-align:left;padding:9px 12px;
  border:0;border-radius:10px;background:transparent;font:inherit;font-size:13.5px;color:var(--v2-ink);cursor:pointer}
body.style-v2 .catalog-filters .filter-quest-option:hover{background:#F6F2EA}
body.style-v2 .catalog-filters .filter-quest-option.active{background:var(--v2-lime-soft);font-weight:800}
@media(max-width:900px){
  body.style-v2 .catalog-filterrow{flex-wrap:wrap}
  body.style-v2 .catalog-filters{flex-wrap:wrap}
}
/* Телефон и фильтр закрыт: кнопка «Фильтр» и сортировка стоят в одну строку
   (заказчик, 16 октября: «кнопку фильтр и сортировку в мобилке можем сделать по одной линии,
   пока не нажато»). Сортировку туда переносит cqCatalogPlaceSort(), а раскрытый фильтр её
   возвращает под облако выбранных. */
/* Телефон: в одну строку «Фильтр» и сортировку не ставим (на узком экране не помещаются) —
   кнопка «Фильтр» идёт во всю ширину сверху, сортировка — ниже справа.
   Заказчик, 16 октября: «если это сложно, давай фильтр во всю ширину выше, сортировка справа ниже». */
@media(max-width:860px){
  body.style-v2 .catalog-filterrow{flex-wrap:wrap;gap:8px;align-items:center}
  body.style-v2 .catalog-filter-btn{flex:1 1 100%;width:100%;justify-content:center}
  body.style-v2 .catalog-sort{justify-content:flex-end;margin:10px 0 14px}
  body.style-v2 .catalog-sort .cq-sort-btn{min-height:42px;padding:0 14px;font-size:13.5px}
  /* на телефоне параметры раскладываем по две в ряд */
  body.style-v2 .catalog-filterbox.open .catalog-filters details.filter-multi{flex:1 1 calc(50% - 4px);
    min-width:0}
  body.style-v2 .catalog-filterbox.open .catalog-filters details.filter-multi>summary{width:100%;
    justify-content:space-between}
}
body.style-v2 .filter-group{display:flex;flex-direction:column}
body.style-v2 .filter-title{font-size:11px;font-weight:800;color:var(--v2-muted);margin-bottom:6px}
body.style-v2 .filter-multi summary{min-height:44px;align-items:center;padding:10px 14px;
  border:2px solid rgba(30,28,26,.12);border-radius:var(--v2-r-md);background:#fff;color:var(--v2-ink);
  font-weight:700;font-size:14px}
body.style-v2 .filter-value{color:var(--v2-muted)}
body.style-v2 .filter-options{margin-top:6px;border:2px solid rgba(30,28,26,.12);border-radius:var(--v2-r-md);
  max-height:220px}
body.style-v2 .filter-option{border-radius:10px}
body.style-v2 .filter-option:hover{background:var(--v2-lime-soft)}
body.style-v2 .chip-count{background:var(--v2-cream);color:var(--v2-muted);font-weight:700}
body.style-v2 .filter-chips{gap:8px}
body.style-v2 .chip-tag{min-height:40px;padding:8px 14px;border:2px solid rgba(30,28,26,.12);
  border-radius:var(--v2-r-pill);background:#fff;color:var(--v2-ink);font-weight:700;font-size:13.5px;
  transition:transform .18s ease,box-shadow .25s ease,border-color .18s ease}
body.style-v2 .chip-tag:hover{border-color:var(--v2-lime);transform:translateY(-2px)}
body.style-v2 .chip-tag.active{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));
  border-color:transparent;color:#231c14;box-shadow:var(--v2-shadow-hot)}
body.style-v2 .chip-tag.active .chip-count{background:rgba(255,255,255,.45);color:#231c14}
/* Строку «от … до …» не показываем: те же числа видно в полях под бегунками (это и был дубль). */
body.style-v2 .filter-range .range-values{display:none}
body.style-v2 .range-sliders{height:30px}
body.style-v2 .range-sliders input[type=range]{top:4px;height:22px;pointer-events:none}
body.style-v2 .range-sliders input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:rgba(30,28,26,.14)}
body.style-v2 .range-sliders input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--v2-coral);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(30,28,26,.28);cursor:pointer}
body.style-v2 .range-sliders input[type=range]::-moz-range-track{height:6px;border-radius:999px;
  background:rgba(30,28,26,.14)}
body.style-v2 .range-sliders input[type=range]::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;
  border-radius:50%;background:var(--v2-coral);border:3px solid #fff;box-shadow:0 2px 8px rgba(30,28,26,.28);
  cursor:pointer}
body.style-v2 .range-inputs{gap:8px;margin-top:6px}
body.style-v2 .range-inputs input{padding:9px 11px;font-size:14px;border-radius:12px}
body.style-v2 .filter-actions{gap:12px;margin-top:4px}
body.style-v2 .filter-active{color:var(--v2-muted);font-size:12.5px}
body.style-v2 .catalog-sort select{min-height:44px;border:2px solid rgba(30,28,26,.12);
  border-radius:var(--v2-r-pill);padding:10px 14px;font-weight:700;font-size:13.5px}
body.dark.style-v2 .catalog-filters{background:#26241F;box-shadow:none}
body.dark.style-v2 .filter-multi summary,body.dark.style-v2 .filter-options,body.dark.style-v2 .chip-tag{
  background:#26241F;border-color:rgba(255,255,255,.14);color:var(--v2-ink)}
body.dark.style-v2 .filter-option:hover{background:#2E2A24}
body.dark.style-v2 .range-sliders input[type=range]::-webkit-slider-runnable-track,
body.dark.style-v2 .range-sliders input[type=range]::-moz-range-track{background:rgba(255,255,255,.18)}
body.dark.style-v2 .chip-count{background:#1B1B18;color:var(--v2-muted)}



/* --- БЛОК ДЕМО-КВЕСТА НА ГЛАВНОЙ (заказчик, 16 октября) ---
   Карточка: слева обложка демо-квеста, справа — текст и кнопка сразу в игру. */
/* Подложка у блока демо-квеста: он стоит между «мятной» секцией шагов и каталогом,
   поэтому даём мягкий голубой фон (заказчик, 16 октября: «и подложку нужно»). */
body.style-v2 #v2-demo{background:var(--v2-sky-soft)}
body.style-v2 .demo-card{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:0;
  background:#fff;border-radius:var(--v2-r-xl);box-shadow:var(--v2-shadow);overflow:hidden}
body.style-v2 .demo-media{position:relative;min-height:260px;background:var(--v2-lime-soft)}
body.style-v2 .demo-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.style-v2 .demo-media-badge{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;
  min-height:28px;padding:0 12px;border-radius:var(--v2-r-pill);background:rgba(30,28,26,.62);color:#fff;
  font-size:11.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
body.style-v2 .demo-body{padding:32px 34px 34px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
body.style-v2 .demo-body .section-title{margin:0}
body.style-v2 .demo-body .sub{color:var(--v2-muted);font-size:16px;line-height:1.55;margin:0}
body.style-v2 .demo-points{list-style:none;margin:2px 0 6px;padding:0;display:grid;gap:8px}
body.style-v2 .demo-points li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.45;
  color:var(--v2-ink);font-weight:600}
body.style-v2 .demo-points li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;
  width:19px;height:19px;border-radius:50%;background:var(--v2-lime-soft);color:#4d7a2b;font-size:11px;font-weight:900}
body.style-v2 .demo-cta{margin-top:4px;min-height:48px;padding:0 24px;font-size:15px;font-weight:800;
  border-radius:var(--v2-r-pill)}
body.style-v2 .demo-note{font-size:12.5px;color:var(--v2-muted)}
@media(max-width:860px){
  body.style-v2 .demo-card{grid-template-columns:minmax(0,1fr)}
  body.style-v2 .demo-media{min-height:0;aspect-ratio:16/10}
  body.style-v2 .demo-body{padding:22px 20px 24px}
  body.style-v2 .demo-body .sub{font-size:15px}
  body.style-v2 .demo-cta{width:100%;justify-content:center}
}

/* Телефон: длинные слова в заголовке и теги не растягивают страницу
   (заказчик, 16 октября: «в карточке квеста по ширине в мобилке растягивается экран,
   вылетает заголовок, например в ТЕСТ 2»). */
.quest-page{overflow-x:clip}
.quest-title{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.quest-layout{min-width:0}
.quest-layout>div{min-width:0}
.quest-badges{min-width:0;max-width:100%}
.quest-badges .badge-tag,.quest-badges .quest-tag{max-width:100%;white-space:normal;
  overflow-wrap:anywhere;text-align:left}
.quest-badges-tags{min-width:0}
body.style-v2 .quest-title{overflow-wrap:anywhere;word-break:break-word}
body.style-v2 .specs-grid{min-width:0}
body.style-v2 .spec-value{overflow-wrap:anywhere}
body.style-v2 .desc-tabs{flex-wrap:wrap}
body.style-v2 .buy-box{min-width:0}
body.style-v2 .buy-price{overflow-wrap:anywhere}
@media(max-width:520px){
  body.style-v2 .quest-badges .badge-tag,body.style-v2 .quest-badges .quest-tag{font-size:11.5px}
  body.style-v2 .desc-tab{padding:10px 12px;font-size:13px}
}

/* --- СТРАНИЦА КВЕСТА: бейджи и теги под названием ---
   Заказчик, 16 октября: «акционная цена так же должна быть в карточке квеста и теги тоже
   (акция, бесплатно и т.д + теги фильтра)». Классы общие с карточками каталога. */
.quest-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 2px}
.quest-badges:empty{display:none}
.quest-badges .badge-tag{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800}
.quest-badges-tags{display:inline-flex;flex-wrap:wrap;gap:6px}
.quest-badges .quest-tag{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700}
body.style-v2 .quest-badges{margin:14px 0 4px}
body.style-v2 .quest-badges .badge-tag{border-radius:var(--v2-r-pill)}
body.style-v2 .quest-badges .quest-tag{background:var(--v2-cream);color:var(--v2-muted);
  border:2px solid rgba(30,28,26,.08)}
body.dark.style-v2 .quest-badges .quest-tag{background:rgba(255,255,255,.06);color:var(--v2-ink);
  border-color:rgba(255,255,255,.12)}

/* Кнопка «🎯 К точке»: стоит рядом с «Показать описание», тем же стилем, но акцентным цветом
   (заказчик, 16 октября: «кнопку к точке поставь рядом с кнопкой «показать описание», стиль тот же,
   только цвет возьми выделяющийся из наших, и скрывать, когда карта закрыта»).
   Появляется только когда игрок сам подвигал карту — вернуться можно одним нажатием. */
.route-toggle-bar{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-left:auto;flex:none}
#btn-map-center.btn-map{margin:0;display:inline-flex;align-items:center;justify-content:center;
  padding:7px 12px;border-radius:10px;font-weight:800;cursor:pointer;border:1px solid transparent;
  background:#FFE0D6;color:#8A2C15;white-space:nowrap}
#btn-map-center.btn-map:hover{background:#FFD2C4}
#btn-map-center.hidden{display:none}
/* новый стиль сайта: акцент — коралл, как у главных действий */
body.style-v2 #btn-map-center.btn-map{background:var(--v2-coral);color:#fff;border:0;
  border-radius:var(--v2-r-pill);font-weight:800;box-shadow:var(--v2-shadow-hot);padding:8px 14px;
  transition:transform .18s ease}
body.style-v2 #btn-map-center.btn-map:hover{transform:translateY(-1px);background:var(--v2-coral)}
@media(max-width:640px){
  body.style-v2 .route-toggle-bar{flex-wrap:wrap;gap:6px;justify-content:flex-end}
  body.style-v2 .play-top-row .btn-route-toggle,
  body.style-v2 #btn-map-center.btn-map{padding:7px 11px;font-size:12.5px;white-space:nowrap}
}
body.dark.style-v2 #btn-map-center.btn-map{box-shadow:none}
/* «К точке» в одну строку: если текст не влезает рядом с кнопкой карты — остаётся только значок
   (заказчик, 19 октября; правило для всей игры). Решает JS: сравнивает верх кнопок — если они
   оказались на разных строках, включается режим «только значок». */
#btn-map-center.btn-map.cq-icon-only{flex:0 0 auto;min-width:0;padding-left:9px;padding-right:9px}
#btn-map-center.btn-map.cq-icon-only .cq-map-center-text{display:none}
#btn-map-center .cq-map-center-ico{line-height:1}

/* Награда в кнопке «Оставить отзыв» в кабинете: чуть светлее текста кнопки, чтобы читалась
   как бонус, но не спорила с главным действием. */
.btn-review-coins{font-weight:800;opacity:.85;margin-left:4px;white-space:nowrap}
body.style-v2 .btn-review-coins{opacity:.92}

/* --- ТУРНИР: фильтр всегда открыт (как в каталоге), с поиском внутри селекта ---
   Заказчик, 16 октября: «в турнире отбор турниров сделай фильтр по аналогии, как в каталоге,
   только всегда открытый. Поля: город, квест, способ передвижения… в фильтрах добавь поиск». */
.tour-filter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}
.tour-field{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.tour-label{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8b93a1}
.tour-select-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:48px;padding:0 14px;border:2px solid rgba(30,28,26,.12);border-radius:14px;background:#fff;
  font:inherit;font-size:14.5px;font-weight:700;color:#1E1C1A;cursor:pointer;text-align:left;
  box-shadow:0 4px 14px rgba(30,28,26,.05)}
.tour-select-btn:hover{border-color:rgba(30,28,26,.22)}
.tour-select-btn .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tour-select-btn .chev{color:#8b93a1;font-size:12px}
.tour-select.open .tour-select-btn{border-color:#FF6B4A;box-shadow:0 0 0 3px rgba(255,107,74,.14)}
.tour-select-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:120;
  background:#fff;border-radius:16px;padding:8px;box-shadow:0 18px 40px rgba(30,28,26,.16);
  border:1px solid rgba(30,28,26,.06);overscroll-behavior:contain}
/* на телефоне панель может быть выше экрана — ограничиваем и прокручиваем внутри,
   чтобы страница не меняла высоту и футер не подпрыгивал */
@media(max-width:640px){
  .tour-select-panel{max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .tour-options{max-height:none;overflow:visible}
}
.tour-select.open .tour-select-panel{display:block}
.tour-search{width:100%;height:42px;border:2px solid rgba(30,28,26,.12);border-radius:12px;padding:0 12px;
  font:inherit;font-size:14px;color:#1E1C1A;background:#fff;margin-bottom:6px;outline:none}
.tour-search:focus{border-color:#FF6B4A;box-shadow:0 0 0 3px rgba(255,107,74,.14)}
.tour-options{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.tour-option{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:10px 12px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:14px;
  color:#1E1C1A;text-align:left;cursor:pointer}
.tour-option:hover{background:#F6F2EA}
.tour-option.active{background:#E7F6D6;font-weight:800}
.tour-option .meta{color:#8b93a1;font-size:12px;white-space:nowrap}
@media(max-width:860px){.tour-filter{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tour-filter{grid-template-columns:1fr;gap:10px}}

/* --- ШАПКА ТУРНИРА: ровные отступы (заказчик, 16 октября: «отступы проверь — сейчас
   в шапке всё зажато и не ровно»). Саму таблицу не трогаем. --- */
body.style-v2 .tournament-page{padding:34px 0 64px}
body.style-v2 .tournament-page .container{padding:0 20px}
body.style-v2 .tournament-page .section-title{margin:0 0 10px;text-align:left}
body.style-v2 .tournament-page .section-sub{margin:0 0 22px;text-align:left;color:#6F6A62;font-size:16px}
@media(max-width:640px){
  body.style-v2 .tournament-page{padding:24px 0 48px}
  body.style-v2 .tournament-page .container{padding:0 16px}
  body.style-v2 .tournament-page .section-title{font-size:26px}
  body.style-v2 .tournament-page .section-sub{margin-bottom:16px;font-size:14.5px}
}

/* --- ЛАЙТБОКС: приближение картинки пальцами ---
   Заказчик, 16 октября: «большие картинки в слайдере нельзя увеличить — в мобилке не получается
   приблизить пальцами, чтобы посмотреть детали». */
.cq-lightbox{touch-action:none}
.cq-lightbox .cq-lb-img{transform-origin:center center;will-change:transform;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;cursor:zoom-in}
.cq-lightbox.cq-lb-zoomed .cq-lb-img{cursor:grab}
.cq-lightbox .cq-lb-hint{display:none;color:#c7c9cd;font-size:12px;margin-left:12px}
@media(hover:none){
  .cq-lightbox .cq-lb-hint{display:inline}
  .cq-lightbox.cq-lb-zoomed .cq-lb-hint{display:none}
}

/* Аватар в кабинете: клик по фото открывает выбор файла
   (заказчик, 16 октября: «сделай просто при клике на аватар открытие выбора фото»). */
.cq-avatar-edit{display:inline-flex;border-radius:50%;cursor:pointer;flex:none;
  -webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease}
.cq-avatar-edit:hover{transform:translateY(-1px)}
.cq-avatar-edit:focus-visible{outline:3px solid #7CC63F;outline-offset:2px}
body.style-v2 .cq-avatar-edit{box-shadow:0 0 0 3px rgba(255,255,255,.9)}
body.dark.style-v2 .cq-avatar-edit{box-shadow:0 0 0 3px rgba(255,255,255,.08)}

/* --- КАБИНЕТ: карточка с именем в нашем стиле + монеты ---
   Заказчик, 16 октября: «в ЛК на плашке первой, где имя — сделай её в нашем стиле (у нас нет
   такого синего теперь) и добавь "Монет: число", лаконично». */
body.style-v2 .user-card{background:#fff;color:var(--v2-ink);border-radius:var(--v2-r-xl);
  padding:20px 22px;box-shadow:var(--v2-shadow-soft);border:1px solid rgba(30,28,26,.06);
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:18px}
body.style-v2 .user-card .user-line{display:flex;align-items:center;gap:14px;min-width:0}
body.style-v2 .user-card .user-info{min-width:0}
body.style-v2 .user-card .name{font-size:20px;font-weight:800;color:var(--v2-ink);display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
body.style-v2 .user-card .key-label{font-size:12.5px;color:var(--v2-muted);font-family:inherit;
  margin-top:2px;overflow:hidden;text-overflow:ellipsis}
body.style-v2 .user-card .cabinet-avatar{border-radius:50%}
body.style-v2 .user-card-logout{background:#fff;border:2px solid rgba(30,28,26,.12);color:var(--v2-ink);
  border-radius:var(--v2-r-pill);font-weight:800;box-shadow:none}
body.style-v2 .user-card-logout:hover{border-color:rgba(30,28,26,.24)}
/* монеты: маленький чип справа от почты — заметно, но не спорит с именем */
body.style-v2 .user-coins{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  background:var(--v2-mint);border-radius:var(--v2-r-pill);padding:5px 11px;font-size:13px;
  font-weight:800;color:var(--v2-deep)}
body.style-v2 .user-coins-ico{font-size:13px;line-height:1}
body.style-v2 .user-coins-num{font-size:14px}
body.style-v2 .user-coins-label{font-weight:600;color:var(--v2-muted);font-size:12px}
body.dark.style-v2 .user-card{background:var(--v2-surface,#26241F);color:var(--v2-ink);
  border-color:rgba(255,255,255,.08);box-shadow:none}

/* Остальные «синие» плашки старых страниц — тоже в нашем стиле (заказчик: «и другие на сайте
   тоже, у нас нет такого синего теперь»). */
/* Важно: у заголовков и подписей в этих плашках были СВОИ светлые цвета под синий фон.
   Просто перекрасить подложку мало — заголовки остаются белыми на светлом (заказчик, 16 октября:
   «текст перестал читаться — светлый на светлом»). Поэтому перекрашиваем и детей, с явными
   селекторами (у `*` не хватает веса против `.story-head h1` и подобных). */
body.style-v2 .rules-hero{background:var(--v2-mint);color:var(--v2-ink);border-radius:var(--v2-r-lg);
  box-shadow:none}
body.style-v2 .rules-hero h1,
body.style-v2 .rules-hero h2,
body.style-v2 .rules-hero h3,
body.style-v2 .rules-hero p,
body.style-v2 .rules-hero li,
body.style-v2 .rules-hero .rules-hero-title,
body.style-v2 .rules-hero .rules-hero-sub,
body.style-v2 .rules-hero span,
body.style-v2 .rules-hero strong{color:var(--v2-ink)}
body.style-v2 .story-head{background:#fff;color:var(--v2-ink);border-radius:var(--v2-r-lg);
  box-shadow:var(--v2-shadow-soft)}
body.style-v2 .story-head h1,
body.style-v2 .story-head h2,
body.style-v2 .story-head p,
body.style-v2 .story-head span,
body.style-v2 .story-head strong,
body.style-v2 .story-head .story-meta{color:var(--v2-ink)}
/* ---- Обложка контентной страницы: общий шаблон внутренних страниц ----
   Заказчик, 19 октября: «картинки бледные — сделай контрастнее на всех страницах; лучше
   тёмный фильтр, но чтобы текст читался» и «где картинки нет совсем — замени фон с графита
   на другой наш цвет». Поэтому два вида (класс has-cover ставит сервер, когда у обложки
   есть картинка):
   1) с картинкой — фото на всю ширину под тёмным фильтром, заголовок и текст светлые;
   2) без картинки — тёплая мятная плашка с мягкими пятнами нашей палитры, текст тёмный. */
body.style-v2 .page-hero.has-cover{background:linear-gradient(135deg,#2C251D,#17140F);color:#FFF8EE;
  isolation:isolate}
body.style-v2 .page-hero.has-cover .page-hero-bg{opacity:1;filter:brightness(.72) contrast(1.05) saturate(1.08)}
body.style-v2 .page-hero.has-cover::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,20,15,.5) 0%,rgba(23,20,15,.76) 100%)}
body.style-v2 .page-hero.has-cover .page-hero-inner{position:relative;z-index:1}
body.style-v2 .page-hero.has-cover .page-hero-inner h1,
body.style-v2 .page-hero.has-cover .page-hero-inner h2,
body.style-v2 .page-hero.has-cover .page-hero-inner p,
body.style-v2 .page-hero.has-cover .page-hero-inner span,
body.style-v2 .page-hero.has-cover .page-hero-inner strong{color:#FFF8EE}
body.style-v2 .page-hero.has-cover .page-hero-inner h1{text-shadow:0 2px 18px rgba(0,0,0,.35)}
body.style-v2 .page-hero.has-cover .page-hero-sub{color:rgba(255,248,238,.88);text-shadow:0 1px 12px rgba(0,0,0,.3)}
/* кнопка на фото — главное действие, коралловое (тёмная кнопка на фото терялась) */
body.style-v2 .page-hero.has-cover .btn-dark{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));
  color:#231c14;box-shadow:var(--v2-shadow-hot)}
body.style-v2 .page-hero.has-cover .btn-dark:hover{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));
  transform:translateY(-2px);color:#231c14}
/* без картинки — наша тёплая плашка: мята и мягкие пятна коралла, солнца и лайма */
body.style-v2 .page-hero:not(.has-cover){background:var(--v2-mint);color:var(--v2-ink);isolation:isolate}
body.style-v2 .page-hero:not(.has-cover)::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;background:
  radial-gradient(300px 240px at 8% 6%,rgba(255,107,74,.16),rgba(255,107,74,0) 70%),
  radial-gradient(260px 220px at 88% 2%,rgba(255,201,60,.20),rgba(255,201,60,0) 70%),
  radial-gradient(340px 260px at 98% 100%,rgba(124,198,63,.18),rgba(124,198,63,0) 70%)}
body.style-v2 .page-hero:not(.has-cover) .page-hero-inner{position:relative;z-index:1}
body.style-v2 .page-hero:not(.has-cover) .page-hero-inner h1,
body.style-v2 .page-hero:not(.has-cover) .page-hero-inner h2,
body.style-v2 .page-hero:not(.has-cover) .page-hero-inner p,
body.style-v2 .page-hero:not(.has-cover) .page-hero-inner span,
body.style-v2 .page-hero:not(.has-cover) .page-hero-inner strong{color:var(--v2-ink)}
body.style-v2 .page-hero:not(.has-cover) .page-hero-sub{color:var(--v2-muted)}
body.style-v2 .page-hero:not(.has-cover) .btn-dark{color:#fff}
/* кнопки в светлых плашках сохраняют свой тёмный контраст */
body.style-v2 .rules-hero .btn-dark,
body.style-v2 .story-head .btn-dark{color:#fff}
body.style-v2 .pause-overlay-card{background:#fff;color:var(--v2-ink);border-radius:var(--v2-r-lg)}
body.style-v2 .pause-overlay-card h1,
body.style-v2 .pause-overlay-card h2,
body.style-v2 .pause-overlay-card h3,
body.style-v2 .pause-overlay-card p,
body.style-v2 .pause-overlay-card span,
body.style-v2 .pause-overlay-card strong{color:var(--v2-ink)}
body.dark.style-v2 .rules-hero,body.dark.style-v2 .story-head{
  background:var(--v2-lime-soft);color:var(--v2-ink)}

/* --- ПИКТОГРАММЫ КОНТЕНТНЫХ БЛОКОВ («Об игре», «В путешествие» и т. п.) ---
   Новый набор /img/icons/*.png нарисован в нашей палитре, 480×480: показываем его ровным
   квадратом без обрезки, а не растянутым на всю ширину карточки, как было раньше (заказчик,
   16 октября: «эти не входят в блок и видно пиксели»). */
.page-card img[src*="/img/icons/"]{width:74px;height:74px;object-fit:contain;background:transparent;
  border-radius:16px;margin:2px 0 4px}
body.style-v2 .page-card img[src*="/img/icons/"]{width:76px;height:76px;box-shadow:none}
@media(max-width:640px){
  .page-card img[src*="/img/icons/"],body.style-v2 .page-card img[src*="/img/icons/"]{width:64px;height:64px}
}
/* Иллюстрации (маршрут, компания) остаются широкими — у них своя пропорция */
.page-card img[src*="/img/about-"]{width:100%;height:auto;max-height:220px;object-fit:cover}

/* --- КАТАЛОГ: демо-полоса, кнопка «Фильтр» со счётчиком, сортировка-чип, облако активных ---
   Заказчик, 16 октября: «Отступ от шапки сделай больше и от футера тоже. Кнопку фильтр поставим
   в одну линию с сортировкой. Значок фильтра замени на из нашей тематики, кнопка оранжевая.
   При открытых полях сортировку уносим под фильтр. Слово сортировка убирай — компактнее но
   понятно. Кол-во найденного в кружок внутрь кнопки. По умолчанию поля скрыты. Облако
   с выбранными фильтрами с кнопкой сбросить, оно не скрывается кнопкой фильтра». */
body.style-v2 .catalog-page{padding:38px 0 78px}
@media(max-width:640px){body.style-v2 .catalog-page{padding:22px 0 56px}}

/* демо-квест: полоса над фильтром, ведёт сразу в игру */
body.style-v2 .catalog-demo{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 18px;
  border-radius:var(--v2-r-lg);background:var(--v2-mint);text-decoration:none;color:var(--v2-ink);
  box-shadow:var(--v2-shadow-soft);transition:transform .18s ease,box-shadow .18s ease}
body.style-v2 .catalog-demo:hover{transform:translateY(-2px);box-shadow:var(--v2-shadow)}
body.style-v2 .catalog-demo-ico{width:26px;height:26px;flex:0 0 26px;display:block;color:var(--v2-coral)}
body.style-v2 .catalog-demo-text{flex:1 1 auto;min-width:0;font-size:15px;line-height:1.45;color:var(--v2-muted)}
body.style-v2 .catalog-demo-text b{color:var(--v2-ink)}
/* Кнопка демо не оранжевая (заказчик, 16 октября: «кнопку пройти демо в каталоге сделай
   не оранжевой»): графит, как «Сбросить» — акцент остаётся у главных действий. */
/* Кнопка демо — белая с тонкой рамкой (заказчик, 16 октября: «сделай белой, графит сильно тяжёлый»). */
body.style-v2 .catalog-demo-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;border-radius:var(--v2-r-pill);font-weight:800;font-size:14px;
  background:#fff;color:var(--v2-ink);border:2px solid rgba(30,28,26,.12);white-space:nowrap;
  box-shadow:none;transition:border-color .18s ease,transform .18s ease}
body.style-v2 .catalog-demo:hover .catalog-demo-btn{border-color:var(--v2-lime);transform:translateY(-1px)}
@media(max-width:720px){
  /* на телефоне картинка занимала отдельную строку — прячем: текст и кнопка в две ровные
     строки (заказчик, 16 октября: «убери картину, если она создаёт отдельную строку») */
  body.style-v2 .catalog-demo{flex-wrap:wrap;gap:10px;padding:14px}
  body.style-v2 .catalog-demo-ico{display:none}
  body.style-v2 .catalog-demo-text{font-size:14px;flex:1 1 100%}
  body.style-v2 .catalog-demo-btn{width:100%}
}

/* строка «Фильтр + сортировка» */
/* старый тулбар больше не отдельный блок: кнопка стоит в строке фильтра */
body.style-v2 .catalog-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
/* Сортировка — под облаком выбранных фильтров, по правому краю (заказчик, 16 октября). */
body.style-v2 .catalog-sort{display:flex;justify-content:flex-end;margin:0 0 16px}
/* от облака выбранных фильтров до сортировки — чуть больше воздуха
   (заказчик, 16 октября: «в фильтре облако выбранных сделай отступ от кнопки сортировки больше») */
body.style-v2 .catalog-active + .catalog-sort{margin-top:6px}
body.style-v2 .catalog-filter-btn{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;
  border:0;border-radius:var(--v2-r-pill);cursor:pointer;font:inherit;font-weight:800;font-size:14.5px;
  background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));color:#fff;
  box-shadow:var(--v2-shadow-hot);transition:transform .18s ease}
body.style-v2 .catalog-filter-btn:hover{transform:translateY(-2px)}
body.style-v2 .catalog-filter-ico{width:18px;height:18px;flex:0 0 18px;display:block;color:#fff}
/* сколько найдено — кружком в самой кнопке */
body.style-v2 .catalog-filter-count{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;
  border-radius:999px;background:#fff;color:var(--v2-ink);font-size:12.5px;font-weight:900;line-height:1}
body.style-v2 .catalog-filter-count[hidden]{display:none}
body.style-v2 .catalog-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* сортировка: чип с текущим порядком и списком */
body.style-v2 .cq-sort{position:relative}
body.style-v2 .cq-sort-btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;
  border:2px solid rgba(30,28,26,.12);border-radius:var(--v2-r-pill);background:#fff;color:var(--v2-ink);
  font:inherit;font-weight:800;font-size:14px;cursor:pointer;transition:border-color .18s ease,transform .18s ease}
body.style-v2 .cq-sort-btn:hover{border-color:var(--v2-lime);transform:translateY(-2px)}
body.style-v2 .cq-sort-ico{color:var(--v2-muted);font-size:13px}
body.style-v2 .cq-sort-chev{color:var(--v2-muted);font-size:11px}
body.style-v2 .cq-sort-panel{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:190px;
  padding:8px;border-radius:var(--v2-r-md);background:#fff;box-shadow:0 18px 44px rgba(30,28,26,.18)}
body.style-v2 .cq-sort-panel.open{display:grid;gap:4px}
body.style-v2 .cq-sort-item{text-align:left;border:0;background:transparent;border-radius:10px;padding:11px 12px;
  font:inherit;font-size:14px;font-weight:600;color:var(--v2-ink);cursor:pointer}
body.style-v2 .cq-sort-item:hover{background:var(--v2-lime-soft)}
body.style-v2 .cq-sort-item.active{background:var(--v2-cream);font-weight:800}

/* облако выбранных фильтров: не прячется кнопкой «Фильтр», есть сброс */
body.style-v2 .catalog-active{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px}
body.style-v2 .catalog-active[hidden]{display:none}
body.style-v2 .catalog-active-label{font-size:12.5px;font-weight:800;color:var(--v2-muted);
  text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center}
body.style-v2 .catalog-active-label::before{content:"✓";display:none;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--v2-lime-soft);color:#3F6B22;font-size:13px;font-weight:900;
  text-transform:none;letter-spacing:0}
body.style-v2 .catalog-active-chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 6px 0 14px;
  border-radius:var(--v2-r-pill);background:#fff;border:2px solid rgba(30,28,26,.1);font-size:13.5px;
  font-weight:700;color:var(--v2-ink)}
body.style-v2 .catalog-active-x{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;
  background:var(--v2-cream);color:var(--v2-muted);font-size:15px;line-height:1;cursor:pointer;font-weight:800}
body.style-v2 .catalog-active-x:hover{background:var(--v2-coral);color:#fff}
/* Кнопка сброса выделена графитом, а не оранжевым: оранжевый уже на кнопке «Фильтр»
   и (на телефоне) на липкой кнопке — иначе на экране перебор акцентов. */
body.style-v2 .catalog-active-reset{margin-left:2px;min-height:38px;padding:0 16px;border:2px solid transparent;
  border-radius:var(--v2-r-pill);background:var(--v2-ink);color:#fff;font:inherit;font-size:13.5px;
  font-weight:800;cursor:pointer;transition:transform .18s ease,background .18s ease}
@media(max-width:640px){
  /* «Выбрано:» на телефоне заменяем значком — место экономится, смысл понятен */
  body.style-v2 .catalog-active-label-text{display:none}
  body.style-v2 .catalog-active-label::before{display:grid}
  body.style-v2 .catalog-active{gap:8px;row-gap:8px;margin:0 0 14px}
  body.style-v2 .catalog-active-chip{min-height:36px;padding:0 5px 0 12px;font-size:12.5px}
  body.style-v2 .catalog-active-x{width:24px;height:24px;font-size:14px}
  body.style-v2 .catalog-active-reset{min-height:36px;padding:0 14px;font-size:12.5px}
}
body.style-v2 .catalog-active-reset:hover{background:#403A31;transform:translateY(-2px)}
@media(hover:none){body.style-v2 .catalog-active-reset:hover{transform:none}}
/* фильтр открыт: сортировка стоит под панелью, над списком */
/* панель фильтра открыта — сортировка остаётся на своём месте, под облаком */
body.style-v2 .catalog-page.filters-open #catalog-sort{display:flex}
body.style-v2 .catalog-filters{margin:0 0 16px}
body.style-v2 .catalog-filters.open{padding:18px 20px}
body.style-v2 .filter-tags{grid-column:1 / -1}
body.dark.style-v2 .cq-sort-panel,body.dark.style-v2 .cq-sort-btn,
body.dark.style-v2 .catalog-active-chip,body.dark.style-v2 .catalog-active-reset{background:#26241F;color:var(--v2-ink);
  border-color:rgba(255,255,255,.14)}

/* --- полка городов корешками (макет: .shelf > .spine, с раскрытием по клику и стрелкам) ---
   Фон полки — цвет корешков, поэтому у скошенных граней и в просветах ничего светлого
   не просвечивает (раньше подложка была персиковой — заказчик, 16 октября: «краешки
   не перекрываются»). Корешки ровно по высоте полки, чтобы подъём при наведении был виден:
   поднявшийся корешок «выходит» из полки, а под ним открывается тёмная глубина. */
body.style-v2 .shelf{display:flex;align-items:stretch;height:520px;border-radius:var(--v2-r-xl);overflow:hidden;
  box-shadow:0 12px 28px rgba(30,28,26,.14);background:var(--v2-spine-dark)}
/* Объём корешка: подсветка по левой кромке, тень по правой и мягкая тень снизу — как у книжного
   корешка на полке (заказчик, 16 октября: «сделай их более объёмными — сейчас плоские»). */
body.style-v2 .spine{position:relative;flex:0 0 74px;height:100%;border:0;padding:0;
  cursor:pointer;overflow:hidden;font-family:inherit;
  background:linear-gradient(160deg,var(--v2-spine),var(--v2-spine-dark));transform:skewX(-6deg);
  box-shadow:inset 2px 0 0 rgba(255,255,255,.16),inset -8px 0 16px rgba(0,0,0,.22),
    inset 0 -36px 48px rgba(0,0,0,.14);
  transition:flex-basis .45s cubic-bezier(.2,.8,.3,1),transform .25s ease,filter .25s ease,
    box-shadow .25s ease,background .3s ease}
body.style-v2 .spine+.spine{margin-left:-14px}
/* крайние корешки чуть шире: скос съедал их грань, и у самого края полки появлялась полоска */
body.style-v2 .spine:first-child{flex-basis:86px}
/* Наведение: корешок приподнимается из полки, чуть шире, ярче и с тенью — видно, что он «взят»
   (заказчик, 16 октября: «сделай ховеры на корешки, пусть тоже как-то приподнимаются»).
   Раскрытый корешок не трогаем: он уже показывает обложку города. */
body.style-v2 .spine:not(.open):hover{flex-basis:88px;transform:skewX(-6deg) translateY(-12px);
  filter:brightness(1.14);
  box-shadow:inset 2px 0 0 rgba(255,255,255,.3),inset -8px 0 16px rgba(0,0,0,.2),
    inset 0 -36px 48px rgba(0,0,0,.1),0 14px 28px rgba(0,0,0,.4)}
body.style-v2 .spine:not(.open):active{transform:skewX(-6deg) translateY(-6px)}
body.style-v2 .spine:focus-visible{outline:3px solid var(--v2-coral);outline-offset:-3px}
/* Цвета корешков — пастельные тона наших фонов и кнопок: голубой, салатовый, терракот,
   оранжевый, бирюзовый (заказчик, 16 октября: «давай ещё варианты цветов попробуем — сейчас
   слишком много зелёного… может использовать цвета наших фонов и кнопок»). Второй цвет пары —
   затемнённый, чтобы белая подпись на корешке читалась. Правило общее для десктопа и мобилки:
   цвета одинаковые везде (заказчик: «в полке цвета корешков в мобилке и в десктопе одинаковыми»). */
body.style-v2 .spine:nth-child(5n+1){background:linear-gradient(160deg,#7EC8E8,#3B7FA6)}
body.style-v2 .spine:nth-child(5n+2){background:linear-gradient(160deg,#A9DC7C,#6A9B44)}
body.style-v2 .spine:nth-child(5n+3){background:linear-gradient(160deg,#E8997A,#A85A3C)}
body.style-v2 .spine:nth-child(5n+4){background:linear-gradient(160deg,#FFB46B,#C97A34)}
body.style-v2 .spine:nth-child(5n+5){background:linear-gradient(160deg,#6FD3C4,#2F8E85)}
body.style-v2 .spine .label{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;
  font-size:16px;line-height:1;letter-spacing:.01em;writing-mode:vertical-rl;text-shadow:none;
  transform:skewX(4deg) translateZ(0);backface-visibility:hidden}
body.style-v2 .spine .count{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) skewX(4deg);
  color:rgba(255,255,255,.9);font-size:12px;font-weight:700;writing-mode:vertical-rl;text-shadow:none}
/* Открытая карточка города: картинка шире корешка и уходит под соседние корешки — тогда между
   ней и соседями не видно треугольных уголков (заказчик, 16 октября: «в полке в десктопе картинку
   сделай пошире… при открытии картинка и слева и справа может быть под корешками — будет красиво»).
   Поэтому у открытого корешка z-index меньше, чем у закрытых: картинка уходит под них. */
body.style-v2 .spine.open{flex:1 1 auto;transform:none;background:#1E1C1A;overflow:visible;z-index:0}
body.style-v2 .spine:not(.open){position:relative;z-index:1}
/* У закрытого корешка обложка невидима, но её ссылка «Смотреть все игры в городе» оставалась
   кликабельной — на телефоне тап по корешку сразу уводил в каталог вместо раскрытия
   (заказчик, 16 октября: «полка сломалась — в мобилке по клику на корешки открывается каталог
   сразу»). Пусть закрытая обложка не ловит нажатия вообще. */
/* Закрытый корешок: обложки нет вовсе. Раньше она гасла плавно (opacity .5s с задержкой .12s),
   а корешок в это время уже сжимался до 74 px — и внутри него на миг появлялась сжатая белая
   кнопка «Смотреть все игры в городе» (заказчик, 16 октября: «артефакт: при закрытии корешка
   в корешке слева появляется сжатая кнопка игры в городе»). Убираем и плавность, и видимость. */
body.style-v2 .spine:not(.open) .cover{pointer-events:none;opacity:0;visibility:hidden;
  transition:none}
body.style-v2 .spine:not(.open) .cover *{pointer-events:none}
body.style-v2 .spine.open .cover{inset:-10px -22px 0;opacity:1;visibility:visible}
/* подпись и кнопка в раскрытой обложке — выше от края полки (заказчик, 16 октября:
   «кнопку с текста в обложке подними выше от полки») */
body.style-v2 .spine.open .cover .txt{left:56px;right:56px;bottom:46px}
body.style-v2 .spine.open .label,body.style-v2 .spine.open .count{display:none}
body.style-v2 .spine .cover{position:absolute;inset:0;opacity:0;transition:opacity .5s ease .12s}
body.style-v2 .spine .cover img{width:100%;height:100%;object-fit:cover}
body.style-v2 .spine .cover .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,28,26,0) 40%,rgba(30,28,26,.85))}
body.style-v2 .spine .cover .txt{position:absolute;left:34px;right:34px;bottom:32px;color:#fff;text-align:left;
  writing-mode:horizontal-tb;transform:none;font-weight:400}
body.style-v2 .spine .cover .txt b{display:block;font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-.02em}
body.style-v2 .spine .cover .txt span{display:block;font-size:17px;font-weight:600;opacity:.94;margin:6px 0 18px}
body.style-v2 .spine .cover .txt i,body.style-v2 .spine .cover .txt a{display:inline-flex;align-items:center;background:#fff;
  color:var(--v2-ink);border-radius:var(--v2-r-pill);padding:14px 24px;font-style:normal;font-weight:800;font-size:15px;
  text-decoration:none;transition:transform .2s ease}
body.style-v2 .spine .cover .txt a:hover{transform:translateY(-3px) rotate(-1.5deg)}
/* Кнопка «Ищем квест-мастеров» на обложке «Нового города»: оранжевая, как главные кнопки. */
body.style-v2 .spine .cover .txt .cq-shelf-master{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;margin-top:4px;padding:0 20px;border:0;border-radius:var(--v2-r-pill);cursor:pointer;
  background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));color:#fff;font:inherit;font-size:14.5px;
  font-weight:800;letter-spacing:.01em;box-shadow:0 10px 24px rgba(244,106,60,.35);
  transition:transform .2s ease}
body.style-v2 .spine .cover .txt .cq-shelf-master:hover{transform:translateY(-3px) rotate(-1.5deg)}
@media(hover:none){body.style-v2 .spine .cover .txt .cq-shelf-master:hover{transform:none}}
body.style-v2 .shelf-hint{margin-top:14px;color:var(--v2-muted);font-size:13.5px;font-weight:600}
body.dark.style-v2 .shelf{background:linear-gradient(120deg,#2A241F,#241F1A);box-shadow:none}

/* --- «Лучшие прогулки»: таблица турнира (макет: .tour > .row) --- */
body.style-v2 .tour{background:#fff;border-radius:var(--v2-r-xl);box-shadow:var(--v2-shadow-soft);overflow:hidden}
body.style-v2 .tour .row{display:grid;grid-template-columns:64px 1.4fr 1fr 100px 120px;gap:14px;align-items:center;
  padding:17px 24px;border-bottom:1px solid rgba(30,28,26,.06);transition:background .2s ease}
body.style-v2 .tour .row:last-child{border-bottom:0}
body.style-v2 .tour .row:hover{background:var(--v2-cream)}
body.style-v2 .tour .row.head-row{background:var(--v2-lime-soft);font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--v2-deep);font-weight:800}
body.style-v2 .tour .place{width:36px;height:36px;border-radius:50%;background:var(--v2-cream);display:grid;
  place-items:center;font-weight:800}
body.style-v2 .tour .place.gold{background:#FFF3D6;color:#9A6B10}
body.style-v2 .tour .score{font-weight:800}
body.style-v2 .tour .time{color:var(--v2-muted)}
body.dark.style-v2 .tour{background:#26241F;box-shadow:none}
body.dark.style-v2 .tour .row{border-bottom-color:rgba(255,255,255,.08)}
body.dark.style-v2 .tour .row:hover{background:#2E2A24}
body.dark.style-v2 .tour .place{background:#1B1B18}

/* --- плитки «Подарить прогулку», «Школам» и «Компаниям» (макет: .tiles > .tile) ---
   Плиток три, а не две: у школ и компаний свои страницы и свои заявки (заказчик, 16 октября:
   «разделил бы их на две плашки, у каждой кнопка со своим урлом»).
   Плитка — колонка на всю высоту ряда, кнопка прижата к низу (`margin-top:auto`): тексты разной
   длины, а кнопки в соседних плитках стоят на одном уровне (заказчик, 16 октября: «в плашке
   компаниям сделай кнопку на уровне с другими рядом стоящими плашками»). */
body.style-v2 .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
body.style-v2 .tile{display:flex;flex-direction:column;align-items:flex-start;border-radius:var(--v2-r-xl);
  padding:34px;box-shadow:var(--v2-shadow-soft);transition:transform .25s ease,box-shadow .25s ease}
body.style-v2 .tile:hover{transform:translateY(-6px) rotate(-.8deg);box-shadow:0 26px 56px rgba(30,28,26,.18)}
body.style-v2 .tile.gift{background:linear-gradient(140deg,#FFE9E3,#FFF3D6)}
body.style-v2 .tile.school{background:linear-gradient(140deg,var(--v2-lime-soft),var(--v2-sky-soft))}
body.style-v2 .tile.corp{background:linear-gradient(140deg,var(--v2-sky-soft),#EDE7FF)}
body.style-v2 .tile .ico{font-size:34px}
body.style-v2 .tile h3{font-size:22px;font-weight:800;margin:10px 0 0;color:var(--v2-ink)}
body.style-v2 .tile p{color:var(--v2-muted);margin:10px 0 18px;max-width:36ch}
body.style-v2 .tile .btn{margin-top:auto}
body.dark.style-v2 .tile.gift{background:linear-gradient(140deg,#2E2620,#2A2620)}
body.dark.style-v2 .tile.school{background:linear-gradient(140deg,#1F2A20,#1A2429)}
body.dark.style-v2 .tile.corp{background:linear-gradient(140deg,#1A2429,#241F33)}
body.dark.style-v2 .tile h3{color:var(--v2-ink)}

/* --- кнопки блоков: как в макете (заказчик, 16 октября: «кнопки в блоках сверху справа в макете
   такие — сделай; на них ховер, который приподнимает кнопку»). Портированы .btn / .btn-hot /
   .btn-ink / .btn-soft / .btn-sm из /design2, включая белую кнопку с рамкой и стрелкой. --- */
body.style-v2 .head .btn,body.style-v2 .tile .btn,body.style-v2 .cq-show-headrow .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;
  border:0;border-radius:var(--v2-r-pill);font-weight:800;font-size:15px;white-space:nowrap;
  text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,border-color .18s ease}
body.style-v2 .btn-hot{background:linear-gradient(120deg,var(--v2-coral),var(--v2-sun));color:#231c14;
  box-shadow:var(--v2-shadow-hot)}
body.style-v2 .btn-hot:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 44px rgba(255,107,74,.36)}
body.style-v2 .btn-ink{background:var(--v2-ink);color:#fff}
body.style-v2 .btn-ink:hover{transform:translateY(-3px)}
body.style-v2 .btn-soft{background:#fff;color:var(--v2-ink);border:2px solid rgba(30,28,26,.12);
  box-shadow:var(--v2-shadow-soft)}
body.style-v2 .btn-soft:hover{border-color:var(--v2-lime);transform:translateY(-3px)}
body.dark.style-v2 .btn-soft{background:#26241F;color:var(--v2-ink);border-color:rgba(255,255,255,.14)}

/* Кнопки листания ленты — те же, что у отзывов: круглые, приподнимаются при наведении. */
body.style-v2 .cq-show-headrow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap}
body.style-v2 .cq-rail-nav{display:flex;gap:8px;flex:none}
body.style-v2 .cq-rail-arrow{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--v2-ink);
  border:0;box-shadow:var(--v2-shadow-soft);font-size:18px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s ease,box-shadow .2s ease}
body.style-v2 .cq-rail-arrow:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 12px 26px rgba(30,28,26,.16)}
body.style-v2 .cq-rail-arrow[disabled]{opacity:.4;cursor:default;transform:none;box-shadow:var(--v2-shadow-soft)}
body.dark.style-v2 .cq-rail-arrow{background:#26241F;color:var(--v2-ink)}

/* --- ховеры макета: подъём с лёгким наклоном --- */
body.style-v2 .btn{transition:transform .18s ease,box-shadow .25s ease}
body.style-v2 .btn-hot:hover,body.style-v2 .hero .btn-primary:hover{transform:translateY(-3px) rotate(-1deg) scale(1.02)}
body.style-v2 .btn-ink:hover,body.style-v2 .hero .btn-ghost:hover{transform:translateY(-3px) rotate(1deg)}
body.style-v2 .btn-soft:hover{transform:translateY(-3px) rotate(-1deg);border-color:var(--v2-lime)}
/* Ховер шага — на ВСЮ плашку, как .step:hover в макете. Живое правило
   `.cq-step.is-in:hover .cq-step-body` вешает подъём и тень на внутренний блок с текстом
   (заказчик, 16 октября: «ховер на всю плашку, а у нас только на контейнер внутри где текст»),
   поэтому гасим его по весу и оставляем подъём карточке. */
body.style-v2 .cq-steps .cq-step:hover .cq-step-body,
body.style-v2 .cq-steps .cq-step.is-in:hover .cq-step-body{
  transform:none;box-shadow:none;border-color:transparent}
/* появление шагов при прокрутке оставляем, но подъём при наведении — быстрый, как в макете */
body.style-v2 .cq-steps.is-anim .cq-step{transition:opacity .55s ease,transform .22s ease,box-shadow .25s ease;
  transition-delay:calc(var(--i,0) * 40ms)}
body.style-v2 .cq-show-tile:hover{transform:translateY(-6px) rotate(-.8deg);box-shadow:0 28px 60px rgba(30,28,26,.22)}
/* Метрики первого экрана: ховер (наклон и подъём) оставляем, но курсор не меняем —
   это не кликабельные элементы (заказчик, 16 октября: «при наведении на метрики на первом
   экране меняется курсор — оставь чтобы не менялся (но ховер пусть работает)»). */
body.style-v2 .v2-sticker{cursor:default}
body.style-v2 .v2-sticker:hover{transform:rotate(-1deg) translateY(-3px)}
body.style-v2 .v2-hero-photo:hover{transform:rotate(1.2deg) translateY(-4px)}

/* --- шаги: карточки ровно как .step в макете (заказчик 16 октября выбрал этот вариант;
   шагов теперь четыре, как в макете). Ширину перебиваем по весу живого правила
   #home-steps .cq-steps{max-width:760px} — иначе четыре карточки не встают в ряд. --- */
body.style-v2 #home-steps .cq-steps{max-width:1140px;margin:26px auto 0}
body.style-v2 .cq-steps-rail{display:none}
body.style-v2 .cq-steps-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;margin:0;padding:0}
body.style-v2 .cq-step{display:block;position:relative;background:#fff;border-radius:var(--v2-r-lg);padding:24px 22px;
  box-shadow:var(--v2-shadow-soft);transition:transform .22s ease,box-shadow .25s ease}
body.style-v2 .cq-step:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 14px 30px rgba(30,28,26,.14)}
/* Анимация появления (.cq-steps.is-anim .cq-step.is-in) держит transform:none и по весу
   перебивала наклон — поэтому подъём с наклоном повторяем селектором тяжелее (заказчик,
   16 октября: «приподнимается, наклона нет»). */
body.style-v2 .cq-steps .cq-step:hover,
body.style-v2 .cq-steps.is-anim .cq-step.is-in:hover{transform:translateY(-6px) rotate(-1deg)}
/* квадрат с номером, как .step .n в макете; иконки в макете не показываются */
body.style-v2 .cq-step-num{display:grid;place-items:center;position:static;width:44px;height:44px;
  margin:0;border-radius:16px;font-size:18px;font-weight:800;background:var(--v2-lime-soft);
  color:var(--v2-deep)}
body.style-v2 .cq-step:nth-child(4n+2) .cq-step-num{background:#FFE9E3;color:var(--v2-coral)}
body.style-v2 .cq-step:nth-child(4n+3) .cq-step-num{background:#FFF3D6;color:#9A6B10}
body.style-v2 .cq-step:nth-child(4n+4) .cq-step-num{background:#EDE7FF;color:var(--v2-plum)}
body.style-v2 .cq-step-ico{display:none}
/* Отступ от плашки с номером до текста — такой же, как сверху карточки (24 px):
   заказчик, 16 октября: «текст под плашками в блоке как проходит прогулка сделай с отступом
   от плашек таким же как сверху». */
body.style-v2 .cq-step-body{background:none;border:0;box-shadow:none;padding:0;margin-top:24px}
body.style-v2 .cq-step-title{margin:0 0 6px;font-size:17px;font-weight:800;line-height:1.2;color:var(--v2-ink)}
body.style-v2 .cq-step-text{font-size:14.5px;line-height:1.5;color:var(--v2-muted)}
body.dark.style-v2 .cq-step{background:#26241F;box-shadow:none}
body.dark.style-v2 .cq-step-title{color:var(--v2-ink)}
body.dark.style-v2 .cq-step-text{color:var(--v2-muted)}

/* телефон и планшет — как в макете */
@media(max-width:1080px){
body.style-v2 .shelf{height:440px}
body.style-v2 .tiles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
body.style-v2 .v2-sec{padding:36px 20px 32px}
body.style-v2 .shelf{flex-direction:column;height:auto}
/* на телефоне полка вертикальная: наклона и подъёма корешков нет, только подсветка */
body.style-v2 .spine{flex:0 0 58px;height:58px;transform:none;margin-top:0;margin-left:0}
body.style-v2 .spine:first-child{flex-basis:58px}
body.style-v2 .spine:not(.open):hover{flex-basis:58px;transform:none;filter:brightness(1.12)}
body.style-v2 .spine+.spine{margin-left:0;margin-top:-10px}
body.style-v2 .spine .label{writing-mode:horizontal-tb;transform:none;font-size:14px}
body.style-v2 .spine .count{display:none}
body.style-v2 .spine.open{height:430px;flex:0 0 430px}
body.style-v2 .spine.open+.spine{margin-top:-14px}
body.style-v2 .spine .cover .txt{left:18px;right:18px;bottom:34px}
/* Турнир на телефоне: три колонки — место, игрок и баллы вместе с именем
   (заказчик, 16 октября: «в мобилке в турнир выводи ещё колонку баллы вместе с именем») */
body.style-v2 .tour .row{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:14px 16px}
body.style-v2 .tour .row .hide-sm{display:none}
body.style-v2 .tour .row .score{display:block;font-weight:800;color:var(--v2-ink)}
body.style-v2 .tour .row.head-row span:nth-child(4){display:block;text-align:right}
body.style-v2 .tile{padding:24px}
}

/* ============ ЕДИНЫЙ СТИЛЬ МАКЕТА: ШАГИ, ОТЗЫВЫ, ВОПРОСЫ, ЛЕНТЫ, ПОДВАЛ ============
   Заказчик, 16 октября: «сделай так же полностью с макетом… склеивай все блоки в единый стиль —
   лаконичный, гармоничный, тон тот же, что в ТЗ». Ниже блоки приведены к виду /design2
   и к шкале из ТЗ (13/15/17/20/26/34/44, межстрочный 1,5 у текста и 1,2 у заголовков,
   радиусы 12/16/24/999, тап-зоны не меньше 44 px, видимая рамка фокуса). */

/* тон и шкала из ТЗ */
body.style-v2{font-family:var(--v2-font);font-size:17px;line-height:1.5;background:var(--v2-cream);color:var(--v2-ink);
  --v2-bleed:max(20px,calc((100vw - 1140px) / 2))}
body.style-v2 h1,body.style-v2 h2,body.style-v2 h3{line-height:1.2}
body.style-v2 section[id],body.style-v2 [id]{scroll-margin-top:96px}
body.style-v2 .btn{min-height:44px}
body.style-v2 a:focus-visible,body.style-v2 button:focus-visible,body.style-v2 summary:focus-visible{
  outline:3px solid var(--v2-coral);outline-offset:2px;border-radius:8px}

/* Шаги — «маршрут» из плашек: правила выше, в разделе порта из макета. */

/* --- отзывы: карточка как .review в макете (медиа 44%, тело 34 px, аватар-плашка) ---
   Боковые отступы нужны, чтобы тень карточки была видна целиком, а края соседних карточек в этих
   отступах не показывались: показываем только текущую карточку (класс is-active ставит скрипт),
   остальные делаем прозрачными (заказчик, 16 октября: «в отзывах где кнопки видно границу тени»). */
body.style-v2 .cq-reviews-slider{max-width:1140px;padding:16px 28px 34px}

/* Свайп отзывов: вертикальная прокрутка остаётся браузеру, горизонтальный жест забирает скрипт — иначе первый свайп «съедался» прокруткой (заказчик, 16 октября). */
body.style-v2 .cq-reviews-track{touch-action:pan-y}
body.style-v2 .cq-reviews-track>.cq-rev-card{transition:opacity .35s ease}
body.style-v2 .cq-reviews-track>.cq-rev-card:not(.is-active){opacity:0;pointer-events:none}
/* Карточка отзыва. На десктопе картинки стоят СЛЕВА от отзыва, а сам блок компактный —
   примерно как плашка демо-квеста (заказчик, 16 октября: «в десктопе в блоке отзывы слишком
   большой блок для картинок — картинки поставь слева от отзыва, как раньше, и уменьши блок
   примерно чтобы был как плашка демо квеста на главной»). На телефоне медиа снова сверху. */
body.style-v2 .cq-rev-card{background:#fff;border-radius:var(--v2-r-xl);box-shadow:var(--v2-shadow-soft);
  overflow:hidden;min-height:300px;padding:0;gap:0;grid-template-columns:minmax(0,46%) minmax(0,1fr)}
/* Медиа отзыва — коллаж, который заполняет контейнер целиком, как обложку (заказчик, 16 октября:
   «когда есть фото-видео, собирать коллаж который полностью заполняет контейнер»): без зазоров,
   без скруглений внутри, каждая плитка обрезается по своей ячейке. */
body.style-v2 .cq-rev-card .cq-review-media{display:grid;gap:0;background:var(--v2-lime-soft);border-radius:0;
  position:relative;align-self:stretch;min-height:100%;aspect-ratio:auto;grid-template-rows:1fr}
body.style-v2 .cq-rev-card .cq-review-media.two{grid-template-columns:1fr 1fr;gap:0}
body.style-v2 .cq-rev-card .cq-review-photos{display:grid;gap:0;aspect-ratio:auto;height:100%;overflow:hidden;
  position:relative;grid-template-columns:1fr;grid-template-rows:1fr}
/* Одиночная картинка (обложка квеста или одно фото) растягивается по высоте контейнера напрямую:
   через грид-строку высота в некоторых случаях не доезжала, и сверху с снизу оставались полосы
   подложки (заказчик, 16 октября: «обложки нужно увеличивать по высоте, если не влезают»). */
body.style-v2 .cq-rev-card .cq-review-photos>img:only-child,
body.style-v2 .cq-rev-card .cq-review-media.placeholder img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
body.style-v2 .cq-rev-card .cq-review-media.placeholder{position:relative}
body.style-v2 .cq-rev-card .cq-review-photos.many{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
body.style-v2 .cq-rev-card .cq-review-photos.many:not(.three):not(.four){grid-template-rows:1fr}
body.style-v2 .cq-rev-card .cq-review-photos.three .cq-review-photo:first-child{grid-column:1 / -1}
body.style-v2 .cq-rev-card .cq-review-photos.four{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
body.style-v2 .cq-rev-card .cq-review-photos.four .cq-review-photo:first-child{grid-column:auto}
body.style-v2 .cq-rev-card .cq-review-photo{border-radius:0;width:100%;height:100%;min-height:0;
  object-fit:cover;display:block;cursor:zoom-in}
body.style-v2 .cq-rev-card .cq-review-video{border-radius:0;aspect-ratio:auto;height:100%;min-height:100%}
body.style-v2 .cq-rev-card .cq-review-video-poster{height:100%;object-fit:cover}
body.style-v2 .cq-rev-card .cq-review-media.placeholder img{width:100%;height:100%;object-fit:cover;display:block}
body.style-v2 .cq-rev-body{padding:20px 24px 22px;display:flex;flex-direction:column;gap:10px}
/* Текст отзыва — на всю ширину карточки, как в других блоках: 5 строк хватает, высота карточки
   не скачет (в узкой колонке строк было меньше). */
body.style-v2 .cq-rev-body .cq-review-text{-webkit-line-clamp:4}
/* Подпись автора: одинаковые промежутки между «имя · город · игра» и выравнивание по одной
   линии (заказчик, 16 октября: «в отзывах в десктопе сделай одинаковым расстояние между имя
   город игра и по высоте выровняй»). Теги приходят раздельными элементами с точкой-разделителем. */
body.style-v2 .cq-rev-author-line{display:flex;align-items:center;gap:10px;font-weight:700;min-width:0}
/* Город и название квеста — отдельной строкой по одной линии с названием и текстом отзыва,
   одним размером и шрифтом (заказчик, 16 октября: «а город и название отзыва выровняй по линии
   с текстом отзыва; размер (или сами шрифты) выровняй у названия квеста и города — кажется
   разным»). Базовое правило ставило text-align:right и обрезало строку многоточием — снимаем. */
body.style-v2 .cq-review-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;
  text-align:left;white-space:normal;overflow:visible;font-size:13.5px;font-weight:700;
  color:var(--v2-muted);line-height:1.45;letter-spacing:0}
body.style-v2 .cq-review-tags span{font-size:inherit;font-weight:inherit;color:inherit}
body.style-v2 .cq-review-tags i{font-style:normal;opacity:.55}
body.style-v2 .cq-review-avatar{width:42px;height:42px;border-radius:14px;background:var(--v2-lime);display:grid;
  place-items:center;color:#fff;font-weight:800;transform:rotate(-4deg);object-fit:cover}
body.style-v2 .cq-review-stars{color:var(--v2-sun);font-size:18px;letter-spacing:2px}
body.style-v2 .cq-review-text{font-size:17px;line-height:1.5;font-weight:600;color:var(--v2-ink)}
body.style-v2 .cq-review-tags a.cq-review-quest{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(30,28,26,.28);transition:color .15s ease,border-color .15s ease}
body.style-v2 .cq-review-tags a.cq-review-quest:hover{color:var(--v2-coral);border-bottom-color:var(--v2-coral)}
body.style-v2 .cq-review-title{font-size:20px;font-weight:800}
body.style-v2 .cq-review-name{font-weight:800}
body.style-v2 .cq-review-date,body.style-v2 .cq-review-tags{color:var(--v2-muted);font-weight:600}
body.style-v2 .cq-rev-arrow{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--v2-ink);border:0;
  box-shadow:var(--v2-shadow-soft);transition:transform .2s ease}
body.style-v2 .cq-rev-arrow:hover{transform:translateY(-3px) rotate(-1deg)}
body.style-v2 .cq-rev-dot{background:rgba(30,28,26,.18)}
body.style-v2 .cq-rev-dot.active{background:var(--v2-coral)}
/* «1 / 3» под точками не показываем — точек достаточно (заказчик, 16 октября) */
body.style-v2 .cq-rev-counter{display:none}
body.dark.style-v2 .cq-rev-card{background:#26241F;box-shadow:none}
body.dark.style-v2 .cq-rev-arrow{background:#26241F;color:var(--v2-ink);box-shadow:none}
body.dark.style-v2 .cq-review-text,body.dark.style-v2 .cq-review-title{color:var(--v2-ink)}

/* --- вопросы и ответы: карточки как .faq details в макете (плюс/минус, без рамок).
   Плашки выровнены по заголовку слева, а не по центру (заказчик, 16 октября: «плашки встроены
   по заголовку, а у нас по центру»); живое правило #home-blocks .page-faq перебиваем по весу. --- */
body.style-v2 .page-faq{display:grid;gap:14px}
body.style-v2 #home-blocks .page-faq{max-width:none;margin:0}
body.style-v2 .faq-item{background:#fff;border:0;border-radius:var(--v2-r-lg);box-shadow:var(--v2-shadow-soft);padding:20px 24px}
body.style-v2 .faq-item summary{cursor:pointer;font-weight:800;font-size:17px;line-height:1.3;list-style:none;
  display:flex;justify-content:space-between;gap:12px;color:var(--v2-ink)}
body.style-v2 .faq-item summary::-webkit-details-marker{display:none}
body.style-v2 .faq-item summary::after{content:"＋";color:var(--v2-coral);font-weight:800}
body.style-v2 .faq-item[open] summary::after{content:"－"}
body.style-v2 .faq-item div{color:var(--v2-muted);margin:12px 0 0;font-size:15px;line-height:1.5}
body.dark.style-v2 .faq-item{background:#26241F;box-shadow:none}
body.dark.style-v2 .faq-item summary{color:var(--v2-ink)}

/* --- ленты макета: популярные прогулки (.big) и города (.city) --- */
/* --- лента популярных: до самого края окна браузера (заказчик: «лента обрезается не доходя края») ---
   Лента вылезает из колонки контента ровно на её отступ от края окна, поэтому первая карточка
   стоит по заголовку, а уехать можно до края экрана. */
body.style-v2 .rail{display:flex;overflow-x:auto;
  scroll-behavior:smooth;gap:20px;margin:0 calc(-1 * var(--v2-bleed)) -18px;
  padding:18px var(--v2-bleed) 40px;scroll-padding-inline:var(--v2-bleed);
  scrollbar-width:none}
body.style-v2 .rail::-webkit-scrollbar{display:none}
/* Карточка ленты. Постоянной тени и зума фото при наведении нет: при прокрутке курсор едет
   по ленте, и пять крупных карточек одновременно раскручивали перерисовку тени и 0,7-секундный
   зум 900-пиксельных фото — из-за этого блок тормозил (заказчик, 16 октября: «тормозит блок
   популярные»). Обратная связь осталась: подъём с наклоном и тень только у карточки под курсором. */
body.style-v2 .big{position:relative;flex:0 0 min(78%,560px);scroll-snap-align:center;border-radius:var(--v2-r-xl);
  overflow:hidden;aspect-ratio:16/11;background:transparent;box-shadow:none;
  transition:transform .22s ease,box-shadow .22s ease;text-decoration:none;color:inherit}
/* тень при наведении компактнее: она должна целиком попадать в отступы ленты,
   иначе снова появится видимая граница сверху и снизу (заказчик, 16 октября) */
body.style-v2 .big:hover{transform:translateY(-6px) rotate(-.8deg);box-shadow:0 14px 30px rgba(30,28,26,.18)}
/* «Скоро» — последняя карточка ленты: своя плашка вместо номера и сливовый фон, если фото нет */
body.style-v2 .big.soon{background:var(--v2-plum)}
body.style-v2 .big.soon .num{background:var(--v2-coral);color:#fff}
body.style-v2 .big img{width:100%;height:100%;object-fit:cover}
body.style-v2 .big .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,28,26,0) 38%,rgba(30,28,26,.8))}
body.style-v2 .big .txt{position:absolute;left:26px;right:26px;bottom:24px;color:#fff}
body.style-v2 .big .txt b{display:block;font-size:clamp(22px,2.4vw,32px);font-weight:800;line-height:1.1}
body.style-v2 .big .txt span{font-size:14.5px;opacity:.94;font-weight:600}
body.style-v2 .big .num{position:absolute;left:22px;top:20px;background:#fff;color:var(--v2-ink);
  border-radius:var(--v2-r-pill);padding:8px 14px;font-weight:800;font-size:13px;transform:rotate(-3deg);
  box-shadow:var(--v2-shadow)}
body.style-v2 .city{position:relative;flex:0 0 min(92%,660px);scroll-snap-align:center;border-radius:var(--v2-r-xl);
  overflow:hidden;aspect-ratio:3/2;box-shadow:0 22px 50px rgba(30,28,26,.2)}
body.style-v2 .city img{width:100%;height:100%;object-fit:cover}
body.style-v2 .city .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,28,26,0) 45%,rgba(30,28,26,.82))}
body.style-v2 .city .txt{position:absolute;left:32px;right:32px;bottom:30px;color:#fff}
body.style-v2 .city .txt b{display:block;font-size:clamp(32px,4.4vw,54px);font-weight:700;letter-spacing:-.02em;
  text-shadow:0 4px 24px rgba(0,0,0,.35)}
body.style-v2 .city .txt span{display:block;font-size:17px;font-weight:600;opacity:.95;margin:6px 0 16px}
body.style-v2 .city .go{display:inline-flex;background:#fff;color:var(--v2-ink);border-radius:var(--v2-r-pill);
  padding:14px 24px;font-weight:800;font-size:15px;transition:transform .2s ease}
body.style-v2 .city .go:hover{transform:translateY(-3px) rotate(-1.5deg)}
body.style-v2 .city.soon{display:grid;place-items:center;background:var(--v2-spine);color:#fff;text-align:center;
  padding:34px;aspect-ratio:3/2}
body.style-v2 .city.soon b{font-size:clamp(30px,3.6vw,46px);font-weight:800;display:block}
body.style-v2 .city.soon span{opacity:.92;font-weight:600;font-size:16px}
body.style-v2 .hint{color:var(--v2-muted);font-size:13.5px;font-weight:600;margin-top:12px}

/* --- подвал: как footer в макете (графит, кремовые ссылки) ---
   Скругления сверху убраны (заказчик, 16 октября: «скругления в блоках нужно просто убрать,
   у футера тоже»). Волны и градиент убраны тоже: «в футере волны убирай — просто прямая линия»
   (это ко всем страницам). На телефоне снизу добавлен запас под «Пойдём гулять», иначе нижняя
   строка с копирайтом и ссылками перекрывается этой кнопкой. */
body.style-v2 .cq-footer{position:relative;background:#1E1C1A;color:#EFE7DA;padding:56px 20px 34px}
body.dark.style-v2 .cq-footer{background:#101010}
@media(max-width:820px){
body.style-v2 .cq-footer{padding-bottom:104px}
}
body.style-v2 .cq-footer .logo{color:#fff}
body.style-v2 .cq-footer-menu a,body.style-v2 .cq-footer-contacts a,body.style-v2 .cq-footer-col a{
  display:block;padding:5px 0;color:#CFC6B8;text-decoration:none}
body.style-v2 .cq-footer-menu a:hover,body.style-v2 .cq-footer-contacts a:hover,body.style-v2 .cq-footer-col a:hover{color:#fff}
body.style-v2 .cq-footer-col h4{color:#fff;font-size:15px}
body.style-v2 .cq-footer-menu a.lv2,body.style-v2 .cq-footer-menu a.lv3{color:#B6AC9C}
body.style-v2 .cq-footer-note{color:#9E9587}
body.style-v2 .cq-footer-copy{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  color:#9E9587;font-size:13px}
body.style-v2 .cq-footer-copy a,body.style-v2 .cq-footer-legal a{color:#CFC6B8}
body.style-v2 .cq-footer-legal a:hover,body.style-v2 .cq-footer-copy a:hover{color:#fff}

/* телефон и планшет — раскладка шагов как в макете: 2 колонки на планшете, 1 на телефоне */
@media(max-width:1080px){
body.style-v2 .cq-steps-list{grid-template-columns:repeat(2,1fr)}
body.style-v2 .big{flex:0 0 min(78%,460px)}
}
@media(max-width:640px){
body.style-v2 .cq-steps-list{grid-template-columns:1fr}
body.style-v2 .tiles{grid-template-columns:1fr}
body.style-v2 .cq-rev-body{padding:22px}
body.style-v2 .cq-review-text{font-size:17px}
body.style-v2 .big{flex:0 0 88%}
body.style-v2 .city{flex:0 0 94%}
body.style-v2 .faq-item{padding:16px 18px}
/* снизу запас под липкую «Пойдём гулять»: иначе она перекрывает копирайт и ссылки
   (заказчик, 16 октября: «пойдём гуляем внизу страницы в мобилке перекрывает нижний футер») */
body.style-v2 .cq-footer{padding:44px 20px 104px}
}
/* выбор города на телефоне — панель во всю ширину, кнопки компактнее */
@media(max-width:860px){
/* Панель на телефоне: во всю ширину и ПОД шапкой. Точное положение считает скрипт
   (cqCityPanelTop) по фактической высоте шапки — иначе на некоторых телефонах она
   накрывала кнопки (заказчик, 16 октября). */
body.style-v2 .citypick-panel{position:fixed;left:12px;right:12px;top:96px;width:auto;
  max-height:calc(100vh - 120px);overflow-y:auto}
/* Шапка на телефоне — строго одна строка и без выступа за край.
   Заказчик, 16 октября: «в мобилке в Сафари гамбургер торчит за рамки основной границы сайта
   и создаёт лишнюю вертикальную полосу. Умести в одну строку, чтобы не торчало».
   Сжимаем только второстепенное: имя города укорачивается с многоточием, кнопки компактнее,
   круглые кнопки (ключ, тема, меню) остаются 44 px — по ним удобно попадать пальцем. */
body.style-v2 .site-header .header-inner{flex-wrap:nowrap;gap:6px;padding:10px 12px;min-width:0}
/* Логотип — единственное, что сжимается: он уходит в многоточие, а название города
   и кнопки остаются целыми (заказчик, 16 октября: «для города нужно автоматически
   расширяемое поле по контенту — сейчас сжато так, что ни одной буквы не видно»). */
body.style-v2 .site-header .logo{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:14px}
body.style-v2 .site-header .header-actions{flex:0 0 auto;min-width:0;flex-wrap:nowrap;gap:6px;
  justify-content:flex-end}
/* город — по ширине содержимого, без принудительных процентов */
body.style-v2 .citypick{flex:0 0 auto}
body.style-v2 .citypick-btn{padding:0 9px;font-size:13px;height:44px;width:auto;max-width:none;
  min-width:0;white-space:nowrap;overflow:visible}
body.style-v2 .citypick-btn #cq-city-name{display:inline-block;flex:0 0 auto;width:auto;
  max-width:none;min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap;
  vertical-align:middle;font-weight:800}
body.style-v2 .v2-cabinet{flex:0 0 auto}
/* Отзывы на телефоне: подпись автора и город с игрой должны влезать в плашку
   (заказчик, 16 октября: «в мобилке сделай, чтобы они влезали в плашку»). */
body.style-v2 .cq-rev-body{padding:18px;gap:12px}
/* телефон: картинка снова сверху, текст под ней (в одну колонку) */
body.style-v2 .cq-rev-card{grid-template-columns:minmax(0,1fr)}
body.style-v2 .cq-rev-card .cq-review-media{align-self:auto;min-height:0;aspect-ratio:16/9}
body.style-v2 .cq-rev-foot{gap:10px;margin-top:14px;min-height:44px}
body.style-v2 .cq-rev-foot .cq-rev-arrow{width:40px;height:40px}
body.style-v2 .cq-rev-author-line{gap:8px;font-size:13px;flex-wrap:wrap}
body.style-v2 .cq-review-avatar{width:32px;height:32px;border-radius:11px;font-size:12px}
body.style-v2 .cq-review-tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1 1 100%;
  overflow-wrap:anywhere;line-height:1.35}
body.style-v2 .cq-review-text{font-size:16px}
/* мятная заметка про подарок в плитке цены на телефоне тоже переносится */
body.style-v2 .buy-gift-note{line-height:1.45}
}
/* Совсем узкий телефон: ничего не прячем — город и название сайта остаются.
   Название сайта при нехватке места уходит в многоточие (оно и так сжимаемое), город — нет. */
@media(max-width:430px){
body.style-v2 .site-header .header-inner{gap:5px;padding:10px 10px}
body.style-v2 .site-header .header-actions{gap:5px}
body.style-v2 .site-header .logo{font-size:13px}
body.style-v2 .citypick-btn{padding:0 8px;font-size:12.5px}
}
/* Страховка от горизонтальной прокрутки на всех страницах: если что-то и торчит,
   оно не создаёт лишнюю полосу. `clip` (а не hidden) — не ломает sticky-блоки
   и не обрезает выпадающую панель выбора города. */
body.style-v2{overflow-x:clip}

/* Кнопка «Ищем квест-мастеров» в подвале (заказчик, 16 октября) — оранжевая, как главные
   кнопки сайта; открывает форму в окне. */
body.style-v2 .cq-footer-questmaster{margin-top:18px;min-height:46px;padding:0 22px;
  font-size:14.5px;font-weight:800;border-radius:var(--v2-r-pill);box-shadow:0 10px 24px rgba(244,106,60,.28)}
body.style-v2 .cq-footer-questmaster:hover{transform:translateY(-2px) rotate(-1deg)}
@media(hover:none){body.style-v2 .cq-footer-questmaster:hover{transform:none}}

/* Окно «Ищем квест-мастеров»: текст под заголовком, три поля и две галочки согласия. */
.cq-qm .cq-qm-lead{color:#6E6A64;font-size:14.5px;line-height:1.6;margin:0 0 16px}
.cq-qm label{display:block;font-size:13px;font-weight:700;color:#6E6A64;margin:12px 0 6px}
.cq-qm .cq-qm-hint{font-size:12.5px;color:#9a938a;margin-top:10px;line-height:1.45}
.cq-qm .cq-qm-consent{margin-top:12px;display:grid;gap:8px}
.cq-qm .cq-qm-consent .cq-consent{font-size:12.5px;line-height:1.45}
.cq-qm .cq-qm-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
body.style-v2 .cq-qm .full-btn{margin-top:16px}
@media(max-width:520px){
  .cq-qm .cq-qm-lead{font-size:14px}
}

/* Кнопки соцсетей в подвале: ВК, MAX, Telegram (заказчик, 16 октября). Значки — оригинальные
   (VK и Telegram из Font Awesome Free, MAX — свой знак), белые, без цветных кружков: заказчик,
   16 октября: «значки соцсетей возьми оригинальные из FA, просто белые подойдут».
   Пустое поле в админке — кнопки нет: разметку не рендерим вовсе. */
body.style-v2 .cq-footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
body.style-v2 .cq-soc{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px 0 12px;
  border-radius:var(--v2-r-pill);background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.16);
  color:#fff;font-weight:800;font-size:14px;letter-spacing:.01em;text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease}
body.style-v2 .cq-soc:hover{transform:translateY(-3px) rotate(-1deg);background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.5);color:#fff}
body.style-v2 .cq-soc-ico{display:grid;place-items:center;width:22px;height:22px;color:#fff;flex:none}
body.style-v2 .cq-soc-ico svg{display:block;width:100%;height:100%;fill:currentColor}
body.style-v2 .cq-soc-ico text{fill:currentColor;font-family:var(--v2-font,Manrope),Arial,sans-serif}
body.style-v2 .cq-soc:hover .cq-soc-ico{color:#fff}
body.style-v2 .cq-soc-label{white-space:nowrap}
@media(max-width:640px){
  /* на телефоне подписи короче: остаются буквы-иконки и название в одну строку */
  body.style-v2 .cq-soc{min-height:44px;padding:0 12px 0 8px;font-size:13.5px;gap:7px}
}
@media(hover:none){
  body.style-v2 .cq-soc:hover{transform:none}
}

/* Экран «сначала войдите»: бесплатную игру не показываем, пока игрок не авторизован
   (заказчик, 16 октября: «мы не должны загружать игру, пока не убедимся, что пользователь
   авторизован; если не авторизован — так и пишем: авторизуйтесь или зарегистрируйтесь,
   ссылка на кабинет»). Цвета как у окна паузы, чтобы не зависеть от класса style-v2. */
.cq-auth-gate{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(30,28,26,.72);backdrop-filter:blur(3px);overflow-y:auto}
.cq-auth-gate-card{width:100%;max-width:430px;background:#fff;border-radius:22px;padding:30px 24px;
  text-align:center;box-shadow:0 24px 60px rgba(10,8,40,.45)}
.cq-auth-gate-ico{font-size:52px;line-height:1;margin-bottom:10px}
.cq-auth-gate-card h2{margin:0 0 10px;font-size:23px;color:#111}
.cq-auth-gate-card p{margin:0 0 6px;color:#5b6472;font-size:15px;line-height:1.55}
.cq-auth-gate-card .cq-auth-gate-actions{display:grid;gap:10px;margin-top:20px}
.cq-auth-gate-card .btn{width:100%;justify-content:center;min-height:46px;border-radius:14px;
  font-weight:700;text-decoration:none}
body.cq-auth-gate-open{overflow:hidden}
@media(max-width:520px){
.cq-auth-gate{padding:14px}
.cq-auth-gate-card{padding:24px 18px;border-radius:18px}
.cq-auth-gate-card h2{font-size:20px}
}

/* На телефоне ховер «залипает» после тапа: карточка «Скоро» оставалась поднятой и дёргалась
   (заказчик, 16 октября: «при „скоро“ в мобилке она залипает, дёргается»). Там, где нет
   настоящего курсора, подъёмы и наклоны карточек отключаем — остаются цвет и тень. */
@media(hover:none){
body.style-v2 .big:hover,
body.style-v2 .city:hover,
body.style-v2 .quest-card:hover,
body.style-v2 .tile:hover,
body.style-v2 .cq-step:hover,
body.style-v2 .cq-show-tile:hover,
body.style-v2 .v2-sticker:hover{transform:none}
}

/* Cookie-баннер: не перекрывает кнопки модалок, но заметен внизу страницы. */
.cq-cookie-banner{
  position:fixed;z-index:3000;left:16px;right:16px;bottom:16px;max-width:820px;margin:0 auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  padding:14px 18px;border-radius:16px;background:#fff;color:#1f2937;
  border:1px solid #e5e7eb;box-shadow:0 14px 40px rgba(15,23,42,.18);
  font-size:13px;line-height:1.5;
}
.cq-cookie-text{flex:1 1 380px;min-width:240px}
.cq-cookie-text b{font-weight:700}
.cq-cookie-text a{color:#1d4ed8;text-decoration:underline}
.cq-cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.cq-cookie-actions .btn{padding:9px 14px;font-size:13px;white-space:nowrap}
body.dark .cq-cookie-banner{background:#111827;color:#e5e7eb;border-color:#334155}
body.dark .cq-cookie-text a{color:#93c5fd}
@media(max-width:640px){
  .cq-cookie-banner{left:10px;right:10px;bottom:10px;padding:12px 14px;gap:10px}
  .cq-cookie-actions{width:100%;justify-content:flex-end}
}

/* ============ ВЫБОР ГОРОДА: СРАЗУ СПИСОК, ПОИСК И ГРУППЫ ============ */
body.style-v2 .citypick-panel{width:370px;padding:14px 14px 12px}
.citypick-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.citypick-title{font-size:15px;font-weight:800;color:var(--v2-ink)}
.citypick-close{border:none;background:transparent;color:var(--v2-muted);font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.citypick-search{margin-bottom:8px}
.citypick-search input{width:100%;height:42px;padding:0 12px;border-radius:12px;border:2px solid rgba(30,28,26,.12);
  background:#fff;color:var(--v2-ink);font-family:inherit;font-size:14px;outline:none}
.citypick-search input:focus{border-color:var(--v2-coral)}
.citypick-list{max-height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin:0 -4px;padding:0 4px}
.citypick-group{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--v2-muted);
  padding:9px 8px 4px}
.citypick-item{width:100%;display:flex;align-items:center;gap:10px;border:none;background:transparent;border-radius:11px;
  padding:9px 8px;text-align:left;cursor:pointer;font-family:inherit;color:var(--v2-ink);min-height:44px}
.citypick-item:hover,.citypick-item:focus-visible{background:rgba(30,28,26,.07);outline:none}
.citypick-item.is-current{background:rgba(249,115,22,.10)}
.citypick-item-main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;gap:1px}
.citypick-item-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citypick-item-meta{font-size:11.5px;color:var(--v2-muted)}
.citypick-item-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.citypick-current{font-size:10px;font-weight:700;border-radius:999px;padding:3px 7px;white-space:nowrap;background:var(--v2-coral);color:#fff}
.citypick-check{color:var(--v2-coral);font-weight:900;font-size:15px;flex:none}
.citypick-empty{font-size:13px;color:var(--v2-muted);padding:12px 8px}
body.dark.style-v2 .citypick-search input{background:#26241F;color:var(--v2-ink);border-color:rgba(255,255,255,.14)}
body.dark.style-v2 .citypick-item:hover,body.dark.style-v2 .citypick-item:focus-visible{background:rgba(255,255,255,.08)}
body.dark.style-v2 .citypick-item.is-current{background:rgba(249,115,22,.22)}

.city-ip-modal{max-width:430px;text-align:center;padding:26px 24px 22px}
.city-ip-icon{font-size:40px;line-height:1;margin:0 0 8px}
.city-ip-modal h3{font-size:27px;line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
.city-ip-question{font-size:14px;line-height:1.6;color:#5b6472;margin:0 0 18px}
.city-ip-modal p{font-size:14px;line-height:1.6;color:#5b6472;margin:0 0 18px}
.city-ip-actions{display:flex;flex-direction:column;gap:8px}
.city-ip-actions .btn{width:100%;justify-content:center}
.city-ip-hint{font-size:12px;line-height:1.45;color:#8b93a1;margin-top:14px}
body.dark .city-ip-modal p{color:#cbd5e1}

@media(max-width:640px){
  body.style-v2 .citypick-panel{position:fixed;left:10px;right:10px;top:96px;width:auto;max-height:calc(100vh - 116px);
    overflow:hidden;padding:14px}
  .citypick-list{max-height:calc(100vh - 270px)}
  .citypick-item{min-height:48px}
  .city-ip-actions .btn{min-height:46px}
}

/* Одинаковый отступ «иконка → текст» у Квестов и Турнира: раньше он зависел от ширины
   эмодзи, и у карты зазор выглядел меньше. Фиксируем слот иконки и общий gap. */
body.style-v2 .main-nav a.cq-menu-hot{display:inline-flex;align-items:center;gap:8px}
body.style-v2 .main-nav .cq-menu-ico{flex:0 0 18px;width:18px;margin-right:0;text-align:center;
  font-size:15px;line-height:1;vertical-align:0}
body.style-v2.cq-nav-open .main-nav>a.cq-menu-hot,
body.style-v2.cq-nav-open .main-nav .cq-menu-item>a.cq-menu-hot{gap:10px}
body.style-v2.cq-nav-open .main-nav>a.cq-menu-hot .cq-menu-ico,
body.style-v2.cq-nav-open .main-nav .cq-menu-item>a.cq-menu-hot .cq-menu-ico{flex:0 0 22px;width:22px}

.poi-type-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#7c2d12;background:#ffedd5;border-radius:999px;padding:3px 9px}
.poi-type-badge img{width:16px;height:16px;object-fit:contain}
.poi-marker.commercial{background:#ffedd5;border-color:#f97316}
.poi-marker.commercial img{width:22px;height:22px;object-fit:contain;display:block}

/* POI «Подарок»: золотая иконка-маркер вместо жёлтой точки, значок в заголовке карточки */
.poi-marker.gift{background:transparent;border:0;box-shadow:0 3px 10px rgba(0,0,0,.35);width:34px;height:34px;
  margin-left:-17px;margin-top:-17px}
.poi-marker.gift img{width:34px;height:34px;object-fit:contain;display:block}
.poi-card-title .poi-card-gift{width:20px;height:20px;object-fit:contain;margin-right:6px;vertical-align:-3px}
body.dark .poi-card-title .poi-card-gift{filter:none}

/* Подарок в карточке POI: код, QR и срок действия */
.poi-gift-box{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.poi-gift-result{display:flex;flex-direction:column;gap:8px}
.poi-gift-code{font-size:22px;font-weight:800;letter-spacing:.08em;background:#F3F2EE;border-radius:12px;
  padding:10px 14px;text-align:center}
.poi-gift-qr{width:150px;height:150px;align-self:center;background:#fff;border-radius:12px}
.poi-gift-note{font-size:13px;color:#6b7280;line-height:1.45}
.poi-gift-error{font-size:13px;color:#8A2C15;background:#FFF1EC;border-radius:10px;padding:9px 11px}
body.dark .poi-gift-code{background:rgba(255,255,255,.08);color:#f1f5f9}
body.dark .poi-gift-note{color:#94a3b8}


/* Взаимодействия (механики) вопроса */
.mechanics-slot{margin:10px 0 4px}
.mech-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:12px;margin-bottom:8px}
.mech-card.used{background:#f0fdf4;border-color:#bbf7d0}
.mech-phrase{font-size:14.5px;line-height:1.45;color:#1f2937;margin-bottom:10px}
.mech-start{width:100%}
.mech-used{font-size:12px;color:#166534;margin-top:6px}
.mech-detector{position:fixed;inset:0;background:rgba(15,23,42,.72);z-index:9000;display:flex;align-items:center;justify-content:center;padding:18px}
.mech-detector-box{background:#fff;border-radius:18px;padding:18px;width:100%;max-width:420px;text-align:center}
.mech-detector-title{font-size:17px;font-weight:700;margin-bottom:6px}
.mech-detector-distance{font-size:34px;font-weight:800;margin:6px 0 10px;color:#0f172a}
.mech-detector-bar{height:14px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin-bottom:8px}
.mech-detector-fill{height:100%;width:0;background:linear-gradient(90deg,#38bdf8,#f59e0b,#ef4444);transition:width .4s}
.mech-detector-hint{font-size:12.5px;color:#6b7280;margin-bottom:12px}
.mech-detector-actions{display:flex;gap:8px;justify-content:center}
.mech-detector.level-1 .mech-detector-distance{color:#f59e0b}
.mech-detector.level-2 .mech-detector-distance{color:#f97316}
.mech-detector.level-3 .mech-detector-distance{color:#dc2626}

/* ================= Аудиогид: плеер без автоплея =================
   Кнопка «Слушать», полоса прогресса и время. Один плеер на страницу. */
.cq-audio-slot:empty{display:none}
.cq-audio{display:flex;align-items:center;gap:10px;background:#f1f5f9;border:1px solid #e2e8f0;
  border-radius:999px;padding:6px 12px 6px 6px;margin:10px 0;max-width:100%}
.cq-audio-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:#0f172a;color:#fff;
  border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.cq-audio.playing .cq-audio-btn{background:#0d9488}
.cq-audio-track{position:relative;flex:1;height:6px;border-radius:999px;background:#cbd5e1;cursor:pointer;min-width:36px}
.cq-audio-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:#0d9488;transition:width .2s linear}
.cq-audio-time{font-size:12px;color:#64748b;font-variant-numeric:tabular-nums;white-space:nowrap}
body.dark .cq-audio{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
body.dark .cq-audio-track{background:rgba(255,255,255,.18)}
body.dark .cq-audio-time{color:#94a3b8}

/* ================= История: общий слайдер «видео + фото» =================
   Видео (если есть) всегда первым; звук включается кнопкой, автоплея нет. */
.story-media{margin:10px 0 14px}
.story-media-slide{display:none;position:relative;background:#0f172a;border-radius:14px;overflow:hidden}
.story-media-slide.active{display:block}
.story-media-img{display:block;width:100%;max-height:52vh;object-fit:contain;background:#0f172a}
.story-media-video{display:block;width:100%;max-height:52vh;background:#000}
.story-video-tools{display:flex;gap:8px;flex-wrap:wrap;padding:8px 10px;background:#0f172a}
.story-video-play,.story-video-sound{border:0;border-radius:999px;padding:8px 14px;font:inherit;
  font-size:13px;font-weight:600;cursor:pointer}
.story-video-play{background:#f8fafc;color:#0f172a}
.story-video-sound{background:#fef3c7;color:#78350f}
.story-media-caption{font-size:12.5px;color:#64748b;padding:6px 4px 0}
.story-media-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px}
.story-media-prev,.story-media-next{border:1px solid #e2e8f0;background:#fff;border-radius:50%;
  width:34px;height:34px;font-size:18px;line-height:1;cursor:pointer;color:#0f172a}
.story-media-pos{font-size:12.5px;color:#64748b}
body.dark .story-media-nav .story-media-prev,body.dark .story-media-nav .story-media-next{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#f1f5f9}
body.dark .story-media-pos,body.dark .story-media-caption{color:#94a3b8}
/* «Пройденная игра»: видео и озвучка в архиве */
.story-video{margin:12px 0}
.story-video video{width:100%;max-height:60vh;border-radius:12px;background:#000}
.story-audio{margin:10px 0}

/* ================= Разлом времени: экран с кроссфейдом ================= */
.mech-rift{position:fixed;inset:0;background:rgba(2,6,23,.86);z-index:9100;display:flex;
  align-items:center;justify-content:center;padding:16px}
.mech-rift-box{position:relative;width:100%;max-width:560px;background:#0b1220;border-radius:18px;
  overflow:hidden;color:#e2e8f0;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.mech-rift-close,.mech-audio-box .mech-rift-close{position:absolute;top:8px;right:10px;z-index:3;border:0;
  background:rgba(15,23,42,.72);color:#fff;width:34px;height:34px;border-radius:50%;font-size:20px;
  line-height:1;cursor:pointer;padding:0}
.mech-rift-stage{position:relative;width:100%;aspect-ratio:4/3;background:#111827;overflow:hidden;touch-action:pan-y}
.mech-rift-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}
.mech-rift-stage[data-mode="old"] .mech-rift-img.now{opacity:0}
.mech-rift-stage[data-mode="now"] .mech-rift-img.old{opacity:0}
.mech-rift-badge{position:absolute;left:10px;top:10px;background:rgba(15,23,42,.75);color:#fbbf24;
  font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;z-index:2}
.mech-rift-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#94a3b8;font-size:13px;background:#111827;z-index:1}
.mech-rift-loading.hidden{display:none}
.mech-rift-caption{padding:10px 14px 0;font-size:14px;color:#e2e8f0;min-height:10px}
.mech-rift-hint{padding:6px 14px 0;font-size:12.5px;color:#94a3b8}
.mech-rift-actions{display:flex;gap:8px;padding:12px 14px 16px;flex-wrap:wrap}
.mech-rift-actions .btn{flex:1;min-width:140px}

/* ================= Аудио-механика: звуковая сцена на точке ================= */
.mech-audio{position:fixed;inset:0;background:rgba(2,6,23,.8);z-index:9100;display:flex;
  align-items:center;justify-content:center;padding:16px}
.mech-audio-box{position:relative;width:100%;max-width:420px;background:#fff;border-radius:18px;
  padding:20px 18px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.mech-audio-box .cq-audio{margin:14px 0;text-align:left}
.mech-audio-title{font-size:17px;font-weight:700;margin-bottom:8px}
.mech-audio-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.mech-audio-actions .btn{flex:1;min-width:130px}
body.dark .mech-audio-box{background:#1e293b;color:#e2e8f0}

/* ==================== «ПОДУТЬ НА ЭКРАН»: ВСТРОЕННАЯ МЕХАНИКА ====================
   Отбивка перед механикой, затем полноэкранный шум (пыль/пыльца/снег), который
   сдувается в микрофон. Слой прозрачный: под шумом видно страницу вопроса. */
.mech-blow-intro{position:fixed;inset:0;z-index:9200;display:flex;align-items:flex-end;justify-content:center;
  padding:18px 16px 26px;background:rgba(2,6,23,.35);backdrop-filter:blur(1.5px)}
.mech-blow-intro-card{width:100%;max-width:440px;background:#fff;border-radius:20px;padding:20px 18px 16px;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:cqBlowUp .25s ease-out}
@keyframes cqBlowUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.mech-blow-intro-icon{font-size:40px;line-height:1;margin-bottom:6px}
.mech-blow-intro-title{font-size:17px;font-weight:800;margin-bottom:8px}
.mech-blow-intro-phrase{font-size:14.5px;color:#475569;line-height:1.5;margin-bottom:14px}
.mech-blow-intro-go{width:100%;margin-bottom:8px}
.mech-blow-intro-later{background:none;border:0;color:#64748b;font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline}
body.dark .mech-blow-intro-card{background:#1e293b;color:#f1f5f9}
body.dark .mech-blow-intro-phrase{color:#cbd5e1}
.mech-blow2{position:fixed;inset:0;z-index:9300;overflow:hidden;background:transparent}
.mech-blow2.done{opacity:0;transition:opacity .5s ease}
.mech-blow-canvas{position:absolute;inset:0;width:100%;height:100%}
.mech-blow-film{position:absolute;inset:0;pointer-events:none;opacity:.55;transition:opacity .25s linear}
.mech-blow2.effect-dust .mech-blow-film{background:rgba(120,105,80,.55)}
.mech-blow2.effect-pollen .mech-blow-film{background:rgba(190,160,60,.5)}
.mech-blow2.effect-snow .mech-blow-film{background:rgba(235,242,250,.6)}
.mech-blow-head{position:relative;z-index:2;max-width:460px;margin:18px auto 0;background:rgba(15,23,42,.78);
  color:#f8fafc;border-radius:16px;padding:14px 16px;text-align:center;backdrop-filter:blur(3px)}
.mech-blow-phrase{font-size:15.5px;font-weight:700;line-height:1.35;margin-bottom:6px}
.mech-blow-status{font-size:13px;color:#cbd5e1;min-height:18px;margin-bottom:10px}
.mech-blow-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden;margin-bottom:10px}
.mech-blow-bar span{display:block;height:100%;width:0;background:#38bdf8;transition:width .12s linear}
.mech-blow-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mech-blow-actions .btn{min-width:120px}

/* ==================== ИСТОРИЯ ПОСЛЕ ОТВЕТА — НА ВЕСЬ ЭКРАН ====================
   Владимир, 30.10.2026: фото истории — от края до края без скруглений; верхний бар
   (Верно, аудиогид, Далее, крестик) наложен на фото; контент прокручивается внутри окна,
   а страница под окном не листается. */
#modal-story{padding:0;align-items:stretch;justify-content:stretch;overflow:hidden}
#modal-story .modal-content{max-width:none;width:100%;height:100dvh;max-height:100dvh;min-height:0;
  border-radius:0;padding:0;overflow:hidden;background:#fff;position:relative;
  display:flex;flex-direction:column}
body.dark #modal-story .modal-content{background:#0f172a;color:#e2e8f0}
#modal-story .story-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;padding-bottom:18px}
#modal-story .story-topbar{position:relative;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:10px;background:#fff;border-bottom:1px solid #e5e7eb;
  padding:10px 14px;margin:0}
body.dark #modal-story .story-topbar{background:#0f172a;border-bottom-color:#334155}
#modal-story .story-topbar .btn{white-space:nowrap}
/* Есть фото — бар лежит поверх него, без белой полосы сверху */
#modal-story .modal-content.story-has-media .story-topbar{position:absolute;top:0;left:0;right:0;
  background:linear-gradient(180deg,rgba(2,6,23,.62) 0%,rgba(2,6,23,0) 100%);
  border-bottom:0;color:#fff;padding:10px 14px}
#modal-story .modal-content.story-has-media .story-topbar .btn-dark,
#modal-story .modal-content.story-has-media .story-close{background:rgba(15,23,42,.72);
  border:0;color:#fff}
/* Аудиогид в баре: круглая кнопка-наушники без полосы и времени */
#modal-story .story-topbar .story-topbar-audio{flex:none}
#modal-story .story-topbar .cq-audio{background:none;border:0;padding:0;gap:0}
#modal-story .story-topbar .cq-audio-track,
#modal-story .story-topbar .cq-audio-time,
#modal-story .story-topbar .cq-audio-label{display:none}
#modal-story .story-topbar .cq-audio-btn{width:36px;height:36px;min-width:36px;padding:0;
  border-radius:50%;justify-content:center;background:rgba(15,23,42,.72);color:#fff;border:0}
#modal-story .story-topbar .cq-audio.playing .cq-audio-btn{background:#0d9488}
/* Фото истории — от края до края, без скруглений и белых полос */
#story-media{margin:0;position:relative}
#story-media .story-media-slide{border-radius:0;background:#0f172a;overflow:hidden}
#story-media .story-media-img{width:100%;height:auto;max-height:none;object-fit:cover;
  display:block;background:#0f172a}
#story-media .story-media-video{width:100%;max-height:70vh;display:block;background:#000}
/* Подпись кадра — поверх фото, а не белой полосой под ним */
#story-media .story-media-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:26px 14px 10px;color:#fff;font-size:12.5px;line-height:1.45;
  text-shadow:0 1px 2px rgba(0,0,0,.55);pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))}
/* Листалка кадров — поверх фото справа снизу */
#story-media .story-media-nav{position:absolute;right:12px;bottom:12px;z-index:3;margin:0;
  background:rgba(15,23,42,.62);border-radius:999px;padding:5px 10px;color:#fff}
#story-media .story-media-nav .story-media-prev,
#story-media .story-media-nav .story-media-next{color:#fff;border-color:rgba(255,255,255,.35);
  background:transparent}
#story-media .story-media-pos{color:#fff}
/* Текст истории и факты — с отступами */
#story-text{margin:16px 16px 20px}
#facts-container{margin:0 16px;padding-bottom:18px}
#story-back{margin:0 16px 18px;width:calc(100% - 32px)}
/* Страница под открытым окном не прокручивается (в т.ч. iOS Safari) */
body.modal-open{position:fixed;top:0;left:0;right:0;width:100%;overflow:hidden}

/* Кнопки механик: всегда одинаковая высота (2 строки), чтобы текст не дёргал вёрстку */
.mech-card .mech-start{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.2;white-space:normal;word-break:break-word;padding:8px 12px}
.mechanics-slot{margin-top:14px}

/* ==================== РАЗЛОМ ВРЕМЕНИ: ПОЛНЫЙ ЭКРАН + ЭФФЕКТЫ ====================
   Заказчик, 29.10: сначала отбивка, потом картинка во весь экран; медленнее и с выбором
   эффекта (растворение/свечение/снег/листья); для горизонтального фото — подсказка
   повернуть экран на чёрном фоне. */
.mech-rift{position:fixed;inset:0;z-index:9300;background:#000;display:flex;align-items:center;justify-content:center;padding:0}
.mech-rift-box{position:relative;width:100%;height:100%;background:#000;display:flex;flex-direction:column}
.mech-rift-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#000;touch-action:pan-y}
.mech-rift-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;
  transition:opacity 1.6s ease, transform 1.6s ease, filter 1.6s ease}
.mech-rift-stage[data-mode="old"] .mech-rift-img.now{opacity:0;transform:scale(1.04)}
.mech-rift-stage[data-mode="now"] .mech-rift-img.old{opacity:0;transform:scale(1.04)}
.mech-rift-stage[data-effect="glow"] .mech-rift-img{transition:opacity 1.2s ease, filter 1.2s ease}
.mech-rift-stage[data-effect="glow"][data-mode="now"] .mech-rift-img.now{filter:brightness(1.35) saturate(1.1)}
.mech-rift-stage[data-effect="glow"] .mech-rift-glow{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%);
  opacity:0;animation:cqRiftGlow 1.6s ease-out}
@keyframes cqRiftGlow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.mech-rift-badge{position:absolute;left:12px;top:12px;z-index:3;background:rgba(15,23,42,.72);color:#fbbf24;
  font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px}
.mech-rift-loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  color:#e2e8f0;font-size:14px;background:rgba(0,0,0,.55)}
.mech-rift-loading.hidden{display:none}
.mech-rift-close{position:absolute;top:10px;right:12px;z-index:6;width:42px;height:42px;border:0;
  border-radius:50%;background:rgba(15,23,42,.7);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.mech-rift-bottom{position:relative;z-index:5;background:rgba(0,0,0,.78);padding:10px 14px 14px;flex:none}
.mech-rift-caption{font-size:14px;color:#e2e8f0;min-height:0;margin-bottom:2px}
.mech-rift-hint{font-size:12.5px;color:#94a3b8;margin-bottom:8px}
.mech-rift-actions{display:flex;gap:8px;flex-wrap:wrap}
.mech-rift-actions .btn{flex:1 1 160px;min-width:0;white-space:nowrap;text-align:center;padding:11px 12px}
.mech-rift-actions .btn-outline{color:#e2e8f0;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.mech-rift-actions .btn-outline:hover{background:rgba(255,255,255,.16)}
/* подсказка «поверните телефон» для горизонтального фото */
.mech-rift-rotate{position:absolute;inset:0;z-index:7;background:#000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;color:#e2e8f0;text-align:center;padding:24px}
.mech-rift-rotate.hidden{display:none}
.mech-rift-rotate-icon{font-size:64px;line-height:1;animation:cqRotateHint 2.4s ease-in-out infinite}
@keyframes cqRotateHint{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}
.mech-rift-rotate-title{font-size:18px;font-weight:700}
.mech-rift-rotate-text{font-size:13.5px;color:#94a3b8;max-width:320px;line-height:1.5}
.mech-rift-particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mech-rift-particle{position:absolute;top:-8%;border-radius:50%;opacity:.9;animation:cqRiftFall linear forwards}
@keyframes cqRiftFall{from{transform:translateY(-10vh) rotate(0)}to{transform:translateY(115vh) rotate(360deg)}}
/* поправки к старым правилам разлома: полноэкранный режим поверх модалки */
.mech-rift-box{max-width:none;border-radius:0}
.mech-rift-stage{aspect-ratio:auto}
.mech-rift-caption{padding:0}
.mech-rift-hint{padding:0}
.mech-rift-actions{padding:0}

/* ==================== КОМПАКТНЫЙ СУББАР: ВИД ПЕРЕДВИЖЕНИЯ, ЧАСЫ, МОНЕТЫ ====================
   Заказчик, 29.10: плашку вида передвижения перенесли в строку к времени и монетам;
   если всё не влезает в одну строку — у кнопок остаются только значки. */
.subbar-stats{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0;overflow:hidden}
.subbar #demo-badge{padding:3px 9px;border-radius:999px;font-size:12px;line-height:1.2;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;flex:none}
.subbar #demo-badge.hidden{display:none}
.subbar #demo-badge .transport-icon{font-size:16px;line-height:1}
/* Способ передвижения — только значок, без цветной плашки (Владимир, 30.10). */
.subbar #demo-badge.is-transport{background:none!important;padding:0!important;border-radius:0;
  min-width:0;box-shadow:none}
.subbar #demo-badge.is-transport .transport-icon{font-size:20px;line-height:1}
.subbar-actions{display:flex;gap:6px;flex-wrap:nowrap;flex:none}
.subbar .btn-sub .btn-ico{font-size:14px;line-height:1}
.subbar .btn-sub .btn-label{margin-left:2px}
.subbar.tight .btn-label,.subbar.tight #demo-badge .badge-text{display:none}
@media (max-width:520px){
  .subbar-stats{gap:8px}
  .subbar .btn-sub{font-size:13px;padding:6px 8px}
}
@media (max-width:430px){
  .subbar .btn-label{display:none}
}

/* ==================== GPS-ПРОБЛЕМА В ОДНУ СТРОКУ ====================
   Заказчик, 29.10: «аварийная» плашка про GPS не должна занимать две строки. */
.geo-problem-inline{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  background:#fef3c7;color:#78350f;border-radius:12px;padding:8px 10px;font-size:12.5px;margin:10px 0}
.geo-problem-line{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-problem-line b{font-weight:700}
.geo-problem-inline .geo-problem-icon-btn{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid #fcd34d;
  background:#fffbeb;color:#78350f;font-size:15px;line-height:1;cursor:pointer;padding:0}
.geo-problem-inline .geo-problem-arrive{flex:none;border:0;border-radius:9px;background:#111827;color:#fff;
  font:inherit;font-size:12px;font-weight:600;padding:7px 10px;cursor:pointer;white-space:nowrap}
body.dark .geo-problem-inline{background:#3f2d0a;color:#fde68a}

/* ==================== МИНИ-КОМПАС: ОСТРАЯ СТРЕЛКА КАК БОЛЬШОЙ КОМПАС ==================== */
.mini-compass{position:relative;width:52px;height:52px;border-radius:50%;border:2px solid #d1d5db;
  background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.mini-compass:after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed #fecaca}
.mini-compass-needle{position:absolute;left:50%;top:50%;width:0;height:0;
  border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:24px solid #dc2626;
  transform-origin:50% 72%;transform:translate(-50%,-72%);filter:drop-shadow(0 0 1px rgba(220,38,38,.5))}
.mini-compass-dot{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  background:#111827;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #fff}
body.dark .mini-compass{background:#1e293b;border-color:#334155}
body.dark .mini-compass:after{border-color:rgba(220,38,38,.35)}
body.dark .mini-compass-dot{background:#e2e8f0;box-shadow:0 0 0 2px #1e293b}
/* большая стрелка — тоже острая */
.cq-compass-needle .needle-shape{position:absolute;top:8px;left:50%;width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:26px solid #dc2626;
  transform:translateX(-50%)}
.distance-actions{justify-content:space-between}
.distance-compass-about{background:none;border:0;padding:0;color:#94a3b8;font:inherit;font-size:11.5px;
  cursor:pointer;text-decoration:underline;white-space:nowrap}
.distance-compass-about:hover{color:#64748b}
/* плашка теперь живёт над описанием и тянется по всей карточке подхода */
.distance-sticky{position:sticky;top:6px;margin:2px 0 10px;z-index:60}
.distance-box .compass-box{border-top:0;margin-top:6px;padding-top:6px}

/* ==================== КНОПКА ЗАКРЫТИЯ ИСТОРИИ (друг может закрыть сам) ==================== */
.story-topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.story-close{width:36px;height:36px;min-width:36px;border-radius:50%;border:1px solid #e5e7eb;
  background:#fff;color:#475569;font-size:22px;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
.story-close:hover{background:#f1f5f9}
body.dark .story-close{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .story-close:hover{background:#334155}

/* ==================== АНИМАЦИИ ПОБЕДЫ: 5 СЛУЧАЙНЫХ СЦЕН ==================== */
.cq-win-scene{position:fixed;inset:0;z-index:2500;overflow:hidden;pointer-events:auto;
  background:radial-gradient(circle at 50% 42%, rgba(30,41,59,.72), rgba(2,6,23,.92));
  opacity:0;transition:opacity .18s ease;display:flex;align-items:center;justify-content:center}
.cq-win-scene.show{opacity:1}
.cq-win-scene.done{opacity:0;transition:opacity .45s ease;pointer-events:none}
.cq-win-canvas{position:absolute;inset:0;width:100%;height:100%}
.cq-win-text{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.55);
  font-size:clamp(34px,9.5vw,68px);font-weight:900;letter-spacing:.01em;text-align:center;
  color:#fff7d6;text-shadow:0 2px 0 rgba(120,53,15,.35),0 8px 34px rgba(250,204,21,.55),0 0 80px rgba(249,115,22,.35);
  animation:cqWinText .95s cubic-bezier(.2,1.5,.4,1) forwards;max-width:92vw;line-height:1.05}
@keyframes cqWinText{0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-5deg)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(1.5deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
.cq-win-rays{position:absolute;inset:-30%;pointer-events:none;opacity:.55;mix-blend-mode:screen;
  background:conic-gradient(from 0deg at 50% 50%,rgba(250,204,21,.28) 0 8deg,transparent 8deg 26deg,
    rgba(253,230,138,.22) 26deg 34deg,transparent 34deg 52deg,
    rgba(249,115,22,.22) 52deg 60deg,transparent 60deg 80deg);
  animation:cqWinRays 9s linear infinite}
@keyframes cqWinRays{to{transform:rotate(360deg)}}
.cq-win-skyline{position:absolute;left:0;right:0;bottom:0;height:18%;pointer-events:none;display:none;
  background:repeating-linear-gradient(90deg,#0b1220 0 26px,transparent 26px 34px,#0b1220 34px 72px,transparent 72px 82px,
    #0b1220 82px 128px,transparent 128px 140px);opacity:.9;
  mask-image:linear-gradient(to top,#000 35%,transparent)}
.scene-fireworks .cq-win-skyline{display:block}
.cq-win-star{position:absolute;left:50%;top:20%;transform:translate(-50%,-50%) scale(0);font-size:54px;
  color:#fde68a;text-shadow:0 0 30px rgba(250,204,21,.9);display:none}
.scene-ribbons .cq-win-star{display:block;animation:cqWinStar 1.2s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes cqWinStar{0%{transform:translate(-50%,-50%) scale(0) rotate(-40deg);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.25) rotate(8deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}
.cq-win-stamp{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(2.6) rotate(-14deg);
  border:6px double #fbbf24;border-radius:50%;width:min(62vw,260px);height:min(62vw,260px);
  display:none;align-items:center;justify-content:center;color:#fbbf24;font-weight:900;
  font-size:clamp(20px,5.2vw,34px);letter-spacing:.06em;text-shadow:0 0 22px rgba(251,191,36,.45);
  box-shadow:0 0 0 6px rgba(251,191,36,.12),0 0 90px rgba(249,115,22,.45);opacity:0}
.cq-win-stamp span{transform:rotate(0deg)}
.scene-stamp .cq-win-stamp{display:flex;animation:cqWinStamp .8s cubic-bezier(.2,1.4,.35,1) forwards}
.scene-stamp{animation:cqWinShake .55s .18s ease-out}
@keyframes cqWinStamp{0%{opacity:0;transform:translate(-50%,-50%) scale(2.6) rotate(-14deg)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(.92) rotate(-6deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-6deg)}}
@keyframes cqWinShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-7px,3px)}
  40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
.scene-sparks{animation:cqWinZoom 1.8s ease-out}
@keyframes cqWinZoom{0%{background-size:100% 100%;transform:scale(1)}100%{transform:scale(1.06)}}
.cq-win-confetti span{position:absolute;top:-12%;width:9px;height:16px;border-radius:2px;
  pointer-events:none;animation:cqWinFall linear forwards}
@keyframes cqWinFall{from{transform:translateY(-12vh) rotate(0)}to{transform:translateY(115vh) rotate(520deg)}}
.cq-win-scene.reduced .cq-win-rays,.cq-win-scene.reduced .cq-win-canvas,
.cq-win-scene.reduced .cq-win-confetti,.cq-win-scene.reduced .cq-win-stamp{display:none}
.cq-win-scene.reduced .cq-win-text{animation:cqWinFade 1.1s ease forwards}
@keyframes cqWinFade{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* ==================== МАРШРУТ: УЗКАЯ ПЛАШКА И КАРТА ВНИЗУ БЛОКА ====================
   Владимир, 30.10: плашка с метрами — пониже, полоса достижения — тонкой линией по верхней
   границе, со стрелкой; «Показать карту» и «О компасе» — внизу основного блока, карта
   открывается под ними (а не над карточкой). */
.distance-sticky{padding:8px 12px 9px;overflow:hidden}
.distance-sticky .distance-row{margin-bottom:0;align-items:center}
.distance-sticky .distance-value{font-size:20px;line-height:1.15}
.distance-sticky .distance-label{font-size:10.5px;letter-spacing:.02em}
.distance-sticky .mini-compass{width:38px;height:38px}
.distance-sticky .mini-compass-needle{font-size:17px}
.distance-sticky .progress-track{position:absolute;left:0;right:0;top:0;height:3px;margin:0;
  border-radius:0;background:#e5e7eb;overflow:visible}
.distance-sticky .progress-fill{position:relative;height:100%;border-radius:0;
  background:linear-gradient(90deg,#22c55e,#16a34a)}
.progress-arrow{position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:0;height:0;
  border-left:7px solid #16a34a;border-top:4px solid transparent;border-bottom:4px solid transparent;
  filter:drop-shadow(0 1px 2px rgba(22,163,74,.45))}
.route-bottom-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.route-bottom-actions .btn-map,.route-bottom-actions .distance-compass-about{flex:none}
.route-map-block{margin-top:2px}
/* «К точке» и «Построить маршрут» — один ряд справа под картой (Владимир, 01.11.2026) */
.route-map-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-height:0;margin:0}
/* «К точке» живёт под картой: отступ даём самой кнопке, чтобы свёрнутая карта
   не оставляла пустую полосу (Владимир, 30.10). */
.route-map-tools #btn-map-center.btn-map,.route-map-tools #btn-route.btn-map{margin:10px 0 0}
.route-map-tools .btn-map{flex:0 1 auto;min-width:0;padding:5px 10px;font-size:12px;white-space:nowrap}
.route-map-block .map-frame{margin:0}
.route-map-block .map-status{margin-top:4px}
.route-map-block .map-actions{margin-bottom:4px}

/* ==================== МАРШРУТ: ПЛАВАЮЩАЯ ПЛАШКА И СЕРЫЙ БЛОК НАВИГАЦИИ ====================
   Владимир, 30.10: узкая плашка — внизу экрана, плавающая, прячется у блока навигации;
   по клику прокручивает к нему. Карта — в сером блоке ниже компаса, описание не скрываем. */
.distance-sticky{position:fixed;left:50%;right:auto;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));
  width:min(560px,calc(100% - 24px));margin:0;z-index:90;transform:translateX(-50%);
  padding:8px 12px 9px;cursor:pointer;transition:opacity .2s ease,transform .2s ease}
.distance-sticky.is-hidden{opacity:0;pointer-events:none;transform:translate(-50%,18px)}
/* Блок навигации: тёплая светлая подложка вместо серой — «позитивнее» и не выпадает
   из тёплой палитры сайта (Владимир, 01.11.2026). Границы и читаемость сохранены. */
.route-nav-card{margin-top:14px;background:#f7f5ef;border:1px solid #e7e1d4;border-radius:16px;padding:12px}
body.dark .route-nav-card{background:#0f172a;border-color:#334155}
.route-nav-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.route-nav-actions .btn-map{flex:1 1 auto;min-width:0;justify-content:center;white-space:nowrap}
.route-nav-actions .distance-compass-about{flex:none;background:none;border:0;color:#475569;
  font-size:12.5px;padding:6px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
body.dark .route-nav-actions .distance-compass-about{color:#cbd5e1}
.route-nav-card .route-map-block{margin-top:12px}
.route-nav-card #map{height:240px;margin-bottom:4px}
.route-nav-card .compass-box{margin:0}

/* ==================== ЗНАЧКИ СПЕЦЭФФЕКТОВ ====================
   Владимир, 30.10: после первого запуска механика превращается в маленькую кнопку-значок
   в строке «Вы на месте»; тот же значок — в отбивке и на кнопке запуска. */
.question-head-row{flex-wrap:wrap;row-gap:6px}
.mechanics-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;flex:0 1 auto}
.mech-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid #e5e7eb;background:#fff;
  color:#111;border-radius:999px;padding:5px 10px;font-size:12px;line-height:1.15;cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.06);max-width:190px}
.mech-chip:hover{background:#f8fafc;border-color:#cbd5e1}
.mech-chip-ico{font-size:14px;line-height:1}
.mech-chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
body.dark .mech-chip{background:#0f172a;border-color:#334155;color:#e2e8f0;box-shadow:none}
body.dark .mech-chip:hover{background:#1e293b}
.mech-start-ico,.mech-intro-ico{font-size:15px;line-height:1}

/* ==================== ПРОДУВАНИЕ: МИНИМАЛЬНЫЙ ИНТЕРФЕЙС ====================
   Владимир, 30.10: только мелкий текст «Дуй ещё» и крестик; полоса прогресса —
   тонкая линия по верхней границе экрана без скруглений; «Готово» — сверху. */
.mech-blow2 .mech-blow-progress{position:fixed;left:0;right:0;top:var(--mech-blow-top,0px);z-index:9310;height:0;pointer-events:none}
.mech-blow2 .mech-blow-bar{position:absolute;left:0;right:0;top:0;height:3px;margin:0;border-radius:0;
  background:rgba(255,255,255,.18);overflow:visible}
.mech-blow2 .mech-blow-bar span{display:block;height:100%;width:0;border-radius:0;
  background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .12s linear;position:relative}
.mech-blow2 .mech-blow-bar span:after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-left:7px solid #16a34a;border-top:4px solid transparent;border-bottom:4px solid transparent;
  filter:drop-shadow(0 1px 2px rgba(22,163,74,.45))}
.mech-blow2 .mech-blow-progress-text{position:fixed;top:calc(var(--mech-blow-top,0px) + 10px);left:50%;transform:translateX(-50%);
  background:rgba(15,23,42,.82);color:#fff;font-size:13px;font-weight:700;padding:5px 12px;
  border-radius:999px;z-index:9311;pointer-events:none}
.mech-blow2 .mech-blow-hint{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:9312;display:flex;align-items:center;gap:10px;
  background:rgba(15,23,42,.72);color:#fff;padding:6px 8px 6px 14px;border-radius:999px;
  font-size:12.5px;backdrop-filter:blur(6px)}
.mech-blow2 .mech-blow-hint-text{background:none;border:0;color:#fff;font-size:12.5px;padding:0;
  cursor:default;font-family:inherit;line-height:1.2;white-space:nowrap}
.mech-blow2 .mech-blow-hint-text.is-fallback{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.mech-blow2 .mech-blow-close{width:26px;height:26px;min-width:26px;border-radius:50%;border:0;
  background:rgba(255,255,255,.16);color:#fff;font-size:18px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.mech-blow2 .mech-blow-close:hover{background:rgba(255,255,255,.28)}
/* тонировка — лишь лёгкая дымка; плотность дают круглые частицы */
.mech-blow2.effect-dust .mech-blow-film{background:rgba(120,105,80,.32)}
.mech-blow2.effect-pollen .mech-blow-film{background:rgba(190,160,60,.22)}
.mech-blow2.effect-snow .mech-blow-film{background:rgba(235,242,250,.30)}
.mech-blow2.effect-leaves .mech-blow-film{background:rgba(180,83,9,.22)}

/* ==================== СЕРЫЙ БЛОК НАВИГАЦИИ: ЦЕНТР, КОМПАКТНЫЕ КНОПКИ, ВОПРОСИК ====================
   Владимир, 30.10: блок должен выделяться на фоне; компас по центру; кнопки компактно снизу;
   «О компасе» — аккуратный вопросик в правом верхнем углу; прогресс — как был. */
.route-nav-card{position:relative;background:#f7f5ef;border:1px solid #e7e1d4;border-radius:16px;
  padding:14px 12px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
body.dark .route-nav-card{background:#111827;border-color:#334155;box-shadow:none}
.route-nav-help{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  border:1px solid #cbd5e1;background:#fff;color:#475569;font-size:14px;font-weight:800;
  line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  padding:0;z-index:2}
.route-nav-help:hover{background:#f1ece0}
body.dark .route-nav-help{background:#1e293b;border-color:#334155;color:#cbd5e1}
.route-nav-card .compass-box{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;border-top:0;margin:0;padding:2px 0 4px;text-align:center}
.route-nav-card .cq-compass-info{text-align:center}
.route-nav-card .cq-compass-hint{max-width:320px}
.route-nav-progress{height:6px;border-radius:999px;background:#e6dfd0;overflow:hidden;margin:8px 2px 8px}
.route-nav-progress .progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .3s}
.route-nav-actions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:nowrap;margin-top:0}
.route-nav-actions .nav-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid #cbd5e1;background:#fff;color:#111;border-radius:999px;padding:9px 14px;
  font-size:13px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;min-width:0;
  box-shadow:0 1px 2px rgba(15,23,42,.06)}
.route-nav-actions .nav-pill:hover{background:#f1ece0;border-color:#b9b1a0}
.route-nav-actions .nav-pill.map-active{background:#111;color:#fff;border-color:#111}
body.dark .route-nav-actions .nav-pill{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .route-nav-actions .nav-pill:hover{background:#334155}
.route-nav-card .route-map-block{margin-top:10px}
.route-nav-card #map{height:240px;margin-bottom:4px}
/* Отбивка «Экран затянуло пылью» — по центру, а не снизу, чтобы не перекрывать кнопки. */
.mech-blow-intro{align-items:center;padding:20px}
.mech-blow-intro-card{max-height:86vh;overflow:auto}

/* Крупные метры в сером блоке — теперь под компасом (Владимир, 30.10), разделительной
   черты нет: блок не режется, а компас занимает больше места. */
.route-nav-distance{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:0 4px 6px;margin-bottom:6px}
.route-nav-distance-value{font-size:34px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.route-nav-distance-label{font-size:11px;color:#475569;text-transform:uppercase;letter-spacing:.06em}
.route-nav-distance-side{text-align:right;padding-bottom:2px}
.route-nav-distance-target{font-size:16px;font-weight:700}
body.dark .route-nav-distance-label{color:#94a3b8}
/* Компас в сером блоке: стал крупнее (90 → 106 px), но внутри того же блока — лишнюю
   высоту забрали у подсказки, которая переехала вниз. Стрелка масштабирована под размер. */
.route-nav-card .compass-box{padding:4px 0 2px}
.route-nav-card .cq-compass{width:106px;height:106px}
.route-nav-card .cq-compass-needle .needle-shape{top:13px;
  border-left-width:12px;border-right-width:12px;border-bottom-width:35px}
/* Тексты про компас и «Включить компас» — в самом низу блока, под кнопками. */
.compass-foot{margin-top:8px}
.compass-foot .nav-wide{margin:0 0 8px}
.compass-foot .cq-compass-hint{max-width:320px;margin:0 auto;text-align:center;
  font-size:12px;line-height:1.45;color:#6b7280}
body.dark .compass-foot .cq-compass-hint{color:#94a3b8}
@media(max-width:520px){
  .route-nav-card .cq-compass{width:94px;height:94px}
  .route-nav-card .cq-compass-needle .needle-shape{top:11px;
    border-left-width:11px;border-right-width:11px;border-bottom-width:31px}
}
.nav-wide{display:block;width:100%;margin-top:10px;padding:11px 14px;border-radius:12px;
  border:1px solid #cbd5e1;background:#fff;color:#111;font-size:14px;font-weight:700;cursor:pointer}
.nav-wide:hover{background:#f8fafc}
body.dark .nav-wide{background:#1e293b;border-color:#334155;color:#e2e8f0}
/* Плавающая плашка — того же цвета, что большой блок навигации (тёплый светлый). */
.distance-sticky{background:#f7f5ef!important;border-color:#e7e1d4!important;color:#111!important;
  box-shadow:0 10px 26px rgba(15,23,42,.18)}
body.dark .distance-sticky{background:#111827!important;border-color:#334155!important;color:#e2e8f0!important}
.distance-sticky .distance-label{color:#475569}
body.dark .distance-sticky .distance-label{color:#94a3b8}

/* ==== ТЁМНАЯ ТЕМА + НОВЫЙ СТИЛЬ: не оставляем белые карточки со светлым текстом ====
   Если на телефоне включена тёмная тема и случайно включён style-v2, `.card` из style-v2
   перекрывал тёмный фон, а текст вопроса оставался светлым — вопрос «исчезал» на белом. */
body.dark.style-v2 .card,
body.dark.style-v2 .quest-card,
body.dark.style-v2 .metric,
body.dark.style-v2 .stat-box,
body.dark.style-v2 .my-quest-item,
body.dark.style-v2 .review-item,
body.dark.style-v2 .q-item{background:#1e293b;border-color:#334155;color:#e2e8f0;box-shadow:none}
body.dark.style-v2 .question-text,
body.dark.style-v2 .approach-title{color:#f1f5f9}
body.dark.style-v2 .approach-text,
body.dark.style-v2 .fact-text{color:#cbd5e1}

/* ==================== ФОТО-ЗАДАНИЕ: КАМЕРА НА ВЕСЬ ЭКРАН ====================
   Владимир, 31.10.2026: без рамки и скруглений, видео — на весь экран (100dvh и вся
   ширина). Портрет: круглая кнопка-затвор внизу по центру. Горизонталь: затвор в правом
   краю по центру по вертикали — класс .is-landscape ставит JS по resize, камеру при
   повороте не пересоздаём. Рядом с затвором — переключатель камеры и круглая кнопка
   «фильтр»; по её нажатию раскрывается горизонтальная лента круглых значков, первый —
   «Оригинал». После кадра — кадр на весь экран, а снизу градиентная подложка (как
   подпись на фото в слайдере) с согласиями, «Сохранить» и «Переснять».
   Все селекторы под .mech-photo, чтобы не задеть админку: там встречаются одноимённые
   классы полей (.mech-photo-hint и т.п.). */
.mech-photo{position:fixed;inset:0;z-index:9350;width:100%;height:100vh;height:100dvh;background:#000;color:#fff;
  overflow:hidden;-webkit-user-select:none;user-select:none}
.mech-photo .mech-photo-view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.mech-photo .mech-photo-video,
.mech-photo .mech-photo-preview{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.mech-photo .mech-photo-canvas{display:none}
/* Верхняя полоса: белая «Отмена» слева, вспышка справа. */
.mech-photo .mech-photo-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:flex-start;
  justify-content:space-between;gap:10px;pointer-events:none;
  padding:10px 12px 0;
  padding:calc(10px + env(safe-area-inset-top))
  calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left))}
.mech-photo .mech-photo-top > *{pointer-events:auto}
.mech-photo .mech-photo-cancel{display:inline-flex;align-items:center;gap:6px;max-width:60vw;
  padding:8px 14px 8px 10px;border-radius:999px;border:1.5px solid rgba(255,255,255,.92);
  background:rgba(12,16,26,.42);color:#fff;font:inherit;font-size:14px;font-weight:600;line-height:1;
  cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mech-photo .mech-photo-cancel svg{flex:0 0 auto;width:17px;height:17px;stroke:currentColor}
.mech-photo .mech-photo-cancel:active{transform:scale(.97)}
/* Круглые кнопки поверх видео — в стиле остальных круглых иконок игры. */
.mech-photo .mech-photo-tool{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(12,16,26,.5);color:#fff;
  cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.mech-photo .mech-photo-tool svg{width:24px;height:24px}
.mech-photo .mech-photo-tool:active{transform:scale(.94)}
.mech-photo .mech-photo-flash.is-on{background:#fff;color:#0b1220}
/* Подпись и подсказка — под верхней полосой, чтобы ничего не перекрывать. */
.mech-photo .mech-photo-caption{position:absolute;left:0;right:0;z-index:2;padding:0 18px;
  text-align:center;pointer-events:none;text-shadow:0 1px 10px rgba(0,0,0,.8);
  top:64px;top:calc(64px + env(safe-area-inset-top))}
.mech-photo .mech-photo-title{font-size:15px;font-weight:800;line-height:1.25;max-width:420px;margin:0 auto;
  overflow-wrap:anywhere}
.mech-photo .mech-photo-hint{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.85);
  max-width:380px;margin:3px auto 0;overflow-wrap:anywhere}
/* --- Кнопки съёмки: портрет — снизу по центру, горизонталь — справа по центру --- */
.mech-photo .mech-photo-controls{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;pointer-events:none;
  padding:16px 22px 20px;
  padding:16px calc(22px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom))
  calc(22px + env(safe-area-inset-left))}
.mech-photo .mech-photo-controls > *{pointer-events:auto}
.mech-photo .mech-photo-shutter{grid-column:2;display:flex;align-items:center;justify-content:center;
  width:78px;height:78px;padding:0;border:4px solid rgba(255,255,255,.95);border-radius:50%;
  background:rgba(255,255,255,.14);cursor:pointer;box-shadow:0 2px 16px rgba(0,0,0,.45)}
.mech-photo .mech-photo-shutter-dot{display:block;width:60px;height:60px;border-radius:50%;background:#fff;
  transition:transform .12s ease}
.mech-photo .mech-photo-shutter:active .mech-photo-shutter-dot{transform:scale(.9)}
.mech-photo .mech-photo-flip{grid-column:1;justify-self:start}
.mech-photo .mech-photo-filter-btn{grid-column:3;justify-self:end;font-size:22px;line-height:1}
/* Горизонталь: колонка кнопок в правом краю, затвор — по центру по вертикали. */
.mech-photo.is-landscape .mech-photo-controls{top:0;bottom:0;left:auto;right:0;width:auto;display:flex;
  flex-direction:column;justify-content:center;align-items:center;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
  calc(12px + env(safe-area-inset-bottom)) 12px}
.mech-photo.is-landscape .mech-photo-controls > *{grid-column:auto;justify-self:auto}
.mech-photo.is-landscape .mech-photo-filter-btn{order:1}
.mech-photo.is-landscape .mech-photo-shutter{order:2;width:72px;height:72px}
.mech-photo.is-landscape .mech-photo-shutter-dot{width:54px;height:54px}
.mech-photo.is-landscape .mech-photo-flip{order:3}
.mech-photo.is-landscape .mech-photo-tool{width:46px;height:46px}
.mech-photo.is-landscape .mech-photo-tool svg{width:22px;height:22px}
/* --- Лента фильтров: горизонтальная, первый значок — «Оригинал» --- */
.mech-photo .mech-photo-filters{position:absolute;left:0;right:0;z-index:4;display:none;
  align-items:flex-start;justify-content:center;gap:10px;box-sizing:border-box;
  bottom:calc(124px + env(safe-area-inset-bottom));
  padding:8px 12px 10px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  background:linear-gradient(180deg,rgba(2,6,23,0) 0%,rgba(2,6,23,.55) 100%)}
.mech-photo .mech-photo-filters::-webkit-scrollbar{display:none}
.mech-photo.filters-open .mech-photo-filters{display:flex}
.mech-photo.is-landscape .mech-photo-filters{left:0;right:calc(92px + env(safe-area-inset-right));
  top:50%;bottom:auto;transform:translateY(-50%);justify-content:flex-start;
  background:linear-gradient(90deg,rgba(2,6,23,0) 0%,rgba(2,6,23,.5) 100%)}
.mech-photo .mech-photo-filter{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:0;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.mech-photo .mech-photo-filter-dot{display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;font-size:19px;line-height:1;
  border:2px solid rgba(255,255,255,.55);box-shadow:0 2px 8px rgba(0,0,0,.35);
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.mech-photo .mech-photo-filter-title{max-width:66px;text-align:center;font-size:10px;line-height:1.15;
  color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:normal}
.mech-photo .mech-photo-filter:active .mech-photo-filter-dot{transform:scale(.94)}
.mech-photo .mech-photo-filter.is-active .mech-photo-filter-dot{border-color:#fbbf24;
  box-shadow:0 0 0 3px rgba(251,191,36,.35),0 2px 10px rgba(0,0,0,.45);transform:scale(1.06)}
.mech-photo .mech-photo-filter.is-active .mech-photo-filter-title{color:#fbbf24}
/* --- Наложение текста и значка сайта: в превью и в сохранённом кадре --- */
.mech-photo .mech-photo-overlays{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mech-photo .mech-photo-overlay-text{position:absolute;max-width:55%;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight:800;font-size:clamp(16px,5vmin,44px);line-height:1.18;color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.55);
  white-space:pre-line;overflow-wrap:anywhere}
.mech-photo .mech-photo-overlay-logo{position:absolute;width:clamp(24px,7.5vmin,72px);height:auto;opacity:.96;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))}
/* Запасной путь: камера недоступна — выбрать готовое фото. */
.mech-photo .mech-photo-fallback{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);
  box-sizing:border-box;width:min(340px,calc(100% - 36px));display:flex;flex-direction:column;gap:14px;
  align-items:center;text-align:center;padding:20px 18px;border-radius:20px;
  background:rgba(12,16,26,.78);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mech-photo .mech-photo-fallback-text{font-size:13.5px;line-height:1.5;color:#e2e8f0}
.mech-photo .mech-photo-filebtn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 22px;border-radius:14px;background:#fff;color:#0b1220;
  font-size:15px;font-weight:700;cursor:pointer}
.mech-photo .mech-photo-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
/* --- После съёмки: градиентная подложка снизу вместо отдельной плашки --- */
.mech-photo .mech-photo-result{position:absolute;inset:0;z-index:5;display:block;overflow-y:auto;
  -webkit-overflow-scrolling:touch;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,23,0) 30%,rgba(2,6,23,.55) 64%,rgba(2,6,23,.9) 100%)}
.mech-photo .mech-photo-result-inner{pointer-events:auto;box-sizing:border-box;width:100%;max-width:520px;
  min-height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-end;
  text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.55);
  padding:calc(64px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom))}
.mech-photo .mech-photo-result-title{font-size:16px;font-weight:800;margin:0 0 10px}
/* «Поделиться» на самом снимке: маленькая круглая полупрозрачная кнопка в углу кадра —
   не мешает «Сохранить»/«Переснять» и не занимает половину фото (Владимир, 31.10.2026). */
.mech-photo .mech-photo-share{position:absolute;top:calc(14px + env(safe-area-inset-top));
  right:calc(14px + env(safe-area-inset-right));z-index:6;display:flex;align-items:center;
  justify-content:center;width:42px;height:42px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(12,16,26,.5);color:#fff;
  cursor:pointer;pointer-events:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mech-photo .mech-photo-share svg{width:20px;height:20px}
.mech-photo .mech-photo-share:active{background:rgba(12,16,26,.78)}
.mech-photo .mech-photo-consent{display:flex;flex-direction:column;gap:10px;margin:0 0 12px;
  text-align:left;font-size:12.5px;line-height:1.45;color:#f1f5f9}
.mech-photo .mech-photo-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.mech-photo .mech-photo-check input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
  accent-color:#fbbf24;cursor:pointer}
.mech-photo .mech-photo-check span{display:block;min-width:0;overflow-wrap:anywhere}
.mech-photo .mech-photo-consent a{color:#bfdbfe;text-decoration:underline}
.mech-photo .mech-photo-actions{display:flex;flex-direction:column;gap:10px}
.mech-photo .mech-photo-save,
.mech-photo .mech-photo-retake{display:block;width:100%;min-height:50px;padding:13px 18px;border-radius:14px;
  border:1.5px solid rgba(255,255,255,.92);background:rgba(255,255,255,.1);color:#fff;font:inherit;
  font-size:16px;font-weight:700;line-height:1.2;cursor:pointer}
.mech-photo .mech-photo-retake{font-size:15px;background:transparent}
.mech-photo .mech-photo-save:active,
.mech-photo .mech-photo-retake:active{background:rgba(255,255,255,.22)}
.mech-photo .mech-photo-save:disabled{opacity:.45;cursor:not-allowed}
.mech-photo .mech-photo-error{min-height:16px;font-size:12.5px;line-height:1.4;color:#fca5a5;margin-top:8px}
.mech-photo .mech-photo-error:empty{min-height:0;margin-top:0}
@media (min-width:640px){
  .mech-photo .mech-photo-result-inner{max-width:560px;padding-bottom:24px}
}
/* Горизонталь на телефоне: кнопки в ряд, заголовок не мешает кадру. */
@media (orientation:landscape) and (max-height:560px){
  .mech-photo .mech-photo-actions{flex-direction:row}
  .mech-photo .mech-photo-actions .mech-photo-save,
  .mech-photo .mech-photo-actions .mech-photo-retake{flex:1 1 0;font-size:15px;min-height:46px}
  .mech-photo .mech-photo-result-inner{padding-top:calc(52px + env(safe-area-inset-top));padding-bottom:10px}
  .mech-photo .mech-photo-result-title{display:none}
}
@media (max-width:360px){
  .mech-photo .mech-photo-shutter{width:70px;height:70px}
  .mech-photo .mech-photo-shutter-dot{width:52px;height:52px}
  .mech-photo .mech-photo-tool{width:44px;height:44px}
  .mech-photo .mech-photo-tool svg{width:22px;height:22px}
  .mech-photo .mech-photo-controls{padding-left:calc(18px + env(safe-area-inset-left));
    padding-right:calc(18px + env(safe-area-inset-right))}
  .mech-photo .mech-photo-filter-dot{width:46px;height:46px;font-size:17px}
}
.quest-player-photos{margin:14px 0 0}
.quest-player-photos-title{font-size:15px;font-weight:700;margin-bottom:8px}
.quest-player-photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.quest-player-photos-grid img{width:100%;height:120px;object-fit:cover;border-radius:10px;display:block;cursor:zoom-in}

/* Обложка: «Пригласить друзей» — значок слева от текста, а не над ним. */
.cq-cover-friend{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;text-align:left;padding:12px 16px}
.cq-cover-friend-icon{font-size:24px;flex:0 0 auto}
.cq-cover-friend-text{align-items:flex-start;text-align:left;flex:1 1 auto;min-width:0}

/* «Пригласить друзей»: значок слева, сам текст — по центру кнопки, как у «Начать квест». */
.cq-cover-friend{position:relative;justify-content:center;text-align:center;padding-left:52px;padding-right:52px}
.cq-cover-friend-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:24px}
.cq-cover-friend-text{align-items:center;text-align:center;flex:0 1 auto}

/* «Пригласить друзей»: значок вплотную слева от текста, обе строки — от одной левой границы,
   вся группа по центру кнопки (как ▶ + «Начать квест»). */
.cq-cover-friend{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;text-align:left;padding:12px 16px;position:relative}
.cq-cover-friend-icon{position:static;left:auto;top:auto;transform:none;font-size:24px;line-height:1;flex:0 0 auto}
.cq-cover-friend-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;flex:0 1 auto;min-width:0}
.cq-cover-friend-text b,.cq-cover-friend-text small{text-align:left}

/* ==================== ФОТО ИГРОКОВ: ЛЕНТА, «МОИ ФОТО», ПОРОГИ ГАЛЕРЕЙ ====================
   Решения заказчика 30.10.2026: главная — блок фото во всю ширину и перед отзывами;
   карточка квеста — от 3 фото; лента /photos и раздел «Мои фото» в кабинете. */

/* Ссылка «Все фото» под галереей «Фотографии с прогулок». */
.cq-gallery-all{display:flex;justify-content:center;margin:10px 0 4px}

/* Главная: галерея во всю ширину экрана. Плитки ограничены по высоте, чтобы на телефоне
   блок не превращался в простыню (заказчик: «высота плиток ограничена»). */
.home-fullbleed{width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.home-fullbleed .page-block{padding-left:0;padding-right:0}
.home-fullbleed .page-block h2,.home-fullbleed .page-block .page-lead{padding-left:16px;padding-right:16px}
.home-fullbleed .page-block .page-lead{margin-bottom:8px}
.home-fullbleed .cq-gallery-collage{grid-template-columns:repeat(6,1fr);gap:0;margin:0}
.home-fullbleed .cq-gallery-collage .cq-collage-tile{aspect-ratio:auto;height:150px}
@media (max-width:900px){.home-fullbleed .cq-gallery-collage{grid-template-columns:repeat(3,1fr)}
  .home-fullbleed .cq-gallery-collage .cq-collage-tile{height:130px}}
@media (max-width:480px){.home-fullbleed .cq-gallery-collage{grid-template-columns:repeat(2,1fr)}
  .home-fullbleed .cq-gallery-collage .cq-collage-tile{height:118px}}

/* Карточка квеста: блок «Фото с прогулок» и ссылка на ленту. */
.quest-player-photos-more{display:flex;justify-content:flex-end;margin-top:8px}
.quest-player-photos-more a{font-size:13.5px;color:#7c3aed;text-decoration:none;font-weight:600}
.quest-player-photos-more a:hover{text-decoration:underline}

/* Публичная лента /photos. */
.photos-page{padding:18px 0 40px}
.photos-title{font-size:26px;font-weight:800;margin:0 0 8px;line-height:1.2}
.photos-lead{color:#475569;font-size:14.5px;line-height:1.55;max-width:720px;margin:0 0 14px}
.photos-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.photos-filter{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#64748b}
.photos-filter select{font:inherit;font-size:14px;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:10px;
  background:#fff;color:#0f172a;min-width:180px}
.photos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.photos-card{margin:0;background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;overflow:hidden}
.photos-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;cursor:zoom-in;background:#f1f5f9}
.photos-card figcaption{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px}
.photos-card-quest{font-size:12.5px;font-weight:700;color:#0f172a;text-decoration:none}
.photos-card-quest:hover{text-decoration:underline}
.photos-card-caption{font-size:12.5px;color:#334155;line-height:1.35}
.photos-card-meta{font-size:11.5px;color:#94a3b8}
.photos-status{color:#64748b;font-size:13px;margin:12px 0 0;text-align:center}
.photos-more{display:flex;justify-content:center;margin:16px 0 0}
@media (max-width:900px){.photos-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.photos-grid{grid-template-columns:repeat(2,1fr)}
  .photos-title{font-size:22px}
  .photos-filter{flex:1 1 140px}
  .photos-filter select{min-width:0;width:100%}}

/* Кабинет: вкладка «Мои фото». */
.cabinet-photos-card{margin-bottom:16px}
.my-photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.my-photo{margin:0;background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;overflow:hidden}
.my-photo img{display:block;width:100%;height:170px;object-fit:cover;cursor:zoom-in;background:#f1f5f9}
.my-photo figcaption{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px}
.my-photo-quest{font-size:13px;font-weight:700}
.my-photo-quest a{color:inherit;text-decoration:none}
.my-photo-quest a:hover{text-decoration:underline}
.my-photo-meta{font-size:12px;color:#64748b;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.my-photo-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
.my-photo-badge.is-pending{background:#fef3c7;color:#92400e}
.my-photo-badge.is-published{background:#dcfce7;color:#166534}
.my-photo-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
/* «Поделиться» в «Моих фото»: маленькая круглая иконка в ряду действий, список не ломает. */
.my-photo-share{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;padding:0;border-radius:999px;border:1.5px solid #cbd5e1;background:#fff;
  color:#334155;cursor:pointer}
.my-photo-share svg{width:16px;height:16px}
.my-photo-share:active{background:#f1f5f9}

/* Отбивка перед съёмкой (как у «подуть» и «разлома»): Владимир, 31.10.2026 — на узком
   экране текст и кнопки «криво вставали». Теперь карточка ограничена по высоте и
   прокручивается, длинные слова переносятся, кнопки во всю ширину и не вылезают. */
.mech-photo-intro{position:fixed;inset:0;z-index:9200;display:flex;align-items:flex-end;justify-content:center;
  overflow-y:auto;background:rgba(2,6,23,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  padding:18px 14px 24px;
  padding:18px 14px calc(24px + env(safe-area-inset-bottom))}
.mech-photo-intro-card{box-sizing:border-box;width:100%;max-width:440px;max-height:calc(100dvh - 40px);
  overflow-y:auto;background:#fff;color:#0f172a;border-radius:20px;padding:20px 18px 16px;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:cqBlowUp .25s ease-out}
.mech-photo-intro-icon{font-size:36px;line-height:1;margin-bottom:6px}
.mech-photo-intro-title{font-size:17px;font-weight:800;line-height:1.25;margin-bottom:8px}
.mech-photo-intro-phrase{font-size:14.5px;color:#475569;line-height:1.5;margin:0 0 14px;overflow-wrap:anywhere}
.mech-photo-intro-actions{display:flex;flex-direction:column;gap:8px}
.mech-photo-intro-actions .btn{width:100%;min-height:46px;justify-content:center;text-align:center;
  white-space:normal;line-height:1.25}
body.dark .mech-photo-intro-card{background:#1e293b;color:#f1f5f9}
body.dark .mech-photo-intro-phrase{color:#cbd5e1}
body.dark .mech-photo-intro-card .btn-outline{color:#e2e8f0;border-color:rgba(255,255,255,.42)}
body.dark .mech-photo-intro-card .btn-outline:hover{background:rgba(255,255,255,.12)}
@media (min-width:640px){.mech-photo-intro{align-items:center;padding:20px}}
body.dark .photos-card,body.dark .my-photo{background:#1e293b;border-color:#334155}
body.dark .photos-title,body.dark .photos-card-quest,body.dark .my-photo-quest{color:#f1f5f9}
body.dark .photos-lead,body.dark .photos-filter,body.dark .photos-status{color:#cbd5e1}
body.dark .photos-filter select{background:#0f172a;color:#f1f5f9;border-color:#334155}
body.dark .photos-card-caption,body.dark .my-photo-meta{color:#cbd5e1}
body.dark .my-photo-share{background:#0f172a;border-color:#475569;color:#e2e8f0}
body.dark .my-photo-share:active{background:#1e293b}

/* ==================== АДМИНКА: «КАК РАБОТАЕТ» У МЕХАНИКИ ====================
   Ссылка справа от поля типа механики и модалка с методом, «когда использовать»
   и примером (Владимир, 30.10.2026). */
.mech-help{font-size:12px;color:#7c3aed;text-decoration:underline;white-space:nowrap;cursor:pointer;letter-spacing:.1px}
.mech-help:hover{color:#5b21b6}
.mech-help-modal{max-width:560px}
.mech-help-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.mech-help-head h3{margin:0;font-size:17px;line-height:1.25}
.mech-help-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.mech-help-badge.is-live{background:#dcfce7;color:#166534}
.mech-help-badge.is-soon{background:#fef3c7;color:#92400e}
.mech-help-note{margin:0 0 10px;padding:8px 10px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;
  font-size:12.5px;color:#92400e;line-height:1.45}
.mech-help-lead{margin:0 0 10px;font-size:14px;line-height:1.55;color:#0f172a}
.mech-help-block{margin:0 0 10px}
.mech-help-block b{display:block;font-size:13px;margin-bottom:2px;color:#0f172a}
.mech-help-block p{margin:0;font-size:13.5px;line-height:1.5;color:#334155}
.mech-help-example{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;
  font-size:13px;line-height:1.5;color:#334155}
.mech-help-example b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:#94a3b8;margin-bottom:2px}
.mech-help-foot{margin-top:10px;font-size:11.5px;color:#94a3b8;line-height:1.4}

/* ==================== ИГРА: ПРОСТОРНАЯ ВЕРСТКА (Владимир, 30.10.2026) ====================
   Что меняем и почему:
   * белые карточки-подложки и скругления убираем — контент идёт на всю ширину страницы,
     а «воздух» дают отступы, поэтому интерфейс выглядит просторнее;
   * серый фон страницы под контентом становится белым (тёмная тема остаётся тёмной);
   * фото-слайдеры (вопрос и маршрут) идут от края до края без скруглений, подпись кадра —
     поверх фото на полупрозрачной подложке, чтобы читалась на любом кадре;
   * боковой отступ у блоков — такой же, как раньше был от края белой карточки. */
body.play{--play-pad:20px;background:#fff}
body.dark.play{background:#0b1220}
@media(max-width:640px){body.play{--play-pad:14px}}

/* 1. Контент на всю ширину: ограничение 640 px и внешние поля убираем. */
body.play .play-main{max-width:none;width:100%;margin:0;padding:0 0 28px}
body.play .play-main > #cq-notices,
body.play .play-main > #offline-badge,
body.play .play-main > #observer-view{margin-left:var(--play-pad);margin-right:var(--play-pad)}

/* 2. Белые карточки убираем: блоки просто идут друг за другом, воздух — отступами. */
body.play .play-main > .card{background:none;border:0;border-radius:0;box-shadow:none;
  padding:18px var(--play-pad) 10px;margin:0}
body.play .play-main > .card + .card{margin-top:8px}

/* 3. Фото-слайдеры — от края до края, без скруглений; кадр выше, миниатюры лежат поверх фото,
      подпись — на полупрозрачном градиенте (Владимир, 30.10.2026). */
body.play .play-main #photo-block,
body.play .play-main #route-photos.route-photo-slider{
  margin:0 calc(var(--play-pad) * -1) 14px;border:0;border-radius:0;box-shadow:none;
  background:none;overflow:visible}
body.play .play-main #photo-block,
body.play .play-main #route-photos.route-photo-slider{position:relative}
body.play .play-main .photo-slider{position:relative;border-radius:0;overflow:hidden;margin:0;
  background:#0f172a}
/* Кадр выше прежнего: «протягиваем» его вниз, под миниатюры. */
body.play .play-main .photo-slider img{width:100%;height:min(58vh,640px);min-height:280px;
  max-height:66vh;object-fit:cover;display:block;border-radius:0}
body.play .play-main .photo-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:28px 16px 10px;font-size:12.5px;line-height:1.45;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.38) 35%,rgba(0,0,0,.66) 100%);
  pointer-events:none}
body.play .play-main .photo-caption:empty{display:none}
/* Градиент подписи начинается от самого нижнего края фото и уходит под ленту миниатюр;
   текст поднимаем над миниатюрами отступом, а не сдвигом плашки (Владимир, 30.10.2026). */
body.play .play-main #photo-block.has-thumbs .photo-caption,
body.play .play-main #route-photos.has-thumbs .photo-caption{padding-bottom:104px}

/* Миниатюры — поверх фото, без белых рамок; сами картинки крупнее (Владимир, 30.10.2026). */
body.play .play-main .photo-thumbs{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:10px 12px 12px;background:linear-gradient(180deg,rgba(2,6,23,0),rgba(2,6,23,.62));
  border:0;border-radius:0;box-shadow:none;display:flex;gap:8px;overflow-x:auto}
body.play .play-main .photo-thumbs.hidden{display:none}
body.play .play-main .photo-thumb{background:none;border:0;padding:0;border-radius:10px;
  box-shadow:none;opacity:.6;flex:none;transition:opacity .15s ease,transform .15s ease}
body.play .play-main .photo-thumb:hover{background:none;opacity:.85}
body.play .play-main .photo-thumb img{display:block;width:84px;height:60px;border-radius:10px;
  object-fit:cover}
body.play .play-main .photo-thumb.active{opacity:1;transform:translateY(-2px);
  box-shadow:0 0 0 2px rgba(255,255,255,.95)}

/* 4. Вопрос: одна кнопка «назад к маршруту» и значки механик — поверх фото. */
body.play .play-main > #question-card{padding-top:0;position:relative;margin-top:0}
body.play .play-main > #approach-card{padding-top:0;margin-top:0}
body.play .play-main .question-head-row{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin:14px 0 6px}
body.play .play-main #photo-block:not(.hidden) + .question-head-row{
  position:absolute;top:12px;left:12px;right:12px;z-index:6;margin:0;pointer-events:none}
body.play .play-main #photo-block:not(.hidden) + .question-head-row > *{pointer-events:auto}
/* Стрелка назад + компас + зелёная галочка «вы на месте» — одна кнопка в одном стиле. */
body.play .cq-back-route{display:inline-flex;align-items:center;gap:5px;flex:none;border:0;cursor:pointer;
  background:rgba(15,23,42,.66);color:#fff;border-radius:999px;height:36px;padding:0 13px;
  font-family:inherit;font-size:15px;line-height:1;backdrop-filter:blur(4px);
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
body.play .cq-back-route:hover{background:rgba(15,23,42,.82)}
body.play .cq-br-arrow{font-size:17px;font-weight:700}
body.play .cq-br-compass{font-size:15px}
body.play .cq-br-check{color:#4ade80;font-size:15px;font-weight:800}
body.play .play-main .question-head-row .mechanics-chips{justify-content:flex-end;flex-wrap:nowrap;
  overflow:hidden;min-width:0;align-items:center}
/* Значок механики (например «Подуть на экран») — той же высоты, что кнопка назад, в той же строке. */
body.play .play-main .question-head-row .mech-chip{display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 12px;border-radius:999px;background:rgba(15,23,42,.66);color:#fff;border:0;
  font-size:13px;font-weight:600;backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(0,0,0,.28)}
body.play .play-main .question-head-row .mech-chip-ico{font-size:16px}
/* Если значки не влезают в строку — остаются только значки, крупнее, без текста. */
body.play .mechanics-chips.icons-only .mech-chip-label{display:none}
body.play .mechanics-chips.icons-only .mech-chip{width:36px;padding:0;justify-content:center}
body.play .mechanics-chips.icons-only .mech-chip-ico{font-size:20px}

/* 5. Маршрут: фото-герой, поверх — заголовок, текст и «↩ К вопросу» (Владимир, 30.10.2026). */
body.play .play-main #route-hero{position:relative;margin:0 calc(var(--play-pad) * -1)}
body.play .play-main #route-hero #route-photos{margin:0;border:0;border-radius:0}
body.play .play-main #route-hero .route-hero-overlay{position:relative;padding:14px var(--play-pad) 4px}
body.play .play-main #route-hero.has-photos .route-hero-overlay{position:absolute;top:0;left:0;right:0;
  z-index:4;padding:14px var(--play-pad) 30px;color:#fff;
  background:linear-gradient(180deg,rgba(2,6,23,.66) 0%,rgba(2,6,23,.28) 55%,rgba(2,6,23,0) 100%)}
/* Заголовок и «↩ К вопросу» — одна строка на фото; строка всегда высотой с кнопку,
   длинный заголовок переносится раньше и кнопку не перекрывает. */
body.play .play-main .route-title-row{display:flex;align-items:center;gap:10px;min-height:40px}
body.play .play-main .route-title-row .approach-title{flex:1 1 auto;min-width:0;margin:0;
  display:flex;align-items:center;overflow-wrap:anywhere}
body.play .play-main .route-title-row #btn-back-question{flex:none;height:36px;padding:6px 12px}
body.play .play-main #route-hero.has-photos .route-title-row #btn-back-question{
  background:rgba(15,23,42,.66);color:#fff;border:0;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
body.play .play-main #route-hero.has-photos .approach-title,
body.play .play-main #route-hero.has-photos .approach-text{color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
body.play .play-main #route-hero.has-photos .approach-text{margin-bottom:0}
body.play .play-main #route-hero:not(.has-photos) #route-photos{display:none}

/* 6. Системные плашки (нет связи, уведомления) — во всю ширину, без белых полос сверху и снизу,
      без скруглений; воздух даём внутри плашки (Владимир, 30.10.2026). */
body.play .play-main > #cq-notices{margin:0;padding:0;width:100%;gap:0}
body.play .play-main > #cq-notices:empty{display:none}
body.play .play-main .cq-notice{border-radius:0;margin:0;padding:14px var(--play-pad)}
body.play .play-main > #offline-badge{margin:0;padding:14px var(--play-pad);border-radius:0;
  background:#334155;color:#fff;font-size:13px;line-height:1.5}

/* 7. Сам вопрос крупнее (Владимир, 30.10.2026). */
body.play .play-main .question-text{font-size:21px;line-height:1.42;margin-top:16px;margin-bottom:18px}
body.play .play-main .approach-text{line-height:1.6}
body.play .play-main .cq-info-tiles{margin-top:12px}

/* 8. Плашки «О месте» и «Вокруг» на карточке: тег («О месте»/«Вокруг») вдвое крупнее,
      счётчик («4 факта», «4 места») — в 1,5 раза (Владимир, 30.10.2026: увеличить на самой плашке,
      а не в окнах фактов/мест). */
body.play .play-main .cq-tile-tag{font-size:19px;letter-spacing:.05em}
body.play .play-main .cq-tile-meta{font-size:18px;margin-top:2px}
@media(max-width:640px){
  body.play .play-main .cq-tile-tag{font-size:17px}
  body.play .play-main .cq-tile-meta{font-size:16.5px}
}

/* 9. Своя отбивка механики из админки (Владимир, 30.10.2026): картинка над фразой,
      кнопка с текстом контента; использованные механики в строке — приглушённые. */
.mech-intro-image{display:block;width:100%;max-height:190px;object-fit:cover;border-radius:14px;
  margin:0 0 10px}
body.play .play-main .question-head-row .mech-chip.is-used{opacity:.62}
body.play .play-main .question-head-row .mech-chip.is-used:hover{opacity:.85}

/* ==================== АУДИОГИД: ЗНАЧОК В ШАПКЕ И ОЗВУЧКА МАРШРУТА (Владимир, 30.10.2026) ====================
   Включён — 🔊, выключен — 🔇 с красной чертой. Выключен по умолчанию. */
.play-header #btn-audioguide{position:relative}
.play-header #btn-audioguide.cq-audio-guide-off{color:#fca5a5}
.play-header #btn-audioguide.cq-audio-guide-off::after{content:"";position:absolute;left:9px;right:9px;
  top:50%;height:2px;margin-top:-1px;background:#ef4444;transform:rotate(-45deg);border-radius:2px}
/* Озвучка маршрута — компактная кнопка у текста; на фото лежит на тёмной подложке */
.cq-audio-route{margin-top:8px}
body.play .play-main #route-hero.has-photos .cq-audio-route .cq-audio{
  background:rgba(15,23,42,.55);border-color:rgba(255,255,255,.18)}
body.play .play-main #route-hero.has-photos .cq-audio-route .cq-audio-btn{background:#fff;color:#0f172a}
body.play .play-main #route-hero.has-photos .cq-audio-route .cq-audio-time{color:#e2e8f0}

/* ==================== БЛОК НАВИГАЦИИ ВО ВСЮ ШИРИНУ (Владимир, 30.10.2026) ====================
   Серый блок с компасом — от края до края экрана, без скруглений; карта — тоже от края
   до края. Внутренние элементы держим в тех же боковых отступах, что и остальной контент. */
body.play .play-main .route-nav-card{margin-left:calc(var(--play-pad) * -1);
  margin-right:calc(var(--play-pad) * -1);border:0;border-radius:0;
  padding:14px var(--play-pad) 12px;box-shadow:none}
body.play .play-main .route-nav-card .route-nav-help{top:10px;right:calc(var(--play-pad) + 2px)}
body.play .play-main .route-nav-card .route-map-block{margin:12px calc(var(--play-pad) * -1) 0}
body.play .play-main .route-nav-card .map-frame{margin:0}
body.play .play-main .route-nav-card #map{height:240px;margin:0;border-radius:0;border-left:0;border-right:0}
body.play .play-main .route-nav-card .map-loading{border-radius:0}
body.play .play-main .route-nav-card .map-status{margin:6px 0 0;padding:0 var(--play-pad)}
body.play .play-main .route-nav-card .map-offroute-note{margin:8px var(--play-pad) 6px}
body.play .play-main .route-nav-card .route-map-tools{margin:10px 0 0;padding:0 var(--play-pad)}

/* ==================== АУДИОГИД МАРШРУТА И ВОПРОСА — ТОЛЬКО ЗНАЧОК НАУШНИКОВ ====================
   Владимир, 30.10.2026: убираем большие плееры у текста, оставляем компактный значок 🎧
   (при воспроизведении — ⏸), как в истории. */
body.play #route-audio .cq-audio,
body.play #question-audio .cq-audio{display:inline-flex;align-items:center;background:none;
  border:0;padding:0;gap:0;margin:8px 0 0}
body.play #route-audio .cq-audio-track,
body.play #route-audio .cq-audio-time,
body.play #route-audio .cq-audio-label,
body.play #question-audio .cq-audio-track,
body.play #question-audio .cq-audio-time,
body.play #question-audio .cq-audio-label{display:none}
body.play #route-audio .cq-audio-btn,
body.play #question-audio .cq-audio-btn{width:40px;height:40px;min-width:40px;padding:0;
  border-radius:50%;justify-content:center;background:#0f172a;color:#fff;border:0;
  box-shadow:0 2px 8px rgba(15,23,42,.18)}
body.play #route-audio .cq-audio.playing .cq-audio-btn,
body.play #question-audio .cq-audio.playing .cq-audio-btn{background:#0d9488}
body.play #route-audio .cq-audio-icon,
body.play #question-audio .cq-audio-icon{font-size:18px;line-height:1}
/* на фото маршрута — светлая кнопка, чтобы читалась на кадре */
body.play .play-main #route-hero.has-photos #route-audio .cq-audio{background:none;border:0;padding:0}
body.play .play-main #route-hero.has-photos #route-audio .cq-audio-btn{background:#fff;color:#0f172a;
  width:40px;height:40px;min-width:40px;border-radius:50%;justify-content:center;padding:0}

/* ==================== АУДИОГИД РЯДОМ С ТЕКСТОМ (Владимир, 30.10.2026) ====================
   Вопрос — значок наушников в правом верхнем углу фото (в строке с кнопкой «назад»);
   маршрут — рядом с «↩ К вопросу» или на его месте. */
body.play .play-main .question-head-row .head-row-right{display:flex;align-items:center;gap:8px;
  min-width:0;margin-left:8px;justify-content:flex-end}
body.play .play-main .question-head-row #mechanics-chips{min-width:0}
body.play .play-main .question-head-row #question-audio{flex:none}
body.play .play-main .question-head-row #question-audio .cq-audio,
body.play .play-main .route-title-row #route-audio .cq-audio{display:inline-flex;align-items:center;
  margin:0;padding:0;background:none;border:0;gap:0}
body.play .play-main .question-head-row #question-audio .cq-audio-track,
body.play .play-main .question-head-row #question-audio .cq-audio-time,
body.play .play-main .question-head-row #question-audio .cq-audio-label,
body.play .play-main .route-title-row #route-audio .cq-audio-track,
body.play .play-main .route-title-row #route-audio .cq-audio-time,
body.play .play-main .route-title-row #route-audio .cq-audio-label{display:none}
body.play .play-main .question-head-row #question-audio .cq-audio-btn,
body.play .play-main .route-title-row #route-audio .cq-audio-btn{width:36px;height:36px;min-width:36px;
  padding:0;border-radius:50%;justify-content:center;background:rgba(15,23,42,.66);color:#fff;border:0;
  backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(0,0,0,.28)}
body.play .play-main .question-head-row #question-audio .cq-audio.playing .cq-audio-btn,
body.play .play-main .route-title-row #route-audio .cq-audio.playing .cq-audio-btn{background:#0d9488}
body.play .play-main .question-head-row #question-audio .cq-audio-icon,
body.play .play-main .route-title-row #route-audio .cq-audio-icon{font-size:16px;line-height:1}
body.play .play-main .route-title-row #route-audio{flex:none;margin:0}
body.play .play-main #route-hero:not(.has-photos) .route-title-row #route-audio .cq-audio-btn{background:#0f172a}

/* История: верхний бар — «✅ Верно + ←» одной кнопкой, аудиогид и крупная «Далее»;
   «Далее» вернули и внизу (Владимир, 30.10.2026). */
#modal-story .story-topbar .story-back-btn{display:inline-flex;align-items:center;gap:6px;border:0;
  cursor:pointer;background:#0f172a;color:#fff;border-radius:999px;height:38px;padding:0 14px;
  font-family:inherit;font-size:14px;font-weight:700;line-height:1;flex:none}
#modal-story .modal-content.story-has-media .story-topbar .story-back-btn{background:rgba(15,23,42,.66);
  backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(0,0,0,.28)}
#modal-story .story-topbar .story-back-btn .cq-br-arrow{font-size:17px;font-weight:700}
#modal-story .story-topbar .story-back-btn .cq-br-check{color:#4ade80;font-size:15px;font-weight:800}
#modal-story .story-topbar .story-next-btn{height:46px;padding:0 24px;border-radius:999px;
  font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
#modal-story .story-scroll .story-next-btn.story-next-bottom{margin:16px 16px 8px;
  width:calc(100% - 32px);height:52px;font-size:16px}
body.observer-mode #modal-story #story-next-bottom{display:none !important}

/* Слайдер истории — тот же, что в вопросе и на маршруте: кадр от края до края,
   стрелки и миниатюры поверх фото, подпись на градиенте. */
#story-media{margin:0;position:relative}
#story-media .story-slider{border-radius:0;background:#0f172a;margin:0}
#story-media .story-slide-media{position:relative;line-height:0}
#story-media .story-media-img{display:block;width:100%;height:auto;max-height:none;object-fit:cover}
#story-media .story-media-video{display:block;width:100%;max-height:70vh;background:#000}
#story-media .photo-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4}
#story-media .photo-nav.prev{left:10px}
#story-media .photo-nav.next{right:10px}
#story-media .photo-caption{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;
  padding:26px 14px 10px;font-size:12.5px;line-height:1.45;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))}
#story-media .story-slider.has-thumbs .photo-caption{padding-bottom:104px}
#story-media .photo-caption:empty{display:none}
#story-media .story-video-tools{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;gap:8px;
  flex-wrap:wrap;padding:8px 10px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7))}
#story-thumbs{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:10px 12px 12px;
  display:flex;gap:8px;overflow-x:auto;border:0;border-radius:0;box-shadow:none;
  background:linear-gradient(180deg,rgba(2,6,23,0),rgba(2,6,23,.62))}
#story-thumbs.hidden{display:none}
#story-thumbs .photo-thumb{background:none;border:0;padding:0;border-radius:10px;flex:none;opacity:.6}
#story-thumbs .photo-thumb.active{opacity:1;transform:translateY(-2px);box-shadow:0 0 0 2px rgba(255,255,255,.95)}
#story-thumbs .photo-thumb img{display:block;width:84px;height:60px;object-fit:cover;border-radius:10px}
#story-thumbs .story-thumb-play{display:flex;align-items:center;justify-content:center;width:84px;height:60px;
  border-radius:10px;background:#0f172a;color:#fff;font-size:20px}

/* Серый блок навигации: тянется до низа экрана; белый отступ сверху — только когда
   над ним есть плашка «Вокруг»; карта внутри — выше (Владимир, 30.10.2026). */
body.play .play-main > #approach-card{display:flex;flex-direction:column;
  min-height:calc(100dvh - 128px);padding-bottom:0}
body.play .play-main #route-main-block{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
body.play .play-main .route-nav-card{flex:1 1 auto;display:flex;flex-direction:column;
  margin-top:0;margin-bottom:0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
body.play .play-main #approach-card.has-around-tile .route-nav-card{margin-top:14px}
body.play .play-main .route-nav-card .route-map-block{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
body.play .play-main .route-nav-card .map-frame{flex:1 1 auto;display:flex;flex-direction:column;min-height:240px}
body.play .play-main .route-nav-card #map{flex:1 1 auto;height:auto;min-height:240px;max-height:60vh}
@media(max-width:640px){
  body.play .play-main .route-nav-card #map{min-height:220px}
  body.play .play-main > #approach-card{min-height:calc(100dvh - 112px)}
}

/* Значок аудиогида маршрута на фото: та же высота, что у «↩ К вопросу» (36 px), светлый на кадре */
body.play .play-main #route-hero.has-photos .route-title-row #route-audio .cq-audio{
  background:none;border:0;padding:0;margin:0}
body.play .play-main #route-hero.has-photos .route-title-row #route-audio .cq-audio-btn{
  width:36px;height:36px;min-width:36px;padding:0;border-radius:50%;justify-content:center;
  background:#fff;color:#0f172a}

/* ==================== ОКНА «О МЕСТЕ» И «ВОКРУГ» КАК ИСТОРИЯ (Владимир, 30.10.2026) ====================
   Полный экран, фото-слайдер сверху (тот же, что в вопросе/маршруте/истории), кнопки поверх
   фото; «Далее» нет. У мест — своя озвучка (аудиогид). */
#modal-facts,#modal-path-pois{padding:0;align-items:stretch;justify-content:stretch;overflow:hidden}
#modal-facts .modal-content,#modal-path-pois .modal-content{max-width:none;width:100%;
  height:100dvh;max-height:100dvh;min-height:0;padding:0;border-radius:0;overflow:hidden;
  background:#fff;position:relative;display:flex;flex-direction:column}
body.dark #modal-facts .modal-content,body.dark #modal-path-pois .modal-content{background:#0f172a;color:#e2e8f0}
.cq-full-modal .full-topbar{position:relative;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:10px;background:#fff;padding:10px 14px;border-bottom:1px solid #e5e7eb}
body.dark .cq-full-modal .full-topbar{background:#0f172a;border-bottom-color:#334155}
.cq-full-modal.has-media .full-topbar{position:absolute;top:0;left:0;right:0;background:none;
  border-bottom:0;color:#fff;padding:10px 14px}
.cq-full-modal .full-topbar .story-back-btn{background:#0f172a;color:#fff}
.cq-full-modal.has-media .full-topbar .story-back-btn{background:rgba(15,23,42,.66);
  backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(0,0,0,.28)}
.cq-full-modal .full-topbar .story-back-label{font-size:13px;font-weight:700}
/* аудиогид кадра — такой же круглый значок в баре */
.cq-full-modal .full-topbar .cq-audio{background:none;border:0;padding:0;gap:0}
.cq-full-modal .full-topbar .cq-audio-track,
.cq-full-modal .full-topbar .cq-audio-time,
.cq-full-modal .full-topbar .cq-audio-label{display:none}
.cq-full-modal .full-topbar .cq-audio-btn{width:36px;height:36px;min-width:36px;padding:0;
  border-radius:50%;justify-content:center;background:rgba(15,23,42,.66);color:#fff;border:0;
  backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(0,0,0,.28)}
.cq-full-modal:not(.has-media) .full-topbar .cq-audio-btn{background:#0f172a}
.cq-full-modal .full-topbar .cq-audio.playing .cq-audio-btn{background:#0d9488}
.cq-full-modal .full-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;padding-bottom:24px}
/* фото-слайдер сверху: от края до края, стрелки и миниатюры поверх */
.cq-full-modal .full-media{position:relative;margin:0}
.cq-full-modal .full-media.hidden{display:none}
.cq-full-modal .full-slider{border-radius:0;background:#0f172a;margin:0}
.cq-full-modal .full-slide-media{position:relative;line-height:0}
.cq-full-modal .full-slide-img{display:block;width:100%;height:auto;max-height:none;object-fit:cover}
.cq-full-modal .photo-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4}
.cq-full-modal .photo-nav.prev{left:10px}
.cq-full-modal .photo-nav.next{right:10px}
.cq-full-modal .photo-caption{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;
  padding:26px 14px 10px;font-size:12.5px;line-height:1.45;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))}
.cq-full-modal .full-slider.has-thumbs .photo-caption{padding-bottom:104px}
.cq-full-modal .photo-caption:empty{display:none}
.cq-full-modal .photo-thumbs{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:10px 12px 12px;
  display:flex;gap:8px;overflow-x:auto;border:0;border-radius:0;box-shadow:none;
  background:linear-gradient(180deg,rgba(2,6,23,0),rgba(2,6,23,.62))}
.cq-full-modal .photo-thumbs.hidden{display:none}
.cq-full-modal .photo-thumb{background:none;border:0;padding:0;border-radius:10px;flex:none;opacity:.6}
.cq-full-modal .photo-thumb.active{opacity:1;transform:translateY(-2px);box-shadow:0 0 0 2px rgba(255,255,255,.95)}
.cq-full-modal .photo-thumb img{display:block;width:84px;height:60px;object-fit:cover;border-radius:10px}
/* тексты под слайдером */
.cq-full-modal .full-sub{margin:16px 16px 10px;font-size:13px;color:#666}
body.dark .cq-full-modal .full-sub{color:#94a3b8}
.cq-full-modal #facts-body,.cq-full-modal #path-pois-body{margin:0 16px}
.cq-full-modal .full-close-btn{margin:18px 16px 8px;width:calc(100% - 32px)}
.cq-full-modal .poi-card-media:empty{display:none}

/* ==================== ВЕРХНЯЯ КНОПКА ГИДА: СКОРОСТЬ + ПЛАВАЮЩИЙ ПЛЕЕР (Владимир, 30.10.2026) ====================
   1-е нажатие — гид включён (1×), 2-е — быстрее (2×), 3-е — пауза. На кнопке — значок и цифра скорости. */
.play-header #btn-audioguide{position:relative;min-width:36px}
.play-header #btn-audioguide .cq-ag-ico{font-size:17px;line-height:1}
.play-header #btn-audioguide .cq-ag-badge{position:absolute;right:-1px;bottom:-1px;
  background:#0d9488;color:#fff;font-size:8.5px;font-weight:800;line-height:1;padding:2px 3px;
  border-radius:6px;letter-spacing:0}
/* Плавающий плеер: плей/пауза, бегунок, скорость, крестик «выключить гид» */
.cq-audio-player{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px);max-width:520px;
  z-index:2100;display:flex;align-items:center;gap:10px;background:rgba(15,23,42,.94);color:#fff;
  border-radius:18px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.38);backdrop-filter:blur(8px)}
.cq-audio-player.hidden{display:none}
.cq-ap-play{width:40px;height:40px;min-width:40px;border:0;border-radius:50%;cursor:pointer;
  background:#0d9488;color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;
  justify-content:center;padding:0}
.cq-ap-body{flex:1 1 auto;min-width:0}
.cq-ap-title{font-size:11.5px;font-weight:700;color:#e2e8f0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-bottom:4px}
.cq-ap-seek{width:100%;height:4px;-webkit-appearance:none;appearance:none;border-radius:999px;
  background:rgba(255,255,255,.25);outline:none;cursor:pointer}
.cq-ap-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;
  border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.cq-ap-seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}
.cq-ap-speed{flex:none;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
  border-radius:999px;padding:0 10px;height:32px;font-size:12px;font-weight:700;cursor:pointer}
.cq-ap-close{flex:none;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:18px;line-height:1;display:flex;
  align-items:center;justify-content:center;padding:0}
/* плеер перекрывает низ экрана — освобождаем место контенту и окнам */
body.has-audio-player .play-main{padding-bottom:112px}
body.has-audio-player #modal-story .story-scroll,
body.has-audio-player .cq-full-modal .full-scroll{padding-bottom:118px}

/* ==================== БАТЧ 1 (Владимир, 31.10.2026): СЛАЙДЕРЫ, ОКНА, КАРТА, СЕРЫЙ БЛОК ==================== */
/* Вертикальное фото не растягиваем по высоте слайдера — показываем как есть */
body.play .play-main .photo-slider img.is-portrait,
body.play #story-media .story-media-img.is-portrait,
body.play .cq-full-modal .photo-slider img.is-portrait{height:auto;max-height:86vh;object-fit:contain;background:#0f172a}
body.play .play-main .photo-slider img.is-landscape{height:58vh;object-fit:cover}
body.play #story-media .story-media-img.is-landscape{height:64vh;object-fit:cover}
body.play .cq-full-modal .photo-slider img.is-landscape{height:56vh;object-fit:cover}
/* История и полноэкранные окна: градиент подписи выше — текст читается на фото */
#story-media .photo-caption,
#story-media .story-media-caption,
.cq-full-modal .photo-caption{padding:52px 16px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.78) 100%)}
/* Маршрут: затенение под текстом сильнее, фото выше */
body.play .play-main #route-hero.has-photos .route-hero-overlay{
  background:linear-gradient(180deg,rgba(2,6,23,.72) 0%,rgba(2,6,23,.45) 55%,rgba(2,6,23,.12) 100%)}
body.play .play-main #route-hero .photo-slider img{height:auto}
body.play .play-main #route-hero .photo-slider img.is-landscape{height:56vh}
/* «О месте»/«Вокруг»: слева название (без стрелок), справа аудиогид и крестик */
.cq-full-modal .full-topbar-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-full-modal .full-topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.cq-full-modal .full-close-btn-icon{width:36px;height:36px;min-width:36px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(15,23,42,.66);color:#fff;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(4px);
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.cq-full-modal:not(.has-media) .full-close-btn-icon{background:#0f172a}
.cq-full-modal.has-media .full-topbar-title{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* «Понятно» внизу — как «Далее» в истории */
.cq-full-modal .story-next-bottom{margin:18px 16px 10px;width:calc(100% - 32px);height:52px;font-size:16px}
/* Кнопки «Показать на карте»/«Проложить маршрут» — крупнее */
.cq-full-modal .poi-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cq-full-modal .poi-card-actions .btn{height:46px;min-height:46px;font-size:14px;font-weight:700;padding:0 16px;flex:1 1 150px}
/* Карта в карточке места: во всю ширину и выше; кнопка «Скрыть карту» */
.cq-full-modal .poi-card-media[data-mode="map"]{margin:0 -16px}
.cq-full-modal .poi-card-media[data-mode="map"] .cq-poi-map{width:100%;height:340px}
body.play .play-main .btn-map{height:46px;font-size:14px;padding:0 16px}
/* Серый блок: больше воздуха сверху, серый до низа, без белой полосы */
body.play .play-main{padding-bottom:0}
body.play .play-main .route-nav-card{padding-top:26px;margin-bottom:0}
body.play .play-main > #approach-card{padding-bottom:0;min-height:calc(100dvh - 96px)}
body.play .play-main .route-nav-card #map,
body.play .play-main #map{min-height:288px}
body.play .play-main .route-nav-card #map{max-height:64vh}

/* ==================== БАТЧ 2 (Владимир, 31.10.2026): ПОДСКАЗКИ-ЗНАЧКИ И ЗАГОЛОВОК ИСТОРИИ ==================== */
.hints-icons{display:flex;align-items:center;gap:8px;margin:12px 0 8px;flex-wrap:wrap}
.hints-icons.hidden{display:none}
.hint-ico{width:38px;height:38px;border-radius:50%;border:1px solid #e5e7eb;background:#f8fafc;
  font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hint-ico:hover{background:#eef2ff;border-color:#c7d2fe}
.hint-ico.last{background:#fef3c7;border-color:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,.18)}
.hint-ico.used{opacity:.45;position:relative}
.hint-ico.used::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;
  background:#ef4444;transform:rotate(-45deg);border-radius:2px}
body.dark .hint-ico{background:#1e293b;border-color:#334155}
/* Заголовок истории в верхнем баре */
#modal-story .story-topbar .story-title{flex:1 1 auto;min-width:0;margin:0 8px;font-size:14px;
  font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a}
#modal-story .modal-content.story-has-media .story-topbar .story-title{color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}


/* ==================== РАЗЛОМ И ПЕСОК (Владимир, 31.10.2026) ==================== */
/* Кадры разлома: в портрете фото умещается по границам без искажения (contain),
   в горизонтали — заполняет экран с обрезкой (cover). Оба кадра сидят в одном
   фиксированном контейнере на весь экран, поэтому при смене кадра нет скачка. */
#cqRiftScreen .mech-rift-img{object-fit:contain}
@media(orientation:landscape){
  #cqRiftScreen .mech-rift-img{object-fit:cover}
}
#cqRiftScreen .mech-rift-stage{background:#000}
/* Крестик и нижние кнопки скрыты, пока не тапнули по фото; показываются на 2 секунды */
#cqRiftScreen .mech-rift-bottom,
#cqRiftScreen .mech-rift-close{opacity:0;pointer-events:none;transition:opacity .25s ease}
#cqRiftScreen .mech-rift-stage.show-ui ~ .mech-rift-bottom,
#cqRiftScreen .mech-rift-stage.show-ui ~ .mech-rift-close{opacity:1;pointer-events:auto}
/* Текст с описанием — только в вертикальной ориентации */
@media(orientation:landscape){
  #cqRiftScreen .mech-rift-bottom{display:none}
}
/* «Подуть»: новый эффект — песок (для Дубая) */
.mech-blow2.effect-sand .mech-blow-film{background:rgba(217,169,74,.30)}


/* ==================== ПЛАШКИ МЕТРИК НА ПЕРВОМ ЭКРАНЕ (Владимир, 31.10.2026) ====================
   Вернули «приподнятые» плашки и отклик при наведении/тапе. */
body.style-v2 .v2-sticker{transform:translateY(-2px) rotate(-3deg);
  transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 10px 22px rgba(17,24,39,.14)}
body.style-v2 .v2-s1{transform:translateY(-2px) rotate(-3deg)}
body.style-v2 .v2-s2{transform:translateY(-2px) rotate(2deg)}
body.style-v2 .v2-s3{transform:translateY(-2px) rotate(-1.5deg)}
body.style-v2 .v2-s4{transform:translateY(-2px) rotate(1.5deg)}
body.style-v2 .v2-sticker:hover,body.style-v2 .v2-sticker:focus-visible{
  transform:translateY(-6px) rotate(0deg) scale(1.03);
  box-shadow:0 16px 30px rgba(17,24,39,.2)}
body.style-v2 .v2-sticker:active{transform:translateY(-1px) scale(.99)}
@media(max-width:640px){
  /* В мобилке плашки тоже приподняты и с наклоном (Владимир, 31.10.2026) */
  body.style-v2 .v2-sticker{transform:translateY(-2px) rotate(-2deg)}
  body.style-v2 .v2-s1{transform:translateY(-2px) rotate(-2.5deg)}
  body.style-v2 .v2-s2{transform:translateY(-2px) rotate(1.8deg)}
  body.style-v2 .v2-s3{transform:translateY(-2px) rotate(-1.3deg)}
  body.style-v2 .v2-s4{transform:translateY(-2px) rotate(1.3deg)}
  body.style-v2 .v2-sticker:hover,body.style-v2 .v2-sticker:focus-visible,
  body.style-v2 .v2-sticker:active{transform:translateY(-5px) rotate(0deg) scale(1.02)}
}

/* ==================== ШАПКА ИГРЫ НЕ УЕЗЖАЕТ ПРИ СКРОЛЛЕ (Владимир, 31.10.2026) ====================
   Шапка с крестиком и аудиогидом фиксируется сверху; панель с часами липнет под ней.
   Высоту шапки считает JS и кладёт в --play-header-h, чтобы не было белой полосы. */
/* Плавающей остаётся ТОЛЬКО панель с временем/монетами; шапка с крестиком и гидом
   уходит вверх при скролле (Владимир, 31.10.2026, вариант 2). */
body.play{padding-top:0}
body.play .play-header{position:relative;top:auto;z-index:90}
body.play .subbar{position:sticky;top:0;z-index:110}

/* Подсказки — сразу под вопросом, прижаты вправо (Владимир, 31.10.2026) */
body.play .hints-icons{justify-content:flex-end;margin:6px 0 10px}


/* ==================== ПРАВКИ 31.10 (вечер): слайдеры, градиент, плеер, карта, ЛК ==================== */
/* Слайдеры статичные: фото заполняет ширину и обрезается по высоте, без искажений */
body.play .play-main .photo-slider{height:46vh;min-height:220px;max-height:64vh}
body.play .play-main .photo-slider img,
body.play .play-main #route-hero .photo-slider img,
body.play #story-media .photo-slider img,
body.play .cq-full-modal .photo-slider img{width:100%;height:100%;object-fit:cover;object-position:center}
body.play #story-media .photo-slider{height:56vh}
body.play .cq-full-modal .photo-slider{height:46vh}
/* Маршрут: верхний градиент без заметной полосы — растворяем плавно */
body.play .play-main #route-hero.has-photos .route-hero-overlay{
  background:linear-gradient(180deg,rgba(2,6,23,.72) 0%,rgba(2,6,23,.55) 28%,rgba(2,6,23,.28) 62%,rgba(2,6,23,.08) 86%,rgba(2,6,23,0) 100%)}
/* Плавающий плеер на маршруте — выше панели расстояния */
body.play.has-route-view .cq-audio-player{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
/* Больше воздуха между линией прогресса и кнопками навигации */
body.play .play-main .route-nav-progress{margin-bottom:16px}
body.play .play-main .route-nav-actions{gap:12px}
/* Ссылка «в своём ЛК» на финише — белая, читается на тёмном */
body.play .cq-finish-text a,.cq-finish-text a{color:#fff;text-decoration:underline;font-weight:700}
/* Заголовок истории — в текстовом блоке, слева, крупно */
#story-title{margin:16px 16px 8px;font-size:20px;font-weight:800;line-height:1.25;color:#0f172a}
body.dark #story-title{color:#e2e8f0}
#modal-story .story-topbar .story-title{display:none}
/* Карта в «Вокруг» — от края до края и выше */
.cq-full-modal .poi-card-media[data-mode="map"]{margin:0 -16px}
.cq-full-modal .poi-card-media[data-mode="map"] .cq-poi-map{width:100%;height:400px}

/* Узкие/вертикальные фото — растягиваем по ширине и обрезаем по высоте, без чёрных полос
   (Владимир, 31.10.2026). Перебиваем прежние правила с object-fit:contain. */
body.play .play-main .photo-slider img.is-portrait,
body.play #story-media .story-media-img.is-portrait,
body.play .cq-full-modal .photo-slider img.is-portrait,
body.play .play-main .photo-slider img.is-landscape,
body.play #story-media .story-media-img.is-landscape,
body.play .cq-full-modal .photo-slider img.is-landscape{
  width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;background:transparent}
body.play .play-main #route-hero .photo-slider img,
body.play .play-main #route-hero .photo-slider img.is-portrait,
body.play .play-main #route-hero .photo-slider img.is-landscape{width:100%;height:100%;max-height:none;object-fit:cover}

/* ==================== ФОТО ЗАПОЛНЯЕТ КАДР ПОЛНОСТЬЮ (Владимир, 31.10.2026) ====================
   Никаких чёрных полос снизу/по краям: фото всегда растянуто на весь кадр слайдера
   по ширине и высоте (с обрезкой), а большой просмотр заполняет экран. */
body.play .play-main .photo-slider img,
body.play .play-main #route-hero .photo-slider img,
body.play #story-media .photo-slider .story-media-img,
body.play .cq-full-modal .photo-slider img{
  width:100%!important;height:100%!important;max-height:none!important;
  min-height:100%!important;object-fit:cover!important;object-position:center!important;background:transparent!important}
body.play #story-media .photo-slider,body.play .cq-full-modal .photo-slider{background:#0f172a}
/* Большой просмотр: фото заполняет экран целиком, без чёрных полей */
.cq-lightbox .cq-lb-img,
.cq-lightbox.cq-lb-zoomed .cq-lb-img{
  width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;
  object-fit:cover!important;border-radius:0!important;background:#0b1020}

/* ==================== РАЗЛОМ ВРЕМЕНИ: ОДИН ЭКРАН БЕЗ СКАЧКОВ + PINCH/PAN ====================
   Владимир, 31.10.2026: кадр «тогда» и кадр «сейчас» живут в одном фиксированном
   контейнере на весь экран (100dvh) — при перетекании и смене кадра геометрия не прыгает.
   Портрет: фото умещается по границам (contain), горизонталь: заполняет с обрезкой (cover).
   Пальцами можно приблизить кадр (1…4) и подвигать увеличенное фото; двойной тап —
   сброс/приближение. Нижняя панель наложена поверх кадра и не отнимает у него высоту. */
#cqRiftScreen{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
#cqRiftScreen .mech-rift-box{position:fixed;inset:0;width:100%;height:100%;height:100dvh;
  max-width:none;border-radius:0;display:block;overflow:hidden;background:#000}
#cqRiftScreen .mech-rift-stage{position:absolute;inset:0;width:100%;height:100%;flex:none;
  min-height:0;overflow:hidden;background:#000;touch-action:none;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* Слой зума: оба кадра трансформируются вместе — смена кадра геометрию не меняет */
#cqRiftScreen .mech-rift-zoom{position:absolute;inset:0;width:100%;height:100%;
  transform-origin:50% 50%;will-change:transform}
#cqRiftScreen .mech-rift-zoom .mech-rift-img{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}
/* Служебные слои не перехватывают тапы по фото */
#cqRiftScreen .mech-rift-badge,
#cqRiftScreen .mech-rift-loading,
#cqRiftScreen .mech-rift-glow,
#cqRiftScreen .mech-rift-particles{pointer-events:none}
/* Нижняя панель лежит поверх кадра: при появлении по тапу фото не сдвигается */
#cqRiftScreen .mech-rift-bottom{position:absolute;left:0;right:0;bottom:0;z-index:5;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.86) 100%);
  padding:18px 14px calc(14px + env(safe-area-inset-bottom,0px))}
/* «Закрыть» — по центру снизу, текст по центру */
#cqRiftScreen .mech-rift-actions{display:flex;justify-content:center;align-items:center}
#cqRiftScreen .mech-rift-actions .btn{flex:0 1 260px;min-width:0;margin:0 auto;
  justify-content:center;text-align:center;color:#fff;border-color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.12)}
#cqRiftScreen .mech-rift-actions .btn:hover,
#cqRiftScreen .mech-rift-actions .btn:active{background:rgba(255,255,255,.22);color:#fff}
/* Крестик: сам «×» выровнен по центру кружка */
#cqRiftScreen .mech-rift-close{display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;font-size:26px;touch-action:manipulation}
/* «Продолжить без поворота» в оверлее поворота — белый текст и белая рамка */
#cqRiftScreen .mech-rift-rotate .btn{color:#fff;border:1px solid #fff;background:transparent;
  justify-content:center;text-align:center;min-height:46px;padding:10px 22px;font-weight:700}
#cqRiftScreen .mech-rift-rotate .btn:hover,
#cqRiftScreen .mech-rift-rotate .btn:active{background:rgba(255,255,255,.16);color:#fff}
/* Кнопки не должны участвовать в жестах зума */
#cqRiftScreen .mech-rift-bottom .btn,
#cqRiftScreen .mech-rift-close,
#cqRiftScreen .mech-rift-rotate .btn{touch-action:manipulation;cursor:pointer}

/* ==================== ФИКС: длинное фото не должно растягивать окно фактов/слайдер (Владимир, 31.10.2026) ====================
   Раньше высокое фото распирало контейнер: подпись и миниатюры оказывались в середине,
   а фото продолжалось ниже. Теперь у всех полноэкранных окон и слайдеров фиксированная
   высота кадра и overflow:hidden — фото всегда обрезается по кадру. */
body.play .cq-full-modal .full-media{position:relative;height:46vh;max-height:46vh;overflow:hidden}
body.play .cq-full-modal .full-media .photo-slider,
body.play .cq-full-modal .full-media .full-slider{position:absolute;inset:0;width:100%;height:100%!important;
  min-height:0!important;max-height:none!important;overflow:hidden;border-radius:0}
body.play .cq-full-modal .full-slide-media{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;line-height:0}
body.play .cq-full-modal .full-slide-media img{display:block;width:100%!important;height:100%!important;
  max-height:none!important;object-fit:cover!important;object-position:center!important}
body.play .cq-full-modal .photo-caption,
body.play .cq-full-modal .photo-thumbs{position:absolute;left:0;right:0;bottom:0}
body.play #story-media{position:relative;height:56vh;max-height:56vh;overflow:hidden}
body.play #story-media .photo-slider{position:absolute;inset:0;height:100%!important;overflow:hidden}
body.play #story-media .story-slide-media{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
body.play #story-media .story-slide-media img{width:100%!important;height:100%!important;object-fit:cover!important}
body.play #story-media .photo-caption,body.play #story-media .photo-thumbs{position:absolute;left:0;right:0;bottom:0}
/* Все обычные слайдеры игры — строгая высота кадра без переполнения */
body.play .play-main .photo-slider{height:46vh;max-height:64vh;min-height:220px;overflow:hidden;position:relative}
body.play .play-main .photo-slider img{display:block;width:100%!important;height:100%!important;object-fit:cover!important}

/* ==================== БОЛЬШОЙ ПРОСМОТР: оригинальный формат + зум пальцами (Владимир, 31.10.2026) ====================
   Убираем принудительное заполнение экрана: фото показывается целиком (contain) в своём
   оригинальном формате, увеличивать можно пальцами (зум/перемещение уже реализованы в lightbox.js). */
.cq-lightbox .cq-lb-img,
.cq-lightbox.cq-lb-zoomed .cq-lb-img{
  width:auto!important;height:auto!important;max-width:96vw!important;max-height:82vh!important;
  object-fit:contain!important;border-radius:10px!important;background:#0b1020}

/* ==================== ГЛАВНАЯ: БЛОК ОТЗЫВОВ — ФИКСИРОВАННЫЙ РАЗМЕР (Владимир, 31.10.2026) ====================
   Карточка отзыва не должна менять высоту из-за фото/длины текста: размер фиксированный,
   а фото/коллаж масштабируются и обрезаются под этот блок (cover), а не наоборот. */
@media(min-width:721px){
  body.style-v2 .cq-reviews-track>.cq-rev-card{height:300px;min-height:0;max-height:300px;overflow:hidden}
  body.style-v2 .cq-rev-card .cq-review-media,
  body.style-v2 .cq-rev-card .cq-review-photos{min-height:0;height:100%;max-height:300px;overflow:hidden}
  body.style-v2 .cq-rev-card .cq-rev-body{min-height:0;max-height:300px;overflow:hidden}
}
body.style-v2 .cq-rev-card .cq-review-media img,
body.style-v2 .cq-rev-card .cq-review-photo,
body.style-v2 .cq-rev-card .cq-review-video,
body.style-v2 .cq-rev-card .cq-review-video-poster,
body.style-v2 .cq-rev-card .cq-review-media.placeholder img{
  width:100%;height:100%;object-fit:cover!important;object-position:center!important}
@media(max-width:720px){
  body.style-v2 .cq-reviews-track>.cq-rev-card{height:auto;max-height:none}
  body.style-v2 .cq-rev-card .cq-review-media{aspect-ratio:16/9}
  body.style-v2 .cq-rev-body{overflow:hidden}
}

/* ==================== АДМИНКА: ПРЕВЬЮ НАЛОЖЕНИЯ ТЕКСТА/ЛОГО НА ФОТО (Владимир, 31.10.2026) ====================
   Два прямоугольника рядом с полями фото-механики: вертикальный 9:16 и горизонтальный 16:9.
   Фон — простая заглушка-градиент; текст и значок логотипа ставит JS
   (`cqMechPhotoOverlay` в admin-mechanics.js) по выбранным позиции/повороту. */
.mech-photo-overlay-previews{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;margin:8px 0 2px}
.mech-photo-overlay-preview{position:relative;overflow:hidden;border-radius:10px;border:1px solid #cbd5e1;
  background:linear-gradient(160deg,#93c5fd 0%,#c7d2fe 42%,#fbcfe8 100%);flex:0 0 auto}
.mech-photo-overlay-preview-portrait{width:104px;aspect-ratio:9/16}
.mech-photo-overlay-preview-landscape{width:190px;aspect-ratio:16/9}
.mech-photo-overlay-preview-label{position:absolute;top:4px;left:6px;font-size:9px;font-weight:700;letter-spacing:.4px;
  color:rgba(15,23,42,.55);text-transform:uppercase;pointer-events:none}
.mech-photo-overlay-preview-text{position:absolute;max-width:86%;font-size:12px;font-weight:800;line-height:1.2;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55);overflow-wrap:anywhere;white-space:pre-line;pointer-events:none}
.mech-photo-overlay-preview-portrait .mech-photo-overlay-preview-text{font-size:10.5px}
.mech-photo-overlay-preview-logo{position:absolute;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.85);padding:1px;box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none}
.mech-photo-overlay-preview-portrait .mech-photo-overlay-preview-logo{width:16px;height:16px}
body.dark .mech-photo-overlay-preview-label{color:rgba(241,245,249,.7)}

/* ==================== КАБИНЕТ: «МОИ ФОТО» — ФОТО БЕЗ РАЗРЕШЕНИЯ НА ПУБЛИКАЦИЮ (Владимир, 31.10.2026) ====================
   Кадр сохраняется в ЛК, но не публикуется: короткая подсветка и кнопка «Разрешить публикацию»,
   по клику — компактное подтверждение «Мне 18+ и я разрешаю публикацию». */
.my-photo-unpublished{border:1.5px dashed #f59e0b;background:#fffdf5}
.my-photo-publish-note{display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  background:#fffbeb;border:1px solid #fcd34d;border-radius:10px;padding:6px 8px;margin-top:2px;
  font-size:12px;line-height:1.35;color:#92400e}
.my-photo-publish-note .btn{width:100%;justify-content:center}
.my-photo-badge.is-unpublished{background:#fef3c7;color:#92400e}
body.dark .my-photo-unpublished{background:#1e293b;border-color:#b45309}
body.dark .my-photo-publish-note{background:#422006;border-color:#92400e;color:#fde68a}
body.dark .my-photo-publish-note .btn{color:#fde68a;border-color:rgba(253,230,138,.5)}



/* ==================== «О МЕСТЕ»/«ВОКРУГ»: РОВНО ОДИН СКРОЛЛ + ГРАДИЕНТ НА ПАНЕЛИ (Владимир, 01.11.2026) ====================
   Скроллится ТОЛЬКО окно целиком (`.modal-content`): фото, подпись, текст и карточки едут
   вместе, верхняя панель липнет сверху. У вложенных обёрток скролла быть не должно — иначе
   получалось два независимых скролла (внешний у окна и внутренний у контента). Высоту и
   overflow у контента принудительно обнуляем, чтобы никакое прежнее правило не вернуло
   второй скролл. Страницу под окном блокируем и на уровне html (иначе body fixed всё равно
   оставлял прокрутку документа). */
html.modal-open{height:100%;overflow:hidden;overscroll-behavior:none}
body.play #modal-facts .modal-content,
body.play #modal-path-pois .modal-content{display:block;height:100dvh;max-height:100dvh;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
body.play #modal-facts .full-scroll,
body.play #modal-path-pois .full-scroll{display:block;flex:none;height:auto;max-height:none;
  min-height:0;overflow:visible!important;overscroll-behavior:auto;padding-bottom:28px}
/* пока внизу виден плавающий плеер гида — не закрываем им кнопку «Понятно» */
body.has-audio-player #modal-facts .full-scroll,
body.has-audio-player #modal-path-pois .full-scroll{padding-bottom:118px}
/* Верхняя панель: липнет внутри единственного скролла. Без фото — сплошная тёмная (на белом
   фоне текст читается). С фото — полупрозрачный градиент сверху вниз: фото просвечивает,
   кнопки и заголовок читаются за счёт тени; панель лежит поверх кадра, как в истории. */
body.play #modal-facts .full-topbar,
body.play #modal-path-pois .full-topbar{position:sticky;top:0;z-index:50;background:#0f172a;
  border-bottom:0;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
body.play #modal-facts .cq-full-modal.has-media .full-topbar,
body.play #modal-path-pois .cq-full-modal.has-media .full-topbar{position:sticky;top:0;
  background:rgba(15,23,42,.58);border-bottom:0;color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.play #modal-facts .full-topbar .full-topbar-title,
body.play #modal-path-pois .full-topbar .full-topbar-title{color:#fff}
/* Подложка не должна скроллиться внутри: кадр фото — рамка, а не ещё один скролл. */
body.play #modal-facts .full-media,
body.play #modal-path-pois .full-media{overflow:hidden}


/* ==================== КАРТОЧКА КВЕСТА В МОБИЛКЕ: ФОТО ОТ КРАЯ ДО КРАЯ (Владимир, 31.10.2026) ==================== */
@media(max-width:900px){
  /* Фото квеста в мобилке — во всю ширину и БЕЗ скруглений по краям (Владимир, 31.10.2026) */
  body .quest-main-col .slider,
  body.style-v2 .quest-main-col .slider{
    width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-radius:0!important;border:0!important;box-shadow:none!important;
    aspect-ratio:3/2;margin-bottom:18px;overflow:hidden}
  body .quest-main-col,body .quest-main-col .slider-track,
  body .quest-main-col .slider-slide{border-radius:0!important}
  .quest-main-col .slider-btn.prev{left:8px}
  .quest-main-col .slider-btn.next{right:8px}
  .quest-main-col .slider-dots{bottom:10px}
}


/* ==================== КАРТА КВЕСТА В АДМИНКЕ: БЛОК ОПИСАНИЯ ТОЧКИ СВОРАЧИВАЕТСЯ (Владимир, 31.10.2026) ==================== */
.rm-info-card{padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;text-align:left}
.rm-info-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.rm-info-toggle{flex:none}
.rm-info-body{max-height:46vh;overflow:auto;margin-top:2px}
.rm-info-card.is-collapsed .rm-info-body{display:none}
.rm-info-card.is-collapsed{max-height:none}

/* ==================== МАРШРУТ, ВОЛНА 2: БЛОК НАВИГАЦИИ СВЕРХУ, «ВОКРУГ» ПОД НИМ, ФОТО ВНИЗУ (Владимир, 02.11.2026) ====================
   Заказчик (дословно): «блок навигации поднимем на самый верх … заголовок и все кнопки что
   есть вверху на фото … вопросик в ряд с кнопками, „я на точке“ — справа … описание маршрута
   под эти кнопки, всё это в блоке навигации … „Вокруг“ под блоком навигации … карта также
   открывается под кнопкой, смещая весь контент под свой блок … слайдер в самом низу, просто
   слайдер». Здесь это и собрано: карточка навигации — первый блок экрана, карта открывается
   в потоке прямо под кнопкой (не модалка), фото-слайдер — последний блок экрана.
   Поздние правила — чтобы перебить прежнюю вёрстку «серый блок до низа с картой на flex». */
body.play .play-main > #approach-card{display:block;min-height:0;padding-bottom:0}
body.play .play-main #route-main-block{display:block;flex:none;min-height:0}

/* 1. Карточка навигации: тёплая подложка, отступы, скругление — самый верх экрана маршрута */
body.play .play-main .route-nav-card{display:block;flex:none;position:relative;
  margin:12px 0 0;padding:14px 14px 16px;border:1px solid #e7e1d4;border-radius:18px;
  background:#f7f5ef;box-shadow:0 8px 24px rgba(15,23,42,.06)}
body.dark.play .play-main .route-nav-card{background:#111827;border-color:#334155;box-shadow:none}

/* 2. Заголовок маршрута (переехал с фото) и описание — описание под рядом кнопок */
body.play .play-main .route-nav-card .approach-title{font-size:20px;font-weight:800;
  line-height:1.25;letter-spacing:-.01em;margin:0 0 10px;color:#0f172a;overflow-wrap:anywhere}
body.dark.play .play-main .route-nav-card .approach-title{color:#f1f5f9}
body.play .play-main .route-nav-card .approach-text{font-size:14.5px;line-height:1.55;
  color:#334155;margin:0 0 12px;overflow-wrap:anywhere}
body.dark.play .play-main .route-nav-card .approach-text{color:#cbd5e1}

/* 3. Заголовок маршрута и кнопки — ОДНОЙ строкой (Владимир, 01.11.2026): заголовок
      переносится так же, как заголовки на фото в вопросе (flex: длинный текст уходит на
      новую строку раньше и кнопки не перекрывает, размер шрифта тот же). Справа от
      заголовка — аудиогид маршрута, «?» (о компасе) и «↩ К вопросу» — она всегда самая
      правая (порядок задан и в DOM, и через order). Описание маршрута — под этой строкой. */
body.play .play-main .route-nav-head{display:flex;align-items:center;gap:10px;
  margin:0 0 12px;min-height:40px}
body.play .play-main .route-nav-head .approach-title{flex:1 1 auto;min-width:0;margin:0;
  display:flex;align-items:center;overflow-wrap:anywhere}
body.play .play-main .route-nav-buttons{display:flex;align-items:center;gap:8px;flex:none;
  flex-wrap:nowrap;margin:0}
body.play .play-main .route-nav-buttons #route-audio{flex:none;order:1;margin:0}
body.play .play-main .route-nav-buttons #route-audio .cq-audio,
body.play .play-main .route-nav-buttons #route-audio .cq-audio-route{margin:0}
body.play .play-main .route-nav-buttons #route-audio .cq-audio-btn{width:36px;height:36px;min-width:36px}
body.play .play-main .route-nav-buttons .route-nav-help{position:static;top:auto;right:auto;flex:none;
  order:2;width:36px;height:36px;min-width:36px;padding:0;border-radius:50%;border:1px solid #cbd5e1;
  background:#fff;color:#475569;font-family:inherit;font-size:15px;font-weight:800;line-height:1;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(15,23,42,.06)}
body.play .play-main .route-nav-buttons .route-nav-help:hover{background:#f1ece0}
body.dark.play .play-main .route-nav-buttons .route-nav-help{background:#1e293b;border-color:#334155;color:#cbd5e1}
/* «↩ К вопросу» — последняя (самая правая) в строке заголовка */
body.play .play-main .route-nav-buttons #btn-back-question{flex:none;order:3;height:36px;padding:0 12px;
  display:inline-flex;align-items:center;border-radius:999px;white-space:nowrap}
body.dark.play .play-main .route-nav-buttons #btn-back-question{background:#1e1b4b;color:#c7d2fe;
  border-color:#3730a3}

/* 4. Карта — в потоке, прямо под кнопкой «Показать карту»: открытие сдвигает контент ниже */
body.play .play-main .route-nav-card .route-map-block{margin:12px 0 0;display:block;flex:none;min-height:0}
body.play .play-main .route-nav-card .map-frame{display:block;flex:none;min-height:0;margin:0}
body.play .play-main .route-nav-card .map-loading{border-radius:14px}
body.play .play-main .route-nav-card .map-status{margin:6px 0 0;padding:0}
body.play .play-main .route-nav-card .map-offroute-note{margin:8px 0 6px}
body.play .play-main .route-nav-card .route-map-tools{margin:0;padding:0}
body.play .play-main .route-nav-card #map{height:min(48vh,380px);min-height:240px;max-height:none;
  margin:0;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
body.dark.play .play-main .route-nav-card #map{border-color:#334155}

/* Прокрутка к навигации/карте из плашки расстояния не должна прятать верх под липкой
   панелью с часами и монетами (она в игре sticky top:0). */
body.play .play-main .route-nav-card,
body.play .play-main .route-map-block{scroll-margin-top:56px}

/* 5. Фото-слайдер — последний блок экрана маршрута; просто слайдер, без оверлея с текстом */
body.play .play-main #route-hero{margin:16px calc(var(--play-pad) * -1) 0;padding:0}
body.play .play-main #route-hero #route-photos{margin:0}
body.play .play-main #route-hero .route-hero-overlay{display:none}
body.play .play-main #route-hero .photo-slider{height:min(46vh,420px);min-height:220px}

@media(max-width:640px){
  body.play .play-main .route-nav-card{margin-top:10px;padding:12px 12px 14px;border-radius:16px}
  body.play .play-main .route-nav-card .approach-title{font-size:18px}
  body.play .play-main .route-nav-card .approach-text{font-size:14px}
  body.play .play-main .route-nav-buttons{gap:6px}
  body.play .play-main .route-nav-card #map{height:min(44vh,320px);min-height:220px}
}

/* Плавающий плеер гида (внизу экрана) не должен накрывать фото-слайдер: он теперь
   последний блок экрана. Пока плеер виден — даём карточке нижний отступ под него. */
body.has-audio-player .play-main > #approach-card{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}

/* ==================== «К ТОЧКЕ» И «ПОСТРОИТЬ МАРШРУТ» — РОВНЫЕ КНОПКИ, «Я НА ТОЧКЕ» У КАРТЫ (Владимир, 01.11.2026) ====================
   Заказчик: кнопки под картой «рваные» по ширине — сделать ровными, текст по центру, обе
   на всю ширину контейнера равными долями; на узком экране, если не влезают в одну строку, —
   две равные строки. «📍 Я на точке» вернулась из верхнего ряда сюда, к «К точке» и
   «Построить маршрут»: занимает отдельную строку во всю ширину. */
body.play .play-main .route-nav-card .route-map-tools{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch;
  margin:10px 0 0;padding:0}
body.play .play-main .route-nav-card .route-map-tools .btn-map{width:100%;min-width:0;margin:0;
  height:46px;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:0 10px;font-size:13.5px;font-weight:600;line-height:1.2;white-space:normal}
body.play .play-main .route-nav-card .route-map-tools #btn-map-center.btn-map,
body.play .play-main .route-nav-card .route-map-tools #btn-route.btn-map{margin:0}
/* «Я на точке» — тёмная пилюля на всю ширину своей строки (как была в верхнем ряду) */
body.play .play-main .route-nav-card .route-map-tools #btn-arrived{grid-column:1/-1;width:100%;
  min-width:0;margin:0;height:46px;padding:0 14px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#0f172a;color:#fff;border:1px solid #0f172a;font-size:13.5px;font-weight:700;
  white-space:nowrap}
body.play .play-main .route-nav-card .route-map-tools #btn-arrived:hover{background:#1e293b;
  border-color:#1e293b}
body.dark.play .play-main .route-nav-card .route-map-tools #btn-arrived{background:#f1f5f9;
  color:#0f172a;border-color:#f1f5f9}
@media(max-width:340px){
  /* совсем узкий экран: «К точке» и «Построить маршрут» — двумя равными строками */
  body.play .play-main .route-nav-card .route-map-tools{grid-template-columns:1fr}
}
@media(max-width:380px){
  body.play .play-main .route-nav-card .route-nav-buttons #btn-back-question{font-size:11px;padding:0 9px}
}


/* ==================== МАРШРУТ: БЛОК НАВИГАЦИИ ВО ВСЮ ШИРИНУ, БЕЗ БЕЛОЙ ПОЛОСЫ СВЕРХУ (Владимир, 01.11.2026) ==================== */
body.has-route-view .play-main > #approach-card{
  background:transparent;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
body.has-route-view .route-nav-card{
  width:100%;max-width:none;
  margin:0;
  border-radius:0;border-left:0;border-right:0;border-top:0;
  padding:14px 16px;background:#f7f5ef;box-shadow:none}
body.dark.has-route-view .route-nav-card{background:#111827;border-color:#334155;border-radius:0}
@media(max-width:640px){
  body.has-route-view .route-nav-card{padding:12px 14px}
}


/* ==================== «Я НА ТОЧКЕ» РЯДОМ С «ПОКАЗАТЬ КАРТУ», ТОЙ ЖЕ ВЫСОТЫ (Владимир, 01.11.2026) ==================== */
body.play .play-main .route-nav-actions{display:flex;align-items:stretch;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}
body.play .play-main .route-nav-actions .nav-pill,
body.play .play-main .route-nav-actions .route-arrived-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;line-height:1;
  border:1px solid #cbd5e1;background:#fff;color:#111;white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,.06)}
body.play .play-main .route-nav-actions .route-arrived-btn{background:#111;color:#fff;border-color:#111}
body.play .play-main .route-nav-actions .route-arrived-btn:hover{background:#1e293b;border-color:#1e293b;color:#fff}
body.dark.play .play-main .route-nav-actions .route-arrived-btn{background:#f1f5f9;color:#0f172a;border-color:#f1f5f9}
body.dark.play .play-main .route-nav-actions .route-arrived-btn:hover{background:#e2e8f0;color:#0f172a}
/* Старое правило для кнопки внутри инструментов карты больше не нужно */
body.play .play-main .route-nav-card .route-map-tools #btn-arrived{grid-column:auto;width:auto}

/* ==================== МАРШРУТ: БЛОК НАВИГАЦИИ ПРИКЛЕЕН К ВЕРХНЕМУ БАРУ, БЕЗ СКРУГЛЕНИЙ (Владимир, 01.11.2026) ====================
   Убираем зазор/полосу другого цвета между верхним баром (время/монеты) и блоком навигации,
   скругления тоже не нужны. Внутренние отступы блока сохраняем как были. */
body.play.has-route-view .play-main{padding-top:0}
body.play.has-route-view .play-main > #approach-card{background:transparent;border:0;border-radius:0;margin:0;padding:0}
body.play.has-route-view .play-main > #approach-card .route-nav-card{
  margin-top:0;margin-bottom:0;border-radius:0;border-top:0;border-left:0;border-right:0;
  padding:12px 14px 14px;background:#f7f5ef;box-shadow:none}
body.dark.play.has-route-view .play-main > #approach-card .route-nav-card{
  background:#111827;border-color:#334155;border-radius:0}
@media(max-width:640px){
  body.play.has-route-view .play-main > #approach-card .route-nav-card{padding:12px 14px 14px}
}


/* Маршрут: никакого горизонтального переполнения (белая полоса справа при скролле,
   Владимир, 01.11.2026). */
body.has-route-view{overflow-x:hidden}
body.play.has-route-view .play-main{overflow-x:clip}


/* ==================== МАРШРУТ: «ВОКРУГ» В НАВИГАЦИИ — БЕЗ СКРУГЛЕНИЙ, СКЛЕЕН С НАВИГАЦИЕЙ И СЛАЙДЕРОМ (Владимир, 01.11.2026) ====================
   Убираем белые полосы: блок «Вокруг» идёт встык к блоку навигации сверху и к слайдеру снизу,
   без скруглений и боковых отступов. Текст по центру, картинка-иконка — рядом с текстом
   слева, крупнее (по ширине текста), а не в углу. */
body.has-route-view #route-main-block{
  margin:0;padding:0 14px 12px;background:#f7f5ef;border:0;border-radius:0}
body.dark.has-route-view #route-main-block{background:#111827}
body.has-route-view #route-main-block #route-text-block{margin:0;padding:0}
body.has-route-view #info-tiles-approach{
  margin:0;padding:0;display:block;background:transparent;border:0;border-radius:0}
body.has-route-view #info-tiles-approach .cq-tile{
  width:100%;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 10px;text-align:center;padding:12px 4px;margin:0;
  border:0;border-radius:0;box-shadow:none;background:transparent}
body.has-route-view #info-tiles-approach .cq-tile:hover{box-shadow:none;transform:none;background:rgba(0,0,0,.03)}
body.has-route-view #info-tiles-approach .cq-tile-icon{
  position:static;order:-1;font-size:26px;line-height:1;opacity:1;flex:none}
body.has-route-view #info-tiles-approach .cq-tile-tag{order:0;font-size:10px}
body.has-route-view #info-tiles-approach .cq-tile-meta{order:1;font-size:13px}
body.has-route-view #info-tiles-approach .cq-tile-title{order:0;padding-right:0}
body.dark.has-route-view #info-tiles-approach .cq-tile{background:transparent;border:0;color:#e2e8f0}
/* Слайдер снизу — встык, без белой полосы между блоками */
body.has-route-view #route-photos.route-photo-slider{
  margin:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;
  background:#f7f5ef}
body.dark.has-route-view #route-photos.route-photo-slider{background:#111827}


/* ==================== МАРШРУТ: «ВОКРУГ» — АККУРАТНАЯ СТРОКА, БЕЗ БЕЛЫХ ПОЛОС (Владимир, 02.11.2026) ====================
   Прошлая сессия доклеила блок «Вокруг» к навигации, но между ним и слайдером оставалась
   белая полоса (margin-top 16px у #route-hero), а строка «Вокруг» выглядела рвано: иконка,
   тег и счётчик вставали вразнобой по центру. Теперь это аккуратная строка-кнопка во всю
   ширину — иконка в кружке слева, «ВОКРУГ» и «N мест рядом» рядом, шеврон справа; все блоки
   маршрута лежат на одном тёплом фоне, без зазоров, рамок и скруглений. */
body.has-route-view,
body.has-route-view .play-main,
body.has-route-view .play-main > #approach-card{background:#f7f5ef}
body.dark.has-route-view,
body.dark.has-route-view .play-main,
body.dark.has-route-view .play-main > #approach-card{background:#111827}
body.has-route-view #route-main-block{padding:0 14px 10px;background:transparent}
body.dark.has-route-view #route-main-block{background:transparent}
body.has-route-view #route-main-block #route-text-block{margin:0;padding:0}
/* Убираем тонкую полосу (border-bottom) под блоком навигации — над кнопкой «Вокруг»
   не должно быть линии/зазора (Владимир, 02.11.2026). */
body.has-route-view .route-nav-card,
body.play.has-route-view .play-main > #approach-card .route-nav-card{
  border:0!important;box-shadow:none!important}
body.has-route-view #info-tiles-approach{
  display:block;margin:0;padding:0;background:transparent;border:0;border-radius:0}
/* «Вокруг» — отдельная аккуратная кнопка между блоком навигации и фото:
   белая карточка со скруглением и тенью; «Вокруг» и «N мест рядом» — в одну строку
   (Владимир, 02.11.2026: «сделаем отдельной кнопкой… текст с кол-вом мест рядом не в одну строку»). */
body.has-route-view #info-tiles-approach .cq-tile{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
  gap:10px;width:100%;min-height:52px;margin:0;padding:9px 12px;text-align:left;
  border:1px solid #e7e1d4;border-radius:14px;background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.07);cursor:pointer}
body.dark.has-route-view #info-tiles-approach .cq-tile{
  background:#1e293b;border-color:#334155;box-shadow:none}
body.has-route-view #info-tiles-approach .cq-tile:hover{
  background:#fbfaf7;transform:none;box-shadow:0 10px 24px rgba(15,23,42,.09)}
body.dark.has-route-view #info-tiles-approach .cq-tile:hover{background:#243244}
body.has-route-view #info-tiles-approach .cq-tile-icon{
  position:static;order:0;flex:none;width:32px;height:32px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
  opacity:1;background:#f7f5ef;border:1px solid #e7e1d4}
body.dark.has-route-view #info-tiles-approach .cq-tile-icon{background:#0f172a;border-color:#334155}
body.has-route-view #info-tiles-approach .cq-tile-tag{
  order:1;flex:none;font-size:13px;line-height:1.2;letter-spacing:0;text-transform:none;
  color:#0f172a;font-weight:800;padding:0;white-space:nowrap}
body.dark.has-route-view #info-tiles-approach .cq-tile-tag{color:#f1f5f9}
body.has-route-view #info-tiles-approach .cq-tile-meta{
  order:2;flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;line-height:1.2;
  color:#6b7280;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dark.has-route-view #info-tiles-approach .cq-tile-meta{color:#94a3b8}
body.has-route-view #info-tiles-approach .cq-tile-title{display:none}
body.has-route-view #info-tiles-approach .cq-tile::after{
  content:"›";order:3;flex:none;font-size:20px;font-weight:700;line-height:1;color:#94a3b8}
/* Слайдер снизу — встык к блоку «Вокруг»: ни зазора, ни рамки, ни белой полосы.
   Селекторы с body.play.has-route-view .play-main — чтобы перебить прежнее правило
   `body.play .play-main #route-hero{margin:16px …}` (у него больше классов). */
body.play.has-route-view .play-main #route-hero{margin:0;padding:0;background:#f7f5ef}
body.dark.play.has-route-view .play-main #route-hero{background:#111827}
body.play.has-route-view .play-main #route-hero #route-photos.route-photo-slider{
  margin:0;border:0!important;border-radius:0;background:#f7f5ef}
body.dark.play.has-route-view .play-main #route-hero #route-photos.route-photo-slider{background:#111827}
body.play.has-route-view .play-main #route-hero .photo-slider{background:#f7f5ef}


/* ==================== ОКНА «О МЕСТЕ»/«ВОКРУГ»: ФОТО ПОД ПАНЕЛЬ, «ВОКРУГ» С ЗАКРЕПЛЁННЫМ БЛОКОМ (Владимир, 02.11.2026) ====================
   Заказчик: «в фактах и вокруг протяни фото под плашку серую полупрозрачную, чтобы плашка
   на фото оказалась, а не на белом фоне когда наверху»; в «Вокруг» — «блок с картинкой и
   миниатюрами не меняем (только картинку меньше) и закрепляем наверху навсегда, тексты
   3 места рядом переносим в верхнюю плашку, кнопки якорей крупнее и тоже всегда на месте,
   скролл текстов оставляем, „Показать на карту“ показывает карту в статичном блоке вместо
   слайдера». Окна — flex-колонка: верхняя панель лежит ПОВЕРХ фото (absolute), ниже либо
   единственный скролл (факты), либо закреплённый блок + скролл текстов («Вокруг»). */
body.play #modal-facts .modal-content.cq-facts-full,
body.play #modal-path-pois .modal-content.cq-pois-full{
  display:flex;flex-direction:column;height:100dvh;max-height:100dvh;
  overflow:hidden;padding:0;position:relative}
/* Панель: полупрозрачная, всегда поверх фото/контента; на телефоне учитываем «челку».
   Селектор с .has-media/…:not — чтобы перебить прежнее правило cq-v643
   (`body.play #modal-facts .cq-full-modal.has-media .full-topbar` со sticky и .58) —
   из-за него панель оставалась непрозрачной и стояла НАД фото, а не поверх него. */
body.play #modal-facts .cq-full-modal.has-media .full-topbar,
body.play #modal-path-pois .cq-full-modal.has-media .full-topbar,
body.play #modal-facts .cq-full-modal:not(.has-media) .full-topbar,
body.play #modal-path-pois .cq-full-modal:not(.has-media) .full-topbar{
  position:absolute!important;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:56px;padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  border-bottom:0;color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.play #modal-facts .cq-full-modal.has-media .full-topbar,
body.play #modal-path-pois .cq-full-modal.has-media .full-topbar{background:rgba(15,23,42,.30)!important}
body.dark.play #modal-facts .cq-full-modal.has-media .full-topbar,
body.dark.play #modal-path-pois .cq-full-modal.has-media .full-topbar{background:rgba(2,6,23,.42)!important}
body.play #modal-facts .cq-full-modal:not(.has-media) .full-topbar,
body.play #modal-path-pois .cq-full-modal:not(.has-media) .full-topbar{background:#0f172a!important}
/* Кнопки панели — поверх фото, вне конкуренции с кадром */
body.play #modal-facts .cq-full-modal .full-topbar-actions,
body.play #modal-path-pois .cq-full-modal .full-topbar-actions{position:relative;z-index:61}
body.play #modal-facts .cq-full-modal .full-topbar-main,
body.play #modal-path-pois .cq-full-modal .full-topbar-main{
  display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;flex:1 1 auto}
body.play #modal-facts .cq-full-modal .full-topbar-title,
body.play #modal-path-pois .cq-full-modal .full-topbar-title{
  font-size:14px;font-weight:700;line-height:1.2;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.play #modal-facts .cq-full-modal .full-topbar-sub,
body.play #modal-path-pois .cq-full-modal .full-topbar-sub{
  font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.play #modal-facts .cq-full-modal .full-topbar-actions,
body.play #modal-path-pois .cq-full-modal .full-topbar-actions{
  display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
/* «О месте»: единственный скролл; фото начинается от самого верха и уходит под панель */
body.play #modal-facts .cq-facts-full .full-scroll{
  display:block;flex:1 1 auto;height:auto;max-height:none;min-height:0;
  overflow-y:auto!important;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding-bottom:28px}
body.play #modal-facts .cq-facts-full:not(.has-media) .full-scroll{padding-top:56px}
body.play #modal-facts .cq-facts-full .full-media{position:relative;z-index:1;margin:0}
/* «Вокруг»: закреплённый блок (слайдер/карта + якоря) и отдельный скролл текстов */
body.play #modal-path-pois .cq-pois-full .cq-pois-fixed{
  position:relative;z-index:2;flex:none;margin:0;padding:0;background:transparent}
body.play #modal-path-pois .cq-pois-full:not(.has-media) .cq-pois-fixed{padding-top:56px;background:#fff}
body.dark.play #modal-path-pois .cq-pois-full:not(.has-media) .cq-pois-fixed{background:#0f172a}
body.play #modal-path-pois .cq-pois-full .full-media{position:relative;margin:0}
body.play #modal-path-pois .cq-pois-full .cq-pois-fixed .photo-slider{height:100%;margin:0;border:0;border-radius:0}
body.play #modal-path-pois .cq-pois-full .cq-pois-fixed .photo-thumb img{width:60px;height:42px;border-radius:8px}
body.play #modal-path-pois .cq-pois-full .cq-pois-fixed .photo-thumbs{padding:8px 10px 9px;gap:6px}
body.play #modal-path-pois .cq-pois-full .cq-pois-fixed .photo-caption{
  font-size:12px;padding:16px 12px 8px}
body.play #modal-path-pois .cq-pois-full .cq-pois-fixed .full-slider.has-thumbs .photo-caption{padding-bottom:84px}
/* Кнопки-якоря 1,2,3 убрали — освободившуюся высоту отдали фото (Владимир, 02.11.2026) */
body.play #modal-path-pois .cq-pois-full .pois-chips{display:none!important}
/* Две кнопки карточки места — короткие подписи «На карте» / «Маршрут», в одну строку */
body.play #modal-path-pois .cq-pois-full .poi-card-actions{display:flex;gap:8px;flex-wrap:nowrap}
body.play #modal-path-pois .cq-pois-full .poi-card-actions .btn{
  flex:1 1 0;min-width:0;padding:0 8px;white-space:nowrap;font-size:13px}
/* Карта вместо слайдера в том же закреплённом блоке */
body.play #modal-path-pois .cq-pois-full .cq-pois-fixed .cq-pois-fixed-map{position:relative;height:100%}
body.play #modal-path-pois .cq-pois-full .cq-pois-fixed .cq-pois-fixed-map .cq-poi-map{width:100%;height:100%}
body.play #modal-path-pois .cq-pois-full .cq-pois-fixed .cq-pois-map-back{
  position:absolute;right:10px;bottom:10px;z-index:5;height:36px;padding:0 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);background:rgba(15,23,42,.72);color:#fff;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(4px)}
/* Тексты мест — отдельный скролл под закреплённым блоком */
body.play #modal-path-pois .cq-pois-full .full-scroll{
  display:block;flex:1 1 auto;height:auto;max-height:none;min-height:0;
  overflow-y:auto!important;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding-bottom:28px}
body.play #modal-path-pois .cq-pois-full .full-scroll #path-pois-body{margin:0 16px}
body.play #modal-path-pois .cq-pois-full .full-scroll .story-next-bottom{margin:16px 16px 8px;width:calc(100% - 32px)}

/* ==================== «О МЕСТЕ»/«ВОКРУГ»: ВЕРХ КАК В ИСТОРИИ — КНОПКИ БЕЗ ПЛАШКИ (Владимир, 02.11.2026) ====================
   Заказчик: «вокруг и в фактах сделай как в истории — там кнопки вверху без плашки, при этом их видно;
   нужно также, только все элементы, которые есть у фактов и вокруг, оставь».
   Значит: тёмная плашка во всю ширину убирается, остаётся мягкий градиент под читаемость, а кнопки
   (аудиогид, крестик) — круглые тёмные, как в истории. Заголовок и подпись (счётчик мест) остаются. */
body.play #modal-facts .cq-full-modal.has-media .full-topbar,
body.play #modal-path-pois .cq-full-modal.has-media .full-topbar{
  background:linear-gradient(180deg,rgba(2,6,23,.55) 0%,rgba(2,6,23,.18) 55%,rgba(2,6,23,0) 100%)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-bottom:0!important;padding:10px 14px 20px!important;
  padding-top:calc(10px + env(safe-area-inset-top,0px))!important}
body.play #modal-facts .cq-full-modal.has-media .full-topbar-title,
body.play #modal-path-pois .cq-full-modal.has-media .full-topbar-title{
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
body.play #modal-facts .cq-full-modal.has-media .full-topbar-sub,
body.play #modal-path-pois .cq-full-modal.has-media .full-topbar-sub{
  color:rgba(255,255,255,.94)!important;text-shadow:0 1px 5px rgba(0,0,0,.6)}
/* Аудиогид в баре — такая же круглая кнопка, как в истории (без полосы и времени) */
body.play #modal-facts .cq-full-modal .full-topbar .cq-audio,
body.play #modal-path-pois .cq-full-modal .full-topbar .cq-audio{background:none;border:0;padding:0;gap:0}
body.play #modal-facts .cq-full-modal .full-topbar .cq-audio-track,
body.play #modal-path-pois .cq-full-modal .full-topbar .cq-audio-track,
body.play #modal-facts .cq-full-modal .full-topbar .cq-audio-time,
body.play #modal-path-pois .cq-full-modal .full-topbar .cq-audio-time,
body.play #modal-facts .cq-full-modal .full-topbar .cq-audio-label,
body.play #modal-path-pois .cq-full-modal .full-topbar .cq-audio-label{display:none}
body.play #modal-facts .cq-full-modal.has-media .full-topbar .cq-audio-btn,
body.play #modal-path-pois .cq-full-modal.has-media .full-topbar .cq-audio-btn{
  width:36px;height:36px;min-width:36px;padding:0;border-radius:50%;justify-content:center;
  background:rgba(15,23,42,.72);color:#fff;border:0}
body.play #modal-facts .cq-full-modal.has-media .full-topbar .cq-audio.playing .cq-audio-btn,
body.play #modal-path-pois .cq-full-modal.has-media .full-topbar .cq-audio.playing .cq-audio-btn{background:#0d9488;color:#fff}
body.play #modal-facts .cq-full-modal.has-media .full-close-btn-icon,
body.play #modal-path-pois .cq-full-modal.has-media .full-close-btn-icon{
  background:rgba(15,23,42,.72);border:0;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
/* Нет фото — как в истории без медиа: светлый бар с тёмным текстом, кнопки светлые круглые */
body.play #modal-facts .cq-full-modal:not(.has-media) .full-topbar,
body.play #modal-path-pois .cq-full-modal:not(.has-media) .full-topbar{
  background:#fff!important;color:#0f172a;border-bottom:1px solid #e5e7eb!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.dark.play #modal-facts .cq-full-modal:not(.has-media) .full-topbar,
body.dark.play #modal-path-pois .cq-full-modal:not(.has-media) .full-topbar{
  background:#1e293b!important;color:#e2e8f0;border-bottom-color:#334155!important}
body.play #modal-facts .cq-full-modal:not(.has-media) .full-topbar-title,
body.play #modal-path-pois .cq-full-modal:not(.has-media) .full-topbar-title{color:#0f172a;text-shadow:none}
body.dark.play #modal-facts .cq-full-modal:not(.has-media) .full-topbar-title,
body.dark.play #modal-path-pois .cq-full-modal:not(.has-media) .full-topbar-title{color:#e2e8f0}
body.play #modal-facts .cq-full-modal:not(.has-media) .full-topbar .full-topbar-sub,
body.play #modal-path-pois .cq-full-modal:not(.has-media) .full-topbar .full-topbar-sub{color:#6b7280!important;text-shadow:none}
body.play #modal-facts .cq-full-modal:not(.has-media) .full-close-btn-icon,
body.play #modal-path-pois .cq-full-modal:not(.has-media) .full-close-btn-icon,
body.play #modal-facts .cq-full-modal:not(.has-media) .full-topbar .cq-audio-btn,
body.play #modal-path-pois .cq-full-modal:not(.has-media) .full-topbar .cq-audio-btn{
  background:#f1f5f9;color:#0f172a;border:1px solid #e5e7eb;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

/* ==================== КНОПКА «ВКЛЮЧИТЬ КОМПАС» — КРАСНАЯ (Владимир, 02.11.2026) ====================
   Кнопка нужна только на iPhone/iPad: iOS Safari отдаёт датчики только по нажатию.
   Раньше она была красной, но общее правило .nav-wide (ниже по файлу) перебивало цвет
   на серый — усиливаем селектор. */
#btn-compass.cq-compass-enable,
.nav-wide.cq-compass-enable{
  background:#dc2626!important;border-color:#dc2626!important;color:#fff!important;
  box-shadow:0 8px 20px rgba(220,38,38,.28)}
#btn-compass.cq-compass-enable:hover,
.nav-wide.cq-compass-enable:hover{
  background:#b91c1c!important;border-color:#b91c1c!important;color:#fff!important}
body.dark #btn-compass.cq-compass-enable,
body.dark .nav-wide.cq-compass-enable{
  background:#dc2626!important;border-color:#dc2626!important;color:#fff!important}

/* ==================== ПИН-КОД ПАРТНЁРА В МОДАЛКЕ ПОКУПКИ (Владимир, 02.11.2026) ====================
   Поле появляется, если у серии промокода включена галочка «Пин-код партнёра».
   Оформлено отдельной карточкой: заметно, но не спорит с ценой и кнопкой оплаты. */
.buy-pin{margin:14px 0 4px;padding:14px;border-radius:14px;
  background:linear-gradient(180deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0}
.buy-pin-label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
  color:#0f172a;margin-bottom:8px}
.buy-pin-ico{width:26px;height:26px;border-radius:9px;background:#fff;border:1px solid #e2e8f0;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1}
.buy-pin-input{width:100%;box-sizing:border-box;padding:13px 14px;border-radius:12px;
  border:1.5px solid #cbd5e1;background:#fff;color:#0f172a;outline:none;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;letter-spacing:2px;font-weight:700}
.buy-pin-input::placeholder{font-family:inherit;font-size:14px;letter-spacing:0;font-weight:400;color:#94a3b8}
.buy-pin-input:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.buy-pin-input.is-error{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.buy-pin-hint{font-size:12px;color:#64748b;margin-top:7px;line-height:1.4}
.buy-pin-error{font-size:12.5px;color:#b91c1c;margin-top:6px;font-weight:600}
body.dark .buy-pin{background:linear-gradient(180deg,#1e293b,#172033);border-color:#334155}
body.dark .buy-pin-label{color:#e2e8f0}
body.dark .buy-pin-ico{background:#0f172a;border-color:#334155}
body.dark .buy-pin-input{background:#0f172a;border-color:#334155;color:#e2e8f0}
body.dark .buy-pin-hint{color:#94a3b8}

/* Поле пин-кода внутри модалки: общее правило .modal-content input:not(...) ниже по файлу
   имеет большую специфичность и перебивало оформление — усиливаем селектор (02.11.2026). */
#modal-buy .buy-pin-input{
  width:100%;box-sizing:border-box;margin-bottom:0;padding:13px 14px;border-radius:12px;
  border:1.5px solid #cbd5e1;background:#fff;color:#0f172a;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;letter-spacing:2px;font-weight:700}
#modal-buy .buy-pin-input::placeholder{
  font-family:inherit;font-size:14px;letter-spacing:0;font-weight:400;color:#94a3b8}
#modal-buy .buy-pin-input:focus{
  outline:none;border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
#modal-buy .buy-pin-input.is-error{
  border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.12)}
body.dark #modal-buy .buy-pin-input{background:#0f172a;border-color:#334155;color:#e2e8f0}