/**
 * Thickle module styles — Milestone 1D editorial polish.
 *
 * Scoped entirely under .tcf-thickle. Enqueued only on the request
 * where Thickle is the resolved renderer — see class-thickle-module.php.
 *
 * DESIGN TOKENS: this file now defines two layers of custom properties.
 * --tcf-games-* are the shared TCF Games Design System tokens — layout
 * widths, spacing, elevation, accent colors, typography, motion timing
 * — written with forward-looking names so this is what a future
 * Crossword/Style Search/Thread/Stitch stylesheet (or an eventual
 * Quiz visual unification) inherits from, even though today they're
 * still only defined here, scoped under .tcf-thickle. --tcf-thickle-*
 * are local aliases pointing at the --tcf-games-* values, kept so the
 * rest of this file doesn't need a mass find-and-replace just because
 * the shared layer now exists above it. Promoting --tcf-games-* into
 * an actual shared stylesheet loaded by every game module is a
 * reasonable next-milestone step, not something this milestone was
 * asked to build.
 */

.tcf-thickle {
	/* Shared TCF Games Design System tokens */
	--tcf-games-width-wide: 84rem;
	--tcf-games-width-content: 72rem;
	--tcf-games-width-reading: 48rem;

	--tcf-games-color-accent: #00cbc1;
	--tcf-games-color-accent-contrast: #063a37;
	--tcf-games-color-ink: #1a1a1a;
	--tcf-games-color-paper: #ffffff;
	--tcf-games-color-surface: #faf7f2;
	--tcf-games-color-muted: #6b6b6b;
	--tcf-games-color-border: #e2ddd3;
	--tcf-games-color-charcoal: #1c1b1a;
	--tcf-games-color-charcoal-raised: #262421;

	--tcf-games-radius-sm: 6px;
	--tcf-games-radius: 12px;
	--tcf-games-radius-lg: 20px;

	--tcf-games-elevation-card: 0 12px 32px rgba(6, 58, 55, 0.08);
	--tcf-games-elevation-deep: 0 24px 60px rgba(0, 0, 0, 0.32);

	--tcf-games-font-heading: 'Oswald', Impact, 'Arial Narrow', sans-serif;
	/*
	 * Editorial section typography — How to Play, About, Community,
	 * Achievements, Stats, More Games headings. Reserved for content
	 * sections, never interface chrome (titles, buttons, stats, labels,
	 * controls stay on --tcf-games-font-heading). Same non-duplication
	 * approach as Hurricane: referenced by name only, trusting it's
	 * already part of the site's typography system rather than
	 * importing a second copy.
	 */
	--tcf-games-font-editorial: 'Playfair Display', Georgia, 'Times New Roman', serif;
	/*
	 * Reuses whatever Hurricane implementation already exists on the
	 * site for Quiz — this file only references it by name, never
	 * @imports or links it, so there is exactly one place Hurricane is
	 * ever loaded from, whatever that place is. Falls back to a system
	 * cursive font if Hurricane genuinely isn't available anywhere yet.
	 */
	--tcf-games-font-script: 'Hurricane', 'Segoe Script', 'Brush Script MT', cursive;
	--tcf-games-color-script-accent: #e0218a;

	--tcf-games-motion-fast: 150ms;
	--tcf-games-motion-base: 250ms;
	--tcf-games-motion-entrance: 550ms;
	--tcf-games-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/*
	 * Delight Pass v1.0 — durations only used by the new rules in this
	 * file's own "Delight Pass v1.0" section further down. Mirrored by
	 * the Animation object at the top of thickle.js; kept in sync by
	 * hand, since CSS and JS can't share one literal source here. Not
	 * mixed into --tcf-games-motion-* above since those are the
	 * pre-existing, already-tuned page-load/hover tokens this brief
	 * was told not to alter.
	 *
	 * --tcf-thickle-anim-results-line added in Delight Pass 1
	 * (Celebration & Feedback, v1.17.20) — same rationale, new value.
	 */
	--tcf-thickle-anim-flip: 320ms;
	--tcf-thickle-anim-shake: 350ms;
	--tcf-thickle-anim-celebration: 350ms;
	--tcf-thickle-anim-results-entrance: 350ms;
	--tcf-thickle-anim-results-line: 400ms;

	/* Local aliases — see file docblock */
	--tcf-thickle-accent: var(--tcf-games-color-accent);
	--tcf-thickle-accent-contrast: var(--tcf-games-color-accent-contrast);
	--tcf-thickle-ink: var(--tcf-games-color-ink);
	--tcf-thickle-paper: var(--tcf-games-color-paper);
	--tcf-thickle-surface: var(--tcf-games-color-surface);
	--tcf-thickle-muted: var(--tcf-games-color-muted);
	--tcf-thickle-border: var(--tcf-games-color-border);
	--tcf-thickle-correct: #00cbc1;
	--tcf-thickle-present: #ff1cbd;
	--tcf-thickle-absent: #e6e9ed;
	--tcf-thickle-radius: var(--tcf-games-radius);
	--tcf-thickle-radius-lg: var(--tcf-games-radius-lg);
	--tcf-thickle-shadow: var(--tcf-games-elevation-card);
	--tcf-thickle-heading-font: var(--tcf-games-font-heading);
	--tcf-thickle-body-font: inherit;
	--tcf-thickle-script-font: var(--tcf-games-font-script);
	--tcf-thickle-script-color: var(--tcf-games-color-script-accent);

	box-sizing: border-box;
	max-width: var(--tcf-games-width-wide);
	margin: 0 auto;
	padding: 2rem 1.5rem 4rem;
	color: var(--tcf-thickle-ink);
	font-family: var(--tcf-thickle-body-font);
}

.tcf-thickle *,
.tcf-thickle *::before,
.tcf-thickle *::after {
	box-sizing: inherit;
}

.tcf-thickle__notice,
.tcf-thickle__status-notice {
	padding: 3rem 1rem;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Section rhythm
 * ------------------------------------------------------------------ */

.tcf-thickle__hero,
.tcf-thickle__section {
	position: relative;
	max-width: var(--tcf-games-width-content);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3.5rem;
}

.tcf-thickle__section-heading {
	margin: 0 0 1.5rem;
	font-family: var(--tcf-games-font-editorial);
	font-size: 1.7rem;
	font-weight: 700;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Hero — full-width editorial illustration, title and tagline beneath.
 * No stats card, no CTA, no metadata here anymore — see
 * .tcf-thickle__editorial-intro, .tcf-thickle__primary-cta, and
 * .tcf-thickle__meta-list--row further down for where those moved.
 * ------------------------------------------------------------------ */

.tcf-thickle__hero {
	position: relative;
	padding: 1rem 0 0;
	text-align: center;
}

.tcf-thickle__hero-illustration {
	display: block;
	width: 100%;
	max-width: 44rem;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	/* drop-shadow (unlike box-shadow) follows the artwork's actual
	   alpha silhouette, not its rectangular bounding box — this is
	   what keeps a transparent PNG reading as an illustration instead
	   of a boxed photo. */
	filter: drop-shadow(0 22px 40px rgba(6, 58, 55, 0.18));
}

.tcf-thickle__hero-illustration img {
	display: block;
	width: 100%;
	height: auto;
}

.tcf-thickle__hero-copy {
	position: relative;
	z-index: 1;
	max-width: var(--tcf-games-width-reading);
	margin: 0 auto;
}

/* Soft, lightweight editorial layer — two blurred color blobs behind
   the copy, no image assets, no animation. */
.tcf-thickle__hero-decoration {
	position: absolute;
	inset: -2rem -1rem auto -1rem;
	height: 26rem;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.tcf-thickle__hero-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(48px);
	opacity: 0.35;
}

.tcf-thickle__hero-blob--accent {
	top: -4rem;
	right: 10%;
	width: 18rem;
	height: 18rem;
	background: var(--tcf-games-color-accent);
}

.tcf-thickle__hero-blob--script {
	bottom: -6rem;
	left: 5%;
	width: 14rem;
	height: 14rem;
	background: var(--tcf-games-color-script-accent);
	opacity: 0.18;
}

.tcf-thickle__eyebrow {
	margin: 0 0 0.4rem;
	font-family: var(--tcf-games-font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tcf-thickle-accent-contrast);
}

/* ---------------------------------------------------------------------
 * Wordmark — magazine-cover treatment
 * ------------------------------------------------------------------ */

.tcf-thickle__title {
	position: relative;
	display: inline-block;
	margin: 0 0 0.5rem;
	font-family: var(--tcf-games-font-heading);
	font-size: clamp(3.5rem, 10vw, 7rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.tcf-thickle__title-text {
	position: relative;
	z-index: 1;
}

/* A soft brush-stroke smear sitting partially behind the wordmark —
   pure CSS gradient, no image file. Subtle enough not to reduce
   readability; the wordmark text itself is always the top layer. */
.tcf-thickle__title-stroke {
	position: absolute;
	left: -4%;
	right: 18%;
	top: 38%;
	height: 38%;
	background: linear-gradient(100deg, var(--tcf-games-color-script-accent) 0%, var(--tcf-games-color-accent) 100%);
	opacity: 0.16;
	border-radius: 999px;
	transform: rotate(-1.5deg);
	z-index: 0;
}

.tcf-thickle__title-crown {
	position: absolute;
	top: -0.62em;
	right: -1.1em;
	width: 0.85em;
	height: 0.65em;
	color: var(--tcf-games-color-accent);
	transform: rotate(12deg);
	z-index: 1;
}

.tcf-thickle__tagline {
	margin: 0 0 1.25rem;
	font-family: var(--tcf-games-font-script);
	font-size: clamp(1.7rem, 4.2vw, 2.5rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--tcf-thickle-script-color);
}

.tcf-thickle__supporting-copy {
	max-width: var(--tcf-games-width-reading);
	margin: 0 auto 1.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--tcf-thickle-muted);
}

@media (min-width: 900px) {
	.tcf-thickle__supporting-copy {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ---------------------------------------------------------------------
 * Metadata pills with icons
 * ------------------------------------------------------------------ */

.tcf-thickle__meta-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.tcf-thickle__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--tcf-games-color-accent);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--tcf-thickle-accent-contrast);
}

.tcf-thickle__meta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: rgba(0, 203, 193, 0.14);
	color: var(--tcf-games-color-accent-contrast);
}

.tcf-thickle__meta-icon svg {
	width: 62%;
	height: 62%;
}

.tcf-thickle__editorial-intro {
	max-width: var(--tcf-games-width-reading);
	margin: 0 auto 2.5rem;
	text-align: center;
	color: var(--tcf-games-color-ink);
}

.tcf-thickle__editorial-intro-lead {
	font-family: var(--tcf-games-font-editorial);
	font-size: 1.4rem;
	font-style: italic;
	line-height: 1.4;
}

.tcf-thickle__editorial-intro p {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--tcf-thickle-muted);
}

.tcf-thickle__primary-cta {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}

.tcf-thickle__button--large {
	padding: 1rem 3rem;
	font-size: 1.1rem;
}

.tcf-thickle__meta-list--row {
	justify-content: center;
	margin-bottom: 3.5rem;
}

/* ---------------------------------------------------------------------
 * Community strip and avatar stack
 * ------------------------------------------------------------------ */

.tcf-thickle__community-strip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

@media (min-width: 900px) {
	.tcf-thickle__community-strip {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
}

.tcf-thickle__avatar-stack {
	display: flex;
}

.tcf-thickle__avatar {
	width: 2rem;
	height: 2rem;
	margin-left: -0.5rem;
	border: 2px solid var(--tcf-thickle-paper);
	border-radius: 999px;
	background: linear-gradient(135deg, var(--tcf-games-color-accent), var(--tcf-games-color-script-accent));
}

.tcf-thickle__avatar:first-child {
	margin-left: 0;
}

.tcf-thickle__community-copy {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--tcf-thickle-muted);
	text-align: center;
}

.tcf-thickle__community-message {
	display: inline-block;
	margin-top: 0.15rem;
	font-family: var(--tcf-games-font-script);
	font-size: 1.25rem;
	color: var(--tcf-thickle-script-color);
}

/* ---------------------------------------------------------------------
 * Gameplay section — Today's Thickle card + game area, side by side.
 * This is the "true gameplay experience," separated from everything
 * editorial above it per the layout redesign.
 * ------------------------------------------------------------------ */

.tcf-thickle__gameplay-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: start;
	max-width: var(--tcf-games-width-content);
	margin: 0 auto 3.5rem;
}

@media (min-width: 900px) {
	.tcf-thickle__gameplay-section {
		/* ≈20-25% card, ≈75-80% board. */
		grid-template-columns: minmax(15rem, 23%) 1fr;
		gap: 2rem;
	}
}

/* ---------------------------------------------------------------------
 * Today's Thickle card — the stats/metadata card that now lives beside
 * the board in the gameplay section rather than beside the hero copy.
 * ------------------------------------------------------------------ */

.tcf-thickle__today-card {
	position: relative;
	z-index: 1;
	max-width: 20rem;
	margin: 0 auto;
	padding: 1.4rem;
	border-radius: var(--tcf-thickle-radius-lg);
	background: var(--tcf-thickle-paper);
	box-shadow: var(--tcf-games-elevation-card);
	text-align: left;
}

/* Card centers itself within its gameplay-section grid column at
   every breakpoint (mobile: full width, capped by max-width above;
   desktop: fills the ~20-25% column next to the board). */

.tcf-thickle__today-card-title {
	margin: 0 0 0.15rem;
	font-family: var(--tcf-games-font-heading);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tcf-thickle-accent-contrast);
}

.tcf-thickle__today-card-date {
	margin: 0 0 1rem;
	font-size: 0.78rem;
	color: var(--tcf-thickle-muted);
}

.tcf-thickle__today-card-puzzle-number {
	display: block;
}

.tcf-thickle__today-card-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.tcf-thickle__today-card-stat {
	padding: 0.6rem;
	border: 1px solid var(--tcf-thickle-border);
	border-radius: var(--tcf-games-radius-sm);
	text-align: center;
}

.tcf-thickle__today-card-stat-label {
	margin: 0 0 0.3rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tcf-thickle-muted);
}

.tcf-thickle__today-card-stat-value {
	margin: 0;
	font-family: var(--tcf-games-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--tcf-thickle-ink);
}

.tcf-thickle__today-card-stat-caption {
	margin: 0.15rem 0 0;
	font-size: 0.62rem;
	color: var(--tcf-thickle-muted);
}

.tcf-thickle__today-card-difficulty {
	display: flex;
	justify-content: center;
	gap: 0.22rem;
	margin: 0.15rem 0 0;
}

.tcf-thickle__today-card-dot {
	width: 0.48rem;
	height: 0.48rem;
	border-radius: 999px;
	border: 1px solid var(--tcf-games-color-accent);
}

.tcf-thickle__today-card-dot--filled {
	background: var(--tcf-games-color-accent);
}

.tcf-thickle__today-card-cta {
	width: 100%;
	min-height: 40px;
	padding: 0.6rem 1.5rem;
	font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------ */

.tcf-thickle__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.75rem 1.75rem;
	border: 2px solid var(--tcf-games-color-accent);
	border-radius: var(--tcf-thickle-radius);
	font-family: var(--tcf-games-font-heading);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform var(--tcf-games-motion-fast) var(--tcf-games-ease),
		background var(--tcf-games-motion-fast) var(--tcf-games-ease),
		color var(--tcf-games-motion-fast) var(--tcf-games-ease);
}

/*
 * Delight Pass v1.0, item 9 — hover lift for every .tcf-thickle__button
 * (Play Again, Share, More Games, and the "today card" CTA all share
 * this base class). Placed here, before --primary:active and
 * --secondary:active below, so equal-specificity source order gives
 * the tap-scale rules priority over this lift on an actual click
 * (hover and active both matching at once) rather than the two
 * silently fighting over the same `transform` property.
 */
.tcf-thickle__button:hover {
	transform: translateY(-2px);
}

.tcf-thickle__button--primary {
	background: var(--tcf-games-color-accent);
	color: var(--tcf-thickle-accent-contrast);
}

.tcf-thickle__button--primary:hover,
.tcf-thickle__button--primary:focus-visible {
	background: var(--tcf-thickle-accent-contrast);
	border-color: var(--tcf-thickle-accent-contrast);
	color: var(--tcf-thickle-paper);
}

.tcf-thickle__button--primary:active {
	transform: scale(0.97);
}

.tcf-thickle__button--secondary {
	border-color: var(--tcf-thickle-ink);
	background: transparent;
	color: var(--tcf-thickle-ink);
}

.tcf-thickle__button--secondary:hover,
.tcf-thickle__button--secondary:focus-visible {
	background: var(--tcf-thickle-ink);
	color: var(--tcf-thickle-paper);
}

/*
 * Delight Pass v1.0, item 9 — tap feedback for the secondary variant
 * (Share). --primary:active already had its own tuned 0.97 scale from
 * an earlier milestone (left untouched, further up this same block);
 * --secondary had none at all, added here at the brief's 0.98 since
 * there was no prior value to preserve. Deliberately placed after the
 * generic :hover lift below in source order (equal specificity to
 * it), so on a real click — hover and active both matching at once —
 * this tap scale wins over the hover lift rather than the two
 * fighting silently.
 */
.tcf-thickle__button--secondary:active {
	transform: scale(0.98);
}

/*
 * v1.20.2 — the "Refresh stats" fallback control. Deliberately the
 * smallest, least visually prominent action in this row: plain text,
 * no border, no fill — this exists only for the rare case where the
 * automatic post-solve refresh (see thickle.js) missed a component; it
 * is never required in the normal flow and should not visually compete
 * with Share Results / Play More Games.
 */
.tcf-thickle__button--text {
	border: none;
	background: transparent;
	padding: 4px 8px;
	font-size: 0.85em;
	text-decoration: underline;
	color: var(--tcf-thickle-muted, inherit);
}

.tcf-thickle__button--text:hover,
.tcf-thickle__button--text:focus-visible {
	color: var(--tcf-thickle-ink);
}

.tcf-component-updating-note {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.85em;
	opacity: 0.7;
}

.tcf-thickle__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.tcf-thickle__button:focus-visible,
.tcf-thickle__icon-button:focus-visible,
.tcf-thickle__key:focus-visible {
	outline: 3px solid var(--tcf-thickle-accent-contrast);
	outline-offset: 2px;
}

.tcf-thickle__icon-button {
	min-height: 40px;
	padding: 0.4rem 0.9rem;
	border: 1px solid #d3d9df;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: none;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--tcf-games-motion-fast) var(--tcf-games-ease);
}

/* ---------------------------------------------------------------------
 * Game area — flat editorial card, no gradient, no shadow
 * ------------------------------------------------------------------ */

.tcf-thickle__game-area {
	/*
	 * Fixed max-width editorial card, independent of any Kadence
	 * section width. v1.17.5: cool-gray gameplay palette replaces the
	 * warm beige/parchment surface — approved design update, container
	 * dimensions unchanged from v1.17.2.
	 */
	position: relative;
	width: 100%;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3.5rem;
	padding: 32px;
	border: 1px solid #dde2e7;
	border-radius: 8px;
	background: #f3f5f7;
	box-shadow: none;
	color: var(--tcf-games-color-ink);
	overflow: hidden;
	animation: tcf-thickle-fade-up var(--tcf-games-motion-entrance) var(--tcf-games-ease) both;
	transition: opacity var(--tcf-games-motion-base) var(--tcf-games-ease);
}

/*
 * Delight Pass v1.0, item 11 — real loading state, not a fabricated
 * skeleton. Toggled by initGame() in thickle.js for the genuine
 * duration of the initial /today REST fetch. The board and keyboard
 * underneath are already server-rendered and visible (with their own
 * fade-up above) — this only dims the already-real content slightly,
 * never hides it or replaces it with placeholder bars.
 */
.tcf-thickle__game-area--loading {
	opacity: 0.6;
}

.tcf-thickle__active-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
}

/*
 * Branded game-area header — replaces the former plain-text "Today's
 * Thickle" heading (v1.17.4). Single h2, eyebrow text stacked above
 * the official Thickle wordmark PNG, both left-aligned; Help/
 * Statistics stay on the right via .tcf-thickle__active-header's
 * existing flex row, untouched.
 */
.tcf-thickle__active-heading-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
}

.tcf-thickle__active-eyebrow {
	font-family: var(--tcf-games-font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tcf-thickle-accent-contrast);
}

/*
 * Official wordmark, not decoration — object-fit: contain preserves
 * the pink underline stroke at any rendered width; width stays within
 * the approved 190–220px desktop range via clamp(), height stays
 * auto so the asset's own aspect ratio controls it. See the
 * max-width: 767px breakpoint (v1.17.13 mobile polish) for the
 * 120–150px mobile range.
 */
.tcf-thickle__active-logo {
	display: block;
	width: clamp(190px, 18vw, 220px);
	height: auto;
	object-fit: contain;
}

.tcf-thickle__active-controls {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 12px;
}

/* Compact Help/Statistics controls — Oswald, no wrapping mid-label.
   Base .tcf-thickle__icon-button rule (below) still supplies the
   border/background/radius; this only tightens sizing for the
   game-area header specifically. */
.tcf-thickle__active-controls .tcf-thickle__icon-button {
	min-height: 36px;
	padding: 0.35rem 0.75rem;
	font-family: var(--tcf-games-font-heading);
	font-size: 0.78rem;
	white-space: nowrap;
	box-shadow: none;
}

.tcf-thickle__status-region {
	min-height: 1.5rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Board
 * ------------------------------------------------------------------ */

.tcf-thickle__board {
	/*
	 * v1.17.12 mobile-rendering fix: grid-template-rows previously
	 * explicitly set repeat(6, 1fr) here. This container has no
	 * explicit height — each row's real height is meant to come from
	 * its own tiles, which derive their height from aspect-ratio: 1/1
	 * (tile height computed FROM tile width, which itself comes from
	 * the row's own 1fr COLUMN tracks). That chain — an indefinite-
	 * height grid container, explicit `fr` ROW tracks, whose content
	 * derives its size from aspect-ratio dependent on a nested grid's
	 * own column sizing — is a specific, documented trouble spot for
	 * CSS Grid track-sizing algorithms across browser engines,
	 * particularly WebKit/Safari threading an aspect-ratio-derived
	 * intrinsic size through nested auto-sized grid tracks correctly.
	 * When it fails, the entire board silently resolves to zero
	 * height — no error, no console warning, identical DOM either way.
	 *
	 * Removing the explicit row-track declaration lets each row size
	 * via the grid's own default implicit `auto` tracks instead —
	 * sized directly from that row's own content, the same standard
	 * mechanism used everywhere else in this file (.tcf-thickle__row
	 * below never set its own row tracks either, only column tracks,
	 * and was never suspected of this issue). Visually identical
	 * result in a browser that computes the fr-based version
	 * correctly (which is why desktop was never affected either way);
	 * removes the one fragile mechanism most likely to be why mobile
	 * Safari specifically was not.
	 */
	display: grid;
	gap: 8px;
	width: 100%;
	max-width: 425px;
	margin: 0 auto 28px;
	animation: tcf-thickle-fade-up var(--tcf-games-motion-entrance) var(--tcf-games-ease) both;
	animation-delay: 80ms;
}

.tcf-thickle__row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.tcf-thickle__tile {
	aspect-ratio: 1 / 1;
	/*
	 * v1.17.12: a min-height floor, purely defensive. Never visibly
	 * changes anything when aspect-ratio computes correctly — at any
	 * board width down to the smallest supported viewport, the
	 * aspect-ratio-derived tile size is comfortably larger than this
	 * floor. Only matters in the total-failure case (aspect-ratio
	 * unsupported at all, on a sufficiently old browser, or any other
	 * sizing failure this file's own reasoning above didn't
	 * anticipate) — an empty flex item with no explicit height and no
	 * text content would otherwise have nothing forcing it away from
	 * a literal zero, same failure mode as the grid issue above, same
	 * fix philosophy: give the browser an explicit floor instead of
	 * depending entirely on a derived chain.
	 */
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #d3d9df;
	border-radius: 4px;
	background: #ffffff;
	font-family: var(--tcf-games-font-heading);
	font-size: clamp(1.25rem, 6vw, 1.875rem);
	font-weight: 600;
	text-transform: uppercase;
	color: #111111;
	transition: background var(--tcf-games-motion-base) var(--tcf-games-ease),
		border-color var(--tcf-games-motion-base) var(--tcf-games-ease);
}

.tcf-thickle__tile[data-tcf-thickle-tile-state="filled"] {
	border-color: #111111;
}

/* Correct letter, correct position — teal, white text, solid border. */
.tcf-thickle__tile[data-tcf-thickle-tile-state="correct"] {
	background: var(--tcf-thickle-correct);
	border-color: var(--tcf-thickle-correct);
	color: #ffffff;
}

/* Correct letter, wrong position — pink, white text, solid border. */
.tcf-thickle__tile[data-tcf-thickle-tile-state="present"] {
	background: var(--tcf-thickle-present);
	border-color: var(--tcf-thickle-present);
	color: #ffffff;
}

/* Letter not present — warm gray, dark text, solid border. */
.tcf-thickle__tile[data-tcf-thickle-tile-state="absent"] {
	background: var(--tcf-thickle-absent);
	border-color: var(--tcf-thickle-absent);
	color: #111111;
}

.tcf-thickle__tile[data-tcf-thickle-tile-state="invalid"] {
	border-color: #e05252;
}

/* ---------------------------------------------------------------------
 * Delight Pass v1.0, item 1 — tile letter-entry feedback. Pure CSS,
 * no JS trigger: the [data-tcf-thickle-tile-state="filled"] selector
 * only newly matches a tile the instant thickle.js's setTile() sets
 * that attribute (once per typed letter), so the animation below
 * plays exactly once per keystroke without any class-toggling logic.
 * transform only, well under the brief's 80-120ms window.
 * ------------------------------------------------------------------ */
.tcf-thickle__tile[data-tcf-thickle-tile-state="filled"] {
	animation: tcf-thickle-tile-pop 110ms ease-out;
}

@keyframes tcf-thickle-tile-pop {
	from { transform: scale(0.95); }
	to { transform: scale(1); }
}

/* ---------------------------------------------------------------------
 * Delight Pass v1.0, item 4 — staggered tile evaluation flip. Applied
 * by revealTileFlip() in thickle.js only for a real, live server
 * evaluation (never for typing, never for renderStoredGuesses()'s
 * page-load replay of an already-known result).
 *
 * Each state's keyframes hardcode the "before" colors (#ffffff /
 * #111111 / #111111) rather than reading them from the tile's own
 * computed style — those are exactly the values the base
 * .tcf-thickle__tile rule and the [data-tcf-thickle-tile-state="filled"]
 * rule above already produce, which is always the tile's real state
 * the instant before a flip can start (a tile can only be flipped
 * once it's been typed into, i.e. "filled"). The color swap sits at
 * a duplicated 50% offset — the tile is edge-on and invisible at
 * that exact instant, so the swap itself is never seen, only the
 * completed result once the tile rotates back into view.
 * ------------------------------------------------------------------ */
.tcf-thickle__tile--flip {
	animation-duration: var(--tcf-thickle-anim-flip);
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

.tcf-thickle__tile--flip[data-tcf-thickle-tile-state="correct"] {
	animation-name: tcf-thickle-tile-flip-correct;
}

.tcf-thickle__tile--flip[data-tcf-thickle-tile-state="present"] {
	animation-name: tcf-thickle-tile-flip-present;
}

.tcf-thickle__tile--flip[data-tcf-thickle-tile-state="absent"] {
	animation-name: tcf-thickle-tile-flip-absent;
}

@keyframes tcf-thickle-tile-flip-correct {
	0% { transform: rotateX(0deg); background: #ffffff; border-color: #111111; color: #111111; }
	50% { transform: rotateX(90deg); background: #ffffff; border-color: #111111; color: #111111; }
	50.01% { transform: rotateX(90deg); background: var(--tcf-thickle-correct); border-color: var(--tcf-thickle-correct); color: #ffffff; }
	100% { transform: rotateX(0deg); background: var(--tcf-thickle-correct); border-color: var(--tcf-thickle-correct); color: #ffffff; }
}

@keyframes tcf-thickle-tile-flip-present {
	0% { transform: rotateX(0deg); background: #ffffff; border-color: #111111; color: #111111; }
	50% { transform: rotateX(90deg); background: #ffffff; border-color: #111111; color: #111111; }
	50.01% { transform: rotateX(90deg); background: var(--tcf-thickle-present); border-color: var(--tcf-thickle-present); color: #ffffff; }
	100% { transform: rotateX(0deg); background: var(--tcf-thickle-present); border-color: var(--tcf-thickle-present); color: #ffffff; }
}

@keyframes tcf-thickle-tile-flip-absent {
	0% { transform: rotateX(0deg); background: #ffffff; border-color: #111111; color: #111111; }
	50% { transform: rotateX(90deg); background: #ffffff; border-color: #111111; color: #111111; }
	50.01% { transform: rotateX(90deg); background: var(--tcf-thickle-absent); border-color: var(--tcf-thickle-absent); color: #111111; }
	100% { transform: rotateX(0deg); background: var(--tcf-thickle-absent); border-color: var(--tcf-thickle-absent); color: #111111; }
}

/* ---------------------------------------------------------------------
 * Delight Pass v1.0, item 5 — invalid/incomplete guess row shake.
 * Applied by shakeRow() in thickle.js for both rejection paths (not
 * enough letters, not in word list). Small amplitude, transform only.
 * ------------------------------------------------------------------ */
.tcf-thickle__row--shake {
	animation: tcf-thickle-row-shake var(--tcf-thickle-anim-shake) ease-in-out;
}

@keyframes tcf-thickle-row-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}

/* ---------------------------------------------------------------------
 * Keyboard — flat keys, 600px max-width, no heavy shadow
 * ------------------------------------------------------------------ */

.tcf-thickle__keyboard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	animation: tcf-thickle-fade-up var(--tcf-games-motion-entrance) var(--tcf-games-ease) both;
	animation-delay: 140ms;
}

.tcf-thickle__keyboard-row {
	display: flex;
	justify-content: center;
	gap: 6px;
}

.tcf-thickle__key {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0 0.3rem;
	border: none;
	border-radius: 6px;
	background: #e4e8ec;
	color: #111111;
	box-shadow: none;
	font-family: var(--tcf-games-font-heading);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	/*
	 * v1.17.16: tells the browser this element is meant for discrete
	 * taps, not panning/zooming, which is what lets it skip the
	 * gesture-disambiguation delay that can otherwise sit between a
	 * touch and the point a click event fires. This is a touch-behavior
	 * property, not a layout one — it changes nothing about size,
	 * spacing, or position, so it doesn't fall under "responsive CSS"
	 * this release was asked not to alter; it's part of the input-
	 * responsiveness fix this release specifically is.
	 */
	touch-action: manipulation;
	transition: background var(--tcf-games-motion-fast) var(--tcf-games-ease),
		transform var(--tcf-games-motion-fast) var(--tcf-games-ease);
}

.tcf-thickle__key:hover {
	background: #d3d9df;
}

.tcf-thickle__key:active {
	transform: translateY(1px) scale(0.98);
}

/*
 * v1.17.16: JS-controlled press feedback (see showKeyPressedFeedback()
 * in thickle.js), distinct from :active above — applied for a fixed
 * ~100ms regardless of how briefly a touch tap actually lasts, since
 * :active alone can end before a very quick tap is even visible.
 * transform only, per the brief; reduced-motion is already handled by
 * this file's existing global `.tcf-thickle * { transition-duration:
 * 0.001ms !important; }` block, so no separate override is needed here.
 */
.tcf-thickle__key--pressed {
	transform: scale(0.96);
}

/*
 * v1.17.16: sustained visual for the Enter key specifically while a
 * guess is in flight — distinct from --pressed (which is a brief tap
 * flash) and from the browser's own default :disabled treatment (which
 * this key also gets via the real `disabled` attribute). A slightly
 * deeper, held-down look for the duration of the request, not just a
 * flash.
 */
.tcf-thickle__key--submitting {
	transform: scale(0.97);
}

.tcf-thickle__key--wide {
	flex: 1.6;
	font-size: 0.9rem;
}

.tcf-thickle__key[data-tcf-thickle-key-state="correct"] {
	background: var(--tcf-thickle-correct);
	color: #ffffff;
}

.tcf-thickle__key[data-tcf-thickle-key-state="present"] {
	background: var(--tcf-thickle-present);
	color: #ffffff;
}

.tcf-thickle__key[data-tcf-thickle-key-state="absent"] {
	background: var(--tcf-thickle-absent);
	color: #111111;
}

/*
 * v1.17.16: the active row's pending-submission treatment — a subtle
 * border pulse while a guess is in flight (set via
 * .tcf-thickle__row--submitting, toggled by setSubmitting() in
 * thickle.js). border-color and the keyframe's opacity only — nothing
 * here touches width, height, margin, padding, or position, so it
 * cannot shift layout, and it never obscures the letters themselves
 * (opacity never drops low enough to be hard to read, and nothing
 * covers the tile — no overlay, no spinner).
 *
 * Pulses toward a neutral ink gray, deliberately NOT
 * --tcf-games-color-accent (the same teal used for a "correct"
 * evaluation) or any other evaluation-meaning color — the brief is
 * explicit that only letters and the pending state may appear before
 * the server responds, and a pending-state color that happened to echo
 * an evaluation color would blur that line even without literally
 * being one.
 */
.tcf-thickle__row--submitting .tcf-thickle__tile {
	animation: tcf-thickle-row-pulse 900ms ease-in-out infinite;
}

@keyframes tcf-thickle-row-pulse {
	0%, 100% {
		border-color: #d3d9df;
	}
	50% {
		border-color: var(--tcf-games-color-muted);
	}
}

/* ---------------------------------------------------------------------
 * Results panel — [tcf_thickle_results]. As of v1.17.18, the single
 * post-game results surface (a smaller, separately-styled placeholder
 * used to sit nested inside the game area — see thickle.js and
 * class-thickle-renderer.php's own docblocks for the full removal
 * story). Hidden by default via the [hidden] attribute (JS toggles it,
 * see thickle.js), which occupies no layout space; the explicit rule
 * below only guards against some other, more specific selector
 * accidentally overriding display for this element.
 * ------------------------------------------------------------------ */

.tcf-thickle__results-panel[hidden] {
	display: none;
}

/*
 * Delight Pass v1.0, item 8 — results card entrance, conditional as of
 * v1.17.18 on the completion event's `live` flag (only added by
 * thickle.js's populateResultsPanel() for a puzzle just completed
 * live — see finishGame()'s own docblock for the timing this now
 * carries, moved here from the removed in-game shell).
 */
.tcf-thickle__results-panel--enter {
	animation: tcf-thickle-fade-up var(--tcf-thickle-anim-results-entrance) var(--tcf-games-ease) both;
}

.tcf-thickle__results-panel {
	max-width: var(--tcf-games-width-content);
	margin: 0 auto 3.5rem;
	padding: 2rem;
	border-radius: var(--tcf-games-radius-lg);
	background: var(--tcf-thickle-paper);
	box-shadow: var(--tcf-games-elevation-card);
	text-align: center;
}

.tcf-thickle__results-panel-heading {
	margin: 0 0 0.75rem;
	font-family: var(--tcf-games-font-heading);
	font-size: 1.6rem;
	text-transform: uppercase;
}

.tcf-thickle__results-panel-line {
	margin: 0.35rem 0;
	font-size: 1rem;
}

.tcf-thickle__results-panel-line[data-tcf-thickle-results-line="guesses"],
.tcf-thickle__results-panel-line[data-tcf-thickle-results-line="answer"] {
	font-size: 1.1rem;
	font-weight: 600;
}

/*
 * Delight Pass 1 (Celebration & Feedback), v1.17.20, items 3 & 4 —
 * the Curve Coins and streak lines each fade up on their own, staggered
 * apart (see revealResultsLine()/populateResultsPanel() in thickle.js),
 * rather than appearing instantly with the rest of the panel. Applied
 * by JS only for a live win — a restored/reloaded completed puzzle
 * never gets this class, so it never replays.
 */
.tcf-thickle__results-panel-line--enter {
	animation: tcf-thickle-results-line-in var(--tcf-thickle-anim-results-line) var(--tcf-games-ease) both;
}

@keyframes tcf-thickle-results-line-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * The Curve Coins value itself gets a brief highlight/sparkle once its
 * own line has finished fading in — a small scale pop plus a warm
 * glow in the same gold used for the confetti particles' one coin-
 * themed color (see triggerConfetti() in thickle.js), tying the two
 * together. Nested under --enter so this, too, only ever plays for a
 * live win. animation-delay is a flat var(--tcf-thickle-anim-results-
 * line) rather than something computed to always exactly match the
 * coins line's own JS-set stagger — safe because populateResultsPanel()
 * always gives the coins line a 0ms stagger (it's staggered before the
 * streak line, not after it), so "wait exactly as long as the line's
 * own fade-in duration" already lines up correctly in practice.
 */
.tcf-thickle__results-panel-line--enter[data-tcf-thickle-results-line="coins"] [data-tcf-thickle-results-coins] {
	display: inline-block;
	animation: tcf-thickle-coin-sparkle 550ms var(--tcf-games-ease) both;
	animation-delay: var(--tcf-thickle-anim-results-line);
}

@keyframes tcf-thickle-coin-sparkle {
	0% {
		transform: scale(1);
		text-shadow: none;
	}
	40% {
		transform: scale(1.18);
		text-shadow: 0 0 10px rgba(244, 185, 66, 0.65);
	}
	100% {
		transform: scale(1);
		text-shadow: 0 0 0 rgba(244, 185, 66, 0);
	}
}

.tcf-thickle__results-panel-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

@media (max-width: 599px) {
	.tcf-thickle__results-panel {
		padding: 1.5rem;
	}
}

/* ---------------------------------------------------------------------
 * How to Play — permanent section, premium instructional cards
 * ------------------------------------------------------------------ */

.tcf-thickle__how-to-play-copy {
	max-width: var(--tcf-games-width-reading);
	margin: 0 auto 1.5rem;
	text-align: center;
	color: var(--tcf-thickle-muted);
}

.tcf-thickle__legend {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: 1.75rem;
}

@media (min-width: 700px) {
	.tcf-thickle__legend {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tcf-thickle__legend-card {
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--tcf-thickle-border);
	border-radius: var(--tcf-games-radius-lg);
	background: var(--tcf-thickle-paper);
	box-shadow: var(--tcf-games-elevation-card);
	text-align: center;
	transition: transform var(--tcf-games-motion-base) var(--tcf-games-ease);
}

.tcf-thickle__legend-card:hover {
	transform: translateY(-3px);
}

.tcf-thickle__legend-swatch {
	display: inline-block;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.85rem;
	border-radius: var(--tcf-games-radius);
	border: 2px solid var(--tcf-thickle-border);
}

.tcf-thickle__legend-swatch--correct {
	background: var(--tcf-thickle-correct);
	border-color: var(--tcf-thickle-correct);
}

.tcf-thickle__legend-swatch--present {
	background: var(--tcf-games-color-accent);
	border-style: dashed;
}

.tcf-thickle__legend-swatch--absent {
	background: var(--tcf-thickle-muted);
	border-style: dotted;
}

.tcf-thickle__legend-title {
	margin: 0 0 0.35rem;
	font-family: var(--tcf-games-font-heading);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
}

.tcf-thickle__legend-description {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tcf-thickle-muted);
}

.tcf-thickle__pro-tip {
	max-width: var(--tcf-games-width-reading);
	margin: 0 auto;
	padding: 1.1rem 1.4rem;
	border-radius: var(--tcf-thickle-radius);
	background: var(--tcf-thickle-surface);
	font-size: 0.9rem;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Editorial / placeholder cards (About, Community, Achievements, Stats)
 * ------------------------------------------------------------------ */

.tcf-thickle__card {
	padding: 2rem;
	border-radius: var(--tcf-games-radius-lg);
	background: var(--tcf-thickle-paper);
	box-shadow: var(--tcf-games-elevation-card);
	text-align: left;
	transition: box-shadow var(--tcf-games-motion-base) var(--tcf-games-ease);
}

.tcf-thickle__card:hover {
	box-shadow: 0 20px 44px rgba(6, 58, 55, 0.12);
}

.tcf-thickle__card-heading {
	margin: 0 0 0.85rem;
	font-family: var(--tcf-games-font-editorial);
	font-size: 1.4rem;
	font-weight: 700;
}

.tcf-thickle__card-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.tcf-thickle__card-header-row .tcf-thickle__card-heading {
	margin-bottom: 0;
}

.tcf-thickle__card-caption {
	margin: 0.85rem 0 0;
	font-size: 0.85rem;
	color: var(--tcf-thickle-muted);
}

.tcf-thickle__badge {
	flex: none;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--tcf-games-color-script-accent);
	color: var(--tcf-thickle-paper);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.tcf-thickle__plain-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}

.tcf-thickle__plain-list--iconed li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.tcf-thickle__plain-list li {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--tcf-thickle-border);
}

.tcf-thickle__plain-list li:last-child {
	border-bottom: none;
}

.tcf-thickle__stats-list {
	margin: 0;
}

.tcf-thickle__stats-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--tcf-thickle-border);
	font-size: 0.9rem;
}

.tcf-thickle__stats-row:last-child {
	border-bottom: none;
}

.tcf-thickle__stats-row dt {
	color: var(--tcf-thickle-muted);
}

.tcf-thickle__stats-row dd {
	margin: 0;
	font-weight: 700;
}

/* Editorial/Community/Achievements/Stats reflow to a grid on wider
   screens rather than staying single-column. Progressive enhancement —
   browsers without :has() simply stay single-column. */
@media (min-width: 900px) {
	.tcf-thickle__section:has(> .tcf-thickle__card) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem;
	}
}

/* ---------------------------------------------------------------------
 * More TCF Games — each card gets a distinct accent tint so the row
 * reads as four individual features rather than identical utility
 * cards, while sharing one structure future games can build on.
 * ------------------------------------------------------------------ */

.tcf-thickle__game-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}

@media (min-width: 700px) {
	.tcf-thickle__game-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.tcf-thickle__game-card-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.tcf-thickle__game-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	gap: 0.5rem;
	padding: 1.6rem;
	border-radius: var(--tcf-games-radius-lg);
	background: var(--tcf-thickle-surface);
	text-align: left;
	transition: transform var(--tcf-games-motion-base) var(--tcf-games-ease);
}

.tcf-thickle__game-card:hover {
	transform: translateY(-3px);
}

/*
 * v1.18.1 — title and status badge now share one row (was: badge
 * pushed to the card's own bottom via margin-top: auto). Play time
 * and the bottom action/status area (v1.18.2: a real Play button, or
 * plain "On the Way" status text — see .tcf-thickle__game-card-status
 * below) fill the space the badge used to occupy at the bottom, so
 * every card in a row still lines up.
 */
.tcf-thickle__game-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	width: 100%;
}

.tcf-thickle__badge--live {
	background: var(--tcf-thickle-correct);
}

.tcf-thickle__game-card-meta {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	color: var(--tcf-thickle-muted);
}

.tcf-thickle__game-card-meta-icon {
	font-size: 0.85rem;
}

.tcf-thickle__game-card-action {
	margin-top: auto;
	width: 100%;
	justify-content: center;
	text-align: center;
}

/*
 * v1.18.2 — replaces the removed inert "Notify Me" <button>. Plain
 * text, not a button or link — nothing about it should read as
 * clickable, since nothing happens when it's clicked (there is
 * nothing to click). Bottom-aligned the same way
 * .tcf-thickle__game-card-action is, so cards in one row still line
 * up regardless of which status a given card shows.
 */
.tcf-thickle__game-card-status {
	margin-top: auto;
	width: 100%;
	text-align: center;
	padding: 0.6rem 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--tcf-thickle-muted);
	text-transform: uppercase;
}

.tcf-thickle__game-card-grid .tcf-thickle__game-card:nth-child(1) {
	background: linear-gradient(160deg, var(--tcf-thickle-surface), rgba(0, 203, 193, 0.12));
}

.tcf-thickle__game-card-grid .tcf-thickle__game-card:nth-child(2) {
	background: linear-gradient(160deg, var(--tcf-thickle-surface), rgba(224, 33, 138, 0.1));
}

.tcf-thickle__game-card-grid .tcf-thickle__game-card:nth-child(3) {
	background: linear-gradient(160deg, var(--tcf-thickle-surface), rgba(184, 134, 11, 0.12));
}

.tcf-thickle__game-card-grid .tcf-thickle__game-card:nth-child(4) {
	background: linear-gradient(160deg, var(--tcf-thickle-surface), rgba(6, 58, 55, 0.1));
}

.tcf-thickle__game-card-title {
	margin: 0;
	font-family: var(--tcf-games-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
}

.tcf-thickle__game-card-description {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tcf-thickle-muted);
}

/* ---------------------------------------------------------------------
 * Entrance microinteraction — one-time, CSS-only, no JS trigger needed
 * ------------------------------------------------------------------ */

@keyframes tcf-thickle-fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ---------------------------------------------------------------------
 * Mobile UX polish — below 768px (v1.17.14, rebuilding v1.17.13)
 *
 * v1.17.13's changes were real (confirmed present in the shipped file,
 * confirmed by test-mobile-polish-regression-guard.php, confirmed by a
 * manual revert-and-diff during that release), but they were sized far
 * too conservatively relative to the actual problem, and — critically —
 * v1.17.13 never touched board/tile sizing at all. Screenshots from the
 * live page after clearing WP Rocket show tiles rendering large enough
 * that six rows plus the header and keyboard add up to a card far taller
 * than one screen, which is what actually produced "the layout still
 * behaves like a compressed desktop card" — a few dozen pixels of header
 * tightening cannot fix a board that's the dominant source of the height
 * problem. This block replaces v1.17.13's entirely, with exact numeric
 * targets and the actual rendered selectors verified against
 * class-thickle-renderer.php below, not assumed.
 *
 * Selector verification (traced directly from render_game_area(),
 * render_active_heading(), render_board(), render_keyboard(), and
 * render_keyboard_key() in class-thickle-renderer.php — every selector
 * below is confirmed to exist in the actual rendered markup, none are
 * assumed):
 *
 *   outer game card         #tcf-thickle-game-area (also .tcf-thickle__game-area)
 *   branded header           .tcf-thickle__active-header
 *   heading group (h2)       .tcf-thickle__active-heading-group
 *   eyebrow text              .tcf-thickle__active-eyebrow
 *   logo (img)                .tcf-thickle__active-logo
 *   Help/Statistics row       .tcf-thickle__active-controls
 *   Help/Statistics buttons   .tcf-thickle__icon-button
 *   status region              .tcf-thickle__status-region
 *   board                       .tcf-thickle__board
 *   board row                   .tcf-thickle__row
 *   tile                        .tcf-thickle__tile
 *   keyboard                    .tcf-thickle__keyboard
 *   keyboard row                 .tcf-thickle__keyboard-row
 *   standard letter key            .tcf-thickle__key
 *   Enter key           .tcf-thickle__key--wide[data-tcf-thickle-key="enter"]
 *   Backspace key        .tcf-thickle__key--wide[data-tcf-thickle-key="backspace"]
 *     (Enter and Backspace share .tcf-thickle__key--wide — confirmed in
 *     render_keyboard_key(): both are $is_wide. Backspace's own visible
 *     text is already the ⌫ glyph, not the word "Backspace", so only
 *     Enter's actual label text is at risk of clipping — but both keys
 *     get the same wider sizing below since they share the class.)
 *
 * Specificity: every rule below is anchored with the #tcf-thickle-game-area
 * ID prefix, not just the bare class, specifically so these mobile rules
 * reliably outrank any theme/Kadence-level rule of equal-or-lower
 * specificity without needing !important. No !important is used
 * anywhere in this block — none of the conflicts investigated required
 * it; a plain class selector for a game-area-scoped rule was the
 * likely reason v1.17.13's changes under-performed against whatever
 * else is in the cascade on the live page, not that the values
 * themselves were wrong.
 *
 * The shared .tcf-thickle root wrapper (used by every dispatched
 * component on the page, not just the game area) IS touched in this
 * revision, deliberately and only for its own mobile side padding —
 * see the note at that rule for why, and why v1.17.13 avoiding it
 * turned out to be part of why the card still felt narrow.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {

	/*
	 * v1.17.15 — targeted !important hardening, documented per-property
	 * below, not applied blanket. Rationale: v1.17.14's actual CSS was
	 * verified, via a real Chromium engine (Playwright) rendering the
	 * exact real markup with this exact stylesheet, to produce every
	 * targeted result correctly in isolation — 251px first-row offset
	 * (target: ~260px), 56px tiles exactly, "ENTER" fully legible, zero
	 * horizontal overflow, at both 390px and 375px. Full measurements in
	 * the v1.17.15 changelog entry. Since the values themselves are
	 * confirmed correct, the only remaining explanation for these rules
	 * not visibly applying on the live page is that something in that
	 * page's actual cascade — a Kadence base style, WP Rocket's CSS
	 * combination/minification, or (see the changelog) WP Rocket's
	 * "Remove Unused CSS" feature specifically — is either outranking
	 * these rules or, in RUCSS's case, potentially stripping them
	 * entirely (which !important cannot fix; see the changelog for that
	 * specific setting to check). !important is added below only to the
	 * properties actually responsible for each reported symptom (card
	 * padding/width, header/status min-height and margins, tile
	 * max-width, key sizing, ENTER's min-width/font-size) — not to every
	 * declaration in this block, and not as a substitute for finding out
	 * why a specificity-anchored, verified-correct rule would need it.
	 */

	.tcf-thickle {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	#tcf-thickle-game-area.tcf-thickle__game-area {
		width: 100% !important;
		max-width: 420px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 18px 12px 20px !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	#tcf-thickle-game-area .tcf-thickle__active-header {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 14px;
		margin: 0 0 8px !important;
		min-height: 0 !important;
		height: auto !important;
	}

	#tcf-thickle-game-area .tcf-thickle__active-heading-group {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin: 0;
	}

	/* Logo. min(68vw, 250px) at a 390px viewport resolves to 250px —
	   larger than v1.17.13's logo, by design: the surrounding gaps
	   above are what actually control the header's total height now,
	   not logo size, so there's no need to shrink the logo itself to
	   hit the ~260px "first row" target below. */
	#tcf-thickle-game-area .tcf-thickle__active-logo {
		width: min(68vw, 250px);
		height: auto;
		margin: 0;
	}

	/* Help / Statistics row — centered, single row, explicit button
	   sizing so neither button can grow tall enough to add height this
	   budget didn't account for. */
	#tcf-thickle-game-area .tcf-thickle__active-controls {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		gap: 12px;
		margin: 0;
	}

	#tcf-thickle-game-area .tcf-thickle__active-controls .tcf-thickle__icon-button {
		min-height: 42px;
		padding: 8px 18px;
		font-size: 16px;
		line-height: 1;
		white-space: nowrap;
	}

	/* Stack only below 340px, per the brief — a second, narrower
	   breakpoint nested inside this one specifically for that. */
	@media (max-width: 339px) {
		#tcf-thickle-game-area .tcf-thickle__active-controls {
			flex-direction: column;
			align-items: stretch;
		}
	}

	/*
	 * Status region. Normally empty until a guess is submitted — its
	 * min-height was the "fixed/minimum height... push[ing] the board
	 * downward" this section of the brief specifically called out.
	 * Reduced to 0 so an empty status region truly collapses to no
	 * height; once real text is written into it (announce()), the
	 * element grows to fit that text naturally, same as it always did.
	 */
	#tcf-thickle-game-area .tcf-thickle__status-region {
		min-height: 0 !important;
		margin: 0 0 10px !important;
		font-size: 0.85rem;
	}

	/*
	 * Board. Marie's own card-width numbers (verified by hand before
	 * writing this file) divide the available content width into
	 * tiles around 63–64px, not the ~56px ceiling stated separately —
	 * the two parts of the spec don't quite reconcile at face value.
	 * Rather than silently pick one, this honors the explicit "should
	 * not exceed approximately 56px" ceiling: the board itself stays
	 * width: 100% (not artificially narrowed), and the 56px cap is
	 * enforced on the tile itself via max-width, which — combined with
	 * justify-items: center below — means each tile centers within its
	 * own column if the column ends up wider than 56px, rather than
	 * stretching past the stated ceiling.
	 */
	#tcf-thickle-game-area .tcf-thickle__board {
		width: 100%;
		max-width: 100%;
		gap: 7px;
		margin: 0 auto 20px;
		justify-items: center;
	}

	#tcf-thickle-game-area .tcf-thickle__row {
		width: 100%;
		gap: 7px;
	}

	#tcf-thickle-game-area .tcf-thickle__tile {
		max-width: 56px !important;
	}

	/*
	 * Keyboard. Flexbox, not CSS Grid — render_keyboard() lays out each
	 * .tcf-thickle__keyboard-row with `display: flex`, confirmed above,
	 * so the "if the keyboard uses CSS Grid" language in the brief's
	 * Enter/Backspace requirement doesn't apply here; flex-basis sizing
	 * plus an explicit min-width (below) achieves the same "wider span"
	 * outcome without a layout-system rewrite that wasn't otherwise
	 * called for.
	 */
	#tcf-thickle-game-area .tcf-thickle__keyboard {
		width: 100%;
		max-width: 100%;
		row-gap: 7px;
		margin: 0 auto;
	}

	#tcf-thickle-game-area .tcf-thickle__keyboard-row {
		column-gap: 4px;
	}

	#tcf-thickle-game-area .tcf-thickle__key {
		min-width: 0;
		height: 48px !important;
		min-height: 48px !important;
		padding: 0;
		font-size: 16px;
		line-height: 1;
	}

	/*
	 * ENTER. Same root cause identified and partially addressed in
	 * v1.17.13 (min-width: 0 inherited from the base .tcf-thickle__key
	 * rule, letting the wide key shrink below its own label's width,
	 * then clipped by #tcf-thickle-game-area's own overflow: hidden) —
	 * v1.17.13's fix used min-width: max-content, which depends on the
	 * browser's own intrinsic-size calculation. This revision instead
	 * gives it a concrete, guaranteed floor (54px) plus a deliberately
	 * smaller font-size for the wide keys specifically, so the label
	 * never depends on font-metrics calculation being exactly right —
	 * a fixed, verifiable number instead of an inference. min-width and
	 * white-space are !important — verified by real-browser test to be
	 * the two properties that actually determine whether "ENTER" clips,
	 * so these are the two most important to guarantee survive any
	 * external cascade interference specifically.
	 */
	#tcf-thickle-game-area .tcf-thickle__key--wide {
		flex: 1.6 1 0%;
		min-width: 54px !important;
		white-space: nowrap !important;
		font-size: 14px;
		letter-spacing: 0;
		padding: 0 0.3rem;
	}
}

/* ---------------------------------------------------------------------
 * Results panel — [tcf_thickle_results] — mobile spacing and button
 * sizing (v1.17.14). Separate block from the one above because this
 * panel lives outside #tcf-thickle-game-area entirely (its own
 * .tcf-thickle scope, confirmed in the CSS docblock further up this
 * file) — anchoring these rules to that ID would never match.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.tcf-thickle__results-panel {
		padding: 1.25rem 1rem;
	}

	.tcf-thickle__results-panel-heading {
		margin: 0 0 0.5rem;
		font-size: 1.35rem;
	}

	.tcf-thickle__results-panel-line {
		margin: 0.25rem 0;
	}

	.tcf-thickle__results-panel-actions {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.6rem;
		margin-top: 1rem;
	}

	.tcf-thickle__results-panel-actions .tcf-thickle__button {
		flex: 1;
		min-height: 44px;
		padding: 0.7rem 1rem;
		font-size: 0.85rem;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------
 * Game area — below 600px
 *
 * v1.17.14: the key/header/controls overrides that used to live here
 * were removed — #tcf-thickle-game-area .tcf-thickle__key (etc.) in the
 * 767px block above now has higher specificity than a bare
 * .tcf-thickle__key selector, so a same-property override at this
 * narrower breakpoint could never actually win regardless of source
 * order. Leaving them in place would have been dead, misleading CSS.
 * board/keyboard max-width: 100% is likewise already set at the higher
 * specificity above; kept here only because removing it changes
 * nothing either way and it's harmless.
 * ------------------------------------------------------------------ */

@media (max-width: 599px) {
	.tcf-thickle__board {
		max-width: 100%;
	}

	.tcf-thickle__keyboard {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------ */

@media (max-width: 380px) {
	/*
	 * v1.17.14: was `padding: 1.5rem 1rem 3rem;` (shorthand, all four
	 * sides). That shorthand would have silently undone the 767px
	 * block's `.tcf-thickle` side-padding reduction at the narrowest
	 * screens — same class of cascade bug already fixed once before in
	 * v1.17.13 for a different rule. Longhand top/bottom only, so the
	 * side padding set above persists uniformly through the smallest
	 * phones too.
	 */
	.tcf-thickle {
		padding-top: 1.5rem;
		padding-bottom: 3rem;
	}

	.tcf-thickle__board {
		max-width: 100%;
	}

	.tcf-thickle__keyboard {
		max-width: 100%;
	}

	.tcf-thickle__title-crown {
		right: -0.3em;
	}

	.tcf-thickle__today-card-stats {
		grid-template-columns: 1fr;
	}

	.tcf-thickle__hero-decoration {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Reduced motion — every transition, animation, and smooth scroll
 * collapses to instant
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	/*
	 * Delight Pass v1.0, item 12 — this block already existed before
	 * this pass and needed no new rules: `.tcf-thickle *` is universal,
	 * so it already covers every new keyframe and transition added in
	 * this file's "Delight Pass v1.0" sections above (tile pop, tile
	 * flip, row shake, celebration/results-panel entrance, key-cascade
	 * transition-delay) the same way it already covered v1.17.16's key-
	 * press flash and row-pulse. Confirmed by reading each new rule
	 * against this selector, not assumed.
	 *
	 * Delight Pass 1 (Celebration & Feedback), v1.17.20 — same is true
	 * of the new results-panel-line entrance and coin-sparkle keyframes
	 * above; this selector already collapses both. The one Delight
	 * Pass 1 effect this CSS block does NOT and cannot cover is
	 * confetti — it's canvas-drawn by requestAnimationFrame in
	 * thickle.js, not a CSS animation, so it has its own explicit
	 * prefersReducedMotion() check at the top of triggerConfetti()
	 * instead, skipping the effect entirely rather than trying to
	 * express "no motion" through a media query no canvas code reads.
	 */
	.tcf-thickle * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.tcf-thickle__legend-card:hover,
	.tcf-thickle__game-card:hover,
	.tcf-thickle__button:hover {
		transform: none;
	}
}