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

/* iOS Safari hardening: a fixed, non-scrollable body kills rubber-band drag
   (which visually shifts the canvas and offsets touches), touch-action stops
   the double-tap zoom fast taps trigger, and the callout/select rules stop the
   long-press magnifier + selection overlays during drags. All no-ops elsewhere. */
html, body {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
body {
    position: fixed;
    inset: 0;
}

#app {
    width: 100%;
    height: 100vh;   /* fallback for iOS < 15.4 (no dvh) */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Real mobile browsers: track the VISIBLE viewport (URL bar collapse). */
@supports (height: 100dvh) {
    #app {
        height: 100dvh;
    }
}

/* The container must have a definite, viewport-tracking size of its own.
   Without it, it just shrink-wraps the canvas, and the engine's RESIZE mode reads
   back its own stale size — live resizes (DevTools device switches, window
   drags) then fail to reach the game. */
#game-container {
    width: 100%;
    height: 100%;
}

#game-container canvas {
    display: block;
    /* The browser must never pan/zoom gestures that start on the game. */
    touch-action: none;
}

/* Brand fonts — El Messiri, same as every other Tahdiri game template.
   RELATIVE urls: the bundle is served from /templates/airplane/, so absolute
   /fonts/... paths 404 inside the platform. */
@font-face {
    font-family: 'elmessiri-regular';
    src: url(fonts/elmessiri-regular.woff2) format('woff2');
}

@font-face {
    font-family: 'elmessiri-bold';
    src: url(fonts/elmessiri-bold.woff2) format('woff2');
}

/* DPR-sharp oversampled canvas: the backing store is RES x the CSS size (see
   the getParentBounds patch in main.ts) - the canvas must stay pinned to 100%
   of the container, or it would display at its attribute size (RES x too big). */
#game-container canvas {
    width: 100% !important;
    height: 100% !important;
}