/* ============================================================
   trainers.css — выбор уровня, игровое поле, итоговый лист
   Внутри игрового поля размеры мишеней задаёт JS в процентах
   от ширины поля: иначе сложность поедет на разных экранах.
   ============================================================ */

/* ---------- S3. Выбор уровня ---------- */

.levels {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 26px);
}

.lvl {
  position: relative;
  width: calc(var(--u) * 190px);
  height: calc(var(--u) * 220px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(var(--u) * 6px);
  background: var(--paper);
  border: calc(var(--u) * 3px) solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--lift);
  transition: transform .14s ease, border-color .14s ease;
}
.lvl:hover  { transform: translateY(calc(var(--u) * -4px)); border-color: var(--accent); }
.lvl:active { transform: scale(.98); }
.lvl-num  { font-size: calc(var(--u) * 96px); font-weight: 700; line-height: 1; }
.lvl-best { font-size: calc(var(--u) * 24px); font-weight: 700; color: var(--accent); }

.lvl.is-done { background: var(--card); border-color: var(--accent); }
.lvl.is-done::after {
  content: '';
  position: absolute;
  top: calc(var(--u) * 12px); inset-inline-end: calc(var(--u) * 12px);
  width: calc(var(--u) * 34px); height: calc(var(--u) * 34px);
  border-radius: 50%;
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.5 4.5L19 7' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 70% no-repeat;
}

/* ---------- S4. Игровой экран ---------- */

#s4 { gap: calc(var(--u) * 8px); }

.hud {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14px);
  height: calc(var(--u) * 64px);
}
.hud-title {
  flex: 1;
  font-size: calc(var(--u) * 22px);
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Индикатор попыток: три точки */
.hud-dots { display: flex; gap: calc(var(--u) * 8px); }
.hud-dots i {
  width: calc(var(--u) * 16px); height: calc(var(--u) * 16px);
  border: calc(var(--u) * 3px) solid var(--line);
  border-radius: 50%;
}
.hud-dots i.is-done { background: var(--accent); border-color: var(--accent); }
.hud-dots i.is-now  { border-color: var(--ink); transform: scale(1.25); }

.hud-points {
  min-width: calc(var(--u) * 110px);
  text-align: center;
  font-size: calc(var(--u) * 40px);
  font-weight: 700;
}

.hud-btn {
  width: calc(var(--u) * 56px); height: calc(var(--u) * 56px);
  display: grid; place-items: center;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: var(--lift);
}
.hud-btn:hover { background: var(--paper-deep); }
.hud-btn svg { width: calc(var(--u) * 30px); height: calc(var(--u) * 30px); fill: var(--ink); }
/* Выключенная мелодия: нотка тускнеет и перечёркивается */
.hud-btn.is-off svg { fill: var(--ink-soft); opacity: .55; }
.hud-btn.is-off::after {
  content: '';
  position: absolute;
  width: calc(var(--u) * 42px); height: calc(var(--u) * 4px);
  border-radius: calc(var(--u) * 2px);
  background: var(--danger);
  transform: rotate(-45deg);
}
.hud-btn { position: relative; }

/* Полоса таймера: цифр нет, ребёнок их не читает */
.timer {
  flex: none;
  height: calc(var(--u) * 16px);
  background: var(--paper-deep);
  border-radius: calc(var(--u) * 8px);
  overflow: hidden;
}
.timer i {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transition: width .12s linear;
}

/* Игровое поле */
.field {
  position: relative;
  flex: 1;
  background: var(--paper);
  border-radius: var(--r-m);
  overflow: hidden;
}

.target {
  position: absolute;
  animation: pop .18s ease-out;
  /* Обрезаем квадратные углы: клик рядом с мишенью должен
     попасть в поле и посчитаться промахом, а не пропасть */
  clip-path: circle(50%);
}
.target svg { width: 100%; height: 100%; display: block; }
.target.is-gone { opacity: 0; transform: scale(.85); transition: all .22s ease-in; }
.target.is-hit  { animation: hit .2s ease-out forwards; }

@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes hit { to { transform: scale(1.35); opacity: 0; } }

/* Подложка полос у «Охотника»: слабая заливка через ряд
   и тонкие линии между. Ребёнок должен видеть, откуда ждать. */
.lanes-bg { position: absolute; inset: 0; pointer-events: none; }
.lanes-bg i {
  position: absolute;
  inset-inline: 0;
  display: block;
  border-top: calc(var(--u) * 1px) solid var(--line);
}
.lanes-bg i:first-child { border-top: 0; }
.lanes-bg i.is-alt { background: rgba(20, 50, 90, .035); }

/* Мишень ждёт второго щелчка: замерла и слегка приподнялась.
   Никакой мигающей обводки — ребёнку хватает того, что она встала. */
.target.is-waiting { transform: scale(1.04); transition: transform .12s ease; }

/* ---------- Карточки (тренажёр «Будь внимателен») ---------- */

.card {
  position: absolute;
  perspective: calc(var(--u) * 900px);
  animation: pop .2s ease-out;
}
.card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .34s ease;
}
.card.is-open .card-inner { transform: rotateY(180deg); }

.card-side {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Тень только box-shadow и никаких filter: filter разрушает
     трёхмерный контекст, карточка расплющивается и поверх лица
     снова вылезает рубашка — ошибка сборки 0.05. Радиус повторяет
     скруглениеrect в SVG: 14 из 100 единиц вьюбокса. */
  border-radius: 14%;
  box-shadow: 0 calc(var(--u) * 2px) calc(var(--u) * 5px) rgba(20, 50, 90, .22);
}
.card-side svg { width: 100%; height: 100%; display: block; }
.card-face { transform: rotateY(180deg); }

/* Подсветка при наведении — тоже без filter */
.card:hover .card-side {
  box-shadow: 0 calc(var(--u) * 4px) calc(var(--u) * 10px) rgba(20, 50, 90, .32);
}

/* Убранная карточка исчезает, место остаётся пустым */
.card.is-cleared {
  opacity: 0;
  transform: scale(.86);
  transition: opacity .24s ease-in, transform .24s ease-in;
  pointer-events: none;
}

/* Полоса в панели у карточек означает не остаток времени,
   а сколько поля пройдено, поэтому она растёт */

/* Всплывающая цифра на месте клика */
.float {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: calc(var(--u) * 44px);
  font-weight: 700;
  pointer-events: none;
  animation: rise .75s ease-out forwards;
}
.float.is-plus  { color: var(--pick); }
.float.is-minus { color: var(--danger); }
@keyframes rise {
  to { transform: translate(-50%, calc(var(--u) * -60px)); opacity: 0; }
}

/* ---------- Пауза между попытками ---------- */

.pause {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: calc(var(--u) * 20px);
  background: rgba(255, 255, 255, .94);
  border-radius: var(--r-m);
  z-index: 10;
}
.pause[hidden] { display: none; }
.pause-phrase { font-size: calc(var(--u) * 72px); font-weight: 700; text-align: center; }
.pause-note   { font-size: calc(var(--u) * 26px); color: var(--ink-soft); }

/* Наглядный отсчёт: кольцо, а не цифры */
.pause-ring {
  --fill: 1;
  position: relative;
  width: calc(var(--u) * 150px); height: calc(var(--u) * 150px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--fill) * 360deg),
                             var(--paper-deep) 0);
  transition: background .4s linear;
}
.pause-ring::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * 16px);
  background: var(--card);
  border-radius: 50%;
}
.pause-count {
  position: relative;
  font-size: calc(var(--u) * 54px);
  font-weight: 700;
}

/* ---------- S5. Итоговый лист ---------- */

#s5 { gap: calc(var(--u) * 10px); }

.sheet {
  flex: 1;
  min-height: 0;                 /* иначе grid не даёт себя сжать */
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-content: center;
  gap: calc(var(--u) * 10px) calc(var(--u) * 34px);
  padding: 0 calc(var(--u) * 20px);
}

.sheet-left  { display: grid; justify-items: center; align-content: center; gap: 0; }
.sheet-right { display: grid; align-content: center; gap: calc(var(--u) * 6px); }

.sheet-avatar {
  width: calc(var(--u) * 168px); height: calc(var(--u) * 168px);
  display: grid; place-items: center;
  background: var(--paper);
  border: calc(var(--u) * 4px) solid var(--pick);
  border-radius: 50%;
  overflow: hidden;
  font-size: calc(var(--u) * 62px); font-weight: 700; color: var(--ink-soft);
}
/* Файл может быть с непрозрачным фоном, поэтому круглим саму
   картинку, а не только контейнер: иначе в кружке виден квадрат. */
.sheet-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.sheet-head {
  display: flex; align-items: center; gap: calc(var(--u) * 12px);
  margin-bottom: calc(var(--u) * 4px);
}
.sheet-title { display: block; }
.sheet-level { display: block; }

.sheet-icon {
  flex: none;
  width: calc(var(--u) * 66px); height: calc(var(--u) * 66px);
  display: grid; place-items: center;
  background: var(--paper);
  border-radius: 50%;
  overflow: hidden;
}
.sheet-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sheet-icon.is-missing img { display: none; }
.sheet-icon.is-missing::after {
  content: '';
  width: 86%; height: 86%;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      #C8322A 0 16%, #A8C8E4 16% 48%, #4E7FB5 48% 76%, #14325A 76% 100%);
}

/* Пустая линия: имя вписывает педагог от руки.
   Отступ сверху — это и есть место под рукописное имя. */
.sheet-name {
  width: calc(var(--u) * 300px);
  margin-top: calc(var(--u) * 54px);
  padding-top: calc(var(--u) * 10px);
  border-top: calc(var(--u) * 3px) solid var(--ink);
  text-align: center;
  font-size: calc(var(--u) * 18px);
  color: var(--ink-soft);
}

.sheet-title { font-size: calc(var(--u) * 30px); font-weight: 700; }
.sheet-level { font-size: calc(var(--u) * 20px); color: var(--ink-soft); }

.sheet-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: calc(var(--u) * 14px);
  padding: calc(var(--u) * 5px) 0;
  border-bottom: calc(var(--u) * 2px) solid var(--line);
}
.sheet-row-label { font-size: calc(var(--u) * 22px); color: var(--ink-soft); }
.sheet-row-value { font-size: calc(var(--u) * 27px); font-weight: 700; }
.sheet-row-value em { font-size: calc(var(--u) * 19px); font-style: normal; color: var(--ink-soft); }
.sheet-row-pct {
  min-width: calc(var(--u) * 76px);
  text-align: end;
  font-size: calc(var(--u) * 26px); font-weight: 700; color: var(--accent);
}

.sheet-total {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: calc(var(--u) * 14px);
  margin-top: calc(var(--u) * 6px);
}
.sheet-total-label { font-size: calc(var(--u) * 26px); font-weight: 700; }
.sheet-total-value { font-size: calc(var(--u) * 34px); font-weight: 700; }
.sheet-total-value em { font-size: calc(var(--u) * 20px); font-style: normal; color: var(--ink-soft); }
.sheet-total-pct {
  min-width: calc(var(--u) * 76px);
  text-align: end;
  font-size: calc(var(--u) * 34px); font-weight: 700; color: var(--accent);
}

.sheet-time {
  font-size: calc(var(--u) * 22px);
  font-weight: 700;
  color: var(--ink-soft);
}

.sheet-mood {
  display: flex; align-items: center; gap: calc(var(--u) * 16px);
  margin-top: calc(var(--u) * 6px);
}
.sheet-face { width: calc(var(--u) * 78px); height: calc(var(--u) * 78px); flex: none; }
.sheet-face svg { width: 100%; height: 100%; }
.sheet-praise { font-size: calc(var(--u) * 30px); font-weight: 700; }

.sheet-foot {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * 14px);
  flex-wrap: wrap;
}
.sheet-stamp { font-size: calc(var(--u) * 17px); color: var(--ink-soft); }

.sbtn {
  height: calc(var(--u) * 62px);
  padding: 0 calc(var(--u) * 24px);
  background: var(--paper);
  border: calc(var(--u) * 2px) solid var(--line);
  border-radius: var(--r-m);
  font-size: calc(var(--u) * 21px); font-weight: 700;
}
.sbtn:hover { background: var(--paper-deep); }
.sbtn--gold { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sbtn--gold:hover { filter: brightness(1.05); }

/* Логотипы на листе: на экране их держит шапка приложения,
   а на бумаге шапки нет — поэтому отдельный блок только для печати */
.sheet-brand { display: none; grid-column: 1 / -1; }
.sheet-brand img { margin: 0 auto; }

/* ---------- Печать: на бумагу уходит только лист ---------- */

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  /* Браузер по умолчанию не печатает фоны и градиенты.
     Здесь они несут смысл, поэтому просим печатать точно. */
  html, body {
    overflow: visible; background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #stage { display: block; }
  .screen { display: none !important; box-shadow: none; }
  #s5.is-active { display: block !important; width: auto; height: auto; padding: 0; }
  .screen-top, .foot, .sheet-actions, .modal { display: none !important; }
  .sheet { grid-template-columns: 1fr; gap: 8mm; }
  .sheet-brand { display: flex; justify-content: center; gap: 18mm; align-items: center; }
  .sheet-brand--top img    { height: 22mm; }
  .sheet-brand--bottom img { height: 14mm; }
  .sheet-avatar { width: 46mm; height: 46mm; }
  .sheet-name   { width: 80mm; margin-top: 14mm; }
}