*, *:before, *:after {
  box-sizing: border-box;
}


html {
	background-color: #000;
	color: #FFF;
	font-family: sans-serif;
}
body {
	width: 800px;
	margin: auto;
}

h1 {
	font-size: 1.5rem;
	color: #9cf;
}

.nb {
	font-size: 0.9rem;
	color: #999;
	font-style: italic;
}

#BACKING_CANVAS {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 500px;
}

#GAME {
	position: relative;
	min-width: 800px;
	min-height: 600px;
}

#GAME-UI {
	position: absolute;
	display: grid;
	grid-template-columns: 460px 1fr;
	grid-template-rows: 400px 1fr;
	top: 0px;
	left: 0px;
	height: 100%;
}

#GAME-PROMPT {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
	justify-self: stretch;
	align-self: stretch;
	color: #eee;
	padding: 1em;
	z-index: 1;
}

#GAME-MAP {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	justify-self: stretch;
	align-self: center;
	color: #eee;
	text-align: center;
	z-index: 1;
}

#GAME-CARDS {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	justify-self: stretch;
	align-self: stretch;
	color: #eee;
	text-align: center;
	z-index: 1;
}

#COMBAT-SCREEN-OVERLAY {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	background-color: rgba(0,32,64,0.9);
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr 4fr 1fr 2fr 1fr;
	grid-template-rows: 1fr 4fr 1fr;
}

#COMBAT-MAIN-BOX {
	grid-column-start: 4;
	grid-column-end: 5;
	grid-row-start: 2;
	grid-row-end: 3;
	background-color: #000;
	border: 2px solid #999;
	padding: 1em;
	color: #fff;
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
}

#COMBAT-MAIN-BOX > div {
	align-self: center;
}

#COMBAT-MAIN-BOX > div:nth-child(1) {
	font-weight: bold;
	text-align: center;
	font-size: 1.4em;
}

#COMBAT-PLAYER-BOX {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	background-color: #246;
	border: 2px solid #999;
	padding: 1em;
	color: #fff;
}

#COMBAT-MONSTER-BOX {
	grid-column-start: 6;
	grid-column-end: 7;
	grid-row-start: 2;
	grid-row-end: 3;
	background-color: #246;
	border: 2px solid #999;
	zpadding: 1em;
	color: #fff;
}

#COMBAT-PLAYER-BOX,
#COMBAT-MONSTER-BOX {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr;
	background-color: #000;
	padding: 1em;
}

#COMBAT-PLAYER-BOX > div,
#COMBAT-MONSTER-BOX > div {
	align-self: center;
	text-align: center;
	justify-self: stretch;
}

#COMBAT-PLAYER-BOX > div:nth-child(1),
#COMBAT-MONSTER-BOX > div:nth-child(1)
{
	font-size: 1.4em;
	font-weight: bold;
	background-color: #000;
}

#COMBAT-PLAYER-BOX > div:nth-child(2),
#COMBAT-MONSTER-BOX > div:nth-child(2)
{
	font-size: 3em;
	font-weight: bold;
}

/*
	SCREEN OVERLAYS
*/

.help {
	z-index: 100 !important;
}

.screen-overlay {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
	background-color: rgba(0,0,0,0.8);
	z-index: 2;
	display: grid;
	grid-template-rows: 1fr 2fr 1fr;
	grid-template-columns: 1fr 10fr 1fr;
}

.dialog {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	justify-self: stretch;
	align-self: start;
	border: 3px solid #666;
	background-color: #222;
	color: #eee;
	padding: 0em;
	z-index: 10;
}

.dialog .body {
	padding: 1em;
	background-color: #333;
	color: #FFF;
	margin-top: 0em;
}

.dialog options {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr;
}

.dialog .option {
	padding: 0.1em 1em;
}

.dialog-item {
	display: grid;
	grid-template-columns: 1fr 9fr;
	column-gap: 1em;
	align-items: center;
}



.pointer {
	text-align: center;
	font-size: 2em;
	opacity: 0;
}

.highlighted .pointer {
	display: block;
	color: yellow;
	opacity: 1;
}

.speak-only {
	display: none;
}

.screen-reader-only {
	position: absolute;
	height: 1px;
	width: 1px;
	clip: rect(1px 1px 1px 1px); // IE 6 and 7
	clip: rect(1px,1px,1px,1px);
	clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
	-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
	overflow: hidden !important;
}
.zscreen-reader-only {
	border: 1px solid #012;
	background-color: #012;
	color: #369;
	padding: 1em;
}

/*	NOTICE CONTROLLER	*/

#GAME-PROMPT .NOTICE {
	display: grid;
	grid-template-columns: 2em 1fr;
}

.NOTICE .active {
	align-self: center;
}

.NOTICE .inactive {
	color: #000;
}

.NOTICE .activeprompt,
.NOTICE .inactiveprompt,
.NOTICE .activeoption,
.NOTICE .inactiveoption {
	padding: 0.5em;
	border-radius: 0.5em;
}

.activeprompt {
	background-color: #123;
}

.activeoption,
.inactiveoption {
	margin: 1em 0em;
}