@font-face {
    font-family: "Poppins";
    /* Subsetted WOFF2 (ASCII + Latin-1 + common punctuation), ~7 KB vs the old 292 KB TTF.
       WOFF2 is supported by every target browser (Chrome 36+, Safari 10+, iOS 10+, Firefox 39+). */
    src: url("./assets/fonts/Poppins.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

html {
    margin: 0;
    padding: 0;
    background-color: #26547C;
    touch-action: none;
    width: 100%;
    height: var(--app-height, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #26547C;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    width: 100%;
    height: var(--app-height, 100dvh);
    overscroll-behavior: none;
}

#app {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    width: var(--app-width, 100vw);
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    height: var(--app-height, 100dvh);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

/*
 * The Phaser parent must NOT be a flex/content-hugging box: under Scale.FIT the
 * canvas is sized from the parent, so a flex parent that sizes to the canvas
 * creates a measurement feedback loop (the canvas overflows in portrait/embeds
 * until it settles over several resizes). Keep it a plain, viewport-sized block
 * and let Phaser's autoCenter (CENTER_BOTH) center the canvas via margins.
 */
#game-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#game-container canvas {
    display: block;
    touch-action: none;
    image-rendering: auto;
    max-width: 100%;
    max-height: 100%;
}