/* ═══ KittyLand · мобильная версия (вариант A) ═════════════════════════════════════
   Принято владельцем 20.10.2026 по макету mockup-mobile.html?v=a.
   Схема: ролик маскота сверху (36 dvh), карточки — нижними листами (до 64/68/88 dvh),
   внутри листа прокручивается только текст; «×», ручка и свайп вниз закрывают лист;
   тап по карте выше листа возвращает на шаг назад. Всё заперто в медиазапросах —
   десктопный вид не меняется ни на пиксель. */

/* элементы управления листом: на десктопе их нет */
.mv-x, .mv-grab { display: none; }
#mvScrim { display: none; }

@media (max-width: 820px) {
  /* ── затемнение карты под листом: обрезанные подписи стран не выглядывают ── */
  #mvScrim {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 100dvh; z-index: 65;
    pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: linear-gradient(to top, rgba(15, 16, 16, .97) 0%, rgba(15, 16, 16, .95) 50%,
                rgba(15, 16, 16, .84) 66%, rgba(15, 16, 16, .45) 78%, rgba(15, 16, 16, 0) 90%);
  }
  body.panelOpen #mvScrim { opacity: 1; }

  .mv-x {
    display: flex; position: absolute; top: 8px; right: 8px; z-index: 7;
    width: 44px; height: 44px; align-items: center; justify-content: center;
    font: 22px/1 var(--mono); color: var(--bone); cursor: pointer;
    background: rgba(15, 16, 16, .55); border: 1px solid rgba(126, 44, 62, .95);
  }
  .mv-grab {
    display: flex; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 56px; height: 22px; z-index: 8; align-items: center; justify-content: center;
    touch-action: none; cursor: grab;
  }
  .mv-grab::before { content: ""; width: 40px; height: 3px; background: var(--rose-38); }

  /* ── общий лист ────────────────────────────────────────────────────────── */
  #island, #lira, #rules, #faq {
    left: 8px; right: 8px; width: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    top: auto; padding: 16px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; min-height: 0;
    transform: translateY(calc(100% + 24px)); opacity: 0;
    box-shadow: 0 -26px 40px -12px rgba(15, 16, 16, .92);
    transition: transform .5s cubic-bezier(.22, .85, .2, 1), opacity .35s ease;
  }
  #island.on, #lira.on, #rules.on, #faq.on { transform: translateY(0); opacity: 1; }
  #island { height: auto; max-height: 64dvh; }
  #lira   { height: auto; max-height: 68dvh; }
  #rules, #faq { height: 88dvh; max-height: 88dvh; }

  /* ── остров ────────────────────────────────────────────────────────────── */
  #island .kitty-stage { width: 60px; margin: 0 auto 0; }
  #island .island-name { font-size: 27px; margin-top: 1px; flex: none; }
  #island .island-rows {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; margin-top: 8px;
  }
  #island .island-row { font-size: 13.5px; padding: 5px 2px; margin: 0 0 2px; }
  #island .island-row span { font-size: 12.5px; }
  #island .island-row b { font-size: 14px; }
  #island .pop-list { margin-top: 6px; }
  #island .pop-list li { font-size: 13px; padding: 3px 0; }
  #island .island-acts {
    flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;
  }
  #island .island-acts .act { min-height: 48px; font-size: 11.5px; padding: 8px 6px; }
  #island .island-acts #toYuna { grid-column: 1 / -1; }

  /* ── Юна ───────────────────────────────────────────────────────────────── */
  #lira .kitty-stage { width: 86px; }
  #lira .lira-name { font-size: 30px; margin-top: 4px; }
  #lira .lira-likes-head { margin-top: 10px; font-size: 12px; }
  #lira .lira-likes {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin-top: 8px; gap: 6px;
  }
  #lira .lira-likes li { font-size: 14px; padding: 7px 10px 8px; }
  #lira .lira-likes li.hot { font-size: 12.5px; grid-column: 1 / -1; }
  #lira .lira-acts { flex: none; display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 12px; }
  #stubA, #stubB { display: none; }                 /* поля под будущий функционал — не занимают место */
  #yunaBack { flex: 1 1 auto; min-width: 0; min-height: 48px; }

  /* ── правила и FAQ ─────────────────────────────────────────────────────── */
  #rules .kitty-stage, #faq .kitty-stage { width: 60px; margin: 0 auto 2px; }
  #rules .rules-title, #faq .rules-title { font-size: 26px; flex: none; }
  #rules .rules-scroll, #faq .rules-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; margin-top: 10px; padding-right: 6px;
  }
  #rules .rules-acts, #faq .rules-acts { flex: none; margin-top: 10px; }
  #rules .rules-acts .act, #faq .rules-acts .act { min-height: 48px; }

  /* мягкое затухание у прокручиваемого текста (ставит mobile.js) */
  .mv-scrollable {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 38px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 38px), transparent);
  }

  /* ── ролик маскота сверху ──────────────────────────────────────────────── */
  #intro {
    top: calc(40px + env(safe-area-inset-top, 0px)); bottom: auto; left: 50%; right: auto;
    height: 36dvh; width: auto; transform: translate(-50%, 12px); opacity: 0;
  }
  #intro.on { transform: translate(-50%, 0); opacity: 1; }
  #intro video { height: 100%; width: auto; margin: 0; }

  /* языки и заголовок не лезут под чёлку */
  #langs { top: calc(8px + env(safe-area-inset-top, 0px)); }


  /* переключение листов свайпом: короткое проявление, без сдвига (сдвиг у листа свой) */
  @keyframes mvSwap { from { opacity: .3 } to { opacity: 1 } }
  .mv-next, .mv-prev { animation: mvSwap .22s ease-out; }

  /* ── P4: убираем всё, что рисовалось каждый кадр ─────────────────────────── */
  /* бесконечное свечение заголовка — это перерисовка крупного текста с двумя тенями 60 раз/с.
     Тень остаётся статичной, движение входа — как было. */
  #ask { animation: klAsk 1.05s ease-out .5s both; }
  /* backdrop-filter поверх анимированной карты заставляет пересчитывать blur каждый кадр */
  #lira { backdrop-filter: none; }
  /* ролик прелоадера: на телефоне не декодируем 1,4 МБ ради 1,5 секунды */
  #bootVideo { display: none; }
  /* карточки не двигаются — подсказываем движку, что слой можно не перерисовывать */
  #island, #lira, #rules, #faq { contain: layout style; }

  /* невидимый тост не должен ловить тапы (в бою перекрывал центр кнопки Back) */
  #toast { pointer-events: none; }
}

/* ── короткие экраны (iPhone SE и подобные): лист выше, ролик ниже ─────────── */
@media (max-width: 820px) and (max-height: 700px) {
  #intro { top: calc(36px + env(safe-area-inset-top, 0px)); height: 30dvh; }
  #island { max-height: 72dvh; }
  #island .kitty-stage { width: 54px; }
  #island .island-name { font-size: 25px; }
  #lira { max-height: 78dvh; }
  #rules, #faq { height: 92dvh; max-height: 92dvh; }
}

/* ── пейзаж: лист справа, ролик слева ─────────────────────────────────────── */
@media (max-height: 500px) and (min-width: 700px) {
  .mv-x, .mv-grab { display: flex; }
  #mvScrim { display: none; }
  #island, #lira, #rules, #faq {
    left: auto; right: 8px; top: 8px; bottom: 8px;
    width: min(52vw, 430px); max-height: none; height: auto;
    padding: 16px 18px 12px; transform: translateX(calc(100% + 20px)); opacity: 0;
    display: block; overflow-y: auto; min-height: 0;
    transition: transform .45s cubic-bezier(.22, .85, .2, 1), opacity .3s ease;
  }
  #island.on, #lira.on, #rules.on, #faq.on { transform: translateX(0); opacity: 1; }
  #island .island-rows, #lira .lira-likes,
  #rules .rules-scroll, #faq .rules-scroll { flex: none; min-height: 0; max-height: none; overflow: visible; }
  #stubA, #stubB { display: none; }
  #rules .rules-acts, #faq .rules-acts {
    position: sticky; bottom: 0; margin-top: 8px;
    background: rgba(15, 16, 16, .82); padding-top: 6px;
  }
  #intro {
    left: 8px; right: calc(min(52vw, 430px) + 20px); top: 8px; bottom: 8px;
    height: auto; width: auto; transform: none; opacity: 0;
  }
  #intro.on { opacity: 1; }
  #intro video { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
}