* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
    background: #0f0f1a;
    color: #eee;
    font-family: monospace;
    /* Prevent pinch-zoom/scroll from fighting the swipe gesture on mobile. */
    touch-action: none;
    overscroll-behavior: none;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

#game {
    width: 100%;
    max-width: 640px;
    line-height: 0;
}

/* Belt-and-suspenders alongside the html/body rule above: some mobile
   browsers don't reliably inherit touch-action onto a canvas painted by a
   game engine, and a stray text selection or scroll during rapid swiping
   would fight the gesture. */
#game canvas {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Belt-and-suspenders alongside Phaser's pixelArt:true render config,
       for the procedurally generated runner sprites to stay crisp/blocky
       when scaled up rather than blurring. */
    image-rendering: pixelated;
}