html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
}
#gameCanvas {
    display: block;
    width: 100vw;
    height: 100vh;
    background: #111;
}

/* --------------------------------------------------------------
   Desktop‑only portrait layout – reduced width (max 600 px)
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   Desktop‑only “very narrow portrait” layout
   -------------------------------------------------------------- */
@media (orientation: landscape) and (hover: hover) and (pointer: fine) {
    html, body {
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        justify-content: center;   /* centre the canvas horizontally */
        align-items: flex-start;   /* keep it at the top of the page */
        background: #000;
        margin: 0;
        height: 100vh;
    }

    #gameCanvas {
        /* --------------------------------------------------
           Width is limited to a *small* fraction of the viewport.
           Height takes the full viewport height.
           Because we allow the aspect‑ratio to change, the game
           will simply be stretched vertically.
           -------------------------------------------------- */
        width: 50vw;               /* 30 % of the viewport width – feel free to tweak */
        max-width: 400px;          /* never wider than 400 px (you can lower this) */
        height: 100vh;             /* fill the whole height */
        /* Optional visual cue that the canvas is intentionally narrow */
        box-shadow: 0 0 0 2px #222;
    }
}