/* Связи · «Природе — 2 года» — компоненты приложения гостя. Токены и темы Афиши — в assets/themes.css (подключается раньше),
   здесь только var(--…): бренд (--ink/--bg/--text…), квест (--q-*). Арки Афиши сознательно не переносим: фото — скруглённый
   прямоугольник, аватары — круг. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 56px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font); font-size: var(--t-m); line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.02em; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
a.sr:focus { position: fixed; left: 12px; top: 12px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 16px; border-radius: var(--pill); background: #fff; color: #0b0b10; font-weight: 700; }
.fine { font-size: var(--t-xs); color: var(--text-2); margin: 8px 0; }
.center { text-align: center; }
.empty { color: var(--text-2); font-size: var(--t-s); padding: 14px 16px; border-radius: var(--r-m); background: var(--bg-2); }
.lead { margin: -4px 0 16px; font-size: var(--t-m); color: var(--text-2); }

/* ---------- оболочка ---------- */
.shell { position: relative; max-width: 480px; margin: 0 auto; min-height: 100dvh; background: var(--bg); padding-bottom: calc(var(--dock-h) + 24px + env(safe-area-inset-bottom)); }
body[data-route="welcome"] .shell { padding-bottom: 24px; }
body[data-route="quest"] .shell { padding-bottom: 0; background: var(--q-bg); }
body[data-route="quest"] .appbar { display: none; }
.appbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 0; height: var(--top-h); padding: 0 4px 0 14px; background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--on-ink); border-bottom: 1px solid var(--on-ink-line); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.top__time { min-width: 0; overflow: hidden; margin: 0 auto 0 8px; display: grid; font-size: 12px; font-weight: 700; color: var(--on-ink-2); line-height: 1.15; font-variant-numeric: tabular-nums; }
.top__time i { font-style: normal; font-weight: 600; font-size: 11px; }
.ibtn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--on-ink); cursor: pointer; }
.ibtn:hover { background: rgb(255 255 255 / 12%); }
.ibtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.appbar .theme-open { box-shadow: inset 0 0 0 1px var(--on-ink-line); }
.appbar .theme-open[aria-expanded="true"] { background: rgb(255 255 255 / 16%); }
.appbar .logo { margin-right: 2px; }
.qbar .theme__dot { width: 22px; height: 22px; }
@media (max-width: 419px) { .top__time { display: none; } .appbar .fam { margin-right: auto; } .appbar [data-act="ticket"] { display: none; } /* «Мой QR» есть в нижней панели */ }
@media (max-width: 349px) { .appbar .fam { display: none; } .appbar .logo { margin-right: auto; } /* ссылка на Афишу остаётся в меню */ }
.appbar .fam, .top__time { color: color-mix(in srgb, var(--on-ink) 90%, transparent); }
.view { outline: none; }
.dock { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 30; display: grid; grid-template-columns: 1fr 1fr 1.35fr 1fr; gap: 4px; width: min(480px, 100%); height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding: 6px 10px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tab { min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: var(--r-m); background: none; color: var(--text-2); text-decoration: none; font-size: 12px; font-weight: 700; cursor: pointer; }
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab[aria-current] { color: var(--text); }
.tab[aria-current] svg { stroke-width: 2.2; }
.tab-quest { flex-direction: row; gap: 8px; margin: 4px 0; border-radius: var(--pill); background: var(--sun); color: #0b0b10; font-size: var(--t-s); box-shadow: 0 6px 18px color-mix(in srgb, var(--q-acc) 30%, transparent), inset 0 0 0 1px rgb(255 255 255 / 25%); }
.tab-quest:hover { filter: saturate(1.15) brightness(1.03); }
.tab-quest b { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: var(--pill); background: rgb(255 255 255 / 62%); color: #0b0b10; font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 20px); z-index: 90; transform: translate(-50%, 20px); max-width: min(420px, calc(100% - 32px)); width: max-content; padding: 12px 18px; border-radius: 22px; text-align: center; background: var(--ink); color: var(--on-ink); font-size: var(--t-s); font-weight: 600; opacity: 0; pointer-events: none; transition: .25s; box-shadow: 0 0 0 1px rgb(255 255 255 / 18%), 0 10px 30px rgb(0 0 0 / 25%); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- кнопки как на Афише ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--pill); font-size: var(--t-s); font-weight: 700; letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .18s, background-color .18s, box-shadow .18s; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--block { width: 100%; }
.btn--ink { background: var(--btn); color: var(--on-btn); }
.btn--ink:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 45%, transparent); }
.btn--line { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn--line:hover { border-color: var(--text); }
.btn--light { background: #fff; color: #0b0b10; }
:root[data-skin="2"] .btn--light { background: var(--cta); color: var(--on-cta); }   /* как на Афише в теме 2 */
.bright .btn--light, .sheet--forest .btn--light { box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost { background: transparent; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.btn--sun { background: var(--q-acc); color: var(--q-on-acc); }
.btn--sun:hover { background: var(--q-acc-2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--q-acc) 30%, transparent); }
.btn--glass { background: color-mix(in srgb, var(--q-fg) 12%, transparent); color: var(--q-fg); border-color: color-mix(in srgb, var(--q-fg) 22%, transparent); }
.btn--glass:hover { background: color-mix(in srgb, var(--q-fg) 18%, transparent); }
.h2 { display: flex; align-items: center; gap: 12px; margin: 44px 16px 14px; font-size: var(--t-h2); font-weight: 800; letter-spacing: -.03em; scroll-margin-top: calc(var(--top-h) + 60px); }
.h2__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, var(--bg)); color: var(--ok); }
.h2__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.h3 { margin: 22px 0 8px; font-size: var(--t-l); font-weight: 800; }
.note { padding: 12px 14px; border-radius: var(--r-s); background: var(--bg-2); font-size: var(--t-s); }
.home > .lead, .home > .pslots, .home > .earlier, .home > .empty, .home > .btn, .home > .pparts, .home > .facts, .home > .acq, .mappage > * { margin-left: 16px; margin-right: 16px; }
.home > .btn--block { width: calc(100% - 32px); margin-top: 12px; }

/* ---------- вход: экран «как войти» и согласие (без рекламной обложки) ---------- */
.gate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
.gate__card, .gate__demo { grid-template-columns: minmax(0, 1fr); }
.gate .btn { white-space: normal; text-align: center; }
.gate__card { display: grid; gap: 14px; padding: 20px 18px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--card-ring); }
.gate h1 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.gate__lead { margin: 0; color: var(--text-2); }
.gate__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--q-acc); color: var(--q-on-acc); }
.gate__ic--bad { background: color-mix(in srgb, var(--hot) 16%, var(--surface)); color: var(--hot); }
.gate__ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gate__steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 8px; }
.gate__steps li { counter-increment: st; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; padding: 12px; border-radius: var(--r-m); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.gate__steps li::before { content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: var(--bg); font-weight: 800; }
.gate__steps b { font-size: var(--t-s); }
.gate__steps span { font-size: var(--t-xs); color: var(--text-2); }
.gate__demo { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-l); background: var(--bg-2); }
.gate__demo b { font-size: var(--t-s); }
.gate__demo small { margin-top: -6px; font-size: var(--t-xs); color: var(--text-2); }
.gate .fine { margin: 0 8px; }
.chk--box span { font-weight: 600; line-height: 1.4; box-shadow: inset 0 0 0 1px var(--line); }   /* в теме 1 тёмной подложка = цвет карточки — нужна кромка */
.chk--box span a, .chk--box .linkbtn { position: relative; z-index: 1; color: inherit; font-weight: 750; }
.rules { margin: 8px 0; padding-left: 20px; display: grid; gap: 8px; font-size: var(--t-s); }
.w-ok { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-m); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.w-ok b { display: block; }
.w-ok small { color: var(--text-2); font-size: var(--t-xs); }
.okdot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ok); color: var(--bg); }
.okdot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.reg { display: grid; gap: 18px; margin-top: 16px; }
.fld { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fld > span, .fld legend { font-size: var(--t-s); font-weight: 750; padding: 0; margin-bottom: 6px; }
.fld small { font-size: var(--t-xs); color: var(--text-2); }
.fld input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); font: inherit; color: var(--text); }
.fld input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent); }
.fld input[aria-invalid="true"] { border-color: var(--hot); }
.seg2 { display: grid; gap: 8px; }
.seg2 label { position: relative; display: block; cursor: pointer; }
.seg2 input { position: absolute; opacity: 0; }
.seg2 span { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; padding: 13px 14px; border-radius: var(--r-m); background: var(--bg-2); box-shadow: inset 0 0 0 1px transparent; }
.seg2 svg { grid-row: span 2; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.seg2 b { font-size: var(--t-s); }
.seg2 small { font-size: var(--t-xs); color: var(--text-2); }
.seg2 input:checked + span { background: var(--surface); box-shadow: inset 0 0 0 2px var(--text), var(--shadow); }
.seg2 input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- главная: пропуск, задание квеста с картой, программа, клубы ---------- */
.pass { display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 10px 8px 10px 10px; border-radius: var(--r-l); background: var(--bg-2); }
.pass__ava { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: var(--t-s); font-weight: 800; }
.pass__t { flex: 1; min-width: 0; display: grid; }
.pass__t b { font-size: var(--t-m); font-weight: 800; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass__t small { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 650; color: color-mix(in srgb, var(--ok) 75%, var(--text)); }
.pass__t small svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.pass__qr { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: var(--r-m); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.pass__qr:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.pass__qr svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
/* задание квеста — самый яркий блок экрана: цвет квеста темы, тёмный текст, схема этажа с точкой */
.mis { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 12px 16px 0; padding: 16px; border-radius: var(--r-l); background: radial-gradient(90% 60% at 100% 0, color-mix(in srgb, #fff 38%, transparent), transparent 70%), radial-gradient(70% 50% at 100% 100%, color-mix(in srgb, var(--q-acc-2) 90%, #fff), transparent 75%), var(--q-acc); color: var(--q-on-acc); box-shadow: var(--shadow), 0 12px 34px color-mix(in srgb, var(--q-acc) 35%, transparent); }
/* сказочный растр вшит в углы карточки: ветка с фонарём — сверху справа (под счётчиком семян), мухоморы и папоротник — снизу справа (под кнопкой «Карта» и рядом с прогрессом); текст на растр не заходит */
.mis::before, .mis::after { content: ""; position: absolute; z-index: -1; pointer-events: none; background: no-repeat; background-size: contain; }
.mis::before { top: -18px; right: -14px; width: 190px; height: 190px; background-image: var(--fairy-tr); background-position: right top; -webkit-mask-image: linear-gradient(210deg, #000 52%, transparent 76%); mask-image: linear-gradient(210deg, #000 52%, transparent 76%); }
.mis::after { right: -8px; bottom: -8px; width: 118px; height: 118px; background-image: var(--fairy); background-position: left bottom; transform: scaleX(-1); }
.mis__h { padding-right: 34px; }
.mis__prog { padding-right: 96px; }
.mis__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mis__k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mis__k svg, .mis__seeds svg, .mis__where svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mis__seeds { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: var(--pill); background: color-mix(in srgb, var(--q-acc) 72%, transparent); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: inherit; font-size: var(--t-s); font-weight: 700; text-decoration: none; }
.mis__seeds b { font-size: var(--t-m); }
@media (max-width: 380px) { .mis__k { gap: 5px; font-size: 11px; letter-spacing: .03em; } .mis__seeds { padding: 0 10px; } }   /* «Квест: задание сейчас» — в одну строку рядом со счётчиком и на 320–360 */
.mis__h { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.mis__where { display: flex; gap: 8px; align-items: flex-start; }
.mis__where svg { width: 20px; height: 20px; margin-top: 1px; }
.mis__where b { display: block; font-size: var(--t-m); font-weight: 800; line-height: 1.3; }
.mis__where small { display: block; font-size: var(--t-s); opacity: .85; }
.mis__map { display: block; padding: 8px; border-radius: var(--r-m); background: var(--bg); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); }
.mis__act { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 359px) { .mis__act .btn { padding: 0 14px; } .mis__h { font-size: 23px; } }
.mis .btn--ink { background: var(--sun) border-box; color: #0b0b10; box-shadow: 0 6px 18px -6px rgb(0 0 0 / 30%), inset 0 0 0 1px rgb(255 255 255 / 25%); }   /* как «Квест» в таб-баре */
.mis .btn--ink:hover { filter: saturate(1.15) brightness(1.03); box-shadow: 0 0 0 4px rgb(0 0 0 / 16%), inset 0 0 0 1px rgb(255 255 255 / 25%); }
.btn--glassdark { background: rgb(0 0 0 / 8%); color: inherit; border-color: rgb(0 0 0 / 40%); }
.mis .btn--glassdark { background: color-mix(in srgb, var(--q-acc) 80%, #000 6%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn--glassdark:hover { background: rgb(0 0 0 / 14%); }
.mis :focus-visible { outline-color: var(--q-on-acc); }
.mis__prog { display: grid; gap: 6px; }
.mis__prog small { font-size: var(--t-xs); font-weight: 700; }
.mis__bar { position: relative; height: 8px; border-radius: var(--pill); background: rgb(0 0 0 / 14%); overflow: hidden; }
.mis__bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--sun); }
.btn--sm { min-height: 44px; padding: 0 16px; }
.hscroll { display: flex; gap: 10px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex: none; }
.club2 { position: relative; display: grid; gap: 6px; align-content: start; justify-items: start; width: 246px; padding: 14px 14px 10px; border-radius: var(--r-l); background: var(--bg-2); border-top: 4px solid var(--kc); }
:root[data-scheme="dark"] .club2 { background: color-mix(in srgb, var(--kc) 12%, var(--bg)); }
.club2 h3 { font-size: var(--t-l); font-weight: 800; line-height: 1.2; }
.club2__act { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; max-width: 100%; margin-top: 4px; }
.jsent { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--pill); background: color-mix(in srgb, var(--kc) 22%, var(--surface)); color: var(--text); font-size: var(--t-s); font-weight: 750; white-space: nowrap; }
.jsent svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.club2__act .btn--ghost { padding: 0 6px; }
.acq { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--bg-2); color: inherit; text-decoration: none; }
.acq > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.acq > svg:last-child { width: 18px; height: 18px; stroke: var(--text-2); }
.acq span { flex: 1; min-width: 0; display: grid; }
.acq b { font-size: var(--t-s); }
.acq small { font-size: var(--t-xs); color: var(--text-2); }
.hosts2 { gap: 6px; }
.host2 { display: grid; justify-items: center; align-content: start; gap: 4px; width: 104px; padding: 6px 4px; border: 0; border-radius: var(--r-m); background: none; text-align: center; cursor: pointer; }
.host2:hover { background: var(--bg-2); }
.host2 img, .host2__mono { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--ink-3); }
.host2__mono { display: grid; place-items: center; background: #edbe5a; color: #0b0b10; font-weight: 800; }
.host2 b { font-size: 13px; font-weight: 750; line-height: 1.2; }
.host2 small { font-size: 12px; color: var(--text-2); line-height: 1.25; }
.facts { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 0; margin-bottom: 0; }
.facts > li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--bg-2); }
.facts svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.facts b { display: block; font-size: var(--t-s); }
.facts small { display: block; font-size: var(--t-xs); color: var(--text-2); }
.facts a { display: inline-block; padding: 6px 0; font-weight: 700; }
/* карта — отдельный экран */
.h1s { margin: 18px 16px 6px; font-size: var(--t-h2); font-weight: 800; letter-spacing: -.03em; }
.mappage .h2 { margin-left: 16px; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 0; padding: 0; font-size: var(--t-xs); color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 800; line-height: 1; }
.lg--open { background: var(--q-acc); color: var(--q-on-acc); }
.lg--here { background: var(--here); box-shadow: 0 0 0 3px color-mix(in srgb, var(--here) 30%, transparent); }
.lg--done { background: var(--ok); }
.lg--lock { background: var(--line-strong); }
.zlist { display: grid; gap: 14px; }
.zrow h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--t-m); font-weight: 800; }
.zrow h3 i { width: 12px; height: 12px; border-radius: 50%; }
.zrow h3 img { width: 34px; height: 34px; margin: -8px 0 -6px auto; object-fit: contain; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 18%)); }
.zrow h3 .here { padding: 2px 9px; border-radius: var(--pill); background: var(--here); color: var(--on-here); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.zrow--now { margin: 0 -8px; padding: 10px 8px 8px; border-radius: var(--r-l); box-shadow: inset 0 0 0 2px var(--here); background: color-mix(in srgb, var(--here) 6%, transparent); }
.zrow h3 small { font-size: var(--t-xs); font-weight: 650; color: var(--text-2); }
.zrow ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.zt { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-m); background: linear-gradient(100deg, color-mix(in srgb, var(--kc, var(--q-acc)) calc(34% * var(--fx, 1)), var(--bg)), color-mix(in srgb, var(--q-acc) calc(30% * var(--fx, 1)), var(--bg))); color: var(--text); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc, var(--q-acc)) calc(45% * var(--fx, 1)), transparent); }
.zt > span { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--q-acc); color: var(--q-on-acc); box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 22%); }
/* открытое задание — искры-светлячки растра в правом углу */
.zt--open::after { content: ""; position: absolute; z-index: -1; right: -14px; bottom: -22px; width: 92px; height: 92px; background: var(--fairy) left bottom / contain no-repeat; transform: scaleX(-1); opacity: .9; pointer-events: none; }
.zt svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zt b { font-size: var(--t-s); }
.zt small { font-size: var(--t-xs); color: var(--text-2); }
.zt--done { background: color-mix(in srgb, var(--ok) 12%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent); }
.zt--done > span { background: var(--ok); color: var(--bg); box-shadow: none; }
.zt--done b { color: var(--text-2); }
.zt:is(.zt--soon, .zt--wait, .zt--later, .zt--closed) { background: var(--bg-2); box-shadow: none; }
.zt:is(.zt--soon, .zt--wait, .zt--later, .zt--closed) > span { background: var(--line); color: var(--text-2); box-shadow: none; }
.zt:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kc, var(--q-acc)) 75%, var(--text)); }

.pparts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 5px; border-radius: var(--pill); background: var(--ink); margin-bottom: 14px; box-shadow: 0 12px 24px -14px rgb(0 0 0 / 55%), inset 0 0 0 1px var(--on-ink-line); }
.pparts button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 8px; border: 0; border-radius: var(--pill); background: none; font-size: var(--t-s); font-weight: 700; color: var(--on-ink-2); cursor: pointer; white-space: nowrap; transition: color .2s, background-color .2s, box-shadow .2s, transform .15s; }
.pparts button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pparts button small { font-weight: 600; }
@media (hover: hover) { .pparts button:hover { color: var(--on-ink); } }
.pparts button:active { transform: scale(.97); }
.pparts button:focus-visible { outline: 2px solid var(--on-ink); outline-offset: -4px; }
.pparts button:is([aria-pressed="true"], [aria-selected="true"]):focus-visible { outline-color: #0b0b10; }
/* активный — «солнечная» растяжка бренда, как активный таб Эмпатиума (#F5821F→#EC1E79) и БРИКС (кларет) */
.pparts button:is([aria-pressed="true"], [aria-selected="true"]) { background: var(--sun); color: #0b0b10; box-shadow: 0 6px 14px -6px rgb(0 0 0 / 55%), inset 0 0 0 1px rgb(255 255 255 / 28%); }
/* липкая полоса под шапкой: полупрозрачный фон + блюр; тень — только когда меню «оторвалось» (.is-stuck) */
.stick { position: sticky; top: var(--top-h); z-index: 20; margin: 0 0 6px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); transition: box-shadow .2s; }
.stick > .pparts { margin: 0; }
.stick.is-stuck { box-shadow: 0 1px 0 var(--line), 0 12px 20px -16px rgb(0 0 0 / 40%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .stick { background: var(--bg); } }
.pslots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pslot { position: relative; display: flex; align-items: stretch; border-radius: var(--r-m); background: var(--bg-2); }
.pslot.live { background: var(--surface); box-shadow: inset 0 0 0 2px var(--text), var(--shadow); }
.pslot.past { opacity: .6; }
.pslot__b { flex: 1; display: flex; gap: 14px; min-width: 0; padding: 14px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--r-m); }
.pslot__t { flex: none; width: 48px; display: grid; align-content: start; }
.pslot__t b { font-size: var(--t-m); font-weight: 800; font-variant-numeric: tabular-nums; }
.pslot__t small { font-size: var(--t-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pslot__m { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.pslot__n { font-size: var(--t-m); font-weight: 700; line-height: 1.3; }
.pslot__host { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 650; }
.pslot__host .ava + .ava { margin-left: -14px; box-shadow: 0 0 0 2px var(--bg-2); }
.pslot__i { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); color: var(--text-2); }
.pslot__i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.ava { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: var(--ink-3); }
.ava-mono { display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--text); background: color-mix(in srgb, #edbe5a 45%, var(--bg)); }
.ava--sm { width: 24px; height: 24px; }
.livetag { display: inline-block; padding: 1px 8px; border-radius: var(--pill); background: var(--text); color: var(--bg); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.qtag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: var(--pill); background: color-mix(in srgb, var(--ok) 9%, var(--bg)); color: color-mix(in srgb, var(--ok) 78%, var(--text)); font-size: 12px; font-weight: 700; }
.qtag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qtag--gift { background: color-mix(in srgb, #e8a838 22%, var(--bg)); color: color-mix(in srgb, #95580a 80%, var(--text)); }
:root[data-scheme="dark"] .qtag--gift { color: #f0be5c; background: color-mix(in srgb, #e8a838 14%, var(--bg)); }
.earlier { margin-bottom: 8px; }
.pnote { margin-top: 0; margin-bottom: 8px; }
.linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.earlier summary { padding: 12px 16px; border-radius: var(--r-m); background: var(--bg-2); font-size: var(--t-s); font-weight: 700; color: var(--text-2); cursor: pointer; list-style-position: inside; }
.earlier[open] summary { margin-bottom: 8px; }
/* клубы — карточки Афиши: подложка, цветная кромка сверху, значок клуба в круге */
.club__k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.club__k i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--kc) 55%, var(--bg)); color: var(--text); }
.club__k svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.club__meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 650; }
.club__meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.club__meta b { color: color-mix(in srgb, var(--ok) 72%, var(--text)); }
/* ведущие — карточка Афиши .host: фото 4:5 в скруглённом прямоугольнике */
.host__photo { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; background: var(--ink-3); }
.host__photo img { width: 100%; height: 100%; object-fit: cover; }
.host__mono { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: #edbe5a; color: #0b0b10; font-weight: 800; font-size: var(--t-xl); }
.mapcard { position: relative; isolation: isolate; overflow: hidden; padding: 14px; border-radius: var(--r-l); background: radial-gradient(80% 40% at 0 100%, color-mix(in srgb, var(--q-acc) calc(40% * var(--fx, 1)), transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--q-acc) calc(26% * var(--fx, 1)), var(--bg)), color-mix(in srgb, var(--q-acc) calc(12% * var(--fx, 1)), var(--bg-2))); }
.mapcard::after { content: ""; position: absolute; z-index: -1; right: -10px; bottom: -10px; width: 128px; height: 128px; background: var(--fairy) left bottom / contain no-repeat; transform: scaleX(-1); pointer-events: none; }
.mapcard .legend { padding-right: 92px; color: var(--text); }
.mappage > .mapcard { margin-left: 6px; margin-right: 6px; padding: 12px 4px 14px; }   /* схема на всю ширину экрана: без полей по бокам (задача 1793728560) */
.mappage > .mapcard .legend { margin: 10px 8px 0; }
/* точки квеста на схеме */
.mp circle { fill: var(--q-acc); stroke: #0b0b10; stroke-width: 1.5; }
.mp text { fill: var(--q-on-acc); font-size: 12px; font-weight: 800; }
.mp--now circle { fill: var(--here); stroke: #fff; stroke-width: 2; }
.mp--now text { fill: var(--on-here); }
.mp--done circle { fill: var(--ok); stroke: #fff; stroke-width: 2; }
.mp--lock circle { fill: #8a8a96; stroke: #fff; stroke-width: 2; }
.mp__ok { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mp--lock .mp__ok { stroke-width: 1.6; }
.mp .mp__pulse { fill: none; stroke: var(--here); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .mp .mp__pulse { animation: pulse 1.6s ease-out infinite; } }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.map--mini { display: block; width: 100%; height: auto; }   /* по ширине подложки, высота — по пропорции схемы: без пустых полей по бокам (вертикальный 1 этаж в 190 px давал узкую схему) */
.map { width: 100%; height: auto; font-family: var(--font); }
.map .floor { fill: var(--surface); stroke: var(--line-strong); stroke-dasharray: 4 4; }
.map .mf { font-size: 12px; font-weight: 800; fill: var(--text-2); letter-spacing: .06em; text-transform: uppercase; }
.mz { cursor: pointer; outline: none; }
.mz:focus-visible rect { stroke: var(--text); stroke-width: 3; }
.mz-t { font-size: 13.5px; font-weight: 800; fill: var(--text); }
.mz-s { font-size: 11px; font-weight: 550; fill: var(--text-2); }
.mz.on rect { stroke: var(--here); stroke-width: 3.5; }
.mz.on:focus-visible rect { stroke: var(--text); stroke-width: 4; }
.mz.on .mz-t, .mz.on .mz-s { fill: #fff; }
.mz.mz--lt.on :is(.mz-t, .mz-s) { fill: #0b0b10; }
.mz-t--sm { font-size: 12px; }
.mz-bg { fill: var(--surface); stroke: none; }
.mz-i { fill: none; stroke: var(--text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.mz.on .mz-i { stroke: #fff; opacity: 1; }
.mz.mz--lt.on .mz-i { stroke: #0b0b10; }
.mz-stage { fill: var(--surface); stroke: var(--line-strong); }
.mz-st { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; fill: var(--text-2); }
.mz-dot { fill: var(--text-2); opacity: .35; }
.mz.on .mz-dot { fill: #fff; opacity: .5; }
.mdeco .mz-i { opacity: .55; }
.mroute { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-dasharray: 3 4; stroke-linecap: round; }
.marr { fill: none; stroke: var(--text-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- шторки ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: none; }
.overlay.show { display: block; }
.scrim { position: absolute; inset: 0; background: rgb(11 11 16 / 50%); animation: fade .2s; }
.sheet { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(480px, 100%); max-height: 88dvh; overflow-y: auto; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: var(--r-l) var(--r-l) 0 0; background: var(--surface); color: var(--text); outline: none; animation: up .24s cubic-bezier(.2, .8, .3, 1); }
.sheet > h2 { margin: 6px 44px 10px 0; font-size: var(--t-xl); font-weight: 800; }
.sheet > p { font-size: var(--t-s); }
.sheet-x { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg-2); cursor: pointer; z-index: 2; }
.sheet-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sh-k { display: block; margin-right: 48px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sh-time { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--t-s); font-weight: 700; }
.sh-time svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.sh-time span { color: var(--text-2); }
.sh-hosts { display: grid; gap: 8px; margin: 12px 0; }
.sh-host { display: flex; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border: 0; border-radius: var(--r-m); background: var(--bg-2); text-align: left; cursor: pointer; }
.sh-host .ava { width: 44px; height: 44px; }
.sh-host > span { flex: 1; }
.sh-host b { display: block; font-size: var(--t-s); }
.sh-host small { font-size: var(--t-xs); color: var(--text-2); }
.sh-host > svg, .sh-quest > svg { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; }
.sh-clubs, .joinlist { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.club-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: var(--pill); background: color-mix(in srgb, var(--kc) 28%, var(--bg)); font-size: var(--t-s); font-weight: 650; cursor: pointer; color: var(--text); }
.club-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--kc); }
.club-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.club-pill.on { box-shadow: inset 0 0 0 2px var(--kc); background: color-mix(in srgb, var(--kc) 45%, var(--bg)); }
.sh-quest { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 8px 12px 8px 8px; border-radius: var(--r-m); background: var(--q-acc); color: var(--q-on-acc); text-decoration: none; transition: background-color .18s, box-shadow .18s, transform .18s; }   /* салатовый акцент квеста, как «Поляна клубов →» */
.sh-quest:hover { background: var(--q-acc-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-acc) 30%, transparent); }
.sh-quest:active { transform: scale(.99); }
.sh-quest img { width: 72px; height: 50px; object-fit: cover; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.sh-quest > span { flex: 1; min-width: 0; }
.sh-quest b { display: block; font-size: var(--t-s); }
.sh-quest small { display: block; margin-top: 2px; line-height: 1.35; color: color-mix(in srgb, var(--q-on-acc) 78%, var(--q-acc)); font-size: var(--t-xs); }
.sh-quest > svg { stroke: var(--q-on-acc); }
.sh-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sh-act .btn { flex: 1 1 auto; padding: 0 14px; }
.hs { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; margin-top: 6px; }
.hs h2 { margin: 4px 0 8px; font-size: var(--t-xl); }
.hs p { margin: 0; font-size: var(--t-s); }
.cs { margin: -22px -18px 14px; padding: 22px 18px 16px; border-top: 6px solid var(--kc); background: color-mix(in srgb, var(--kc) 16%, var(--surface)); }
.cs h2 { margin: 10px 0 4px; font-size: var(--t-xl); font-weight: 800; }
.cs-lead { margin: 0; font-size: var(--t-s); color: var(--text-2); }
.blocks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.blocks li { padding: 8px 10px; border-radius: var(--r-s); background: var(--bg-2); font-size: var(--t-xs); font-weight: 600; }
.sheet--bright { background: #fff; color: #0b0b10; }
.tk { text-align: center; }
.tk h2 { margin: 6px 0 12px; font-size: var(--t-xl); }
.tk-qr { width: min(280px, 78vw); margin: 0 auto; padding: 10px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px rgb(11 11 16 / 12%); }
.tk-code { margin: 10px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sheet--bright .fine { color: #4d4d5a; }
.times { display: flex; flex-wrap: wrap; gap: 6px; }
.times button { min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--pill); background: var(--bg-2); font-size: var(--t-s); font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.times button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* ---------- формы заданий ---------- */
.pform { display: grid; gap: 12px; }
.pq { margin: 0 0 4px; font-size: var(--t-m); font-weight: 650; }
.opts { display: grid; gap: 8px; }
.opts label, .chk { position: relative; display: block; cursor: pointer; }
.opts input, .chk input { position: absolute; opacity: 0; }
.opts span, .chk span { display: block; padding: 14px 14px 14px 46px; border-radius: var(--r-m); background: var(--bg-2); font-size: var(--t-s); font-weight: 650; }
.opts span::before, .chk span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); }
.chk span::before { border-radius: 6px; }
.opts input:checked + span, .chk input:checked + span { box-shadow: inset 0 0 0 2px currentColor; }
.opts input:checked + span::before { box-shadow: inset 0 0 0 6px currentColor; }
.chk input:checked + span::before { background: currentColor; box-shadow: none; }
.opts input:focus-visible + span, .chk input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.err { margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: color-mix(in srgb, var(--hot) 14%, transparent); color: var(--hot); font-size: var(--t-s); font-weight: 650; }
.pdone { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 14px; border-radius: var(--r-m); background: color-mix(in srgb, var(--q-ok) 16%, transparent); color: var(--q-ok-text); }
.pdone svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pdone small { flex-basis: 100%; color: var(--q-fg-2); font-size: var(--t-xs); }
.ptitle { padding-left: 12px; border-left: 5px solid var(--kc); }
.scanned { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--q-ok-text); }
.scanned svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.photo { position: relative; display: block; cursor: pointer; }
.photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo__b { display: grid; justify-items: center; gap: 4px; padding: 22px 14px; border-radius: var(--r-m); border: 1.5px dashed color-mix(in srgb, var(--q-fg) 40%, transparent); text-align: center; }
.photo__b svg { width: 32px; height: 32px; fill: none; stroke: var(--q-acc-text); stroke-width: 1.7; }
.photo__b small { color: var(--q-fg-2); font-size: var(--t-xs); }
.photo.has .photo__b { display: none; }
.photo__p { width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--r-m); }

/* сила подмеса цвета квеста в сказочных карточках: в тёмном режиме слабее, чтобы вторичный текст держал AA */
:root { --fx: 1; }
:root[data-scheme="dark"] { --fx: .42; }
/* ---------- квест «Сказочный лес» — отдельный процесс ---------- */
/* «сцена» поверх иллюстраций — всегда тёмная, как полосы-сцены Афиши в светлом режиме: локально переопределяем токены квеста */
.qintro .qbar, .qfinal .qbar, .qstep .qbar { --q-bg: var(--q-scene); --q-fg: var(--q-scene-fg); --q-fg-2: var(--q-scene-fg-2); --q-acc-text: var(--q-scene-acc); color: var(--q-fg); }
/* светлый режим: текст квеста тёмный — иллюстрация героя короче и раньше растворяется в фоне страницы */
:root[data-scheme="light"] .qintro__bg, :root[data-scheme="light"] .qfinal__bg { height: 46vh; max-height: 420px; }
:root[data-scheme="light"] .qintro__bg::after, :root[data-scheme="light"] .qfinal__bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--q-scene) 45%, transparent) 0, transparent 26%, transparent 55%, var(--q-bg) 100%); }
:root[data-scheme="light"] .qintro__in, :root[data-scheme="light"] .qfinal__in { padding-top: min(44vh, 400px); }
:root[data-scheme="light"] .qstep__hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--q-scene) 40%, transparent) 0, transparent 30%, transparent 70%, var(--q-bg) 100%); }
:root[data-scheme="light"] .qstep__in { margin-top: -12px; }
:root[data-scheme="light"] :is(.qintro, .qfinal, .qstep) h1 { text-shadow: none; }
body[data-route="quest"] .view { min-height: 100dvh; color: var(--q-fg); background: var(--q-bg); }
.qbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--q-bg) 92%, transparent), color-mix(in srgb, var(--q-bg) 70%, transparent)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--q-fg); }
.qbtn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--q-fg) 10%, transparent); color: inherit; }
.qbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.qbar__t { flex: 1; font-weight: 800; font-size: var(--t-m); }
.qseeds { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px 7px 9px; border-radius: var(--pill); background: color-mix(in srgb, var(--q-acc) 18%, transparent); color: var(--q-fg-2); font-size: var(--t-xs); font-weight: 700; }
.qseeds svg { width: 18px; height: 18px; fill: none; stroke: var(--q-acc-text); stroke-width: 2; stroke-linecap: round; }
.qseeds b { color: var(--q-fg); font-size: var(--t-m); }
/* панель поверх растра (интро, поляна, финал): «Квест», счётчик семян и кнопки — на тёмных стеклянных плашках, растр вокруг не глушим */
:is(.qintro, .qfinal, .qstep) .qbar__t { flex: 0 1 auto; min-width: 0; margin-right: auto; padding: 8px 14px; border-radius: var(--pill); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:is(.qintro, .qfinal, .qstep) :is(.qbar__t, .qseeds, .qbtn) { background: color-mix(in srgb, var(--q-scene) 74%, transparent); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-scene-fg) 14%, transparent); }
:is(.qintro, .qfinal, .qstep) .qseeds { color: var(--q-fg); }
:is(.qintro, .qfinal, .qstep) .qbtn:hover { background: color-mix(in srgb, var(--q-scene) 88%, transparent); }
:is(.qintro, .qfinal, .qstep) .qbtn:focus-visible { outline: 2px solid var(--q-scene-fg); outline-offset: 2px; box-shadow: 0 0 0 5px var(--q-scene); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.qintro, .qfinal, .qstep) :is(.qbar__t, .qseeds, .qbtn) { background: color-mix(in srgb, var(--q-scene) 86%, transparent); }
}
@media (max-width: 359px) { :is(.qintro, .qfinal, .qstep) .qbar { gap: 6px; padding: 0 8px; } :is(.qintro, .qfinal, .qstep) .qbar__t { padding: 8px 10px; } :is(.qintro, .qfinal, .qstep) .qseeds { padding: 7px 10px; } :is(.qintro, .qfinal, .qstep) .qseeds svg { display: none; } }
/* тёмный режим: надзаголовок героя и счёт финала стоят на растре — та же стеклянная плашка */
:root[data-scheme="dark"] :is(.qintro__in, .qfinal__in, .qstep__in) > .qkick, :root[data-scheme="dark"] .qfinal__n span { padding: 6px 12px; border-radius: var(--pill); background: color-mix(in srgb, var(--q-scene) 74%, transparent); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
:root[data-scheme="dark"] :is(.qintro__in, .qfinal__in, .qstep__in) > .qkick { width: fit-content; border-radius: 12px; }
:root[data-scheme="dark"] .qfinal__n span { border-radius: 12px; color: var(--q-fg); }
.qkick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--q-acc-text); }
.qkick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qfine { margin: 10px 0; font-size: var(--t-xs); color: var(--q-fg-2); }
.qh2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 28px 0 12px; font-size: var(--t-xl); font-weight: 800; }
.qh2 small { font-size: var(--t-xs); font-weight: 600; color: var(--q-fg-2); letter-spacing: 0; }
.qnote { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: color-mix(in srgb, var(--q-fg) 8%, transparent); font-size: var(--t-s); color: var(--q-fg); }
.qnote svg { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--q-acc-text); stroke-width: 2; }
.owl { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; }
.owl img { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--q-acc), 0 6px 18px rgb(0 0 0 / 35%); }
.owl p { position: relative; margin: 0; padding: 12px 14px; border-radius: 4px var(--r-m) var(--r-m) var(--r-m); background: var(--q-bubble); color: var(--q-on-bubble); box-shadow: 0 0 0 1px var(--card-ring); font-size: var(--t-s); font-weight: 550; line-height: 1.45; }
.owl--card { margin: 14px 16px 0; }
/* интро */
.qintro { position: relative; min-height: 100dvh; isolation: isolate; }
.qintro__bg, .qfinal__bg { position: absolute; inset: 0 0 auto; height: 78vh; max-height: 720px; z-index: -1; overflow: hidden; }
.qintro__bg img, .qfinal__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.qintro__bg::after, .qfinal__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--q-bg) 30%, transparent) 0, transparent 22%, color-mix(in srgb, var(--q-bg) 55%, transparent) 55%, var(--q-bg) 100%); }
.qintro .qbar, .qfinal .qbar { background: linear-gradient(180deg, color-mix(in srgb, var(--q-bg) 70%, transparent), transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
.qintro__in, .qfinal__in { padding: 34vh 16px 32px; }
.qintro h1, .qfinal h1, .qstep h1 { margin: 8px 0 0; font-size: 44px; font-weight: 800; letter-spacing: -.035em; line-height: 1; text-shadow: 0 2px 24px rgb(0 0 0 / 45%); }
.qhow { list-style: none; counter-reset: q; margin: 8px 0 18px; padding: 0; display: grid; gap: 8px; }
.qhow li { counter-increment: q; position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 50px; border-radius: var(--r-m); background: color-mix(in srgb, var(--q-fg) 7%, transparent); border: 1px solid color-mix(in srgb, var(--q-fg) 12%, transparent); }
.qhow li::before { content: counter(q); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--q-acc); color: var(--q-on-acc); font-size: 13px; font-weight: 800; }
.qhow b { font-size: var(--t-s); }
.qhow span { font-size: var(--t-xs); color: var(--q-fg-2); }
/* тропа */
.qpath { position: relative; isolation: isolate; min-height: 100dvh; padding-bottom: 150px; background: radial-gradient(120% 50% at 50% 0, var(--q-glow), transparent 70%), linear-gradient(180deg, var(--q-bg) 0, var(--q-bg-2) 60%, var(--q-bg) 100%); }
.qhead { position: relative; isolation: isolate; overflow: hidden; margin: 8px 16px 0; padding: 16px; border-radius: var(--r-l); background: radial-gradient(70% 90% at 100% 0, color-mix(in srgb, var(--q-acc) calc(55% * var(--fx, 1)), var(--q-bg)), transparent 70%), linear-gradient(120deg, color-mix(in srgb, var(--q-acc) calc(22% * var(--fx, 1)), var(--q-bg)), color-mix(in srgb, var(--q-acc) calc(34% * var(--fx, 1)), var(--q-bg))); border: 1px solid color-mix(in srgb, var(--q-acc-text) 30%, transparent); }
.qhead::before { content: ""; position: absolute; z-index: -1; top: -12px; right: -12px; width: 120px; height: 120px; background: var(--fairy-tr) right top / contain no-repeat; -webkit-mask-image: linear-gradient(200deg, #000 40%, transparent 70%); mask-image: linear-gradient(200deg, #000 40%, transparent 70%); pointer-events: none; }
.qhead__n { display: flex; align-items: center; gap: 8px; padding-right: 44px; }
.qhead__n svg { width: 34px; height: 34px; fill: none; stroke: var(--q-acc-text); stroke-width: 1.8; stroke-linecap: round; }
.qhead__n b { font-size: 46px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.qhead__n span { align-self: flex-end; white-space: nowrap; padding-bottom: 6px; font-size: var(--t-s); color: var(--q-fg-2); font-weight: 650; }
.qbar2 { position: relative; height: 10px; margin-top: 12px; border-radius: var(--pill); background: color-mix(in srgb, var(--q-fg) 12%, transparent); }
.qbar2 i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--sun); transition: width .5s; }
.qbar2 em { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--q-fg); }
.qhead p { margin: 10px 0 0; font-size: var(--t-s); color: var(--q-fg-2); }
.qhead p b { color: var(--q-fg); }
.qnow { display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 8px 14px 8px 8px; border-radius: var(--r-l); background: var(--q-acc); color: var(--q-on-acc); text-decoration: none; box-shadow: 0 10px 30px color-mix(in srgb, var(--q-acc) 25%, transparent); }
.qnow img { width: 84px; height: 64px; object-fit: cover; border-radius: var(--r-m); }
.qnow > span { flex: 1; display: grid; min-width: 0; }
.qnow small { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.qnow b { font-size: var(--t-l); font-weight: 800; }
.qnow em { font-style: normal; font-size: var(--t-xs); font-weight: 650; }
.qnow > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.trail { position: relative; list-style: none; margin: 18px 0 0; padding: 10px 16px 0; display: grid; gap: 22px; }
.trail__svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.trail__base { fill: none; stroke: color-mix(in srgb, var(--q-fg) 28%, transparent); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.trail__done { fill: none; stroke: var(--q-ok); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--q-ok) 60%, transparent)); }
.node { position: relative; margin-left: var(--x); width: min(250px, calc(100% - var(--x))); }
.node__a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.node__m { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; padding: 4px; background: var(--q-bg-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-fg) 30%, transparent), 0 8px 24px rgb(0 0 0 / 40%); }
.node__m img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.node__st { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--q-fg); color: var(--q-bg); font-size: 14px; font-weight: 800; box-shadow: 0 0 0 3px var(--q-bg); }
.node__st svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.node__t { display: grid; min-width: 0; padding: 6px 10px; border-radius: var(--r-m); background: color-mix(in srgb, var(--q-bg) 72%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.node__t small { font-size: 11px; font-weight: 700; color: var(--q-fg-2); font-variant-numeric: tabular-nums; }
.node__t b { font-size: var(--t-m); font-weight: 800; line-height: 1.2; }
.node__t em { font-style: normal; font-size: 12px; color: var(--q-fg-2); }
.node--done .node__m { box-shadow: 0 0 0 3px var(--q-ok), 0 8px 24px rgb(0 0 0 / 40%); }
.node--done .node__st { background: var(--q-ok); color: var(--q-on-ok); }
.node--soon .node__m img, .node--wait .node__m img, .node--closed .node__m img { filter: grayscale(.7) brightness(.6); }
.node--soon .node__t, .node--wait .node__t { opacity: .8; }
.node.is-now .node__m { box-shadow: 0 0 0 3px var(--q-ring), 0 0 0 9px color-mix(in srgb, var(--q-ring) 22%, transparent), 0 8px 24px rgb(0 0 0 / 40%); animation: glow 2.4s ease-in-out infinite; }
.node.is-now .node__st { background: var(--q-acc); color: var(--q-on-acc); }
.node.is-now em { color: var(--q-acc-text); font-weight: 700; }
.node--fin .node__m { width: 104px; height: 104px; box-shadow: 0 0 0 3px var(--q-gold), 0 0 30px rgb(232 196 106 / 40%); }
.node--fin.is-fin .node__st { background: var(--q-gold); color: var(--q-on-acc); }
.qdemo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 26px 16px 0; padding: 10px 10px 10px 14px; border-radius: var(--r-m); border: 1px dashed color-mix(in srgb, var(--q-fg) 25%, transparent); font-size: var(--t-xs); color: var(--q-fg-2); }
.qdemo .btn { min-height: 44px; padding: 0 14px; }
/* сказочный растр в нижнем правом углу тропы — под последним блоком, текст не задевает */
.qpath::after { content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; width: 180px; height: 180px; background: var(--fairy) left bottom / contain no-repeat; transform: scaleX(-1); pointer-events: none; }
/* поляна */
.qstep { position: relative; isolation: isolate; min-height: 100dvh; background: linear-gradient(180deg, var(--q-bg) 0, var(--q-bg-2) 100%); }
.qstep .qbar { position: absolute; left: 0; right: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--q-bg) 75%, transparent), transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
.qstep__hero { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.qstep__hero img { width: 100%; height: 100%; object-fit: cover; }
.qstep__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--q-bg) 100%); }
.qstep__in { position: relative; margin-top: -56px; padding: 0 16px 120px; }
.qstep::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 170px; height: 170px; background: var(--fairy) left bottom / contain no-repeat; pointer-events: none; }
.qstep h1 { font-size: 38px; }
.qslot { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--q-fg) 16%, transparent); border-radius: var(--r-m); background: color-mix(in srgb, var(--q-fg) 6%, transparent); color: inherit; text-align: left; cursor: pointer; flex-wrap: wrap; position: relative; }
.qslot:hover { background: color-mix(in srgb, var(--q-fg) 10%, transparent); }
.qslot__k { flex-basis: 100%; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--q-ok-text); }
.qslot b { flex-basis: calc(100% - 30px); font-size: var(--t-m); line-height: 1.3; }
.qslot__m { display: flex; align-items: center; gap: 6px; flex-basis: 100%; font-size: var(--t-xs); color: var(--q-fg-2); }
.qslot__m .ava + .ava { margin-left: -12px; }
.qslot > svg { position: absolute; right: 12px; top: 50%; margin-top: -10px; width: 20px; height: 20px; fill: none; stroke: var(--q-fg-2); stroke-width: 2; }
.tasks { list-style: none; margin: 0; padding: 6px 0 0; display: grid; gap: 14px; }
.tasks li { position: relative; }
.task { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px 14px 12px; border: 1px solid color-mix(in srgb, var(--q-acc-text) 30%, transparent); border-radius: var(--r-m); background: radial-gradient(60% 90% at 100% 100%, color-mix(in srgb, var(--q-acc) calc(45% * var(--fx, 1)), var(--q-bg)), transparent 70%), linear-gradient(100deg, color-mix(in srgb, var(--kc, var(--q-acc)) calc(26% * var(--fx, 1)), var(--q-bg)), color-mix(in srgb, var(--q-acc) calc(30% * var(--fx, 1)), var(--q-bg))); color: inherit; text-align: left; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--q-acc) calc(18% * var(--fx, 1)), transparent); }
/* сказочный «стикер» растра на верхнем правом углу карточки (над счётчиком семян, текст не задевает) */
.tasks li::after { content: ""; position: absolute; top: -14px; right: 12px; width: 38px; height: 38px; background: url(img/quest/deco/mushroom.webp) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)); pointer-events: none; }
.tasks li:nth-child(5n+2)::after { background-image: url(img/quest/deco/bells.webp); }
.tasks li:nth-child(5n+3)::after { background-image: url(img/quest/deco/acorn.webp); }
.tasks li:nth-child(5n+4)::after { background-image: url(img/quest/deco/fern.webp); }
.tasks li:nth-child(5n)::after { background-image: url(img/quest/deco/lantern.webp); }
.task:active, .qslot:active, .club__more:active, .host:active, .pslot__b:active { transform: scale(.985); }
.task:hover { border-color: var(--q-acc-text); filter: saturate(1.1); }
.task__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--q-acc); color: var(--q-on-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kc, var(--q-acc)) 55%, transparent); }
.task__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.task__m { flex: 1; display: grid; min-width: 0; }
.task__m small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--q-acc-text); }
.task__m b { font-size: var(--t-m); font-weight: 750; line-height: 1.25; }
.task__m em { font-style: normal; font-size: var(--t-xs); color: var(--q-fg-2); }
.task__s { flex: none; padding: 4px 10px; border-radius: var(--pill); background: var(--q-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-acc-text) 40%, transparent); color: var(--q-acc-text); font-weight: 800; font-size: var(--t-s); }
.task--done { border-color: color-mix(in srgb, var(--q-ok) 50%, transparent); background: color-mix(in srgb, var(--q-ok) 14%, var(--q-bg)); box-shadow: none; }
.task--done .task__s { background: none; }
.tasks li:has(.task--done, .task--soon, .task--wait, .task--closed, .task--later)::after { opacity: .55; filter: grayscale(.4); }
.task--done .task__ic { background: var(--q-ok); color: var(--q-on-ok); }
.task--done .task__s { background: none; box-shadow: none; color: var(--q-fg-2); text-decoration: line-through; }
.task--soon, .task--wait, .task--closed, .task--later { opacity: .65; background: color-mix(in srgb, var(--q-fg) 7%, var(--q-bg)); box-shadow: none; }
.task--soon .task__ic, .task--wait .task__ic, .task--closed .task__ic, .task--later .task__ic { background: color-mix(in srgb, var(--q-fg) 12%, transparent); color: var(--q-fg); box-shadow: none; }
.qpass { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-m); background: color-mix(in srgb, var(--q-ok) 18%, transparent); border: 1px solid color-mix(in srgb, var(--q-ok) 45%, transparent); }
.qpass svg { width: 22px; height: 22px; fill: none; stroke: var(--q-ok-text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.qpass span { flex-basis: 100%; font-size: var(--t-s); color: var(--q-fg-2); }
.qnav { display: flex; justify-content: space-between; gap: 8px; margin-top: 22px; }
.qnav .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* финал */
.qfinal { position: relative; min-height: 100dvh; isolation: isolate; }
.qfinal__n { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.qfinal__n b { font-size: 64px; line-height: .9; font-weight: 800; color: var(--q-gold-text); text-shadow: 0 0 30px color-mix(in srgb, var(--q-gold) 45%, transparent); font-variant-numeric: tabular-nums; }
.qfinal__n span { font-size: var(--t-s); color: var(--q-fg-2); font-weight: 650; line-height: 1.25; }
.mainprize { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-l); background: linear-gradient(135deg, color-mix(in srgb, var(--q-gold) 22%, transparent), color-mix(in srgb, var(--q-acc) 12%, transparent)); border: 1px solid color-mix(in srgb, var(--q-gold) 40%, transparent); }
.mainprize b { font-size: var(--t-xl); font-weight: 800; }
.mainprize p { margin: 0; font-size: var(--t-s); color: var(--q-fg-2); }
.board { list-style: none; margin: 0; padding: 6px; border-radius: var(--r-l); background: color-mix(in srgb, var(--q-fg) 6%, transparent); border: 1px solid color-mix(in srgb, var(--q-fg) 12%, transparent); }
.board li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font-size: var(--t-s); }
.board li + li { border-top: 1px solid color-mix(in srgb, var(--q-fg) 10%, transparent); }
.board .b-n { width: 26px; font-weight: 800; color: var(--q-fg-2); font-variant-numeric: tabular-nums; }
.board .b-name { flex: 1; font-weight: 650; }
.board .b-name i { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: var(--pill); background: var(--q-acc); color: var(--q-on-acc); font-size: 11px; font-weight: 800; }
.board .b-s { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--q-fg-2); }
.board .fin .b-s { color: var(--q-gold-text); }
.board .me { background: color-mix(in srgb, var(--q-acc) 18%, transparent); border-top-color: transparent; }
.board .me + li { border-top-color: transparent; }
.lots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lots li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-m); background: color-mix(in srgb, var(--q-fg) 6%, transparent); }
.lots li > span { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--q-acc) 20%, transparent); color: var(--q-acc-text); }
.lots svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.lots b { display: block; font-size: var(--t-s); }
.lots small { font-size: var(--t-xs); color: var(--q-fg-2); }
.qfinal .btn--block { margin-top: 18px; }
/* шторка задания — лесная */
.sheet--forest { background: linear-gradient(180deg, var(--q-bg-2), var(--q-bg)); color: var(--q-fg); }
.sheet--forest .sheet-x { background: color-mix(in srgb, var(--q-fg) 10%, transparent); color: var(--q-fg); }
.sheet--forest .sh-k { color: var(--q-acc-text); }
.sheet--forest .opts span, .sheet--forest .chk span { background: color-mix(in srgb, var(--q-fg) 7%, transparent); color: var(--q-fg); }
.sheet--forest .opts span::before, .sheet--forest .chk span::before { background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--q-fg) 45%, transparent); }
.sheet--forest .opts input:checked + span, .sheet--forest .chk input:checked + span { color: var(--q-acc-text); }
.sheet--forest .opts input:checked + span { background: color-mix(in srgb, var(--q-acc) 12%, transparent); }
.sheet--forest .opts input:checked + span::before { box-shadow: inset 0 0 0 6px var(--q-ring); }
.sheet--forest .chk input:checked + span::before { background: var(--q-ring); }
.sheet--forest .fld input { background: color-mix(in srgb, var(--q-fg) 8%, transparent); border-color: color-mix(in srgb, var(--q-fg) 30%, transparent); color: var(--q-fg); }
.sheet--forest .fld input::placeholder { color: color-mix(in srgb, var(--q-fg) 50%, transparent); }
.sheet--forest .fld input:focus { border-color: var(--q-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-acc) 25%, transparent); }
.sheet--forest .err { color: var(--bad-text); background: color-mix(in srgb, var(--bad-text) 12%, transparent); }
.sheet--forest .club-pill { color: #0b0b10; background: color-mix(in srgb, var(--kc) 75%, #fff); }
.sheet--forest :focus-visible { outline-color: var(--q-fg); }
.viewfinder { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 34dvh; margin: 8px auto 12px; border-radius: var(--r-l); background: radial-gradient(circle at 50% 40%, #2b4a42, #0b1714 75%); overflow: hidden; }
.viewfinder i { position: absolute; width: 44px; height: 44px; border: 4px solid var(--q-acc); }
.viewfinder i:nth-child(1) { left: 18%; top: 18%; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.viewfinder i:nth-child(2) { right: 18%; top: 18%; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.viewfinder i:nth-child(3) { left: 18%; bottom: 18%; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.viewfinder i:nth-child(4) { right: 18%; bottom: 18%; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.viewfinder .laser { position: absolute; left: 22%; right: 22%; height: 2px; background: var(--q-acc); box-shadow: 0 0 12px var(--q-acc); animation: scan 2.2s ease-in-out infinite alternate; }
.viewfinder p { position: absolute; bottom: 4%; left: 8%; right: 8%; margin: 0; font-size: var(--t-xs); color: #e4e4ea; text-align: center; }
.viewfinder.flash { animation: flash .3s; }

/* ---------- «+семена» ---------- */
.bright { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--q-glow) 97%, transparent), color-mix(in srgb, var(--q-bg) 98%, transparent)); color: var(--q-fg); overflow: hidden; }
.bright.show { display: grid; animation: fade .2s; }
.cele { position: relative; display: grid; justify-items: center; gap: 10px; width: min(360px, 100%); padding: 24px; text-align: center; }
.cele__owl { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--q-acc), 0 0 40px color-mix(in srgb, var(--q-acc) 35%, transparent); }
.cele__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-l); box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-ok) 70%, transparent), 0 20px 50px rgb(0 0 0 / 45%); }
.cele-n { display: grid; place-items: center; min-width: 96px; height: 56px; margin-top: -36px; padding: 0 18px; border-radius: var(--pill); background: var(--q-acc); color: var(--q-on-acc); font-size: 30px; font-weight: 800; box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-bg) 90%, transparent); animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.cele b { font-size: var(--t-xl); }
.cele p { margin: 0 0 8px; color: var(--q-fg-2); font-size: var(--t-s); }
.cele .btn { min-width: 220px; }
.burst i { position: absolute; left: 50%; top: 46%; width: 10px; height: 16px; border-radius: 3px; background: var(--q-acc); animation: burst 1.1s ease-out forwards; }
.burst i:nth-child(3n) { background: #e3a0b2; } .burst i:nth-child(3n+1) { background: var(--q-ok); } .burst i:nth-child(4n) { background: var(--q-gold-text); }
.burst i:nth-child(1) { --dx: -150px; --dy: -190px; } .burst i:nth-child(2) { --dx: 140px; --dy: -200px; } .burst i:nth-child(3) { --dx: -190px; --dy: -60px; } .burst i:nth-child(4) { --dx: 190px; --dy: -80px; }
.burst i:nth-child(5) { --dx: -100px; --dy: -250px; } .burst i:nth-child(6) { --dx: 90px; --dy: -260px; } .burst i:nth-child(7) { --dx: -200px; --dy: 60px; } .burst i:nth-child(8) { --dx: 200px; --dy: 50px; }
.burst i:nth-child(9) { --dx: -40px; --dy: -280px; } .burst i:nth-child(10) { --dx: 30px; --dy: -230px; } .burst i:nth-child(11) { --dx: -160px; --dy: 150px; } .burst i:nth-child(12) { --dx: 160px; --dy: 160px; }
.burst i:nth-child(13) { --dx: -240px; --dy: -150px; } .burst i:nth-child(14) { --dx: 240px; --dy: -140px; }
@keyframes burst { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(400deg); opacity: 0; } }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes up { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes fade { from { opacity: 0; } }
@keyframes scan { from { top: 24%; } to { top: 74%; } }
@keyframes flash { 50% { box-shadow: inset 0 0 0 999px rgb(255 255 255 / 40%); } }
@keyframes glow { 50% { box-shadow: 0 0 0 3px var(--q-ring), 0 0 0 14px color-mix(in srgb, var(--q-ring) 10%, transparent), 0 8px 24px rgb(0 0 0 / 40%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------- десктоп: телефон по центру + панель о прототипе ---------- */
.deskside { display: none; }
@media (min-width: 1000px) {
  body { background: radial-gradient(1200px 700px at 15% 10%, var(--bg-2) 0, var(--bg) 60%); }
  .shell { margin: 24px auto; min-height: calc(100dvh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overflow-x: hidden; border-radius: 34px; box-shadow: 0 0 0 10px #0b0b10, 0 30px 80px rgb(0 0 0 / 30%); transform: translateX(170px); scrollbar-width: thin; padding-bottom: 0; }
  .dock { position: sticky; left: auto; transform: none; bottom: 0; width: 100%; height: var(--dock-h); padding-bottom: 6px; margin-top: 24px; }
  .view { min-height: calc(100dvh - 48px - var(--top-h) - var(--dock-h) - 24px); }
  body[data-route="quest"] .view { min-height: calc(100dvh - 48px); }
  .qintro, .qpath, .qstep, .qfinal { min-height: calc(100dvh - 48px); }
  .qintro__in, .qfinal__in { padding-top: 260px; }
  .overlay .sheet { left: calc(50% + 170px); bottom: 24px; max-height: calc(100dvh - 110px); border-radius: var(--r-l) var(--r-l) 30px 30px; }
  .toast { left: calc(50% + 170px); bottom: 110px; max-width: 340px; }
  .bright { left: calc(50% - 70px); right: auto; width: 480px; top: 24px; bottom: 24px; border-radius: 34px; }
  .deskside { display: block; position: fixed; top: 50%; left: calc(50% - 470px); width: 380px; transform: translateY(-50%); color: var(--text); }
  .ds h2 { margin: 14px 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
  .ds p { font-size: var(--t-s); color: var(--text-2); }
  .ds p b { color: var(--text); }
  .ds-qr { display: flex; gap: 14px; align-items: center; margin: 18px 0; padding: 12px; border-radius: var(--r-m); background: #fff; color: #4d4d5a; box-shadow: var(--shadow); }
  .ds-qr .qr { width: 112px; height: 112px; flex: none; }
  .ds-qr span { font-size: var(--t-xs); }
  .ds-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .ds-l a { font-weight: 750; }
}
@media (min-width: 1000px) and (max-height: 760px) { .deskside .ds-qr .qr { width: 84px; height: 84px; } }
@media (max-width: 349px) { .pparts { grid-auto-columns: minmax(0, 1fr); } .pparts button { padding: 0 4px; gap: 3px; font-size: 13px; min-width: 0; } .pparts button svg { display: none; } }
.nw { white-space: nowrap; }
@media (max-width: 359px) { .tab-quest { gap: 4px; white-space: nowrap; } .tab-quest > svg { display: none; } }

/* ---------- v6 (задача 1793598713): нижняя панель на 5 вкладок — Главная · Карта · Квест · Ведущие · Розыгрыш ---------- */
.dock { grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr; padding-left: 6px; padding-right: 6px; gap: 2px; }
.tab { font-size: 11px; letter-spacing: -.01em; min-width: 0; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-gift[aria-current] svg { color: #e27d98; stroke-width: 2.2; }
.eyebrow { display: block; margin: 18px 16px 0; font-size: var(--t-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.eyebrow + .h1s { margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; margin: 0 0 16px; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-s); font-weight: 700; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- Ведущие и мастера ---------- */
.hostsp > .lead, .hostsp > .fine { margin-left: 16px; margin-right: 16px; }
.hlead { display: block; width: calc(100% - 32px); margin: 0 16px 6px; padding: 3px; border: 0; border-radius: var(--r-l); background: var(--sun); text-align: left; cursor: pointer; color: inherit; font: inherit; }
.hlead__in { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: calc(var(--r-l) - 3px); background: var(--surface); }
.hlead img { width: 68px; height: 68px; flex: none; border-radius: var(--r-m); object-fit: cover; }
.hlead__in > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hlead small { font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hot); }
.hlead b { font-size: var(--t-l); font-weight: 800; line-height: 1.2; }
.hlead em { font-style: normal; font-size: var(--t-xs); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hlead > span > svg, .hlead__in > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--text-2); stroke-width: 2; }
.hgroup { margin: 26px 16px 0; }
.hgroup__h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; }
.hgroup__h i { width: 12px; height: 12px; border-radius: 50%; }
.hgroup__h small { flex-basis: 100%; font-size: var(--t-xs); font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.htile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; padding: 0; border: 0; border-radius: var(--r-m); background: var(--ink-3); cursor: pointer; text-align: left; color: #fff; box-shadow: var(--shadow); }
.htile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.htile:hover img { transform: scale(1.04); }
.htile__mono { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(160deg, #edbe5a, #e27d98); color: #0b0b10; font-size: 40px; font-weight: 800; }
.htile__dot { position: absolute; left: 10px; top: 10px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.htile__cap { position: absolute; inset: auto 0 0; display: grid; gap: 2px; max-height: 64%; overflow: hidden; padding: 36px 10px 10px; background: linear-gradient(to top, rgb(11 11 16 / 92%), rgb(11 11 16 / 55%) 60%, transparent); }
.htile__cap b { font-size: var(--t-s); font-weight: 800; line-height: 1.2; }
.htile__cap small { font-size: 12px; line-height: 1.25; color: rgb(255 255 255 / 86%); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 440px) { .hgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.htags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.htag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pill); background: color-mix(in srgb, var(--kc) 22%, var(--surface)); font-size: 12px; font-weight: 700; }
.htag i { width: 8px; height: 8px; border-radius: 50%; background: var(--kc); }
.hat { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-m); background: color-mix(in srgb, #e8a838 14%, var(--surface)); }
.hat b { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.hat p { margin: 4px 0 0; font-size: var(--t-s); }
.hq { margin: 14px 0 0; padding: 0 0 0 14px; border-left: 3px solid #e27d98; font-size: var(--t-s); font-style: italic; color: var(--text-2); }
.reg-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.reg-l li { position: relative; padding-left: 18px; font-size: var(--t-s); line-height: 1.4; }
.reg-l li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }
.plinks { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.plinks a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: var(--pill); background: var(--bg-2); color: var(--text); font-size: var(--t-xs); font-weight: 700; text-decoration: none; }
.plinks svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.sheet .btn--block { margin-top: 16px; }

/* ---------- Розыгрыш: праздничная страница ---------- */
.raffle > .lead, .raffle > .facts, .raffle > .btn { margin-left: 16px; margin-right: 16px; }
.raffle > .btn--block { width: calc(100% - 32px); margin-top: 12px; }
.rhero { position: relative; overflow: hidden; margin: 14px 16px 0; padding: 22px 18px 18px; border-radius: var(--r-l); background: linear-gradient(135deg, #e8a838, #e5844f 28%, #e27d98 56%, #a68bdb 80%, #7db9e3); color: #0b0b10; isolation: isolate; }
.rhero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 90% 0, rgb(255 255 255 / 45%), transparent 55%); }
.rhero__k { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill); background: rgb(255 255 255 / 70%); font-size: var(--t-xs); font-weight: 800; }
.rhero__k svg, .rmain__k svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rhero h1 { margin: 14px 0 6px; font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.rhero p { margin: 0; max-width: 32ch; font-size: var(--t-s); font-weight: 600; }
.rhero__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.rhero .btn--ink { background: #0b0b10; color: #fff; }
.rcount { display: grid; }
.rcount small { font-size: var(--t-xs); font-weight: 700; }
.rcount b { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; }
.confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.confetti i { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 5px; border-radius: 2px; background: #fff; opacity: .7; transform: rotate(var(--r)); }
.confetti i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; background: #0b0b10; opacity: .18; }
.confetti i:nth-child(4n) { background: #fff3a6; opacity: .9; }
@media (prefers-reduced-motion: no-preference) { .confetti i { animation: drift 6s ease-in-out infinite alternate; animation-delay: var(--d); } }
@keyframes drift { to { transform: rotate(calc(var(--r) + 120deg)) translateY(8px); } }
.rmain { position: relative; margin: 12px 16px 0; padding: 20px 18px; border-radius: var(--r-l); background: #325a50; color: #fff; overflow: hidden; }
.rmain::before { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgb(245 162 76 / 55%), transparent 70%); }
.rmain__k { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #ffd08a; }
.rmain h2 { position: relative; margin: 10px 0 8px; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.rmain__v { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.rmain__v b { padding: 4px 12px; border-radius: var(--pill); background: #f5a24c; color: #1a1a18; font-size: var(--t-s); font-weight: 800; }
.rmain__v span { font-size: var(--t-s); font-weight: 700; color: rgb(255 255 255 / 85%); }
.rmain p { position: relative; margin: 8px 0 0; font-size: var(--t-s); color: rgb(255 255 255 / 86%); }
.rmain .btn { margin-top: 16px; white-space: normal; text-align: center; }
.rh2 small { font-size: var(--t-l); color: var(--text-2); font-weight: 700; }
.lots2 { list-style: none; margin: 0 16px; padding: 0; display: grid; gap: 8px; }
.lot { border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-ring), inset 4px 0 0 var(--fc); overflow: hidden; }
.lot[open] { box-shadow: inset 0 0 0 2px var(--fc); background: color-mix(in srgb, var(--fc) 8%, var(--surface)); }
.lot summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px 10px 14px; cursor: pointer; list-style: none; }
.lot summary::-webkit-details-marker { display: none; }
.lot__t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lot__t b { font-size: var(--t-s); font-weight: 750; line-height: 1.25; }
.lot__t small { font-size: var(--t-xs); color: var(--text-2); }
.lot__v { flex: none; max-width: 92px; padding: 4px 8px; border-radius: var(--pill); background: color-mix(in srgb, var(--fc) 30%, var(--surface)); font-size: 12px; font-weight: 800; text-align: center; line-height: 1.2; }
.lot__chev svg { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 2; transition: transform .2s; }
.lot[open] .lot__chev svg { transform: rotate(90deg); }
.lot__body { padding: 0 14px 14px; }
.lot__body p { margin: 0 0 8px; font-size: var(--t-s); line-height: 1.45; }
.lot__x { display: inline-block; padding: 3px 10px; border-radius: var(--pill); background: color-mix(in srgb, var(--fc) 30%, var(--surface)); font-size: var(--t-xs) !important; font-weight: 800; }
.lot__p { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 4px; padding: 10px; border: 0; border-radius: var(--r-m); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--card-ring); }
.lot__p > span:not(.plogo) { flex: 1; min-width: 0; display: grid; }
.lot__p small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.lot__p b { font-size: var(--t-s); }
.lot__p em { font-style: normal; font-size: var(--t-xs); color: var(--text-2); }
.lot__p > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--text-2); stroke-width: 2; }
.plogo { width: 44px; height: 44px; flex: none; border-radius: 12px; object-fit: cover; background: var(--bg-2); }
.plogo--logo { display: grid; place-items: center; padding: 4px; background: #fff; box-shadow: inset 0 0 0 1px rgb(11 11 16 / 10%); }
.plogo--logo img { width: 100%; height: 100%; object-fit: contain; }
.plogo--mono { display: grid; place-items: center; background: var(--pc); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.plogo--s { width: 40px; height: 40px; }
.plogo--xl { width: 88px; height: 88px; border-radius: var(--r-m); font-size: 28px; }
.pwall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 16px; }
.pcard { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 6px 12px; border: 0; border-radius: var(--r-m); background: var(--bg-2); color: inherit; font: inherit; text-align: center; cursor: pointer; }
.pcard:hover { background: color-mix(in srgb, var(--text) 8%, var(--bg-2)); }
.pcard .plogo { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 4px; }
.pcard .plogo--logo { border-radius: 50%; padding: 6px; }
.pcard b { font-size: 12px; font-weight: 800; line-height: 1.2; }
.pcard small { font-size: 11px; color: var(--text-2); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rfacts { margin-top: 24px !important; }
.ps { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
.ps h2 { margin: 2px 40px 0 0; font-size: var(--t-xl); }
.ps .fine { margin: 2px 0 0; }
.ps-lots { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ps-lots li { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-m); background: color-mix(in srgb, #e8a838 14%, var(--surface)); }
.ps-lots svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ps-lots span { display: grid; }
.ps-lots b { font-size: var(--t-s); }
.ps-lots small { font-size: var(--t-xs); color: var(--text-2); }
.qprizes { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; padding: 14px; border-radius: var(--r-m); background: linear-gradient(135deg, #e8a838, #e27d98 60%, #a68bdb); color: #0b0b10; text-decoration: none; }
.qprizes span { flex: 1; display: grid; }
.qprizes b { font-size: var(--t-m); }
.qprizes small { font-size: var(--t-xs); font-weight: 600; }
.qprizes svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 359px) { .rhero h1 { font-size: 32px; } .lot__v { max-width: 72px; } .pwall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tab-quest span { overflow: visible; }
@media (max-width: 479px) { .tab-quest { gap: 4px; } .tab-quest > svg { display: none; } }
.lots2 > li, .lot { min-width: 0; }
.lot__t b { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 359px) { .tab { font-size: 10px; } .lot summary { gap: 8px; padding-left: 10px; } .lot .plogo { width: 36px; height: 36px; } }
.stick:has(> .hseg) { margin-bottom: 10px; }
.hseg button { min-width: 0; padding: 0 6px; }

/* ---------- премиум-доводка по образцу Эмпатиума и БРИКС (задача 1793642409, .claude/preship/premium-audit-dr-tpp.md) ----------
   карточки — белая поверхность с тонким кольцом и мягкой «приподнятой» тенью вместо серых плашек; нажатие — лёгкое сжатие */
:root { --lift: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 22px -12px rgb(0 0 0 / 16%); }
:root[data-scheme="dark"] { --lift: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 24px -12px rgb(0 0 0 / 55%); }
.pslot, .facts > li, .acq, .club2, .pcard, .pass { background: var(--surface); box-shadow: 0 0 0 1px var(--card-ring), var(--lift); }
.pslot.live { box-shadow: inset 0 0 0 2px var(--text), var(--shadow); }
.pslot__host .ava + .ava { box-shadow: 0 0 0 2px var(--surface); }
.pass__qr { background: var(--bg-2); }
.htile { border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--card-ring), var(--lift); }
.acq, .club2, .pcard, .htile, .hlead, .pslot__b, .lot summary { transition: transform .15s, box-shadow .2s; }
:is(.acq, .pcard, .htile, .hlead):active, .pslot__b:active { transform: scale(.985); }
@media (hover: hover) { :is(.acq, .pcard):hover { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow); } }
/* заголовки разделов — плотнее и с фирменной «солнечной» чертой, как eyebrow-акценты Эмпатиума */
.h2::before { content: ''; flex: none; width: 6px; height: .9em; border-radius: 3px; background: var(--sun); }
.h1s { letter-spacing: -.035em; }
@media (prefers-reduced-motion: reduce) { :is(.acq, .pcard, .htile, .hlead):active, .pslot__b:active, .pparts button:active { transform: none; } }

/* ---------- плашка клуба как на Афише (задача 1793643743): лид с лицами мастеров → капсула-вкладки → белая карточка раздела; окно мастера с листанием ---------- */
.cs-sub { margin: 6px 0 12px; font-size: var(--t-s); line-height: 1.45; }
.cs-lead { display: flex; align-items: center; gap: 6px; }
.cs-lead svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cs-note { display: inline-block; margin: 10px 0 0; padding: 3px 10px; border-radius: var(--pill); background: color-mix(in srgb, var(--kc) 34%, var(--surface)); font-size: var(--t-xs); font-weight: 750; }
.cfaces, .club2__faces { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; margin: 0 0 10px; padding: 4px 14px 4px 4px; border: 0; border-radius: var(--pill); background: color-mix(in srgb, var(--kc) 26%, var(--surface)); color: var(--text); font: inherit; font-size: var(--t-xs); font-weight: 750; cursor: pointer; transition: transform .15s; }
.club2__faces { min-height: 44px; margin: 0; padding: 3px 12px 3px 3px; white-space: nowrap; }
.cfaces > span:first-child, .club2__faces > span:first-child { display: inline-flex; }
.cfaces .ava, .club2__faces .ava { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--surface); }
.club2__faces .ava { width: 26px; height: 26px; }
.cfaces .ava + .ava, .club2__faces .ava + .ava { margin-left: -10px; }
.cfaces:active, .club2__faces:active, .cmst__b:active, .cwho:active { transform: scale(.97); }
.ctabs-st { position: sticky; top: -22px; z-index: 3; margin: 0 -18px; padding: 8px 18px 10px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.ctabs { margin: 0; }
.ctabs button small { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: color-mix(in srgb, var(--on-ink) 16%, transparent); font-size: 12px; font-weight: 800; }
.ctabs button[aria-selected="true"] small { background: rgb(0 0 0 / 14%); }
@media (max-width: 440px) { .ctabs--4 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; border-radius: 28px; } .ctabs--4 button { min-height: 44px; } }
.cpanel { margin: 4px 0 14px; padding: 14px 14px 12px; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--card-ring), var(--lift); outline-offset: 3px; }
.cpanel > p { margin: 0 0 10px; font-size: var(--t-s); line-height: 1.5; }
.cpanel > .fine { margin: 10px 0 0; }
.cpanel__h { margin: 0 0 6px !important; font-size: 12px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.cpanel .reg-l { margin-bottom: 10px; }
.cprog, .cday, .cmst, .crows { list-style: none; margin: 0; padding: 0; }
.cprog li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.cprog li:first-child, .cday li:first-child { border-top: 0; }
.cprog time { font-size: var(--t-s); font-weight: 800; font-variant-numeric: tabular-nums; }
.cprog b { display: block; font-size: var(--t-s); font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.cday li { padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--t-s); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.cwhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cwho { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 3px 12px 3px 3px; border: 0; border-radius: var(--pill); background: color-mix(in srgb, var(--kc) 24%, var(--surface)); color: var(--text); font: inherit; font-size: var(--t-xs); font-weight: 750; cursor: pointer; transition: transform .15s; }
.cmst { display: grid; gap: 6px; }
.cmst__b { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px 8px 8px; border: 0; border-radius: var(--r-m); background: var(--bg-2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .15s; }
.cmst__b img, .cmst__b .ava { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.cmst__b > span { flex: 1; min-width: 0; }
.cmst__b b { display: block; font-size: var(--t-s); line-height: 1.3; }
.cmst__b small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-xs); color: var(--text-2); line-height: 1.35; }
.cmst__b > svg, .mnav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cmst__b > svg { stroke: var(--text-2); }
.mnav { display: flex; align-items: center; gap: 6px; margin: -8px 50px 14px 0; }
.mnav__back { display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 44px; padding: 0 12px 0 8px; border: 0; border-radius: var(--pill); background: color-mix(in srgb, var(--kc) 26%, var(--surface)); color: var(--text); font: inherit; font-size: var(--t-xs); font-weight: 750; cursor: pointer; }
.mnav__back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav__back svg, .mnav__b:not(.mnav__b--next) svg { transform: rotate(180deg); }
.mnav__n { margin-left: auto; font-size: var(--t-xs); font-weight: 650; color: var(--text-2); white-space: nowrap; }
.mnav__b { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--text); cursor: pointer; }
.crows { display: grid; gap: 6px; }
.crows li { display: grid; gap: 2px; padding: 6px 0 6px 12px; border-left: 3px solid var(--kc); font-size: var(--t-s); line-height: 1.4; }
.crows time { font-size: var(--t-xs); font-weight: 800; color: var(--text-2); }
@media (max-width: 359px) { .mnav__n { display: none; } }
@media (prefers-reduced-motion: reduce) { .cfaces:active, .club2__faces:active, .cmst__b:active, .cwho:active { transform: none; } }

/* ---------- Клубы: отдельная страница (#/clubs) — вкладка «Клубы» в переключателе программы ведёт сюда ---------- */
.pparts .pparts__go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 8px; border-radius: var(--pill); font-size: var(--t-s); font-weight: 700; color: var(--on-ink-2); text-decoration: none; white-space: nowrap; transition: color .2s, transform .15s; }
@media (hover: hover) { .pparts .pparts__go:hover { color: var(--on-ink); } }
.pparts .pparts__go:active { transform: scale(.97); }
.pparts .pparts__go:focus-visible { outline: 2px solid var(--on-ink); outline-offset: -4px; }
.pparts__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 349px) { .pparts .pparts__go { padding: 0 4px; gap: 3px; font-size: 13px; min-width: 0; } .pparts__go svg { display: none; } }
.acq--clubs { margin-top: 10px; background: color-mix(in srgb, var(--q-acc) 22%, var(--bg-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-acc) 55%, transparent); }
.home > .acq + .acq { margin-top: 8px; }

.clubsp { padding-bottom: 8px; }
.clubsp > .lead { margin: 0 16px; }
.pback { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 10px 16px 0; padding: 0 14px 0 10px; border: 0; border-radius: var(--pill); background: var(--bg-2); color: var(--text); font: inherit; font-size: var(--t-s); font-weight: 700; cursor: pointer; }
.pback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pback:hover { background: color-mix(in srgb, var(--text) 9%, var(--bg-2)); }
.pback + .eyebrow { margin-top: 12px; }
.cstats { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 6px; margin: 14px 16px 6px; padding: 3px; border-radius: var(--r-l); background: var(--sun); }
.cstats li { display: grid; align-content: center; gap: 0; padding: 10px 12px; border-radius: calc(var(--r-l) - 5px); background: var(--surface); }
.cstats li:first-child { border-radius: calc(var(--r-l) - 3px) 8px 8px calc(var(--r-l) - 3px); }
.cstats li:nth-child(2) { border-radius: 8px; }
.cstats li:last-child { border-radius: 8px calc(var(--r-l) - 3px) calc(var(--r-l) - 3px) 8px; }
.cstats b { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cstats small { font-size: var(--t-xs); font-weight: 650; color: var(--text-2); line-height: 1.25; }
.cjump button i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--kc); box-shadow: 0 0 0 2px rgb(255 255 255 / 18%); }
.cjump { grid-auto-columns: minmax(0, 1fr); }
.cjump button { gap: 5px; padding: 0 4px; min-width: 0; }
@media (max-width: 400px) { .cjump button { gap: 4px; font-size: 13px; } }
@media (max-width: 349px) { .cjump button { font-size: 12px; } .cjump button i { display: none; } }

.cbig { position: relative; margin: 18px 16px 0; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--card-ring), var(--shadow); overflow: hidden; scroll-margin-top: calc(var(--top-h) + 78px); outline: none; }
.cbig:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.cbig__hero { position: relative; isolation: isolate; display: grid; justify-items: start; gap: 6px; padding: 18px 16px 16px; border-top: 6px solid var(--kc); background: radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--kc) 70%, transparent), transparent 62%), linear-gradient(170deg, color-mix(in srgb, var(--kc) 34%, var(--surface)), color-mix(in srgb, var(--kc) 12%, var(--surface))); }
.cbig__hero::after { content: ""; position: absolute; z-index: -1; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--kc) 34%, transparent), transparent); }
:root[data-scheme="dark"] .cbig__hero { background: radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--kc) 34%, transparent), transparent 62%), linear-gradient(170deg, color-mix(in srgb, var(--kc) 22%, var(--surface)), color-mix(in srgb, var(--kc) 7%, var(--surface))); }
:root[data-scheme="dark"] .cbig__hero::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--kc) 16%, transparent), transparent); }
.cbig__emb { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 4px; border-radius: 20px; background: linear-gradient(150deg, color-mix(in srgb, var(--kc) 70%, #fff), var(--kc)); color: #0b0b10; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--kc) 90%, #000), inset 0 0 0 1px rgb(255 255 255 / 45%); }
.cbig__emb svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cbig__k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.cbig__hero h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.12; overflow-wrap: anywhere; }
.cbig__sub { margin: 2px 0 4px; font-size: var(--t-s); line-height: 1.5; }
.cbig__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; }
.cbig__facts li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px 4px 9px; border-radius: var(--pill); background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc) 45%, transparent); font-size: var(--t-xs); font-weight: 700; line-height: 1.25; }
.cbig__facts svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cbig__facts .cbig__note { padding-left: 12px; background: var(--kc); color: #0b0b10; box-shadow: none; }
.cbig__body { padding: 4px 16px 16px; }
.cbig__h { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: var(--t-l); font-weight: 800; letter-spacing: -.01em; }
.cbig__h::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--sun); }
.cbig__h small { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--pill); background: color-mix(in srgb, var(--kc) 30%, var(--bg-2)); font-size: 12px; font-weight: 800; }
.cbig__mst { margin: 0 -16px; padding: 0 16px 4px; gap: 8px; }
.cmaster { display: grid; justify-items: center; align-content: start; gap: 3px; width: 112px; padding: 10px 6px 10px; border: 0; border-radius: var(--r-m); background: color-mix(in srgb, var(--kc) 12%, var(--bg-2)); color: inherit; font: inherit; text-align: center; cursor: pointer; transition: transform .15s, background-color .18s; }
.cmaster:hover { background: color-mix(in srgb, var(--kc) 24%, var(--bg-2)); }
.cmaster:active { transform: scale(.97); }
.cmaster img, .cmaster__mono { width: 76px; height: 76px; margin-bottom: 4px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--kc) 70%, transparent); }
.cmaster__mono { display: grid; place-items: center; background: color-mix(in srgb, var(--kc) 45%, var(--bg)); font-size: 22px; font-weight: 800; }
.cmaster b { font-size: 13px; font-weight: 800; line-height: 1.25; }
.cmaster small { font-size: 11.5px; line-height: 1.3; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cbig__prog, .cbig__day { padding: 2px 12px; border-radius: var(--r-m); background: var(--bg-2); }
.cbig__prog time { color: color-mix(in srgb, var(--kl) 70%, var(--text)); }
:root[data-scheme="dark"] .cbig__prog time { color: color-mix(in srgb, var(--kc) 75%, #fff); }
.cbig__prog li, .cbig__day li { border-top-color: color-mix(in srgb, var(--text) 9%, transparent); }
.cbig__day li { position: relative; padding-left: 16px; }
.cbig__day li::before { content: ""; position: absolute; left: 1px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--kc); }
.cbig__body > .fine { margin: 8px 0 0; }
.cbig__body > .cpanel__h { margin: 0 0 8px !important; }
.cbig__body > .reg-l { margin-bottom: 4px; }
.cbig__p { margin: 0 0 10px; font-size: var(--t-s); line-height: 1.55; }
.cbig__next { display: grid; gap: 2px; margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r-m); background: color-mix(in srgb, var(--kc) 16%, var(--bg-2)); border-left: 4px solid var(--kc); font-size: var(--t-s); line-height: 1.45; }
.cbig__next b { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.cbig .sh-quest { margin: 16px 0 10px; }
.cbig__body > .btn--block { margin-top: 12px; }
.cbig .sh-quest + .btn--block { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .cmaster:active, .pparts .pparts__go:active { transform: none; } }
.cbig__body > .btn--block { white-space: normal; text-align: center; line-height: 1.25; padding: 10px 16px; }

/* ---------- задача 1793724552: без аватара в пропуск-строке; красная кнопка «Что делать?» и тур-подсказки (assets/tour.js) ---------- */
:root { --help: #d42a3a; --help-2: #b81d2f; --help-glow: rgb(226 52 66 / 45%); }   /* красный «помощи» — во всех темах один; белый текст 5:1 */
.pass { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 8px; padding: 7px 7px 7px 14px; }
.pass__t { grid-row: 1; grid-column: 1; display: grid; align-content: center; min-width: 0; }
.pass__t b { line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.pass__t small { display: block; line-height: 1.3; }
.pass__help { grid-row: 1; grid-column: 2; } .pass__qr { grid-row: 1; grid-column: 3; }
.pass__t small svg { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.pass__help { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 44px; padding: 0 12px 0 10px; border: 0; border-radius: var(--r-m); background: linear-gradient(180deg, #e0303f, var(--help)); color: #fff; font-size: 14px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 16px -6px var(--help-glow), inset 0 1px 0 rgb(255 255 255 / 22%); transition: transform .15s, box-shadow .15s, background .15s; }
.pass__help svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pass__help:hover { background: var(--help-2); box-shadow: 0 8px 20px -6px var(--help-glow), 0 0 0 4px rgb(226 52 66 / 16%); }
.pass__help:active { transform: scale(.96); }
.pass__help:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .pass__help.is-new { animation: help-pulse 2.2s ease-out 0.6s 4; } }
@keyframes help-pulse { 0% { box-shadow: 0 6px 16px -6px var(--help-glow), 0 0 0 0 rgb(226 52 66 / 45%); } 70%, 100% { box-shadow: 0 6px 16px -6px var(--help-glow), 0 0 0 12px rgb(226 52 66 / 0%); } }
@media (max-width: 430px) { .pass__help { padding: 0 10px; font-size: 13px; } .pass__help svg { display: none; } .pass__qr { width: 40px; height: 40px; } .pass__t small { font-size: 11.5px; } .pass__t b { font-size: 15px; } }
@media (max-width: 379px) { .pass { gap: 0 6px; padding-left: 12px; } .pass__you { display: none; } .pass__t small { font-size: 11px; } .pass__t small svg { width: 12px; height: 12px; margin-right: 2px; } }

.tour { position: fixed; z-index: 90; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; }
.tour.show { opacity: 1; }
.tour__catch { position: absolute; inset: 0; pointer-events: auto; cursor: default; }
.tour__hole { position: absolute; pointer-events: none; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgb(226 52 66 / 55%), 0 0 26px 8px rgb(255 120 120 / 35%), 0 0 0 200vmax rgb(8 8 14 / 74%); transition: left .32s cubic-bezier(.3, .8, .3, 1), top .32s cubic-bezier(.3, .8, .3, 1), width .32s cubic-bezier(.3, .8, .3, 1), height .32s cubic-bezier(.3, .8, .3, 1), border-radius .32s; }
@media (prefers-reduced-motion: no-preference) { .tour__hole { animation: hole-glow 2s ease-in-out infinite; } }
@keyframes hole-glow { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgb(226 52 66 / 35%), 0 0 34px 12px rgb(255 120 120 / 45%), 0 0 0 200vmax rgb(8 8 14 / 74%); } }
.tour__arrow { position: absolute; width: 48px; height: 64px; pointer-events: none; overflow: visible; transition: left .32s cubic-bezier(.3, .8, .3, 1), top .32s cubic-bezier(.3, .8, .3, 1); filter: drop-shadow(0 2px 6px rgb(0 0 0 / 45%)); }
.tour__arrow[data-dir="down"] { transform: scaleY(-1); }
.tour__arrow path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tour__arrow-l { stroke-dasharray: 70; }
@media (prefers-reduced-motion: no-preference) {
  .tour__arrow.in .tour__arrow-l { animation: arrow-draw .5s ease-out both; }
  .tour__arrow.in .tour__arrow-h { animation: fade .2s .4s both; }
  .tour__arrow.in { animation: arrow-bob 1.4s ease-in-out .7s infinite; }
  .tour__arrow.in[data-dir="down"] { animation-name: arrow-bob-d; }
  .tour__card.in { animation: card-in .28s cubic-bezier(.2, .8, .3, 1); }
}
@keyframes arrow-draw { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }
@keyframes arrow-bob { 50% { translate: 0 -6px; } }
@keyframes arrow-bob-d { 50% { translate: 0 6px; } }
@keyframes card-in { from { opacity: 0; translate: 0 8px; } }
.tour__card { position: absolute; pointer-events: auto; display: grid; gap: 6px; padding: 14px 16px 14px; border-radius: var(--r-l); background: var(--surface); color: var(--text); box-shadow: 0 18px 50px rgb(0 0 0 / 40%), 0 0 0 1px var(--card-ring, transparent); transition: left .32s cubic-bezier(.3, .8, .3, 1), top .32s cubic-bezier(.3, .8, .3, 1); }
.tour__top { display: flex; align-items: center; justify-content: space-between; margin: -4px -8px -2px 0; }
.tour__n { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--pill); background: color-mix(in srgb, var(--help) 14%, var(--bg-2)); color: color-mix(in srgb, var(--help) 75%, var(--text)); font-size: 12px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tour__x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }
.tour__x:hover { background: var(--bg-2); color: var(--text); }
.tour__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tour__h { font-size: var(--t-l); font-weight: 800; letter-spacing: -.015em; }
.tour__t { margin: 0; font-size: var(--t-s); line-height: 1.5; color: var(--text-2); }
.tour__dots { display: flex; gap: 5px; margin: 4px 0 2px; }
.tour__dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: width .25s, background .25s; }
.tour__dots i.on { width: 18px; background: var(--help); }
.tour__act { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.tour__act > span { display: flex; gap: 6px; margin-left: auto; }
.tour__act button { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--pill); font-size: var(--t-s); font-weight: 800; cursor: pointer; }
.tour__skip { padding: 0 6px !important; background: none; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.tour__skip:hover { color: var(--text); }
.tour__prev { background: var(--bg-2); color: var(--text); }
.tour__next { min-width: 100px; background: var(--help); color: #fff; box-shadow: 0 6px 14px -6px var(--help-glow); }
.tour__next:hover { background: var(--help-2); }

/* задание с окном времени («Вовремя с обеда»): живой таймер на плашке, в шторке и на главной */
.cd { display: inline-flex; align-items: center; gap: 5px; justify-self: start; width: max-content; max-width: 100%; margin-top: 4px; padding: 3px 10px 3px 7px; border-radius: var(--pill); font-size: var(--t-xs); font-weight: 800; font-style: normal; line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.cd svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cd--live { background: var(--q-acc); color: var(--q-on-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-acc) 30%, transparent); }
.cd--soon { background: color-mix(in srgb, var(--q-fg) 10%, transparent); color: var(--q-fg); }
.cd--gone { background: color-mix(in srgb, var(--bad-text) 14%, transparent); color: var(--bad-text); }
@media (prefers-reduced-motion: no-preference) { .cd--live svg { animation: cdpulse 1s steps(2) infinite; } }
@keyframes cdpulse { 50% { opacity: .35; } }
.cd--sm { margin: 0 6px 0 0; padding: 1px 8px 1px 5px; vertical-align: middle; }
.cd--lg { margin: 0; padding: 6px 14px 6px 10px; font-size: var(--t-m); }
.cd--lg svg { width: 18px; height: 18px; }
.task__x2 { font-style: normal; padding: 1px 6px; border-radius: var(--pill); background: var(--q-acc); color: var(--q-on-acc); letter-spacing: .02em; }
.task--bonus:not(.task--done, .task--expired) { border-color: color-mix(in srgb, var(--q-acc-text) 60%, transparent); }
.task--bonus .task__s { background: var(--q-acc); color: var(--q-on-acc); box-shadow: none; }
.task--expired { opacity: .7; background: color-mix(in srgb, var(--q-fg) 7%, var(--q-bg)); box-shadow: none; }
.task--expired .task__ic { background: color-mix(in srgb, var(--q-fg) 12%, transparent); color: var(--q-fg); box-shadow: none; }
.task--expired .task__s { background: none; color: var(--q-fg-2); text-decoration: line-through; }
.tasks li:has(.task--expired)::after { opacity: .55; filter: grayscale(.4); }
.zt:is(.zt--expired) { background: var(--bg-2); box-shadow: none; }
.zt:is(.zt--expired) > span { background: var(--line); color: var(--text-2); box-shadow: none; }
.zt .cd--soon { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.winbox { display: grid; gap: 8px; justify-items: start; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-m); background: color-mix(in srgb, var(--q-acc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-acc-text) 35%, transparent); font-size: var(--t-s); }
.winbox--gone { background: color-mix(in srgb, var(--bad-text) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad-text) 30%, transparent); }
.mis__win { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -2px 0 0; font-size: var(--t-s); font-weight: 650; }
.mis__win .cd { margin: 0; font-size: var(--t-s); padding: 4px 12px 4px 8px; }
.mis .cd--live { background: var(--q-on-acc); color: var(--q-acc); box-shadow: none; }
.mis .cd--soon { background: rgb(0 0 0 / 12%); color: var(--q-on-acc); }

/* точки карты (задача 1793727200): номер на схеме, подсветка из легенды, легенда под картой, карточка точки */
.mn circle { fill: var(--surface); stroke: var(--text); stroke-width: 1.3; }
.mn text { fill: var(--text); font-size: 10.5px; font-weight: 800; }
.mz.hl .mz-fill { stroke: var(--text); stroke-width: 3.5; stroke-dasharray: 7 5; }
.mz.hl .mn circle { fill: var(--here); stroke: var(--surface); stroke-width: 2; }
.mz.hl .mn text { fill: var(--on-here); }
@media (prefers-reduced-motion: no-preference) { .mz.hl .mz-fill { animation: mzhl 1.1s linear infinite; } }
@keyframes mzhl { to { stroke-dashoffset: -24; } }
.plist__hint { margin-top: -6px; font-size: var(--t-s); color: var(--text-2); }
.plist__f { margin-top: 16px; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.plist, .pt-tasks, .pt-when { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pli { display: grid; grid-template-columns: 28px 1fr 18px; align-items: center; column-gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--r-m); background: var(--surface); color: var(--text); font: inherit; text-align: left; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.pli b { display: block; font-size: var(--t-s); }
.pli small { display: block; margin-top: 2px; font-size: var(--t-xs); line-height: 1.35; color: var(--text-2); }
.pli > svg { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pli:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kc) 75%, var(--text)); }
.pli.is-on { background: color-mix(in srgb, var(--kc) 16%, var(--surface)); box-shadow: inset 0 0 0 2px var(--text); }
.pli__n { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--kc) 50%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--kc); color: var(--text); font-size: 12px; font-style: normal; font-weight: 800; line-height: 1; }
.pt-h { display: flex; align-items: center; gap: 10px; }
.pt-h .pli__n { width: 30px; height: 30px; font-size: 14px; }
.pt-when { margin: 10px 0; font-size: var(--t-s); font-weight: 700; }
.pt-when li { display: flex; align-items: center; gap: 8px; }
.pt-when svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.pt-q { font-size: var(--t-s); color: var(--text-2); }
.pt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
a.club-pill { text-decoration: none; }
.pnext { margin-top: 2px; }
.mappage > .plist { margin: 0 16px; }

/* v7.4 (задача 1793728209): место в рейтинге у счётчика семян, черта топ-10 в рейтинге, строка про таймер в туре */
.mis__seeds span { font-size: var(--t-xs); font-weight: 750; opacity: .85; }
.qseeds small { font-size: var(--t-xs); font-weight: 750; color: var(--q-fg-2); }
.board .board__cut { justify-content: center; padding: 6px 10px; border-top: 0; font-size: var(--t-xs); font-weight: 750; color: var(--q-gold-text); }
.board .board__cut span { display: flex; align-items: center; gap: 10px; width: 100%; }
.board .board__cut span::before, .board .board__cut span::after { content: ''; flex: 1; height: 0; border-top: 2px dashed color-mix(in srgb, var(--q-gold-text) 55%, transparent); }
.board .board__cut + li { border-top-color: transparent; }
.tour__note { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--q-acc) 18%, transparent); font-size: var(--t-xs); line-height: 1.45; font-weight: 650; color: var(--text); }
.tour__note[hidden] { display: none; }
.tour__note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* главная плотнее (задача 1793737590): без декоративных иконок у ссылок, фактов, места в программе и клубов; ровный ритм 28/10 между блоками,
   карточки ниже на 2–4 px по вертикали, подписи ведущих — до 2 строк (длинная роль раздувала ленту и давала пустоту под ней) */
.home > .h2 { margin: 28px 16px 10px; }
.home > .lead { margin-top: -2px; margin-bottom: 10px; }
.mis { gap: 8px; padding: 14px; }
.mis__map { padding: 4px; }
.mis__where b { line-height: 1.25; }
.pslot__b { padding: 12px 14px; gap: 12px; }
.pslot__m { gap: 5px; }
.earlier summary { padding: 10px 16px; }
.club2 { padding: 12px 14px 10px; gap: 5px; }
.acq { padding: 10px 14px; margin-top: 10px; }
.home > .acq + .acq { margin-top: 6px; }
.facts > li { padding: 10px 14px; }
.facts a { padding: 4px 0; }
.host2 small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hosts2 { padding-bottom: 0; }

/* ═════════ «Где пообедать · рядом с отелем» (задача 1793785636): фото-шапка + раскрывающийся список из 8 мест ═════════
   Один компонент в трёх местах: шторка пункта «Чай-брейк и обед», «Полезное», главная в окне обеда. Раскрытие — grid-rows 0fr→1fr; закрытое содержимое — visibility:hidden (не в табе) */
.lunch { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--card-ring), var(--shadow); text-align: left; }
.lunch__h { position: relative; display: block; width: 100%; height: 148px; padding: 0; border: 0; background: var(--ink-3); color: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden; isolation: isolate; }
.lunch__h img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; z-index: -2; transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
.lunch__h::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 16 13 / 32%) 0, transparent 38%, rgb(8 16 13 / 30%) 52%, rgb(8 16 13 / 84%) 100%); }
.lunch__h:hover img { transform: scale(1.035); }
.lunch__h:focus-visible { outline-offset: -4px; border-radius: var(--r-l); }
.lunch__tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 4px 11px 4px 9px; border-radius: var(--pill); background: rgb(8 16 13 / 62%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12px; font-weight: 750; line-height: 1.3; color: #fff; }
.lunch__tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lunch__tag i { width: 8px; height: 8px; border-radius: 50%; background: #ffb766; flex: none; }
.lunch__cap { position: absolute; left: 14px; right: 12px; bottom: 11px; display: flex; align-items: flex-end; gap: 10px; }
.lunch__t { flex: 1; min-width: 0; display: grid; text-shadow: 0 1px 10px rgb(0 0 0 / 55%); }
.lunch__t b { font-size: 20px; font-weight: 800; line-height: 1.15; }
.lunch__t small { font-size: var(--t-s); font-weight: 650; color: rgb(255 255 255 / 90%); }
.lunch__n { flex: none; padding: 4px 11px; border-radius: var(--pill); background: var(--q-acc); color: var(--q-on-acc); font-size: 13px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.lunch__chev { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / 92%); color: #0b0b10; transition: transform .3s cubic-bezier(.2, .8, .3, 1); }
.lunch__chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
.lunch.is-open .lunch__chev { transform: rotate(180deg); }
.lunch__body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .34s cubic-bezier(.2, .8, .3, 1), visibility 0s .34s; }
.lunch.is-open .lunch__body { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.lunch__clip { min-height: 0; overflow: hidden; }
.lunch__in { padding: 12px 12px 14px; }
.lunch__lead { display: flex; gap: 8px; align-items: flex-start; margin: 0 2px 10px; font-size: var(--t-xs); font-weight: 650; line-height: 1.4; color: var(--text-2); }
.lunch__lead svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lunch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lunch__it { padding: 11px 12px 11px; border-radius: var(--r-m); background: var(--bg-2); }
.lunch__top { display: flex; align-items: center; gap: 10px; }
.lunch__nm { flex: 1; min-width: 0; }
.lunch__top h3 { margin: 0; font-size: var(--t-m); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.lunch .lunch__go { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin: -6px 0; padding: 0 12px 0 10px; border-radius: var(--pill); background: var(--btn); color: var(--on-btn); font-size: var(--t-s); font-weight: 750; text-decoration: none; white-space: nowrap; transition: background-color .18s, box-shadow .18s; }
.lunch .lunch__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lunch .lunch__go svg:last-child { width: 13px; height: 13px; opacity: .8; }
.lunch .lunch__go:hover { background: var(--cta-hover, var(--btn)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--btn) 25%, transparent); }
.lunch__chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lc { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: var(--pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--text); }
.lc svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--text-2); }
.lc--w { background: color-mix(in srgb, var(--q-acc) calc(48% * var(--fx, 1)), var(--surface)); box-shadow: none; }
.lc--w svg { color: var(--text); }
.lunch__addr { margin: 2px 0 0; font-size: var(--t-xs); color: var(--text-2); }
.lunch__fine { margin: 10px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--text-2); }
.home > .lunch { margin: 12px 16px 0; }
.facts > li.facts__lunch { flex-direction: column; align-items: stretch; gap: 8px; }
.facts .lunch svg { margin-top: 0; }
.facts__lunch .lunch { box-shadow: 0 0 0 1px var(--card-ring); }
.sheet > .lunch { margin: 14px 0; }
.sheet .lunch { background: var(--bg); }
.sheet .lunch__it, .facts__lunch .lunch__it { background: var(--bg-2); }
@media (prefers-reduced-motion: reduce) { .lunch__body, .lunch__chev, .lunch__h img { transition: none; } }
@media (max-width: 379px) { .lunch__t b { font-size: 18px; } .lunch .lunch__go { padding: 0 10px 0 8px; } }

/* клубы: статус заявки (вступить нельзя — одобряет лидер клуба) */
.jst { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: var(--t-s); font-weight: 650; line-height: 1.3; color: var(--text-2, var(--text)); }
.jst svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.jst--ok { color: var(--ok, #1f7a3d); }
.cbig .jst, .cs .jst { margin: 0 0 10px; }
.club2__act .btn--line { white-space: nowrap; }