body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #0c0518;
}

#app {
    width: 100%;
    /* 100vh on iOS Safari is the LARGE viewport (URL bar + toolbar hidden), so a
       full-height world renders taller than what is visible. 100dvh tracks the
       current viewport but can report the large value on Android before the
       toolbar settles. 100svh is the smallest guaranteed area, so it never clips -
       worst case a hair of letterbox. Cascade oldest -> best (new-games.md sec 2). */
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
}

/* Give Phaser's Scale.FIT a concrete parent box to measure (the visible viewport),
   instead of letting #game-container collapse to the canvas size. */
#game-container {
    width: 100%;
    height: 100%;
}