/* Simple Crossword – styles. Same palette and controls as Simple Sudoku. Scoped to .simple-crossword. */
.simple-crossword {
	--sc-ink: #1d2433;
	--sc-muted: #5b6475;
	--sc-line: #c9cfdb;
	--sc-thick: #1d2433;
	--sc-bg: #ffffff;
	--sc-peer: #eef2f8;
	--sc-same: #d7e3f7;
	--sc-sel: #b9d0f5;
	--sc-user: #2457b3;
	--sc-bad: #c62828;
	--sc-bad-bg: #fde7e7;
	--sc-hint: #2e7d32;
	--sc-btn: #f2f4f8;
	--sc-btn-hover: #e3e7ef;
	max-width: 760px;
	margin: 1.5em auto;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--sc-ink);
	user-select: none;
	-webkit-user-select: none;
}

.simple-crossword *,
.simple-crossword *::before,
.simple-crossword *::after { box-sizing: border-box; }
.simple-crossword [hidden] { display: none !important; }

/* Toolbar & buttons (shared look with Simple Sudoku) */
.simple-crossword .sc-toolbar,
.simple-crossword .sc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.simple-crossword .sc-actions { margin: 10px 0 0; justify-content: center; }
.simple-crossword .sc-title { font-weight: 700; font-size: 16px; margin-right: 4px; }
.simple-crossword .sc-timer { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--sc-muted); }

.simple-crossword .sc-btn,
.simple-crossword .sc-key {
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	padding: 8px 12px;
	border: 1px solid var(--sc-line);
	border-radius: 8px;
	background: var(--sc-btn);
	color: var(--sc-ink);
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	margin: 0;
}
.simple-crossword .sc-btn:hover,
.simple-crossword .sc-key:hover { background: var(--sc-btn-hover); }

/* Layout: grid on top, clues underneath (Across and Down side by side when there's room). */
.simple-crossword .sc-layout { display: block; }
.simple-crossword .sc-main { width: 100%; min-width: 0; }
.simple-crossword .sc-clues {
	margin-top: 22px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 8px 28px;
}
.simple-crossword.sc-empty .sc-cluebar,
.simple-crossword.sc-empty .sc-actions,
.simple-crossword.sc-empty .sc-keys,
.simple-crossword.sc-empty .sc-clues { display: none; }

/* Current clue bar */
.simple-crossword .sc-cluebar {
	display: flex;
	align-items: stretch;
	gap: 6px;
	margin-bottom: 10px;
	padding: 4px;
	background: var(--sc-peer);
	border-radius: 8px;
	min-height: 3.2em;
}
.simple-crossword .sc-cluebar .sc-btn { padding: 4px 14px; font-size: 22px; background: var(--sc-bg); }
.simple-crossword .sc-current { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; padding: 4px; font-size: 16px; line-height: 1.35; }

/* Board.
   The script sets --sc-cell to a whole number of pixels so every grid line lands on the same
   pixel boundary – this keeps all borders the same weight on every screen.
   Each answer square has a full 1px border and overlaps its right/bottom neighbour by 1px,
   so shared edges are a single line. Unused squares show the pale panel. */
.simple-crossword .sc-board {
	--sc-cell: 32px;
	display: grid;
	gap: 0;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 1px 1px 0;
	background: var(--sc-peer);
	border-radius: 4px;
	outline: none;
	transition: transform .3s ease;
}
.simple-crossword .sc-board:focus-visible { box-shadow: 0 0 0 3px var(--sc-sel); }

.simple-crossword .sc-cell {
	position: relative;
	width: calc(var(--sc-cell) + 1px);
	height: calc(var(--sc-cell) + 1px);
	margin: 0 -1px -1px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sc-bg);
	border: 1px solid var(--sc-thick);
	cursor: pointer;
}
.simple-crossword .sc-cell.sc-block { background: transparent; border-color: transparent; cursor: default; }
.simple-crossword .sc-cell.sc-inword { background: var(--sc-same); }
.simple-crossword .sc-cell.sc-selected { background: var(--sc-sel); }
.simple-crossword .sc-cell.sc-wrong { background: var(--sc-bad-bg); }

.simple-crossword .sc-num {
	position: absolute;
	top: 1px;
	left: 2px;
	font-size: max(9px, calc(var(--sc-cell) * .3));
	font-weight: 500;
	line-height: 1;
	color: var(--sc-muted);
	white-space: nowrap;
	pointer-events: none;
}
.simple-crossword .sc-letter {
	font-size: calc(var(--sc-cell) * .6);
	font-weight: 600;
	line-height: 1;
	color: var(--sc-user);
	margin-top: 10%;
}
.simple-crossword .sc-cell.sc-revealed .sc-letter { color: var(--sc-hint); }
.simple-crossword .sc-cell.sc-wrong .sc-letter { color: var(--sc-bad); }

/* Clue lists */
.simple-crossword .sc-col-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sc-muted);
	padding-bottom: 6px;
	margin-bottom: 4px;
	border-bottom: 2px solid var(--sc-line);
}
.simple-crossword .sc-list { list-style: none; margin: 0; padding: 0; }
.simple-crossword .sc-list li {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.35;
	cursor: pointer;
}
.simple-crossword .sc-list li::before,
.simple-crossword .sc-list li::marker { content: none; }
.simple-crossword .sc-list li:hover { background: var(--sc-btn-hover); }
.simple-crossword .sc-list li.sc-cross { background: var(--sc-peer); }
.simple-crossword .sc-list li.sc-active { background: var(--sc-sel); }
.simple-crossword .sc-cn { font-weight: 700; min-width: 1.6em; text-align: right; flex-shrink: 0; }
.simple-crossword .sc-list li.sc-done .sc-ct { color: var(--sc-muted); }

/* On-screen keyboard: touch devices only */
.simple-crossword .sc-keys { display: none; margin-top: 10px; }
@media (hover: none) and (pointer: coarse) {
	.simple-crossword .sc-keys { display: block; }
}
.simple-crossword .sc-krow { display: flex; gap: 4px; justify-content: center; margin-bottom: 4px; }
.simple-crossword .sc-key { flex: 1 1 0; max-width: 54px; padding: 11px 0; font-size: 16px; font-weight: 600; text-align: center; }
.simple-crossword .sc-key-wide { max-width: 80px; flex-grow: 1.5; }

.simple-crossword .sc-status { min-height: 1.4em; margin-top: 10px; text-align: center; font-size: 15px; color: var(--sc-muted); }
.simple-crossword.sc-solved .sc-status { color: var(--sc-hint); font-weight: 600; }
.simple-crossword.sc-won .sc-board { transform: scale(1.03); }

/* Admin preview: show the layout only */
.simple-crossword.sc-preview { margin: 0; max-width: none; }
.simple-crossword.sc-preview .sc-timer,
.simple-crossword.sc-preview .sc-actions,
.simple-crossword.sc-preview .sc-keys,
.simple-crossword.sc-preview .sc-new,
.simple-crossword.sc-preview .sc-today { display: none !important; }
.simple-crossword.sc-preview .sc-status { text-align: left; color: var(--sc-bad); }

@media (prefers-color-scheme: dark) {
	.simple-crossword.sc-auto-dark {
		--sc-ink: #e6e9ef; --sc-muted: #a0a8b8; --sc-line: #3a4252; --sc-thick: #c9cfdb;
		--sc-bg: #1b1f27; --sc-peer: #242a35; --sc-same: #2c3a52; --sc-sel: #34507e;
		--sc-user: #8ab4f8; --sc-bad: #ff8a80; --sc-bad-bg: #4a2323; --sc-hint: #81c995;
		--sc-btn: #262c37; --sc-btn-hover: #313949;
	}
}