/* «Квесты»: карты недели — веером, как раздали; задания — списком; ачивки — сеткой значков с наградой. */
.quests { display: flex; flex-direction: column; gap: 18px; padding: calc(12px + var(--safe-t)) 16px calc(var(--tabbar-h) + 24px); }
.quests .h-sec small { font: 500 13px var(--f-body); color: var(--muted); }
.quests section { display: flex; flex-direction: column; gap: 10px; }
.q-lead { margin: 0; }

/* колода: стопка, которую тянешь пальцем или мышью; активная карта по центру, соседние выглядывают и чуть повёрнуты */
.q-deck { margin: 0 -16px; padding: 14px 0 6px; overflow: hidden; touch-action: pan-y; user-select: none; }
.q-track { display: flex; gap: 12px; transition: transform .4s var(--ease); will-change: transform; }
.qc { flex: none; width: 74%; max-width: 320px; display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden;
  background: var(--bg); border: 2px solid var(--ink); box-shadow: var(--hard); }
.q-track .qc { transform: rotate(calc((var(--i) - 2) * 1.5deg)) scale(.92); opacity: .65; transition: transform .4s var(--ease), opacity .3s;
  animation: deal .5s var(--spring) both; animation-delay: calc(var(--i) * 70ms); cursor: grab; }
.q-track .qc.on { transform: none; opacity: 1; }
.qc img, .qc-ph { -webkit-user-drag: none; pointer-events: none; }
@keyframes deal { from { opacity: 0; translate: -40px 30px; rotate: -12deg; } }
.q-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.q-nav button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); background: var(--bg); }
.q-nav button svg { width: 18px; height: 18px; }
.q-next svg { transform: scaleX(-1); }
.q-dots { display: flex; gap: 6px; }
.q-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: width .25s var(--ease), background .25s; }
.q-dots i.on { width: 22px; border-radius: 99px; background: var(--ink); }
.qc-ph { position: relative; aspect-ratio: 16 / 10; background: var(--raised) var(--img, none) center / cover; border-bottom: 2px solid var(--ink); }
.qc-kind { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 700; }
.qc-body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 4px; }
.qc-body b { font-size: 16px; line-height: 1.25; }
.qc-body small { color: var(--muted); font-size: 12.5px; }
.qc-twist { align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--amber); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.qc-take { margin: 8px 12px 12px; }
.qc.picked { width: 100%; max-width: none; }
.q-chosen, .q-done { display: flex; flex-direction: column; gap: 10px; }
.q-chosen p, .q-done p { margin: 0; }
.q-done .qc { opacity: .75; }
.q-act { display: flex; gap: 8px; }

/* задания */
.q-tasks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.q-tasks li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.q-tasks li i { font-style: normal; font-size: 22px; }
.q-tasks li span { font-weight: 600; }
.q-tasks h3 { margin: 6px 0 0; font: 800 18px var(--f-head); }
.q-tasks .soon li { background: none; border-style: dashed; color: var(--muted); }
.q-tasks .soon li span { font-weight: 500; }
.q-badges-link { margin-top: 4px; }