/* Раздел на сайте шире, чем в отдельной сборке игры: на большом экране колонка
   посередине выглядела узкой полосой. Подключается после стилей игры, поэтому
   обновление движка эти правила не затрёт — файл наш. */

.section,
.intro-strip,
.site-footer,
.site-head { max-width: min(1680px, 94vw); }

.hero-content { max-width: min(1180px, 92vw); }
.hero-copy { max-width: 420px; }

.world-grid,
.paths,
.features { gap: 22px; }

/* Экран игры: рабочая область и создание персонажа тоже шире. */
.workspace { max-width: min(1860px, 96vw); }
.create-screen { max-width: min(1340px, 92vw); }
.create-intro { max-width: 760px; }
.scene-body p { max-width: 68ch; }

@media (max-width: 1100px) {
    .section, .intro-strip, .site-footer, .site-head,
    .workspace, .create-screen { max-width: 100%; }
}

/* Карта миров: тринадцать вкладок в одну строку не помещаются даже на большом
   экране — часть миров уезжала за правый край, и о них нельзя было узнать,
   не догадавшись прокрутить полосу вбок. На широком экране раскладываем их
   сеткой, на телефоне полоса с прокруткой остаётся: там она уместна. */
@media (min-width: 900px) {
    .world-strip {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        gap: 10px;
        overflow: visible;
        padding-bottom: 4px;
    }
    .world-tab { min-width: 0; }
}