/*
 * The page the game is drawn into — everything outside the canvas and outside the panel.
 *
 * `manipulation` drops the gestures a game has no use for, double-tap to zoom above all, whose
 * 300ms wait for a second tap would otherwise sit between every tap and the control it lands on.
 * This, not the viewport meta, is what turns it off: iOS Safari has ignored `user-scalable=no`
 * since iOS 10.
 */
html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    overflow: hidden;
}

/*
 * **And the document itself does not scroll.**
 *
 * There is nothing here to scroll to: the game is one canvas cut to the window with a fixed sheet
 * of controls over it. What a scrollable document would give a phone instead is a game that can be
 * *dragged* — a flick that misses a control carries the whole canvas up under the panel, and on iOS
 * it takes the browser's toolbars with it, resizing the page halfway through the gesture. `dvh` is
 * what keeps the body from standing a toolbar's height taller than the window.
 */
body {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #1d2126;
    -webkit-text-size-adjust: 100%;
}

/*
 * Nothing here is text to be selected and nothing here is an object to be dragged. Not tidiness: a
 * press that begins on the canvas or on a control and then travels — a drag across the board, a
 * scrub of a volume bar — is a *selection* gesture as far as the browser is concerned, and it makes
 * one, during the manipulation it interrupts. iOS adds its Copy / Look Up callout on a long hold.
 *
 * On `*` rather than on the root alone: `user-select` inherits, but the UA sheet *declares* its own
 * value on a few elements — images, form controls — and a declared value beats an inherited one.
 * The bet field is the one exception, three rules below: a number the player is editing is text.
 */
* {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

.mpl-bet__input {
    user-select: text;
    -webkit-user-select: text;
}

/* The backstop, for a selection made without a gesture: ⌘A, or a script that sets a range. */
::selection {
    background: transparent;
}

#pixi-container {
    position: absolute;
    inset: 0;
}

#pixi-container canvas {
    display: block;
}

/*
 * The loading bar, which belongs to the page and not to the bundle — it is on screen while the
 * module that would otherwise own it is still being fetched. See `window.magicLoader` in
 * `index.html` and the `Window` declaration in `MagicPlinko.ts`.
 */
#loading {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d2126;
    transition: opacity 320ms ease-out;
}

#loading[hidden] {
    display: none;
}

#loading.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.loading__bar {
    width: min(240px, 60vw);
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.loading__fill {
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: #00ee5c;
    transition: width 200ms ease-out;
}