/*
 * Портретный кадр для игры.
 *
 * Игра нарисована под 750x1334, а Canvas в ней настроен как
 * fitWidth: true / fitHeight: false. На широком окне это значит:
 * ширина фиксируется на 750, а видимая ВЫСОТА схлопывается —
 * при окне 1024x768 движок отдавал visibleSize 750x562 вместо 750x1334.
 * Отсюда и разъехавшийся интерфейс: виджеты цепляются за края
 * Canvas-узла, а он становится широким и низким.
 *
 * Лечится не политикой масштабирования, а рамкой: канвас кладётся
 * в #gameFrame, и Cocos берёт размеры кадра у него, а не у окна
 * (cc.game.frame = родитель контейнера, если это не body).
 * Кадр держим портретным — движок получает 750x1334 и рисует ровно то,
 * что нарисовали художники. Так же сделано у официальной версии на
 * G123: игра сидит в кадре фиксированного размера, а не растягивается.
 */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0b0e14;
}

#gameFrame {
    position: fixed;
    inset: 0;
    margin: auto;

    width: 100%;
    height: 100%;

    /* портретный кадр 750:1334 — по меньшей из сторон окна */
    max-width: calc(100vh * 750 / 1334);
    max-height: calc(100vw * 1334 / 750);

    background: #000;
    overflow: hidden;
}

#gameFrame > canvas,
#gameFrame > #Cocos2dGameContainer {
    display: block;
}

/* на узких экранах (телефон) кадр и так во весь экран — рамка не мешает */
@media (max-aspect-ratio: 750/1334) {
    #gameFrame {
        max-width: 100%;
        max-height: 100%;
    }
}