/* Word Unscrambler Toolkit
   Scoped under .wut- classes; uses CSS variables so it inherits site theming. */

:root {
	--wut-accent: #2563eb;
	--wut-accent-dark: #1d4ed8;
	--wut-bg: #ffffff;
	--wut-surface: #f5f7fb;
	--wut-border: #e3e8f0;
	--wut-text: #1f2937;
	--wut-muted: #6b7280;
	--wut-chip: #eef2ff;
	--wut-radius: 10px;
}

.wut-article { max-width: 920px; margin: 0 auto; }

.wut-page-head h1 { line-height: 1.2; }
.wut-letters-inline { letter-spacing: .06em; }
.wut-lede { color: var(--wut-muted); font-size: 1.05rem; margin-top: .25rem; }

/* Tool box */
.wut-tool {
	background: var(--wut-surface);
	border: 1px solid var(--wut-border);
	border-radius: var(--wut-radius);
	padding: 1rem;
	margin: 1.25rem 0 1.75rem;
}
.wut-input-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.wut-input {
	flex: 1 1 240px;
	font-size: 1.15rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .7rem .9rem;
	border: 2px solid var(--wut-border);
	border-radius: 8px;
	background: var(--wut-bg);
	color: var(--wut-text);
	min-width: 0;
}
.wut-input:focus { outline: none; border-color: var(--wut-accent); }
.wut-btn {
	flex: 0 0 auto;
	font-size: 1rem;
	font-weight: 600;
	padding: .7rem 1.4rem;
	border: 0;
	border-radius: 8px;
	background: var(--wut-accent);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}
.wut-btn:hover { background: var(--wut-accent-dark); }
.wut-btn:disabled { opacity: .6; cursor: default; }

.wut-live { margin-top: 1rem; }
.wut-live-total { font-weight: 600; margin: .25rem 0 .75rem; }
.wut-live .wut-section { margin: 1rem 0; }
.wut-live h3 { margin: .5rem 0 .4rem; font-size: 1rem; color: var(--wut-muted); }
.wut-empty { color: var(--wut-muted); }
.wut-spinner { color: var(--wut-muted); }

/* Word grids */
.wut-section { margin: 1.75rem 0; }
.wut-section h2 { font-size: 1.25rem; margin-bottom: .6rem; }
.wut-word-grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: .4rem;
}
.wut-word-grid li { margin: 0; }
.wut-word, .wut-link-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .4rem;
	padding: .45rem .6rem;
	background: var(--wut-chip);
	border: 1px solid var(--wut-border);
	border-radius: 7px;
	text-decoration: none;
	color: var(--wut-text);
	font-weight: 600;
	letter-spacing: .04em;
	transition: transform .08s ease, border-color .15s ease;
}
.wut-word:hover, .wut-link-chip:hover { border-color: var(--wut-accent); transform: translateY(-1px); }
.wut-score {
	font-size: .72rem;
	font-weight: 700;
	color: #fff;
	background: var(--wut-accent);
	border-radius: 999px;
	padding: .05rem .4rem;
	min-width: 1.2rem;
	text-align: center;
}
.wut-anagram-grid .wut-word { background: #fef3c7; }

/* Related + FAQ */
.wut-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wut-related-list a {
	display: inline-block;
	padding: .35rem .7rem;
	background: var(--wut-surface);
	border: 1px solid var(--wut-border);
	border-radius: 999px;
	text-decoration: none;
	font-size: .9rem;
	color: var(--wut-accent-dark);
}
.wut-related-list a:hover { border-color: var(--wut-accent); }
.wut-faq-item { margin: .75rem 0; }
.wut-faq-item h3 { margin: 0 0 .2rem; font-size: 1.02rem; }
.wut-faq-item p { margin: 0; color: var(--wut-muted); }
.wut-note { color: var(--wut-muted); font-style: italic; }

@media (max-width: 480px) {
	.wut-word-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
	.wut-btn { flex: 1 1 100%; }
}