/*
 * mc-info-web theme, on top of Pico's green palette: a pixel font, a dirt
 * background with a grass strip, and cream "paper" panels. All art here is
 * original (see tools/genart), nothing from Mojang.
 */

:root {
	--font-pixel: "Pixelify Sans", ui-monospace, "Cascadia Mono", monospace;

	--panel-bg: #f3eedd;
	--panel-ink: #2a281f;
	--panel-line: #2a281f;
	--card-bg: #fffaf0;
	--zebra: rgba(42, 40, 31, 0.055);
	--muted: #6b6755;
	--points: #b87400;
	--link: #2e7d32;
	--link-hover: #1b5e20;
	--field-bg: #fffdf6;

	--bar-bg: #1c2a17;
	--bar-line: #0d140b;
	--btn-face: #3f7a2c;
	--btn-light: #86c868;
	--btn-dark: #1f3d15;

	--gold: #f4cf45;
	--silver: #d4d8dc;
	--bronze: #e3a56a;

	--mc-unknown-color: var(--muted);
	--mc-dead-color: #8a8570;
	--mc-repeated-color: #c0392b;

	--pico-border-radius: 2px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--panel-bg: #1c261d;
		--panel-ink: #e4eee0;
		--panel-line: #050805;
		--card-bg: #243225;
		--zebra: rgba(255, 255, 255, 0.045);
		--muted: #9db09a;
		--points: #f0b429;
		--link: #7bd47e;
		--link-hover: #a6e8a8;
		--field-bg: #172019;
		--mc-dead-color: #5d6a58;
	}
}

/* ---- page background -------------------------------------------------- */

body {
	min-height: 100vh;
	/* The world, top to bottom: sky, grass, dirt, stone, then deepslate for
	   the rest of the page. strata.png is one tall strip (generated by
	   tools/genart) repeated across; deepslate.png tiles below it. */
	background-color: #3d3d44;
	background-image: url("/static/img/strata.png"), url("/static/img/deepslate.png");
	background-repeat: repeat-x, repeat;
	background-position: top center, top left;
	background-size: 256px 1296px, 256px 1024px;
	image-rendering: pixelated;
	display: flex;
	flex-direction: column;
}

/* A fixed wash darkens the dirt behind the panel in dark mode. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(8, 14, 8, 0.62);
		pointer-events: none;
		z-index: -1;
	}
}

body > main {
	flex: 1;
}

img.face {
	image-rendering: pixelated;
}

/* ---- header / navigation ---------------------------------------------- */

.site-header {
	padding-top: 1.75rem;
}

.main-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1.25rem;
	padding: 0.6rem 1rem;
	background: var(--bar-bg);
	border: 3px solid var(--bar-line);
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
	/* Pico gives nav an own margin and negative offsets. */
	margin-bottom: 0;
}

.main-nav .brand {
	font-family: var(--font-pixel);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: 0.02em;
	color: #eaf6e2;
	text-decoration: none;
	text-shadow: 2px 2px 0 #000;
}

.main-nav ul.tabs {
	display: flex;
	gap: 0.6rem;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.main-nav ul.tabs li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Bevelled, Minecraft-button-style tabs. */
.main-nav a.tab {
	display: block;
	padding: 0.35rem 1.1rem;
	font-family: var(--font-pixel);
	font-weight: 600;
	font-size: 1.05rem;
	color: #fff;
	text-decoration: none;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
	background: var(--btn-face);
	border: 3px solid;
	border-color: var(--btn-light) var(--btn-dark) var(--btn-dark) var(--btn-light);
}

.main-nav a.tab:hover {
	background: #4b8c36;
}

.main-nav a.tab.active {
	background: #2f5e20;
	border-color: var(--btn-dark) var(--btn-light) var(--btn-light) var(--btn-dark);
}

.sub-nav {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	padding: 0.35rem 1rem;
	margin-top: 0.4rem;
	background: rgba(13, 20, 11, 0.72);
	border: 2px solid var(--bar-line);
	font-family: var(--font-pixel);
}

.sub-nav:empty {
	display: none;
}

.sub-nav a {
	color: #d7ecd0;
	text-decoration: none;
	padding: 0.1rem 0;
	border-bottom: 3px solid transparent;
}

.sub-nav a:hover {
	color: #fff;
}

.sub-nav a[aria-current="page"] {
	color: #fff;
	border-bottom-color: var(--btn-light);
}

/* ---- the paper panel -------------------------------------------------- */

main.panel {
	--pico-color: var(--panel-ink);
	--pico-muted-color: var(--muted);
	--pico-muted-border-color: color-mix(in srgb, var(--panel-ink) 18%, transparent);
	--pico-primary: var(--link);
	--pico-primary-hover: var(--link-hover);
	--pico-primary-underline: color-mix(in srgb, var(--link) 45%, transparent);
	--pico-card-background-color: var(--card-bg);
	--pico-form-element-background-color: var(--field-bg);
	--pico-form-element-border-color: color-mix(in srgb, var(--panel-ink) 40%, transparent);
	--pico-form-element-color: var(--panel-ink);
	--pico-form-element-placeholder-color: var(--muted);
	--pico-form-element-active-background-color: var(--field-bg);
	--pico-form-element-focus-color: var(--link);

	margin-top: 1.25rem;
	margin-bottom: 1.5rem;
	padding: 1.75rem 2rem 2rem;
	color: var(--panel-ink);
	background:
		repeating-linear-gradient(135deg, rgba(120, 100, 60, 0.05) 0 8px, transparent 8px 16px),
		var(--panel-bg);
	border: 3px solid var(--panel-line);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
}

main.panel h1,
main.panel h2,
main.panel h3,
main.panel h4,
main.panel th {
	color: var(--panel-ink);
}

main.panel h1,
main.panel h2,
main.panel h3,
main.panel th {
	font-family: var(--font-pixel);
}

main.panel h2 {
	margin-top: 2rem;
	padding-bottom: 0.3rem;
	border-bottom: 3px solid color-mix(in srgb, var(--panel-ink) 25%, transparent);
}

.page-title {
	text-align: center;
	margin-bottom: 1.75rem;
}

.page-title h1 {
	margin-bottom: 0.2rem;
}

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

body > footer {
	color: #e6efe0;
	text-align: center;
	text-shadow: 1px 1px 0 #000;
	padding-bottom: 1.5rem;
}

@media (max-width: 640px) {
	main.panel {
		padding: 1.1rem 0.9rem 1.4rem;
	}

	.main-nav {
		flex-wrap: wrap;
	}
}

/* ---- tables ----------------------------------------------------------- */

table.zebra tbody tr:nth-child(even) td,
table.mob-list tbody tr:nth-child(even) td {
	background: var(--zebra);
}

table .num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

table th.pos,
table td.pos {
	width: 4rem;
}

/* Numbers use the regular font: the pixel font's 8s read as S. */
.points {
	color: var(--points);
	font-weight: 700;
}

h1 .points {
	font-size: 1.1rem;
	margin-left: 0.4rem;
}

.rank {
	font-weight: 700;
}

.rank.gold {
	color: #c99700;
}

.rank.silver {
	color: #7d8791;
}

.rank.bronze {
	color: #b0662a;
}

.player-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}

.player-link:hover span {
	text-decoration: underline;
}

.player-link .face {
	width: 2rem;
	height: 2rem;
	border: 2px solid var(--panel-line);
}

/* ---- overview: cards and podium --------------------------------------- */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.stat-card {
	margin: 0;
	padding: 0.9rem 1rem;
	text-align: center;
	background: var(--card-bg);
	border: 3px solid var(--panel-line);
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.stat-card h3 {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	color: var(--muted);
	font-weight: 600;
}

.stat-card p {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--panel-ink);
	overflow-wrap: anywhere;
}

.podium {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 1rem;
	margin: 2.5rem 0 1.5rem;
	padding: 0;
	list-style: none;
}

.podium-slot {
	flex: 1 1 0;
	max-width: 15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.podium-slot a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 0 0.75rem 0.6rem;
	text-decoration: none;
	color: #2a281f;
	border: 3px solid var(--panel-line);
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.podium-slot.place-1 a {
	min-height: 11rem;
	background: var(--gold);
}

.podium-slot.place-2 a {
	min-height: 9rem;
	background: var(--silver);
}

.podium-slot.place-3 a {
	min-height: 7.5rem;
	background: var(--bronze);
}

.podium-slot .body {
	/* The 3D bust pokes out above the block. */
	margin-top: -4.5rem;
	height: 8rem;
	width: 8rem;
}

.podium-slot .name {
	font-family: var(--font-pixel);
	font-size: 1.15rem;
	overflow-wrap: anywhere;
	text-align: center;
}

.podium-slot .points {
	color: #7a4a00;
}

.podium-slot .place {
	position: absolute;
	right: 0.6rem;
	bottom: 0.4rem;
	font-weight: 700;
	font-size: 1.4rem;
	opacity: 0.5;
}

@media (max-width: 640px) {
	/* A vertical list, 1st on top, like the mod's phone layout. */
	.podium {
		flex-direction: column;
		align-items: stretch;
		margin-top: 1.5rem;
	}

	.podium-slot {
		max-width: none;
	}

	.podium-slot.place-1 {
		order: 1;
	}

	.podium-slot.place-2 {
		order: 2;
	}

	.podium-slot.place-3 {
		order: 3;
	}

	.podium-slot a {
		min-height: 4.5rem !important;
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.75rem;
		padding: 0.5rem 0.75rem;
	}

	.podium-slot .body {
		margin-top: -1.2rem;
		height: 5.5rem;
		width: 5.5rem;
	}
}

/* ---- player page, tabs, browse ---------------------------------------- */

.player-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.player-header .body {
	height: 8rem;
	width: 8rem;
}

.player-header h1 {
	margin-bottom: 0.4rem;
}

.player-header p {
	margin: 0;
	color: var(--muted);
}

.tab-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
}

.tab-bar > input[type="search"],
.tab-bar > form {
	flex: 1 1 14rem;
	margin: 0;
}

.tab-bar > form input {
	margin: 0;
}

.tab-bar > input[type="search"] {
	margin-bottom: 0;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
}

.chip {
	padding: 0.25rem 0.75rem;
	font-family: var(--font-pixel);
	font-size: 0.95rem;
	color: var(--panel-ink);
	text-decoration: none;
	background: var(--card-bg);
	border: 2px solid var(--panel-line);
}

.chip:hover {
	background: color-mix(in srgb, var(--btn-face) 18%, var(--card-bg));
}

.chip.active {
	color: #fff;
	background: var(--btn-face);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.stat-list {
	columns: 18rem;
	column-gap: 2rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.stat-list li {
	display: flex;
	flex-direction: column;
	margin: 0 0 0.6rem;
	padding: 0;
	break-inside: avoid;
}

.stat-list .muted {
	font-size: 0.85rem;
}

/* ---- ancestry --------------------------------------------------------- */

.filters-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 0.5rem 1rem;
	align-items: end;
	margin-bottom: 1.5rem;
}

.filters-form label {
	margin-bottom: 0;
}

.filters-form input,
.filters-form select {
	margin-bottom: 0;
}

.filters-form .switch-field {
	display: flex;
	align-items: center;
	align-self: center;
}

table.mob-list td.name,
table.mob-list th.name {
	min-width: 10rem;
}

.badge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: var(--pico-border-radius);
	font-size: 0.8rem;
}

.badge.alive {
	background: #2f7a2e;
	color: #fff;
}

.badge.dead {
	background: var(--mc-dead-color);
	color: #fff;
}

.badge.unknown {
	background: transparent;
	border: 1px dashed var(--mc-unknown-color);
	color: var(--mc-unknown-color);
}

.badge.inbreeding-none {
	background: #2f7a2e;
	color: #fff;
}

.badge.inbreeding-low {
	background: #4d8b1f;
	color: #fff;
}

.badge.inbreeding-moderate {
	background: #b7791f;
	color: #fff;
}

.badge.inbreeding-high {
	background: #c05621;
	color: #fff;
}

.badge.inbreeding-severe {
	background: var(--mc-repeated-color);
	color: #fff;
}

#pedigree-graph {
	width: 100%;
	height: 70vh;
	min-height: 28rem;
	border: 3px solid var(--panel-line);
	background: #202a21;
}

.graph-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	margin-bottom: 0.75rem;
}

.graph-controls label {
	margin: 0;
}

.graph-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.85rem;
	margin-top: 0.5rem;
	color: var(--muted);
}

.graph-legend [hidden] {
	display: none;
}

.graph-legend .swatch {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	margin-right: 0.25rem;
	vertical-align: middle;
}

/* Wide tables scroll inside the panel instead of overflowing it. */
.table-scroll {
	overflow-x: auto;
	margin-bottom: 1rem;
}

.table-scroll table {
	margin-bottom: 0;
}

table.mob-list td.hide-narrow {
	white-space: nowrap;
}

table.mob-list th,
table.mob-list td {
	padding-inline: 0.6rem;
}

/* Secondary columns drop out on phones rather than forcing a sideways scroll. */
@media (max-width: 640px) {
	.hide-narrow {
		display: none;
	}
}

@media (max-width: 1100px) {
	.hide-medium {
		display: none;
	}
}

/* ---- advancements ----------------------------------------------------- */

.notice {
	padding: 0.6rem 0.9rem;
	border: 2px dashed var(--muted);
	color: var(--muted);
}

.adv-summary {
	margin-bottom: 0.75rem;
}

.adv-viewer {
	margin: 0;
}

.adv-viewer label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	white-space: nowrap;
}

.adv-viewer select {
	width: auto;
	margin: 0;
}

.adv-scroll {
	overflow: auto;
	max-height: 75vh;
	border: 3px solid var(--panel-line);
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 6px, transparent 6px 12px),
		#232a24;
}

.adv-canvas {
	position: relative;
}

.adv-lines {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.adv-lines path {
	fill: none;
	stroke: #66756a;
	stroke-width: 4;
}

/* One advancement: an item picture in a frame shaped by its type. */
.adv-node {
	position: absolute;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: #3a3d3a;
	border: 4px solid #d6d6d6;
	box-shadow: inset 0 0 0 2px #151815;
	text-decoration: none;
	transition: transform 80ms ease-out;
}

.adv-node:hover,
.adv-node:focus-visible {
	transform: translateY(-2px);
	z-index: 2;
	outline: none;
}

.frame-task {
	border-radius: 2px;
}

.frame-goal {
	border-color: #e9c04a;
	border-radius: 18px;
}

.frame-challenge {
	border-color: #b05fe0;
	background: #3a2650;
	border-radius: 0;
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
	box-shadow: none;
}

/* Not completed (or completed by nobody): dimmed, like the game's locked look. */
.adv-node.state-none,
.adv-node.state-todo {
	filter: grayscale(1) brightness(0.55);
}

.adv-node.state-partial {
	filter: grayscale(0.6) brightness(0.8);
}

.adv-icon {
	width: 32px;
	height: 32px;
}

.adv-icon[hidden] {
	display: none;
}

.adv-badge {
	position: absolute;
	right: -8px;
	bottom: -8px;
	padding: 0 0.3rem;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	background: #151815;
	border: 1px solid #66756a;
	border-radius: 8px;
	white-space: nowrap;
}

/* Tooltip content lives in the node but is shown by advancements.js. */
.adv-tip {
	display: none;
}

.adv-floating-tip {
	position: fixed;
	z-index: 100;
	max-width: 18rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	color: #eee;
	background: #14181a;
	border: 2px solid #5d6b60;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

.adv-floating-tip strong {
	display: block;
	margin-bottom: 0.15rem;
	font-family: var(--font-pixel);
	font-size: 1rem;
	color: #f4cf45;
}

.adv-floating-tip span {
	display: block;
	margin-bottom: 0.3rem;
}

.adv-floating-tip em {
	display: block;
	color: #9fd89a;
	font-style: normal;
}

.adv-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 0.75rem;
	font-size: 0.85rem;
	color: var(--muted);
}

.adv-legend .swatch {
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	margin-right: 0.3rem;
	vertical-align: middle;
	box-sizing: border-box;
	border: 3px solid #d6d6d6;
	background: #3a3d3a;
}

.adv-legend .swatch.frame-goal {
	border-color: #e9c04a;
	border-radius: 6px;
}

.adv-legend .swatch.frame-challenge {
	border-color: #b05fe0;
	clip-path: none;
	border-radius: 0;
	transform: rotate(45deg) scale(0.85);
}

.adv-header {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1rem;
}

.adv-header h1 {
	margin-bottom: 0.25rem;
}

.adv-header p {
	margin: 0 0 0.25rem;
}

.adv-node.adv-big {
	position: static;
	flex: none;
	width: 72px;
	height: 72px;
}

.adv-node.adv-big:hover {
	transform: none;
}

.adv-big .adv-icon {
	width: 44px;
	height: 44px;
}

.progress {
	height: 0.8rem;
	border: 2px solid var(--panel-line);
	background: color-mix(in srgb, var(--panel-ink) 14%, transparent);
}

.progress > span {
	display: block;
	height: 100%;
	background: var(--btn-face);
}

td.bar-cell {
	width: 40%;
}

.adv-letter {
	font-family: var(--font-pixel);
	font-size: 1.6rem;
	font-weight: 700;
	color: #d6d6d6;
}

/* Pico spreads nav children across the bar; chips should sit together. */
.chips {
	justify-content: flex-start;
}