.crosswords-js {
	--row-count: 15;
	--column-count: 15;
	--grid-line-size: 1px;
	--grid-cell-size: 1.3rem;
	--letter-size: 1.14rem;
	--label-size: 0.4rem;
	--revealed-size: 0.4rem;
	--clue-label-width: 3rem;
	--clue-text-width: 17rem;
}
@media screen and (max-width: 391px) {
	.crosswords-js {
		--grid-cell-size: 1.3rem;
		--letter-size: 1.14rem;
		--label-size: 0.4rem;
		--revealed-size: 0.4rem;
		--clue-text-width: 17rem;
	}
}
@media screen and (min-width: 392px) and (max-width: 555px) {
	.crosswords-js {
		--grid-cell-size: 1.5625rem;
		--letter-size: 1.14rem;
		--label-size: 0.4rem;
		--revealed-size: 0.4rem;
		--clue-text-width: 20rem;
	}
}
@media screen and (min-width: 556px) {
	.crosswords-js {
		--grid-cell-size: 2.25rem;
		--letter-size: 1.7rem;
		--label-size: 0.4em;
		--revealed-size: 0.6rem;
		--clue-text-width: 20rem;
	}
}
.crosswords-js {
	/* define colours */
	--dark-color: var(--color-zinc-950);
	--light-color: var(--color-white);
	--incorrect-color: var(--color-red-500);
	--revealed-color: #cd00cc;
	--focus-outline-color: var(--color-zinc-900);
	--cell-current-color: var(--color-yellow-200);
	--clue-current-color: var(--color-yellow-400);

	/* reuse variables */
	--grid-background-color: var(--dark-color);
	--grid-line-color: var(--dark-color);
	--grid-text-color: var(--dark-color);
	--grid-text-highlighted-color: var(--dark-color);
	--grid-text-active-color: var(--light-color);
	--clue-background-current-color: var(--clue-current-color);
	--cell-background-current-color: var(--cell-current-color);
	--cell-background-dark-color: var(--dark-color);
	--cell-background-light-color: var(--light-color);
	--cell-incorrect-color: var(--incorrect-color);
	--cell-revealed-color: var(--revealed-color);
	--word-separator-color: var(--grid-line-color);
}
.crossword-grid {
	--letter-weight: bold;
	display: grid;
	grid-template-rows: repeat(var(--row-count), var(--grid-cell-size));
	grid-template-columns: repeat(var(--column-count), var(--grid-cell-size));
	gap: var(--grid-line-size);
	border-collapse: collapse;
	box-sizing: border-box;
	padding: var(--grid-line-size);
	width: min-content;
	background-color: var(--grid-background-color);
	color: var(--grid-text-color);
	font-family: sans-serif;
	font-size: x-large;
}
.crossword-grid .cwclue-label {
	font-size: var(--label-size);
	font-weight: 100;
}
.crossword-grid .cwcell-revealed {
	border-left: var(--revealed-size) solid transparent;
	border-bottom: var(--revealed-size) solid var(--cell-revealed-color);
}
.crossword-grid .crossword-clues .crossword-clue-text {
	max-width: var(--clue-text-width);
}
.crossword-grid .cwcell {
	position: relative;
	aspect-ratio: 1;
	z-index: 0;
	display: grid;
	align-items: center;
	text-align: center;
	font-size: var(--letter-size);
	font-weight: var(--letter-weight);
	padding: 0;
	border: 0;
	height: 100%;
	width: 100%;
	background-color: var(--cell-background-light-color);
}
.crossword-grid .cwcell.dark {
	background-color: var(--cell-background-dark-color);
}
.crossword-grid .cwcell.light {
	background-color: var(--cell-background-light-color);
}
.crossword-grid .cwcell.active {
	background-color: var(--clue-background-current-color);
	color: var(--grid-text-active-color);
}
.crossword-grid .cwcell.highlighted {
	background-color: var(--cell-background-current-color);
	color: var(--grid-text-highlighted-color);
}
.crossword-grid .cwcell:focus {
	outline-width: medium;
	outline-color: var(--focus-outline-color);
	outline-style: dotted;
	outline-offset: -2px;
	caret-color: transparent;
}
.crossword-grid .cwcell-revealed {
	position: absolute;
	place-self: end;
	pointer-events: none;
	border-left: var(--revealed-size) solid transparent;
	border-bottom: var(--revealed-size) solid var(--cell-revealed-color);
}
.crossword-grid .cwcell-incorrect {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(
		135deg,
		transparent 47%,
		var(--cell-incorrect-color) 47%,
		var(--cell-incorrect-color) 53%,
		transparent 53%
	);
	background-repeat: no-repeat;
	pointer-events: none;
	opacity: 0.5;
}
.crossword-grid .cwclue-label {
	font-size: var(--label-size);
	margin: 1px 0 0 1px;
	position: absolute;
	place-self: start;
	pointer-events: none;
}
.crossword-grid .cw-across-word-separator {
	box-shadow: inset -3px 0 0 0 var(--word-separator-color);
}
.crossword-grid .cw-down-word-separator {
	box-shadow: inset 0 -3px 0 0 var(--word-separator-color);
}
.crossword-grid .cw-across-word-separator + .cw-down-word-separator,
.crossword-grid .cw-down-word-separator + .cw-across-word-separator {
	box-shadow: inset -3px -3px 0 0 var(--word-separator-color);
}
.crossword-grid .hidden {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.5s, opacity 0.5s;
}
.crossword-grid .noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.crossword-clues {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.crossword-clues .crossword-clue-block-title {
	margin-top: 0;
	font-weight: bold;
	font-size: var(--text-lg);
}
.crossword-clues .crossword-clue-label {
	display: inline-block;
	width: var(--clue-label-width);
	vertical-align: top;
}
.crossword-clues .crossword-clue-text {
	display: inline-block;
	width: calc(100% - var(--clue-label-width));
}
.crossword-clues .current-clue-segment {
	background-color: var(--clue-background-current-color);
}
.cw-italic {
	font-style: italic;
}
.cw-bold {
	font-weight: 700;
}