body {
    background-image: url('images/bg-gray.png');
    background-size: auto;
    background-attachment: fixed;
    background-repeat: repeat;
    background-position: left top;
	cursor: url('images/cursor.gif'), default;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body:after {
	position: absolute;
	overflow: hidden;
	left: -50000px;
	content: url('images/btn-b.png')
			url('images/yes-b.png')
			url('images/no-b.png')
			url('images/reset-hl.png')
			url('images/exit-hl.png')
			url('images/loadgame-hl.jpg')
			url('images/highscore-hl.jpg')
			url('images/credits-hl.jpg')
			url('images/quit-hl.jpg');
}
a {
	cursor: url('images/cursor.gif'), default;
}
::selection {
	background: transparent;
}
p {
	font-family: 'Pompiere', sans-serif;
	font-size: 28px;
	color: #ffe9ab;
	text-shadow: 1px 1px 1px #000, 1px 1px 2px #000, 1px 1px 3px #000;
}
.title {
	font-size: 32px;
	font-family: 'Cinzel Decorative', cursive;
	color: #ffe9ab;
	font-weight: 700;
	text-shadow: 1px 1px 1px #000, 2px 2px 2px #000, 3px 3px 3px #000;
}
.box {
	border: 26px solid transparent;
	border-image: url('images/border.png') 50 round;
    background-image: url('images/bg.png');
	display: inline-block;
	margin: 8px;
	max-width: calc(100% - 66px);
}
.shadow {
	box-shadow: 0px 4px 8px #000;
}
.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.hero-box {
	border: 26px solid transparent;
	border-image: url('images/border.png') 50 round;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
	width: 14px;
	height: 22px;
	margin: 8px;
	box-shadow: 0px 4px 8px #000;
	cursor: url('images/cursor.gif'), default;
}
button.hero-box {
	padding: 11px 7px;	
}
.hero-box:active {
	box-shadow: 0px 2px 4px #000;
}
.btn {
	border: none;
	outline: none;
	appearance: none;
	cursor: url('images/cursor.gif'), default;
	background-image: url('images/btn-a.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	height: 40px;
	padding: 4px 16px 4px 16px;
	margin: 8px 8px 8px 8px;
	line-height: 32px;
	color: #ffe9ab;
	font-family: 'Cinzel Decorative', cursive;
	font-weight: 700;
	font-size: 14px;
	text-shadow: 1px 1px 1px #000, 2px 2px 2px #000;
	text-decoration: none;
	display: inline-block;
	box-sizing: border-box;
}
.btn:active {
	background-image: url('images/btn-b.png');
	line-height: 36px;
	color: #e5d19a;
}
.btn-yes {
	border: none;
	outline: none;
	appearance: none;
	background-image: url('images/yes-a.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	height: 32px;
	width: 66px;
	margin: 8px;
}
.btn-yes:active {
	background-image: url('images/yes-b.png');
}
.btn-no {
	border: none;
	outline: none;
	appearance: none;
	background-image: url('images/no-a.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	height: 32px;
	width: 66px;
	margin: 8px;
}
.btn-no:active {
	background-image: url('images/no-b.png');
}
.modal {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	z-index: 10;
	overflow: hidden;
	outline: 0;
}
.modal-dialog {
    position: relative;
    width: auto;
	margin: 32px auto;
}
.input {
    background: rgba(0, 0, 0, 0.5);
    font-family: 'Arial', sans-serif;
	font-weight: bold;
    font-size: 14px;
    color: #ffe9ab;
    text-align: center;
    padding: 7px;
    border-radius: 0;
    border: 1px solid #a88d44;
    outline: none;
}
.input::selection {
	color: #000;
	background: #ffe9ab;
}
.border-gold {
	border: 4px solid transparent;
	border-image: url('images/border-gold.png') 4 round;	
}
/**************/
/* HIGHSCORES */
/**************/
.highscores {
	width: 806px;
	height: 605px;
	position: fixed; 
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    background-image: url('images/bg-blue.png');
    background-repeat: repeat;
    background-size: auto;
    background-attachment: fixed;
    background-position: left top;
	box-sizing: border-box;
}
.highscores .right-bar {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 77px;
	background-image: url('images/right-bar.png');
}
.highscores .right-bar a {
	display: block;
	width: 44px;
	height: 202px;
	position: absolute;
	right: 31px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.highscores .right-bar a.btn-reset {
	background-image: url('images/reset.png');
	top: 112px;
}
.highscores .right-bar a.btn-reset:hover,
.highscores .right-bar a.btn-reset:active {
	background-image: url('images/reset-hl.png');
}
.highscores .right-bar a.btn-exit {
	background-image: url('images/exit.png');
	top: 344px;
}
.highscores .right-bar a.btn-exit:hover,
.highscores .right-bar a.btn-exit:active {
	background-image: url('images/exit-hl.png');
}
.highscores table {
	color: #f9f2da;
	font-family: 'Arial', sans-serif;
	text-shadow: 1px 1px 0px #000;
	font-weight: bold;
    font-size: 14px;
    text-align: center;
	margin-right: 82px;
	margin-left: 5px;
	width: calc(100% - 87px);
}
.highscores table tr {
	position : relative;
}
.highscores table tr th,
.highscores table tr td {
	position: relative;
	z-index: 2;
	padding: 7px 11px 11px 11px;
}
.highscores table tr td.creature {
	padding: 0px 5px 5px 20px;
}
.creature img {
	height: 48px;
	width: auto;
}
.highscores table td div.border {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-right: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 5px 35px;
	background: rgba(0, 0, 0, 0.25);
	box-shadow: 2px 2px 2px rgb(0 0 0 / 50%), inset 2px 2px 2px rgb(0 0 0 / 50%), 0px -1px 1px rgb(255 255 255 / 50%), inset 0px -1px 1px rgb(255 255 255 / 50%);
}
.highscores table tr::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    background-image: url('images/tr-border.png');
    background-position: bottom;
    background-repeat: repeat-x;
}
@media only screen and (max-width: 811px) {
	.highscores {
		position: absolute;
		max-width: 100%;
		width: 100%;
		height: auto;
		top: 0%;
		left: 50%;
		transform: translateX(-50%);
	}
}
@media only screen and (max-width: 730px) {
	.highscores table th {
		display: none;
	}
	.highscores table td {
		display: block;
	}
	.highscores .right-bar {
		position: fixed;
		height: 597px;
		right: 0;
		top: 0;
	}
}

/********/
/* MENU */
/********/
.menu {
	width: 806px;
	height: 605px;
	position: fixed; 
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url('images/bg-menu.jpg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	box-sizing: border-box;
}
.menu-btn {
	display: block;
	position: absolute;
	right: 61px;
	width: 200px;
	height: 115px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}
.btn-newgame {
	top: 13px;
	background-image: url('images/newgame.jpg');
}
.btn-newgame:hover,
.btn-newgame:active {
	background-image: url('images/newgame-hl.jpg');
}
.btn-loadgame {
	top: 128px;
	background-image: url('images/loadgame.jpg');
}
.btn-loadgame:hover,
.btn-loadgame:active {
	background-image: url('images/loadgame-hl.jpg');
}
.btn-highscore {
	top: 243px;
	background-image: url('images/highscore.jpg');
}
.btn-highscore:hover,
.btn-highscore:active {
	background-image: url('images/highscore-hl.jpg');
}
.btn-credits {
	top: 358px;
	background-image: url('images/credits.jpg');
}
.btn-credits:hover,
.btn-credits:active {
	background-image: url('images/credits-hl.jpg');
}
.btn-quit {
	top: 473px;
	background-image: url('images/quit.jpg');
}
.btn-quit:hover,
.btn-quit:active {
	background-image: url('images/quit-hl.jpg');
}
@media only screen and (max-width: 811px) {
	.menu {
		max-width: 100%;
		width: 100%;
		padding-bottom: 74%;
		height: auto;
		top: 0%;
		left: 50%;
		transform: translateX(-50%);
	}
	.menu-btn {
		right: 7.5vw;
		width: 24.6vw;
		height: 14.2vw;
	}
	.btn-newgame {
		top: 1.6vw;
	}
	.btn-loadgame {
		top: 15.8vw;
	}
	.btn-highscore {
		top: 29.9vw;
	}
	.btn-credits {
		top: 44.1vw;
	}
	.btn-quit {
		top: 58.3vw;
	}
}
/***********/
/* CREDITS */
/***********/
.credits {
	height: 100%;
	width: 250px;
	overflow: hidden;
	position: absolute;
	right: 30px;
	font-size: 250px;
}
.credits p {
	font-family: 'Tinos', serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 1.5px;
	color: #fae496;
	text-shadow: -1px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, 1px 0px 0px #000, 1px 1px 0px #000, 0px 1px 0px #000, -1px 1px 0px #000, -1px 0px 0px #000;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	line-height: 24px;
	text-align: center;
	transform: translateY(100%);
	animation: scroll-from-bottom 30s linear infinite;
}
@media only screen and (max-width: 811px) {
	.credits {
		width: 31%;
		height: 100%;
		right: 3.7%;
	}
	.credits p {
		font-size: 2.4vw;
		letter-spacing: 0.18vw;
		line-height: 2.87vw;
	}
}

.credits p em {
	font-style: normal;
	color: #ebb923;
}
@keyframes scroll-from-bottom {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(-100%);
	}
}