/* The page of the web client (C1-T09): the canvas fills the window; a thin bar while it loads. */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #181425;
}

#myrtille-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #181425;
  /* The client handles drag and pinch itself (pan and zoom of the town); the page is not scrolled under it. */
  touch-action: none;
}

#myrtille-loading {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 50%;
  height: 6px;
  border-radius: 3px;
  background: #3a4466;
}

#myrtille-loading.failed {
  height: auto;
  padding: 12px 16px;
  color: #ffe0e0;
  background: #7a1e1e;
  font: 16px sans-serif;
  cursor: pointer;
}

#myrtille-progress {
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: #8fd3ff;
}

/* One tip per loading screen (premier-jeu.md chapter 0). */
#myrtille-tip {
  position: absolute;
  left: 10%;
  right: 10%;
  top: calc(50% + 24px);
  margin: 0;
  text-align: center;
  color: #c9c2f7;
  font: 16px sans-serif;
}