@font-face { font-family: 'NoteLocal'; src: url('resources/fonts/ShantellSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'CommonFont'; src: url('resources/fonts/Neucha-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ============================================ СЦЕНА Игра свёрстана под один размер — 1236×659, кадр Яндекс.Игр. Под окно она не переверстывается, а масштабируется целиком (js/stage.js ставит transform: scale). Поэтому внутри сцены не должно быть ни vw/vh, ни медиазапросов по ширине окна: они меряют окно, а не сцену, и разъезжаются с макетом. Размеры вынесены в переменные, чтобы бывшие проценты экрана читались как проценты сцены: 36vh стало calc(var(--stage-h) * 0.36). ============================================ */ :root { --stage-w: 1236px; --stage-h: 659px; } html { height: 100%; /* КОРНЕВОЙ ШРИФТ ЗАКРЕПЛЁН. Сцена свёрстана в пикселях (1236×659), а размеры текста — в rem, то есть от шрифта корня. Браузер берёт его из своих настроек: на ноутбуке с масштабом Windows 125% или при увеличенном шрифте по умолчанию он не 16px. Тогда текст внутри сцены растёт, а сама сцена нет — тетрадь раздувается и наезжает на соседей. Замер: при корне 20px тетрадь стала 496 вместо 400, ровно на четверть. Авторское правило перебивает настройку по умолчанию, и все rem снова означают одно и то же на любой машине. Читаемость от этого не страдает: игру целиком масштабирует js/stage.js под размер окна. Чего это НЕ лечит: в Chrome есть отдельная настройка «Минимальный размер шрифта», она применяется при отрисовке и правилами не перебивается. Если текст всё равно крупный — смотреть туда. */ font-size: 16px; /* Автоподгонку текста выключаем. Chrome на Android и встроенный браузер приложений (в нём игру показывает VK) сами увеличивают текст в широких блоках, чтобы его было удобно читать без масштаба. У нас масштаб свой, на всю сцену, и подгонка только раздувала строки тетради — «Итого» уезжало за экран */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { /* За сценой — чернота. Раньше доски стола лежали на и заливали всё окно: в полях сверху и снизу продолжался пол, а фигуры обрывались посреди него. Теперь доски живут внутри сцены, снаружи идёт стена избы, а за ней ничего — игровой экран кончился */ background: #000; height: 100%; /* Сцена садится по центру окна, по краям остаются поля со скатертью. overflow: hidden — потому что уменьшенная сцена всё равно занимает свои 1236×659 в раскладке, и без обрезки окно получало бы полосы прокрутки на пустое место */ display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Во ВКонтакте за сценой не чернота, а тёмно-коричневый — цвет заставки. Чек-лист VK требует под экраном цветную подложку «не чёрную и не белую»: её видно в полях по бокам и когда тянут экран за край. В Яндексе оставлено как было. data-platform ставит встроенный скрипт в index.html */ html[data-platform="vk"], html[data-platform="vk"] body { background: #3a2718; } /* Пол продолжается за край сцены на полосу --floor-band. Ровно на неё же съезжают фигуры, поэтому их внешний край приходится точно на границу пола и стены — не в середину стены. Рисуем тем же фоном, что у сцены, и кладём под содержимое (z-index -1): так полоса и внутренность сцены остаются одной поверхностью без шва. */ #stage::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--floor-band, 0px) * -1) 0; background-image: radial-gradient(circle, rgba(30, 20, 10, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%), url(resources/images/table.webp); background-size: auto, auto; pointer-events: none; } /* ============================================ СТЕНА В ПОЛЯХ Когда пропорции окна не совпали со сценой, сверху и снизу остаются поля. Раньше там продолжались доски пола, и фигуры обрывались посреди них ровной линией — читалось как обрезанная наклейка. Теперь сразу за краем сцены идёт стена избы, а дальше чернота: игровой экран кончился. Фигуры при этом уходят навстречу стене и садятся к ней спиной — обрыв перестаёт быть обрывом. Ширина — во всё окно (сцена плюс боковой вылет), высота считается из неё по отношению сторон картинки 1680×197. Растягивать по высоте нельзя: брёвна поплывут. ============================================ */ .stage-wall { position: absolute; left: calc(var(--stage-bleed-x, 0px) * -1); width: calc(var(--stage-w) + var(--stage-bleed-x, 0px) * 2); /* Всё, что осталось от поля после полосы пола, — до самого края экрана. Черноты за стеной больше нет: стена и есть край */ height: calc(var(--stage-bleed-y, 0px) - var(--floor-band, 0px)); min-height: 300px; /* cover, а не 100% 100%: пропорции брёвен сохраняются при любом поле. Поле высокое — картинка растёт по высоте и вылезает по бокам, торцы брёвен уходят за экран, это допустимо. Поле низкое — наоборот, видна полоса стены, прилегающая к столу: положение снизу как раз и держит её у края сцены */ background: url("resources/images/wall2.webp") center bottom / cover no-repeat; pointer-events: none; /* Ниже персонажей (у них 3): они сидят у стены, а не за ней */ z-index: 4; } /* Прижаты вплотную к краю сцены и растут наружу. Полей нет — обе полосы целиком за экраном, их не видно */ /* Отсчёт от края сцены плюс полоса пола */ .stage-wall-top { bottom: calc(100% + var(--floor-band, 0px) - 25px); } .stage-wall-bottom { top: calc(100% + var(--floor-band, 0px) - 25px); transform: scaleY(-1); } /* Свет и тень: одна виньетка на всё, что видит игрок. Растянута на сцену ВМЕСТЕ с полями, поэтому темнеет до самого края экрана, а не до края сцены — иначе поля оставались бы светлой доской. Источник света там же, где был на скатерти: 973×331 в координатах сцены (85% и 50% доски). Размер круга не задаём — по умолчанию это дальний угол, то есть угол ЭКРАНА: чем шире окно, тем дальше растянут спад, и самая тёмная точка всегда на краю. z-index 50: выше стола, меню и панели, ниже затемнения модалок (100). */ #stage::after { content: ""; position: absolute; inset: calc(var(--stage-bleed-y, 0px) * -1) calc(var(--stage-bleed-x, 0px) * -1); pointer-events: none; z-index: 50; background: radial-gradient( circle at calc(var(--stage-bleed-x, 0px) + 973px) calc(var(--stage-bleed-y, 0px) + 331px), rgba(255, 255, 255, 0.10) 0%, /* высветление у источника */ rgba(255, 255, 255, 0.05) 18%, rgba(0, 0, 0, 0.00) 30%, /* нейтральная зона */ rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.55) 100% ); } #stage { width: var(--stage-w); height: var(--stage-h); /* Доски стола и общее затемнение — теперь принадлежность сцены, а не всего окна */ background-image: radial-gradient(circle, rgba(30, 20, 10, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%), url(resources/images/table.webp); background-size: auto, auto; /* flex: none — иначе центрирующий контейнер сожмёт сцену по своим правилам и весь расчёт масштаба поедет */ flex: none; position: relative; transform-origin: center center; /* Колонку держала раньше body — теперь её роль у сцены */ display: flex; flex-direction: column; } /* ============================================ ПЕРСОНАЖИ (для анимации) ============================================ */ /* Золото — цвет диковин. Правило одно на всю игру: золотое число это число, которое изменила или изменит диковина. Больше никуда этот цвет не тратим, иначе он перестанет что-либо значить */ :root { --relic-gold: #b8860b; --relic-gold-glow: rgba(212, 160, 23, 0.55); } table.score td.relic-touched { color: var(--relic-gold); font-weight: 700; } .character { position: fixed; pointer-events: none; z-index: 3; display: flex; flex-direction: column; align-items: center; } .character img { display: block; height: auto; } /* ============================================ ОБЛАЧКО С ИМЕНЕМ СОПЕРНИКА Только в игре по ссылке: против бота напротив сидит Бабушка, и её имя написано на её же лице. Висит слева от фигуры — справа полка диковин и меню, там места нет. Кегль подгоняет fitOneLine (js/text_fit.js): имена с площадки бывают длинными, а переносить их в две строки облачко не даёт — оно тогда наползает на тетрадь. ============================================ */ .name-cloud { position: absolute; /* Отсчёт от верха фигуры, а не от верха экрана: холст персонажа начинается ВЫШЕ сцены — его нарочно выпускают за край (--floor-band в js/stage.js). При top: 54px облачко вставало на 35 единиц выше сцены и на невысоком окне срезалось бы вместе с ним */ top: 100px; right: 56%; max-width: 200px; padding: 8px 16px; background: #fffdf5; border: 2px solid #7a5c3a; border-radius: 18px; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.32); color: #3a2a18; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; z-index: 4; } /* Хвостик к фигуре. Двумя слоями, чтобы у него была та же рамка: одним треугольником обводку не нарисовать */ .name-cloud::before, .name-cloud::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; } .name-cloud::before { right: -14px; margin-top: -9px; border-left: 14px solid #7a5c3a; } .name-cloud::after { right: -11px; margin-top: -9px; border-left: 14px solid #fffdf5; } /* ============================================ ТАБЛИЧКА С ИМЕНЕМ СОПЕРНИКА В игре по ссылке напротив сидит живой человек, и знать надо ровно две вещи: кто это и на связи ли он. Своё имя не пишем — игрок его и так знает, а соперник видит его у себя. Стоит в пустой полосе между тетрадью и фигурой, у верхнего края. Отсчёт от сцены, а не от фигуры: имя — не реплика, и ездить вместе с персонажем ему незачем. Заодно табличка никогда не выйдет за край. ============================================ */ .name-plate { position: absolute; /* Табличка —