/* ============================================================================
 * GameDash site stylesheet — the single render-blocking sheet linked from
 * `pages/_app.tsx`. Concatenation of the former `default.css`, `roboto.css`
 * and `fonts.css`, in that order.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Canvas (was default.css)
 * ------------------------------------------------------------------------- */

/*
 * The canvas. `html`'s background paints the whole viewport — past the bottom of a
 * `100%`-tall #__next, and either side of a page that overflows horizontally. #0A0E14 is
 * `nightOps.color.bg`; every shell in the app sits on it.
 *
 * `body` has to be transparent for that to show. MUI's `CssBaseline` is mounted in `_app`
 * under the light default theme and paints `body` its `#F4F6F8`, which is what made a dark
 * shell look like it stopped short of the window. `html body` outranks CssBaseline's plain
 * `body` on specificity, so this holds whichever way emotion orders its injection.
 */
html {

    background: #0A0E14;
    color-scheme: dark

}

html body {

    background: transparent

}

html, body, #__next {

    height: 100%

}

.grecaptcha-badge {

    visibility: hidden;

}

/* ---------------------------------------------------------------------------
 * Roboto (was roboto.css) — woff2 with a woff fallback. The eot/ttf/svg
 * sources and the `local('')` trick were dropped: nothing we support needs
 * them, and `local('')` only ever existed to stop browsers matching a
 * locally installed Roboto.
 * ------------------------------------------------------------------------- */

/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/roboto/roboto-v20-latin-300.woff2') format('woff2'),
         url('../fonts/roboto/roboto-v20-latin-300.woff') format('woff');
}
/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'),
         url('../fonts/roboto/roboto-v20-latin-regular.woff') format('woff');
}
/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/roboto/roboto-v20-latin-500.woff2') format('woff2'),
         url('../fonts/roboto/roboto-v20-latin-500.woff') format('woff');
}
/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto/roboto-v20-latin-700.woff2') format('woff2'),
         url('../fonts/roboto/roboto-v20-latin-700.woff') format('woff');
}

/* ---------------------------------------------------------------------------
 * GameDash "Night Ops" marketing fonts (was fonts.css) — self-hosted.
 * ------------------------------------------------------------------------- */

/* ---------- Sora (display + body) ---------- */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/sora/sora-latin-400-normal.woff2') format('woff2'),
         url('../fonts/sora/sora-latin-400-normal.woff') format('woff');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/sora/sora-latin-600-normal.woff2') format('woff2'),
         url('../fonts/sora/sora-latin-600-normal.woff') format('woff');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/sora/sora-latin-700-normal.woff2') format('woff2'),
         url('../fonts/sora/sora-latin-700-normal.woff') format('woff');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/sora/sora-latin-800-normal.woff2') format('woff2'),
         url('../fonts/sora/sora-latin-800-normal.woff') format('woff');
}

/* ---------- Material Icons Outlined (UI glyphs) ---------- */
/*
 * `swap` rather than `block`: the icon font is not on the critical path, and
 * blocking paints a row of invisible boxes while it downloads. The ligature
 * names fall back to readable text for the moment before it lands.
 */
@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/material-icons/material-icons-outlined.woff2') format('woff2'),
         url('../fonts/material-icons/material-icons-outlined.woff') format('woff');
}
.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ---------- FA Brands (social glyphs: Discord, etc.) ---------- */
@font-face {
    font-family: 'FA Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/fontawesome/fa-brands-400.woff2') format('woff2');
}