/*  VT323, the one face the interface is drawn in. Bundled rather than pulled from a CDN so
    the game keeps working offline and the first paint never waits on a third party.
    VT323 by Peter Hull, SIL Open Font License 1.1.

    Chosen over the obvious pixel faces because this interface is almost entirely numbers.
    Silkscreen and Pixelify Sans both collapse `S` into `5` and turn `%` into a blob at the
    sizes used here; VT323 keeps them apart from 13px up, and it is monospace, which the
    time readout needs — it reprints every frame and a proportional face makes it jitter.

    `font-display: block` on purpose: the boot in src/main.ts already waits for the face
    before Phaser measures a single Text object, so there is no window in which a swap could
    happen — and a swap is exactly what would leave the layout measured against the
    fallback metrics.  */
@font-face {
    font-family: 'VT323';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    /*  relative, not `/assets/...`: itch.io serves the build from a subdirectory
        (html-classic.itch.zone/html/<id>/), where a root-absolute URL resolves against
        the host and 404s — the face would silently fall back to the monospace stack.  */
    src: url('assets/fonts/vt323-400.woff2') format('woff2');
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: rgba(249, 230, 207, 0.87);
    /*  one step below the game's own background, so the letterboxing around the
        scaled canvas frames the board instead of competing with it  */
    background-color: #0b0e17;
    /*  the whole game is pointer-driven, so the browser's touch gestures are pure
        interference: no pinch-zoom, no double-tap zoom, no rubber-band scroll, no grey
        flash on tap, no text selection when a press turns into a drag  */
    touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

#app {
    width: 100%;
    /*  100vh on mobile means "viewport with the address bar hidden", so the bottom of
        the canvas sits under the browser chrome until the user scrolls. dvh tracks the
        chrome as it collapses; the vh line stays as the fallback for older engines.  */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*  The board is 16:9 and authored to be read whole. On a phone held upright FIT shrinks
    it to a strip a few centimetres tall, which is unplayable rather than merely small —
    so on touch devices in portrait the game is covered and the player is asked to turn.
    The canvas is never hidden: removing it would collapse the parent and make the
    ScaleManager recompute against a zero-height box.  */
#rotate {
    display: none;
}

@media (orientation: portrait) and (pointer: coarse) {
    #rotate {
        position: fixed;
        inset: 0;
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        background-color: #0b0e17;
        font-family: 'VT323', ui-monospace, monospace;
        font-size: clamp(1.25rem, 6vw, 2rem);
        line-height: 1.4;
        text-align: center;
    }

    #rotate svg {
        width: clamp(64px, 22vw, 112px);
        height: auto;
        opacity: 0.87;
        animation: rotate-hint 2.4s ease-in-out infinite;
    }
}

@keyframes rotate-hint {
    0%, 45% { transform: rotate(0deg); }
    70%, 100% { transform: rotate(-90deg); }
}

@media (prefers-reduced-motion: reduce) {
    #rotate svg {
        animation: none;
    }
}