@font-face {
	font-family: 'title';
	src: url('../assets/fonts/strangemagicblank.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'text';
	src: url('../assets/fonts/montserrat.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

html, body {
	font-family: 'text';
	background-color: #FBFBFB;
}

h1, h2 {
	font-family: 'title';
	font-size : 3.5rem;
	line-height: 2.05;
	margin: 0.35em 0 0.7em;
}

.text_outer_container {
	box-sizing: border-box;
	max-width: 900px;
	margin: 80px auto 40px;
	padding: 0 28px;
	font-size: clamp(18px, 2.5vw, 24px);
	line-height: 1.55;
	background-color: #FBFBFB;
}

.center_text_container {
	text-align: center;
}

.left_text_container {
	text-align: left;
}

#about_container {
	font-size: clamp(18px, 2.5vw, 24px);
	background-color: #FBFBFB;
}

#info {
	position: absolute;
	top: 132px;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	z-index: 100;
	display:block;
	padding: 12px 24px;
	font-size: 32px;
	line-height: 1.2;
}

#settings_container {
	position: absolute;
	top: 10px;
	right:10px;
	width: 10%;
	text-align: right;
	display:block;
}

#status_bar {
	position: absolute;
	inset: 0 0 auto;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background: #E8ECE9;
	border-bottom: 1px solid #AAB5AD;
}

.counter_container {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	height: 142px;
	padding: 15px 16px 13px;
	background: #F7F9F6;
	border-top: 5px solid var(--performance-color, #809087);
	border-right: 1px solid #D2D9D4;
	font-size: 14px;
	line-height: 1.2;
}

.counter_container:last-child {
	border-right: 0;
}

.stat_header,
.stat_values {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.stat_label {
	display: inline-block;
	color: #46534B;
	font-family: 'title';
	font-size: 20px;
	font-weight: normal;
	line-height: 1.4;
	padding-bottom: 9px;
}

.stat_time {
	font-size: 24px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.stat_detail {
	min-height: 17px;
	margin-top: 9px;
	overflow: hidden;
	color: #526057;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stat_values {
	margin-top: 12px;
	color: #253129;
	font-variant-numeric: tabular-nums;
}

.star {
	z-index: 100;
	position: absolute;
	width: 18px;
	height: 18px;
	top: 11px;
}

#counter_container_best .stat_header {
	padding-inline: 20px;
}

#star_left {
	left: 10px;
}
#star_right {
	right: 10px;
}

#main_canvas_container {
	position: absolute;
	top:132px;
	width: 100vw;
	height: calc(60vh - 132px);
	left:0%;
	z-index: 0;
	display:block;
}

#answers_grid {
	position: absolute;
	top: 60vh;
	left: 0;
	z-index: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	box-sizing: border-box;
	width: 100vw;
	height: 40vh;
	gap: 8px;
	padding: 8px;
	background: #E8ECE9;
}

.selection_border {
	position: absolute;
	inset: 0;
	z-index: 4;
	box-sizing: border-box;
	border: 2px solid #87938B;
	border-radius: 6px;
	pointer-events: none;
}

.answer_container:hover .selection_border,
.answer_container:focus-visible .selection_border {
	border-color: #23766C;
	border-width: 3px;
}

.answer_container:focus-visible {
	outline: 3px solid #82C8BE;
	outline-offset: 1px;
}

.wrong_answer_border {
	top:0px;
	left:0px;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	position:absolute;
	display:block;
	border: none;
}

.wrong_answer_border_on
{
	border:solid 8px #bf1029;
}

.custom_canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.answer_container {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: #FBFBFB;
	border-radius: 6px;
	cursor: pointer;
}

.answer_container.is-correct .selection_border {
	border: 4px solid #327A4B;
}

.answer_container.is-incorrect .selection_border {
	border: 4px solid #A83C49;
}

/* CSS */
.button-53 {
  background-color: #C4D9FF;
  border: 0 solid #E5E7EB;
  box-sizing: border-box;
  color: #000000;
  margin: auto;
  /* font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; */
  font-family: 'title';
	display: inline-flex;
	align-items: center;
	min-height: 68px;
	font-size: 2rem;
  font-weight: 700;
  justify-content: center;
	line-height: 1.3;
	padding: 1.3rem 2rem 1.5rem;
  position: relative;
  text-align: center;
  text-decoration: none #000000 solid;
  text-decoration-thickness: auto;
  width: auto;
  /* max-width: 460px; */
  cursor: pointer;
	transform: rotate(-1deg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-53[hidden] {
	display: none;
}

#citation {
	font-size: 1rem;
}

#play_button,
#about_button {
	min-width: 220px;
}

.difficulty_button {
	position: relative;
	box-sizing: border-box;
	flex: 1;
	height: 48px;
	min-height: 48px;
	min-width: 0;
	font-family: 'title';
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
	padding: 0.35rem 0.25rem 0.5rem;
	white-space: nowrap;
}

.difficulty_controls {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.button-53:focus {
  outline: 0;
}

.button-53:after {
  content: '';
  position: absolute;
  border: 1px solid #000000;
  bottom: 4px;
  left: 4px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}

.button-53:hover:after {
  bottom: 2px;
  left: 2px;
}

#next_puzzle_button {
	position: absolute;
	top: calc(var(--answer-top, 60vh) - 60px);
	right: 16px;
	z-index: 100;
	min-height: 44px;
	padding: 0.75rem 1rem;
	font-size: 1rem;
}

#next_puzzle_container {
	position: absolute;
	text-align:center;
	/* width: 10%; */
	/* height: 50%; */
	bottom: calc(50% + 50px);
	right:30px;
	z-index: 100;
	padding:30px;
	border-radius: 10px;
	font-size: larger;
	background:rgb(82, 194, 82);
	/* box-sizing: border-box; */
	border:solid 4px rgb(82, 194, 82);
}

#next_puzzle_container:hover {
	border:solid 4px cyan;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.next_puzzle_span {
	vertical-align: baseline;
}

@media (max-width: 900px) {
	#info {
		font-size: 28px;
	}

	.counter_container {
		padding-inline: 12px;
	}
}

@media (max-width: 700px) {
	#status_bar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#info {
		top: 200px;
		padding: 8px 12px;
		font-size: 18px;
		line-height: 1.25;
	}

	.counter_container {
		height: 100px;
		padding: 6px 10px 5px;
		border-bottom: 1px solid #D2D9D4;
	}

	.counter_container:nth-child(2n) {
		border-right: 0;
	}

	.stat_label {
		font-size: 18px;
		line-height: 1.35;
		padding-bottom: 7px;
	}

	.stat_time {
		font-size: 20px;
	}

	.stat_detail {
		min-height: 13px;
		margin-top: 6px;
		font-size: 11px;
	}

	.stat_values {
		margin-top: 6px;
		font-size: 12px;
	}

	.difficulty_button {
		height: 24px;
		min-height: 24px;
		font-size: 0.75rem;
		line-height: 1.1;
		padding: 0 0.2rem 0.15rem;
	}

	.difficulty_controls {
		gap: 8px;
		margin-top: 6px;
	}

	#counter_container_difficulty .stat_detail {
		display: none;
	}

	#next_puzzle_button {
		top: calc(var(--answer-top, 70vh) - 52px);
		right: 12px;
		min-height: 40px;
		padding: 0.65rem 0.8rem;
		font-size: 0.85rem;
	}

	.text_outer_container {
		margin: 32px auto 24px;
		padding: 0 20px;
	}

	h1,
	h2 {
		font-size: 2.5rem;
		line-height: 2.05;
		margin-bottom: 0.8em;
	}
}