@font-face {
    font-family: 'Roboto';
    src: url(/res/font/Roboto-Regular.ttf);
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url(/res/font/Roboto-Medium.ttf);
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url(/res/font/Roboto-Bold.ttf);
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url(/res/font/RobotoMono-Medium.ttf);
    font-display: swap;
}

:root {
	--dark-font: #0c0c0c;
	--light-font: #fff1dd;
	--orange-font: #ffa44c;
	--dark-brown: #3d240f;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: var(--dark-font);
	font-family: 'Roboto', sans-serif;
	background: #bb893f url(/_images/bg_wood_tile.png);
}
.announcement {
	background-color: darkseagreen;
	color: var(--dark-font);
	max-width: 540px;
	margin:10px auto;
	padding:5px;
	text-align: center;
}

header {
	max-width: 900px;
	margin: 1rem auto;
	padding: 0 1rem;
	text-align: center;
}
header a img {
	display: block;
	width: 100%;
	max-width: 728px;
	height: auto;
	margin: 0 auto;
}

.h1-group {
	text-align: center;
}
.h1-group h1 {
	margin: 1rem 0 0.5rem;
	font-size: 1.5rem;
	line-height: 1.375rem;
}
.h1-group p {
	margin: 0;
	font-size: 0.8125rem;
}

main {
	flex: 1;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 1rem;
}
main > p {
	text-align: center;
}

.breadcrumb {
	margin-bottom: 1.25rem;
	font-size: 0.8125rem;
	color: var(--dark-brown);
}
.breadcrumb ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.breadcrumb li:not(:last-child)::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13.8'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%233d240f;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M10.7,18.4.5,8.2a1.9,1.9,0,0,1,0-2.6h0a1.9,1.9,0,0,1,2.6,0L12,14.5l8.9-8.9a1.9,1.9,0,0,1,2.6,0h0a1.9,1.9,0,0,1,0,2.6L13.3,18.4A1.9,1.9,0,0,1,10.7,18.4Z' transform='translate(0 -5.1)'/%3E%3C/svg%3E");
	display: inline-block;
	width: 7px;
	margin: 0 0.25rem;
	transform: translateX(-2px) rotate(270deg);
}
.breadcrumb a {
	color: var(--dark-font);
}

.level-nav-container {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(3, 1fr);
	max-width: 600px;
	margin: 0 auto;
}
.level-nav-container .back-link {
	grid-column: 2;
	margin: 0 auto;
}
.level-nav-container .next-link {
	grid-column: 3;
	margin-left: auto;
}
.level-nav-container a {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100px;
	padding: 0.375rem;
	text-align: center;
    color: var(--orange-font);
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.25rem;
    background-color: var(--dark-brown);
}
.level-nav-container svg {
	fill: var(--orange-font);
}
.previous-link svg {
	transform: rotate(180deg);
}

footer {
	margin-top: 2rem;
	padding: 3rem 1rem;
	text-align: center;
	color: var(--light-font);
	background-color: #1c1c1c;
}
footer h4 {
	margin: 0 0 1rem 0;
}
footer p {
	margin: 1rem 0;
}
footer a {
	color: var(--orange-font);
	text-decoration: none;
}


/******************************************
******************* HOME ******************
******************************************/
#groups h2, #packs h2, #levels h2 {
	font-size: 1rem;
	text-align: center;
}
#groupsList {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	justify-items: center;
	width: 100%;
	margin-top: 0.5rem;
}
.groups nav {
	width: 100%;
	margin: 0 auto;
    padding: 0.5rem;
	text-align: center;
    border-radius: 0.375rem;
	background-color: #6f411b;
	background-color: hsl(27.14deg 60.87% 27.06% / 83%);
}
.groups nav.hidden {
	display: none;
}
.groups h3 {
	margin: 0.25rem 0 0.5rem;
	font-size: 0.875rem;
	color: var(--light-font);
}
.groups h3 a {
	color: inherit;
	text-decoration: none;
}
.groups nav > a {
	display: block;
    width: 100%;
	padding: 0.375rem;
	color: var(--orange-font);
    font-weight: 500;
	overflow: clip;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;
    border-radius: 0.25rem;
    background-color: var(--dark-brown);
}
.groups nav > a + a {
	margin-top: 0.25rem;
}

#showMoreGroupsButton {
    position: relative;
	display: block;
	width: fit-content;
	margin: 1.5rem auto 0;
	padding: 0.5rem 3rem;
    color: var(--dark-brown);
    font-weight: 700;
    border-radius: 0.25rem;
    background-color: #f7e8d3;
    border: 1px solid #b7b759;
    outline: 2px solid #f7e8d3;
}
#showMoreGroups {
	position: absolute;
	top: 0;
	left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
	cursor: pointer;
}
main:has(#showMoreGroups:checked) #groups nav.hidden {
	display: block;
}
#showMoreGroupsButton:has(#showMoreGroups:checked) {
	display: none;
}

#about {
	margin-top: 2rem;
}
#about p {
	margin: 1rem 0;
}

#alsoAvailable {
	margin-top: 2rem;
	text-align: center;
}
#alsoAvailable h2 {
	margin-bottom: 0.75rem;
}


/******************************************
****************** GROUP ******************
******************************************/
#packs {
	width: fit-content;
	min-width: 164px;
	margin: 1rem auto;
}
#packs nav {
	margin-top: 0.25rem;
}


/*****************************************
****************** PACK ******************
*****************************************/
#levels {
	margin-top: 1rem;
}
#levelsList {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, 1fr);
	max-width: 600px;
	margin: 0.5rem auto 1rem;
	padding: 0.75rem;
	color: #fff;
	text-align: center;
	list-style-type: none;
    border-radius: 2.75rem;
	background-color: hsl(27.14deg 60.87% 27.06% / 75%);
}
@media (min-width: 600px) {
	#levelsList {
		grid-template-columns: repeat(4, 1fr);
	}
}
#levelsList li a {
    display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	width: 100%;
	padding: 0.375rem;
	font-weight: 500;
	font-size: 0.75rem;
	color: var(--orange-font);
	text-decoration: none;
    border-radius: 35px;
	background-color: var(--dark-brown);
}
#levelsList a.hard-level {
	padding: 0.1875rem;
	border: 0.1875rem solid hsl(281deg 100% 33% / 80%);
}
#levelsList a span {
	display: block;
	font-weight: 700;
	font-size: 1.25rem;
    color: var(--light-font);
}


/******************************************
****************** LEVEL ******************
*******************************************/
.letter-tray {
	position: relative;
	top: 0;
	box-sizing: content-box;
	background: linear-gradient(135deg, #454a4f 0%,#787d84 100%);
	border: solid 2px gray;
	box-shadow: 0 3px 5px 0 hsl(0deg 0% 0% / 65%);
	border-radius: 50px;
	text-transform: uppercase;
	pointer-events: none;
}
.letter-tray {
	display: flex;
	flex: 0 0 auto;
	width: 100px;
	height: 100px;
}
#levelsList .letter-tray {
	display: inline-flex;
	width: 54px;
	height: 54px;
}
.tray-letter {
	width: 25%;
	height: 25%;
	position: absolute;
	border-radius: 32767px;
	color: #fff;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
	text-align: center;
	vertical-align: middle;
}

#levelsList .tray-letter {
	display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
	background-color: rgba(178,121,56,1.00);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5);
}

.zero-degrees{left:37.5%;top:4.0%;}

.one-half{left:37.0%;top:71.0%;}

.one-third{left:8.0%;top:54.5%;}
.two-third{left:66.5%;top:54.5%;}

.one-fourth{left:4.0%;top:37.5%;}
.three-fourth{left:71.0%;top:38.0%;}

.one-fifth{left:5.5%;top:27.5%;}
.two-fifth{left:17.5%;top:65.0%;}
.three-fifth{left:57.0%;top:65.0%;}
.four-fifth{left:69.0%;top:27.5%;}

.one-sixth{left:8.0%;top:21.0%;}
.five-sixth{left:66.5%;top:21.0%;}

.one-seventh{left:11.0%;top:17.0%;}
.two-seventh{left:4.5%;top:45.0%;}
.three-seventh{left:22.5%;top:68.0%;}
.four-seventh{left:52.0%;top:68.0%;}
.five-seventh{left:70.0%;top:45.0%;}
.six-seventh{left:63.5%;top:17.0%;}

.one-eighth{left:13.5%;top:14.0%;}
.three-eighth{left:13.5%;top:61.5%;}
.five-eighth{left:61.0%;top:61.5%;}
.seven-eighth{left:61.0%;top:14.0%;}

.level-letters-container {
	display: flex;
	align-items: start;
	justify-content: center;
	gap: 1rem;
}
.letter-tray {
	position: relative;
	top: 0;
    width: 100px;
    height: 100px;
	flex-shrink: 0;
	text-transform: uppercase;
	pointer-events: none;
	color: #fff;
	font-weight: 500;
	border-radius: 50px;
	border: solid 2px gray;
	box-shadow: 0 3px 5px 0 hsl(0deg 0% 0% / 65%);
	background: linear-gradient(135deg, #454a4f 0%,#787d84 100%);
}
.level-letters-container .tray-letter {
	font-size: 20px;
	line-height: 25px;
	background-color: #b27938;
	box-shadow: 0 3px 5px 0 rgba(0,0,0,0.35);
}
.level-letters-container p {
	color: var(--dark-font);
}

.answers-container, .extra-words {
	width: 100%;
	max-width: 600px;
	margin: 1rem auto 0.5rem;
	padding: 0.5rem 0.5rem 1rem;
	color: #fff;
	border-radius: 0.5rem;
	box-shadow: 0 3px 20px 0 hsl(0deg 0% 0% / 38%);
	background: #bb9669 url(/_images/bg_wood_tile_cutting_board.png) top left / 100%;
}
.answers-container h2, .extra-words summary {
	width: 100%;
    padding: 0.25rem;
    font-weight: 500;
	font-size: 1.25rem;
	text-align: center;
	box-sizing: border-box;
	border-radius: 0.25rem;
	text-shadow: 0 0 7px rgba(0, 0, 0, 0.35);
	background: linear-gradient(to bottom, rgba(40,0,0,0.5) 0%, rgba(40,0,0,0) 100%);
}
.answers-container.hard {
	padding: 0.25rem 0.25rem 0.75rem;
	border: 0.25rem solid hsl(281deg 100% 33% / 75%);
	box-shadow: 0 3px 20px 0 hsla(281, 100%, 23%, 0.6);
}
.answers-container.hard h2 {
	background: linear-gradient(to bottom, hsla(281, 100%, 23%, 0.6) 0%, rgba(40, 0, 0, 0) 100%);
}

.answers {
	--rows: 1;
	--columns: 1;

	display: grid;
	gap: clamp(0.25rem, 1vw, 0.5rem) clamp(0.375rem, calc(8cqw / var(--columns)), 2rem);
	grid-auto-flow: column;
	justify-content: center;
	grid-template-rows: repeat(var(--rows), 1fr);
	width: 100%;
    max-width: calc(130px * var(--columns));
    margin: 0.5rem auto 1rem;
	list-style-type: none;
}
.answers li:first-of-type {
	grid-column: span var(--columns);
	margin: 0 auto;
}
.answers li, .extra-words li {
	position: relative;
	width: fit-content;
	padding: 0 0.375rem;
	border-radius: 0.5rem;
	color: transparent;
	text-transform: uppercase;
	font-family: "Roboto Mono";
	font-size: clamp(0.75rem, calc(21cqw / var(--columns)), 2rem);
	border: solid 1px rgba(40,0,0,0.25);
	background-color: rgba(40,0,0,0.25);
}
.answers.centered li {
	margin: 0 auto;
}
.answers li::before {
	content: attr(data-qm);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
    text-align: center;
	text-shadow: 0 0 7px rgba(0,0,0,0.5);
}
.answers li:focus, .answers-container:has(.show-answers-checkbox:checked) li {
	color: #fff;
	text-shadow: 0 0 7px rgba(0,0,0,0.5);
}
.answers li:focus::before, .answers-container:has(.show-answers-checkbox:checked) li::before {
	color: transparent;
	text-shadow: none;
}

.show-answers-label {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
	margin-top: 0.75rem;
	color: var(--dark-font);
	font-weight: 500;
	cursor: pointer;
	user-select: none;
}
.switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 24px;
}
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 12px;
	background-color: #50351c;
	transition: 0.1s;
}
.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	border-radius: 50%;
	background-color: var(--light-font);
	transition: 0.1s;
}
input:checked + .slider {
	background-color: #488501;
}
input:checked + .slider:before {
	transform: translateX(16px);
}

.extra-words {
	margin: 0 auto 1.5rem;
	padding: 0.5rem;
}
.extra-words summary {
	display: grid;
	align-items: center;
	grid-template-columns: 24px 1fr 24px;
	cursor: pointer;
}
.extra-words summary img {
	filter: drop-shadow(0 0 1px rgba(40, 0, 0, 0.5));
}
.extra-words summary svg {
	fill: var(--light-font);
	padding: 5px;
	border-radius: 12px;
	background-color: #488501;
	border: 1px solid #3e7300;
	transform: rotate(180deg);
}
.extra-words:open summary svg {
	transform: none;
}
.extra-words ul {
	display: flex;
    gap: 0.75rem 0.375rem;
    flex-flow: row wrap;
	justify-content: space-between;
	margin-top: 0.5rem;
    list-style-type: none;
	text-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}
.extra-words li {
	color: #fff;
    font-size: 1rem;
	border-radius: 0.375rem;
}
.extra-words p {
	margin-top: 0.5rem;
	text-align: center;
	color: var(--dark-font);
}