/* ============================================================
   Страница квестов, пересборка с нуля (15.09.2026) — pages/quests.blade.php,
   App\QuestsPage. Пока только владельцу.

   Всё внутри .qp: имена короткие, наружу не выходят. Шрифты сайта — Montserrat
   для заголовков, Roboto для текста. Оранжевый — только у действий и бонусов
   (кнопка квеста, суммы бонусов в шапке). У каждого раздела свой приглушённый
   оттенок (--tone, тройка RGB): значок заголовка, плашка логотипа, лёгкий отлив
   у верха карточки — владелец просил «разбавить цветами, НЕ СИЛЬНО».
   Одно выразительное место — шкала бонусов в шапке.
   ============================================================ */

.qp{
    --qp-surface:#1a1920;
    --qp-card:#1e1d25;
    --qp-card-hover:#24232c;
    --qp-line:rgba(255,255,255,.08);
    --qp-line-2:rgba(255,255,255,.15);
    --qp-text:#f2f1f5;
    --qp-text-2:rgba(242,241,245,.74);
    --qp-text-3:rgba(242,241,245,.56);
    --qp-accent:#ff9800;
    --qp-accent-2:#ffab33;
    --qp-ok:#7ccf80;
    --qp-bad:#f0948a;
    --qp-r-lg:16px;
    --qp-r:12px;
    --qp-r-sm:8px;
    --tone:255,255,255;
    max-width:1240px;margin:0 auto;padding:4px 16px 8px;
    color:var(--qp-text);font-family:"Roboto","Helvetica Neue",Arial,sans-serif;line-height:1.45;
}
.qp *,.qp *::before,.qp *::after{box-sizing:border-box;}
.qp h1,.qp h2,.qp p,.qp ul,.qp ol{margin:0;}
.qp__main{min-width:0;}
.qp-side{display:none;}

/* --- Шапка: заголовку, описанию и цифрам — воздух между собой ---
   Сверху у .qp на телефоне всего 4px: 20px уже даёт обёртка сайта под шапкой, с прежними 24px
   над «Квесты» было ~50px — владелец: «непропорционально большой отступ». На ПК 32px. */
.qp-hero{display:grid;gap:22px;}
.qp-hero__title{font-family:"Montserrat","Roboto",sans-serif;font-weight:700;font-size:34px;
    line-height:1.1;letter-spacing:-.01em;color:#fff;}
/* .qp перед классом: иначе сброс «.qp p/ul/ol {margin:0}» сильнее и съедает отступ */
.qp .qp-hero__lead{margin-top:14px;max-width:50ch;font-size:15px;line-height:1.6;color:var(--qp-text-2);}
/* Телефон: вместо четырёх строк фактов — значки справа от заголовка, по нажатию окошко с пояснением
   (владелец 17.09.2026: полоса из трёх ячеек и зелёная строка съедали первый экран). Короткая фраза
   вместо длинной — всем на телефоне. ПК — прежние факты; включается в @media (max-width:1023px). */
.qp-lead-short,.qp-badges{display:none;}
.qp-hero__top{position:relative;}
/* ПК: капсула с подписями — те же значки, что на телефоне у заголовка */
.qp .qp-stats{display:none;list-style:none;margin:0;padding:6px;gap:4px;border-radius:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);}
.qp-stat{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;padding:8px 14px;--pill:255,255,255;}
.qp-stat + .qp-stat{border-left:1px solid rgba(255,255,255,.07);}
.qp-stat .qp-badge__dot{flex-shrink:0;width:38px;height:38px;}
.qp-stat__text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.qp-stat__text b{font-size:15px;font-weight:700;line-height:1.25;color:#fff;white-space:nowrap;}
.qp-stat__text span{font-size:13px;line-height:1.3;color:var(--qp-text-3);white-space:nowrap;}
/* Значки — в общей капсуле: скруглённые квадраты с градиентом своего цвета, бликом и свечением
   (владелец 17.09.2026: «задизайнить прикольнее»). Нажатый приподнимается и получает обводку. */
.qp-badges{align-items:center;gap:2px;flex-shrink:0;padding:3px;border-radius:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);}
.qp-badge{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;
    background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;--pill:255,255,255;}
.qp-badge__dot{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
    background:linear-gradient(145deg,rgba(var(--pill),.42),rgba(var(--pill),.10) 70%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(var(--pill),.35),0 6px 14px -6px rgba(var(--pill),.7);
    color:#fff;font-size:15px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;}
.qp-badge__dot i{filter:drop-shadow(0 0 5px rgba(var(--pill),.95));}
.qp-badge[aria-expanded="true"] .qp-badge__dot{transform:translateY(-1px);
    background:linear-gradient(145deg,rgba(var(--pill),.62),rgba(var(--pill),.2) 70%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1.5px rgba(var(--pill),.9),0 8px 18px -6px rgba(var(--pill),.9);}
@media (hover:hover){.qp-badge:hover .qp-badge__dot{transform:translateY(-1px);}}
.qp-badge:focus-visible{outline:none;}
.qp-badge:focus-visible .qp-badge__dot{box-shadow:0 0 0 2px var(--qp-accent);}
.qp-tip{position:absolute;z-index:30;top:calc(100% + 8px);right:0;width:min(290px,100%);padding:12px 14px;border-radius:12px;
    background:#26252e;border:1px solid rgba(var(--pill),.45);box-shadow:0 10px 30px rgba(0,0,0,.45);
    font-size:13px;line-height:1.45;color:var(--qp-text-2);--arrow-x:50%;--pill:255,255,255;}
.qp-tip::before{content:"";position:absolute;top:-6px;left:var(--arrow-x);width:10px;height:10px;margin-left:-5px;
    background:#26252e;border-left:1px solid rgba(var(--pill),.45);border-top:1px solid rgba(var(--pill),.45);transform:rotate(45deg);}
.qp-tip[hidden]{display:none;}
/* Окошко окрашено в цвет нажатого значка: рамка, стрелка и заголовок */
.qp-tip__title{display:block;margin-bottom:2px;font-size:14px;color:rgb(var(--pill));}

/* Бонус за квесты: слева сколько выполнено, справа сколько осталось, ниже шкала 0…5. */
.qp-bonus{padding:18px 18px 16px;border-radius:var(--qp-r-lg);border:1px solid rgba(255,152,0,.22);
    background:radial-gradient(120% 150% at 0% 0%,rgba(255,152,0,.16),rgba(255,152,0,0) 55%),var(--qp-surface);}
.qp-bonus.qp-bonus--done{border-color:rgba(124,207,128,.28);
    background:radial-gradient(120% 150% at 0% 0%,rgba(124,207,128,.14),rgba(124,207,128,0) 55%),var(--qp-surface);}
/* .qp перед классом: сброс «.qp h2 {margin:0}» сильнее одиночного класса */
.qp .qp-bonus__title{margin-bottom:18px;font-size:15px;font-weight:700;color:#fff;}
/* Гость: вместо пустой шкалы — подсказка и вход, иначе непонятно, почему прогресса нет */
.qp-bonus__login{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;
    color:var(--qp-accent);font-size:14px;font-weight:600;text-decoration:none;}
.qp-bonus__login:hover{color:var(--qp-accent-2);text-decoration:none;}
.qp-bonus__login:focus-visible{outline:2px solid var(--qp-accent);outline-offset:2px;border-radius:6px;}

/* Полоса наград (17.09.2026, телефон и ПК). Кольцо — прогресс до ближайшего бонуса,
   справа сумма и сколько осталось, ниже 5 делений, награды подписями на 3 и 5. */
.qp-track{display:flex;align-items:center;gap:14px;--track-c:255,152,0;}
/* Незаполненная часть кольца — приглушённый оранжевый, чтобы при «0/3» блок не выглядел выключенным */
.qp-track__ring{position:relative;display:grid;place-items:center;flex-shrink:0;width:60px;height:60px;border-radius:50%;
    background:conic-gradient(rgb(var(--track-c)) calc(var(--p) * 1%),rgba(var(--track-c),.22) 0);
    box-shadow:0 0 18px rgba(var(--track-c),.25);}
.qp-track__ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#1d1a1c;}
.qp-track__ring span{position:relative;z-index:1;font-family:"Montserrat","Roboto",sans-serif;font-size:20px;font-weight:700;
    line-height:1;color:#fff;font-variant-numeric:tabular-nums;}
.qp-track__ring small{font-size:12px;font-weight:600;color:var(--qp-text-3);}
.qp-track__ring i{font-size:18px;color:var(--qp-accent);}
.qp-track__body{flex:1;min-width:0;padding-bottom:18px;}
.qp .qp-track__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin-bottom:12px;}
.qp-track__head b{font-family:"Montserrat","Roboto",sans-serif;font-size:21px;font-weight:700;line-height:1.15;color:var(--qp-accent);white-space:nowrap;}
.qp-track__head span{font-size:14px;color:var(--qp-text-2);white-space:nowrap;}
.qp-track__head .qp-track__done{font-size:17px;color:var(--qp-ok);}
.qp .qp-track__segs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;}
.qp-track__segs li{position:relative;height:8px;border-radius:4px;background:rgba(255,255,255,.1);}
.qp-track__segs li.is-mile{background:rgba(255,152,0,.22);}
.qp-track__segs li.is-done{background:var(--qp-accent);box-shadow:0 0 8px rgba(255,152,0,.45);}
/* Награда — подписью под своим делением (значок подарка рядом с суммой), на самой полосе ничего:
   кружки-подарки на делениях смотрелись неуклюже (владелец 17.09.2026). Ячейка с наградой подсвечена. */
.qp-track__amt{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;
    font-size:11px;font-weight:700;line-height:1;color:var(--qp-text-2);white-space:nowrap;}
.qp-track__amt i{font-size:10px;color:var(--qp-accent);}
/* Подписи бонусов на телефоне были 11px — мелко (аудит 27.09.2026) */
.qp .qp-track__amt{font-size:12px;}
/* Последняя подпись прижата к правому краю шкалы, иначе вылезает за рамку блока (27.09.2026) */
.qp-track__segs li:last-child .qp-track__amt{left:auto;right:0;transform:none;}
.qp-track__segs li.is-got .qp-track__amt,.qp-track__segs li.is-got .qp-track__amt i{color:var(--qp-ok);}
/* Оба бонуса получены — весь блок зелёный: кольцо, галочка и деления */
.qp-track.is-complete{--track-c:124,207,128;}
.qp-track.is-complete .qp-track__ring i{color:var(--qp-ok);}
.qp-track.is-complete .qp-track__segs li.is-done{background:var(--qp-ok);box-shadow:0 0 8px rgba(124,207,128,.4);}


/* --- Телефон: кнопка разделов ---
   Без чёрной полосы во всю ширину (владелец: «очень выделяется»): в потоке кнопка — такой же
   блок, как карточки; прилипнув к верху — фон во всю ширину, как было раньше (владелец: «в моменте,
   когда фильтр прилипает, фон включал»). is-stuck ставит скрипт по .qp-jump-sentinel; фон нарисован
   ::before, чтобы кнопка не сдвигалась, когда он появляется. */
.qp-jump-sentinel{display:block;height:1px;margin-top:23px;}
/* z-index ниже шапки сайта (у неё 11): при 40 кнопка разделов перекрывала открытое меню профиля (27.09.2026) */
.qp-jump{position:sticky;top:8px;z-index:10;}
.qp-jump::before{content:"";position:absolute;left:-16px;right:-16px;top:-8px;bottom:-8px;z-index:-1;
    background:rgba(20,19,25,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--qp-line);opacity:0;transition:opacity .2s ease;pointer-events:none;}
.qp-jump.is-stuck::before{opacity:1;}
.qp-jump__btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    min-height:46px;padding:0 14px;border-radius:var(--qp-r);border:1px solid var(--qp-line-2);
    background:rgba(30,29,37,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    color:var(--qp-text);font:inherit;font-size:15px;font-weight:600;
    text-align:left;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease;}
.qp-jump__btn:focus-visible{outline:2px solid var(--qp-accent);outline-offset:2px;}
.qp-jump__current{display:flex;align-items:baseline;gap:8px;min-width:0;}
.qp-jump__current .js-qp-current{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qp-jump__count{font-size:13px;font-weight:500;color:var(--qp-text-3);font-variant-numeric:tabular-nums;}
.qp-jump__all{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:13px;font-weight:500;color:var(--qp-text-2);}
.qp-jump__all i{font-size:11px;}

/* --- Меню разделов (ПК) и лист (телефон) --- */
.qp-side__nav,.qp-sheet__nav{display:flex;flex-direction:column;gap:4px;}
.qp-navlink{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;
    padding:0 12px;border-radius:10px;color:var(--qp-text-2);font-size:15px;text-decoration:none;}
.qp-navlink:hover{color:#fff;text-decoration:none;}
.qp-navlink:focus-visible{color:#fff;text-decoration:none;outline:none;box-shadow:0 0 0 2px var(--qp-accent);}
@media (hover:hover){.qp-navlink:hover{background:rgba(255,255,255,.045);}}
/* Текущий раздел — оранжевая метка слева и белый текст, без фона. Фон только у наведения:
   раньше у обоих был одинаковый фон, и соседние пункты сливались в одну плашку. */
.qp-navlink.is-current{color:#fff;font-weight:600;}
.qp-navlink.is-current::before{content:"";position:absolute;left:0;top:50%;width:3px;height:20px;
    border-radius:0 3px 3px 0;background:var(--qp-accent);transform:translateY(-50%);}
.qp-navlink__count{font-size:13px;font-weight:400;color:var(--qp-text-3);font-variant-numeric:tabular-nums;}
.qp-navlink--quiet{justify-content:flex-start;gap:10px;min-height:44px;font-size:14px;color:var(--qp-text-3);}
/* Значки нижних пунктов меню — маленькие, в оттенке своего раздела */
.qp-navlink__mini{display:grid;place-items:center;flex-shrink:0;width:26px;height:26px;border-radius:7px;
    background:rgba(var(--tone),.14);color:rgb(var(--tone));font-size:12px;}
.qp-nav-sep{display:block;height:1px;margin:8px 12px;background:var(--qp-line);}

/* Быстрые задания в меню — зелёная плитка первой строкой: с них проще всего начать */
.qp-navlink--quick{justify-content:flex-start;gap:10px;min-height:0;margin-bottom:6px;padding:10px 12px;
    background:rgba(var(--tone),.1);box-shadow:inset 0 0 0 1px rgba(var(--tone),.28);color:#fff;}
.qp-navlink--quick:hover,.qp-navlink--quick:focus-visible{background:rgba(var(--tone),.16);}
.qp-navlink--quick.is-current{background:rgba(var(--tone),.18);box-shadow:inset 0 0 0 1px rgba(var(--tone),.55);}
.qp-navlink--quick.is-current::before{display:none;}
.qp-navlink--quick.is-current:focus-visible{box-shadow:0 0 0 2px var(--qp-accent);}
.qp-navlink__icon{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:9px;
    background:rgba(var(--tone),.2);color:rgb(var(--tone));font-size:14px;}
.qp-navlink__body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.qp-navlink__title{font-size:15px;font-weight:600;line-height:1.25;color:#fff;}
.qp-navlink__sub{font-size:12px;font-weight:400;line-height:1.3;color:var(--qp-text-2);}

/* «Только с 14 лет» — переключатель: прячет остальные партнёрские квесты */
.qp-navlink--age{justify-content:flex-start;gap:10px;width:100%;border:0;background:transparent;
    font:inherit;font-size:14px;text-align:left;cursor:pointer;--tone:186,104,200;}
.qp-navlink__label{flex:1;min-width:0;}
.qp-switch{position:relative;flex-shrink:0;width:32px;height:18px;border-radius:9px;background:rgba(255,255,255,.16);
    transition:background-color .15s ease;}
.qp-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
    background:#fff;transition:transform .15s ease;}
.qp-navlink--age[aria-pressed="true"]{background:rgba(var(--tone),.12);color:#fff;font-weight:600;}
.qp-navlink--age[aria-pressed="true"] .qp-switch{background:rgb(var(--tone));}
.qp-navlink--age[aria-pressed="true"] .qp-switch::after{transform:translateX(14px);}
.qp-c-age{display:none;}
.qp.is-age14 .qp-c-all{display:none;}
.qp.is-age14 .qp-c-age{display:inline;}
.qp.is-age14 .qp-group[data-age14="0"],
.qp.is-age14 .qp-navlink[data-age14="0"],
.qp.is-age14 .qp-group[data-age14] .qp-list__item:not(.is-age14){display:none;}
.qp-agebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:24px;
    padding:10px 10px 10px 14px;border-radius:var(--qp-r);background:rgba(186,104,200,.1);
    border:1px solid rgba(186,104,200,.32);font-size:14px;line-height:1.4;color:var(--qp-text);scroll-margin-top:80px;}
.qp-agebar[hidden]{display:none;}
.qp-agebar i{margin-right:8px;color:rgb(186,104,200);}
.qp-agebar__reset{min-height:44px;padding:0 14px;border-radius:8px;border:1px solid var(--qp-line-2);background:transparent;
    color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.qp-agebar__reset:focus-visible{outline:2px solid var(--qp-accent);outline-offset:2px;}
@media (hover:hover){.qp-agebar__reset:hover{background:rgba(255,255,255,.06);}}

.qp-sheet{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100000;}
.qp-sheet[hidden]{display:none;}
.qp-sheet__backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(6,5,9,.62);}
.qp-sheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow-y:auto;
    padding:6px 12px calc(16px + env(safe-area-inset-bottom,0px));
    background:#1b1a21;border-top:1px solid var(--qp-line-2);border-radius:18px 18px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,.5);animation:qp-sheet-up .22s ease-out;}
@keyframes qp-sheet-up{from{transform:translateY(24px);opacity:.6;}to{transform:none;opacity:1;}}
.qp-sheet__head{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 8px 12px;}
.qp-sheet__title{font-size:16px;font-weight:700;color:#fff;}
.qp-sheet__close{width:44px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.06);
    color:var(--qp-text-2);font-size:16px;cursor:pointer;}
.qp-sheet__close:focus-visible{outline:2px solid var(--qp-accent);outline-offset:2px;}
html.qp-sheet-open .chat-toggle-btn,
html.qp-sheet-open #vk_community_messages{visibility:hidden !important;}

/* --- Разделы --- */
.qp-group,.qp-block{margin-top:40px;scroll-margin-top:80px;}
.qp__main > section.qp-group:first-of-type{margin-top:24px;}
.qp-group__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-bottom:14px;}
.qp-group__title{display:flex;align-items:center;gap:10px;font-family:"Montserrat","Roboto",sans-serif;
    font-weight:700;font-size:21px;line-height:1.2;color:#fff;}
.qp-group__icon{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:9px;
    background:rgba(var(--tone),.14);color:rgb(var(--tone));font-size:14px;}
.qp-group__meta{font-size:13px;color:var(--qp-text-3);white-space:nowrap;font-variant-numeric:tabular-nums;}
.qp .qp-group__lead{margin:-4px 0 16px;max-width:60ch;font-size:14px;line-height:1.5;color:var(--qp-text-2);}
.qp-block .qp-group__title + .qp-group__lead{margin-top:8px;}
.qp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px;}
.qp-list__item{display:flex;}

/* Быстрые задания — на слегка зелёной панели: простые, и по ним быстро видно,
   что награды настоящие. */
.qp-group--quick{padding:18px 14px 14px;border-radius:20px;
    background:linear-gradient(180deg,rgba(var(--tone),.09),rgba(var(--tone),.03));
    border:1px solid rgba(var(--tone),.24);}
.qp-group--quick .qp-group__head{margin-bottom:6px;}
.qp-group--quick .qp-group__lead{margin-top:0;}

/* --- Карточка квеста --- */
.qp-card{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border-radius:var(--qp-r-lg);
    background:linear-gradient(180deg,rgba(var(--tone),.07),rgba(var(--tone),0) 96px),var(--qp-card);
    border:1px solid var(--qp-line);color:var(--qp-text);text-decoration:none;
    transition:border-color .15s ease,background-color .15s ease;}
.qp-card:hover{color:var(--qp-text);text-decoration:none;}
/* Подсветка наведения — только там, где есть мышь: на телефоне рамка залипала. */
@media (hover:hover){
    .qp-card:hover{background-color:var(--qp-card-hover);border-color:rgba(var(--tone),.45);}
    .qp-card:hover .qp-card__cta{background:var(--qp-accent-2);}
    .qp-card:hover .qp-card__cta--quiet{background:transparent;color:#fff;}
}
.qp-card:focus-visible{outline:2px solid var(--qp-accent);outline-offset:2px;}
.qp-card__head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;}
.qp-card__logo{display:grid;place-items:center;width:64px;height:42px;border-radius:var(--qp-r-sm);overflow:hidden;
    background:rgba(var(--tone),.1);box-shadow:inset 0 0 0 1px rgba(var(--tone),.18);}
.qp-card__logo img{display:block;width:100%;height:100%;object-fit:contain;padding:6px 7px;}
.qp-card__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--qp-r-sm);
    background:rgba(var(--tone),.12);color:rgb(var(--tone));font-size:18px;}
.qp-card__who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.qp-card__name{font-size:16px;font-weight:700;line-height:1.25;color:#fff;}
.qp-card__cond{font-size:13px;line-height:1.35;color:var(--qp-text-2);}

/* Награда: скин на подсветке его редкости, как в инвентаре CS2 */
.qp-card__prize{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:14px;}
.qp-skin{position:relative;display:block;height:80px;border-radius:var(--qp-r);overflow:hidden;
    background:radial-gradient(95% 85% at 50% 100%,rgba(var(--rarity),.45),rgba(var(--rarity),.08) 60%,transparent 82%),#17161c;
    box-shadow:inset 0 -2px 0 rgba(var(--rarity),.9);}
/* Картинка скина квадратная, оружие в ней по центру: квадрат ставим ровно в центр плитки
   (при высоте в процентах картинка съезжала вниз и вылезала за нижний край). */
.qp-skin img{position:absolute;left:50%;top:50%;width:100px;height:100px;max-width:none;transform:translate(-50%,-50%);
    object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.qp-card__sum{display:flex;flex-direction:column;gap:3px;min-width:0;}
.qp-card__value{font-size:18px;font-weight:700;line-height:1.2;color:#fff;}
.qp-card__value--text{font-size:15px;}
.qp-card__plus{font-size:14px;font-weight:500;color:var(--qp-text);}
.qp-card__skin{margin-top:2px;font-size:13px;color:var(--qp-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qp-card.is-done .qp-card__value{color:var(--qp-text-2);}
/* Карточки, где от игрока ждут действия, — тонкая статичная рамка в цвет статуса, без пульсации:
   «В процессе» жёлтая, «Отклонено» мягкая красная. Наверх раздела их и так ставит QuestsPage::byState. */
.qp-card.is-progress{border-color:rgba(255,193,7,.7);}
.qp-card.is-rejected{border-color:rgba(240,148,138,.65);}
@media (hover:hover){
    .qp-card.is-progress:hover{border-color:rgba(255,193,7,.9);}
    .qp-card.is-rejected:hover{border-color:rgba(240,148,138,.85);}
}

.qp-card__facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;line-height:1.35;color:var(--qp-text-3);}
.qp-fact{display:inline-flex;align-items:baseline;gap:6px;}
.qp-fact i{width:12px;font-size:11px;text-align:center;}

.qp-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;}
.qp-card__cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
    border-radius:var(--qp-r);background:var(--qp-accent);color:#1d1305;font-size:14px;font-weight:700;white-space:nowrap;}
.qp-card__cta--full{flex:1;}
.qp-card__cta--quiet{background:transparent;color:var(--qp-text-2);border:1px solid var(--qp-line-2);}
.qp-status{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:13px;color:var(--qp-text-2);}
.qp-status--done{color:var(--qp-ok);}
.qp-status--bad{color:var(--qp-bad);}

/* --- Пригласи друга: суммы плитками, сумма над текстом — строки не пляшут --- */
.qp-panel{padding:16px 18px;border-radius:var(--qp-r-lg);background:var(--qp-surface);border:1px solid var(--qp-line);}
.qp .qp-rates{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px;}
.qp-rate{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--qp-r);
    background:rgba(var(--tone),.07);border:1px solid rgba(var(--tone),.22);}
.qp-rate b{font-family:"Montserrat","Roboto",sans-serif;font-size:24px;font-weight:700;line-height:1.1;color:rgb(var(--tone));font-variant-numeric:tabular-nums;}
.qp-rate span{font-size:14px;line-height:1.4;color:var(--qp-text-2);}
.qp-invite__how{display:grid;gap:10px;margin-top:10px;}
.qp-invite__how p{font-size:14px;color:var(--qp-text-2);}
.qp-copy{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:var(--qp-r);
    background:#141319;border:1px solid var(--qp-line);}
.qp-copy__text{flex:1;min-width:0;font-size:14px;color:#fff;overflow-wrap:anywhere;}
.qp-copy__btn{min-height:44px;padding:0 12px;border-radius:8px;border:1px solid var(--qp-line-2);background:transparent;
    color:var(--qp-text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.qp-copy__btn:hover{background:rgba(255,255,255,.06);}
.qp-copy__btn:focus-visible{outline:2px solid var(--qp-accent);outline-offset:2px;}
.qp-btn-vk{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
    border-radius:var(--qp-r);background:rgba(74,118,168,.16);border:1px solid rgba(74,118,168,.45);
    color:#bcd4ef;font-size:14px;font-weight:600;text-decoration:none;}
.qp-btn-vk:hover{background:rgba(74,118,168,.28);color:#fff;text-decoration:none;}

/* --- Плитка в неполном ряду раздела (partials/quests-v2-sections, 27.09.2026): тихая, без кнопки-заливки --- */
.qp-fill{display:flex;}
.qp-fill__link{display:flex;flex-direction:column;justify-content:center;gap:12px;width:100%;padding:20px;
    border-radius:var(--qp-r-lg);border:1px dashed rgba(var(--tone),.3);background:rgba(var(--tone),.03);
    color:var(--qp-text);text-decoration:none;transition:border-color .15s ease,background-color .15s ease;}
.qp-fill__link:hover{color:var(--qp-text);text-decoration:none;}
@media (hover:hover){.qp-fill__link:hover{border-color:rgba(var(--tone),.55);background:rgba(var(--tone),.06);}}
.qp-fill__link:focus-visible{outline:2px solid var(--qp-accent);outline-offset:2px;}
.qp-fill__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--qp-r-sm);
    background:rgba(var(--tone),.12);color:rgb(var(--tone));font-size:17px;}
.qp-fill__text{display:flex;flex-direction:column;gap:4px;}
.qp-fill__text b{font-size:16px;color:#fff;}
.qp-fill__text span{font-size:13px;line-height:1.45;color:var(--qp-text-2);max-width:42ch;}
.qp-fill__go{font-size:14px;font-weight:600;color:rgb(var(--tone));}
.qp-fill--wide .qp-fill__link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 24px;}
.qp-fill--wide .qp-fill__text span{max-width:none;}

/* --- Как это работает: у каждого шага свой приглушённый цвет --- */
.qp .qp-steps{list-style:none;padding:0;margin-top:16px;display:grid;gap:10px;}
.qp-step{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:14px 16px;
    border-radius:var(--qp-r-lg);background:linear-gradient(90deg,rgba(var(--tone),.08),rgba(var(--tone),.02));
    border:1px solid rgba(var(--tone),.18);}
.qp-step__icon{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
    background:rgba(var(--tone),.16);color:rgb(var(--tone));font-size:18px;}
.qp-step__n{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
    background:#1b1a21;border:1px solid rgba(var(--tone),.5);color:#fff;font-size:11px;font-weight:700;line-height:1;}
.qp-step__text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.qp-step__text b{font-size:15px;color:#fff;}
.qp-step__text span{font-size:13px;line-height:1.4;color:var(--qp-text-2);}

/* Доверие (17.09.2026): цифры в капсуле со значками, отзывы — одинаковые плитки */
.qp-trust{margin-top:14px;}
.qp-trust__head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.qp-trust__title{font-size:16px;font-weight:700;color:#fff;}
.qp-trust__since{flex-shrink:0;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
    background:rgba(255,152,0,.12);border:1px solid rgba(255,152,0,.3);color:var(--qp-accent);}
.qp .qp-trust__stats{list-style:none;margin-top:14px;padding:6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);}
.qp-trust__stats li{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:8px 4px;text-align:center;--pill:255,255,255;}
.qp-trust__stats li + li{border-left:1px solid rgba(255,255,255,.07);}
.qp-trust__stats .qp-badge__dot{flex-shrink:0;width:32px;height:32px;font-size:14px;}
.qp-trust__stats .qp-stat__text{align-items:center;}
.qp-trust__stats .qp-stat__text b{font-size:16px;font-variant-numeric:tabular-nums;}
.qp-trust__stats .qp-stat__text span{font-size:12px;white-space:normal;}
.qp .qp-trust__sub{margin:16px 0 8px;font-size:13px;font-weight:600;color:var(--qp-text-2);}
.qp-trust__reviews{display:grid;grid-template-columns:1fr;gap:8px;}
.qp-review{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 14px 8px 8px;border-radius:12px;
    background:rgba(var(--pill),.06);border:1px solid rgba(var(--pill),.2);color:var(--qp-text);text-decoration:none;
    transition:background-color .15s ease,border-color .15s ease;--pill:255,255,255;}
.qp-review:hover,.qp-review:focus-visible{color:var(--qp-text);text-decoration:none;}
@media (hover:hover){.qp-review:hover{background:rgba(var(--pill),.12);border-color:rgba(var(--pill),.5);}}
.qp-review:focus-visible{outline:2px solid var(--qp-accent);outline-offset:2px;}
.qp-review .qp-badge__dot{flex-shrink:0;width:36px;height:36px;}
.qp-review__text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.qp-review__text b{font-size:14px;font-weight:700;color:#fff;}
.qp-review__text span{font-size:12px;color:var(--qp-text-3);white-space:nowrap;}
.qp-review__text span i{font-size:10px;color:#ffc107;}
.qp-review__go{flex-shrink:0;font-size:11px;color:var(--qp-text-3);}

/* --- Вопросы и ответы: одна панель с разделителями, в тон остальным блокам --- */
.qp-faq{margin-top:16px;border-radius:var(--qp-r-lg);background:var(--qp-surface);border:1px solid var(--qp-line);overflow:hidden;}
.qp-faq__item + .qp-faq__item{border-top:1px solid var(--qp-line);}
.qp-faq__q{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:14px 18px;
    font-size:15px;font-weight:600;line-height:1.35;color:var(--qp-text);cursor:pointer;list-style:none;}
.qp-faq__q::-webkit-details-marker{display:none;}
.qp-faq__q:hover{color:#fff;background:rgba(255,255,255,.03);}
.qp-faq__q:focus-visible{outline:2px solid var(--qp-accent);outline-offset:-2px;}
.qp-faq__q i{flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
    background:rgba(186,104,200,.12);color:rgb(186,104,200);font-size:11px;transition:transform .2s ease;}
.qp-faq__item[open] .qp-faq__q{color:#fff;}
.qp-faq__item[open] .qp-faq__q i{transform:rotate(180deg);}
/* Ответ: отступ сверху — не прилипает к подсвеченному при наведении заголовку; ширина до колонки стрелки (27.09.2026) */
.qp .qp-faq__a{max-width:none;padding:14px 64px 18px 18px;font-size:14px;line-height:1.6;color:var(--qp-text-2);}
@media (max-width:639px){.qp .qp-faq__a{padding:12px 18px 16px;}}

@media (prefers-reduced-motion: reduce){
    .qp-sheet__panel{animation:none;}
    .qp-card,.qp-faq__q i,.qp-switch,.qp-switch::after,.qp-jump__btn,.qp-jump::before,.qp-badge__dot,.qp-review{transition:none;}
}

/* --- Телефон и планшет: шапка плотнее по высоте ---
   Чтобы на первом экране выглядывал верх первой карточки: у вошедшего она начиналась ровно под
   нижней панелью сайта (разбор 15.09.2026). Отступы, цифра бонуса и подписи шкалы; с 17.09.2026 факты — значками у заголовка. ПК не трогаем. */
@media (max-width:1023px){
    .qp-bonus--guest,.qp .qp-lead-long{display:none;}
    .qp-lead-short{display:inline;}
    .qp-hero__top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
    .qp-badges{display:flex;}
    .qp-hero{gap:16px;}
    .qp-hero__title{font-size:30px;}
    .qp .qp-hero__lead{margin-top:10px;}
    .qp-bonus{padding:14px 14px 12px;}
    .qp .qp-bonus__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
    .qp-jump-sentinel{margin-top:15px;}
    .qp__main > section.qp-group:first-of-type{margin-top:16px;}
    .qp-group__head{margin-bottom:10px;}
}
/* Самые узкие телефоны: значки поменьше, чтобы заголовок не переносился */
@media (max-width:359px){
    .qp-badge{width:36px;height:36px;}
    .qp-badge__dot{width:30px;height:30px;border-radius:10px;font-size:13px;}
}

/* --- Шире телефона --- */
@media (min-width:640px){
    .qp-list{grid-template-columns:repeat(2,minmax(0,1fr));}
    /* Цифры и отзывы на одной сетке: 3 колонки, промежуток 8px, значок 38px с отступом 9px слева —
       значки сверху и снизу стоят ровно друг под другом (владелец 17.09.2026) */
    .qp-trust__reviews{grid-template-columns:repeat(3,minmax(0,1fr));}
    .qp .qp-trust__stats{padding:0;column-gap:8px;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);}
    .qp-trust__stats li{position:relative;flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 14px 12px 9px;text-align:left;}
    .qp-trust__stats li + li{border-left:0;}
    .qp-trust__stats li + li::before{content:"";position:absolute;left:-4px;top:12px;bottom:12px;width:1px;background:rgba(255,255,255,.07);}
    .qp-trust__stats .qp-stat__text{align-items:flex-start;}
    .qp-trust__stats .qp-badge__dot,.qp-review .qp-badge__dot{width:38px;height:38px;font-size:15px;}
    .qp-trust__stats .qp-stat__text b{font-size:18px;}
    .qp-trust__stats .qp-stat__text span{white-space:nowrap;}
    .qp .qp-rates{grid-template-columns:1fr 1fr;}
    .qp-group--quick{padding:20px 18px 18px;}
}

/* --- Компьютер: меню разделов слева, шапка в две колонки --- */
@media (min-width:1024px){
    .qp{padding:32px 24px 8px;}
    .qp__layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start;}
    .qp-side{display:block;position:sticky;top:24px;}
    .qp-jump,.qp-jump-sentinel{display:none;}
    /* На ПК текст фактов и отступы шкалы — прежние: 13px и ужатая шкала нужны только телефону */
    .qp-card__facts,.qp-card__skin{font-size:12px;}
    .qp .qp-stats{display:flex;grid-column:1 / -1;}
    .qp-bonus{padding:22px 24px 20px;}
    .qp-track{gap:18px;}
    .qp-track__ring{width:78px;height:78px;}
    .qp-track__ring::after{inset:7px;}
    .qp-track__ring span{font-size:26px;}
    .qp-track__ring small{font-size:14px;}
    .qp-track__ring i{font-size:22px;}
    .qp-track__head b{font-size:28px;}
    .qp-track__head span{font-size:15px;}
    .qp-track__head .qp-track__done{font-size:20px;}
    .qp .qp-track__head{margin-bottom:14px;}
    .qp .qp-track__segs{gap:5px;}
    .qp-track__segs li{height:10px;border-radius:5px;}
    .qp-track__body{padding-bottom:22px;}
    .qp-track__amt{top:17px;font-size:12px;}
    /* Заголовок — наверху, вровень с «Быстрыми заданиями» в меню (владелец 17.09.2026) */
    .qp-hero{grid-template-columns:minmax(0,1fr) 400px;align-items:start;gap:28px 40px;}
    .qp-hero__title{font-size:44px;}
    .qp-group,.qp-block,.qp__main > section.qp-group:first-of-type{margin-top:56px;scroll-margin-top:24px;}
    .qp-agebar{scroll-margin-top:24px;}
    .qp-steps{grid-template-columns:repeat(4,minmax(0,1fr));}
    /* Пригласи друга: суммы стопкой слева, как попросить друга — справа (27.09.2026) */
    .qp-invite{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;align-items:stretch;margin-top:4px;}
    .qp .qp-invite .qp-rates{grid-template-columns:1fr;margin-top:0;}
    .qp-invite .qp-rate{justify-content:center;}
    .qp-invite .qp-invite__how{margin-top:0;align-content:center;}
    .qp-step{grid-template-columns:1fr;align-items:start;align-content:start;gap:12px;padding:18px;}
}
@media (min-width:1280px){
    .qp-list{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Телефон: плашка «ЧАТ · N онлайн» закрывала кнопки карточек — на странице квестов она круглая,
   со значком и счётчиком непрочитанных (владелец 27.09.2026). Только эта страница: #quests. */
@media (max-width:1023px){
    html:has(#quests.qp) #chatToggleBtn.chat-toggle-btn{width:52px !important;height:52px !important;padding:0 !important;
        justify-content:center;border-radius:50% !important;}
    html:has(#quests.qp) #chatToggleBtn .chat-btn-info{display:none !important;}
    html:has(#quests.qp) #chatToggleBtn .chat-btn-icon{margin-right:0;}
}

/* Скин в карточке без плитки и без линии редкости снизу (владелец 27.09.2026: линия — «как у всех ИИ»).
   Скин лежит прямо на карточке, за ним мягкое пятно цвета редкости; место в карточке то же (108×80),
   картинка крупнее прежней — рамка её больше не обрезает. */
.qp-skin{overflow:visible;border-radius:0;background:none;box-shadow:none;}
.qp-skin::before{content:"";position:absolute;left:50%;top:50%;width:112px;height:64px;transform:translate(-50%,-50%);
    border-radius:50%;background:radial-gradient(closest-side,rgba(var(--rarity),.6),rgba(var(--rarity),0));filter:blur(10px);}
.qp-skin img{width:124px;height:124px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6));}
.qp-skin{margin-left:6px;}
.qp-card.is-done .qp-skin::before{opacity:.45;}
/* Скин крупнее: колонка шире, чтобы оружие заполняло место слева и подходило к тексту (27.09.2026) */
.qp-card__prize{grid-template-columns:140px minmax(0,1fr);gap:16px;}
/* Картинка чуть шире колонки — сама колонка отодвинута от края карточки, чтобы ствол не упирался в рамку */
.qp-skin{height:92px;margin-left:8px;}
.qp-skin::before{width:140px;height:76px;}
.qp-skin img{width:150px;height:150px;}
@media (max-width:359px){
    .qp-card__prize{grid-template-columns:112px minmax(0,1fr);gap:16px;}
    .qp-skin{height:84px;margin-left:4px;}
    .qp-skin::before{width:116px;height:64px;}
    .qp-skin img{width:122px;height:122px;}
}
/* ПК в три колонки: карточка узкая (~300px), с широкой колонкой скина сумма ломалась на две строки — прежний размер */
@media (min-width:1280px){
    /* Промежуток до суммы шире (владелец 27.09.2026), скин прежнего размера */
    .qp-card__prize{grid-template-columns:108px minmax(0,1fr);gap:24px;}
    .qp-skin{height:80px;margin-left:10px;}
    .qp-skin::before{width:112px;height:64px;}
    .qp-skin img{width:124px;height:124px;}
}