/*
 * Timeline Sorter game page: the frame (title, intro, mode launcher), the terms of the paid game
 * and the trial game. The board itself is the platform's sortable-game.css. States use text and
 * icons, never color alone.
 */

/* The visual order puts the modes and the Start actions first; the reading order is unchanged. */
.timeline-sorter-game {
	display: flex;
	flex-direction: column;
	max-width: 46rem;
}

.timeline-sorter-game > .timeline-sorter-game__help {
	order: 2;
}

/* The page title already names the game; the heading stays for assistive technology. */
.timeline-sorter-game__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.timeline-sorter-game__intro {
	margin: 0 0 1.25rem;
	color: var(--gp-sortable-muted);
	font-size: 1.125rem;
}

.timeline-sorter-game__launch {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: 0.5rem 1.5rem;
}

.timeline-sorter-game__launch > button {
	min-height: 52px;
	padding-inline: 1.75rem;
	font-size: 1.0625rem;
}

.timeline-sorter-game__result[data-kind="success"] {
	--gp-sortable-state: var(--gp-sortable-success);
}

/* The paid game: terms, balance, links and the states of its result. */

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

.timeline-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);
}

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

/* The paid game is the main mode. */
.timeline-sorter-play__modes > .timeline-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%);
}

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

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

/* Cost and balance read as badges; their text is unchanged. */
.timeline-sorter-play__cost > strong,
.timeline-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;
}

.timeline-sorter-play__modes > .timeline-sorter-play__terms:last-child .timeline-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);
}

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

.timeline-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;
}

.timeline-sorter-play__links a,
.timeline-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;
}

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

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

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

.timeline-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. */
.timeline-sorter-play .timeline-sorter-game__result[data-kind="expired"],
.timeline-sorter-play .timeline-sorter-game__result[data-kind="tokens"],
.timeline-sorter-play .timeline-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.
 */
.timeline-sorter-play:has(> [data-timeline-sorter-play-content] > [data-play-list] > li) > :is(.timeline-sorter-game__launch, .timeline-sorter-play__modes, .timeline-sorter-game__intro),
.timeline-sorter-play:has(> [data-timeline-sorter-play-content] > [data-play-result]:not([hidden])) > :is(.timeline-sorter-game__launch, .timeline-sorter-play__modes, .timeline-sorter-game__intro),
.timeline-sorter-game:has(> [data-timeline-sorter-trial-content] > [data-trial-list] > li) > :is(.timeline-sorter-play__modes, .timeline-sorter-game__intro),
.timeline-sorter-game:has(> [data-timeline-sorter-trial-content] > [data-trial-result]:not([hidden])) > :is(.timeline-sorter-play__modes, .timeline-sorter-game__intro) {
	display: none;
}

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

.timeline-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. */
.timeline-sorter-game__launch:has(> button[aria-busy="true"]) > button:not([aria-busy="true"]) {
	visibility: hidden;
}

/* The trial game. */

.timeline-sorter-trial__result[data-kind="correct"] {
	--gp-sortable-state: var(--gp-sortable-success);
}

.timeline-sorter-trial__result[data-kind="expired"],
.timeline-sorter-trial__result[data-kind="rateLimited"] {
	--gp-sortable-state: var(--gp-sortable-warning);
}

/* Once a trial game has events or a result, the mode launcher steps aside; Another trial game continues. */
.timeline-sorter-game:has(> [data-timeline-sorter-trial-content] > [data-trial-list] > li) > .timeline-sorter-game__launch,
.timeline-sorter-game:has(> [data-timeline-sorter-trial-content] > [data-trial-result]:not([hidden])) > .timeline-sorter-game__launch {
	display: none;
}

/* Next to the full game, the trial is the secondary choice. */
.timeline-sorter-game__button + .timeline-sorter-trial__button {
	border-color: var(--gp-sortable-border-strong);
	background: transparent;
	box-shadow: none;
	color: var(--gp-sortable-text);
}

.timeline-sorter-game__button + .timeline-sorter-trial__button:hover {
	border-color: var(--gp-sortable-text);
	background: var(--gp-sortable-surface-raised);
	box-shadow: none;
}

/* Trial limitations: an inline disclosure below the launch buttons. */
.timeline-sorter-trial-info {
	flex-basis: 100%;
	color: var(--gp-sortable-muted);
	font-size: 0.9375rem;
}

.timeline-sorter-trial-info > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.timeline-sorter-trial-info > summary::-webkit-details-marker {
	display: none;
}

.timeline-sorter-trial-info > summary:focus-visible {
	outline: var(--gp-sortable-focus);
	outline-offset: 2px;
}

.timeline-sorter-trial-info ul {
	margin: 0.25rem 0 0;
	padding: 0.75rem 1rem 0.75rem 2rem;
	border-radius: var(--gp-sortable-radius);
	background: var(--gp-sortable-surface);
}

.timeline-sorter-trial__badge {
	display: inline-block;
	margin: 0 0 0.625rem;
	padding: 0.2em 0.75em;
	border: 1px solid color-mix(in srgb, var(--gp-highlight, currentColor) 50%, var(--gp-sortable-canvas));
	border-radius: var(--gp-radius-pill, 4px);
	background: color-mix(in srgb, var(--gp-highlight, currentColor) 10%, var(--gp-sortable-canvas));
	color: var(--gp-highlight, inherit);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}