/*
	General styles

	some _practically_ general ones will be in the
	Board styling section

*/

a:link		{ color:#00aaaa; }
a:visited	{ color:#5555ff; }
a:hover		{ color:#ffff55; }
a:active	{ color:#ff5555; }

body {
	background-color:black;
	color:white;
	font-family:monospace;
	margin:0;
	padding:1em;
}

img {
	height:100%;	/*	resize to fill their container	*/
	width:100%;		/*	resize to fill their container	*/
	vertical-align:bottom;
}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
	Board styling

	See readme.txt for a layout diagram
	with IDs and classes labeled
*/

main#board {
	display:grid;
	grid-gap:2px;
	grid-template-columns:32em 31.4em;
	grid-template-rows:auto;
	grid-template-areas:
		"perp 	view"
		"msg	view";
}
main#board section.window {
	background:black;
	border:2px ridge #ffff55;
	padding:2px;
}

main#board h1,
main#board h2 {
	border:none;
	display:inline-block;
	font-size:1em;
	margin:0;
	margin-bottom:2px;
	padding:0 1em;
	text-transform:uppercase;
}
main#board h1 {
	text-align:center;
}
main#board h2 {}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
*/

main#board section#view {
	grid-area:view;
	text-align:center;
}
main#board section#view section#map {
	display:grid;
	grid-gap:2px;
	grid-template-columns:6em 6em 6em 6em 6em;
	grid-template-rows:6em 6em 6em 6em 6em;
}
main#board section#view section#map section.cell {
	background-size:6em 6em;
	border:none;
	height:6em;
	padding:0;
	width:6em;
}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
*/

main#board section#perception {
	grid-area:perp;
	background-image:url("images/bg_yellowonred.gif");
}
main#board section#perception section#senses {
	display:grid;
	grid-gap:2px;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	grid-template-rows:1fr 1fr;
}

main#board section#perception section#senses section.icon {
	border:none;
}

main#board section#perception section#senses section.description {
	background:#ffff55;
	border:1px outset #ffff55;
	color:black;
}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
*/

main#board section#message {
	grid-area:msg;
	background-image:url("images/bg_stone.gif");
	color:white;
}

main#board section#message img {
	height:16px;
	width:16px;
}

main#board iframe {
	/*	Also see 'mesages.css'	*/
	background:#ffff55;
	border:1px outset #ffff55;
	height:15em;
	margin:3px;
	padding:0;
	width:31em;
}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
	Title screen styling
*/

main#titlescreen {
	margin:0;
	padding:0;
	width:34em;
}

main#titlescreen h1,
main#titlescreen h2 {
	font-size:1em;
	margin:0 1em;
	text-align:center;
	text-transform:uppercase;
}
main#titlescreen h1 {
	font-style:italic;
}
main#titlescreen h2 {}
main#titlescreen h3 {
	margin:0;
}

main#titlescreen header,
main#titlescreen hr,
main#titlescreen section {
	border:2px ridge #ffff55;
	margin:2px 0;
	padding:0;
}

main#titlescreen hr {
	height:2px;
}

main#titlescreen section#credit {}

main#titlescreen section#notes ul {
	margin:0;
}

main#titlescreen section#splash {
	border:none;
	height:auto;
	padding:1em;
	text-align:center;
}
main#titlescreen section#splash img {
	height:10em;
}

/*	Some generic effects classes

	Use these to easily rotate, flip, etc., things in cells
*/

/*	Rotate elements. Mostly for 'tiles'?	*/
.rotate_90	{ transform:rotate(90deg); }
.rotate_180	{ transform:rotate(180deg); }
.rotate_270	{ transform:rotate(270deg); }

/*	Flip image	*/
.flip_h	{ transform:scaleX(-1); }
.flip_v	{ transform:scaleY(-1); }

/*	Round images	*/
.shape_circle { border-radius:50%; }

/*	Align elements.	*/
.align_top		{ text-align:top; }
.align_right	{ text-align:right; }
.align_bottom	{ text-align:bottom; }
.align_left		{ text-align:left; }
.align_hcenter	{ text-align:center; }
/*.align_vcenter	{ display:inline-block; vertical-align:middle; }	FIXME	*/

/*	Keep image's original size	*/
.no_scale {
	height:auto;
	width:auto;
}

/*	Undoes indentation on board cell	*/
.empty {
	background-image:none!important;
	border:none!important;
}

.suspicious {
	cursor:help;
}

/*	Animation

	Use these classes to apply simple animated effects.

	Only applied if user has _not_ set their browser or
	operating system to reduce animation / motion
	See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
*/

@media (prefers-reduced-motion: no-preference) {

	/*	Blink on/off	*/
	.blink {
		animation-name:blink;
		animation-duration:0.6s;
		animation-timing-function:step-start;
		animation-iteration-count:infinite;
	}
	@keyframes blink {
		50% { opacity:0; }
	}

	/*	Colour cycle
		Might add different flavours later?
	*/
	.cycle{
		animation-name:cycle;
		animation-duration:0.2s;
		animation-timing-function:linear;
		animation-iteration-count:infinite;
	}
	@keyframes cycle {
		0%		{ color:#ff55ff; }
		20%		{ color:#ffffff; }
		40%		{ color:#55ff55; }
		60%		{ color:#ffff55; }
		80%		{ color:#0000aa; }
		100%	{ color:#aa0000; }
	}

	/*	Grow	*/
	.grow {
		animation-name:grow;
		animation-duration:0.8s;
		animation-iteration-count:infinite;
	}
	@keyframes grow {
		0%		{ transform:scale(0.8,0.8); }
		100%	{ transform:scale(1.5,1.5); }
	}

	/*	Flip
		Simple animation by flipping image	*/
	.flipanim_h {
		transform:scaleX(+1);
		animation-name:flipanim_h;
		animation-duration:0.8s;
		animation-timing-function:step-start;
		animation-iteration-count:infinite;
	}
	@keyframes flipanim_h {
		50% { transform:scaleX(-1); }
	}

	/*	Rotate	*/
	.rotateanim_cw {
		animation-name:rotateanim_cw;
		animation-duration:2s;
		animation-timing-function:step-start;
		animation-iteration-count:infinite;
	}
	@keyframes rotateanim_cw {
		25%		{ transform:rotate(90deg); }
		50%		{ transform:rotate(180deg); }
		75%		{ transform:rotate(270deg); }
	}
		.rotateanim_ccw {
		animation-name:rotateanim_ccw;
		animation-duration:2s;
		animation-timing-function:step-start;
		animation-iteration-count:infinite;
	}
	@keyframes rotateanim_ccw {
		25%		{ transform:rotate(-90deg); }
		50%		{ transform:rotate(-180deg); }
		75%		{ transform:rotate(-270deg); }
	}
}
