/* Puzzle Brain Puzzles. Colours and fonts come from the theme's presets, with fallbacks so the
   blocks still read correctly if the theme ever changes. */

.pb-puzzle, .pb-answers, .pb-next, .pb-levels, .pb-cards-grid, .pb-teasers, .pb-downloads, .pb-print, .pb-types, .pb-season, .pb-jump {
	--pb-ink: var(--wp--preset--color--ink, #16202B);
	--pb-ink-soft: var(--wp--preset--color--ink-soft, #3D4B5A);
	--pb-muted: var(--wp--preset--color--muted, #5F6C79);
	--pb-card: var(--wp--preset--color--card, #FFFFFF);
	--pb-paper: var(--wp--preset--color--paper, #F1F2EE);
	--pb-line: var(--wp--preset--color--grid-line, #B8C0C6);
	--pb-rule: var(--wp--preset--color--rule, #CFD5D8);
	--pb-red: var(--wp--preset--color--red, #CE3626);
	--pb-blue: var(--wp--preset--color--blue, #17568F);
	--pb-marker: var(--wp--preset--color--marker, #FFD43B);
	--pb-mono: var(--wp--preset--font-family--mono, "Roboto Mono", ui-monospace, monospace);
	--pb-display: var(--wp--preset--font-family--display, "Archivo Black", Impact, sans-serif);
}

/* ------------------------------------------------------------------ labels */

.pb-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.pb-pill {
	font-family: var(--pb-mono); font-weight: 700; font-size: 0.75rem; line-height: 1.4;
	letter-spacing: 0.08em; text-transform: uppercase;
	padding: 0.2em 0.55em; border: 2px solid var(--pb-ink); background: var(--pb-card); color: var(--pb-ink);
}
.pb-pill-easy { border-color: var(--pb-blue); color: var(--pb-blue); }
.pb-pill-medium { border-color: var(--pb-ink-soft); color: var(--pb-ink-soft); }
.pb-pill-hard { border-color: var(--pb-red); color: var(--pb-red); }
.pb-pill-lp { background: var(--pb-ink); color: var(--pb-paper); }

/* ------------------------------------------------------------------ buttons */

.pb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; margin: 1.2rem 0 1rem; }
.pb-btn { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; text-decoration: none; }
.pb-btn svg { width: 1.05em; height: 1.05em; flex: none; }
.wp-element-button.pb-btn-secondary {
	background: var(--pb-card); color: var(--pb-ink); border-color: var(--pb-ink);
}
.wp-element-button.pb-btn-secondary:hover { background: var(--pb-paper); color: var(--pb-ink); border-color: var(--pb-ink); }
.pb-note { flex-basis: 100%; margin: 0; color: var(--pb-muted); font-size: 0.92rem; }

/* ------------------------------------------------------------------ the board */

.pb-board {
	background: var(--pb-card); border: 3px solid var(--pb-ink); padding: 1.4rem;
	display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; gap: 1.5rem; align-items: start;
}
.pb-board.pb-lp { grid-template-columns: minmax(0, 1fr) 15rem; }
.pb-board.pb-board-list { grid-template-columns: 1fr; }
@media (max-width: 46rem) {
	.pb-board, .pb-board.pb-lp { grid-template-columns: 1fr; padding: 0.75rem; gap: 1rem; }
}

.pb-grid {
	display: grid; grid-template-columns: repeat(var(--pb-n), 1fr); gap: 1px;
	background: var(--pb-line); border: 2px solid var(--pb-ink); width: 100%; max-width: 40rem;
}
.pb-grid b {
	background: var(--pb-card); aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
	font-family: var(--pb-mono); font-weight: 500; color: var(--pb-ink);
	font-size: clamp(0.75rem, calc(min(100vw, 42rem) / var(--pb-n) * 0.42), 1.2rem);
}
.pb-grid.pb-lp b { font-weight: 700; font-size: clamp(1.15rem, calc(min(100vw, 42rem) / var(--pb-n) * 0.5), 2rem); }
.pb-grid b.pb-found { background: var(--pb-marker); font-weight: 700; }

.pb-words-head { font-size: 0.95rem !important; margin: 0 0 0.5rem; }
.pb-words ul {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem 0.8rem;
	font-family: var(--pb-mono); font-size: 0.85rem; letter-spacing: 0.03em;
}
.pb-lp .pb-words ul { font-size: 1.15rem; font-weight: 700; gap: 0.35rem 0.8rem; }
@media (max-width: 46rem) { .pb-words ul { grid-template-columns: 1fr 1fr; } }

.pb-scramble { list-style: none; margin: 0; padding: 0; display: grid; }
.pb-scramble li {
	display: grid; grid-template-columns: 2rem minmax(0, 11rem) 1fr; gap: 0.8rem; align-items: end;
	padding: 0.7rem 0; border-bottom: 1px solid var(--pb-rule);
}
.pb-scramble .pb-i { font-family: var(--pb-mono); color: var(--pb-muted); font-size: 0.85rem; }
.pb-scramble .pb-w { font-family: var(--pb-mono); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.18em; }
.pb-scramble .pb-line { border-bottom: 2px solid var(--pb-ink); height: 1.3rem; }
.pb-scramble .pb-ans { font-weight: 700; color: var(--pb-blue); }
@media (max-width: 30rem) {
	.pb-scramble li { grid-template-columns: 1.6rem 1fr; }
	.pb-scramble .pb-line, .pb-scramble .pb-ans { grid-column: 2; }
}

/* Mazes */
.pb-maze-wrap { display: grid; gap: 0.35rem; width: 100%; max-width: 40rem; }
.pb-maze { display: block; width: 100%; height: auto; color: var(--pb-ink); }
.pb-maze-label {
	font-family: var(--pb-mono); font-weight: 700; font-size: 0.8rem;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--pb-muted);
}
.pb-maze-finish { justify-self: end; }
.pb-maze-path { stroke: var(--pb-red); opacity: 0.85; }
.pb-crop.pb-crop-maze { display: block; background: var(--pb-card); border: 0; padding: 0.3rem; }
.pb-maze-mini { display: block; width: 100%; height: auto; color: var(--pb-ink-soft); }

.pb-content .pb-context { color: var(--wp--preset--color--ink-soft, #3D4B5A); margin-top: 1.1rem; max-width: 40rem; }

/* ------------------------------------------------------------------ answers */

.pb-answers { margin-top: 1.3rem; }
.pb-answers summary {
	cursor: pointer; list-style: none; display: inline-flex; align-items: center;
	font-family: var(--pb-display); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.03em;
	border: 3px solid var(--pb-ink); padding: 0.6em 1.1em; background: var(--pb-paper); color: var(--pb-ink);
}
.pb-answers summary::-webkit-details-marker { display: none; }
.pb-answers summary::before { content: "+"; margin-right: 0.6em; }
.pb-answers[open] summary::before { content: "\2212"; }
.pb-answers-inner { margin-top: 1rem; max-width: 30rem; }

/* ------------------------------------------------------------------ where next */

.pb-next { margin-top: 2.8rem; }
.pb-next-head {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem;
	border-bottom: 3px solid var(--pb-ink); padding-bottom: 0.35rem; margin: 0 0 1.1rem;
}
.pb-next .pb-sec-head { margin: 0; font-size: var(--wp--preset--font-size--x-large, 1.5rem); }
.pb-surprise { font-weight: 700; color: var(--pb-ink); }
.pb-surprise::after { content: " →"; }
.pb-next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }
.pb-next-card {
	display: grid; align-content: start; gap: 0.35rem;
	background: var(--pb-card); border: 2px solid var(--pb-ink); padding: 0.9rem 1rem;
	text-decoration: none; color: var(--pb-ink);
}
.pb-next-card:hover { border-color: var(--pb-red); color: var(--pb-ink); }
.pb-next-card .pb-step { color: var(--pb-red); }
.pb-next-title { font-family: var(--pb-display); text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; }
.pb-next-why { color: var(--pb-muted); font-size: 0.95rem; }

/* ------------------------------------------------------------------ lists and cards */

.pb-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.9rem; }
.pb-card-link {
	display: grid; align-content: start; gap: 0.55rem;
	background: var(--pb-card); border: 2px solid var(--pb-ink); padding: 0.8rem;
	text-decoration: none; color: var(--pb-ink);
}
.pb-card-link:hover { border-color: var(--pb-red); color: var(--pb-ink); }
.pb-card-title { font-family: var(--pb-display); text-transform: uppercase; font-size: 0.98rem; line-height: 1.1; }
.pb-crop { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--pb-line); border: 1px solid var(--pb-line); }
.pb-crop i {
	background: var(--pb-card); font-style: normal; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
	font-family: var(--pb-mono); font-size: 0.75rem; color: var(--pb-ink-soft);
}
.pb-crop.pb-crop-words { grid-template-columns: 1fr; background: none; border: 0; gap: 0.15rem; }
.pb-crop.pb-crop-words i { aspect-ratio: auto; justify-content: flex-start; background: none; letter-spacing: 0.16em; font-weight: 700; font-size: 0.85rem; }

.pb-level + .pb-level { margin-top: 1.8rem; }
.pb-level-head {
	display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.8rem;
	font-size: 1rem !important;
}

.pb-missing, .pb-empty { color: var(--wp--preset--color--muted, #5F6C79); }

/* ------------------------------------------------------------------ print
   US Letter, laid out inside the area Letter and A4 share (8.27in by 11in) so one sheet prints
   on either without clipping. Black on white, no fills except the pale answer highlight. */

.pb-print { display: none; }

@media print {
	@page { size: letter; margin: 0.5in; }
	body.pb-has-print { background: #fff !important; color: #000; margin: 0; padding: 0; }
	body.pb-has-print .wp-site-blocks,
	body.pb-has-print #wpadminbar { display: none !important; }
	html { margin-top: 0 !important; }
	body.pb-has-print .pb-print { display: block !important; }
	body.pb-has-print:not(.pb-printing-answers) .pb-sheet-answers,
	body.pb-has-print.pb-printing-answers .pb-sheet-puzzle { display: none; }

	.pb-sheet {
		width: 7.2in; height: 9.9in; margin: 0 auto; display: flex; flex-direction: column; gap: 0.18in;
		font-family: "Source Sans 3", Arial, sans-serif; color: #000;
	}
	.pb-sheet-head {
		display: flex; justify-content: space-between; border-bottom: 2pt solid #000; padding-bottom: 4pt;
		font: 700 9pt "Roboto Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
	}
	.pb-sheet-title { font: 400 22pt/1.05 "Archivo Black", Impact, sans-serif; text-transform: uppercase; margin: 0; }
	.pb-sheet-meta { font: 700 9pt "Roboto Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3pt; }
	.pb-sheet-grid { width: var(--pb-w); margin: 0 auto; }
	.pb-pgrid { display: grid; grid-template-columns: repeat(var(--pb-n), 1fr); border: 1.5pt solid #000; }
	.pb-pgrid b {
		aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
		border-right: 0.5pt solid #999; border-bottom: 0.5pt solid #999;
		font: 500 calc(var(--pb-w) / var(--pb-n) * 0.5) "Roboto Mono", monospace;
	}
	.pb-pgrid.pb-lp b { font: 700 calc(var(--pb-w) / var(--pb-n) * 0.6) "Source Sans 3", Arial, sans-serif; }
	.pb-pgrid b.pb-found { background: #ddd; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.pb-sheet-words { columns: 3; list-style: none; margin: 0; padding: 0; font: 500 11pt "Roboto Mono", monospace; letter-spacing: 0.04em; }
	.pb-sheet-words.pb-lp { columns: 2; font-size: 15pt; font-weight: 700; }
	.pb-sheet-scramble { list-style: none; margin: 0.15in 0 0; padding: 0; display: grid; gap: 26pt; }
	.pb-sheet-scramble li { display: grid; grid-template-columns: 0.4in 2.5in 1fr; align-items: end; font-size: 13pt; }
	.pb-sheet-scramble .pb-w { font: 700 17pt "Roboto Mono", monospace; letter-spacing: 0.16em; }
	.pb-sheet-scramble .pb-line { border-bottom: 1pt solid #000; height: 16pt; }
	.pb-sheet-maze { width: var(--pb-w); margin: 0 auto; }
	.pb-sheet-maze .pb-maze-wrap { max-width: none; }
	.pb-sheet-maze .pb-maze { color: #000; }
	.pb-sheet-maze .pb-maze-label { color: #000; font-size: 9pt; }
	.pb-sheet-maze .pb-maze-path { stroke: #9a9a9a; opacity: 1; }
	.pb-sheet-foot { margin-top: auto; text-align: center; font-size: 9pt; border-top: 0.5pt solid #999; padding-top: 4pt; }
}


/* ------------------------------------------------------------------ theme colour and sheets
   Added 2026-09-14. The accent is a border, never text. The sheet pictures sit at a slight
   angle, like pages put down on a table, alternating left and right along a row. */

.pb-board { border-top: 8px solid var(--pb-accent, var(--pb-ink)); }
.pb-card-link, .pb-next-card { border-top: 6px solid var(--pb-accent, var(--pb-ink)); }

.pb-thumb { display: block; padding: 0.6rem 0.8rem 0.2rem; }
.pb-thumb img {
	display: block; width: 100%; height: auto; background: #fff;
	border: 1px solid #D5DADD; box-shadow: 0 6px 14px rgba(22, 32, 43, 0.16);
	transform: rotate(-2deg); transition: transform 0.2s ease;
}
.pb-cards-grid > a:nth-child(even) .pb-thumb img,
.pb-next-grid > a:nth-child(even) .pb-thumb img { transform: rotate(1.6deg); }
/* Hover must beat the even-card tilt above, which is more specific than a plain :hover rule. It
   was not, and on 2026-09-14 Rhys spotted that cards in columns 2 and 4 never straightened. */
.pb-cards-grid > a:hover .pb-thumb img,
.pb-next-grid > a:hover .pb-thumb img,
.pb-cards-grid > a:nth-child(even):hover .pb-thumb img,
.pb-next-grid > a:nth-child(even):hover .pb-thumb img,
.pb-card-link:hover .pb-thumb img, .pb-next-card:hover .pb-thumb img { transform: rotate(0deg); }

.pb-thumb-small { width: 6.5rem; padding: 0.3rem 0.4rem 0.5rem; }

/* On a written puzzle, a picture of what prints sits beside the download buttons. Wide screens
   only: on a phone the buttons come first and a picture would push the puzzle further down. */
.pb-downloads { display: flex; align-items: center; gap: 1rem 2rem; }
.pb-downloads > .pb-actions { flex: 1; margin-block: 1rem; }
.pb-thumb-preview { display: none; }
@media (min-width: 60rem) {
	.pb-thumb-preview { display: block; flex: none; width: 7rem; padding: 0.4rem 0.6rem; }
	.pb-thumb-preview img { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .pb-thumb img { transition: none; } }
@media print { .pb-thumb { display: none !important; } }


/* ------------------------------------------------------------------ cryptograms */

.pb-crypt { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; font-family: var(--pb-mono); }
.pb-cw { display: inline-flex; gap: 0.15rem; white-space: nowrap; align-items: flex-end; }
.pb-cc { display: inline-grid; justify-items: center; width: 1.7rem; }
.pb-cc-slot {
	display: block; width: 100%; height: 1.9rem; line-height: 1.9rem; text-align: center;
	border-bottom: 2px solid var(--pb-ink); font-size: 1.2rem; font-weight: 700; color: var(--pb-blue);
}
.pb-cc-slot.pb-solved { color: var(--pb-red); }
.pb-cc i { font-style: normal; font-size: 0.9rem; font-weight: 500; color: var(--pb-ink-soft); padding-top: 0.15rem; }
.pb-cp { font-size: 1.2rem; font-weight: 700; padding: 0 0.1rem 1.1rem; }
.pb-crypt-credit { margin: 1.2rem 0 0; color: var(--pb-muted); }
.pb-crypt-key {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(1.9rem, 1fr)); gap: 0.25rem;
	margin-top: 1.4rem; font-family: var(--pb-mono); align-items: end;
}
.pb-crypt-key-label { grid-column: 1 / -1; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pb-muted); }
.pb-crypt-key-label br { display: none; }
.pb-crypt-key > span:not(.pb-crypt-key-label) { display: grid; text-align: center; border: 1px solid var(--pb-rule); }
.pb-crypt-key i { font-style: normal; font-size: 0.8rem; background: var(--pb-paper); color: var(--pb-ink-soft); }
.pb-crypt-key b { height: 1.6rem; line-height: 1.6rem; font-size: 1rem; color: var(--pb-blue); }
@media (max-width: 30rem) { .pb-cc { width: 1.35rem; } .pb-cc-slot { font-size: 1rem; } }

/* ------------------------------------------------------------------ sudoku */

.pb-sudoku {
	display: grid; grid-template-columns: repeat(var(--pb-cols), minmax(0, 1fr)); gap: 3px;
	width: 100%; max-width: 32rem; background: var(--pb-ink); border: 3px solid var(--pb-ink);
}
.pb-sbox { display: grid; grid-template-columns: repeat(var(--pb-bc), minmax(0, 1fr)); gap: 1px; background: var(--pb-line); }
.pb-sudoku b {
	aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--pb-card);
	font-family: var(--wp--preset--font-family--body, sans-serif); font-weight: 400;
	font-size: clamp(1rem, calc(min(100vw, 32rem) / var(--pb-n) * 0.5), 1.7rem); color: var(--pb-ink);
}
.pb-sudoku b.pb-given { font-weight: 700; }
.pb-sudoku b.pb-solved { color: var(--pb-blue); }
.pb-lp .pb-sudoku { max-width: 40rem; }
.pb-lp .pb-sudoku b { font-size: clamp(1.15rem, calc(min(100vw, 40rem) / var(--pb-n) * 0.6), 2.3rem); }
.pb-rules { margin: 1rem 0 0; color: var(--pb-ink-soft); max-width: 32rem; }

@media print {
	.pb-sheet-crypt { width: 7.2in; }
	.pb-sheet-crypt .pb-crypt { gap: 14pt 18pt; }
	.pb-sheet-crypt .pb-cc { width: 0.34in; }
	.pb-sheet-crypt .pb-cc-slot { height: 0.38in; line-height: 0.38in; font-size: 15pt; color: #000; border-bottom-color: #000; }
	.pb-sheet-crypt .pb-cc-slot.pb-solved { color: #000; }
	.pb-sheet-crypt .pb-cc i { font-size: 11pt; color: #000; }
	.pb-sheet-crypt .pb-cp { font-size: 15pt; }
	.pb-sheet-crypt .pb-crypt-credit { font-size: 11pt; color: #000; }
	.pb-sheet-crypt .pb-crypt-key { grid-template-columns: repeat(13, 1fr); margin-top: 18pt; }
	.pb-sheet-crypt .pb-crypt-key i { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #000; font-size: 9pt; }
	.pb-sheet-crypt .pb-crypt-key b { height: 0.3in; line-height: 0.3in; color: #000; }
	.pb-sheet-sudoku { width: var(--pb-w); margin: 0.1in auto 0; }
	.pb-sheet-sudoku .pb-sudoku { max-width: none; border-color: #000; background: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.pb-sheet-sudoku .pb-sbox { background: #999; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.pb-sheet-sudoku .pb-sudoku b { font-size: calc(var(--pb-w) / var(--pb-n) * 0.5); color: #000; background: #fff; }
	.pb-sheet-sudoku .pb-sudoku b.pb-solved { color: #555; font-style: italic; }
	.pb-sheet-sudoku .pb-rules { font-size: 11pt; color: #000; max-width: none; text-align: center; }
}


/* ------------------------------------------------------------------ secret messages */

.pb-pill-secret { background: var(--pb-marker); border-color: var(--pb-ink); }
.pb-secret { margin-top: 1.2rem; }
.pb-secret-label { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--pb-muted); }
.pb-secret-line { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.pb-secret-word { display: inline-flex; gap: 0.35rem; }
.pb-secret-word b {
	display: inline-block; width: 1.15rem; height: 1.6rem; line-height: 1.6rem; text-align: center;
	border-bottom: 2px solid var(--pb-ink); font-family: var(--pb-mono); font-weight: 700; color: var(--pb-blue);
}
.pb-grid b.pb-message-letter { background: var(--pb-paper); color: var(--pb-blue); font-weight: 700; text-decoration: underline; }

@media print {
	.pb-sheet .pb-secret { margin-top: 0; }
	.pb-sheet .pb-secret-label { font-size: 10pt; color: #000; }
	.pb-sheet .pb-secret-word b { width: 0.24in; height: 0.3in; line-height: 0.3in; border-bottom-color: #000; color: #000; font-size: 12pt; }
	.pb-pgrid b.pb-message-letter { text-decoration: underline; font-weight: 700; }
}


/* ------------------------------------------------------------------ code crackers */

/* Squares stay big enough to read the clue numbers. On a narrow phone the grid scrolls sideways
   inside its own box rather than shrinking the numbers below 12px or widening the page. */
.pb-cracker-scroll { overflow-x: auto; max-width: 100%; }
.pb-cracker {
	display: grid; grid-template-columns: repeat(var(--pb-cols), 2.3rem); width: max-content; gap: 0; padding: 1px;
}
@media (min-width: 46rem) { .pb-cracker { grid-template-columns: repeat(var(--pb-cols), 2.9rem); } }
.pb-cracker i { aspect-ratio: 1; }
.pb-cracker b {
	aspect-ratio: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.2rem;
	background: var(--pb-card); border: 1.5px solid var(--pb-ink); margin: -0.75px;
	font-family: var(--pb-mono); font-weight: 700; font-size: 1.1rem; color: var(--pb-blue);
}
.pb-cracker b small {
	position: absolute; top: 2px; left: 3px; font-size: 0.75rem; font-weight: 500; color: var(--pb-ink-soft); line-height: 1;
}
.pb-cracker b.pb-solved span { color: var(--pb-red); }
.pb-cracker-words { margin: 0.5rem 0 0; color: var(--pb-ink-soft); max-width: 40rem; }
.pb-cracker-key { grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr)); }

@media print {
	.pb-sheet-secret { margin-top: 0; }
	.pb-sheet-cracker { display: grid; gap: 6pt; justify-items: center; }
	.pb-sheet-cracker .pb-cracker-scroll { overflow: visible; }
	.pb-sheet-cracker .pb-cracker { grid-template-columns: repeat(var(--pb-cols), var(--pb-cell)); }
	.pb-sheet-cracker .pb-cracker b { padding-bottom: 0.04in; }
	.pb-sheet-cracker .pb-cracker b { border-color: #000; color: #000; font-size: calc(var(--pb-cell) * 0.5); }
	.pb-sheet-cracker .pb-cracker b small { color: #000; font-size: calc(var(--pb-cell) * 0.24); }
	.pb-sheet-cracker .pb-cracker b.pb-solved span { color: #000; }
	.pb-sheet-cracker .pb-rules, .pb-sheet-cracker .pb-cracker-words { font-size: 9.5pt; color: #000; margin: 0; max-width: 7.2in; text-align: center; }
	.pb-sheet-cracker .pb-cracker-key { width: 7.2in; grid-template-columns: repeat(13, 1fr); margin-top: 4pt; }
	.pb-sheet-cracker .pb-crypt-key i { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #000; font-size: 9pt; }
	.pb-sheet-cracker .pb-crypt-key b { height: 0.28in; line-height: 0.28in; color: #000; }
}


/* ------------------------------------------------------------------ homepage and section pages, 2026-09-14
   Small moves only: a sheet on each type tile, an In season row, a theme contents line. */

/* In season: the heading rule takes the season's colour. */
.pb-season { margin-top: 2.4rem; }
.pb-season .pb-season-head { border-bottom: 3px solid var(--pb-accent, var(--pb-ink)); padding-bottom: 0.35rem; margin: 0 0 1.1rem; display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.pb-season .pb-season-head .pb-kicker { color: var(--pb-muted); }

/* Type tiles: the same square card, now with a sheet from that section. */
.pb-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.8rem; }
.pb-type-tile {
	display: grid; grid-template-rows: auto 1fr; align-content: start; background: var(--pb-card);
	border: 2px solid var(--pb-ink); text-decoration: none; color: var(--pb-ink); transition: border-color 0.18s ease;
}
.pb-type-tile:hover { border-color: var(--pb-red); color: var(--pb-ink); }
.pb-type-tile .pb-thumb { padding: 0.7rem 1.6rem 0.2rem; }
.pb-types > a:nth-child(even) .pb-thumb img { transform: rotate(1.6deg); }
.pb-types > a:hover .pb-thumb img, .pb-types > a:nth-child(even):hover .pb-thumb img { transform: rotate(0deg); }
.pb-type-text { display: grid; gap: 0.15rem; padding: 0.6rem 0.85rem 0.8rem; align-content: start; }
.pb-type-text strong { font-family: var(--pb-display); font-weight: 400; text-transform: uppercase; font-size: 1rem; line-height: 1.1; }
.pb-type-text > span { color: var(--pb-muted); font-size: 0.92rem; }
.pb-type-count { font-family: var(--pb-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pb-ink-soft); margin-top: 0.2rem; }
.pb-type-surprise { background: var(--pb-ink); border-color: var(--pb-ink); align-content: end; min-height: 8rem; }
.pb-type-surprise .pb-type-text strong { color: var(--pb-marker); }
.pb-type-surprise .pb-type-text > span { color: var(--pb-paper); }

/* Theme quick-jump: a contents line, not buttons. */
.pb-jump { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0 0 1.6rem; font-family: var(--pb-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pb-jump a { color: var(--pb-ink-soft); text-decoration: none; border-bottom: 3px solid transparent; padding-bottom: 0.1rem; transition: border-color 0.18s ease; }
.pb-jump a:hover { border-bottom-color: var(--pb-accent, var(--pb-red)); color: var(--pb-ink); }
.pb-jump a[aria-current] { color: var(--pb-ink); border-bottom-color: var(--pb-accent, var(--pb-ink)); }

/* Phones: two cards to a row, so a sheet picture is not taller than the screen, and the theme
   contents line becomes one line you swipe sideways instead of eleven lines of links. */
@media (max-width: 46rem) {
	.pb-cards-grid, .pb-types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
	.pb-card-link { padding: 0.5rem; }
	.pb-card-link .pb-card-title, .pb-type-text strong { font-size: 0.85rem; }
	.pb-type-tile .pb-thumb { padding: 0.5rem 0.9rem 0.1rem; }
	.pb-type-text { padding: 0.5rem 0.6rem 0.7rem; }
	.pb-type-text > span { font-size: 0.85rem; }
	.pb-jump { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-bottom: 0.4rem; margin-right: -1.25rem; padding-right: 1.25rem; }
}

/* Bigger tap targets on phones for the theme contents line, without changing how it looks. */
@media (max-width: 46rem) {
	.pb-jump a { padding-block: 0.45rem 0.35rem; }
}