/* quests.css — ЗАДАНИЯ: иконка в карточке, полоска обучения, окно заданий, подсказки.
   Логика — quests.js. Стиль — как у карточки главной и модалки голубя. */

/* ===== иконка в карточке ===== */
#main-tab .home-ico--quests{ color:#ffd35a; }
#main-tab .home-ico--quests svg{ width:24px; height:24px; display:block; }
.q-badge{ position:absolute; right:-6px; top:-7px; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box;
  border-radius:999px; background:#ff3b5c; border:2px solid #1c243e; color:#fff; font-size:11px; font-weight:900; line-height:14px; text-align:center; }
.q-badge[hidden]{ display:none; }

/* ===== полоска текущего шага (только пока идёт обучение) ===== */
#main-tab .q-strip{ display:flex; align-items:center; gap:10px; width:100%; max-width:430px; margin:8px auto 0; box-sizing:border-box;
  height:48px; padding:0 10px 0 8px; border-radius:14px; border:1px solid rgba(255,211,90,.45);
  background:rgba(28,36,62,.92); box-shadow:0 8px 20px rgba(0,0,0,.3); color:#fff; font-family:inherit; text-align:left;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#main-tab .q-strip[hidden]{ display:none; }
#main-tab .q-strip:active{ transform:scale(.98); }
#main-tab .q-strip__ico{ flex:0 0 32px; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:18px;
  background:linear-gradient(180deg,#ffcf4d,#f5a623); box-shadow:inset 0 -2px 0 rgba(150,80,0,.35); color:#3a1d00; }
#main-tab .q-strip__ico svg{ width:20px; height:20px; }
#main-tab .q-strip__txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
#main-tab .q-strip__step{ font-size:11px; font-weight:800; color:#ffd35a; }
#main-tab .q-strip__title{ font-size:14px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#main-tab .q-strip__cnt{ color:#a9adc9; font-size:12px; }
#main-tab .q-strip__chev{ flex:0 0 auto; opacity:.6; }
#main-tab .q-strip__claim{ flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; height:32px; padding:0 10px; border-radius:10px;
  background:linear-gradient(180deg,#ffcf4d,#f5a623); box-shadow:0 3px 0 #b46f00; color:#3a1d00; font-size:13px; font-weight:900; white-space:nowrap; }
#main-tab .q-strip.is-ready{ border-color:#ffd35a; box-shadow:0 0 0 2px rgba(255,211,90,.25), 0 8px 20px rgba(0,0,0,.3); animation:qReady 1.6s ease-in-out infinite; }
@keyframes qReady{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.02) } }

.q-rew{ flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; height:26px; padding:0 8px; border-radius:999px;
  background:rgba(255,255,255,.08); font-size:13px; font-weight:900; color:#fff; white-space:nowrap; }
.q-feather{ width:15px; height:15px; vertical-align:-2px; }

/* ===== подсказка-прожектор ===== */
.q-spot{ position:fixed; z-index:30000; pointer-events:none; box-shadow:0 0 0 9999px rgba(8,10,24,.62); }
.q-spot::after{ content:""; position:absolute; inset:-6px; border-radius:inherit; border:3px solid #ffd35a; animation:qPulse 1.4s ease-in-out infinite; }
@keyframes qPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.08); opacity:.6 } }
.q-bubble{ position:fixed; z-index:30001; width:min(300px, calc(100vw - 32px)); box-sizing:border-box; padding:12px 14px;
  border-radius:16px; background:#fff; color:#1b1f3a; box-shadow:0 12px 30px rgba(0,0,0,.4); font-size:14px; font-weight:800; line-height:1.3; }
.q-bubble__step{ font-size:11px; font-weight:900; color:#8a8fb0; margin-bottom:3px; letter-spacing:.3px; }
.q-bubble::after{ content:""; position:absolute; left:var(--arrow-x,50%); bottom:-8px; width:16px; height:16px; background:#fff; transform:translateX(-50%) rotate(45deg); border-radius:3px; }
.q-bubble.is-below::after{ bottom:auto; top:-8px; }
.q-bubble.is-inside::after{ display:none; }
.q-bubble__skip{ display:block; margin-top:8px; padding:0; border:none; background:none; font-family:inherit; font-size:12px; font-weight:800; color:#8a8fb0; cursor:pointer; }

/* ===== окно заданий (шторка снизу) ===== */
.q-overlay{ position:fixed; inset:0; z-index:20000; background:rgba(8,10,24,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease; }
.q-overlay.is-open{ opacity:1; }
.q-sheet{ position:fixed; left:50%; bottom:0; z-index:20001; width:min(430px,100vw); max-height:86dvh; box-sizing:border-box;
  display:flex; flex-direction:column; border-radius:22px 22px 0 0; background:#1c243e; border:1px solid rgba(255,255,255,.12); border-bottom:none;
  box-shadow:0 -12px 40px rgba(0,0,0,.45); color:#fff; padding:8px 14px calc(18px + env(safe-area-inset-bottom));
  transform:translate(-50%, 100%); transition:transform .22s cubic-bezier(.25,1,.35,1); }
.q-sheet.is-open{ transform:translate(-50%, 0); }
body.q-sheet-open{ overflow:hidden; }
.q-grab{ width:40px; height:5px; border-radius:999px; background:rgba(255,255,255,.25); margin:0 auto 10px; flex:0 0 auto; }
.q-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex:0 0 auto; }
.q-head h3{ margin:0; flex:1; font-size:20px; font-weight:900; }
.q-close{ width:36px; height:36px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-size:16px; font-weight:900; cursor:pointer; }
.q-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:14px; background:rgba(0,0,0,.25); margin-bottom:12px; flex:0 0 auto; }
.q-tab{ height:36px; border-radius:11px; border:none; background:transparent; color:#a9adc9; font-family:inherit; font-size:14px; font-weight:900; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px; }
.q-tab.is-on{ background:rgba(255,255,255,.1); color:#fff; }
.q-dot{ width:8px; height:8px; border-radius:50%; background:#ff3b5c; }
.q-count{ min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:999px; background:#ff3b5c; color:#fff; font-size:11px; line-height:18px; }
.q-list{ overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:8px; min-height:0; padding-bottom:4px; }
.q-sub{ display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:800; color:#a9adc9; margin:2px 2px 0; }
.q-sub--gap{ margin-top:6px; }
.q-empty{ padding:18px; text-align:center; color:#a9adc9; font-weight:800; }

.q-total{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; background:linear-gradient(90deg, rgba(255,207,77,.18), rgba(255,207,77,.04)); border:1px solid rgba(255,211,90,.35); }
.q-total__bar{ flex:1; min-width:0; }
.q-total__lbl{ font-size:13px; font-weight:900; margin-bottom:6px; }
.q-total__prize{ width:50px; height:50px; flex:0 0 50px; border-radius:12px; background:rgba(0,0,0,.25); display:grid; place-items:center; font-size:26px; }
.q-total__prize img{ width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(178,76,255,.8)); }
.q-bar{ height:6px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.q-bar > i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#4db8ff,#4ade80); }

.q-row{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.q-row[data-go]{ cursor:pointer; }
.q-row__ico{ flex:0 0 40px; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center; font-size:20px; }
.q-row__ico img{ width:30px; height:30px; }
.q-row__body{ flex:1; min-width:0; }
.q-row__title{ font-size:14px; font-weight:900; line-height:1.2; }
.q-row__sub{ margin-top:4px; font-size:12px; font-weight:900; color:#ffd35a; }
.q-row__meta{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.q-row__meta .q-bar{ flex:1; }
.q-row__cnt{ font-size:11px; font-weight:900; color:#a9adc9; min-width:28px; text-align:right; }
.q-btn{ flex:0 0 auto; height:36px; min-width:84px; padding:0 12px; border-radius:12px; border:none; font-family:inherit; font-size:13px; font-weight:900; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; touch-action:manipulation; white-space:nowrap; }
.q-btn--go{ background:rgba(77,184,255,.18); border:1px solid rgba(77,184,255,.5); color:#bfe6ff; }
.q-btn--claim{ background:linear-gradient(180deg,#ffcf4d,#f5a623); color:#3a1d00; box-shadow:0 3px 0 #b46f00; animation:qClaim 1.6s ease-in-out infinite; }
@keyframes qClaim{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }
.q-btn--done{ background:transparent; color:#8ff0b4; min-width:0; cursor:default; }
.q-btn--locked{ background:transparent; color:#a9adc9; min-width:0; cursor:default; }
.q-btn--tg{ background:#2aabee; }
.q-btn:disabled{ opacity:.6; }
.q-row.is-done{ opacity:.55; }
.q-row.is-now{ border-color:rgba(255,211,90,.55); background:rgba(255,211,90,.08); }
.q-row.is-locked{ opacity:.45; }
.q-row--tg{ background:linear-gradient(90deg, rgba(42,171,238,.2), rgba(42,171,238,.05)); border-color:rgba(42,171,238,.45); }

@media (prefers-reduced-motion: reduce){
  #main-tab .q-strip.is-ready, .q-btn--claim, .q-spot::after{ animation:none; }
  .q-sheet, .q-overlay{ transition:none; }
}


/* ===== приветствие при первом заходе (4.2) ===== */
.q-welcome{
  position: fixed; inset: 0; z-index: 30010;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(8,10,24,.7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s ease;
}
.q-welcome.is-open{ opacity: 1; }
.q-welcome__card{
  width: min(340px, 100%);
  box-sizing: border-box;
  padding: 22px 18px 16px;
  border-radius: 24px;
  background: #1c243e;
  border: 2px solid rgba(255,211,90,.55);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  text-align: center;
  color: #fff;
  animation: qWelcomeIn .3s cubic-bezier(.25,1,.35,1);
}
@keyframes qWelcomeIn{ from{ transform: translateY(16px) scale(.95); } }
.q-welcome__img{ width: 120px; height: 120px; object-fit: contain; animation: qWelcomeBob 2s ease-in-out infinite; }
@keyframes qWelcomeBob{ 50%{ translate: 0 -6px; rotate: -3deg; } }
.q-welcome h2{ margin: 4px 0 8px; font-size: 22px; font-weight: 900; text-wrap: balance; }
.q-welcome p{ margin: 0 0 8px; font-size: 14px; font-weight: 800; color: #d7d9ea; line-height: 1.4; }
.q-welcome__prize{ color: #a9adc9 !important; font-size: 13px !important; }
.q-welcome__prize b{ color: #ffd35a; }
.q-welcome__go{
  width: 100%; height: 54px; margin-top: 8px;
  border: 1px solid #9fd3ff; border-radius: 16px;
  background: linear-gradient(180deg,#00B318,#007D01);
  color: #fff; font-family: inherit; font-size: 19px; font-weight: 900;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  cursor: pointer;
}
.q-welcome__go:active{ transform: scale(.98); }
@media (prefers-reduced-motion: reduce){ .q-welcome__img{ animation: none; } }