/* City Sorter paid game. Builds on city-sorter-game.css; states use text and icons, never color alone (A11Y-B09-005). */

/* The terms of both game modes, next to each other where there is room. */
.city-sorter-play__modes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	margin-block: 0 1rem;
}

.city-sorter-play__terms {
	margin-block: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--gp-sortable-border);
	border-radius: var(--gp-sortable-radius-lg);
	background: var(--gp-sortable-surface);
	box-shadow: var(--gp-edge, none);
}

.city-sorter-play__modes > .city-sorter-play__terms {
	margin-block: 0;
}

/* The paid game is the main mode. */
.city-sorter-play__modes > .city-sorter-play__terms:first-child {
	border-color: color-mix(in srgb, var(--gp-sortable-accent) 55%, var(--gp-sortable-canvas));
	background: linear-gradient(160deg, color-mix(in srgb, var(--gp-sortable-accent) 16%, var(--gp-sortable-canvas)), var(--gp-sortable-surface) 60%);
}

.city-sorter-play__terms > h3 {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
}

.city-sorter-play__terms > p {
	margin: 0 0 0.5em;
}

/* Cost and balance read as badges; their text is unchanged. */
.city-sorter-play__cost > strong,
.city-sorter-play__balance {
	display: inline-block;
	padding: 0.2em 0.75em;
	border: 1px solid color-mix(in srgb, var(--gp-token, currentColor) 45%, var(--gp-sortable-canvas));
	border-radius: var(--gp-radius-pill, 4px);
	background: color-mix(in srgb, var(--gp-token, currentColor) 12%, var(--gp-sortable-canvas));
	color: var(--gp-token, inherit);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.city-sorter-play__modes > .city-sorter-play__terms:last-child .city-sorter-play__cost > strong {
	border-color: color-mix(in srgb, var(--gp-sortable-success) 45%, var(--gp-sortable-canvas));
	background: color-mix(in srgb, var(--gp-sortable-success) 12%, var(--gp-sortable-canvas));
	color: var(--gp-sortable-success);
}

.city-sorter-play__policy {
	color: var(--gp-sortable-muted);
	font-size: 0.9375rem;
}

.city-sorter-play__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.city-sorter-play__links a,
.city-sorter-play__shop a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gp-sortable-accent-text);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

.city-sorter-play__links a:hover,
.city-sorter-play__shop a:hover {
	color: var(--gp-sortable-text);
}

.city-sorter-play__links a:focus-visible,
.city-sorter-play__shop a:focus-visible {
	outline: var(--gp-sortable-focus);
	outline-offset: 2px;
}

.city-sorter-play__shop {
	margin-block: 0.5rem 1rem;
}

.city-sorter-play__limitations {
	margin: 0;
	padding-left: 1.25em;
	color: var(--gp-sortable-muted);
	font-size: 0.9375rem;
}

/* A warning state (expired game, missing tokens, rate limit) is not a failure of the player. */
.city-sorter-play .city-sorter-game__result[data-kind="expired"],
.city-sorter-play .city-sorter-game__result[data-kind="tokens"],
.city-sorter-play .city-sorter-game__result[data-kind="rateLimited"] {
	--gp-sortable-state: var(--gp-sortable-warning);
}

/*
 * While a game is shown, the Start actions and the terms of the modes step aside; the result
 * offers the next game. The terms were shown before the Start action (A11Y-B09-001).
 */
.city-sorter-play:has(> [data-city-sorter-play-content] > [data-play-list] > li) > :is(.city-sorter-game__launch, .city-sorter-play__modes, .city-sorter-game__intro),
.city-sorter-play:has(> [data-city-sorter-play-content] > [data-play-result]:not([hidden])) > :is(.city-sorter-game__launch, .city-sorter-play__modes, .city-sorter-game__intro),
.city-sorter-game:has(> [data-city-sorter-trial-content] > [data-trial-list] > li) > :is(.city-sorter-play__modes, .city-sorter-game__intro),
.city-sorter-game:has(> [data-city-sorter-trial-content] > [data-trial-result]:not([hidden])) > :is(.city-sorter-play__modes, .city-sorter-game__intro) {
	display: none;
}

/* Start game is greyed out until the player is logged in and has tokens; the reason is text. */
.city-sorter-play .city-sorter-game__button:disabled {
	box-shadow: none;
	cursor: not-allowed;
	filter: grayscale(1);
	opacity: 0.45;
}

.city-sorter-play__reason {
	flex-basis: 100%;
	margin: 0;
	color: var(--gp-sortable-muted);
	font-size: 0.9375rem;
}

/* While one mode is starting, the other Start action steps aside, so only one game runs. */
.city-sorter-game__launch:has(> button[aria-busy="true"]) > button:not([aria-busy="true"]) {
	visibility: hidden;
}