body {
	min-height: 100vh;
	overflow: hidden;
}

#meet {
	display: none;
}

@font-face {
	font-family: dumbledor;
	src: url(dum1.ttf);
}

@font-face {
	font-family: atwriter;
	src: url(atwriter.ttf);
}

:root {
	/*https://lospec.com/palette-list/ty-celestial-sapien-26*/
	--bs-font-monospace: atwriter, monospace;
	--bs-body-font-family: dumbledor, serif;
	--bs-body-font-size: 1.5rem;
	--bs-blue: #2f4063;
	--bs-primary: #2f4063;
	--bs-primary-rgb: 13, 110, 253;
	--bs-red: #9c4429;
	--bs-danger: #9c4429;
	--bs-danger-rgb: 220, 53, 69;
	--bs-secondary: #6c757d;
	--bs-secondary-rgb: 108, 117, 125;
	--bs-green: #96c359;
	--bs-success: #96c359;
	--bs-success-rgb: 25, 135, 84;
	--bs-cyan: #0dcaf0;
	--bs-info: #0dcaf0;
	--bs-info-rgb: 13, 202, 240;
	--bs-yellow: #b1993a;
	--bs-warning: #b1993a;
	--bs-warning-rgb: 255, 193, 7;
	--bs-indigo: #6610f2;
	--bs-purple: #6f42c1;
	--bs-pink: #d63384;
	--bs-white: #e6dac5;
	--bs-white-rgb: 255, 255, 255;
	--bs-body-bg-rgb: 255, 255, 255;
	--bs-black-rgb: 0, 0, 0;
	--bs-orange: #fd7e14;
	--bs-teal: #20c997;
	--bs-black: #000;
	--bs-light: #f8f9fa;
	--bs-dark: #212529;
	--bs-light-rgb: 248, 249, 250;
	--bs-dark-rgb: 33, 37, 41;
	--bs-body-color-rgb: 33, 37, 41;
}

.card, .modal-content {
	border-image-source: url('border.png');
	border-image-slice: 16 fill;
	border-image-width: 24px;
	border-image-outset: 12px;
	border-image-repeat: round round;
}

#game {
	height: 100vh;
	width: 100vw;
	color: white;
}

#game {
	--uhg-back: white;
	--uhg-text-colour: black;
	--uhg-border-radius: 40px;
	--uhg-padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

	#game .action {
		cursor: pointer;
	}

		/*TODO*/
		#game .action.pulsing {
			--pulse-opacity: 100%;
			filter: drop-shadow(0px 0px 5px rgba(255,255,255, var(--pulse-opacity)));
		}

		#game .action.selected {
			filter: drop-shadow(0px 0px 5px orange);
		}

		#game .action.locked {
			filter: drop-shadow(0px 0px 5px green);
		}

.action.doorway {
	position: absolute;
	width: 25%;
}

	.action.doorway.doorway-front {
		bottom: 22%;
		right: 14%;
	}

	.action.doorway.doorway-left {
		bottom: 22%;
		left: 14%;
	}

	.action.doorway.doorway-rear {
		top: 14.4%;
		left: 12.4%;
	}

	.action.doorway.doorway-right {
		top: 14.4%;
		right: 12.4%;
	}

#gameTile {
	position: absolute;
	width: 80vmin;
	height: 80vmin;
	text-align: center;
	margin: 0 auto;
}

#roomName {
	position: absolute;
	top: 0;
	background-color: var(--uhg-back);
	color: var(--uhg-text-colour);
	padding: var(--uhg-padding);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#gameTile #floor {
	margin-top: 33%;
}

#gameStats, #gameTimer, #gameItems, #gameMap {
	padding: var(--uhg-padding);
	position: absolute;
	background-color: var(--uhg-back);
	color: var(--uhg-text-colour);
	-webkit-box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.5);
}

#gameItems {
	border-top-right-radius: var(--uhg-border-radius);
	bottom: 0;
	left: 0;
}

#gameMap {
	border-bottom-left-radius: var(--uhg-border-radius);
	top: 0;
	right: 0;
}

#gameStats {
	border-bottom-right-radius: var(--uhg-border-radius);
	top: 0;
	left: 0;
}

#gameTimer {
	border-top-left-radius: var(--uhg-border-radius);
	bottom: 0;
	right: 0;
}

	#gameTimer :is(#lockActionBtn, #countdownText) {
		border-radius: 50px;
		height: 75px;
		width: 75px;
		font-size: 2em;
		line-height: 1.25em;
	}

	#gameTimer #lockActionBtn {
		line-height: 1.4em;
	}