/* /pot (pot.html, filled by pot/page.ts): the pot live in a lit vault with
   the clock to the draw, the split if the draw were now, the week on a track,
   the muses entered, where the money comes from, every draw and how to enter.
   The shell is site.css; this is the page's own. */

main {
	max-width: 1120px;
	margin: 0 auto;
	padding: 28px var(--pad) calc(56px + env(safe-area-inset-bottom));
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 56px;
}
main > .intro {
	margin-bottom: -24px;
}
section h2 {
	margin: 0;
	font: italic 600 clamp(28px, 6.5vw, 40px) / 1.08 var(--serif);
	letter-spacing: -0.02em;
	text-wrap: balance;
}
section h2 em {
	color: var(--gold);
}
.sec-line {
	margin: 0;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.55;
	color: var(--soft);
	text-wrap: pretty;
}
/* Every icon on the page (lib/icons.ts), drawn in its parent's color; each
   place sets its size. */
main .i {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
section a:not(.btn) {
	color: var(--gold-hi);
	text-decoration-color: var(--underline);
	text-underline-offset: 3px;
}

/* The vault: the pot as one big gold number over a slow glow, embers rising
   through it, and the clock to the next moment beside it. A sale lifts the
   number (lib/pot.ts potMeter), the rise floats up beside it and the glow
   flares once. */
.vault {
	--rise: 360px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: 28px;
	padding: 28px 20px;
	border-radius: 32px;
	background:
		radial-gradient(90% 70% at 50% 110%, rgba(var(--gold-rgb), 0.22), transparent 70%),
		linear-gradient(180deg, var(--card-hi), var(--card));
	box-shadow: inset 0 0 0 1px var(--line);
}
.vault::before,
.vault::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.vault::before {
	background: radial-gradient(55% 80% at 30% 60%, rgba(var(--gold-hi-rgb), 0.16), transparent 70%);
	animation: vault-breathe 6s ease-in-out infinite alternate;
}
.vault::after {
	background: radial-gradient(70% 90% at 30% 60%, rgba(var(--gold-hi-rgb), 0.34), transparent 70%);
	opacity: 0;
}
.vault.grew::after {
	animation: vault-flare 2.4s ease-out;
}
.vault-pot,
.vault-clock {
	display: grid;
	gap: 12px;
	align-content: center;
	min-width: 0;
}
.vault-n {
	margin: 4px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
}
.vault-n b {
	--lh: 1;
	font: 600 clamp(54px, 15vw, 116px) / 1 var(--serif);
	letter-spacing: -0.035em;
	color: var(--gold-hi);
	font-variant-numeric: lining-nums tabular-nums;
	overflow-wrap: anywhere;
}
/* The glow goes on the wheels, never on the odometer's invisible text. */
.vault-n b:not(.odo, .skel),
.vault-n .odo-w {
	filter: drop-shadow(0 0 24px rgba(var(--gold-hi-rgb), 0.35));
}
.vault-up {
	font: 700 18px var(--sans);
	color: var(--gold-hi);
	font-variant-numeric: tabular-nums;
	opacity: 0;
}
.vault.grew .vault-up {
	animation: vault-up 2.4s ease-out;
}
.vault-l {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	font-size: 17px;
	color: var(--soft);
}
.vault-l b {
	font: 600 24px / 1.1 var(--serif);
	color: var(--bone);
	font-variant-numeric: lining-nums tabular-nums;
}
.state {
	justify-self: start;
	margin: 6px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	padding: 0 16px 0 14px;
	border-radius: 999px;
	background: rgba(var(--void-rgb), 0.5);
	font-size: 14px;
	color: var(--bone);
}
.state .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dim);
}
.state.open .dot {
	background: var(--gold-hi);
	box-shadow: 0 0 0 0 rgba(var(--gold-hi-rgb), 0.6);
	animation: vault-pulse 2s ease-out infinite;
}

/* The clock: days, hours, minutes and seconds, each in its own tile. */
.clock {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
.clock li {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 14px 4px 12px;
	border-radius: 18px;
	background: rgba(var(--void-rgb), 0.55);
}
.clock b {
	font: 600 clamp(30px, 8vw, 44px) / 1 var(--serif);
	color: var(--bone);
	font-variant-numeric: lining-nums tabular-nums;
}
.clock span {
	font: 400 11px var(--mono);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ash);
}
.clock-at {
	margin: 0;
	font-size: 14px;
	color: var(--ash);
}
.vault-go {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}
@keyframes vault-breathe {
	from {
		opacity: 0.5;
	}
	to {
		opacity: 1;
	}
}
@keyframes vault-flare {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes vault-up {
	0% {
		opacity: 0;
		transform: translateY(8px);
	}
	15%,
	70% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(-10px);
	}
}
@keyframes vault-pulse {
	70% {
		box-shadow: 0 0 0 8px rgba(var(--gold-hi-rgb), 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(var(--gold-hi-rgb), 0);
	}
}

/* The split if the draw were now: the winning muse's half and each muse's
   share side by side, with the week's facts under them. */
.split {
	display: grid;
	gap: 22px;
}
.halves {
	display: grid;
	gap: 12px;
}
.half {
	position: relative;
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 22px 20px;
	border-radius: 26px;
	background: var(--card);
}
.half.win {
	background:
		radial-gradient(80% 120% at 100% 0%, rgba(var(--gold-rgb), 0.2), transparent 70%), var(--card);
}
.half-i {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 6px;
	border-radius: 14px;
	background: rgba(var(--gold-rgb), 0.12);
	color: var(--gold-hi);
}
.half-i .i {
	width: 22px;
	height: 22px;
}
.half-n {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.half-n b {
	font: 600 clamp(34px, 9vw, 52px) / 1.05 var(--serif);
	letter-spacing: -0.02em;
	color: var(--gold-hi);
	font-variant-numeric: lining-nums tabular-nums;
	overflow-wrap: anywhere;
}
.half.each .half-n b {
	color: var(--bone);
}
.half-n span {
	font-size: 15px;
	color: var(--soft);
}
.half-s {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ash);
}
.facts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.facts li {
	flex: 1 1 180px;
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(var(--gold-rgb), 0.06);
}
.facts b {
	font: 700 22px / 1.2 var(--sans);
	color: var(--bone);
	font-variant-numeric: tabular-nums;
}
.facts b.skel {
	justify-self: start;
}
.facts span {
	font-size: 14px;
	color: var(--soft);
}

/* The week on a track, seven of the reader's days: the days, the stretch entries
   are open, the draw and where now is, with the moments listed under it. */
.week {
	display: grid;
	gap: 24px;
}
.track {
	--a: 9.6%;
	--b: 99.4%;
	--draw: 99.7%;
	display: grid;
	gap: 10px;
}
.track-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}
.track-days span {
	font: 400 11px var(--mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ash);
	text-align: center;
}
.track-bar {
	position: relative;
	height: 14px;
	border-radius: 999px;
	background:
		repeating-linear-gradient(
			90deg,
			transparent 0 calc(100% / 7 - 1px),
			rgba(var(--gold-rgb), 0.18) calc(100% / 7 - 1px) calc(100% / 7)
		),
		rgba(var(--void-rgb), 0.6);
}
.track-open {
	position: absolute;
	inset: 0 calc(100% - var(--b)) 0 var(--a);
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.35), rgba(var(--gold-hi-rgb), 0.7));
}
.track-draw {
	position: absolute;
	top: 50%;
	left: var(--draw);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gold-hi);
	box-shadow: 0 0 14px 2px rgba(var(--gold-hi-rgb), 0.6);
	transform: translate(-50%, -50%);
}
.track-now {
	position: absolute;
	top: -8px;
	bottom: -8px;
	left: var(--now, 0%);
	width: 2px;
	background: var(--bone);
	transform: translateX(-50%);
}
.track-now i {
	position: absolute;
	top: -4px;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bone);
	transform: translateX(-50%);
}
.moments {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
}
.moments li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 4px 10px;
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(var(--void-rgb), 0.45);
}
.moments li > :not(.m-dot) {
	grid-column: 2;
}
.moments b {
	font: 700 15px var(--sans);
	color: var(--bone);
}
.moments li > span:not(.m-dot) {
	font-size: 14px;
	color: var(--soft);
	font-variant-numeric: tabular-nums;
}
.m-dot {
	grid-row: 1 / span 2;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(var(--gold-rgb), 0.45);
}
.moments [data-m="draw"] .m-dot {
	background: var(--gold-hi);
	box-shadow: 0 0 10px rgba(var(--gold-hi-rgb), 0.6);
}
.moments li.lit {
	background: rgba(var(--gold-rgb), 0.12);
}
.week-note {
	margin-top: -14px;
}

/* The muses entered: the tier mix, the lookup and a wall of their art,
   rarest first. */
.field {
	display: grid;
	gap: 20px;
}
.mix {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.mix > span {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--card);
	font-size: 14px;
	color: var(--soft);
}
.mix b {
	font-weight: 700;
	color: var(--bone);
	font-variant-numeric: tabular-nums;
}
.find {
	display: grid;
	gap: 8px;
	max-width: 520px;
}
.find label {
	font-size: 15px;
	font-weight: 600;
	color: var(--bone);
}
.find-row {
	display: flex;
	gap: 8px;
}
.find input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--line-hi);
	border-radius: 999px;
	font: 400 16px var(--sans);
	color: var(--bone);
	background: var(--card);
}
.find input::placeholder {
	color: var(--dim);
}
.find .btn {
	min-height: 44px;
}
.find-out {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px 10px 10px;
	border-radius: 18px;
	background: var(--card);
	font-size: 15px;
	line-height: 1.45;
	color: var(--soft);
}
.find-out img {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	object-fit: cover;
	background: var(--card-hi);
}
.find-out.in {
	background: rgba(var(--gold-rgb), 0.12);
}
.find-out b {
	color: var(--bone);
}
.wall {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
	gap: 8px;
}
.wall li {
	aspect-ratio: 1;
	min-width: 0;
}
.wall a,
.wall .skel-art {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 14px;
	overflow: hidden;
	background: var(--card);
}
.wall img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.3s var(--ease),
		filter 0.3s;
}
.wall a {
	position: relative;
	box-shadow: inset 0 0 0 1px var(--line);
}
.wall a.rare {
	box-shadow:
		inset 0 0 0 1px rgba(var(--gold-hi-rgb), 0.7),
		0 0 14px rgba(var(--gold-hi-rgb), 0.25);
}
@media (hover: hover) {
	.wall a:hover img {
		transform: scale(1.06);
		filter: brightness(1.1);
	}
}
.wall li.hit a {
	box-shadow:
		inset 0 0 0 2px var(--gold-hi),
		0 0 18px rgba(var(--gold-hi-rgb), 0.5);
}
.more {
	justify-self: center;
}

/* Where it comes from: each step down a line, the royalty forking into the
   burn and the pot, with light running down the line toward the draw. */
.flow {
	display: grid;
	gap: 24px;
}
.pipe {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}
.pipe::before {
	content: "";
	position: absolute;
	top: 22px;
	bottom: 22px;
	left: 21px;
	width: 2px;
	background:
		linear-gradient(180deg, transparent, rgba(var(--gold-hi-rgb), 0.9) 50%, transparent) 0 -100% /
		100% 40% no-repeat,
		rgba(var(--gold-rgb), 0.2);
	animation: pipe-run 4s linear infinite;
}
.pipe > li:not(.pipe-fork),
.pipe-fork > div {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
}
.pipe-fork {
	display: grid;
	gap: 12px;
}
.pipe-i {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--card-hi);
	box-shadow: 0 0 0 4px var(--void);
	color: var(--gold-hi);
}
.pipe-i .i {
	width: 20px;
	height: 20px;
}
.pipe-t {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 18px;
	background: var(--card);
}
.pipe b {
	font: 700 16px var(--sans);
	color: var(--bone);
}
.pipe span:not(.pipe-i) {
	font-size: 14px;
	line-height: 1.5;
	color: var(--soft);
}
.pipe .burn .pipe-i {
	color: var(--soft);
}
.pipe .feed .pipe-t {
	background: rgba(var(--gold-rgb), 0.1);
}
.pipe [data-p="waiting-line"] {
	display: block;
	color: var(--gold-hi);
}
@keyframes pipe-run {
	to {
		background-position:
			0 200%,
			0 0;
	}
}

/* Every draw: the winning muse's art, what it won and each muse's share,
   the collecting, and the draw worked out again from its block. */
.past {
	display: grid;
	gap: 22px;
}
.drawn-list {
	display: grid;
	gap: 14px;
}
.drawn {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	padding: 16px;
	border-radius: 26px;
	background: var(--card);
}
.drawn > a img,
.drawn .skel-art {
	display: block;
	width: 100%;
	height: auto;
	max-width: 260px;
	aspect-ratio: 1;
	border-radius: 18px;
	object-fit: cover;
	background: var(--card-hi);
}
.drawn > a {
	justify-self: start;
	align-self: start;
	border-radius: 18px;
	box-shadow: 0 0 30px rgba(var(--gold-hi-rgb), 0.18);
}
.drawn-body {
	display: grid;
	gap: 10px;
	align-content: start;
	min-width: 0;
}
.drawn-body h3 {
	margin: 0;
	font: italic 600 clamp(24px, 5.5vw, 32px) / 1.1 var(--serif);
	letter-spacing: -0.015em;
	color: var(--bone);
}
.drawn-body h3 a {
	color: var(--gold-hi);
}
.drawn-body p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--soft);
	text-wrap: pretty;
}
.drawn-body p b {
	color: var(--gold-hi);
}
.drawn-nums {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.drawn-nums li {
	display: grid;
	gap: 2px;
	padding: 10px 14px;
	border-radius: 14px;
	background: rgba(var(--void-rgb), 0.45);
}
.drawn-nums b {
	font: 700 17px var(--sans);
	color: var(--bone);
	font-variant-numeric: tabular-nums;
}
.drawn-nums span {
	font-size: 13px;
	color: var(--ash);
}
.check {
	border-radius: 16px;
	background: rgba(var(--gold-rgb), 0.06);
}
.check summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gold-hi);
	cursor: pointer;
	list-style: none;
}
.check summary::-webkit-details-marker {
	display: none;
}
.check summary .i {
	width: 18px;
	height: 18px;
}
.check ol {
	margin: 0;
	padding: 0 14px 14px 36px;
	display: grid;
	gap: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--soft);
}
.check code {
	font: 400 12.5px / 1.5 var(--mono);
	color: var(--bone);
	overflow-wrap: anywhere;
}
.check .ok {
	color: var(--gold-hi);
	font-weight: 600;
}
.drawn.none {
	grid-template-columns: minmax(0, 1fr);
}

/* How to enter: three numbered steps, the safety line and the way in. */
.how {
	display: grid;
	gap: 22px;
}
.steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
	display: grid;
	gap: 10px;
}
.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 4px 14px;
	padding: 14px 16px 14px 14px;
	border-radius: 18px;
	background: rgba(var(--void-rgb), 0.45);
}
.steps li::before {
	content: counter(step);
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(var(--gold-rgb), 0.14);
	font: 600 20px / 1 var(--serif);
	color: var(--gold-hi);
}
.steps b {
	font: 700 16px var(--sans);
	color: var(--bone);
}
.steps span {
	font-size: 15px;
	line-height: 1.55;
	color: var(--soft);
	text-wrap: pretty;
}
.safe {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--soft);
}
.safe .i {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--gold-hi);
}
.how-go {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

@media (min-width: 640px) {
	.halves {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pipe-fork {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pipe-fork > .feed {
		grid-template-columns: minmax(0, 1fr);
	}
	.pipe-fork > .feed > .pipe-i {
		display: none;
	}
	.pipe-fork .pipe-t {
		align-self: stretch;
	}
	.drawn {
		grid-template-columns: 220px minmax(0, 1fr);
		padding: 20px;
	}
}
@media (min-width: 900px) {
	.vault {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 40px;
		padding: 44px 44px 40px;
	}
	.card.week,
	.card.how {
		padding: 32px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vault::before,
	.vault.grew::after,
	.vault.grew .vault-up,
	.state.open .dot,
	.pipe::before {
		animation: none;
	}
}