:root {
	color-scheme: dark;
}

html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	padding: none;
}

body {
	font-family: Helvetica;
	background-color: black;
	color: #F5F5F5;
}

#progress-ring {
	position: absolute;
	overflow: visible;
	width: 120px;
	height: 120px;
	transform: rotate(-90deg);
}

#progress-ring-circle {
	transition: stroke-dashoffset 0.2s linear;
	stroke-width: 6;
	stroke: white;
	fill: transparent;
	/* Note: 402.12 is circumference of circle of radius 64. */
	stroke-dashoffset: 402.12;
	stroke-dasharray: 402.12 402.12;
}

#angband-loadings {
	height: 120px;
	opacity: .6;
}

#progress-logo {
	width: 120px;
	height: 120px;
	position: absolute;
	background-image: url("logo_circle.png");
	background-repeat: no-repeat;
	background-size: contain;
}

#angband-progress-overlay {
	position: fixed;
	left: 50px;
	top: 10px;
	z-index: 100;
}

#angband-status-text {
	margin-top: 20px;
	font-weight: bold;
	color: rgb(120, 120, 120);
	min-height: 1.25em;
	line-height: 1.25;
	margin-bottom: 25px;
}

#top-container {
	display: flex;
	height: 100%;
}

.controls-toggle {
	z-index: 2;
	position: fixed;
	top: 0px;
	right: 15px;
	font-size: 18pt;
	background-color: #111;
	color: #AAA;
	border: none;
	text-align: center;
	border-bottom-right-radius: 15%;
	border-bottom-left-radius: 15%;
}

.controls-toggle:hover {
	background-color: #555;
	color: white;
}

#controls {
	z-index: 3;
	position: relative;
	flex-grow: 0;
	top: 0px;
	right: 0px;
	background-color: #111;
	padding: 0px 50px 0px 20px;
	z-index: 100;
	min-height: 100%;
	line-height: 1.7em;
	overflow: visible;
}

#controls input {
	vertical-align: middle;
}

#controls input[type=checkbox] {
	transform: scale(1.5);
	margin-right: 5px;
	position: relative;
	bottom: 1px;
}

#controls label {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 10pt;
}

#controls .ui-button {
	font-size: 11pt;
	padding: 6px;
	white-space: nowrap;
}

#hidden-download-link {
	display: none;
}

#controls .spacer {
	margin: 0;
	border: none;
	min-height: 1.5em;
}

#controls .minispacer {
	margin: 0;
	border: none;
	min-height: .75em;
}

#controls hr.separator {
	border: none;
	border-top: 1.5px dotted #555;
	margin-top: 2em;
	margin-bottom: 2em;
}

#controls .footer {
	white-space: nowrap;
	position: absolute;
	bottom: 10px;
	left: 10px;
}

.shoutout {
	font-size: 11pt;
	font-family: 'Menlo', 'Monaco', 'Courier', monospace;
}

.shoutout a:link, .shoutout a:visited {
	color: #9cc2ff;
}

.shoutout .email, .shoutout .email:link, .shoutout .email:visited {
	font-size: 24pt;
	color: #CCC;
	text-decoration: none;
}

#print-output {
	display: none;
	width: 100%;
	height: 200px;
	margin: 0 auto;
	margin-top: 10px;
	border-left: 0px;
	border-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	background-color: black;
	color: white;
	border: none;
	font-family: 'Lucida Console', Monaco, monospace;
	outline: none;
}

.angband-grid-wrap {
	flex-grow: 1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.angband-grid {
	font-family: 'Menlo', 'Monaco', 'Courier', monospace;
	table-layout: fixed;
	width: 100%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	/* border: 1px solid #333; */
	white-space: nowrap;
	/* suppress focus ring */
	outline: none;
	background-repeat: no-repeat;
	border-spacing: 0;
}

.angband-grid tr {}

.angband-grid td {
	background-color: black;
}

.angband-grid tr, .angband-grid td {
	border: none;
	padding: 0;
	border-spacing: 0;
}

.angband-cursor {
	-webkit-box-shadow: inset 0px 0px 0px 1.5px rgba(255, 229, 97, 0.75);
	box-shadow: inset 0px 0px 0px 1.5px rgba(255, 229, 97, 0.75);
}

/* Elements inside our angband grid. */

.angband-grid td div {
	width: 100%;
	min-height: 100%;
	color: white;
	text-align: left;
	font-size: 18pt;
	text-align: center;
	height: 1.25em;
	border: none;
	padding: 0;
	border-spacing: 0;
	image-rendering: crisp-edges;
}

/* CSS supporting the built-in Angband image sprite sheets. */

.angband-sprites-1 {
	background-image: url("graf/8x8.png");
	background-size: 8300% 9900%;
}

.angband-sprites-2 {
	background-image: url("graf/16x16.png");
	background-size: 3200% 6000%;
}

.angband-sprites-3 {
	background-image: url("graf/32x32.png");
	background-size: 12800% 3000%;
}

.angband-sprites-4 {
	background-image: url("graf/8x16.png");
	background-size: 3200% 6000%;
}

.angband-sprites-5 {
	background-image: url("graf/64x64.png");
	background-size: 12800% 3200%;
}