/*
 * Game history ([gaming_platform_game_history]) and streaks ([gaming_platform_streaks]). Builds on
 * the component kit and account.css; the tables come from the kit.
 */

.gaming-platform-game-history > h2,
.gaming-platform-streaks > h2 {
	margin-bottom: var(--gp-space-4);
}

.gaming-platform-streaks > h2:not(:first-of-type) {
	margin-top: var(--gp-space-7);
}

.gaming-platform-streaks > p {
	max-width: 60rem;
	color: var(--gp-text-muted);
}

/* One streak: current or ended. */
.gaming-platform-streak {
	margin-bottom: var(--gp-space-5);
	padding: var(--gp-space-5);
	border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-lg);
	background: var(--gp-surface-1);
	box-shadow: var(--gp-edge);
}

.gaming-platform-streak > :first-child {
	margin-top: 0;
}

.gaming-platform-streak > :last-child {
	margin-bottom: 0;
}

.gaming-platform-streak > h3 {
	font-size: 1.25rem;
}

.gaming-platform-streak > h4 {
	margin: var(--gp-space-5) 0 var(--gp-space-3);
	color: var(--gp-text-muted);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gaming-platform-streak-current {
	border-color: color-mix(in srgb, var(--gp-accent) 55%, var(--gp-bg));
	background: linear-gradient(160deg, var(--gp-accent-soft), var(--gp-surface-1) 55%);
}

.gaming-platform-streak-count {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 var(--gp-space-4);
	color: var(--gp-text-muted);
}

.gaming-platform-streak-count .gaming-platform-icon {
	align-self: center;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--gp-warning);
}

.gaming-platform-streak-count strong {
	color: var(--gp-text);
	font-family: var(--gp-font-display);
	font-size: 2rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
}

.gaming-platform-streak-max {
	color: var(--gp-text-muted);
}

.gaming-platform-streak-sale {
	margin-block: var(--gp-space-4);
	padding: var(--gp-space-4);
	border: 1px dashed var(--gp-border-strong);
	border-radius: var(--gp-radius-md);
}

.gaming-platform-streak-sale > p {
	margin-top: 0;
	color: var(--gp-text-muted);
}

.gaming-platform-streak-ended > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0 0 var(--gp-space-4);
	padding: 0;
	list-style: none;
	color: var(--gp-text-muted);
	font-size: 0.9375rem;
}

/* Waiting for a group: the text says so; the pulse of the clock only reinforces it. */
.gaming-platform-streak-waiting::before {
	animation: gaming-platform-pulse 1.8s ease-in-out infinite;
}

@keyframes gaming-platform-pulse {
	50% {
		opacity: 0.35;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gaming-platform-streak-waiting::before {
		animation: none;
	}
}

/* A streak that won the prize: the heading text names it; the frame only reinforces it. */
.gaming-platform-streak-prize {
	border-color: var(--gp-token);
	box-shadow: var(--gp-edge), 0 0 0 1px color-mix(in srgb, var(--gp-token) 35%, transparent);
}

/* The groups of a streak sit inside its card. */
.gaming-platform-streak .gaming-platform-table-wrap {
	margin-bottom: var(--gp-space-3);
	border-radius: var(--gp-radius-md);
	background: var(--gp-bg);
	box-shadow: none;
}

.gaming-platform-streak-table caption {
	font-weight: 600;
}

/* The own row is also named "(you)" in its text, so the accent is not the only cue. */
.gaming-platform-streak-own th,
.gaming-platform-streak-own td {
	background: var(--gp-accent-soft);
	font-weight: 600;
}

.gaming-platform-streak-opponent th {
	font-weight: 400;
}

.gaming-platform-history-table code {
	white-space: nowrap;
}

@media (max-width: 40rem) {
	.gaming-platform-history-table code {
		white-space: normal;
	}
}

/* ---------- One own game (game details) ---------- */

.gaming-platform-game-facts {
	margin-bottom: var(--gp-space-5);
}

.gaming-platform-game-facts code {
	overflow-wrap: anywhere;
}

/* The two lists of names side by side; one column on a narrow screen. */
.gaming-platform-game-orders {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--gp-space-5);
}

.gaming-platform-game-orders h4 {
	margin: 0 0 var(--gp-space-2);
	color: var(--gp-text-muted);
	font-size: 0.875rem;
}

.gaming-platform-game-orders ol {
	margin: 0;
	padding-left: 1.5em;
}

.gaming-platform-game-orders li {
	padding-block: 0.15em;
	overflow-wrap: anywhere;
}

.gaming-platform-game-items-note {
	margin-top: var(--gp-space-3);
	color: var(--gp-text-muted);
	font-size: 0.875rem;
}

/* The heat state is a sentence; the bar repeats it and is never the only cue. */
.gaming-platform-heat-state {
	padding-left: var(--gp-space-3);
	border-left: 3px solid var(--gp-border-strong);
	font-weight: 600;
}

.gaming-platform-heat-state--won {
	border-left-color: var(--gp-success);
}

.gaming-platform-heat-state--prize {
	border-left-color: var(--gp-token);
}

.gaming-platform-heat-state--lost,
.gaming-platform-heat-state--failed {
	border-left-color: var(--gp-danger);
}

.gaming-platform-heat-state--waiting,
.gaming-platform-heat-state--unavailable {
	border-left-color: var(--gp-warning);
}

.gaming-platform-game-heat .gaming-platform-table-wrap {
	border-radius: var(--gp-radius-md);
	background: var(--gp-bg);
	box-shadow: none;
}

/* Buyout table (#13): the own level is marked in text; the row also stands out. */
.gaming-platform-buyout-own-row th,
.gaming-platform-buyout-own-row td {
	background: var(--gp-accent-soft);
	font-weight: 700;
}

/* #37: the player's payout history; the note says in text whether a payout was only a test. */
.gaming-platform-payout-note {
	color: var(--gp-text-muted);
	font-size: 0.875rem;
}