/* this file is mostly llm-generated */

:root {
	--background: #f5ecd9;
	--surface: #eee2c8;
	--text: #3a2f22;
	--accent: #7a4a1f;
	--visited-accent: #5c3714;
	--error: #b00020;
	--border: #b89a6b;
	--shadow: rgba(58, 47, 34, 0.35);
	--input-background: #fffdf6;

	@media (prefers-color-scheme: dark) {
		&:not([data-theme="light"]) {
			--is-dark-theme: 1;}}
	&[data-theme="dark"] {
		--is-dark-theme: 1;}}

/* body is a descendant of html (:root) */
@container style(--is-dark-theme: 1) {
	body {
		--background: #1c1712;
		--surface: #2b2319;
		--text: #e8dcc8;
		--accent: #e0a458;
		--visited-accent: #c98c46;
		--error: #f52a2a;
		--border: #5a4a34;
		--shadow: rgba(0, 0, 0, 0.5);
		--input-background: #241d15;}}

* {
	box-sizing: border-box;}

body {
	margin: 0;
	background: var(--background);
	color: var(--text);
	font-family: sans;
	font-size: 15px;
	line-height: 1.35;}

.error {
	color: var(--error);}

header {
	background: var(--surface);
	border-bottom: 2px solid var(--border);
	padding: 4px 8px;}

nav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	overflow-x: auto;

	.spacer {
		flex: 1;}

	a {
		color: var(--accent);
		white-space: nowrap;}

	form {
		margin: 0;}}

.theme-link {
	text-decoration: none;
	font-size: 15px;

	&.active {
		text-decoration: underline;}}

.breadcrumbs > *:last-child {
	font-weight: bold;
	text-decoration: none;}

a:link {
	color: var(--accent);}

a:visited {
	color: var(--visited-accent);}

a.prominent-link {
	display: inline-block;
	padding: 3px 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 3px;
	box-shadow: 0 2px 0 var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	font-weight: bold;
	text-decoration: none;

	&:active {
		box-shadow: inset 0 1px 2px var(--shadow);
		transform: translateY(2px);}}

main {
	padding: 8px 10px;
	max-width: 900px;
	margin: 0 auto;}

footer {
	border-top: 2px solid var(--border);
	padding: 6px 10px;
	display: flex;
	gap: 16px;
	font-size: 13px;}

h1, h2, h3 {
	margin: 8px 0 4px;
	line-height: 1.2;}

p {
	margin: 4px 0;}

hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 8px 0;}

details {
	margin: 10px 0;}

.game-header {
	display: flex;
	gap: 16px;
	align-items: flex-start;}

.game-header-content {
	flex: 1;
	min-width: 0;}

.game-image {
	max-width: 200px;
	flex-shrink: 0;
	display: block;}

table {
	border-collapse: collapse;
	width: 100%;
	margin: 4px 0;}

th, td {
	padding: 2px 6px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	font-size: 14px;
	vertical-align: middle;}

th {
	background: var(--surface);}

tr.deleted td {
	text-decoration: line-through;
	opacity: 0.6;}

table.leaderboard tbody {
	counter-reset: rank;

	tr.verified {
		counter-increment: rank;

		td:first-child::before {
			content: counter(rank) '.';}

		&:nth-child(1 of .verified) {
			background: #f3d47e;
			color: #4a3400;
			font-weight: bold;
			box-shadow: inset 4px 0 0 #a8790a;

			td:first-child::before {
				content: '🥇 ' counter(rank);}}

		&:nth-child(2 of .verified) {
			background: #dcdcdc;
			color: #3a3a3a;
			font-weight: bold;
			box-shadow: inset 4px 0 0 #6b6b6b;

			td:first-child::before {
				content: '🥈 ' counter(rank);}}

		&:nth-child(3 of .verified) {
			background: #e3b48c;
			color: #4a2a10;
			font-weight: bold;
			box-shadow: inset 4px 0 0 #9a5a2e;

			td:first-child::before {
				content: '🥉 ' counter(rank);}}

		&:nth-child(-n+3) a {
			text-decoration: underline;}

		&:nth-child(1) a {
			color: #6b4400;}

		&:nth-child(2) a {
			color: #444;}

		&:nth-child(3) a {
			color: #5c2f10;}
	}}

table.runs tr {
	&.rejected {
		text-decoration: line-through;
		opacity: 0.6;}

	&.verification-pending {
		opacity: 0.6;}}

img.avatar {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	vertical-align: middle;
	object-fit: cover;
	margin-right: 4px;}

.tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	font-size: 11px;
	padding: 0 4px;
	border: 1px solid var(--border);
	border-radius: 3px;
	background: var(--surface);
	color: var(--text);

	&.rejected {
		color: var(--error);}

	button {
		font-size: 11px;
		padding: 0 4px;}}

button,
input[type="submit"] {
	font-family: inherit;
	font-size: 14px;
	padding: 3px 10px;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 3px;
	box-shadow: 0 2px 0 var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: box-shadow 0.05s ease, transform 0.05s ease;

	&:active {
		box-shadow: inset 0 1px 2px var(--shadow);
		transform: translateY(2px);}

	&:disabled,
	fieldset:disabled & {
		cursor: not-allowed;
		color: #948266;
		background: var(--background);
		box-shadow: none;}}

button.secondary {
	background: transparent;
	box-shadow: none;

	&:active {
		transform: translateY(1px);}}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="file"],
select,
textarea {
	font-family: inherit;
	font-size: 14px;
	padding: 2px 4px;
	border: 1px solid var(--border);
	border-radius: 2px;
	background: var(--input-background);
	box-shadow: inset 0 1px 2px var(--shadow);
	color: var(--text);
	width: 100%;}

label {
	display: inline-block;
	min-width: 130px;}

fieldset {
	border: 1px solid var(--border);
	border-radius: 3px;
	margin: 6px 0;
	padding: 6px 10px;}

legend {
	padding: 0 4px;
	font-weight: bold;}

input[type="radio"] {
	accent-color: var(--accent);
	transform: scale(1.2);
	margin-right: 4px;}

.radio-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	margin: 10px 0;

	label {
		display: inline-flex;
		align-items: center;
		min-width: 0;
		padding: 2px 8px;
		border: 1px solid var(--border);
		border-radius: 3px;
		background: var(--surface);}}

button.help {
	display: inline-block;
	margin-left: 4px;
	width: 16px;
	height: 16px;
	padding: 0;
	line-height: 14px;
	text-align: center;
	border-radius: 50%;
	background: var(--surface);
	border: 1px solid var(--border);
	box-shadow: 0 1px 0 var(--shadow);
	font-size: 12px;
	font-weight: bold;}

[popover].help {
	margin: 0;
	padding: 4px 6px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 3px;
	font-size: 13px;
	width: max-content;
	max-width: min(460px, 60vw);
	box-shadow: 0 2px 4px var(--shadow);
	top: calc(anchor(bottom) + 4px);
	left: anchor(left);}

summary {
	cursor: pointer;}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;}}