:root {
	--bg-body: #0a0a0a;
	--bg-dialog: #0e0e0e;
	--bg-input: #2c2c2c;

	--bg-button: #f3ecd3;
	--bg-button-hover: #eee4c3;
	--bg-button-click: #e9dbb3;

	--border-color: #131313;

	--text-main: #f3ecd3;
	--text-alternative: #1b1b1b;
	--text-small: #333333;
	--text-error: #f67740;
	--text-link: #ff8f00;

	--a: #444444;
	--a-hover: #333333;
	--a-click: #2c2c2c;
}


* {
	font-family: 'Cascadia Mono', sans-serif;
}

body {
	color: var(--text-main);
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	height: 100vh;
	background-color: var(--bg-body);
	font-size: 1.2rem;
}

.site-footer {
	margin-top: auto;
	padding: 16px 12px 20px;
	text-align: center;
	border-top: 1px solid var(--border-color);
	color: var(--text-small);
	font-size: 0.85rem;
	line-height: 1.5;
}

.site-footer p {
	margin: 2px 0;
}

.center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
}

.dialog {
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1.5rem;
	padding-bottom: 1rem;
	text-align: center;
	width: 30%;
	background-color: var(--bg-dialog);
}

.login {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

input {
	padding: 10px;
	color: var(--text-main);
	border-radius: 8px;
	border: none;
	background-color: #2c2c2c;
}

button {
	padding: 10px;
	color: var(--text-alternative);
	background-color: var(--bg-button);
	border: none;
	border-radius: 8px;
}

button:hover {
	cursor: pointer;
	background-color: var(--bg-button-hover);
}

button:active {
	background-color: var(--bg-button-click);
}

button.logout-link:hover {
    background-color: transparent;
    background: none;
}

.dialog-footer {
	font-size: small;
	font-style: italic;
	color: var(--text-small);
	margin-top: 15px;
	padding-bottom: 5px;
}

.dialog-footer a {
	color: var(--a);
}

.dialog-footer a:hover {
	color: var(--a-hover);
}

.dialog-footer a:active {
	color: var(--a-click);
}

.error {
	font-size: small;
	color: var(--text-error);
}

.button-group {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin-top: 15px;
}

.button-group span {
	padding-top: 5px;
	padding-bottom: 15px;
}

.navbar {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 100;
}

.nav-links {
	display: flex;
	justify-content: space-around;
	width: 100%;
	align-items: center;
	list-style: none;
	padding: 0;
}

.nav-links a,
.logout-link {
	color: var(--text-main);
	text-decoration: none;
	font-weight: bold;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

.nav-username {
	color: var(--text-main);
	font-weight: bold;
	font-size: 1rem;
}

.logout-link {
	color: var(--text-link);
}

.logout-link:hover {
	color: var(--a-hover);
}

.logout-link:active {
	color: var(--a-click);
}

.enigmas-list {
	gap: 10px;
}

.list-links {
	color: var(--text-link);
}

a {
	color: var(--text-main);
}

.dashboard {
	display: grid;
	grid-template-columns: auto auto;
	font-family: monospace;
	border: solid 2px var(--text-small);
	border-radius: 20px;
	width: 60%;
	height: 60%;
	padding: 30px;
}

.dashboard h3 {
	color: var(--text-link);
}

pre {
	font-size: 3pt;
}

star {
	color: yellow;
}

.leaderboard-ranking {
	width: 70%;
	border-collapse: collapse;
	font-family: monospace;
}

.leaderboard-ranking * tr {
	border-bottom: 2px solid;
	color: var(--text-small);
}

.leaderboard-ranking thead th {
	padding: 10px;
	text-align: left;
}

.leaderboard-ranking tbody tr td {
	padding: 15px 10px;
	color: var(--text-main);
}

.leaderboard-ranking tbody tr .score-cell {
	padding: 15px 10px;
	text-align: right;
	color: yellow;
	font-weight: bold;
}

.fire-box {
    background: transparent; /* Garante que o container não tenha cor */
    border: none;            /* Remove bordas se houver */
    display: flex;
    justify-content: center;
    align-items: center;
}

#fireCanvas {
    background: transparent; /* O canvas em si fica transparente */
}

.admin-wrap {
	width: 92%;
	margin: 20px auto 40px;
}

.admin-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--bg-dialog);
}

.admin-table th,
.admin-table td {
	padding: 10px;
	border-bottom: 1px solid var(--border-color);
	text-align: left;
	font-size: 0.95rem;
}

.admin-actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.admin-actions form {
	display: inline;
}

.danger-button {
	background: #ff8f00;
	color: #1b1b1b;
}

.admin-pagination {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 16px;
}

.admin-dialog {
	width: min(560px, 92vw);
}

.admin-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
}

.admin-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.admin-filters input,
.admin-filters select {
	min-width: 130px;
}

.admin-logs-table td {
	vertical-align: top;
}