/* Оболочка «Кубомира». Тёмная, спокойная, кнопки крупные — на них жмёт ребёнок. */
:root {
  --фон: #0a0c12;
  --панель: #141926;
  --панель-край: #232c3f;
  --текст: #e8edf7;
  --текст-тихо: #8ea3c4;
  --зелёный: #4caf6a;
  --зелёный-ярче: #62c47f;
  --синий: #4a8fd6;
  --красный: #d15b4a;
  --жёлтый: #d9a83c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--фон); color: var(--текст);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

#игра { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.значок { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- кнопка «Попросить» поверх игры ---------- */
/* Кнопка висит поверх игры, поэтому в покое почти прозрачная —
   не мозолит глаза, но всегда под рукой. При наведении проявляется. */
.просьба-вход {
  /* слева сверху — справа у самой игры своя кнопка «Меню», они бы налезли */
  position: fixed; left: 14px; top: 14px; z-index: 20;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px; cursor: pointer;
  background: rgba(90, 72, 190, .55);
  color: #fff; font-size: 14px; font-weight: 600;
  opacity: .38;
  transition: opacity .16s ease, background .16s ease, transform .12s ease;
}
.просьба-вход .значок svg { width: 17px; height: 17px; }
.просьба-вход:hover {
  opacity: 1;
  background: linear-gradient(180deg, #6f5ad6, #5643b8);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.просьба-вход:active { transform: translateY(1px); }
/* если есть неотправленные просьбы — кнопка не прячется */
.просьба-вход.есть-дела { opacity: .92; }
.просьба-вход.спрятана { display: none; }
.просьба-вход .метка {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--жёлтый); color: #22160a; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- панель ---------- */
.панель {
  position: fixed; right: 0; top: 0; bottom: 0; width: 430px; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--панель); border-left: 1px solid var(--панель-край);
  box-shadow: -14px 0 40px rgba(0, 0, 0, .5);
}
.панель[hidden] { display: none; }

.панель-шапка {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--панель-край);
}
.панель-шапка h1 { margin: 0; font-size: 19px; font-weight: 600; flex: 1; }
.панель-шапка .значок { color: #a892f5; }

.подсказка { margin: 12px 16px 4px; color: var(--текст-тихо); font-size: 14px; line-height: 1.45; }

.лента { flex: 1; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 10px; }
.лента::-webkit-scrollbar { width: 10px; }
.лента::-webkit-scrollbar-thumb { background: #2a3448; border-radius: 5px; }

.просьба {
  background: #1b2233; border: 1px solid var(--панель-край); border-radius: 12px;
  padding: 12px 14px;
}
.просьба-текст { font-size: 15px; line-height: 1.45; }
.просьба-низ {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; font-size: 13px; color: var(--текст-тихо);
}
.статус { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 20px; font-weight: 600; }
.статус.ждёт { background: rgba(217, 168, 60, .16); color: #e8c46a; }
.статус.делают { background: rgba(74, 143, 214, .16); color: #7db4ea; }
.статус.готово { background: rgba(76, 175, 106, .16); color: var(--зелёный-ярче); }
.статус.беда { background: rgba(209, 91, 74, .16); color: #e8877a; }

.пусто { color: var(--текст-тихо); font-size: 14px; text-align: center; padding: 30px 10px; line-height: 1.5; }

/* ---------- черновик распознанной речи ---------- */
.черновик { border-top: 1px solid var(--панель-край); padding: 14px 16px; background: #171e2d; }
.черновик-текст {
  min-height: 58px; padding: 12px 14px; border-radius: 10px;
  background: #0f1420; border: 1px solid #2b3550;
  font-size: 16px; line-height: 1.45; outline: none;
}
.черновик-текст:focus { border-color: var(--синий); }
.черновик-кнопки { display: flex; gap: 10px; margin-top: 12px; }

/* ---------- низ панели ---------- */
.низ { padding: 14px 16px 18px; border-top: 1px solid var(--панель-край); display: flex; align-items: center; gap: 12px; }
.низ-мелочь { display: flex; gap: 6px; }

.микрофон {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 72px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, var(--зелёный-ярче), var(--зелёный));
  color: #fff; font-size: 20px; font-weight: 700; cursor: pointer;
  transition: transform .1s ease;
}
.микрофон:active { transform: scale(.98); }
.микрофон.пишет { background: linear-gradient(180deg, #e0705f, var(--красный)); animation: пульс 1.1s ease-in-out infinite; }
.микрофон:disabled { opacity: .45; cursor: not-allowed; animation: none; }
@keyframes пульс { 0%, 100% { box-shadow: 0 0 0 0 rgba(209, 91, 74, .55); } 50% { box-shadow: 0 0 0 14px rgba(209, 91, 74, 0); } }

.большая {
  flex: 1; min-height: 52px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .16);
  font-size: 16px; font-weight: 600; cursor: pointer; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.большая.зелёная { background: var(--зелёный); }
.большая.серая { background: #34405a; }
.большая:active { transform: translateY(1px); }

.плоская {
  background: transparent; border: 1px solid var(--панель-край); border-radius: 10px;
  color: var(--текст-тихо); width: 42px; height: 42px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.плоская:hover { color: var(--текст); border-color: #3a4763; }
.плоская.мелкая { width: auto; height: auto; padding: 8px 12px; font-size: 13px; }

/* ---------- настройки ---------- */
.настройки {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--панель); border-top: 1px solid var(--панель-край);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.настройки[hidden] { display: none; }
.настройки label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--текст-тихо); }
.настройки input {
  background: #0f1420; border: 1px solid #2b3550; border-radius: 8px;
  padding: 10px 12px; color: var(--текст); font-size: 14px; outline: none;
}
.настройки input:focus { border-color: var(--синий); }
.версия { margin: 0; font-size: 12px; color: #5d6b85; text-align: center; }

/* ---------- всплывашка ---------- */
.сообщение {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 50;
  background: #1b2233; border: 1px solid var(--панель-край); border-radius: 12px;
  padding: 12px 20px; font-size: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  max-width: 70vw; text-align: center;
}
.сообщение[hidden] { display: none; }

/* ---------- возврат на прошлую игру ---------- */
.починка { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.большая.жёлтая { background: #c8862f; }
.большая.огромная { min-height: 72px; font-size: 22px; }

/* ---------- экран спасения ---------- */
/* Показывается во весь экран, если новая игра не завелась.
   Ребёнку надо нажать одну кнопку — и он снова играет. */
.спасение {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 10, 16, .96);
  display: flex; align-items: center; justify-content: center;
}
.спасение[hidden] { display: none; }
.спасение-окно {
  width: min(560px, 86vw); text-align: center;
  background: var(--панель); border: 2px solid var(--панель-край);
  border-radius: 20px; padding: 36px 32px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.спасение-значок { color: var(--зелёный-ярче); }
.спасение-значок svg { width: 64px; height: 64px; }
.спасение-окно h2 { margin: 0; font-size: 28px; font-weight: 700; }
.спасение-окно p { margin: 0 0 10px; font-size: 17px; line-height: 1.5; color: var(--текст-тихо); }
.спасение-окно .большая { width: 100%; }

/* ---------- вкладки панели ---------- */
.вкладки { display: flex; gap: 6px; padding: 12px 16px 0; }
.вкладка {
  flex: 1; padding: 9px 10px; border-radius: 9px 9px 0 0; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-bottom: none;
  color: var(--текст-тихо); font-size: 14px; font-weight: 600;
}
.вкладка.выбрана { background: #1b2233; border-color: var(--панель-край); color: var(--текст); }

/* ---------- дневник разработки ---------- */
.урок {
  background: #10192b; border: 1px solid #23324d; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
}
.урок p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #b8c6de; }
.номер-разбор { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: 10px; }
.номер-разбор .цифра {
  font-size: 26px; font-weight: 700; color: #8ed05c;
  font-family: ui-monospace, Menlo, monospace;
}
.номер-разбор .точка { font-size: 26px; color: #4a5a76; }
.номер-подписи { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--текст-тихо); }
.номер-подписи b { color: #8ed05c; }

.версия-карточка {
  background: #1b2233; border: 1px solid var(--панель-край); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.версия-карточка.сейчас { border-color: var(--зелёный); }
.версия-верх { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.версия-номер {
  font-family: ui-monospace, Menlo, monospace; font-size: 17px; font-weight: 700; color: #8ed05c;
}
.версия-что { font-size: 14px; line-height: 1.45; }
.версия-капот {
  margin-top: 8px; font-size: 12px; color: #7d8ba6;
  font-family: ui-monospace, Menlo, monospace;
}
.версия-низ { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--текст-тихо); }
.версия-низ .большая { min-height: 38px; font-size: 14px; flex: 0 0 auto; padding: 0 14px; }

/* ---------- просьба повернуть телефон ---------- */
.поверни {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(8, 10, 16, .94);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.поверни[hidden] { display: none; }
.поверни-окно { text-align: center; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.поверни-значок { color: var(--зелёный-ярче); }
.поверни-значок svg { width: 72px; height: 72px; }
.поверни-окно h2 { margin: 0; font-size: 24px; }
.поверни-окно p { margin: 0 0 8px; color: var(--текст-тихо); font-size: 16px; line-height: 1.5; }
.поверни-окно .большая { width: 100%; }

/* на узких экранах панель занимает весь экран, иначе она не помещается */
@media (max-width: 560px) {
  .панель { width: 100%; }
  .просьба-вход { padding: 6px 10px; font-size: 13px; }
}

/* ---------- во весь экран ---------- */
.во-весь-экран {
  position: fixed; left: 14px; bottom: 14px; z-index: 21;
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(90, 72, 190, .5); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .38; transition: opacity .16s ease;
}
.во-весь-экран[hidden] { display: none; }
.во-весь-экран:hover { opacity: 1; }

/* Игра занимает ВЕСЬ экран: ни полей, ни полос прокрутки. */
html, body { width: 100%; height: 100%; overscroll-behavior: none; }
#игра { display: block; }

/* ---------- компактно на телефоне ---------- */
/* На маленьком экране панель должна показывать историю просьб,
   а не два огромных элемента. Ужимаем всё, кроме кнопки записи. */
@media (max-height: 480px), (max-width: 560px) {
  .просьба-вход { padding: 5px 9px; font-size: 12px; gap: 5px; border-radius: 8px; }
  .просьба-вход .значок svg { width: 14px; height: 14px; }

  .панель-шапка { padding: 8px 12px 6px; }
  .панель-шапка h1 { font-size: 15px; }
  .подсказка { margin: 6px 12px 2px; font-size: 12px; line-height: 1.35; }
  .вкладки { padding: 6px 12px 0; }
  .вкладка { padding: 5px 8px; font-size: 12px; }

  .лента { padding: 6px 12px; gap: 6px; }
  .просьба { padding: 8px 10px; border-radius: 9px; }
  .просьба-текст { font-size: 13px; line-height: 1.35; }
  .просьба-низ { margin-top: 5px; font-size: 11px; gap: 6px; }
  .статус { padding: 2px 7px; font-size: 11px; }
  .пусто { padding: 16px 8px; font-size: 12px; }

  .черновик { padding: 8px 12px; }
  .черновик-текст { min-height: 40px; padding: 8px 10px; font-size: 14px; }
  .черновик-кнопки { margin-top: 8px; gap: 8px; }
  .большая { min-height: 40px; font-size: 13px; border-radius: 9px; }

  .низ { padding: 8px 12px 10px; gap: 8px; }
  .микрофон { min-height: 52px; font-size: 16px; border-radius: 12px; }
  .микрофон .большой-значок svg { width: 26px; height: 26px; }
  .плоская { width: 34px; height: 34px; }
  .плоская svg { width: 17px; height: 17px; }
  .починка { padding: 0 12px 10px; gap: 6px; }
  .починка .большая { min-height: 34px; font-size: 12px; }

  .урок { padding: 9px 11px; margin-bottom: 8px; }
  .урок p { font-size: 12px; margin-bottom: 8px; }
  .номер-разбор .цифра, .номер-разбор .точка { font-size: 20px; }
  .номер-подписи { font-size: 11px; line-height: 1.5; }
  .версия-карточка { padding: 8px 10px; margin-bottom: 7px; }
  .версия-номер { font-size: 14px; }
  .версия-что { font-size: 12px; }
  .версия-капот { font-size: 10px; margin-top: 5px; }
  .настройки { padding: 10px 12px; gap: 8px; }
  .настройки input { padding: 7px 9px; font-size: 13px; }
}

.настройки-шапка {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600; margin-bottom: 2px;
}