/* Блог в дизайне лендинга (site/styles.css): те же цвета, системный шрифт, пилюли, тёмный подвал. */
:root, [data-md-color-scheme="default"] {
  --pl-bg-soft: #faf5f8;
  --pl-text: #2c2429;
  --pl-muted: #5d5560;
  --pl-accent: #574751;
  --pl-pink: #c49bb4;
  --pl-pink-hover: #b3869f;
  --pl-pink-light: #f3e7ee;
  --pl-yellow: #ffc60b;
  --pl-line: #ece4e9;
  --pl-radius: 14px;

  /* Material: шапка белая с тёмным текстом, как верхняя строка лендинга */
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: var(--pl-pink-light);
  --md-primary-bg-color: var(--pl-accent);
  --md-primary-bg-color--light: var(--pl-muted);
  --md-accent-fg-color: var(--pl-pink-hover);
  --md-accent-fg-color--transparent: rgba(196, 155, 180, .12);

  --md-default-fg-color: var(--pl-text);
  --md-default-fg-color--light: var(--pl-muted);
  --md-typeset-color: var(--pl-text);
  --md-typeset-a-color: var(--pl-accent);
  --md-typeset-mark-color: rgba(255, 198, 11, .35);

  --md-footer-bg-color: var(--pl-accent);
  --md-footer-bg-color--dark: #4a3c45;
  --md-footer-fg-color: #ffffff;

  --md-text-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { -webkit-text-size-adjust: 100%; }

/* Ширина как у лендинга, чуть шире из-за боковых колонок */
.md-grid { max-width: 1120px; }

/* ---------- Шапка ---------- */
.md-header {
  border-bottom: 1px solid var(--pl-line);
  box-shadow: none;
}
.md-header--shadow { box-shadow: 0 2px 10px rgba(87, 71, 81, .08); }
.md-header__title { font-weight: 700; }
.md-header__button.md-logo img { height: 1.6rem; border-radius: 6px; }

/* Поиск в шапке: светлое поле вместо тёмного */
@media screen and (min-width: 60em) {
  .md-search__form { background-color: var(--pl-bg-soft); border: 1px solid var(--pl-line); border-radius: 999px; }
  .md-search__form:hover { background-color: var(--pl-pink-light); }
  .md-search__input { color: var(--pl-text); }
  .md-search__input::placeholder,
  .md-search__input + .md-search__icon { color: var(--pl-muted); }
  [data-md-toggle=search]:checked ~ .md-header .md-search__form { border-radius: .6rem .6rem 0 0; background: #fff; }
}

/* Языки пилюлями */
.pl-langs { display: flex; gap: 4px; margin: 0 .4rem; font-size: .75rem; }
.pl-langs a {
  padding: 4px 10px; border-radius: 999px; color: var(--pl-muted); text-decoration: none; line-height: 1.4;
}
.pl-langs a:hover { color: var(--pl-accent); background: var(--pl-bg-soft); }
.pl-langs a[aria-current="page"] { background: var(--pl-pink-light); color: var(--pl-accent); font-weight: 700; }
/* 8 языков в шапку телефона не влезают: там только текущий, полный список — в подвале */
@media screen and (max-width: 44.984375em) {
  .pl-langs a:not([aria-current="page"]) { display: none; }
}

/* ---------- Текст ---------- */
.md-typeset { font-size: .85rem; line-height: 1.6; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { color: var(--pl-accent); font-weight: 700; letter-spacing: 0; }
.md-typeset h1 { font-size: 1.9em; line-height: 1.2; margin-bottom: .6em; }
.md-typeset h2 { font-size: 1.45em; line-height: 1.25; }
.md-typeset h3 { font-size: 1.15em; }
.md-typeset a:hover { color: var(--pl-pink-hover); }
.md-typeset img { border-radius: 12px; border: 1px solid var(--pl-line); }
.md-typeset hr { border-bottom-color: var(--pl-line); }
.md-typeset blockquote { border-left-color: var(--pl-pink); color: var(--pl-muted); }
.md-typeset table:not([class]) { border: 1px solid var(--pl-line); border-radius: 12px; font-size: .8rem; }
.md-typeset table:not([class]) th { background: var(--pl-pink-light); color: var(--pl-accent); }

/* Подзаголовок поста: дата и т.п. —  <p class="pl-meta">…</p> */
.md-typeset .pl-meta { margin-top: -.6em; color: var(--pl-muted); font-size: .8rem; }

/* Кнопки как на лендинге: [Текст](url){ .md-button } и { .md-button .md-button--primary } */
.md-typeset .md-button {
  padding: .55em 1.1em; border-radius: 12px; border: 2px solid var(--pl-pink);
  color: var(--pl-accent); background: #fff; font-weight: 700;
}
.md-typeset .md-button:hover { background: var(--pl-pink-light); color: var(--pl-accent); border-color: var(--pl-pink); }
.md-typeset .md-button--primary { background: var(--pl-pink); color: #fff; }
.md-typeset .md-button--primary:hover { background: var(--pl-pink-hover); border-color: var(--pl-pink-hover); color: #fff; }

/* Список постов на главной блога: карточки как .points/.card лендинга */
.md-typeset .pl-posts > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.md-typeset .pl-posts > ul > li {
  margin: 0; padding: 16px; border: 1px solid var(--pl-line); border-radius: 12px; background: #fff;
}
.md-typeset .pl-posts li > p { margin: 0; }
.md-typeset .pl-posts a { font-weight: 700; font-size: 1.1em; text-decoration: none; }
.md-typeset .pl-posts small { display: block; color: var(--pl-muted); margin-top: 2px; }

/* Боковая навигация */
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: var(--pl-accent); font-weight: 700; }
.md-nav__link:hover, .md-nav__link:focus { color: var(--pl-pink-hover); }
.md-nav__title { color: var(--pl-accent); }

/* ---------- Подвал ---------- */
.md-footer { background: var(--pl-accent); }
.md-footer__inner { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.pl-footer { padding: 28px 0 36px; color: #fff; font-size: .75rem; line-height: 1.6; }
.pl-footer .md-grid { padding: 0 .8rem; }
.pl-footer a { color: #fff; }
.pl-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; padding: 0; list-style: none; }
.pl-social a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); text-decoration: none;
}
.pl-social a:hover { background: rgba(255, 255, 255, .26); }
.pl-social__icon { display: inline-flex; width: 1.05em; height: 1.05em; }
.pl-social__icon svg { width: 100%; height: 100%; fill: currentColor; }
.pl-small { margin: 0 0 6px; font-size: .68rem; opacity: .85; }

@media print { .pl-footer, .pl-langs { display: none; } }

.md-typeset .md-button { margin: 0 .4em .5em 0; }

/* Призыв к игре в статьях — одинаковый блок везде:
   <div class="pl-cta" markdown>
   **Заголовок.** Одна-две фразы.

   [:fontawesome-brands-steam: Бесплатное демо в Steam](https://store.steampowered.com/app/4433030/){ .md-button .md-button--primary }
   [Играть в браузере](https://linanovels.itch.io/interview-with-emma){ .md-button }
   </div> */
.md-typeset .pl-cta {
  margin: 2em 0; padding: 20px 22px 14px; border-radius: 16px;
  background: var(--pl-pink-light); border: 2px solid var(--pl-pink);
}
.md-typeset .pl-cta > p:first-child { margin-top: 0; font-size: .95rem; }
.md-typeset .pl-cta .md-button { font-size: .9rem; padding: .7em 1.4em; }
.md-typeset .pl-cta .md-button--primary { box-shadow: 0 4px 14px rgba(196, 155, 180, .55); }
.md-typeset .pl-cta .md-button .twemoji { margin-right: .35em; }
.md-typeset .pl-cta .md-button .twemoji svg { width: 1.15em; height: 1.15em; }

/* Аудио в статьях: <audio class="pl-audio" controls preload="none" src="…"></audio> */
.md-typeset audio.pl-audio { display: block; width: 100%; max-width: 320px; height: 36px; margin: .3em 0; }
.md-typeset table audio.pl-audio { width: 150px; min-width: 150px; }
.md-typeset .pl-line { margin: 1em 0 .2em; }
.md-typeset .pl-note { color: var(--pl-muted); font-size: .7rem; }

/* Короткие зацикленные ролики вместо гифок: <video class="pl-anim" autoplay muted loop playsinline …> */
.md-typeset video.pl-anim { display: block; width: 100%; max-width: 800px; height: auto; margin: 1em auto; border-radius: 12px; }

/* Ссылки в тексте статей: подчёркнуты, чтобы было видно, что это ссылка (кнопки, видео и карточки — без) */
.md-typeset p > a:not(.md-button):not(.pl-video),
.md-typeset li > a:not(.md-button),
.md-typeset td > a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: var(--pl-pink);
}
.md-typeset p > a:not(.md-button):not(.pl-video):hover,
.md-typeset li > a:not(.md-button):hover { text-decoration-color: currentColor; }
.md-typeset .pl-posts a, .md-typeset .pl-posts p > a:not(.md-button) { text-decoration: none; }

/* Видео YouTube по клику (assets/yt.js): обложка + кнопка ▶, плеер подгружается после нажатия */
.md-typeset a.pl-video {
  position: relative; display: block; aspect-ratio: 16 / 9; margin: 1em 0;
  border-radius: 12px; overflow: hidden; background: #000;
}
.md-typeset a.pl-video img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }
.md-typeset a.pl-video::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: rgba(196, 155, 180, .92); transition: background .15s;
}
.md-typeset a.pl-video::after {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -7px;
  border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.md-typeset a.pl-video:hover::before { background: var(--pl-pink-hover); }
/* Слово-ссылка на шорт во всплывающем окне (assets/yt.js): [слово](…){ .pl-yt-pop data-yt="ID" } */
.md-typeset a.pl-yt-pop { font-weight: 700; }
.md-typeset a.pl-yt-pop::after { content: " ▶"; font-size: .75em; color: var(--pl-pink); }
.pl-pop {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .7); padding: 16px;
}
.pl-pop__box { position: relative; width: min(360px, 100%); aspect-ratio: 9 / 16; max-height: 90vh; background: #000; border-radius: 12px; overflow: hidden; }
.pl-pop__box iframe { width: 100%; height: 100%; border: 0; display: block; }
.pl-pop__close {
  position: absolute; top: 6px; right: 6px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 24px; line-height: 36px; cursor: pointer;
}

/* Вертикальный шорт: { .pl-video .pl-short data-yt="ID" } */
.md-typeset a.pl-video.pl-short { aspect-ratio: 9 / 16; max-width: 320px; margin: 1em auto; }
.md-typeset a.pl-video iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }