/*
 * Gaming Platform account pages: registration, login and the account area. Builds on the component
 * kit (components.css): single column, visible focus, error states with text and icon.
 */

/* Registration and login: one centred card. */
.gaming-platform-account.gaming-platform-login,
.gaming-platform-account.gaming-platform-register {
	max-width: 26rem;
	padding: clamp(1.25rem, 5vw, 2rem);
	border: 1px solid var(--gp-border);
	border-radius: var(--gp-radius-lg);
	background: var(--gp-surface-1);
	box-shadow: var(--gp-edge), var(--gp-shadow-raised);
}

/* The form card is centred in the page; a message card starts at the left edge, like the page title. */
.gaming-platform-account.gaming-platform-login,
.gaming-platform-account.gaming-platform-register {
	margin-inline: auto;
}

.gaming-platform-account.gaming-platform-message {
	margin-left: 0 !important;
}

/* Brand mark at the top of the card: the site name with the accent dot. */
.gaming-platform-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 var(--gp-space-5);
	color: var(--gp-text);
	font-family: var(--gp-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.gaming-platform-brand::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--gp-accent);
}

.gaming-platform-login form .gaming-platform-button,
.gaming-platform-register form .gaming-platform-button {
	width: 100%;
	min-height: 48px;
}

.gaming-platform-login form > p:last-child,
.gaming-platform-register form > p:last-child {
	margin-bottom: 0;
}

.gaming-platform-login > p,
.gaming-platform-register > p {
	margin: var(--gp-space-4) 0 0;
	color: var(--gp-text-muted);
	font-size: 0.9375rem;
	text-align: center;
}

/* Account area. */
.gaming-platform-account-area > h2 {
	margin-bottom: var(--gp-space-5);
}

.gaming-platform-account-area .gaming-platform-status::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.4em;
	border-radius: 50%;
	background: var(--gp-success);
	vertical-align: 0.15em;
}

.gaming-platform-token-balance .gaming-platform-token-amount .gaming-platform-icon {
	align-self: center;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--gp-token);
}

.gaming-platform-placeholder {
	margin: 0;
	color: var(--gp-text-muted);
}

/*
 * The rules below are shared by the account page, the shop pages, the game history and the
 * streaks page (all load this file); they are not part of the kit that the game pages load.
 */

/* ---------- Filters (GET forms above a list) ---------- */

.gaming-platform-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--gp-space-3);
	margin: 0 0 var(--gp-space-5);
}

.gaming-platform-filter {
	display: grid;
	gap: var(--gp-space-1);
	min-width: 9rem;
}

.gaming-platform-filter label {
	color: var(--gp-text-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.gaming-platform-filters select {
	min-height: 44px;
	padding: 0 var(--gp-space-3);
	border: 1px solid var(--gp-border-control);
	border-radius: var(--gp-radius-md);
	background: var(--gp-surface-1);
	color: var(--gp-text);
	font: inherit;
}

@media (max-width: 40rem) {
	.gaming-platform-filter,
	.gaming-platform-filters .gaming-platform-button {
		flex: 1 1 100%;
	}
}

/* ---------- Summary sections (account page, game details) ---------- */

.gaming-platform-section-empty,
.gaming-platform-section-unavailable {
	color: var(--gp-text-muted);
}

/* "Unavailable" is said in words; the bar only sets the note apart from an empty state. */
.gaming-platform-section-unavailable {
	padding-left: var(--gp-space-3);
	border-left: 3px solid var(--gp-warning);
}

.gaming-platform-section-more {
	margin-top: var(--gp-space-3);
	font-weight: 600;
}

.gaming-platform-section .gaming-platform-table-wrap {
	margin-bottom: 0;
}

.gaming-platform-back {
	margin: 0 0 var(--gp-space-3);
	font-weight: 600;
}

.gaming-platform-back a::before {
	content: "\2190\00a0";
}

/* Lap times and gaps line up digit by digit. */
.gaming-platform-lap {
	font-family: var(--gp-font-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------- Account dashboard ---------- */

.gaming-platform-account-actions .gaming-platform-links {
	margin-bottom: 0;
}

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

.gaming-platform-streak-list dd .gaming-platform-icon {
	margin-right: 0.35em;
	color: var(--gp-accent);
}

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