/* Урок смотрят с телефона, с ноутбука и иногда с планшета. Отсюда крупный
   шрифт, одна колонка и кнопка, в которую нельзя не попасть. Телефон с
   выходом урока наружу стал главным случаем, а не запасным. */
:root{
  --фон:#f4f1ea; --карточка:#fff; --текст:#20232a; --тихий:#7a7f8a;
  --край:#e3ded3; --акцент:#2f6fed; --тепло:#f6c453; --зелёный:#3aa76d;
  --красный:#d9534f;
}
@media (prefers-color-scheme:dark){
  :root{--фон:#15171c; --карточка:#1e2129; --текст:#e9eaee; --тихий:#9aa0ac;
        --край:#2c3038; --акцент:#6ea8ff}
}
*{box-sizing:border-box}
/* 100dvh, а не 100vh: на телефоне адресная строка то появляется, то нет,
   и с vh низ страницы уезжает под неё — кнопка микрофона за краем экрана. */
html{height:100%}
body{
  margin:0; min-height:100dvh; background:var(--фон); color:var(--текст);
  font:18px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; justify-content:center; align-items:flex-start;
  -webkit-text-size-adjust:100%;
}
/* Центрируем полями, а не align-items:center. При центрировании флексом
   экран выше окна обрезается СВЕРХУ и до верха не доскроллить — на телефоне
   это ровно случай урока: лицо, реплика, доска и кнопки разом. */
.экран{
  width:min(46rem,100%); margin:auto; padding:1.2rem;
  padding-left:calc(1.2rem + env(safe-area-inset-left));
  padding-right:calc(1.2rem + env(safe-area-inset-right));
  padding-bottom:calc(1.2rem + env(safe-area-inset-bottom));
}
[hidden]{display:none!important}

h1{font-size:1.7rem; margin:0 0 1.4rem; text-align:center}

/* Полоса про микрофон. Сверху и поверх всего: без неё ученик жмёт кнопку
   и не понимает, почему ничего не происходит. */
.предупреждение{
  position:fixed; top:0; left:0; right:0; z-index:9; margin:0;
  padding:.55rem .9rem; text-align:center; font-size:.88rem;
  color:#5a4410; background:#ffe9a8; border-bottom:1px solid #e8cf7c;
}
.предупреждение a{color:#8a5a00}

/* вход и дверь: поля одинаковые, и стили общие — иначе у двери, добавленной
   позже, поле осталось бы браузерным и мелким */
#вход label,#дверь label{display:block; margin:0 0 1rem; color:var(--тихий); font-size:.95rem}
#вход input,#вход select,#дверь input{
  display:block; width:100%; margin-top:.35rem; padding:.7rem .8rem;
  font:inherit; color:var(--текст); background:var(--карточка);
  border:1px solid var(--край); border-radius:12px;
}
.главная{
  width:100%; padding:.95rem; font:600 1.1rem/1 inherit; color:#fff;
  background:var(--акцент); border:0; border-radius:14px; cursor:pointer;
}
.главная:active{transform:translateY(1px)}
.тихо{color:var(--тихий); font-size:.9rem; text-align:center; margin-top:1rem}

/* урок */
header{display:flex; justify-content:space-between; align-items:center;
  color:var(--тихий); font-size:.9rem; margin-bottom:.6rem}
.мелкая{
  font:inherit; font-size:.85rem; color:var(--тихий); background:none;
  border:1px solid var(--край); border-radius:10px; padding:.55rem .9rem;
  min-height:2.6rem; cursor:pointer;
}
.мелкая:hover{color:var(--текст)}

.учитель{display:flex; justify-content:center; margin-bottom:.2rem}
.лицо{width:168px; height:178px; overflow:visible}
@media (max-width:30rem){.лицо{width:136px; height:144px}}

/* Цвета держатся здесь, а не в разметке: тёмная тема меняет их все разом,
   а градиенты в SVG читают эти же переменные. Палитра игрушечная и намеренно
   в четыре краски: фиолетовая кепка, розовая оправа, жёлтые кнопки, светлый
   корпус. Пятая краска на этом размере превращается в кашу. */
:root{
  --корпус-свет:#f8fbff; --корпус-тень:#b9d0ea;
  --кепка-свет:#9a78f0; --кепка-тень:#5b3cc4;
  --экран:#171327; --оправа:#ff34ad; --оправа-тень:#b70f72;
  --жёлтый:#ffd23f; --жёлтый-тень:#dfa30c; --губы-цвет:#fff;
}
@media (prefers-color-scheme:dark){
  :root{--корпус-свет:#e2edfa; --корпус-тень:#93abc9;
        --кепка-свет:#8663e2; --кепка-тень:#4a2fa8;
        --экран:#0f0c1c; --оправа:#f02aa0; --оправа-тень:#9e0b61;
        --жёлтый:#f5c62f; --жёлтый-тень:#c78f06}
}

.тело{fill:url(#корпус-цвет)}
.голова-форма{fill:url(#корпус-цвет); stroke:var(--корпус-тень); stroke-width:1.5}
.экран{fill:var(--экран)}
.блик-экрана{fill:#fff; opacity:.07}
.ворот{fill:var(--корпус-тень); opacity:.5}
/* Пунктир вместо звеньев: на 168 пикселях ширины настоящие звенья всё равно
   слипаются в линию, а точек хватает, чтобы цепь читалась цепью. */
.цепь{fill:none; stroke:#aec0da; stroke-width:3; stroke-linecap:round; stroke-dasharray:1 4.5}
.звезда{fill:var(--жёлтый); stroke:var(--жёлтый-тень); stroke-width:1.6; stroke-linejoin:round}
.кепка{fill:url(#кепка-цвет)}
.козырёк{fill:var(--кепка-тень)}
.блик-кепки{fill:#fff; opacity:.16}
.лента{fill:var(--кепка-тень); opacity:.85}
.окошко{fill:#fff; opacity:.9}
.кнопка{fill:var(--жёлтый); stroke:var(--жёлтый-тень); stroke-width:1.5}
.кнопка-блик{fill:#fff; opacity:.5}
.дужка{fill:none; stroke:var(--оправа-тень); stroke-width:6.5; stroke-linecap:round}
.оправа-кант,.мост-кант{fill:none; stroke:var(--оправа-тень); stroke-width:11;
  stroke-linejoin:round; stroke-linecap:round}
.оправа,.мост{fill:none; stroke:var(--оправа); stroke-width:7;
  stroke-linejoin:round; stroke-linecap:round}
/* Брови цвета лица, а не кепки: они лежат ровно под её краем, и в цвет
   кепки их просто не видно — а это единственная мимика, заметная
   с двух метров. */
.бровь{fill:none; stroke:var(--экран); stroke-width:6.5; stroke-linecap:round}
.белок{fill:#fff}
.радужка{fill:#37cdf2}
.зрачок{fill:#14112a}
.блик{fill:#fff; opacity:.95}
/* Веко — цвета лица, а не корпуса: глаз закрывается в тёмный экран.
   Поднято оно и в самой разметке, а не только скриптом: пока app.js
   не выполнился (или не выполнится вовсе), лицо должно смотреть
   открытыми глазами, а не слепыми очками. */
.веко{fill:var(--экран); transform:scaleY(0)}
.полость{fill:#48102f}
.зубы{fill:#fff}
.язык{fill:#ff5f9e}
.губы{fill:none; stroke:var(--губы-цвет); stroke-width:4.5; stroke-linecap:round}

/* Движение целиком на скрипте: губы идут за звуками речи, зрачки — за
   курсором, веки моргают. В разметке оставлено только то, что от состояния
   не зависит: дыхание корпуса, качели звезды и кивок во время речи. */
#корпус{animation:дыхание 4.2s ease-in-out infinite; transform-origin:100px 200px}
@keyframes дыхание{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
#голова{transform-origin:100px 176px; transition:transform .5s ease-out}
.зрачок-узел{transition:transform .25s ease-out}
.веко{transition:transform .07s linear; transform-origin:center 89px}
.полость,.губы,.язык,.зубы{transition:all .07s linear}
.бровь{transition:transform .3s ease-out}
#брови{transform-origin:100px 66px}
.звезда{animation:качели 3.6s ease-in-out infinite; transform-origin:100px 187px}
@keyframes качели{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

.думает #голова{transform:rotate(-3deg)}
.слушает #голова{transform:rotate(4deg)}
/* Кивок во время речи. Состояния не пересекаются — говорит, думает и слушает
   ставятся врозь, — поэтому анимация и поворот выше друг друга не задевают. */
.говорит #голова{animation:кивок 1.9s ease-in-out infinite}
@keyframes кивок{
  0%,100%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-2.5px) rotate(1.4deg)}
  70%{transform:translateY(1px) rotate(-1deg)}
}

@media (prefers-reduced-motion:reduce){
  #корпус,.звезда,.говорит #голова{animation:none}
}

.реплика{
  min-height:3.2rem; margin:.9rem 0 1.1rem; text-align:center;
  font-size:1.22rem; line-height:1.5;
}

.доска{
  background:var(--карточка); border:1px solid var(--край); border-radius:18px;
  padding:1.6rem 1.2rem; margin-bottom:1.2rem; text-align:center;
  font:600 1.9rem/1.5 ui-monospace,"Cascadia Mono",Consolas,monospace;
  white-space:pre-wrap; word-break:break-word; overflow-x:auto;
  box-shadow:0 2px 14px rgba(0,0,0,.05);
}
@media (max-width:30rem){.доска{font-size:1.45rem; padding:1.1rem .8rem}}

.низ{display:flex; flex-direction:column; align-items:center; gap:.7rem}
.микрофон{
  width:100%; padding:1.05rem; display:flex; align-items:center;
  justify-content:center; gap:.6rem; cursor:pointer;
  font:600 1.05rem/1 inherit; color:var(--текст);
  background:var(--карточка); border:2px solid var(--край); border-radius:16px;
  transition:border-color .15s, background .15s;
}
#значок{font-size:1.35rem}
.микрофон.слушаю{border-color:var(--зелёный); background:rgba(58,167,109,.10)}
.микрофон.слушаю #значок{animation:пульс 1.1s ease-in-out infinite}
@keyframes пульс{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.микрофон:disabled{opacity:.55; cursor:default}

.письмом{display:flex; gap:.5rem; width:100%}
.письмом input{
  flex:1; padding:.6rem .8rem; font:inherit; font-size:.95rem; color:var(--текст);
  background:var(--карточка); border:1px solid var(--край); border-radius:12px;
}
.письмом button{
  padding:.6rem 1rem; font:inherit; color:var(--тихий); background:var(--карточка);
  border:1px solid var(--край); border-radius:12px; cursor:pointer;
}
.сбой{color:var(--красный); font-size:.9rem; text-align:center}

/* итог */
.тема{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  background:var(--карточка); border:1px solid var(--край); border-radius:12px;
  padding:.7rem .9rem; margin-bottom:.5rem}
.звёзды{color:var(--тепло); letter-spacing:2px; white-space:nowrap}
.заметка{color:var(--тихий); font-size:.85rem; margin:-.2rem 0 .8rem .9rem}
#итог .главная{margin-top:1.4rem}

/* ── Телефон ────────────────────────────────────────────────────────────────
   Три случая, и все три настоящие: узкий экран в руках, тот же телефон
   боком (высоты почти нет) и маленький старый аппарат.

   Главная беда узкого экрана — не ширина, а ВЫСОТА: лицо, реплика, доска,
   кнопка микрофона и строка ввода вместе не помещаются, и ребёнок начинает
   листать в поисках кнопки посреди урока. Поэтому на телефоне лицо меньше,
   отступы теснее, а доска не занимает пол-экрана.                        */

@media (max-width:30rem){
  body{font-size:17px}
  .экран{padding:.9rem;
    padding-left:calc(.9rem + env(safe-area-inset-left));
    padding-right:calc(.9rem + env(safe-area-inset-right));
    padding-bottom:calc(.9rem + env(safe-area-inset-bottom))}
  h1{font-size:1.45rem; margin-bottom:1rem}
  .реплика{font-size:1.1rem; min-height:2.6rem; margin:.6rem 0 .8rem}
  /* Доску на телефоне читают с руки, а не с другого конца комнаты:
     крупный ноутбучный кегль занимал бы пол-экрана. */
  .доска{font-size:1.2rem; padding:.9rem .7rem; margin-bottom:.9rem; border-radius:14px}
  .учитель{margin-bottom:0}
  .микрофон{padding:.9rem; font-size:1rem}
  .низ{gap:.55rem}
  /* Поле ввода не мельче 16px: Safari на iPhone приближает страницу к любому
     полю с мелким шрифтом, и после первого же ответа с клавиатуры урок
     оказывается увеличенным вдвое. */
  .письмом input{font-size:16px}
  header{margin-bottom:.4rem}
}

/* Кнопка микрофона прилипает к низу экрана на всяком маленьком экране —
   и на узком, и на низком. Без этого длинное условие на доске (а у Виленкина
   они бывают в полтора экрана) выталкивает её за край, и ребёнок посреди
   урока листает страницу в поисках кнопки. Замеры: 375×812 — микрофон
   оказывался на 855-й точке при экране в 812; 812×375 (телефон боком) —
   на 494-й при экране в 375. Условие тут ДВА, через запятую: боком телефон
   широкий, и по одной ширине правило не срабатывало. */
@media (max-width:30rem), (max-height:32rem){
  .низ{
    position:sticky; bottom:0; z-index:2;
    padding-top:.5rem;
    padding-bottom:calc(.3rem + env(safe-area-inset-bottom));
    background:linear-gradient(to top, var(--фон) 78%, transparent);
  }
}

/* Телефон боком: высоты меньше, чем ширины. Лицо ужимается сильнее всего —
   разговор важнее портрета. */
@media (max-height:32rem) and (orientation:landscape){
  .лицо{width:104px; height:110px}
  .реплика{font-size:1.05rem; min-height:2rem; margin:.4rem 0 .6rem}
  .доска{font-size:1.2rem; padding:.7rem; margin-bottom:.7rem}
  .микрофон{padding:.7rem}
  h1{margin-bottom:.8rem}
}

/* Маленький старый телефон: 320 точек в ширину. */
@media (max-width:23rem){
  .лицо{width:112px; height:119px}
  .доска{font-size:1.25rem}
  .главная{font-size:1rem; padding:.85rem}
}

/* Палец — не мышь: на сенсорном экране :hover залипает после нажатия,
   и кнопка остаётся подсвеченной до следующего касания. */
@media (hover:none){
  .мелкая:hover{color:var(--тихий)}
}