/* Word Trail — brown trail palette; shell layout from word-blossom.css. */

.wordtrail-page {
	--wt-brown: #8b5a2b;
	--wt-brown-dark: #6b4423;
	--wt-brown-darker: #5c3d1e;
	--wt-brown-light: #a67c52;
	--wt-brown-pale: #d4c4b0;
	--wt-cream: #fffdf9;
	--wt-stats-bg: #3d2914;
	--wt-stats-border: #5c3d1e;
	--wt-stats-divider: #6b4a2a;
}

.wordtrail-page .word-blossom-banner-fallback-title {
	color: var(--wt-brown);
}

.wordtrail-page .word-blossom-play-shell {
	--wb-stats-bg: var(--wt-stats-bg);
	--wb-stats-border: var(--wt-stats-border);
	--wb-stats-text: #f5efe6;
}

.wordtrail-page .word-blossom-stats-bar {
	background: var(--wt-stats-bg);
	border-color: var(--wt-stats-border);
	color: #f5efe6;
}

.wordtrail-page .word-blossom-stat-value,
.wordtrail-page .word-blossom-stat-label {
	color: #f5efe6;
}

.wordtrail-page .word-blossom-stat + .word-blossom-stat {
	border-left-color: var(--wt-stats-divider);
}

.wordtrail-page .word-blossom-card {
	background: var(--wt-cream);
	border-color: #e8ddd0;
	box-shadow: 0 4px 18px rgba(61, 41, 20, 0.1);
}

.wordtrail-page #wordtrail-app {
	--wb-accent: var(--wt-brown);
	--wb-accent-dark: var(--wt-brown-dark);
	--wb-accent-light: #faf6f0;
	--wb-accent-border: #e8ddd0;
	--wb-accent-muted: var(--wt-brown-light);
	--wb-accent-text: var(--wt-brown-dark);
	--wb-accent-soft: #fffdf9;
	--wb-text-muted: #5c3d1e;
}

.wordtrail-page .word-blossom-complete {
	color: var(--wt-brown);
}

.wordtrail-meta-complete[hidden] {
	display: none !important;
}

.wordtrail-victory {
	margin: 10px 0 0;
	padding: 12px 16px 10px;
	border-radius: 10px;
	background: linear-gradient(180deg, #faf6f0 0%, #fffdf9 100%);
	border: 1px solid #e8ddd0;
	text-align: center;
}

.wordtrail-victory__title {
	margin: 0 0 6px;
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wt-brown-darker);
}

.wordtrail-victory__sub {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #6b5a48;
}

.wordtrail-page .word-blossom-play-shell {
	--wb-archive-title: var(--wt-brown-darker);
	--wb-archive-lede: #6b5a48;
	--wb-archive-table-border: #e8ddd0;
	--wb-archive-th-bg: #f5efe6;
	--wb-archive-th-color: var(--wt-brown-darker);
	--wb-archive-td-border: #efe6db;
	--wb-archive-muted: #8a9682;
	--wb-archive-current-bg: #faf6f0;
	--wb-archive-badge-bg: var(--wt-brown);
	--wb-archive-empty-bg: #faf6f0;
	--wb-archive-empty-border: #e8ddd0;
	--wb-archive-empty-title: var(--wt-brown-darker);
	--wb-archive-empty-sub: #6b5a48;
	--wb-archive-status-completed-bg: #efe4d6;
	--wb-archive-status-completed-color: var(--wt-brown-darker);
}

.wordtrail-page .word-blossom-archive-title {
	color: var(--wt-brown-darker);
}

.wordtrail-page .word-blossom-archive-panel {
	background: var(--wt-cream);
	border-color: #e8ddd0;
	box-shadow: 0 4px 18px rgba(61, 41, 20, 0.1);
}

.wordtrail-page .word-blossom-archive-trail-word {
	color: var(--wt-brown-darker);
}

.wordtrail-page .word-blossom-archive-trail-arrow {
	color: var(--wt-brown-light);
}

.wordtrail-page .word-blossom-archive-status--in-progress,
.wordtrail-page .word-blossom-archive-status--started {
	background: #fff4df;
	color: #8a5a12;
}

.wordtrail-page .word-blossom-archive-status--not-started {
	background: #f0ebe4;
	color: #6b5a48;
}

.wordtrail-page .word-blossom-archive-status--dead-end {
	background: #fdecea;
	color: #9b3b34;
}

.wordtrail-meta {
	margin-bottom: 14px;
}

.wordtrail-goal {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0 0 6px;
	line-height: 1.1;
}

.wordtrail-goal__word {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--wt-brown-darker);
}

.wordtrail-goal__arrow {
	font-size: 20px;
	font-weight: 600;
	color: var(--wt-brown-light);
	line-height: 1;
}

.wordtrail-goal-meta {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #6b5a48;
}

.wordtrail-subtitle {
	margin: 0 0 8px;
	color: #6b5a48;
	font-size: 15px;
}

.wordtrail-instructions {
	margin: 0;
	color: #3d3228;
	font-size: 14px;
	line-height: 1.45;
}

.wordtrail-instructions strong {
	color: var(--wt-brown-darker);
}

.wordtrail-guest-note {
	margin: 12px 0 0;
	padding: 8px 10px;
	background: #f5efe6;
	border: 1px solid #e8ddd0;
	border-radius: 8px;
	font-size: 13px;
	color: #5c4a38;
}

.wordtrail-play-layout {
	align-items: start;
}

.wordtrail-board-header {
	min-height: 44px;
	margin: 12px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.wordtrail-board-header .wordtrail-message {
	margin: 0;
	min-height: 1.3em;
	width: 100%;
}

.wordtrail-board-header .wordtrail-optimal-title {
	margin: 0;
	width: 100%;
	font-size: 14px;
	font-weight: 600;
	color: var(--wt-brown-darker);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wordtrail-message {
	min-height: 1.3em;
	font-size: 14px;
	color: var(--wt-brown-dark);
	text-align: center;
}

.wordtrail-message.is-error {
	color: #a33;
}

.wordtrail-message.is-success {
	color: #4a6b2a;
	font-weight: 600;
}

.wordtrail-board,
.wordtrail-optimal-board {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	overflow-x: auto;
	overflow-y: hidden;
}

.wordtrail-row {
	display: flex;
	gap: 6px;
}

.wordtrail-row--flash .wordtrail-tile {
	animation: wordtrail-tile-flash 0.42s ease;
}

.wordtrail-board--flash-all .wordtrail-tile {
	animation: wordtrail-tile-flash 0.84s ease;
}

@keyframes wordtrail-tile-flash {
	0%,
	100% {
		filter: brightness(1);
		box-shadow: none;
	}

	35% {
		background: #fff4cc;
		border-color: #c9a63a;
		filter: brightness(1.12);
		box-shadow: 0 0 10px rgba(201, 166, 58, 0.55);
	}

	70% {
		background: #fffdf9;
		border-color: var(--wt-brown-light);
		filter: brightness(1.05);
		box-shadow: 0 0 4px rgba(166, 124, 82, 0.25);
	}
}

.wordtrail-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--wt-brown-pale);
	border-radius: 8px;
	background: #faf6f0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wt-brown-darker);
	text-transform: uppercase;
	flex: 0 0 auto;
	box-sizing: border-box;
}

.wordtrail-row.is-start .wordtrail-tile {
	background: #f0e6d8;
	border-color: var(--wt-brown-light);
}

.wordtrail-row.is-target .wordtrail-tile {
	background: #ebe4d4;
	border-color: var(--wt-brown);
}

.wordtrail-tile-changed {
	background: #fff4cc;
	border-color: #c9a63a;
}

.wordtrail-optimal-board .wordtrail-tile {
	background: #f5efe6;
	border-color: #d4c4b0;
}

.wordtrail-play-input .game-input {
	border-color: var(--wt-brown-pale);
}

.wordtrail-play-input .game-input:focus {
	border-color: var(--wt-brown-light);
	box-shadow: 0 0 0 2px rgba(139, 90, 43, 0.22);
}

.wordtrail-page .game-enter {
	background: linear-gradient(180deg, #c49a6c 0%, var(--wt-brown) 55%, var(--wt-brown-dark) 100%);
	border-color: var(--wt-brown-dark);
}

.wordtrail-page .game-enter:hover,
.wordtrail-page .game-enter:focus {
	background: linear-gradient(180deg, #d4b896 0%, var(--wt-brown-light) 55%, var(--wt-brown) 100%);
}

.wordtrail-input-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.wordtrail-page .wordtrail-hint-btn {
	min-height: 64px;
	padding: 10px 8px;
	gap: 3px;
}

.wordtrail-page .game-control-label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: #3d3228;
}

.wordtrail-page .game-control-cost {
	display: inline-block;
	margin-top: 2px;
	padding: 2px 9px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.03em;
	color: #6b4423;
	background: linear-gradient(180deg, #fff8e6 0%, #fff0cc 100%);
	border: 1px solid #e8d4a8;
	border-radius: 999px;
}

.wordtrail-page .game-control-btn:disabled .game-control-cost {
	opacity: 0.75;
}

.wordtrail-stats {
	margin: 0;
	font-size: 13px;
	color: #7a6a58;
	text-align: center;
	line-height: 1.45;
}

.wordtrail-stats strong {
	color: var(--wt-brown-darker);
}

.wordtrail-hints-panel {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #faf3e6;
	border: 1px solid #e6d4b8;
}

.wordtrail-hints-label {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wt-brown-dark);
}

.wordtrail-hints-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wordtrail-hint-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border: 1px solid var(--wt-brown-pale);
	border-radius: 999px;
	background: #fffdf9;
	color: var(--wt-brown-darker);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.wordtrail-hint-chip:hover,
.wordtrail-hint-chip:focus {
	background: #f0e6d8;
	border-color: var(--wt-brown-light);
}

.wordtrail-hint-chip--optimal {
	background: #fff4cc;
	border-color: #c9a63a;
	box-shadow: 0 0 0 2px rgba(201, 166, 58, 0.35);
}

.wordtrail-hint-chip--optimal:hover,
.wordtrail-hint-chip--optimal:focus {
	background: #ffefb0;
	border-color: #b8922e;
}

.wordtrail-complete-panel {
	text-align: left;
}

@media (max-width: 520px) {
	.wordtrail-tile {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wordtrail-row--flash .wordtrail-tile,
	.wordtrail-board--flash-all .wordtrail-tile {
		animation: none;
	}
}