body {
    background-image: url(./blur_background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000000;
}

#app {
    width: 100%;
    /* 100dvh (dynamic viewport height) tracks the *current* visible viewport as
       the mobile address bar shows/hides. The engine sizes the canvas to
       window.innerHeight (same quantity); using 100vh here instead resolves to
       the *large* viewport on mobile, making #app taller than the canvas and
       leaving a body-background strip above/below it (desktop has no toolbar, so
       100vh == innerHeight there and the bug doesn't show). */
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pixi-container {
    box-shadow: 0 0 20px #000;
}

/* Canvas defaults to display:inline, which adds a ~4px baseline descender gap
   below it. Make it block so #pixi-container hugs the canvas exactly. */
#pixi-container canvas {
    display: block;
}