/* Сказки Лапушат — личный кабинет: блок в письме «Родителям» и окно обязательного входа («ворота»,
   в конце файла) — рисует account.js.
   Шрифты, цвета и кнопки — те же, что у письма (app.css); здесь только то, чего там нет:
   поля ввода, строки «почта / Telegram / Яндекс», списки истории. Блок живёт внутри .parents-scroll —
   единственного места в приложении, которое прокручивается по вертикали. */

.lk { margin: 0 0 12px 16px; }
.lk [hidden] { display: none !important; }
.acc-item .lk p { margin: 0 0 8px; }
.acc-item .lk > p:first-child { margin-top: -2px; }
.acc-item .lk .acc-btn { margin: 0; }
.lk-wide { width: 100%; }
.lk-break { overflow-wrap: anywhere; }

/* Поля: почта и код */
.lk-form { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; }
.lk-form .btn { margin-top: 4px; }
.lk-label {
  font: 800 10.5px/1.2 var(--f-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a4743a;
}
.lk-input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #fffaf0;
  box-shadow: inset 0 0 0 1.5px rgba(150, 100, 40, .45);
  color: #3a2210;
  font: 700 16px/1.2 var(--f-ui);          /* 16px — iPhone не приближает страницу при вводе */
  -webkit-appearance: none;
  appearance: none;
}
.lk-input::placeholder { color: rgba(122, 82, 48, .45); font-weight: 600; }
.lk-input:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; border-radius: 12px; }
.lk-input:disabled { opacity: .6; }
.lk-input--code {
  padding: 0 4px 0 .35em;
  text-align: center;
  letter-spacing: .35em;
  font: 800 22px/1.2 var(--f-display);
}

/* Сообщения: ошибка, подсказка, мелкий текст про согласие */
.acc-item .lk .lk-msg {
  margin: 0 0 8px;
  font: 700 13px/1.35 var(--f-ui);
  color: #b3402a;
}
.acc-item .lk .lk-msg.is-good { color: #6b4a2a; }
.lk-msg:empty { display: none; }
.acc-item .lk .lk-fine {
  font: 400 12px/1.4 var(--f-ui);
  color: #8a6a48;
}
.lk-fine a {
  color: #a4743a;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(164, 116, 58, .45);
  text-underline-offset: 2px;
}
.acc-item .lk .lk-note {
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(224, 160, 60, .16);
  font: 700 12.5px/1.35 var(--f-ui);
  color: #7a5230;
}
.acc-item .lk .lk-empty {
  margin: 0 0 6px;
  font: italic 400 13.5px/1.4 var(--f-serif);
  color: #8a6a48;
}

/* Текстовые кнопки-ссылки */
.lk-links { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: -4px 0 8px; }
.lk-link {
  padding: 7px 0;
  border: 0;
  background: none;
  font: 800 13px/1.2 var(--f-ui);
  color: #a4743a;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(164, 116, 58, .45);
  text-underline-offset: 3px;
  cursor: pointer;
}
.lk-link[disabled] { opacity: .65; text-decoration: none; cursor: default; }
.lk-link--quiet { font-weight: 700; color: #9a7448; }

/* Кнопка Telegram: официальная кнопка приходит от Telegram отдельным окошком-вставкой */
.lk-tg { margin: 0 0 10px; }
.lk-tg-slot { display: flex; align-items: center; min-height: 44px; }
.lk-tg-slot iframe { max-width: 100%; }

/* Вошёл: способы входа */
.lk-ways { margin: 0 0 8px; }
.lk-ways > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 34px;
  padding: 4px 0;
  border-top: 1px dashed rgba(150, 100, 40, .3);
}
.lk-ways > div:last-child { border-bottom: 1px dashed rgba(150, 100, 40, .3); }
.lk-ways dt { flex: none; width: 76px; font: 800 12.5px/1.3 var(--f-ui); color: #9a7448; }
.lk-ways dd { margin: 0; min-width: 0; font: 700 14px/1.3 var(--f-ui); color: #3a2210; }
.lk-ways .lk-link { padding: 3px 0; }
.lk-sub {
  margin: 0 0 10px;
  padding: 2px 12px 4px;
  border-radius: 12px;
  background: rgba(160, 110, 50, .09);
}
.lk-sub .lk-form { margin-top: 8px; }
.lk-sub .lk-links { margin-top: 0; }
.acc-item .lk .lk-sub > p:first-child { margin-top: 8px; }

/* Моя история */
.lk-h { margin: 14px 0 6px; font: 800 15.5px/1.2 var(--f-display); color: #3a2210; }
.lk-h4 {
  margin: 10px 0 4px;
  font: 800 10.5px/1.2 var(--f-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a4743a;
}
.acc-item .lk .lk-seeds { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lk-seeds img { flex: none; width: 18px; height: 22px; object-fit: contain; }
.lk-list { list-style: none; margin: 0 0 2px; padding: 0; }
.lk-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px dashed rgba(150, 100, 40, .3);
}
.lk-list li:last-child { border-bottom: 1px dashed rgba(150, 100, 40, .3); }
.lk-li-main { min-width: 0; font: 400 14.5px/1.3 var(--f-serif); color: #3a2716; }
.lk-li-meta { flex: none; max-width: 48%; text-align: right; font: 700 12px/1.3 var(--f-ui); color: #9a7448; }

/* Выйти / удалить */
.lk-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 4px; }
.lk-btns--end { justify-content: space-between; }
.lk-ask {
  margin: 14px 0 4px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: rgba(224, 160, 60, .16);
}
.lk-ask .lk-btns { margin: 4px 0 0; }
.lk-ask .btn { flex: 1 1 0; }

@media (max-height: 700px) {
  .lk-form { margin: 8px 0 10px; }
  .lk-h { margin-top: 10px; }
  /* С кабинетом в письме девять разделов вместо восьми: строки чуть ниже, чтобы закрытое письмо
     по-прежнему помещалось без прокрутки (390×660, 375×667). Без кабинета ничего не меняется. */
  .acc:has(> .acc-item--account:not([hidden])) .acc-item summary { min-height: 36px; }
  .letter:has(.acc-item--account:not([hidden])) .letter-title { margin-bottom: 4px; }
  .letter:has(.acc-item--account:not([hidden])) .letter-foot { margin-top: 4px; }
}

/* =====================================================================
   ВОРОТА: обязательный вход (#gate, рисует Gate в account.js)
   Состояние — на <html>: data-gate="wait" — заставка (ещё не ясно, вошёл ли человек);
   "on" — окно входа поверх размытого «Дома»; "out" — окно уходит, фон проявляется;
   атрибута нет — приложение открыто. Окно — один экран без прокрутки (360×640 и выше).
   ===================================================================== */
.gate {
  position: absolute;
  inset: 0;
  z-index: 48;                      /* над окошками и карточкой установки, под подсказкой-тостом */
  display: none;
  align-items: center;
  justify-content: center;
  /* сверху — место для выглядывающей Клубнички */
  padding: calc(var(--safe-t) + 60px) 14px calc(var(--safe-b) + 14px);
  overscroll-behavior: contain;
  touch-action: none;               /* свайпы до «Дома» не доходят */
}
html[data-gate] .gate { display: flex; }
html[data-gate="out"] .gate { pointer-events: none; }
.gate [hidden] { display: none !important; }

/* Фон: «Дом» и меню размыты и не двигаются (ролики на паузе ставит app.js). Размытие умеренное, а сам домик
   чуть высветлен — чтобы под окном угадывались камин, шкаф и Лапушата; меню остаётся приглушённым */
.screens, .tabbar { transition: filter .45s ease; }
html[data-gate="wait"] .screens, html[data-gate="pre"] .screens, html[data-gate="on"] .screens {
  filter: blur(7px) brightness(1.22) saturate(1.08);
}
html[data-gate="wait"] .tabbar, html[data-gate="pre"] .tabbar, html[data-gate="on"] .tabbar {
  filter: blur(7px);
}
html[data-gate="wait"] .screens *, html[data-gate="on"] .screens * { animation-play-state: paused !important; }
.gate-dim {
  position: absolute;
  inset: 0;
  /* тёплая лёгкая вуаль, не чёрная: домик виден, а к краям окна — чуть плотнее, чтобы карточка не терялась */
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(92, 52, 20, .16), rgba(70, 38, 14, .3));
  opacity: 0;
  transition: opacity .45s ease;
}
html[data-gate="on"] .gate-dim { opacity: 1; }

/* Заставка: пока ждём ответа сервера */
.gate-splash {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(90% 70% at 50% 100%, #3a2211 0%, #1c110a 60%, #120a05 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
html[data-gate="wait"] .gate-splash { opacity: 1; visibility: visible; transition: none; }
.gate-splash img { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
.gate-splash p { margin: 0; font: 900 21px/1.1 var(--f-display); color: var(--gold-1); }

/* Окно: тот же «бумажный» лист, что у письма «Родителям» */
.gate-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
  transition: transform .32s cubic-bezier(.3, 1.4, .5, 1), opacity .25s ease, visibility 0s linear .32s;
  touch-action: manipulation;
}
html[data-gate="on"] .gate-wrap { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.gate-pal {
  position: absolute;
  right: 18px; top: -58px;
  width: 78px;
  transform: rotate(5deg);
  filter: drop-shadow(0 6px 8px rgba(60, 30, 5, .3));
  pointer-events: none;
}
.gate-card {
  position: relative;               /* после картинки в разметке — закрывает низ Клубнички */
  outline: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 6px 18px 18px 6px;
  background-color: var(--cream);
  background-image:
    linear-gradient(90deg, rgba(110, 70, 25, .2) 0, rgba(110, 70, 25, 0) 22px),
    var(--paper-texture);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  color: var(--ink);
}
/* Прокрутка — только страховка для совсем низких экранов */
.gate-in {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 18px 14px 22px;
}
.gate-in > p { margin: 0 0 10px; font: 400 14.5px/1.4 var(--f-serif); color: #3a2716; }
.gate-title { margin: 0 0 6px; font: 900 22px/1.08 var(--f-display); color: #3a2210; }
.gate-in > .gate-lead { margin: 0 0 10px; font: italic 400 14.5px/1.4 var(--f-serif); color: #4a321c; }
.gate-why { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gate-why li { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.gate-why img { flex: none; width: 36px; height: 36px; object-fit: contain; }
.gate-why span { min-width: 0; font: 700 13.5px/1.25 var(--f-ui); color: #3a2716; }
.gate-in .btn { margin: 0; }
.gate-in .btn + .btn { margin-top: 8px; }
.gate-in .lk-form { margin: 12px 0 10px; }
.gate-in .lk-msg { margin: 0 0 8px; font: 700 13px/1.35 var(--f-ui); color: #b3402a; }
.gate-in .lk-msg.is-good { color: #6b4a2a; }
.gate-in .lk-links { margin: -2px 0 6px; }
.gate-in .lk-fine { margin: 0; font: 400 12px/1.4 var(--f-ui); color: #8a6a48; }
.gate-wait { display: flex; align-items: center; justify-content: center; min-height: 96px; text-align: center; }
.gate-in > .gate-wait p { margin: 0; font: italic 400 15px/1.4 var(--f-serif); color: #4a321c; }

/* Открыта клавиатура телефона: окно прижимается к верху, пояснение убирается — поле ввода остаётся на виду */
.gate.is-typing { align-items: flex-start; padding-top: calc(var(--safe-t) + 12px); }
.gate.is-typing .gate-pal, .gate.is-typing .gate-why, .gate.is-typing .gate-lead { display: none; }

@media (max-height: 700px) {
  .gate { padding-top: calc(var(--safe-t) + 52px); padding-bottom: calc(var(--safe-b) + 10px); }
  .gate-pal { width: 68px; top: -50px; }
  .gate-in { padding-top: 14px; padding-bottom: 12px; }
  .gate-title { font-size: 20px; }
  .gate-in > .gate-lead { font-size: 13.5px; margin-bottom: 8px; }
  .gate-why { gap: 4px; margin-bottom: 10px; }
  .gate-why li { min-height: 32px; }
  .gate-why img { width: 32px; height: 32px; }
  .gate-why span { font-size: 13px; }
  .gate-in .btn { min-height: 46px; }
  .gate-in .lk-form { margin: 10px 0 8px; }
  .gate-in .lk-fine { font-size: 11.5px; }
}

/* Телефон лежит на боку: окно ниже экрана — Клубничку убираем, содержимое прокручивается внутри окна */
@media (max-height: 480px) {
  .gate { padding-top: calc(var(--safe-t) + 10px); }
  .gate-pal { display: none; }
}