/* Letterpress — engine CSS (games build spec §C). Loaded after shell.css as
 * a dependency, so it may override the shared chrome.
 *
 * TOKENS ONLY. Times stack, black on white, 1px rules, no radii, no
 * shadows, no fills beyond the site's own inverted-button idiom (the
 * active/selected state swaps background/foreground, same as the site's button idiom).
 * The center letter key is inverted permanently, matching the design brief
 * ("center letter inverted: black ground, white letter").
 */

.rtgl {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: .75rem 0 1rem;
	max-width: 26em;
}
/* Owner, 2026-09-21 "rethink": a little more room at desktop, once the
   column widened past the 760px prose measure — the keys and word lists
   scale with the container. */
@media (min-width: 1024px) {
	.rtgl {
		max-width: 30em;
	}
}

.rtgl-toolbar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
}

.rtgl-seed {
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}
.rtgl-seed .lab {
	color: var(--wp--preset--color--muted);
}

/* Mirrors the shell's own header timer (shell.js), beside the keys. */
.rtgl-timer {
	margin: 0;
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
}

/* -- current word -------------------------------------------------------- */

.rtgl-word {
	margin: 0;
	min-height: 2.4rem;
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1.75rem;
	letter-spacing: .06em;
	line-height: 2.4rem;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.rtgl-msg {
	margin: 0;
	min-height: 1.2em;
	font-size: 15px;
	letter-spacing: .02em;
	color: var(--wp--preset--color--clay-dark);
}

/* -- the seven keys -------------------------------------------------------- */

/* One ruled row: the keys share their 1px borders (no gaps), so seven
 * square keys stay ≥ 48px on a 390px phone (342px column → ~49.7px). */
.rtgl-keys {
	display: flex;
	gap: 0;
	justify-content: center;
}
.rtgl-key + .rtgl-key {
	margin-left: -1px;
}

.rtgl-key {
	flex: 1 1 0;
	aspect-ratio: 1 / 1;
	min-width: 44px;
	min-height: 48px;
	box-sizing: border-box;
	position: relative;
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1.35rem;
	font-weight: 700;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.rtgl-key:focus-visible {
	background: var(--wp--preset--color--light);
}
.rtgl-key--center {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}
.rtgl-key--center:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	opacity: .85;
}

/* Pressed (touch, mouse or the physical keyboard, see flash() in the JS):
 * an inner ring in the key's own text colour, so it reads on the plain keys
 * and on the inverted center key alike, in every theme. */
.rtgl-key.is-pressed,
.rtgl-ctrl-btn.is-pressed {
	outline: 2px solid currentColor;
	outline-offset: -6px;
}
.rtgl-key.is-pressed {
	background: var(--wp--preset--color--light);
	z-index: 1;
}
.rtgl-key--center.is-pressed {
	background: var(--wp--preset--color--contrast);
}

/* -- Delete / Shuffle / Enter ---------------------------------------------- */

.rtgl-controls {
	display: flex;
	gap: .5rem;
}

.rtgl-ctrl-btn {
	flex: 1 1 0;
	min-height: 44px;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 600;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.rtgl-ctrl-btn:focus-visible {
	background: var(--wp--preset--color--light);
}
.rtgl-ctrl-btn--enter {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}
.rtgl-ctrl-btn--enter:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}


/* Hover only where there is a real hover (a tapped button on a phone
 * would otherwise keep its hover look, e.g. Enter losing its inversion). */
@media (hover: hover) {
	.rtgl-key:hover {
		background: var(--wp--preset--color--light);
	}
	.rtgl-key--center:hover {
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
		opacity: .85;
	}
	.rtgl-ctrl-btn:hover {
		background: var(--wp--preset--color--light);
	}
	.rtgl-ctrl-btn--enter:hover {
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
	}
	.rtgl-done-btn:hover {
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
	}
}

/* -- rank ladder: a ruled line with tick marks ----------------------------- */

.rtgl-rank {
	margin-top: .25rem;
}
.rtgl-rank-line {
	margin: 0 0 .4rem;
	color: var(--wp--preset--color--contrast);
}
.rtgl-rank-track {
	position: relative;
	height: 14px;
	border-top: 1px solid var(--wp--preset--color--contrast);
}
.rtgl-rank-fill {
	position: absolute;
	left: 0;
	top: -2px;
	height: 3px;
	width: 0;
	background: var(--wp--preset--color--contrast);
}
.rtgl-tick {
	position: absolute;
	top: 0;
	width: 1px;
	height: 6px;
	background: var(--wp--preset--color--contrast);
	transform: translateX(-.5px);
}
.rtgl-rank-marker {
	position: absolute;
	top: 4px;
	transform: translateX(-50%);
	font-size: 10px;
	line-height: 1;
	color: var(--wp--preset--color--clay-dark);
}

/* -- found words + I'm done ------------------------------------------------- */

.rtgl-found-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--wp--preset--color--border, #bbb);
	padding-top: .5rem;
}
.rtgl-found {
	flex: 1 1 auto;
	min-width: 0;
}
.rtgl-found summary {
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
	min-height: 44px;
	display: flex;
	align-items: center;
}
.rtgl-found summary::before {
	content: "+";
	display: inline-block;
	width: 1.1em;
}
.rtgl-found[open] summary::before {
	content: "−";
}
.rtgl-found summary::-webkit-details-marker {
	display: none;
}
.rtgl-found-list {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	max-height: 7.5em;
	overflow-y: auto;
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1rem;
	columns: 2;
}
.rtgl-found-list li {
	break-inside: avoid;
}

.rtgl-done-btn {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 .75rem;
	background: none;
	border: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	border-radius: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.rtgl-done-btn:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* -- finished: locked controls, the ladder, found + missed words ------------ */

.rtgl button:disabled {
	cursor: default;
	border-style: dashed;
	opacity: .55;
}
.rtgl .rtgl-key--center:disabled {
	border-style: solid;
	opacity: .8;
}
.rtgl button:disabled:hover {
	background: var(--wp--preset--color--base);
}
.rtgl .rtgl-key--center:disabled:hover,
.rtgl .rtgl-ctrl-btn--enter:disabled:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.rtgl.is-ended .rtgl-word {
	display: none;
}

.rtgl-ladder {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: .6rem 0 0;
	padding: 0;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.rtgl-ladder li {
	padding: .2rem .4rem;
	border: 1px solid var(--wp--preset--color--border, #bbb);
	color: var(--wp--preset--color--contrast);
}
.rtgl-ladder li.is-unreached {
	color: var(--wp--preset--color--muted);
	border-style: dashed;
}
.rtgl-ladder li.is-current {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.rtgl-review {
	border-top: 1px solid var(--wp--preset--color--border, #bbb);
	padding-top: .5rem;
}
.rtg h3.rtgl-review-head {
	margin: .5rem 0 .35rem;
	font-family: inherit;
	color: var(--wp--preset--color--contrast);
}
.rtgl-review-head--missed {
	border-top: 1px solid var(--wp--preset--color--border, #bbb);
	padding-top: .6rem;
}
.rtgl-review-list {
	list-style: none;
	margin: 0 0 .5rem;
	padding: 0;
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1rem;
	columns: 2;
}
.rtgl-review-list li {
	break-inside: avoid;
}
.rtgl-review-found li {
	color: var(--wp--preset--color--contrast);
}
/* Missed words: under their own "Missed" heading, and set in italic muted
 * type with a dotted underline, never marked by colour alone. */
.rtgl-review-missed li.is-missed {
	color: var(--wp--preset--color--muted);
	font-style: italic;
	text-decoration: underline dotted;
	text-underline-offset: .2em;
}
.rtgl-review-list:has(> li.is-none) {
	columns: auto;
}
.rtgl-review-list li.is-none {
	color: var(--wp--preset--color--muted);
	font-style: italic;
	text-decoration: none;
}
.rtgl-tag {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.rtgl-seedline {
	margin: .5rem 0 0;
	font-size: 15px;
	border-top: 1px solid var(--wp--preset--color--border, #bbb);
	padding-top: .5rem;
}

@media (prefers-reduced-motion: reduce) {
	.rtgl * {
		transition: none !important;
	}
}

/* -- small screens: keep everything inside the fold ------------------------- */

@media (max-width: 400px) {
	.rtgl-key {
		font-size: 1.15rem;
	}
}


/* The page template's `.wp-block-post-content p { margin-bottom: 1.4em }`
 * outranks this sheet's single-class rules, which pushed every line of the
 * stage apart once the stage stopped being a 100svh flex column. Restate
 * each paragraph's own bottom margin at a specificity that wins. */
.rtg p.rtgl-msg,
.rtg p.rtgl-seed,
.rtg p.rtgl-timer,
.rtg p.rtgl-word {
	margin-bottom: 0;
}
.rtg p.rtgl-rank-line {
	margin-bottom: .4rem;
}
.rtg p.rtgl-seedline {
	margin-bottom: 0;
}

/* Finished: the collapsed list is gone, "I'm done" (disabled) sits alone. */
.rtgl.is-ended .rtgl-found-row {
	justify-content: flex-end;
}