/* #region puzzle stylesheet module */
/* Felewin's Crossword — the look of the puzzle page. */
/* - Warm newsprint colors: a cream page, ink-dark squares, and a gold highlight for the active entry. */
/* - The grid scales from phone width up to a comfortable desktop size through one --cell variable. */
/* - Clues sit beside the grid on wide screens and below it on narrow ones. */
/* #endregion */




/* #region palette and page */
:root
{
	/* The page and square colors. */
	--paper: #fbf6e9;
	--paper-deep: #f1e8d2;
	--ink: #262421;
	--ink-soft: #5c574f;
	--square: #ffffff;
	
	/* The highlight colors for the active entry, the selected square, wrong letters, and a solved grid. */
	--gold-pale: #f6e3a6;
	--gold: #e9c357;
	--red: #c0392b;
	--green-pale: #d9efd2;
	
	/* One square's edge length: a thirteenth of the available width on phones, capped for desktops. */
	--cell: min(3rem, calc((100vw - 2rem) / 13));
}

*
{
	box-sizing: border-box;
}

body
{
	margin: 0;
	padding: 1.5rem 1rem 3rem;
	background: var(--paper);
	color: var(--ink);
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1.45;
}
/* #endregion */


/* #region masthead */
.masthead
{
	text-align: center;
	margin-bottom: 1.25rem;
}

.masthead h1
{
	margin: 0;
	font-size: clamp(2rem, 5vw, 3rem);
	letter-spacing: 0.02em;
}

.subtitle
{
	margin: 0.25rem 0 0;
	color: var(--ink-soft);
	font-style: italic;
}
/* #endregion */


/* #region layout of board and clues */
/* The board and the clue lists share a row on wide screens and stack on narrow ones. */
.puzzle
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 2rem;
	max-width: 70rem;
	margin: 0 auto;
}

.board
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.clues
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
	flex: 1 1 20rem;
	min-width: 0;
}
/* #endregion */


/* #region the grid */
.grid
{
	display: grid;
	grid-template-columns: repeat(13, var(--cell));
	grid-auto-rows: var(--cell);
}

/* An empty part of the lattice: no square is drawn there. */
.void
{
	background: transparent;
}

/* A square that belongs to at least one answer. */
.cell
{
	position: relative;
	background: var(--square);
	border: 1px solid var(--ink);
}

/* The little clue number in the square's top-left corner. */
.cell .number
{
	position: absolute;
	top: 0.05em;
	left: 0.15em;
	font-size: calc(var(--cell) * 0.28);
	line-height: 1;
	color: var(--ink-soft);
	pointer-events: none;
}

/* The single-letter input fills its square, with no visible caret so the square reads like paper. */
.cell input
{
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: calc(var(--cell) * 0.55);
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	caret-color: transparent;
	outline: none;
	cursor: pointer;
}

/* The squares of the entry being worked, and the one square being typed in. */
.cell.in-entry
{
	background: var(--gold-pale);
}

.cell.selected
{
	background: var(--gold);
}

/* A letter that Check found wrong. */
.cell.wrong input
{
	color: var(--red);
	text-decoration: line-through;
}

/* Every square of a solved puzzle. */
.grid.solved .cell
{
	background: var(--green-pale);
	animation: settle 1.2s ease-out;
}

@keyframes settle
{
	from
	{
		box-shadow: 0 0 0.6rem 0.2rem var(--gold);
	}
	to
	{
		box-shadow: none;
	}
}
/* #endregion */


/* #region current clue and controls */
/* The clue for the square being typed in, kept above the grid so phone solvers see it while typing. */
/* - app.js raises this bar's minimum height to fit the tallest clue at the current width, so the grid below never shifts when the clue changes. */
.current-clue
{
	min-height: 2.5rem;
	width: calc(var(--cell) * 13);
	padding: 0.4rem 0.6rem;
	background: var(--paper-deep);
	border-left: 3px solid var(--gold);
	font-size: 0.95rem;
}

.current-clue .label
{
	font-weight: bold;
	margin-right: 0.4em;
}

.controls
{
	display: flex;
	gap: 0.75rem;
}

button
{
	padding: 0.5rem 1.2rem;
	border: 1px solid var(--ink);
	border-radius: 999px;
	background: var(--ink);
	color: var(--paper);
	font: inherit;
	cursor: pointer;
}

button.quiet
{
	background: transparent;
	color: var(--ink);
}

button:hover
{
	filter: brightness(1.15);
}
/* #endregion */


/* #region clue lists */
.clue-group h2
{
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-bottom: 1px solid var(--ink);
}

.clue-group ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.clue
{
	display: grid;
	grid-template-columns: 2em 1fr;
	gap: 0.3em;
	padding: 0.35rem 0.4rem;
	border-radius: 0.3rem;
	cursor: pointer;
}

.clue:hover
{
	background: var(--paper-deep);
}

/* The clue whose entry is being worked. */
.clue.active
{
	background: var(--gold-pale);
}

.clue .number
{
	font-weight: bold;
	text-align: right;
}
/* #endregion */


/* #region celebration */
.celebration
{
	position: fixed;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	padding: 1rem 2rem;
	background: var(--ink);
	color: var(--paper);
	border-radius: 1rem;
	text-align: center;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
	animation: rise 0.6s ease-out;
}

.celebration-title
{
	margin: 0;
	font-size: 1.6rem;
	font-weight: bold;
}

.celebration-note
{
	margin: 0.25rem 0 0;
	font-style: italic;
}

@keyframes rise
{
	from
	{
		opacity: 0;
		transform: translate(-50%, 1rem);
	}
	to
	{
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

/* One falling confetti square; app.js sets its position, color, and timing inline. */
.confetti
{
	position: fixed;
	top: -1rem;
	width: 0.6rem;
	height: 0.6rem;
	pointer-events: none;
	animation: fall 3.5s linear forwards;
}

@keyframes fall
{
	to
	{
		transform: translateY(110vh) rotate(720deg);
	}
}

/* Solvers who prefer stillness get the banner alone, with no glow nor confetti. */
@media (prefers-reduced-motion: reduce)
{
	.grid.solved .cell,
	.celebration,
	.confetti
	{
		animation: none;
	}
	
	.confetti
	{
		display: none;
	}
}
/* #endregion */