/* ============================================================
   КиберДетектив — дизайн-система
   Светлая тема: тёмно-синий + красный акцент.
   Цвета взяты из фирменных иллюстраций, чтобы интерфейс и графика
   читались как одно целое.
   Мобильный приоритет: базовые стили под телефон, @media — под большие экраны.
   ============================================================ */

:root {
  /* ---- Основа ---- */
  --bg:          #ffffff;
  --bg-soft:     #f4f6f9;   /* полосы и подложки секций */
  --surface:     #f1f3f6;   /* карточки */
  --surface-2:   #e8ecf2;   /* карточка при наведении */
  --line:        #dfe4ec;
  --line-soft:   #eaeef4;

  /* ---- Текст ---- */
  --ink:         #002f59;   /* заголовки, фирменный тёмно-синий */
  --ink-soft:    #1b3a63;
  --body:        #37475f;   /* основной текст */
  --muted:       #7c8aa0;   /* второстепенный текст */
  --dim:         #9aa6b8;

  /* ---- Акценты ---- */
  --red:         #d23234;   /* фирменный красный */
  --red-dark:    #b32729;
  --red-soft:    #fceff1;   /* розовая подложка */
  --red-line:    #f6dade;

  --blue:        #2f7fd4;
  --blue-soft:   #d9eafb;   /* голубой из иллюстраций: чипы, подложки */
  --blue-line:   #c2ddf5;

  --green:       #1f9d63;
  --green-soft:  #e4f5ec;
  --amber:       #c98a1a;
  --amber-soft:  #fdf1dc;

  /* ---- Форма ---- */
  --r-sm:   10px;
  --r:      16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-pill: 999px;

  --shadow:    0 18px 44px rgba(0, 47, 89, .12);
  --shadow-sm: 0 4px 16px rgba(0, 47, 89, .08);

  /* ---- Ритм ---- */
  --gap: 16px;
  --pad: 16px;

  /* Безопасные зоны телефона (вырез, домашняя полоса) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --font: "Golos Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--ink); }
img, svg { max-width: 100%; }

a { color: var(--red); }

button, input, select, textarea { font: inherit; color: inherit; }
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Скроллбары */
* { scrollbar-width: thin; scrollbar-color: #c8d1de transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c8d1de; border-radius: var(--r-pill); }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Типографика
   ============================================================ */

.t-eyebrow {
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 500;
  color: var(--ink);
}
.t-h1 {
  font-size: clamp(30px, 6.4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.t-h2 {
  font-size: clamp(24px, 4.4vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.t-h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.t-muted { color: var(--muted); }
.t-small { font-size: 14px; }
.t-mono  { font-family: var(--font-mono); }

/* Красное выделение внутри заголовка и текста */
.hl { color: var(--red); }

/* ============================================================
   Кнопки — минимум 46px по высоте (палец, не мышь)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 26px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background .16s ease,
              border-color .16s ease, color .16s ease, opacity .16s ease;
}
.btn:hover  { background: var(--bg-soft); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 600;
}
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); }

.btn--navy {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 600;
}
.btn--navy:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

.btn--success { background: var(--green-soft); border-color: var(--green); color: var(--green); font-weight: 600; }
.btn--danger  { background: var(--red-soft);   border-color: var(--red);   color: var(--red);   font-weight: 600; }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--body); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--block { width: 100%; }
.btn--sm    { min-height: 40px; padding: 8px 18px; font-size: 14px; }

/* Круглая иконочная кнопка */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 17px;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.icon-btn:hover  { background: var(--bg-soft); border-color: var(--ink); }
.icon-btn:active { transform: scale(.94); }

/* ============================================================
   Карточки, чипы, бейджи
   ============================================================ */

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--pad);
}

/* Чип-категория — голубая пилюля с тёмно-синим текстом */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.chip--red   { background: var(--red-soft);   color: var(--red); }
.chip--green { background: var(--green-soft); color: var(--green); }
.chip--plain { background: var(--surface-2);  color: var(--body); }

/* Уровни сложности */
.level { font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill); }
.level--easy   { background: var(--green-soft); color: var(--green); }
.level--medium { background: var(--amber-soft); color: var(--amber); }
.level--hard   { background: var(--red-soft);   color: var(--red); }

/* Красный квадратный бейдж с цифрой (как в макете) */
.num-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--red);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

/* ============================================================
   Прогресс
   ============================================================ */

.bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--red);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   Шапка тренажёра (рендерится из sim-shell.js)
   ============================================================ */

.sim-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--safe-top)) 12px 10px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.sim-top__back {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
}
.sim-top__back:hover { border-color: var(--ink); }
.sim-top__titles { min-width: 0; flex: 1; }
.sim-top__title {
  font-size: 15.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sim-top__sub {
  font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sim-top__score {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.1;
}
.sim-top__score b { font-size: 19px; color: var(--red); font-variant-numeric: tabular-nums; }
.sim-top__score span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.sim-top__bar { height: 3px; background: var(--line-soft); }
.sim-top__bar > i {
  display: block; height: 100%; width: 0;
  background: var(--red);
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   Модальное окно
   ============================================================ */

.mdl {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 47, 89, .38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.mdl.is-open { opacity: 1; pointer-events: auto; }

.mdl__card {
  width: 100%;
  max-width: 540px;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 22px 20px calc(22px + var(--safe-bottom));
  background: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow);
  transform: translateY(24px);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.mdl.is-open .mdl__card { transform: translateY(0); }

.mdl__grip {
  width: 42px; height: 4px;
  margin: -8px auto 16px;
  border-radius: var(--r-pill);
  background: var(--line);
}

.mdl__icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  border-radius: 18px;
  background: var(--blue-soft);
}
.mdl__icon--ok  { background: var(--green-soft); }
.mdl__icon--bad { background: var(--red-soft); }
.mdl__iconImg { width: 44px; height: 44px; object-fit: contain; }
/* Маскот в модалке — крупнее и без подложки */
.mdl__icon--mascot { width: auto; height: 110px; background: transparent; }
.mdl__icon .mdl__mascotImg { height: 110px; width: auto; }

.mdl__title { font-size: 23px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; }
.mdl__text  { color: var(--body); font-size: 15.5px; }
.mdl__text strong, .mdl__text b { color: var(--ink); }
.mdl__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

@media (min-width: 620px) {
  .mdl { align-items: center; padding: 24px; }
  .mdl__card { border-radius: var(--r-xl); max-height: 86dvh; }
  .mdl__grip { display: none; }
  .mdl__actions { flex-direction: row-reverse; }
  .mdl__actions .btn { flex: 1; }
  /* Список равнозначных вариантов (например выбор режима) — всегда столбиком,
     иначе row-reverse переставляет их в обратном порядке. */
  .mdl__actions--stack { flex-direction: column; }
}

/* Пояснительный блок внутри разбора */
.why {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--red-soft);
  font-size: 15px;
  color: var(--body);
}
.why b { color: var(--ink); }
.why ul { margin: 8px 0 0; padding-left: 18px; }
.why li { margin-bottom: 5px; }

/* ============================================================
   Тост
   ============================================================ */

.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: min(92vw, 420px);
}
.toast {
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 14.5px;
  font-weight: 500;
  animation: toast-in .26s cubic-bezier(.22, 1, .36, 1);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }

/* ============================================================
   Фирменные иконки и маскот (вместо эмодзи)
   ============================================================ */

/* Инлайн-иконка в тексте/кнопках: по умолчанию размером с заглавную букву */
.ic {
  display: inline-block;
  height: 1.2em;
  width: auto;
  vertical-align: -0.22em;
  object-fit: contain;
  user-select: none;
}
.ic--lg   { height: 44px; }
.ic--xl   { height: 64px; }
.ic--chip { height: 15px; }
.ic--btn  { height: 20px; }
.ic--mark { height: 17px; }
.ic--perm { height: 30px; }

/* Иконка внутри писем (iframe): чуть крупнее строки */
.eic {
  display: inline-block;
  height: 1.35em;
  width: auto;
  vertical-align: -0.3em;
  object-fit: contain;
}

/* Маскот — базовый класс */
.mascot { display: inline-block; user-select: none; }

/* Маскот в шапке тренажёра */
.sim-top__mascot {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  align-self: flex-end;
}

/* ============================================================
   Утилиты
   ============================================================ */

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Горизонтально прокручиваемый ряд (табы, фильтры) */
.scroll-x {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.scroll-x::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}