/* =========================================================
   ROOT
========================================================= */

:root {

    --red: #e50914;
    --red2: #b81d24;
    --red-glow: rgba(229,9,20,.45);

    --white: #ffffff;

    --muted: rgba(255,255,255,.65);

    --panel: rgba(14,14,16,.86);

    --border: rgba(255,255,255,.14);

    --progress-bg: rgba(255,255,255,.22);

    --ease: cubic-bezier(.22,.9,.32,1);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    font-family: var(--font);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    -webkit-tap-highlight-color:
        transparent;

}



html,
body {

    width: 100%;

    min-height: 100%;

    background: #000;

    color: #fff;

}


/*
 * FIX: pin html/body to the real
 * visible viewport with position:fixed
 * instead of a percentage height -
 * but ONLY while the player itself is
 * on screen (body.player-mode).
 *
 * Percentage height + a scrollable
 * document is what let mobile Chrome's
 * address bar collapse/expand (which
 * happens the instant a touch-drag on
 * the seek bar is detected as a page
 * gesture) resize the layout viewport
 * underneath the player. That resize
 * stretched #player-container past the
 * visible screen and shoved the bottom
 * control bar out of view, leaving the
 * ghosted strip near the top.
 *
 * position:fixed removes html/body from
 * the normal scrolling flow entirely, so
 * there is nothing left for the browser
 * chrome to resize around.
 *
 * Scoping this to .player-mode instead
 * of applying it unconditionally matters:
 * touch-action:none on an ancestor can't
 * be un-done by a descendant's own
 * touch-action (the browser intersects
 * them), so leaving this on globally
 * silently broke touch-scrolling on the
 * generator form the entire time it was
 * global, regardless of the form's own
 * overflow-y:auto.
 */

body.player-mode {

    position: fixed;

    inset: 0;

    height: 100%;

    overflow: hidden;

    overscroll-behavior: none;

    touch-action: none;

}