/* ПК: колонкой, как в боте.
 *
 * Владелец 26.09.2026: «хаб должен быть как в боте», а глава W-lib на ПК
 * растягивалась во весь монитор — «читать невозможно». Мини-приложение
 * рисовалось под телефон, и на широком экране карточки хаба выстраивались
 * лентой, а страница вебтуна раздувалась до 1900 пикселей.
 *
 * Поэтому на широком экране каждый полноэкранный слой (хаб, модули, игра)
 * становится колонкой ширины телефона по центру — ровно как окно бота в
 * Telegram Desktop. Глава W-lib шире (~720 px, как Naver Webtoon на ПК):
 * страница крупная, но не во весь монитор.
 *
 * Подключён последним: правила ниже перебивают `inset: 0` модулей порядком,
 * а не весом селектора. Внутри Telegram (окно уже 640) не срабатывает.
 */

@media (min-width: 640px) {
  :root { --col: 480px; }

  html, body { background: #050507; }

  /* Слои во весь экран → колонка. `left/right`, а не transform: иначе
     прикреплённое внутри (шапки, счётчик чтения) поехало бы вместе с
     прокруткой. */
  .hub, .wlib, .wiki, .rate, .fight, .scene, .screen,
  .hud, .tabs, .fx-fade-bottom {
    left: max(0px, calc(50% - var(--col) / 2));
    right: max(0px, calc(50% - var(--col) / 2));
  }
  .hub, .wlib, .wiki, .rate, .fight, .scene, .screen {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 80px rgba(0, 0, 0, 0.55);
  }
  #app { max-width: var(--col); margin: 0 auto; }

  /* Листы снизу — той же ширины, что колонка, а не во весь монитор. */
  .sheet { justify-items: center; }
  .sheet-body { width: 100%; max-width: var(--col); box-sizing: border-box; }

  /* Глава W-lib: шире колонки. `--col` меняется на самом слое, поэтому
     шапка, полоса прогресса и счётчик очков встают по той же ширине. */
  .wlib.wl-screen-reader { --col: 720px; }
  /* Вычитка перевода — страница видна как в читалке. */
  .wlib.wl-screen-tr-edit { --col: 720px; }
  /* Счётчик очков — у правого края колонки главы, а не монитора. */
  .wl-pill { right: calc(max(0px, 50% - var(--col) / 2) + 14px); }
}