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

/* The canvas fills the browser viewport in CSS, and Unity keeps its render
   target equal to that box times config.devicePixelRatio on its own, every
   frame. That is the whole of the resize and fullscreen handling: there is no
   resize listener and nothing sizes the canvas by hand. */
#unity-container { position: fixed; left: 0; top: 0; width: 100%; height: 100% }
#unity-canvas { display: block; width: 100%; height: 100%; background: #0f1116 }

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-progress-bar-empty { width: 240px; height: 6px; background: #22252e; border-radius: 3px; overflow: hidden }
#unity-progress-bar-full { width: 0%; height: 6px; background: #3d70c7 }

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* Small and faint on purpose: it sits over a corner of the game, so it must
   not take a bar of viewport height for itself. */
#unity-fullscreen-button {
  position: absolute; right: 8px; top: 8px; width: 26px; height: 26px;
  padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); opacity: 0.45;
}
#unity-fullscreen-button:hover { opacity: 0.95 }
#unity-fullscreen-button::before {
  content: ""; display: block; margin: 7px; width: 12px; height: 12px;
  border: 2px solid #e6e8ee; border-radius: 2px;
}