/* T-Rex Runner - embed mode (contained in page, no fullscreen arcade) */

.dino-embed .interstitial-wrapper {
  position: relative;
  padding: 0;
  margin: 0;
}

.dino-embed .runner-container {
  position: relative;
  overflow: hidden;
}

.dino-embed .runner-canvas {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  image-rendering: pixelated;
  filter: invert(1);
}

.dino-embed .controller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.dino-embed #main-content,
.dino-embed #offline-resources {
  display: none;
}

/* Arcade mode rules below only apply when not using embed */

.offline .runner-container {
  overflow: hidden;
}

.offline .runner-canvas {
  overflow: hidden;
  z-index: 2;
}

.offline .controller {
  background: rgba(247, 247, 247, .1);
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 1;
}

#offline-resources {
  display: none;
}

.arcade-mode,
.arcade-mode .runner-container,
.arcade-mode .runner-canvas {
  image-rendering: pixelated;
  max-width: 100%;
  overflow: hidden;
}

.arcade-mode #buttons,
.arcade-mode #main-content {
  opacity: 0;
  overflow: hidden;
}

.arcade-mode .interstitial-wrapper {
  height: 100vh;
  max-width: 100%;
  overflow: hidden;
}

.arcade-mode .runner-container {
  left: 0;
  margin: auto;
  right: 0;
  transform-origin: top center;
  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1) 400ms;
  z-index: 2;
}