html, body {
    margin: 0;

    /* Dynamic viewport height, not 100%: on a phone the plain unit is the screen minus
       whatever browser furniture happens to be showing, so the board was sized for a
       window that grew the moment the URL bar slid away. */
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background: #2b2b33;
    color: #e8e8ee;
    font-family: system-ui, sans-serif;
}

#board {
    /* Fills the window, inside the phone's safe areas. Inset rather than padded: the
       canvas has to start exactly where the element does, because pointer coordinates
       arrive relative to the element and the game reads them as board pixels. */
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    right: env(safe-area-inset-right, 0px);
    bottom: env(safe-area-inset-bottom, 0px);
    left: env(safe-area-inset-left, 0px);
    outline: none;
    -webkit-tap-highlight-color: transparent;

    /* none, not manipulation: the browser must not wait to see whether a press becomes a
       pan or a double-tap zoom, because that wait is exactly the window the long press
       lives in. A press must not select the page or raise iOS's callout either. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#board canvas {
    display: block;
}