/* ==========================================================================
 * HiverGo Cards — shared card shell used across features
 * ========================================================================== */
.-story-card {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	position: relative;
	flex-flow: column;
}

.-modal-overlay > .-card {
	width: 87.5vw;
	height: calc(100% - 6.25vw);
	margin: 0;
}

.-modal-overlay .-card::after {
	content: "";
	z-index: -2;
	position: absolute;
	pointer-events: none;
	inset: 10.9375vw 0 0;
	border-radius: 3.125vw;
	box-shadow: 0 1.875vw 7.5vw rgb(0 0 0 / 80%);
}

.-modal-card {
	display: none;
}

/* HiverGo Shelf Card -------------------------------------------------------- */

.-shelf-card {
	width: 93.75vw;
	display: flex;
	overflow: hidden;
	position: relative;
	flex-flow: column;
	min-height: 112.5vw;
	clip-path: var(--squircle);
	background: var(--surface);
}

.-shelf-card-top {
	width: 100%;
	display: flex;
	min-height: 21.875vw;
	position: relative;
	align-items: center;
	padding: 3.125vw 4.6875vw;
	justify-content: space-between;
}

.-shelf-card-punches {
	display: flex;
	gap: 1.5625vw;
	align-items: center;
}

.-shelf-card-punch {
	display: flex;
	width: 9.375vw;
	height: 9.375vw;
	position: relative;
	align-items: center;
	border-radius: 50%;
	justify-content: center;
	background: rgb(0 0 0 / 20%);
	border: 0.9375vw solid #0000;
}

.-shelf-card-punch.---disabled {
	opacity: .28;
}

.-shelf-card-punch .material-symbols-rounded {
	font-size: 5.3125vw;
}

.-shelf-card-punch-count {
	right: -1.25vw;
	bottom: -0.625vw;
	min-width: 4.6875vw;
	height: 4.6875vw;
	display: flex;
	position: absolute;
	align-items: center;
	font-size: 3.125vw;
	border-radius: 50%;
	font-family: "Delius";
	justify-content: center;
	background: var(--app-theme);
}

.-shelf-card-avatar {
	width: 18.75vw;
	height: 18.75vw;
	display: flex;
	position: absolute;
	left: calc(50% - 9.375vw);
	align-items: center;
	border-radius: 50%;
	justify-content: center;
	border: 1.25vw solid rgb(255 255 255 / 12%);
	background: var(--app-theme);
}

.-shelf-card-avatar-symbol {
	width: 100%;
	height: 100%;
	display: flex;
	border-radius: 50%;
	background-size: cover;
	align-items: center;
	background-position: center;
	justify-content: center;
}

.-shelf-card-avatar-symbol .material-symbols-rounded {
	color: #ffffff88;
	font-size: 7.5vw;
}

.-shelf-card-price {
	gap: 1.25vw;
	height: 10vw;
	display: flex;
	align-items: center;
	align-self: center;
	width: fit-content;
	padding: 0 4.0625vw;
	font-size: 4.0625vw;
	font-family: "Delius";
	clip-path: var(--squircle-small);
	background: rgb(255 255 255 / 9%);
}

.-shelf-card-price .material-symbols-rounded {
	color: #91c980;
	font-size: 4.6875vw;
}

.-shelf-card-title {
	color: #fff;
	padding: 3.125vw 4.6875vw 1.5625vw;
	text-align: center;
	font-size: 6.25vw;
	font-family: "Fredoka";
}

.-shelf-card-splitter {
	width: auto;
	display: flex;
	margin: 0 4.6875vw;
	min-height: 10vw;
	align-items: center;
	font-size: 3.4375vw;
	font-family: "Delius";
	justify-content: space-between;
}

.-shelf-card-infobox {
	margin: 1.5625vw 3.125vw 3.125vw;
	display: flex;
	gap: 2.1875vw;
	flex-flow: column;
	padding: 4.6875vw;
	clip-path: var(--squircle);
	background: rgb(0 0 0 / 18%);
}

.-shelf-card-percent {
	width: fit-content;
	min-height: 8.75vw;
	display: flex;
	align-items: center;
	padding: 0 3.125vw;
	font-size: 3.4375vw;
	font-family: "Delius";
	clip-path: var(--squircle-small);
	background: rgb(145 201 128 / 15%);
	color: #91c980;
}

.-shelf-card-tagline {
	color: #ffda66;
	font-size: 3.4375vw;
	font-family: "Delius";
}

.-shelf-card-description {
	color: #ffffffbb;
	font-size: 3.4375vw;
	line-height: 5vw;
	font-family: "Nunito";
}

.-shelf-card-date {
	color: #82c1ff;
	font-size: 3.125vw;
	font-family: "Delius";
}

.-shelf-card-action {
	width: 100%;
	min-height: 12.5vw;
	display: flex;
	align-items: center;
	font-size: 4.0625vw;
	font-family: "Delius";
	justify-content: center;
	clip-path: var(--squircle-small);
	background: #26658b;
}

.-redact-key-row,
.-notes-card-type {
	display: flex;
	gap: 1.5625vw;
	align-items: center;
}

.-notes-card-meta {
	display: flex;
	height: 12.5vw;
	gap: 1.5625vw;
	align-items: center;
	clip-path: var(--squircle);
	margin: 3.125vw 3.125vw 0;
	background: var(--surface);
	justify-content: space-between;
}

.-note-card-type-icon {
	width: 9.375vw;
	height: 9.375vw;
	position: relative;
	border-radius: 50%;
	color: var(--note-type);
	background: var(--dimmer);
	border: 0.9375vw solid #0000;
	margin: 1.5625vw 0 1.5625vw 1.5625vw;
}

.-note-card-type-text {
	font-size: 3.4375vw;
	color: var(--note-type);
}

.-note-card .-vertical-divider {
	margin: 1.5625vw 0;
	background: linear-gradient(180deg, #0000, rgb(255 255 255 / 30%), #0000);
}

.-note-card {
	display: flex;
	gap: 3.125vw;
	position: relative;
	flex-flow: column;
	margin: 0 3.125vw;
	scroll-snap-align: center;
	clip-path: var(--squircle);
	min-width: -webkit-fill-available;
	background: rgb(150 210 255 / 10%);
}

.-note-card-content {
	height: 37.5vw;
	line-height: 5vw;
	color: #e5e5e5;
	font-size: 3.75vw;
	border-style: solid;
	font-family: "Nunito";
	overflow: hidden auto;
	white-space: pre-wrap;
	border-color: #0000;
	clip-path: var(--squircle);
	margin: 0 3.125vw 3.125vw;
	background: var(--surface);
	border-width: 3.125vw 4.6875vw;
}

.-note-card-date {
	color: #b5b5b5;
	font-size: 3.125vw;
	font-family: "Delius";
	margin: 0 4.6875vw 0 0;
}

.-note-card-pending {
	display: flex;
	height: 6.25vw;
	padding: 0 2.34375vw;
	align-items: center;
	font-size: 3.125vw;
	font-family: "Delius";
	clip-path: var(--squircle-small);
	color: #ffda66;
	background: rgb(255 218 102 / 10%);
}

.-note-card.---locked-note .-note-card-content {
	filter: blur(1.25vw);
	user-select: none;
}

.-card {
	z-index: 1;
	display: flex;
	isolation: isolate;
	position: relative;
	flex-flow: column;
	margin: 0 3.125vw;
	width: -webkit-fill-available;
	height: -webkit-fill-available;
}

.-card::before {
	content: "";
	z-index: -1;
	position: absolute;
	pointer-events: none;
	inset: 10.9375vw 0 0;
	clip-path: var(--squircle);
	background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--card-hex) 25%, transparent), transparent 25%), var(--surface);
}

.-card-tray {
	z-index: 30;
	width: 100%;
	display: flex;
	position: absolute;
	flex-flow: column;
	pointer-events: none;
	scrollbar-width: none;
	inset: 10.9375vw 0 0;
	overflow: hidden auto;
	scroll-behavior: smooth;
	background: transparent;
	scroll-snap-type: y mandatory;
	height: -webkit-fill-available;
}

.-card-tray-overcast {
	width: 100%;
	min-height: -webkit-fill-available;
	align-items: center;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	position: relative;
	pointer-events: none;
}

.-card-tray-media {
	width: 100%;
	display: flex;
	position: relative;
	isolation: isolate;
	align-items: center;
	pointer-events: auto;
	flex-direction: column;
	scroll-snap-stop: always;
	scroll-snap-align: center;
	justify-content: flex-start;
	min-height: -webkit-fill-available;
}

.-card-tray-media::before {
	top: 0;
	left: 0;
	z-index: 2;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	background-size: cover;
	clip-path: var(--squircle);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: var(--app-theme);
	background-image: var(--tray-media-image, none);
}

.-card .-card-tray .-horizontal-divider {
	pointer-events: auto;
	margin: var(--divider-top) 4.6875vw 0;
	background: linear-gradient(90deg, #0000, var(--card-hex), #0000);
}

.-card-tray .-horizontal-divider::before {
	top: 0;
	content: "";
	z-index: 40;
	height: 25vw;
	position: relative;
	border-radius: 50%;
	aspect-ratio: 1/1;
	pointer-events: auto;
}

.-card-tray .-horizontal-divider::after {
	top: 0;
	content: "";
	z-index: 40;
	height: 2.5vw;
	width: 9.375vw;
	position: absolute;
	pointer-events: none;
	border-radius: 6.25vw;
	margin: -0.9375vw auto;
	background: var(--card-hex);
	transition: margin 0.3s, background 0.3s;
	box-shadow: -0.3125vw -0.3125vw 0.9375vw #00000055;
}

.-card-faces {
	z-index: 50;
	display: flex;
	margin: 0 auto;
	width: fit-content;
	position: relative;
	align-items: center;
	height: fit-content;
}

.-card-face {
	display: flex;
	position: relative;
	aspect-ratio: 1/1;
	border-radius: 50%;
	min-height: 21.875vw;
	align-items: flex-end;
	justify-content: center;
	border: 1.5625vw solid #0000;
	background-color: var(--dimmer);
}

.-card-face > .material-symbols-rounded {
	width: 100%;
	height: 100%;
	display: flex;
	color: #0000;
	align-items: center;
	justify-content: center;
	background-size: cover;
	border-radius: inherit;
	background-color: #1b1b1b;
	background-repeat: no-repeat;
	background-position: center;
}

.-card-bolt {
	z-index: 3;
	display: flex;
	position: absolute;
	align-items: center;
	aspect-ratio: 1/1;
	border-radius: 50%;
	justify-content: center;
	background: #1b1b1b;
	width: var(--bolt-width);
	color: var(--bolt-color);
	border: 1.25vw solid var(--dimmer);
	margin: 0 0 0 calc((100% - var(--bolt-width))/2);
}

.-card-bolt .material-symbols-rounded {
	font-size: 6.875vw;
}

.-card-punches {
	z-index: 2;
	display: flex;
	position: relative;
	height: fit-content;
	align-items: center;
	margin: -9.375vw 1.5625vw 0;
	width: -webkit-fill-available;
	justify-content: space-between;
}

.-card-punch-holder {
	display: flex;
	gap: 1.5625vw;
	align-items: center;
}

.-card-capsule {
	display: flex;
	gap: 1.5625vw;
	text-align: right;
	width: fit-content;
	min-height: 12.5vw;
	position: relative;
	line-height: 8.75vw;
	align-items: center;
	min-width: fit-content;
	justify-content: center;
	margin: 3.125vw auto 0;
	padding: 0 3.125vw 0 0;
	clip-path: var(--squircle);
	background: var(--surface);
}

.-card-capsule-icon {
	width: 9.375vw;
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: inherit;
	margin: auto 0 auto 1.5625vw;
	border: 0.3125vw solid #0000;
}

.-card-capsule .material-symbols-rounded {
	font-size: 7.5vw;
	color: var(--card-hex);
}

.-card-capsule-text {
	display: flex;
	color: #0000;
	font-size: 6.25vw;
	align-items: center;
	font-family: "Slackey";
	justify-content: center;
	letter-spacing: -0.15625vw;
	background: linear-gradient(45deg, var(--card-hex), #ffffff);
	-webkit-background-clip: text;
}

.-card-names {
	height: 10vw;
	display: flex;
	color: #fff;
	gap: 1.5625vw;
	font-weight: 500;
	font-size: 6.25vw;
	overflow: hidden;
	white-space: pre;
	min-height: 9.375vw;
	align-items: center;
	padding: 0 4.6875vw;
	text-overflow: ellipsis;
	justify-content: space-evenly;
	text-shadow: .15625vw .15625vw .46875vw #000;
}

.-card-names-left {
	width: 50%;
	display: flex;
	overflow: hidden;
	white-space: pre;
	position: relative;
	text-overflow: ellipsis;
	justify-content: flex-end;
}

.-card-names-right {
	width: 50%;
	display: flex;
	overflow: hidden;
	white-space: pre;
	position: relative;
	text-overflow: ellipsis;
	justify-content: flex-start;
}

.-card-names .---active-name {
	color: var(--card-hex);
}

.-card-stats {
	gap: 1.5625vw;
	display: flex;
	min-height: 5vw;
	align-items: end;
	color: #b0a890;
	position: relative;
	font-size: 3.4375vw;
	justify-content: center;
}

.-card-stats-left {
	width: 50%;
	text-align: right;
	position: relative;
}

.-card-stats-right {
	width: 50%;
	overflow: auto;
	text-align: left;
	white-space: pre;
	position: relative;
	padding: 0 1.25vw;
	display: inline-block;
	text-overflow: ellipsis;
	color: var(--card-hex);
	border-left: 0.46875vw solid var(--card-hex);
}

.-card .-horizontal-divider {
	position: relative;
	margin: 3.125vw 4.6875vw 0;
}

.-card-face-scrub-box {
	z-index: 1;
	display: flex;
	width: fit-content;
	flex-flow: column;
	height: fit-content;
	align-items: center;
	justify-content: flex-start;
	margin: 1.5625vw auto 3.125vw;
}

.-card-face-scrub {
	display: flex;
	height: 15.625vw;
	overflow: visible;
	position: relative;
	touch-action: pan-y;
	align-items: center;
	justify-content: center;
	width: -webkit-fill-available;
}

.-card-face-scrub-circle {
	top: 50%;
	overflow: hidden;
	position: absolute;
	border-radius: 50%;
	background: var(--dimmer);
	border: 1.25vw solid #0000;
	transform: translate(-50%, -50%);
	transition: left 0.25s, width 0.25s, height 0.25s, opacity 0.25s;
}

.-card-face-scrub-circle:nth-child(1) {
	left: calc(50% - 8.594vw);
	width: 10.9375vw;
	height: 10.9375vw;
	opacity: 1;
}

.-card-face-scrub-circle:nth-child(2) {
	left: 50%;
	width: 15.625vw;
	height: 15.625vw;
	opacity: 1;
	z-index: 3;
}

.-card-face-scrub-circle:nth-child(3) {
	left: calc(50% + 8.594vw);
	width: 10.9375vw;
	height: 10.9375vw;
	opacity: 1;
}

.-card-face-scrub-circle .material-symbols-rounded {
	width: 100%;
	height: 100%;
	display: flex;
	color: var(--card-hex, #b4c5d3);
	font-size: 7.5vw;
	align-items: center;
	justify-content: center;
	background-size: cover;
	border-radius: inherit;
	background-color: #1b1b1b;
	background-repeat: no-repeat;
	background-position: center;
}

.-card-face-flight {
	z-index: 80;
	width: 12.5vw;
	height: 12.5vw;
	display: flex;
	overflow: hidden;
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: var(--dimmer);
	border: 1.25vw solid #0000;
}

.-card-face-flight .material-symbols-rounded {
	color: #0000;
	background-size: cover;
	border-radius: inherit;
	background-color: #1b1b1b;
	background-repeat: no-repeat;
	background-position: center;
}

.-answer-card {
	width: 93.75vw;
	display: flex;
	min-height: 93.75vw;
	position: relative;
	flex-flow: column;
	justify-content: center;
	clip-path: var(--squircle);
	background: var(--surface);
	padding: 4.6875vw;
}

.-answer-card-head {
	gap: 3.125vw;
	display: flex;
	align-items: center;
	margin: 0 0 4.6875vw;
}

.-answer-card-host {
	width: 12.5vw;
	height: 12.5vw;
	display: flex;
	min-width: 12.5vw;
	overflow: hidden;
	position: relative;
	border-radius: 50%;
	background: var(--dimmer);
	border: .9375vw solid #0000;
}

.-answer-card-host .material-symbols-rounded {
	color: #0000;
	background-size: cover;
	border-radius: inherit;
	background-color: #1b1b1b;
	background-repeat: no-repeat;
	background-position: center;
}

.-answer-card-heading {
	gap: .625vw;
	display: flex;
	color: #fff;
	flex-flow: column;
}

.-answer-card-heading b {
	font-size: 4.0625vw;
}

.-answer-card-heading span {
	color: #999;
	font-size: 3.125vw;
}

.-answer-card-copy {
	color: #e5e5e5;
	line-height: 6.25vw;
	font-size: 4.0625vw;
	white-space: pre-wrap;
}

.-answer-card.---answer-locked .-answer-card-copy {
	filter: blur(2.1875vw);
	user-select: none;
}

.-answer-card-lock {
	inset: 0;
	z-index: 3;
	gap: 1.5625vw;
	display: flex;
	color: #fff;
	position: absolute;
	text-align: center;
	align-items: center;
	flex-flow: column;
	justify-content: center;
	background: rgb(0 0 0 / 18%);
	text-shadow: .15625vw .15625vw .46875vw #000;
}

.-answer-card-lock .material-symbols-rounded {
	width: 15.625vw;
	height: 15.625vw;
	color: #ffda66;
	font-size: 10vw;
}

.-answer-card-lock b {
	font-size: 5vw;
}

.-answer-card-lock span:last-child {
	max-width: 65.625vw;
	line-height: 4.6875vw;
	font-size: 3.125vw;
}

.-answer-card.---answer-pending,
.-answer-card.---answer-empty {
	gap: 3.125vw;
	color: #b5b5b5;
	text-align: center;
	align-items: center;
}

.-answer-card.---answer-pending .material-symbols-rounded,
.-answer-card.---answer-empty .material-symbols-rounded {
	width: 18.75vw;
	height: 18.75vw;
	color: #78d9ff;
	font-size: 11.25vw;
}

.---fanbase-settings .-card-face-scrub-box {
	display: none;
}

/* AMA empty state stays inside the HiverGo card vocabulary. */

.-card-empty-state-section {
	padding: 3.125vw;
}

.-card-empty-state {
	gap: 3.125vw;
	width: 100%;
	display: flex;
	min-height: 68.75vw;
	padding: 6.25vw;
	text-align: center;
	align-items: center;
	flex-flow: column;
	justify-content: center;
	clip-path: var(--squircle);
	background: var(--surface);
}

.-card-empty-state-icon {
	width: 18.75vw;
	height: 18.75vw;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: var(--dimmer);
	border: 1.5625vw solid #0000;
}

.-card-empty-state-icon .material-symbols-rounded {
	color: #78d9ff;
	font-size: 11.25vw;
}

.-card-empty-state-title {
	color: #fff;
	font-size: 5vw;
	font-weight: 700;
}

.-card-empty-state-copy {
	color: #b5b5b5;
	max-width: 75vw;
	line-height: 5.3125vw;
	font-size: 3.4375vw;
}

.-hiver-utility-card {
	min-height: 125vw;
}

.-hiver-utility-card .-hiver-utility-content {
	justify-content: center;
}

.-hiver-utility-card > .-card-tray {
	opacity: 0;
	pointer-events: none;
}