.tcw-game {
	--tcw-color: #1a5fb4;
	max-width: 1300px;
	margin: 0 auto;
	padding: 14px clamp(8px, 2vw, 24px);
	background: #fff;
	container-type: inline-size;
	font-family: "Noto Sans Tamil", "Nirmala UI", "Latha", "Catamaran", sans-serif;
	font-size: 20px;
	line-height: 1.4;
	color: #111;
}
.tcw-game *, .tcw-game *::before, .tcw-game *::after { box-sizing: border-box; }
.tcw-game .tcw-title { margin: 0 0 10px; font-size: 20px; color: #674981; }
.tcw-bar {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 2px solid var(--tcw-color);
	border-radius: 12px;
	background: #eef4fc;
	font-size: 17px;
	font-weight: 700;
}
.tcw-gridwrap { min-width: 0; overflow-x: auto; padding: 4px; }
.tcw-grid {
	--tcw-gap: 3px;
	display: grid;
	grid-template-columns: repeat(var(--tcw-cols), minmax(0, 1fr));
	gap: var(--tcw-gap);
	width: 100%;
	max-width: calc(var(--tcw-cols) * 38px + (var(--tcw-cols) - 1) * var(--tcw-gap));
	container-type: inline-size;
}
.tcw-blank, .tcw-cell {
	width: 100%;
	min-width: 0;
	aspect-ratio: 1;
}
.tcw-cell {
	position: relative;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid #222;
	border-radius: 4px;
	background: #fff;
	color: #111;
	font: inherit;
	font-size: 20px;
	font-size: min(20px, calc(58cqi / var(--tcw-cols)));
	font-weight: 700;
	cursor: pointer;
}
.tcw-cell.tcw-in { background: #dce9fb; }
.tcw-cell.tcw-active { background: #ffe58a; border-color: #b36b00; box-shadow: 0 0 0 3px #b36b00; z-index: 1; }
.tcw-cell.tcw-wrong { background: #f9c6c2; border-color: #b3261e; }
.tcw-num { position: absolute; top: 1px; left: 3px; font-size: 12px; font-size: min(12px, calc(34cqi / var(--tcw-cols))); font-weight: 700; color: #b3261e; line-height: 1; }
.tcw-val { display: block; line-height: 1; }

.tcw-game .tcw-msg { margin: 8px 0 0; font-size: 17px; font-weight: 700; }
.tcw-msg:empty { display: none; }
.tcw-msg.tcw-win { color: #1a7f37; }
.tcw-msg.tcw-good { color: var(--tcw-color); }
.tcw-msg.tcw-bad { color: #b3261e; }

.tcw-puzzle, .tcw-keyboard { display: grid; gap: 12px; }
.tcw-keyboard { margin-top: 12px; align-items: start; }
.tcw-keys { padding: 10px; border: 1px solid #aaa; border-radius: 10px; background: #fafafa; }
.tcw-game .tcw-example { margin: 0 0 8px; font-size: 14px; color: #333; }
.tcw-game .tcw-keytitle { margin: 10px 0 6px; font-size: 15px; font-weight: 700; color: #333; }
.tcw-keyrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tcw-key {
	min-width: 40px;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--tcw-color);
	border-radius: 8px;
	background: #fff;
	color: var(--tcw-color);
	font: inherit;
	font-size: 20px;
	font-size: min(20px, calc(58cqi / var(--tcw-cols)));
	font-weight: 700;
	cursor: pointer;
}
.tcw-key:hover, .tcw-key:focus { background: #eef4fc; }
.tcw-sign { background: #fff7d6; border-color: #b36b00; color: #5a3600; }
.tcw-wide { font-size: 15px; }
.tcw-primary { background: var(--tcw-color); color: #fff; }
.tcw-primary:hover, .tcw-primary:focus { background: var(--tcw-color); filter: brightness(1.15); }
.tcw-actions { margin-top: 14px; }
.tcw-cell:focus-visible, .tcw-key:focus-visible, .tcw-clue:focus-visible { outline: 4px solid #ffbf00; outline-offset: 2px; }

.tcw-clues { display: grid; gap: 12px; min-width: 0; padding: 8px; background: #f8f6fa; }
.tcw-game .tcw-cluehead { margin: 0 0 6px; font-size: 18px; }
.tcw-game .tcw-cluelist { margin: 0; padding: 0; list-style: none; }
.tcw-game .tcw-cluelist li { margin: 0; padding: 0; }
.tcw-clue {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding: 8px 10px;
	border: 1px solid #bbb;
	border-radius: 8px;
	background: #fff;
	color: #111;
	font: inherit;
	font-size: 16px;
	overflow-wrap: anywhere;
	text-align: left;
	cursor: pointer;
}
.tcw-clue:hover { background: #eef4fc; }

/* FirstAudio uses a narrow article wrapper for ordinary pages. */
body main.fa-single:has(.tcw-ready) {
	width: min(calc(100% - 24px), 1300px);
	max-width: 1300px;
	margin-inline: auto;
	padding: 12px 0;
}
body main.fa-single:has(.tcw-ready) > article > :is(.fa-back, .fa-article-head, .fa-article-image, .post-navigation),
body:has(main.fa-single .tcw-ready) footer.fa-footer {
	display: none;
}

@container (min-width: 540px) {
	.tcw-clues, .tcw-keyboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 950px) {
	.tcw-bar { max-width: 54%; }
	.tcw-puzzle { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); align-items: start; }
}

body.tcw-firstaudio-page .tcw-firstaudio-main {
	width: min(calc(100% - 24px), 1300px);
	margin-inline: auto;
	padding-block: 12px;
}
body.tcw-firstaudio-page footer.fa-footer { display: none; }

.tcw-timer { display: none; }

@media (max-width: 600px) {
	.tcw-puzzle, .tcw-clues { grid-template-columns: minmax(0, 1fr); }
	.tcw-puzzle { gap: 8px; }
	.tcw-bar { margin-bottom: 4px; }
	.tcw-gridwrap { background: #f8f6fa; }
	.tcw-timer {
		display: block;
		margin: 0 0 6px;
		color: #674981;
		font-size: 14px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}
	.tcw-keyboard {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		margin-top: 0;
	}
	.tcw-keys { min-width: 0; padding: 8px; }
	.tcw-game .tcw-example { font-size: 13px; }
	.tcw-game .tcw-keytitle { margin: 6px 0; font-size: 14px; }
	.tcw-keyrow { gap: 4px; }
	.tcw-keyboard .tcw-key {
		min-width: 44px;
		min-height: 44px;
		max-width: 100%;
		padding: 4px 6px;
		font-size: 17px;
		touch-action: manipulation;
	}
	.tcw-keyboard .tcw-wide { font-size: 14px; overflow-wrap: anywhere; }
	.tcw-actions { margin-top: 8px; }
}

.tcw-mobile-preview, .tcw-keyboard[hidden] { display: none; }

@media (max-width: 600px) {
	.tcw-game { container-type: normal; }
	.tcw-cell { scroll-margin-top: 80px; }
	.tcw-keyboard {
		position: fixed;
		inset: auto 0 0;
		z-index: 1100;
		max-height: 55vh;
		max-height: 55dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 8px max(8px, env(safe-area-inset-bottom));
		border-radius: 14px 14px 0 0;
		background: #fff;
		box-shadow: 0 -4px 20px #24143a33;
	}
	.tcw-mobile-preview {
		position: sticky;
		top: 0;
		z-index: 1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 4px 8px;
		align-items: center;
		padding: 8px;
		background: #eef4fc;
		color: #111;
		font-size: 14px;
	}
	.tcw-mobile-preview button { grid-area: 1 / 2 / 3 / 3; }
	.tcw-preview-clue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.tcw-preview-word { grid-column: 1; overflow-x: auto; white-space: nowrap; font-size: 18px; font-weight: 700; }
}