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
       scene renders taller than what is visible and gets clipped by the browser chrome.
       100dvh tracks the current viewport but can report the large value at first paint on
       Android before the dynamic toolbar settles. 100svh is the smallest GUARANTEED area, so
       the whole world always fits with the toolbar shown - worst case a little letterbox.
       Cascade oldest -> best; last valid declaration wins (new-games.md sec 2). */
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 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%;
}