.game-title { position:absolute; top:-10000px; }

@font-face {
	font-family: 'Tiny5';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(font.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,body {

	overflow:hidden;
	overflow-x: hidden;
	margin:0px;
}
body {
	font-family: Tiny5, monospace;
	background: url("../dungeon/wee_dung_floor.png");
	color: #eee;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	transition:opacity .2s;
	cursor:url(../ui/cursor.png),auto;

	opacity:0;
	transition: opacity 1s;
	overflow-x: hidden;
	width:100%;
    position: fixed;
    height: 100%;
}

* {font-family: Tiny5, monospace; image-rendering: pixelated}

#main-ui { 
	transition: opacity 3s;
	opacity:1;
	background:black;
}
.dead #main-ui {
	opacity:0;
}

#main-ui>div {
    padding: 5px;
}
#level-label {
    margin-left: 5px;
    margin-top: 3px;
    display: inline-block;

}

.name-input{width:100px;text-align: center;}

button {
	background: #444;
	color: #000000;
	border: none;
	margin: 5px;
	cursor: pointer;
	font-size:1px;
	width:40px;
	height:40px;
	cursor:url(../ui/pointer.png),auto;

}

.monsters button:not(button:disabled) { 
	cursor:url(../ui/sword.png),auto;
}

button:disabled:not(.monsters button) {opacity:.25;}

button:hover:not(button:disabled) {
	box-shadow: 0px -2px 4px white;
}
#log {
	border: 1px solid #333;
	padding: 10px;
	height: 200px;
	overflow-y: auto;
	background: #222;
	white-space: pre-line;
}

#hpbar div {
	background: #963939;
	width: 100%;
	height: 100%;
}

.bar {

	display: block;
	width: 216px;
	height: 18px;
	background: #1a1a1a;
	border:1px solid gray;
}
.bar strong { 
	position: absolute;
	margin-left: 5px;
}

#xpbar div {
	background: #395096;
	width: 0%;
	height: 100%;
}

.door { 
	background: url('../dungeon/wee_dung_door_grey.png'); 
	background-size:cover; 
	width:40px; 
	height:40px; 
	transition: scale 1s;/*width 1s, height 1s, top 1s, left 1s;*/
	vertical-align: top;
	position: relative;
	z-index: 1;
	top: 0;
	left: 0;
	margin-bottom:0px;
	scale:1;
}
.door:before {
	content: "\2160";
    font-size: 12px;
    color: #dcdcdcd9;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -180%;
    text-shadow: 0px 0px 1px black;
}
.door[data-level="1"]:before { content: "\2161"; }
.door[data-level="2"]:before { content: "\2162"; }
.door[data-level="3"]:before { content: "\2163"; }
.door[data-level="4"]:before { content: "\2164"; }
.door[data-level="5"]:before { content: "\2165"; }
.door[data-level="_shop"]:before { content: "\424"; }

.door.open {
	background-image: url(../dungeon/wee_dung_door_grey_open.png);
	opacity:1;
}


.door.chosen {/*
	width: 200vw;
	height: 200vh;
	top: -50vh;
	left: -50vw;*/
	scale:30;
	opacity:1;
}
#doors { 
	
	overflow:visible; 
	background: url(../dungeon/wee_dung_brick_grey.png);

    border-top: 15px solid rgba(0, 0, 0, .25);

    height: 90px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.error-message {
	font-style: italic;
	color: #f3f7be;
					
}
.monster-container { transition: margin-left .5s ease-in; }
.monster-container button { 
	display:none;  
	background-color: transparent;
	background-position: center top; 
	background-size:130%; 
	width:60px; 
	height:60px; 
    transition-property: none !important; /* Disables all transitions */
    transition-duration: 0s !important; 
	transition: none !important; 
}

#preload {
	position: absolute;
	top: -9999999999999999px;
	left: -999999999999999px;
}


button.item {
    background: none;
    border: 1px solid white;
    background-size: contain;
    font-size: 14px;
    color: white;
    text-shadow: -1px -2px #0000008c;
    vertical-align: top;
    align-items: flex-end;
    justify-content: flex-end;
    display: inline-flex;
    font-weight: bold;
    padding: 2px;
}
button.item.equipped { border-width:2.5px; box-shadow:0px 0px 8px white;}

div#inventory {
	padding-top: 1rem;
	padding-bottom:1rem;
	border: 1px solid gray;
	
	text-align: center;
}

#last-log {
	
	/*margin-top: 1rem;*/
	text-transform: uppercase;
	min-height:3.5rem;
	
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.monsters { display:flex; justify-content: center; align-items: flex-end; height:100px; }

.chest { opacity:0; transition: opacity .5s; visibility:hidden; background-size:cover; width:40px; height:40px; margin-bottom:12px;
    position: relative;
    top: -48px;
}
.chest.closed { background-image:url('../dungeon/wee_dung_chest.png'); }
.chest:not(.closed){ background-image:url('../dungeon/wee_dung_chest_open.png'); }
.chest.empty:not(.closed) {background-image:url('../dungeon/wee_dung_chest_empty.png');}

#hearts {

    display: flex;
    justify-content: center;
    max-width: 90px;
    margin: 0 auto;
    flex-flow: row wrap;

}
.heart { display:inline-block; background:url('../ui/wee_ui_heart.png'); background-size:cover;  margin:5px; width:15px; height:15px; }

.inventory-and-info {
	position: absolute;
	bottom:0px;
    background: #383838;
	width: 100%;;
}
#item-info {

	
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 0px -2px 4px #00000000;
    background: #383838;
    margin: 0px;
    height: 0px;
    padding: 0rem .8rem;
    transition: height .25s, padding .25s;

}

#item-info .name[data-rarity="junk"] { color:#bfbfbf; }
#item-info .name[data-rarity="normal"] { color:white; }
#item-info .name[data-rarity="rare"] { color:#55c34a; }
#item-info .name[data-rarity="epic"] { color:#03a9f4; }
#item-info .name[data-rarity="legendary"] { color:#8845ff; }


#item-info.open {
    height: 120px;
    padding: .8rem;
    box-shadow: 0px 2px 4px black;
    margin-bottom: 2px;
	
}
#item-info table { 
	width:100%;
    table-layout: fixed;
    margin-top: .25rem;
    margin-bottom: .25rem;
}
#item-info img { 
	margin-left: .25rem;
	/*filter: contrast(0) brightness(10) drop-shadow(0px 0px 1px black);*/
}
#item-info img.magic { filter: hue-rotate(87deg); }
#item-info img.magic { filter: hue-rotate(87deg); }

#item-info button, #death-text button, button.button {
	
    font-size: 20px;
    width: auto;
    border: 1px outset white;
    color: white;
    padding: 1px 17px;
    height: auto;
    margin-top: .5rem;
    box-shadow: 0px 1px 2px gray;
}

[data-primary-stat] {
	
    color: gold;
    text-shadow: 0px 0px 1px #0000009e;
}

.chatbox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.chatbox blockquote {
    flex-grow: 1;
    margin: 6px;
}

#item-info .chatbox img {
    height: 110px;
	width:110px;
    margin: 0px;
    filter: none;
}

#game-frame {
	text-align:center;
	background:url(../dungeon/wee_dung_floor.png);
	position: relative;
    padding-bottom: 6rem;
}
.dead #game-frame {
	
	transition: opacity 3s;
	opacity: 0;
	pointer-events: none;
}
#death-text { 
	opacity: 0; 
	transition: opacity 3s; 
	pointer-events:none;

    height: 100vh;
    top: 0;
    position: absolute;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding: 0px;
    z-index: 99;
    background: black;
}
.dead #death-text { 
	opacity: 1; 
	
    position: absolute;
    width: 100%;
	
	pointer-events:all;
}

.critText { color:yellow;}

.greenText {
	color: lightgreen;
 
}
td .greenText {
	
    font-size: 11px;
    vertical-align: super;
}

#level-up {
	
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-shadow: 2px 2px 2px black;
	transition: left 1.5s linear;
}
#level-up.level-up-slide {
	left: -100%;
}
#level-up h2 {
    font-size: 53px;
}

details { display:none; }

.options-menu {
	
    position: absolute;
    width: 90vw;
    height: 90vh;
    background: #fff3df;
    left: 102vw;
    z-index: 3;
    box-shadow: 0px 0px 2px black inset;
    transition: 1s left ease-out;
    top: 5vh;
    padding: 12px;
    box-sizing: border-box;
    text-align: left;
    color: black;
    display: flex;
    flex-flow: column;
    justify-content: space-between;

}

.options-menu.open/*, .options-menu.saved*/ {
    left: 5vw;
}
#saved-game-area {
	
    overflow-y: auto;
    height: calc(100% - 94px);
    box-shadow: 0px 2px 3px #00000030 inset;
    padding: .6rem;
    box-sizing: border-box;
}
#saved-games { 
	display:none; 
    max-height: calc(100% - 40px);
}
.options-menu.saved #saved-games { display:block; }
.options-menu.saved #actual-options { display:none; }
.options-menu h2 {
    color: black;
    border-bottom: 1px solid darkgoldenrod;
    padding-bottom: 14px;
    width: 80%;
    margin: 24px auto;
	text-align: center;
}

.options-menu b {
    font-size: 17px;
}

.volume-adjust {
    height: 24px;
    width: 100%;
    background: white;
    margin-top: 12px;
	overflow: hidden;
}
.volume-adjust>div{
    pointer-events: none;
    background: #a05c5c;
    height: 100%;
}

div#volume-selectors {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

#volume-selectors>div {
    width: 48%;
}

.shake { animation: shake .5s ease 0s 1 normal forwards !important; }

@keyframes combatIdle {
	0%,
	50%,
	100% {
		background-size: 130%;
		background-image: url(../monsters/wee_mons_druid_atk_d_1.png);
	}

	25%,
	75% {
		background-size: 140%;
		background-image: url(../monsters/wee_mons_druid_atk_d_2.png);
	}
}

@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70% {
		transform: translateX(-10px);
	}

	20%,
	40%,
	60% {
		transform: translateX(10px);
	}

	80% {
		transform: translateX(8px);
	}

	90% {
		transform: translateX(-8px);
	}
}

/* https://codepen.io/zachkrall/pen/MWWGMPx */
.wavy {
	animation-name: wavy;
	animation-duration: .4s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	position: relative;
	top: 0;
	left: 0;
  }
  @keyframes wavy {
	0% {
	  top: 0px;
	}
	50% {
	  top: -15px;
	}
	100% {
	  top: 0px;
	}
  }

  @keyframes enemyAttack {
	0% {
		animation-timing-function: ease-in;
		transform: translateY(45px);
	}

	25%,
	55%,
	75%,
	87% {
		animation-timing-function: ease-out;
		transform: translateY(0px);
	}

	100% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0px);
	}
}

.main-menu {
	
	height: 100vh;
	transition: height 2s;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}

.main-menu button.button { width:170px; opacity:1; transition: opacity 2s, height 2s, margin 2s; height:27px; overflow:hidden;} 
.main-menu button.button:not(#annoying-splash.show-menu button), .scroll .main-menu button.button  {  opacity:0; pointer-events: none; height:0px; margin:0px;}


#annoying-splash h2 {
	text-shadow: 0px 0px 3px white;
}
#player-name {margin:1px;}


#annoying-splash.enter { 
	pointer-events: none; 
	transition: scale 3s ease-in, opacity 3.25s;
	scale: 36 36;
}
#annoying-splash.enter .haydens-door * { transition:opacity .5s; opacity:0;}
#annoying-splash .grass {
	background: #1d4e1d;
	width: 100%;
	height:-webkit-fill-available;
}
.enter-dungeon-button {
	width: auto;
	color: white;
	font-size: .8rem;
	border: 3px groove gray;
	text-align: center;
}

#annoying-splash p{
	transition:opacity 1s;
}
#annoying-splash {
	position: absolute;
	z-index:33;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color: black;
	text-align: center;
    background-image: url(../dungeon/brick_dark.png?1);
	background-position-y:0px;
	transition:background-position 2s;
}
#annoying-splash.scroll {
	background-position-y: -28vh;
}

.haydens-door {
    background: black;
    box-shadow: 0px 2px 99px black inset;
    border: 12px solid #3a3a3a42;
    border-bottom: 12px solid black;
    width: 249px;
    height: 305px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 34px;
    box-sizing: border-box;

}

.explosion {
    width: 64px;
    height: 64px;
    background-image: url(../fx/Gw6wm.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 64px;
    background-position-y: 64px;
	opacity:1;
    margin: 0 auto;
	animation: explode .25s steps(3);
}

@keyframes explode {
	from { background-position-y: 0px; }
	to { background-position-y: -192px; }
}

.pick-upgrade button {
    background-image: url(../dungeon/wee_dung_sword.png);
    background-size: cover;
    border: 2px outset lightgray;
    padding: 22px;
    position:relative;
    background-size: 75%;
    background-position: center center;
    background-repeat: no-repeat;
    margin: .5rem;
}
.pick-upgrade button:before {
    content:"+";
    position:absolute;
    top:-5px;
    left:3px;
    text-shadow: 2px 2px 1px black;
    color:white;
    font-size:24px;
}

.pick-upgrade {
    text-align: center;
    background: rgba(0,0,0,.75);
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 12;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;

	opacity:0;
	pointer-events: none;
	transition: opacity .5s ease-in-out;
}

.pick-upgrade.show {
	opacity: 1;
	pointer-events: all;
}

.pick-upgrade h2 {
    margin-bottom: 8px;
	
    margin: 0px;
	text-shadow: 2px 2px 2px black;
	color: palegoldenrod;
}

.pick-upgrade button[data-stat="hp"] {
    background-image: url(../ui/wee_ui_heart.png);
	background-size: 50;
	background-position: center center;
	background-repeat: no-repeat;
}

.upgrade-buttons {
    border: 1px solid palegoldenrod;
    padding: 1px 24px;
    border-style: dashed;
    background: black;
}