/* The Gratcast overlay page's stylesheet: fonts and a transparent canvas.
   Every graphic is drawn by the React overlay (`src/gratcast-overlay`).

   Both families are SELF-HOSTED (SIL Open Font License). A browser source must
   not wait on a font CDN on air, and a missing webfont fails silently to a
   fallback that looks fine on the machine and off-brand on the stream. Names
   match GratcastFonts in src/gratcast-overlay/theme.ts. Not subsetted: episode
   titles are typed by the host, so an unexpected glyph must not render as tofu. */
@font-face {
  font-family: 'Bebas Neue';
  src: url('./fonts/BebasNeue.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Anek Latin';
  src: url('./fonts/AnekLatin.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: block;
}

html, body {
  margin: 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

#overlay-root {
  position: fixed;
  inset: 0;
}

/* React Native Web mounts its own root div inside; it must take the whole
   frame, because the graphics are positioned against its edges (the lower
   third sits at the BOTTOM of the frame, not of a zero-height box). */
#overlay-root {
  display: flex;
}

#overlay-root > div {
  flex: 1;
}