@charset "utf-8";

:root {
	
	--buttonFontSize: 16px;
	--buttonFontColor: #fff;
	--imageBackgroundColor: #ccc;
	--imageFontSize: 12px;
	--imageFontSizeYear: 16px;
	--imageTextColor: #000;
	--imageTextBackground: rgba(255, 255, 255, 0.7);
	--imageTextShadow: -1px 0 2px #222, 1px 0 2px #222, 1px 0 2px #222, -1px 0 2px #222;
	--imageShadow: 1px 1px 4px #888;
	--imageShadowOver: 1px 1px 10px #444;
	--imageShadowOndrag: 1px 1px 20px #00a;
	--imageScaleOver: scale(1.2);
	--timerFontColor: #000;

	--endGameTitleFontSize: 18px;
	--gameTitleFontSize: 20px;
	--gameTitleFontColor: #000;
	--gameCaptionFontSize: 14px;
	--gameCaptionFontSizeSmall: 12px;
	--gameCaptionFontColor: #fff;
	--gameCaptionTextShadow: -1px 0 2px #222, 1px 0 2px #222, 1px 0 2px #222, -1px 0 2px #222;

	--rulesHeaderFontColor: #000;
	--rulesHeaderFontSize: 18px;
	--rulesContentFontColor: #000;
	--rulesContentFontSize: 16px;
}




.gameContainer {
	width: 100vw; height: 100vh; margin: auto; padding: 0; overflow: hidden;
	-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;
}
#game { width: inherit; height: inherit; overflow: hidden; }
#game > .images { width: inherit; height: inherit; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
#game > .images > div { padding: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 40px 1fr 1fr 1fr 1fr; grid-gap: 10px; opacity: 1; }
#game > .images > div.hide { opacity: 0; }
#game > .images > div > div {
	display: flex; align-items: center; justify-content: center; text-align: center; background: #fff;
	border: 1px var(--color-primary) solid; border-radius: 5px; padding: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	transform: scale(1, 1); transition: transform 0.5s, opacity 0.5s, box-shadow 0.5s, border 0.5s, background 0.5s;
}
#game > .images > div > div img { max-width: 100%; max-height: 100%; }
#game > .images > div > div div.name { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.4); padding: 5px 10px; font-size: var(--gameCaptionFontSize); color: var(--gameCaptionFontColor); text-shadow: var(--gameCaptionTextShadow); line-height: 1.5em; }
#game > .images > div > div:hover { transform: scale(1.1, 1.1); }
#game > .images > div > div.selected { opacity: 0.8; transform: scale(1.1, 1.1); background-color: var(--color-primary); }
#game > .images > div > div.ondrag { opacity: 0.2; }
#game > .images > div > div.dragover { transform: scale(1.1, 1.1); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); }
#game > .images > div > div.wrong { background: #f44; transform: scale(1, 1); transition: background 0.1s; }
#game > .images > div > div.correct { background: #4f4; transform: scale(1, 1); transition: background 0.1s; }
#game > .images > div > div.correctHide img { opacity: 0; }
#game > .images > div > div.correctHide:hover, #game > .images > div > div.correctHide.ondrag, #game > .images > div > div.correctHide.dragover { transform: scale(1, 1); opacity: 1; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); }
#game > .images > div > div.buttons { grid-column: span 3; border: none; box-shadow: none; align-items: flex-start; }
#game > .images > div > div.buttons:hover { transform: scale(1, 1); }
#game > .images > div > div.title { font-size: var(--gameTitleFontSize); color: var(--gameTitleFontColor); line-height: 1.5em; }
#game > .images > div > div.buttons > div {
	width: auto; display: inline-block; padding: 10px 20px; margin: 5px; cursor: pointer; border-radius: 5px;
	color: var(--buttonFontColor); font-size: var(--buttonFontSize); background: var(--color-primary);
	transition: color 0.5s, background 0.5s;
}
#game > .images > div > div.buttons > div:hover { background: var(--color-primary-over); }

.gameSelected {
	position: absolute; background: #000; display: flex; align-items: center; justify-content: center; text-align: center; background: #fff;
	border: 1px var(--color-primary) solid; border-radius: 5px; padding: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.gameSelected img { max-width: 100%; max-height: 100%; height: auto; }

#game > .countdown {
	position: fixed; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.5);
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-size: 100px; opacity: 0; transform: scale(2, 2); transition: opacity 0.1s, transform 0.1s;
}
#game > .countdown.enable { z-index: 9; }
#game > .countdown.active { opacity: 1; transform: scale(1, 1); transition: opacity 0.3s, transform 0.3s; }

@media only screen and (max-width:560px) {
	#game > .images > div > div div.name { font-size: var(--gameCaptionFontSizeSmall); line-height: 1.2em; }
}


#gameHeader {
	position: fixed; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.5);
	display: flex; align-items: center; justify-content: center; text-align: center;
}
#gameHeader > div { display: block; width: 100%; padding: 20px 0; background: rgba(255, 255, 255, 0.8); }
#gameHeader .content { max-width: 800px; margin: auto; padding: 0 20px 30px 20px; text-align: left; }
#gameHeader .title { font-size: 20px; line-height: 1.5em; text-align: center; padding: 0 0 20px 0;  }
#gameHeader .buttons { display: flex; align-items: center; justify-content: center; text-align: center; }
#gameHeader .buttons > div {
	width: auto; display: inline-block; padding: 10px 20px; margin: 5px; cursor: pointer; border-radius: 5px;
	color: var(--buttonFontColor); font-size: var(--buttonFontSize); background: var(--color-primary);
	transition: color 0.5s, background 0.5s;
}
#gameHeader .buttons > div:hover { background: var(--color-primary-over); }
#gameHeader .buttons > div.disabled { color: var(--buttonFontColor); background: var(--buttonBackgroundColorDisabled); }
#gameHeader .buttons > div.disabled:hover { color: var(--buttonFontColor); background: var(--buttonBackgroundColorDisabled); }


#gameComplete {
	position: fixed; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.5);
	display: none; align-items: center; justify-content: center; text-align: center;
}
#gameComplete.active { display: flex; }
#gameComplete > div { display: block; width: 100%; padding: 20px 0; background: rgba(255, 255, 255, 0.8); }
#gameComplete .content { max-width: 800px; margin: auto; padding: 0 20px 30px 20px; text-align: left; }
#gameComplete .title { font-size: 20px; line-height: 1.5em; text-align: center; padding: 0 0 20px 0;  }
#gameComplete .buttons { display: flex; align-items: center; justify-content: center; text-align: center; }
#gameComplete .buttons > div {
	width: auto; display: inline-block; padding: 10px 20px; margin: 5px; cursor: pointer; border-radius: 5px;
	color: var(--buttonFontColor); font-size: var(--buttonFontSize); background: var(--color-primary);
	transition: color 0.5s, background 0.5s;
}
#gameComplete .buttons > div:hover { background: var(--color-primary-over); }
#gameComplete .buttons > div.disabled { color: var(--buttonFontColor); background: var(--buttonBackgroundColorDisabled); }
#gameComplete .buttons > div.disabled:hover { color: var(--buttonFontColor); background: var(--buttonBackgroundColorDisabled); }
#gameComplete > div .complete { text-align: center; font-size: 16px; line-height: 1.5em; }
#gameComplete > div .complete .completeTime { font-weight: bold; }

#gameTimer {
	position: fixed; z-index: 2; top: 0; right: 0; padding: 10px 10px; width: 100px; display: none; background: rgba(236, 160, 58, 0.8);
	font-size: 18px; line-height: 1.5em; font-weight: bold; text-align: center;
}
#gameTimer.active { display: block; }


.introductionTitle { display: block; padding: 0 0 30px 0; font-size: 20px; line-height: 2em; }
.introduction { display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; font-size: 16px; line-height: 1.5em; }
.buttonInactive { background: var(--color-secondary) !important; }
.buttonInactive:hover, .buttonInactive.active { background: var(--color-secondary-over) !important; }


.rulesTitle { display: block; padding: 0 0 30px 0; font-size: 20px; line-height: 1.5em; text-align: center; }
.rulesSubtitle { font-size: 16px; font-weight: bold; line-height: 1.5em; }
.rules { font-size: 16px; line-height: 1.5em; padding-bottom: 10px; }
.rules > li { margin: 0 0 10px 0; }

