/* scene/resizer.js sets this element's size to the visible viewport and Phaser fits the canvas to
   it; block + hidden keep the canvas's inline baseline gap from making the page scrollable. */
#game_app{
    width:100%;
    overflow:hidden;
}
#game_app canvas{
    display:block;
}
body{
    margin:0px;
    padding:0px;
}

/* Fallback for browsers core/Orientation.js can't lock to landscape (mainly iOS Safari,
   which doesn't implement the Screen Orientation lock API at all): body.gameplay-active
   is toggled by orientation.lockLandscape()/unlock() around GameScene. Gated to touch
   devices only — a desktop window that's merely taller than wide has nothing to rotate. */
.rotate-prompt{
    display:none;
    position:fixed;
    inset:0;
    z-index:1000;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    background:#1a1a1a;
    color:#fff;
    font-family:'PublicPixel', sans-serif;
    font-size:16px;
    line-height:1.6;
}

@media (orientation:portrait) and (pointer:coarse){
    body.gameplay-active .rotate-prompt{
        display:flex;
    }
}