/* Один экран — одно дело. Крупно, спокойно, без украшений.
   Проверка на каждом экране: понятно ли тому, кто читает подписи с трудом. */

:root {
  --фон: #faf7f2;
  --лист: #ffffff;
  --текст: #221f1c;
  --тихий: #7a726a;
  --край: #e6ded2;
  --главный: #b8352c;
  --главный-мягкий: #fbe9e6;
  --левый: #2f6f4e;
  --левый-мягкий: #e6f2eb;
  --тень: 0 1px 2px rgba(40, 30, 20, .07), 0 6px 20px rgba(40, 30, 20, .05);
  --скруг: 16px;
  --кожа: #e8bd9b;
  --кожа-ярко: #f0c9a8;
  --кожа-край: #b9825e;
  --шаг: 54px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --фон: #17150f;
    --лист: #211e18;
    --текст: #f2ece3;
    --тихий: #a3998c;
    --край: #35302700;
    --край: #353027;
    --главный: #e2695f;
    --главный-мягкий: #3a201d;
    --левый: #6fc396;
    --левый-мягкий: #1b2f24;
    --тень: none;
  }
}

* { box-sizing: border-box; }

/* Прячем по-настоящему: display у .караоке и .экран иначе перебивает hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--фон);
  color: var(--текст);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---- шапка ---- */
/*
   На экране игры шапка ужимается до строки: всё место наверху нужно нотам
   и клавиатуре. Название урока там и так известно — человек только что по
   нему кликнул, а разглядывает он кнопки, а не заголовок.
*/
/* На экране игры шапки нет совсем. Раньше она ужималась до строки, но и
   строка отнимала у караоке и клавиатур ту самую высоту, которой на
   телефоне не хватает. Илья: «большая шапка двигает и караоке, и расклад,
   и всё, что нужно смотреть, вниз — и срезается нижней планкой, так быть
   не должно». Выход из игры, настройки, инструмент и путеводитель ушли
   в одну панель снизу. */
body[data-экран="игра"] .шапка,
body[data-экран="игра"] .узор { display: none; }
body[data-экран="игра"] main { padding-top: 10px; }
/* Снизу освобождаем место ровно под полосу игры: она прибита к краю экрана
   и на телефоне переносится в две строки, поэтому запас берём по замеру. */
body[data-экран="игра"] main {
  padding-bottom: calc(var(--высота-полосы, 86px) + 18px);
}

.шапка {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--край);
  background: var(--лист);
  position: sticky;
  top: 0;
  z-index: 5;
}

.назад {
  border: 0;
  background: transparent;
  color: var(--текст);
  font-size: 26px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.назад:hover { background: var(--фон); }

.шапка-текст { flex: 1; min-width: 0; }
/* На телефоне название урока длинное, а справа стоят «?» и название
   инструмента. В одну строку текст сжимается в столбик по одному слову,
   поэтому на узком экране шапка переносится: кнопки сверху, название —
   отдельной строкой во всю ширину. */
@media (max-width: 560px) {
  .шапка { flex-wrap: wrap; row-gap: 6px; }
  .шапка-текст { order: 3; flex-basis: 100%; }
  .шапка .фишка:first-of-type { margin-left: auto; }
  #фишка-инструмент { max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
}
.шапка-заголовок { font-weight: 650; font-size: 18px; }
.шапка-подпись { color: var(--тихий); font-size: 14px; }

.фишка {
  border: 1px solid var(--край);
  background: var(--фон);
  color: var(--текст);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

/* ---- общее ---- */

main { max-width: 1000px; margin: 0 auto; padding: 22px 18px 80px; }

.вопрос { font-size: 27px; font-weight: 650; margin: 10px 0 22px; }

.сноска { color: var(--тихий); font-size: 15px; margin-top: 22px; }

/* ---- карточки выбора ---- */

.карточки {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.карточки.узкие { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 12px; }

.карточка {
  text-align: left;
  background: var(--лист);
  border: 1px solid var(--край);
  border-radius: var(--скруг);
  padding: 20px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: var(--тень);
  transition: transform .12s ease, border-color .12s ease;
}
.карточка:hover { transform: translateY(-2px); border-color: var(--главный); }
.карточка[disabled] { opacity: .45; cursor: default; transform: none; }
.карточка .значок { font-size: 30px; }
.карточка .имя { font-weight: 650; font-size: 19px; margin-top: 8px; }
.карточка .опис { color: var(--тихий); font-size: 15px; margin-top: 5px; }

.поиск {
  width: 100%;
  margin-top: 26px;
  padding: 15px 18px;
  font: inherit;
  color: inherit;
  background: var(--лист);
  border: 1px solid var(--край);
  border-radius: var(--скруг);
}
.поиск:focus { outline: 2px solid var(--главный); outline-offset: 1px; }

/* ---- список песен ---- */

.раздел-имя {
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--тихий);
  margin: 30px 0 12px;
}

.строка {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--лист);
  border: 1px solid var(--край);
  border-radius: var(--скруг);
  padding: 16px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.строка:hover { border-color: var(--главный); }
.строка .имя { font-weight: 600; font-size: 18px; flex: 1; }
.строка .лад { font-size: 13px; color: var(--тихий); white-space: nowrap; }
.строка .шаги { display: flex; gap: 3px; }
.строка .шаг { width: 7px; height: 7px; border-radius: 50%; background: var(--край); }
.строка .шаг.полный { background: var(--главный); }

/* Строка песни в списке.
   Илья: «при первом щелчке разворачивается кратко начало песни (понять, она
   или не она), при втором — переход в режим петь/играть». Поэтому строка
   живёт в гнезде: сама кнопка сверху, раскрытое начало под ней. */
.строка-гнездо { margin-bottom: 10px; }
.строка-гнездо .строка { margin-bottom: 0; }
.строка-верх { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.строка-верх .имя { flex: 1; min-width: 0; }
.строка.раскрыта {
  border-color: var(--главный);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Сердце и звезда. Это разные вещи: сердце — общий счёт, сколько людей
   отметили песню, звезда — своя полка. Обе кнопки живут внутри строки,
   поэтому клик по ним не должен открывать песню. */
.оценки { display: flex; align-items: center; gap: 4px; }
.оценка {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  padding: 6px;
  border-radius: 10px;
  color: var(--край);
}
.оценка:hover { background: var(--фон); color: var(--тихий); }
.оценка.сердце.горит { color: #d94b3d; }
.оценка.звезда.горит { color: #d9a13b; }
.оценка .счёт { font-size: 13px; color: var(--тихий); }

/* Начало песни: две строки слов и первые номера кнопок — ровно столько,
   чтобы узнать песню, и ни строкой больше. */
.начало-песни {
  border: 1px solid var(--главный);
  border-top: none;
  border-radius: 0 0 var(--скруг) var(--скруг);
  background: var(--фон);
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.начало-текст { font-size: 16px; line-height: 1.5; }
.начало-номера {
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--тихий);
  font-variant-numeric: tabular-nums;
}
.начало-кнопки { display: flex; gap: 10px; flex-wrap: wrap; }
.начало-кнопки button {
  border: 1px solid var(--край);
  background: var(--лист);
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  color: inherit;
}
.начало-кнопки button:hover { border-color: var(--главный); }
.начало-кнопки .главная-мелкая {
  background: var(--главный);
  border-color: var(--главный);
  color: #fff;
  font-weight: 600;
}
.начало-слушать.играет {
  border-color: var(--главный);
  color: var(--главный);
  font-weight: 600;
}

.метка {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--фон);
  color: var(--тихий);
  border: 1px solid var(--край);
  white-space: nowrap;
}
.метка.платно { background: var(--главный-мягкий); color: var(--главный); border-color: transparent; }

/* ---- игра ---- */

.пояснение {
  background: var(--лист);
  border: 1px solid var(--край);
  border-radius: var(--скруг);
  padding: 16px 18px;
  color: var(--тихий);
  margin-bottom: 20px;
}

/* Верхний блок держим низким. Илья: «клавиатуру нужно сделать укрупнее,
   а верхнюю шапку меньше». Каждые лишние двадцать пикселей над клавиатурой
   отнимаются у самих кнопок: холст ужимается ровно на ту высоту, которой
   ему не хватило до низа экрана. */
.дорожка {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 0 4px;
  margin-bottom: 12px;
  /* Ряд едет влево по ходу песни, и у левого края шашка всегда обрезана
     наполовину — Илья увидел это как сломанную вёрстку. Обрез растворяем:
     край гаснет, и сразу понятно, что ряд продолжается, а не обрублен. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px,
    #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 26px,
    #000 calc(100% - 26px), transparent 100%);
}

/* Шашка дорожки лежит поперёк, а не стоит столбиком: картинка ноты слева,
   номер кнопки справа, под номером его название. Столбиком та же шашка
   занимала сто с лишним пикселей высоты — и ровно на столько же ужималась
   клавиатура, ради которой всё и затевалось. Ширины у экрана хватает,
   высоты не хватает никогда. */
.шашка {
  flex: 0 0 auto;
  min-width: 72px;
  border-radius: 18px;
  background: var(--лист);
  border: 2px solid var(--край);
  padding: 6px 10px;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-content: center;
  justify-content: center;
  justify-items: center;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.шашка .значок-ноты { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.шашка .цифра { grid-column: 2; grid-row: 1; align-self: end; }
.шашка .нота { grid-column: 2; grid-row: 2; align-self: start; }
.шашка .слог, .шашка .оценка { grid-column: 1 / -1; }
.шашка .цифра { font-size: 32px; font-weight: 700; line-height: 1; }
.шашка .нота { font-size: 14px; color: var(--тихий); margin-top: 4px; }
.шашка.левая { border-style: dashed; }
.шашка.сейчас {
  background: var(--главный-мягкий);
  border-color: var(--главный);
  transform: scale(1.12);
}
.шашка.левая.сейчас { background: var(--левый-мягкий); border-color: var(--левый); }
.шашка.сыграна { opacity: .3; }

/* ---- клавиатуры ---- */

.клавиатуры {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, auto) minmax(0, auto);
  justify-content: center; align-items: start;
}
/* Подпись стоит под своим набором кнопок: Илья просил все надписи вниз,
   кроме итогов урока. Сверху — сам инструмент, подпись только уточняет. */
.клавиатура-имя { color: var(--тихий); font-size: 14px; margin-top: 10px; text-align: center; }

.поле {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
}
/* Холст стоит по центру своей ячейки. Когда клавиатура влезает целиком,
   подогнатьКлавиатуры() ничего не считает и сбрасывает marginLeft — без
   auto холст прилипал к левому краю, и на большом экране «всё ползло влево». */
.холст { position: relative; margin: 0 auto; }

.кнопка {
  position: absolute;
  width: calc(var(--шаг) * .82);
  height: calc(var(--шаг) * .82);
  border-radius: 50%;
  background: var(--лист);
  border: 2px solid var(--край);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--тихий);
  transform: translate(-50%, -50%);
  transition: background .1s ease, border-color .1s ease, transform .1s ease;
  cursor: pointer;
  user-select: none;
}
.кнопка.горит {
  background: var(--главный);
  border-color: var(--главный);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.25);
  z-index: 2;
}
.кнопка.левая-рука.горит { background: var(--левый); border-color: var(--левый); }
.кнопка.аккорд { border-style: dashed; }

/* ---- караоке ---- */

.караоке {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.35;
  padding: 20px;
}
.караоке .спето { opacity: .35; }
.караоке .поём { color: var(--главный); }

/* ---- пульт ---- */

/* Одна панель снизу. Она лежит ПОВЕРХ экрана, а не в потоке: раньше пульт
   раскрывался под инструментом и сталкивал всё вниз, под нижнюю планку.
   Подложка ловит клик по свободному полю — этим панель и закрывается,
   вторым способом после крестика. */
.пульт-подложка {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(28, 18, 12, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.пульт {
  width: 100%;
  max-width: 760px;
  /* Панель встаёт над полосой игры, а не поверх неё: кнопка «Настройки»
     остаётся видимой, и понятно, откуда панель пришла. */
  margin-bottom: var(--высота-полосы, 86px);
  max-height: 68vh;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  padding: 14px 18px 20px;
  background: var(--лист);
  border: 1px solid var(--край);
  border-radius: var(--скруг) var(--скруг) 0 0;
  box-shadow: var(--тень);
}
.пульт-шапка {
  flex-basis: 100%;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: -14px;
  margin: -14px -18px 0; padding: 12px 18px 10px;
  background: var(--лист);
  border-bottom: 1px solid var(--край);
}
.пульт-имя { font-weight: 650; font-size: 17px; }
.пульт-крест {
  border: 0; background: transparent; color: var(--тихий);
  font-size: 20px; line-height: 1; padding: 6px 10px;
  border-radius: 12px; cursor: pointer;
}
.пульт-крест:hover { background: var(--фон); color: var(--текст); }
/* Каждая настройка — своей строкой: подпись слева, орган управления справа.
   В два столбца они читаются как таблица, а не как россыпь кнопок. */
.пульт .пульт-группа {
  flex: 1 1 300px;
  justify-content: space-between;
}
.пульт-сервис { flex-basis: 100%; flex-wrap: wrap; gap: 10px 14px; }

.играть {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 0;
  background: var(--главный);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  flex: 0 0 auto;
}

.пульт-группа { display: flex; align-items: center; gap: 10px; }
.ярлык { color: var(--тихий); font-size: 14px; }
.значение { font-variant-numeric: tabular-nums; min-width: 34px; }
input[type=range] { accent-color: var(--главный); width: 130px; }

/* Полоса выбора режима. Илья не нашёл переключатель, потому что он лежал
   в настройках под шестерёнкой — а это главный выбор на экране игры:
   смотрю на номера, на ноты или пою. Поэтому он стоит первой строкой
   рабочей области и остаётся на месте в развороте во весь экран. */
.полоса-режима { display: flex; justify-content: center; margin-bottom: 10px; }
.переключатель.крупный button { font-size: 16px; padding: 9px 18px; font-weight: 600; }

.переключатель { display: flex; border: 1px solid var(--край); border-radius: 999px; overflow: hidden; }
.переключатель button {
  border: 0;
  background: transparent;
  color: var(--тихий);
  font: inherit;
  font-size: 15px;
  padding: 9px 15px;
  cursor: pointer;
}
.переключатель button.выбран { background: var(--главный); color: #fff; }

@media (max-width: 620px) {
  :root { --шаг: 44px; }
  .вопрос { font-size: 23px; }
  .караоке { font-size: 26px; }
  .пульт { gap: 12px 14px; }
  .пульт .пульт-группа { flex-basis: 100%; }
}

/* ---- режимы показа ----
   Начинающий: крупная цифра, нота мелко под ней — глаз привыкает к названию.
   Профи: только ноты, цифры убраны.
   Караоке: инструмент не нужен, на экране только слова. */

#экран-игра[data-режим="профи"] .шашка .цифра { display: none; }
#экран-игра[data-режим="профи"] .шашка .нота { font-size: 26px; color: var(--текст); font-weight: 700; }
#экран-игра[data-режим="профи"] .кнопка { font-size: 0; }

#экран-игра[data-режим="караоке"] .дорожка,
#экран-игра[data-режим="караоке"] .клавиатуры,
#экран-игра[data-режим="караоке"] .напев,
#экран-игра[data-режим="караоке"] .слух,
#экран-игра[data-режим="караоке"] .мила { display: none; }
/* Ноты в «Петь» уходят: по нотам играют в соседнем режиме, а здесь каждый
   лишний блок сверху сталкивает весь текст песни под нижнюю панель — то
   самое, на что Илья и жаловался. */
#экран-игра[data-режим="караоке"] .стан { display: none; }

/* Экран караоке умещается целиком, без прокрутки: сверху окно со словами,
   под ним весь текст песни. Высоту нижней панели меряем на ходу
   (--высота-полосы), поэтому текст никогда не срезается ею. */
body:not(.крупно) #экран-игра[data-режим="караоке"] .игра-поле {
  display: flex; flex-direction: column; gap: 10px;
  height: calc(100vh - var(--высота-полосы, 86px) - 24px);
}
#экран-игра[data-режим="караоке"] .караоке {
  flex: 1 1 58%; min-height: 0;
}
#экран-игра[data-режим="караоке"] .подстрочник {
  flex: 1 1 42%; min-height: 0; margin-top: 0;
  display: flex; flex-direction: column;
}

/* Под окном караоке остаётся весь текст песни целиком — Илья: «открывается
   окно караоке с куплетами и ниже весь текст песни». Бегущие строки самого
   подстрочника там лишние: они дублируют то, что и так во весь экран. */
/* В «Петь» бегущая строка уже во весь экран выше, поэтому здесь верхнюю
   зону не дублируем — но весь текст остаётся на своём месте под ней. */
#экран-игра[data-режим="караоке"] .подстрочник .пс-сейчас { display: none; }
#экран-игра[data-режим="караоке"] .подстрочник .весь-текст {
  max-height: none; flex: 1 1 auto; min-height: 0;
  border-top: 0; padding-top: 0; font-size: 18px;
}

/* Спетое гаснет, будущее ждёт вполсилы, поющееся горит. Размер тоже
   разный: строку, которую поют сейчас, видно от дальней стены. */
.караоке .строка-текста { opacity: .38; font-size: 26px; }
.караоке .строка-текста.спето { opacity: .16; font-size: 24px; }
.караоке .строка-текста.поём { opacity: 1; color: #ffd98a; font-size: 40px;
  font-weight: 650; }
.караоке .строка-текста.следом { opacity: .6; font-size: 28px; }

/* ---- народный узор ---- */
/* Гармонь — вещь нарядная: у настоящих корпус расписан или отделан
   планками. Голый белый экран рядом с ней выглядит казённо, поэтому
   тонкая растительная полоса идёт по шву разделов. Она именно тонкая:
   украшение не должно спорить с цифрой на кнопке. */

.узор {
  height: 14px;
  background-repeat: repeat-x;
  background-size: auto 14px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'>\
<g fill='none' stroke='%23b8352c' stroke-width='1.4' stroke-linecap='round'>\
<path d='M0 9 C 10 1, 20 1, 30 9 S 50 17, 60 9 S 80 1, 90 9 S 110 17, 120 9'/>\
<path d='M15 5 C 17 2, 21 2, 23 5' stroke='%232f6f4e'/>\
<path d='M75 5 C 77 2, 81 2, 83 5' stroke='%232f6f4e'/>\
<path d='M45 12 C 47 9, 51 9, 53 12' stroke='%232f6f4e'/>\
<path d='M105 12 C 107 9, 111 9, 113 12' stroke='%232f6f4e'/>\
</g>\
<g fill='%23d9a441'><circle cx='30' cy='9' r='2.1'/><circle cx='60' cy='9' r='2.1'/>\
<circle cx='90' cy='9' r='2.1'/><circle cx='0' cy='9' r='2.1'/><circle cx='120' cy='9' r='2.1'/></g>\
</svg>");
}

/* min-width: 0 — иначе колонка сетки раздувается под ширину холста и
   клавиатура вылезает за экран вместо того, чтобы ужаться. */
.клавиатура { position: relative; min-width: 0; }
.клавиатура::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -13px;
  height: 8px;
  opacity: .5;
  background-repeat: repeat-x;
  background-size: auto 8px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='8' viewBox='0 0 60 8'>\
<path d='M0 4 Q 15 -2 30 4 T 60 4' fill='none' stroke='%23b8352c' stroke-width='1.2'/>\
</svg>");
}

/* ---- Мила ---- */

/* Подстрочник: слова под инструментом.
   Строка, которую поют сейчас, — крупная и светлая; следующая уже видна,
   но приглушена, чтобы глаз не путал их местами. */
.подстрочник {
  background: var(--лист);
  border: 1px solid var(--край);
  border-radius: var(--скруг);
  padding: 14px 18px;
  margin-bottom: 16px;
  text-align: center;
}
.пс-поём {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  min-height: 30px;
  color: var(--текст);
}
.пс-следом {
  font-size: 16px;
  line-height: 1.4;
  min-height: 22px;
  color: var(--тихий);
  margin-top: 4px;
}
/* Весь текст песни стоит внизу всегда и не прячется за кнопку. Илья:
   «то, что сейчас поют, крупно, но внизу всегда весь текст — блок караоке
   должен быть как в лучшем караоке». Верхняя зона ведёт строку, нижняя
   даёт увидеть, куда песня идёт и сколько её осталось. */
.пс-сейчас { min-height: 62px; }
.весь-текст {
  margin-top: 14px;
  text-align: left;
  max-height: 42vh;
  overflow-y: auto;
  border-top: 1px solid var(--край);
  padding-top: 10px;
}
.вт-заголовок {
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--тихий); margin-bottom: 8px;
}
.вт-куплет + .вт-куплет { margin-top: 14px; }
.вт-куплет.припев .вт-строка { font-style: italic; }
.вт-куплет-имя { font-size: 12px; color: var(--тихий); margin-bottom: 2px; }
.вт-строка { font-size: 16px; line-height: 1.7; color: var(--тихий); }
.вт-строка.спето { opacity: .55; }
.вт-строка.поём { color: var(--текст); font-weight: 700; }

@media (max-width: 620px) {
  .пс-поём { font-size: 19px; }
  .пс-следом { font-size: 15px; }
  .весь-текст { max-height: 34vh; }
}

/* Свёрнутое пояснение: остаётся одна строка и знак «+», чтобы вернуть. */
.мила.свёрнута .мила-речь .пояснение {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--тихий);
}
.мила.свёрнута .мила-речь .ещё,
.мила.свёрнута .мила-речь .разворот { display: none; }
.мила-свернуть {
  border: 1px solid var(--край);
  background: var(--лист);
  color: var(--тихий);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 17px;
  cursor: pointer;
  align-self: flex-start;
  order: 3;
  flex: 0 0 auto;
}
.мила-свернуть:hover { border-color: var(--главный); color: var(--главный); }

.мила { display: flex; gap: 12px; margin-bottom: 20px; align-items: flex-start; }

.мила-лицо {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--главный);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 19px;
  box-shadow: 0 2px 8px var(--тень);
}

.мила-речь { flex: 1 1 auto; min-width: 0; }
.мила-речь .пояснение { margin-bottom: 0; color: var(--текст); }

.ещё {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  color: var(--главный);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.разворот {
  margin-top: 12px;
  background: var(--лист);
  border: 1px solid var(--край);
  border-left: 3px solid var(--главный);
  border-radius: var(--скруг);
  padding: 14px 16px;
}
.разворот p { margin: 0 0 10px; color: var(--тихий); line-height: 1.55; }
.разворот p:last-child { margin-bottom: 0; }
.разворот h4 { margin: 0 0 8px; font-size: 16px; }

/* ---- путеводитель ---- */

.глава {
  background: var(--лист);
  border: 1px solid var(--край);
  border-radius: var(--скруг);
  margin-bottom: 12px;
  overflow: hidden;
}
.глава-шапка {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  padding: 16px 18px;
  cursor: pointer;
  color: var(--текст);
}
.глава-значок { font-size: 24px; flex: 0 0 auto; }
.глава-имя { font-weight: 600; }
.глава-коротко { color: var(--тихий); font-size: 15px; margin-top: 4px; line-height: 1.5; }
.глава-тело { padding: 0 18px 16px 54px; }
.глава-тело p { margin: 0 0 10px; color: var(--тихий); line-height: 1.6; }
.глава.раскрыта .глава-шапка { background: var(--главный-мягкий); }

.шаг {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--край);
}
.шаг:last-child { border-bottom: none; }
.шаг-номер {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--левый-мягкий);
  color: var(--левый);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.шаг-имя { font-weight: 600; margin-bottom: 3px; }
.шаг-зачем { color: var(--тихий); font-size: 15px; line-height: 1.5; }

/* ---- пальцы ---- */
/* Тонкие линии от запястья к кнопкам: рука не бегает по клавиатуре,
   она стоит на позиции. Линия показывает позицию, а не приказ. */

.пальцы {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
  overflow: visible;
}
.пальцы line { stroke: var(--главный); stroke-width: 1; opacity: .35; }
.пальцы line.ведущий { stroke-width: 1.8; opacity: .85; }
.пальцы text { fill: var(--главный); font-size: 11px; font-weight: 700; opacity: .8; }
.пальцы circle.запястье { fill: var(--главный); opacity: .3; }
.левая-поле .пальцы line, .левая-поле .пальцы text { stroke: var(--левый); fill: var(--левый); }
.левая-поле .пальцы circle.запястье { fill: var(--левый); }

.шашка .палец {
  position: absolute;
  top: 4px; right: 6px;
  font-size: 11px;
  color: var(--тихий);
  font-weight: 700;
}
.шашка { position: relative; }
#экран-игра[data-пальцы="нет"] .пальцы,
#экран-игра[data-пальцы="нет"] .шашка .палец { display: none; }

/* Лентой ряды идут вширь: два набора рядом на телефоне ужимаются втрое и
   кнопки становятся с точку. На узком экране ставим их друг под другом —
   каждому достаётся вся ширина. */
@media (max-width: 760px) {
  #экран-игра[data-поворот="горизонтально"] .клавиатуры {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- вертикальные клавиатуры ---- */
/* Так, как они стоят в руках: ряды идут сверху вниз, низкие ноты выше.
   На телефоне это единственный вариант, при котором видно всю клавиатуру. */

#экран-игра[data-поворот="вертикально"] .клавиатуры {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
/* Никакой прокрутки: клавиатура ужимается целиком (подогнатьКлавиатуры),
   чтобы ученик видел весь набор кнопок сразу, как на самой гармони. */
#экран-игра[data-поворот="вертикально"] .поле {
  overflow: visible;
}

/* ---------- нотный стан ----------
   Ноты стоят рядом с цифрами с первого урока. Цифра нужна, чтобы играть
   сегодня, нота — чтобы через месяц открыть любой сборник и не растеряться.
   В режиме «Профи» стан становится крупнее и остаётся один: это и есть
   электронный сборник нот, который всегда с собой. */

.стан {
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--лист);
  border: 1px solid var(--край);
  border-radius: 12px;
  padding: 2px 8px;
  margin-bottom: 8px;
}
.стан svg { display: block; }

.нотный-стан .линейка,
/* Илья: «блок где цифры — нужно чётче прописать знак ноты». Линейки тут
   служебные, поэтому их убавляем, а саму головку наоборот выводим в полную
   силу: на дорожке читается нота, а не сетка под ней. */
.значок-ноты .линейка { stroke: var(--текст); stroke-width: 1.2; opacity: .5; }
.нотный-стан .тактовая { stroke: var(--текст); stroke-width: 1.2; opacity: .3; }
.нотный-стан .головка,
.значок-ноты .головка { fill: var(--текст); stroke: var(--текст); stroke-width: .6; }
.нотный-стан .головка.пустая,
.значок-ноты .головка.пустая { fill: none; stroke: var(--текст); stroke-width: 1.6; }
.нотный-стан .штиль,
.значок-ноты .штиль { stroke: var(--текст); stroke-width: 1.4; }
.нотный-стан .хвост,
.значок-ноты .хвост { fill: none; stroke: var(--текст); stroke-width: 1.8; }
.нотный-стан .точка,
.значок-ноты .точка { fill: var(--текст); }
.нотный-стан .знак,
.значок-ноты .знак,
.нотный-стан .ключ {
  fill: var(--текст);
  font-family: 'Bravura', 'Apple Symbols', 'Segoe UI Symbol', serif;
}

/* Звучащая сейчас нота — тем же красным, что и горящая кнопка,
   чтобы глаз связал: вот это место в нотах, вот эта кнопка. */
.нота-в-стане.сейчас .головка { fill: var(--главный); }
.нота-в-стане.сейчас .головка.пустая { fill: none; stroke: var(--главный); }
.нота-в-стане.сейчас .штиль,
.нота-в-стане.сейчас .хвост { stroke: var(--главный); }
.нота-в-стане.сыграна { opacity: .4; }

.шашка .значок-ноты { display: block; flex: none; margin: 0; opacity: 1; }
#экран-игра[data-режим="профи"] .шашка .значок-ноты { opacity: 1; }
/* Илья: «в режиме петь все элементы обучения свёрнуты, а ноты и песни
   развёрнуты». Поэтому лист с нотами в «Петь» не прячется — он остаётся
   над словами, только тише (правило прозрачности выше). */
/* «Играть по номерам» — это номера, ноты открываются в режиме «по нотам».
   Нотный стан здесь дублировал значки нот на шашках дорожки и съедал
   полторы сотни пикселей, которые Илья просил отдать клавиатуре: «клавиатуру
   нужно сделать укрупнее, а верхнюю шапку меньше, и ноты в ней вверху
   нечитабельные». Знак ноты остался там, где он читается — крупным, рядом
   с номером кнопки. */
#экран-игра[data-режим="начинающий"] .стан { display: none !important; }

/* ---------- заставки караоке ---------- */
/*
   На празднике экран смотрят издали и не в упор: он должен быть красивым
   фоном, а не таблицей. Поэтому в караоке слова ложатся на картинку —
   рожь, берёзы, зимняя изба, гулянье с фонарями. Движение в картинке
   медленное: снег, качание колосьев и фонарей. Быстрая анимация за
   текстом мешает петь, а такая — наоборот, держит комнату.
*/

.караоке { position: relative; padding: 0; display: block;
  min-height: 62vh; border-radius: var(--скруг); overflow: hidden; }
/* В «Петь» окно караоке само тянется по высоте вместе с колонкой, поэтому
   собственного минимума в 78vh у него больше нет — иначе текст под ним
   уезжал бы за нижнюю панель. Размер задаётся флексом выше. */
#экран-игра[data-режим="караоке"] .караоке { min-height: 0; }

.сцена {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--скруг);
  background: #1b1310;
}
.сцена-холст { width: 100%; height: 100%; display: block; }

/* Слова стоят внизу, перед глазами, а не посреди картинки: поющий
   смотрит слегка вниз, как в бумажный песенник, и не задирает голову.
   Строки едут лентой — поющаяся всегда на одном месте, следующая уже
   видна снизу. Так караоке и устроено везде: глаз не ищет строку. */
.слова {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 54%;
  z-index: 1;
  overflow: hidden;
  text-align: center;
  /* Пятно снизу: сцена внизу яркая, и без него строчки на ржаном поле
     теряются ровно там, где на них смотрят. */
  background: linear-gradient(to top,
              rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .62) 45%,
              rgba(0, 0, 0, .18) 80%, rgba(0, 0, 0, 0) 100%);
  /* Лента строк длиннее окна, и нижняя строка всегда обрезается по
     середине букв — выглядит как сломанная вёрстка. Растворяем её у
     нижнего края: так это читается как «дальше будет», а не как обрез. */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}
.лента {
  position: absolute;
  left: 0; right: 0; top: 0;
  padding: 0 24px;
  transition: transform .35s cubic-bezier(.22, .68, .3, 1);
  will-change: transform;
}
.караоке .строка-текста {
  color: #f6efe4;
  line-height: 1.28;
  padding: 4px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .9);
  transition: font-size .25s, opacity .25s, color .25s;
}
.караоке .строка-текста.поём { color: #ffd98a; }
.караоке .спето { color: #f6efe4; opacity: .8; }

/* Движение. Раскачка идёт от низа стебля и от подвеса фонаря —
   поэтому у каждого свой transform-origin, он проставлен в разметке. */
@keyframes качание { 0%, 100% { transform: rotate(-1.6deg); }
                     50%      { transform: rotate(1.6deg); } }
@keyframes фонарь  { 0%, 100% { transform: rotate(-4deg); }
                     50%      { transform: rotate(4deg); } }
@keyframes огонь   { 0%, 100% { transform: scale(1, 1); }
                     50%      { transform: scale(.92, 1.1); } }
@keyframes пляска  { 0%, 100% { transform: translateY(0) rotate(-2deg); }
                     50%      { transform: translateY(-8px) rotate(2deg); } }
@keyframes снегопад { from { transform: translateY(-120px); }
                      to   { transform: translateY(700px); } }
@keyframes окно    { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

.колос    { animation: качание 5.5s ease-in-out infinite; }
.фонарик  { animation: фонарь 3.4s ease-in-out infinite; }
.костёр   { animation: огонь 1.1s ease-in-out infinite; }
.пляшет   { animation: пляска 1.4s ease-in-out infinite; }
.снежинка { animation: снегопад 11s linear infinite; }
.окно     { animation: окно 6s ease-in-out infinite; }
.листва   { animation: качание 8s ease-in-out infinite; transform-origin: 50% 0; }

/* Тем, кому движение мешает, система об этом уже сообщила. */
@media (prefers-reduced-motion: reduce) {
  .колос, .фонарик, .костёр, .пляшет, .снежинка, .окно, .листва { animation: none; }
}

/* В караоке узор и шапка не нужны — экран отдаётся картинке. */
#экран-игра[data-режим="караоке"] .узор { display: none; }

/* ---------- напев куплета ---------- */

/* Слова над дорожкой. Ноты говорят, что нажать, напев — как это поётся;
   без него человек разбирает мелодию и всё равно не может спеть куплет. */
.напев {
  min-height: 42px;
  display: grid;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--скруг);
  background: var(--лист);
  border: 1px solid var(--край);
  box-shadow: var(--тень);
}
.напев-строка {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .25s;
  text-align: center;
  line-height: 1.5;
}
.напев-строка.видна { opacity: 1; }
.напев-слог {
  font-size: 18px;
  letter-spacing: .2px;
  transition: color .12s;
}
/* Слоги одного слова стоят слитно, между словами — пробел. */
.напев-слог.конец { margin-right: .38em; }
.напев-слог.поётся { color: var(--главный); font-weight: 600; }

/* В караоке слова и так во весь экран — вторая строка там лишняя. */
#экран-игра[data-режим="караоке"] .напев { display: none; }

/* Слог на шашке дорожки и под нотой в стане. */
.шашка .слог {
  flex: none;
  font-size: 12px;
  opacity: .75;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.слог-в-стане { fill: currentColor; opacity: .72; }

@media (max-width: 620px) {
  .напев-слог { font-size: 16px; }
}

/* ---------- начало: три двери ---------- */
/*
   Первый экран решает, останется человек или закроет приложение. Поэтому
   здесь не меню из десяти пунктов, а три двери: учиться, играть дома,
   праздник. Каждая — крупная, с одной строкой объяснения, чтобы выбор
   делался за секунду и без чтения.

   Гармонь наверху живая: меха дышат, огоньки кнопок перемигиваются,
   ноты улетают. Движение медленное — это приветствие, а не мультик.
*/

.начало { padding-top: 6px; }

.герой {
  text-align: center;
  padding: 10px 0 26px;
}
.герой-гармонь {
  width: min(430px, 88vw);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .22));
}
.герой-имя {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .5px;
  margin: 8px 0 4px;
}
.герой-подпись { color: var(--тихий); font-size: 17px; margin: 0; }

/* Меха дышат: растягиваются и сжимаются, как при игре. */
@keyframes дыхание {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(.72); }
}
@keyframes отъезд {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(13px); }
}
@keyframes подъезд {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-13px); }
}
@keyframes перемиг {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
@keyframes улетает {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translate(16px, -46px) rotate(16deg); }
}

.мех-складки { animation: дыхание 3.6s ease-in-out infinite;
  transform-origin: 50% 50%; transform-box: fill-box; }
.корпус-левый  { animation: отъезд 3.6s ease-in-out infinite; }
.корпус-правый { animation: подъезд 3.6s ease-in-out infinite; }
.огонёк { animation: перемиг 2.6s ease-in-out infinite; }
.летит  { animation: улетает 3.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .мех-складки, .корпус-левый, .корпус-правый, .огонёк, .летит { animation: none; }
}

.двери { display: grid; gap: 14px; }

/* Дверь — карточка с рисунком.
   Илья: «иконки меню очень технические; меню короткое — нужно сделать его
   красивым с картинками, визуально интересным». Значок из шрифта заменён
   нарисованной картинкой: ступеньки с нотой, изба с музыкой в окне, гирлянда
   над экраном караоке, медаль. Картинка держит высоту карточки, поэтому
   строка объяснения помещается целиком и не жмётся. */

.дверь {
  position: relative;
  color: var(--текст);
  display: grid;
  grid-template-columns: 88px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 16px;
  text-align: left;
  padding: 14px 20px 14px 14px;
  border: 1px solid var(--край);
  border-radius: 22px;
  background: var(--лист);
  box-shadow: var(--тень);
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.дверь:hover { transform: translateY(-2px); border-color: var(--главный);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.дверь:active { transform: translateY(0); }

.дверь-рисунок {
  grid-row: 1 / 3;
  width: 88px;
  height: 76px;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .18));
}
.дверь-имя { font-size: 24px; font-weight: 650; align-self: end; }
.дверь-опис { color: var(--тихий); font-size: 15px; line-height: 1.45;
  align-self: start; }
.дверь-ход { grid-column: 2; color: var(--главный); font-size: 14px;
  font-weight: 600; margin-top: 6px; }
.дверь-ход:empty { display: none; }

/* Тёплая подложка под цвет картинки: карточки различаются с одного взгляда,
   но не спорят яркостью с самим рисунком. */
.дверь.учиться   { background:
  linear-gradient(120deg, rgba(217, 75, 61, .10), transparent 58%), var(--лист); }
.дверь.дома      { background:
  linear-gradient(120deg, rgba(63, 139, 87, .12), transparent 58%), var(--лист); }
.дверь.праздник  { background:
  linear-gradient(120deg, rgba(217, 161, 59, .16), transparent 58%), var(--лист); }
.дверь.песенник  { background:
  linear-gradient(120deg, rgba(140, 70, 132, .12), transparent 58%), var(--лист); }
.дверь.профиль   { background:
  linear-gradient(120deg, rgba(90, 96, 190, .12), transparent 58%), var(--лист); }

/* Сервисная кнопка настроек.
   Илья: «настройки убрать куда-то как сервисную кнопку». Они нужны редко и
   стоят в углу шапки, а не в одном ряду с тем, ради чего открывают приложение. */
.начало { position: relative; }
.сервис {
  position: absolute;
  top: 2px; right: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--край);
  border-radius: 50%;
  background: var(--лист);
  box-shadow: var(--тень);
  cursor: pointer;
  z-index: 2;
  transition: transform .16s, border-color .16s;
}
.сервис:hover { border-color: var(--главный); transform: rotate(30deg); }
.сервис svg { width: 22px; height: 22px; fill: var(--тихий); }
.сервис:hover svg { fill: var(--главный); }

/* Тихий вход для гостя праздника: не дверь, а строка-пилюля под меню. */
.пилюли { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 14px; }
.пилюля {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--край);
  border-radius: 999px;
  background: transparent;
  color: var(--тихий);
  font-size: 15px;
  cursor: pointer;
  transition: color .16s, border-color .16s;
}
.пилюля:hover { color: var(--главный); border-color: var(--главный); }
.пилюля svg { width: 19px; height: 19px; fill: currentColor; }

/* ---------- кто ты ---------- */

/* Две крупные карточки вместо списка: вопрос один, ответов два,
   и оба видны целиком без прокрутки даже на телефоне. */
.роли {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.роль-карта {
  display: block;
  text-align: left;
  background: var(--лист);
  border: 1px solid var(--край);
  border-radius: 20px;
  padding: 22px 20px;
  cursor: pointer;
  font: inherit;
  color: var(--текст);
  transition: border-color .15s, transform .15s;
}
.роль-карта:hover { border-color: var(--главный); transform: translateY(-2px); }
.роль-карта.выбрана { border-color: var(--главный); box-shadow: 0 0 0 1px var(--главный) inset; }
.роль-значок {
  width: 48px; height: 48px;
  fill: none;
  stroke: var(--главный);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 12px;
}
.роль-имя { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.роль-опис { font-size: 15px; line-height: 1.5; color: var(--тихий); }

/* ---------- обучение: ликбез и уроки ---------- */

.ликбез {
  border: 1px solid var(--край);
  border-radius: 20px;
  background: var(--лист);
  box-shadow: var(--тень);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.ликбез h2 { margin: 0 0 10px; font-size: 22px; }
.ликбез p { margin: 0 0 12px; line-height: 1.6; color: var(--текст); }
.ликбез p:last-child { margin-bottom: 0; }
.ликбез .тихо { color: var(--тихий); }

.урок {
  color: var(--текст);
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 4px 16px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--край);
  border-radius: 16px;
  background: var(--лист);
  cursor: pointer;
  transition: border-color .16s, transform .16s;
}
.урок:hover { border-color: var(--главный); transform: translateY(-1px); }
.урок-номер {
  grid-row: 1 / 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 19px;
  background: var(--главный-мягкий);
  color: var(--главный);
}
.урок.сдан .урок-номер { background: var(--левый); color: #fff; }
.урок-имя { grid-column: 2; font-weight: 650; font-size: 18px; }
.урок-зачем { grid-column: 2; color: var(--тихий); font-size: 15px; line-height: 1.45; }
.урок-итог { grid-column: 3; grid-row: 1 / 3; font-size: 14px; color: var(--тихий);
  text-align: right; white-space: nowrap; }
.урок.сдан .урок-итог { color: var(--левый); font-weight: 600; }

/* ---------- итог урока ---------- */
/*
   Пока урок не сыгран чисто, его гоняем дальше — но говорить об этом надо
   по-человечески: не «ошибка 4 из 12», а что именно поехало и что делать.
*/
.итог-урока {
  border-radius: var(--скруг);
  padding: 18px 20px;
  margin-bottom: 18px;
  border: 1px solid var(--край);
  background: var(--лист);
  box-shadow: var(--тень);
}
.итог-урока.молодец { border-color: var(--левый); background: var(--левый-мягкий); }
.итог-урока.ещё { border-color: var(--главный); background: var(--главный-мягкий); }
.итог-заголовок { font-size: 21px; font-weight: 650; margin-bottom: 6px; }
.итог-текст { color: var(--тихий); line-height: 1.55; }
.итог-кнопки { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- наклейки на кнопках ---------- */
/*
   На живой гармони новички клеят на кнопки бумажные кружки с номерами —
   иначе не найти нужную. На экране цифры выглядят так же: кружок с чуть
   заметной тенью и лёгким поворотом, будто наклеен рукой. Тогда переход
   с экрана на инструмент не требует перевода: там и там одно и то же.
*/
/* Позицию здесь не трогаем: кнопки расставлены абсолютно по своим местам,
   и position: relative разваливал всю клавиатуру в один столбик. Наклейке
   хватает того, что сама кнопка уже является точкой отсчёта. */
#экран-игра[data-наклейки="да"] .кнопка {
  font-size: 0;
}
#экран-игра[data-наклейки="да"] .кнопка::after {
  content: attr(data-номер);
  position: absolute;
  left: 50%; top: 50%;
  width: 74%; height: 74%;
  transform: translate(-50%, -50%) rotate(var(--наклон, -4deg));
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700;
  color: #2a2118;
  background: #fdf6e3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(0, 0, 0, .08);
}
#экран-игра[data-наклейки="да"] .кнопка.левая-рука::after { background: #eaf3ea; }
#экран-игра[data-наклейки="да"] .кнопка.горит::after { background: #fff; }
#экран-игра[data-режим="профи"][data-наклейки="да"] .кнопка::after { display: none; }

.наклейки-печать {
  margin-top: 12px;
  color: var(--тихий);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- вид руки ---------- */
/*
   Линии от запястья показывают позицию, но не показывают руку. Илья
   просил именно вид пальцев — какой куда. Поэтому в режиме «Рука» поверх
   клавиатуры лежит полупрозрачная ладонь: видно, что кисть стоит на месте,
   а тянется один палец. Режим выключается: опытному он мешает.
*/
#экран-игра[data-пальцы="линии"] .ладонь { display: none; }
/* Когда нарисована рука, паутина линий только мешает: путь к кнопке
   показывает сам палец. Оставляем тонкую нить лишь к рабочим кнопкам. */
#экран-игра[data-пальцы="рука"] .пальцы line { display: none; }
#экран-игра[data-пальцы="рука"] .пальцы line.ведущий { display: block; opacity: .32; }

/* Кисть — один силуэт: заливка кожей, контур темнее. Прозрачность задаётся
   всей группе, а не каждой фигуре: иначе на перекрытии ладони и пальцев
   видны швы и рука распадается на детали. Сквозь неё читаются цифры на
   кнопках. Рабочий палец подсвечивается цветом стороны — красным справа,
   зелёным слева. */
.ладонь { opacity: .46; }
.ладонь .кисть,
.ладонь .палец {
  fill: var(--кожа);
  /* Контур заметнее заливки: кисть полупрозрачная, и без внятной линии
     ладонь с пальцами сливалась в одно пятно. Обводка своя у каждого
     пальца — по ней они и читаются по отдельности. */
  stroke: var(--кожа-край);
  stroke-width: 1.4;
  stroke-linejoin: round;
  /* Рисунок кисти масштабируется под шаг кнопок, а линия контура должна
     оставаться тонкой на любом размере. */
  vector-effect: non-scaling-stroke;
}
/* Ладонь непрозрачна внутри группы: она закрывает основания пальцев, и на
   костяшках не остаётся шва. */
.ладонь .кисть { fill: var(--кожа); }
/* Рабочий палец — светлее и с цветным контуром стороны: красный справа,
   зелёный слева. Именно он отвечает на вопрос «каким пальцем нажимать». */
.ладонь .палец.ведущий {
  fill: var(--кожа-ярко);
  stroke: var(--главный);
  stroke-width: 2;
}
.левая-поле .ладонь .палец.ведущий { stroke: var(--левый); }
.ладонь .складка {
  fill: none;
  stroke: rgba(120, 70, 42, .55);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .45;
}
/* Кисть длиннее клавиатуры: запястье выходит за холст и растворяется
   маской. Обрезать её рамкой нельзя — рука обрывалась бы прямоугольником. */
.пальцы { overflow: visible; }
/* Ноготь — блик на подушечке, а не деталь. С обводкой и плотной заливкой он
   читался серым камешком, приклеенным к кончику пальца. */
.ладонь .ноготь {
  fill: #fdeedd;
  opacity: .38;
  stroke: none;
}
.ладонь .ноготь.ведущий { fill: var(--главный); opacity: .95; }
.левая-поле .ладонь .ноготь.ведущий { fill: var(--левый); }
/* Точка запястья нужна была схеме из линий; под настоящей рукой это просто
   пятно на ладони. */
#экран-игра[data-пальцы="рука"] .пальцы .запястье { display: none; }

/* ---------- слух: что услышал микрофон ---------- */
/*
   Тюнер и проверка попадания — одно и то же измерение: сколько центов до
   ближайшей ноты. Стрелка посередине — чисто, влево — низко, вправо —
   высоко. Промах на дорожке горит красным и подписан «выше/ниже»: так
   видно направление ошибки, а не только сам факт.
*/
.слух {
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid var(--край);
  border-radius: var(--скруг);
  background: var(--лист);
  box-shadow: var(--тень);
}
.слух-строка { display: flex; align-items: center; gap: 14px; }
.слух-имя { font-size: 26px; font-weight: 700; min-width: 74px;
  font-variant-numeric: tabular-nums; }
.слух-шкала {
  position: relative;
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--главный-мягкий) 0%, var(--левый-мягкий) 42%,
    var(--левый-мягкий) 58%, var(--главный-мягкий) 100%);
}
.слух-шкала::after {
  content: '';
  position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 2px; background: var(--тихий); opacity: .5;
}
.слух-стрелка {
  position: absolute; top: -4px;
  width: 4px; height: 20px; border-radius: 2px;
  background: var(--главный);
  transform: translateX(-50%);
  transition: left .08s linear, background .12s;
}
.слух-стрелка.чисто { background: var(--левый); }
.слух-центы { min-width: 60px; text-align: right; color: var(--тихий);
  font-variant-numeric: tabular-nums; }
.слух-подпись { color: var(--тихий); font-size: 14px; margin-top: 8px; }

/* Промах и попадание на дорожке. */
.шашка.промах { border-color: var(--главный); background: var(--главный-мягкий); }
.шашка.попал  { border-color: var(--левый); background: var(--левый-мягкий); }
.шашка .оценка {
  flex: none;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--главный);
}
.шашка.попал .оценка { color: var(--левый); }

/* Значок ноты для левой руки — в басовом ключе. */
.значок-ноты.басовый .ключ { opacity: .7; }

/* ---------- настройки ---------- */

.настройка {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--край);
  border-radius: 16px;
  background: var(--лист);
}
.настройка-имя { font-weight: 600; }
.настройка-опис { color: var(--тихий); font-size: 14px; margin-top: 3px;
  line-height: 1.45; }
.настройка-тело { flex: 0 0 auto; }

.мелкая {
  border: 1px solid var(--край);
  background: var(--лист);
  color: var(--тихий);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
}
.мелкая:hover { border-color: var(--главный); color: var(--главный); }

/* Немой режим виден с одного взгляда: иначе человек ищет поломку в звуке,
   когда сам же его и выключил. */
.мелкая.выбран {
  border-color: var(--главный);
  background: var(--главный);
  color: #fff;
}

@media (max-width: 620px) {
  .герой-имя { font-size: 32px; }
  .дверь { grid-template-columns: 70px 1fr; padding: 12px 14px 12px 12px; gap: 2px 12px; }
  .дверь-рисунок { width: 70px; height: 61px; }
  .дверь-имя { font-size: 20px; }
  .дверь-опис { font-size: 14px; }
  .пилюля { font-size: 14px; padding: 10px 15px; }
  .караоке .строка-текста.поём { font-size: 30px; }
  .караоке .строка-текста { font-size: 20px; }
}

/* ---------- режим работы, замки и тарифы ---------- */

/* Переключатель «Обучение / Использование» стоит над дверями: он решает,
   какие двери вообще видно, поэтому спорить с ними по яркости не должен. */
.работа {
  display: flex;
  gap: 4px;
  margin: 0 auto 6px;
  padding: 4px;
  border: 1px solid var(--край);
  border-radius: 999px;
  background: var(--лист);
  width: max-content;
  max-width: 100%;
}
.работа button {
  border: 0; background: none; cursor: pointer;
  color: var(--тихий);
  font: inherit; font-size: 16px; font-weight: 600;
  padding: 9px 22px; border-radius: 999px;
}
.работа button.выбран { background: var(--главный); color: #fff; }
.работа-подпись {
  text-align: center; color: var(--тихий); font-size: 15px;
  margin: 0 auto 16px; max-width: 460px; line-height: 1.45;
}

/* Заперто — не «сломано». Карточка остаётся читаемой: человек должен
   видеть, что там внутри, иначе непонятно, за что платить. */
.заперт { opacity: .72; }
.заперт:hover { opacity: .9; }
.замок { grid-column: 3; font-size: 18px; align-self: center; }
.строка .замок { margin-left: auto; }

.полоса-тариф {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding: 14px 16px;
  border: 1px dashed var(--край); border-radius: var(--скруг);
  color: var(--тихий); font-size: 15px;
}

.полоса-про {
  padding: 16px 18px; margin-bottom: 14px;
  border: 1px solid var(--край); border-radius: var(--скруг);
  background: var(--главный-мягкий);
}
.полоса-имя { font-weight: 650; font-size: 18px; margin-bottom: 4px; }
.полоса-про p { margin: 0 0 12px; color: var(--текст); line-height: 1.45; }
.полоса-кнопки { display: flex; gap: 10px; flex-wrap: wrap; }

.главная-кнопка {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--главный); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600;
  padding: 11px 22px;
}
.главная-кнопка:disabled { opacity: .5; cursor: default; }

.почему-заперто {
  padding: 14px 16px; margin-bottom: 16px;
  border-left: 3px solid var(--главный);
  background: var(--главный-мягкий); border-radius: 0 var(--скруг) var(--скруг) 0;
}
.почему-заперто p { margin: 0; line-height: 1.45; }

.проба-блок, .тариф, .сноска-право {
  padding: 18px; margin-bottom: 14px;
  border: 1px solid var(--край); border-radius: var(--скруг);
  background: var(--лист); box-shadow: var(--тень);
}
.проба-имя, .лицензия-имя { font-weight: 650; font-size: 19px; margin-bottom: 6px; }
.проба-блок p, .сноска-право p { margin: 0 0 12px; color: var(--тихий); line-height: 1.45; }

.тариф.текущий { border-color: var(--главный); }
.тариф-шапка {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.тариф-имя { font-size: 22px; font-weight: 650; }
.тариф-цена { color: var(--тихий); font-size: 15px; }
.тариф-кому { color: var(--тихий); font-size: 15px; margin: 2px 0 10px; }
.тариф-список { list-style: none; padding: 0; margin: 0 0 14px; }
.тариф-список li {
  padding: 5px 0 5px 26px; position: relative; line-height: 1.4;
}
.тариф-список li.есть::before {
  content: '✓'; position: absolute; left: 0; color: var(--левый); font-weight: 700;
}
.тариф-список li.нету { color: var(--тихий); }
.тариф-список li.нету::before {
  content: '—'; position: absolute; left: 0; color: var(--тихий);
}

/* Отказ по праву объясняется прямо в списке, не уводя человека с экрана. */
.лицензия-окно {
  padding: 16px 18px; margin-bottom: 14px;
  border: 1px solid var(--главный); border-radius: var(--скруг);
  background: var(--главный-мягкий);
}
.лицензия-окно p { margin: 0 0 12px; line-height: 1.45; }

/* ---- инструмент как тема оформления ----
   Илья: «для гитары и остальных инструментов оформление нужно подстать
   тематике». Меняются только переменные — вся вёрстка остаётся одна,
   поэтому новый инструмент добавляется четырьмя строками цвета. */

:root[data-инструмент="баян"] {
  --главный: #2f5aa8;
  --главный-мягкий: #e6edf9;
  --левый: #7a5cae;
  --левый-мягкий: #efe9f7;
}
:root[data-инструмент="аккордеон"] {
  --главный: #8f2f52;
  --главный-мягкий: #f8e8ee;
  --левый: #396f6a;
  --левый-мягкий: #e6f1ef;
}
:root[data-инструмент="гитара"] {
  --фон: #f7f2e9;
  --главный: #a2652a;
  --главный-мягкий: #f6ead8;
  --левый: #5f6b33;
  --левый-мягкий: #eef1e2;
}
:root[data-инструмент="пианино"] {
  --главный: #33373d;
  --главный-мягкий: #ecedef;
  --левый: #9a7b2f;
  --левый-мягкий: #f6f0e0;
}

@media (prefers-color-scheme: dark) {
  :root[data-инструмент="баян"]:not([data-theme="light"]) {
    --главный: #7fa6e8; --главный-мягкий: #1b2740;
    --левый: #b49ae0; --левый-мягкий: #251f36;
  }
  :root[data-инструмент="аккордеон"]:not([data-theme="light"]) {
    --главный: #e8809f; --главный-мягкий: #3a1f29;
    --левый: #74bdb5; --левый-мягкий: #17302d;
  }
  :root[data-инструмент="гитара"]:not([data-theme="light"]) {
    --фон: #191509;
    --главный: #e0a860; --главный-мягкий: #3a2a14;
    --левый: #a9bb6a; --левый-мягкий: #262c15;
  }
  :root[data-инструмент="пианино"]:not([data-theme="light"]) {
    --главный: #cfd4dc; --главный-мягкий: #2a2d33;
    --левый: #e0bd6a; --левый-мягкий: #33290f;
  }
}

/* ---- вход: на чём играем ---- */

.типы {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 18px 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.тип-карточка {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 104px;
  border: 1px solid var(--край);
  background: var(--лист);
  color: var(--текст);
  border-radius: var(--скруг);
  padding: 12px 14px;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--тень);
}
.тип-карточка .значок { font-size: 26px; line-height: 1.2; }
.тип-карточка .имя { font-weight: 600; margin-top: 4px; }
.тип-карточка.выбран {
  border-color: var(--главный);
  background: var(--главный-мягкий);
  color: var(--главный);
}
.тип-карточка.скоро { opacity: .75; }
.метка-скоро {
  font-size: 12px;
  color: var(--тихий);
  margin-top: 2px;
}

.вопрос-малый {
  font-size: 17px;
  font-weight: 600;
  color: var(--тихий);
  margin: 14px 18px 8px;
}

.скоро-блок {
  margin: 12px 18px 20px;
  padding: 20px;
  border: 1px solid var(--край);
  border-radius: var(--скруг);
  background: var(--лист);
  text-align: center;
  box-shadow: var(--тень);
}
.скоро-значок { font-size: 40px; }
.скоро-имя { font-weight: 650; font-size: 19px; margin: 6px 0 8px; }
.скоро-блок p { margin: 0 0 10px; }
.скоро-блок .тихо { color: var(--тихий); font-size: 15px; }

/* полоса инструмента на входе главного экрана */
.полоса-инструмент {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 36px);
  margin: 0 18px 12px;
  padding: 10px 14px;
  border: 1px solid var(--край);
  border-radius: var(--скруг);
  background: var(--лист);
  color: var(--текст);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--тень);
}
.пи-значок { font-size: 24px; }
.пи-текст { flex: 1; min-width: 0; }
.пи-имя { display: block; font-weight: 600; }
.пи-опис { display: block; font-size: 14px; color: var(--тихий); }
.пи-сменить { color: var(--главный); font-size: 15px; }
.проба-блок.основатель { border-color: var(--главный); }

/* ---------- листаемые карточки про гармонь ----------
   Блок стоит перед уроками и служит одному: втянуть. Поэтому он листается
   пальцем (scroll-snap), а не разворачивается простынёй, и каждая карточка
   влезает в экран целиком. Источник факта показан прямо на карточке —
   идея ИД-213 «кольцо доверия»: проверенное и собранное нами не должны
   выглядеть одинаково уверенно. */

.карусель { margin: 0 0 22px; }

.карусель-верх {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.карусель-верх h2 { margin: 0; font-size: 17px; }
.карусель-счёт { font-size: 13px; color: var(--тихий); white-space: nowrap; }
.карусель-свернуть {
  margin-left: auto; border: 1px solid var(--край); background: var(--лист);
  color: var(--тихий); border-radius: 999px; padding: 5px 12px;
  font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.карусель-свернуть:hover { color: var(--текст); border-color: var(--тихий); }

.карусель-рамка { position: relative; }

.карусель-лента {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding-bottom: 4px; outline: none;
}
.карусель-лента::-webkit-scrollbar { display: none; }

.карточка-факт {
  flex: 0 0 100%; scroll-snap-align: start;
  box-sizing: border-box;
  background: var(--лист); border: 1px solid var(--край);
  border-radius: var(--скруг); padding: 16px 16px 12px;
  box-shadow: var(--тень);
  display: flex; flex-direction: column; gap: 10px;
}

.кф-шапка { display: flex; align-items: center; gap: 8px; }
.кф-значок { font-size: 20px; }
.кф-тема {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--главный); font-weight: 700;
}
.кф-имя { margin: 0; font-size: 19px; line-height: 1.25; }

.кф-схема {
  background: var(--фон); border-radius: 12px; padding: 6px 4px;
}
.кф-схема .схема { display: block; width: 100%; max-width: 460px;
  margin: 0 auto; height: auto; }
.кф-схема .подпись text {
  font-family: inherit; font-size: 12px; font-weight: 600; fill: var(--текст);
}
.кф-схема .подпись .мелко, .кф-схема text.мелко {
  font-size: 10.5px; font-weight: 400; fill: var(--тихий);
}
.кф-схема text { font-family: inherit; fill: var(--текст); }

.кф-текст { margin: 0; line-height: 1.5; }

.кф-пункт {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--край);
}
.кф-пункт-имя { flex: 0 0 38%; font-weight: 600; font-size: 14px; }
.кф-пункт-что { flex: 1; font-size: 14px; color: var(--тихий); line-height: 1.4; }

.кф-сноска {
  margin: 0; font-size: 13px; color: var(--тихий);
  background: var(--фон); border-radius: 10px; padding: 8px 10px;
}

.кф-откуда {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--край);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--тихий);
}
.кф-точка {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--тихий); align-self: center;
}
.кф-откуда.высокий .кф-точка { background: #2f9e5e; }
.кф-откуда.средний .кф-точка { background: #d8a12a; }
.кф-уровень { font-weight: 600; color: var(--текст); }
.кф-источник { flex: 1 1 100%; line-height: 1.35; }

.карусель-стрелка {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--край); background: var(--лист); color: var(--текст);
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--тень);
  display: none;
}
.карусель-стрелка.влево { left: -8px; }
.карусель-стрелка.вправо { right: -8px; }
.карусель-стрелка:disabled { opacity: .25; cursor: default; }
@media (hover: hover) and (min-width: 620px) {
  .карусель-стрелка { display: block; }
}

.карусель-точки {
  display: flex; justify-content: center; gap: 6px; margin-top: 10px;
  flex-wrap: wrap;
}
.карусель-точка {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--край); cursor: pointer;
  transition: width .2s, background .2s;
}
.карусель-точка.тут { width: 20px; border-radius: 4px; background: var(--главный); }

/* Карточка-баннер: рисунок слева, текст справа.
   Илья: «Блок баннеров в обучении — рисунок слева, текст справа, компоновку
   блока улучши», а потом — «вёрстка баннеров съехала». Съехала она потому,
   что на две колонки была разложена одна карточка из тринадцати, а остальные
   двенадцать оставались столбиком: рисунок растягивался во всю ширину, текст
   тянулся под ним строкой на весь экран, и каждый пролист менял раскладку.
   Поэтому колонки теперь у ВСЕХ карточек блока. Карточка без рисунка —
   единственное исключение, ей отдана вся ширина. На телефоне колонки
   складываются в одну, и картинка честно оказывается сверху; горизонтального
   скролла внутри карточки быть не должно (идея ИД-271). */
.кф-текстовая { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.кф-картинка {
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px; min-width: 0;
}
.кф-картинка .кф-схема {
  border: 1px solid var(--край); border-radius: 14px; padding: 10px 8px;
}
.кф-картинка svg { display: block; width: 100%; height: auto; max-width: 100%; }

@media (min-width: 620px) {
  .карточка-факт {
    display: grid; gap: 12px 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: center; align-items: center;
    padding: 18px 20px 12px;
  }
  .карточка-факт .кф-картинка { grid-column: 1; align-self: center; }
  .карточка-факт .кф-текстовая { grid-column: 2; align-self: center; }
  .карточка-факт .кф-имя { font-size: 22px; }
  .карточка-факт .кф-откуда { grid-column: 1 / -1; }
  /* Карточка без рисунка не делится пополам — иначе справа зияет пустота. */
  .карточка-факт.только-текст { grid-template-columns: minmax(0, 1fr); }
  .карточка-факт.только-текст .кф-текстовая { grid-column: 1; }
  /* В узкой колонке подпись и значение лучше читаются друг под другом. */
  .карточка-факт .кф-пункт { flex-direction: column; gap: 2px; }
  .карточка-факт .кф-пункт-имя { flex: 0 0 auto; }
}

/* Картинка звучания: кнопка играет ровно то, о чём написано рядом. */
.кф-звуки { display: flex; flex-wrap: wrap; gap: 8px; }
.кф-звук {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--край); background: var(--лист); color: var(--текст);
  border-radius: 999px; padding: 8px 14px 8px 10px;
  font-family: inherit; font-size: 14px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.кф-звук:hover { border-color: var(--главный); }
.кф-звук-значок {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background: var(--главный); color: #fff; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.кф-звук.звучит { background: var(--главный-мягкий); border-color: var(--главный); }
.кф-звук.звучит .кф-звук-значок { animation: звучит-пульс .5s ease-in-out infinite alternate; }
@keyframes звучит-пульс { from { transform: scale(1); } to { transform: scale(1.25); } }

/* Слайд «первая песня»: настоящие ноты сверху, номера кнопок снизу —
   ровно то, что человек увидит в уроке. */
.кф-живое { display: flex; flex-direction: column; gap: 8px; }
.кф-стан { background: var(--фон); border-radius: 12px; padding: 8px 6px;
  overflow-x: auto; scrollbar-width: none; }
.кф-стан::-webkit-scrollbar { display: none; }
.кф-стан svg { display: block; height: auto; max-width: 100%; }
.кф-цифры { display: flex; gap: 6px; flex-wrap: wrap; }
.кф-цифра {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 38px; padding: 6px 4px;
  background: var(--главный-мягкий); border-radius: 10px;
}
.кф-цифра b { font-size: 19px; line-height: 1; }
.кф-цифра i { font-style: normal; font-size: 11px; color: var(--тихий); }

/* Мелкие подписи внутри схем. */
.кф-схема text.накнопке { font-size: 12px; font-weight: 700; fill: var(--текст); }
.кф-схема text.накнопке.светлая, .кф-схема text.мелко.светлая { fill: #fff; }
.кф-схема text.подпись-л { font-size: 12px; font-weight: 600; fill: var(--текст); }
.кф-схема text.афиша-имя { font-size: 15px; font-weight: 700; fill: #ffd98a; }
.кф-схема text.корешок { font-size: 10.5px; font-weight: 600; fill: #fff; }
.кф-схема .эскиз { max-width: 520px; }

/* Свёрнутый вид: тринадцать карточек превращаются в строки советов.
   Идея ИД-085 — свёрнутое меню со счётчиком, разворачивается одним нажатием.
   Тому, кто пришёл заниматься, а не читать, длинный блок мешает дойти до уроков. */
.советы { display: none; flex-direction: column; gap: 2px; }
.карусель.свёрнут .советы { display: flex; }
.карусель.свёрнут .карусель-рамка,
.карусель.свёрнут .карусель-точки { display: none; }
.совет {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; border-bottom: 1px solid var(--край); background: none;
  color: var(--текст); font-family: inherit; font-size: 14px; text-align: left;
  padding: 10px 2px; cursor: pointer; line-height: 1.35;
}
.совет:last-child { border-bottom: 0; }
.совет:hover { color: var(--главный); }
.совет-значок { font-size: 17px; flex: 0 0 auto; }
.совет-текст { flex: 1; }
.совет-стрелка { color: var(--тихий); flex: 0 0 auto; }

/* ---- рабочая область игры и полоса управления ----
   Илья: «этот блок не должен перекрываться настройками, они всегда съезжают».
   Поэтому пульт больше не липнет к низу поверх клавиатур: он лежит под
   инструментом и раскрывается кнопкой. Наверху остаётся только итог урока,
   все надписи ушли вниз. */

.игра-поле { display: block; }

.клавиатура-имя {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; white-space: nowrap;
}
.кл-значок { font-size: 15px; }

/* Полоса игры прибита к низу всегда, а не только в развороте: это и есть
   та самая «одна аккуратная панель снизу», в которой собраны выход,
   проигрывание и вход в настройки. */
.полоса-игры {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px;
}
body[data-экран="игра"] .полоса-игры {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  margin: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  justify-content: center;
  background: var(--лист); border-top: 1px solid var(--край);
  box-shadow: var(--тень);
}
.полоса-кнопка {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--край); background: var(--лист); color: var(--текст);
  border-radius: 999px; padding: 10px 16px;
  font-family: inherit; font-size: 15px; cursor: pointer;
}
.полоса-кнопка:hover { border-color: var(--главный); }
.пк-значок { font-size: 17px; line-height: 1; }
.я-значок { font-size: 15px; }
.ярлык { display: inline-flex; align-items: center; gap: 6px; }


/* ---- игра во весь экран ----
   Илья: «при нажатии play вообще увеличивается экран как играть, всё
   остальное уходит (меню, надписи), чтобы максимально крупно было на том же
   телефоне». Это отдельное состояние, а не прокрутка обычного экрана. */

body.крупно { overflow: hidden; }
body.крупно .шапка,
body.крупно .работа,
body.крупно .двери,
/* Настройки в развороте больше не прячем: панель всплывает поверх экрана и
   ничего не двигает, а без неё в полноэкранной игре нельзя было ни убавить
   звук, ни сменить темп — приходилось сворачиваться. */
body.крупно #мила { display: none !important; }

body.крупно .игра-поле {
  position: fixed; inset: 0; z-index: 60;
  background: var(--фон);
  /* Полей нет: экран телефона и так маленький, каждые лишние 20 пикселей —
     это минус к размеру кнопок, ради которого разворот и делается. Снизу
     оставлено ровно под полосу игры. Высоту полосы меряем на ходу и кладём
     в «--высота-полосы»: на узком телефоне кнопки переносятся в две строки,
     и фиксированные 78 пикселей резерва оставляли полосу поверх клавиатур —
     Илья: «кнопки наезжают». Число в запасном значении — на первый кадр,
     пока замер не сделан. */
  padding: 4px 4px calc(var(--высота-полосы, 86px) + 6px);
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* На широком мониторе колонка растягивалась во всю ширину, и содержимое
   каждого блока прижималось к левому краю. Держим блоки одной шириной
   по центру экрана. */
body.крупно .игра-поле > * {
  width: 100%;
  max-width: 1600px;
  align-self: center;
}
/* Клавиатуры забирают всю оставшуюся высоту: ради них разворот и нужен. */
body.крупно .клавиатуры { flex: 1 1 auto; min-height: 0; }

/* Слова в развороте не съедают клавиатуры. В песне под кнопками стоят две
   зоны текста: строка, которую поют сейчас, и весь текст песни. На телефоне
   они забирали 308 пикселей из 812, клавиатурам оставалось 217 — набор
   ужимался до четверти натурального размера, и играть по такой картинке
   нельзя. Поэтому в развороте зона слов невысокая и не растягивается:
   поющаяся строка видна крупно, весь текст остаётся под ней и прокручивается
   сам к нужному месту, а освободившаяся высота уходит кнопкам. В режиме
   «Петь» правило не действует — там слова и есть содержание экрана. */
body.крупно #экран-игра:not([data-режим="караоке"]) .подстрочник {
  flex: 0 0 auto;
  padding: 8px 12px;
  margin-bottom: 0;
}
body.крупно #экран-игра:not([data-режим="караоке"]) .пс-сейчас { min-height: 0; }
body.крупно #экран-игра:not([data-режим="караоке"]) .весь-текст {
  /* Доля экрана, а не число пикселей: на невысоком телефоне (640) те же
     96 пикселей отнимали у кнопок заметно больше, чем на 812. */
  max-height: max(56px, 12vh);
  margin-top: 8px;
  padding-top: 8px;
}
body.крупно .полоса-игры {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  margin: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  justify-content: center;
  background: var(--лист); border-top: 1px solid var(--край);
  box-shadow: var(--тень);
}
body.крупно .шашка { min-width: 96px; padding: 8px 12px; }
body.крупно .шашка .цифра { font-size: 46px; }
body.крупно .шашка .нота { font-size: 18px; }
body.крупно .шашка .слог { font-size: 17px; }
body.крупно .караоке { font-size: 40px; }
body.крупно .клавиатура-имя { font-size: 15px; }
body.крупно .значок-ноты { transform: scale(1.15); transform-origin: center; }
body.крупно .играть { width: 76px; height: 76px; font-size: 30px; }

/* На узком экране полоса из семи кнопок переносилась в три строки и съедала
   у клавиатур треть высоты. В развороте подписи второстепенных кнопок
   прячем — значок и подсказка остаются, а «Завершить» и «Следующий»
   подписи сохраняют: это шаги урока, их человек ищет глазами. */
@media (max-width: 560px) {
  body[data-экран="игра"] .полоса-игры { gap: 8px; }
  body[data-экран="игра"] .полоса-игры .полоса-кнопка:not(.урок-кнопка) { padding: 10px 12px; }
  body[data-экран="игра"] .полоса-игры .полоса-кнопка:not(.урок-кнопка) .пк-имя { display: none; }
  body[data-экран="игра"] .играть { width: 64px; height: 64px; font-size: 26px; }
}


/* ---------- поиск и категории в списке песен ----------
   Илья: «в блоке песни сверху должен быть поиск, в списке песен должны быть
   категории». Когда песен станет много, список без поиска превращается в
   портянку — а этого в приложении быть не должно. */

.поиск-песен {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid var(--край);
  border-radius: 999px;
  background: var(--лист);
  color: var(--текст);
  font-family: inherit;
  font-size: 16px;
}
.поиск-песен::placeholder { color: var(--тихий); }
.поиск-песен:focus { outline: none; border-color: var(--главный); }

.фильтры {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.фильтры::-webkit-scrollbar { display: none; }
.фильтр {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--край);
  background: var(--лист);
  color: var(--текст);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.фильтр:hover { border-color: var(--главный); }
.фильтр.выбран {
  background: var(--главный-мягкий);
  border-color: var(--главный);
  font-weight: 600;
}
.фильтр-счёт { color: var(--тихий); font-size: 13px; }
.фильтр.выбран .фильтр-счёт { color: var(--главный); }

/* ---------- праздник: раздача слов гостям ----------
   Илья: слова уходят «на экран + на телефоны кто рядом, как в джаст дансах».
   Ведущему нужна одна цифра на экране, а не настройки сети, поэтому панель
   короткая и ложится поверх слов только на время, пока гости подключаются. */

.раздача {
  position: relative;
  margin: 12px 0 0;
  padding: 18px 18px 16px;
  border-radius: var(--скруг);
  background: var(--лист);
  border: 2px solid var(--главный-мягкий);
  box-shadow: var(--тень);
  text-align: center;
}
.раздача-имя { font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.раздача-код {
  font-size: 54px; font-weight: 800; letter-spacing: 10px;
  color: var(--главный); line-height: 1.1; margin: 4px 0 8px;
}
.раздача-пояс { color: var(--тихий); font-size: 14px; margin: 6px 0; }
.раздача-адрес {
  font-size: 16px; font-weight: 600; word-break: break-all;
  background: var(--фон); border-radius: 10px; padding: 8px 10px; margin: 8px 0;
}
.раздача-кнопки { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
/* Телевизор на празднике. Четыре способа лежат плитками, а не списком:
   человек выбирает глазами по значку, а подробность разворачивается только
   для выбранного — иначе экран превращается в инструкцию. */
.тв-блок { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--край); }
.тв-имя { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.тв-плитки { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.тв-плитка {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border: 1px solid var(--край); border-radius: 12px;
  background: var(--лист); cursor: pointer; font: inherit; color: inherit;
}
.тв-плитка:hover { border-color: var(--главный); }
.тв-плитка.выбрана { border-color: var(--главный); box-shadow: 0 0 0 2px var(--главный) inset; }
.тв-значок { font-size: 22px; line-height: 1; }
.тв-плитка-имя { font-size: 14px; font-weight: 600; }
.тв-плитка-пояс { font-size: 11.5px; opacity: .7; text-align: center; }
.тв-совет { font-size: 13px; line-height: 1.5; margin-top: 10px; color: var(--левый); }
.тв-совет.плохо { color: var(--главный); }

.раздача-связь { font-size: 13px; color: var(--левый); margin-top: 10px; }
.раздача-связь.плохо { color: var(--главный); }
.раздача-закрыть {
  position: absolute; top: 8px; right: 10px;
  border: none; background: none; font-size: 20px; color: var(--тихий); cursor: pointer;
}
/* Кнопка «Гостям» горит, пока комната открыта: ведущий должен видеть,
   раздаются слова или он играет сам себе. */
#раздать.горит { border-color: var(--главный); color: var(--главный); font-weight: 700; }

/* ---------- экран гостя ----------
   Гость ничего не настраивает: у него на экране только слова и картинка. */

.гость-поле { padding: 0 0 24px; }
.гость-имя { font-size: 20px; font-weight: 700; margin: 18px 0 6px; text-align: center; }
.гость-пояс { color: var(--тихий); font-size: 14px; text-align: center; margin: 0 12px 14px; }
.гость-код {
  display: block; width: 200px; margin: 0 auto 14px;
  font-size: 40px; font-weight: 800; letter-spacing: 12px; text-align: center;
  padding: 10px 0 10px 12px; border: 2px solid var(--край); border-radius: var(--скруг);
  background: var(--лист); color: var(--текст);
}
.гость-код:focus { outline: none; border-color: var(--главный); }
#экран-гость .главная-кнопка { display: block; margin: 0 auto; }
#экран-гость .караоке { min-height: 74vh; font-size: 30px; }
#экран-гость .мелкая { display: block; margin: 12px auto 0; }
.гость-связь { text-align: center; color: var(--тихий); font-size: 14px; margin: 10px 0 0; }

/* ---------- профиль: мои успехи ---------- */
/*
   Экран поддержки, а не отчёт. Крупное звание сверху, полоса до следующего,
   три честные цифры и список уроков с отметками. Илья: «профиль с
   достижениями по обучению и сколько песен спето, с поддержкой — ты молодец,
   новый статус!».
*/

.профиль-весть {
  border: 1px solid #d9a13b;
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: linear-gradient(120deg, rgba(217, 161, 59, .18), transparent 70%), var(--лист);
  text-align: center;
}
.пв-заголовок { font-size: 15px; font-weight: 700; color: #b9791a;
  letter-spacing: .04em; text-transform: uppercase; }
.пв-звание { font-size: 27px; font-weight: 700; margin: 6px 0 4px; }
.пв-слово { color: var(--тихий); font-size: 15px; }

.профиль-звание {
  border: 1px solid var(--край);
  border-radius: 20px;
  background: var(--лист);
  box-shadow: var(--тень);
  padding: 20px 22px;
}
.пз-имя { font-size: 26px; font-weight: 650; }
.пз-слово { color: var(--тихий); font-size: 15px; margin-top: 4px; }
.пз-полоса {
  height: 10px; border-radius: 999px; margin: 16px 0 10px;
  background: var(--край); overflow: hidden;
}
.пз-залив { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #e2a33c, var(--главный)); transition: width .4s; }
.пз-дальше { color: var(--тихий); font-size: 14px; line-height: 1.5; }

.профиль-сводка {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 16px 0;
}
.пс-клетка {
  border: 1px solid var(--край); border-radius: 18px; background: var(--лист);
  padding: 16px 10px; text-align: center;
}
.пс-число { font-size: 26px; font-weight: 700; }
.пс-подпись { color: var(--тихий); font-size: 13px; margin-top: 4px; line-height: 1.35; }

.профиль-уроки {
  border: 1px solid var(--край); border-radius: 20px; background: var(--лист);
  padding: 8px 18px 14px;
}
.пу-строка {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center;
  gap: 10px; padding: 10px 0; border-top: 1px solid var(--край); font-size: 16px;
}
.пу-строка:first-of-type { border-top: none; }
.пу-знак { font-size: 18px; text-align: center; }
.пу-строка.сдан .пу-знак { color: var(--левый); }
.пу-строка.ждёт { color: var(--тихий); }
.пу-точность { color: var(--тихий); font-size: 14px; }

/* Отметка о новом звании на двери профиля. */
.дверь.есть-новость { border-color: #d9a13b; }
.дверь.есть-новость .дверь-опис { color: #b9791a; font-weight: 600; }

@media (max-width: 760px) {
  .профиль-сводка { gap: 8px; }
  .пс-число { font-size: 22px; }
  .пс-подпись { font-size: 12px; }
}

/* ---------- вход по номеру телефона ---------- */

.вход-полоска {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 4px 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--край);
  border-radius: 18px;
  background: var(--лист);
  box-shadow: var(--тень);
}
.вход-полоска.вошёл { border-color: #3f8b57; }
.вп-знак {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(217, 161, 59, .18);
  font-size: 22px;
}
.вход-полоска.вошёл .вп-знак { background: rgba(63, 139, 87, .18); color: #3f8b57; }
.вп-имя { font-size: 18px; font-weight: 650; }
.вп-слово { color: var(--тихий); font-size: 14px; line-height: 1.45; margin-top: 2px; }

.вход-форма {
  max-width: 420px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  justify-items: stretch;
  text-align: center;
}
.вход-вопрос { font-size: 20px; font-weight: 650; }
.вход-поле {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--край);
  border-radius: 16px;
  background: var(--лист);
  color: var(--текст);
  font-size: 22px;
  text-align: center;
  font-family: inherit;
}
.вход-поле:focus { outline: none; border-color: var(--главный); }
.вход-поле.код { letter-spacing: 14px; font-size: 30px; padding-left: 32px; }
.вход-согласие {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  color: var(--тихий);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.вход-согласие input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.вход-ошибка {
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(217, 75, 61, .12);
  color: #b8382b;
  font-size: 15px;
}
.вход-демо {
  padding: 14px 16px;
  border: 1px dashed var(--край);
  border-radius: 16px;
  background: rgba(217, 161, 59, .10);
}
.вд-код { font-size: 34px; font-weight: 700; letter-spacing: 10px; }
.вд-слово { color: var(--тихий); font-size: 13px; line-height: 1.45; margin-top: 6px; }
.вход-мелко {
  max-width: 420px;
  margin: 22px auto 0;
  color: var(--тихий);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 760px) {
  .вход-полоска { grid-template-columns: 40px 1fr; }
  .вход-полоска button { grid-column: 1 / 3; justify-self: stretch; }
  .вп-знак { width: 40px; height: 40px; font-size: 19px; }
}

/* ---------- как держать гармонь ---------- */

/* Показывается поверх урока при первом заходе. Именно окном, а не строчкой
   в тексте: человек, который первый раз взял гармонь в руки, держит её
   неправильно, и переучиваться потом дольше, чем прочитать пять строк
   сейчас. Закрывается кнопкой или кликом мимо карточки. */
.посадка-окно {
  /* fixed, а не absolute: экран урока прокручивается, и окно, привязанное к
     нему, центрировалось бы по всей высоте прокрутки — то есть за пределами
     видимого. Поверх окна прокрутки оно всегда перед глазами. */
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(24, 14, 8, .58);
  backdrop-filter: blur(2px);
}

.посадка-карта {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  /* Переменных --карточка/--рамка в палитре нет: карточка окна выходила
     прозрачной, и текст ложился прямо на размытый урок. Берём цвета листа
     и края — те же, что у всех остальных карточек приложения. */
  background: var(--лист);
  border: 1px solid var(--край);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}

.посадка-имя { font-size: 21px; font-weight: 800; margin-bottom: 10px; padding-right: 40px; }

/* Крестик держится в углу карточки при любой её высоте: карточка
   прокручивается внутри себя, и выход не должен уезжать вместе с текстом. */
.посадка-карта { position: relative; }
.посадка-крест {
  position: sticky; top: 0; float: right;
  width: 34px; height: 34px; margin: -6px -6px 0 8px;
  border: 1px solid var(--край); border-radius: 50%;
  background: var(--лист); color: var(--текст);
  font-size: 18px; line-height: 1; cursor: pointer;
  z-index: 2;
}
.посадка-крест:hover { background: var(--главный-мягкий); }
.посадка-подсказка { font-size: 13px; opacity: .6; margin-top: 8px; text-align: center; }

/* Рисунок — с точки зрения самого играющего, поэтому он крупный: по нему
   человек сверяет то, что видит у себя на коленях. */
.посадка-рисунок {
  background: var(--главный-мягкий);
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 12px;
}
.посадка-рисунок svg { display: block; width: 100%; height: auto; }

/* Номер строки повторяет кружок на рисунке — только так понятно, к какому
   месту картинки относится текст. */
.посадка-пункт { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.посадка-пункт .пп-номер {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #c03a2c; color: #fff;
  font-size: 15px; font-weight: 700; line-height: 26px; text-align: center;
}
.посадка-пункт .пп-текст { min-width: 0; }
.посадка-пункт .пп-имя { font-weight: 700; font-size: 16px; }
.посадка-пункт .пп-что { font-size: 15px; line-height: 1.45; opacity: .85; }

.посадка-карта .главная { width: 100%; margin-top: 6px; }

/* Разбор урока — то же окно, но длиннее: шаги, ошибки и критерий «сдано».
   Разделы разделены заголовками, потому что три списка подряд без них
   читаются как одна простыня. */
.разбор-карта { width: min(620px, 100%); }

.разбор-мета {
  font-size: 14px; font-weight: 700;
  opacity: .7; margin-bottom: 12px;
}

/* Реплика Милы стоит первой: она объясняет, зачем этот урок вообще нужен,
   и именно с этого вопроса человек начинает. */
.разбор-мила {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--главный-мягкий);
  border-radius: 14px; padding: 12px; margin-bottom: 14px;
}
.разбор-мила .мила-лицо { flex: 0 0 auto; }
.разбор-мила .рм-текст { font-size: 15px; line-height: 1.45; }

.разбор-раздел {
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; opacity: .55;
  margin: 14px 0 8px;
}

/* Номер шага вынесен в кружок слева: по нему видно, что действия идут
   по порядку, а не списком на выбор. */
.разбор-шаг { display: flex; gap: 10px; align-items: flex-start; }
.разбор-шаг .рш-номер {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--главный); color: #fff;
  font-size: 14px; font-weight: 800;
}
.разбор-шаг .рш-тело { flex: 1 1 auto; }

/* Ошибка подписана словами самого ученика («звук рвётся»), поэтому набрана
   как реплика — так он находит свою строку глазами за секунду. */
.разбор-ошибка { border-left: 3px solid var(--край); padding-left: 10px; }
.разбор-ошибка .пп-имя { font-weight: 700; font-size: 15px; opacity: .9; }

.разбор-проверка {
  font-size: 15px; line-height: 1.45;
  background: var(--главный-мягкий);
  border-radius: 14px; padding: 12px; margin-bottom: 12px;
}

/* Кнопка возврата к посадке стоит рядом с «Почему так» — двумя ссылками
   подряд, поэтому нужен отступ, иначе они слипаются в одну строку. */
#как-держать { margin-left: 14px; }


/* ---- завершение урока ----
   Илья: «нужна кнопка завершить и следующий». Выход из урока должен быть
   виден и в развороте, где шапки с «назад» нет вовсе. */
.полоса-кнопка.главный-шаг {
  border-color: var(--главный);
  background: var(--главный);
  color: #fff;
}
.полоса-кнопка.главный-шаг:hover { filter: brightness(1.06); }

/* Советы по отработке и книги в разборе урока. Ненумерованные, в отличие от
   шагов: это не порядок действий, а приёмы, которые применяются постоянно. */
.разбор-совет { padding-left: 14px; position: relative; }
.разбор-совет::before {
  content: '·'; position: absolute; left: 2px; top: -2px;
  font-size: 20px; color: var(--главный);
}
.разбор-книга .пп-имя { font-size: 15px; }
/* Подсказка «что искать в книге по этой теме» — своя у каждого урока,
   поэтому читается как совет, а не как сноска. */
.разбор-тема {
  font-size: 14.5px; line-height: 1.5; opacity: .85;
  margin: -2px 0 10px; padding-left: 12px;
  border-left: 2px solid var(--главный);
}
.разбор-примечание {
  font-size: 13px; opacity: .65; line-height: 1.45;
  margin: -2px 0 10px;
}

/* Разгон темпа виден в итоге урока: человек должен понимать, почему в
   следующий раз играет быстрее, и что это его заслуга, а не сбой. */
.итог-разгон {
  margin-top: 8px; font-size: 15px; font-weight: 600;
  color: var(--главный);
}