/* Ensure the body takes up the full screen and is black */
body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Force the canvas to stay 16:9 without distortion */
/* The Canvas itself */
canvas {
    /* This forces the browser to maintain 16:9 math */
    width: 100dvw;
    height: 56.25dvw;
    /* (9 / 16) * 100 */

    /* These "caps" prevent it from ever going off-screen */
    max-height: 100dvh;
    max-width: 177.77dvh;
    /* (16 / 9) * 100 */

    /* Ensure no stretching */
    object-fit: contain;
    image-rendering: auto;
    /* Keeps Pixi art crisp */
}

#rotate-overlay {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111;
    color: white;
    z-index: 9999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ONLY show this when the phone is in Portrait mode */
@media (orientation: portrait) {
    #rotate-overlay {
        display: flex;
    }

    canvas {
        display: none;
        /* Hide game so they don't see the tiny squished version */
    }
}

#app {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* The container that holds the game */
#game-container {
    width: 100dvw;
    /* 100% of dynamic viewport width */
    height: 100dvh;
    /* 100% of dynamic viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    overflow: hidden;
}