/* BIT ALIVE - variables.css */
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');

.jersey-10-regular {
	font-family: "Jersey 10", sans-serif;
	font-weight: 400;
	font-style: normal;
}

:root {
	--bg_dark: #050505;
	--panel_bg: rgba(20, 15, 10, 0.95);
	--accent: #ffcc00;
	--accent_dim: #8a7020;
	--blood: #e61919;
	--mana: #00aaff;
	--font_main: "Jersey 10", sans-serif;
	/*"Cinzel", serif*/
}

* {
	font-family: var(--font_main) !important;
	font-size: 20px;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

body {
	margin: 0;
	overflow: hidden;
	background-color: var(--bg_dark);
	color: #fff;
	user-select: none;
	transition: background-color 0.5s;

	&.playing {
		touch-action: none;
	}

	canvas {
		display: block;
		width: 100vw;
		height: 100vh;
	}
}

.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-brands,
.fa-regular {
	font-family: "Font Awesome 6 Free" !important;
}

.fab,
.fa-brands {
	font-family: "Font Awesome 6 Brands" !important;
}

button {
	text-transform: uppercase;
	letter-spacing: 1px;
}

input {
	background: #222;
	border: 2px solid var(--accent);
	color: #fff;
	padding: 10px;
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 20px;
	width: 200px;
	border-radius: 8px;
	-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;

	&:focus {
		outline: none;
		box-shadow: 0 0 10px var(--accent);
	}
}

body {
	touch-action: none;
	overscroll-behavior: none;
}

/* Classes para exibição condicional */
.d-none {
	display: none !important;
}