/* ── Tutorial freeze mode (narrative/tutorials.js) ──
   Узкая замена qw-ui-active для карточек туториала: возвращает системный курсор и
   прячет ТОЛЬКО спрайт-курсор корабля. НЕ прячет .food-dot/.enemy-dot/.heal-soul-dot/
   .hud2-frame — их туториал как раз подсвечивает (qw-ui-active их display:none-ил,
   и спотлайт указывал на пустое место). */
body.qw-tut-active { cursor: default !important; }
body.qw-tut-active button { cursor: pointer !important; }
body.qw-tut-active .cursor-dot { display: none !important; }
/* Тип А (точки 1-4): корабль-курсор прячется. Тип Б (большой туториал L5,
   qw-tut-keep-ship): корабль ОСТАЁТСЯ — щит визуально обёрнут вокруг него,
   без спрайта под мигающим щитом кадр читался как пропажа корабля. */
body.qw-tut-active:not(.qw-tut-keep-ship) .ship-sprite-cursor { display: none !important; }

/* ── Виньетка-схождение (движок v2) ──
   Мягкое затемнение с прозрачным окном вокруг цели; сам градиент рисует JS
   (radial-gradient с анимируемым радиусом окна), тут только каркас + fade-out. */
.qd-tut-vignette {
  position: fixed;
  inset: 0;
  /* НИЖЕ меню (10011/10012) и паузы (10013), ВЫШЕ HUD/игровых слоёв (≤10005):
     Escape-меню и P-пауза всегда рендерятся поверх туториала (Лео 2026-07-09, ТЗ-3).
     Кнопка MENU (10010) тоже остаётся видимой/кликабельной над виньеткой. */
  z-index: 10006;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}

/* ── Плашка диалога: кинематографичная катсцен-панель (эталон tutorial-dialog-preview) ──
   Дизайн 1:1 с превью-редактором: слева некропнутый портрет (multiply + тон), справа
   роль · разделитель · имя, крупный текст, живая волновая форма, кнопка »» ПОНЯЛ.
   .qd-tut-panel = видимый бокс нужного размера; .qd-tut-stage внутри — натуральный
   размер эталона, ужатый ЦЕЛИКОМ через transform: scale(--qd-tut-scale). Внутренние
   элементы (%/vw) НЕ трогаются — это буквально «уменьшили картинку», без реф-лейаута.
   Единственный рычаг размера — --qd-tut-scale (крутить на localhost). */
.qd-tut-panel {
  --qd-tut-scale: 0.64;
  --portrait-left: 0.8;
  --portrait-bottom: 7.7;
  --portrait-width: 30.1;
  --content-left: 31.94;
  --content-top: 15.1;
  --content-width: 65.9;
  --content-height: 76.6;
  --speaker-left: 0;
  --speaker-top: 2;
  --speaker-width: 90;
  --speaker-gap: 2;
  --role-font: 2;
  --name-font: 1.87;
  --divider-height: 3.85;
  --message-left: 0;
  --message-top: 20;
  --message-width: 86;
  --message-font: 3;
  --message-line: 1.1;
  --wave-left: 0;
  --wave-top: 80;
  --wave-width: 20;
  --wave-height: 20;
  --cta-left: 70;
  --cta-top: 62;
  --cta-width: 30;
  --cta-height: 40;
  --cta-font: 1.5;
  --cta-gap: 2;
  --card-width: 92.6;
  --card-stroke-width: 20;
  --qd-accent: #ff5a00;
  position: fixed;
  z-index: 10008; /* над виньеткой (10006), под меню (10011+) и паузой (10013) — ТЗ-3 */
  width: calc(min(var(--card-width) * 1vw, 2381px) * var(--qd-tut-scale));
  aspect-ratio: 4762 / 1194;
  overflow: visible;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  font-family: 'Montserrat', 'Exo 2', Arial, sans-serif;
}
.qd-tut-panel.visible {
  opacity: 1;
  transform: translateY(0);
}
.qd-tut-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: min(var(--card-width) * 1vw, 2381px);
  aspect-ratio: 4762 / 1194;
  transform: scale(var(--qd-tut-scale));
  transform-origin: top left;
  isolation: isolate;
  overflow: visible;
}
.qd-tut-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.qd-tut-frame__fill { fill: url(#qdTutFill); }
.qd-tut-frame__stroke {
  fill: none;
  stroke: url(#qdTutStroke);
  stroke-width: var(--card-stroke-width);
  stroke-linejoin: round;
  stroke-linecap: round;
}
.qd-tut-portrait-wrap {
  position: absolute;
  left: calc(var(--portrait-left) * 1%);
  bottom: calc(var(--portrait-bottom) * 1%);
  width: calc(var(--portrait-width) * 1%);
  height: auto;
  overflow: visible;
  z-index: 7;
  pointer-events: none;
}
.qd-tut-portrait-img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.64));
}
.qd-tut-content {
  position: absolute;
  left: calc(var(--content-left) * 1%);
  top: calc(var(--content-top) * 1%);
  width: calc(var(--content-width) * 1%);
  height: calc(var(--content-height) * 1%);
  z-index: 5;
}
.qd-tut-speaker {
  position: absolute;
  top: calc(var(--speaker-top) * 1%);
  left: calc(var(--speaker-left) * 1%);
  width: calc(var(--speaker-width) * 1%);
  height: 15%;
  display: flex;
  align-items: center;
  gap: clamp(16px, calc(var(--speaker-gap) * 1vw), 46px);
  white-space: nowrap;
  font-family: 'Montserrat', 'Exo 2', Arial, sans-serif;
  text-transform: uppercase;
}
.qd-tut-role {
  color: var(--qd-accent);
  font-size: clamp(26px, calc(var(--role-font) * 1vw), 64px);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: 0;
}
.qd-tut-divider {
  width: 5px;
  height: clamp(44px, calc(var(--divider-height) * 1vw), 78px);
  background: var(--qd-accent);
  box-shadow: 0 0 18px rgba(255, 90, 0, 0.5);
}
.qd-tut-name {
  color: var(--qd-accent);
  font-size: clamp(18px, calc(var(--name-font) * 1vw), 48px);
  line-height: 1;
  font-weight: 600;
}
.qd-tut-message {
  position: absolute;
  top: calc(var(--message-top) * 1%);
  left: calc(var(--message-left) * 1%);
  width: calc(var(--message-width) * 1%);
  margin: 0;
  color: #f7f9ff;
  font-family: 'Montserrat', 'Exo 2', Arial, sans-serif;
  font-size: clamp(36px, calc(var(--message-font) * 1vw), 74px);
  line-height: var(--message-line);
  font-weight: 600;
  letter-spacing: 0;
  white-space: pre-line;
}
.qd-tut-waveform {
  position: absolute;
  left: calc(var(--wave-left) * 1%);
  top: calc(var(--wave-top) * 1%);
  width: calc(var(--wave-width) * 1%);
  height: calc(var(--wave-height) * 1%);
}
.qd-tut-cta {
  position: absolute;
  left: calc(var(--cta-left) * 1%);
  top: calc(var(--cta-top) * 1%);
  width: calc(var(--cta-width) * 1%);
  height: calc(var(--cta-height) * 1%);
  padding: 0 5.1%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, calc(var(--cta-gap) * 1vw), 20px);
  border: 0;
  color: #f7f9ff;
  background: transparent;
  font-family: 'Montserrat', 'Exo 2', Arial, sans-serif;
  font-size: clamp(21px, calc(var(--cta-font) * 1vw), 48px);
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease;
}
.qd-tut-cta svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
}
.qd-tut-cta__fill {
  fill: #090e15;
  filter: drop-shadow(0 0 22px rgba(255, 90, 0, 0.42));
}
.qd-tut-cta__stroke {
  fill: none;
  stroke: url(#qdTutBtnStroke);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.5;
}
.qd-tut-cta:hover,
.qd-tut-cta:focus-visible {
  color: #ffffff;
  transform: translateY(-2px);
  outline: none;
}
.qd-tut-cta__chevrons {
  color: var(--qd-accent);
  font-size: 0.72em;
  letter-spacing: -0.14em;
  transform: translateY(-0.03em);
  animation: qd-tut-chevron-nudge 1.35s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes qd-tut-chevron-nudge {
  0%, 100% { transform: translate(0, -0.03em); opacity: 0.82; }
  45% { transform: translate(0.28em, -0.03em); opacity: 1; }
}

/* ── Стадии staged reveal (tutorials.js) ──
   !important обязателен: у целей туториала есть собственные СПАВН-анимации
   (food-appear / enemy-appear с fill-mode forwards, плюс бесконечные ghost-pulse /
   cursed-flicker), которые по каскаду перебивают инлайн style.opacity/animation —
   прежняя инлайн-схема давала гонку, и точка на L2/L4 могла не проявиться вовсе. */
.qd-tut-prehide {
  animation: none !important;
  opacity: 0 !important;
}
.qd-tut-appear {
  animation: food-appear 0.34s cubic-bezier(.34, 1.56, .64, 1) forwards !important;
}

/* Tutorial focus pulse — цель мигает/светится на своём месте (без transform:
   тех-правило запрещает transform на gameplay-элементах left/top) */
@keyframes qd-tut-pulse {
  0%,100% { filter: brightness(1)   drop-shadow(0 0 6px  rgba(255,110,0,0.55)) drop-shadow(0 0 16px rgba(255,90,0,0.30)); }
  50%     { filter: brightness(2.2) drop-shadow(0 0 26px rgba(255,140,0,1))    drop-shadow(0 0 55px rgba(255,90,0,0.85)); }
}
/* !important — чтобы пульс гарантированно победил собственные анимации цели
   (ghost-pulse/cursed-flicker той же специфичности; видимость под пульсом держит
   инлайн transform/opacity, который tutorials.js ставит на цель). */
.qd-tut-pulse { animation: qd-tut-pulse 1.1s ease-in-out infinite !important; }

/* Mini shield-pulse (first-hit reminder, no freeze) */
@keyframes qd-shield-hint {
  0%,100% { filter: brightness(1); }
  40%     { filter: brightness(2) drop-shadow(0 0 24px rgba(0,200,255,0.9)); }
}
.qd-shield-hint { animation: qd-shield-hint 0.7s ease-in-out 4; }

/* "Catch me" hint label that follows the first yellow dot */
.catch-me-hint {
  position: fixed;
  pointer-events: none;
  z-index: 10020;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(232, 208, 0, 0.85);
  letter-spacing: 0.08em;
  transform: translate(-50%, -50%);
  animation: hint-life 3s ease forwards;
  user-select: none;
}