/* The Mini — engine styles (games build spec §C "The Mini"). Loaded after
 * shell.css, only on the Mini page (RTG_Game_Mini::enqueue()).
 *
 * TOKENS ONLY: --wp--preset--color--{base,contrast,muted,border,light,
 * clay-dark} and the serif family. No radii, no shadows, no fills beyond:
 * black blocks, the current word in `light`, the current square outlined
 * 2px in `contrast`. One theme selector: Terminal's `light` (#10180f) is
 * indistinguishable from its ground (#0a0f0a), so there the current word
 * uses the `border` token instead (see the end of this sheet).
 *
 * Phone (390×844): the page opens at the top with the puzzle live (no Play
 * step, no 100svh stage). Bar 44 · grid the full column (342px under the
 * theme's gutters) · clue bar 56 · keys 168 stack in natural order under the
 * how-to lines; the keys start just below the fold, by design.
 *
 * Finished (.is-done, set by mini.js on complete() and on a reload of a
 * finished week): the solved grid stays, read-only; the keys, the clue bar
 * and Check/Reveal fold away, so the result card sits right under the grid.
 */

.rtg-mini {
	--mini-ink: var(--wp--preset--color--contrast);
	--mini-ground: var(--wp--preset--color--base);
	--mini-word: var(--wp--preset--color--light);
	--mini-bar: 44px;
	--mini-clue: 56px;
	--mini-keys: 168px;
	--mini-key-h: 50px;
	--mini-gap: 6px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--mini-ink);
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", Times, serif);
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}
.rtg-mini:focus-visible {
	outline: 2px solid var(--wp--preset--color--clay-dark);
	outline-offset: 4px;
}

.rtg-mini button {
	font-family: inherit;
	border-radius: 0;
	touch-action: manipulation;
	cursor: pointer;
}

/* -- toolbar -------------------------------------------------------------- */

.rtg-mini-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--mini-bar);
	flex: 0 0 auto;
}
.rtg-mini-tool,
.rtg-mini-menu-item {
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 600;
	min-height: 44px;
	min-width: 44px;
	padding: 0 .9rem;
	background: var(--mini-ground);
	color: var(--mini-ink);
	border: 1px solid var(--mini-ink);
}
.rtg-mini-tool.is-on,
.rtg-mini-tool[aria-pressed="true"] {
	background: var(--mini-ink);
	color: var(--mini-ground);
}
.rtg-mini-status {
	flex: 1 1 auto;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rtg-mini-clock {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}
.rtg-mini-kbtoggle {
	margin-left: 4px;
}
.rtg-mini-menu {
	position: absolute;
	top: calc(var(--mini-bar) + 2px);
	left: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	background: var(--mini-ground);
	border: 1px solid var(--mini-ink);
}
.rtg-mini-menu[hidden] {
	display: none;
}
.rtg-mini-menu-lab {
	padding: 0 .4rem;
	color: var(--wp--preset--color--muted);
}
.rtg-mini-menu-item {
	min-height: 44px;
	min-width: 64px;
}

/* -- grid ----------------------------------------------------------------- */

.rtg-mini-body {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	align-items: flex-start;
}
.rtg-mini-gridbox {
	width: min(100%, 420px);
	flex: 0 0 auto;
	container-type: inline-size;
}
.rtg-mini-grid {
	display: grid;
	grid-template-columns: repeat(var(--rtg-mini-cols, 5), 1fr);
	border-top: 1px solid var(--mini-ink);
	border-left: 1px solid var(--mini-ink);
	background: var(--mini-ground);
}
.rtg-mini-row {
	display: contents;
}
.rtg-mini-cell {
	position: relative;
	aspect-ratio: 1 / 1;
	border-right: 1px solid var(--mini-ink);
	border-bottom: 1px solid var(--mini-ink);
	background: var(--mini-ground);
	cursor: pointer;
	touch-action: manipulation;
	overflow: hidden;
}
.rtg-mini-cell.is-block {
	background: var(--mini-ink);
	cursor: default;
}
.rtg-mini-cell.is-word {
	background: var(--mini-word);
}
.rtg-mini-cell.is-cur {
	outline: 2px solid var(--mini-ink);
	outline-offset: -2px;
	z-index: 1;
}
.rtg-mini-num {
	position: absolute;
	top: 2px;
	left: 3px;
	font-size: 12px;
	font-size: max(10px, 3.2cqw);
	line-height: 1;
}
.rtg-mini-letter {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 8%;
	font-size: 30px;
	font-size: 11cqw;
	line-height: 1;
	text-transform: uppercase;
}

/* Checked-wrong: a slash through the square (never colour alone). */
.rtg-mini-cell.is-wrong::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, transparent calc(50% - 1px), var(--mini-ink) calc(50% - 1px), var(--mini-ink) calc(50% + 1px), transparent calc(50% + 1px));
	pointer-events: none;
}
/* Revealed: a corner flag, top right. */
.rtg-mini-cell.is-revealed::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-style: solid;
	border-width: 0 10px 10px 0;
	border-color: transparent var(--mini-ink) transparent transparent;
	pointer-events: none;
}

/* -- clue lists (desktop only) ------------------------------------------------ */

.rtg-mini-lists {
	display: none;
	flex: 1 1 240px;
	min-width: 0;
	gap: 20px;
}
.rtg-mini-list {
	flex: 1 1 0;
	min-width: 0;
}
.rtg-mini-list h3 {
	margin: 0 0 .4rem;
	padding-bottom: .3rem;
	border-bottom: 1px solid var(--mini-ink);
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.rtg-mini-list ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rtg-mini-list li {
	border-bottom: 1px solid var(--wp--preset--color--border, #bbb);
}
.rtg-mini-clueitem {
	display: flex;
	gap: .5rem;
	width: 100%;
	text-align: left;
	padding: .4rem .3rem;
	background: none;
	border: 0;
	color: var(--mini-ink);
	font-size: 16px;
	line-height: 1.35;
}
.rtg-mini-clueitem-n {
	font-weight: 700;
	min-width: 1.2em;
}
.rtg-mini-clueitem.is-cur {
	background: var(--mini-word);
}

/* -- clue bar ------------------------------------------------------------------ */

.rtg-mini-cluebar {
	display: flex;
	align-items: stretch;
	height: var(--mini-clue);
	flex: 0 0 auto;
	border-top: 1px solid var(--mini-ink);
	border-bottom: 1px solid var(--mini-ink);
}
.rtg-mini-arrow {
	flex: 0 0 44px;
	min-height: 44px;
	background: var(--mini-ground);
	color: var(--mini-ink);
	border: 0;
	font-size: 28px;
	line-height: 1;
	padding: 0;
}
.rtg-mini-clue {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: 0 .5rem;
	background: var(--mini-word);
	color: var(--mini-ink);
	border: 0;
	border-left: 1px solid var(--mini-ink);
	border-right: 1px solid var(--mini-ink);
	text-align: left;
}
.rtg-mini-clue-n {
	flex: 0 0 auto;
	font-size: 13px;
	letter-spacing: .06em;
	font-weight: 700;
}
.rtg-mini-clue-t {
	font-size: 17px;
	line-height: 1.25;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* -- on-screen keyboard -------------------------------------------------------------- */

.rtg-mini-kb {
	display: none;
	flex-direction: column;
	gap: var(--mini-gap);
	flex: 0 0 auto;
	padding-bottom: 4px;
}
.rtg-mini.is-kb-on .rtg-mini-kb {
	display: flex;
}
.rtg-mini-kbrow {
	display: flex;
	gap: 4px;
}
.rtg-mini-kbrow--2 {
	padding: 0 4.8%;
}
.rtg-mini-key {
	flex: 1 1 0;
	min-width: 0;
	height: var(--mini-key-h);
	min-height: 44px;
	padding: 0;
	background: var(--mini-ground);
	color: var(--mini-ink);
	border: 1px solid var(--mini-ink);
	font-size: 18px;
	text-transform: uppercase;
	touch-action: manipulation;
}
.rtg-mini-key--bs {
	flex: 1.6 1 0;
	min-width: 44px;
	font-size: 20px;
}
.rtg-mini-key:active {
	background: var(--mini-ink);
	color: var(--mini-ground);
}

/* Phones and touch screens: the keyboard is always there, the lists and the
   desktop toggle are not, and the clue bar + keys pin to the stage foot. */
@media (pointer: coarse), (max-width: 640px) {
	.rtg-mini-kb {
		display: flex;
	}
	.rtg-mini-kbtoggle {
		display: none;
	}
}
@media (max-width: 640px) {
	/* 4px, not 8: at 390×844 that keeps the clue bar on the first screen,
	   under the full-width grid (the keys start just below the fold). */
	.rtg-mini {
		gap: 4px;
	}
	.rtg-mini-body {
		justify-content: center;
	}
}
@media (min-width: 641px) {
	.rtg-mini-lists {
		display: flex;
	}
	.rtg-mini-gridbox {
		width: min(100%, 380px);
	}
}
/* Owner, 2026-09-21 "rethink": the grid | clues pair had room to spare once
   the column widened past the 760px prose measure — let the grid (and its
   cqw-sized letters/numbers) grow with it. */
@media (min-width: 1024px) {
	.rtg-mini-gridbox {
		width: min(46%, 460px);
	}
}

/* -- finished: the solved grid, read-only ----------------------------------------- */

.rtg-mini.is-done .rtg-mini-kb,
.rtg-mini.is-done .rtg-mini-cluebar,
.rtg-mini.is-done .rtg-mini-tool,
.rtg-mini.is-done .rtg-mini-menu {
	display: none;
}
.rtg-mini.is-done .rtg-mini-status {
	color: var(--mini-ink);
}
.rtg-mini.is-done .rtg-mini-cell,
.rtg-mini.is-done .rtg-mini-clueitem {
	cursor: default;
}
.rtg-mini.is-done .rtg-mini-grid,
.rtg-mini.is-done .rtg-mini-cell {
	touch-action: auto;
}

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

/* 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.rtg-mini-empty {
	margin-bottom: 0;
}

/* Terminal: `light` sits one shade off the ground, so the current word and
 * the clue bar would vanish. Its `border` green (#1f5f2f) under the phosphor
 * letters (5.6:1) keeps the word visible; nothing else needs a theme rule. */
html[data-rt-theme="terminal"] .rtg-mini {
	--mini-word: var(--wp--preset--color--border);
}