/* Loading page of the browser build. The game itself draws everything inside the canvas. */
html, body { margin: 0; height: 100%; background: #000; color: #33ff66; overflow: hidden;
	overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	font-family: "Courier New", ui-monospace, Menlo, Consolas, monospace; }
#canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#cover { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
	justify-content: center; gap: 14px; background: #000; text-align: center; padding: 16px; box-sizing: border-box; }
#cover.gone { display: none; }
#logo { image-rendering: pixelated; image-rendering: crisp-edges; max-width: 80vw; height: auto; }
h1 { margin: 0; font-size: 22px; letter-spacing: 4px; color: #ffe633; text-shadow: 3px 3px 0 #b3007f; }
#bar { width: min(420px, 80vw); height: 16px; border: 2px solid #33ff66; padding: 2px; box-sizing: border-box; }
#bar-fill { width: 0; height: 100%; background: #33ff66; }
#status { margin: 0; min-height: 1.3em; letter-spacing: 1px; }
#cover.error #status { color: #ff3333; }
#cover.error #bar { display: none; }
#start { font: inherit; font-weight: bold; font-size: 20px; letter-spacing: 3px; padding: 10px 28px; cursor: pointer;
	color: #000; background: #ffe633; border: 3px solid #fff; box-shadow: 4px 4px 0 #b3007f; }
#start:hover, #start:focus { background: #fff; outline: none; }
#start[hidden] { display: none; }
#controls { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: #99a6cc; }
#learn { margin: 0; font-size: 13px; color: #19f2ff; }
#learn a { color: #ffe633; }