body { padding: 0; margin: 0 }

#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; left: 0; top: 0; width: 100%; height: 100% }
/* height:100% on a fixed element resolves against a viewport that on a phone includes the space
   the browser's own toolbars are drawn over, so the bottom of the game ends up underneath them.
   100dvh is the height that is actually visible, and unlike a JS-measured height it does not
   shrink when the on-screen keyboard opens. Declared second so a browser without dvh keeps 100%. */
#unity-container.unity-mobile { height: 100dvh }

#unity-canvas { background: #1F1F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
/* The game reads its own drags and pinches. Without this the browser claims them first: a drag
   scrolls or rubber-bands the page, which moves the canvas out from under the finger that is
   already halfway through a gesture. */
.unity-mobile #unity-canvas { touch-action: none }
html.unity-mobile-page, html.unity-mobile-page body {
  overflow: hidden; overscroll-behavior: none; width: 100%; height: 100%;
}

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* Top left, because that is the one corner the game draws nothing in: End Turn is top right, the
   unit bar is along the top centre, and the action points sit along the bottom. 44px is the
   smallest reliable tap target, and no larger - every pixel of it is a pixel of board the player
   cannot touch. */
#mi-fullscreen {
  position: fixed; left: 6px; top: 6px; width: 44px; height: 44px; z-index: 5;
  border: 0; border-radius: 8px; padding: 0;
  background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 22px; line-height: 44px;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#mi-fullscreen[hidden] { display: none }

#mi-diag {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: rgba(0, 0, 0, 0.8); color: #0f0; pointer-events: none;
  font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace;
  padding: 6px 8px; white-space: pre-wrap;
}