.ttt-game-finder {
	--ttt-finder-stroke: color-mix(in srgb, currentColor 18%, transparent);
	--ttt-finder-surface: color-mix(in srgb, currentColor 4%, transparent);
	--ttt-finder-accent: #116c32;
	color: #27272f;
	font: inherit;
	max-width: 100%;
}
.ttt-game-finder *,
.ttt-game-finder *::before,
.ttt-game-finder *::after { box-sizing: border-box; }
.ttt-game-finder h2,
.ttt-game-finder h3,
.ttt-game-finder p { margin-top: 0; }
.ttt-game-finder__panel,
.ttt-game-finder__results {
	border: 1px solid var(--ttt-finder-stroke);
	border-radius: 0.55rem;
	padding: clamp(1rem, 3vw, 1.5rem);
	background: var(--ttt-finder-surface);
}
.ttt-game-finder__filter-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem;
	margin: 1.25rem 0;
}
.ttt-game-finder__field { display: grid; align-content: start; gap: 0.4rem; font-weight: 650; }
.ttt-game-finder__field input,
.ttt-game-finder__field select {
	width: 100%;
	min-height: 2.75rem;
	border: 1px solid var(--ttt-finder-stroke);
	border-radius: 0.3rem;
	padding: 0.55rem 0.7rem;
	background: Canvas;
	color: CanvasText;
	font: inherit;
}
.ttt-game-finder__field input:focus-visible,
.ttt-game-finder__field select:focus-visible,
.ttt-game-finder button:focus-visible,
.ttt-game-finder a:focus-visible,
.ttt-game-finder #ttt-game-finder-results-title:focus-visible {
	outline: 3px solid var(--ttt-finder-accent);
	outline-offset: 2px;
}
.ttt-game-finder__input-suffix { position: relative; }
.ttt-game-finder__input-suffix input { padding-right: 5.1rem; }
.ttt-game-finder__input-suffix span { position: absolute; top: 50%; right: 0.7rem; transform: translateY(-50%); font-size: 0.9rem; font-weight: 500; opacity: 0.75; }
.ttt-game-finder__optional { font-size: 0.84em; font-weight: 400; opacity: 0.72; }
.ttt-game-finder__field small { font-size: 0.8rem; font-weight: 400; opacity: 0.78; }
.ttt-game-finder__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ttt-game-finder__button,
.ttt-game-finder__more {
	min-height: 2.75rem;
	border: 1px solid var(--ttt-finder-stroke);
	border-radius: 0.3rem;
	padding: 0.55rem 0.85rem;
	background: Canvas;
	color: CanvasText;
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}
.ttt-game-finder__button:hover,
.ttt-game-finder__more:hover { border-color: var(--ttt-finder-accent); }
.ttt-game-finder__button--primary { border-color: var(--ttt-finder-accent); background: var(--ttt-finder-accent); color: #fff; }
.ttt-game-finder__results { margin-top: 1.25rem; }
.ttt-game-finder__results { scroll-margin-top: 1rem; }
.ttt-game-finder__results h2 { margin-bottom: 0.4rem; }
.ttt-game-finder__result-count { margin-bottom: 1rem; }
.ttt-game-finder__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0.8rem; }
.ttt-game-finder__card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ttt-finder-stroke); border-radius: 0.4rem; padding: 1rem; background: Canvas; }
.ttt-game-finder__card-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.4rem; }
.ttt-game-finder__card h3 { margin-bottom: 0.35rem; font-size: 1.15rem; }
.ttt-game-finder__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ttt-game-finder__tag { border: 1px solid var(--ttt-finder-stroke); border-radius: 999px; padding: 0.15rem 0.5rem; font-size: 0.75rem; }
.ttt-game-finder__reason { margin: 0.55rem 0 0.8rem; font-size: 0.9rem; font-weight: 650; }
.ttt-game-finder__facts { display: grid; gap: 0.4rem; margin: 0 0 1rem; }
.ttt-game-finder__facts div { display: grid; grid-template-columns: minmax(5.4rem, 0.7fr) 1.3fr; gap: 0.5rem; }
.ttt-game-finder__facts dt { font-size: 0.82rem; opacity: 0.75; }
.ttt-game-finder__facts dd { margin: 0; font-size: 0.9rem; }
.ttt-game-finder__links { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: auto; }
.ttt-game-finder__links a { color: var(--ttt-finder-accent); font-weight: 650; text-decoration: underline; text-underline-offset: 0.15em; }
.ttt-game-finder__more { margin-top: 1rem; }
.ttt-game-finder__results > p { max-width: 50rem; }
.ttt-game-finder__suggestions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.65rem; }
.ttt-game-finder__suggestion { display: grid; gap: 0.25rem; min-height: 4rem; border: 1px solid var(--ttt-finder-stroke); border-radius: 0.35rem; padding: 0.7rem 0.8rem; background: Canvas; color: CanvasText; font: inherit; text-align: left; cursor: pointer; }
.ttt-game-finder__suggestion:hover { border-color: var(--ttt-finder-accent); }
.ttt-game-finder__suggestion span { color: var(--ttt-finder-accent); font-weight: 650; }
.ttt-game-finder__suggestion small { font-size: 0.82rem; opacity: 0.78; }

@media (max-width: 600px) {
	.ttt-game-finder__filter-grid { grid-template-columns: 1fr; }
}

.ttt-game-finder input, .ttt-game-finder select { font-size: max(16px, 1rem); }

.ttt-game-finder__player-stepper { display: flex; gap: 8px; }
.ttt-game-finder__player-stepper input { min-width: 0; text-align: center; }
.ttt-game-finder__player-stepper button { flex: 0 0 44px; min-height: 44px; padding: 0; border: 1px solid var(--ttt-finder-stroke); border-radius: 5px; background: #fff; color: #116c32; font-size: 24px; cursor: pointer; }
.ttt-game-finder__player-stepper button:disabled { opacity: .45; cursor: not-allowed; }
.ttt-game-finder__links a { display: inline-flex; align-items: center; min-height: 44px; }