html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}

body,
body * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.game {
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    width: 100%;
    height: 100%;
}

.game_container {
    touch-action: none;
    /* Maintain 8:5 (640×400) ratio – fill available viewport, letterbox the other axis */
    aspect-ratio: 8 / 5;
    width: min(100%, calc(100vh * 8 / 5));
    /* Override with dynamic viewport height on browsers that support it (hides address-bar growth) */
    width: min(100%, calc(100dvh * 8 / 5));
}

canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    image-rendering: pixelated;
}

.flipped {
    transform: scaleY(-1);
}
