/* Wallets as people (user.js): the face, the name, the short address, the chip
   and the profile card. Loaded by every page that shows a wallet, so the home
   page's faithful wall, the Altar's lists and the server-rendered pages
   (src/user.ts writes the same markup) look alike. */

/* A wallet's face (user.js mgUserAvatar): 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;
}
/* While its picture loads, a face is a shimmering skeleton, not a coloured orb
   that then jumps to a photo; the picture fades in over it. */
.av.loading,
.cc-banner.loading {
	background:
		linear-gradient(
			90deg,
			rgba(224, 179, 90, 0.06) 25%,
			rgba(224, 179, 90, 0.18) 50%,
			rgba(224, 179, 90, 0.06) 75%
		)
		0 0 / 200% 100%,
		#15110b;
	animation: shimmer 1.4s linear infinite;
}
.av.loading img,
.cc-banner.loading img {
	opacity: 0;
}
.av img,
.cc-banner img {
	transition: opacity 0.3s;
}
@media (prefers-reduced-motion: reduce) {
	.av.loading,
	.cc-banner.loading {
		animation: none;
	}
}

/* The burn engine's face (live.js mgEngine): an ember with a flame in it, at
   whatever size the face around it sets. Its name's glow is live.css .mg-engine. */
.av.av-engine {
	background:
		radial-gradient(circle at 50% 62%, rgba(255, 214, 150, 0.85), rgba(255, 214, 150, 0) 42%),
		radial-gradient(circle at 35% 28%, #ff8a4c, #d9361c 58%, #5c1208);
}
.av-engine svg {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 3px rgba(255, 140, 70, 0.6));
}

.cc-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.user-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.cc {
	min-width: 0;
}
/* The wall's placeholders while it loads: the card's shape, shimmering. */
.cc-skel .cc-in {
	gap: 8px;
}
.cc-skel .sk {
	display: block;
	border-radius: 8px;
	background:
		linear-gradient(
			90deg,
			rgba(224, 179, 90, 0.06) 25%,
			rgba(224, 179, 90, 0.16) 50%,
			rgba(224, 179, 90, 0.06) 75%
		)
		0 0 / 200% 100%;
	animation: shimmer 1.4s linear infinite;
}
.cc-skel .sk-banner {
	height: 64px;
	margin: 0 -12px;
	border-radius: 0;
}
.cc-skel .sk-av {
	width: 56px;
	height: 56px;
	margin-top: -28px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #14110c;
}
.cc-skel .sk-name {
	width: 60%;
	height: 16px;
	margin-top: 4px;
}
.cc-skel .sk-line {
	width: 90%;
	height: 11px;
}
.cc-skel .sk-line.short {
	width: 70%;
}
.cc-skel .sk-chips {
	display: flex;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
}
.cc-skel .sk-chip {
	width: 56px;
	height: 22px;
	border-radius: 999px;
}
.cc-skel .sk-bar {
	height: 6px;
	border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
	.cc-skel .sk {
		animation: none;
	}
}
.cc-in {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 12px 12px;
	border-radius: 18px;
	overflow: hidden;
	--edge: rgba(224, 179, 90, 0.14);
	background: #14110c;
	color: var(--text, var(--bone, #efe6d2));
	text-decoration: none;
	transition:
		box-shadow 0.3s,
		transform 0.3s var(--ease);
}
/* The outline sits on its own layer over everything in the card, so the banner never hides its top edge. */
.cc-in::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--edge);
	pointer-events: none;
	transition: box-shadow 0.3s;
}
.cc-in:hover {
	--edge: rgba(224, 179, 90, 0.55);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	transform: translateY(-2px);
}
.cc-banner {
	position: relative;
	display: block;
	height: 64px;
	margin: 0 -12px;
	overflow: hidden;
	background: linear-gradient(
		120deg,
		hsl(var(--h, 40) 45% 22%),
		hsl(calc(var(--h, 40) + 60) 45% 14%)
	);
}
.cc-rank {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(5, 4, 3, 0.7);
	font: 700 12px var(--sans);
	font-variant-numeric: tabular-nums;
	color: var(--soft);
}
.cc-rank.top {
	color: #1a1206;
	background: linear-gradient(160deg, #f6d995, #d9a94c 60%, #b98a33);
}
.cc-rank.r1 {
	background: radial-gradient(circle at 35% 30%, #fff1c2, #e0b35a 55%, #a8741f);
	box-shadow: 0 0 12px rgba(243, 207, 133, 0.5);
}
.cc-rank.r2 {
	background: radial-gradient(circle at 35% 30%, #ffffff, #c9ccd2 55%, #8a8f99);
}
.cc-rank.r3 {
	background: radial-gradient(circle at 35% 30%, #ffd9b8, #c98a4b 55%, #8a5427);
}
/* The banner fades into the card, so the face sits on it cleanly. */
.cc-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 40%, rgba(20, 16, 10, 0.85));
}
/* Chips for what a wallet has done: gold for its bag, violet for its muses, sky for the bell, ember for burns. */
.cc-stats .cc-chip {
	gap: 4px;
	padding: 3px 8px 3px 6px;
	border-radius: 999px;
	font-size: 12px;
	background: rgba(var(--kr, 224, 179, 90), 0.1);
	box-shadow: inset 0 0 0 1px rgba(var(--kr, 224, 179, 90), 0.22);
}
.cc-stats .cc-chip b {
	color: var(--k1, #f3cf85);
}
.cc-stats .cc-chip .i {
	width: 12px;
	height: 12px;
	color: var(--k2, #e0b35a);
}
.cc-chip.bell {
	--kr: 111, 184, 238;
	--k1: #bfe6ff;
	--k2: #6fb8ee;
}
.cc-chip.muse {
	--kr: 178, 140, 255;
	--k1: #e6dbff;
	--k2: #b28cff;
}
.cc-chip.burn {
	--kr: 255, 122, 82;
	--k1: #ffd2c2;
	--k2: #ff7a52;
}
/* Holographic cards (holo.css): the tilt replaces the lift, and the wall's
   foil is quieter than an open card's; the top three wear their medal. */
.cc {
	position: relative;
}
.cc-in.holo-on {
	transition: box-shadow 0.3s;
}
.cc-in.holo-on:hover {
	transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-2px);
}
.cc-in .holo-foil {
	opacity: calc(var(--o) * 0.22);
}
.cc-in .holo-glare {
	opacity: calc(var(--o) * 0.7);
}
.cc[data-medal] .cc-in .holo-foil {
	background:
		linear-gradient(
			115deg,
			transparent 15%,
			var(--m1) 32%,
			var(--m2) 45%,
			var(--m3) 58%,
			var(--m1) 70%,
			transparent 85%
		)
		var(--mx) var(--my) / 300% 300% no-repeat;
	opacity: calc(0.05 + var(--o) * 0.35);
}
.cc[data-medal="1"] {
	--m1: #fff1c2;
	--m2: #e0b35a;
	--m3: #a8741f;
}
.cc[data-medal="2"] {
	--m1: #ffffff;
	--m2: #c9ccd2;
	--m3: #8a8f99;
}
.cc[data-medal="3"] {
	--m1: #ffd9b8;
	--m2: #c98a4b;
	--m3: #8a5427;
}
/* An Altar seat holder's seat, over the banner: opens the seat's card. */
.cc-seat {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 26px;
	padding: 0 9px 0 7px;
	border: 0;
	border-radius: 999px;
	background: rgba(5, 4, 3, 0.72);
	box-shadow: inset 0 0 0 1px rgba(243, 207, 133, 0.5);
	color: #f3cf85;
	font: 700 12px var(--sans);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.cc-seat .i {
	width: 12px;
	height: 12px;
}
@media (hover: hover) {
	.cc-seat:hover {
		background: rgba(224, 179, 90, 0.25);
	}
}
.cc-seat:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
/* A wallet that burned carries a faint ember edge. */
.cc.burner .cc-in {
	--edge: rgba(255, 122, 82, 0.28);
}
.cc.burner .cc-in:hover {
	--edge: rgba(255, 122, 82, 0.6);
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.5),
		0 0 24px rgba(255, 110, 70, 0.18);
}
.cc-av {
	position: relative;
	z-index: 1;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	box-shadow:
		0 0 0 3px #14110c,
		0 0 0 4px rgba(224, 179, 90, 0.5);
}
.cc-name {
	margin-top: 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cc-addr {
	font: 400 12px var(--mono);
	color: var(--dim);
}
.cc-bio {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	min-height: 2.8em;
}
.cc-bio.empty {
	min-height: 0;
	margin: 0;
}
.cc-stats {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 13px;
	color: var(--soft);
}
.cc-stats span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.cc-stats b {
	color: var(--gold-hi);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.cc-stats .i {
	width: 13px;
	height: 13px;
	color: var(--gold);
}
.cc-split {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(224, 179, 90, 0.12);
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--dim);
}
.cc-split .cc-share {
	flex: none;
}
.cc-split .cc-bar {
	flex: 1;
}
.cc-split:empty {
	display: none;
}
.cc-share b {
	color: var(--text, var(--bone, #efe6d2));
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.cc-bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: rgba(224, 179, 90, 0.14);
	overflow: hidden;
}
.cc-bar i {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--gold), var(--gold-hi));
	box-shadow: 0 0 8px rgba(243, 207, 133, 0.6);
}
.cc-nft {
	margin-top: 2px;
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	font-size: 12px;
	color: #c7b3f5;
}
.cc-nft span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cc-nft .i {
	width: 12px;
	height: 12px;
	flex: none;
	color: #a98bf0;
}

/* The card's pieces need their own icon strokes: a page without the home page's
   svg sprite still draws them (user.js carries the paths). */
.cc .i,
.user-chip .i {
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.18em;
}
.cc .i {
	width: 1.1em;
	height: 1.1em;
}
.cc-banner {
	--h: 40;
}
/* A card's body can add a line between the name and the chips (the Altar's burn time). */
.cc-mid {
	margin-top: 6px;
	font: 500 26px / 1.1 var(--serif, "Bodoni Moda", Georgia, serif);
	letter-spacing: -0.01em;
	color: var(--gold-hi, #f3cf85);
	font-variant-numeric: lining-nums tabular-nums;
}
/* The compact card: a shorter banner and a smaller face, no bio or NFT line. */
.cc-compact .cc-in {
	padding: 0 10px 10px;
}
.cc-compact .cc-banner {
	height: 40px;
	margin: 0 -10px;
}
.cc-compact .cc-av {
	width: 44px;
	height: 44px;
	margin-top: -22px;
}
.cc-compact .cc-name {
	margin-top: 6px;
	font-size: 15px;
}
.cc-compact .cc-bio,
.cc-compact .cc-nft {
	display: none;
}
.cc-compact .cc-stats {
	padding-top: 8px;
}
/* An ember glow behind the card, hotter for a bigger burn (--heat 0 to 1). Fill only. */
.cc-heat .cc-in {
	isolation: isolate;
}
.cc-heat .cc-in::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background:
		radial-gradient(
			90% 60% at 50% 120%,
			rgba(255, 150, 70, calc(0.08 + var(--heat) * 0.34)),
			transparent 72%
		),
		linear-gradient(180deg, transparent 30%, rgba(255, 92, 52, calc(0.03 + var(--heat) * 0.14)));
	animation: cc-glow 3.4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.7s);
}
@keyframes cc-glow {
	50% {
		opacity: 0.6;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cc-heat .cc-in::before {
		animation: none;
	}
}

/* The small forms: a name, a short address, and a face with its name. */
.user-addr {
	font-family: var(--mono, ui-monospace, Menlo, monospace);
	color: var(--dim, #a79a82);
}
.user-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
	vertical-align: middle;
	color: inherit;
	text-decoration: none;
}
.user-chip .av {
	flex: none;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	overflow: hidden;
}
.user-chip .user-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 650;
}
.user-chip .user-addr {
	font-size: 0.8em;
}
/* The viewer's own card: a warmer fill and edge. */
.cc.mine .cc-in {
	--edge: rgba(243, 207, 133, 0.7);
	background: #211a0e;
}