/* The weekly pot's panel on the gallery and the home page (written by
   withPot in src/build.ts, filled by muses/pot.ts): what it holds, its
   entries and the draw, the last result. */
.pot {
	display: grid;
	gap: 22px;
}
.pot-copy {
	display: grid;
	gap: 20px;
	align-content: center;
}
.pot h2 {
	margin: 0;
	font: italic 600 clamp(26px, 6vw, 34px) / 1.1 var(--serif);
	letter-spacing: -0.015em;
}
.pot h2 em {
	color: var(--gold);
}
.pot-how {
	margin: 0;
	max-width: 60ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--soft);
	text-wrap: pretty;
}
.pot-go {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pot-stats {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pot-stats li {
	flex: 1 1 200px;
	display: grid;
	align-content: start;
	gap: 4px;
	min-width: 0;
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(var(--void-rgb), 0.45);
}
.pot-stats li.lead {
	flex-basis: 100%;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 4px 20px;
	padding: 18px 20px;
	background: rgba(var(--gold-rgb), 0.1);
}
.lead-pot {
	display: grid;
	gap: 4px;
	min-width: 0;
}
.lead-n {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
}
.lead-usd {
	display: grid;
	gap: 4px;
	justify-items: end;
	text-align: right;
}
.pot-stats li.lead .lead-usd b {
	--lh: 1.1;
	color: var(--bone);
	font: 600 clamp(20px, 5vw, 24px) / 1.1 var(--serif);
	letter-spacing: -0.01em;
	font-variant-numeric: lining-nums tabular-nums;
}
/* The pot is live: a warm glow breathes on its right and embers rise through it.
   When a read finds it higher (a sale), the number rolls up, the rise floats
   off beside it and the glow flares once (muses/pot.ts grew). */
.lead::before,
.lead::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.lead::before {
	background: radial-gradient(
		60% 140% at 100% 100%,
		rgba(var(--gold-hi-rgb), 0.2),
		transparent 70%
	);
	animation: pot-breathe 5s ease-in-out infinite alternate;
}
.lead::after {
	background: radial-gradient(
		80% 160% at 20% 100%,
		rgba(var(--gold-hi-rgb), 0.32),
		transparent 70%
	);
	opacity: 0;
}
.lead.grew::after {
	animation: pot-flare 2.4s ease-out;
}
.pot-stats li.lead .lead-up {
	font: 600 15px var(--sans);
	color: var(--gold-hi);
	font-variant-numeric: tabular-nums;
	opacity: 0;
}
.lead.grew .lead-up {
	animation: pot-up 2.4s ease-out;
}
@keyframes pot-breathe {
	from {
		opacity: 0.55;
	}
	to {
		opacity: 1;
	}
}
@keyframes pot-flare {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes pot-up {
	0% {
		opacity: 0;
		transform: translateY(6px);
	}
	15%,
	70% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(-8px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.lead::before,
	.lead.grew::after,
	.lead.grew .lead-up {
		animation: none;
	}
}
.pot-stats b {
	font: 700 19px / 1.2 var(--sans);
	font-variant-numeric: tabular-nums;
	color: var(--bone);
	overflow-wrap: anywhere;
}
.pot-stats li.lead b {
	font: 600 clamp(26px, 7vw, 32px) / 1.05 var(--serif);
	letter-spacing: -0.02em;
	color: var(--gold-hi);
	font-variant-numeric: lining-nums tabular-nums;
	--lh: 1.05;
}
.pot-stats b.skel {
	justify-self: start;
}
.pot-stats span:not(.odo span) {
	font-size: 14px;
	line-height: 1.4;
	color: var(--soft);
}
.pot-stats small {
	font-size: 13px;
	line-height: 1.4;
	color: var(--ash);
}
.pot-stats small > span {
	white-space: nowrap;
}
/* The last draw beside the new week: a week with prizes puts its four on the
   podium (podium.css) beside what the pot paid, an older week the winning
   muse's art and its numbers. */
.pot-last {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px 12px 12px;
	border-radius: 18px;
	background: rgba(var(--gold-rgb), 0.06);
}
.pot-last:has(.podium) {
	display: grid;
	gap: 18px;
	padding: 18px 16px 16px;
	background:
		radial-gradient(90% 120% at 82% 100%, rgba(var(--gold-hi-rgb), 0.14), transparent 70%),
		rgba(var(--gold-rgb), 0.06);
}
.pot-last:has(.podium) .pot-last-body {
	gap: 8px;
	align-content: center;
}
.pot-last:has(.podium) .pot-last-t {
	font: italic 600 clamp(22px, 5vw, 26px) / 1.1 var(--serif);
	letter-spacing: -0.015em;
}
.pot-last-t em {
	color: var(--gold);
	font-style: inherit;
}
.pot-last[hidden] {
	display: none;
}
.pot-last-art {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	overflow: hidden;
}
.pot-last-art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pot-last-body {
	display: grid;
	gap: 6px;
	min-width: 0;
}
.pot-last p {
	margin: 0;
	text-wrap: pretty;
}
.pot-last-t {
	font: 600 20px / 1.2 var(--serif);
	color: var(--bone);
}
.pot-last-s {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ash);
}
.pot-last b {
	color: var(--gold-hi);
}
.pot-last a {
	color: var(--gold-hi);
	text-decoration-color: var(--underline);
	text-underline-offset: 3px;
}
.pot-last-t a {
	color: inherit;
}
@media (min-width: 760px) {
	.pot {
		padding: 28px;
	}
}
@media (min-width: 960px) {
	.pot {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 22px 40px;
		align-items: center;
	}
	.pot-last {
		grid-column: 1 / -1;
	}
}
@media (min-width: 860px) {
	.pot-last:has(.podium) {
		grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.3fr);
		align-items: center;
		gap: 28px;
		padding: 20px 24px 18px;
	}
}