/* biome-ignore-all lint/style/noDescendingSpecificity: moved as is from index.html, where the cascade order is deliberate */
/* The "online now" pill, the same in every page's header (and in the home
   page's stats): its look, the skeleton before the first count, the tick
   and +1 when someone arrives, and the pulse on a tap. live.js runs it. */
@keyframes shimmer {
	to {
		background-position: -200% 0;
	}
}
.now {
	position: relative;
	background: linear-gradient(90deg, rgba(95, 211, 154, 0.12), rgba(95, 211, 154, 0.04));
	box-shadow: inset 0 0 0 1px rgba(95, 211, 154, 0.28);
}
.now b {
	font-weight: 700;
	color: #eafff4;
	font-variant-numeric: tabular-nums;
}
.now b.tick {
	animation: tick-up 0.45s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
@keyframes tick-up {
	from {
		transform: translateY(60%);
		opacity: 0;
	}
}
.now > span:last-child {
	color: #a8dcc1;
}
.now-dot {
	position: relative;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5fd39a;
	box-shadow: 0 0 8px rgba(95, 211, 154, 0.9);
}
.now-dot::before {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	background: rgba(95, 211, 154, 0.35);
	animation: radar 2.4s ease-out infinite;
}
@keyframes radar {
	from {
		transform: scale(0.4);
		opacity: 0.9;
	}
	to {
		transform: scale(1.9);
		opacity: 0;
	}
}
.now-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1.5px solid #8ff0bf;
	opacity: 0;
}
.now.bump .now-dot::after {
	animation: now-ping 1s cubic-bezier(0, 0, 0.2, 1);
}
@keyframes now-ping {
	from {
		transform: scale(0.6);
		opacity: 1;
	}
	to {
		transform: scale(2.2);
		opacity: 0;
	}
}
.now.bump {
	animation: now-glow 1.2s ease-out;
}
/* Hover glows; a tap sends a pulse out from the dot. */
.now {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	cursor: pointer;
	transition:
		box-shadow 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
		background-color 0.35s;
	-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
	.now:hover {
		box-shadow:
			inset 0 0 0 1px rgba(143, 240, 191, 0.6),
			0 0 28px rgba(95, 211, 154, 0.35),
			0 0 60px rgba(95, 211, 154, 0.12);
	}
}
.now.tap {
	animation: now-tap 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes now-tap {
	0% {
		transform: scale(0.97);
	}
	35% {
		transform: scale(1.03);
		box-shadow:
			inset 0 0 0 1px rgba(143, 240, 191, 0.9),
			0 0 0 6px rgba(95, 211, 154, 0.18),
			0 0 40px rgba(95, 211, 154, 0.45);
	}
	100% {
		transform: none;
	}
}
.now.tap .now-dot::after {
	animation: now-ping 1s cubic-bezier(0, 0, 0.2, 1);
}
.now-wave {
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	border: 2px solid #8ff0bf;
	pointer-events: none;
	animation: now-wave 0.8s ease-out forwards;
}
@keyframes now-wave {
	from {
		transform: scale(0.4);
		opacity: 0.9;
	}
	to {
		transform: scale(9);
		opacity: 0;
	}
}
.now {
	overflow: visible;
}
@keyframes now-glow {
	20% {
		box-shadow:
			inset 0 0 0 1px rgba(143, 240, 191, 0.7),
			0 0 26px rgba(95, 211, 154, 0.35);
	}
}
.plus-one {
	position: absolute;
	right: 12px;
	top: -4px;
	font: 800 12px var(--sans, Figtree, system-ui, sans-serif);
	color: #8ff0bf;
	pointer-events: none;
	animation: plus-up 1.2s ease-out forwards;
}
@keyframes plus-up {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-18px);
	}
}
/* Before the first count: a shimmering bar where the number goes. */
.now.loading {
	cursor: default;
}
/* The placeholder holds "00" in transparent ink, so it is exactly as wide
   and as tall as a real two-digit count and nothing moves when one lands. */
.now.loading b {
	border-radius: 6px;
	color: transparent;
	background:
		linear-gradient(
			90deg,
			rgba(143, 240, 191, 0.12) 25%,
			rgba(143, 240, 191, 0.32) 50%,
			rgba(143, 240, 191, 0.12) 75%
		)
		0 0 / 200% 100%;
	animation: shimmer 1.4s linear infinite;
}
.now.loading .now-dot {
	background: #3f8f68;
	box-shadow: none;
}
.now.loading .now-dot::before {
	animation: none;
	opacity: 0;
}
.now b {
	display: inline-block;
	min-width: 2ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.now-bar {
	display: none;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 0 12px 0 10px;
	margin-right: 8px;
	border-radius: 999px;
	font: 500 13px var(--sans, Figtree, system-ui, sans-serif);
}
.now-bar .now-dot {
	margin-right: 5px;
}
@media (min-width: 900px) {
	.now-bar:not([hidden]) {
		display: inline-flex;
	}
}
@media (prefers-reduced-motion: reduce) {
	.now.loading b,
	.now-dot::before,
	.now.bump,
	.now.bump .now-dot::after,
	.plus-one {
		animation: none;
	}
}

/* Live moments: one toast at a time, bottom left, above the dock on phones
   (the home page's site.js and the Altar's altar.js raise them). */
.toasts {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(84px + env(safe-area-inset-bottom));
	z-index: 40;
	pointer-events: none;
	display: flex;
	justify-content: flex-start;
}
.toast-in {
	pointer-events: auto;
	max-width: 420px;
	text-decoration: none;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.35s,
		transform 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.toast-in.on {
	opacity: 1;
	transform: none;
}
.toast {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 6px 16px 6px 8px;
	border-radius: 999px;
	background: rgba(18, 14, 9, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow:
		0 0 0 1px rgba(224, 179, 90, 0.35),
		0 12px 30px rgba(0, 0, 0, 0.55);
	color: var(--text);
	font-size: 14px;
	white-space: nowrap;
}
.toast-live {
	flex: none;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	border-radius: 50%;
	background: #5fd39a;
	box-shadow: 0 0 0 3px rgba(95, 211, 154, 0.18);
	animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink {
	50% {
		opacity: 0.35;
	}
}
.toast-av {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 1.5px rgba(224, 179, 90, 0.5);
}
.toast-av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.toast-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.toast-text b {
	font-weight: 700;
}
/* Each kind of moment has its own light: gold for a claim, sky for the
   bell, violet for a blessing, ember for a burn. The ring, the live dot and one gradient word
   carry it. */
.toast {
	--k1: #f3cf85;
	--k2: #e0b35a;
	--kr: 224, 179, 90;
}
.toast.rang {
	--k1: #bfe6ff;
	--k2: #6fb8ee;
	--kr: 111, 184, 238;
}
.toast.blessed {
	--k1: #e2d4ff;
	--k2: #a98bf0;
	--kr: 169, 139, 240;
}
.toast.burned {
	--k1: #ffd2c2;
	--k2: #ff7a52;
	--kr: 255, 122, 82;
}
.toast {
	box-shadow:
		0 0 0 1px rgba(var(--kr), 0.5),
		0 0 24px rgba(var(--kr), 0.18),
		0 12px 30px rgba(0, 0, 0, 0.55);
	background: linear-gradient(90deg, rgba(var(--kr), 0.14), rgba(18, 14, 9, 0.94) 45%);
}
.toast .toast-live {
	background: var(--k2);
	box-shadow:
		0 0 0 3px rgba(var(--kr), 0.22),
		0 0 10px var(--k2);
}
.toast .toast-av {
	box-shadow: 0 0 0 1.5px var(--k2);
}
.toast-text em {
	font-style: normal;
	font-weight: 800;
	background: linear-gradient(90deg, var(--k1), var(--k2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.toast time {
	flex: none;
	font-size: 12px;
	color: var(--dim);
	font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
	.toast-live {
		animation: none;
	}
}
@media (min-width: 760px) {
	.toasts {
		left: 24px;
		bottom: 24px;
	}
}

/* A wallet's face (live.js mgAvatar): its OpenSea picture, or with none, an
   orb in a colour of its own, taken from the address, so no two blanks
   look alike. Every face on the site uses it: the wall, the toasts, the
   table, the Altar's seats. */
.av {
	background: radial-gradient(
		circle at 30% 25%,
		hsl(var(--h, 40) 70% 72%),
		hsl(var(--h, 40) 55% 32%)
	);
}
.av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Numbers that roll (live.js mgOdometer): the real text holds the width, under
   a layer of digit wheels. */
.odo {
	font-variant-numeric: lining-nums tabular-nums;
}
.odo {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-kerning: none;
	line-height: var(--lh, 1.2);
}
.odo > .odo-t {
	color: transparent;
}
.odo-w {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: flex-start;
	pointer-events: none;
	user-select: none;
	opacity: 0;
}
.odo-w.on {
	opacity: 1;
	transition: opacity 0.3s;
}
.odo-c {
	display: block;
	height: calc(var(--lh, 1.2) * 1em);
	overflow: hidden;
	-webkit-mask: linear-gradient(transparent, #000 0.12em, #000 calc(100% - 0.12em), transparent);
	mask: linear-gradient(transparent, #000 0.12em, #000 calc(100% - 0.12em), transparent);
}
.odo-s {
	display: block;
	white-space: pre;
	will-change: transform;
}
.odo-x {
	display: block;
	white-space: pre;
}