/* Titan Amino Age Gate overlay — matches theme palette. */

.rzag {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.rzag__shroud {
	position: absolute;
	inset: 0;
	background: rgba(5, 0, 16, 0.92);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
}
.rzag__panel {
	position: relative;
	max-width: 480px;
	width: 100%;
	background: linear-gradient(160deg, #0B1232 0%, #060A1E 100%);
	border: 1px solid rgba(0, 212, 255, 0.42);
	border-radius: 28px;
	padding: 0 2rem 2rem;
	color: #FFFFFF;
	text-align: center;
	box-shadow: 0 0 64px rgba(192, 38, 211, 0.4), 0 0 0 1px rgba(0, 212, 255, 0.08) inset;
	animation: rzag-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
	overflow: hidden;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(192, 38, 211, 0.5) transparent;
}
@keyframes rzag-in { from { opacity: 0; transform: translateY(20px) scale(0.96); } }

.rzag__hero {
	margin: 0 -2rem 0;
	position: relative;
	width: calc(100% + 4rem);
	aspect-ratio: 480 / 280;
	overflow: hidden;
	border-radius: 28px 28px 0 0;
}
.rzag__hero picture,
.rzag__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	display: block;
}
.rzag__hero-grad {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(5, 0, 16, 0) 0%, rgba(5, 0, 16, 0) 45%, rgba(21, 8, 41, 0.85) 92%, #0B1232 100%),
		linear-gradient(135deg, rgba(192, 38, 211, 0.18) 0%, rgba(110, 38, 255, 0.18) 100%);
	pointer-events: none;
}
/* keep the panel inner content spacing right now that hero is full-bleed */
.rzag__panel > .rzag__eyebrow,
.rzag__panel > .rzag__title,
.rzag__panel > .rzag__body,
.rzag__panel > .rzag__ack,
.rzag__panel > .rzag__actions,
.rzag__panel > .rzag__legal {
	position: relative;
	z-index: 1;
}
.rzag__panel > .rzag__eyebrow { margin-top: 1.5rem; }
.rzag__eyebrow {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #00D4FF;
	margin: 0 0 0.75rem;
}
.rzag__title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	background: linear-gradient(135deg, #00D4FF, #C026D3);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.rzag__body { color: #DCE6FF; font-size: 0.875rem; line-height: 1.7; margin: 0 0 1.5rem; }
.rzag__ack {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px;
	background: rgba(0, 212, 255, 0.06);
	border: 1px solid rgba(0, 212, 255, 0.22);
	border-radius: 14px;
	cursor: pointer;
	text-align: left;
	margin-bottom: 1.5rem;
}
.rzag__ack input { width: 20px; height: 20px; margin-top: 2px; accent-color: #C026D3; cursor: pointer; flex-shrink: 0; }
.rzag__ack span { font-size: 0.8125rem; color: #DCE6FF; line-height: 1.6; }
.rzag__actions { display: flex; flex-direction: column; gap: 0.75rem; }
.rzag__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0.875rem 1.5rem;
	border: none;
	border-radius: 9999px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: transform 280ms ease, box-shadow 280ms ease, background 280ms ease;
}
.rzag__btn--gold { background: linear-gradient(135deg, #00D4FF, #1EA8FF); color: #000; box-shadow: 0 0 24px rgba(0, 212, 255, 0.4); cursor: pointer; }
.rzag__btn--gold:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-2px); box-shadow: 0 0 32px rgba(0, 212, 255, 0.6); }
/* Disabled state: explicit match on BOTH the boolean attribute AND
 * aria-disabled="true" so the styles can't desync. The corresponding
 * "enabled" rule below forces cursor:pointer back when neither holds. */
.rzag__btn--gold:disabled,
.rzag__btn--gold[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.rzag__btn--gold:not(:disabled):not([aria-disabled="true"]) { cursor: pointer; pointer-events: auto; }
.rzag__btn--ghost { background: transparent; color: #9DB0E8; box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.22); }
.rzag__btn--ghost:hover { color: #00D4FF; box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.42); }
.rzag__legal { color: #6B7DB8; font-size: 0.6875rem; margin: 1.5rem 0 0; line-height: 1.6; }