/* tutorial.css — ОБУЧЕНИЕ v2 (4.2): затемнение с «окном» под нужную кнопку, пузырь с текстом,
   полоска прогресса с призом сверху, приветствие. Логика — tutorial.js */

.tut2{
  position: fixed; inset: 0;
  z-index: 2147483300;            /* выше модалки голубя и профиля соседа — подсветка работает и в них */
  pointer-events: none;           /* клики проходят в «окно» к подсвеченной кнопке */
}
.tut2[hidden]{ display: none; }

.tut2-shade{
  position: fixed;
  background: rgba(6,8,20,.72);
  pointer-events: auto;           /* всё, кроме подсвеченного, не нажимается */
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.tut2-shade[hidden]{ display: none; }

.tut2-ring{
  position: fixed;
  border-radius: 16px;
  box-shadow: 0 0 0 3px #ffd35a, 0 0 22px 4px rgba(255,211,90,.55);
  pointer-events: none;
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
  animation: tut2Pulse 1.3s ease-in-out infinite;
}
.tut2-ring[hidden]{ display: none; }
.tut2[data-mode="tap"] .tut2-ring{ pointer-events: auto; cursor: pointer; } /* в шаге «Далее» подсвеченное не нажимается */
@keyframes tut2Pulse{
  50%{ box-shadow: 0 0 0 5px #ffd35a, 0 0 30px 8px rgba(255,211,90,.35); }
}

.tut2-bubble{
  position: fixed;
  box-sizing: border-box;
  max-width: 420px; margin: 0 auto;
  padding: 12px 14px;
  border-radius: 18px;
  background: #1c243e;
  border: 2px solid rgba(255,211,90,.7);
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  color: #fff;
  pointer-events: auto;
  animation: tut2In .22s cubic-bezier(.25,1,.35,1);
}
@keyframes tut2In{ from{ opacity: 0; transform: translateY(8px) scale(.97); } }
.tut2-bubble__txt{
  font-size: 15px; font-weight: 800; line-height: 1.38;
  text-wrap: pretty;
}
.tut2-next{
  display: block; margin: 10px 0 0 auto;
  height: 38px; padding: 0 18px;
  border: 1px solid #9fd3ff; border-radius: 12px;
  background: linear-gradient(180deg,#00B318,#007D01);
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 900;
  cursor: pointer;
}
.tut2-next:active{ transform: scale(.97); }
.tut2-skip{
  display: block; margin: 8px 0 0 auto; padding: 4px 0;
  border: 0; background: transparent;
  color: #8a8fb0; font-family: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer;
}

/* «баннер»: игрок играет свободно, сверху — сколько осталось */
.tut2-bubble.is-banner{
  pointer-events: none;
  padding: 9px 14px;
  text-align: center;
  background: rgba(28,36,62,.94);
}
.tut2-bubble.is-banner .tut2-bubble__txt{ font-size: 14px; }

/* прогресс обучения + приз */
.tut2-bar{
  position: fixed; left: 12px; right: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  max-width: 420px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 44px; grid-template-rows: auto auto; column-gap: 8px; row-gap: 5px;
  align-items: center;
  padding: 7px 8px 7px 12px;
  box-sizing: border-box;
  border-radius: 14px;
  background: rgba(20,26,48,.94);
  border: 1px solid rgba(255,255,255,.1);
  pointer-events: none;
}
.tut2[data-mode="banner"] .tut2-bar{ display: none; } /* в игре не мешаем — хватает баннера */
.tut2-bar__txt{ font-size: 12.5px; font-weight: 800; color: #c9cde6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tut2-bar__txt b{ color: #fff; }
.tut2-bar__line{ height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.tut2-bar__line i{ display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg,#ffd35a,#ffae2b); transition: width .4s ease; }
.tut2-bar__prize{
  grid-column: 2; grid-row: 1 / span 2;
  width: 44px; height: 44px; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(190,120,255,.8));
}

/* пока идёт обучение — старые подсказки заданий не показываем */
body.tut2-on #q-strip,
body.tut2-on .q-bubble{ display: none !important; }
body.tut2-on .notification{ z-index: 2147483400; }

/* место на витрине, которое в обучении открывается бесплатно */
#sc-stage .sc-lock.is-free{ color: #ffd35a; }

/* первый голубь в обучении висит на месте */
.hunt-flyer.is-still{ filter: drop-shadow(0 0 10px rgba(255,211,90,.6)); }
.hunt-flyer.is-still img{ animation-play-state: paused; } /* и крыльями не машет — стоит на паузе */

/* ===== приветствие: приз — главное на экране ===== */
.tut2-welcome .tut2-welcome__card{ padding-top: 14px; }
.tut2-welcome__prize{
  position: relative;
  width: 150px; height: 150px; margin: 0 auto 4px;
  display: grid; place-items: center;
}
.tut2-welcome__prize::before{
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(190,120,255,.55), rgba(190,120,255,0) 70%);
  animation: tut2Glow 2.2s ease-in-out infinite;
}
.tut2-welcome__prize img{
  position: relative;
  width: 140px; height: 140px; object-fit: contain;
  animation: qWelcomeBob 2s ease-in-out infinite;
}
@keyframes tut2Glow{ 50%{ transform: scale(1.12); opacity: .7; } }
.tut2-welcome__inc{ color: #ffd35a !important; font-size: 13px !important; }
.tut2-welcome__go{ height: auto !important; min-height: 54px; padding: 8px 12px; font-size: 17px !important; line-height: 1.2; }
.tut2-welcome__skip{
  display: block; margin: 10px auto 0; padding: 6px 10px;
  border: 0; background: transparent;
  color: #8a8fb0; font-family: inherit; font-size: 13px; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

@media (prefers-reduced-motion: reduce){
  .tut2-ring, .tut2-welcome__prize::before, .tut2-welcome__prize img{ animation: none; }
  .tut2-shade, .tut2-ring{ transition: none; }
}